/* ==========================================================================
   TEMA MK FACTORING - identitatea vizuala a site-ului www.mk-factoring.ro,
   aplicata peste Radzen material-base.css.

   Se incarca DUPA app.css. Paleta (--mk-*) este declarata in app.css, ca acel
   fisier sa ramana de sine statator; aici sunt DOAR suprascrieri de aspect:
   variabile de tema Radzen + reguli pe componente. Nu exista nicio regula de
   layout sau de comportament - tot ce tine de latimi, derulare, tabele pe
   telefon etc. ramane in app.css.

   Principiu: schimbam culori, fonturi, rotunjiri si umbre; nu schimbam
   structura DOM-ului si nici dimensiunile functionale ale controalelor.
   ========================================================================== */

/* ---------- 1. Variabilele de tema Radzen ---------- */
:root {
    /* culorile principale */
    --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);
    --rz-on-primary-lighter: var(--mk-primary-dark);

    /* secundar: movul din logo, intunecat suficient pentru text pe alb */
    --rz-secondary: #7c5cd6;
    --rz-secondary-light: #9b7fe6;
    --rz-secondary-lighter: rgba(124, 92, 214, 0.12);
    --rz-secondary-dark: #6446b8;
    --rz-secondary-darker: #4f3796;
    --rz-on-secondary-lighter: #4f3796;

    --rz-info: var(--mk-primary-light);
    --rz-info-lighter: rgba(74, 141, 248, 0.14);

    /* fundaluri si text */
    --rz-body-background-color: var(--mk-bg);
    --rz-base-background-color: var(--mk-surface);
    --rz-layout-background-color: var(--mk-bg);
    --rz-text-color: var(--mk-text);
    --rz-text-title-color: var(--mk-text);
    --rz-text-secondary-color: var(--mk-muted);
    --rz-text-tertiary-color: var(--mk-muted);
    --rz-link-color: var(--mk-primary);

    /* rotunjiri */
    --rz-border-radius: 12px;
    --rz-card-border-radius: var(--mk-radius);
    --rz-card-border: 1px solid var(--mk-line);
    --rz-card-shadow: var(--mk-shadow);
    --rz-button-border-radius: 999px;
    --rz-input-border-radius: 10px;
    --rz-dialog-border-radius: 18px;
    --rz-alert-border-radius: 12px;
    --rz-notification-border-radius: 12px;
    --rz-panel-border-radius: 14px;
    --rz-badge-border-radius: 999px;
    --rz-badge-pill-border-radius: 999px;
    --rz-pager-button-border-radius: 999px;

    /* antet */
    --rz-header-background-color: #fbfcfe;
    --rz-header-color: var(--mk-text);
    --rz-header-shadow: none;
    --rz-header-min-height: 4rem;
    --rz-sidebar-toggle-color: #fff;
    --rz-sidebar-toggle-hover-background-color: rgba(255, 255, 255, 0.12);
    --rz-sidebar-toggle-hover-color: #fff;

    /* bara laterala + meniu */
    --rz-sidebar-background-color: var(--mk-surface);
    --rz-sidebar-border-inline-end: 1px solid var(--mk-line);
    --rz-sidebar-width: 280px;
    --rz-panel-menu-item-color: var(--mk-text);
    --rz-panel-menu-item-border: none;
    --rz-panel-menu-item-border-radius: 12px;
    --rz-panel-menu-item-margin-inline: 0.75rem;
    --rz-panel-menu-item-margin-block: 0.125rem;
    --rz-panel-menu-item-padding-block: 0.7rem;
    --rz-panel-menu-item-padding-inline: 0.9rem;
    --rz-panel-menu-item-hover-background-color: rgba(74, 141, 248, 0.08);
    --rz-panel-menu-item-hover-color: var(--mk-text);
    --rz-panel-menu-item-active-background-color: var(--mk-primary-lighter);
    --rz-panel-menu-item-active-color: var(--mk-primary-dark);
    --rz-panel-menu-item-active-indicator: transparent;
    --rz-panel-menu-icon-color: var(--mk-muted);
    --rz-panel-menu-item-2nd-level-border-radius: 10px;
    --rz-panel-menu-item-2nd-level-color: var(--mk-muted);
    --rz-panel-menu-item-2nd-level-hover-background-color: rgba(74, 141, 248, 0.08);
    --rz-panel-menu-item-2nd-level-active-background-color: var(--mk-primary-lighter);
    --rz-panel-menu-item-2nd-level-active-color: var(--mk-primary-dark);
    --rz-panel-menu-font-weight: 500;

    /* tabele */
    --rz-grid-border: 1px solid var(--mk-line);
    --rz-grid-border-radius: 14px;
    --rz-grid-header-background-color: #f3f6fb;
    --rz-grid-header-color: var(--mk-muted);
    --rz-grid-header-font-weight: 600;
    --rz-grid-header-cell-border-bottom: 1px solid var(--mk-line);
    --rz-grid-cell-border: 1px solid #eef1f6;
    --rz-grid-stripe-background-color: #fafbfe;
    --rz-grid-header-sorted-background-color: #eaf0fa;

    /* campuri de formular */
    --rz-border-normal: 1px solid #cdd5e3;
    --rz-input-focus-shadow: 0 0 0 4px rgba(74, 141, 248, 0.14);
    --rz-form-field-focus-shadow: 0 0 0 4px rgba(74, 141, 248, 0.14);
    --rz-form-field-filled-background-color: #f3f6fb;
    --rz-form-field-filled-hover-background-color: #eaf0fa;
    --rz-form-field-filled-border-radius: 10px 10px 0 0;

    /* tab-uri */
    --rz-tabs-tab-color: var(--mk-muted);
    --rz-tabs-tab-selected-color: var(--mk-primary);
    --rz-tabs-tab-font-weight: 600;
}

/* ---------- 2. Tipografie ---------- */
body,
.rz-layout,
.rz-body,
.rz-button,
.rz-textbox,
.rz-inputtext,
.rz-dropdown,
.rz-dropdown-panel,
.rz-dialog,
.rz-notification,
.rz-tooltip,
input, button, select, textarea {
    font-family: var(--mk-font);
}

.rz-text-h1, .rz-text-h2, .rz-text-h3, .rz-text-h4, .rz-text-h5, .rz-text-h6,
.rz-text-display-h1, .rz-text-display-h2, .rz-text-display-h3 {
    font-family: var(--mk-font);
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.2;
}

.rz-text-subtitle1, .rz-text-subtitle2 {
    font-weight: 600;
}

/* ---------- 3. Antet ---------- */
.rz-header {
    position: relative;
    border-bottom: 0;
}

    /* linia in gradient de sub antet: semnatura vizuala a site-ului */
    .rz-header::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 3px;
        background: var(--mk-grad);
    }

.rz-sidebar-toggle {
    border-radius: 12px;
}

/* ---------- 4. Bara laterala / meniu ---------- */
.rz-sidebar {
    box-shadow: none;
}

.rz-panel-menu {
    padding-block: 0.75rem;
}

    .rz-panel-menu .rz-navigation-item-link {
        transition: background-color .15s ease, color .15s ease;
    }

    /* submeniurile: linie fina in stanga, ca pe site in listele cu bife */
    .rz-panel-menu .rz-navigation-menu .rz-navigation-menu {
        border-left: 2px solid var(--mk-line);
        margin-left: 1.9rem;
    }

/* ---------- 5. Carduri si panouri ---------- */
.rz-card {
    transition: box-shadow .2s ease;
}

.rz-panel {
    border: 1px solid var(--mk-line);
    box-shadow: var(--mk-shadow);
}

/* ---------- 6. Butoane ---------- */
.rz-button {
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: none;
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, filter .15s ease;
}

    /* Butonul principal poarta gradientul din logo. background-image bate
       background-color-ul pus inline in unele pagini (acum var(--mk-primary)),
       deci TOATE butoanele principale arata la fel, fara sa umblam in .razor.
       Variantele flat/text/outlined raman cu fundal plat (regula de mai jos). */
    .rz-button.rz-primary:not(.rz-variant-flat):not(.rz-variant-text):not(.rz-variant-outlined) {
        background-image: var(--mk-grad);
        color: #fff;
        box-shadow: 0 6px 16px rgba(74, 141, 248, 0.32);
    }

        .rz-button.rz-primary:not(.rz-variant-flat):not(.rz-variant-text):not(.rz-variant-outlined):hover:not([disabled]) {
            filter: brightness(1.06);
            box-shadow: 0 10px 22px rgba(74, 141, 248, 0.4);
            transform: translateY(-1px);
        }

    .rz-button.rz-primary.rz-variant-flat {
        background-image: none;
    }

    .rz-button:not(.rz-variant-text):not(.rz-variant-flat):hover:not([disabled]) {
        transform: translateY(-1px);
    }

    .rz-button[disabled] {
        filter: none;
        transform: none;
    }

/* butoanele "Light" (fundal deschis) primesc contur subtire, ca pe site */
.rz-button.rz-light:not(.rz-variant-text):not(.rz-variant-flat) {
    border: 1px solid var(--mk-line);
}

/* ---------- 7. Campuri de formular ---------- */
.rz-textbox,
.rz-inputtext,
.rz-numeric,
.rz-dropdown,
.rz-datepicker,
.rz-textarea,
.rz-form-field.rz-variant-outlined .rz-form-field-content {
    border-radius: var(--rz-input-border-radius);
}

.rz-form-field .rz-form-field-label {
    font-weight: 500;
}

/* ---------- 8. Tabele ---------- */
.rz-data-grid {
    border-radius: var(--rz-grid-border-radius);
    overflow: hidden;
    background: var(--mk-surface);
    box-shadow: var(--mk-shadow);
}

    .rz-data-grid .rz-grid-table thead th .rz-column-title {
        font-size: 0.78rem;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .rz-data-grid .rz-grid-table tbody tr:hover > td {
        background-color: rgba(74, 141, 248, 0.06);
    }

.rz-pager {
    padding-block: 0.5rem;
}

/* ---------- 9. Tab-uri ---------- */
.rz-tabview-nav .rz-tabview-selected {
    position: relative;
}

    .rz-tabview-nav .rz-tabview-selected::after {
        content: "";
        position: absolute;
        left: 0.75rem;
        right: 0.75rem;
        bottom: 0;
        height: 3px;
        border-radius: 3px 3px 0 0;
        background: var(--mk-grad);
    }

/* ---------- 10. Alerte, badge-uri, dialoguri ---------- */
.rz-alert {
    border: 1px solid transparent;
}

.rz-badge {
    font-weight: 600;
}

.rz-dialog {
    border: 1px solid var(--mk-line);
}

.rz-dialog-titlebar {
    font-weight: 700;
}

/* ---------- 11. Elemente proprii (prefix mk-) ---------- */

/* text in gradient, ca "SOON" de pe site */
.mk-grad-text {
    background: var(--mk-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* eticheta mica de deasupra titlurilor */
.mk-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--mk-primary-lighter);
    color: var(--mk-primary);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

    .mk-eyebrow i {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--mk-grad);
    }

/* ---- Pagina principala, vizitator neautentificat ---- */
.mk-hero {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    background: var(--mk-surface);
    border: 1px solid var(--mk-line);
    box-shadow: var(--mk-shadow-lg);
    padding: clamp(2.5rem, 6vw, 5rem) clamp(1.25rem, 5vw, 4rem);
    text-align: center;
    margin: clamp(0.5rem, 3vw, 2rem) auto 1.5rem;
    max-width: 1100px;
}

.mk-hero-blobs {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.mk-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: .45;
}

.mk-blob-1 {
    width: 60%;
    padding-top: 60%;
    top: -40%;
    left: -20%;
    background: radial-gradient(circle at 40% 40%, var(--mk-c1), var(--mk-c2) 60%, transparent 72%);
}

.mk-blob-2 {
    width: 55%;
    padding-top: 55%;
    bottom: -45%;
    right: -20%;
    background: radial-gradient(circle at 60% 60%, var(--mk-c3), var(--mk-c2) 55%, transparent 72%);
}

.mk-hero-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    max-width: 720px;
    margin: 0 auto;
}

.mk-hero-logo {
    font-size: 40px;
}

.mk-hero-title {
    font-size: clamp(30px, 4.5vw, 48px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--mk-text);
}

.mk-hero-lead {
    font-size: clamp(16px, 2vw, 19px);
    line-height: 1.55;
    color: var(--mk-muted);
    margin: 0;
    max-width: 560px;
}

.mk-hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.mk-hero-note {
    font-size: 13px;
    color: var(--mk-muted);
    margin: 0;
}

/* cele trei atuuri, sub hero */
.mk-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    max-width: 1100px;
    margin: 0 auto;
}

.mk-feature {
    background: var(--mk-surface);
    border: 1px solid var(--mk-line);
    border-radius: var(--mk-radius);
    padding: 1.5rem;
    box-shadow: var(--mk-shadow);
}

    .mk-feature .mk-feature-icon {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: var(--mk-grad);
        color: #fff;
        margin-bottom: 0.9rem;
    }

    .mk-feature h3 {
        margin: 0 0 0.35rem;
        font-size: 1.05rem;
        font-weight: 700;
    }

    .mk-feature p {
        margin: 0;
        font-size: 0.92rem;
        color: var(--mk-muted);
        line-height: 1.5;
    }

/* ---- Pagina principala, utilizator autentificat ---- */
.mk-welcome {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    border-radius: 24px;
    padding: clamp(1.5rem, 4vw, 2.75rem);
    background: var(--mk-surface);
    border: 1px solid var(--mk-line);
    box-shadow: var(--mk-shadow);
}

    .mk-welcome .mk-welcome-text {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        max-width: 640px;
    }

    .mk-welcome .mk-logo {
        position: relative;
        font-size: 28px;
        flex: none;
    }

    /* butoanele de pe pagina de start dupa login (26.10.2026) */
    .mk-welcome .mk-welcome-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
        margin-top: 0.5rem;
    }

@media (max-width: 860px) {
    .mk-features {
        grid-template-columns: 1fr;
    }

    .mk-welcome .mk-logo {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rz-button, .rz-card, .rz-panel-menu .rz-navigation-item-link {
        transition: none;
    }
}

/* ---------- 12. Stepper (indicator de progres) ---------- */
.mk-stepper {
    display: flex;
    gap: 0.5rem;
    margin: 0.75rem 0 0.25rem;
    padding: 0.5rem;
    border-radius: 14px;
    background: var(--mk-surface);
    border: 1px solid var(--mk-line);
    overflow-x: auto;
}

.mk-step {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.8rem;
    border-radius: 10px;
    color: var(--mk-muted);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: default;
    transition: background-color .15s;
}

    /* eticheta se rupe pe doua randuri in loc sa fie taiata */
    .mk-step .mk-step-label { min-width: 0; white-space: normal; line-height: 1.15; }

    .mk-step .mk-step-num {
        width: 28px;
        height: 28px;
        flex: none;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 0.8rem;
        font-weight: 700;
        background: #eef1f6;
        color: var(--mk-muted);
    }

    .mk-step .mk-step-num .rzi { font-size: 1rem; }

    .mk-step.current {
        background: var(--mk-primary-lighter);
        color: var(--mk-primary-dark);
        font-weight: 600;
    }

        .mk-step.current .mk-step-num {
            background: var(--mk-grad);
            color: #fff;
        }

    .mk-step.done {
        color: var(--mk-text);
        cursor: pointer;
    }

        .mk-step.done:hover { background: rgba(74, 141, 248, 0.08); }

        .mk-step.done .mk-step-num {
            background: #e3f5ec;
            color: #0e8a4e;
        }

.mk-stepper-sm .mk-step { min-width: 120px; font-size: 0.85rem; }

/* Pe telefon si tableta (meniul lateral ocupa loc): cele 4 cercuri raman toate vizibile, fiecare cu eticheta lui dedesubt
   (pe 1-2 randuri), pasul curent evidentiat. Fara derulare orizontala. */
@media (max-width: 1024px) {
    .mk-stepper { overflow: visible; gap: 0.2rem; padding: 0.4rem 0.25rem; }
    .mk-step { flex: 1 1 0; min-width: 0; flex-direction: column; justify-content: flex-start; text-align: center; gap: 0.3rem; padding: 0.35rem 0.15rem; }
    .mk-step .mk-step-num { width: 26px; height: 26px; font-size: 0.75rem; }
    .mk-step .mk-step-label { font-size: 0.7rem; line-height: 1.1; }
}

/* ---------- 13. Lista documentelor cerute (Pasul 3) ---------- */
.mk-doc-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.mk-doc-item {
    display: block;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--mk-line);
    border-radius: 10px;
    cursor: pointer;
    background: var(--mk-surface);
    transition: border-color .15s, background-color .15s;
}

    .mk-doc-item:hover { border-color: var(--mk-primary-light); }

    .mk-doc-item .mk-doc-head {
        display: flex;
        align-items: center;
        gap: 0.6rem;
    }

    /* fisierele unui tip, sub antetul lui */
    .mk-doc-item .mk-doc-files {
        margin: 0.45rem 0 0.1rem 1.8rem;
        border-left: 2px solid var(--mk-line);
        padding-left: 0.6rem;
        display: flex;
        flex-direction: column;
        gap: 0.2rem;
    }

    .mk-doc-files-orfane { margin-top: 0.5rem; display: flex; flex-direction: column; gap: 0.3rem; }

    .mk-doc-file {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        font-size: 0.85rem;
        min-width: 0;
    }

        .mk-doc-file .mk-doc-file-icon { color: var(--mk-muted); font-size: 1.05rem; }
        .mk-doc-file .mk-doc-file-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .mk-doc-file .mk-doc-file-date { color: var(--mk-muted); font-size: 0.78rem; white-space: nowrap; }
        .mk-doc-file .rz-button { min-width: 0; padding: 0.15rem; }

    .mk-doc-item.selected {
        border-color: var(--mk-primary);
        background: var(--mk-primary-lighter);
    }

    .mk-doc-item .mk-doc-status { display: inline-flex; color: #b3bccb; }
    .mk-doc-item .mk-doc-status.ok { color: #0e8a4e; }
    .mk-doc-item .mk-doc-status .rzi { font-size: 1.15rem; }
    .mk-doc-item .mk-doc-name { flex: 1; font-size: 0.9rem; }

    .mk-doc-item .mk-doc-badge {
        font-size: 0.7rem;
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        padding: 2px 8px;
        border-radius: 999px;
        background: #fdf0e6;
        color: #b4561a;
    }

        .mk-doc-item .mk-doc-badge.ok { background: #e3f5ec; color: #0e8a4e; }

    .mk-doc-item .mk-doc-name { display: flex; flex-direction: column; gap: 2px; }

    .mk-doc-item .mk-doc-model {
        font-size: 0.78rem;
        color: var(--mk-primary);
        text-decoration: underline;
        display: inline-flex;
        align-items: center;
        gap: 3px;
    }

        .mk-doc-item .mk-doc-model .rzi { font-size: 0.95rem; }

    /* butonul de incarcare al randului, cu InputFile invizibil peste el */
    .mk-doc-item .mk-doc-upload {
        position: relative;
        display: inline-block;
        overflow: hidden;
        flex: none;
    }

.mk-doc-item { cursor: default; }

/* obligatoriu vs optional (24.10.2026): chenar colorat in stanga + eticheta mica langa nume */
.mk-doc-item.obligatoriu { border-left: 4px solid var(--mk-primary); }
    .mk-doc-item.obligatoriu.ok { border-left-color: #0e8a4e; }
.mk-doc-item.optional { border-style: dashed; background: var(--mk-bg); }
    .mk-doc-item.optional.ok { border-style: solid; background: var(--mk-surface); }
.mk-doc-tag {
    display: inline-block; vertical-align: middle; margin-left: 0.35rem;
    font-size: 0.66rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
    padding: 1px 7px; border-radius: 999px;
    background: var(--mk-primary-lighter); color: var(--mk-primary-dark);
}
    .mk-doc-tag.optional { background: #eef1f6; color: var(--mk-muted); }

@media (max-width: 700px) {
    /* pe telefon: numele pe primul rand, starea si butonul pe al doilea, aliniate la dreapta */
    .mk-doc-item .mk-doc-head { flex-wrap: wrap; row-gap: 0.4rem; }
    .mk-doc-item .mk-doc-name { flex: 1 1 calc(100% - 2rem); }
    .mk-doc-item .mk-doc-badge { margin-left: auto; }
    .mk-doc-item .mk-doc-files { margin-left: 0.4rem; }
    .mk-doc-file .mk-doc-file-date { display: none; }
}

/* ---------- 14. Ecranul de confirmare a cererii ---------- */
.mk-final { max-width: 760px; margin: 1.5rem auto; }
.mk-final-card { padding: clamp(1.5rem, 4vw, 2.5rem); }

.mk-final-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--mk-grad);
    color: #fff;
    box-shadow: 0 12px 28px rgba(74, 141, 248, 0.35);
}

    .mk-final-icon .rzi { font-size: 2.2rem; }

.mk-next-steps {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin: 0.5rem 0 0.75rem;
    text-align: left;
}

.mk-next-step {
    display: flex;
    gap: 0.6rem;
    padding: 0.9rem;
    border: 1px solid var(--mk-line);
    border-radius: 12px;
    background: var(--mk-bg);
}

    .mk-next-step p { margin: 0.2rem 0 0; font-size: 0.85rem; color: var(--mk-muted); line-height: 1.4; }

.mk-next-num {
    width: 26px;
    height: 26px;
    flex: none;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    background: var(--mk-primary-lighter);
    color: var(--mk-primary-dark);
}

@media (max-width: 700px) {
    .mk-next-steps { grid-template-columns: 1fr; }
}

/* ---------- 15. Meniul lateral simplificat ---------- */
.rz-sidebar { display: flex; flex-direction: column; }
.rz-sidebar > .rz-sidebar-content, .rz-sidebar > div:first-child { flex: 1 1 auto; display: flex; flex-direction: column; }

.mk-nav {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    flex: 1 1 auto;
}

.mk-nav-cta { padding: 1rem 0.75rem 0.5rem; }

    .mk-nav-cta .rz-button { font-size: 0.95rem; height: 44px; }

.mk-nav > * { flex: 0 0 auto; }

.mk-nav-footer {
    margin-top: auto !important;
    flex: 0 0 auto;
    justify-content: flex-end;   /* daca Radzen intinde cutia, continutul sta tot jos */
    padding: 0.75rem 0.75rem 1rem;
    border-top: 1px solid var(--mk-line);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.mk-nav-user {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.25rem 0.25rem 0;
    min-width: 0;
}

.mk-nav-avatar {
    width: 36px;
    height: 36px;
    flex: none;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--mk-grad);
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
}

.mk-nav-user-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
    .mk-nav-user-text strong { font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .mk-nav-user-text small { font-size: 0.75rem; color: var(--mk-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mk-nav-footer .mk-nav-logout.rz-button { justify-content: flex-start; color: var(--mk-text) !important; font-weight: 600; }

.mk-nav-help {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.78rem;
    color: var(--mk-muted);
    padding: 0.25rem;
}

    .mk-nav-help a { color: var(--mk-primary); text-decoration: none; font-weight: 500; }

/* ---------- 16. File (In lucru / Active / Inchise) ---------- */
.mk-tabs {
    display: flex;
    gap: 0.35rem;
    padding: 0.3rem;
    border-radius: 999px;
    background: var(--mk-surface);
    border: 1px solid var(--mk-line);
    /* aceeasi latime cu campul de cautare de sub ele (max 520px), cele trei file egale */
    width: 100%;
    max-width: 520px;
}

.mk-tab {
    flex: 1 1 0;
    text-align: center;
    padding: 0.45rem 1rem;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--mk-muted);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s, color .15s;
}

    .mk-tab:hover { color: var(--mk-text); background: rgba(74, 141, 248, 0.08); }

    .mk-tab.active { background: var(--mk-grad); color: #fff; }

/* ---------- 18. Antet deschis + meniu dupa modelul mk-kredit.ro ---------- */
.rz-header {
    /* fara backdrop-filter: ar face antetul containing block pentru bara de jos (position: fixed) */
    border-bottom: 1px solid var(--mk-line);
}

.mk-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    min-height: var(--rz-header-min-height, 4rem);
    padding: 0 1.25rem;
}

.mk-header-logo { font-size: 20px; text-decoration: none; flex: none; display: block; }

.mk-topnav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    flex: 1 1 auto;
    min-width: 0;
}

/* bara-pastila alba cu linkuri text + butonul Cerere noua (ca pe site) */
.mk-pill {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    padding: 0.3rem;
    border-radius: 999px;
    background: var(--mk-surface);
    border: 1px solid var(--mk-line);
    box-shadow: var(--mk-shadow);
    margin-right: auto;
}

.mk-pill-link,
.mk-pill-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.95rem;
    border-radius: 999px;
    border: 0;
    background: transparent;
    color: var(--mk-muted);
    font: inherit;
    font-size: 0.92rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .15s, color .15s;
}

    .mk-pill-link .rzi, .mk-pill-cta .rzi { font-size: 1.2rem; }

    /* !important: Radzen coloreaza in alb linkurile din antet (.rz-header a) */
    .mk-pill .mk-pill-link { color: var(--mk-muted) !important; }
    .mk-pill .mk-pill-link:hover { color: var(--mk-text) !important; background: rgba(74, 141, 248, 0.08); }
    .mk-pill .mk-pill-link.active { color: var(--mk-text) !important; background: var(--mk-primary-lighter); }
    .mk-pill .mk-pill-cta { color: #fff !important; }

.mk-pill-cta {
    background-image: var(--mk-grad);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 6px 16px rgba(74, 141, 248, 0.3);
    margin-left: 0.35rem;
}

    .mk-pill-cta:hover { filter: brightness(1.06); color: #fff; }

/* vizitator: un singur link discret in dreapta antetului (25.10.2026) */
.mk-anon-link {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--mk-primary) !important;   /* !important: Radzen albeste linkurile din antet */
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s;
}
    .mk-anon-link:hover { background: var(--mk-primary-lighter); }
    .mk-anon-link .mk-anon-muted { color: var(--mk-muted); font-weight: 500; }
    @media (max-width: 480px) { .mk-anon-link .mk-anon-muted { display: none; } }

/* meniuri mici (dropdown) */
.mk-dd { position: relative; }

.mk-dd-list {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 240px;
    background: var(--mk-surface);
    border: 1px solid var(--mk-line);
    border-radius: 14px;
    box-shadow: var(--mk-shadow-lg);
    padding: 0.4rem;
    z-index: 60;
    display: flex;
    flex-direction: column;
}

.mk-dd-right { left: auto; right: 0; }

.mk-dd-list a, .mk-dd-list button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.8rem;
    border-radius: 9px;
    border: 0;
    background: transparent;
    color: var(--mk-text);
    text-decoration: none;
    font: inherit;
    font-size: 0.92rem;
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
}

    .mk-dd-list a:hover, .mk-dd-list button:hover { background: var(--mk-primary-lighter); }

    .mk-dd-list .rzi { font-size: 1.15rem; color: var(--mk-muted); }

.mk-dd-head {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0.8rem 0.6rem;
    border-bottom: 1px solid var(--mk-line);
    margin-bottom: 0.3rem;
}

    .mk-dd-head strong { font-size: 0.92rem; }
    .mk-dd-head small { font-size: 0.78rem; color: var(--mk-muted); }

.mk-dd-backdrop { position: fixed; inset: 0; z-index: 55; }

/* pastila utilizatorului (dreapta) */
.mk-user-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.6rem 0.25rem 0.3rem;
    border-radius: 999px;
    border: 1px solid var(--mk-line);
    background: var(--mk-surface);
    box-shadow: var(--mk-shadow);
    color: var(--mk-text);
    font: inherit;
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    max-width: 240px;
}

    .mk-user-pill .mk-nav-avatar { width: 32px; height: 32px; font-size: 0.78rem; }

    .mk-user-pill .mk-user-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    .mk-user-pill .mk-user-caret { font-size: 1.1rem; color: var(--mk-muted); }

/* bara de jos: ascunsa pe desktop */
.mk-bottomnav { display: none; }

@media (max-width: 900px) {
    .mk-header { padding: 0 0.75rem; gap: 0.5rem; }
    .mk-header-logo img { height: 28px; width: auto; display: block; }

    .mk-pill-desktop { display: none; }

    .mk-user-pill { padding: 0.15rem; border: 0; box-shadow: none; background: transparent; }
        .mk-user-pill .mk-user-name, .mk-user-pill .mk-user-caret { display: none; }
        .mk-user-pill .mk-nav-avatar { width: 36px; height: 36px; }

    /* bara de navigare de jos, mereu vizibila */
    .mk-bottomnav {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 50;
        display: flex;
        align-items: stretch;
        justify-content: space-around;
        min-height: 64px;
        padding: 0.35rem 0.5rem calc(0.35rem + env(safe-area-inset-bottom));
        background: rgba(255, 255, 255, 0.96);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-top: 1px solid var(--mk-line);
        box-shadow: 0 -8px 24px rgba(28, 44, 80, 0.08);
    }

    .mk-bottomnav-item {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        border: 0;
        background: transparent;
        color: var(--mk-muted);
        font: inherit;
        font-size: 0.68rem;
        font-weight: 500;
        text-decoration: none;
        border-radius: 12px;
        padding: 0.25rem 0.2rem;
        cursor: pointer;
        white-space: nowrap;
    }

        .mk-bottomnav-item .rzi { font-size: 1.5rem; }

    .mk-bottomnav .mk-bottomnav-item { color: var(--mk-muted) !important; }
    .mk-bottomnav .mk-bottomnav-item.active { color: var(--mk-primary) !important; }
    .mk-bottomnav .mk-bottomnav-cta { color: var(--mk-text) !important; font-weight: 600; }

    .mk-bottomnav-plus {
        width: 44px;
        height: 44px;
        margin-top: -18px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: var(--mk-grad);
        color: #fff;
        box-shadow: 0 8px 20px rgba(74, 141, 248, 0.4);
        border: 3px solid #fff;
    }

        .mk-bottomnav-plus .rzi { font-size: 1.5rem; }

    .mk-bottomnav-dd { top: auto; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); }

    /* continutul nu ramane sub bara de jos */
    .rz-layout .rz-body { padding-bottom: 80px; }
}

/* ---------- 19. Lista de cereri: carduri pe toate ecranele (24.10.2026) ---------- */
/* Pana acum cardurile erau doar pe telefon, iar pe desktop/tableta se afisa tabelul Radzen.
   Acum cardurile sunt peste tot: pe tableta pe doua coloane, pe desktop pe doua-trei, iar
   tabelul (.mk-grid-desktop) nu se mai afiseaza deloc. Codul lui ramane pentru dialogurile
   pe care le foloseste (semnare, contracte). */
.mk-cards {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    max-width: 1400px;
}

/* desktop / tableta (peste 900px): un card pe rand, datele pe patru coloane, butonul de continuare
   nu se intinde pe tot randul. Varianta de telefon (sub 900px) ramane neatinsa. */
@media (min-width: 901px) {
    .mk-card-cerere { padding: 1rem 1.25rem; }
    .mk-cards .mk-card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem 1.25rem; }
    .mk-cards .mk-card-cta .rz-button:first-child { flex: 0 1 320px; }
    .mk-cards .mk-card-toggles { gap: 0.25rem 1.5rem; }
    .mk-lista-cereri { width: 100%; max-width: 1400px; margin-inline: auto; }
}
.mk-grid-desktop { display: none !important; }

.mk-card-cerere {
    background: var(--mk-surface);
    border: 1px solid var(--mk-line);
    border-radius: 16px;
    box-shadow: var(--mk-shadow);
    padding: 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.mk-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }
.mk-card-titlu { min-width: 0; }
.mk-card-nr { font-weight: 700; font-size: 1.05rem; }
.mk-card-data { font-weight: 400; font-size: 0.8rem; color: var(--mk-muted); margin-left: 0.3rem; }
.mk-card-tip { font-size: 0.85rem; color: var(--mk-muted); }

.mk-card-stare {
    flex: none;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--mk-primary-lighter);
    color: var(--mk-primary-dark);
    text-align: center;
    max-width: 45%;
}

.mk-card-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 0.75rem;
    font-size: 0.88rem;
}

    .mk-card-grid > div { display: flex; flex-direction: column; min-width: 0; }
    .mk-card-grid small { font-size: 0.72rem; color: var(--mk-muted); text-transform: uppercase; letter-spacing: 0.03em; }
    .mk-card-grid span { font-weight: 600; overflow-wrap: anywhere; }

.mk-card-verde { color: #0e8a4e !important; }

.mk-card-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }

    .mk-card-actions .rz-button { scale: 1; }

.mk-card-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    align-self: flex-start;
    border: 0;
    background: transparent;
    color: var(--mk-primary);
    font: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.2rem 0;
}

.mk-card-facturi { display: flex; flex-direction: column; gap: 0.5rem; }

.mk-card-factura {
    border: 1px solid var(--mk-line);
    border-radius: 12px;
    padding: 0.6rem 0.7rem;
    background: var(--mk-bg);
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.86rem;
}

.mk-card-factura-rand { display: flex; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; }
.mk-card-factura-sec { font-size: 0.78rem; color: var(--mk-muted); }

@media (max-width: 900px) {
    .mk-cards { display: flex; flex-direction: column; gap: 0.75rem; }
    .mk-grid-desktop { display: none; }
}

/* ---------- 20. Toate tabelele pe telefon: un card pe rand ---------- */
/* Eticheta coloanei vine din data-label, pus de js/grid-cards.js din capul de tabel.
   Un tabel poate refuza transformarea cu clasa mk-no-cards pe RadzenDataGrid. */
.mk-only-mobile { display: none; }

@media (max-width: 760px) {
    .mk-only-mobile { display: block; margin-bottom: 0.5rem; }

    .rz-data-grid:not(.mk-no-cards) { background: transparent !important; box-shadow: none !important; border: 0 !important; overflow: visible !important; }
    .rz-data-grid:not(.mk-no-cards) .rz-data-grid-data { overflow: visible !important; }

    .rz-data-grid:not(.mk-no-cards) .rz-grid-table { display: block; width: 100% !important; min-width: 0 !important; table-layout: auto !important; }
    .rz-data-grid:not(.mk-no-cards) .rz-grid-table > thead, .rz-data-grid:not(.mk-no-cards) .rz-grid-table > colgroup { display: none !important; }
    .rz-data-grid:not(.mk-no-cards) .rz-grid-table > tbody { display: block; }

    .rz-data-grid:not(.mk-no-cards) .rz-grid-table > tbody > tr {
        display: block;
        margin: 0 0 0.6rem;
        padding: 0.45rem 0.75rem;
        border: 1px solid var(--mk-line);
        border-radius: 14px;
        background: var(--mk-surface) !important;
        box-shadow: var(--mk-shadow);
    }

    .rz-data-grid:not(.mk-no-cards) .rz-grid-table > tbody > tr > td {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: space-between;
        gap: 0.2rem 0.75rem;
        width: auto !important;
        padding: 0.35rem 0 !important;
        border: 0 !important;
        border-bottom: 1px dashed #eef1f6 !important;
        background: transparent !important;
        text-align: right !important;
        white-space: normal !important;
    }
    .rz-data-grid:not(.mk-no-cards) .rz-grid-table > tbody > tr > td:last-child { border-bottom: 0 !important; }

    /* eticheta coloanei, in stanga */
    .rz-data-grid:not(.mk-no-cards) .rz-grid-table > tbody > tr > td[data-label]:not([data-label=""])::before {
        content: attr(data-label);
        flex: 0 0 38%;
        max-width: 38%;
        text-align: left;
        font-size: 0.72rem;
        font-weight: 600;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        color: var(--mk-muted);
        padding-top: 0.15rem;
    }

    .rz-data-grid:not(.mk-no-cards) .rz-grid-table > tbody > tr > td .rz-cell-data { flex: 1 1 55%; min-width: 0; text-align: right !important; overflow-wrap: anywhere; }
    .rz-data-grid:not(.mk-no-cards) .rz-grid-table > tbody > tr > td .rz-cell-data > .rz-stack, .rz-data-grid:not(.mk-no-cards) .rz-grid-table > tbody > tr > td .rz-cell-data > div { justify-content: flex-end; }

    /* coloane fara titlu (butoane de actiune): pe toata latimea, aliniate la stanga */
    .rz-data-grid:not(.mk-no-cards) .rz-grid-table > tbody > tr > td[data-label=""], .rz-data-grid:not(.mk-no-cards) .rz-grid-table > tbody > tr > td:not([data-label]) { justify-content: flex-start; text-align: left !important; }
    .rz-data-grid:not(.mk-no-cards) .rz-grid-table > tbody > tr > td[data-label=""] .rz-cell-data, .rz-data-grid:not(.mk-no-cards) .rz-grid-table > tbody > tr > td:not([data-label]) .rz-cell-data { text-align: left !important; }
    .rz-data-grid:not(.mk-no-cards) .rz-grid-table > tbody > tr > td[data-label=""] .rz-cell-data > .rz-stack, .rz-data-grid:not(.mk-no-cards) .rz-grid-table > tbody > tr > td[data-label=""] .rz-cell-data > div { justify-content: flex-start; }

    /* celule cu continut complex (liste de optiuni, campuri): sub eticheta, pe toata latimea */
    .rz-data-grid:not(.mk-no-cards) .rz-grid-table > tbody > tr > td:has(.rz-radiobutton-list, .rz-form-field, textarea, .rz-dropdown, .rz-datepicker, .rz-numeric) { flex-direction: column; align-items: stretch; text-align: left !important; }
    .rz-data-grid:not(.mk-no-cards) .rz-grid-table > tbody > tr > td:has(.rz-radiobutton-list, .rz-form-field, textarea, .rz-dropdown, .rz-datepicker, .rz-numeric)::before { max-width: none !important; }
    .rz-data-grid:not(.mk-no-cards) .rz-grid-table > tbody > tr > td:has(.rz-radiobutton-list, .rz-form-field, textarea, .rz-dropdown, .rz-datepicker, .rz-numeric) .rz-cell-data { text-align: left !important; }

    /* randul expandat (detalii) si mesajul "nu exista": un singur bloc, fara eticheta */
    .rz-data-grid:not(.mk-no-cards) .rz-grid-table > tbody > tr > td[colspan] { display: block; text-align: left !important; border-bottom: 0 !important; }
    .rz-data-grid:not(.mk-no-cards) .rz-grid-table > tbody > tr > td[colspan]::before { display: none; }

    /* randul cardului: coloana de detalii (sageata) la final, nu prima */
    .rz-data-grid:not(.mk-no-cards) .rz-grid-table > tbody > tr:not(:has(> td[colspan])) { display: flex; flex-direction: column; }
    .rz-data-grid:not(.mk-no-cards) .rz-grid-table > tbody > tr > td.rz-col-icon { order: 99; border-bottom: 0 !important; border-top: 1px dashed #eef1f6 !important; }

    /* marginile mari din filele profilului (padding 2rem scris inline) */
    .rz-tabview-panel > div[style*="padding: 2rem"], .rz-tabview-panel > .rz-row[style*="padding: 2rem"] { padding: 0.75rem !important; }

    /* dialogurile cu latime fixa (ex. 700px) incap in ecran */
    .rz-dialog { width: calc(100vw - 16px) !important; max-width: calc(100vw - 16px) !important; }
}

/* ---------- 21. Firmele mele (Contul meu): carduri cu file de detalii ---------- */
.mk-firme-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }

.mk-firme-gol {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.6rem;
    padding: 2rem 1rem;
    border: 1px dashed var(--mk-line);
    border-radius: 16px;
    background: var(--mk-surface);
}

.mk-firme-gol-icon {
    width: 56px; height: 56px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--mk-primary-lighter); color: var(--mk-primary);
}
    .mk-firme-gol-icon .rzi { font-size: 1.8rem; }

.mk-firme { display: flex; flex-direction: column; gap: 0.75rem; }

.mk-firma {
    background: var(--mk-surface);
    border: 1px solid var(--mk-line);
    border-radius: 16px;
    box-shadow: var(--mk-shadow);
    padding: 0.9rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}
    .mk-firma.deschisa { border-color: var(--mk-primary-light); }

.mk-firma-head { display: flex; justify-content: space-between; gap: 0.75rem; align-items: flex-start; }
.mk-firma-text { min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.mk-firma-nume { font-weight: 700; font-size: 1.02rem; overflow-wrap: anywhere; }
.mk-firma-meta { display: flex; flex-wrap: wrap; gap: 0.25rem 0.9rem; font-size: 0.82rem; color: var(--mk-muted); }
.mk-firma-adresa { display: flex; align-items: flex-start; gap: 0.25rem; font-size: 0.84rem; color: var(--mk-muted); }
    .mk-firma-adresa .rzi { font-size: 1rem; margin-top: 1px; }
.mk-firma-side { display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem; flex: none; }

/* filele de detalii */
.mk-firma-tabs { display: flex; gap: 0.3rem; flex-wrap: wrap; }

.mk-firma-tab {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--mk-line);
    background: var(--mk-surface);
    color: var(--mk-muted);
    font: inherit; font-size: 0.84rem; font-weight: 600;
    cursor: pointer;
    transition: background-color .15s, color .15s, border-color .15s;
}
    .mk-firma-tab .rzi { font-size: 1.1rem; }
    .mk-firma-tab:hover { color: var(--mk-text); border-color: var(--mk-primary-light); }
    .mk-firma-tab.active { background: var(--mk-primary-lighter); color: var(--mk-primary-dark); border-color: transparent; }

.mk-firma-detalii {
    border-top: 1px solid var(--mk-line);
    padding-top: 0.7rem;
    display: flex; flex-direction: column; gap: 0.5rem;
}
.mk-firma-detalii-head { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; flex-wrap: wrap; font-weight: 600; font-size: 0.9rem; color: var(--mk-text); }
.mk-firma-gol-mic { font-size: 0.86rem; color: var(--mk-muted); }

.mk-rand {
    display: flex; flex-direction: column; gap: 0.15rem;
    padding: 0.55rem 0.75rem;
    border-radius: 12px;
    background: var(--mk-bg);
    border: 1px solid var(--mk-line);
    font-size: 0.9rem;
}
    .mk-rand small { color: var(--mk-muted); font-size: 0.8rem; }
    .mk-rand strong { overflow-wrap: anywhere; }
.mk-rand-linie { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.mk-mono { font-family: ui-monospace, Consolas, monospace; letter-spacing: 0.03em; font-size: 0.86rem; }

/* randuri cu butoane de actiune (sterge / descarca) in dreapta textului */
.mk-rand-cu-actiuni { flex-direction: row; align-items: center; justify-content: space-between; gap: 0.5rem; }
.mk-rand-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; flex: 1 1 auto; }
.mk-rand-actiuni { display: flex; gap: 0.1rem; flex: none; }
    .mk-rand-actiuni .rz-button { min-width: 0; }

@media (max-width: 760px) {
    .mk-firme-head .rz-button { width: 100%; }
    .mk-firma { padding: 0.8rem; }
    .mk-firma-head { flex-direction: column; }
    .mk-firma-side { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; }
    .mk-firma-tab { flex: 1 1 auto; justify-content: center; padding: 0.45rem 0.4rem; font-size: 0.78rem; }
    .mk-firma-tab span { display: inline; }
}

/* ---------- 22. Contul meu: mai putine straturi, mai putin spatiu pierdut pe lateral ---------- */
/* Inainte: fundal gri -> cutie alba a tab-urilor cu padding 2rem -> cardul companiei. Acum cutia
   tab-urilor e transparenta, doar bara de file este o pastila alba, iar cardurile companiilor stau
   direct pe fundal, pe toata latimea. Fila "Profilul meu" (formular) isi pastreaza o cutie alba. */
.mk-profil .rz-tabview { background: transparent !important; border: 0 !important; box-shadow: none !important; }
.mk-profil .rz-tabview-panels, .mk-profil .rz-tabview-panel { background: transparent !important; padding: 0 !important; }
.mk-profil .rz-tabview-nav {
    background: var(--mk-surface);
    border: 1px solid var(--mk-line);
    border-radius: 14px;
    padding: 0 0.5rem;
    box-shadow: var(--mk-shadow);
}
.mk-profil .mk-panel-plain { padding: 1rem 0 0; }
.mk-profil .mk-panel-card {
    background: var(--mk-surface);
    border: 1px solid var(--mk-line);
    border-radius: 16px;
    box-shadow: var(--mk-shadow);
    padding: 1.5rem;
    margin-top: 1rem;
}

@media (max-width: 760px) {
    .mk-profil { margin: 0.5rem auto !important; }
    .mk-profil .rz-tabview-nav { border-radius: 12px; padding: 0; }
    .mk-profil .mk-panel-plain { padding: 0.6rem 0 0; }
    .mk-profil .mk-panel-card { padding: 0.9rem 0.75rem; margin-top: 0.6rem; }
    .mk-firma { padding: 0.7rem 0.65rem; border-radius: 14px; }
    .mk-rand { padding: 0.45rem 0.55rem; border-radius: 10px; }
}

/* ---------- 23. Adrese: camp pe doua randuri, ca textul lung sa se vada intreg (si pe telefon) ---------- */
.rz-form-field .rz-textarea, .rz-textarea { resize: vertical; line-height: 1.35; }
    .rz-form-field .rz-textarea { min-height: 3.4rem; }

/* ---------- 24. Bloc "nimic de ales": explicatie + buton (cerere: fara companie / fara debitor) ---------- */
.mk-gol-actiune {
    display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem;
    padding: 0.9rem 1rem;
    border: 1px dashed var(--mk-primary-light);
    border-radius: 14px;
    background: var(--mk-primary-lighter);
}
    .mk-gol-actiune > .rzi { font-size: 1.9rem; color: var(--mk-primary); }
.mk-gol-actiune-text { display: flex; flex-direction: column; gap: 0.2rem; }
    .mk-gol-actiune-text strong { font-size: 0.95rem; }
    .mk-gol-actiune-text span { font-size: 0.85rem; color: var(--mk-muted); }
.mk-firme-head-butoane { display: flex; gap: 0.5rem; flex-wrap: wrap; }
@media (max-width: 760px) {
    .mk-gol-actiune .rz-button { width: 100%; }
    .mk-firme-head-butoane { width: 100%; }
    .mk-firme-head-butoane .rz-button { flex: 1 1 auto; }
}

/* ---------- 25. Randul de butoane al pasilor (Inapoi + actiunea principala) pe telefon ---------- */
/* Latimile minime scrise inline (min-width 200-270px) nu incap doua pe 390px si rupeau randul.
   Pe telefon: "Inapoi" cat ii trebuie, actiunea principala ocupa restul. */
@media (max-width: 760px) {
    .mk-rand-butoane { flex-wrap: nowrap !important; gap: 0.5rem !important; align-items: center !important; }
    .mk-rand-butoane .rz-button { min-width: 0 !important; }
    .mk-rand-butoane > .rz-button:first-child { flex: 0 0 auto; }
    .mk-rand-butoane > .rz-button:not(:first-child), .mk-rand-butoane > div { flex: 1 1 auto; min-width: 0; }
    .mk-rand-butoane > div > .rz-button { width: 100%; }
    .mk-rand-butoane > div > .rz-text-body1 { font-size: 0.85rem; }
}

/* ---------- 26. Documente: randul de fisier pe grila + rosu pentru obligatoriu neincarcat ---------- */
/* Randul unui fisier: pictograma | nume (se rupe pe mai multe randuri, nu se taie) | data | descarca | sterge.
   Coloanele de butoane au aceeasi latime pe toate randurile, deci butoanele stau unul sub altul. */
.mk-doc-file {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto 2rem 2rem;
    align-items: center;
    gap: 0.4rem;
}
    .mk-doc-file .mk-doc-file-name { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; line-height: 1.3; }
    .mk-doc-file .rz-button { width: 2rem; height: 2rem; min-width: 0; padding: 0; justify-content: center; }
    .mk-doc-file .rz-button .rzi { font-size: 1.15rem; }

/* Semnificatia culorilor: rosu = obligatoriu si neincarcat (trebuie actiune), gri = optional neincarcat,
   verde = incarcat. Chenarul din stanga, bulina, eticheta si starea urmeaza aceeasi regula. */
.mk-doc-item.obligatoriu:not(.ok) { border-left-color: #d93025; }
    .mk-doc-item.obligatoriu:not(.ok) .mk-doc-status { color: #d93025; }
    .mk-doc-item.obligatoriu:not(.ok) .mk-doc-badge { background: #fdecea; color: #b3261e; }
    .mk-doc-item.obligatoriu:not(.ok) .mk-doc-tag { background: #fdecea; color: #b3261e; }
.mk-doc-item.optional:not(.ok) .mk-doc-badge { background: #eef1f6; color: var(--mk-muted); }
.mk-doc-item.ok .mk-doc-tag { background: #e3f5ec; color: #0e8a4e; }

@media (max-width: 700px) {
    .mk-doc-file { grid-template-columns: auto minmax(0, 1fr) 2rem 2rem; }
}

/* ---------- 27. IBAN-ul din pasul 4 incape intreg pe telefon ---------- */
.mk-iban-select .rz-dropdown-label, .mk-iban-select .rz-dropdown-item {
    font-family: ui-monospace, Consolas, monospace;
    letter-spacing: 0;
    font-size: 0.92rem;
}
@media (max-width: 760px) {
    .mk-iban-select .rz-dropdown-label { font-size: 0.8rem; padding-left: 0.4rem; padding-right: 0.2rem; }
    .mk-iban-select .rz-dropdown-item { font-size: 0.8rem; }
    /* marginea interioara a panourilor de pas (padding:1rem scris inline): mai mica pe telefon */
    .rz-panel-content > div[style*="padding:1rem"] { padding: 0.6rem 0.4rem !important; }
}

/* ---------- 28. Completari cerere (mesajele analistului + facturi de corectat) ---------- */
.mk-completari-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.75rem; flex-wrap: wrap; }
.mk-mesaje { display: flex; flex-direction: column; gap: 0.5rem; }
.mk-mesaj {
    display: flex; gap: 0.7rem; align-items: flex-start;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--mk-primary-light);
    border-left: 4px solid var(--mk-primary);
    border-radius: 14px;
    background: var(--mk-primary-lighter);
}
    .mk-mesaj-icon { display: inline-flex; color: var(--mk-primary); flex: none; margin-top: 2px; }
    .mk-mesaj-icon .rzi { font-size: 1.4rem; }
    .mk-mesaj-text { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; font-size: 0.92rem; line-height: 1.4; }
    .mk-mesaj-meta { font-size: 0.78rem; color: var(--mk-muted); font-weight: 600; }
    .mk-mesaj-tags { display: flex; gap: 0.3rem; flex-wrap: wrap; }
    .mk-mesaj-tags .mk-doc-tag { margin-left: 0; }
.mk-rand-atentie { border-color: #f1b7b1; background: #fff7f6; }
@media (max-width: 760px) {
    .mk-completari-head .rz-button { width: 100%; }
}

/* ---------- 29. Cardul cererii: randurile "Vezi contractele" / "Vezi documentele" ---------- */
.mk-card-fisier { flex-direction: row !important; align-items: center; justify-content: space-between; gap: 0.5rem; }
.mk-card-fisier-text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
    .mk-card-fisier-text strong { overflow-wrap: anywhere; }
.mk-card-fisier .rz-button { min-width: 0; width: 2rem; height: 2rem; padding: 0; flex: none; }

/* ---------- 30. Cardul cererii: Facturi / Documente / Contracte pe un rand ---------- */
.mk-card-toggles { display: flex; flex-wrap: wrap; gap: 0.25rem 1.1rem; }
    .mk-card-toggles .mk-card-toggle.on { color: var(--mk-primary-dark); }

/* ---------- 31. Cardul cererii in lucru: Continua + Sterge pe un rand ---------- */
.mk-card-cta { display: flex; gap: 0.5rem; align-items: stretch; }
    .mk-card-cta .rz-button { min-width: 0; }
    .mk-card-cta .rz-button:first-child { flex: 1 1 auto; }

/* ---------- 32. Antet desktop: "Cerere noua" singur, in dreapta, langa utilizator ---------- */
.mk-cta-desktop { display: flex; align-items: center; }
    .mk-cta-desktop .mk-pill-cta { color: #fff !important; margin-left: 0; }   /* !important: Radzen albeste linkurile din antet */

/* pe telefon / tableta "Cerere noua" este in bara de jos (aceeasi conditie: cont complet), deci nu si in antet;
   regula de mai sus vine dupa .mk-pill-desktop { display: none } din sectiunea barei de jos si o anula (26.10.2026) */
@media (max-width: 900px) {
    .mk-cta-desktop { display: none; }
}

/* subsol (25.10.2026): drepturi MK Factoring + Powered by NextSoftware; corpul paginii devine coloana flex,
   ca subsolul sa stea jos si pe paginile scurte, iar continutul (.mk-page / .mk-page-public) sa ocupe restul */
.rz-layout .rz-body { display: flex; flex-direction: column; }
    .rz-layout .rz-body > .mk-page, .rz-layout .rz-body > .mk-page-public { flex: 1 0 auto; }

.mk-footer {
    margin-top: auto;
    padding: 1.25rem 1rem 1.5rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem 1.25rem;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--mk-muted);
}
    .mk-footer span, .mk-footer a { white-space: nowrap; }   /* pe ecran ingust linkul trece intreg pe randul urmator */
    .mk-footer a { color: var(--mk-muted) !important; text-decoration: none; }   /* !important: Radzen coloreaza linkurile */
    .mk-footer a:hover { color: var(--mk-primary) !important; }
    .mk-footer a strong { font-weight: 600; }