/* 05-lista-servicii.css — Listă Servicii: programul, cardurile, anunțurile, punctele încheiate, cardul Cor.
   Fișierele din css/stiluri/ se încarcă în ordinea numerelor (templates/_stiluri.html.twig): ordinea contează în cascadă. */

/* Listă Programe */
/* "Modifică" rămâne mereu pe același rând cu data (nowrap). Ce nu mai încape se
   rezolvă în funcție de lățimea antetului (container query, nu a ecranului — între
   ~580 și 800px meniul lateral e vizibil și îngustează mult conținutul):
   întâi luna se prescurtează, apoi "Modifică" rămâne doar cu iconița, apoi data se
   micșorează. Pastilele de lângă dată pot coborî sub ea, butonul nu. */
.lista-programe-header {
    display: grid;
    /* data (+ pastilele) | A− A+ Modifică; observațiile dedesubt, pe toată lățimea */
    grid-template-columns: minmax(0, 1fr) auto;
    /* data și A− / A+ centrate pe verticală, pe același rând */
    align-items: center;
    column-gap: 1rem;
    container-type: inline-size;
}

.lista-programe-header-text {
    min-width: 0;
}

.lista-programe-header .planificare-observatii-inchinare {
    grid-column: 1 / -1;
}

.lista-antet-actiuni {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.lista-antet-actiuni .btn {
    white-space: nowrap;
}

.lista-text-marime .btn {
    font-weight: 700;
    padding-left: 0.6rem;
    padding-right: 0.6rem;
}

.lista-titlu-scurt {
    display: none;
}

@container (max-width: 800px) {
    .lista-titlu-lung {
        display: none;
    }

    .lista-titlu-scurt {
        display: inline;
    }
}

@container (max-width: 620px) {
    .lista-modifica-text {
        display: none;
    }
}

@container (max-width: 520px) {
    .lista-programe-header {
        column-gap: 0.5rem;
    }

    .lista-antet-actiuni {
        gap: 0.35rem;
    }

    .lista-antet-actiuni .btn {
        padding: 0.2rem 0.5rem;
        font-size: 0.85rem;
    }

    .lista-programe-header h2 {
        font-size: 1.3rem;
    }
}

/* ‹ dată AM/PM › rămân pe același rând pe ecranele unde se văd butoanele (≥768px; sub, e swipe
   și antetul rămâne cum era): în loc să treacă pe rândul următor, data se micșorează odată cu
   lățimea antetului (cqi = % din lățimea .lista-programe-header, care e container), iar la
   nevoie eticheta de sărbătoare se scurtează cu „…”. */
@media (min-width: 768px) {
    .lista-programe-header .planificare-selected-titlu {
        flex-wrap: nowrap;
    }

    .lista-programe-header .planificare-selected-titlu h2 {
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: clamp(1rem, 3.6cqi, 1.75rem);
    }

    .lista-programe-header .planificare-selected-badge {
        display: inline-block;
        min-width: 0;
        flex-shrink: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .lista-programe-header .planificare-selected-slot {
        flex-shrink: 0;
    }
}

/* Programul pe tot rândul, sub el cardurile mici câte două pe rând (Cor | Titlul mesajului,
   Grup și pianist | Tehnic, în ordinea din HTML), Anunțuri (dacă există) pe tot rândul, la
   final. Pe lățime mică (măsurată pe pagină, nu pe ecran — meniul lateral ocupă și el loc),
   cardurile mici trec unul sub altul. */
.pagina-lista-servicii {
    container-type: inline-size;
    container-name: lista-servicii;
}

.lista-programe-grid {
    display: grid;
    /* implicit o coloană; două doar prin container query, mai jos — un browser fără container
       queries (iOS sub 16) rămâne așa pe o coloană, în loc să înghesuie două pe un telefon */
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    /* cardurile de pe același rând au înălțimea celui mai înalt (.card e deja flex column,
       deci fundalul cardului se întinde și sub conținut) */
    align-items: stretch;
}

.lista-programe-card-final,
.lista-programe-card-full,
.lista-card-rugaciune,
.lista-card-lat {
    grid-column: 1 / -1;
}

/* restrâns, cardul rămâne doar cât antetul, nu cât vecinul de pe rând */
.lista-programe-card:has(> .lista-card-toggle.collapsed) {
    align-self: start;
}

/* Lățime suficientă: două coloane — sub program (și Rugăciune AM, tot pe toată lățimea),
   Cor + Grup și pianist pe primul rând, Titlul mesajului + Tehnic pe al doilea, anunțurile la
   final. Pe o coloană (telefon) rămâne ordinea din pagină. */
@container lista-servicii (min-width: 561px) {
    .lista-programe-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lista-card-rand-doi {
        order: 1;
    }

    /* anunțurile la final */
    .lista-programe-grid > .lista-programe-card-full {
        order: 2;
    }
}

/* Textul din "Desfășurare program" — exact formatul mesajului "Program complet" (vezi
   PlanificareController::construiesteMesajComplet()), afișat aici ca text simplu, cu
   line-height mai generos ca să se citească ușor o listă lungă de cântări. */
.lista-programe-mesaj-text {
    white-space: pre-wrap;
    line-height: 1.7;
    font-size: 0.95rem;
}

.lista-programe-detalii {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.3rem 0.8rem;
    /* eticheta e scrisă mai mic decât valoarea — pe linia de bază stau pe același rând */
    align-items: baseline;
    margin: 0;
}

.lista-programe-detalii dt {
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.85rem;
}

.lista-programe-detalii dd {
    margin: 0;
}

/* Anunțuri pe Listă Servicii — fiecare bulină devine un bloc separat: fundal discret,
   bară colorată în stânga, spațiu între ele */
.lista-anunturi {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

/* cardul Anunțuri: blocurile de anunț aproape cât tot cardul, cu aceeași margine mică pe toate
   laturile; spațiul dintre anunțuri rămâne cel din .lista-anunturi (specificitate mai mare
   decât regula pentru ecrane mici de mai jos) */
.pagina-lista-servicii .lista-programe-card.lista-programe-card-full .card-body {
    padding: 0.4rem;
}

@media (max-width: 991.98px) {
    .pagina-lista-servicii .lista-programe-card.lista-programe-card-full .card-body {
        padding: 0.25rem;
    }
}

.lista-anunt {
    padding: 0.6rem 0.85rem;
    border-radius: 10px;
    background: var(--overlay-weak);
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--accent);
    font-size: 1.1rem;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Listă Servicii — programul final: aceleași rânduri ca mesajul de WhatsApp, cu părțile
   evidențiate. Un div per rând (nu pre-wrap), ca indentarea din .twig să nu apară în pagină. */
.program-text {
    white-space: normal;
}

.pt-antet {
    display: none;
    margin-bottom: 1.7em;
}

@media print {
    .pt-antet {
        display: block;
    }
}

/* rândurile care trec pe două linii continuă aliniate după bulină (indent „agățat”):
   bulina are lățime fixă, iar rândul e tras înapoi exact cu atât */
.pt-linie {
    padding-left: 0.9em;
    text-indent: -0.9em;
}

.pt-bulina {
    display: inline-block;
    width: 0.9em;
    text-indent: 0;
}

/* la predică iconița cu Biblia ține locul bulinei */
.pt-bulina-icon {
    width: auto;
    margin-right: 0.3em;
}

/* Tehnic și Admin: punctul se bifează / debifează doar din bulină (partea stângă), ca atingerile pe
   titlu — pentru textul cântării — să nu-l marcheze din greșeală. Zona de atingere e mai mare decât
   bulina (::after): spre stânga în marginea cardului, puțin spre dreapta, pe toată înălțimea rândului.
   Încheiatul se estompează tot, bulina cu el (nu se taie — rămâne lizibil); îl văd toți, și fără cont. */
.pt-marcabil .pt-bulina {
    position: relative;
    z-index: 0;
    text-align: center;
    cursor: pointer;
}

.pt-marcabil .pt-bulina::after {
    content: '';
    position: absolute;
    top: -0.15em;
    bottom: -0.15em;
    left: -0.9em;
    right: -0.7em;
}

/* cercul din spatele bulinei: la hover (PC) și la focus din tastatură */
.pt-marcabil .pt-bulina::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 60%, transparent);
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

[data-bs-theme="light"] .pt-marcabil .pt-bulina::before {
    background: color-mix(in srgb, var(--accent) 30%, transparent);
}

@media (hover: hover) {
    .pt-marcabil .pt-bulina:hover::before {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.pt-marcabil .pt-bulina:focus-visible {
    outline: none;
}

.pt-marcabil .pt-bulina:focus-visible::before {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    box-shadow: 0 0 0 2px var(--accent);
}

.pt-incheiat {
    opacity: 0.38;
    transition: opacity 0.2s ease;
}

/* pe hârtie: programul simplu, fără urmele serviciului */
@media print {
    .pt-incheiat {
        opacity: 1;
        transition: none;
    }
}

.pt-eticheta {
    font-weight: 600;
    color: #8592c4;
}

.pt-cor .pt-eticheta {
    color: #5fb3ae;
}

/* la cor, cartea și titlul primesc și ele o nuanță din culoarea corului (mai discretă decât
   eticheta), ca tot rândul să se deosebească de cântările comune */
.pt-cor .pt-volum {
    color: color-mix(in srgb, #5fb3ae 30%, var(--text-muted));
}

.pt-cor .pt-titlu {
    color: color-mix(in srgb, #5fb3ae 35%, var(--text-color));
}

[data-bs-theme="light"] .pt-cor .pt-volum {
    color: color-mix(in srgb, #0b7a5f 35%, var(--text-muted));
}

[data-bs-theme="light"] .pt-cor .pt-titlu {
    color: color-mix(in srgb, #0b7a5f 75%, var(--text-color));
}

/* pe fundal alb: albastru vs verde, ambele saturate, ca diferența să fie clară */
[data-bs-theme="light"] .pt-eticheta {
    color: #3346a0;
}

[data-bs-theme="light"] .pt-cor .pt-eticheta {
    color: #0b7a5f;
}

/* cântare comună cântată cu tinerii — magenta, ca să nu se confunde cu cele comune (albastru), cu corul
   (verde), cu predica (chihlimbar) sau cu insigna gamei (lavandă) */
.pt-tineri .pt-eticheta {
    color: #e98bbd;
}

[data-bs-theme="light"] .pt-tineri .pt-eticheta {
    color: #a8286a;
}

/* cântare comună cântată de orchestră — portocaliu */
.pt-orchestra .pt-eticheta {
    color: #f0a070;
}

[data-bs-theme="light"] .pt-orchestra .pt-eticheta {
    color: #b04a12;
}

/* alt nume scris pentru serviciu (ex. „Solo – Maria”) — o singură culoare pentru toate, oliv */
.pt-altul .pt-eticheta {
    color: #bccb6e;
}

[data-bs-theme="light"] .pt-altul .pt-eticheta {
    color: #5a6a0c;
}

.pt-volum {
    color: var(--text-muted);
}

/* Listă Servicii, Admin și Dirijor: cartea + numărul cântării sunt link la cântare — discret,
   în culoarea textului din jur, subliniat doar la hover */
a.link-cantare {
    color: inherit;
    text-decoration: none;
}

a.link-cantare:hover,
a.link-cantare:focus-visible {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* eticheta carte + număr din cardul Cor e o insignă — la hover se luminează, fără subliniere */
a.cor-volum.link-cantare:hover,
a.cor-volum.link-cantare:focus-visible {
    text-decoration: none;
    filter: brightness(1.3);
}

.pt-titlu {
    font-weight: 600;
    font-style: italic;
    text-indent: 0;
    /* dacă nu încape pe rândul cu eticheta, titlul (cu ghilimele) trece întreg pe rândul
       următor, nu rupt la mijloc; unul mai lung decât tot rândul se rupe totuși în interior */
    display: inline-block;
    max-width: 100%;
}

/* gama cântării comune (doar pentru contul de Închinare) — violet, ca să nu se confunde cu
   albastrul cântărilor comune, verdele corului sau chihlimbarul predicii */
.pt-gama {
    display: inline-block;
    text-indent: 0;
    padding: 0 0.4em;
    border-radius: 0.4em;
    font-size: 0.85em;
    font-weight: 700;
    font-style: normal;
    color: #c9a3f0;
    background: rgba(170, 120, 230, 0.16);
    white-space: nowrap;
}

[data-bs-theme="light"] .pt-gama {
    color: #6a2fa0;
    background: rgba(120, 60, 180, 0.1);
}

/* gama aleasă doar pentru acest serviciu (diferă de cea standard) — chenar, cu cea standard în tooltip */
.pt-gama.is-proprie {
    box-shadow: inset 0 0 0 1px currentColor;
}

/* rândul liber care conține „predică” (oricum ar fi scris) — momentul principal al serviciului */
.pt-predica {
    font-weight: 700;
    color: #d9ad62;
    font-size: 1.05em;
}

.pt-predica i {
    font-size: 0.9em;
}

[data-bs-theme="light"] .pt-predica {
    color: #8a5400;
}

@media print {
    .pt-predica,
    .pt-eticheta,
    .pt-cor .pt-eticheta,
    .pt-tineri .pt-eticheta,
    .pt-orchestra .pt-eticheta,
    .pt-altul .pt-eticheta,
    .pt-volum,
    .pt-cor .pt-volum,
    .pt-cor .pt-titlu,
    .pt-gama,
    .pt-text {
        color: #000 !important;
    }
}

/* Listă Servicii — cardul Cor: o cântare pe rând, despărțite printr-o linie fină.
   Cartea + numărul într-o etichetă în două părți (numele estompat, numărul pe verdele corului),
   titlul îngroșat, solo / negativ / vioară ca insigne colorate, observațiile într-o casetă cu bordură. */
.cor-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.95rem;
}

.cor-item {
    padding: 0.6rem 0;
}

.cor-item:first-child {
    padding-top: 0;
}

.cor-item:last-child {
    padding-bottom: 0;
}

.cor-item + .cor-item {
    border-top: 1px solid var(--border-subtle);
}

/* flux de text, nu flex: un titlu lung continuă pe rândul următor sub etichetă (nu
   într-o coloană îngustă lângă ea), iar butonul de text rămâne după ultimul cuvânt */
.cor-item-cap {
    line-height: 1.6;
}

.cor-volum {
    display: inline-flex;
    margin-right: 0.5em;
    vertical-align: 0.08em;
    border: 1px solid rgba(95, 179, 174, 0.45);
    border-radius: 0.4em;
    overflow: hidden;
    font-size: 0.78em;
    line-height: 1.5;
    white-space: nowrap;
}

.cor-volum-nume {
    padding: 0 0.45em;
    color: color-mix(in srgb, #5fb3ae 45%, var(--text-muted));
}

.cor-volum-nr {
    padding: 0 0.45em;
    font-weight: 700;
    color: #5fb3ae;
    background: rgba(95, 179, 174, 0.16);
    border-left: 1px solid rgba(95, 179, 174, 0.45);
}

.cor-titlu {
    font-weight: 600;
    font-style: italic;
    color: color-mix(in srgb, #5fb3ae 35%, var(--text-color));
}

.cor-titlu .text-cantare-btn {
    font-style: normal;
}

.cor-insigne {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.35rem;
}

.cor-insigna {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    padding: 0.1em 0.55em;
    border-radius: 999px;
    font-size: 0.75em;
    font-weight: 600;
    white-space: nowrap;
}

.cor-insigna i {
    font-size: 0.9em;
}

.cor-insigna-solo {
    color: #e8a07a;
    background: rgba(232, 140, 100, 0.15);
}

.cor-insigna-negativ {
    color: #7fb4e6;
    background: rgba(100, 160, 225, 0.15);
}

.cor-icon-vioara {
    width: 1.15em;
    height: 1.15em;
    fill: currentColor;
}

.cor-insigna-vioara {
    color: #d996c6;
    background: rgba(210, 130, 190, 0.15);
}

.cor-observatii {
    display: flex;
    gap: 0.45em;
    margin-top: 0.4rem;
    padding: 0.3rem 0.6rem;
    border-left: 3px solid rgba(95, 179, 174, 0.5);
    border-radius: 0 0.35rem 0.35rem 0;
    background: rgba(95, 179, 174, 0.07);
    color: var(--text-muted);
    font-size: 0.88em;
    line-height: 1.45;
    white-space: pre-line;
}

.cor-observatii i {
    margin-top: 0.25em;
    font-size: 0.85em;
    opacity: 0.8;
}

/* observațiile pentru repetiție (Admin, Dirijor): chihlimbar, ca să nu se confunde cu cele obișnuite */
.cor-observatii-repetitie {
    border-left-color: rgba(230, 170, 70, 0.6);
    background: rgba(230, 170, 70, 0.08);
}

.cor-observatii-repetitie strong {
    font-weight: 600;
    color: #e0b36a;
}

[data-bs-theme="light"] .cor-volum,
[data-bs-theme="light"] .cor-volum-nr {
    border-color: rgba(11, 122, 95, 0.4);
}

[data-bs-theme="light"] .cor-volum-nume {
    color: color-mix(in srgb, #0b7a5f 45%, var(--text-muted));
}

[data-bs-theme="light"] .cor-volum-nr {
    color: #0b7a5f;
    background: rgba(11, 122, 95, 0.1);
}

[data-bs-theme="light"] .cor-titlu {
    color: color-mix(in srgb, #0b7a5f 75%, var(--text-color));
}

[data-bs-theme="light"] .cor-insigna-solo {
    color: #a84a1c;
    background: rgba(200, 100, 50, 0.12);
}

[data-bs-theme="light"] .cor-insigna-negativ {
    color: #1f5f9e;
    background: rgba(40, 110, 190, 0.1);
}

[data-bs-theme="light"] .cor-insigna-vioara {
    color: #8e2f73;
    background: rgba(160, 50, 130, 0.1);
}

/* A− / A+ pe Safari pe iPad: acolo zoom-ul nu mărește textul care are font-size propriu (bug
   WebKit), așa că scriptul de sub #listaProgrameContinut trece pe data-marime-mod="font" și
   mărimea vine din --marime-lista: textul moștenit și cel în em cresc din containerul de aici,
   iar mărimile în rem (care nu urmează containerul) sunt înmulțite una câte una. */
#listaProgrameContinut[data-marime-mod="font"] {
    font-size: calc(1rem * var(--marime-lista, 1));
}

#listaProgrameContinut[data-marime-mod="font"] .lista-programe-mesaj-text,
#listaProgrameContinut[data-marime-mod="font"] .cor-lista {
    font-size: calc(0.95rem * var(--marime-lista, 1));
}

#listaProgrameContinut[data-marime-mod="font"] .lista-programe-detalii dt,
#listaProgrameContinut[data-marime-mod="font"] .lista-card-edit {
    font-size: calc(0.85rem * var(--marime-lista, 1));
}

#listaProgrameContinut[data-marime-mod="font"] .lista-anunt,
#listaProgrameContinut[data-marime-mod="font"] .lista-repetitie-tehnic strong {
    font-size: calc(1.1rem * var(--marime-lista, 1));
}

#listaProgrameContinut[data-marime-mod="font"] .lista-card-actiune {
    font-size: calc(0.8rem * var(--marime-lista, 1));
}

#listaProgrameContinut[data-marime-mod="font"] .lista-card-chevron,
#listaProgrameContinut[data-marime-mod="font"] .lista-card-actiuni-status {
    font-size: calc(0.75rem * var(--marime-lista, 1));
}

#listaProgrameContinut[data-marime-mod="font"] .text-cantare-btn {
    font-size: calc(0.68rem * var(--marime-lista, 1));
}

/* Numele cu cont și telefon („Scrie pe WhatsApp”): discret, arată ca textul din jur — highlight la hover pe
   calculator, iar pe telefon highlight-ul obișnuit al atingerii; atingerea deschide întrebarea */
.lista-whatsapp {
    border: 0;
    background: none;
    padding: 0;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
    .lista-whatsapp:hover {
        color: var(--accent);
    }
}

.lista-whatsapp-icon {
    color: #25d366;
}