/*
 * COPIE. Originalul e `public/css/list_chrome.css`, al portalului vechi.
 *
 * De pe 14 septembrie 2026 v4 nu mai ia NIMIC de la portalul CodeIgniter la
 * rulare: foile, fonturile, imaginile si pluginurile stau in `v4/web/public/`
 * si se servesc de sub `base`-ul aplicatiei (vezi `vite.config.ts`, PORTAL_STYLES).
 * Regulile de stil sunt neschimbate; in `app.css` caile `url(/public/...)` au
 * devenit relative la foaie (`url(../fonts/...)`, `url(../images/...)`).
 * Pana cand portalul vechi dispare, cele doua copii se tin la fel.
 */
/*
 * Perechea lui list_chrome.js: infatisarea listelor, aceeasi pe toata aplicatia.
 *
 * Fisier separat, legat din antetul comun, nu in app.css: acela se construieste
 * cu laravel-mix din resources/sass, iar o schimbare acolo ar cere o
 * reconstruire a intregii foi.
 *
 * Regulile de tabel sunt scrise pe `table.dataTable`, adica pe TOATE tabelele
 * DataTables: asa s-a cerut - aceeasi infatisare peste tot, nu doar pe listele
 * de tichete unde s-a nascut. Ce tine de chrome (subsol, bara de sus, insigne)
 * atarna oricum de clase pe care JS-ul le pune numai unde se cuvine.
 */

/* ------------------------------------------------------------------ 1 */
/* Sagetile de pe antete pleaca, de pe toate tabelele. Sunt desenate de
   DataTables ca `:after` cu o iconita Glyphicons, deci se sting de acolo, si
   se ia inapoi si spatiul pe care il rezervau. Unealta de ordonare din prima
   coloana - pusa de JS pe fiecare tabel - le tine locul. */

table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::after,
table.dataTable thead .sorting_asc_disabled::after,
table.dataTable thead .sorting_desc_disabled::after {
    content: none;
}

table.dataTable thead > tr > th {
    padding-right: 8px;
}

/* ------------------------------------------------------------------ 2 */
/* Coloana dupa care se ordoneaza acum: ingrosata si subliniata.

   `text-decoration` si nu `border-bottom`: linia trebuie sa stea sub cuvant,
   nu sub casuta. Pe un antet ingust, o linie cat celula arata a chenar. */

table.dataTable thead th.tk-sorted-by {
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ------------------------------------------------------------------ 3 */
/* Controalele listei, mutate in subsolul paginii.

   Subsolul are fundal inchis (#393F4C) si `text-align: center`; controalele
   vin de sub tabel, unde fundalul era alb. De-aia se scriu aici culorile si
   asezarea - altfel textul ar fi inchis pe inchis, iar grupul s-ar centra in
   loc sa stea in colt. */

#pageFooter .tk-list-bottom-actions {
    display: flex;
    align-items: center;
    /* Grupul incepe de la marginea din stanga a subsolului: acolo s-a mutat,
       fiindca se apasa. Inainte era in dreapta, lipit de capat. */
    justify-content: flex-start;
    gap: 16px;
}

/* Marginile lor proprii pleaca: spatiul dintre ele il da `gap`-ul de mai sus. */
#pageFooter .tk-list-bottom-actions .dataTables_length,
#pageFooter .tk-list-bottom-actions .dataTables_paginate,
#pageFooter .tk-list-bottom-actions .dt-button {
    margin: 0;
    padding: 0;
    float: none;
    white-space: nowrap;
}

#pageFooter .tk-list-bottom-actions .dataTables_length,
#pageFooter .tk-list-bottom-actions .dataTables_length label {
    color: #ffffff;
    font-weight: normal;
    margin: 0;
}

#pageFooter .tk-list-bottom-actions .pagination {
    margin: 0;
    vertical-align: middle;
}

/*
 * PAGINAREA E IMBRACATA PENTRU INCHIS, NU PENTRU HARTIE.
 *
 * Se scrisese culoarea numarului de randuri, dar nu si a paginarii de langa el
 * - iar ea vine de la Bootstrap: pastile ALBE cu scris #57636F, facute pentru
 * pagina alba de sub tabel. Mutate pe #393F4C ieseau trei lucruri:
 *
 *   - patru dreptunghiuri albe intr-o bara inchisa, mai tipatoare decat lista
 *     pe care o slujesc;
 *   - pagina curenta, care are fundal #393F4C, se pierdea cu totul in subsol:
 *     acelasi fundal, deci nici pastila, nici numarul din ea;
 *   - sagetile de stanga si de dreapta, care sunt semne de 10 pixeli si nu
 *     cifre, se topeau primele - de-aia se vedeau numerele si ele nu.
 *
 * Acum: fundal strapuns, contur discret, scris deschis, iar pagina curenta e
 * singura plina. Numai in subsol - aceleasi tabele au paginarea normala
 * oriunde altundeva ar fi desenata.
 */
#pageFooter .tk-list-bottom-actions .pagination > li > a,
#pageFooter .tk-list-bottom-actions .pagination > li > span {
    background: transparent;
    border-color: #59626f;
    color: #dfe4ea;
}

#pageFooter .tk-list-bottom-actions .pagination > li > a:hover,
#pageFooter .tk-list-bottom-actions .pagination > li > a:focus {
    background: #4a5361;
    border-color: #6d7686;
    color: #ffffff;
}

#pageFooter .tk-list-bottom-actions .pagination > .active > a,
#pageFooter .tk-list-bottom-actions .pagination > .active > span,
#pageFooter .tk-list-bottom-actions .pagination > .active > a:hover,
#pageFooter .tk-list-bottom-actions .pagination > .active > span:hover {
    background: #1d6a86;
    border-color: #1d6a86;
    color: #ffffff;
}

/* Capatul listei: se vede ca butonul e acolo, dar ca nu duce nicaieri. */
#pageFooter .tk-list-bottom-actions .pagination > .disabled > a,
#pageFooter .tk-list-bottom-actions .pagination > .disabled > span,
#pageFooter .tk-list-bottom-actions .pagination > .disabled > a:hover {
    background: transparent;
    border-color: #4a5361;
    color: #79828f;
}

/*
 * Lista de coloane se deschide IN SUS, deasupra butonului.
 *
 * DataTables o insereaza chiar dupa buton - deci inauntrul grupului asta - si o
 * aseaza absolut, calculand `top` fata de primul parinte pozitionat. Din subsol,
 * "sub buton" inseamna in afara ferestrei: lista se deschidea, dar nu se vedea.
 *
 * Se face din foaia de stil, nu din JS: pozitia o scrie DataTables inline la
 * fiecare deschidere, deci o asezare pusa cu JS ar trebui refacuta de fiecare
 * data si ar depinde de cine apuca ultimul. `!important` intr-o regula legata de
 * containerul asta bate scrierea inline si nu atinge nicio alta lista din
 * aplicatie.
 *
 * Containerul devine reperul: `bottom: 100%` inseamna "chiar deasupra lui".
 */
.tk-list-bottom-actions {
    position: relative;
}

.tk-list-bottom-actions div.dt-button-collection {
    position: absolute !important;
    top: auto !important;
    bottom: 100% !important;
    /* Lista se deschide spre DREAPTA de buton, adica spre mijlocul ecranului:
       grupul sta acum in coltul din stanga, si o lista agatata de marginea lui
       dreapta ar fi crescut spre marginea ferestrei. */
    left: 0 !important;
    right: auto !important;
    margin-bottom: 8px;
    z-index: 2010;
}

/* Coloanele sunt peste douazeci: lista trebuie sa se poata derula, altfel iese
   pe sus din fereastra. */
.tk-list-bottom-actions div.dt-button-collection .dropdown-menu {
    position: static;
    display: block;
    float: none;
    max-height: 60vh;
    overflow-y: auto;
    margin: 0;
}

/* "Columns" ramane doar cu iconita; numele lui sta in `title`. */
#pageFooter .tk-list-bottom-actions .tk-list-colvis {
    padding: 5px 10px;
}

/* Reimprospatarea, rosie si ultima la dreapta. `btn-primary` ii vine din
   configurarea butoanelor, care sta in bundle - de-aia se stinge de aici, pe
   clasa pusa la mutare. */
#pageFooter .tk-list-bottom-actions .tk-list-refresh,
#pageFooter .tk-list-bottom-actions .tk-list-refresh.btn-primary {
    background: #f44f4f;
    border-color: #f44f4f;
    color: #ffffff;
    padding: 5px 10px;
}

#pageFooter .tk-list-bottom-actions .tk-list-refresh:hover,
#pageFooter .tk-list-bottom-actions .tk-list-refresh.btn-primary:hover {
    background: #e13c3c;
    border-color: #e13c3c;
    color: #ffffff;
}

/* ------------------------------------------------------------------ 4 */
/* Unealta din prima coloana. */

.tk-sort {
    display: inline-block;
}

.tk-sort-toggle {
    color: #90a1af;
    padding: 0 2px;
    text-decoration: none;
}

.tk-sort-toggle:hover,
.tk-sort-toggle:focus {
    color: #3c8dbc;
    text-decoration: none;
}

/* Lista are cincisprezece-douazeci de coloane, deci trebuie sa se poata
   derula; altfel pe un ecran mic ultimele intrari cad sub marginea ferestrei
   si nu se poate ajunge la ele. */
.tk-sort-menu {
    max-height: 60vh;
    overflow-y: auto;
    min-width: 180px;
}

.tk-sort-menu > li > a {
    padding: 4px 16px;
}

/* Coloana dupa care se ordoneaza acum, insemnata si in lista. */
.tk-sort-menu > li > a.active {
    font-weight: 700;
    background-color: #f5f7f9;
}

/* ------------------------------------------------------------------ 5 */
/* Butonul verde de tichet nou: plutitor, in coltul din dreapta jos.

   Deasupra subsolului, nu peste el: subsolul e fix si are 1002, deci butonul
   sta mai sus si mai la dreapta de el. */

.stretchy-nav-ticket.tk-float-new {
    position: fixed;
    right: 24px;
    /* `bottom` se pune din JS: inaltimea masurata a subsolului plus aceiasi
       24px pe care ii are si fata de marginea din dreapta. Valoarea de aici e
       doar cea de pornire, pana se masoara. */
    bottom: 72px;
    z-index: 1003;
    margin: 0;
}

/* ------------------------------------------------------------------ 6 */
/* "Actions": bara plutitoare, jos, peste continut.

   Butonul statea in randul de deasupra tabelului - chiar randul pe care l-am
   strans ca sa inceapa lista imediat sub meniu. Era deci ascuns, si degeaba se
   aprindea la selectie.

   Acum e o bara care apare cand bifezi si dispare cand renunti. Peste continut,
   nu in curgerea lui: randurile de sub ea nu se misca. `bottom` se pune din JS,
   dupa inaltimea masurata a subsolului. */

.tk-actions-bar {
    position: fixed;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    bottom: 64px;
    z-index: 1004;

    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 16px;

    background: #2f3542;
    border-radius: 6px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .3);

    opacity: 0;
    pointer-events: none;
    transition: opacity 140ms ease, transform 140ms ease;
}

body.tk-actions-open .tk-actions-bar {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.tk-actions-bar .tk-actions-count {
    color: #ffffff;
    font-size: 13px;
    white-space: nowrap;
}

/* Butonul e pe fundal inchis acum; cel deschis se pierdea in el. */
.tk-actions-bar .multi-actions {
    background: #ffffff;
    border-color: #ffffff;
    color: #2f3542;
}

/* Bara sta jos, deci meniul ei se deschide in sus. `dropup` face asta, dar
   marginea implicita il lipeste de buton. */
.tk-actions-bar .dropup .dropdown-menu {
    margin-bottom: 6px;
    max-height: 60vh;
    overflow-y: auto;
}

@media (prefers-reduced-motion: reduce) {
    .tk-actions-bar {
        transition: opacity 1ms linear;
        transform: translateX(-50%);
    }

    body.tk-actions-open .tk-actions-bar {
        transform: translateX(-50%);
    }
}

/* Exporturile, ca randuri de meniu: iconita si numele, aliniate ca restul. */
.tk-export-item > .tk-export-in-menu {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    padding: 3px 20px;
    color: #333333;
}

.tk-export-item > .tk-export-in-menu:hover {
    background-color: #f5f5f5;
    color: #262626;
}

/* ------------------------------------------------------------------ 7 */
/* Cautarea si filtrele, urcate in bara de sus.

   Randul antetului e inalt de 50px, iar elementele lui se centreaza fiecare cum
   apuca. Aici se face cinstit, ca la numele sectiunii: elementul se intinde pe
   inaltimea randului si isi centreaza continutul. */

#current-section + .tk-header-tools {
    display: flex;
    align-items: center;
    margin-left: 16px;
}

/* Eticheta din jurul cautarii vine cu marginile ei de la Bootstrap si tragea
   totul cu cateva puncte mai jos decat vecinii. */
#current-section + .tk-header-tools .dataTables_filter,
#current-section + .tk-header-tools .dataTables_filter label {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    font-weight: normal;
}

/* Lupa, INAUNTRUL casutei.

   Regula care o aseza asa traieste in app.css, legata de `.dataTableF` - adica
   de locul de unde tocmai a plecat cautarea. Se scrie din nou aici, pentru noul
   ei loc. */
#current-section + .tk-header-tools .dataTables_filter {
    position: relative;
}

#current-section + .tk-header-tools .dataTables_filter i.fa-search {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #9aa4b1;
    pointer-events: none;
    font-size: 12px;
}

/* Invelisul cautarii se strange pe casuta.

   `app.css` ii da `width: 280px !important` si `float: left !important`, pentru
   locul de unde a plecat - randul de deasupra tabelului. Casuta are 200px, deci
   invelisul ramanea cu 80px goi la dreapta ei, si butonul de filtre statea
   impins cu atat mai incolo, desi regulile de mai jos il vor lipit.

   Se scrie tot cu `!important`: altfel nu se poate raspunde unui `!important`.
   Floatul nu conteaza intr-un parinte flex, dar se stinge odata cu latimea -
   sa nu ramana o regula care spune altceva decat se intampla. */
#current-section + .tk-header-tools .dataTables_filter {
    width: auto !important;
    float: none !important;
}

/* Cautarea si filtrele, lipite: o casuta si un buton care se ating, ca un
   singur lucru. Colturile dinspre imbinare se indreapta. */
#current-section + .tk-header-tools .dataTables_filter input {
    height: 30px;
    margin: 0;
    padding-left: 28px;
    width: 200px;
    border-radius: 3px 0 0 3px;
    border-right: 0;
}

/* Butonul de filtre: doar iconita, dupa cautare. */
#current-section + .tk-header-tools .tk-header-filters {
    position: relative;
    margin: 0;
    height: 30px;
    padding: 4px 10px;
    line-height: 20px;
    border-radius: 0 3px 3px 0;
}

/* Insigna cu numarul de filtre puse: mica, in coltul butonului. */
#current-section + .tk-header-tools .tk-filters-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background-color: #f44f4f;
    color: #ffffff;
    font-size: 10px;
    line-height: 16px;
    text-align: center;
    font-weight: 700;
}

/* Randul lor de deasupra tabelului a ramas gol: se strange, ca sa inceapa
   coloanele imediat sub meniu. */
.tk-header-row-empty {
    display: none;
}

/* Butoanele care stateau in banda de deasupra tabelului - ADD Device, Clear,
   ce-o avea fiecare ecran - mutate in bara de sus, la dreapta filtrului. Pe
   inaltimea cautarii, ca sa stea toate pe acelasi rand; culorile raman ale
   lor, ca sa se recunoasca. */
#current-section + .tk-header-tools .tk-header-extra {
    margin-left: 8px;
}

#current-section + .tk-header-tools .tk-header-extra.btn,
#current-section + .tk-header-tools .tk-header-extra .btn {
    height: 30px;
    padding: 4px 10px;
    line-height: 20px;
    font-size: 12px;
}

/* Exporturile coborate in subsol, pe paginile fara "Actions" cu selectie:
   doar iconita, pe masura vecinilor Columns si Refresh. */
#pageFooter .tk-list-bottom-actions .tk-footer-export {
    margin: 0;
    padding: 5px 10px;
    float: none;
}

/* Pe ecran ingust casuta se strange, dar nu se ascunde: cautarea e ACUM
   inauntrul barei, iar `display: none` aici ar face-o de negasit. */
@media (max-width: 991px) {
    #current-section + .tk-header-tools {
        margin-left: 8px;
    }

    #current-section + .tk-header-tools .dataTables_filter input {
        width: 120px;
    }
}

/* ------------------------------------------------------------------ 8 */
/* Lista incepe imediat sub meniu, si se intinde pana la margini.

   `#page-content` are 20px de jur imprejur, gandite pentru ecrane cu carduri.
   Pe o lista care oricum are chenar propriu, aia sunt doar trei dungi albe:
   una sub meniu si doua pe laturi. Se sting numai pe ecranele de lista - foaia
   asta se incarca doar acolo. */

body.tk-list-flush #page-content {
    padding: 0;
}

/* Randurile pe care DataTables le face in jurul tabelului sunt randuri
   Bootstrap: au margini negative, iar coloanele lor au cate 15px de padding pe
   laturi. Alea erau dungile albe din stanga si din dreapta. */
body.tk-list-flush #page-content .dataTables_wrapper > .row {
    margin-left: 0;
    margin-right: 0;
}

body.tk-list-flush #page-content .dataTables_wrapper > .row > [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
}

/* Randurile de filtre rapide si de filtre salvate raman in macheta chiar cand
   n-au nimic in ele; goale, tot tin inaltime.

   (A fost aici si un `.chat-table:empty` - clasa aia nu exista in pagina,
   regula nu facea nimic. Dunga alba de sub antet venea de fapt din
   #quick-tickets, un rand gol pe care nu-l umplea nimeni; a fost scos din
   view cu totul, nu ascuns de aici.) */
body.tk-list-flush #page-content .quickFilters:empty,
body.tk-list-flush #page-content .userFilters:empty {
    display: none;
}

/* Si, pentru orice invelis gol care ar scapa de regula de mai sus: coloanele
   Bootstrap au `min-height: 1px`, ca sa nu se surpe randul cand n-au continut.
   Un pixel de fiecare, si aia era dunga de sub meniu.

   Se stinge pe toate coloanele din invelisul tabelului, nu doar pe cele goale:
   pe una cu continut, `min-height` de un pixel oricum nu spune nimic. Asa nu
   mai depinde de `:empty`, care se pacaleste si de un spatiu ramas inauntru. */
body.tk-list-flush #page-content .dataTables_wrapper > .row > [class*="col-"] {
    min-height: 0;
}

/* Tabelul isi avea marginile lui de sus si de jos, puse cu !important din
   app.css - de-aia se sting tot cu !important. */
body.tk-list-flush #page-content table.dataTable {
    margin-top: 0 !important;
}

/* `#content` e invelisul din macheta listei; si el vine cu spatiu de sus. */
body.tk-list-flush #content {
    padding-top: 0;
    margin-top: 0;
}

/* ------------------------------------------------------------------ 9 */
/* Textul lung de sub tabel, scos.

   "Showing 1 to 18 of 67 entries" spunea trei numere, din care doua se vad
   oricum: cate randuri sunt pe ecran si la ce pagina esti. Ramane cel care
   conteaza, iar el s-a mutat in meniu, pe intrarea listei - vezi
   `totalAsBadge` din list_chrome.js. Textul se ascunde, nu se sterge -
   DataTables il rescrie la fiecare desenare si s-ar plange de un element
   lipsa. */

.tk-info-hidden {
    display: none !important;
}

/* Insigna din meniu nu are reguli aici: poarta chiar clasele cu care si-o scriu
   intrarile care si-o stiu de pe server (`label font-10`), ca sa arate la fel
   fie ca numarul vine din PHP, fie din tabel. */

/* Alegerea proprie a unui ecran - "ce arata lista" - urcata in bara, inaintea
   cautarii. Pe inaltimea ei, ca sa stea pe acelasi rand. */
#current-section + .tk-header-tools .tk-header-select {
    margin-right: 10px;
}

#current-section + .tk-header-tools .tk-header-select select {
    height: 30px;
    max-width: 200px;
    margin: 0;
    padding: 4px 8px;
    border-radius: 3px;
    font-size: 12px;
    line-height: 20px;
}

/* Pe ecran ingust se strange, ca si cautarea de langa ea. */
@media (max-width: 991px) {
    #current-section + .tk-header-tools .tk-header-select {
        margin-right: 6px;
    }

    #current-section + .tk-header-tools .tk-header-select select {
        max-width: 130px;
    }
}

/* ----------------------------------------------------------------- 10 */
/* Banda alba subtire dintre meniu si lista.

   Ramasesera marginile invelisurilor: `.dataTables_wrapper` si randurile lui,
   `#content`, si tabelul cu marginile lui puse cu !important din app.css.
   Fiecare aducea cativa pixeli, si impreuna se vedeau ca o dunga. */

body.tk-list-flush #content,
body.tk-list-flush #page-content .dataTables_wrapper,
body.tk-list-flush #page-content .chat-tickets-table {
    margin-top: 0;
    padding-top: 0;
}

body.tk-list-flush #page-content .dataTables_wrapper > .row:first-child {
    margin-top: 0;
}

body.tk-list-flush #page-content table.dataTable {
    margin-top: 0 !important;
    border-top-width: 0;
}

/* Capul de tabel se lipeste de meniu: fara asta ramane o dunga cat chenarul. */
body.tk-list-flush #page-content table.dataTable > thead > tr > th {
    border-top: 0;
}

/* ----------------------------------------------------------------- 11 */
/* Coloane: tras de latime si mutat.

   Cursorul spune care gest urmeaza: langa marginea din dreapta a antetului se
   trage de latime, in rest se muta coloana. Fara semnul asta, omul nu are de
   unde sti ca marginea e apucabila. */

table.dataTable thead th {
    position: relative;
}

/* Manerul de tras: `::before`, NU `::after`. Sagetile de sortare traiau pe
   `::after`, iar regula care le stinge (content: none, mai sus) batea si
   manerul cand statea tot acolo - pe coloanele ordonabile cursorul de tras nu
   aparea deloc. Pe `::before` nu se calca cu nimeni. */
table.dataTable thead th::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 8px;
    height: 100%;
    cursor: col-resize;
}

/* Cat se trage, cursorul ramane cel de tras oriunde ar ajunge mouse-ul, si
   nu se selecteaza text din greseala. */
body.tk-col-resizing,
body.tk-col-resizing * {
    cursor: col-resize !important;
    user-select: none;
}

/* (A existat aici o clasa de derulare orizontala, tk-col-overflow, pentru
   varianta in care tabelul crestea peste ecran. Regula ceruta acum e alta:
   tabelul are FIX latimea ecranului si tragerea muta peretele dintre coloane
   vecine - nu mai exista nimic de derulat.) */

/* Antetul nu se mai muta cu mouse-ul, deci nici nu trebuie sa arate ca s-ar
   putea: ColReorder pune `cursor: move` pe el din foaia lui de stil. */
table.dataTable thead th {
    cursor: pointer;
}

/* Intrarile din meniul de coloane se pot trage: se vede din cursor. */
.dt-button-collection [data-cv-idx] {
    cursor: grab;
}

.dt-button-collection [data-cv-idx]:active {
    cursor: grabbing;
}

/* ----------------------------------------------------------------- 12 */
/* Meniul de coloane: ce e bifat si ce nu.

   DataTables marcheaza coloanele vizibile cu clasa `active` pe intrare, dar
   intr-un meniu Bootstrap aia nu se vede aproape deloc - si de cand intrarile
   se pot si trage, cu atat mai putin se intelegea ce e pornit.

   Un patrat inaintea numelui: gol cand coloana e ascunsa, plin cand se vede.
   Desenat din CSS, nu cu o fonteca de iconite - functioneaza si daca fontul de
   iconite nu s-a incarcat. */

.dt-button-collection .buttons-columnVisibility {
    position: relative;
    padding-left: 32px !important;
}

.dt-button-collection .buttons-columnVisibility::before {
    content: '';
    position: absolute;
    left: 12px;
    top: 50%;
    margin-top: -7px;
    width: 13px;
    height: 13px;
    border: 1px solid #9aa4b1;
    border-radius: 2px;
    background: #ffffff;
}

.dt-button-collection .buttons-columnVisibility.active::before {
    background: #3c8dbc;
    border-color: #3c8dbc;
    /* Inelul alb dinauntru face patratul sa se citeasca a bifa, fara iconita. */
    box-shadow: inset 0 0 0 2px #ffffff;
}

/* Coloana ascunsa se si stinge putin, ca sa se vada dintr-o privire care sunt. */
.dt-button-collection .buttons-columnVisibility:not(.active) {
    color: #8a94a0;
}

/* List | Tree View, in bara de sus, imediat inaintea filtrelor. */
#current-section + .tk-header-tools .tk-header-view,
#current-section + .tk-header-tools .tk-view-toggle {
    display: inline-flex;
    margin-left: 8px;
    margin-right: 8px;
}

#current-section + .tk-header-tools .tk-view-toggle .btn {
    height: 30px;
    padding: 4px 10px;
    line-height: 20px;
    font-size: 12px;
}

#current-section + .tk-header-tools .tk-view-toggle .btn.active {
    background: #3c8dbc;
    border-color: #3c8dbc;
    color: #fff;
}

.dataTables_wrapper.od-host-tree-on table.dataTable,
.dataTables_wrapper.od-host-tree-on .dataTables_info,
.dataTables_wrapper.od-host-tree-on .dataTables_paginate,
.dataTables_wrapper.od-host-tree-on .dataTables_length,
.dataTables_wrapper.od-host-tree-on .dataTables_processing {
    display: none !important;
}

body.od-host-tree-mode #pageFooter .tk-list-bottom-actions {
    display: none;
}

.od-host-tree {
    background: #fff;
    border: 1px solid #e4e7eb;
    margin: 0 0 16px;
}

.od-host-tree-empty {
    padding: 24px 16px;
    color: #8a94a0;
    text-align: center;
}

.od-host-tree-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 4px 12px 4px 8px;
    border-bottom: 1px solid #f0f2f4;
}

.od-host-tree-row:hover {
    background: #f7f8fa;
}

.od-host-tree-twist {
    width: 22px;
    height: 22px;
    border: 0;
    background: transparent;
    color: #6b7280;
    padding: 0;
    line-height: 22px;
    text-align: center;
    flex: 0 0 22px;
}

.od-host-tree-twist.is-leaf {
    display: inline-block;
}

.od-host-tree-icon {
    flex: 0 0 auto;
}

.od-host-tree-name {
    font-weight: 600;
    color: #2c3e50;
}

.od-host-tree-type {
    margin-left: auto;
    color: #6b7280;
    font-size: 12px;
}

.od-host-tree-kids .od-host-tree-row {
    background: #fbfbfc;
}

/* ----------------------------------------------------------------- 13 */
/* Butonul "Action" de pe randul unei liste, si sertarul lui.
 *
 * Erau amandoua asa cum le lasa Bootstrap 3: colturi de 4px, chenar cenusiu,
 * degrade in spate si o umbra tare, adica exact infatisarea de care restul
 * portalului s-a departat. Cardurile dinauntrul fisei unui aparat (.dv-owner,
 * device_details.css) sunt de 10px, cu chenar #e3e8ee si fundal #fbfcfd; un
 * buton de 4px langa ele arata ca dintr-o alta aplicatie.
 *
 * Aceleasi valori, deci: 8px pe buton (mai mic decat cardul, ca sa nu para o
 * pastila) si 10px pe sertar, acelasi chenar, aceeasi umbra moale.
 *
 * Regulile stau pe `table.dataTable td`, adica pe orice lista, nu doar pe cea
 * de aparate: butonul e acelasi in Overview, Inventoree, Discovery si oriunde
 * altundeva - si o singura infatisare a lui e chiar rostul foii asteia.
 */

table.dataTable td .btn-group > .btn.dropdown-toggle {
    border-radius: 8px;
    border: 1px solid #e3e8ee;
    background: #fbfcfd;
    color: #3c4858;
    font-weight: 600;
    padding: 5px 12px;
    box-shadow: none;
    text-shadow: none;
    transition: background .12s ease, border-color .12s ease;
}

table.dataTable td .btn-group > .btn.dropdown-toggle:hover,
table.dataTable td .btn-group > .btn.dropdown-toggle:focus,
table.dataTable td .btn-group.open > .btn.dropdown-toggle {
    background: #f1f4f8;
    border-color: #cfd8e3;
    color: #2c3e50;
    box-shadow: none;
}

/* Sageata, mai putin lipita de cuvant decat o lasa Bootstrap. */
table.dataTable td .btn-group > .btn.dropdown-toggle .caret {
    margin-left: 6px;
}

table.dataTable td .btn-group .dropdown-menu {
    border-radius: 10px;
    border: 1px solid #e3e8ee;
    box-shadow: 0 6px 20px rgba(31, 45, 61, .12);
    padding: 6px;
    min-width: 210px;
}

table.dataTable td .btn-group .dropdown-menu > li > a {
    border-radius: 6px;
    padding: 7px 10px;
    color: #3c4858;
}

table.dataTable td .btn-group .dropdown-menu > li > a:hover,
table.dataTable td .btn-group .dropdown-menu > li > a:focus {
    background: #f1f4f8;
    color: #2c3e50;
}

/* Iconitele randurilor, aliniate intre ele: fara latime fixa, "Check if alive"
   si "Remove OptimumDesk" incepeau la doi pixeli diferiti, fiindca lupa si
   cosul de gunoi nu sunt la fel de late. */
table.dataTable td .btn-group .dropdown-menu > li > a > i {
    width: 16px;
    margin-right: 6px;
    text-align: center;
}

table.dataTable td .btn-group .dropdown-menu > li.divider {
    margin: 6px 4px;
    background-color: #eef1f5;
}

/* ----------------------------------------------------------------- 14 */
/* Butoanele de pe randul unei comenzi: Clear si Send again.
 *
 * Mici si sterse pana treci cu mouse-ul peste ele - sunt pe FIECARE rand al
 * listei, si doua butoane pline ori treizeci de randuri ar fi facut din lista
 * un panou de comanda. Aceleasi colturi ca restul: 6px, ca randurile din
 * sertarul de actiuni.
 */

.od-cmd-acts {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.od-cmd-act {
    border: 1px solid #e3e8ee;
    background: #fbfcfd;
    color: #6b7280;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.6;
    padding: 1px 8px;
    cursor: pointer;
}

.od-cmd-act:hover:not(:disabled) {
    background: #f1f4f8;
    border-color: #cfd8e3;
    color: #2c3e50;
}

.od-cmd-act:disabled {
    opacity: .6;
    cursor: default;
}

/* Ce a raspuns serverul, scris chiar pe randul pe care s-a apasat: un
   "too late to clear" citit in alta parte nu e un raspuns. */
.od-cmd-said {
    font-size: 11px;
    color: #b42318;
    flex: 1 0 100%;
}