/* ycm.datatables.css — stiluri partajate pentru pagini admin cu DataTables.net.
 *
 * Scope ACTUAL: bara de sus a tabelului (search + buton 9-cerculete collection +
 * butonul „Adaugă" primary). Stilurile sunt class-based (NU scoped pe ID specific
 * tabelului) → aplicabile la orice instanță DataTable din proiect care urmează
 * pattern-ul YCM (vezi `templates/role_ycm/nom_cities_list.html.twig` ca referință).
 *
 * Auto-no-op pe pagini fără DataTable — selectoarele `.dataTables_filter`, `.dt-buttons`,
 * `.dt-button-collection` sunt generate de DataTables.net plugin, NU există pe pagini
 * fără DT.
 *
 * Inclus în `templates/partials/_head.html.twig` după `core.css`. Folosește `!important`
 * intenționat pentru a învinge specificitatea CSS-ului default DataTables Buttons.
 */

/* ═════════════════════════════════════════════════════════════════════════
 * TABLE — alignment vertical center pentru text/conținut în AMBELE thead și tbody.
 * Default browser pe `<th>` e `vertical-align: middle`, dar DataTables Buttons +
 * plugin Sorting (cu săgețile ▲▼ absolute) ridică înălțimea celulei → text-ul
 * apare la top. Plus default DataTables pe `<td>` e top → cu rândurile multi-linie
 * sau cu badge-uri (status active/inactive), controalele apar dezaliniate.
 * Forțăm middle în ambele cazuri.
 * ═════════════════════════════════════════════════════════════════════════ */

.table-datatable > thead > tr > th,
.table-datatable > tbody > tr > td {
    vertical-align: middle;
}

/* ═════════════════════════════════════════════════════════════════════════
 * COLOANA `+` RESPONSIVE — cell dedicată plugin-ului DataTables Responsive
 * pentru butonul `+` (expand row pe mobile când unele coloane sunt ascunse).
 *
 * Pattern YCM: coloana 0 cu clasa `.col-control.dtr-control` (config columns
 * `{ data: null, defaultContent: '', className: 'col-control dtr-control',
 * responsivePriority: 0 }`).
 *
 * Vizual: cell 40×40 cu cerc `+` colorat (creat de plugin via `::before`)
 * deasupra unui pătrat gri 32×32 (background nostru via `::after`).
 *
 * Notă: coloana rămâne MEREU vizibilă, indiferent de viewport. Pe desktop wide
 * (când toate coloanele încap și `+` nu mai apare), cei 40px de coloană goală
 * la stânga sunt acceptați ca trade-off pragmatic vs complexitatea unui media
 * query per-page (breakpoint variabil per count+width coloane). Pentru funcția
 * mobile (`+` Responsive expand row), coloana e indispensabilă.
 * ═════════════════════════════════════════════════════════════════════════ */

.table-datatable th.col-control,
.table-datatable td.col-control {
    padding: 0.5rem 0 !important;
    text-align: center;
    /* Necesar pentru `::after` (pătratul gri) — pseudo-elementul absolute
       are nevoie de părinte position: relative ca ancoraj. */
    position: relative !important;
}

.table-datatable td.col-control {
    min-width: 40px;
    width: 40px;
}

/* Pătrat gri 32×32 background sub cercul `+`. Pseudo-element pe cell,
   centrat absolute. `pointer-events: none` ca să nu blocheze click-ul pe `+`. */
.table-datatable td.col-control.dtr-control::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 32px;
    height: 32px;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    z-index: 1;
    pointer-events: none;
}

/* `+` Responsive (creat de plugin DataTables ca `::before`) → z-index 2 →
   deasupra pătratului nostru `::after` (z-index 1). */
.table-datatable td.col-control.dtr-control::before {
    z-index: 2 !important;
}

/* ═════════════════════════════════════════════════════════════════════════
 * BUTON KEBAB — formă rectangulară 32×32 cu colțuri ușor rotunjite (NU cerc).
 * Aplicat pe `<button>` cu clasa `.dt-kebab-btn` din rândurile body (render
 * JS în coloana acțiuni). Dimensiunea 32×32 match cu pătratul gri din coloana
 * `+` Responsive → aspect vizual uniform pe ambele coloane de control.
 *
 * Wrapper-ul kebab-ului e generat de JS (vezi `renderXxxKebab(row)` în pagini)
 * cu clase `btn btn-sm btn-icon btn-light dropdown-toggle dt-kebab-btn`.
 * ═════════════════════════════════════════════════════════════════════════ */

.table-datatable .dt-kebab-btn {
    border-radius: 0.375rem !important;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ═════════════════════════════════════════════════════════════════════════
 * COLOANA ACȚIUNI (kebab) — `.col-actions`. Mirror cu `.col-control`:
 * cell 40×40 centrat, padding 0 orizontal (cell îngust). Aplicat pe `<th>` +
 * `<td>` pentru padding/alignment; `min-width`/`width` DOAR pe `<td>` (vezi
 * comentariul PATTERN MIN-WIDTH mai jos pentru motivare).
 * ═════════════════════════════════════════════════════════════════════════ */

.table-datatable th.col-actions,
.table-datatable td.col-actions {
    padding: 0.5rem 0 !important;
    text-align: center;
}

.table-datatable td.col-actions {
    min-width: 40px;
    width: 40px;
}

/* ═════════════════════════════════════════════════════════════════════════
 * 📘 PATTERN MIN-WIDTH PE COLOANE DataTables (model pentru orice DT YCM)
 * ═════════════════════════════════════════════════════════════════════════
 * PROBLEMĂ: dacă pui `min-width` și pe `th` și pe `td`, browser-ul + DataTables
 * cumulează min-widths-urile coloanelor → tabelul iese mai LAT decât viewport-ul
 * pe mobile (depășește container-ul, apare scroll orizontal sau pagina se mișcă
 * stânga-dreapta). Plugin-ul Responsive nu rezolvă asta pentru coloanele cu
 * prioritate mare (pe care le ține vizibile).
 *
 * SOLUȚIE: aplici stiluri vizuale (padding, text-align, position) PE AMBELE
 * (`th` + `td`), DAR pui `min-width` și `width` DOAR pe `<td>`. Astfel:
 *   - Lățimea coloanei se calculează din celulele de body (nu cumulează în header)
 *   - Tabelul respectă container-ul
 *   - Text-ul de body păstrează lățimea minimă dorită (nu se compactează)
 *
 * Exemplu corect:
 *   #table th.col-x, #table td.col-x  { padding: ...; text-align: ...; }   // comun
 *   #table td.col-x                    { min-width: 200px; }                 // doar td
 * ═════════════════════════════════════════════════════════════════════════ */

/* ═════════════════════════════════════════════════════════════════════════
 * LOADING INDICATOR — DataTables 1.13.x pune `dataTables_processing` cu
 * `top: 50%` calculat pe wrapper-ul tabelului. Pe tbody gol (prima încărcare),
 * thead-ul e ~50px → indicator-ul de „3 puncte" se ancorează la 25px → e tăiat
 * vertical de header.
 *
 * Fix: ancorăm la offset fix 120px (search row ~50px + thead ~50px + buffer ~20px)
 * indiferent de tbody. Wrapper-ul devine `position: relative` ca ancoraj.
 *
 * Selector class-based — aplicabil pe orice DT din proiect.
 * ═════════════════════════════════════════════════════════════════════════ */

.dataTables_wrapper {
    position: relative;
}

.dataTables_wrapper .dataTables_processing {
    top: 120px !important;
    margin-top: 0 !important;
}

/* ═════════════════════════════════════════════════════════════════════════
 * CHILD ROW RESPONSIVE — Grid 2-coloane cu lățime AUTO pentru label-uri.
 *
 * Default plugin DataTables Responsive randerează `<ul><li><span.dtr-title>
 * label</span><span.dtr-data>val</span></li>...</ul>` în interiorul rândului
 * copil + setează `min-width: 75px` pe `.dtr-title`. Probleme:
 *   - `75px` e prea mic pentru label-uri RO/EN de 10+ chars („Numele țării",
 *     „Creat [GMT +3]") → label-urile se înghesuie cu valorile
 *   - Orice override fix (130px, 170px, etc.) cade pe label-uri lungi pe
 *     pagini cu coloane „[GMT ±N]" SAU pe valori lungi (emails, link-uri)
 *     care forțează scroll orizontal pe mobile
 *
 * Soluție: Grid pe `<ul>` cu coloane `max-content 1fr` — col 1 ia natural
 * lățimea celui mai lat label din tabelul curent (auto-scaled), col 2 ia
 * restul. `<li>` devine `display: contents` ca să lase span-urile copii
 * să devină grid items direct → toate label-urile aliniate într-o coloană,
 * toate valorile în cealaltă.
 *
 * Pe coloana `1fr` (value): `min-width: 0` + `overflow-wrap: anywhere`
 * permit ruperea valorii la orice caracter când conținutul depășește
 * lățimea disponibilă (ex: email lung pe mobile îngust). Continuarea
 * wrap-ului se aliniază natural sub primul caracter de pe linia 1 (Grid
 * păstrează limita stângă a celulei).
 *
 * Zero pixeli hardcoded → scalează automat cu viewport-ul + label-urile
 * efective din pagină. Niciun override page-specific necesar.
 *
 * Selector `.table-datatable tr.child` — clasa custom YCM pe `<table>`,
 * scope strâns (nu afectează DataTables externe gen profile/audit).
 * ═════════════════════════════════════════════════════════════════════════ */

.table-datatable tr.child ul.dtr-details {
    display: grid !important;
    grid-template-columns: max-content 1fr;
    column-gap: 1rem;
    row-gap: 0;
}
.table-datatable tr.child ul.dtr-details > li {
    display: contents !important;
}
.table-datatable tr.child ul.dtr-details > li > .dtr-title,
.table-datatable tr.child ul.dtr-details > li > .dtr-data {
    padding-block: 0.5rem;
    border-bottom: 1px solid #eee;
}
.table-datatable tr.child ul.dtr-details > li:last-child > .dtr-title,
.table-datatable tr.child ul.dtr-details > li:last-child > .dtr-data {
    border-bottom: 0;
}
.table-datatable tr.child ul.dtr-details > li > .dtr-data {
    min-width: 0;
    overflow-wrap: anywhere;
}
/* Anulez `min-width: 75px` default DT plugin — Grid-ul determină lățimea
   col 1 din `max-content`, nu mai e nevoie de min impus pe label. */
.table-datatable tr.child span.dtr-title {
    min-width: 0;
}

/* ═════════════════════════════════════════════════════════════════════════
 * PAGINARE COMPACTĂ PE MOBILE — pentru tabele cu MULTE pagini (ex. 1000+),
 * lista numerică „1, 2, ..., 998, 999, 1000" iese din ecran pe mobile.
 *
 * Sub 768px (Bootstrap `md` breakpoint):
 *   - Ascundem toate butoanele EXCEPT `previous` (`‹`), `next` (`›`) și pagina curentă (`active`)
 *   - Înlocuim textul „Previous"/„Next" cu chevron-uri `‹`/`›` (font-size: 0 ascunde
 *     textul, `::before` îl re-injectează ca simbol)
 *
 * Pe desktop (≥ 768px) rămâne paginarea numerică completă cu text-ul „Previous/Next".
 *
 * Selectoare class-based (`.dataTables_wrapper`) — aplicabile pe orice DT din proiect.
 * ═════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
    .dataTables_wrapper .dataTables_paginate .page-item:not(.previous):not(.next):not(.active) {
        display: none;
    }
    .dataTables_wrapper .dataTables_paginate .page-item.previous .page-link,
    .dataTables_wrapper .dataTables_paginate .page-item.next .page-link {
        font-size: 0;
    }
    .dataTables_wrapper .dataTables_paginate .page-item.previous .page-link::before {
        content: '‹';
        font-size: 1rem;
    }
    .dataTables_wrapper .dataTables_paginate .page-item.next .page-link::before {
        content: '›';
        font-size: 1rem;
    }
}

/* ═════════════════════════════════════════════════════════════════════════
 * SEARCH INPUT — wrapper `<"col-* dt-search-left"f>` din `dom` layout YCM.
 * `.dataTables_filter` e clasa default DT pentru zona search.
 * ═════════════════════════════════════════════════════════════════════════ */

.dt-search-left .dataTables_filter {
    text-align: left;
}

.dt-search-left .dataTables_filter label {
    /* Label-ul wrap-uiește input-ul (`<label><input></label>`). Forțăm display: block
       + width 100% ca input-ul să poată folosi 100% din lățimea containerului `col-8`. */
    display: block !important;
    width: 100% !important;
    margin: 0;
}

.dt-search-left .dataTables_filter input {
    /* `!important` peste tot pentru că DataTables 1.13.x impune cu specificitate egală:
        - `margin-left: 0.5em`
        - `width: auto` (default DT — ar bate `width: 100%` al nostru)
        - `display: inline-block`
       Ordinea CSS load (vendor_bundle → core → ycm.datatables) ar trebui să ne dea câștig,
       dar `!important` asigură comportamentul corect indiferent de cache/order. */
    margin: 0 !important;
    width: 100% !important;
    display: block !important;
    /* Match cu înălțimea butoanelor toolbar (38px ≈ form-control standard). */
    height: 38px;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
}

/* ═════════════════════════════════════════════════════════════════════════
 * DT BUTTONS WRAPPER — zona toolbar dreapta. Container `.dt-buttons` din
 * DataTables Buttons API. CSS-ul DT default pune `margin-bottom: 8px` +
 * `display: inline-block` cu `flex-wrap` care strică alinierea single-row.
 * ═════════════════════════════════════════════════════════════════════════ */

.dt-buttons {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    /* Container părinte e flex item (col-* d-flex). Fără `flex: 0 0 auto`,
       `.dt-buttons` ia flex-basis = container width și se întinde pe toată coloana
       cu butonul aliniat stânga în interior. */
    width: auto !important;
    flex: 0 0 auto !important;
}

.dt-buttons .dt-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 38px !important;  /* match cu search input height */
    padding: 0 0.75rem !important;
    line-height: 1 !important;
    margin: 0 !important;
}

/* ═════════════════════════════════════════════════════════════════════════
 * BUTON „ADAUGĂ" — primary color forțat (DT Buttons aplică automat
 * `btn-secondary` care învinge `btn-primary` din className). `.dt-btn-add`
 * e marker custom (aplicat de `YcmDataTable.buildAddButton()` în className).
 * ═════════════════════════════════════════════════════════════════════════ */

.dt-buttons .dt-button.dt-btn-add {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: #fff !important;
    margin-right: 0.5rem !important;
    padding: 0 0.5rem !important;
}

.dt-buttons .dt-button.dt-btn-add:hover,
.dt-buttons .dt-button.dt-btn-add:focus {
    background-color: var(--bs-primary) !important;
    filter: brightness(0.92);
}

/* ═════════════════════════════════════════════════════════════════════════
 * COLLECTION DROPDOWN — deschis la click pe butonul 9-cerculete. Wrapper-ul
 * `.dt-button-collection` e atașat la `<body>` de DataTables (NU sub wrapper-ul
 * tabelului), deci selectoarele NU pot fi scoped pe ID-ul tabelei specifice.
 *
 * Default DT Buttons: text-align: center pe item → blocul icon+text apare centrat.
 * Override-ul nostru: column-flex cu stretch + text-align: left pentru aspect
 * consistent al listei (icon stânga, text alături).
 * ═════════════════════════════════════════════════════════════════════════ */

.dt-button-collection {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    text-align: left !important;
}

.dt-button-collection .dt-button {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    width: 100% !important;
    text-align: left !important;
    padding: 0.5rem 1rem !important;
    margin: 0 !important;
}

/* Separator vizual între secțiuni în dropdown (ex. între export-uri și „items per
   page"). Aplicat ca `border-top` pe primul item din secțiune nouă — evită
   un buton-placeholder separat. Marker custom `.dt-section-start` setat în
   `YcmDataTable.buildExportButtons()` și `buildPageLengthButtons()`. */
.dt-button-collection .dt-button.dt-section-start {
    border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
    margin-top: 0.5rem !important;
    padding-top: 0.5rem !important;
}

/* Wrapper-ul intern (span auto-generat de DT Buttons în jurul `text`) devine
   flex container — `.dt-ico` și `.dt-txt` sunt flex items aliniați la stânga. */
.dt-button-collection .dt-button > span {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    text-align: left !important;
}

/* `flex: 0 0 1.5em` = lățime FIXĂ 1.5em, NU shrinks, NU grows — emoji-ul
   ocupă mereu același slot indiferent de „advance width" intern (📥 vs 🖨️
   vs 📋 vs 📄 diferă). Textul `.dt-txt` ia restul spațiului. */
.dt-button-collection .dt-button .dt-ico {
    flex: 0 0 1.5em;
    text-align: center;
    margin-right: 0.5em;
    overflow: hidden;
}

.dt-button-collection .dt-button .dt-txt {
    flex: 1 1 auto;
    text-align: left;
}