/* =====================================================================
   Lab-404 — lista de facturi (clientarea.php?action=invoices)
   ---------------------------------------------------------------------
   Designul d1: bara laterala dispare, iar lista primeste toata latimea.

   DE CE: panourile din stanga - "0 facturi scadente", "Situația Financiară",
   "Financiar" - ocupau un sfert din ecran ca sa spuna trei cifre, dintre care
   doua erau zero.

   PAGINA A RAMAS LA DOUA LUCRURI: titlul si cautarea. Filtrele de stare
   (Achitată, Proformă, Anulată, Stornată) si "Ofertele mele" au fost scoase la
   cerere, fiindca nu se folosesc. Cautarea acopera aceeasi nevoie - gasirea unei
   facturi anume - fara sase butoane deasupra tabelului.

   Foaia se incarca din clientareainvoices.tpl si se sprijina pe tokenii din
   custom.css, care e deja incarcat pe toata zona de client.
   ===================================================================== */

/* Firimitura nu apare pe pagina asta. Titlul de dedesubt spune acelasi lucru
   ("Facturile mele"), iar deasupra lui e deja meniul cu Servicii, Domenii,
   Asistență - deci banda repeta o navigatie pe care omul o are la doi centimetri
   mai sus.

   REGULA E ACUM IN custom.css, langa celelalte pagini care o ascund. A plecat de
   aici fiindca felul in care se ascunde nu mai e "display: none" - vezi
   comentariul de acolo - iar patru locuri care fac acelasi lucru in patru feluri
   e exact cum se strecoara greselile inapoi. Selectorul de acolo include si
   ":has(~ #main-body .fct-zona)", deci pagina asta e acoperita mai departe. */


/* FUNDALUL NU MAI E AICI. A urcat in custom.css, in sectiunea 14, unde e o
   singura definitie pentru toate paginile care il folosesc - filele contului,
   paginile de utilizator, lista de facturi si istoricul mesajelor. Selectorul
   de acolo include si "#main-body:has(.fct-zona)", deci paginile astea doua il
   primesc mai departe.

   DE CE A PLECAT: aici culorile erau scrise fix, deci facturile si mesajele
   ieseau identice, desi fiecare fila are nuanta ei. Acum vin din --sc-h1/2/3,
   care se schimba dupa pagina. Doua definitii ale aceluiasi fundal ar fi trebuit
   oricum tinute la fel de mana. */


/* =====================================================================
   MARGINEA DIN STANGA - una singura, pentru tot
   ---------------------------------------------------------------------
   Titlul si prima coloana a tabelului incep din acelasi loc. Pana acum nu
   incepeau: nexus scrie ".table-list td{text-align:center}" si
   ".table-list thead th{...text-align:center}", deci tot tabelul e CENTRAT, iar
   "FACTURA #" pica cu vreo 45px mai la dreapta decat titlul.

   Nu am impins titlul la dreapta cu o valoare fixa, ca sa-l potrivesc: pozitia
   lui "FACTURA #" se muta singura cand se schimba conținutul coloanei, fiindca
   o coloana centrata sta unde o aseaza cel mai lung text din ea. Ar fi nimerit
   azi si ar fi iesit stramb la prima factura cu numar mai lung.

   Prima coloana trece deci pe stanga - are oricum un capat stabil, ca orice
   coloana de identificatori - si primeste acelasi jgheab ca titlul de deasupra.
   ===================================================================== */
.fct-zona { --fct-jgheab: 1rem; }

/* Stanga: titlul incepe de unde incepe si "FACTURA #".
   Dreapta: cautarea se opreste unde se opreste si coloana de acțiuni. */
.fct-cap { padding-left: var(--fct-jgheab); padding-right: var(--fct-jgheab); }

/* 0,3,1 - bate centrarea din tema, care e 0,2,0. */
.fct-tabel.table-list thead th:first-child,
.fct-tabel.table-list tbody td:first-child { text-align: left; }


/* --- Capul paginii: titlul si casuta de cautare pe acelasi rand ---
   Cautarea o deseneaza DataTables si o aseaza in .listtable; o mutam langa
   titlu, ca sa nu pluteasca singura deasupra tabelului. */
.fct-cap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.4rem;
}

/* Aceleasi valori ca titlul de pe /account/users, unde WHMCS randeaza un <h3>
   neatins de noi: 22px, greutate 500, interlinie 1.2 - masurate acolo, nu alese.

   Se scriu aici pentru ca elementul e un <h1>, nu un <h3>: regula temei
   (".primary-content h3 { font-size: 22px }") nu-l prinde, deci nu are de unde
   sa le mosteneasca. E singurul loc din tema unde valorile astea sunt copiate,
   si de asta scrie de unde vin. */
.fct-cap h1 {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--text);
}

/* Subtitlul. Acelasi font si aceeasi culoare ca textul secundar din restul
   paginilor - var(--font-body) si var(--text-lifted) sunt tokenii temei, luati
   din custom.css, nu valori scrise de mana aici. Asa, daca paleta se schimba
   vreodata, randul asta se schimba odata cu ea, nu ramane in urma. */
.fct-cap .fct-titlu p {
    margin: .4rem 0 0;
    max-width: 52ch;
    font-family: var(--font-body);
    font-size: .95rem;
    line-height: 1.55;
    color: var(--text-lifted);
}


/* =====================================================================
   TABELUL
   ===================================================================== */
/* Fara chenar in jurul tabelului, doar linii intre randuri.

   Chenarul vine din tema: .table-list si invelisul .table-container primesc
   contur si colturi rotunjite. Pe o lista lunga, cutia din jur nu ajuta cu
   nimic - ochiul are nevoie sa deosebeasca randurile intre ele, nu tabelul de
   pagina. */
.fct-zona .table-container,
.fct-zona .table-responsive {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding: 0;
}

/* Chenarul din jurul tabelului vine din theme.min.css:

     .dataTables_wrapper table.table-list { border-radius: ...; border: 1px solid #ddd }

   Specificitate 0,2,1. O regula scrisa ".fct-tabel.table-list" are 0,2,0 si
   pierde - de aceea chenarul ramanea desi il scriam pe zero.

   Selectorul de mai jos il repeta pe al lor si mai adauga clasa noastra: 0,3,1,
   deci castiga curat, fara !important. NU stergem regula din theme.min.css:
   acela e fisierul temei nexus, pe care WHMCS il rescrie la fiecare actualizare -
   modificarea s-ar pierde in tacere. */
.dataTables_wrapper table.table-list.fct-tabel {
    width: 100%;
    margin-bottom: 0;
    font-size: .88rem;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.fct-tabel.table-list tbody,
.fct-tabel.table-list thead,
.fct-tabel.table-list tr { border: 0; }

.fct-tabel.table-list td,
.fct-tabel.table-list th { border-left: 0; border-right: 0; }

.fct-tabel.table-list thead th {
    padding: .7rem 1rem;
    background: transparent;
    border-bottom: 1px solid var(--border-muted);
    border-top: 0;
    font-family: var(--font-heading);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.fct-tabel.table-list tbody td {
    padding: 1rem;
    border-top: 0;
    border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, .06));
    color: var(--text-lifted);
    vertical-align: middle;
}

/* Randul e clicabil (WHMCS ii pune onclick), deci trebuie sa se si vada ca e. */
.fct-tabel.table-list tbody tr { cursor: pointer; }
.fct-tabel.table-list tbody tr:hover td { background: rgba(255, 255, 255, .02); }

.fct-tabel .fct-nr { color: var(--text); font-weight: 500; font-family: var(--font-mono, monospace); }

/* --- Coloana de sume ---
   Aliniata la DREAPTA, nu centrata: cele doua randuri - suma si echivalentul in
   lei - au lungimi diferite, iar centrate isi pierd punctele zecimale unul fata
   de altul si arata strambe. Aliniate la dreapta, cifrele cad in coloana si se
   compara din ochi de la un rand la altul.

   Selectorul repeta ".table-list", fiindca tema centreaza celulele acestui tabel
   cu aceeasi specificitate; la egalitate castiga foaia asta, incarcata dupa. */
.fct-tabel.table-list td.fct-sume,
.fct-tabel.table-list th.fct-sume { text-align: right; }

.fct-tabel .fct-sume b {
    display: block;
    font-family: var(--font-mono, monospace);
    font-size: .95rem;
    font-weight: 500;
    color: var(--text);
    line-height: 1.3;
}

.fct-tabel .fct-sume i {
    display: block;
    font-style: normal;
    font-family: var(--font-mono, monospace);
    font-size: .72rem;
    color: var(--text-muted);
    line-height: 1.3;
}

/* Pastila de stare. WHMCS pune .status si .status-<clasa>; noi doar le imbracam,
   ca sa apara oricum si o stare adaugata maine, doar fara culoare proprie. */
.fct-tabel .status {
    display: inline-flex;
    align-items: center;
    padding: .28rem .7rem;
    border-radius: 999px;
    background: rgba(148, 163, 184, .16);
    color: var(--text-lifted);
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.fct-tabel .status-paid { background: rgba(34, 197, 94, .16); color: #4ade80; }
.fct-tabel .status-unpaid,
.fct-tabel .status-draft { background: rgba(251, 191, 36, .16); color: #fcd34d; }
.fct-tabel .status-cancelled,
.fct-tabel .status-refunded { background: rgba(148, 163, 184, .16); color: #94a3b8; }
.fct-tabel .status-collections { background: rgba(220, 38, 38, .18); color: #f87171; }


/* =====================================================================
   COLOANA DE ACTIUNI
   ---------------------------------------------------------------------
   Butoanele au acelasi gabarit, si nu din estetica: unul scrie "Vezi",
   celalalt "Plătește", iar daca fiecare si-ar lua latimea din text, coloana
   ar sari de la un rand la altul. Latimea e masurata dupa cuvantul cel mai
   lung care poate aparea acolo.

   Inalțimea e la fel fixa. Fara ea, butonul cu chenar si cel cu gradient ies
   diferite cu 1-2px - din chenar si din inalțimea randului de text - iar la
   capatul fiecarui rand se vede o strambatura.
   ===================================================================== */
/* 0,4,1, ca sa bata centrarea din nexus (".table-list td{text-align:center}").
   Aici a fost o scapare: coloana de sume avea deja regula ridicata la fel, dar
   asta ramasese la 0,2,0 si pierdea. Se vedea doar cand un rand avea butonul de
   plata: fiind mai lat decat "Vezi factura", ieșea si mai in stanga, si mai in
   dreapta - deci descarcarea de langa el nu mai statea pe aceeasi linie
   verticala cu descarcarile de pe randurile de deasupra. */
.fct-tabel.table-list tbody td.fct-act { text-align: right; white-space: nowrap; }

.fct-grup {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: .4rem;
}

.fct-btn,
.fct-btn-plata {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-height: 34px;
    /* 8.5rem = 136px. "Plătește acum" cere 128px, "Vezi factura" 113px - masurat.
       Cu o latime minima peste amandoua, ies identice, deci si capatul din stanga
       al butonului principal cade pe aceeasi linie de la un rand la altul, nu
       doar cel din dreapta. Daca vreo traducere e mai lunga, butonul creste peste
       minim si cele doua se despart la stanga - dar descarcarea ramane aliniata,
       fiindca de asta se ocupa alinierea la dreapta a celulei, nu latimea asta. */
    min-width: 8.5rem;
    padding: .45rem .85rem;
    border-radius: 8px;
    /* font-family scris, nu mostenit: pe facturi butoanele sunt <a> si iau
       fontul paginii, dar pe istoricul mesajelor sunt <button>, iar butoanele nu
       mostenesc fontul - browserul le da al lui. Fara randul asta, aceleasi
       butoane ies cu alte litere de la o pagina la alta. */
    font-family: var(--font-body);
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
}

.fct-btn {
    border: 1px solid var(--border-muted);
    background: transparent;
    color: var(--text-lifted);
    transition: border-color .2s, color .2s;
}
.fct-btn:hover { border-color: var(--border-lifted); color: var(--text); text-decoration: none; }

.fct-btn-plata {
    /* Fara chenar deloc.
       Aici a stat o vreme "border: 1px solid transparent", pus ca butonul sa
       ramana la aceeasi inalțime cu cel de langa el, care are chenar. Nu mai e
       nevoie: min-height: 34px de mai sus, plus box-sizing: border-box de la
       Bootstrap, dau 34px la amandoua, cu chenar sau fara. Masurat: 34.00px in
       ambele cazuri.
       Iar un chenar transparent peste un fundal in degrade nu e chiar invizibil
       - fundalul se picteaza si sub chenar, asa ca la margini ramanea un fir de
       1px de culoare curata, turcoaz intr-o parte si violet in cealalta. */
    border: 0;
    background: linear-gradient(135deg, #06b6d4 0%, #8b5cf6 100%);
    color: #fff;
}
.fct-btn-plata:hover { color: #fff; text-decoration: none; filter: brightness(1.08); }

/* Butonul cu doar iconița n-are text de incaput, deci nu-i trebuie latimea. */
.fct-btn-icoana { min-width: 0; padding-inline: .6rem; }

/* Marimea iconițelor, pe AMANDOUA felurile de buton. Scrisa doar pe unul, SVG-ul
   celuilalt rămâne la marimea lui naturala si ridica butonul cu 6px. */
.fct-btn svg,
.fct-btn-plata svg { width: 14px; height: 14px; flex: 0 0 auto; }


/* =====================================================================
   PIESELE DATATABLES
   ---------------------------------------------------------------------
   Cautarea, numarul de randuri pe pagina si paginarea sunt desenate de
   DataTables. Le mutam si le imbracam, nu le inlocuim.
   ===================================================================== */

/* --- Casuta de cautare, mutata langa titlu ---
   Invelisul si lupa sunt puse din sablon (vezi clientareainvoices.tpl), ca sa nu
   depindem de marcajul dinauntrul .dataTables_filter, care e al DataTables si se
   poate schimba de la o versiune la alta. */
.fct-cauta { position: relative; float: none; margin: 0; width: auto; }

.fct-cauta-lupa {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--text-muted);
    pointer-events: none;
    z-index: 2;
}

.fct-cauta label { margin: 0; display: block; }

.fct-zona .listtable { display: flex; align-items: center; justify-content: flex-end; }
.fct-zona .dataTables_info { display: none; }

.fct-zona .dataTables_paginate { margin-top: 1.2rem; }
.fct-zona .dataTables_length { margin-top: 1.2rem; }

@media (max-width: 700px) {
    .fct-zona .listtable { justify-content: stretch; }
    .fct-zona .dataTables_filter label .form-control { width: 100%; }
}


/* =====================================================================
   RANDUL DE AJUTOR, IN JOSUL LISTEI
   ---------------------------------------------------------------------
   Aceeasi constructie ca .bon-ajutor de pe pagina de comanda finalizata: o
   propozitie mica, centrata, cu legatura in ea.

   Aici a fost intai un bloc cu titlu, paragraf si buton separat. Cantarea cat
   tabelul de deasupra - iar randul asta e o portita pentru cine s-a
   impotmolit, nu a doua jumatate a paginii.

   Latimea marginita nu e de forma: un rand centrat care se intinde pe toata
   pagina se citeste greu, fiindca ochiul pierde inceputul randului urmator.
   ===================================================================== */
.fct-ajutor {
    width: min(560px, 100% - 2rem);
    margin: 2.4rem auto 0;
    text-align: center;
    font-family: var(--font-body);
    font-size: .86rem;
    line-height: 1.7;
    color: var(--text-muted);
}

/* Doua randuri: intrebarea sus, raspunsul dedesubt. display: block pe span, nu
   un <br> in sablon - o taietura de rand scrisa in marcaj ramane acolo si pe
   ecranul ingust, unde fraza s-ar rupe oricum, si atunci ies patru randuri. */
.fct-ajutor span { display: block; }

.fct-ajutor a { color: var(--primary-light, #22d3ee); text-decoration: none; }
.fct-ajutor a:hover { text-decoration: underline; }

/* =====================================================================
   LISTA DE TICHETE (supporttickets.php)
   ---------------------------------------------------------------------
   Imparte tot ce e mai sus: capul paginii, cautarea, tabelul fara chenar.
   Aici raman doar lucrurile care tin de tichete.

   Pagina PASTREAZA bara laterala, spre deosebire de facturi - de acolo se
   filtreaza dupa stare, iar la un client cu multe tichete chiar ajuta.
   ===================================================================== */

/* Departamentul si subiectul sunt text, deci se citesc de la stanga. Nexus
   centreaza tot tabelul (".table-list td { text-align: center }", 0,2,0), asa ca
   selectorul repeta clasa lor si o adauga pe a noastra: 0,3,1. */
.fct-tabel-tichete.table-list tbody td.fct-dept,
.fct-tabel-tichete.table-list tbody td.fct-subiect,
.fct-tabel-tichete.table-list thead th:nth-child(2) { text-align: left; }

.fct-tabel-tichete .fct-dept { color: var(--text-muted); font-size: .82rem; }

/* Subiectul e ce cauta ochiul, deci el e randul de sus si el are culoarea
   textului principal. Numarul tichetului trece dedesubt, mic si monospatiat, ca
   numarul facturii din lista cealalta: e un identificator, se cauta cu degetul
   pe ecran, nu se citeste ca o propozitie. */
.fct-tabel-tichete .fct-subiect a {
    display: block;
    color: inherit;
    text-decoration: none;
}

.fct-tabel-tichete .ticket-subject {
    display: block;
    font-size: .9rem;
    color: var(--text);
    line-height: 1.35;
}

.fct-tabel-tichete .ticket-number {
    display: block;
    margin-top: .15rem;
    font-family: var(--font-mono, monospace);
    font-size: .72rem;
    color: var(--text-muted);
}

/* Tichet cu raspuns necitit. Ingrosat, nu colorat: culoarea o poarta deja
   pastila de stare de alaturi, iar doua semnale pentru acelasi lucru se bat
   cap in cap. */
.fct-tabel-tichete .ticket-subject.unread { font-weight: 600; }

.fct-tabel-tichete tbody tr:hover .ticket-subject { color: var(--primary-accented, #67e8f9); }

.fct-tabel-tichete .fct-cand { color: var(--text-muted); font-size: .82rem; white-space: nowrap; }

/* Culorile starilor. Numele claselor nu sunt ghicite - sunt cele pe care le
   cunoaste chiar tema nexus (grep dupa "status-" in theme.min.css):
   open, answered, customer-reply, closed, onhold, inprogress.

   Logica din spatele culorii e "de cine tine acum": verde cand mingea e la noi,
   chihlimbar cand e la client, stins cand nu mai e la nimeni. */
.fct-tabel .status-open { background: rgba(34, 197, 94, .16); color: #4ade80; }
.fct-tabel .status-answered { background: rgba(6, 182, 212, .16); color: #22d3ee; }
.fct-tabel .status-customer-reply { background: rgba(251, 191, 36, .16); color: #fcd34d; }
.fct-tabel .status-inprogress { background: rgba(139, 92, 246, .18); color: #a78bfa; }
.fct-tabel .status-onhold { background: rgba(148, 163, 184, .16); color: #cbd5e1; }
.fct-tabel .status-closed { background: rgba(148, 163, 184, .12); color: #94a3b8; }

/* Latimile coloanelor. Fara ele, DataTables imparte spatiul dupa cat de lat e
   conținutul fiecarei coloane, iar "General Enquiries" - acelasi text pe toate
   randurile - ajunge sa ceara mai mult decat subiectele, care se rup pe trei
   randuri. Subiectul e insa singurul lucru dupa care omul isi recunoaste
   tichetul, deci el ia partea leului.

   PIXELI, DESI AS FI VRUT PROCENTE. DataTables citeste latimea pe care o gaseste
   pe <th> si o rescrie ca stil in linie - dar pierde unitatea pe drum: cu "45%"
   scris aici, in pagina ajungea "width: 45px". Masurat: coloanele ieseau toate
   in jurul a 24%, adica exact ce incercam sa schimbam.

   Cu pixeli, cifra trece intreaga. Si nu ingheata tabelul: latimile astea sunt
   indicii, nu porunci - tabelul e pe "width: 100%", iar spatiul ramas se imparte
   intre coloane proportional, deci raportul se pastreaza si pe ecran lat. */
.fct-tabel-tichete.table-list thead th:nth-child(1) { width: 120px; }
.fct-tabel-tichete.table-list thead th:nth-child(2) { width: 280px; }
.fct-tabel-tichete.table-list thead th:nth-child(3) { width: 90px; }
.fct-tabel-tichete.table-list thead th:nth-child(4) { width: 130px; }


/* =====================================================================
   LISTA DE ANUNTURI (/announcements)
   ---------------------------------------------------------------------
   Al treilea consumator al foii, dupa facturi si tichete. Capul paginii si
   fundalul vin de mai sus; aici raman doar randurile.

   NU E TABEL: anuntul n-are coloane de comparat, ci o data, un titlu si un
   inceput de text. Randul e o cutie, nu o linie de tabel.
   ===================================================================== */
.lst-lista { display: block; }

/* Randul intreg e apasabil, nu doar titlul: legatura din titlu isi intinde o
   suprafata invizibila peste tot randul (vezi .lst-titlu a::after), iar randul
   ii da sistemul de coordonate. */
.lst-rand {
    position: relative;
    padding: 1.1rem 1rem;
    border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, .06));
    transition: background-color .18s cubic-bezier(.22, 1, .36, 1);
}

.lst-rand:last-child { border-bottom: 0; }
.lst-rand:hover { background: rgba(255, 255, 255, .02); }

/* DATA RANDULUI.

   Era var(--text-muted) - #64748b - la .72rem, cu font monospatiat. Masurat pe
   fundalul paginii (#030712) da 4.23:1, adica sub pragul de 4.5 pe care il cere
   WCAG pentru text mic. Se vedea ca o dunga cenusie, nu ca o data.

   Nu tokenul a fost schimbat: --text-muted e bun acolo unde e folosit la 14px si
   mai mult. Aici problema e combinatia - text mic, font subtire, litere
   departate. Culoarea urca la 6.1:1 si masura la .75rem, si rămâne totusi cu
   mult sub titlu (19:1), deci ordinea din rand nu se schimba. */
.lst-meta {
    display: block;
    font-family: var(--font-mono, monospace);
    font-size: .75rem;
    letter-spacing: .02em;
    color: #818fa3;
}

/* Titlul e textul randului, nu o legatura colorata. Turcoazul ramane pentru
   trecerea cu mausul, unde chiar spune ceva: "asta se deschide". */
.lst-titlu {
    margin: .3rem 0 0;
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--text);
}

.lst-titlu a {
    color: inherit;
    text-decoration: none;
}

/* Suprafata apasabila, intinsa peste tot randul. */
.lst-titlu a::after {
    content: '';
    position: absolute;
    inset: 0;
}

.lst-rand:hover .lst-titlu { color: var(--primary-accented, #67e8f9); }

/* Doua randuri de rezumat, taiate din CSS. Nu din numarul de caractere: acolo
   taietura cade la mijlocul unui cuvant si se vede, pe cand asta se opreste
   unde se termina randul, oricat de lata ar fi coloana. */
.lst-extras {
    margin: .35rem 0 0;
    max-width: 78ch;
    font-family: var(--font-body);
    font-size: .85rem;
    line-height: 1.6;
    color: var(--text-lifted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Legatura de editare, vizibila doar administratorului conectat. "z-index" o
   ridica peste suprafata apasabila a titlului, altfel n-ar mai putea fi apasata. */
.lst-editare {
    position: relative;
    z-index: 1;
    display: inline-block;
    margin-top: .5rem;
    font-size: .78rem;
    color: var(--text-muted);
    text-decoration: none;
}

.lst-editare:hover { color: var(--primary-accented, #67e8f9); }

.lst-gol {
    padding: 2.5rem 1rem;
    text-align: center;
    font-family: var(--font-body);
    font-size: .9rem;
    color: var(--text-muted);
}

.lst-paginare { margin-top: 1.4rem; }

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

/* Butonul "Citește mai mult". Imprumuta .fct-btn de la lista de facturi, deci
   arata la fel ca "Vezi factura" - acelasi chenar, aceeasi inalțime.

   "position: relative" si "z-index" il ridica peste suprafata apasabila intinsa
   de titlu; altfel randul ar fi inghitit clicul. Duce oricum in acelasi loc, dar
   un buton care nu se poate apasa singur e un buton stricat.

   "min-width" de la .fct-btn se anuleaza: acolo era ca doua butoane alaturate sa
   iasa la fel de late intr-o coloana de tabel. Aici e singur si trebuie sa fie
   cat textul lui. */
.lst-mai-mult {
    position: relative;
    z-index: 1;
    min-width: 0;
    margin-top: .75rem;
}

.lst-mai-mult svg { width: 15px; height: 15px; }


/* =====================================================================
   CENTRUL DE AJUTOR (/knowledgebase)
   ---------------------------------------------------------------------
   A patra pagina pe aceeasi foaie. Foloseste capul de pagina "fct-" si randurile
   "lst-"; aici raman doar titlurile de sectiune, numarul de articole si casuta
   de cautare care e un formular adevarat, nu una desenata de DataTables.
   ===================================================================== */

/* Titlul unei sectiuni din pagina - "Categorii", "Cele mai populare articole".
   E mai mic decat titlul paginii si mai mare decat un rand: acelasi tratament ca
   antetul unui tabel, ca sa se lege de celelalte liste. */
/* CULOAREA: aceeasi poveste ca la .lst-meta. Era var(--text-muted), 4.23:1 pe
   fundalul paginii - iar aici textul e si mic, si cu majuscule, si cu literele
   departate, adica exact combinatia care se citeste cel mai greu. Un titlu de
   sectiune care nu se vede nu mai imparte nimic. */
.lst-sectiune {
    margin: 1.8rem 0 .2rem;
    padding: 0 1rem .7rem;
    border-bottom: 1px solid var(--border-muted);
    font-family: var(--font-heading);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #9aa8bd;
}

.lst-sectiune:first-of-type { margin-top: 0; }

/* --- CATEGORIILE, IN GRILA ---
   Ca randuri pe toata latimea, o categorie cu doua cuvinte lasa un rand aproape
   gol; iar categoriile sunt navigatie, nu conținut de citit - le cauti din ochi,
   nu le parcurgi.

   "auto-fit" cu podea de 220px: intra cate incap, cel putin trei pe banda
   noastra de 1217px, si se aseaza singure pe randul urmator cand sunt mai multe.
   Nu scriem "3" nicaieri - pe ecran ingust intra doua sau una, fara alt prag de
   scris de mana. */
.lst-grila {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: .75rem;
    margin-bottom: .5rem;
}

.lst-cat {
    position: relative;
    padding: 1rem 1rem 2.6rem;
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, .06));
    border-radius: 12px;
    background: rgba(255, 255, 255, .015);
    transition: background-color .18s cubic-bezier(.22, 1, .36, 1),
                border-color .18s cubic-bezier(.22, 1, .36, 1);
}

.lst-cat:hover {
    background: rgba(255, 255, 255, .035);
    border-color: rgba(6, 182, 212, .35);
}

.lst-cat:hover .lst-titlu { color: var(--primary-accented, #67e8f9); }

/* Numarul de articole sta jos-stanga, nu sus-dreapta: sus s-ar bate cu titlul
   pe cuvintele lungi, iar jos are randul lui. */
.lst-cat .lst-numar {
    position: absolute;
    top: auto;
    right: auto;
    bottom: 1rem;
    left: 1rem;
}

/* In cartonas descrierea are loc de doua randuri, ca la articole. */
.lst-cat .lst-extras { -webkit-line-clamp: 2; }

.lst-numar {
    position: absolute;
    top: 1.1rem;
    right: 1rem;
    padding: .2rem .6rem;
    border-radius: 999px;
    background: rgba(148, 163, 184, .14);
    font-family: var(--font-body);
    font-size: .7rem;
    font-weight: 600;
    color: var(--text-lifted);
    white-space: nowrap;
}

/* --- Casuta de cautare a bibliotecii ---
   Pe facturi si pe tichete, casuta o deseneaza DataTables si noi doar o mutam.
   Aici e un formular al paginii, cu camp si buton, deci ii dam noi aceeasi forma:
   camp cu lupa inauntru, la stanga.

   LUPA E CHIAR BUTONUL de trimitere, nu un desen pus langa el. Asa arata ca pe
   celelalte pagini si rămâne apasabila - altfel cautarea ar fi mers doar cu
   tasta Enter, ceea ce nu se vede. */
.lst-cauta { position: relative; min-width: min(320px, 100%); }

.lst-cauta button {
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    transition: color .18s cubic-bezier(.22, 1, .36, 1);
}

.lst-cauta button:hover { color: var(--primary-accented, #67e8f9); }

/* Lupa nu mai e pozitionata de regula generala .fct-cauta-lupa: acolo sta pe
   ::before-ul casutei, aici sta in buton. */
.lst-cauta .fct-cauta-lupa {
    position: static;
    transform: none;
    width: 16px;
    height: 16px;
}

@media (prefers-reduced-motion: reduce) {
    .lst-cauta button { transition: none; }
}

/* Latimea si starea de focalizare - restul infatisarii vine din custom.css,
   din aceeasi regula ca la casuta de pe facturi. */
/* Aceeasi marime ca pe facturi si pe tichete: acolo casuta e desenata de
   DataTables si mosteneste 14px, aici e a paginii si pornea de la 16px - iesea
   45px inalta fata de 31, si se vedea alaturi de celelalte pagini. */
.lst-cauta input {
    width: 100%;
    font-family: var(--font-body);
    font-size: .875rem;

    /* Inalțimea e formula lui Bootstrap pentru ".form-control-sm", pe care o
       poarta casuta de pe facturi: calc(1.5em + 2px + .5rem), adica 31px la 14px
       font. Fara ea ieseau 38px - se vedea ca e alta casuta, desi restul era la
       fel. Nu scriem "31px": la 14px da 31, dar daca se schimba fontul se
       schimba si ea, singura. */
    height: calc(1.5em + 2px + .5rem);
}
.lst-cauta input::placeholder { color: var(--text-muted); }
.lst-cauta input:focus { outline: none; border-color: var(--primary); }

/* --- Cartonasele de categorie, colorate ---
   Unghiul de culoare vine din sablon, in "--cat-h"; aici il folosim de trei ori:
   fundal in degrade, chenar, pastila cu numarul de articole. O singura valoare
   trimisa, trei locuri colorate - iar o categorie noua primeste singura
   urmatoarea nuanta din lista.

   Valoarea de rezerva 190 (turcoazul temei) e acolo pentru cazul in care
   cartonasul ajunge randat fara stilul din sablon - de exemplu daca cineva
   refoloseste clasa in alta pagina. */
.lst-cat {
    background-image: linear-gradient(135deg,
        hsl(var(--cat-h, 190) 70% 50% / .10),
        hsl(var(--cat-h, 190) 70% 50% / .02));
    border-color: hsl(var(--cat-h, 190) 60% 50% / .28);
}

.lst-cat:hover {
    background-image: linear-gradient(135deg,
        hsl(var(--cat-h, 190) 70% 50% / .17),
        hsl(var(--cat-h, 190) 70% 50% / .05));
    border-color: hsl(var(--cat-h, 190) 70% 55% / .55);
}

.lst-cat:hover .lst-titlu { color: hsl(var(--cat-h, 190) 85% 75%); }

.lst-cat .lst-numar {
    background: hsl(var(--cat-h, 190) 60% 50% / .20);
    color: hsl(var(--cat-h, 190) 85% 78%);
}

/* Randul de la capatul unei categorii: intoarcerea, si legatura de editare
   pentru administratorul conectat. */
.lst-subsol {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.6rem;
    padding: 0 1rem;
}

.lst-subsol .fct-btn { min-width: 0; }

/* Randul cu titlul de sectiune si o legatura la capatul lui - deocamdata
   intoarcerea la Centrul de ajutor. Linia de dedesubt trece pe rand, nu pe
   titlu, ca sa treaca pe sub amandoua. */
.lst-sectiune-rand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 1.8rem 0 .2rem;
    padding: 0 1rem .7rem;
    border-bottom: 1px solid var(--border-muted);
}

.lst-sectiune-rand:first-of-type { margin-top: 0; }

.lst-sectiune-rand .lst-sectiune {
    margin: 0;
    padding: 0;
    border-bottom: 0;
}

/* Buton, nu legatura scrisa: la capatul unui rand de titlu, un text simplu se
   pierde intre celelalte texte. Imprumuta .fct-btn, ca "Vezi factura" si
   "Citește mai mult" - acelasi chenar, aceeasi inalțime.

   "min-width: 0" anuleaza latimea minima din .fct-btn: acolo era ca doua butoane
   alaturate intr-o coloana de tabel sa iasa la fel de late. Aici e singur. */
.lst-inapoi {
    flex: 0 0 auto;
    min-width: 0;
}

.lst-inapoi svg { width: 14px; height: 14px; }

.lst-subsol { justify-content: flex-end; }



/* =====================================================================
   DUPA TRIMITEREA UNUI TICHET
   ---------------------------------------------------------------------
   Pagina are un singur lucru de spus, deci nu e o lista: titlu, confirmarea, doua
   randuri de lamurire si o actiune. Foloseste tot capul de pagina "fct-", ca sa
   inceapa de unde incep si celelalte pagini.
   ===================================================================== */
.tich-confirm .fct-cap { margin-bottom: 1rem; }

/* Confirmarea. Verde stins, nu verde plin: e o veste buna, nu o alarma. */
.tich-caseta {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin: 0 1rem;
    padding: .9rem 1.1rem;
    border: 1px solid rgba(34, 197, 94, .3);
    border-radius: 12px;
    background: rgba(34, 197, 94, .1);
}

.tich-bifa {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    color: #4ade80;
}

.tich-numar {
    margin: 0;
    font-family: var(--font-heading);
    font-size: .95rem;
    font-weight: 600;
    color: #4ade80;
}

.tich-text {
    max-width: 62ch;
    margin: 1.2rem 1rem 0;
}

.tich-text p {
    margin: 0 0 .7rem;
    font-family: var(--font-body);
    font-size: .95rem;
    line-height: 1.65;
    color: var(--text-lifted);
}

.tich-text p:last-child { margin-bottom: 0; }

.tich-actiune { margin: 1.5rem 1rem 0; }


/* =====================================================================
   UN ARTICOL DIN CENTRUL DE AJUTOR
   ===================================================================== */

/* Multumirea pentru vot. Se vede o singura data, imediat dupa vot - vezi
   comentariul din knowledgebasearticle.tpl. Discreta: e o confirmare, nu o
   veste. */
.art-multumim {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 1rem 1.2rem;
    padding: .7rem 1rem;
    border: 1px solid rgba(34, 197, 94, .28);
    border-radius: 10px;
    background: rgba(34, 197, 94, .09);
    font-family: var(--font-body);
    font-size: .88rem;
    color: #4ade80;
}

.art-multumim svg { flex: 0 0 17px; width: 17px; height: 17px; }

.art-date {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin: .45rem 0 0;
    font-family: var(--font-body);
    font-size: .8rem;
    color: var(--text-muted);
}

.art-util { display: inline-flex; align-items: center; gap: .3rem; }
.art-util svg { width: 14px; height: 14px; }

.art-eticheta {
    padding: .18rem .55rem;
    border-radius: 999px;
    background: rgba(6, 182, 212, .14);
    color: var(--primary-accented, #67e8f9);
    font-size: .72rem;
    font-weight: 600;
}

.art-inapoi { flex: 0 0 auto; min-width: 0; }

/* Corpul articolului. Latimea marginita nu e de forma: un rand de text lung se
   citeste greu, fiindca ochiul pierde inceputul randului urmator. */
.art-text {
    max-width: 74ch;
    margin: 0 1rem;
    padding-top: 1.4rem;
    border-top: 1px solid var(--border-muted);
    font-family: var(--font-body);
    font-size: .95rem;
    line-height: 1.75;
    color: var(--text-lifted);
}

.art-text h1, .art-text h2, .art-text h3, .art-text h4 {
    margin: 1.8rem 0 .6rem;
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
}

.art-text h1:first-child, .art-text h2:first-child, .art-text h3:first-child { margin-top: 0; }
.art-text p { margin: 0 0 1rem; }
.art-text ul, .art-text ol { margin: 0 0 1rem; padding-left: 1.4rem; }
.art-text li { margin-bottom: .4rem; }
.art-text strong { color: var(--text); font-weight: 600; }
.art-text a { color: var(--primary-accented, #67e8f9); }

/* Intrebarea de la capatul articolului. */
.art-vot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .8rem;
    margin: 1.8rem 1rem 0;
    padding-top: 1.2rem;
    border-top: 1px solid var(--border-muted);
    font-family: var(--font-body);
    font-size: .88rem;
    color: var(--text-lifted);
}

.art-vot form { display: flex; gap: .5rem; margin: 0; }
.art-vot .fct-btn { min-width: 5rem; cursor: pointer; }


/* =====================================================================
   STAREA SERVICIILOR (serverstatus.php)
   ---------------------------------------------------------------------
   A sasea pagina pe aceeasi foaie. Capul de pagina si randurile vin de mai sus;
   aici raman verdictul de sus si eticheta de pe fiecare incident.

   VERDICTUL E CEL MAI MARE LUCRU DIN PAGINA, dinadins: e singurul raspuns pentru
   care se intra aici. Restul - lista, datele, prioritatile - se citeste doar daca
   verdictul spune ca e ceva de citit.

   O SINGURA CULOARE PE PAGINA, luata din --stare-h: verde cand merge, chihlimbar
   cand nu. Chenarul, fundalul, pastila si textul se calculeaza toate din ea, deci
   schimbarea starii nu inseamna sase valori scrise de mana care se pot uita una
   pe alta.
   ===================================================================== */
.stare-verdict {
    --stare-h: 142;  /* verde */

    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0 1rem 1.1rem;
    padding: 1.15rem 1.3rem;
    border: 1px solid hsl(var(--stare-h) 65% 50% / .28);
    border-radius: 14px;
    background:
        linear-gradient(135deg, hsl(var(--stare-h) 65% 45% / .13), hsl(var(--stare-h) 65% 45% / .04));
}

.stare-verdict-atentie { --stare-h: 38; }  /* chihlimbar */

/* Rotundul cu semnul. Are inelul lui, mai palid decat chenarul cutiei, ca sa se
   desprinda de fundal fara sa devina un buton. */
.stare-pastila {
    flex: 0 0 44px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid hsl(var(--stare-h) 65% 55% / .3);
    background: hsl(var(--stare-h) 65% 45% / .14);
    color: hsl(var(--stare-h) 70% 68%);
}

.stare-pastila svg { width: 22px; height: 22px; }

.stare-verdict-text { min-width: 0; }

/* Titlul verdictului e cat un titlu de sectiune, nu cat titlul paginii: pagina
   se cheama "Starea serviciilor", iar asta e raspunsul ei - se citesc unul dupa
   altul, deci n-au voie sa fie amandoua cele mai mari de pe ecran. */
.stare-verdict-text strong {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.3;
    color: hsl(var(--stare-h) 70% 75%);
}

.stare-verdict-text span {
    display: block;
    margin-top: .2rem;
    font-family: var(--font-body);
    font-size: .87rem;
    line-height: 1.5;
    color: var(--text-lifted);
}

/* Lucrarile anuntate. Nu e o alarma - e un rand pe care il apesi ca sa vezi cand
   anume - deci e un rand apasabil, nu inca o banda colorata sub verdict.

   PRIMA VARIANTA ERA INVIZIBILA: chenar var(--border-muted) si text
   var(--text-lifted), pe fundalul paginii - un dreptunghi care se ghicea. Cand
   discretia ajunge sa ascunda randul, nu mai e discretie.

   Are acum albastrul de informare. E a treia nuanta din pagina, si ultima: verde
   inseamna "merge", chihlimbar "e o problema", albastru "e doar de stiut". Trei
   culori legate de trei intelesuri, nu trei gusturi. */
.stare-anunt {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin: 0 1rem 1.1rem;
    padding: .75rem 1rem;
    border: 1px solid rgba(56, 189, 248, .32);
    border-radius: 12px;
    background: rgba(56, 189, 248, .07);
    font-family: var(--font-body);
    font-size: .87rem;
    color: var(--text);
    text-decoration: none;
    transition: border-color .18s cubic-bezier(.22, 1, .36, 1),
                background-color .18s cubic-bezier(.22, 1, .36, 1);
}

.stare-anunt:hover {
    border-color: rgba(56, 189, 248, .6);
    background: rgba(56, 189, 248, .14);
    color: var(--text);
    text-decoration: none;
}

.stare-anunt svg { flex: 0 0 17px; width: 17px; height: 17px; color: #38bdf8; }
.stare-anunt span { flex: 1 1 auto; min-width: 0; }

/* Sageata din capat spune ca randul duce undeva. Se misca putin la trecere - cat
   sa se vada ca a inteles mausul, nu cat sa distraga. */
.stare-anunt-sageata {
    flex: 0 0 15px;
    width: 15px;
    height: 15px;
    transition: transform .18s cubic-bezier(.22, 1, .36, 1);
}

.stare-anunt:hover .stare-anunt-sageata { transform: translateX(3px); }

/* --- UN INCIDENT ---
   Randul e cel de la anunturi (.lst-rand), deci nu se repeta nimic aici. In plus
   are doar linia de etichete si textul. */
.stare-incident .lst-titlu { margin-top: .35rem; }

/* --- "REZOLVAT", IN COLTUL DIN DREAPTA ---

   Se aseaza absolut, iar .lst-rand e deja "position: relative" (asa e scris
   pentru suprafata apasabila a titlului de la anunturi), deci n-are nevoie de
   nimic in plus.

   TEXTUL PRIMESTE LOC, nu se fereste de insigna. Un element asezat absolut iese
   din curgere: titlul nu stie ca insigna exista si i-ar trece pe dedesubt la
   primul incident cu nume lung. De aceea randul capata un jgheab in dreapta cat
   insigna plus aer - si il capata numai randurile rezolvate, ca celelalte sa
   foloseasca toata latimea. */
.stare-incident-rezolvat { padding-right: 11rem; }

.stare-rezolvat {
    position: absolute;
    top: 1.1rem;
    right: 1rem;

    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .85rem;
    border: 1px solid rgba(34, 197, 94, .4);
    border-radius: 999px;
    background: rgba(34, 197, 94, .13);

    font-family: var(--font-heading);
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .01em;
    color: #4ade80;
}

.stare-rezolvat svg { width: 15px; height: 15px; }

/* Sub 768px nu mai are unde sta: coloana e ingusta, iar o insigna absoluta ar
   cadea peste titlu. Se intoarce in curgere, deasupra datei. */
@media (max-width: 767.98px) {
    .stare-incident-rezolvat { padding-right: 1rem; }

    .stare-rezolvat {
        position: static;
        margin-bottom: .5rem;
    }
}


/* =====================================================================
   CONTACT (/contact.php)
   ---------------------------------------------------------------------
   A saptea pagina pe foaia asta. Capul de pagina si fundalul vin de sus; aici
   sunt formularul si codul din imagine.

   PAGINA NU E O LISTA, deci nu-si ia toata banda: un rand de text de 1200px se
   citeste greu, iar un camp de text de 1200px arata ca o greseala. Zona se
   opreste la 760px, cat un formular in care se scrie de mana.
   ===================================================================== */
/* PAGINA NU-SI IA TOATA BANDA si sta la mijloc.

   760px, nu 1270: un rand de text de o mie doua sute de pixeli se citeste greu,
   iar un camp in care scrii un nume, lat cat tot ecranul, arata a greseala.

   "margin-inline: auto" fiindca altfel cei 760px stau lipiti de stanga si rămâne
   un gol de 495px in dreapta - masurat. Pe o pagina cu bara laterala golul ala e
   ocupat; aici nu e nimic in el, deci pagina pare inceputa si neterminata. */
.ctc-zona {
    max-width: 760px;
    margin-inline: auto;

    /* TOTUL PE MIJLOC. Pe paginile cu lista, textul aliniat la stanga e corect:
       ochiul are nevoie de o margine fixa de unde sa porneasca fiecare rand nou.
       Aici nu e nimic de parcurs - un titlu, doua randuri si un formular - iar
       coloana e deja la mijlocul ecranului. Cu textul la stanga intr-o coloana
       centrata iese cel mai prost din amandoua: nici margine de sprijin, nici
       simetrie. */
    text-align: center;
}

/* CAPUL DE PAGINA NU E UN RAND CU DOUA CAPETE, aici.

   ".fct-cap" e flex cu "space-between" fiindca pe liste tine titlul la stanga si
   casuta de cautare la dreapta. Pagina asta n-are cautare, deci flexul avea un
   singur copil - iar un copil de flex se stramteaza la cat ii cere conținutul.
   Blocul cu titlul iesea de 499px (cat max-width-ul subtitlului) intr-o zona de
   760, lipit la stanga: textul era centrat, dar in 499, deci "Contact" cadea cu
   vreo 115px mai la stanga decat formularul de sub el. Asta se vedea stramb.

   "display: block" ii da toata latimea zonei, si atunci centrarea din .ctc-zona
   il aseaza pe acelasi ax cu restul paginii. */
.ctc-zona .fct-cap { display: block; }

/* Subtitlul isi pastreaza latimea de citit (52ch, din regula comuna) - dar acum
   trebuie centrata CUTIA lui, nu doar randurile dinauntru. */
.ctc-zona .fct-cap .fct-titlu p { margin-inline: auto; }

/* Randul de sub subtitlu, pentru clientul autentificat: un drum, nu un text.
   Aceeasi haina ca randul de lucrari programate de pe pagina de stare - tot o
   informatie utila care duce undeva. */
.ctc-indrumare {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    margin: 0 1rem 1.4rem;
    padding: .75rem 1rem;
    border: 1px solid rgba(56, 189, 248, .32);
    border-radius: 12px;
    background: rgba(56, 189, 248, .07);
    font-family: var(--font-body);
    font-size: .87rem;
    color: var(--text);
    text-decoration: none;
    transition: border-color .18s cubic-bezier(.22, 1, .36, 1),
                background-color .18s cubic-bezier(.22, 1, .36, 1);
}

.ctc-indrumare:hover {
    border-color: rgba(56, 189, 248, .6);
    background: rgba(56, 189, 248, .14);
    color: var(--text);
    text-decoration: none;
}

.ctc-indrumare > svg:first-child { flex: 0 0 17px; width: 17px; height: 17px; color: #38bdf8; }

/* "flex: 0 1 auto", nu "1 1 auto": cu crestere, textul umplea toata cutia si
   impingea sageata la marginea din dreapta, la o palma de ultimul cuvant. Fara
   crestere, cele trei piese stau stranse la mijloc, iar sageata rămâne langa
   textul pe care il continua. */
.ctc-indrumare span { flex: 0 1 auto; min-width: 0; }
.ctc-sageata { flex: 0 0 15px; width: 15px; height: 15px; transition: transform .18s cubic-bezier(.22, 1, .36, 1); }
.ctc-indrumare:hover .ctc-sageata { transform: translateX(3px); }

/* AICI A FOST ".ctc-nota", randul pentru vizitatorul nelogat. A plecat odata cu
   textul din sablon: ii spunea unui om fara cont ca daca ar avea cont ar exista
   un drum mai bun - o propozitie care nu cerea nimic si nu dadea nimic. Regula
   n-a ramas scrisa "in caz ca": o clasa fara marcaj e cod mort care se descopera
   peste jumatate de an. */

.ctc-eroare {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .7rem;
    margin: 0 1rem 1.2rem;
    padding: .9rem 1.1rem;
    border: 1px solid rgba(239, 68, 68, .35);
    border-radius: 12px;
    background: rgba(239, 68, 68, .1);
    font-family: var(--font-body);
    font-size: .87rem;
    color: #fca5a5;
}

.ctc-eroare svg { flex: 0 0 18px; width: 18px; height: 18px; }

/* Erorile vin de la WHMCS ca lista. Fara punctele din fata si fara jgheabul lor,
   ca sa poata sta centrate ca restul paginii - un glonț la stanga si textul
   centrat langa el ar fi aratat a greseala, nu a alegere. */
.ctc-eroare ul { margin: 0; padding: 0; list-style: none; }

/* Confirmarea, imprumutata de la trimiterea unui tichet: acolo sta la stanga,
   langa restul paginii ei; aici intra in randul celorlalte, la mijloc. */
.ctc-zona .tich-caseta { justify-content: center; }

/* --- FORMULARUL ---
   ETICHETELE STAU DEASUPRA CAMPURILOR. Nexus le punea la dreapta, intr-o grila
   3+7: pe ecran lat, "Adresă de e-mail" ajungea la o palma de casuta lui, iar
   ochiul trebuia sa traverseze golul ca sa le lege. Deasupra, distanta e mereu
   aceeasi, oricat de lat ar fi ecranul. */
/* Linia dintre mesaj si formular. Se opreste la 1rem de fiecare parte, adica pe
   aceeasi verticala cu marginile campurilor de dedesubt - o linie care ar trece
   dincolo de ele ar arata ca apartine paginii, nu grupului pe care il desparte.

   Nu se sterge la "border: 0" si nu se redeseneaza cu background: <hr> are din
   Bootstrap un singur chenar, cel de sus, deci il schimbam pe acela. */
.ctc-linie {
    margin: 1.6rem 1rem;
    border: 0;
    border-top: 1px solid var(--border-muted);
}

.ctc-formular { margin: 0 1rem; }

.ctc-camp { margin-bottom: 1.1rem; }

/* Eticheta e centrata deasupra campului ei, ca tot restul paginii. Textul scris
   INAUNTRUL campurilor rămâne insa la stanga - vezi mai jos: acolo scrii, iar un
   nume care porneste din mijloc si se muta la fiecare litera e de nefolosit. */
.ctc-camp label {
    display: block;
    margin-bottom: .4rem;
    font-family: var(--font-heading);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--text-lifted);
}

/* Numele si adresa incap pe un rand - sunt scurte amandoua, iar doua campuri
   scurte unul sub altul lungesc formularul degeaba. "auto-fit" cu podea de
   240px le pune singure una sub alta pe ecran ingust. */
.ctc-pereche {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0 1rem;
}

.ctc-formular .form-control {
    width: 100%;
    /* Singurul loc din pagina care rămâne la stanga, si dinadins: aici scrii.
       Un text care porneste din mijloc si se muta la fiecare litera tastata nu
       se poate reciti, iar cursorul nu mai are un loc fix unde sa-l cauti. */
    text-align: left;
    padding: .55rem .8rem;
    border: 1px solid var(--border-muted);
    border-radius: 9px;
    background: rgba(255, 255, 255, .03);
    font-family: var(--font-body);
    font-size: .9rem;
    color: var(--text);
    transition: border-color .18s ease, background-color .18s ease;
}

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

.ctc-formular .form-control:focus {
    outline: none;
    border-color: rgba(34, 211, 238, .55);
    background: rgba(255, 255, 255, .05);
    box-shadow: 0 0 0 3px rgba(34, 211, 238, .12);
}

.ctc-formular textarea.form-control { min-height: 150px; resize: vertical; line-height: 1.6; }

/* --- CODUL DIN IMAGINE ---
   Marcajul e al nostru (templates/lab-404/includes/captcha.tpl), tocmai ca sa nu
   fie nevoie de "!important" peste utilitarele Bootstrap ale lui nexus. Aici e
   doar asezarea: textul deasupra, imaginea si casuta pe acelasi rand, una langa
   alta - cat mai aproape, ca sa nu-ti mute ochiul de pe cifre cand le scrii.

   Clasele nu incep cu "ctc-": includerea e folosita si de alte formulare
   (inregistrare, cautare de domenii), iar cand ajungem si acolo, asezarea asta e
   deja scrisa. */
.ctc-cod { margin: 0 0 1.4rem; }

.lab404-cod-text {
    margin: 0 0 .55rem;
    font-family: var(--font-body);
    font-size: .82rem;
    line-height: 1.5;
    color: var(--text-lifted);
}

.lab404-cod-rand {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: .7rem;
}

.lab404-cod-imagine {
    display: block;
    height: 40px;
    width: auto;
    border-radius: 8px;
}

.lab404-cod-casuta {
    width: 9rem;
    padding: .5rem .8rem;
    border: 1px solid var(--border-muted);
    border-radius: 9px;
    background: rgba(255, 255, 255, .03);
    font-family: var(--font-mono, monospace);
    font-size: .95rem;
    letter-spacing: .18em;
    color: var(--text);
}

.lab404-cod-casuta:focus {
    outline: none;
    border-color: rgba(34, 211, 238, .55);
    box-shadow: 0 0 0 3px rgba(34, 211, 238, .12);
}

.ctc-actiune { margin-top: 1.5rem; }

/* Butonul e cel de pe facturi, dar aici e singura actiune a paginii, deci are
   voie sa fie mai mare decat unul dintr-o celula de tabel. */
.ctc-actiune .fct-btn-plata {
    min-height: 42px;
    padding-inline: 1.4rem;
    font-size: .88rem;
}

@media (prefers-reduced-motion: reduce) {
    .ctc-indrumare, .ctc-sageata { transition: none; }
    .ctc-indrumare:hover .ctc-sageata { transform: none; }
}

.stare-etichete {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem .55rem;
    margin: .5rem 0 0;
    font-family: var(--font-body);
    font-size: .78rem;
    color: var(--text-muted);
}

/* Prioritatea, ca pastila colorata; starea, ca pastila neutra. Doua chenare
   colorate alaturate s-ar fi luat la intrecere, iar prioritatea e cea care
   trebuie citita prima. */
.stare-prioritate,
.stare-tip {
    display: inline-block;
    padding: .12rem .5rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .01em;
}

.stare-prioritate {
    --pri-h: 199;  /* albastru, pentru orice prioritate nerecunoscuta */
    border: 1px solid hsl(var(--pri-h) 70% 50% / .3);
    background: hsl(var(--pri-h) 70% 45% / .12);
    color: hsl(var(--pri-h) 75% 72%);
}

.stare-p-critical { --pri-h: 0; }
.stare-p-high     { --pri-h: 25; }
.stare-p-medium   { --pri-h: 45; }
.stare-p-low      { --pri-h: 142; }

.stare-tip {
    border: 1px solid var(--border-muted);
    color: var(--text-lifted);
}

.stare-tinta { color: #9aa8bd; }

/* "Te afectează si pe tine" - singurul loc unde WHMCS stie ceva despre clientul
   care citeste, deci merita scos in evidenta fata de restul randului. */
.stare-te-priveste {
    display: inline-block;
    margin: .55rem 0 0;
    padding: .3rem .65rem;
    border: 1px solid rgba(251, 191, 36, .3);
    border-radius: 8px;
    background: rgba(251, 191, 36, .1);
    font-family: var(--font-body);
    font-size: .8rem;
    color: #fcd34d;
}

.stare-descriere {
    max-width: 78ch;
    margin-top: .55rem;
    font-family: var(--font-body);
    font-size: .87rem;
    line-height: 1.65;
    color: var(--text-lifted);
}

.stare-descriere p:last-child { margin-bottom: 0; }

/* Sub 576px cutia verdictului n-are loc pe un rand: semnul urca deasupra
   textului, in loc sa-l stranga la doua cuvinte pe linie. */
@media (max-width: 575.98px) {
    .stare-verdict {
        flex-direction: column;
        align-items: flex-start;
        gap: .75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .stare-anunt,
    .stare-anunt-sageata { transition: none; }
    .stare-anunt:hover .stare-anunt-sageata { transform: none; }
}