/* ============================================================================
   TRUCKPLAN.APP — design system.
   Scris de mână, fără build (DECISIONS.md D18).

   De ce nu Tailwind: clasele utilitare se repetă pe fiecare rând al fiecărui
   tabel, la fiecare cerere. CSS-ul se memorează un an; HTML-ul nu se memorează
   niciodată (depinde de tenant și de utilizator). Cu CSS semantic, aceiași
   octeți se plătesc o singură dată.

   Mobile-first (D13): regulile de bază sunt pentru 360px, media query-urile
   adaugă pentru ecrane mari. Niciodată invers.
   ========================================================================= */

/* ─── Simboluri de temă ───────────────────────────────────────────────────
   Valorile portalului Grigoriu (D59, docs/GRIGORIU.md §1). Numele vechi ale
   variabilelor rămân, ca regulile existente să se recoloreze singure; cele
   `--gp-*` sunt pentru componentele noi, cu aceleași nume ca în referință.

   FĂRĂ temă întunecată: referința n-are una, iar oamenii care se mută din ea
   trebuie să vadă același ecran (D59). Paginile publice își au tema lor
   (`.marketing`), prin suprascrierea acelorași variabile.                   */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/assets/fonts/inter-var.woff2") format("woff2");
}

:root {
    --gp-navy:         #10406C;
    --gp-navy-900:     #0B1F3A;
    --gp-navy-800:     #12294C;
    --gp-accent:       #1A6EF0;
    --gp-accent-hover: #155CCB;
    --gp-accent-soft:  #E8F1FF;
    --gp-green:  #16A34A;  --gp-green-soft: #DCFCE7;
    --gp-red:    #DC2626;  --gp-red-soft:   #FEE2E2;
    --gp-amber:  #F59E0B;  --gp-amber-soft: #FEF3C7;
    --gp-info:   #0284C7;  --gp-info-soft:  #E0F2FE;
    --gp-dark:   #374151;  --gp-dark-soft:  #E5E7EB;
    --gp-fill:   #F9FAFB;
    --gp-radius:    12px;
    --gp-radius-sm: 8px;
    --gp-shadow:    0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
    --gp-shadow-md: 0 4px 12px rgba(16, 24, 40, .10);
    --gp-focus:     0 0 0 3px rgba(26, 110, 240, .15);
    --gp-topbar-h:  64px;
    --gp-sidenav-w: 240px;

    --brand:        var(--gp-accent);
    --brand-hover:  var(--gp-accent-hover);
    --brand-ink:    #ffffff;

    --bg:           #F3F5F9;
    --surface:      #FFFFFF;
    --surface-alt:  #F8FAFC;
    --card:         #FFFFFF;
    --line:         #E5E7EB;
    --line-soft:    #EEF2F6;
    --ink:          #111827;
    --ink-muted:    #6B7280;
    --ink-subtle:   #9CA3AF;

    --ok:      var(--gp-green);
    --warn:    var(--gp-amber);
    --danger:  var(--gp-red);
    --info:    var(--gp-info);

    --radius:    10px;
    --radius-lg: 12px;
    --shadow:    var(--gp-shadow);
    --shadow-lg: var(--gp-shadow-md);

    --sidebar-w: var(--gp-sidenav-w);
    --header-h:  var(--gp-topbar-h);

    --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, "Cascadia Code", "SF Mono", Consolas, monospace;
}

/* ─── Reset minimal ──────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
    min-height: 100vh;
    background: var(--bg);
    color: var(--ink);
    font: 400 14px/1.6 var(--font);
    -webkit-font-smoothing: antialiased;
}

/* Bara de derulare subțire, ca în referință. */
* { scrollbar-width: thin; scrollbar-color: rgba(155, 155, 155, .5) transparent; }
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-thumb { background: rgba(155, 155, 155, .5); border-radius: 10px; }

img, svg, video { display: block; max-width: 100%; }

button, input, select, textarea { font: inherit; color: inherit; }

/* Focus vizibil DOAR la navigarea cu tastatura — :focus-visible, nu :focus.
   Altfel fiecare click lasă un contur, iar oamenii cer să fie scos, ceea ce
   sparge accesibilitatea pentru cei care navighează cu Tab. */
:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* Respectă preferința de sistem pentru mișcare redusă. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* ─── Utilitare strict necesare ──────────────────────────────────────────── */

.visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.stack > * + * { margin-top: var(--stack-gap, 1rem); }

/* ─── Tipografie ─────────────────────────────────────────────────────────── */

h1 { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
h2 { font-size: 1rem; font-weight: 700; letter-spacing: -.01em; }
h3 { font-size: .875rem; font-weight: 700; }

.muted   { color: var(--ink-muted); }
.subtle  { color: var(--ink-subtle); }
.small   { font-size: .875rem; }
.tiny    { font-size: .8125rem; }
/* Cifre aliniate, în Inter: referința nu folosește font monospațiat nici la coduri,
   nici la sume (D59). Codul adevărat, unde e cazul, primește `.code`. */
.mono    { font-variant-numeric: tabular-nums; }
.code    { font-family: var(--mono); font-size: .875em; }

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ─── Iconițe (sprite SVG extern — D19) ──────────────────────────────────── */

/* Font Awesome 6.3 Free, desene PLINE (tools/icons/build.php, D59): umplere cu
   culoarea textului, fără contur. Mărimea urmează scrisul din jur. */
.icon {
    width: 1em; height: 1em;
    flex: 0 0 auto;
    fill: currentColor;
}
.icon-sm { width: .875em; height: .875em; }

/* ─── Butoane ────────────────────────────────────────────────────────────── */

/* `.btn` = `gp-btn` din referință: 42px, rază 10px, 14/600, umbră fină.
   Variante: implicit = primary; `.btn-secondary` = outline. */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 42px; padding: 0 16px;
    border: 1px solid var(--gp-accent); border-radius: 10px;
    background: var(--gp-accent); color: #fff;
    font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap;
    text-decoration: none; cursor: pointer;
    box-shadow: var(--gp-shadow);
    transition: background-color .15s, border-color .15s, box-shadow .15s, opacity .15s;
}
.btn .icon { width: 14px; height: 14px; }
.btn:hover { background: var(--gp-accent-hover); border-color: var(--gp-accent-hover); box-shadow: var(--gp-shadow-md); text-decoration: none; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; box-shadow: none; }

.btn-secondary { background: #fff; color: var(--ink); border-color: var(--line); }
.btn-secondary:hover { background: #F8FAFC; border-color: #CBD5E1; color: var(--ink); }

.btn-success { background: var(--gp-green); border-color: var(--gp-green); }
.btn-success:hover { background: #12843C; border-color: #12843C; }

.btn-danger { background: var(--gp-red); border-color: var(--gp-red); color: #fff; }
.btn-danger:hover { background: #B91C1C; border-color: #B91C1C; }

.btn-ghost { background: transparent; border-color: transparent; color: var(--ink-muted); box-shadow: none; }
.btn-ghost:hover { background: #EEF2F6; border-color: transparent; color: var(--ink); box-shadow: none; }

/* Ștergerea: contur roșu, se umple la hover. */
.btn-danger-outline { background: #fff; color: var(--gp-red); border-color: #FCA5A5; }
.btn-danger-outline:hover { background: var(--gp-red); color: #fff; border-color: var(--gp-red); }

.btn-block { width: 100%; }
.btn-sm { height: 36px; padding: 0 12px; font-size: 13px; }
.btn-xs { height: 30px; padding: 0 10px; font-size: 12px; border-radius: 8px; }

/* ─── Formulare ──────────────────────────────────────────────────────────── */

.field { display: block; }
.field + .field { margin-top: 14px; }

.label {
    display: block; margin-bottom: 4px;
    font-size: 12.5px; font-weight: 600; color: var(--ink);
}

.input, .select, .textarea {
    display: block; width: 100%;
    height: 40px; padding: 0 12px;
    background: #fff; color: var(--ink);
    border: 1px solid var(--line); border-radius: 10px;
    /* 16px pe ecranele tactile: sub 16px, Safari pe iPhone mărește pagina la
       focus și n-o mai micșorează (D51). Cu mausul, 13.5px ca în referință. */
    font-size: 16px;
    transition: border-color .15s, box-shadow .15s;
}
.input::placeholder, .textarea::placeholder { color: #9CA3AF; }
.textarea { height: auto; min-height: 88px; padding: 10px 12px; line-height: 1.5; resize: vertical; }
.input:focus, .select:focus, .textarea:focus {
    outline: none;
    border-color: var(--gp-accent);
    box-shadow: var(--gp-focus);
}
.input[aria-invalid="true"] { border-color: var(--gp-red); }
.input[readonly], .textarea[readonly], .select:disabled { background: var(--gp-fill); }

.field-error { display: block; margin-top: 4px; font-size: 11.5px; color: var(--gp-red); }
.field-hint  { display: block; margin-top: 4px; font-size: 11.5px; color: var(--ink-muted); }

@media (pointer: fine) {
    .input, .select, .textarea { font-size: 13.5px; }
}

.checkbox { display: flex; align-items: center; gap: 8px; min-height: 40px; cursor: pointer; font-size: 13.5px; }
.checkbox input { width: 18px; height: 18px; accent-color: var(--gp-accent); }

/* ─── Carduri și panouri ─────────────────────────────────────────────────── */

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--gp-shadow);
}
.card-header {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 16px; border-bottom: 1px solid var(--line);
}
.card-header h2 { font-size: 14px; font-weight: 700; }
.card-body   { padding: 14px 16px 16px; }
.card-footer { padding: 12px 16px; border-top: 1px solid var(--line); }

/* ─── Alerte ─────────────────────────────────────────────────────────────── */

.alert {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 14px; border-radius: 8px;
    border: 1px solid var(--line); border-left-width: 4px;
    background: #fff; font-size: 13.5px;
}
.alert:not(:last-child) { margin-bottom: 16px; }
.alert .icon { margin-top: 3px; }
.alert-ok    { background: var(--gp-green-soft); border-color: #86EFAC; border-left-color: var(--gp-green); color: #166534; }
.alert-error { background: var(--gp-red-soft);   border-color: #FCA5A5; border-left-color: var(--gp-red);   color: #991B1B; }
.alert-warn  { background: var(--gp-amber-soft); border-color: #FCD34D; border-left-color: var(--gp-amber); color: #92400E; }
.alert-info  { background: var(--gp-accent-soft); border-color: #BFDBFE; border-left-color: var(--gp-accent); color: #1E3A8A; }
.alert-ok    .icon { color: var(--gp-green); }
.alert-error .icon { color: var(--gp-red); }
.alert-warn  .icon { color: var(--gp-amber); }
.alert-info  .icon { color: var(--gp-accent); }

/* ─── Etichete de stare ──────────────────────────────────────────────────── */

/* `badge-soft` din referință: rază 6px, 12/600, fundal pal. */
.pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px; border-radius: 6px;
    font-size: 12px; font-weight: 600; line-height: 1.2; white-space: nowrap;
    background: var(--gp-dark-soft); color: var(--gp-dark);
}
.pill .icon { width: 11px; height: 11px; }
.pill-ok      { background: var(--gp-green-soft);  color: var(--gp-green); }
.pill-warn    { background: var(--gp-amber-soft);  color: #B45309; }
.pill-danger  { background: var(--gp-red-soft);    color: var(--gp-red); }
.pill-info    { background: var(--gp-info-soft);   color: var(--gp-info); }
.pill-primary { background: var(--gp-accent-soft); color: var(--gp-accent); }

/* ─── Ecranul de autentificare ───────────────────────────────────────────── */

.auth-screen {
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    padding: 1.5rem 1rem;
    background: var(--bg);
}
.auth-card { width: 100%; max-width: 23rem; }
.auth-brand {
    text-align: center; margin-bottom: 1.5rem;
    font-size: 1.125rem; font-weight: 600; color: var(--ink-muted);
}
.auth-brand b { color: var(--brand); font-weight: 600; }
.auth-title { text-align: center; margin-bottom: .375rem; }
.auth-sub   { text-align: center; margin-bottom: 1.5rem; font-size: .875rem; color: var(--ink-muted); }
.auth-foot  { margin-top: 1.25rem; text-align: center; font-size: .8125rem; color: var(--ink-subtle); }

/* Pe ecrane foarte mici, cardul umple lățimea și renunță la colțuri. */
@media (max-width: 24rem) {
    .auth-screen { padding: 0; }
    .auth-card   { max-width: none; }
    .auth-card .card {
        border: 0; border-radius: 0; box-shadow: none;
        min-height: 100vh; display: flex; flex-direction: column; justify-content: center;
    }
}

/* ─── Indicator de încărcare htmx (D17) ──────────────────────────────────── */

/* htmx pune .htmx-request pe elementul care declanșează cererea. Fără vreun
   semn vizibil, o cerere lentă pare o aplicație blocată. */
.htmx-indicator { opacity: 0; transition: opacity .15s; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { opacity: 1; }

[aria-busy="true"] { cursor: progress; }

/* ─── Buton care arată ca un link ────────────────────────────────────────────
   Necesar pentru acțiuni care TREBUIE să fie POST (logout), dar care arată ca
   un link. Ca o clasă, nu ca style="" inline: CSP-ul cu nonce blochează
   atributele de stil, iar rezultatul ar fi fost un buton nestilat, fără nicio
   eroare vizibilă. */

.btn-link {
    border: 0; background: none; padding: 0;
    color: var(--ink-subtle); font-size: .8125rem;
    text-decoration: underline; cursor: pointer;
}
.btn-link:hover { color: var(--ink-muted); }

/* ============================================================================
   LAYOUT APLICAȚIE — sidebar pe desktop, drawer pe mobil.
   Portat conceptual din rooflex, care are structura corectă (mobile-first,
   conținut fluid fără max-width). Rescris în CSS semantic (D18).
   ========================================================================= */

.app { min-height: 100vh; }

/* ─── Bara de sus (docs/GRIGORIU.md §2) ──────────────────────────────────── */

.app-topbar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1040;
    display: flex; align-items: center; gap: 14px;
    height: var(--gp-topbar-h); padding: 0 16px;
    background: var(--gp-navy-900); color: #fff;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .06), 0 2px 8px rgba(0, 0, 0, .25);
}
.app-topbar-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; flex: 0 0 auto;
    border: 0; border-radius: 8px; background: transparent; color: #fff; cursor: pointer;
}
.app-topbar-toggle .icon { width: 18px; height: 18px; }
.app-topbar-toggle:hover { background: rgba(255, 255, 255, .10); }

.app-brand { display: flex; align-items: center; flex: 0 0 auto; text-decoration: none; }
.app-brand:hover { text-decoration: none; }
.app-brand-plate {
    display: flex; align-items: center; height: 42px; padding: 3px 8px;
    background: #fff; border-radius: 8px;
}
.app-brand-plate img { max-width: 150px; max-height: 36px; width: auto; height: auto; }
.app-brand-text {
    max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--gp-navy-900); font-size: 14px; font-weight: 700; letter-spacing: -.01em;
}

.app-search {
    position: relative; display: none;
    flex: 0 1 520px; min-width: 200px; margin: 0 10px;
    padding: 0; border: 0; background: none; cursor: pointer; text-align: left;
}
.app-search .icon {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    width: 15px; height: 15px; color: rgba(255, 255, 255, .6);
}
.app-search-input {
    display: flex; align-items: center; width: 100%;
    height: 40px; padding: 0 84px 0 40px;
    border: 1px solid rgba(255, 255, 255, .12); border-radius: 10px;
    background: rgba(255, 255, 255, .10);
    color: rgba(255, 255, 255, .55); font-size: 14px;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.app-search:hover .app-search-input { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .35); }
.app-search-kbd {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    padding: 2px 7px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 6px;
    background: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .75);
    font: 600 11px/1.4 var(--font);
}

.app-topbar-right { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.app-topbar-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border: 0; border-radius: 10px;
    background: transparent; color: #fff; cursor: pointer;
}
.app-topbar-icon .icon { width: 17px; height: 17px; }
.app-topbar-icon:hover { background: rgba(255, 255, 255, .08); }

.app-user { position: relative; }
.app-user-btn {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 8px; border: 0; border-radius: 10px;
    background: transparent; color: #fff; cursor: pointer;
}
.app-user-btn:hover { background: rgba(255, 255, 255, .08); }
.app-user-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; flex: 0 0 auto; border-radius: 50%;
    background: var(--gp-accent); color: #fff;
    font-size: 14px; font-weight: 700; letter-spacing: .5px;
}
.app-user-name { display: none; font-size: 14px; font-weight: 600; white-space: nowrap; }
.app-user-caret { display: none; width: 12px; height: 12px; opacity: .8; }

.app-dropdown {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 1050;
    min-width: 230px; padding: 6px 0;
    background: #fff; color: var(--ink);
    border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--gp-shadow-md);
}
.app-dropdown[hidden] { display: none; }
.app-dropdown-item {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 8px 16px; border: 0; background: none;
    color: var(--ink); font: 400 14px/1.4 var(--font); text-align: left; text-decoration: none; cursor: pointer;
}
.app-dropdown-item .icon { width: 14px; height: 14px; color: var(--ink-muted); }
.app-dropdown-item:hover { background: #F8FAFC; text-decoration: none; }
.app-dropdown-sep { height: 1px; margin: 6px 0; background: var(--line); }
.app-dropdown-head { padding: 6px 16px 8px; font-size: 12px; color: var(--ink-muted); }
.app-dropdown form { display: block; margin: 0; }
.app-dropdown .lang-form { display: flex; align-items: center; gap: 8px; padding: 6px 16px; }
.app-dropdown .lang-form .select { height: 32px; font-size: 13px; }

/* ─── Meniul lateral ─────────────────────────────────────────────────────── */

.app-sidenav {
    position: fixed; top: var(--gp-topbar-h); left: 0; bottom: 0; z-index: 1030;
    width: var(--gp-sidenav-w);
    display: flex; flex-direction: column;
    background: linear-gradient(180deg, #0B1F3A 0%, #12294C 100%);
    box-shadow: 1px 0 0 rgba(255, 255, 255, .04), 2px 0 12px rgba(0, 0, 0, .25);
    transform: translateX(-100%);
    transition: transform .2s ease;
}
.app-sidenav-scroll { flex: 1; overflow-y: auto; padding: 12px 0 8px; }
.app-sidenav-scroll::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .2); }
.app-sidenav-menu, .app-sidenav-sub { list-style: none; margin: 0; padding: 0; }
.app-sidenav-menu { padding: 0 10px; }

.app-sidenav-link {
    display: flex; align-items: center; width: 100%;
    min-height: 40px; margin: 2px 0; padding: 8px 12px;
    border: 0; border-radius: 10px; background: transparent;
    color: rgba(255, 255, 255, .78);
    font: 500 13.5px/1.3 var(--font); text-align: left; text-decoration: none; cursor: pointer;
}
.app-sidenav-link .icon { width: 20px; height: 15px; margin-right: 16px; opacity: .9; }
.app-sidenav-link:hover { background: rgba(255, 255, 255, .08); color: #fff; text-decoration: none; }
.app-sidenav-link.is-active {
    background: var(--gp-accent); color: #fff;
    box-shadow: 0 2px 8px rgba(26, 110, 240, .35);
}
.app-sidenav-label { flex: 1 1 auto; min-width: 0; }
.app-sidenav-caret { width: 12px !important; height: 12px !important; margin: 0 0 0 6px !important; opacity: .7; transition: transform .2s; }
.app-sidenav-group.is-open > .app-sidenav-link .app-sidenav-caret { transform: rotate(180deg); }
.app-sidenav-group.is-active > .app-sidenav-link { color: #fff; }

.app-sidenav-sub { display: none; }
.app-sidenav-group.is-open > .app-sidenav-sub { display: block; }
.app-sidenav-sub .app-sidenav-link {
    min-height: 34px; padding: 6px 12px 6px 44px;
    font-size: 13px; font-weight: 400; color: rgba(255, 255, 255, .7);
}
.app-sidenav-sub .app-sidenav-link.is-active { background: rgba(26, 110, 240, .85); color: #fff; box-shadow: none; }

.app-sidenav-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 20px; margin-left: 8px; padding: 0 6px;
    border-radius: 999px; background: #DC2626; color: #fff;
    font-size: 11px; font-weight: 700; line-height: 1;
}

.app-sidenav-collapse {
    position: absolute; top: 14px; right: -15px;
    display: none; align-items: center; justify-content: center;
    width: 30px; height: 30px; padding: 0;
    border: 2px solid var(--gp-navy-900); border-radius: 20px;
    background: #fff; color: var(--gp-navy-900); cursor: pointer;
}
.app-sidenav-collapse .icon { width: 12px; height: 12px; }

/* Fundalul de sub meniu, când se suprapune peste conținut. */
.app-backdrop {
    position: fixed; top: var(--gp-topbar-h); left: 0; right: 0; bottom: 0; z-index: 1029;
    background: rgba(11, 31, 58, .45);
    opacity: 0; pointer-events: none; transition: opacity .2s;
}

.app-main { padding: calc(var(--gp-topbar-h) + 16px) 12px 32px; }
.app-main > section, .app-main { min-width: 0; }

/* Meniul deschis: pe orice lățime se vede; sub 1400px se SUPRAPUNE
   peste conținut (cu fundal), de la 1400px în sus împinge conținutul. */
.nav-open .app-sidenav { transform: translateX(0); }
.nav-open .app-backdrop { opacity: 1; pointer-events: auto; }

@media (min-width: 576px) {
    .app-user-name, .app-user-caret { display: inline-block; }
    .app-main { padding-left: 16px; padding-right: 16px; }
}
@media (min-width: 992px) {
    .app-search { display: block; }
    .app-topbar-search-mobile { display: none; }
    .app-sidenav-collapse { display: inline-flex; }
    .app-main { padding-left: 24px; padding-right: 24px; }
}
@media (min-width: 1400px) {
    .nav-open .app-backdrop { opacity: 0; pointer-events: none; }
    .nav-open .app-main { margin-left: var(--gp-sidenav-w); }
}

/* ─── Căutarea globală, Ctrl/Cmd+K (docs/GRIGORIU.md §4) ─────────────────── */

.gs-overlay {
    position: fixed; inset: 0; z-index: 1070;
    display: flex; align-items: flex-start; justify-content: center;
    padding: 10vh 16px 16px;
    background: rgba(11, 31, 58, .55);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.gs-overlay[hidden] { display: none; }
.gs-open body { overflow: hidden; }

.gs-panel {
    display: flex; flex-direction: column;
    width: 100%; max-width: 680px; max-height: 75vh;
    background: #fff; border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .30);
    overflow: hidden;
}
.gs-head {
    display: flex; align-items: center; gap: 12px;
    padding: 0 16px; border-bottom: 1px solid var(--line);
}
.gs-head-icon { width: 16px; height: 16px; color: var(--ink-muted); }
.gs-input {
    flex: 1 1 auto; min-width: 0; height: 56px;
    border: 0; outline: none; background: transparent;
    font: 400 16px/1.2 var(--font); color: var(--ink);
}
.gs-input::-webkit-search-cancel-button { display: none; }
.gs-spinner {
    width: 18px; height: 18px; flex: 0 0 auto;
    border: 2px solid var(--line); border-top-color: var(--gp-accent); border-radius: 50%;
    animation: gs-spin .7s linear infinite;
}
.gs-spinner[hidden] { display: none; }
@keyframes gs-spin { to { transform: rotate(360deg); } }
.gs-esc, .gs-foot kbd {
    padding: 2px 6px; border: 1px solid var(--line); border-radius: 6px;
    background: var(--gp-fill); color: var(--ink-muted);
    font: 600 11px/1.4 var(--font);
}
.gs-close {
    display: none; align-items: center; justify-content: center;
    width: 40px; height: 40px; border: 0; border-radius: 8px;
    background: none; color: var(--ink-muted); cursor: pointer;
}

.gs-body { flex: 1 1 auto; overflow-y: auto; padding: 6px 0 8px; }
.gs-hint { padding: 22px 20px; text-align: center; font-size: 13px; color: var(--ink-muted); }
.gs-group + .gs-group { margin-top: 4px; }
.gs-group-title {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 16px 6px;
    font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
    color: var(--ink-muted);
}
.gs-group-title .icon { width: 11px; height: 11px; }

.gs-item {
    display: flex; align-items: center; gap: 12px;
    min-height: 48px; margin: 0 6px; padding: 7px 10px;
    border-radius: 8px; color: var(--ink); text-decoration: none;
}
.gs-item:hover { text-decoration: none; }
.gs-item.is-active { background: var(--gp-accent-soft); }
.gs-item-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; flex: 0 0 auto;
    border-radius: 8px; background: #F3F4F6; color: var(--gp-navy);
}
.gs-item-icon .icon { width: 14px; height: 14px; }
.gs-item.is-active .gs-item-icon { background: #fff; color: var(--gp-accent); }
.gs-item-text { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.gs-item-title, .gs-item-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-item-title { font-size: 14px; font-weight: 500; }
.gs-item-sub { font-size: 12px; color: var(--ink-muted); }
.gs-mark { padding: 0 1px; border-radius: 2px; background: #FEF08A; color: inherit; }
.gs-badge {
    flex: 0 0 auto; padding: 2px 8px; border-radius: 999px;
    font-size: 11px; font-weight: 600; white-space: nowrap;
}
.gs-badge-success { background: var(--gp-green-soft); color: #15803D; }
.gs-badge-danger  { background: var(--gp-red-soft);   color: #B91C1C; }
.gs-badge-muted   { background: #F3F4F6;              color: var(--ink-muted); }
.gs-item-all { color: var(--gp-accent); }
.gs-item-all .gs-item-title { font-weight: 600; }
.gs-item-all > .icon { width: 13px; height: 13px; }

.gs-foot {
    display: flex; flex-wrap: wrap; gap: 6px 18px;
    padding: 10px 16px; border-top: 1px solid var(--line);
    background: var(--gp-fill); font-size: 12px; color: var(--ink-muted);
}
.gs-foot kbd { margin-right: 2px; }

@media (max-width: 575px) {
    .gs-overlay { padding: 0; }
    .gs-panel { max-width: none; max-height: none; height: 100%; border-radius: 0; box-shadow: none; }
    .gs-foot, .gs-esc { display: none; }
    .gs-close { display: inline-flex; }
}

/* ─── Antetul paginii (`page-header` din referință) ──────────────────────── */

.page-head {
    display: flex; flex-wrap: wrap; gap: 16px;
    align-items: center; justify-content: space-between;
    margin: 4px 0 18px;
}
.page-head h1 { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.page-head > div > p, .page-sub { margin-top: 4px; font-size: 14px; color: var(--ink-muted); }
.page-head .form-actions { margin: 0 0 0 auto; gap: 10px; }
@media (min-width: 768px) {
    .page-head h1 { font-size: 30px; }
    .page-head > div > p, .page-sub { font-size: 15px; }
}
@media (max-width: 767px) {
    .page-head .form-actions { width: 100%; }
    .page-head .form-actions .btn { flex: 1 1 auto; height: 40px; }
}

/* ─── Bara de filtre ─────────────────────────────────────────────────────── */

/* ─── Bara de filtre a listelor ──────────────────────────────────────────────

   Un singur rând: căutarea ia spațiul rămas, selectoarele stau la dreapta ei,
   butonul la capăt. Pe ecran îngust se rup singure pe mai multe rânduri.

   ─── DE CE E NEVOIE SĂ ANULEZ LĂȚIMEA ───────────────────────────────────────

   `.input` și `.select` sunt `width: 100%`, și e corect: în FORMULARE fiecare
   câmp stă pe rândul lui, sub eticheta lui. Aici sunt unul lângă altul, iar
   `width: 100%` într-un flex face fiecare control să ceară rândul întreg — de
   aceea filtrele ieșeau unul sub altul, cât toată pagina.                     */

/* Cardul de filtre din referință: mereu deschis, alb, rază 12px, controale de
   40px. Rămâne pe un rând care se rupe singur: pe ecran lat, căutarea ia
   spațiul liber; pe telefon, fiecare control pe rândul lui. */
.filters {
    display: grid; gap: 12px;
    /* Coloane egale, ca grila de filtre a referinței (6 pe rând pe ecran lat):
       un control nu mai poate lua singur un rând întreg. */
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr));
    align-items: end; margin-bottom: 16px;
    padding: 14px 20px 16px;
    background: #fff; border: 1px solid var(--line); border-radius: 12px;
    box-shadow: var(--gp-shadow);
    /* Referința panoului de perioadă — vezi `.daterange-panel`. */
    position: relative;
}

.filters .input,
.filters .select {
    width: 100%;
    height: 40px;
}
.filters .btn { height: 40px; }
.filters .daterange-toggle { width: 100%; }

.filter-search { position: relative; min-width: 0; }
@media (min-width: 576px) { .filter-search { grid-column: span 2; } }
.filter-search .input { width: 100%; }
.filter-search .icon {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    width: 14px; height: 14px; color: var(--ink-subtle); pointer-events: none;
}
.filter-search .input { padding-left: 36px; }

/* ─── Selector de perioadă (portat din rooflex) ──────────────────────────── */

.daterange { position: relative; }
.daterange-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    min-width: 11rem; min-height: 40px; padding: .5rem .75rem;
    background: var(--surface); color: var(--ink);
    border: 1px solid var(--line); border-radius: var(--radius);
    font-size: .875rem; cursor: pointer;
}
.daterange-toggle:hover { background: var(--surface-alt); }
.daterange-panel {
    position: absolute; z-index: 25; margin-top: .25rem; left: 0;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
    display: none;
}
.daterange-panel.is-open { display: block; }
.daterange-body { display: flex; flex-direction: column; gap: .75rem; padding: .75rem; }
.daterange-presets { display: flex; flex-direction: column; gap: .125rem; }
.daterange-preset {
    padding: .4375rem .625rem; min-height: 36px;
    border: 0; border-radius: .5rem; background: none;
    color: var(--ink-muted); font-size: .875rem; text-align: left;
    white-space: nowrap; cursor: pointer;
}
.daterange-preset:hover { background: var(--surface-alt); color: var(--ink); }
.daterange-preset[aria-pressed="true"] { background: var(--surface-alt); color: var(--brand); font-weight: 500; }
.daterange-foot {
    display: flex; justify-content: flex-end; gap: .5rem;
    padding: .625rem .75rem; border-top: 1px solid var(--line);
}
/* Panoul NU se ancorează la buton — butonul stă oriunde pe rândul de filtre,
   de obicei spre dreapta, iar panoul lat de două coloane ieșea din ecran și
   lărgea pagina, pe telefon ȘI pe desktop. Referința e rândul de filtre
   întreg (`.filters`, nu `.daterange`): pe ecran mic panoul îi ia lățimea,
   pe desktop se lipește de marginea lui dreaptă. În ambele cazuri stă în
   interiorul cardului, deci nu are cum să depășească fereastra. Pe verticală
   rămâne sub buton: poziția statică a unui copil absolut se ia din părintele
   lui static, `.daterange`. */
.filters .daterange { position: static; }
.filters .daterange-panel { left: 0; right: 0; }
@media (min-width: 64rem) {
    .filters .daterange-panel { left: auto; }
}
.daterange-body > div { min-width: 0; }
@media (min-width: 30rem) {
    .daterange-body { flex-direction: row; }
    .daterange-body > div:first-child { flex: 1 1 auto; }
    .daterange-presets { border-left: 1px solid var(--line); padding-left: .75rem; }
}

/* ─── Tabele (`tbl-modern` din referință) ────────────────────────────────── */

.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th {
    padding: 10px; text-align: left;
    background: #F8FAFC; color: var(--ink-muted);
    font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
    border-bottom: 1px solid var(--line); white-space: nowrap; vertical-align: middle;
}
.table th:first-child { border-top-left-radius: 8px; }
.table th:last-child  { border-top-right-radius: 8px; }
.table td { padding: 10px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: #F5F8FC; }
.table a { color: var(--ink); font-weight: 600; }
.table a:hover { color: var(--gp-accent); text-decoration: none; }
.table tfoot td { font-weight: 600; border-top: 1px solid var(--line); border-bottom: 0; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.cell-sub { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 400; color: var(--ink-muted); }

/* MOBIL: fiecare rând devine un card (referința, sub 768px). Etichetele vin
   din data-label, puse pe fiecare celulă. */
@media (max-width: 767.98px) {
    .table--cards thead { display: none; }
    .table--cards, .table--cards tbody, .table--cards tr, .table--cards td {
        display: block; width: 100%;
    }
    .table--cards tbody tr {
        margin-bottom: 10px; padding: 12px 14px;
        background: #fff; border: 1px solid var(--line); border-radius: 12px;
        box-shadow: var(--gp-shadow);
    }
    .table--cards tbody tr:hover { background: #fff; }
    .table--cards td { padding: 3px 0; border: 0; }
    .table--cards td[data-label]::before {
        content: attr(data-label) ": ";
        color: var(--ink-muted); font-size: 12px;
    }
    .table--cards td.num { text-align: left; }
    .table--cards .cell-primary { padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px solid var(--line-soft); font-size: 14px; }
    .table--cards .cell-primary::before { content: none; }
    .card:has(> .table-wrap .table--cards), .card:has(> .table--cards) { background: transparent; border: 0; box-shadow: none; }
}

.empty { padding: 48px 16px; text-align: center; color: var(--ink-muted); font-size: 14px; }

/* ─── Paginare (`gp-pagination` din referință) ───────────────────────────── */

.pager {
    display: flex; flex-wrap: wrap; gap: 10px 16px;
    align-items: center; justify-content: space-between;
    padding: 10px 16px; border-top: 1px solid var(--line);
    font-size: 13px; color: var(--ink-muted);
}
.pager-nav { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.pager-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 32px; height: 32px; padding: 0 8px;
    border: 1px solid var(--line); border-radius: 8px;
    background: #fff; color: var(--ink);
    font-size: 13px; font-weight: 500; text-decoration: none; cursor: pointer;
}
.pager-btn:hover { background: #F1F5F9; color: var(--ink); text-decoration: none; }
.pager-btn[aria-current="true"] {
    background: var(--gp-accent); color: #fff; border-color: var(--gp-accent);
    box-shadow: 0 2px 6px rgba(26, 110, 240, .35);
}
.pager-btn[aria-disabled="true"] { background: transparent; color: #9CA3AF; pointer-events: none; }
.pager-perpage { display: flex; align-items: center; gap: 6px; }
.pager-perpage .select { height: 30px; min-width: 62px; width: auto; padding: 0 24px 0 8px; border-radius: 8px; font-size: 13px; }
@media (max-width: 575px) { .pager { justify-content: center; } }

/* ─── Toasturi (sus-dreapta, se adună, dispar singure) ───────────────────── */

.toast-host {
    position: fixed; top: calc(var(--gp-topbar-h) + 10px); right: 12px; left: 12px; z-index: 1080;
    display: flex; flex-direction: column; gap: 8px;
    pointer-events: none;
}
@media (min-width: 576px) { .toast-host { left: auto; width: 450px; } }

.toast {
    pointer-events: auto;
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 14px; border-radius: 8px;
    background: #fff; border: 1px solid var(--line); border-left-width: 4px;
    box-shadow: var(--gp-shadow-md); font-size: 13.5px;
    opacity: 0; transform: translateY(-8px);
    transition: opacity .2s, transform .2s;
}
.toast.is-in { opacity: 1; transform: none; }
.toast-ok    { border-left-color: var(--gp-green); }
.toast-error { border-left-color: var(--gp-red); }
.toast-warn  { border-left-color: var(--gp-amber); }
.toast-msg { flex: 1; min-width: 0; }
.toast-close {
    border: 0; background: none; color: var(--ink-subtle); cursor: pointer;
    padding: 2px; border-radius: 6px; line-height: 0;
}
.toast-close:hover { color: var(--ink-muted); background: #F3F4F6; }

/* ─── Dialog de confirmare ───────────────────────────────────────────────── */

.modal {
    position: fixed; inset: 0; z-index: 60;
    display: none; align-items: center; justify-content: center; padding: 1rem;
}
.modal.is-open { display: flex; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(2, 6, 23, .5); }
.modal-box {
    position: relative; width: 100%; max-width: 24rem;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
}
.modal-actions { display: flex; justify-content: flex-end; gap: .5rem; }

/* ─── Taburi ─────────────────────────────────────────────────────────────── */

/* Capul unui card cu taburi: bara la stânga, butoanele panoului activ la
   dreapta. Pe telefon se rup pe două rânduri — un buton lipit de o bară care
   derulează orizontal e o țintă pe care degetul o ratează, fiindcă bara se mișcă
   sub el. */
.tabs-head {
    display: flex; flex-wrap: wrap; align-items: center;
    border-bottom: 1px solid var(--line);
}

.tabbar {
    display: flex; gap: .125rem; overflow-x: auto;
    border-bottom: 1px solid var(--line);
    scrollbar-width: none;
}
.tabbar::-webkit-scrollbar { display: none; }

/* În capul cardului, linia o ține `.tabs-head` — altfel ar fi două, una sub
   alta, când butoanele trec pe rândul lor. */
.tabs-head .tabbar { flex: 1 1 14rem; min-width: 0; border-bottom: 0; }

.tabs-actions { flex: 0 1 auto; padding: .375rem .75rem; }
.tab-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

/* `display: flex` bate `[hidden]` din foaia browserului, iar butoanele TUTUROR
   panourilor rămâneau pe ecran, unul sub altul. Aceeași capcană e deja rezolvată
   mai jos, pentru `.tab-panel`. */
.tab-actions[hidden] { display: none; }

/* Sub 30rem, butonul ia rândul întreg: e singurul mod în care rămâne o țintă
   de 44px fără să înghesuie taburile (D13). */
@media (max-width: 30rem) {
    .tabs-actions { width: 100%; padding: .5rem .75rem; border-top: 1px solid var(--line); }
    .tab-actions .btn { flex: 1 1 auto; }
}
.tab {
    flex: 0 0 auto; white-space: nowrap;
    padding: 12px 14px; min-height: 44px;
    border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
    background: none; color: var(--ink-muted);
    font: 600 13.5px/1.2 var(--font); cursor: pointer;
}
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { color: var(--gp-accent); border-bottom-color: var(--gp-accent); }
.tab-count {
    display: inline-flex; min-width: 20px; justify-content: center;
    margin-left: 6px; padding: 1px 6px; border-radius: 999px;
    background: var(--gp-accent-soft); color: var(--gp-accent);
    font-size: 11px; font-weight: 700;
}
.tab-panel[hidden] { display: none; }

/* ─── Banner (tenant suspendat / trial expirat) ──────────────────────────── */

.banner {
    display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
    justify-content: space-between;
    padding: .625rem 1rem; font-size: .875rem;
    background: color-mix(in srgb, var(--warn) 15%, var(--surface));
    border-bottom: 1px solid color-mix(in srgb, var(--warn) 35%, var(--line));
}


/* ─── Formulare de detaliu ───────────────────────────────────────────────── */

/* Două coloane de la 40rem în sus, una pe telefon. `auto-fit` cu `minmax`, nu
   un media query: câmpurile se rearanjează după lățimea DISPONIBILĂ, deci
   funcționează la fel și când formularul stă într-un card îngust. */
.form-grid {
    display: grid; gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}
/* `.field + .field` pune margine între câmpuri; în grilă distanța o dă `gap`. */
.form-grid .field + .field { margin-top: 0; }

.form-actions {
    display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
    margin-top: 1rem;
}

/* Setările pe care aproape nimeni nu le schimbă, strânse sub o linie.

   `<details>` nativ, fără JavaScript: se deschide singur, merge cu scripturile
   oprite și n-are nevoie de `onclick` (regula 6). Marcatorul rămâne cel al
   browserului — un triunghi desenat de noi ar fi al treilea fel de săgeată din
   aplicație, după iconițele din sprite.

   Câmpurile dinăuntru se trimit și când blocul e închis: sunt ascunse vizual,
   nu scoase din formular. */
details.advanced {
    margin-top: 1rem; padding-top: .75rem;
    border-top: 1px solid var(--line);
}
details.advanced > summary {
    cursor: pointer;
    font-size: .8125rem; font-weight: 600;
    color: var(--ink-muted);
}
details.advanced > summary:hover { color: var(--ink); }
details.advanced > .form-grid { margin-top: .75rem; }

/* Câmpul care a picat validarea. Nu doar culoare: pe ecranele unde roșul nu se
   distinge, umbra îngroșată rămâne un al doilea semnal. */
.is-invalid {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 18%, transparent);
}

/* La DREAPTA, fără linie deasupra (rooflex). Linia despărțea o „zonă
   periculoasă" care avea un singur buton în ea — iar butonul, singur pe rând
   la stânga, arăta ca acțiunea principală a paginii. */
.danger-zone { display: flex; justify-content: flex-end; margin-top: 1rem; }

/* ─── Fișă compactă: un singur card, cu secțiuni ─────────────────────────────

   De ce nu un card pentru fiecare secțiune: un card costă un antet, două
   borduri, două padding-uri și distanța până la următorul — peste 100px de
   cromatică pentru un titlu de două cuvinte. Pe fișa partenerului erau patru,
   adică o pagină de două ecrane pentru douăzeci de câmpuri.

   Aici secțiunile stau în ACELAȘI card, despărțite de o linie, iar titlul e o
   etichetă mică. Umbra și rotunjirea încadrează formularul întreg, nu fiecare
   grup de câmpuri — ceea ce e și mai aproape de adevăr: e un singur formular,
   cu un singur buton de salvare.                                             */

.form-sheet {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--gp-shadow);
}

/* Tot ce vine după fișă își ia distanța de la ea. */
.form-sheet ~ * { margin-top: 16px; }

.sheet-part { padding: 14px 16px 16px; }
.sheet-part + .sheet-part { border-top: 1px solid var(--line); }
.sheet-part > * + * { margin-top: 12px; }

/* Capul fișei: numele înregistrării și starea ei, în chiar cardul ei. */
.sheet-head {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
    padding: 14px 16px; border-bottom: 1px solid var(--line);
}
.sheet-name { font-weight: 700; font-size: 22px; letter-spacing: -.02em; line-height: 1.2; }

.sheet-foot {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 8px;
    padding: 12px 16px; border-top: 1px solid var(--line);
}

/* Întoarcerea, deasupra fișei. */
.back-link {
    display: inline-flex; align-items: center; gap: 6px;
    margin-bottom: 10px; min-height: 32px;
    font-size: 13px; font-weight: 500; color: var(--ink-muted);
}
.back-link:hover { color: var(--gp-accent); text-decoration: none; }

/* Titlul secțiunii = titlul unui card de fișă din referință: 14/700. */
.sheet-title {
    display: flex; align-items: center; gap: 8px;
    font-size: 14px; font-weight: 700; color: var(--ink);
}
.sheet-title .icon { width: 13px; height: 13px; color: var(--gp-accent); }

.form-sheet .form-grid { gap: 14px 12px; }
.form-sheet .textarea { min-height: 88px; }

/* Pe ecran mare nu mai e nevoie de ținta de atingere de 44px (D13): acolo se
   lucrează cu mausul. Regula de bază, pentru telefon, rămâne neatinsă —
   de aceea e scrisă aici și nu invers. Textarea NU intră: ea își ia înălțimea
   din `rows`, iar un `min-height` de 38px ar tăia-o la un rând. */
/* ─── Rânduri cu eticheta la STÂNGA câmpului ─────────────────────────────────

   Portat din rooflex (`admin/client.php`), cerut de proprietar. Două perechi
   etichetă-câmp pe rând, ca acolo.

   De ce e mai bun decât eticheta deasupra, pentru o FIȘĂ: ochiul coboară pe o
   singură coloană de etichete și se oprește la cea căutată. Cu eticheta
   deasupra, fiecare câmp cere două opriri, iar rândul crește cu 22px — de
   douăzeci de ori, pe o fișă de partener.

   Lățimea coloanei de etichete e FIXĂ, nu `max-content`: altfel fiecare pereche
   și-ar măsura singură eticheta, iar câmpurile ar începe la x-uri diferite pe
   fiecare rând — exact ce face o fișă greu de citit.

   Pe telefon, o singură coloană și eticheta deasupra: lângă un câmp, pe 360px,
   ar lăsa câmpului jumătate de ecran.                                        */

/* Steluța de „obligatoriu", lângă eticheta ei. `aria-hidden` n-are ce căuta:
   `required` de pe câmp e cel care o spune cititoarelor de ecran, steluța e
   doar pentru ochi. */
.req { margin-left: 3px; color: var(--gp-red); }

/* Grila de câmpuri a referinței: DOUĂ coloane, eticheta DEASUPRA câmpului
   (12.5/600), distanțe 14px pe verticală și 12px pe orizontală; o coloană pe
   telefon. (Înainte de D59: eticheta la stânga, portată din rooflex.) */
.form-rows { display: grid; gap: 14px 12px; grid-template-columns: 1fr; }
.form-row  { display: flex; flex-direction: column; min-width: 0; }
.form-row .label { margin-bottom: 4px; }
.control { min-width: 0; }

/* Un rând ascuns de comutator. `display: flex` bate `[hidden]` din browser. */
.form-row[hidden], .perm[hidden] { display: none; }

/* Un câmp care ia rândul întreg: adresa, observațiile. */
.row-wide { grid-column: 1 / -1; }
.row-top { align-items: stretch; }

@media (min-width: 576px) {
    .form-rows { grid-template-columns: 1fr 1fr; }
}

/* ─── Grilă de 12 coloane ────────────────────────────────────────────────────

   Pentru rândurile în care câmpurile NU cântăresc la fel: denumirea firmei are
   nevoie de patru coloane, „Tip" de două. Unde toate câmpurile sunt la fel de
   late, `.form-grid` cu `auto-fit` rămâne mai bună — se rearanjează singură,
   după lățimea disponibilă, fără spanuri scrise cu mâna.

   Trei trepte: o coloană pe telefon, șase pe tabletă (spanurile se
   înjumătățesc), douăsprezece de la 80rem în sus. Sub 80rem, o coloană din
   douăsprezece ar fi de 60px — mai îngustă decât padding-ul propriului câmp. */
.grid-12 { display: grid; gap: .75rem .875rem; grid-template-columns: 1fr; }
.grid-12 .field + .field { margin-top: 0; }

@media (min-width: 40rem) {
    .grid-12 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .grid-12 > .col-1 { grid-column: span 1; }
    .grid-12 > .col-2 { grid-column: span 2; }
    .grid-12 > .col-3, .grid-12 > .col-4 { grid-column: span 3; }
    .grid-12 > .col-5,  .grid-12 > .col-6,  .grid-12 > .col-7,
    .grid-12 > .col-8,  .grid-12 > .col-9,  .grid-12 > .col-10,
    .grid-12 > .col-11, .grid-12 > .col-12 { grid-column: span 6; }
}

@media (min-width: 80rem) {
    .grid-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .grid-12 > .col-1  { grid-column: span 1; }
    .grid-12 > .col-2  { grid-column: span 2; }
    .grid-12 > .col-3  { grid-column: span 3; }
    .grid-12 > .col-4  { grid-column: span 4; }
    .grid-12 > .col-5  { grid-column: span 5; }
    .grid-12 > .col-6  { grid-column: span 6; }
    .grid-12 > .col-7  { grid-column: span 7; }
    .grid-12 > .col-8  { grid-column: span 8; }
    .grid-12 > .col-9  { grid-column: span 9; }
    .grid-12 > .col-10 { grid-column: span 10; }
    .grid-12 > .col-11 { grid-column: span 11; }
    .grid-12 > .col-12 { grid-column: span 12; }
}

/* Eticheta unui grup de bife, pe ACELAȘI rând cu ele („Rol: Client Furnizor").
   Deasupra ar costa încă 22px pentru un cuvânt. */
.label-inline { margin-bottom: 0; }

/* O bifă care nu ține de grupul dinaintea ei („Plătitor de TVA", lângă rolurile
   partenerului). Pe telefon nu primește nimic: acolo bifele se rup pe rânduri,
   iar o linie despărțitoare ar ajunge în capul rândului, ca o indentare
   greșită. De la 40rem în sus, unde rândul ține, linia o desparte — altfel s-ar
   citi drept al treilea rol. */
@media (min-width: 40rem) {
    .perm-apart { margin-left: .5rem; padding-left: 1rem; border-left: 1px solid var(--line); }
}

/* ─── Matricea de permisiuni ─────────────────────────────────────────────── */

.perm-grid {
    display: grid; gap: .25rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

/* Toată eticheta e zonă de click, nu doar caseta de 16px: pe telefon, o țintă
   de 16px e sub pragul de 44px din D13 și se ratează constant. */
.perm {
    display: flex; gap: .625rem; align-items: flex-start;
    padding: .5rem; min-height: 44px;
    border-radius: var(--radius); cursor: pointer;
}
.perm:hover { background: var(--surface-alt); }
.perm input { margin-top: .2rem; width: 1.05rem; height: 1.05rem; flex: none; accent-color: var(--brand); }
.perm input:disabled { cursor: not-allowed; }

.perm-label { display: block; font-size: .9375rem; line-height: 1.35; }

/* Cheia tehnică, sub etichetă. Se vede pentru că e singurul lucru care leagă
   ecranul de ce scrie în `module.json` — fără ea, un client care raportează
   „nu merge permisiunea X" n-are cum să numească X. */
.perm-key { display: block; color: var(--ink-subtle); }

/* ─── Câmp cu buton alipit (CUI + „Preia de la ANAF") ────────────────────── */

.input-group { display: flex; gap: .5rem; align-items: stretch; }
.input-group .input { flex: 1 1 auto; min-width: 0; }
.input-group .btn  { flex: 0 0 auto; white-space: nowrap; }

/* Pe 360px, butonul cu text nu încape lângă câmp — trec unul sub altul. */
@media (max-width: 30rem) {
    .input-group { flex-wrap: wrap; }
    .input-group .btn { width: 100%; }
}

/* Butonul care așteaptă un răspuns de la rețea. Fără semnal, omul apasă din nou
   și pornește o a doua cerere. */
.btn.is-busy { opacity: .6; cursor: progress; }

/* Un rând de bife („Client" / „Furnizor"), nu o coloană: sunt puține și
   înrudite. Refolosește `.perm` pentru zona de click de 44px. */
.check-row { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem; }

/* ─── Formular de un singur buton, într-un rând de tabel ─────────────────── */

/* Bifarea unei sarcini direct din listă. Are nevoie de un <form> propriu ca să
   poarte tokenul CSRF, dar nu are voie să ocupe un rând. */
.inline-form { display: inline; }
.cell-actions { text-align: right; white-space: nowrap; }

/* ─── Firul de discuție al unei sarcini ─────────────────────────────────── */

.comments { list-style: none; display: flex; flex-direction: column; gap: .875rem; }

.comment {
    padding: .75rem .875rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--bg);
}
.comment-head {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem;
    margin-bottom: .375rem;
}
/* Butonul de retragere se duce la capătul rândului, oricâte elemente ar fi
   înaintea lui. */
.comment-head .inline-form { margin-left: auto; }

/* `word-break` pentru că un comentariu poate conține un link lipit, iar pe
   360px acela ar împinge pagina la orizontală. */
.comment-body { font-size: .9375rem; line-height: 1.55; overflow-wrap: anywhere; }

.comment-form { display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; }
.comment-form .field { width: 100%; }
.comments + .comment-form { margin-top: 1rem; }

/* ─── Marca clientului ───────────────────────────────────────────────────── */

/* Logoul urcat de firmă, în antetul meniului. Înălțime fixă, lățime liberă:
   logourile vin în tot felul de proporții, iar o lățime fixă le-ar turti. */
.sidebar-logo { height: 32px; width: auto; max-width: 160px; object-fit: contain; }

/* Previzualizarea din ecranul de setări. Fundal în carouri, ca transparența să
   se vadă ca transparență, nu ca alb — altfel omul descoperă abia pe prima
   factură că logoul lui are fundal. */
.logo-preview {
    height: auto; width: auto; max-width: 300px; max-height: 100px;
    margin: .5rem 0 .75rem;
    border: 1px solid var(--line); border-radius: var(--radius);
    padding: .5rem;
    background-color: var(--surface);
    background-image:
        linear-gradient(45deg, var(--line) 25%, transparent 25%, transparent 75%, var(--line) 75%),
        linear-gradient(45deg, var(--line) 25%, transparent 25%, transparent 75%, var(--line) 75%);
    background-size: 16px 16px;
    background-position: 0 0, 8px 8px;
}

/* ─── Facturi ────────────────────────────────────────────────────────────── */

/* Câmpuri strânse, pentru un tabel cu șase coloane editabile. Lățimea vine din
   conținut, nu din procente: pe telefon tabelul derulează orizontal în
   `.table-wrap`, iar coloanele își păstrează proporțiile. */
.input-xs { width: 6.5rem; }
.input-sm { width: 9rem; }

.table.lines td { vertical-align: middle; }
.table.lines .input { min-height: 38px; }

/* Totalurile facturii: etichetă la stânga, sumă la dreapta, aliniate în
   coloană. `dl` și nu tabel — sunt perechi nume/valoare, nu date tabelare. */
.totals {
    display: grid; grid-template-columns: 1fr auto;
    gap: .25rem .75rem; align-items: baseline;
    margin: 1rem 0 0 auto; max-width: 22rem;
    font-size: .9375rem;
}
.totals dt { color: var(--ink-muted); }
.totals dd { margin: 0; text-align: right; }
.totals .grand {
    padding-top: .5rem; margin-top: .25rem;
    border-top: 2px solid var(--ink); font-weight: 700; font-size: 1.0625rem;
}

/* Totalul de sub listă: răspunsul la „cât am facturat", peste toate rândurile
   filtrate, nu peste pagina curentă. */
.list-total {
    padding: .625rem 1rem; margin: 0;
    border-top: 1px solid var(--line);
    font-size: .875rem; color: var(--ink-muted);
}

/* Acțiunile de document (emite / încasează / anulează), fiecare în formularul
   ei ca să poarte tokenul CSRF. */
.doc-actions { margin-top: 1rem; gap: .5rem; }

/* Linkul „mi-am uitat parola", sub butonul de autentificare. Clasă, nu
   `style=`: CSP-ul cu nonce blochează atributele de stil în tăcere (regula 6). */
.auth-hint { margin: 0; text-align: center; font-size: .875rem; }

/* ─── Setări declarate de module (D35) ───────────────────────────────────── */

/* Linkurile către ecranele de setări ale modulelor. Blocuri, nu o listă: pe
   telefon un rând de text e greu de nimerit cu degetul. */
.setting-links { display: flex; flex-wrap: wrap; gap: .5rem; }
.setting-link {
    display: flex; align-items: center; gap: .625rem;
    padding: .75rem 1rem; min-height: 44px;
    border: 1px solid var(--line); border-radius: var(--radius);
    color: var(--ink); text-decoration: none; font-size: .9375rem;
}
.setting-link:hover { border-color: var(--brand); text-decoration: none; }
.setting-link .icon { color: var(--ink-subtle); }

/* Bifele unui grup de setări: una sub alta, fiecare cu explicația ei — sunt
   comutatoare de flux, iar un „de ce" contează mai mult decât spațiul. */
.check-column { display: flex; flex-direction: column; gap: .75rem; margin-top: 1rem; }
.check-hint { margin: .125rem 0 0 1.9rem; }

/* Un câmp care ocupă toată lățimea grilei (text lung, bifă). */
.field-wide { grid-column: 1 / -1; }

/* Comutatorul de limbă din subsolul meniului. Formular, nu linkuri: schimbă o
   preferință salvată, deci nu are ce căuta într-o cerere GET (D36). */
.lang-form { display: flex; align-items: center; gap: .375rem; }
.select-xs {
    height: 28px; min-height: 28px; padding: 0 1.5rem 0 .5rem;
    font-size: .8125rem; border-radius: .375rem;
}

/* Cifrele unei lucrări: aceleași perechi nume/valoare ca la factură, dar în
   cardul lor, nu sub un tabel — de aceea ocupă toată lățimea și nu se împing
   la dreapta. Pe telefon (publicul: șefi de șantier) e singurul lucru din card,
   deci n-are de ce să stea într-o coloană îngustă. */
.money-grid { margin: 0; max-width: none; }
@media (min-width: 40rem) { .money-grid { max-width: 26rem; } }

/* Firul Ariadnei pe lucrare: proiect › subproiect › componentă. `flex` cu
   `wrap`, ca un cod lung să treacă pe rândul următor în loc să lățească pagina
   — o pagină care se derulează lateral pe telefon e o pagină stricată. */
.breadcrumb {
    display: flex; flex-wrap: wrap; align-items: baseline;
    gap: .125rem .375rem; margin: 0 0 .25rem;
}

/* ─────────────────────────────────────────────────────────────────────────────
   PANOUL DE OPERATOR

   Deliberat ALTĂ culoare de bandă decât aplicația clienților. Nu e cochetărie:
   panoul poate suspenda firme, iar cine lucrează în două tab-uri trebuie să
   vadă dintr-o privire în care e. Cea mai ieftină apărare împotriva unui clic
   pe ecranul greșit.
   ───────────────────────────────────────────────────────────────────────────── */

.admin-body { background: var(--bg); }

.admin-bar {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
    padding: .625rem 1rem;
    background: #0f172a; color: #e2e8f0;
    border-bottom: 3px solid #f59e0b;
}
.admin-mark { color: #e2e8f0; text-decoration: none; font-weight: 600; }
.admin-mark b { color: #4aa0ff; }
.admin-mark span {
    margin-left: .375rem; padding: .125rem .375rem; border-radius: .25rem;
    background: #f59e0b; color: #0f172a;
    font-size: .6875rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em;
}

.admin-nav { display: flex; flex-wrap: wrap; gap: .25rem; flex: 1; }
.admin-nav-link {
    display: inline-flex; align-items: center; gap: .375rem;
    padding: .5rem .75rem; border-radius: .5rem;
    color: #94a3b8; text-decoration: none; font-size: .875rem;
    /* Ținta de atingere de 44px (D13) — panoul se deschide și de pe telefon. */
    min-height: 44px;
}
.admin-nav-link:hover { background: rgba(255, 255, 255, .06); color: #e2e8f0; }
.admin-nav-link.is-active { background: rgba(74, 160, 255, .16); color: #e2e8f0; }

.admin-out { display: flex; align-items: center; gap: .5rem; color: #94a3b8; }

.admin-main {
    max-width: 72rem; margin: 0 auto; padding: 1.25rem 1rem 3rem;
    display: flex; flex-direction: column; gap: 1.25rem;
}

/* Două coloane de la tabletă în sus; una pe telefon, ca orice altceva. */
.admin-cols { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 56rem) { .admin-cols { grid-template-columns: 1fr 1fr; } }

/* Cifrele de sus: fiecare e un link către lista filtrată. Un număr pe care nu
   poți da clic te obligă să reconstruiești filtrul de mână. */
.stat-grid {
    display: grid; gap: 16px; margin-bottom: 16px;
    grid-template-columns: 1fr;
}
@media (min-width: 576px)  { .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px)  { .stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1800px) { .stat-grid { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); } }
.stat {
    display: flex; flex-direction: column; justify-content: center; gap: 2px;
    min-height: 84px; padding: 16px 18px; border-radius: 12px;
    background: #fff; border: 1px solid var(--line); box-shadow: var(--gp-shadow);
    text-decoration: none; color: inherit;
}
a.stat:hover { box-shadow: var(--gp-shadow-md); text-decoration: none; }
.stat-value { order: 2; font-size: 21px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; white-space: nowrap; }
.stat-label { order: 1; font-size: 13px; font-weight: 500; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 576px) { .stat-value { font-size: 26px; } }

/* Jurnalele: rânduri, nu tabel — se citesc de sus în jos. */
.log { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .5rem; }
.log li {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: .375rem;
    padding-bottom: .5rem; border-bottom: 1px solid var(--line);
    font-size: .875rem;
}
.log li:last-child { border-bottom: 0; padding-bottom: 0; }

/* Pașii de configurare a celui de-al doilea factor. */
.steps { margin: 1rem 0; padding-left: 1.25rem; display: grid; gap: .75rem; font-size: .9375rem; }
.steps li { padding-left: .25rem; }

.secret-key {
    display: block; margin: .5rem 0 .25rem; padding: .625rem .75rem;
    background: var(--bg); border: 1px solid var(--line); border-radius: .5rem;
    font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
    font-size: 1.0625rem; letter-spacing: .06em; word-break: break-all;
    /* Se selectează dintr-un dublu clic: se copiază, nu se tastează. */
    user-select: all;
}

/* Codul din aplicație: șase cifre, rărite, ca să se verifice din ochi. */
.input-code {
    font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
    font-size: 1.375rem; letter-spacing: .3em; text-align: center;
}

.auth-card-wide { max-width: 32rem; }

.btn-row { display: flex; flex-wrap: wrap; gap: .375rem; }


.text-danger { color: var(--danger, #dc2626); }

/* ─────────────────────────────────────────────────────────────────────────────
   PAGINILE JURIDICE

   Lățime de CITIT, nu de umplut ecranul. Un rând de contract întins pe 1600px
   e un rând pe care ochiul îl pierde la întoarcere — de aceea `max-width` în
   `ch`, unitatea care măsoară caractere, nu pixeli.
   ───────────────────────────────────────────────────────────────────────────── */

.legal-body { background: var(--bg); color: var(--ink); }

.legal-head {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem;
    padding: 1rem 1.25rem; border-bottom: 1px solid var(--line);
    background: var(--card);
}
.legal-brand { font-weight: 600; text-decoration: none; color: var(--ink); }
.legal-brand b { color: var(--brand); }
.legal-nav { display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: .875rem; }

.legal-page {
    max-width: 72ch; margin: 0 auto; padding: 2rem 1.25rem 4rem;
    font-size: 1rem; line-height: 1.7;
}
.legal-page h1 { font-size: 1.75rem; line-height: 1.25; margin: .5rem 0 .25rem; }
.legal-page h2 { font-size: 1.1875rem; line-height: 1.35; margin: 2.5rem 0 .75rem; }
.legal-page h3 { font-size: 1rem; margin: 1.5rem 0 .5rem; }
.legal-page p, .legal-page ul, .legal-page ol { margin: 0 0 1rem; }
.legal-page ul, .legal-page ol { padding-left: 1.5rem; }
.legal-page li { margin-bottom: .5rem; }
.legal-page code {
    padding: .0625rem .25rem; border-radius: .25rem;
    background: var(--card); border: 1px solid var(--line);
    font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
    font-size: .875em; word-break: break-word;
}

.legal-meta { color: var(--ink-muted); font-size: .875rem; margin-bottom: 1.5rem; }
.legal-intro {
    font-size: 1.0625rem; color: var(--ink-muted);
    padding-left: 1rem; border-left: 3px solid var(--brand);
}

/* Cuprinsul: numerotat cu numerele din titluri, nu cu ale listei — titlurile
   își poartă deja numărul, iar două numerotări una lângă alta se bat cap în cap. */
.legal-toc {
    margin: 2rem 0; padding: 1rem 1.25rem;
    background: var(--card); border: 1px solid var(--line); border-radius: .75rem;
}
.legal-toc .label { font-size: .8125rem; text-transform: uppercase; letter-spacing: .04em;
                    color: var(--ink-muted); margin: 0 0 .5rem; }
.legal-toc ol { list-style: none; padding: 0; margin: 0; display: grid; gap: .375rem; }
.legal-toc li { margin: 0; font-size: .9375rem; }

/* Ancora sub antet: fără asta, un clic din cuprins pune titlul chiar pe muchia
   de sus a ferestrei. */
.legal-section { scroll-margin-top: 1.5rem; }

/* Tabelele din documente (temeiuri legale, termene de păstrare). Se derulează
   pe orizontală în containerul lor, nu împing pagina. */
.legal-page table {
    width: 100%; border-collapse: collapse; margin: 0 0 1.25rem;
    font-size: .9375rem; display: block; overflow-x: auto;
}
.legal-page th, .legal-page td {
    padding: .5rem .625rem; text-align: left; vertical-align: top;
    border-bottom: 1px solid var(--line);
}
.legal-page th { font-weight: 600; color: var(--ink-muted); white-space: nowrap; }

.legal-entity { border-top: 2px solid var(--line); padding-top: .5rem; }

.legal-list { list-style: none; padding: 0; display: grid; gap: 1rem; margin: 1.5rem 0; }
.legal-list li {
    padding: 1rem 1.25rem; border: 1px solid var(--line); border-radius: .75rem;
    background: var(--card); margin: 0;
}
.legal-list a { font-size: 1.0625rem; font-weight: 600; }
.legal-list p { margin: .25rem 0 0; }

.legal-foot {
    max-width: 72ch; margin: 0 auto; padding: 1.5rem 1.25rem 3rem;
    border-top: 1px solid var(--line); font-size: .875rem; color: var(--ink-muted);
}

/* Subsolul juridic al aplicației. Discret, dar prezent pe fiecare pagină —
   legea cere „permanent accesibile", nu „undeva pe site". */
.app-foot {
    margin-top: 24px;
    display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 1rem;
    padding: 1.25rem 1rem 2rem;
    font-size: .8125rem; color: var(--ink-muted);
}
.app-foot a { color: inherit; }
.app-foot a:hover { color: var(--brand); }

.auth-legal { margin-top: .75rem; text-align: center; color: var(--ink-muted); }

/* Sufixul lipit de câmp: „firma-mea│.truckplan.app". Omul vede din prima că scrie
   doar partea din față, nu toată adresa — un placeholder ar fi spus același
   lucru, dar dispare exact când începe să tasteze. */
.input-suffix { display: flex; align-items: stretch; }
.input-suffix .input {
    flex: 1; min-width: 0;
    border-top-right-radius: 0; border-bottom-right-radius: 0;
    border-right: 0;
}
.input-suffix .suffix {
    display: flex; align-items: center; padding: 0 .75rem;
    border: 1px solid var(--line); border-left: 0;
    border-top-right-radius: .5rem; border-bottom-right-radius: .5rem;
    background: var(--bg); color: var(--ink-muted);
    font-size: .875rem; white-space: nowrap;
}
/* Pe ecrane înguste sufixul ar strivi câmpul: trece dedesubt. */
@media (max-width: 26rem) {
    .input-suffix { flex-direction: column; }
    .input-suffix .input { border-radius: .5rem; border-right: 1px solid var(--line); }
    .input-suffix .suffix {
        border: 0; padding: .25rem 0 0; background: none;
        font-size: .8125rem;
    }
}


/* Cardul secundar de pe pagina de intrare: „nu-ți amintești adresa?". Vizual
   mai șters decât cel principal — e o cale de rezervă, nu una egală. */
.card-quiet { background: transparent; border-style: dashed; }
.tiny-title {
    font-size: .9375rem; font-weight: 600; margin: 0 0 .25rem;
}

/* ─── Cererile din pagina de prezentare ──────────────────────────────────── */

/* Contactul sus-stânga, starea sus-dreapta: prima privire răspunde la „cine e
   și am vorbit deja cu el?". Pe telefon se așază unul sub altul. */
.lead-head {
    display: flex; flex-wrap: wrap; gap: .5rem 1rem;
    align-items: flex-start; justify-content: space-between;
}
.lead-contact {
    margin: 0; display: flex; flex-wrap: wrap; gap: .25rem 1rem;
    font-size: .9375rem;
}
.lead-message {
    margin: .75rem 0 0; padding: .625rem .75rem;
    background: var(--surface-alt); border-radius: .5rem;
    font-size: .875rem; line-height: 1.5; white-space: normal;
    /* Mesajele de spam vin cu URL-uri lungi, fără spații: fără asta, cardul
       se lățește și pagina capătă bară orizontală. */
    overflow-wrap: anywhere;
}
/* Salvarea și ștergerea sunt formulare separate (rute diferite), dar stau pe
   același rând. Ștergerea împinsă la dreapta, ca să n-o nimerești din greșeală
   când voiai „Salvează". */
.lead-actions {
    display: flex; flex-wrap: wrap; gap: .5rem 1rem;
    align-items: center; margin-top: .75rem;
}
.lead-save {
    display: flex; flex-wrap: wrap; gap: .5rem;
    align-items: center; flex: 1 1 20rem;
}
.lead-save .input { flex: 1 1 14rem; min-width: 0; }
.lead-save .select { flex: 0 0 auto; width: auto; }
.lead-delete { margin-left: auto; }

/* Cifra pe care ai apăsat rămâne evidentă — altfel nu se vede ce filtru e pus. */
.stat.is-current { border-color: var(--brand); background: var(--surface-alt); }

/* Paginarea simplă, cu un link per pagină (listele din panoul de operator).
   `Ui::pager()` folosește `.pager-btn`; astea sunt ecranele care numerotează
   direct, fără contor. */
.pager-link {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 36px; min-height: 36px; padding: 0 .5rem;
    border: 1px solid var(--line); border-radius: .5rem;
    background: var(--surface); color: var(--ink-muted);
    font-size: .875rem; text-decoration: none;
}
.pager-link:hover { background: var(--surface-alt); color: var(--ink); text-decoration: none; }
.pager-link.is-current { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }

/* ─── Înregistrarea self-service ─────────────────────────────────────────── */

/* Un ecran mai lat decât cel de logare: aici sunt patru câmpuri, o bifă și
   trei pachete, nu email + parolă. */
.auth-screen-wide .auth-card { max-width: 34rem; }

.plan-choice { border: 0; padding: 0; margin: 0; }
.plan-choice legend { padding: 0; margin-bottom: .5rem; }

.plan-grid {
    display: grid; gap: .5rem;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
}

/* Butonul radio rămâne în DOM pentru tastatură și cititoare de ecran, dar nu
   se vede: cardul întreg e ținta de atins cu degetul. */
.plan-option { position: relative; cursor: pointer; }
.plan-option input {
    position: absolute; inset: 0; width: 100%; height: 100%;
    margin: 0; opacity: 0; cursor: pointer;
}
.plan-body {
    display: flex; flex-direction: column; gap: .125rem;
    padding: .75rem .875rem; border-radius: .75rem;
    border: 1px solid var(--line); background: var(--card);
}
.plan-option input:checked + .plan-body {
    border-color: var(--brand);
    box-shadow: inset 0 0 0 1px var(--brand);
}
/* Conturul de focus trebuie să rămână vizibil, altfel navigarea cu Tab devine
   invizibilă — butonul radio e ascuns, deci conturul lui n-ar apărea nicăieri. */
.plan-option input:focus-visible + .plan-body { outline: 2px solid var(--brand); outline-offset: 2px; }

.plan-name  { font-weight: 600; font-size: .9375rem; }
.plan-price { font-size: 1.125rem; font-weight: 700; line-height: 1.2; }
.plan-per   { font-size: .75rem; font-weight: 400; color: var(--ink-muted); }
.plan-users { font-size: .8125rem; color: var(--ink-muted); }

/* Adresa: câmpul și sufixul `.truckplan.app` par un singur control, ca omul să
   vadă dintr-o privire ce va scrie în bara browserului. */
.addr-input {
    display: flex; align-items: stretch;
    border: 1px solid var(--line); border-radius: .5rem;
    background: var(--surface); overflow: hidden;
}
.addr-input:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft, rgba(43,140,255,.15)); }
.addr-input .input {
    border: 0; border-radius: 0; background: transparent;
    flex: 1 1 auto; min-width: 0;
}
.addr-input .input:focus { box-shadow: none; }
.addr-suffix {
    display: flex; align-items: center; padding: 0 .75rem;
    background: var(--surface-alt); color: var(--ink-muted);
    font-size: .875rem; white-space: nowrap;
    border-left: 1px solid var(--line);
}

.auth-alt { margin: 1.25rem 0 0; text-align: center; font-size: .875rem; color: var(--ink-muted); }

/* Pagina de așteptare, cât se construiește instanța. */
.wait-box { text-align: center; padding: 1rem 0; }
.wait-dot {
    display: inline-block; width: .625rem; height: .625rem; margin: 0 .1875rem;
    border-radius: 50%; background: var(--brand);
    animation: wait-pulse 1.2s ease-in-out infinite;
}
.wait-dot:nth-child(2) { animation-delay: .15s; }
.wait-dot:nth-child(3) { animation-delay: .3s; }
@keyframes wait-pulse { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
/* Cine a cerut mai puțină mișcare nu primește niciuna. */
@media (prefers-reduced-motion: reduce) {
    .wait-dot { animation: none; opacity: .6; }
}

/* ─── Paginile publice ale platformei ────────────────────────────────────── */

/*
 * Tot ce vede un vizitator ÎNAINTE să intre în instanța lui — înregistrarea,
 * intrarea în cont, documentele juridice — poartă tema paginii de prezentare.
 *
 * DE CE nu urmează preferința sistemului, ca restul aplicației: omul vine de pe
 * `truckplan.app`, care e întunecată mereu. Pe un calculator cu tema deschisă,
 * următorul ecran s-ar albi brusc, iar saltul citește ca „am nimerit pe alt
 * site" exact în momentul în care i se cere emailul și o parolă.
 *
 * Înăuntru, în instanța lui, aplicația revine la preferința sistemului: acolo e
 * o unealtă de lucru, folosită ore în șir, nu o pagină de prezentare.
 *
 * Culorile sunt cele din `tailwind.config.js` al paginii de prezentare
 * (`ink` și `brand`). Se suprascriu DOAR variabilele: butoanele, cardurile și
 * câmpurile rămân neatinse și se colorează singure.
 */
.marketing {
    --bg:          #070b16;   /* ink-900 */
    --surface:     #0f172e;   /* ink-700 */
    --surface-alt: #0a1020;   /* ink-800 */
    --line:        #1e2a4a;
    --ink:         #e8edf7;
    --ink-muted:   #94a3b8;
    --ink-subtle:  #64748b;

    --brand:       #2563eb;   /* brand-600 */
    --brand-hover: #3b82f6;   /* brand-500 */
    --brand-ink:   #ffffff;

    --shadow:    0 1px 2px rgba(0, 0, 0, .4), 0 4px 12px -4px rgba(0, 0, 0, .5);
    --shadow-lg: 0 20px 50px -20px rgba(0, 0, 0, .8);

    background: var(--bg);
    color: var(--ink);
    /* Aceeași față și pe un ecran mai înalt decât conținutul. */
    min-height: 100vh;
}

/* Aceeași aură albastră de sub cardul principal ca pe pagina de prezentare. */
.marketing .auth-card > .card {
    border-color: rgba(96, 165, 250, .14);
    box-shadow: var(--shadow-lg), 0 0 60px -30px rgba(37, 99, 235, .6);
}

.marketing .auth-brand { color: #e8edf7; }
.marketing .auth-brand b { color: #60a5fa; }

/* Legăturile din text (termeni, confidențialitate) trebuie să se vadă pe fundal
   închis fără să strige. */
.marketing a { color: #60a5fa; }
.marketing a:hover { color: #93c5fd; }

/* Câmpurile: puțin mai deschise decât cardul, ca să se distingă marginile. */
.marketing .input,
.marketing .select,
.marketing .textarea,
.marketing .addr-input { background: #0a1020; }

.marketing .addr-suffix { background: #070b16; color: #94a3b8; }

/* Parola, cerută o singură dată: câmpul și butonul „arată" par un singur
   control, ca la adresă. Butonul e text, nu o iconiță de ochi — un cuvânt se
   citește fără să-l ghicești, iar cititoarele de ecran îl anunță corect. */
.pass-input {
    display: flex; align-items: stretch;
    border: 1px solid var(--line); border-radius: .5rem;
    background: var(--surface); overflow: hidden;
}
.pass-input:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(43, 140, 255, .15); }
.pass-input .input {
    border: 0; border-radius: 0; background: transparent;
    flex: 1 1 auto; min-width: 0;
}
.pass-input .input:focus { box-shadow: none; }
.pass-reveal {
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto; min-width: 2.75rem; padding: 0 .875rem;
    border: 0; border-left: 1px solid var(--line);
    background: var(--surface-alt); color: var(--ink-muted);
    font: inherit; font-size: .8125rem; cursor: pointer;
    /* Aceeași lățime în ambele stări, ca marginea câmpului să nu sară la clic. */
    min-width: 5rem;
}
.pass-reveal:hover { color: var(--ink); }
.pass-reveal[aria-pressed="true"] { color: var(--brand); }

.marketing .pass-input { background: #0a1020; }
.marketing .pass-reveal { background: #070b16; }

/* Starea adresei, verificată în timp ce se scrie. Culoarea NU e singurul
   semn — mesajul de sub câmp spune același lucru în cuvinte, fiindcă unul din
   doisprezece bărbați nu deosebește roșul de verde. */
.slug-status { display: block; margin-top: .25rem; font-size: .8125rem; min-height: 1.1em; }
.slug-status.is-ok  { color: var(--ok); }
.slug-status.is-bad { color: var(--danger); }

.addr-input:has(.input.is-invalid) { border-color: var(--danger); }
.addr-input:has(.input.is-valid)   { border-color: var(--ok); }
/* `:has()` lipsește pe browsere vechi; atunci rămâne mesajul scris, care e
   oricum purtătorul adevărat al informației. */
.input.is-invalid { color: var(--danger); }

/* Banda de alertă pentru abuz. Lista, nu un semn de exclamare: ce anume a
   depășit pragul, de pe ce rețea și de câte ori. */
.abuse-alert { align-items: flex-start; margin-bottom: 1rem; }
.abuse-title { margin: 0 0 .375rem; font-weight: 600; }
.abuse-list { margin: 0; padding-left: 1.125rem; font-size: .875rem; line-height: 1.6; }
.abuse-list .mono { font-size: .8125rem; }

/* Întoarcerea la pagina de prezentare. Sus-stânga, deasupra cardului: acolo
   caută oricine „înapoi". Contează mai mult decât pare — e alt domeniu decât
   cel pe care se află omul, deci butonul browserului nu duce unde crede. */
.auth-back {
    display: inline-flex; align-items: center; gap: .375rem;
    margin-bottom: .75rem; padding: .375rem .625rem .375rem .375rem;
    border-radius: .5rem;
    font-size: .875rem; color: var(--ink-muted); text-decoration: none;
    /* Ținta de atins cu degetul, pe telefon. */
    min-height: 40px;
}
.auth-back:hover { color: var(--ink); background: var(--surface-alt); text-decoration: none; }
.auth-back .icon { width: 1rem; height: 1rem; }

/* Sigla e și ea un link acum; nu trebuie să arate ca unul. */
a.auth-brand { text-decoration: none; }
a.auth-brand:hover { text-decoration: none; }

.marketing .auth-back { color: #94a3b8; }
.marketing .auth-back:hover { color: #e8edf7; background: rgba(255, 255, 255, .04); }

/* Butonul „arată parola": iconiță, deci pătrat, nu bandă de text. */
.pass-reveal .icon { width: 1.125rem; height: 1.125rem; }

/* ─── Emitentul documentului juridic ─────────────────────────────────────── */

/*
 * Cartea de vizită a firmei, de la finalul fiecărui document.
 *
 * A folosit o vreme `.totals` — clasa totalurilor de factură. Semăna, dar
 * rezolva altceva: acolo sunt perechi „Subtotal / 1.234,00", valori scurte
 * aliniate la dreapta, într-o coloană îngustă lipită de marginea paginii.
 * Aici sunt etichete lungi („Protecția datelor") și valori lungi (o adresă
 * poștală întreagă) — iar rezultatul era etichete rupte în două rânduri, cu un
 * gol în mijloc și blocul plutind spre dreapta, departe de titlul lui.
 */
.entity-card {
    margin: 1rem 0 0;
    padding: .25rem 1.25rem;
    border: 1px solid var(--line);
    border-radius: .75rem;
    background: var(--surface-alt);
}

.entity-grid {
    display: grid;
    /* Eticheta se dimensionează după cel mai lung text, dar nu peste 12rem:
       traducerile diferă, iar o coloană fixă ar rupe fie româna, fie engleza. */
    grid-template-columns: minmax(min-content, 12rem) 1fr;
    gap: 0;
    margin: 0;
    font-size: .9375rem;
}

.entity-grid dt,
.entity-grid dd {
    padding: .625rem 0;
    /* Linie între rânduri, nu chenar în jurul fiecăruia: ochiul urmărește
       perechea eticheta–valoare de-a lungul rândului. */
    border-top: 1px solid var(--line);
}

/* Primul rând n-are nevoie de linie: e lipit de marginea cardului. */
.entity-grid dt:first-of-type,
.entity-grid dt:first-of-type + dd { border-top: 0; }

.entity-grid dt {
    color: var(--ink-muted);
    padding-right: 1.5rem;
}

.entity-grid dd {
    margin: 0;
    /* La STÂNGA, nu la dreapta. Valorile se citesc una sub alta, ca o listă —
       alinierea la dreapta le împrăștia pe lățimi diferite. */
    text-align: left;
    /* O adresă lungă sau un email lung nu au voie să lățească pagina. */
    overflow-wrap: anywhere;
}

/* Pe telefon, eticheta trece deasupra valorii: două coloane într-un ecran de
   360px ar lăsa fiecărei valori vreo cincisprezece caractere. */
@media (max-width: 30rem) {
    .entity-grid { grid-template-columns: 1fr; }
    .entity-grid dt { padding: .625rem 0 0; font-size: .8125rem; }
    .entity-grid dd { padding: .125rem 0 .625rem; border-top: 0; }
    .entity-grid dt:first-of-type + dd { border-top: 0; }
}

/* Butonul de retrimitere, sub mesajul „verifică-ți emailul". Discret: nu e
   acțiunea principală, e plasa pentru cazul în care mesajul întârzie. */
.resend { margin-top: 1.25rem; text-align: center; }
.resend p { margin: 0; }

/* ─── Prima pagină după logare ───────────────────────────────────────────── */

.home-head h1 { margin: 0 0 1.25rem; font-size: 1.5rem; }

/* Butoanele de „începe ceva". Pe telefon se așază pe rânduri, fiecare cu
   înălțimea unei ținte de deget. */
.home-actions {
    display: flex; flex-wrap: wrap; gap: .625rem;
    margin-bottom: 1.5rem;
}
.home-actions .btn { min-height: 44px; }

/* Primii pași: o listă numerotată, nu bife. Bifele cer o stare salvată, iar
   aici starea E realitatea — pasul dispare când e făcut. */
.home-steps { margin-bottom: 1.5rem; }
.steps a { font-weight: 600; }
.steps p { margin: .125rem 0 0; }

/* Cardurile modulelor. `auto-fit` cu minim: pe un ecran lat intră patru, pe
   telefon unul, fără niciun punct de rupere scris de mână. */
.home-cards {
    display: grid; gap: .875rem;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.home-card {
    display: flex; flex-direction: column; gap: .125rem;
    padding: 1.125rem 1.25rem; border-radius: .875rem;
    border: 1px solid var(--line); background: var(--card);
    text-decoration: none; color: inherit;
}
.home-card:hover { border-color: var(--brand); text-decoration: none; }
.home-card-title { font-size: .8125rem; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .04em; }
.home-card-value { font-size: 1.75rem; font-weight: 700; line-height: 1.15; margin-top: .25rem; }
.home-card-label { font-size: .875rem; color: var(--ink-muted); }
.home-card-detail {
    display: flex; flex-wrap: wrap; gap: .25rem .875rem;
    margin-top: .5rem; padding-top: .5rem; border-top: 1px solid var(--line);
    font-size: .8125rem; color: var(--ink-muted);
}