/* ============================================================
   NuptiaLogos — Styles centralisés (3 apps, 1 base)
   Utilise Bootstrap 5.3 + surcharges simples via CSS custom properties.
   ============================================================ */

/* ── Tokens de base (défauts = NuptiaLogos / Gestion) ── */
:root {
    --nl-primary: #0B1D51;
    --nl-secondary: #C0C0C0;
    --nl-tertiary: #FFFFFF;
    --nl-bg: #F0F0F0;
    --nl-gradient: none;
    --nl-font-heading: 'Inter', sans-serif;
    --nl-font-body: 'Inter', sans-serif;
    --nl-radius: 0.75rem;
    --nl-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    --nl-shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.10);
}

/* ── App : Mariage (NMDM) ── */
[data-app="mariage"] {
    --nl-primary: #663399;
    --nl-secondary: #FF9900;
    --nl-tertiary: #E6DEF6;
    --nl-bg: #FAF9F6;
    --nl-gradient: linear-gradient(135deg, #663399, #FF9900);
    --nl-font-heading: 'Alfarn', 'Cormorant Garamond', serif;
    --nl-font-body: 'Avenir LT Pro', 'Inter', sans-serif;
}

/* ── App : Funérailles (NDA) ── */
[data-app="adieu"] {
    --nl-primary: #1E3A5F;
    --nl-secondary: #F4E4C1;
    --nl-tertiary: #F8F5F0;
    --nl-bg: #F5F5F5;
    --nl-gradient: none;
    --nl-font-heading: 'Cormorant Garamond', serif;
    --nl-font-body: 'Inter', sans-serif;
}

/* ══════════════════════════════════════════════════
   GLOBAL
   ══════════════════════════════════════════════════ */

body {
    font-family: var(--nl-font-body);
    background-color: var(--nl-bg);
    color: #333;
    /* Safe area insets pour les téléphones à encoche (iPhone X+, Android notch) */
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

h1, h2, h3, h4, h5, h6,
.font-heading {
    font-family: var(--nl-font-heading);
}

a { color: var(--nl-primary); }
a:hover { opacity: 0.8; }

/* ══════════════════════════════════════════════════
   NAVBAR
   ══════════════════════════════════════════════════ */

.navbar {
    font-family: var(--nl-font-body);
    letter-spacing: 0.01em;
}
.navbar-brand {
    font-family: var(--nl-font-heading);
    color: var(--nl-primary) !important;
}
.navbar-logo-wide {
    height: auto;
    max-height: 2.5em;
    width: auto;
    object-fit: contain;
}
.navbar-logo-square {
    height: auto;
    max-height: 2.5em;
    width: auto;
    object-fit: contain;
}
.navbar .nav-link {
    color: #555;
    font-weight: 500;
    font-size: 0.9rem;
    padding: 0.5rem 1rem !important;
    border-radius: var(--nl-radius);
    transition: all 0.2s ease;
}
.navbar .nav-link:hover,
.navbar .nav-link.active {
    color: var(--nl-primary);
    background-color: rgba(0, 0, 0, 0.04);
}

/* ══════════════════════════════════════════════════
   BUTTONS — Bootstrap overrides via --nl tokens
   ══════════════════════════════════════════════════ */

.btn-primary {
    background-color: var(--nl-primary);
    border-color: var(--nl-primary);
    color: #fff;
}
.btn-primary:hover {
    opacity: 0.9;
}
.btn-outline-primary {
    color: var(--nl-primary);
    border-color: var(--nl-primary);
}
.btn-outline-primary:hover {
    background-color: var(--nl-primary);
    border-color: var(--nl-primary);
    color: #fff;
}

.btn-secondary {
    background-color: var(--nl-secondary);
    border-color: var(--nl-secondary);
}

/* Bouton gradient (pour mariage surtout) */
.btn-gradient {
    background: var(--nl-gradient, var(--nl-primary));
    border: none;
    color: #fff;
    font-weight: 600;
    padding: 0.6rem 1.5rem;
    border-radius: var(--nl-radius);
    transition: opacity 0.2s;
}
.btn-gradient:hover {
    opacity: 0.9;
    color: #fff;
}

/* ══════════════════════════════════════════════════
   CARDS — Style épuré inspiré des maquettes
   ══════════════════════════════════════════════════ */

.card {
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: var(--nl-radius);
    box-shadow: var(--nl-shadow);
    transition: box-shadow 0.25s, transform 0.25s;
}
.card:hover {
    box-shadow: var(--nl-shadow-lg);
}

.card-header-accent {
    background-color: var(--nl-primary);
    color: #fff;
    border-radius: var(--nl-radius) var(--nl-radius) 0 0 !important;
    padding: 1rem 1.25rem;
}

/* Card sélectionnée (ex. lectures, chants) */
.card.card-selected {
    border-color: var(--nl-primary);
    border-width: 2px;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
}

/* ══════════════════════════════════════════════════
   HERO / BANNER — Pour le dashboard mariage/adieu
   ══════════════════════════════════════════════════ */

.hero-banner {
    background: var(--nl-gradient, var(--nl-primary));
    color: #fff;
    border-radius: var(--nl-radius);
    padding: 3rem 2rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.hero-banner h1 {
    font-family: var(--nl-font-heading);
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}
.hero-banner .subtitle {
    font-size: 0.95rem;
    opacity: 0.85;
    text-transform: uppercase;
    letter-spacing: 0.15em;
}
.hero-logo {
    height: 48px;
    max-height: 48px;
    width: auto;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

/* Compteur style mariage */
.countdown-item {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    margin: 0 1rem;
}
.countdown-item .number {
    font-size: 2.5rem;
    font-weight: 700;
    font-family: var(--nl-font-heading);
}
.countdown-item .label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.7;
}

/* ══════════════════════════════════════════════════
   PROGRESS — Barre de progression cérémonie
   ══════════════════════════════════════════════════ */

.progress {
    height: 0.5rem;
    border-radius: 1rem;
    background-color: var(--nl-tertiary);
}
.progress-bar {
    background: var(--nl-gradient, var(--nl-primary));
    border-radius: 1rem;
}

/* Steps indicator (Célébrant ✓, Lectures ✓, ...) */
.steps-indicator {
    display: flex;
    justify-content: space-between;
    margin-top: 1rem;
}
.step-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: #999;
}
.step-item.completed {
    color: var(--nl-primary);
    font-weight: 600;
}
.step-item .step-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid currentColor;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
}
.step-item.completed .step-dot {
    background-color: var(--nl-primary);
    color: #fff;
    border-color: var(--nl-primary);
}

/* ══════════════════════════════════════════════════
   FORMS — Bootstrap form overrides
   ══════════════════════════════════════════════════ */

/* Indicateur visuel pour les champs obligatoires
   Bootstrap 5 form theme ajoute .required sur les labels required */
label.required::after {
    content: " *";
    color: #dc3545;
    font-weight: 700;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--nl-primary);
    box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.05);
}

.form-check-input:checked {
    background-color: var(--nl-primary);
    border-color: var(--nl-primary);
}

fieldset {
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: var(--nl-radius);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    background: #fff;
}
fieldset legend {
    font-family: var(--nl-font-heading);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--nl-primary);
    padding: 0 0.5rem;
    width: auto;
    float: none;
}

/* ══════════════════════════════════════════════════
   TABLES — Propres et lisibles
   ══════════════════════════════════════════════════ */

.table thead th {
    background-color: var(--nl-primary);
    color: #fff;
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border: none;
}
.table td {
    vertical-align: middle;
}

/* ══════════════════════════════════════════════════
   SIDEBAR — Pour la bibliothèque / déroulement
   ══════════════════════════════════════════════════ */

.sidebar {
    background: #fff;
    border-right: 1px solid rgba(0, 0, 0, 0.08);
    min-height: calc(100vh - 62px);
}
.sidebar .nav-link {
    color: #555;
    padding: 0.6rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.sidebar .nav-link:hover,
.sidebar .nav-link.active {
    background-color: var(--nl-tertiary);
    color: var(--nl-primary);
    font-weight: 600;
}
.sidebar .nav-link i {
    width: 1.2rem;
    text-align: center;
}

/* ══════════════════════════════════════════════════
   BADGE / TAGS
   ══════════════════════════════════════════════════ */

.badge-app {
    background-color: var(--nl-primary);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.3em 0.7em;
    border-radius: 2rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.badge-soft {
    background-color: var(--nl-tertiary);
    color: var(--nl-primary);
}

/* ══════════════════════════════════════════════════
   SECTION TITLES
   ══════════════════════════════════════════════════ */

.section-title {
    font-family: var(--nl-font-heading);
    font-weight: 700;
    color: var(--nl-primary);
    margin-bottom: 0.5rem;
}
.section-subtitle {
    color: #777;
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

/* ══════════════════════════════════════════════════
   QUOTE / CITATION (footer mariage)
   ══════════════════════════════════════════════════ */

.quote-block {
    font-family: var(--nl-font-heading);
    font-style: italic;
    font-size: 1.1rem;
    color: var(--nl-primary);
    text-align: center;
    padding: 2rem 1rem;
}
.quote-block .author {
    font-style: normal;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-top: 0.75rem;
    opacity: 0.6;
}

/* ══════════════════════════════════════════════════
   DEROULE — Timeline-like layout
   ══════════════════════════════════════════════════ */

.deroule-period {
    position: relative;
    padding-left: 2rem;
    margin-bottom: 2rem;
}
.deroule-period::before {
    content: '';
    position: absolute;
    left: 0.5rem;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--nl-tertiary);
    border-radius: 2px;
}
.deroule-period-title {
    font-family: var(--nl-font-heading);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--nl-primary);
    margin-bottom: 1rem;
}
.deroule-item {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--nl-radius);
    padding: 1rem 1.25rem;
    margin-bottom: 0.75rem;
    transition: box-shadow 0.2s, border-color 0.2s;
    cursor: pointer;
}
.deroule-item:hover {
    box-shadow: var(--nl-shadow);
}
.deroule-item.active {
    border-color: var(--nl-primary);
    box-shadow: 0 0 0 1px var(--nl-primary), var(--nl-shadow);
}
.deroule-item.saving {
    opacity: 0.7;
    pointer-events: none;
}
.deroule-item.saved {
    border-color: var(--bs-success, #198754);
    transition: border-color 0.3s ease;
}
.deroule-dot {
    position: absolute;
    left: calc(0.5rem - 6px);
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--nl-primary);
    border: 3px solid var(--nl-bg);
}

/* ══════════════════════════════════════════════════
   LIBRARY CARD — Chant / Texte
   ══════════════════════════════════════════════════ */

.library-card {
    border-radius: var(--nl-radius);
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
}
.library-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--nl-shadow-lg);
}
.library-card .card-img-top {
    height: 180px;
    object-fit: cover;
}
.library-card.selected {
    border: 2px solid var(--nl-primary);
}
.library-card.selected .card-img-overlay {
    background: rgba(0, 0, 0, 0.3);
}
.library-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 180px;
    font-size: 3rem;
    text-decoration: none;
}
.library-card-icon:hover {
    opacity: 0.85;
}
.yt-facade {
    cursor: pointer;
    overflow: hidden;
}
.yt-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 1.6rem;
    transition: transform 0.15s, background 0.15s;
}
.yt-facade:hover .yt-play-btn {
    background: var(--nl-primary);
    transform: translate(-50%, -50%) scale(1.1);
}
.library-card iframe.card-img-top {
    height: 180px;
    border: none;
}

/* ══════════════════════════════════════════════════
   AUDIO PLAYER BAR — Style sobre
   ══════════════════════════════════════════════════ */

.player-bar {
    background: var(--nl-primary);
    color: #fff;
    border-radius: var(--nl-radius);
    padding: 0.75rem 1.25rem;
}
.player-bar .btn {
    color: #fff;
}

/* ══════════════════════════════════════════════════
   RESPONSIVE UTILITIES
   ══════════════════════════════════════════════════ */

/* — Cible tactile minimale 44px (Apple HIG / WCAG 2.5.5) — */
.btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn.btn-sm {
    min-height: 36px;
}
.nav-link, .dropdown-item {
    min-height: 44px;
    display: flex;
    align-items: center;
}
/* Aligner la checkbox avec le texte du label + zone de tap agrandie */
.form-check {
    display: flex;
    align-items: flex-start;
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
}
.form-check-input {
    margin-top: 0.35em; /* aligner visuellement avec la 1re ligne du label */
    flex-shrink: 0;
}
.form-check-label {
    cursor: pointer;
}

/* — Footer : safe area bottom pour les téléphones à encoche — */
footer {
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
}

/* — Navbar : safe area top en mode standalone PWA — */
@media (display-mode: standalone) {
    .navbar.sticky-top {
        padding-top: env(safe-area-inset-top);
    }
}

/* — Très petit écran (≤ 576px) — */
@media (max-width: 576px) {
    /* Typographie */
    .hero-banner h1 { font-size: 1.5rem; }
    .hero-banner .subtitle { font-size: 0.8rem; letter-spacing: 0.08em; }
    .countdown-item .number { font-size: 1.5rem; }
    .countdown-item { margin: 0 0.5rem; }
    .section-title { font-size: 1.2rem; }
    .section-subtitle { font-size: 0.82rem; }

    /* Container : moins de padding latéral */
    .container, .container-fluid { padding-left: 12px; padding-right: 12px; }

    /* Hero banner */
    .hero-banner { padding: 1.5rem 1rem; }

    /* Cards : padding compact */
    .card-body { padding: 1rem; }
    .card-header-accent { padding: 0.75rem 1rem; }

    /* Fieldsets */
    fieldset { padding: 0.75rem; }
    fieldset legend { font-size: 1rem; }

    /* Breadcrumb compact */
    .breadcrumb { font-size: 0.82rem; }

    /* Formulaires : boutons empilés */
    .d-flex.justify-content-between.align-items-center > .btn,
    .d-flex.justify-content-between.align-items-center > a.btn {
        font-size: 0.85rem;
        padding: 0.5rem 0.75rem;
    }

    /* Input groups : empiler si besoin */
    .input-group-stack-mobile {
        flex-direction: column;
    }
    .input-group-stack-mobile > * {
        border-radius: var(--nl-radius) !important;
        margin-bottom: 0.5rem;
    }

    /* Tables : texte plus petit */
    .table:not(.table-mobile-cards) { font-size: 0.82rem; }
    .table:not(.table-mobile-cards) thead th { font-size: 0.75rem; padding: 0.5rem; }
    .table:not(.table-mobile-cards) td { padding: 0.5rem; }

    /* Steps indicator : wrap + compact */
    .steps-indicator { flex-wrap: wrap; gap: 0.5rem; }

    /* Deroule items plus compacts */
    .deroule-item { padding: 0.75rem 1rem; }
    .deroule-period { padding-left: 1.5rem; }

    /* Boutons d'action en pied de formulaire */
    .btn-actions-mobile {
        flex-direction: column;
        gap: 0.5rem !important;
    }
    .btn-actions-mobile .btn { width: 100%; }

    /* Alerte : texte plus compact */
    .alert { font-size: 0.88rem; padding: 0.75rem; }

    /* Badge compact */
    .badge, .badge-app { font-size: 0.65rem; }

    /* Navbar toggler plus visible */
    .navbar-toggler { padding: 0.4rem 0.6rem; }

    /* Footer compact */
    footer .row > div { text-align: center !important; margin-bottom: 0.5rem; }
    footer .row > div:last-child { margin-bottom: 0; }
    footer a { display: inline-block; margin: 0.25rem 0; }

    /* Progress bar labels */
    .progress + .small, .progress + span.small { font-size: 0.75rem; }
}

/* — Mobile (≤ 768px) — */
@media (max-width: 768px) {
    /* Typographie */
    .hero-banner h1 { font-size: 1.8rem; }
    .countdown-item .number { font-size: 1.8rem; }
    .section-title { font-size: 1.4rem; }

    /* Sidebar (bibliothèque, layout) */
    .sidebar {
        min-height: auto;
        border-right: none;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    }

    /* Deroule sidebar : désactiver sticky sur mobile */
    .deroule-sidebar {
        position: static;
        max-height: none;
        overflow-y: visible;
        margin-bottom: 1.5rem;
    }

    /* Fieldsets : padding réduit sur mobile */
    fieldset {
        padding: 1rem;
    }

    /* Cartes : pas d'effet hover sur touch (évite le piège de tap) */
    .card:hover {
        box-shadow: var(--nl-shadow);
    }

    /* Tables : scroll horizontal plutôt que texte tronqué */
    .table-responsive-auto {
        overflow-x: auto;
    }

    /* ── Tables responsive en cartes empilées ── */
    .table-responsive:has(.table-mobile-cards) {
        overflow-x: visible;
    }
    .table-mobile-cards {
        border: none;
    }
    .table-mobile-cards thead {
        display: none;
    }
    .table-mobile-cards tbody tr {
        display: block;
        background: #fff;
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: var(--nl-radius);
        padding: 0.75rem;
        margin-bottom: 0.75rem;
        box-shadow: var(--nl-shadow);
    }
    .table-mobile-cards tbody tr:hover {
        background: #fff;
    }
    .table-mobile-cards tbody td {
        display: flex;
        align-items: baseline;
        padding: 0.25rem 0;
        border: none;
        gap: 0.5rem;
    }
    .table-mobile-cards tbody td:empty,
    .table-mobile-cards tbody td:blank {
        display: none;
    }
    .table-mobile-cards tbody td::before {
        content: attr(data-label);
        flex-shrink: 0;
        width: 7rem;
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--nl-primary);
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }
    /* Cellule actions : pleine largeur, alignée à droite */
    .table-mobile-cards tbody td.td-actions {
        justify-content: flex-end;
        padding-top: 0.5rem;
        margin-top: 0.25rem;
        border-top: 1px solid rgba(0, 0, 0, 0.06);
    }
    .table-mobile-cards tbody td.td-actions::before {
        display: none;
    }
    /* Champs de formulaire dans les cartes : pleine largeur */
    .table-mobile-cards tbody td .form-select,
    .table-mobile-cards tbody td .form-control {
        min-width: 0;
        flex: 1;
    }

    /* Auth container : pleine largeur sur petits écrans */
    .auth-container {
        margin: 1rem auto;
    }
    .auth-card {
        padding: 1.5rem;
    }

    /* Boutons full-width dans les formulaires sur mobile */
    .btn-mobile-full {
        width: 100%;
    }

    /* En-tête de page : empiler titre et actions */
    .page-header-responsive {
        flex-direction: column;
        align-items: stretch !important;
        gap: 0.75rem;
    }
    .page-header-responsive .d-flex.gap-2 {
        flex-wrap: wrap;
    }

    /* Formulaires collaborateurs : empiler les champs */
    .collaborator-form-row {
        flex-direction: column;
    }
    .collaborator-form-row > .col,
    .collaborator-form-row > [class*="col-"] {
        flex: none;
        width: 100%;
    }

    /* Micro contact card : empiler sur mobile */
    .micro-contact-responsive {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 0.5rem !important;
    }
    .micro-contact-responsive > div:last-child {
        align-self: flex-end;
    }

    /* Btn-group : un peu plus grand pour les cibles tactiles */
    .btn-group .btn { min-height: 38px; min-width: 38px; }

    /* Texte pré-formaté : overflow auto */
    .text-preformatted-mobile {
        overflow-x: auto;
        word-break: break-word;
    }

    /* Quote block compact */
    .quote-block { padding: 1.5rem 0.75rem; font-size: 1rem; }
}

/* — Tablette (≤ 992px) — */
@media (max-width: 992px) {
    /* Hero banner : padding réduit */
    .hero-banner {
        padding: 2rem 1.25rem;
    }

    /* En-tête de page avec actions */
    .page-header-responsive {
        gap: 0.75rem;
    }

    /* Celebration show: payment alert - empiler */
    .alert .d-flex { flex-wrap: wrap; gap: 0.5rem; }

    /* Library card icon plus petit sur tablette */
    .library-card-icon { height: 140px; font-size: 2.5rem; }
    .library-card .card-img-top { height: 140px; }
}

/* ══════════════════════════════════════════════════
   RÉSUMÉ sidebar (déroulement)
   ══════════════════════════════════════════════════ */

.summary-card {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--nl-radius);
    padding: 1.25rem;
}
.summary-card .summary-row {
    display: flex;
    justify-content: space-between;
    padding: 0.4rem 0;
    font-size: 0.9rem;
}
.summary-card .summary-row .value {
    font-weight: 700;
    color: var(--nl-primary);
}

/* Conseil box */
.conseil-box {
    background: var(--nl-tertiary);
    border-radius: var(--nl-radius);
    padding: 1rem;
    font-size: 0.85rem;
}
.conseil-box .icon {
    color: var(--nl-secondary);
}

/* ══════════════════════════════════════════════════
   PAGE AUTH — Login & Registration
   ══════════════════════════════════════════════════ */

.auth-container {
    max-width: 480px;
    margin: 3rem auto;
}
.auth-card {
    background: #fff;
    border-radius: var(--nl-radius);
    box-shadow: var(--nl-shadow-lg);
    padding: 2.5rem;
}
.auth-card h2 {
    font-family: var(--nl-font-heading);
    color: var(--nl-primary);
    margin-bottom: 1.5rem;
}
.auth-logo {
    height: 48px;
    max-height: 48px;
    width: auto;
    object-fit: contain;
}

/* ══════════════════════════════════════════════════
   DEROULE SIDEBAR — Sticky side panels
   ══════════════════════════════════════════════════ */

.deroule-sidebar {
    position: sticky;
    top: 80px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--nl-radius);
    padding: 1.25rem;
}

/* ══════════════════════════════════════════════════
   LIBRARY PREVIEW — Compact items in sidebar
   ══════════════════════════════════════════════════ */

.library-kind-header {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--nl-primary);
    margin-top: 0.75rem;
    margin-bottom: 0.4rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--nl-tertiary);
}
.library-kind-group:first-child .library-kind-header {
    margin-top: 0;
}

.library-preview-item {
    padding: 0.35rem 0.5rem;
    border-radius: 4px;
    font-size: 0.82rem;
    line-height: 1.3;
    transition: background 0.15s;
    cursor: pointer;
}
.library-preview-item:hover {
    background: var(--nl-tertiary);
}
.library-preview-item.highlight {
    background: rgba(var(--nl-primary-rgb, 11, 29, 81), 0.08);
    font-weight: 600;
}

.library-flat-list {
    max-height: calc(100vh - 320px);
    overflow-y: auto;
}
.library-flat-item.hidden {
    display: none;
}

/* Kind checkbox list (searchable) */
.kind-checkbox-list {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: var(--nl-radius, 0.75rem);
    padding: 0.5rem;
}
.kind-checkbox-list .form-check {
    padding: 0.25rem 0.5rem 0.25rem 1.75rem;
    border-radius: 0.25rem;
}
.kind-checkbox-list .form-check:hover {
    background: rgba(var(--nl-primary-rgb, 11, 29, 81), 0.04);
}

.library-preview-title {
    word-break: break-word;
}

/* ══════════════════════════════════════════════════
   COMMENTS — Chat thread
   ══════════════════════════════════════════════════ */

#commentsOffcanvas {
    width: 400px;
}
@media (max-width: 576px) {
    #commentsOffcanvas {
        width: 100%;
    }
}

.comment-item {
    padding: 0.75rem;
    border-radius: var(--nl-radius);
    margin-bottom: 0.5rem;
    background: var(--nl-tertiary);
    transition: background 0.15s;
}
.comment-item:hover {
    background: rgba(0, 0, 0, 0.03);
}
.comment-item.comment-own {
    background: rgba(0, 0, 0, 0.04);
}

.comment-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--nl-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    flex-shrink: 0;
}

.comment-author {
    font-size: 0.85rem;
    color: var(--nl-primary);
}

.comment-content {
    font-size: 0.9rem;
    line-height: 1.4;
    margin-top: 0.25rem;
    white-space: pre-wrap;
    word-break: break-word;
}

.comment-actions .btn {
    font-size: 0.75rem;
}

/* ══════════════════════════════════════════════════
   ROLE SELECTION MODAL
   ══════════════════════════════════════════════════ */

.modal .btn[data-role] {
    border-width: 2px;
    transition: all 0.2s ease;
}
.modal .btn[data-role]:hover {
    background-color: var(--nl-primary);
    border-color: var(--nl-primary);
    color: #fff;
}
.modal .btn[data-role]:hover small {
    color: rgba(255, 255, 255, 0.8) !important;
}