/* =====================================================================
   TEMA LABORATORY 404 - paleta dark blue
   ---------------------------------------------------------------------
   Se incarca DUPA theme.css (vezi includes/head.tpl), deci regulile de
   aici cu aceeasi specificitate ca originalul castiga. De aceea nu e
   nevoie de !important nicaieri - unde a fost nevoie de forta, am copiat
   exact specificitatea selectorului din nexus/css/theme.css.

   Doua straturi, pentru ca nexus e tokenizat doar pe jumatate:
     1. TOKENI  - remapeaza cele ~40 de variabile ale lui nexus (acopera
                  392 de utilizari var() din theme.css)
     2. BOOTSTRAP - suprascrie componentele in care nexus are culori fixe
                  (.btn-primary #007bff, header.header #fff, .table #212529 etc.)

   Culorile vin din F:\Surse\Lab-404.com\Site Lab-404.ro\public-staging\style.css
   Fonturile sunt incarcate in includes/head.tpl.
   ===================================================================== */


/* =====================================================================
   1. TOKENI
   ===================================================================== */

:root {
    --white: #fff;

    /* Scala neutra = slate (varianta albastruie a griului), ca pe site.
       neutral-950 este #030712, exact --bg-deep din style.css. */
    --neutral-50:  #f8fafc;
    --neutral-100: #f1f5f9;
    --neutral-200: #e2e8f0;
    --neutral-300: #cbd5e1;
    --neutral-400: #94a3b8;
    --neutral-500: #64748b;
    --neutral-600: #475569;
    --neutral-700: #334155;
    --neutral-800: #1e293b;
    --neutral-900: #0f172a;
    --neutral-950: #030712;

    /* Culorile brandului */
    --brand-cyan:   #06b6d4;
    --brand-violet: #8b5cf6;

    /* Suprafete proprii temei, folosite mai jos */
    --surface:          #0b1220;  /* intre 950 si 900 - fundal de card */
    --surface-lifted:   #0f172a;
    --surface-accented: #1e293b;

    /* Scala primary = cyan */
    --primary-50:  #ecfeff;
    --primary-100: #cffafe;
    --primary-200: #a5f3fc;
    --primary-300: #67e8f9;
    --primary-400: #22d3ee;
    --primary-500: #06b6d4;
    --primary-600: #0891b2;
    --primary-700: #0e7490;
    --primary-800: #155e75;
    --primary-900: #164e63;
    --primary-950: #083344;

    /* In tema light a lui nexus, "lifted" si "accented" merg spre mai
       deschis. Pastrez aceeasi direcție: pe fundal inchis, hover = mai luminos. */
    --primary:          var(--brand-cyan);
    --primary-lifted:   #22d3ee;
    --primary-accented: #67e8f9;

    --secondary:          var(--brand-violet);
    --secondary-lifted:   #a78bfa;
    --secondary-accented: #c4b5fd;

    /* Culori de status, luminate ca sa fie lizibile pe fundal inchis */
    --success:          #22c55e;
    --success-lifted:   #4ade80;
    --success-accented: #86efac;

    --info:          #38bdf8;
    --info-lifted:   #7dd3fc;
    --info-accented: #bae6fd;

    --notice:          #a78bfa;
    --notice-lifted:   #c4b5fd;
    --notice-accented: #ddd6fe;

    --warning:          #fbbf24;
    --warning-lifted:   #fcd34d;
    --warning-accented: #fde68a;

    --error:          #f87171;
    --error-lifted:   #fca5a5;
    --error-accented: #fecaca;

    --grayscale:          var(--neutral-100);
    --grayscale-lifted:   var(--neutral-200);
    --grayscale-accented: var(--neutral-300);

    --neutral:          var(--neutral-400);
    --neutral-lifted:   var(--neutral-300);
    --neutral-accented: var(--neutral-200);

    /* Text.
       ATENTIE la --text-inverted: in nexus NU inseamna "text pe fundal
       deschis". Este folosit in exact 2 locuri (.btn-link:hover si
       .client-home-cards .card-header .btn), ambele pe suprafata
       --bg-inverted, care la nexus e INCHISA. Deci trebuie sa fie deschis. */
    --text:          #f8fafc;
    --text-accented: #cbd5e1;
    --text-lifted:   #94a3b8;
    --text-muted:    #64748b;
    --text-inverted: #f8fafc;

    /* Text pe butoanele colorate. Toate culorile de accent sunt luminoase
       (cyan #06b6d4 cu alb da 2.6:1 - cade), deci textul pe ele e inchis. */
    --on-accent: #030712;

    /* Borduri - transparente, ca sa functioneze peste orice suprafata */
    --border-muted:    rgba(255, 255, 255, .06);
    --border:          rgba(255, 255, 255, .10);
    --border-lifted:   rgba(255, 255, 255, .16);
    --border-accented: rgba(255, 255, 255, .26);

    /* Fundaluri.
       Si aici semantica lui nexus e alta decat pare: --bg-inverted este
       fundalul PAGINII (html, body), al footerului si al butonului primary.
       In nexus stock e neutral-900, adica tema are deja carcasa inchisa si
       carduri deschise. Noi ducem carcasa mai jos si cardurile pe intuneric. */
    --bg:          var(--surface);          /* suprafata de card */
    --bg-muted:    var(--surface);
    --bg-lifted:   var(--surface-lifted);
    --bg-accented: var(--surface-accented);
    --bg-inverted: #030712;                 /* pagina, footer */

    --yellow-200: #fef08a;
    --yellow-300: #fde047;
    --teal-300:   #5eead4;
    --teal-400:   #2dd4bf;
    --emerald-300: #6ee7b7;
    --pink-400:   #f472b6;

    /* Fonturi */
/* 'Inter' vine dinadins imediat dupa Space Grotesk, inaintea fontului de sistem.
       Space Grotesk are doar latin + latin-ext + vietnameza: nu are chirilice si nu are
       grecesti. Deci pe rusa, ucraineana, macedoneana sau greaca titlurile cadeau pe
       fontul sistemului, iar pagina isi schimba vizibil aerul la comutarea limbii - exact
       ce s-a reclamat. Inter are chirilice, grecesti si vietnameza, e deja incarcat si e
       tot fontul nostru, deci nu costa nicio cerere in plus si nu aduce un al treilea
       caracter de scris in pagina.
       Araba, ebraica si CJK rămân pe fontul sistemului: nici Space Grotesk, nici Inter
       nu au acele alfabete. Ar fi nevoie de Noto Sans Arabic / Hebrew / SC, cate o
       familie pentru fiecare. */
    --font-heading: 'Space Grotesk', 'Inter', 'Segoe UI', system-ui, sans-serif;
    --font-body:    'Inter', 'Segoe UI', system-ui, sans-serif;
    --font-mono:    'Fira Code', ui-monospace, 'Cascadia Mono', Consolas, monospace;

    --rounding-sm: 0.375rem;
    --rounding-md: 0.5rem;
    --rounding-lg: 0.75rem;

    /* Tokenii de mai jos NU sunt decorativi - trebuie sa existe.
       Fisierul acesta INLOCUIESTE nexus/css/custom.css (rezolutia de asset-uri
       ia varianta din tema copil), iar acolo erau definiti. Fara ei,
       theme.css si formularul de comanda nexus_cart ar ramane cu var() nule.
       Valorile sunt cele originale din nexus. */
    --text-xs: 0.625rem;
    --text-sm: 0.75rem;
    --text-md: 0.875rem;
    --text-lg: 1rem;

    --outline-sm: 1px;
    --outline-md: 2px;
    --outline-lg: 3px;

    --letter-spacing: 0em;
    --disabled-opacity: 25%;
}


/* =====================================================================
   2. TIPOGRAFIE
   ===================================================================== */

body {
    font-family: var(--font-body);
    color: var(--text);
    background-color: var(--bg);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-heading);
    color: var(--text);
    letter-spacing: -0.01em;
}

code, pre, kbd, samp {
    font-family: var(--font-mono);
}

code {
    color: var(--primary-accented);
    background-color: rgba(6, 182, 212, .08);
    padding: .1em .35em;
    border-radius: var(--rounding-sm);
}

pre {
    color: var(--text-accented);
    background-color: var(--surface);
    border: 1px solid var(--border-muted);
    border-radius: var(--rounding-md);
    padding: 1rem;
}

a {
    color: var(--primary-lifted);
}

a:hover, a:focus {
    color: var(--primary-accented);
}

hr {
    border-top-color: var(--border);
}

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

.small-text, small, .small {
    color: var(--text-lifted);
}


/* =====================================================================
   3. HEADER SI NAVIGATIE
   ===================================================================== */

header.header {
    background-color: rgba(3, 7, 18, .92);
    border-bottom: 1px solid var(--border-muted);
}

.navbar {
    background-color: transparent;
}

.navbar-brand {
    font-family: var(--font-heading);
    color: var(--text);
}

/* Meniul principal. Nexus il coloreaza cu "header.header .navbar a { color:#444 }"
   - pe fundal inchis e practic invizibil, deci repetam exact acel selector.
   Regulile .navbar-light/.navbar-dark de mai jos acopera si varianta in care
   Bootstrap aplica schema pe container. */
header.header .navbar a {
    color: var(--text-accented);
}

header.header .navbar a:hover,
header.header .navbar a:focus {
    color: var(--text);
}

header.header .navbar .active > a,
header.header .navbar a.active {
    color: var(--primary-lifted);
}

.navbar-light .navbar-brand,
.navbar-light .navbar-brand:hover,
.navbar-light .navbar-brand:focus,
.navbar-dark .navbar-brand,
.navbar-dark .navbar-brand:hover,
.navbar-dark .navbar-brand:focus {
    color: var(--text);
}

.navbar-light .navbar-nav .nav-link,
.navbar-dark .navbar-nav .nav-link {
    color: var(--text-accented);
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
    color: var(--text);
}

.navbar-light .navbar-nav .nav-link.disabled,
.navbar-dark .navbar-nav .nav-link.disabled {
    color: var(--text-muted);
}

.navbar-light .navbar-text,
.navbar-dark .navbar-text {
    color: var(--text-lifted);
}

.navbar-light .navbar-text a,
.navbar-dark .navbar-text a {
    color: var(--text);
}

.nav-link {
    color: var(--text-accented);
}

.navbar-light .navbar-toggler,
.navbar-dark .navbar-toggler,
.navbar-toggler {
    border-color: var(--border);
    color: var(--text);
}

/* Bara de unelte si căutarea din header */
header.header .topbar,
header.header .topbar .btn,
header.header .topbar .active-client .btn {
    color: var(--text-lifted);
}

header.header .topbar .active-client .input-group-text {
    color: var(--text-accented);
}

header.header .user-icon {
    color: var(--text-lifted);
}

header.header .toolbar .nav-link {
    color: var(--text-lifted);
}

header.header .toolbar .nav-link:hover {
    color: var(--text);
}

header.header .search {
    background-color: var(--surface-lifted);
    border-color: var(--border);
}

header.header .search .btn {
    color: var(--text-lifted);
}

header.header .search:focus-within {
    border-color: var(--primary);
}

.navbar-light .navbar-toggler-icon,
.navbar-dark .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='%23f8fafc' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}


/* =====================================================================
   4. CARDURI SI PANOURI
   ===================================================================== */

.card,
.mc-promo-manage,
.mc-promo-login {
    background-color: var(--surface);
    border: 1px solid var(--border-muted);
    color: var(--text);
}

.card-header {
    background-color: rgba(255, 255, 255, .03);
    border-bottom-color: var(--border-muted);
    color: var(--text);
    font-family: var(--font-heading);
}

.card-footer {
    background-color: rgba(255, 255, 255, .02);
    border-top-color: var(--border-muted);
}

.panel {
    background-color: var(--surface);
    border-color: var(--border-muted);
}

.panel .panel-heading {
    background-color: rgba(255, 255, 255, .03);
    border-bottom-color: var(--border-muted);
    color: var(--text);
}

.panel .panel-body {
    color: var(--text-accented);
}

.jumbotron {
    background-color: var(--surface);
    color: var(--text);
}

.img-thumbnail {
    background-color: var(--surface-lifted);
    border-color: var(--border);
}

.progress {
    background-color: var(--surface-accented);
}

.invite-box,
.continue-container {
    background-color: var(--surface-lifted);
    border-color: var(--border-muted);
}


/* =====================================================================
   5. TABELE
   ===================================================================== */

.table {
    color: var(--text-accented);
}

.table th,
.table td,
.table thead th {
    border-color: var(--border-muted);
}

.table td, .table th {
    background-color: transparent;
}

.table .thead-light th,
table.table-list thead th {
    background-color: rgba(255, 255, 255, .04);
    color: var(--text);
    border-color: var(--border-muted);
    font-family: var(--font-heading);
    font-weight: 600;
}

.table-hover tbody tr:hover {
    background-color: rgba(255, 255, 255, .04);
    color: var(--text);
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, .02);
}

.table-bordered,
.table-bordered th,
.table-bordered td {
    border-color: var(--border-muted);
}

.table-list > tbody > tr > td {
    background-color: transparent;
    border-color: var(--border-muted);
}

.dataTables_wrapper table.table-list thead th.sorting_asc,
.dataTables_wrapper table.table-list thead th.sorting_desc {
    background-color: rgba(6, 182, 212, .10);
    color: var(--text);
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    color: var(--text-lifted);
}

/* CASUTA DE CAUTARE din tabele — scria alb pe alb.

   Tema are:
     .dataTables_filter label .form-control {
         background: url(search.png) #fff no-repeat 8px 5px;
     }
   Adica ii impune fundal ALB, cu specificitate 0,3,0. Regula noastra de mai jos
   pentru .form-control are 0,1,0 si pierde fundalul - dar CULOAREA din ea trece,
   fiindca acolo nu concureaza cu nimic. Rezultatul: text deschis pe fundal alb,
   adica scrii in casuta si nu vezi ce scrii.

   Selectorul de aici il repeta pe al lor, ca sa fim la aceeasi specificitate;
   la egalitate castiga foaia asta, incarcata dupa. Fara !important.

   Lupa nu mai e imaginea lor (un PNG negru, invizibil pe intuneric), ci un desen
   inline colorat cu masca - deci se schimba odata cu textul. */
.dataTables_filter label .form-control,
.dataTables_filter label input[type="search"],
/* Casuta din Centrul de ajutor. E un formular al paginii, nu unul desenat de
   DataTables, deci n-are cum sa intre in selectoarele de mai sus - dar trebuie
   sa arate identic. Intra in aceeasi regula ca sa existe o singura definitie:
   altfel doua casute de cautare care trebuie sa fie la fel ar sta scrise in
   doua locuri, si prima schimbare le-ar departa. */
.lst-cauta input {
    background-color: var(--surface-lifted);
    background-image: none;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: .6rem 1rem .6rem 2.6rem !important;
    color: var(--text);
}

.dataTables_filter label {
    position: relative;
    display: block;
}

.dataTables_filter label::before {
    content: '';
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background-color: var(--text-muted);
    -webkit-mask: var(--lh-ico-lupa) center / contain no-repeat;
    mask: var(--lh-ico-lupa) center / contain no-repeat;
    pointer-events: none;
}

.dataTables_filter {
    --lh-ico-lupa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4.3-4.3'/%3E%3C/svg%3E");
}

.dataTables_filter label .form-control::placeholder { color: var(--text-muted); }

.dataTables_filter label .form-control:focus {
    border-color: var(--primary);
    background-color: var(--surface-lifted);
    color: var(--text);
}


/* =====================================================================
   6. FORMULARE
   ===================================================================== */

.form-control,
.custom-select,
.custom-file-label {
    background-color: var(--surface-lifted);
    border-color: var(--border);
    color: var(--text);
}

.form-control::placeholder {
    color: var(--text-muted);
}

.form-control:focus,
.custom-select:focus {
    background-color: var(--surface-lifted);
    border-color: var(--primary);
    color: var(--text);
    box-shadow: 0 0 0 3px rgba(6, 182, 212, .18);
}

.form-control:disabled,
.form-control[readonly],
.custom-select:disabled {
    background-color: rgba(255, 255, 255, .04);
    color: var(--text-muted);
}

.form-control-plaintext {
    color: var(--text-accented);
}

.input-group-text {
    background-color: var(--surface-accented);
    border-color: var(--border);
    color: var(--text-lifted);
}

.input-group .btn-reveal-pw:hover,
.input-group .btn-reveal-pw:active {
    background-color: var(--surface-accented);
    color: var(--text);
}

label,
.col-form-label {
    color: var(--text-accented);
}

.custom-control-label::before {
    background-color: var(--surface-lifted);
    border-color: var(--border-lifted);
}

.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--primary);
    border-color: var(--primary);
}

.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
    background-color: var(--text-inverted);
}

.custom-file-label::after {
    background-color: var(--surface-accented);
    color: var(--text);
}

.custom-range::-webkit-slider-runnable-track,
.custom-range::-moz-range-track {
    background-color: var(--surface-accented);
}

.was-validated .form-control:valid,
.form-control.is-valid {
    border-color: var(--success);
}

.was-validated .form-control:invalid,
.form-control.is-invalid {
    border-color: var(--error);
}

.invalid-feedback {
    color: var(--error-lifted);
}

.valid-feedback {
    color: var(--success-lifted);
}

#registration .field,
#registration .form-control {
    background-color: var(--surface-lifted);
    border-color: var(--border);
    color: var(--text);
}

#registration .sub-heading span {
    background-color: var(--bg);
    color: var(--text-lifted);
}


/* =====================================================================
   7. BUTOANE
   ===================================================================== */

/* Fontul de pe TOATE butoanele, nu doar pe cel principal.

   Aici scria var(--font-heading) la greutatea 500 - Space Grotesk, fontul de
   titluri. Butoanele scrise de noi (.det-buton, .fct-btn-plata, .cont-buton)
   folosesc insa var(--font-body) la 600, adica Inter. Diferenta se vedea cel mai
   bine unde stau alaturi: acelasi degrade, alte litere.

   Schimbarea sta pe .btn, nu pe .btn-primary, tocmai ca sa nu apara al doilea
   fel de neconcordanta: butonul principal cu un font si cel secundar de langa
   el cu altul, pe acelasi rand.

   Marimea NU se atinge: ramane a lui Bootstrap, ca .btn-sm si .btn-lg sa
   pastreze treptele intre ele. */
.btn {
    font-family: var(--font-body);
    font-weight: 600;
    color: var(--text);
}

.btn:hover {
    color: var(--text);
}

/* Butonul principal - degradeul Lab-404, acelasi de pe "Plătește acum" si de pe
   "Salvează modificările".

   SE SCRIE AICI, PE .btn-primary, NU pe fiecare pagina: asa il primesc toate
   butoanele principale randate de WHMCS - "Trimiteți invitația", confirmarile
   din ferestrele modale, formularele pe care nu le-am atins inca - fara sa
   copiem cate un sablon de fiecare data doar ca sa schimbam o clasa. Un sablon
   copiat ar ingheta si restul paginii la cum arata azi.

   background-origin: border-box NU e de prisos, si e o lectie platita.
   Chenarul rămâne 1px, ca butonul sa fie exact cat cel de langa el, care are
   chenar. Dar implicit o imagine de fundal e DIMENSIONATA dupa cutia de padding
   si PICTATA pana la marginea chenarului - iar cum fundalurile se repeta
   implicit, inelul de 1px arata degradeul luat de la capat. Se vedea ca doua
   fire de culoare curata pe margini, cu culorile pe dos: turcoazul in dreapta,
   violetul in stanga. Cu border-box, degradeul acopera si chenarul, dintr-o
   bucata. */
.btn-primary {
    border: 1px solid transparent;
    background-color: var(--primary);
    background-image: linear-gradient(135deg, #06b6d4 0%, #8b5cf6 100%);
    background-origin: border-box;
    color: #fff;
    transition: filter .2s;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus {
    background-color: var(--primary);
    border-color: transparent;
    color: #fff;
    filter: brightness(1.08);
}

.btn-primary:disabled,
.btn-primary.disabled {
    background-image: none;
    background-color: var(--primary-700);
    border-color: var(--primary-700);
    color: var(--text-accented);
    filter: none;
}

@media (prefers-reduced-motion: reduce) {
    .btn-primary { transition: none; }
}

/* Butonul de salvare cat timp parola noua nu e inca valida.

   Tema il inalbeste singura, printr-o regula proprie:
     body form.using-password-strength .btn-primary:disabled
        { background-color: var(--grayscale-accented) }
   Specificitate 0,3,2, deci bate orice ".btn-primary:disabled" de-al nostru.

   Iar ".btn-primary:disabled" al nostru ii dadea textul var(--text-accented).
   Cele doua se nimeresc a fi aceeasi culoare, #cbd5e1: eticheta era acolo,
   desenata peste ea insasi. Butonul arata ca o casuta cenusie goala, in care
   omul incerca sa scrie.

   Aici il aducem la ce inseamna: un buton dezactivat pe fundal intunecat. Se
   repeta selectorul lor si se adauga clasa noastra de context, ca sa fie 0,4,2 -
   fara !important. Nu stergem regula lor: e in theme.min.css, fisierul temei
   nexus, pe care WHMCS il rescrie la fiecare actualizare. */
/* "Click aici pentru activare", de la autentificarea in doi pasi
   (/user/security). In sablon e .btn-success - verdele generic Bootstrap.

   Primeste degradeul nostru fiindca E actiunea principala a paginii: tot ce sta
   in jurul lui - titlul, starea, avertismentul galben - duce catre ea. Butonul
   de dezactivare rămâne rosu, si nu din neglijenta: e singurul de acolo care
   scade protectia contului.

   SELECTORUL REPETA TOATE CLASELE, si nu de prisos. theme.min.css are:
     .btn-success.open-modal.twofa-config-link.enable
        { color:#333; background-color:#fff; border-color:#ccc }
   adica 0,4,0 - patru clase. Prima mea incercare avea trei clase si un element,
   0,3,1, si pierdea: butonul ramanea alb, cu chenar cenusiu si scris inchis.
   Cu cele cinci clase de mai jos plus elementul iese 0,5,1, deci castiga curat,
   fara !important. Regula lor n-o stergem - e in fisierul temei nexus, pe care
   WHMCS il rescrie la fiecare actualizare.

   background-origin: border-box, ca la .btn-primary - fara el, chenarul de 1px
   ar arata degradeul luat de la capat. */
a.btn.btn-success.open-modal.twofa-config-link.enable {
    border: 1px solid transparent;
    background-color: var(--primary);
    background-image: linear-gradient(135deg, #06b6d4 0%, #8b5cf6 100%);
    background-origin: border-box;
    color: #fff;
    transition: filter .2s;
}

a.btn.btn-success.open-modal.twofa-config-link.enable:hover,
a.btn.btn-success.open-modal.twofa-config-link.enable:focus {
    background-color: var(--primary);
    border-color: transparent;
    color: #fff;
    filter: brightness(1.08);
}

@media (prefers-reduced-motion: reduce) {
    a.btn.btn-success.open-modal.twofa-config-link.enable { transition: none; }
}

body form.using-password-strength .btn.btn-primary:disabled {
    background-color: rgba(255, 255, 255, .06);
    background-image: none;
    border-color: var(--border-muted);
    color: var(--text-muted);
    opacity: 1;
    cursor: not-allowed;
}

/* Butoanele de acțiuni din tabele.

   WHMCS le pune unul dupa altul intr-o singura celula, despartite doar de un
   spatiu din marcaj: "Gestionați permisiunile" + "Eliminați accesul" pe
   utilizatori, "Setați ca Principal" + "Editare" + "Ștergere" pe modalitatile de
   plata. Cand celula e ingusta trec unul sub altul lipite si se citesc ca un
   singur bloc - mai ales cele de pe randuri diferite, care ajung sa se atinga.

   REGULA E GENERALA, pe "td > .btn", nu o lista de nume de clase. Prima
   varianta enumera .btn-manage-permissions si .btn-remove-user; ar fi insemnat
   sa adaug cate un nume la fiecare pagina noua, iar cel de "Editare" de pe
   modalitati de plata nici n-are clasa proprie - se distinge doar printr-un
   data-role.

   Marginile stau pe butoane, nu pe celula: un "display: flex" pus pe <td> ii ia
   rolul de celula de tabel, iar latimile coloanelor se recalculeaza dupa aceea.
   Asa merge in amandoua asezarile - alaturi sau unul sub altul. */
td > .btn {
    margin: 0 .35rem .45rem 0;
}


/* =====================================================================
   FEREASTRA DE MESAJ (viewemail.php)
   ---------------------------------------------------------------------
   Mesajul se deschidea pe jumatate: sablonul temei scrie
   <iframe width="100%" height="380">, adica o inalțime fixa in ATRIBUT. Oricat
   de mare ar fi fereastra, cutia ramanea 380px si sub ea se casca gol.

   Se repara din CSS, nu din sablon: o regula de stil bate atributul de
   prezentare, deci nu e nevoie de o copie a lui viewemail.tpl doar pentru un
   numar. Iar daca WHMCS schimba maine acel 380, nu se schimba nimic aici.

   min-height: 0 pe .card-body nu e de prisos: un copil de flex refuza implicit
   sa scada sub inalțimea conținutului lui, iar iframe-ul ar fi impins subsolul
   cu butonul de inchidere afara din fereastra.
   ===================================================================== */
html:has(> body#popup-backdrop),
body#popup-backdrop { height: 100%; margin: 0; }

body#popup-backdrop { display: flex; }

body#popup-backdrop > .card {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    margin: 0;
    border: 0;
    border-radius: 0;
}

body#popup-backdrop > .card > .card-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0;
}

body#popup-backdrop > .card > .card-body > iframe {
    display: block;
    width: 100%;
    height: 100%;
}


/* Scutul de langa adresa de e-mail (/account/users) — starea autentificarii in
   doi pasi.

   VERDE INSEAMNA PORNITA, si de aceea nu poate fi verde mereu: sablonul pune
   "fa-shield text-success" cand 2FA e activa si "fa-shield text-grey" cand nu e.
   Facut verde in ambele cazuri, ecranul ar spune ca protectia e pornita cand nu
   e - iar asta e o informatie pe care omul o citeste o data si nu o mai
   verifica. Devine verde singur in clipa in care 2FA e activata din setarile de
   securitate.

   Ce s-a schimbat: desenul. Scutul Font Awesome arata IDENTIC in amandoua
   cazurile, deci deosebirea statea doar in culoare - greu de prins dintr-o
   privire si invizibila pentru cine nu distinge nuantele. Acum difera si forma:
   scut cu bifa cand e pornita, scut simplu cand nu.

   Starea "oprit" e un scut normal, nu unul taiat sau cu X: 2FA neactivata nu e o
   defectiune si nu e nimic in neregula cu contul - e doar o treapta in plus, pe
   care omul o poate urca. Un semn de alarma acolo ar speria degeaba.

   Iconitele sunt Tabler Icons (MIT), luate ca atare - shield-check si shield.

   Se picteaza prin masca, nu prin content: asa culoarea vine din
   background-color, adica dintr-un singur loc, iar desenul nu mai depinde de
   fontul de iconite. */
i.fa-shield.text-success,
i.fa-shield.text-grey {
    display: inline-block;
    width: 1.05em;
    height: 1.05em;
    vertical-align: -.18em;
    -webkit-mask: var(--ico-scut) center / contain no-repeat;
            mask: var(--ico-scut) center / contain no-repeat;
}

/* Glifa fontului se scoate din drum - altfel s-ar desena sub masca. */
i.fa-shield.text-success::before,
i.fa-shield.text-grey::before { content: ''; }

i.fa-shield.text-success {
    --ico-scut: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.46 20.846a12 12 0 0 1 -7.96 -14.846a12 12 0 0 0 8.5 -3a12 12 0 0 0 8.5 3a12 12 0 0 1 -.09 7.06'/%3E%3Cpath d='M15 19l2 2l4 -4'/%3E%3C/svg%3E");
    background-color: #4ade80;
}

i.fa-shield.text-grey {
    --ico-scut: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a12 12 0 0 0 8.5 3a12 12 0 0 1 -8.5 15a12 12 0 0 1 -8.5 -15a12 12 0 0 0 8.5 -3'/%3E%3C/svg%3E");
    background-color: var(--text-lifted);
}

.btn-secondary,
.btn-default {
    background-color: rgba(255, 255, 255, .06);
    border-color: var(--border-lifted);
    color: var(--text);
}

.btn-secondary:hover,
.btn-default:hover {
    background-color: rgba(255, 255, 255, .12);
    border-color: var(--border-accented);
    color: var(--text);
}

.btn-success {
    background-color: var(--success);
    border-color: var(--success);
    color: var(--on-accent);
}

.btn-success:hover {
    background-color: var(--success-lifted);
    border-color: var(--success-lifted);
    color: var(--on-accent);
}

/* BUTOANELE DIN BARA LATERALA. Nexus are, in theme.min.css:

     body .sidebar .btn-success { background: var(--bg-inverted); border-color: var(--grayscale) }
     body .sidebar .btn-default { border: 1px solid var(--grayscale) }

   Specificitate 0,3,1 - bate ".btn-success" de mai sus, care e 0,1,0. Iesea un
   buton cu fundalul --bg-inverted (#030712) si textul --on-accent (#030712), adica
   text negru pe negru: butonul "Răspuns" de pe pagina tichetului se vedea ca o
   cutie goala cu chenar alb. Masurat in pagina, nu banuit.

   --grayscale e o variabila a lui nexus pe care tema noastra n-o defineste, deci
   ramanea valoarea lui deschisa - de acolo chenarul alb si la butonul "Adaugă"
   de la CC Recipient.

   Selectorul de mai jos il repeta pe al lor si mai adauga o clasa: 0,4,1.

   BUTONUL DE RASPUNS PRIMESTE VESMANTUL NOSTRU, nu verdele lui Bootstrap.
   "Răspunde la tichet" e actiunea principala a paginii, iar la noi actiunea
   principala arata intr-un singur fel peste tot: degradeul turcoaz-violet al lui
   .btn-primary. Verdele venea din clasa pe care o pune WHMCS in marcaj, nu
   dintr-o alegere.

   "background-origin: border-box" nu e de prisos: chenarul e transparent, iar
   fara el degradeul se deseneaza doar in cutia de conținut si se repeta in inelul
   de un pixel - se vedea o dunga turcoaz intr-o parte si una violet in cealalta,
   exact invers fata de degradeul de dedesubt. */
body .sidebar .btn-success {
    border: 1px solid transparent;
    background-color: var(--primary);
    background-image: linear-gradient(135deg, #06b6d4 0%, #8b5cf6 100%);
    background-origin: border-box;
    color: #fff;
    font-family: var(--font-body);
    font-weight: 600;
    transition: filter .2s;
}

body .sidebar .btn-success:hover:not(:disabled) {
    filter: brightness(1.08);
    color: #fff;
}

body .sidebar .btn-default {
    border: 1px solid var(--border-lifted);
    background-color: rgba(255, 255, 255, .06);
    color: var(--text);
}

body .sidebar .btn-default:hover {
    border-color: var(--border-accented);
    background-color: rgba(255, 255, 255, .12);
}

.btn-danger {
    background-color: var(--error);
    border-color: var(--error);
    color: var(--on-accent);
}

.btn-danger:hover {
    background-color: var(--error-lifted);
    border-color: var(--error-lifted);
    color: var(--on-accent);
}

.btn-warning,
.btn-warning:hover,
.btn-warning:focus,
.btn-warning.focus {
    background-color: var(--warning);
    border-color: var(--warning);
    color: var(--on-accent);
}

.btn-info {
    background-color: var(--info);
    border-color: var(--info);
    color: var(--on-accent);
}

.btn-info:hover {
    background-color: var(--info-lifted);
    border-color: var(--info-lifted);
    color: var(--on-accent);
}

.btn-light,
.btn-light:hover,
.btn-light:focus,
.btn-light.focus {
    background-color: rgba(255, 255, 255, .08);
    border-color: var(--border-lifted);
    color: var(--text);
}

.btn-link {
    color: var(--primary-lifted);
}

.btn-outline-primary {
    border-color: var(--primary);
    color: var(--primary-lifted);
}

.btn-outline-primary:hover {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--on-accent);
}

.btn-outline-secondary {
    border-color: var(--border-lifted);
    color: var(--text-accented);
}

.btn-outline-secondary:hover {
    background-color: rgba(255, 255, 255, .08);
    border-color: var(--border-accented);
    color: var(--text);
}

.btn-outline-light:hover,
.btn-outline-dark,
.btn-outline-dark.disabled,
.btn-outline-dark:disabled {
    color: var(--text);
    border-color: var(--border-lifted);
    background-color: transparent;
}

.action-icon-btns a {
    background-color: rgba(255, 255, 255, .06);
    border-color: var(--border-muted);
    color: var(--text-accented);
}

.action-icon-btns a:hover {
    background-color: rgba(6, 182, 212, .14);
    color: var(--primary-accented);
}


/* =====================================================================
   8. DROPDOWN, MODAL, POPOVER
   ===================================================================== */

.dropdown-menu {
    background-color: var(--surface-lifted);
    border-color: var(--border);
    color: var(--text);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
}

.dropdown-item,
.dropdown-item-text {
    color: var(--text-accented);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: rgba(255, 255, 255, .06);
    color: var(--text);
}

.dropdown-divider {
    border-top-color: var(--border-muted);
}

.dropdown-header {
    color: var(--text-muted);
    font-family: var(--font-heading);
}

/* Ferestrele modale se aseaza pe mijlocul ecranului, nu lipite de marginea de
   sus.

   Bootstrap are deja mecanismul, in clasa .modal-dialog-centered - dar clasa se
   pune in marcaj, iar marcajul e al WHMCS. Ar fi insemnat cate o copie de sablon
   pentru fiecare fereastra din tema, doar ca sa adaug un cuvant. Aplicam aceleasi
   trei declaratii direct pe .modal-dialog, deci prind toate ferestrele, si cele
   pe care nu le-am deschis inca.

   min-height se scade EXACT cat marginea pe care si-o pune Bootstrap: .5rem sus
   si jos pe ecran mic, 1.75rem de la 576px in sus. Cu o valoare rotunda, cutia
   ar fi iesit cu cativa pixeli mai inalta decat fereastra si ar fi aparut o bara
   de derulare pe o fereastra care incape. */
.modal-dialog {
    display: flex;
    align-items: center;
    min-height: calc(100% - 1rem);
}

@media (min-width: 576px) {
    .modal-dialog { min-height: calc(100% - 3.5rem); }
}

.modal-content {
    width: 100%;
    background-color: var(--surface-lifted);
    border-color: var(--border);
    color: var(--text);
}

.modal .modal-header {
    background-color: rgba(255, 255, 255, .03);
    border-bottom-color: var(--border-muted);
}

.modal-footer {
    border-top-color: var(--border-muted);
}

.modal-backdrop {
    background-color: #010409;
}

.close {
    color: var(--text-lifted);
    text-shadow: none;
}

.close:hover {
    color: var(--text);
}

.popover {
    background-color: var(--surface-accented);
    border-color: var(--border);
    color: var(--text);
}

.popover-header {
    background-color: rgba(255, 255, 255, .04);
    border-bottom-color: var(--border-muted);
    color: var(--text);
}

.popover-body {
    color: var(--text-accented);
}

.popover-user-notifications ul li a:hover {
    background-color: rgba(255, 255, 255, .06);
}

.tooltip-inner {
    background-color: var(--surface-accented);
    color: var(--text);
}

.modal-localisation .item-selector .item:hover,
.modal-localisation .item-selector .item.active {
    background-color: rgba(6, 182, 212, .12);
    color: var(--text);
}

.select-account a:hover {
    background-color: rgba(255, 255, 255, .06);
}


/* =====================================================================
   9. TABURI, PAGINARE, BREADCRUMB, LISTE
   ===================================================================== */

.nav-tabs {
    border-bottom-color: var(--border-muted);
}

.nav-tabs .nav-link {
    color: var(--text-lifted);
}

.nav-tabs .nav-link:hover {
    border-color: transparent transparent var(--border);
    color: var(--text);
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    background-color: var(--surface);
    border-color: var(--border-muted) var(--border-muted) transparent;
    color: var(--primary-lifted);
}

.responsive-tabs-sm {
    background-color: var(--surface);
}

.responsive-tabs-sm .nav-item a.active {
    background-color: var(--surface-accented);
    color: var(--text);
}

.responsive-tabs-sm-connector .channel {
    background-color: var(--surface-accented);
}

.breadcrumb {
    background-color: transparent;
    border: 1px solid var(--border-muted);
}

.breadcrumb-item,
.breadcrumb-item + .breadcrumb-item::before {
    color: var(--text-lifted);
}

.breadcrumb-item.active {
    color: var(--text);
}

.page-link {
    background-color: var(--surface);
    border-color: var(--border-muted);
    color: var(--text-accented);
}

.page-link:hover {
    background-color: rgba(255, 255, 255, .07);
    border-color: var(--border);
    color: var(--text);
}

.page-item.active .page-link {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--on-accent);
}

.page-item.disabled .page-link {
    background-color: rgba(255, 255, 255, .02);
    border-color: var(--border-muted);
    color: var(--text-muted);
}

.list-group-item {
    background-color: var(--surface);
    border-color: var(--border-muted);
    color: var(--text-accented);
}

.list-group-item-action:hover,
.list-group-item-action:focus,
.list-group-item-action:active {
    background-color: rgba(255, 255, 255, .05);
    color: var(--text);
}

.list-group-item.disabled,
.list-group-item:disabled {
    background-color: rgba(255, 255, 255, .02);
    color: var(--text-muted);
}


/* =====================================================================
   10. ALERTE SI BADGE-URI
   ===================================================================== */

.alert {
    border-width: 1px;
}

.alert-success {
    background-color: rgba(34, 197, 94, .10);
    border-color: rgba(34, 197, 94, .30);
    color: var(--success-accented);
}

.alert-info,
.alert-primary {
    background-color: rgba(56, 189, 248, .10);
    border-color: rgba(56, 189, 248, .30);
    color: var(--info-accented);
}

.alert-warning {
    background-color: rgba(251, 191, 36, .10);
    border-color: rgba(251, 191, 36, .30);
    color: var(--warning-accented);
}

.alert-danger {
    background-color: rgba(248, 113, 113, .10);
    border-color: rgba(248, 113, 113, .30);
    color: var(--error-accented);
}

.alert-secondary,
.alert-light,
.alert-dark {
    background-color: rgba(255, 255, 255, .05);
    border-color: var(--border);
    color: var(--text-accented);
}

.alert:has(form) {
    background-color: var(--surface-lifted);
}

.alert a,
.alert .alert-link {
    color: inherit;
    text-decoration: underline;
}

.badge-light,
.badge-secondary {
    background-color: rgba(255, 255, 255, .10);
    color: var(--text);
}

.badge-primary {
    background-color: var(--primary);
    color: var(--on-accent);
}

.badge-success {
    background-color: var(--success);
    color: var(--on-accent);
}

.badge-danger {
    background-color: var(--error);
    color: var(--on-accent);
}

.badge-warning {
    background-color: var(--warning);
    color: var(--on-accent);
}

.badge-info {
    background-color: var(--info);
    color: var(--on-accent);
}

/* SINGURUL !important din fisier, si e obligatoriu:
   Bootstrap declara clasele utilitare ca ".bg-white{background-color:#fff!important}".
   Un !important nu poate fi batut de specificitate, doar de alt !important.
   Nexus pune .bg-white pe caseta de căutare domenii din homepage. */
.bg-light,
.bg-white {
    background-color: var(--surface) !important;
}

.text-dark {
    color: var(--text);
}


/* =====================================================================
   11. HOME CLIENT
   ===================================================================== */

.client-home-cards .card-header {
    background-color: rgba(255, 255, 255, .03);
    color: var(--text);
}

.tiles .tile {
    background-color: var(--surface);
    border: 1px solid var(--border-muted);
    color: var(--text);
}

.tiles .tile .title,
.tiles .tile .stat {
    color: var(--text);
}

.tiles .tile:hover {
    border-color: var(--border-lifted);
}

.home-domain-search .input-group-wrapper {
    background-color: var(--surface-lifted);
    border-color: var(--border);
}

/* Butonul de transfer din caseta de domenii: nexus il coloreaza prin
   "body #frmDomainHomepage #btnTransfer" (doua ID-uri), deci repetam
   selectorul - specificitatea mai mica nu are nicio sansa. */
body #frmDomainHomepage #btnTransfer {
    background-color: rgba(255, 255, 255, .06);
    border-color: var(--border-lifted);
    color: var(--text);
}

body #frmDomainHomepage #btnTransfer:hover {
    background-color: rgba(255, 255, 255, .12);
    border-color: var(--border-accented);
    color: var(--text);
}

.promo-banner {
    background-color: var(--surface-lifted);
    border-color: var(--border-muted);
    color: var(--text-accented);
}

.featured-tld {
    background-color: rgba(6, 182, 212, .10);
    border-color: rgba(6, 182, 212, .28);
    color: var(--text);
}


/* =====================================================================
   12. COS DE COMANDA (standard_cart)
   Specificitatea "body #order-standard_cart ..." e copiata din nexus,
   altfel regulile originale ar castiga.
   ===================================================================== */

body #order-standard_cart .products .product {
    background-color: var(--surface);
    border-color: var(--border-muted);
    color: var(--text);
}

body #order-standard_cart .cart-body .products .product header {
    background-color: rgba(255, 255, 255, .04);
    color: var(--text);
}

body #order-standard_cart .cart-body .view-cart-empty {
    background-color: var(--surface);
    color: var(--text-lifted);
}

body #order-standard_cart .sub-heading span {
    background-color: var(--bg);
    color: var(--text-lifted);
}

body #order-standard_cart .domain-selection-options {
    background-color: var(--surface);
    border-color: var(--border-muted);
}

body #order-standard_cart .domain-selection-options .option-selected {
    background-color: rgba(6, 182, 212, .12);
    color: var(--text);
}

body #order-standard_cart .secondary-cart-body .view-cart-tabs .nav-tabs a[aria-expanded=true] {
    background-color: var(--surface-accented);
    color: var(--text);
}

body #order-standard_cart .panel .panel-heading,
body #order-standard_cart .panel .panel-footer {
    background-color: rgba(255, 255, 255, .04);
    border-color: var(--border-muted);
    color: var(--text);
}

body #order-standard_cart .domain-pricing .tld-filters .badge {
    background-color: rgba(255, 255, 255, .10);
    color: var(--text);
}

body #order-standard_cart .domain-pricing .tld-pricing-header .tld-column,
body #order-standard_cart .domain-pricing .tld-pricing-header div,
body #order-standard_cart .domain-pricing .tld-pricing-header:has(~ .filtered-row) .tld-column {
    background-color: rgba(255, 255, 255, .04);
    color: var(--text);
}

body #order-standard_cart .domain-promo-box {
    background-color: var(--surface-lifted);
    border-color: var(--border-muted);
    color: var(--text-accented);
}

body .secondary-cart-body #domainRenewals {
    background-color: var(--surface-lifted);
}

.store-order-container .store-domain-tabs li.active a {
    background-color: var(--surface-accented);
    color: var(--text);
}

div.product-details div.product-icon,
div.product-details-tab-container {
    background-color: var(--surface);
    border-color: var(--border-muted);
}

.upgrade .product-to-be-upgraded,
.upgrade .products .product {
    background-color: var(--surface);
    border-color: var(--border-muted);
    color: var(--text);
}


/* ---------------------------------------------------------------------
   12b. PAGINILE CLASICE DE COMANDA (lista produse, configurare, checkout)

   Acestea vin din templates/orderforms/standard_cart/, care are propriul
   all.min.css incarcat in <body> - deci DUPA fisierul acesta. Ordinea de
   incarcare lucreaza impotriva noastra, asa ca ne bazam pe specificitate:
   fiecare selector e cel din standard_cart/css/all.css cu "body " in fata.
     standard_cart:  #order-standard_cart .field          (1 id, 1 clasa)
     al nostru: body #order-standard_cart .field          (1 id, 1 clasa, 1 element) -> castiga
   Zero !important, cu o singura excepție semnalata mai jos.
   --------------------------------------------------------------------- */

/* Carduri de produs */
body #order-standard_cart .products .product,
body #order-standard_cart .product-info,
body #order-standard_cart .summary-container,
body #order-standard_cart .apply-credit-container {
    background-color: var(--surface);
    border-color: var(--border-muted);
}

body #order-standard_cart .products .product header {
    background-color: rgba(255, 255, 255, .05);
    border-color: var(--border-muted);
}

body #order-standard_cart .products .product header span {
    color: var(--text);
}

body #order-standard_cart .products .product header .qty {
    color: var(--text-lifted);
}

body .product-recommendations .product-recommendation,
body .product-recommendations .product-recommendation .body {
    background-color: var(--surface);
    border-color: var(--border-muted);
    color: var(--text-accented);
}

/* Formulare */
body #order-standard_cart .field,
body #order-standard_cart .form-control {
    background-color: var(--surface-lifted);
    border-color: var(--border);
    color: var(--text);
}

body #order-standard_cart .form-control:focus {
    background-color: var(--surface-lifted);
    border-color: var(--primary);
    color: var(--text);
}

body #order-standard_cart .form-control::placeholder {
    color: var(--text-muted);
}

body #order-standard_cart label,
body #order-standard_cart p.domain-renewal-desc,
body #order-standard_cart .domain-checker-advanced label,
body #order-standard_cart .panel-addon .panel-body label,
body #order-standard_cart .cc-input-container .existing-cc-grid,
body .service-renewals .div-renewal-period-label {
    color: var(--text-accented);
}

body #order-standard_cart .field-help-text,
body #order-standard_cart .default-captcha,
body .service-renewals .div-renewal-ineligible {
    color: var(--text-lifted);
}

body #order-standard_cart .domain-checker-advanced input[type="checkbox"] {
    background-color: var(--surface-lifted);
}

/* Caseta de căutare de pe /cart.php?a=add&domain=register. standard_cart ii pune un
   degrade galben cu un glob desenat pe fundal - singura pata de culoare straina din
   pagina, acum ca formularul nostru moștenește de la standard_cart si nu de la
   nexus_cart. O aduc la suprafata paginii; restul casetei era deja imbracat mai jos. */
body #order-standard_cart .domain-checker-container {
    background: var(--surface-lifted);
    border: 1px solid var(--border-muted);
    border-radius: 16px;
}

body #order-standard_cart .domain-checker-container .domain-checker-bg {
    background-image: none;
}

/* Caseta codului de verificare din aceeasi cautare: standard_cart o lasa aproape alba. */
body #order-standard_cart .domain-checker-container .default-captcha {
    background-color: var(--surface);
    border: 1px solid var(--border-muted);
    border-radius: 12px;
}

/* Filtrele "Includeți TLD-uri" / "Lungime maximă" din căutarea avansată de
   domenii. standard_cart le da color:#111827 fix, adica invizibil pe intuneric. */
body #order-standard_cart .domain-checker-advanced .multiselect {
    background-color: var(--surface-lifted);
    border-color: var(--border);
    color: var(--text);
}

/* Sumar comanda */
body #order-standard_cart .sub-heading,
body #order-standard_cart .order-summary .summary-totals,
body #order-standard_cart .order-summary .subtotal,
body #order-standard_cart .order-summary .bordered-totals {
    border-color: var(--border-muted);
}

body #order-standard_cart .order-summary .btn-continue-shopping {
    color: var(--primary-lifted);
}

body #order-standard_cart .btn-remove-from-cart {
    color: var(--error-lifted);
}

/* Cos: liste si taburi */
body #order-standard_cart .view-cart-items .item,
body #order-standard_cart .view-cart-tabs .tab-content,
body #order-standard_cart .view-cart-promotion-code {
    background-color: var(--surface);
    border-color: var(--border-muted);
}

body #order-standard_cart .view-cart-items .item:nth-child(even) {
    background-color: rgba(255, 255, 255, .03);
}

body #order-standard_cart .view-cart-tabs .nav-tabs a[aria-selected="true"],
body #order-standard_cart .view-cart-tabs .nav-tabs a[aria-expanded="true"] {
    background-color: var(--surface-accented);
    border-color: var(--border-muted);
    color: var(--text);
}

/* Domenii */
body #order-standard_cart .domain-selection-options .option,
body .domain-checker-container .input-group-box,
body .spotlight-tlds,
body .spotlight-tld,
body .suggested-domains .domain-lookup-suggestions-message,
body .suggested-domains .domain-lookup-suggestions-loader {
    background-color: var(--surface);
    border-color: var(--border-muted);
    color: var(--text-accented);
}

body #order-standard_cart .domain-selection-options .option-selected {
    background-color: rgba(6, 182, 212, .12);
    border-color: rgba(6, 182, 212, .30);
}

body #order-standard_cart .transfer-not-eligible {
    background-color: rgba(251, 191, 36, .10);
    color: var(--warning-accented);
}

body div.domainresults div:not(.btn-group) {
    background-color: var(--surface);
    border-color: var(--border-muted);
    color: var(--text-accented);
}

body div.domainresults div:not(.btn-group) span,
body .domain-promo-box .small {
    color: var(--text-lifted);
}

body .domain-pricing .tld-pricing-header div:nth-child(odd) {
    background-color: rgba(255, 255, 255, .04);
}

body .spotlight-tld .unavailable,
body .spotlight-tld .invalid {
    background-color: rgba(248, 113, 113, .10);
    border-color: rgba(248, 113, 113, .28);
}

body .domain-promo-box {
    background-color: var(--surface);
    border-color: var(--border-muted);
    color: var(--text-accented);
}

/* Reinnoiri */
body .domain-renewals,
body .service-renewals,
body .addon-renewals .service-renewal {
    background-color: var(--surface);
    border-color: var(--border-muted);
}

body .domain-renewals .domain-renewal,
body .service-renewals .service-renewal,
body .addon-renewals > div {
    border-color: var(--border-muted);
}

/* A DOUA (si ultima) excepție cu !important din tema.
   standard_cart declara filtrul de reinnoiri ca
   "background: url(search.png) #fff no-repeat ... !important".
   Suprascriem doar componenta de culoare - iconita de lupa din shorthand
   ramane intacta - dar avem nevoie de !important ca sa batem !important. */
body .form-control.domain-renewals-filter,
body .form-control.service-renewals-filter {
    background-color: var(--surface-lifted) !important;
    border-color: var(--border);
    color: var(--text);
}

/* Conturi si promotii MarketConnect */
body #order-standard_cart .account-select-container,
body #order-standard_cart .account-select-container div.account,
body #order-standard_cart .mc-promo,
body #order-standard_cart .mc-promo .body {
    background-color: var(--surface);
    border-color: var(--border-muted);
    color: var(--text-accented);
}

body #order-standard_cart .account-select-container div.account.active {
    background-color: rgba(6, 182, 212, .12);
    border-color: rgba(6, 182, 212, .30);
}

body #order-standard_cart .mc-promo.sitelockvpn .expander,
body #order-standard_cart .mc-promo.sitelockvpn .price {
    color: var(--text-accented);
}


/* Pagina cosului (formularul nexus_cart) isi injecteaza un <style> inline
   cu "section#main-body { background:#fff !important }" direct in
   templates/orderforms/nexus_cart/viewcart.tpl. Fiind inline, apare DUPA
   link-ul nostru din <head>, deci la !important egal ar castiga el.
   Il batem cu un selector mai specific (body + ID = 1,0,2 fata de 1,0,1).
   Alternativa ar fi fost sa modificam un fisier WHMCS core - nu o facem,
   ca sa nu pierdem modificarea la primul update. */
body section#main-body {
    background-color: var(--bg-inverted) !important;
}


/* =====================================================================
   13. FACTURI, TICHETE, DIVERSE
   ===================================================================== */

/* Doar factura pe ecran. PDF-ul se genereaza din invoicepdf.tpl cu stiluri
   proprii si trebuie sa ramana pe alb - nu il atingem de aici. */
.invoice-summary-table td.total-row,
tr.masspay-total td {
    background-color: rgba(255, 255, 255, .05);
    color: var(--text);
}

div.credit-card {
    background-color: var(--surface-lifted);
    border-color: var(--border);
    color: var(--text);
}

.view-ticket .posted-by {
    background-color: rgba(255, 255, 255, .04);
    color: var(--text-accented);
}

.view-ticket .attachment-list li figure {
    background-color: var(--surface-lifted);
    border-color: var(--border-muted);
}

/* EDITORUL DE MARKDOWN (formularul de tichet, raspunsuri, note).

   SINGURUL LOC DIN TEMA CU !important, si nu din comoditate. theme.min.css
   scrie:

     .md-editor > .btn-toolbar { background-color: #fff !important }
     .md-editor > .md-preview,
     .md-editor > textarea.markdown-editor {
         background-color: #fff !important;
         border-top: 1px solid #ddd !important;
         border-bottom: 1px solid #ddd !important;
     }

   Un !important nu se bate cu specificitate - se bate doar cu alt !important.
   Regulile noastre de aici foloseau aceiasi selectori, fara el, deci pierdeau:
   caseta de scris ramanea alba, iar textul, fiind aproape alb, disparea in ea.
   Omul deschidea un tichet si scria pe nevazute.

   Celelalte doua cai erau mai rele: sa modificam theme.min.css, pe care WHMCS il
   rescrie la fiecare actualizare, sau sa punem stiluri din JavaScript. */
.md-editor {
    border-color: var(--border-muted) !important;
    background-color: var(--surface-lifted);
}

.md-editor > .btn-toolbar {
    background-color: var(--surface-accented) !important;
    border-color: var(--border-muted) !important;
}

/* Zona de scris si previzualizarea, la ACELASI font si aceeasi marime.

   Masurat inainte: caseta de scris era Menlo 14px - monospatiat - iar
   previzualizarea Inter 16px. La apasarea pe "Previzualizare" se schimba tot
   aspectul textului, nu doar formatarea, si parea ca intri intr-un "mod cod".
   Butonul arata de fapt cum va fi trimis mesajul: **asa** devine ingrosat, # devine
   titlu. Cu doua fonturi diferite, mesajul ala se pierdea.

   Monospatiatul are rost la cod, nu la o cerere de asistenta scrisa in cuvinte.
   Fragmentele de cod raman monospatiate oricum - le da <code>, din alta regula. */
.md-editor > textarea.markdown-editor,
.md-editor > .md-preview {
    background-color: var(--surface-lifted) !important;
    color: var(--text) !important;
    border-top-color: var(--border-muted) !important;
    border-bottom-color: var(--border-muted) !important;
    font-family: var(--font-body) !important;
    font-size: 15px !important;
    line-height: 1.65 !important;
}

.md-editor > textarea.markdown-editor::placeholder { color: var(--text-muted); }

/* Subsolul cu "lines / words / salvat". La fel de alb, dar fara !important -
   aici ajunge un selector obisnuit. */
.md-editor > .md-footer {
    background-color: var(--surface-accented);
    border-top: 1px solid var(--border-muted);
}

.md-editor .markdown-editor-status,
.md-editor .markdown-save { color: var(--text-muted); }

/* Nota de deasupra editorului, cand textul e ciorna de data trecuta.

   Discreta dinadins: nu e o eroare si nu s-a stricat nimic, doar explica un text
   pe care omul nu-l mai astepta. De aceea nu are fundal colorat si nu ia latimea
   intreaga - o linie mica, cu butonul de sters langa ea. */
.lab404-ciorna {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .1rem .6rem;
    margin-bottom: .5rem;
    font-size: .82rem;
    color: var(--text-muted);
}

/* Butonul arata a legatura, nu a buton: e o actiune marunta langa un text, iar
   un buton adevarat langa "Trimite" ar cere aceeasi atentie ca el. */
.lab404-ciorna button {
    padding: 0;
    border: 0;
    background: none;
    font-family: inherit;
    font-size: inherit;
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

/* #22d3ee, acelasi turcoaz deschis ca la trecerea peste randurile din meniu. */
.lab404-ciorna button:hover { color: #22d3ee; }

/* =====================================================================
   ALERTELE CONTULUI, CA BANNER
   ---------------------------------------------------------------------
   Imprumuta vesmantul lui .verification-banner, deja stilizat mai sus - de aceea
   marcajul din header.tpl poarta si acea clasa. Aici raman doar culorile, dupa
   gravitate, si randul din meniul contului.

   Nuantele urmeaza intelesul, nu gustul: chihlimbar cand e ceva de facut, rosu
   cand e ceva stricat, albastru cand e doar de stiut.
   ===================================================================== */
.lab404-alerta-warning { --alerta-h: 38; }
.lab404-alerta-danger  { --alerta-h: 0; }
.lab404-alerta-info    { --alerta-h: 199; }
.lab404-alerta-success { --alerta-h: 142; }

/* SELECTORII REPETA .verification-banner, si nu de prisos.

   site-chrome.css imbraca bannerul de verificare a e-mailului in chihlimbar,
   printr-o regula pe ".verification-banner" - aceeasi specificitate ca a
   noastra, 0,1,0. Dar el se incarca DUPA custom.css (vezi includes/head.tpl),
   iar la egalitate castiga ultimul venit. Rezultatul: si alerta rosie, si cea
   albastra ieseau chihlimbar. Masurat: fundal rgba(251,191,36,.09) pe toate
   trei.

   Cu ambele clase iese 0,2,0 si castiga culoarea potrivita gravitatii. */
.verification-banner.lab404-alerta {
    border-bottom: 1px solid hsl(var(--alerta-h, 199) 70% 50% / .28);
    background-color: hsl(var(--alerta-h, 199) 70% 45% / .1);
    color: hsl(var(--alerta-h, 199) 75% 78%);
}

.verification-banner.lab404-alerta .text { color: hsl(var(--alerta-h, 199) 75% 78%); }

.verification-banner.lab404-alerta i { color: hsl(var(--alerta-h, 199) 80% 62%); }


/* ALINIEREA TEXTELOR, pe toate bannerele - si pe cel de e-mail.

   Iconita si textul stau unul langa altul ca elemente in linie, deci textul
   incepe exact acolo unde se termina desenul semnului. Triunghiul de avertizare
   si cercul de informare n-au aceeasi latime, asa ca randurile porneau din
   locuri diferite - se vedea imediat cu trei bannere unul sub altul.

   Prima incercare a fost o latime fixa pe iconita, 1.25em. N-a fost de ajuns si
   nici masurabila: planta mea de proba nu incarca fonturile Font Awesome, deci
   semnele randau ca litere de rezerva si masuram alte latimi decat cele reale.

   Coloana devine acum un rand flex cu distanta fixa intre cele doua. Textul
   incepe atunci la marginea coloanei plus latimea rezervata iconitei plus
   distanta - trei numere pe care le scriem noi, niciunul dependent de cum arata
   glifa. Se aplica si bannerului de e-mail, ca toate patru sa fie pe o linie. */
/* NU se face flex pe coloana, si e o lectie platita.

   Am incercat asa: coloana flex, iconita cu latime fixa, align-items: center.
   Alinierea pe orizontala se rezolva, dar pe verticala se strica. Flex centreaza
   CUTIILE, iar cutia iconitei are 38px si cea a textului 19px; centrul cutiei
   iconitei nu e insa si centrul desenului din ea, asa ca textul aparea deplasat.
   Masurat: 4.5px mai jos pe alertele noastre, 6px mai sus pe bannerul de e-mail.

   Asezarea in linie, care era acolo de la inceput, pune iconita si textul pe
   aceeasi LINIE DE BAZA - si asa arata bannerul de e-mail dinainte sa ma ating
   eu de el. Se pastreaza.

   Ramane doar latimea fixa a iconitei, care rezolva orizontala: fiecare semn isi
   are latimea lui - triunghiul e mai lat decat cercul - iar cu trei bannere unul
   sub altul se vedea ca randurile nu pornesc din acelasi loc. inline-block cu
   latime scrisa da acelasi pas oricare ar fi glifa. */
.verification-banner .row > [class*="order-1"] > i {
    display: inline-block;
    /* 2.5rem = 40px, adica ceva mai mult decat cel mai lat semn de aici
       (triunghiul, 38px masurat). Cu o cutie mai ingusta decat desenul, glifa
       da pe dinafara si mananca din spatiul de dupa ea - textul ajungea lipit
       de iconita, desi marginea era scrisa. */
    width: 2.5rem;
    margin-right: .5rem;
    text-align: center;
}

/* Butonul din dreapta: contur, nu plin. Alerta spune deja destul de tare ce s-a
   intamplat; butonul e doar drumul catre ea. */
.verification-banner.lab404-alerta .btn.btn-action {
    background: transparent;
    border-color: hsl(var(--alerta-h, 199) 70% 55% / .45);
    color: hsl(var(--alerta-h, 199) 75% 78%);
}

.verification-banner.lab404-alerta .btn.btn-action:hover {
    background: hsl(var(--alerta-h, 199) 70% 50% / .14);
    border-color: hsl(var(--alerta-h, 199) 70% 60% / .7);
    color: hsl(var(--alerta-h, 199) 80% 86%);
}

/* 0,4,0: site-chrome.css coloreaza X-ul cu ".verification-banner .btn.close"
   (0,3,0), pentru bannerul de e-mail. Fara randul asta, X-ul iesea chihlimbar si
   pe alerta rosie, si pe cea albastra. */
.verification-banner.lab404-alerta .btn.close {
    color: hsl(var(--alerta-h, 199) 60% 70%);
    opacity: .75;
}
.verification-banner.lab404-alerta .btn.close:hover { opacity: 1; }


/* Randul "Autentificat ca: FIRMA" din capul meniului de cont.

   E o legatura ca oricare alta - duce la datele contului - dar nu trebuie sa
   arate ca o optiune din lista: e o informatie, nu o destinatie cautata. De aceea
   e mai mica si mai stinsa, iar numele firmei e ce se vede. */
/* =====================================================================
   MENIUL CONTULUI — designul d5
   ---------------------------------------------------------------------
   Ales din galeria WHMCS-tests/meniu-cont-designs/. Cel mai discret dintre cele
   cinci: fara cartonase, doar randuri, cu o dunga turcoaz-violet care apare sub
   maus si o alunecare de 3px.

   VESMANTUL E LUAT DIN MENIUL SITE-ULUI, nu inventat: public-staging/style.css,
   regula .mega-menu - fundal rgba(3,7,18,.98) cu doua pete radiale (turcoaz
   sus-dreapta, violet stanga-jos), blur de 30px, chenar de un pixel la 5% alb si
   umbra 0 40px 100px. Cand cele doua meniuri stau unul langa altul in acelasi
   antet, trebuie sa fie evident ca sunt din aceeasi casa.

   ACELASI SABLON SI LA MENIUL PRINCIPAL (Servicii, Domenii, Asistenta). Doua
   feluri de meniu derulant in acelasi antet ar fi aratat a doua site-uri lipite;
   iar structura pe care o scrie navbar.tpl e aceeasi la amandoua - <li class=
   "dropdown-item"> cu un <a class="dropdown-item px-2 py-0"> inauntru - deci
   regulile se impart, nu se copiaza.

   ":is(.lh-account, .lh-primary)" tine specificitatea neschimbata: amandoua sunt
   clase, deci selectorul rămâne cat era cand scria doar ".lh-account". Ce e
   propriu unuia dintre meniuri - latimea, capul cu numele contului, iconitele -
   rămâne mai jos, pe clasa lui.

   TEXTELE NU SE ATING. Etichetele raman cele date de WHMCS; aici e doar
   imbracamintea. Chiar si iconitele vin din CSS, agatate de adresa fiecarei
   legaturi - asa n-am adaugat nimic in marcaj, iar o intrare noua adaugata maine
   de WHMCS apare pur si simplu fara iconita, nu stricata.
   ===================================================================== */
:is(.lh-account, .lh-primary) .dropdown-menu {
    padding: .5rem;
    margin-top: .6rem;
    border: 1px solid rgba(255, 255, 255, .05);
    border-radius: 18px;
    background-color: rgba(3, 7, 18, .98);
    background-image:
        radial-gradient(circle at 80% 40%, rgba(6, 182, 212, .1) 0, transparent 50%),
        radial-gradient(circle at 20% 60%, rgba(139, 92, 246, .1) 0, transparent 50%);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    box-shadow: 0 40px 100px rgba(0, 0, 0, .9);
}

/* LATIMEA MENIULUI DE CONT, cu podea si tavan, amandoua masurate.

   PODEA 292px: cel mai lung rand din meniu - "Contacte/Conturi secundare" -
   cere 274px cu iconita si spatiile lui. Sub atat, un rand s-ar rupe pe doua
   linii intr-o lista unde toate celelalte au una.

   AM INCERCAT si "max(292px, 100%)", ca panoul sa nu fie niciodata mai ingust
   decat butonul. A iesit invers: 100% se masoara fata de <li>, iar acela poarta
   clasa "d-block", deci ocupa toata latimea randului, nu cat butonul. Panoul
   sarea la 864px in toate cazurile. Masurat, scos.

   TAVAN 22rem: fara el, un nume de firma lung intinde panoul, fiindca o lista
   pozitionata absolut se lateste dupa conținut. Masurat: cu "ASOCIAȚIA PENTRU
   DEZVOLTARE REGIONALĂ ȘI COOPERARE TRANSFRONTALIERĂ SRL" panoul ajungea la
   591px, adica de doua ori cat trebuie. Cu tavan, numele se rupe pe doua-trei
   randuri si restul meniului rămâne asezat. */
.lh-account .dropdown-menu {
    min-width: 292px;
    max-width: 22rem;
}

/* Meniul principal n-are nume de client inauntru, deci n-are nevoie de tavan:
   etichetele vin din fisierele de limba, le stim. Podeaua e masurata pe cel mai
   lung rand - vezi comentariul de la iconite. */
.lh-primary .dropdown-menu {
    min-width: 274px;
}

/* navbar.tpl pune "dropdown-item" si pe <li>, si pe <a> dinauntru. Pe <li> il
   golim, ca sa nu avem doua fundaluri suprapuse la trecerea cu mausul. */
:is(.lh-account, .lh-primary) .dropdown-menu > li.dropdown-item {
    padding: 0;
    background: none;
    border: 0;
}

:is(.lh-account, .lh-primary) .dropdown-menu > li > a.dropdown-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: .7rem;
    /* !important, si e a doua oara in toata tema cand il folosesc.

       navbar.tpl scrie pe fiecare legatura "px-2 py-0" - utilitare Bootstrap,
       iar acelea sunt !important prin constructie, ca sa poata bate orice.
       py-0 inseamna zero spatiu sus si jos: randurile ieseau de 21px in loc de
       37, adica lipite unul de altul, si de aceea meniul nu semana deloc cu
       macheta desi toate celelalte reguli se aplicau. Masurat: padding calculat
       "0px 8px" in loc de "8.32px 15.2px".

       Alternativa ar fi fost sa copiez navbar.tpl doar ca sa sterg doua clase,
       si sa ingheț restul meniului la cum arata azi. */
    padding: .52rem .95rem !important;
    font-family: var(--font-body);
    font-size: .875rem;
    color: var(--text-accented);
    white-space: normal;
    transition: color .25s cubic-bezier(.23, 1, .32, 1),
                transform .25s cubic-bezier(.23, 1, .32, 1);
}

/* Dunga din stanga. Apare la trecere, nu la incarcare: opacity in loc de
   width, ca sa nu se miste textul. */
:is(.lh-account, .lh-primary) .dropdown-menu > li > a.dropdown-item::after {
    content: '';
    position: absolute;
    left: 0;
    top: .35rem;
    bottom: .35rem;
    width: 2px;
    border-radius: 2px;
    /* Turcoaz plin, nu degrade catre violet. Peste tot in tema dunga de "aici
       esti" e turcoaz - in bara laterala a filelor de cont, pe filele de facturi.
       Degradeul l-am adus din macheta, unde arata bine singur; langa celelalte
       insa iesea al doilea fel de a spune acelasi lucru. */
    background: var(--primary);
    opacity: 0;
    transition: opacity .25s cubic-bezier(.23, 1, .32, 1);
}

:is(.lh-account, .lh-primary) .dropdown-menu > li > a.dropdown-item:hover,
:is(.lh-account, .lh-primary) .dropdown-menu > li > a.dropdown-item:focus {
    background: none;
    color: var(--text);
    transform: translateX(3px);
}

:is(.lh-account, .lh-primary) .dropdown-menu > li > a.dropdown-item:hover::after,
:is(.lh-account, .lh-primary) .dropdown-menu > li > a.dropdown-item:focus::after { opacity: 1; }

/* Iesirea: aceeasi asezare, alta culoare - e singura care te scoate din cont. */
.lh-account .dropdown-menu > li > a[href*="logout"]:hover { color: #fca5a5; }
.lh-account .dropdown-menu > li > a[href*="logout"]:hover::after { background: #f87171; }

:is(.lh-account, .lh-primary) .dropdown-menu .dropdown-divider {
    margin: .4rem .95rem;
    border-top-color: rgba(255, 255, 255, .05);
}


/* --- Iconitele, agatate de adresa legaturii ---

   Sunt Tabler Icons (MIT), puse ca masca: asa culoarea vine din
   background-color si se schimba la trecere odata cu textul, iar desenul nu
   depinde de vreun font de iconite incarcat separat.

   Cheia e ce contine adresa, nu numele intrarii sau eticheta: eticheta e
   tradusa, iar numele ramane o presupunere despre cum a botezat WHMCS intrarea.
   Adresa e insa chiar pagina la care duce. */
:is(.lh-account, .lh-primary) .dropdown-menu > li > a.dropdown-item::before {
    content: '';
    flex: 0 0 19px;
    width: 19px;
    height: 19px;
    background-color: var(--text-muted);
    -webkit-mask: var(--ico-meniu) center / contain no-repeat;
            mask: var(--ico-meniu) center / contain no-repeat;
    transition: background-color .25s cubic-bezier(.23, 1, .32, 1);
}

:is(.lh-account, .lh-primary) .dropdown-menu > li > a.dropdown-item:hover::before { background-color: #22d3ee; }
.lh-account .dropdown-menu > li > a[href*="logout"]:hover::before { background-color: #fca5a5; }

/* Randul cu numele contului n-are iconita - e o informatie, nu o destinatie.

   Se tinteste pe DOUA cai, si nu de prisos: prin clasa pusa de hook si prin
   ":first-child". Clasa depinde de getClass(), pe care WHMCS nu o completeaza
   din cheia "class" a lui addChild() - hook-ul o pune si prin setClass, dar
   nici acela nu e garantat in orice versiune. Randul are insa order 1, deci e
   mereu primul din lista. Daca o cale cade, cealalta tine. */
.lh-account .dropdown-menu > li.lab404-cont-curent > a.dropdown-item::before,
.lh-account .dropdown-menu > li:first-child > a.dropdown-item::before { display: none; }

.lh-account .dropdown-menu > li > a[href*="action=details"] {
    --ico-meniu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0'/%3E%3Cpath d='M9 10a3 3 0 1 0 6 0a3 3 0 1 0 -6 0'/%3E%3Cpath d='M6.168 18.849a4 4 0 0 1 3.832 -2.849h4a4 4 0 0 1 3.834 2.855'/%3E%3C/svg%3E");
}

.lh-account .dropdown-menu > li > a[href*="/users"] {
    --ico-meniu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7a4 4 0 1 0 8 0a4 4 0 1 0 -8 0'/%3E%3Cpath d='M3 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3Cpath d='M21 21v-2a4 4 0 0 0 -3 -3.85'/%3E%3C/svg%3E");
}

.lh-account .dropdown-menu > li > a[href*="paymentmethods"] {
    --ico-meniu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v8a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3l0 -8'/%3E%3Cpath d='M3 10l18 0'/%3E%3Cpath d='M7 15l.01 0'/%3E%3Cpath d='M11 15l2 0'/%3E%3C/svg%3E");
}

.lh-account .dropdown-menu > li > a[href*="action=invoices"] {
    --ico-meniu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3v4a1 1 0 0 0 1 1h4'/%3E%3Cpath d='M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2'/%3E%3Cpath d='M9 7l1 0'/%3E%3Cpath d='M9 13l6 0'/%3E%3Cpath d='M13 17l2 0'/%3E%3C/svg%3E");
}

.lh-account .dropdown-menu > li > a[href*="contacts"] {
    --ico-meniu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6v12a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2'/%3E%3Cpath d='M10 16h6'/%3E%3Cpath d='M11 11a2 2 0 1 0 4 0a2 2 0 1 0 -4 0'/%3E%3Cpath d='M4 8h3'/%3E%3Cpath d='M4 12h3'/%3E%3Cpath d='M4 16h3'/%3E%3C/svg%3E");
}

.lh-account .dropdown-menu > li > a[href*="action=emails"] {
    --ico-meniu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10'/%3E%3Cpath d='M3 7l9 6l9 -6'/%3E%3C/svg%3E");
}

.lh-account .dropdown-menu > li > a[href*="/user/profile"] {
    --ico-meniu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065'/%3E%3Cpath d='M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0'/%3E%3C/svg%3E");
}

.lh-account .dropdown-menu > li > a[href*="/user/password"] {
    --ico-meniu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v6a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-6'/%3E%3Cpath d='M11 16a1 1 0 1 0 2 0a1 1 0 0 0 -2 0'/%3E%3Cpath d='M8 11v-4a4 4 0 1 1 8 0v4'/%3E%3C/svg%3E");
}

.lh-account .dropdown-menu > li > a[href*="/user/security"] {
    --ico-meniu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a12 12 0 0 0 8.5 3a12 12 0 0 1 -8.5 15a12 12 0 0 1 -8.5 -15a12 12 0 0 0 8.5 -3'/%3E%3C/svg%3E");
}

.lh-account .dropdown-menu > li > a[href*="logout"] {
    --ico-meniu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2 -2v-2'/%3E%3Cpath d='M9 12h12l-3 -3'/%3E%3Cpath d='M18 15l3 -3'/%3E%3C/svg%3E");
}

/* --- Iconitele meniului principal ---

   ORDINEA REGULILOR CONTEAZA AICI, si nu intamplator: toate intrarile de domenii
   duc tot la "cart.php", deci "[href*='cart.php']" le-ar prinde si pe ele.
   Regulile pe domenii vin dupa si castiga prin ordine, avand aceeasi
   specificitate. Daca cineva le rearanjeaza alfabetic maine, comanda de domeniu
   primeste iconita de cos.

   PLASA DE SIGURANTA: prima regula da o iconita neutra tuturor randurilor. Fara
   ea, o intrare pe care n-am prevazut-o - una adaugata de un modul, sau de un
   update de WHMCS - ar avea un gol de 19px in locul iconitei, intr-o lista unde
   toate celelalte au una. Asa are un punct si nu se vede stricata. */
.lh-primary .dropdown-menu > li > a.dropdown-item {
    --ico-meniu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 12a4 4 0 1 0 8 0a4 4 0 1 0 -8 0'/%3E%3C/svg%3E");
}

/* Serviciile mele */
.lh-primary .dropdown-menu > li > a[href*="action=services"] {
    --ico-meniu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v2a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3v-2'/%3E%3Cpath d='M3 15a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v2a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3l0 -2'/%3E%3Cpath d='M7 8l0 .01'/%3E%3Cpath d='M7 16l0 .01'/%3E%3Cpath d='M11 8h6'/%3E%3Cpath d='M11 16h6'/%3E%3C/svg%3E");
}

/* Produsele din "Magazin" - fiecare are adresa "/store/<produs>". Cosul e al
   comenzii, nu al produsului: pus pe toate, ieseau noua randuri cu acelasi semn,
   iar un semn care se repeta peste tot nu mai spune nimic. Primesc semnul de
   server, fiindca asta si sunt - gazduiri, servere, stocare. */
.lh-primary .dropdown-menu > li > a[href*="/store/"] {
    --ico-meniu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v2a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3v-2'/%3E%3Cpath d='M3 15a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v2a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3l0 -2'/%3E%3Cpath d='M7 8l0 .01'/%3E%3Cpath d='M7 16l0 .01'/%3E%3Cpath d='M11 8h6'/%3E%3Cpath d='M11 16h6'/%3E%3C/svg%3E");
}

/* Singurul produs care nu e un server: casuta de e-mail. Cautam "mail", nu
   "email": adresa reala e "/store/business-e-mail", cu cratima. Slug-ul vine din
   numele produsului din baza, deci daca se redenumeste produsul, randul cade
   inapoi pe semnul de server - nu rămâne gol. */
.lh-primary .dropdown-menu > li > a[href*="/store/"][href*="mail"] {
    --ico-meniu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10'/%3E%3Cpath d='M3 7l9 6l9 -6'/%3E%3C/svg%3E");
}

/* Comanda un serviciu, si "Rasfoiti tot" - cosul. "$=" prinde adresa care se
   TERMINA in /store, adica lista intreaga, nu si produsele de mai sus.
   Vine INAINTEA domeniilor, vezi nota de la inceput. */
.lh-primary .dropdown-menu > li > a[href*="cart.php"],
.lh-primary .dropdown-menu > li > a[href$="/store"] {
    --ico-meniu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19a2 2 0 1 0 4 0a2 2 0 1 0 -4 0'/%3E%3Cpath d='M15 19a2 2 0 1 0 4 0a2 2 0 1 0 -4 0'/%3E%3Cpath d='M17 17h-11v-14h-2'/%3E%3Cpath d='M6 5l14 1l-1 7h-13'/%3E%3C/svg%3E");
}

/* Optiuni suplimentare. Adresa lui e "/cart.php?gid=addons", deci il prinde si
   regula de cos de mai sus - de aceea sta DUPA ea, nu inainte. */
.lh-primary .dropdown-menu > li > a[href*="addon"] {
    --ico-meniu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1'/%3E%3C/svg%3E");
}

/* Starea serviciilor - "/serverstatus.php". Ramane in meniu sub "Asistenta":
   hook-ul lab404_meniu.php scoate doar intrarea de pe randul de sus, iar asta e
   copil, deci n-a fost atinsa. */
.lh-primary .dropdown-menu > li > a[href*="serverstatus"] {
    --ico-meniu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h4l3 8l4 -16l3 8h4'/%3E%3C/svg%3E");
}

/* Domeniile mele si Inregistreaza un domeniu - globul */
.lh-primary .dropdown-menu > li > a[href*="action=domains"],
.lh-primary .dropdown-menu > li > a[href*="domain=register"] {
    --ico-meniu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0'/%3E%3Cpath d='M3.6 9h16.8'/%3E%3Cpath d='M3.6 15h16.8'/%3E%3Cpath d='M11.5 3a17 17 0 0 0 0 18'/%3E%3Cpath d='M12.5 3a17 17 0 0 1 0 18'/%3E%3C/svg%3E");
}

/* Transfera un domeniu */
.lh-primary .dropdown-menu > li > a[href*="domain=transfer"] {
    --ico-meniu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 18v3h16v-14l-8 -4l-8 4v3'/%3E%3Cpath d='M4 14h9'/%3E%3Cpath d='M10 11l3 3l-3 3'/%3E%3C/svg%3E");
}

/* Reinnoieste domenii */
.lh-primary .dropdown-menu > li > a[href*="renew"] {
    --ico-meniu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4'/%3E%3Cpath d='M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4'/%3E%3C/svg%3E");
}

/* Cauta un domeniu, si Centrul de ajutor - amandoua sunt o cautare */
.lh-primary .dropdown-menu > li > a[href*="domainchecker"],
.lh-primary .dropdown-menu > li > a[href*="/knowledgebase"] {
    --ico-meniu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10a7 7 0 1 0 14 0a7 7 0 1 0 -14 0'/%3E%3Cpath d='M21 21l-6 -6'/%3E%3C/svg%3E");
}

/* Tichetele mele */
.lh-primary .dropdown-menu > li > a[href*="supportticket"] {
    --ico-meniu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l0 2'/%3E%3Cpath d='M15 11l0 2'/%3E%3Cpath d='M15 17l0 2'/%3E%3Cpath d='M5 5h14a2 2 0 0 1 2 2v3a2 2 0 0 0 0 4v3a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-3a2 2 0 0 0 0 -4v-3a2 2 0 0 1 2 -2'/%3E%3C/svg%3E");
}

/* Deschide un tichet - colacul de salvare */
.lh-primary .dropdown-menu > li > a[href*="submitticket"] {
    --ico-meniu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 12a4 4 0 1 0 8 0a4 4 0 1 0 -8 0'/%3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0'/%3E%3Cpath d='M15 15l3.35 3.35'/%3E%3Cpath d='M9 15l-3.35 3.35'/%3E%3Cpath d='M5.65 5.65l3.35 3.35'/%3E%3Cpath d='M18.35 5.65l-3.35 3.35'/%3E%3C/svg%3E");
}

/* Anunturi */
.lh-primary .dropdown-menu > li > a[href*="announcement"] {
    --ico-meniu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8a3 3 0 0 1 0 6'/%3E%3Cpath d='M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5'/%3E%3Cpath d='M12 8l4.524 -3.77a.9 .9 0 0 1 1.476 .692v12.156a.9 .9 0 0 1 -1.476 .692l-4.524 -3.77h-8a1 1 0 0 1 -1 -1v-4a1 1 0 0 1 1 -1h8'/%3E%3C/svg%3E");
}

/* Descarcari */
.lh-primary .dropdown-menu > li > a[href*="download"] {
    --ico-meniu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2'/%3E%3Cpath d='M7 11l5 5l5 -5'/%3E%3Cpath d='M12 4l0 12'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
    :is(.lh-account, .lh-primary) .dropdown-menu > li > a.dropdown-item,
    :is(.lh-account, .lh-primary) .dropdown-menu > li > a.dropdown-item::before,
    :is(.lh-account, .lh-primary) .dropdown-menu > li > a.dropdown-item::after { transition: none; }
    :is(.lh-account, .lh-primary) .dropdown-menu > li > a.dropdown-item:hover { transform: none; }
}


.lh-account .dropdown-menu > li.lab404-cont-curent,
.lh-account .dropdown-menu > li:first-child {
    /* Linia de sub rand, in locul unui element separator in meniu. */
    margin-bottom: .35rem;
    padding-bottom: .35rem;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
}

/* Capul meniului are DOUA randuri, cu roluri diferite: eticheta mica si stinsa,
   apoi numele firmei. Cele doua <span> vin din eticheta intrarii, pusa de hook -
   navbar.tpl o scrie fara sa o escapeze, iar numele e trecut prin
   htmlspecialchars acolo, fiindca il scrie clientul. */
.lh-account .dropdown-menu > li.lab404-cont-curent > a.dropdown-item,
.lh-account .dropdown-menu > li:first-child > a.dropdown-item {
    display: block;
    padding: .85rem .95rem .8rem !important;
    white-space: normal;
}

.lh-account .dropdown-menu .cc-eticheta {
    display: block;
    margin-bottom: .2rem;
    font-family: var(--font-body);
    font-size: .66rem;
    font-weight: 500;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.lh-account .dropdown-menu .cc-nume {
    display: block;
    font-family: var(--font-heading);
    font-size: .85rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--text);
}

.lh-account .dropdown-menu > li.lab404-cont-curent > a.dropdown-item:hover,
.lh-account .dropdown-menu > li:first-child > a.dropdown-item:hover { transform: none; }

.lh-account .dropdown-menu > li:first-child > a.dropdown-item:hover .cc-nume { color: var(--primary-accented); }

/* Capul meniului nu primeste nici dunga: nu e o actiune. */
.lh-account .dropdown-menu > li.lab404-cont-curent > a.dropdown-item::after,
.lh-account .dropdown-menu > li:first-child > a.dropdown-item::after { display: none; }


/* Butonul "Răsfoiește" de pe campul de atasamente.

   Bootstrap are deja "[data-browse]::after { content: attr(data-browse) }", dar
   are si "custom-file-input:lang(en) ~ .custom-file-label::after { content:
   'Browse' }", care e 0,3,1 - mai specific. Pe paginile romanesti :lang(en) nu
   prinde, deci n-ar conta; regula de mai jos e pentru cazul in care cineva pune
   vreodata lang="en" pe o pagina care ramane tradusa. 0,2,1, deci sigura. */
.custom-file-label[data-browse]::after { content: attr(data-browse); }


/* MODUL PE TOT ECRANUL A FOST SCOS, la cerere, iar regulile lui s-au sters
   odata cu el - nu comentate, sterse.

   Am scris aici o pagina de CSS ca sa-l fac sa functioneze: tema nu-i daduse
   niciodata vreo regula, deci apasarea nu facea nimic vizibil. Butonul a fost
   insa scos cu totul, iar pluginul nu are nicio scurtatura de tastatura pentru
   el - verificat, singura cale era acel <a class="md-control-fullscreen">. Deci
   regulile ramaneau cod pe care nimic nu-l mai atinge.

   Scoaterea butonului se face in footer.tpl, din marcaj, nu cu display:none. */

.md-preview table,
.markdown-content table {
    background-color: transparent;
}

.md-preview table > thead > tr > th,
.markdown-content table > thead > tr > th {
    background-color: rgba(255, 255, 255, .04);
    color: var(--text);
}

.twofa-setup .backup-code {
    background-color: var(--surface-accented);
    color: var(--text);
    font-family: var(--font-mono);
}

.btn.btn-success.open-modal.twofa-config-link.enable {
    background-color: var(--success);
    color: var(--on-accent);
}

.carousel-indicators li {
    background-color: var(--border-accented);
}


/* =====================================================================
   14. SIDEBAR SI FOOTER
   ===================================================================== */

/* Bara laterala e CLONA lui .panou din cos (lab404-cart-comun.css, liniile
   229-286). Valorile nu sunt alese din nou: fiecare token de acolo are aici un
   echivalent identic la valoare, verificat -
     --surface   #0b1220               = --surface
     --line-soft rgba(255,255,255,.06) = --border-muted
     --ink-3     #94a3b8               = --text-lifted
     --cyan-pale #67e8f9               = --primary-accented
   Ce n-are token (marimile .75rem / .875rem, raza de 16px, curba de tranzitie)
   e scris ca valoare, cu originalul notat alaturi.

   STA AICI, nu intr-o foaie de pagina, fiindca bara e ACELASI element pe toate
   filele contului - detalii, utilizatori, modalitati de plata, contacte,
   istoric mesaje. Scrisa pe fiecare pagina, ar fi trebuit tinuta la fel in cinci
   locuri, iar prima data cand se schimba intr-unul singur, filele ar fi inceput
   sa arate diferit intre ele. */
.sidebar { display: grid; gap: 1rem; align-content: start; }
.sidebar > .card-sidebar { margin-bottom: 0; }

/* ".sidebar .card-sidebar", nu doar ".card-sidebar", si e o corectura, nu un
   moft: nexus are in theme.min.css

     .sidebar .card-sidebar { border-radius: var(--rounding-md) }

   adica 0,2,0. Regula noastra era 0,1,0 si pierdea TACUT - colțurile de 16px pe
   care le scriem aici n-au fost niciodata pe ecran, pe nicio pagina; toate barele
   aveau 8px, ai lui. Se vedea comparand cu panoul din cos, dupa care e croita
   bara asta.

   E fix capcana scrisa in caietul proiectului: theme.min.css are multe reguli cu
   doua clase, iar un selector cu una singura nu spune nimic in consola cand
   pierde. La specificitate egala castiga custom.css, care se incarca dupa. */
.sidebar .card-sidebar,
/* Pasul de comanda a unui domeniu foloseste alt invelis - ".cart-sidebar", din
   asezarea standard WHMCS, nu bara noastra. Panoul de acolo primea culorile
   temei, dar rămânea cu colturile lui de 8px. Latimea lui (274px) tine de
   asezarea aceea si se indreapta cand luam si fluxul de domenii. */
.cart-sidebar .card-sidebar {
    background: var(--surface);
    border: 1px solid var(--border-muted);
    border-radius: 16px;                  /* --r-lg */
    overflow: hidden;
    box-shadow: none;
}

.card-sidebar .card-header {
    padding: 1rem;                        /* --sp-4 */
    background: rgba(255, 255, 255, .03);
    border-bottom: 1px solid var(--border-muted);
}

.card-sidebar .card-title {
    margin: 0;
    font-family: var(--font-heading);     /* = --font-display din cos */
    font-size: .75rem;                    /* --t-xs */
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-lifted);
}

/* Panoul din cos n-are iconita in titlu. Ascunsa, nu scoasa din sablon: barele
   sunt randate de WHMCS, iar sabloanele lor rămân neatinse. */
.card-sidebar .card-title > .fas:not(.card-minimise),
.card-sidebar .card-title > .far:not(.card-minimise) { display: none; }

.card-sidebar .card-minimise { color: var(--text-muted); font-size: .7rem; }

.card-sidebar .list-group-item {
    display: flex;
    align-items: center;
    padding: .6rem 1rem;                  /* .6rem var(--sp-4) */
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--border-muted);
    font-family: var(--font-body);
    font-size: .875rem;                   /* --t-sm */
    color: var(--text-lifted);
    transition: color .18s cubic-bezier(.22, 1, .36, 1),
                background-color .18s cubic-bezier(.22, 1, .36, 1);
}

.card-sidebar .list-group-item:last-child { border-bottom: 0; }

/* Randurile pe care WHMCS le tine ascunse ca sabloane, de umplut din JavaScript.
   Pe pagina tichetului sunt doua: unul gol la CC Recipient si "#ccCloneRow", din
   care se cloneaza fiecare adresa adaugata.

   "w-hidden" si "hidden" inseamna "display: none" - dar sunt o singura clasa,
   deci 0,1,0, iar regula noastra de mai sus e 0,2,0 si le bate. Rezultatul se
   vedea in pagina: un buton rosu de stergere plutind singur sub titlul panoului,
   fara nicio adresa langa el, si un rand gol deasupra.

   Nu e o scapare a lor: regula noastra a fost cea care a rupt-o, deci tot ea o
   pune la loc. */
.card-sidebar .list-group-item.w-hidden,
.card-sidebar .list-group-item.hidden { display: none; }

/* Iconitele din dreptul randurilor, ascunse - la fel ca aceea din titlu, cateva
   randuri mai sus, si din acelasi motiv: panoul din cos, dupa care e croita bara
   asta, n-are niciuna.

   Se vad doar pe unele pagini (asistenta, servicii), fiindca doar acolo le pune
   WHMCS. De aceea barele ieseau diferite intre ele desi tot restul era identic:
   pe filele contului randurile incep cu textul, pe tichete incepeau cu un semn
   portocaliu si textul impins la dreapta.

   Ascunse, nu scoase din sablon: barele sunt randate de WHMCS din
   includes/sidebar.tpl, iar acela rămâne al lui. */
.card-sidebar .sidebar-menu-item-icon-wrapper { display: none; }

/* Eticheta la stanga, insigna la dreapta, ca in .panou-lista a. In cos legatura
   E randul; aici WHMCS mai baga un invelis intre ele, deci space-between merge
   pe invelis. */
.card-sidebar .sidebar-menu-item-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;                           /* --sp-2 */
    width: 100%;
}

/* =====================================================================
   RANDURILE CU DATE, NU CU LEGATURI (panoul tichetului deschis)
   ---------------------------------------------------------------------
   "Informații despre tichete" foloseste aceleasi <div class="list-group-item">,
   dar inauntru n-are o legatura, ci o pereche: eticheta si valoarea, despartite
   de un <br>:

     <span class="title">Solicitant</span><br>Alexandru Ciprian Petre

   Regula de mai sus le face "display: flex", iar intr-un container flex <br> NU
   rupe randul - devine si el un element de rand, fara latime. De aceea eticheta
   si valoarea ieseau lipite una de alta ("SolicitantAlexandru Ciprian Petre"),
   iar numele se rupea pe doua randuri fiindca nu mai avea loc.

   Randurile astea se intorc la "display: block", unde <br> face ce spune, iar
   eticheta primeste stilul de eticheta mica pe care il are si capul barei. */
.card-sidebar .list-group-item.ticket-details-children {
    display: block;
    padding: .7rem 1rem;
    color: var(--text);
    font-size: .85rem;
    line-height: 1.45;
}

.card-sidebar .ticket-details-children .title {
    display: block;
    margin-bottom: .1rem;
    font-family: var(--font-heading);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Pastilele dinauntru - "Proprietar" langa nume, starea langa prioritate. */
.card-sidebar .ticket-details-children .label {
    display: inline-block;
    margin-right: .35rem;
    padding: .2rem .5rem;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .03em;
    color: #fff;
    vertical-align: baseline;
}

/* --- Pastila de stare, adusa la felul nostru ---

   WHMCS ii scrie culoarea in atributul style, luata din tblticketstatuses. Sunt
   culorile lui implicite si nu merg pe un fundal inchis: "Answered" e #000000,
   adica o pastila NEAGRA pe fundal negru - text alb plutind in gol. "Closed" e
   #888888, un gri care nu spune nimic.

   Trecem la pastila noastra: fundal stins, text colorat, ca in lista de tichete.

   CHEIA E CHIAR CULOAREA. Marcajul n-are nicio clasa de stare - doar
   <span class="label" style="background-color:#888888;"> - deci nu exista alt
   fir de tras. Daca cineva schimba vreodata culorile din admin, randul lui nu se
   mai potriveste si pastila ramane cum o vrea WHMCS: mai putin frumoasa, dar nu
   stricata.

   !important e singura cale peste un stil scris in linie. E a treia oara in
   toata tema si, ca si celelalte doua, e scris aici de ce.

   ACEEASI HARTA SERVESTE DOUA LOCURI. Starea apare in bara sub doua infatisari:
   o pastila, in panoul tichetului deschis, si un cuvant colorat, in lista
   "Tichetele dumneavoastră recente" de pe pagina de trimitere. Marcajul difera -
   <span class="label" style="background-color:..."> fata de <span style=
   "color:..."> - dar culoarea din care plecam e aceeasi, deci harta se scrie o
   data si se citeste din amandoua. */
.card-sidebar [style*="#779500"] { --stare: #4ade80;  --stare-fundal: rgba(34, 197, 94, .16); }   /* Deschis */
.card-sidebar [style*="#000000"] { --stare: #22d3ee;  --stare-fundal: rgba(6, 182, 212, .16); }   /* Cu răspuns */
.card-sidebar [style*="#ff6600"] { --stare: #fcd34d;  --stare-fundal: rgba(251, 191, 36, .16); }  /* Ai răspuns tu */
.card-sidebar [style*="#cc0000"] { --stare: #a78bfa;  --stare-fundal: rgba(139, 92, 246, .18); }  /* În lucru */
.card-sidebar [style*="#224488"] { --stare: #cbd5e1;  --stare-fundal: rgba(148, 163, 184, .16); } /* În așteptare */
.card-sidebar [style*="#888888"] { --stare: #f87171;  --stare-fundal: rgba(239, 68, 68, .16); }   /* Închis - rosu, cerut */

/* Pastila din panoul tichetului deschis. */
.card-sidebar .ticket-details-children .label[style] {
    background-color: var(--stare-fundal, rgba(148, 163, 184, .16)) !important;
    color: var(--stare, #cbd5e1);
}

/* Cuvantul din lista de tichete recente. Aici WHMCS coloreaza textul, nu
   fundalul: "Cu răspuns" iesea negru pe negru, adica nu se vedea deloc. */
.card-sidebar .recent-ticket span[style] {
    color: var(--stare, var(--text-muted)) !important;
    font-weight: 600;
}

/* =====================================================================
   SELECTUL DE DEPARTAMENT, PE FORMULARUL DE TICHET
   ---------------------------------------------------------------------
   Statea intr-un "col-md-3", adica un sfert de rand: 113px. "General Enquiries"
   cere 133px doar textul, plus spatiile si sageata - deci se taia, si se citea
   "General Enquirie".

   NU AM LATIT COLOANA LA UN SFERT SI JUMATATE, desi ar fi mers azi. Numele
   departamentelor le scrii tu in admin; primul departament botezat "Suport
   tehnic și facturare" ar fi taiat din nou textul, si nimeni nu s-ar mai uita
   aici. Coloana isi ia acum latimea din cel mai lung nume din lista, cu o podea
   (sa nu iasa caraghios de ingusta daca departamentul se cheama "Suport") si un
   tavan (sa nu manance tot randul).

   Masurat: cu "General Enquiries" coloana iese 210px si textul incape; cu
   "Suport tehnic și facturare" iese 268px si tot incape. Pe fereastra ingusta,
   "Prioritate" coboara pe randul urmator - asa face Bootstrap oricum cand nu mai
   are loc, si arata bine. */
@media (min-width: 768px) {
    .form-group.col-md-3:has(> select#inputDepartment) {
        flex: 0 0 auto;
        width: auto;
        min-width: 25%;
        max-width: 50%;
    }
}

/* --- Butoanele de sub panou ---

   Cand tichetul e inchis, WHMCS pune acolo doua butoane: "Răspuns" si un al
   doilea, DEZACTIVAT, pe care scrie starea. Al doilea nu face nimic si repeta
   cuvant cu cuvant randul "Stare/Prioritate" de deasupra lui - un buton care nu
   se apasa si nu spune nimic nou.

   Se scoate doar cel dezactivat. Cand tichetul e deschis, in locul lui e
   "Închide tichetul", care chiar face ceva, si acela rămâne.

   Acelasi buton mort apare inca o data sus, langa titlul tichetului
   (id="closedTicket" in viewticket.tpl). Si acolo e de prisos: chiar deasupra
   lui, o banda galbena scrie "Acest tichet este închis. Îl puteți redeschide
   răspunzând la mesaj." - adica acelasi lucru, spus intreg.

   Marcajul din bara vine din nucleul WHMCS (getFooterHtml), nu dintr-un sablon
   pe care sa-l putem edita - de aceea se rezolva din CSS. */
.card-sidebar .card-footer .btn:disabled,
#closedTicket { display: none; }

/* --- Cele doua butoane, unul sub altul ---

   WHMCS le pune alaturi, fiecare pe cate o jumatate de rand. In bara noastra
   asta inseamna vreo 140px de buton, iar "Închide tichetul" nu incape: se rupea
   pe doua randuri si iesea mai inalt decat "Răspunde la tichet" de langa el.
   Doua butoane frati, de inalțimi diferite, arata a greseala.

   Puse unul sub altul, pe toata latimea, au acelasi gabarit si niciunul nu se mai
   rupe. Ordinea ramane cea din marcaj: intai raspunsul, care e ce vrei sa faca
   omul, apoi inchiderea.

   "gap" pe rand, nu margine pe butoane: cand tichetul e deja inchis, al doilea
   buton lipseste (vezi regula de mai sus), iar o margine ar fi lasat un gol sub
   singurul ramas. */
.card-sidebar .card-footer .row {
    flex-direction: column;
    gap: .5rem;
}

.card-sidebar .card-footer .col-button-left,
.card-sidebar .card-footer .col-button-right {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
}

.card-sidebar .list-group-item:hover {
    background: rgba(6, 182, 212, .08);
    color: var(--primary-accented);
    text-decoration: none;
}

/* Randurile cu date nu duc nicaieri, deci nu se aprind la trecerea cu mausul:
   un rand care se coloreaza sub cursor promite ca e apasabil. */
.card-sidebar .list-group-item.ticket-details-children:hover {
    background: transparent;
    color: var(--text);
    cursor: default;
}

.card-sidebar .list-group-item.active {
    position: relative;
    background: rgba(6, 182, 212, .1);
    color: var(--primary-accented);
    font-weight: 500;
}

/* Dunga din stanga: cyan plin. In cos e "background: var(--cyan)" - o culoare,
   nu un degrade. */
/* --- Cifra din dreptul unui rand de bara ---

   Nexus o randeaza ca insigna Bootstrap: o cutie OPACA, de culoarea suprafetei,
   cu colturi rotunjite. Pe randurile obisnuite nu se vede, fiindca are exact
   culoarea panoului de dedesubt. Pe randul APRINS insa, fundalul devine turcoaz,
   iar cutia intunecata iese la iveala - si prin colturile ei rotunjite se vede
   turcoazul de dedesubt, ca patru puncte mici. Unul dintre ele, cel din
   dreapta-sus, se vedea cel mai bine.

   Cifra nu are nevoie de cutie: e un numar langa un nume, ca in panoul de filtre
   de pe lista de tichete, unde e scrisa simplu. Fara fundal, isi ia culoarea
   randului - stinsa in mod obisnuit, turcoaz cand randul e aprins. */
/* Selectorul are patru clase, si nu de prisos: nexus scrie
   "body .sidebar .list-group-item .badge { color: var(--text) }", adica 0,3,1.
   Cu trei clase pierdeam culoarea - cifra ramanea alba, la fel de tare ca
   numele de langa ea. La 0,4,0 castigam, fara !important. */
.sidebar .card-sidebar .list-group-item .sidebar-menu-item-badge .badge,
.sidebar .card-sidebar .list-group-item > .badge {
    padding: 0;
    background: none;
    border-radius: 0;
    font-family: var(--font-body);
    font-size: .78rem;
    font-weight: 600;
    color: var(--text-muted);
}

.sidebar .card-sidebar .list-group-item:hover .badge,
.sidebar .card-sidebar .list-group-item.active .badge { color: inherit; }

.card-sidebar .list-group-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--primary, #06b6d4);
}

/* Ramane pe ecran la derulare, ca .sidebar-whmcs din cos.

   --bara-h il masoara scriptul din header.tpl. Rezerva de 131px nu e din burta:
   atat masoara antetul temei, masurat in pagina. E si sticky, deci fara
   decalajul asta capul barei ar intra sub el.

   max-height + overflow nu sunt de prisos: o bara mai inalta decat ecranul,
   lipita sus, si-ar tine capatul de jos permanent in afara ferestrei, fara nicio
   cale de a ajunge la el. Asa, se deruleaza in ea insasi doar cand chiar nu
   incape.

   SE LIPESTE INVELISUL, NU FIECARE BARA. Pe paginile cu doua bare - tichetul
   deschis are "Informații despre tichete" intr-una si "CC Recipient" plus
   "Asistență" in cealalta - amandoua sunt "sticky" cu acelasi "top". Doua
   elemente lipite la aceeasi inalțime nu se asteapta unul pe altul: la derulare,
   a doua urca peste prima si o acopera. Se vedea ca doua panouri suprapuse.

   Acum invelisul .lab404-bare (coloana din header.tpl) e cel lipit, iar barele
   dinauntru curg normal una sub alta. */
@media (min-width: 992px) {
    /* LATIMEA: 280px, ca panoul dinauntru sa iasa exact 250px - masura barei de
       pe paginile de produs, unde grila e scrisa "250px minmax(0, 1fr)". Aceea e
       bara dupa care e croita si asta, deci trebuie sa aiba aceeasi latime, nu
       doar acelasi vesmant.

       Bootstrap dadea "col-xl-3", adica un sfert din banda: 304px coloana si
       274px panou - cu 24px mai lat, si se vedea cand comparai paginile.

       280 = 250 + cei 15px de padding pe care Bootstrap ii pune pe fiecare
       latura a coloanei. Coloana de conținut de alaturi isi ia restul benzii:
       fara "flex: 1" ar fi ramas la 75% si ar fi lasat un gol intre ele. */
    .lab404-bare {
        /* 280 = 250 (panoul) + 30 (padding-ul coloanei), plus latimea barei de
           derulare, masurata in header.tpl si pusa in --bara-derulare. Cu
           "scrollbar-gutter: stable" spatiul e rezervat MEREU, nu doar cand se
           deruleaza, deci panoul are 250px pe toate paginile - si pe cele unde
           bara laterala e mai inalta decat ecranul, ca la un tichet deschis.

           Rezerva 0px: daca scriptul n-a apucat sa masoare, coloana rămâne 280 -
           adica exact cum era inainte, nu stricata. */
        flex: 0 0 calc(280px + var(--bara-derulare, 0px));
        max-width: calc(280px + var(--bara-derulare, 0px));
        scrollbar-gutter: stable;

        /* ALIGN-SELF: START, si de asta atarna daca bara chiar se lipeste.

           Randul lui Bootstrap e flex, iar implicit copiii se intind pe toata
           inalțimea lui. Deci coloana barei primea inalțimea coloanei de
           conținut - pe pagina de anunturi, 451px, exact cat conținutul - si un
           element lipit care are FIX inalțimea parintelui n-are pe unde sa
           alunece: pleaca odata cu el, ca si cum n-ar fi lipit deloc. Se vedea
           limpede alaturi de pagina de produs, unde bara ramane pe ecran.

           Cu "start", coloana isi ia doar inalțimea ei, iar restul randului
           rămâne spatiu de alunecare. */
        align-self: flex-start;
        position: sticky;
        top: calc(var(--bara-h, 131px) + 1rem);
        max-height: calc(100vh - var(--bara-h, 131px) - 2rem);
        overflow-y: auto;
    }

    /* Barele dinauntru nu mai au nevoie sa se lipeasca ele insele. Regula
       ramane scrisa, nu stearsa: .sidebar apare si in cos, unde nu exista
       invelisul asta. */
    .lab404-bare .sidebar {
        position: static;
        max-height: none;
        overflow: visible;
    }

    /* Distanta dintre cele doua bare. Inainte venea din faptul ca erau doua
       elemente lipite separat; acum sunt doua blocuri unul sub altul. */
    .lab404-bare .sidebar + .sidebar { margin-top: 1rem; }

    /* DAR NU SI CAND PRIMA E GOALA.

       header.tpl scrie amandoua invelisurile ori de cate ori MACAR UNA din bare
       are conținut. Pe formularul de tichet, bara principala n-are nimic - WHMCS
       nu-i da niciun panou acolo - deci iese <div class="sidebar"></div>, inalt
       de 0px, urmat de bara cu "Tichetele tale recente". Distanta de 1rem se
       aplica oricum, si primul panou pornea cu 16px mai jos decat pe restul
       paginilor: masurat 235px pe /submitticket.php fata de 219px peste tot.

       ":empty" NU MERGE: invelisul contine spatii albe intre etichete, iar
       pentru ":empty" si un spatiu inseamna conținut. ":not(:has(*))" intreaba
       daca are copii ELEMENT, si nu-i pasa de spatii - exact intrebarea corecta.

       Nu punem "display: none" pe bara goala: n-ar ajuta (selectorul "+" merge
       si peste elemente ascunse, deci distanta ar ramane) si e fix genul de
       schimbare care a stricat masuratoarea de latime a lui nexus la firimitura. */
    .lab404-bare .sidebar:not(:has(*)) + .sidebar { margin-top: 0; }

    /* "flex: 1 1 0", nu "1 1 auto": cu baza "auto" coloana se masoara intai
       dupa conținutul ei, iesea 1217px - cat toata banda - si cadea pe randul
       urmator, sub bara. Cu baza zero isi ia exact ce rămâne. */
    .lab404-bare + .primary-content {
        flex: 1 1 0;
        max-width: none;
    }

    .sidebar {
        position: sticky;
        top: calc(var(--bara-h, 131px) + 1rem);
        max-height: calc(100vh - var(--bara-h, 131px) - 2rem);
        overflow-y: auto;
    }
}

/* =====================================================================
   FUNDALUL FILELOR DE CONT
   ---------------------------------------------------------------------
   Aceeasi constructie ca pe lista de facturi: pete de lumina pe ::before, plasa
   de patratele pe ::after, amandoua pe #main-body - singurul element de latimea
   ferestrei intre antet si subsol.

   CUM SUNT ALESE PAGINILE: dupa panoul "Cont client" din bara laterala, nu dupa
   numele sablonului. WHMCS serveste /account/users, /account/paymentmethods si
   /account/contacts prin rutare, iar numele de sablon din spatele lor nu se
   poate citi din fisierele temei - ar fi fost o presupunere, iar o presupunere
   gresita ar fi lasat o fila fara fundal, in tacere. Panoul insa se vede in
   marcaj si apare exact pe filele astea.

   CULOAREA, in schimb, chiar depinde de pagina, deci merge pe data-tpl de pe
   <body>. Aici o presupunere gresita nu strica nimic: fila primeste nuanta
   implicita, nu ramane goala.

   DE CE NUANTE DIFERITE: cinci file din aceeasi zona, cu acelasi fundal, se
   confunda intre ele la o privire scurta. Culoarea e al doilea semn ca ai
   schimbat pagina, dupa titlu.
   ===================================================================== */
body {
    /* Implicit: albastru-turcoaz, ca restul zonei de client. */
    --sc-h1: 190;
    --sc-h2: 258;
    --sc-h3: 222;

    /* =====================================================================
       RETETA PETELOR DE FUNDAL - SINGURUL LOC DIN TEMA
       ---------------------------------------------------------------------
       Nuanta o da fiecare pagina: --sc-h1/2/3, declarate pe elementul paginii
       (in lab404-cont.css, lab404-complete.css si lab404-pg-pagina.css), sau
       --sec-h in pasii de cos, care isi calculeaza celelalte doua nuante din ea.
       Saturatia, luminozitatea, transparenta si pozitiile
       vin de aici, pentru TOATE paginile - logat sau nelogat, cos sau zona de
       client. Se schimba o valoare, se schimba tot site-ul.

       Erau cinci definitii separate, fiecare cu numerele ei: custom.css,
       lab404-cart-comun.css, lab404-cont.css, lab404-complete.css si
       lab404-pg-pagina.css. Ca sa aprind fundalul trebuia umblat in cinci locuri,
       iar prima data cand unul rămânea neschimbat paginile ar fi aratat diferit
       intre ele. Acum toate cinci citesc de aici, iar numerele lor au fost STERSE,
       nu suprascrise.

       DE CE SATURATIA SI LUMINOZITATEA RAMAN SUS, dar transparentele nu.
       Prima incercare pe pagina de domenii pastrase transparentele vechi
       (.14 / .11 / .13) si mutase doar nuanta in galben: a iesit maro spalacit. Un
       fundal aprins cere trei lucruri crescute odata - transparenta, luminozitatea si
       saturatia; cu oricare singur, nuantele calde ies murdare si cele reci ies sterse.
       Asa au ajuns transparentele la .34 / .28 / .30 - potrivit pe pagina de domenii,
       dar pus pe TOATE paginile s-a vazut ca e prea mult: petele acopereau conținutul,
       nu fundalul din spatele lui. Acum saturatia (88-92%) si luminozitatea (56-58%)
       rămân acolo unde erau - ele dau culoarea vie - si s-a tăiat doar din
       transparenta si din cat de departe se intinde fiecare pata. Culoarea rămâne
       aprinsa, cantitatea de culoare scade.
       ===================================================================== */
    /* 2026-08-25: transparentele crescute cu 20% (.27 -> .32, .13 -> .16,
       .21 -> .25), fiindca pe ecranele pe care se uita clientii petele abia se
       ghiceau. S-a umblat DOAR la transparenta, nu si la saturatie sau
       luminozitate: intrebarea a fost "mai multa culoare", nu "alta culoare", iar
       asa schimbarea se poate si intoarce dintr-un singur numar.
       Vezi mai jos de ce nu se merge pana la .34/.28/.30 - s-a incercat, si atunci
       petele acopereau continutul, nu fundalul din spatele lui. */
    --sc-s1: 92%; --sc-l1: 58%; --sc-a1: .32;
    --sc-s2: 90%; --sc-l2: 56%; --sc-a2: .16;
    --sc-s3: 88%; --sc-l3: 56%; --sc-a3: .25;

    /* DE CE PATA DIN STANGA E LA JUMATATE fata de celelalte doua (.13 vs .27/.21).
       Ea sta la 6% 50%, adica pe toata inalțimea marginii din stanga, exact unde trec
       bara laterala si inceputul fiecarui rand de text. Cu aceeasi transparenta ca
       pata din dreapta sus - care sta intr-un colț, peste antet - se citea de doua ori
       mai tare, fiindca acopera de doua ori mai mult conținut. Egale in numere nu
       inseamna egale pe ecran. */

    /* Cat de departe se stinge fiecare. Prima incercare aprinsa le lasase pana la
       72-76%: bine pe pagina de domenii, unde cardul e lat si ocupa mijlocul, dar pe
       paginile cu conținut ingust culoarea ajungea sub text. Tăiate mai devreme,
       lumina rămâne pe margini si mijlocul paginii se limpezeste. */
    --sc-stop1: 66%; --sc-stop2: 60%; --sc-stop3: 68%;

    /* Plasa: pe un fundal mai luminos, liniile de 4% alb dispar. */
    --sc-plasa: rgba(255, 255, 255, .07);
    --sc-plasa-fin: rgba(255, 255, 255, .03);
}

/* PE CALE acolo unde calea e de ajuns - /account/... si /user/... Calea e chiar
   ce a cerut omul in bara de adrese, deci nu e nimic de presupus.

   PE NUMELE SABLONULUI doar la cele trei de sub clientarea.php: acolo calea e
   aceeasi pentru toate (interogarea se taie, altfel ?contactid=3 ar fi alta
   pagina decat ?contactid=), iar ce le deosebeste chiar E sablonul. Si nici aici
   nu se presupune nimic: fisierele noastre se cheama chiar clientareadetails.tpl,
   clientareainvoices.tpl si clientareaemails.tpl, iar WHMCS le incarca dupa nume. */
body[data-cale^="/account/users"]          { --sc-h1: 265; --sc-h2: 240; --sc-h3: 215; }  /* violet */
body[data-cale^="/account/paymentmethods"] { --sc-h1: 35;  --sc-h2: 350; --sc-h3: 265; }  /* chihlimbar */
body[data-cale^="/account/contacts"]       { --sc-h1: 330; --sc-h2: 295; --sc-h3: 250; }  /* roz */

body[data-cale^="/user/profile"]  { --sc-h1: 172; --sc-h2: 200; --sc-h3: 155; }  /* verde-marin */
body[data-cale^="/user/password"] { --sc-h1: 250; --sc-h2: 285; --sc-h3: 215; }  /* indigo */
body[data-cale^="/user/security"] { --sc-h1: 15;  --sc-h2: 340; --sc-h3: 275; }  /* coral */

body[data-cale^="/submitticket.php"] { --sc-h1: 285; --sc-h2: 210; --sc-h3: 245; }  /* mov-albastru */

/* Lista de servicii. Indigo - aceleasi trei numere ca pagina de parola, care e
   deja indigo in tema; n-am inventat alta scara.

   PE SABLON, nu pe cale: clientarea.php?action=services are aceeasi cale ca
   restul paginilor de sub clientarea.php, iar interogarea se taie. Ce le
   deosebeste chiar e sablonul, si fisierul nostru se cheama chiar
   clientareaproducts.tpl. */
body[data-tpl="clientareaproducts"] { --sc-h1: 152; --sc-h2: 172; --sc-h3: 190; }  /* verde */

/* Pagina unui serviciu: verde-turcoaz. Inrudita cu lista de mai sus, dar nu
   aceeasi - doua pagini cu acelasi fundal se confunda la o privire scurta. */
body[data-tpl="clientareaproductdetails"] { --sc-h1: 176; --sc-h2: 190; --sc-h3: 205; }  /* verde-turcoaz */

/* Drumul de schimbare a pachetului tine violetul paginii de pachete (lab404-pg-pagina.css: 280/302/262), ca sa se vada ca e acelasi drum: alegi
   planul, confirmi, platesti. Pasul 1 isi ia fundalul din foaia aia; pasii
   urmatori nu o incarca, deci il iau de aici, din reteta comuna. */
body[data-tpl="upgrade"], body[data-tpl="upgradesummary"] { --sc-h1: 280; --sc-h2: 302; --sc-h3: 262; }  /* violet */

/* Renuntarea pastreaza nuanta paginii serviciului, de unde se vine: e aceeasi discutie despre acelasi serviciu, nu alta zona. */
body[data-tpl="clientareacancelrequest"] { --sc-h1: 176; --sc-h2: 190; --sc-h3: 205; }  /* verde-turcoaz */

body[data-tpl="clientareadetails"] { --sc-h1: 158; --sc-h2: 178; --sc-h3: 205; }  /* verde */
body[data-tpl="clientareainvoices"] { --sc-h1: 190; --sc-h2: 258; --sc-h3: 222; }  /* turcoaz-violet */
body[data-tpl="clientareaemails"]  { --sc-h1: 205; --sc-h2: 240; --sc-h3: 190; }  /* albastru */
body[data-tpl="supportticketslist"] { --sc-h1: 148; --sc-h2: 190; --sc-h3: 235; }  /* verde-turcoaz */
body[data-cale^="/viewticket.php"] { --sc-h1: 148; --sc-h2: 190; --sc-h3: 235; }  /* la fel ca lista din care vii */

/* Anunturile: singura banda de nuante ramasa nefolosita in tema - verde-lime
   spre albastru. Restul paginilor stau intre turcoaz, violet, roz si chihlimbar;
   asta se deosebeste din prima privire, fara sa iasa din familie. */
body[data-cale^="/announcements"] { --sc-h1: 95; --sc-h2: 160; --sc-h3: 210; }

/* Centrul de ajutor: chihlimbar spre turcoaz. Nuanta de start (42) e langa cea a
   modalitatilor de plata (35), dar celelalte doua o duc in alta parte, iar cele
   doua pagini nu se vad niciodata una langa alta. */
body[data-cale^="/knowledgebase"] { --sc-h1: 42; --sc-h2: 15; --sc-h3: 195; }

/* Starea serviciilor: albastru rece spre verde. Nuantele nu se ating de nici un
   alt triplet din lista - 225 nu e folosit nicaieri - iar pagina are oricum
   verdele ei in cutia verdictului, deci fundalul sta deoparte si nu concureaza
   cu singurul lucru colorat care chiar spune ceva. */
body[data-cale^="/serverstatus.php"] { --sc-h1: 225; --sc-h2: 195; --sc-h3: 155; }

/* Contact: violet spre roz. E ultima banda ramasa libera intre nuantele de pana
   acum, si e potrivita si ca inteles - pagina asta nu e despre un serviciu, ci
   despre a vorbi cu cineva. */
body[data-cale^="/contact.php"] { --sc-h1: 300; --sc-h2: 265; --sc-h3: 330; }

/* AICI A FOST o regula care facea cardul de pe pagina de anunturi semitransparent,
   ca scena sa se vada prin el. A plecat odata cu cardul: sablonul nostru
   (announcements.tpl) randeaza lista direct, fara cutie opaca peste tot ecranul,
   deci fundalul se vede singur - la fel ca pe facturi si pe tichete. */

/* =====================================================================
   FIRIMITURA ASCUNSA - peste tot, o singura regula
   ---------------------------------------------------------------------
   A FOST O LISTA DE PAGINI si a fost o greseala. Se adauga cate un selector
   de fiecare data cand ajungeam la o pagina noua, deci portalul avea, in orice
   moment, doua feluri de pagini: cele lucrate, fara banda, si cele nelucrate,
   cu ea. Masurat pe treisprezece pagini: continutul incepea la 219px pe cele
   fara banda si la 260px pe cele cu ea. 41px de saritura la fiecare trecere
   dintr-o categorie in alta - exact ce se simte ca "pagina asta e mai jos".

   Acum e ascunsa peste tot. Nu ca alegere de design luata din nou, ci fiindca a
   fost ceruta pe fiecare pagina la care am ajuns, una cate una; regula globala
   spune acelasi lucru, dar fara pagini ramase in urma.

   DACA VREI BANDA INAPOI PE O PAGINA: adauga un selector mai specific dupa
   regula asta, de forma
     body[data-cale^="/pagina.php"] .master-breadcrumb { visibility: visible; height: auto; ... }
   dar tine minte ca aduce inapoi si saritura de 41px pe pagina aia.

   NU CU "display: none", si asta a fost un defect adevarat, nu o preferinta.

   scripts.min.js al temei nexus face, la incarcare:

     jQuery(".container").width() <= 720
       && jQuery(".card-sidebar").find(".collapsable-card-body").hide()

   adica "daca pagina e ingusta, strange panourile din bara laterala". Numai ca
   ".container" prinde TOATE invelisurile din pagina, iar jQuery ii ia latimea
   PRIMULUI - care e chiar cel dinauntrul firimiturii. Cu firimitura pe
   "display: none", jQuery masoara 0, iar 0 e mai mic decat 720: pe orice pagina
   unde ascundeam banda, bara laterala se deschidea inchisa, si pe ecran lat.

   Masurat in pagina, cu marcajul si scripturile adevarate:
     display: none                    -> .container 0px     -> panouri inchise
     visibility: hidden + height: 0   -> .container 1110px  -> panouri deschise

   "visibility: hidden" e la fel de bun ca "display: none" pentru ce ne trebuie -
   scoate banda si din ordinea de tabulare, si de la cititoarele de ecran - dar
   ii lasa cutiei dinauntru latimea ei adevarata. Restul declaratiilor sting
   spatiul pe verticala, ca banda sa nu lase o dunga goala.

   Nu pune "display: block" pe undeva mai jos daca vrei banda inapoi - ar readuce
   si problema de mai sus pe toate celelalte pagini. */
.master-breadcrumb {
    visibility: hidden;
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
}

#main-body:has(.card-sidebar[menuitemname="Account"]),
#main-body:has(.fct-zona),
#main-body:has(.srv-zona),
#main-body:has(.prd-zona),
#main-body:has(.upg-zona),
#main-body:has(.anul-zona),
body[data-cale^="/user/"] #main-body,
body[data-cale^="/submitticket.php"] #main-body,
body[data-cale^="/viewticket.php"] #main-body,
body[data-cale^="/announcements"] #main-body,
body[data-cale^="/knowledgebase"] #main-body {
    position: relative;
    /* Fara isolation, petele cu z-index negativ ar cadea in spatele fundalului
       opac al paginii si nu s-ar vedea deloc. */
    isolation: isolate;

    /* Randul asta NU e cel care picteaza fundalul: mai jos in fisier exista
       "body section#main-body { background-color: var(--bg-inverted) !important }",
       si un !important bate orice specificitate. Se nimereste ca --bg-inverted
       sa fie chiar #030712, deci rezultatul e acelasi - dar sa nu creada nimeni
       ca de aici vine. Ramane scris ca sa fie corect si daca acel !important
       dispare vreodata. */
    background-color: #030712;
}

#main-body:has(.card-sidebar[menuitemname="Account"])::before,
#main-body:has(.fct-zona)::before,
#main-body:has(.srv-zona)::before,
#main-body:has(.prd-zona)::before,
#main-body:has(.upg-zona)::before,
#main-body:has(.anul-zona)::before,
body[data-cale^="/user/"] #main-body::before,
body[data-cale^="/submitticket.php"] #main-body::before,
body[data-cale^="/viewticket.php"] #main-body::before,
body[data-cale^="/announcements"] #main-body::before,
body[data-cale^="/knowledgebase"] #main-body::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background-image:
        radial-gradient(74vw 64vh at 82% 6%, hsl(var(--sc-h1) var(--sc-s1) var(--sc-l1) / var(--sc-a1)), transparent var(--sc-stop1)),
        radial-gradient(62vw 58vh at 6% 50%, hsl(var(--sc-h2) var(--sc-s2) var(--sc-l2) / var(--sc-a2)), transparent var(--sc-stop2)),
        radial-gradient(96vw 58vh at 50% 104%, hsl(var(--sc-h3) var(--sc-s3) var(--sc-l3) / var(--sc-a3)), transparent var(--sc-stop3));
}

#main-body:has(.card-sidebar[menuitemname="Account"])::after,
#main-body:has(.fct-zona)::after,
#main-body:has(.srv-zona)::after,
#main-body:has(.prd-zona)::after,
#main-body:has(.upg-zona)::after,
#main-body:has(.anul-zona)::after,
body[data-cale^="/user/"] #main-body::after,
body[data-cale^="/submitticket.php"] #main-body::after,
body[data-cale^="/viewticket.php"] #main-body::after,
body[data-cale^="/announcements"] #main-body::after,
body[data-cale^="/knowledgebase"] #main-body::after {
    content: '';
    position: absolute;
    inset: 0 0 40% 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(var(--sc-plasa) 1px, transparent 1px),
        linear-gradient(90deg, var(--sc-plasa) 1px, transparent 1px),
        linear-gradient(var(--sc-plasa-fin) 1px, transparent 1px),
        linear-gradient(90deg, var(--sc-plasa-fin) 1px, transparent 1px);
    background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px;
    mask-image: linear-gradient(#000 0%, #000 26%, transparent 100%);
    -webkit-mask-image: linear-gradient(#000 0%, #000 26%, transparent 100%);
}

/* Firimitura filelor de cont e in regula unica de mai sus, impreuna cu
   celelalte. Rationamentul e acelasi ca pe lista de facturi: titlul paginii si
   bara din stanga spun deja unde suntem. */


/* Footerul nu se mai stilizeaza de aici: templates/lab-404/footer.tpl randeaza
   footerul de pe lab-404.ro, cu stilul lui in css/site-chrome.css. Regulile
   vechi pe "footer.footer" au fost sterse, nu comentate - marcajul nu mai are
   clasa aia, deci nu mai aveau ce sa prinda. */


/* =====================================================================
   15. DETALII
   ===================================================================== */

/* Bara de derulare pe ton cu tema */
* {
    scrollbar-color: var(--surface-accented) var(--bg);
}

::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: var(--bg);
}

::-webkit-scrollbar-thumb {
    background: var(--surface-accented);
    border: 3px solid var(--bg);
    border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--neutral-700);
}

/* Selectia de text pe cyan-ul brandului */
::selection {
    background: rgba(6, 182, 212, .30);
    color: var(--text);
}

/* Formularele browserului sa deseneze controalele native pe intuneric */
:root {
    color-scheme: dark;
}


/* =====================================================================
   TOOLTIPURILE NU IAU CURSORUL
   ---------------------------------------------------------------------
   Nexus agata un tooltip Bootstrap de fiecare nume de categorie din bara
   Centrului de ajutor: <div class="truncate" title="E-mail"
   data-toggle="tooltip" data-placement="bottom">. E gandit pentru numele lungi,
   taiate cu trei puncte.

   Numai ca in tema asta ".tooltip" are "pointer-events: auto", desi Bootstrap il
   lasa "none". Iar tooltipul se aseaza SUB cursor: treci peste categorie, apare,
   ii fura cursorul, deci cursorul "iese" de pe legatura, deci tooltipul dispare,
   deci cursorul e iar pe legatura... Sageata clipoceste, si clicul cade pe
   tooltip, nu pe legatura - pe unele pozitii mergea, pe altele nu.

   Se vedea numai la categorii fiindca doar ele au clasa "truncate"; randurile
   din "Asistență" n-au niciun tooltip.

   Un tooltip e un desen care explica ceva, nu o suprafata pe care se apasa. */
.tooltip { pointer-events: none; }