/* ==========================================================================
   PALETA MK FACTORING (identitatea vizuala a site-ului www.mk-factoring.ro)
   Culorile din logo: cyan -> albastru -> mov. Aici sunt DOAR variabilele;
   aplicarea lor pe componentele Radzen este in css/mk-theme.css, incarcat
   dupa acest fisier. Vechiul verde MK Kredit (027A35) a fost inlocuit peste
   tot cu var(--mk-primary), inclusiv in stilurile inline din paginile .razor.
   ========================================================================== */
:root {
    --mk-c1: #38d0e6;
    --mk-c2: #4a8df8;
    --mk-c3: #b48cf0;
    --mk-grad: linear-gradient(100deg, var(--mk-c1) 0%, var(--mk-c2) 48%, var(--mk-c3) 100%);

    /* albastrul de actiune: putin mai inchis decat cel din logo, ca textul alb
       de pe butoane si titlurile albastre pe alb sa ramana lizibile */
    --mk-primary: #2f6fe4;
    --mk-primary-light: #4a8df8;
    --mk-primary-lighter: rgba(74, 141, 248, 0.12);
    --mk-primary-dark: #2458c2;
    --mk-primary-darker: #1c479e;

    --mk-text: #1c1d22;
    --mk-muted: #5c6270;
    --mk-line: #e2e7f0;
    --mk-bg: #f7f9fc;
    --mk-surface: #ffffff;
    --mk-dark: #15171d;

    --mk-radius: 16px;
    --mk-shadow: 0 10px 30px rgba(28, 44, 80, 0.08);
    --mk-shadow-lg: 0 24px 60px rgba(28, 44, 80, 0.14);
    --mk-font: "Outfit", "Segoe UI", system-ui, -apple-system, sans-serif;

    /* valorile Radzen de baza; mk-theme.css le completeaza */
    --rz-primary: var(--mk-primary);
    --rz-primary-light: var(--mk-primary-light);
    --rz-primary-lighter: var(--mk-primary-lighter);
    --rz-primary-dark: var(--mk-primary-dark);
    --rz-primary-darker: var(--mk-primary-darker);
}

/* antetul este deschis (vezi mk-theme.css, sectiunea 18) */

html, body {
    font-family: var(--mk-font);
}

/* Logo-ul aplicatiei: simbolul (imagine, fara text) + denumirea "MK Factoring" ca text,
   ca denumirea sa se poata schimba fara o imagine noua. Marimea se da din font-size
   pe .mk-logo; simbolul are 1.6em, deci cam inaltimea logo-ului vechi. */
.mk-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    line-height: 1;
    white-space: nowrap;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--mk-text);
}

    .mk-logo img {
        height: 2.1em;
        width: auto;
    }

.mk-logo--white {
    color: #fff;
}

/* PLASA DE SIGURANTA: pagina nu se deruleaza NICIODATA pe orizontala.
   Daca o componenta depaseste latimea ecranului, ea trebuie sa se descurce
   singura (tabelele au scroller propriu), nu sa lateasca tot documentul si sa
   scoata antetul si meniul din ecran.
   Folosim "clip", nu "hidden", intentionat: "hidden" ar transforma body-ul in
   container de derulare si ar strica position: fixed al antetului si
   position: sticky al capului de tabel. "clip" doar taie, fara sa creeze
   context de derulare. */
body {
    overflow-x: clip;
    max-width: 100%;
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: var(--mk-primary);
}

.btn-primary {
    color: #fff;
    background-color: var(--mk-primary);
    border-color: var(--mk-primary-dark);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--mk-primary);
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    color-scheme: light only;
    background: var(--mk-dark) !important;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    color: white;
    text-align: center;
    font-weight: 800;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.loading-progress {
    position: absolute;
    display: block;
    width: 8rem;
    height: 8rem;
    inset: 20vh 0 auto 0;
    margin: 0 auto 0 auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: var(--mk-primary);
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

code {
    color: #c02d76;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}
.rz-panel-menu .rz-navigation-item-active, .rz-panel-menu .rz-navigation-item-wrapper-active {
    color: var(--mk-primary) !important;
}
    .rz-panel-menu .rz-navigation-item-active .rz-navigation-item-icon, .rz-panel-menu .rz-navigation-item-wrapper-active .rz-navigation-item-icon {
        color: var(--mk-primary) !important;
    }
.rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-wrapper-active {
    color: var(--mk-primary) !important;
}
.rz-link {
    color: var(--mk-primary) !important;
}
/* ==========================================================================
   TABELE (RadzenDataGrid)
   Redimensionarea coloanelor prin tragere a fost ELIMINATA din toate cele 21 de
   tabele (atributul AllowColumnResize scos din .razor): clientii nu descopereau
   singuri functia. In locul ei, tabelele afiseaza INTREG continutul:
     - textul nu mai este trunchiat cu "..." (nici in celule, nici in titluri),
       ci se rupe pe mai multe rinduri;
     - latimea coloanelor urmeaza continutul (table-layout: auto), deci
       atributele Width="..." din .razor rămân simple sugestii;
     - daca tot nu incape, tabelul se deruleaza orizontal in loc sa striveasca
       coloanele in coloane-firicel, ilizibile.
   Capul de tabel este in acelasi <table> (thead sticky), deci titlurile ramin
   aliniate cu datele si la derulare.
   ========================================================================== */

/* Selectorul include si .rz-density-compact: Radzen redefineste variabilele de
   padding pe .rz-data-grid.rz-density-compact, care e mai specific decat
   .rz-data-grid si ne-ar invinge daca vreun grid primeste Density.Compact. */
.rz-data-grid,
.rz-data-grid.rz-density-compact {
    /* ---- SURSA UNICA pentru padding-ul orizontal din tabele ----
       Radzen foloseste implicit doua variabile DIFERITE si asimetrice:
         td               -> --rz-grid-cell-padding                = 0.625rem 1rem  (1rem stanga, 1rem dreapta)
         .rz-column-title -> --rz-grid-header-title-padding-inline = 1rem 0         (1rem stanga, 0 dreapta)
       Cutia titlului fiind mai lata spre dreapta, titlul si continutul nu pornesc
       din acelasi punct. Le legam pe amandoua de --mk-grid-pad-x, deci raman
       identice oriunde, inclusiv in media query-urile de mai jos, care schimba
       DOAR --mk-grid-pad-x / --mk-grid-pad-y (nu variabilele Radzen direct). */
    --mk-grid-pad-x: 1rem;
    --mk-grid-pad-y: 0.625rem;
    --rz-grid-cell-padding: var(--mk-grid-pad-y) var(--mk-grid-pad-x);
    --rz-grid-header-title-padding-inline: var(--mk-grid-pad-x);
}

/* ---- TOT CONTINUTUL VIZIBIL, la orice dimensiune de ecran ----
   Radzen trunchiaza implicit, in trei locuri diferite:
     .rz-grid-table td            -> white-space: nowrap; overflow: hidden
     td .rz-cell-data             -> overflow: hidden; text-overflow: ellipsis; white-space: nowrap
     thead th                     -> overflow: hidden; text-overflow: ellipsis
   De aici veneau "Trage...", "TEST CERT...", "In an...", "Valoare ...".
   Le anulam pe toate trei; altfel una singura rămasa reintroduce punctele. */
.rz-data-grid .rz-grid-table td,
.rz-data-grid .rz-grid-table thead th {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

.rz-data-grid .rz-grid-table td .rz-cell-data,
.rz-data-grid .rz-cell-data {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

.rz-data-grid .rz-grid-table thead th .rz-column-title,
.rz-data-grid .rz-grid-table thead th .rz-column-title-content {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

/* NU rupem cuvintele in interior. Aveam aici word-break: break-word si sparge
   exact lucrurile care trebuie citite intregi: CUI "42743272" devenea
   "427432 / 72", iar "J40/7670/2020" -> "J40/7670/20 / 20".
   Fara el, ruperea se face doar intre cuvinte, deci min-content al coloanei este
   cel mai lung cuvant si table-layout: auto ii da automat latimea necesara.
   Textul lung cu spatii (adrese) se rupe normal, pe cuvinte. */

/* Butoanele si badge-urile din celule rămân pe un singur rind: "MODIFICA" nu
   trebuie sa devina "MODIFIC / A", nici pe telefon, nici pe desktop. Coloana se
   lateste cat trebuie, iar daca nu incape tabelul se deruleaza orizontal.
   Selectorul e mai specific decit .rz-button, deci bate si regula de rupere a
   etichetelor pe telefon din blocul BUTOANE. */
.rz-data-grid .rz-grid-table .rz-button,
.rz-data-grid .rz-grid-table .rz-button .rz-button-text,
.rz-data-grid .rz-grid-table .rz-badge {
    white-space: nowrap !important;
}

/* Latimea urmeaza continutul, nu se mai imparte egal pe ecran. */
.rz-data-grid .rz-grid-table {
    table-layout: auto !important;
    width: 100%;
}

/* ---- CONTAINERE: derularea orizontala se face IN tabel, nu in pagina ----
   Radzen are deja .rz-data-grid-data { overflow: auto }, deci tabelul ar trebui
   sa se deruleze singur. Nu se intampla, din cauza unei reguli implicite de
   flexbox: un element flex are min-width: auto, adica NU se poate micsora sub
   latimea continutului sau. .rz-data-grid este flex container, iar el si
   parintii lui (RadzenStack, RadzenCard, panourile de tab) sunt la rindul lor
   elemente flex - asa ca un tabel cu min-width: 820px umfla tot lantul pina la
   document, si atunci se deruleaza orizontal PAGINA INTREAGA: antetul verde si
   tab-urile ies din ecran.
   min-width: 0 rupe lantul si lasa fiecare container sa se micsoreze la latimea
   ecranului, ca scroller-ul intern sa-si faca treaba. */
.rz-data-grid,
.rz-data-grid .rz-data-grid-data,
.rz-stack > *,
.rz-card,
.rz-tabview,
.rz-tabview-panels,
.rz-tabview-panel,
.rz-col,
.rz-column {
    min-width: 0;
}

/* Latime EXPLICITA pe grid, nu doar "auto": asa cutia lui devine definita, iar
   scroller-ul intern (.rz-data-grid-data) are fata de ce sa decupeze tabelul cu
   min-width. Fara o latime definita, tabelul de 700px iesea vizibil din grid si
   ajungea sa deruleze containerul paginii. */
.rz-data-grid {
    width: 100%;
}

.rz-data-grid,
.rz-data-grid .rz-data-grid-data,
.rz-stack > *,
.rz-card,
.rz-tabview,
.rz-tabview-panels,
.rz-tabview-panel,
.rz-col,
.rz-column {
    max-width: 100%;
}

/* GARANTIE la nivel de pagina. Scroller-ul real al aplicatiei NU este <body>,
   ci containerul de continut al layout-ului Radzen:
       .rz-layout .rz-body { grid-area: rz-body; overflow: auto }
   De aceea plasa de siguranta pusa pe <body> nu avea ce sa prinda, si pagina
   continua sa se deruleze lateral, scotand antetul si tab-urile din ecran.
   Aici oprim derularea orizontala a paginii, pastrand-o pe cea verticala.
   Tabelele nu pierd nimic: ele au scroller propriu si se deruleaza in interior. */
.rz-layout .rz-body {
    overflow-x: hidden;
}

.rz-data-grid .rz-data-grid-data {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* derulare cu inertie pe iOS */
    scrollbar-width: thin;
}

    .rz-data-grid .rz-data-grid-data::-webkit-scrollbar {
        height: 8px;
    }

    .rz-data-grid .rz-data-grid-data::-webkit-scrollbar-thumb {
        background: rgba(74, 141, 248, 0.45);
        border-radius: 4px;
    }

/* ---- Tablete ---- */
@media (max-width: 1024px) {
    /* Schimbam doar --mk-grid-pad-*, ca antetul si celula sa se stranga
       impreuna si sa ramana aliniate (vezi blocul de aliniere mai jos).
       NU mai reducem font-size aici: scalarea se face o singura data, din
       font-size pe <html> (blocul ECRANE MICI). Altfel cele doua reduceri se
       compun - 14px x 0.85 = ~12px - si textul devenea ilizibil. */
    .rz-data-grid {
        --mk-grid-pad-x: 0.6rem;
        --mk-grid-pad-y: 0.5rem;
    }

    /* Sub aceasta lungime coloanele ar deveni firicele in care fiecare cuvant
       se rupe pe cite un rind. Preferam derularea orizontala: tot continutul
       rămâne lizibil, iar bara de derulare arata ca mai sunt coloane. */
    .rz-data-grid .rz-grid-table {
        min-width: 900px;
    }
}

/* ---- Telefoane ---- */
@media (max-width: 640px) {
    .rz-data-grid {
        --mk-grid-pad-x: 0.45rem;
        --mk-grid-pad-y: 0.45rem;
    }

    /* Mai mic decit pe tableta: pe un ecran de ~390px, 820px insemnau peste doua
       ecrane de derulat. 700px pastreaza coloanele lizibile cu mult mai putina
       derulare. Derularea e interna tabelului (vezi blocul CONTAINERE). */
    .rz-data-grid .rz-grid-table {
        min-width: 700px;
    }

    /* butoanele de actiune din grid (modifica / sterge) mai compacte */
    .rz-data-grid .rz-button-icon-only {
        padding: 0.25rem;
    }
}
/* ==========================================================================
   TABELE - aliniere titlu <-> continut
   Antetul si continutul sunt CENTRATE, si amandoua in aceeasi cutie.

   Cheia e ca ambele isi iau padding-ul orizontal din --mk-grid-pad-x (vezi
   blocul TABELE de mai sus). Implicit Radzen le da cutii diferite:
     td               -> --rz-grid-cell-padding                = 0.625rem 1rem
     .rz-column-title -> --rz-grid-header-title-padding-inline = 1rem 0
   A doua e asimetrica, deci cutia titlului se intinde cu 1rem mai mult spre
   dreapta, iar centrul ei cadea cu 0.5rem mai la dreapta decat centrul
   continutului. Cutiile fiind acum identice, centrele coincid exact.

   Radzen pune clasele rz-text-align-left / -right pe .rz-cell-data in functie
   de TextAlign din markup; regulile de aici le suprascriu, deci NU trebuie
   modificata nicio pagina .razor si nicio coloana.

   Centrarea ramane valabila si acum ca textul se rupe pe mai multe rinduri:
   fiecare rind se centreaza in latimea coloanei.
   ========================================================================== */

/* ---- Celule ---- */
.rz-data-grid .rz-grid-table th,
.rz-data-grid .rz-grid-table td {
    text-align: center !important;
}

/* Continutul celulei sta intr-un span display:block pe toata latimea celulei.
   Regula e necesara separat: fara ea, o coloana declarata explicit cu
   TextAlign din markup ramane aliniata altfel in interiorul spanului.
   text-align acopera si butoanele/badge-urile, fiind elemente inline-level. */
.rz-data-grid .rz-grid-table td .rz-cell-data {
    text-align: center !important;
}

/* Un RadzenStack dintr-o celula este flex container, iar copiii unui flex NU
   sunt aliniati de text-align - deci trebuie centrat pe axa principala separat,
   altfel butoanele din el ramaneau spre stanga.
   Intentionat FARA !important: un style inline din pagina (ex. un stack aliniat
   deliberat altfel) ramane mai puternic si nu il stricam. */
.rz-data-grid .rz-grid-table td .rz-cell-data > .rz-stack {
    justify-content: center;
}

/* ---- Cap de tabel ---- */
/* .rz-column-title este inline-flex pe toata latimea, deci pe langa text-align
   trebuie mutat si justify-content, altfel titlul se aseaza dupa regula flex,
   nu dupa cea de text. */
.rz-data-grid .rz-grid-table thead th > div:not(.rz-cell-filter),
.rz-data-grid .rz-grid-table thead th .rz-column-title {
    position: relative;
    justify-content: center !important;
    text-align: center !important;
}

.rz-data-grid .rz-grid-table thead th .rz-column-title-content {
    text-align: center !important;
}

/* ---- OBLIGATORIU: padding simetric pe titlu, peste toate variantele Radzen ----
   Radzen rescrie DOAR marginea din stanga a titlului, in functie de TextAlign:
     th.rz-text-align-center .rz-column-title              -> padding-inline-start: 0
     th.rz-text-align-right  .rz-column-title              -> justify-content: right
     th.rz-text-align-*.rz-sortable-column .rz-column-title-> padding-inline-start: var(--rz-grid-sort-icon-width)
   Logica lor merge cu valoarea lor implicita asimetrica (1rem 0), unde anularea
   start-ului da o cutie simetrica 0/0. Noi insa folosim o cutie deja simetrica
   (--mk-grid-pad-x pe ambele parti), asa ca anularea start-ului o face
   ASIMETRICA si muta centrul titlului cu jumatate de padding la stanga - de aici
   veneau coloanele "Data Cerere", "Valoare", "Valuta" care pareau descentrate.
   Fortam simetria cu !important, ca nicio varianta Radzen sa nu o mai poata rupe.
   !important e necesar: regulile Radzen au aceeasi specificitate ca ale noastre. */
.rz-data-grid .rz-grid-table thead th .rz-column-title,
.rz-data-grid .rz-grid-table thead th.rz-text-align-center .rz-column-title,
.rz-data-grid .rz-grid-table thead th.rz-text-align-right .rz-column-title,
.rz-data-grid .rz-grid-table thead th.rz-text-align-left .rz-column-title,
.rz-data-grid .rz-grid-table thead th.rz-text-align-start .rz-column-title,
.rz-data-grid .rz-grid-table thead th.rz-text-align-end .rz-column-title,
.rz-data-grid .rz-grid-table thead th.rz-text-align-justify .rz-column-title,
.rz-data-grid .rz-grid-table thead th.rz-sortable-column .rz-column-title,
.rz-data-grid .rz-grid-table thead th.rz-text-align-center.rz-sortable-column .rz-column-title,
.rz-data-grid .rz-grid-table thead th.rz-text-align-right.rz-sortable-column .rz-column-title {
    padding-inline: var(--mk-grid-pad-x) !important;
    justify-content: center !important;
    text-align: center !important;
}

/* Iconita de sortare face parte din acelasi flex ca titlul. Lasata in flux,
   ocupa latime si poate impinge/trunchia titlul, desincronizandu-l de continut.
   O scoatem din flux, ancorata la marginea din dreapta a coloanei. Sortarea
   ramane functionala: in Radzen click-ul se face pe intreg th-ul, nu pe iconita. */
.rz-data-grid .rz-grid-table thead th .rz-column-title > .rz-sortable-column-icon {
    position: absolute;
    inset-inline-end: 0;
    right: 0; /* fallback pentru browsere mai vechi */
    margin: 0;
}

/* Titlul nu trebuie sa treaca pe sub iconita de sortare cand coloana e ingusta.
   Padding-ul e pus SIMETRIC intentionat: pe o singura parte ar muta din nou
   centrul titlului, exact greseala reparata mai sus. */
.rz-data-grid .rz-grid-table thead th.rz-sortable-column .rz-column-title-content {
    padding-inline: 1.1rem;
}
/* ==========================================================================
   BARA GLOBALA DE EROARE BLAZOR (#blazor-error-ui)
   Nu se afiseaza niciodata clientului. Motiv: in Blazor WebAssembly aceasta bara
   apare la orice excepție care ajunge la handlerul global, chiar si atunci cand
   aplicatia continua sa functioneze normal - de exemplu la validarile respinse
   de Oracle (ex. "CER0504: Nu exista documente incarcate."), unde clientul are
   deja mesajul corect in notificare. Bara suplimentara ("A aparut o eroare
   nereparata") il speria degeaba.
   Blazor scrie inline "display: block" cand vrea sa o afiseze, de aceea este
   nevoie de !important.
   DIAGNOSTIC: excepția reala continua sa fie scrisa integral in consola
   browserului (F12 > Console), impreuna cu marcajul [blazor-error-ui] adaugat
   in index.html - deci nimic nu se pierde pentru depanare.
   ========================================================================== */
#blazor-error-ui {
    display: none !important;
}
/* ==========================================================================
   CASETA DE PAROLA CU "OCHISOR" (Common/PasswordField.razor)
   Butonul sta in slotul End al RadzenFormField, deci in dreapta input-ului.
   Regulile de mai jos il fac compact, ca sa nu impinga textul si eticheta.
   ========================================================================== */

/* Latimea casetei trebuie sa rămâna identica cu a celorlalte RadzenFormField din formular
   (ex. E-mail). RadzenFormField este inline-flex: cand era pus direct in RadzenStack se
   intindea pe toata latimea (stack = flex column cu align-items: stretch), dar containerul
   propriu al acestei componente il lasa sa se strange la dimensiunea continutului.
   De aceea fortam explicit 100% - altfel caseta de parola apare mai scurta decat restul. */
.mk-password-field {
    display: block;
    width: 100%;
}

.mk-password-field > .rz-form-field {
    width: 100%;
}

.mk-password-field .mk-password-toggle {
    min-width: 0;
    padding: 0 0.25rem;
    color: var(--rz-text-secondary-color);
}

.mk-password-field .mk-password-toggle:hover:not([disabled]) {
    color: var(--mk-primary);
    background-color: transparent;
}

/* Fara conturul de focus pe ochisor: butonul are tabindex="-1", nu face parte din
   parcursul cu Tab prin formular, iar conturul ar arata ca o eroare de aliniere. */
.mk-password-field .mk-password-toggle:focus {
    box-shadow: none;
    outline: none;
}

.mk-password-field .mk-password-toggle .rz-button-icon-only,
.mk-password-field .mk-password-toggle .rzi {
    margin: 0;
    font-size: 1.125rem;
}

/* --------------------------------------------------------------------------
   AUTOFILL (parola completata automat de browser)
   Browserul coloreaza cu bleu DOAR elementul <input>, nu si slotul din dreapta
   in care sta ochisorul. Rezultatul era o caseta jumatate bleu / jumatate alba,
   cu butonul parand lipit din alta parte. Mai jos pictam noi toata suprafata
   casetei, ca sa fie o singura zona colorata, ca la celelalte campuri.
   -------------------------------------------------------------------------- */
.mk-password-field {
    /* Fundalul de autofill din Chrome / Edge pe tema deschisa. Il declaram explicit
       ca sa fie exact aceeasi nuanta si pe input si pe zona ochisorului. */
    --mk-autofill-bg: #e8f0fe;
}

/* Chrome nu permite schimbarea directa a fundalului de autofill (background-color este
   ignorat). Singura cale este o umbra interioara suficient de mare cat sa acopere tot
   input-ul; text-fill-color pastreaza textul lizibil peste ea. */
.mk-password-field input:-webkit-autofill,
.mk-password-field input:-webkit-autofill:hover,
.mk-password-field input:-webkit-autofill:focus,
.mk-password-field input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 100px var(--mk-autofill-bg) inset;
            box-shadow: 0 0 0 100px var(--mk-autofill-bg) inset;
    -webkit-text-fill-color: var(--rz-text-color);
}

/* Firefox expune starea prin selectorul standard :autofill si accepta background-color. */
.mk-password-field input:autofill {
    background-color: var(--mk-autofill-bg);
}

/* Partea care lipsea: zona din dreapta (ochisorul) nu este <input>, deci browserul nu o
   coloreaza. Cu :has() aflam ca input-ul din caseta este autofill-at si colorăm intreg
   conteinerul de continut - input + slotul butonului - cu aceeasi nuanta.
   Regulile stau in blocuri separate: un :has() nesuportat invalideaza tot selectorul,
   iar asa se pierde doar colorarea, nu si restul stilurilor casetei. */
.mk-password-field .rz-form-field:has(input:-webkit-autofill) .rz-form-field-content {
    background-color: var(--mk-autofill-bg);
}

.mk-password-field .rz-form-field:has(input:autofill) .rz-form-field-content {
    background-color: var(--mk-autofill-bg);
}

/* Butonul rămâne transparent, ca sa se vada fundalul de dedesubt in loc sa taie o pata. */
.mk-password-field .mk-password-toggle,
.mk-password-field .mk-password-toggle:focus {
    background-color: transparent;
}
/* ==========================================================================
   BUTOANE - nicio eticheta tăiata, niciun buton peste marginea containerului
   Cauza reala a butoanelor tăiate pe telefon ("VALIDEAZA REPARTIZARI",
   "REPARTIZEAZA", "VALIDEAZA FACTURILE") sunt latimile FIXE din stilurile
   inline din .razor: width:250px, width:270px, width:200px, width:280px...
   Pe un card de ~250px pe telefon, un buton de 270px iese in afara, iar Radzen
   pune .rz-button { overflow: hidden } - deci eticheta nu doar iese, e TAIATA.

   Nu am umblat la fiecare stil inline (sunt ~20 si pe desktop sunt corecte).
   Regula de mai jos transforma orice latime fixa in "atat, dar niciodata mai
   mult decit containerul", ceea ce rezolva toate cazurile dintr-un loc,
   inclusiv cele care se vor adauga in viitor.
   ========================================================================== */
.rz-button {
    max-width: 100%;
}

@media (max-width: 640px) {
    /* Pe telefon eticheta are voie sa treaca pe doua rinduri, iar butonul creste
       in inaltime in loc sa taie textul (overflow:hidden al Radzen tăia).
       In tabele NU se aplica: acolo butoanele rămân pe un rind, vezi regula
       .rz-data-grid .rz-grid-table .rz-button, care e mai specifica. */
    /* !important pe height: multe butoane au inaltime FIXA in stilul inline din
       .razor (height: 40px / 42px / 45px). Cind eticheta trece pe doua rinduri,
       inaltimea fixa + .rz-button{overflow:hidden} al Radzen o TAIE - exact
       cazul "SALVEAZA DATE COMPANIE", care aparea ca "SALV / DA".
       Un stil inline bate o regula de stylesheet fara !important. */
    .rz-button {
        white-space: normal;
        height: auto !important;
        min-height: 2.25rem;
        line-height: 1.25;
        padding-block: 0.4rem;
    }

    /* Stilurile inline din .razor au si latimi MINIME fixe (min-width: 160px ...
       320px). Cu padding-urile de card si de pagina, un min-width de 300-320px
       depaseste un ecran de 360px si ar fi taiat de plasa de siguranta din
       body. Pe telefon le anulam: controlul se intinde cit ii permite ecranul. */
    .rz-button,
    .rz-textbox,
    .rz-dropdown,
    .rz-numeric,
    .rz-datepicker,
    .rz-form-field {
        min-width: 0 !important;
    }
}

/* ==========================================================================
   CARDURI MAI LATE SI DROPDOWN-URI MAI COMPACTE PE ECRANE MICI
   In paginile de cerere (Pasul 1/2/2.1/3) cardurile sunt imbricate: cardul de
   pas contine cardul de formular. Fiecare are padding: var(--rz-card-padding)
   = 1rem, deci se pierdeau ~4rem pe orizontala doar pe margini, exact acolo
   unde ecranul e cel mai ingust. Reducem padding-ul, nu structura.
   ========================================================================== */
@media (max-width: 640px) {
    .rz-card {
        --rz-card-padding: 0.55rem;
    }

    /* Cutia cu margine verde care tine tot continutul unui pas este un
       RadzenPanel (border-ul verde vine din PanelStyle() in CerereFactoring).
       Padding-ul lui implicit este --rz-panel-padding: 1rem, pe ambele parti. */
    .rz-panel {
        --rz-panel-padding: 0.4rem;
    }

    /* Containerul de pagina din MainLayout are clasa utilitara rz-p-4 (1.5rem).
       Pe telefon e spatiu irosit pe ambele margini. */
    .mk-page {
        padding: 0.4rem !important;
    }

    /* Radacina fiecarei pagini este un RadzenStack cu padding scris INLINE
       (ex. CerereFactoring: padding:1rem). Fiind inline, are nevoie de
       !important. Astea sunt ultimele margini dintre ecran si cutia verde,
       deci reducerea lor o lateste efectiv.
       Restringem la copilul direct al .mk-page, ca sa nu atingem stack-urile
       dinauntrul formularelor. */
    .mk-page > .rz-stack {
        padding-left: 0.25rem !important;
        padding-right: 0.25rem !important;
    }
}

/* Text mai mic si UNIFORM in toate campurile, nu doar in dropdown-uri.
   Radzen alimenteaza toate controalele de formular dintr-o singura variabila:
       input, .rz-textbox, .rz-numeric, .rz-datepicker > .rz-inputtext,
       .rz-textarea, .rz-multiselect, .rz-dropdown   ->  var(--rz-input-font-size)
   iar --rz-dropdown-item-font-size deriva si el din ea. Setind-o o singura data,
   eticheta selectata, textul tastat si elementele din lista au aceeasi marime -
   inainte doar dropdown-urile erau mai mici si se vedea neuniform.
   O punem pe :root ca sa fie mostenita si de panoul listei, care se randeaza
   intr-un popup la nivel de body, in afara arborelui componentei. */
@media (max-width: 1024px) {
    :root {
        --rz-input-font-size: 0.85rem;
    }

    .rz-dropdown-panel .rz-dropdown-item {
        padding-block: 0.5rem;
    }
}

/* ==========================================================================
   ECRANE MICI (telefon / tableta) - o singura scalare, de la radacina
   Radzen exprima aproape tot in rem, deci reducerea font-size pe <html>
   micsoreaza proportional text, spatieri si inaltimi de controale. E motivul
   pentru care nu reducem font-size si in interiorul tabelelor: s-ar compune.
   ========================================================================== */

/* Tableta in portrait / telefon in landscape */
@media (max-width: 768px) {
    html {
        font-size: 15px;
    }
}

/* Telefon in portrait */
@media (max-width: 480px) {
    html {
        font-size: 14px;
    }
}

/* ==========================================================================
   PROFIL UTILIZATOR - coloana decorativa din dreapta, pe telefon
   Pe desktop pagina are doua coloane: formularul in stanga, iar in dreapta
   logo-ul + starea contului + Log out. Pe telefon coloanele se pun una sub
   alta, si atunci logo-ul ajunge inghesuit intre "Telefon mobil" si badge-ul
   de stare, fara sa adauge nimic - acelasi logo este deja in bara de sus.
   ========================================================================== */
@media (max-width: 768px) {
    .mk-profile-logo {
        display: none;
    }

    /* Spatiul de separare dintre coloane nu mai are sens cind sunt una sub alta,
       si fura latime tocmai unde e cea mai putina. */
    .mk-profile-side {
        padding-left: 0 !important;
    }

    /* Badge-ul de stare si butoanele din aceasta coloana pe toata latimea, ca
       "Contul tau este activ si verificat!" sa nu se rupa pe 3 rinduri. */
    .mk-profile-side .rz-alert,
    .mk-profile-side .rz-button {
        width: 100%;
    }
}

/* ==========================================================================
   RANDURI ORIZONTALE CARE TREBUIE SA SE ASEZE VERTICAL PE TELEFON
   RadzenStack pune flex-direction in stil inline, de aceea este nevoie de
   !important. Fara asta, un text lung si un buton pe acelasi rind se strivesc
   la un cuvint pe rind (ex. "Daca mai ai o alta companie..." + "ADAUGA
   COMPANIE NOUA", care aparea ca "AD / COM / N").
   ========================================================================== */
@media (max-width: 768px) {
    .mk-stack-responsive {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.75rem !important;
    }

    /* Global: orice stack orizontal are voie sa treaca pe rindul urmator in loc
       sa-si strivasca elementele. Rezolva dintr-un loc tiparul "titlu H4 + buton
       Inapoi la lista", care se repeta in ~10 pagini (CerereFactoringCompletari,
       RescadentareInstrumente, Companie, ReadDetaliiKF etc.).
       !important pentru ca RadzenStack scrie flex-wrap in stilul inline.
       Pe stack-urile verticale regula nu are efect vizibil. */
/*    .rz-stack {
        flex-wrap: wrap !important;
    }*/
}

/* ==========================================================================
   ECRANE MARI (Full HD -> 4K)
   Interfata era gandita pentru ~1366-1920px. Pe monitoare mari se intindea pe
   toata latimea, cu text mic si rinduri de text foarte lungi.
   Doua mecanisme, amindoua progresive:

   1) font-size pe <html>. Radzen isi exprima aproape toate dimensiunile in rem,
      deci schimbarea marimii de la radacina scaleaza proportional TOATA
      interfata - text, spatieri, inaltimi de controale, meniul din stanga - nu
      doar tabelele. E motivul pentru care nu am umblat la fiecare component.

   2) .mk-page (containerul de continut din MainLayout). Primeste o latime maxima
      si se centreaza, ca rindurile sa rămână confortabil de citit. Latimea
      maxima creste odata cu ecranul, ca tabelele cu multe coloane sa aiba
      totusi spatiu si sa nu ajunga sa se deruleze degeaba.

   Pragurile sunt in px si nu depind de font-size, deci nu exista bucla de
   reactie intre cele doua mecanisme.
   ========================================================================== */

/* Full HD */
@media (min-width: 1920px) {
    html {
        font-size: 17px;
    }

    .mk-page {
        max-width: 1800px;
        margin-inline: auto;
    }
}

/* QHD / 1440p */
@media (min-width: 2560px) {
    html {
        font-size: 19px;
    }

    .mk-page {
        max-width: 2200px;
    }
}

/* Ultrawide / 5K scalat */
@media (min-width: 3200px) {
    html {
        font-size: 21px;
    }

    .mk-page {
        max-width: 2600px;
    }
}

/* 4K */
@media (min-width: 3840px) {
    html {
        font-size: 24px;
    }

    .mk-page {
        max-width: 3000px;
    }
}

/* ==========================================================================
   PAGINILE DE CONFIRMARE ALE DEBITORULUI
   Se deschid din link-ul primit pe email si folosesc EmptyLayout, deci nu
   primesc nimic din regulile de .mk-page.

   Latime: pagina era fixata la 1100px, pe un ecran de doua ori mai lat, si
   tabelele se derulau orizontal degeaba. Acum urmeaza ecranul.

   Scrisul din tabele: redus, ca sa incapa toate coloanele. Titlurile sunt
   formatate din cod (Titlu(...) in ConfirmareFacturi.razor: scoate liniile de
   subliniere si pune initiala mare), NU cu text-transform - acela ar prinde si
   valorile din celule.

   Blocul este ultimul din fisier intentionat: schimba --mk-grid-pad-x, iar
   pragurile de mai sus il schimba si ele. Fiind la sfarsit, castiga pentru
   aceste pagini la orice dimensiune de ecran.
   ========================================================================== */
.mk-confirmare {
    max-width: min(1800px, 96vw);
    margin: 1.5rem auto;
}

/* Cartonasele cu o singura informatie - eroare, succes, incarcare - stau
   inguste si centrate; un card lat cu doua rinduri de text arata gol. */
.mk-confirmare-mesaj {
    max-width: 640px;
    margin: 3rem auto;
}

/* Tabelele au multe coloane, venite direct din procedura. Reducem scrisul si
   padding-ul DOAR aici, prin variabilele declarate pe .rz-data-grid (vezi
   blocul TABELE): asa titlul si continutul coloanei isi iau in continuare
   padding-ul din acelasi loc si alinierea nu se desincronizeaza. */
.mk-confirmare .rz-data-grid {
    --mk-grid-pad-x: 0.5rem;
    --mk-grid-pad-y: 0.4rem;
    font-size: 0.8rem;
}

.mk-confirmare .rz-data-grid .rz-grid-table th,
.mk-confirmare .rz-data-grid .rz-grid-table td {
    font-size: 0.8rem;
}

.mk-confirmare .rz-data-grid .rz-grid-table thead th .rz-column-title {
    font-size: 0.75rem;
}

/* ---- TABELUL INCAPE INTREG, FARA DERULARE ORIZONTALA ----
   Procedura intoarce multe coloane si tabelul se latea dupa ele, iar din
   ~11 coloane se vedeau 6; restul se ajungeau prin derulare.

   Cheia este table-layout: fixed. Cu layout-ul implicit ("auto"), latimea
   tabelului o dicteaza CONTINUTUL: fiecare coloana cere cat ii trebuie celei mai
   lungi celule, suma depaseste containerul si apare derularea. Cu "fixed",
   latimea o dicteaza CONTAINERUL (width: 100%), iar spatiul se imparte intre
   coloane - deci tabelul nu poate depasi pagina, indiferent cate coloane vin.

   Radzen forteaza pe deasupra si o bara de derulare permanenta
   (.rz-data-grid-data { overflow-x: scroll !important }), care se vede chiar si
   cand nu e nimic de derulat - de aici impresia ca mai sunt coloane ascunse.
   Regula din blocul CONTAINERE o pune pe "auto", dar fara !important pierde;
   aici o cistiga.

   Pragurile de tableta/telefon pastreaza min-width pe tabel (900px / 700px),
   deci pe ecrane mici se deruleaza in continuare, intentionat: la latimile
   acelea coloanele ar deveni firicele. */
.mk-confirmare .rz-data-grid .rz-grid-table {
    table-layout: fixed;
    width: 100%;
}

.mk-confirmare .rz-data-grid .rz-data-grid-data {
    overflow-x: auto !important;
}

/* ---- ALEGERILE DE PE RANDURI ----
   Lista de actiuni a unei facturi este un ASPxRadioButtonList in ASPX, deci si aici
   randurile arata butoane radio, nu o bara de selectie colorata (blocul .mk-actiune
   care era aici a fost scos odata cu ea). Textele vin din nomenclatorul CDFA, deci
   pot fi lungi: le lasam sa se rupa pe mai multe rinduri in loc sa lateasca coloana. */
.mk-confirmare .rz-radiobutton-list .rz-radiobutton-box + span,
.mk-confirmare .rz-radiobutton-list label {
    white-space: normal;
    line-height: 1.25;
}

/* Cu latimi impuse pe coloana, un cuvant mai lung decit coloana ar ieși din
   celula. Aici - si NUMAI aici - permitem ruperea lui: mai bine un numar rupt pe
   doua rinduri decit unul retezat de marginea coloanei. In restul aplicatiei
   ruperea rămâne oprita (vezi blocul TOT CONTINUTUL VIZIBIL), unde spargea
   CUI-urile in doua. */
.mk-confirmare .rz-data-grid .rz-grid-table th,
.mk-confirmare .rz-data-grid .rz-grid-table td,
.mk-confirmare .rz-data-grid .rz-cell-data,
.mk-confirmare .rz-data-grid .rz-column-title {
    overflow-wrap: anywhere;
}

/* ==========================================================================
   RANDUL DE BUTOANE DE LA FINALUL UNUI PAS (Inapoi ... Valideaza)
   Butoanele Radzen sunt "inline-block", deci fara nimic in jur ele se lipesc:
   intre ele ramane doar spatiul dintre etichete, vreo 4px. Aici facem randul
   flex si punem o distanta reala intre ele.
   --mk-spatiu-butoane: 2.5rem = 40px, adica aproximativ 1 cm pe un ecran
   obisnuit (96 dpi). Se schimba dintr-un singur loc, pentru toate cele patru
   randuri care folosesc clasa.
   flex-wrap lasa randul sa se rupa pe ecrane inguste, ca pagina sa nu ajunga
   sa se deruleze pe orizontala (vezi blocul PLASA DE SIGURANTA de mai sus). */
:root {
    --mk-spatiu-butoane: 2.5rem;
}

.mk-rand-butoane {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--mk-spatiu-butoane);
    margin-top: 1.5rem;
}

/* Autocompletarea din Chrome nu declanseaza "oninput", deci Radzen nu afla ca s-a umplut campul si
   eticheta plutitoare ramane peste text (vazut la Creare cont: e-mail si parola autocompletate).
   Aceeasi declaratie ca regula Radzen pentru ":focus ~ .rz-form-field-label" (material-base.css). */
.rz-form-field-content > input:-webkit-autofill ~ .rz-form-field-label,
.rz-form-field-content > :has(input:-webkit-autofill) ~ .rz-form-field-label {
    inset-inline-start: var(--rz-form-field-label-inset-inline-start);
    inset-inline-end: auto;
    inset-block-start: var(--rz-form-field-label-floating-top);
    padding-block-start: 0;
    padding-block-end: 0;
    transform: translate(0, 0);
    color: var(--rz-input-placeholder-color);
    background-color: var(--rz-form-field-label-floating-background-color);
    font-size: var(--rz-form-field-label-floating-font-size, 0.75rem);
    line-height: 1rem;
    max-width: calc(100% - 1.5rem);
}