/* ==========================================================================
   ACCOUNT.CSS — "Contul meu" (/cont)
   Layout glue for the customer account area. Loaded ONLY on /cont routes
   (routes.ts extraCss). Written strictly with the site design tokens
   (design-tokens.css) — no raw colors. Components (buttons, cards, forms,
   badges, alerts) come from components.css unchanged.
   ========================================================================== */

/* ── Impersonation banner (fixed, above the sticky headers) ─────────────── */

.cont-impersonation {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1500; /* peste .site-header/.mobile-header (1000), sub drawer (2000) */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    min-height: 42px;
    padding: var(--space-2) var(--container-padding);
    background: var(--nws-warning-light);
    border-bottom: 1px solid var(--nws-warning);
    color: var(--nws-warning-dark);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    text-align: center;
}

.cont-impersonation__exit {
    flex-shrink: 0;
    border: 1px solid var(--nws-warning-dark);
    background: transparent;
    color: var(--nws-warning-dark);
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-wide);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
}

.cont-impersonation__exit:hover {
    background: var(--nws-warning-dark);
    color: var(--nws-white);
}

/* Push the page (and the sticky headers) below the banner. */
body.cont-impersonating {
    padding-top: 42px;
}

body.cont-impersonating .site-header,
body.cont-impersonating .mobile-header {
    top: 42px;
}

/* ── Account navigation (under the site header) ─────────────────────────── */

.cont-nav {
    background: var(--nws-surface-2);
    border-bottom: 1px solid var(--nws-border);
}

.cont-nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.cont-nav__links {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.cont-nav__link {
    display: inline-flex;
    align-items: center;
    padding: var(--space-4) var(--space-3);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--nws-text-soft);
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color var(--duration-fast) var(--ease-out);
}

.cont-nav__link:hover {
    color: var(--nws-primary);
}

.cont-nav__link--active {
    color: var(--nws-primary);
    font-weight: var(--fw-semibold);
    border-bottom-color: var(--nws-primary);
}

.cont-nav__logout {
    flex-shrink: 0;
    border: none;
    background: transparent;
    color: var(--nws-text-muted);
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    padding: var(--space-2) 0;
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--duration-fast) var(--ease-out);
}

.cont-nav__logout:hover {
    color: var(--nws-error);
}

/* ── Page head (title + actions/switcher) ───────────────────────────────── */

.cont-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-bottom: var(--space-8);
}

.cont-page-head__title {
    font-family: var(--font-heading);
    font-size: var(--fs-2xl);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-tight);
    color: var(--nws-text);
    margin: 0;
}

.cont-page-head__subtitle {
    margin: var(--space-2) 0 0;
    font-size: var(--fs-base);
    color: var(--nws-text-muted);
    max-width: 60ch;
}

.cont-page-head__cta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.cont-switcher {
    min-width: 240px;
}

.cont-switcher .form-label {
    margin-bottom: var(--space-1);
}

/* ── Stat cards (overview) ──────────────────────────────────────────────── */

.cont-stat {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.cont-stat__label {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-wider);
    text-transform: uppercase;
    color: var(--nws-text-muted);
}

.cont-stat__value {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    flex-wrap: wrap;
    font-family: var(--font-heading);
    font-size: var(--fs-3xl);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-tight);
    color: var(--nws-text);
    line-height: var(--lh-tight);
}

.cont-stat__detail {
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--nws-text-soft);
}

.cont-stat__link {
    margin-top: var(--space-1);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--nws-primary);
    text-decoration: none;
}

.cont-stat__link:hover {
    text-decoration: underline;
}

/* ── Card header row (heading + action) ─────────────────────────────────── */

.cont-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

/* ── Row lists (invoices) ───────────────────────────────────────────────── */

.cont-rows {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cont-row {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) 0;
}

.cont-row + .cont-row {
    border-top: 1px solid var(--nws-border-lighter);
}

.cont-row__main {
    flex: 1;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.cont-row__title {
    font-weight: var(--fw-semibold);
    color: var(--nws-text);
    text-decoration: none;
}

a.cont-row__title:hover {
    color: var(--nws-primary);
}

.cont-row__meta {
    font-size: var(--fs-sm);
    color: var(--nws-text-muted);
}

.cont-row__amount {
    font-variant-numeric: tabular-nums;
    font-weight: var(--fw-semibold);
    color: var(--nws-text);
    white-space: nowrap;
}

.cont-row__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}

/* Valoare încă necunoscută ("se alocă la activare"). */
.cont-muted { color: var(--nws-text-muted); font-weight: var(--fw-regular); }

/* "Gratuit" — stă în locul unui preț (listă servicii, detaliu serviciu). */
/* „în așteptarea plății” — pending service, muted chip linking to the invoice */
.cont-pending {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    background: var(--nws-surface-3);
    color: var(--nws-text-muted);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.cont-pending:hover,
.cont-pending:focus-visible { background: rgba(var(--nws-primary-rgb), 0.1); color: var(--nws-primary); outline: none; }
.cont-pending__arrow { opacity: 0.7; }
.cont-table__row--pending .cont-row__title { color: var(--nws-text-soft); }

.cont-free {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    background: rgba(var(--nws-primary-rgb), 0.1);
    color: var(--nws-primary);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    line-height: 1.4;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

@media (max-width: 767px) {
    .cont-row {
        flex-wrap: wrap;
        gap: var(--space-2) var(--space-3);
    }

    .cont-row__main {
        flex-basis: 100%;
    }

    .cont-row__actions {
        margin-left: auto;
    }
}

/* ── Grid "tables" (services, invoice items, payments) ──────────────────── */

.cont-table-card {
    overflow-x: hidden;
}

.cont-table {
    display: grid;
    row-gap: 0;
}

.cont-table--services {
    grid-template-columns: minmax(200px, 2fr) auto 1fr 1fr auto;
}

.cont-table--items {
    grid-template-columns: minmax(200px, 3fr) auto 1fr 1fr;
}

.cont-table--payments {
    grid-template-columns: 1fr 1.4fr 1.6fr auto;
}

.cont-table__head,
.cont-table__row {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
    align-items: center;
    column-gap: var(--space-5);
}

.cont-table__head {
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--nws-border);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-wider);
    text-transform: uppercase;
    color: var(--nws-text-muted);
}

.cont-table__row {
    padding: var(--space-4) 0;
}

.cont-table__row + .cont-table__row {
    border-top: 1px solid var(--nws-border-lighter);
}

.cont-table__cell {
    font-size: var(--fs-sm);
    color: var(--nws-text-soft);
    min-width: 0;
}

.cont-table__cell--main {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    font-size: var(--fs-base);
    color: var(--nws-text);
    overflow-wrap: anywhere;
}

.cont-table__num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Mobile: fiecare rând devine un mic card etichetat. */
@media (max-width: 767px) {
    .cont-table,
    .cont-table__head,
    .cont-table__row {
        display: block;
    }

    .cont-table__head {
        display: none;
    }

    .cont-table__cell {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: var(--space-4);
        padding: var(--space-1) 0;
    }

    .cont-table__cell--main {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-1);
        padding-bottom: var(--space-2);
    }

    .cont-table__cell[data-label]::before {
        content: attr(data-label);
        font-size: var(--fs-xs);
        font-weight: var(--fw-semibold);
        letter-spacing: var(--ls-wider);
        text-transform: uppercase;
        color: var(--nws-text-muted);
    }

    .cont-table__num {
        text-align: left;
    }
}

/* ── Invoice totals ─────────────────────────────────────────────────────── */

.cont-totals {
    margin: var(--space-6) 0 0;
    margin-left: auto;
    max-width: 340px;
    border-top: 2px solid var(--nws-border);
    padding-top: var(--space-4);
}

.cont-totals__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-6);
    padding: var(--space-1) 0;
}

.cont-totals__row dt {
    font-size: var(--fs-sm);
    color: var(--nws-text-muted);
}

.cont-totals__row dd {
    margin: 0;
    font-variant-numeric: tabular-nums;
    font-weight: var(--fw-medium);
    color: var(--nws-text);
}

.cont-totals__row--total {
    margin-top: var(--space-2);
    padding-top: var(--space-3);
    border-top: 1px solid var(--nws-border);
}

.cont-totals__row--total dt {
    font-weight: var(--fw-semibold);
    color: var(--nws-text);
}

.cont-totals__row--total dd {
    font-family: var(--font-heading);
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
}

/* ── Description list (profil) ──────────────────────────────────────────── */

.cont-dl {
    margin: 0;
}

.cont-dl__row {
    display: grid;
    grid-template-columns: minmax(120px, 180px) 1fr;
    gap: var(--space-4);
    padding: var(--space-3) 0;
}

.cont-dl__row + .cont-dl__row {
    border-top: 1px solid var(--nws-border-lighter);
}

.cont-dl__row dt {
    font-size: var(--fs-sm);
    color: var(--nws-text-muted);
}

.cont-dl__row dd {
    margin: 0;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--nws-text);
    overflow-wrap: anywhere;
}

@media (max-width: 479px) {
    .cont-dl__row {
        grid-template-columns: 1fr;
        gap: var(--space-1);
    }
}

/* ── Auth screens (login + handoff) ─────────────────────────────────────── */

.cont-auth {
    display: flex;
    align-items: center;
    min-height: calc(100vh - var(--header-height) - 15px);
}

.cont-auth__intro {
    text-align: center;
    margin-bottom: var(--space-8);
}

.cont-auth__intro sup {
    font-size: 0.5em;
}

.cont-auth__title {
    font-family: var(--font-heading);
    font-size: var(--fs-4xl);
    font-weight: var(--fw-extrabold);
    letter-spacing: var(--ls-tight);
    margin: var(--space-4) 0 var(--space-3);
}

.cont-auth__subtitle {
    font-size: var(--fs-md);
    margin: 0 auto;
    max-width: 46ch;
}

.cont-auth__card {
    max-width: 460px;
    margin: 0 auto;
    box-shadow: var(--shadow-elevated);
}

.cont-auth__card:hover {
    /* păstrează cardul static — nu e un card de listă */
    transform: none;
}

/* .section-gradient p (0-1-1) ar face textul alb pe cardul alb — specificitate
   mai mare pentru orice paragraf din interiorul cardului de autentificare. */
.cont-auth .cont-auth__card p {
    color: var(--nws-text-soft);
}

.cont-auth .cont-auth__help {
    margin: var(--space-5) 0 0;
    text-align: center;
    font-size: var(--fs-sm);
    color: var(--nws-text-muted);
}

.cont-auth__help a {
    color: var(--nws-primary);
    font-weight: var(--fw-medium);
}

.cont-auth__handoff {
    text-align: center;
}

/* Sub-formularul „Ai uitat parola” de sub butonul de login. */
.cont-auth__reset {
    margin: var(--space-5) 0 0;
}

.cont-auth__reset .btn {
    margin-top: var(--space-3);
}

/* Înregistrare: comutatorul Companie / Persoană fizică (segmented control). */
.cont-auth__toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-1);
    padding: var(--space-1);
    margin-bottom: var(--space-5);
    background: var(--nws-surface-2);
    border: 1px solid var(--nws-border);
    border-radius: var(--radius-md);
}

.cont-auth__toggle-option {
    padding: var(--space-2) var(--space-3);
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--nws-text-soft);
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
}

.cont-auth__toggle-option:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
}

.cont-auth__toggle-option--active {
    color: var(--nws-primary);
    background: var(--nws-surface);
    font-weight: var(--fw-semibold);
    box-shadow: var(--shadow-sm);
}

/* Confirmarea ANAF de sub câmpul CUI („✓ NUMELE FIRMEI”). */
.cont-auth__anaf-note {
    color: var(--nws-success-dark);
    font-weight: var(--fw-medium);
}

/* ── Empty states + skeletons ───────────────────────────────────────────── */

.cont-empty,
.section .cont-empty {
    margin: var(--space-6) 0;
    text-align: center;
    font-size: var(--fs-base);
    color: var(--nws-text-muted);
}

.cont-empty a {
    color: var(--nws-primary);
    font-weight: var(--fw-medium);
}

.cont-skeleton {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-2) 0;
}

.cont-skeleton__bar {
    height: 18px;
    border-radius: var(--radius-sm);
    background: linear-gradient(
        90deg,
        var(--nws-surface-3) 25%,
        var(--nws-surface-hover) 50%,
        var(--nws-surface-3) 75%
    );
    background-size: 200% 100%;
    animation: cont-shimmer 1.4s var(--ease-in-out) infinite;
}

.cont-skeleton__bar:nth-child(1) { width: 40%; }
.cont-skeleton__bar:nth-child(2) { width: 90%; }
.cont-skeleton__bar:nth-child(3) { width: 75%; }
.cont-skeleton__bar:nth-child(4) { width: 85%; }
.cont-skeleton__bar:nth-child(5) { width: 60%; }

@keyframes cont-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .cont-skeleton__bar {
        animation: none;
    }
}

/* ── /cont/servicii: category sections (admin-parity grouping) ──────────── */
.cont-service-sections {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}
.cont-section-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-3);
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    color: var(--nws-text);
}
.cont-section-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(var(--nws-primary-rgb), 0.12);
    color: var(--nws-primary);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
}

/* Servicii încheiate: ascunse implicit după un toggle text; secțiunea se
   citește ca istoric (titlu estompat, fără preț). */
.cont-ended {
    margin-top: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.cont-ended__toggle {
    align-self: flex-start;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--nws-text-muted);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    transition: color var(--duration-fast) var(--ease-out);
}
.cont-ended__toggle:hover,
.cont-ended__toggle:focus-visible {
    color: var(--nws-primary);
}
.cont-service-section--ended .cont-section-count {
    background: var(--nws-border-lighter);
    color: var(--nws-text-muted);
}
.cont-table__row--ended .cont-row__title,
.cont-table__row--ended .cont-table__cell {
    color: var(--nws-text-muted);
}

/* Rând-link (lista de servicii → pagina de detaliu). box-shadow "bleed"
   colorează și în afara rândului fără să miște coloanele subgrid-ului. */
a.cont-table__row--link {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
}

a.cont-table__row--link:hover,
a.cont-table__row--link:focus-visible {
    background: rgba(var(--nws-primary-rgb), 0.05);
    box-shadow: 0 0 0 var(--space-2) rgba(var(--nws-primary-rgb), 0.05);
}

a.cont-table__row--link:hover .cont-row__title,
a.cont-table__row--link:focus-visible .cont-row__title {
    color: var(--nws-primary);
}

/* ── /cont/servicii/{id}: service detail + self-service controls ────────── */

/* Coloanele paginii de detaliu (overview | acțiuni) — carduri suprapuse. */
.cont-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.cont-detail .card:hover {
    /* carduri statice, nu carduri de listă */
    transform: none;
}

.cont-card-desc {
    margin: 0 0 var(--space-5);
    font-size: var(--fs-sm);
    color: var(--nws-text-muted);
    max-width: 52ch;
}

.cont-cta {
    width: 100%;
}

.cont-popup-fallback {
    margin: var(--space-3) 0 0;
    font-size: var(--fs-sm);
    color: var(--nws-text-soft);
}

.cont-popup-fallback a {
    color: var(--nws-primary);
    font-weight: var(--fw-semibold);
}

/* Bara de utilizare disc (hosting) */
.cont-disk {
    margin-top: var(--space-6);
}

.cont-disk__labels {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-2);
    font-size: var(--fs-sm);
    color: var(--nws-text-muted);
}

.cont-disk__labels strong {
    color: var(--nws-text);
    font-weight: var(--fw-semibold);
}

.cont-disk__pct {
    font-variant-numeric: tabular-nums;
    font-weight: var(--fw-semibold);
    color: var(--nws-text-soft);
}

.cont-disk__track {
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--nws-surface-3);
    overflow: hidden;
}

.cont-disk__fill {
    height: 100%;
    border-radius: var(--radius-full);
    background: var(--nws-primary);
    transition: width var(--duration-normal) var(--ease-out);
}

.cont-disk__fill--warning {
    background: var(--nws-warning);
}

.cont-disk__fill--error {
    background: var(--nws-error);
}

/* Lista de nameservere (citire live din registru) */
.cont-ns-list {
    list-style: none;
    margin: 0 0 var(--space-5);
    padding: 0;
}

.cont-ns-list li {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    padding: var(--space-2) 0;
}

.cont-ns-list li + li {
    border-top: 1px solid var(--nws-border-lighter);
}

.cont-ns-list__index,
.cont-ns-editor__index {
    flex-shrink: 0;
    min-width: 34px;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-wider);
    color: var(--nws-text-muted);
}

.cont-ns-list__host {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    color: var(--nws-text);
    overflow-wrap: anywhere;
}

/* Editorul de nameservere (2–4 rânduri) */
.cont-ns-editor__row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.cont-ns-editor__input {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
}

.cont-ns-editor__input[aria-invalid="true"] {
    border-color: var(--nws-error);
}

.cont-ns-editor__remove {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--nws-border);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--nws-text-muted);
    font-size: var(--fs-md);
    line-height: 1;
    cursor: pointer;
    transition: color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out);
}

.cont-ns-editor__remove:hover {
    color: var(--nws-error);
    border-color: var(--nws-error);
}

.cont-ns-editor__add {
    display: inline-block;
    margin-bottom: var(--space-4);
    border: none;
    background: transparent;
    padding: 0;
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--nws-primary);
    cursor: pointer;
}

.cont-ns-editor__add:hover {
    text-decoration: underline;
}

.cont-field-error {
    margin: 0 0 var(--space-3);
    font-size: var(--fs-sm);
    color: var(--nws-error);
}

/* Casetă de confirmare inline (avertisment înainte de acțiuni sensibile) */
.cont-confirm {
    margin: var(--space-2) 0 var(--space-4);
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--nws-warning);
    border-radius: var(--radius-md);
    background: var(--nws-warning-light);
}

.cont-confirm__text {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: var(--lh-normal);
    color: var(--nws-warning-dark);
}

.cont-confirm__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.cont-confirm .cont-confirm__actions {
    margin-top: var(--space-3);
}

/* Codul EPP — afișare unică, mono, selectabil dintr-un click */
.cont-code {
    display: flex;
    align-items: stretch;
    gap: var(--space-3);
}

.cont-code__value {
    flex: 1;
    display: flex;
    align-items: center;
    padding: var(--space-3) var(--space-4);
    border: 1px dashed var(--nws-border);
    border-radius: var(--radius-md);
    background: var(--nws-surface-2);
    font-family: var(--font-mono);
    font-size: var(--fs-md);
    letter-spacing: var(--ls-wide);
    color: var(--nws-text);
    overflow-wrap: anywhere;
    user-select: all;
    -webkit-user-select: all;
}

.cont-code__hint {
    margin: var(--space-3) 0 0;
    font-size: var(--fs-xs);
    color: var(--nws-text-muted);
}

@media (max-width: 767px) {
    .cont-detail {
        gap: var(--space-6);
    }

    .cont-code {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ── Hosting: panoul cPanel complet ─────────────────────────────────────── */

/* Secțiune full-width sub grila detaliu (Conturi email). */
.cont-detail-wide {
    margin-top: var(--space-6);
}

/* Rândul de acțiuni SSO (Autentificare cPanel + Webmail). */
.cont-panel-actions {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.cont-panel-actions__main {
    flex: 1 1 220px;
}

.cont-panel-actions .btn svg {
    margin-right: var(--space-2);
}

/* Grila de scurtături cPanel (4 pe rând desktop, 2 pe mobil). */
.cont-shortcuts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-2);
}

.cont-shortcut {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-2);
    border: 1px solid var(--nws-border-lighter);
    border-radius: var(--radius-md);
    background: transparent;
    font-family: var(--font-body);
    color: var(--nws-text-soft);
    text-align: center;
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease-out),
                background var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
}

.cont-shortcut svg {
    color: var(--nws-primary);
}

.cont-shortcut__label {
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    line-height: var(--lh-tight);
}

.cont-shortcut:hover:not(:disabled),
.cont-shortcut:focus-visible {
    border-color: rgba(var(--nws-primary-rgb), 0.4);
    background: rgba(var(--nws-primary-rgb), 0.05);
    color: var(--nws-primary);
}

.cont-shortcut--busy,
.cont-shortcut--busy:hover {
    border-color: rgba(var(--nws-primary-rgb), 0.4);
    background: rgba(var(--nws-primary-rgb), 0.08);
    color: var(--nws-primary);
}

.cont-shortcut:disabled {
    cursor: default;
}

.cont-shortcut:disabled:not(.cont-shortcut--busy) {
    opacity: 0.55;
}

@media (max-width: 767px) {
    .cont-shortcuts {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Utilizare resurse — bare suprapuse (disc + trafic). */
.cont-usage {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.cont-disk--flat {
    margin-top: 0;
}

/* Conturi email — listă + mini-bare de spațiu. */
.cont-mail-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cont-mail-row + .cont-mail-row {
    border-top: 1px solid var(--nws-border-lighter);
}

.cont-mail-row__inner {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) 0;
}

.cont-mail-row__main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.cont-mail-row__email {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--nws-text);
    overflow-wrap: anywhere;
}

.cont-mail-row__meta {
    font-size: var(--fs-xs);
    font-variant-numeric: tabular-nums;
    color: var(--nws-text-muted);
}

.cont-mail-row__quota {
    flex-shrink: 0;
    width: 120px;
}

.cont-mail-row__quota .cont-disk__track {
    height: 6px;
}

.cont-mail-row__delete {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--nws-border);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--nws-text-muted);
    cursor: pointer;
    transition: color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out);
}

.cont-mail-row__delete:hover:not(:disabled) {
    color: var(--nws-error);
    border-color: var(--nws-error);
}

.cont-mail-row__delete:disabled {
    opacity: 0.55;
    cursor: default;
}

/* Rândul proaspăt creat — flash verde care se stinge. */
.cont-mail-row--new .cont-mail-row__inner {
    animation: cont-row-flash 2.4s var(--ease-out) both;
    border-radius: var(--radius-sm);
}

@keyframes cont-row-flash {
    0%, 40% {
        background: var(--nws-success-light);
        box-shadow: 0 0 0 var(--space-2) var(--nws-success-light);
    }
    100% {
        background: transparent;
        box-shadow: 0 0 0 var(--space-2) transparent;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cont-mail-row--new .cont-mail-row__inner {
        animation: none;
    }
}

.cont-mail-empty {
    margin: 0 0 var(--space-5);
    padding: var(--space-5);
    text-align: center;
    font-size: var(--fs-sm);
    color: var(--nws-text-muted);
    border: 1px dashed var(--nws-border);
    border-radius: var(--radius-md);
    background: var(--nws-surface-2);
}

/* Formularul „Creează cont email". */
.cont-mail-form {
    margin-top: var(--space-5);
    padding-top: var(--space-5);
    border-top: 1px solid var(--nws-border);
}

.cont-subheading {
    margin: 0 0 var(--space-4);
    font-family: var(--font-heading);
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    color: var(--nws-text);
}

.cont-mail-form__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr) minmax(0, 0.8fr);
    gap: var(--space-4);
}

.cont-mail-form__grid .form-group {
    margin-bottom: var(--space-4);
    min-width: 0;
}

@media (max-width: 1023px) {
    .cont-mail-form__grid {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

/* Input adresă cu sufixul fix „@domeniu". */
.cont-mail-local {
    display: flex;
    align-items: stretch;
}

.cont-mail-local .form-input {
    flex: 1 1 auto;
    min-width: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
}

.cont-mail-local__suffix {
    display: inline-flex;
    align-items: center;
    /* The domain must always be fully readable — the localpart input
       shrinks instead (flex above). */
    flex: 0 0 auto;
    padding: 0 var(--space-3);
    border: 1px solid var(--nws-input-border);
    border-left: none;
    border-radius: 0 var(--input-radius) var(--input-radius) 0;
    background: var(--nws-surface-2);
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    color: var(--nws-text-muted);
    white-space: nowrap;
}

/* Rând parolă cu generare / afișare / copiere. */
.cont-pass {
    display: flex;
    align-items: stretch;
    gap: var(--space-2);
}

.cont-pass__input {
    flex: 1;
    min-width: 0;
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
}

.cont-pass__btn {
    flex-shrink: 0;
    width: var(--input-height);
    height: var(--input-height);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--nws-border);
    border-radius: var(--input-radius);
    background: transparent;
    color: var(--nws-text-muted);
    cursor: pointer;
    transition: color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out);
}

.cont-pass__btn:hover:not(:disabled) {
    color: var(--nws-primary);
    border-color: var(--nws-primary);
}

.cont-pass__btn--ok,
.cont-pass__btn--ok:hover:not(:disabled) {
    color: var(--nws-success);
    border-color: var(--nws-success);
}

.cont-pass__btn:disabled {
    opacity: 0.55;
    cursor: default;
}

@media (max-width: 479px) {
    .cont-mail-row__quota {
        display: none;
    }
}

/* ── Date registrant (domenii .ro) — listă + formular inline ────────────── */

.cont-reg-edit {
    margin-top: var(--space-4);
}

.cont-reg-form__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 var(--space-4);
}

.cont-reg-form__grid .form-group {
    margin-bottom: var(--space-4);
    min-width: 0;
}

.cont-reg-form__full {
    grid-column: 1 / -1;
}

@media (max-width: 767px) {
    .cont-reg-form__grid {
        grid-template-columns: 1fr;
    }
}