/* 09-text-cantare.css — textul cântării (butonul din tabel și popup-ul), Planificare servicii și Ciornele pe telefon.
   Fișierele din css/stiluri/ se încarcă în ordinea numerelor (templates/_stiluri.html.twig): ordinea contează în cascadă. */

/* ============================================================
   Textul cântării — butonul din tabel + popup-ul (public/js/text-popup.js)
   ============================================================ */
.text-cantare-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-left: 0.3rem;
    padding: 0;
    border: 1px solid var(--border-medium);
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.68rem;
    vertical-align: 0.1em;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.text-cantare-btn:hover,
.text-cantare-btn[aria-expanded="true"] {
    color: var(--accent-text);
    border-color: var(--accent);
    background: rgba(106, 122, 174, 0.12);
}

/* fundal opac (--bg-elevated e ușor transparent, iar textul tabelului s-ar vedea prin versuri);
   z-index peste butonul de meniu de pe telefon (1060) */
.text-cantare-popup {
    position: fixed;
    z-index: 1065;
    /* mărimea versurilor = A− / A+ din antetul popup-ului (--marime-text-popup-proprie, toate paginile)
       × A− / A+ din Listă Servicii (--marime-text-popup; pe celelalte pagini rămâne 1) — litera și
       lățimea cresc împreună, ca rândurile versurilor să nu se rupă mai des */
    width: calc(340px * var(--marime-text-popup, 1) * var(--marime-text-popup-proprie, 1));
    max-width: calc(100vw - 20px);
    /* cât ecranul (minus marginile) când textul e lung — dvh ține cont de bara browserului pe telefon */
    max-height: calc(100vh - 20px);
    max-height: calc(100dvh - 20px);
    display: flex;
    flex-direction: column;
    /* tot popup-ul se derulează (nu doar corpul textului) și nu trece derularea mai departe la
       pagină — altfel rotița / degetul pe antet sau pe margini derula pagina din spate */
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #1c1c1e;
    color: var(--text-color);
    border: 1px solid var(--border-medium);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
    font-size: calc(0.88rem * var(--marime-text-popup, 1) * var(--marime-text-popup-proprie, 1));
    line-height: 1.45;
}

[data-bs-theme="light"] .text-cantare-popup {
    background: #ffffff;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}

.text-cantare-popup[hidden] {
    display: none;
}

/* bară de derulare subțire, ca în meniul lateral (.sidebar-scroll) */
.text-cantare-popup {
    scrollbar-width: thin;
}

.text-cantare-popup::-webkit-scrollbar {
    width: 6px;
}

.text-cantare-popup::-webkit-scrollbar-thumb {
    background: var(--border-medium);
    border-radius: 3px;
}

/* telefon, textul întreg: fundal întunecat și încețoșat sub panou, ca la alegerea gamei;
   atingerea pe el închide panoul (click-ul din afară, în text-popup.js) */
.text-cantare-fundal {
    position: fixed;
    inset: 0;
    z-index: 1064;
    background: rgba(0, 0, 0, 0.5);
    -webkit-backdrop-filter: blur(1.5px);
    backdrop-filter: blur(1.5px);
}

.text-cantare-fundal[hidden] {
    display: none;
}

/* textul întreg (fixat): mai lat, ca să se citească fără multă derulare */
.text-cantare-popup.is-fixat {
    width: calc(400px * var(--marime-text-popup, 1) * var(--marime-text-popup-proprie, 1));
}

.text-cantare-antet {
    position: sticky;
    top: 0;
    z-index: 1;
    background: inherit;
    border-radius: 12px 12px 0 0;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.7rem 0.85rem 0.5rem;
    border-bottom: 1px solid var(--border-subtle);
}

.text-cantare-titluri {
    flex: 1 1 auto;
    min-width: 0;
}

.text-cantare-titlu {
    font-weight: 700;
}

.text-cantare-volum {
    font-size: 0.85em;
    color: var(--text-muted);
}

.text-cantare-inchide {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
}

.text-cantare-marime {
    flex-shrink: 0;
}

/* ca A− / A+ din Listă Servicii (.lista-text-marime); mărime fixă, nu după versuri */
.text-cantare-marime .btn {
    font-size: 0.75rem;
    font-weight: 700;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.text-cantare-inchide:hover {
    background: var(--border-subtle);
    color: var(--text-color);
}

.text-cantare-corp {
    padding: 0.6rem 0.85rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

/* refrenul: cursiv, cu bara accent în stânga (ca observațiile din repetiție) */
.text-cantare-strofa.is-refren {
    font-style: italic;
    padding-left: 0.6rem;
    border-left: 2px solid var(--accent);
}

.text-cantare-eticheta {
    font-size: 0.77em;
    font-style: normal;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--accent-text);
}

.text-cantare-mai-mult {
    padding: 0 0.85rem 0.6rem;
    font-size: 0.85em;
    color: var(--text-muted);
}

/* telefon: panou jos pe ecran, pe toată lățimea (poziția o pune text-popup.js) */
@media (max-width: 576px) {
    .text-cantare-popup,
    .text-cantare-popup.is-fixat {
        width: calc(100vw - 20px);
        font-size: calc(0.95rem * var(--marime-text-popup, 1) * var(--marime-text-popup-proprie, 1));
    }
}

/* Planificare servicii și Ciornele (editare, vizualizare) pe telefon (portret): panourile și tabelul de cântări merg de la o margine
   la alta a ecranului. Nu cu margini negative pe ele (ca la Planificare repetiție): zona de swipe
   ([data-serviciu-swipe]) are overflow-x: clip și le-ar tăia — se întinde chiar containerul paginii
   peste padding-ul lui .main-content, iar cronologia, titlul și filtrele își păstrează marginea mică. */
@media (max-width: 576px) {
    /* width: auto — cu width: 100% (Bootstrap) marginea negativă din dreapta nu l-ar lărgi */
    .main-content > .container-fluid.pagina-planificare {
        width: auto;
        margin-left: -0.6rem;
        margin-right: -0.6rem;
        padding-left: 0;
        padding-right: 0;
    }

    /* fără margine laterală, orice margine negativă de rând ieșea din ecran (vizualizarea ciornei) */
    .main-content > .container-fluid.pagina-planificare .row.g-3 {
        --bs-gutter-x: 0;
    }

    .pagina-planificare .planificare-timeline-wrap,
    .pagina-planificare .planificare-selected-header,
    .pagina-planificare .planificare-filters,
    .pagina-planificare > .ciorne-antet {
        margin-left: 0.85rem;
        margin-right: 0.85rem;
    }

    /* vizualizarea ciornei: coloanele Bootstrap fără spațiu lateral, ca panourile să ajungă la margine */
    .pagina-planificare > .row {
        --bs-gutter-x: 0;
    }

    .pagina-planificare .planificare-program-panel,
    .pagina-planificare .planificare-mesaj-panel,
    .pagina-planificare .planificare-anunturi-panel {
        padding-left: 0.6rem;
        padding-right: 0.6rem;
        border-left: 0;
        border-right: 0;
        border-radius: 0;
    }

    .pagina-planificare #planificareRecomandari .dataTables_wrapper {
        padding: 0.35rem 0.25rem;
        border-left: 0;
        border-right: 0;
        border-radius: 0;
    }

    .pagina-planificare .planificare-program-item {
        padding-left: 0.45rem;
        padding-right: 0.45rem;
    }
}