/* 04-planificare.css — Planificare servicii: carusel, navigarea între servicii, layout, tabelul de recomandări, paginare, căutare, programul final, rearanjare, mesaj, anunțuri, predică, repetiția cu tehnic.
   Fișierele din css/stiluri/ se încarcă în ordinea numerelor (templates/_stiluri.html.twig): ordinea contează în cascadă. */

/* Antet compact (Planificare servicii, Listă Servicii — clasa .pagina-antet-compact pe
   containerul paginii): carusel aproape lipit de sus, pastile mai mici, dată + AM/PM
   pe același rând. */
/* !important necesar: suprascriem utilitare Bootstrap (.py-4/.mb-4), care sunt
   ele însele definite cu !important — styles.css se încarcă ultimul, deci la
   specificitate egală + !important pe ambele părți, ordinea din fișier decide. */
/* Carusel compact */
.pagina-antet-compact .planificare-timeline {
    gap: 0.4rem;
    padding: 0.2rem 0.1rem;
}

.pagina-antet-compact .planificare-timeline-arrow {
    width: 30px;
    height: 30px;
}

.pagina-antet-compact .planificare-timeline-item {
    min-width: 150px;
    gap: 0.35rem;
    padding: 0.2rem 0.55rem;
    border-radius: 8px;
}

.pagina-antet-compact .planificare-timeline-item.is-selected {
    box-shadow: 0 3px 10px rgba(106, 122, 174, 0.25);
}

.pagina-antet-compact .planificare-timeline-date {
    font-size: 0.82rem;
}

.pagina-antet-compact .planificare-timeline-slot {
    gap: 0.2rem;
    padding: 0 0.35rem;
    font-size: 0.62rem;
    letter-spacing: 0.03em;
}

.pagina-antet-compact .planificare-timeline-label {
    font-size: 0.7rem;
}

@media (max-width: 680px) {
    .pagina-antet-compact .planificare-timeline-item {
        min-width: 0;
        padding: 0.15rem 0.45rem;
    }
}

@media (max-width: 576px) {
    .pagina-antet-compact .planificare-timeline-wrap {
        gap: 0.4rem;
    }
}

/* Planificare — timeline sărbători */
.planificare-timeline-wrap {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.planificare-timeline-arrow {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--border-medium);
    background: var(--bg-elevated);
    color: var(--text-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease;
}

.planificare-timeline-arrow:hover {
    background: rgba(106, 122, 174, 0.5);
}

.planificare-timeline {
    display: flex;
    gap: 0.6rem;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 0.4rem 0.2rem;
    flex: 1;
    min-width: 0;
    scrollbar-width: none;
}

.planificare-timeline::-webkit-scrollbar {
    display: none;
}

.planificare-timeline-item {
    flex: 0 0 auto;
    min-width: 175px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.85rem;
    border-radius: 10px;
    background: var(--overlay-weak);
    border: 1px solid var(--border-subtle);
    color: var(--text-muted);
    text-decoration: none;
    transition: all 0.2s ease;
}

.planificare-timeline-item:hover {
    border-color: rgba(106, 122, 174, 0.6);
    color: var(--text-color);
    text-decoration: none;
}

.planificare-timeline-item.is-past {
    opacity: 0.55;
}

.planificare-timeline-item.is-selected {
    background: linear-gradient(145deg, rgba(106, 122, 174, 0.35), rgba(106, 122, 174, 0.12));
    border-color: rgba(106, 122, 174, 0.9);
    color: var(--text-color);
    box-shadow: 0 6px 18px rgba(106, 122, 174, 0.25);
}

.planificare-timeline-date {
    font-weight: 700;
    font-size: 0.9rem;
    white-space: nowrap;
    flex-shrink: 0;
}

.planificare-timeline-slot {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.planificare-timeline-slot.slot-am {
    background: rgba(255, 196, 64, 0.18);
    border: 1px solid rgba(255, 196, 64, 0.55);
    color: #ffdd94;
}

[data-bs-theme="light"] .planificare-timeline-slot.slot-am,
[data-bs-theme="light"] .planificare-selected-slot.slot-am {
    background: rgba(255, 196, 64, 0.25);
    border-color: rgba(197, 138, 8, 0.6);
    color: #7a5304;
}

.planificare-timeline-slot.slot-pm {
    background: rgba(106, 122, 174, 0.22);
    border: 1px solid rgba(106, 122, 174, 0.6);
    color: #dfe3ff;
}

[data-bs-theme="light"] .planificare-timeline-slot.slot-pm,
[data-bs-theme="light"] .planificare-selected-slot.slot-pm {
    background: rgba(106, 122, 174, 0.18);
    border-color: rgba(106, 122, 174, 0.6);
    color: #33406e;
}

.planificare-timeline-label {
    font-size: 0.75rem;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1 1 auto;
    min-width: 0;
}

/* Mobil: carusel redus doar la dată + interval ("6 sep AM"), fără eticheta zilei */
@media (max-width: 680px) {
    .planificare-timeline-label {
        display: none;
    }

    .planificare-timeline-item {
        min-width: 0;
    }
}

/* Planificare — panou program selectat */
.planificare-selected-titlu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.6rem;
}

.planificare-selected-header h2 {
    margin-bottom: 0;
}

/* Serviciul anterior / următor (planificare/_nav_serviciu.html.twig, navigare-servicii.js):
   ‹ înaintea datei, › după pastila AM/PM, pe ecrane mai mari; pe telefon rămâne doar swipe-ul. */
.serviciu-nav-btn {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid var(--border-medium);
    background: var(--bg-elevated);
    color: var(--text-color);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 0.8rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease, opacity 0.2s ease;
}

.serviciu-nav-btn > svg {
    display: block;
    flex-shrink: 0;
}

@media (min-width: 768px) {
    .serviciu-nav-btn {
        display: flex;
    }

    /* observațiile de sub titlu pornesc de sub dată, nu de sub butonul ‹
       (lățimea butonului + spațiul dintre elementele din .planificare-selected-titlu) */
    .planificare-observatii-inchinare,
    .planificare-pian-absent {
        padding-left: calc(30px + 0.6rem);
    }
}

.serviciu-nav-btn:not(:disabled):hover {
    background: rgba(106, 122, 174, 0.5);
}

.serviciu-nav-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

/* Schimbarea serviciului: conținutul alunecă puțin în direcția răsfoirii și se estompează,
   iar cel nou intră din partea opusă. Doar parțial estompat — dacă încărcarea întârzie,
   pagina rămâne lizibilă. */
.serviciu-iese-prev,
.serviciu-iese-next {
    transition: transform 0.13s ease-out, opacity 0.13s ease-out;
    opacity: 0.35;
}

/* conținutul deplasat spre dreapta să nu facă pagina derulabilă pe orizontală cât ține animația */
[data-serviciu-swipe] {
    overflow-x: clip;
}

.serviciu-iese-next {
    transform: translateX(-28px);
}

.serviciu-iese-prev {
    transform: translateX(28px);
}

/* Intrarea e discretă, dar cu direcție: serviciul următor intră din dreapta, cel anterior
   din stânga, și frânează pe loc. Două căi de declanșare: clasa pusă de JS după
   încărcarea AJAX (Planificare servicii) și atributul de pe <html> pus înainte de prima
   afișare la reîncărcarea paginii (Listă Servicii) — acolo o clasă pusă la DOMContentLoaded
   ar veni după ce conținutul a apărut deja pe loc. */
.serviciu-intra-next,
html[data-serviciu-intra="next"] [data-serviciu-continut] {
    animation: serviciu-intra-din-dreapta 0.26s cubic-bezier(0.16, 0.84, 0.3, 1);
}

.serviciu-intra-prev,
html[data-serviciu-intra="prev"] [data-serviciu-continut] {
    animation: serviciu-intra-din-stanga 0.26s cubic-bezier(0.16, 0.84, 0.3, 1);
}

@keyframes serviciu-intra-din-dreapta {
    from { transform: translateX(48px); opacity: 0.15; }
    to { transform: none; opacity: 1; }
}

@keyframes serviciu-intra-din-stanga {
    from { transform: translateX(-48px); opacity: 0.15; }
    to { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .serviciu-iese-prev,
    .serviciu-iese-next {
        transition: none;
        transform: none;
    }

    .serviciu-intra-prev,
    .serviciu-intra-next,
    html[data-serviciu-intra] [data-serviciu-continut] {
        animation: none;
    }
}

.planificare-observatii-inchinare {
    margin-top: 0.15rem;
    color: var(--text-muted);
    font-style: italic;
    font-size: 0.9rem;
}

.planificare-selected-slot {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.95rem;
}

/* Pastila AM/PM compactă, în continuarea datei */
.pagina-antet-compact .planificare-selected-slot {
    gap: 0.3rem;
    padding: 0.05rem 0.5rem;
    font-size: 0.8rem;
    letter-spacing: 0.03em;
}

.planificare-selected-slot.slot-am {
    background: rgba(255, 196, 64, 0.16);
    border: 1px solid rgba(255, 196, 64, 0.55);
    color: #ffdd94;
}

.planificare-selected-slot.slot-pm {
    background: rgba(106, 122, 174, 0.2);
    border: 1px solid rgba(106, 122, 174, 0.6);
    color: #dfe3ff;
}

.planificare-selected-badge {
    display: inline-flex;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: rgba(231, 76, 60, 0.18);
    border: 1px solid rgba(231, 76, 60, 0.5);
    color: #ffdfe0;
    font-size: 0.8rem;
    font-weight: 600;
}

[data-bs-theme="light"] .planificare-selected-badge {
    background: rgba(231, 76, 60, 0.14);
    border-color: rgba(231, 76, 60, 0.4);
    color: #a8342a;
}

/* Planificare — layout 2 coloane. Pragurile de mai jos țin de lățimea zonei de conținut (container
   query pe .pagina-planificare), nu a ferestrei — meniul lateral desfăcut (248px) îngustează
   conținutul, iar sub ~1000px, cu meniul deschis, două carduri pe rând ajungeau prea înguste. */
.pagina-planificare {
    container-type: inline-size;
    container-name: pagina-planificare;
}

.planificare-columns {
    display: grid;
    grid-template-columns: minmax(0, 1150px) minmax(300px, 400px);
    grid-template-areas:
        "title title"
        "recomandari program";
    justify-content: start;
    /* row-gap redus intenționat (nu column-gap) — spațiul dintre titlu și rândul cu
       tabelul de recomandări / desfășurarea programului era prea mare; cel dintre
       cele 2 coloane alăturate rămâne neatins */
    row-gap: 0.75rem;
    column-gap: 1.5rem;
    align-items: start;
}

.planificare-selected-header {
    grid-area: title;
    min-width: 0;
}

.planificare-col-recomandari {
    grid-area: recomandari;
    min-width: 0;
}

.planificare-col-program {
    grid-area: program;
    min-width: 0;
}

/* Grid items refuză implicit să se micșoreze sub lățimea minimă a conținutului
   lor ("min-width: auto") — de-aia tabelul putea forța toată pagina să fie
   lată. Le lăsăm explicit să se strângă; ce nu mai încape derulează intern. */
.planificare-program-panel,
.planificare-mesaj-panel {
    min-width: 0;
}

#planificareRecomandari {
    overflow-x: auto;
    container-type: inline-size;
}

/* Ecran îngust: titlul zilei rămâne sus, sub el programul final și mesajul pentru
   grup stau unul lângă altul, iar tabelul de recomandări coboară sub tot restul.
   ".planificare-col-program" devine "display: contents" ca să-și trateze cele două
   panouri ca elemente proprii ale grid-ului părinte, plasabile independent prin grid-area.
   (~1110px de conținut = vechiul prag de 1450px al ferestrei, cu meniul desfăcut) */
@container pagina-planificare (max-width: 1110px) {
    .planificare-columns {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "title title"
            "program-final mesaj"
            "recomandari recomandari";
    }

    .planificare-col-program {
        display: contents;
    }

    .planificare-program-panel {
        grid-area: program-final;
    }

    .planificare-mesaj-panel {
        grid-area: mesaj;
    }
}

/* Planificare servicii și Ciornele pe tabletă / PC: panourile și spațiul dintre ele mai strânse
   (marginile paginii sunt la .main-content). Telefonul (sub 577px) are regulile lui, mai jos. */
@media (min-width: 577px) {
    .pagina-planificare .planificare-columns {
        column-gap: 1rem;
    }

    .pagina-planificare .planificare-program-panel,
    .pagina-planificare .planificare-mesaj-panel {
        padding: 0.85rem 0.9rem;
    }
}

/* Conținut îngust (telefon, sau fereastră sub ~1000px cu meniul desfăcut): programul final și
   mesajul pentru grup nu mai încap util unul lângă altul, deci stau unul sub altul — titlu, apoi
   program final, apoi mesaj, apoi tabelul de recomandări, în ordine */
@container pagina-planificare (max-width: 700px) {
    .planificare-columns {
        grid-template-columns: 1fr;
        grid-template-areas:
            "title"
            "program-final"
            "mesaj"
            "recomandari";
    }
}

/* Planificare — tabel recomandări */
.planificare-row-nume {
    color: var(--text-color);
    font-weight: 600;
}

.planificare-row-alt {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.planificare-card-volum {
    font-size: 0.78rem;
    color: var(--accent-text);
    font-weight: 600;
}

.planificare-card-numar {
    display: none;
    font-size: 0.78rem;
    color: var(--accent-text);
    font-weight: 600;
}

.planificare-card-initiale {
    font-weight: 700;
}

/* la cor, Vol + Nr e link spre pagina cântării — subliniat discret, ca să se vadă că se poate deschide */
.planificare-volum-link {
    color: inherit;
    text-decoration: underline dotted;
    text-decoration-color: color-mix(in srgb, var(--accent-text) 60%, transparent);
    text-underline-offset: 3px;
}

.planificare-volum-link:hover {
    text-decoration-style: solid;
}

.planificare-volum-link:hover .planificare-card-volum,
.planificare-volum-link:hover .planificare-card-numar {
    color: var(--text-color);
}

/* antetul scurt „Vol / Nr” — doar pe telefon (vezi media query-ul de mai jos) */
.th-volum-scurt {
    display: none;
}

/* Planificare — tabel recomandări: rânduri color-coded (verde→roșu după potrivire) */
#recomandariTable {
    border-collapse: separate;
    border-spacing: 0 4px;
}

#recomandariTable thead th {
    background: rgba(106, 122, 174, 0.18);
    color: var(--text-color);
    font-weight: 600;
    font-size: 0.88rem;
    border: none;
    padding: 0.85rem 1.9rem 0.85rem 0.9rem;
    white-space: nowrap;
    /* pe telefon „Vol / Nr” are două rânduri — celelalte titluri stau pe mijloc, nu jos */
    vertical-align: middle;
}

#recomandariTable thead th:not(.sorting_disabled) {
    padding-right: 1.9rem;
    cursor: pointer;
    transition: background 0.15s ease;
}

#recomandariTable thead th:not(.sorting_disabled):hover {
    background: rgba(106, 122, 174, 0.35);
}

#recomandariTable tbody td {
    border: none;
    padding: 0.42rem 0.9rem;
    vertical-align: middle;
    color: var(--text-color);
    font-size: 0.92rem;
}

/* Coloanele de titlu au nevoie de mai mult spațiu decât le lasă auto-sizing-ul implicit —
   dar doar pe ecran foarte lat (≥1700px): sub acel prag, aceste min-width-uri forțau
   tabelul mai lat decât încăpea, împingând conținutul în afara paginii în loc să
   deruleze intern în #planificareRecomandari. */
@media (min-width: 1700px) {
    #recomandariTable th:nth-child(2),
    #recomandariTable td:nth-child(2) {
        min-width: 160px;
    }

    #recomandariTable th:nth-child(3),
    #recomandariTable td:nth-child(3) {
        min-width: 120px;
    }
}

/* Lățimea disponibilă pentru tabel nu ține strict de ecran, ci de #planificareRecomandari
   (container query, vezi container-type mai sus) — pe layout-ul desktop cu 2 coloane
   (peste 1450px), tabelul concurează cu coloana fixă de 400px a programului/mesajului
   pentru spațiu, deci un ecran de 1600px poate avea mai puțin loc efectiv pentru tabel
   decât unul de 1300px cu layout-ul îngust (o coloană) — de-aia pragurile de mai jos sunt
   pe lățimea containerului, nu a ecranului.
   Mobile-first: "Titlu alternativ", "Frecvență" și "Ultima interpretare" sunt ascunse
   implicit (ca de bază, coloane), apoi fiecare reapare la propriul prag, pe măsură ce
   containerul crește. */
#recomandariTable th:nth-child(3),
#recomandariTable td:nth-child(3),
#recomandariTable th:nth-child(4),
#recomandariTable td:nth-child(4),
#recomandariTable th:nth-child(5),
#recomandariTable td:nth-child(5) {
    display: none;
}

/* "Titlu alternativ" reapare prima, la cel mai mic prag — utilă chiar și pe un container
   ceva mai îngust, fiindcă multe cântări nu au deloc titlu alternativ (rând scurt). */
@container (min-width: 900px) {
    #recomandariTable th:nth-child(3),
    #recomandariTable td:nth-child(3) {
        display: table-cell;
    }
}

/* Sub 1000px, "Frecvență (6 luni)" și "Ultima interpretare" nu mai apar ca și coloane
   dedicate — informația se mută compact sub titlu (.planificare-row-meta-secundara,
   vezi _recomandari.html.twig), ca titlurile să aibă mai mult loc pe orizontală. */
.planificare-row-meta-secundara {
    display: block;
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 0.15rem;
    /* ascunde separatorul "·" al bucății care ajunge la început de rând (vezi mai jos) */
    overflow: hidden;
}

/* Fiecare bucată începe cu propriul "·", iar linia e trasă la stânga cu exact lățimea
   lui: separatorul primei bucăți de pe fiecare rând cade în afara cutiei și e tăiat de
   overflow: hidden, cel dintre bucățile de pe același rând rămâne vizibil. */
.planificare-row-meta-linie {
    margin-left: -1.1em;
}

.planificare-row-meta-item {
    display: inline-block;
    white-space: nowrap;
}

.planificare-row-meta-item::before {
    content: "·";
    display: inline-block;
    width: 1.1em;
    text-align: center;
}

@container (min-width: 1000px) {
    #recomandariTable th:nth-child(4),
    #recomandariTable td:nth-child(4),
    #recomandariTable th:nth-child(5),
    #recomandariTable td:nth-child(5) {
        display: table-cell;
    }

    .planificare-row-meta-secundara {
        display: none;
    }
}

/* Mobil: păstrăm doar chenarul colorat, numărul, titlul (+ meta secundară) și butonul de
   adăugare — coloanele dedicate rămân ascunse (regula mobile-first de mai sus), aici doar
   reducem padding-ul, altfel tabelul tot ieșea din ecran chiar și cu 3 coloane */
@media (max-width: 680px) {
    /* header-ul avea padding generos rezervat pentru iconița de sortare —
       la 2 coloane rămase, ăsta era motivul principal pentru care tabelul
       tot depășea ecranul; îl reducem drastic și lăsăm textul să se rupă */
    #recomandariTable thead th {
        padding: 0.5rem 0.6rem;
        white-space: normal;
    }

    #recomandariTable thead th:not(.sorting_disabled) {
        padding-right: 1.1rem;
    }

    #recomandariTable tbody td {
        padding: 0.32rem 0.5rem;
    }

    #recomandariTable td:first-child,
    #recomandariTable th:first-child {
        width: 1%;
    }

    #recomandariTable td:first-child {
        white-space: nowrap;
    }

    .planificare-card-volum {
        display: none;
    }

    /* inițialele volumului deasupra, „Nr. 120” dedesubt — coloana rămâne îngustă */
    .planificare-card-numar {
        display: flex;
        flex-direction: column;
        line-height: 1.25;
    }

    .planificare-card-nr {
        font-weight: 500;
        font-size: 0.68rem;
        letter-spacing: -0.01em;
    }

    /* coloana Vol / Nr cât mai îngustă: puțin spațiu lângă bara colorată, aproape nimic în dreapta
       (titlul din coloana următoare are oricum padding-ul lui); antetul păstrează loc pentru săgeata de sortare */
    #recomandariTable tbody td:first-child {
        padding-left: 0.3rem;
        padding-right: 0.1rem;
    }

    #recomandariTable thead th:first-child {
        padding-left: 0.35rem;
        padding-right: 0.95rem;
    }

    .th-volum-lung {
        display: none;
    }

    .th-volum-scurt {
        display: inline;
    }
}

/* box-shadow, nu filter: "filter" pe rândul hover-uit crea un containing block nou
   pentru copiii lui position:fixed (la fel ca "transform") — tooltip-ul din coloana
   "Ultima interpretare" (position:fixed, poziționat în JS relativ la fereastră) se
   randa deplasat cu poziția rândului însuși în loc de coordonatele calculate. */
#recomandariTable tbody tr {
    transition: box-shadow 0.15s ease;
}

#recomandariTable tbody tr:hover {
    box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.12);
}

[data-bs-theme="light"] #recomandariTable tbody tr:hover {
    box-shadow: inset 0 0 0 999px rgba(0, 0, 0, 0.05);
}

/* Coloana "Ultima interpretare" — hover/focus dezvăluie tot istoricul programărilor
   pentru cântarea respectivă, cel mai recent sus. Afișarea (display) rămâne CSS pur, ca
   să supraviețuiască fără nicio inițializare suplimentară la re-randările AJAX ale
   tabelului — dar poziția (top/left) e "fixed", calculată în JS (vezi
   pozitioneazaIstoricPopup() din planificare/index.html.twig): #planificareRecomandari
   are overflow-x:auto (ceea ce forțează implicit și overflow-y:auto), iar un
   "position:absolute" relativ la rând ar fi fost tăiat de container la un tabel scurt
   (puține rezultate), chiar dacă în restul paginii era loc din belșug. */
.planificare-istoric-tip {
    position: relative;
    cursor: help;
    border-bottom: 1px dotted var(--text-muted);
}

.planificare-istoric-popup {
    display: none;
    flex-direction: column;
    gap: 0.15rem;
    position: fixed;
    min-width: 190px;
    background: var(--bg-elevated);
    color: var(--text-color);
    border: 1px solid var(--border-medium);
    border-radius: 8px;
    padding: 0.55rem 0.75rem;
    font-size: 0.82rem;
    white-space: nowrap;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
    z-index: 1000;
}

.planificare-istoric-titlu {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
    padding-bottom: 0.3rem;
    margin-bottom: 0.15rem;
    border-bottom: 1px solid var(--border-subtle);
}

.planificare-istoric-tip:hover .planificare-istoric-popup,
.planificare-istoric-tip:focus .planificare-istoric-popup,
.planificare-istoric-tip:focus-visible .planificare-istoric-popup {
    display: flex;
}

/* observațiile cântării în tabelul din Planificare repetiție: iconiță lângă titlu, același popup */
.planificare-obs-tip {
    border-bottom: 0;
    margin-left: 0.35rem;
    color: var(--text-muted);
    font-size: 0.85em;
}
.planificare-obs-tip .planificare-istoric-popup {
    white-space: normal;
    width: max-content;
    max-width: min(340px, calc(100vw - 20px));
    font-size: 0.82rem;
}
.planificare-obs-tip .planificare-istoric-titlu:not(:first-child) { margin-top: 0.4rem; }
.planificare-obs-text { line-height: 1.35; white-space: pre-line; }

.planificare-istoric-linie.is-recent {
    font-weight: 600;
    color: var(--accent-text);
}

.dataTables_wrapper .dataTables_info {
    color: var(--text-muted);
    font-size: 0.85rem;
    padding-top: 0.75rem;
}

/* Paginare (folosită atât de listele Cântări/Volume/Ocazii, cât și de DataTables
   din tabelul de recomandări) — culoarea albastru-viu implicită din Bootstrap
   e prea intensă pe tema dark; o înlocuim cu accentul mai discret al aplicației. */
.pagination .page-link {
    color: var(--accent-text);
}

.pagination .page-link:hover {
    color: var(--accent-text);
    background-color: var(--overlay-strong);
}

.pagination .page-item.active .page-link {
    background-color: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.pagination .page-item.disabled .page-link {
    color: var(--text-faint);
}

/* stilul de mai sus pentru .paginate_button (DataTables fără Bootstrap) ajungea și pe elementele
   listei din paginarea Bootstrap — padding, chenar și colțuri pe fiecare, deci butoane depărtate */
.dataTables_wrapper .pagination .paginate_button,
.dataTables_wrapper .pagination .paginate_button:hover,
.dataTables_wrapper .pagination .paginate_button.current {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
}

/* butoanele lipite unul de altul (ca paginarea Bootstrap din listele de cântări): fără spațiu între
   ele, marginile vecine suprapuse; doar dacă trec pe două rânduri (telefon), rândurile se distanțează */
.dataTables_wrapper .pagination {
    flex-wrap: wrap;
    row-gap: 0.3rem;
}

.dataTables_wrapper .pagination .page-item .page-link {
    font-size: 0.8rem;
    line-height: 1.2;
    min-width: 2rem;
    text-align: center;
}

/* Pe mobil, "Înapoi" + numerele + "Înainte" nu mai încap pe un singur rând de 390px și
   ieșeau din ecran (butonul "Înainte" era complet ascuns) — le lăsăm să treacă pe mai
   multe rânduri în loc să deborde tăiat. */
@media (max-width: 576px) {
    .dataTables_wrapper .pagination {
        justify-content: center;
    }

    /* lipite, încap pe un rând și pe telefon (Înapoi, 5 numere, …, ultima, Înainte) */
    .dataTables_wrapper .pagination .page-item .page-link {
        padding: 0.3rem 0.4rem;
        min-width: 1.75rem;
    }
}

.planificare-toggle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(106, 122, 174, 0.6);
    background: rgba(106, 122, 174, 0.15);
    color: var(--text-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s ease;
    /* fără padding-ul implicit al browserului pe <button> (asimetric pe unele
       browsere mobile) — altfel "+" ieșea descentrat în cerc */
    padding: 0;
    line-height: 1;
    margin: 0 auto;
}

.planificare-toggle > i {
    display: block;
    line-height: 1;
    width: 1em;
    text-align: center;
}

.planificare-toggle:hover {
    background: rgba(106, 122, 174, 0.4);
}

.planificare-toggle.is-added {
    background: rgba(46, 204, 113, 0.25);
    border-color: rgba(46, 204, 113, 0.7);
    color: #eaffef;
}

[data-bs-theme="light"] .planificare-toggle.is-added {
    background: rgba(46, 204, 113, 0.2);
    border-color: rgba(46, 204, 113, 0.6);
    color: #1c7a45;
}

.planificare-search-wrap {
    position: relative;
}

.planificare-search-wrap .form-control {
    padding: 0.375rem 2.2rem 0.375rem 2.25rem;
}

/* Căutarea e filtrul cel mai folosit — iese în evidență față de selecturile de lângă:
   contur și fundal în culoarea de accent, lupă colorată, placeholder mai puțin șters.
   Conturul e dublat prin box-shadow (nu border mai gros), ca înălțimea să rămână aceeași. */
.planificare-search-wrap .form-control {
    border-color: rgba(106, 122, 174, 0.9);
    background-color: rgba(106, 122, 174, 0.14);
    box-shadow: 0 0 0 1px rgba(106, 122, 174, 0.9);
    font-weight: 500;
}

.planificare-search-wrap .form-control:focus {
    background-color: rgba(106, 122, 174, 0.14);
    box-shadow: 0 0 0 1px rgba(106, 122, 174, 0.9), 0 0 0 0.25rem rgba(106, 122, 174, 0.3);
}

.planificare-search-wrap .form-control::placeholder {
    color: var(--text-muted);
}

.planificare-search-wrap .list-search-icon {
    color: var(--accent-text);
}

[data-bs-theme="light"] .planificare-search-wrap .form-control,
[data-bs-theme="light"] .planificare-search-wrap .form-control:focus {
    background-color: rgba(106, 122, 174, 0.1);
}

.planificare-search-clear {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    color: var(--text-faint);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.planificare-search-clear:hover {
    background: var(--overlay-strong);
    color: var(--text-color);
}

/* Planificare — panou "Programul final" */
.planificare-program-panel {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 1rem 1.1rem;
    position: sticky;
    top: 1rem;
}

/* "sticky" are sens doar lângă coloana lungă de recomandări din layout-ul
   desktop; când "Programul final" stă lângă "Mesaj pentru grup" (nesticky),
   la scroll rămânea "lipit" iar mesajul se deplasa normal — dezaliniere
   vizuală de câțiva pixeli. Regula trebuie să vină DUPĂ declarația de mai sus
   ca să câștige la specificitate egală (ordinea din fișier decide, nu poziția
   media query-ului). */
@container pagina-planificare (max-width: 1110px) {
    .planificare-program-panel {
        position: static;
        top: auto;
    }
}

.planificare-program-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.planificare-program-header h3 {
    font-size: 1.05rem;
    margin: 0;
    color: var(--text-color);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.planificare-program-count {
    background: rgba(106, 122, 174, 0.25);
    border: 1px solid rgba(106, 122, 174, 0.6);
    color: var(--text-color);
    border-radius: 999px;
    padding: 0.1rem 0.6rem;
    font-size: 0.8rem;
    font-weight: 700;
}

.planificare-program-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.planificare-program-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.6rem;
    background: var(--overlay-weak);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    cursor: grab;
    /* la apucare cu mouse-ul să nu se selecteze textul rândurilor */
    -webkit-user-select: none;
    user-select: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.planificare-program-item:hover {
    border-color: rgba(106, 122, 174, 0.5);
}

.planificare-program-item:hover .planificare-drag-handle {
    color: var(--text-muted);
}

/* Rearanjare (vezi initRearanjare() din planificare/index.html.twig): cât durează mutarea,
   celelalte rânduri alunecă să facă loc; cel apucat urmărește cursorul fără întârziere. */
.planificare-program-list.is-sorting .planificare-program-item {
    transition: transform 0.18s cubic-bezier(0.2, 0, 0, 1), border-color 0.15s ease, box-shadow 0.15s ease;
}

.planificare-program-list.is-sorting .planificare-program-item.is-dragging {
    position: relative;
    z-index: 5;
    transition: box-shadow 0.15s ease;
    /* opac — altfel rândurile peste care trece se văd prin el */
    background-color: var(--bg-elevated);
    border-color: rgba(106, 122, 174, 0.9);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(106, 122, 174, 0.9);
}

.planificare-program-list.is-sorting .planificare-program-item-text.is-dragging {
    background-image: linear-gradient(rgba(255, 196, 64, 0.12), rgba(255, 196, 64, 0.12));
    border-color: rgba(255, 196, 64, 0.7);
}

/* la eliberare: alunecă în locul lui și "coboară" (umbra se strânge) */
.planificare-program-list.is-sorting .planificare-program-item.is-dragging.is-dropping {
    transition: transform 0.16s ease-out, box-shadow 0.16s ease-out;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(106, 122, 174, 0.9);
}

[data-bs-theme="light"] .planificare-program-list.is-sorting .planificare-program-item.is-dragging {
    box-shadow: 0 10px 24px rgba(30, 40, 80, 0.22), 0 0 0 1px rgba(106, 122, 174, 0.9);
}

[data-bs-theme="light"] .planificare-program-list.is-sorting .planificare-program-item.is-dragging.is-dropping {
    box-shadow: 0 2px 6px rgba(30, 40, 80, 0.15), 0 0 0 1px rgba(106, 122, 174, 0.9);
}

body.planificare-se-rearanjeaza,
body.planificare-se-rearanjeaza * {
    cursor: grabbing !important;
    -webkit-user-select: none;
    user-select: none;
}

@media (prefers-reduced-motion: reduce) {
    .planificare-program-list.is-sorting .planificare-program-item,
    .planificare-program-list.is-sorting .planificare-program-item.is-dragging.is-dropping {
        transition: none;
    }
}

/* Mânerul e singurul loc de apucat cu degetul (restul rândului derulează lista), deci
   are o zonă de atins mai mare decât iconița; touch-action: none ca browserul să nu
   pornească derularea în locul mutării. */
.planificare-drag-handle {
    color: var(--text-faint);
    flex-shrink: 0;
    padding: 0.7rem 0.5rem;
    margin: -0.7rem -0.25rem -0.7rem -0.5rem;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    transition: color 0.15s ease;
}

.planificare-program-nr {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(106, 122, 174, 0.25);
    color: var(--text-color);
    font-size: 0.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.planificare-program-nume {
    flex: 1;
    min-width: 0;
    font-size: 0.9rem;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.planificare-program-nume small {
    display: block;
    color: var(--text-muted);
    font-size: 0.75rem;
}

.planificare-program-remove {
    flex-shrink: 0;
    border: none;
    background: transparent;
    color: var(--text-muted);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.planificare-program-remove:hover {
    background: rgba(231, 76, 60, 0.25);
    color: var(--text-color);
}

/* „Cântare tineri” pe cântările comune din program: gol = iconiță discretă, apăsat = „Tineri” magenta */
.tineri-btn {
    flex-shrink: 0;
    margin-left: 0.3rem;
    border: 1px solid var(--border-color, rgba(106, 122, 174, 0.4));
    background: transparent;
    color: var(--text-faint);
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1;
    padding: 0.28rem 0.45rem;
    white-space: nowrap;
    cursor: pointer;
}

span.tineri-btn {
    cursor: default;
}

/* Tineri + gama, lângă titlu, pe un rând */
.planificare-program-pastile {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* pe telefon: pe același rând, dar mai strânse — titlul cântării să aibă loc */
@media (max-width: 576px), (orientation: landscape) and (max-height: 500px) {
    .planificare-program-pastile {
        gap: 0.2rem;
    }

    .planificare-program-pastile .tineri-btn,
    .planificare-program-pastile .gama-btn.gama-rand {
        margin-left: 0;
        padding: 0.1rem 0.32rem;
        font-size: 0.66rem;
        line-height: 1.3;
    }

    .planificare-program-pastile .cine-btn {
        max-width: 5.5rem;
    }
}

.tineri-btn.is-activ {
    color: #f6c6df;
    border-color: #d0619c;
    background: rgba(208, 97, 156, 0.25);
}

[data-bs-theme="light"] .tineri-btn.is-activ {
    color: #8e1f58;
    border-color: #c04588;
    background: rgba(192, 69, 136, 0.12);
}

/* Cine cântă (public/js/cine-canta-picker.js): pastila pornește de la cea a tinerilor (.tineri-btn) */
.cine-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    max-width: 10rem;
}

.cine-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cine-icon .cor-icon-vioara {
    width: 1.1em;
    height: 1.1em;
}

.cine-btn-text {
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.tineri-btn.is-activ.cine-btn-orchestra {
    color: #ffd2b5;
    border-color: #d9824c;
    background: rgba(217, 130, 76, 0.25);
}

[data-bs-theme="light"] .tineri-btn.is-activ.cine-btn-orchestra {
    color: #8f3a0a;
    border-color: #c8662a;
    background: rgba(200, 102, 42, 0.12);
}

.tineri-btn.is-activ.cine-btn-altul {
    color: #e2eab0;
    border-color: #9aaa48;
    background: rgba(154, 170, 72, 0.25);
}

[data-bs-theme="light"] .tineri-btn.is-activ.cine-btn-altul {
    color: #4a5808;
    border-color: #7f8f22;
    background: rgba(127, 143, 34, 0.12);
}

/* fereastra de alegere: o opțiune pe rând, cu iconița în culoarea ei */
.cine-picker {
    width: 330px;
}

.cine-optiune {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    margin-bottom: 0.3rem;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--border-subtle);
    border-radius: 0.5rem;
    background: var(--overlay-weak);
    color: var(--text-color);
    font-size: 0.88rem;
    font-weight: 600;
    text-align: left;
}

.cine-optiune:last-child {
    margin-bottom: 0;
}

button.cine-optiune:hover {
    border-color: rgba(106, 122, 174, 0.7);
}

.cine-optiune.is-active {
    border-color: rgba(106, 122, 174, 0.95);
    background: rgba(106, 122, 174, 0.3);
}

.cine-optiune .cine-icon {
    width: 1.3rem;
}

.cine-optiune.cine-comun .cine-icon { color: #8592c4; }
.cine-optiune.cine-tineri .cine-icon { color: #e98bbd; }
.cine-optiune.cine-orchestra .cine-icon { color: #f0a070; }
.cine-optiune.cine-altul .cine-icon { color: #bccb6e; }
[data-bs-theme="light"] .cine-optiune.cine-comun .cine-icon { color: #3346a0; }
[data-bs-theme="light"] .cine-optiune.cine-tineri .cine-icon { color: #a8286a; }
[data-bs-theme="light"] .cine-optiune.cine-orchestra .cine-icon { color: #b04a12; }
[data-bs-theme="light"] .cine-optiune.cine-altul .cine-icon { color: #5a6a0c; }

/* alt nume: câmpul ia restul rândului, OK lângă el */
.cine-optiune.cine-altul {
    padding: 0.3rem 0.35rem 0.3rem 0.6rem;
    font-weight: 400;
}

.cine-optiune.cine-altul input {
    flex: 1;
    min-width: 0;
}

.cine-optiune.cine-altul .btn {
    flex-shrink: 0;
}

.gama-picker.is-panou.cine-picker .cine-optiune {
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
    font-size: 0.95rem;
}

.gama-picker.is-panou.cine-picker .cine-optiune.cine-altul {
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
}

.gama-picker.is-panou.cine-picker .cine-optiune.cine-altul input {
    font-size: 16px; /* iPhone: sub 16px mărește pagina la atingerea câmpului */
}

/* Rând liber — text intercalat între cântări în Programul final (Admin/Pastor) și în ciorne, ex. anunțuri */
.planificare-program-item-text {
    background: rgba(255, 196, 64, 0.08);
    border-color: rgba(255, 196, 64, 0.3);
}

.planificare-program-text-input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    border-bottom: 1px dashed var(--border-medium);
    color: var(--text-color);
    font-size: 0.9rem;
    padding: 0.1rem 0;
    /* rândul are user-select: none (pentru apucare) — textul din câmp rămâne selectabil */
    -webkit-user-select: text;
    user-select: text;
}

.planificare-program-text-input:focus {
    outline: none;
    border-bottom-color: rgba(255, 196, 64, 0.7);
}

.planificare-program-text-input::placeholder {
    color: var(--text-faint);
}

.planificare-adauga-rand-liber {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    margin-top: 0.6rem;
    padding: 0.45rem;
    background: transparent;
    border: 1px dashed var(--border-medium);
    border-radius: 8px;
    color: var(--text-muted);
    font-size: 0.85rem;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.planificare-adauga-rand-liber:hover {
    border-color: rgba(106, 122, 174, 0.7);
    color: var(--text-color);
}

/* Planificare — panou "Mesaj pentru grup" */
.planificare-mesaj-panel {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 1rem 1.1rem;
    /* înlocuiește vechea clasă utilitară Bootstrap "mt-3" din markup — aceea
       compilează cu "!important", deci nu putea fi anulată de override-urile
       de mai jos la ecran mediu/îngust, oricât de corectă era ordinea din
       fișier. Cu regula proprie, breakpoint-urile chiar câștigă. */
    margin-top: 1rem;
}

/* La ecran mediu, "Mesaj pentru grup" stă lângă "Programul final", nu sub el —
   marginea de sus trebuie anulată aici ca să pornească la aceeași înălțime.
   Regula trebuie să vină DUPĂ declarația de bază de mai sus (specificitate
   egală → câștigă ultima din fișier, nu poziția media query-ului). */
@container pagina-planificare (max-width: 1110px) {
    .planificare-mesaj-panel {
        margin-top: 0;
    }
}

/* Conținut sub 700px: cele două panouri nu mai încap unul lângă altul și revin să stea
   unul sub altul — marginea de sus trebuie repusă, iar regula asta trebuie să
   vină DUPĂ cea de mai sus (700px implică și 1110px, deci ambele se aplică
   simultan; câștigă ultima din fișier). */
@container pagina-planificare (max-width: 700px) {
    .planificare-mesaj-panel {
        margin-top: 1rem;
    }
}

/* Planificare — „Salvează” pe toată lățimea, cu iconița de copiere lângă */
.planificare-salvare-butoane {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.5rem;
}

/* activă: în culoarea textului, ca să se vadă clar față de starea estompată (gri-ul Bootstrap e prea șters pe temă întunecată) */
.planificare-copiaza-btn {
    padding-left: 0.9rem;
    padding-right: 0.9rem;
    color: var(--text-color);
    border-color: var(--border-subtle);
}

.planificare-copiaza-btn:hover,
.planificare-copiaza-btn:focus-visible,
.planificare-copiaza-btn:active {
    color: var(--text-color);
    background: rgba(106, 122, 174, 0.25);
    border-color: var(--accent);
}

/* tooltip-ul nu prinde atingerile — altfel, pe telefon, un tap pe „Salvează” de lângă ar ajunge la el */
.planificare-copiaza-tooltip {
    pointer-events: none;
}

/* inactivă până la salvare — rămâne clickabilă, ca să arate tooltip-ul cu motivul */
.planificare-copiaza-btn.is-inactiv {
    opacity: 0.35;
    cursor: not-allowed;
}

.planificare-copiaza-btn.is-inactiv:hover,
.planificare-copiaza-btn.is-inactiv:focus-visible,
.planificare-copiaza-btn.is-inactiv:active {
    background: transparent;
    border-color: var(--border-subtle);
}

/* Planificare — desfășurarea programului, cu înfățișarea din Listă Servicii (rândurile .pt-* și
   cardul Cor .cor-* sunt în 05-lista-servicii.css); aceeași mărime și spațiere ca acolo */
.planificare-program-vizual {
    line-height: 1.7;
    font-size: 0.95rem;
}

/* Planificare — panou "Anunțuri" (Admin/Pastor) — aceeași înfățișare ca panoul de mesaj,
   pe care îl urmează direct în coloană, deci un simplu spațiu deasupra e suficient
   (nu are nevoie de regulile de layout pe 2 coloane ale panoului de mesaj). */
.planificare-anunturi-panel {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 1rem 1.1rem;
    margin-top: 1rem;
}

/* textarea mare, text ușor de citit; crește singur pe înălțime din JS (fără scroll intern) */
.planificare-anunturi-textarea {
    font-size: 1.1rem;
    line-height: 1.55;
    min-height: 8rem;
    resize: vertical;
    overflow: hidden;
}

/* Planificare — titlul predicii, sus în panoul "Desfășurare program" */
.planificare-predica {
    margin-bottom: 0.9rem;
}

/* Planificare — ora repetiției cu tehnic (Admin / Închinare), sub titlu și text */
.planificare-repetitie-tehnic {
    display: flex;
    align-items: center;
    /* card îngust: câmpurile de oră trec sub etichetă, în loc să iasă din card */
    flex-wrap: wrap;
    gap: 0.3rem 0.6rem;
}

.planificare-repetitie-tehnic label {
    margin: 0;
    font-size: 0.9rem;
    white-space: nowrap;
}

.planificare-repetitie-tehnic input {
    width: auto;
    min-width: 7.5rem;
}

/* PC (mouse): două liste oră + minut în locul selectorului nativ (al lui Chrome arată toate
   minutele); pe ecrane tactile rămâne selectorul nativ */
.planificare-repetitie-liste {
    display: none;
    align-items: center;
    gap: 0.3rem;
}

.planificare-repetitie-liste select {
    width: auto;
    font-variant-numeric: tabular-nums;
}

@media (pointer: fine) {
    .planificare-repetitie-tehnic input[type="time"] {
        display: none;
    }

    .planificare-repetitie-liste {
        display: flex;
    }

    /* câmpul nativ e ascuns — roșul de eroare trece pe liste */
    .planificare-repetitie-tehnic input.is-invalid + .planificare-repetitie-liste select {
        border-color: var(--bs-form-invalid-border-color);
    }
}

/* iconița de ceas a pickerului nativ urmează tema (altfel e neagră pe fundalul închis) */
[data-bs-theme="dark"] .planificare-repetitie-tehnic input {
    color-scheme: dark;
}

/* Listă Servicii — repetiția cu tehnic, evidențiată sus în cardul Grup și pianist */
.lista-repetitie-tehnic {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.7rem;
    margin-bottom: 0.6rem;
    border-radius: 8px;
    background: rgba(240, 173, 78, 0.14);
    border: 1px solid rgba(240, 173, 78, 0.45);
    border-left: 3px solid #f0ad4e;
}

.lista-repetitie-tehnic i {
    color: #f0ad4e;
}

.lista-repetitie-tehnic strong {
    font-variant-numeric: tabular-nums;
    font-size: 1.1rem;
}

/* pianistul „Absent” (din Închinare → Planificare), sub titlu */
.planificare-pian-absent {
    margin-top: 0.15rem;
    color: #b26a00;
    font-weight: 600;
    font-size: 0.9rem;
}

[data-bs-theme="dark"] .planificare-pian-absent {
    color: #f0ad4e;
}

/* pre-wrap: observațiile pot avea mai multe rânduri */
.planificare-observatii-inchinare {
    white-space: pre-wrap;
}

/* Punctele suplimentare fără drept de editare (Dirijor, Închinare): fixe — nu se apucă, nu se scot */
.planificare-program-item.is-fix {
    cursor: default;
}

.planificare-program-item.is-fix .planificare-drag-handle {
    visibility: hidden;
}