/* 01-baza.css — temele (variabile), tabele, așezarea paginii, meniul lateral, mărirea interfeței pe tabletă.
   Fișierele din css/stiluri/ se încarcă în ordinea numerelor (templates/_stiluri.html.twig): ordinea contează în cascadă. */

/* DataTables CSS minimal (poți copia de pe CDN) */
@import url('https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css');

/* Fundal tabel */
.dataTables_wrapper {
    background-color: var(--overlay-weak); /* ușor luminos, dar nu alb complet */
    border: 1px solid rgba(106,122,174,0.3);
    border-radius: 10px;
    padding: 0.5rem;
}

/* Header */
table.dataTable thead {
    background: rgba(106,122,174,0.2); /* accent albastru-gri */
    color: var(--text-color);
    font-weight: 600;
}

/* Header hover / sort */
table.dataTable thead th:hover {
    background: rgba(106,122,174,0.35);
    cursor: pointer;
}

/* Linii tabel */
table.dataTable tbody tr {
    background: var(--overlay-weak);
    color: var(--text-color);
    transition: background 0.2s;
}

/* Linii hover */
table.dataTable tbody tr:hover {
    background: rgba(106,122,174,0.1);
}

/* Linii impare / pare pentru contrast */
table.dataTable tbody tr:nth-child(even) {
    background: var(--overlay-weak);
}

/* Search input & pagination */
.dataTables_filter input,
.dataTables_length select,
.dataTables_paginate .paginate_button {
    background: rgba(106,122,174,0.1);
    border: 1px solid rgba(106,122,174,0.3);
    color: var(--text-color);
    border-radius: 6px;
    padding: 2px 6px;
    transition: all 0.2s;
}

.dataTables_filter input:focus,
.dataTables_length select:focus {
    outline: none;
    background: rgba(106,122,174,0.2);
}

/* Butoanele paginate hover */
.dataTables_paginate .paginate_button:hover {
    background: rgba(231,76,60,0.3);
    color: var(--text-color) !important;
    border-radius: 6px;
}

/* Activ page button */
.dataTables_paginate .paginate_button.current {
    background: rgba(231,76,60,0.5);
    color: var(--text-color) !important;
}

:root {
    --main-bg: #0e0e0e;
    --sidebar-bg: #1a1a1a;
    --text-color: #fff;
    --accent: rgb(106,122,174);
    --accent-red: #e74c3c;
    --accent-text: var(--accent);

    /* fundaluri */
    --bg-card: rgba(22, 22, 22, 0.9);
    --bg-input: #171717;
    --bg-elevated: rgba(26, 26, 26, 0.95);

    /* text */
    --text-muted: rgba(255, 255, 255, 0.6);
    --text-faint: rgba(255, 255, 255, 0.4);

    /* borduri */
    --border-subtle: rgba(255, 255, 255, 0.08);
    --border-medium: rgba(255, 255, 255, 0.12);

    /* overlay-uri (hover / dungi zebră) */
    --overlay-weak: rgba(255, 255, 255, 0.04);
    --overlay-strong: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="light"] {
    --main-bg: #f5f6fa;
    --sidebar-bg: #e9ecf5;
    --text-color: #1a1a1a;
    --accent-text: #445179;

    --bg-card: #ffffff;
    --bg-input: #ffffff;
    --bg-elevated: #ffffff;

    --text-muted: rgba(0, 0, 0, 0.6);
    --text-faint: rgba(0, 0, 0, 0.4);

    --border-subtle: rgba(0, 0, 0, 0.1);
    --border-medium: rgba(0, 0, 0, 0.16);

    --overlay-weak: rgba(0, 0, 0, 0.04);
    --overlay-strong: rgba(0, 0, 0, 0.06);
}

body {
    background-color: var(--main-bg);
    color: var(--text-color);
    font-family: 'Segoe UI', sans-serif;
    margin: 0;
}

.app-layout {
    display: flex;
    min-height: 100vh;
    width: 100%;
}

/* Mărirea interfeței pe tabletă (1.2×, public/js/marire-interfata.js): meniul și conținutul cresc
   proporțional, ca la Ctrl+. Înălțimile legate de ecran (100vh / 100dvh)
   se împart la factor, altfel zoom-ul le-ar înmulți și ar ieși din ecran — meniul rămâne cât
   ecranul pe înălțime și crește doar în lățime. */
.app-layout,
.sidebar-hamburger {
    zoom: var(--marire-interfata, 1);
}

.app-layout {
    min-height: calc(100vh / var(--marire-interfata, 1));
}

.sidebar {
    /* fără "sticky" + înălțime proprie, sidebar-ul creștea cu conținutul lui și derula
       odată cu toată pagina — la un main-content mai înalt decât ecranul, footer-ul
       (logout, temă, limbă) rămânea "sus", scos din vedere imediat ce derulai jos.
       "sticky" îl fixează pe verticală în fereastră cât timp restul paginii e mai lung,
       iar "align-self: flex-start" e necesar ca să nu-l întindă implicit "stretch"-ul
       flex al lui .app-layout la înălțimea reală a lui .main-content (care ar anula
       orice rost ar avea "sticky" — nu mai există spațiu în care să "alunece").
       overflow rămâne "visible" aici — scroll-ul intern e pe .sidebar-scroll (vezi mai
       jos), ca butonul de toggle (care iese din marginea sidebar-ului) să nu fie tăiat. */
    position: sticky;
    top: 0;
    align-self: flex-start;
    height: 100vh;
    /* 100dvh = spațiul chiar vizibil (fără bara de adrese/navigare a browserului mobil);
       vh (mai sus) rămâne ca fallback pentru browsere fără suport dvh — pe mobil, în
       portrait, 100vh e mai mare decât ce se vede efectiv, ceea ce împingea footer-ul
       (limbă/temă/cont) sub marginea vizibilă a ecranului */
    height: 100dvh;
    height: calc(100dvh / var(--marire-interfata, 1));
    width: 248px;
    background-color: var(--sidebar-bg);
    padding: 0.75rem 0.55rem 1rem 0.3rem;
    display: flex;
    flex-direction: column;
    transition: width 0.25s ease;
}

.sidebar-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    /* bară de scroll subțire, cu loc rezervat — când apare nu mai stă lipită de / peste meniuri */
    scrollbar-width: thin;
    scrollbar-gutter: stable;
}

.sidebar-scroll::-webkit-scrollbar {
    width: 6px;
}

.sidebar-scroll::-webkit-scrollbar-thumb {
    background: var(--border-medium);
    border-radius: 3px;
}

/* Restrâns: doar iconițele, centrate, cât mai îngust. Fără bară de scroll vizibilă și fără loc
   rezervat pentru ea (meniul tot se derulează cu rotița / degetul) — altfel spațiul ei din dreapta
   împingea iconițele spre stânga. */
.sidebar.collapsed {
    width: 46px;
    padding-left: 0.2rem;
    padding-right: 0.2rem;
}

.sidebar.collapsed .sidebar-scroll {
    scrollbar-width: none;
    scrollbar-gutter: auto;
    padding-right: 0;
}

.sidebar.collapsed .sidebar-scroll::-webkit-scrollbar {
    display: none;
}

.sidebar.collapsed .sidebar-brand {
    padding-left: 0;
    padding-right: 0;
}

/* 2px între meniuri și bara de scroll — în toate stările meniului (deschis, restrâns, sertar) */
.sidebar-scroll {
    padding-right: 2px;
}

/* Pe touch (telefon / tabletă), bara de scroll plutește peste conținut și nu ocupă loc, deci
   scrollbar-gutter nu rezervă nimic — chenarul evidențiat al meniului ajungea sub ea.
   Acolo lăsăm explicit loc cât bara (~6px) + 2px. */
@media (pointer: coarse) {
    .sidebar-scroll {
        padding-right: 8px;
    }
}

.sidebar.collapsed .app-footer {
    display: none;
}


.sidebar-brand {
    color: var(--accent-text);
    text-align: center;
    margin: 0.2rem 0 0.5rem;
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 2rem;
    padding: 0.5rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--border-subtle);
    box-sizing: border-box;
}

.brand-text {
    font-size: 1.1rem;
    line-height: 1.25;
    display: inline-block;
    white-space: normal;
    overflow-wrap: break-word;
    flex: 1 1 auto;
    min-width: 0;
}

.icon-piano-keys {
    vertical-align: -0.15em;
    flex-shrink: 0;
}

.brand-logo {
    height: 1.4rem;
    width: auto;
    max-width: 1.6rem;
    object-fit: contain;
    border-radius: 4px;
    flex-shrink: 0;
}

.branding-logo-preview {
    height: 38px;
    width: 38px;
    object-fit: contain;
    border-radius: 6px;
    background: var(--overlay-weak);
    border: 1px solid var(--border-subtle);
    padding: 3px;
}

.brand-text,
.nav-label {
    transition: opacity 0.2s ease, width 0.2s ease;
}

.nav-label {
    white-space: nowrap;
}

.sidebar.collapsed .brand-text,
.sidebar.collapsed .nav-label {
    opacity: 0;
    width: 0;
    overflow: hidden;
    white-space: nowrap;
}

.sidebar.collapsed .sidebar-brand {
    justify-content: center;
}

.sidebar.collapsed .nav-link {
    justify-content: center;
    padding-left: 0.3rem;
    padding-right: 0.3rem;
    /* eticheta ascunsă (lățime 0) încă primea spațiul dintre elemente — iconița ieșea decalată */
    gap: 0;
}

.nav-link {
    color: var(--text-color);
    /* stânga mai puțin decât dreapta: conținutul meniului stă mai aproape de marginea ecranului;
       sus / jos strâns — meniul e lung, iar zona de apăsare rămâne ~40px */
    padding: 0.55rem 0.9rem 0.55rem 0.6rem;
    border-radius: 8px;
    margin-bottom: 0.15rem;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background 0.2s, color 0.2s, justify-content 0.2s ease;
    text-decoration: none;
}

.nav-link:hover, .nav-link.active {
    background-color: var(--accent);
    color: #fff;
    text-decoration: none;
}

.nav-link-featured {
    background: rgba(106, 122, 174, 0.16);
    border: 1px solid rgba(106, 122, 174, 0.4);
    font-weight: 700;
    margin-bottom: 0.45rem;
}

.nav-link-featured i {
    color: var(--accent);
}

.nav-link-featured:hover i,
.nav-link-featured.active i {
    color: #fff;
}

/* Planificarea din grupurile Tehnic, Închinare, Rugăciune: prima în grup, iconița albastră ca la Planificare servicii */
.nav-link-planificare i {
    color: var(--accent);
}

.nav-link-planificare:hover i,
.nav-link-planificare.active i {
    color: #fff;
}

.nav-link i {
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

.nav-group-toggle {
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    gap: 8px;
    padding-right: 0.7rem;
}

.nav-group-toggle .nav-label {
    font-size: 0.92rem;
}

.nav-group-chevron {
    font-size: 0.75rem;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.nav-group-toggle[aria-expanded="true"] .nav-group-chevron {
    transform: rotate(180deg);
}

/* Indentul submeniului vine din containerul lor (margine + linie verticală de
   ghidaj), nu din padding-ul fiecărui link — altfel intra în conflict de
   specificitate cu resetul de padding pentru .nav-link din sidebar-ul restrâns
   pe mobil (aceeași specificitate, ordinea din fișier decidea, și pierdea
   indentarea — submeniurile arătau la fel ca meniurile principale). */
.nav-group-items {
    display: none;
    flex-direction: column;
    margin-left: 0.85rem;
    padding-left: 0.55rem;
    border-left: 2px solid var(--border-medium);
}

.nav-group-items.is-open {
    display: flex;
}

.nav-link-sub {
    font-size: 0.92rem;
}

.sidebar.collapsed .nav-group-chevron {
    display: none;
}

.sidebar.collapsed .nav-group-items {
    display: none !important;
}

@media (max-width: 576px) {
    .sidebar.collapsed .nav-group-chevron {
        display: inline;
    }

    .sidebar.collapsed .nav-group-items.is-open {
        display: flex !important;
    }
}

.sidebar-toggle {
    position: absolute;
    right: -12px;
    top: 18px;
    width: 24px;
    height: 24px;
    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;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24);
    cursor: pointer;
    z-index: 10;
    transition: background 0.2s ease;
    padding: 0;
    font-size: 0.7rem;
    line-height: 1;
    transform: none;
}

.sidebar-toggle:hover {
    background: rgba(106, 122, 174, 0.9);
    color: #fff;
}

.theme-toggle {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid var(--border-medium);
    background: var(--bg-elevated);
    color: var(--text-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
    padding: 0;
    font-size: 0.72rem;
}

.theme-toggle:hover {
    background: rgba(106, 122, 174, 0.9);
    color: #fff;
}

.app-footer-user {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 0.3rem;
}

/* rând separat pentru utilizator + logout — pe rândul de sus (limbă + temă) nu mai
   rămânea loc suficient pentru un nume lung, care fie ieșea din sidebar, fie
   împingea celelalte controale */
.app-footer-account {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    max-width: 100%;
    margin-bottom: 0.3rem;
}

.app-footer-username {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* link spre „Schimbă parola”, dar arată ca textul de până acum */
    color: inherit;
    text-decoration: none;
}
a.app-footer-username:hover { text-decoration: underline; }

/* buton rotund, ca tema (.theme-toggle), dar mai mare — iconița în textul mic din subsol era
   greu de nimerit pe telefon */
.app-footer-logout {
    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: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}

.app-footer-logout:hover {
    background: rgba(106, 122, 174, 0.9);
    color: #fff;
    text-decoration: none;
}

.locale-switch {
    display: inline-flex;
    border: 1px solid var(--border-medium);
    border-radius: 999px;
    overflow: hidden;
    height: 26px;
    flex-shrink: 0;
}

.locale-switch-btn {
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 0 0.6rem;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

a.locale-switch-btn:hover {
    background: rgba(106, 122, 174, 0.2);
    color: var(--text-color);
    text-decoration: none;
}

.locale-switch-btn.is-active {
    background: rgba(106, 122, 174, 0.55);
    color: #fff;
    cursor: default;
}

.main-content {
    flex: 1;
    min-width: 0;
    /* sus doar puțin — antetul paginilor (titlul / caruselul) stă aproape lipit de
       marginea de sus, ca să rămână cât mai mult loc pentru conținut pe ecrane mici */
    /* stânga-dreapta puțin: marginile se adunau (zona principală 2rem + container 0.75rem + cardurile,
       iar pe tabletă toate ×1.2) și rămânea mult spațiu gol. În stânga 1.1rem: butonul rotund de
       restrângere a meniului iese cu 12px peste conținut. Telefonul are regulile lui (mai jos). */
    padding: 0.6rem 0.75rem 2rem 1.1rem;
    background-color: var(--main-bg);
    overflow-x: auto;
}

@media (min-width: 577px) {
    .main-content > .container-fluid {
        padding-left: 0;
        padding-right: 0;
    }
}