/* ==========================================================================
   Rom Energy Dashboard — Colors & Type
   ==========================================================================
   Design system for the INTERNAL operations dashboard (solicitări & oferte).
   Inherits the Rom Energy Armstrong brand (navy + signal blue) but DROPS the
   display font — this is a dense operational tool used mostly on MOBILE, so
   Inter carries everything (headings differ by weight + tracking, not a second
   family). EXTENDS the brand with:
     · a disciplined SEMANTIC status palette (termen verde/chihlimbar/roșu) — this
       is functional information, not decoration, so it is the one deliberate
       departure from the website's strict two-color rule.
     · a DENSER type scale — this UI is scanned for 8 hours, not skimmed for 30s.
   Copy is Romanian by default. No emoji — status is carried by color + Lucide
   icons, same as the website carries meaning with icons, never glyphs.
   Import or inline this first in any dashboard artifact.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* ---- Brand / semantic colors (inherited verbatim from Armstrong) ------- */
  --background:            #F9FAFB; /* app background — cool off-white         */
  --foreground:            #1D2235; /* primary text — near-black navy          */
  --card:                  #FFFFFF; /* card / panel / table surface            */
  --card-foreground:       #1D2235;

  --primary:               #22295D; /* deep industrial navy — headers, bars    */
  --primary-foreground:    #FFFFFF;

  --secondary:             #E5EAF0; /* pale blue-grey surface                  */
  --secondary-foreground:  #1D2235;

  --muted:                 #E9EDF1; /* muted surface (bands, chips, headers)   */
  --muted-foreground:      #586174; /* secondary / caption / meta text         */

  --accent:                #1990C8; /* signal blue — actions, links, focus     */
  --accent-foreground:     #FFFFFF;
  --accent-soft:           #E4F1F9; /* accent tint — active chips, row hover   */

  --border:                #CDD5DF; /* hairline borders, dividers, inputs      */
  --input:                 #CDD5DF;
  --ring:                  #1990C8; /* focus ring = accent                     */

  --fg1: var(--foreground);          /* strongest text                        */
  --fg2: rgba(29, 34, 53, 0.70);     /* body copy — foreground @ 70%          */
  --fg3: var(--muted-foreground);    /* captions, meta                        */

  /* ---- SEMANTIC STATUS PALETTE (dashboard extension) --------------------
     Soft tinted pill + saturated dot + darker readable text. Used ONLY for
     deadline / status signalling, never as decoration. Tuned to sit calmly next to
     navy without shouting. Danger reuses the brand --destructive red. */
  --ok-bg:      #E8F3EC;  --ok-fg:      #157F4A;  --ok-dot:      #1F9D57;
  --warn-bg:    #FCEFCF;  --warn-fg:    #A15C07;  --warn-dot:    #E8A317;
  --danger-bg:  #FCE4E4;  --danger-fg:  #C11B1B;  --danger-dot:  #EA2A2A;
  --wait-bg:    #E9EDF1;  --wait-fg:    #586174;  --wait-dot:    #99A3B3;
  --destructive:           #EA2A2A;
  --destructive-foreground:#FFFFFF;

  /* Logo gradient stops (decorative only — never recolor the mark) */
  --logo-blue: #0096BF; --logo-indigo: #3D3293; --logo-green: #83BB4E;

  /* ---- Type families ----------------------------------------------------- */
  --font-headings: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-body:     'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:     ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---- Dense type scale (dashboard) — smaller & tighter than the site ---- */
  --text-xs:   11px;   /* micro labels, table meta          */
  --text-sm:   12px;   /* table body, chips, badges         */
  --text-base: 13px;   /* app base — denser than the site's 16px */
  --text-md:   14px;   /* emphasised cells, buttons         */
  --text-lg:   16px;   /* panel titles                      */
  --text-xl:   20px;   /* section headers                   */
  --text-stat: 28px;   /* summary-band numbers              */

  /* ---- Radius (4px workhorse, same as the site) ------------------------- */
  --radius:    6px;
  --radius-sm: 4px;    /* chips, badges, buttons, inputs    */
  --radius-pill: 999px;

  /* ---- Elevation -------------------------------------------------------- */
  --shadow-sm: 0 1px 2px 0 rgba(29, 34, 53, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(29, 34, 53, 0.10),
               0 2px 4px -2px rgba(29, 34, 53, 0.10);

  /* ---- Spacing rhythm (4px base) ---------------------------------------- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px;

  /* ---- Density knobs for tables ----------------------------------------- */
  --row-h: 44px;              /* comfortable dense row height */
  --row-h-compact: 36px;

  /* ---- Interactive sizing (token-driven so the mobile layer can enlarge) - */
  --btn-h:    34px;   --btn-h-sm: 28px;  /* action-button heights (desktop)   */
  --badge-h:  22px;                      /* sla / chip / stage pill height     */
}

/* ==========================================================================
   Base element styles
   ========================================================================== */
body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-feature-settings: "rlig" 1, "calt" 1, "tnum" 1; /* tabular numerals */
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

h1, .h1 { font-family: var(--font-headings); font-weight: 700; font-size: var(--text-xl);
          line-height: 1.15; letter-spacing: -0.01em; color: var(--primary); }
h2, .h2 { font-family: var(--font-headings); font-weight: 700; font-size: var(--text-lg);
          line-height: 1.2; color: var(--primary); }
h3, .h3 { font-family: var(--font-headings); font-weight: 600; font-size: var(--text-md);
          color: var(--primary); }

p, .body { font-family: var(--font-body); font-size: var(--text-base); color: var(--fg2); }
small, .caption { font-size: var(--text-xs); color: var(--fg3); }
.mono, .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
input, textarea, select { font-family: var(--font-body); font-size: var(--text-md);
       color: var(--foreground); }

/* Kicker / eyebrow — the brand signature (1px accent bar + uppercase label) */
.kicker { font-family: var(--font-body); font-size: var(--text-xs); font-weight: 700;
          text-transform: uppercase; letter-spacing: 0.16em; color: var(--accent); }
.kicker-row { display: flex; align-items: center; gap: 8px; }
.kicker-bar { display: block; width: 1px; height: 12px; background: var(--accent); }

a, .link { color: var(--accent); text-decoration: none; }
a:hover, .link:hover { text-decoration: underline; }

/* ==========================================================================
   Dashboard components — canonical classes (reuse these in code)
   ========================================================================== */

/* ---- Deadline (termen) badge ------------------------------------------- */
.sla { display: inline-flex; align-items: center; gap: 6px; height: var(--badge-h);
       padding: 0 9px; border-radius: var(--radius-sm); font-size: var(--text-sm);
       font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sla .sla-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.sla svg { width: 13px; height: 13px; stroke-width: 2.25; }
.sla-ok     { background: var(--ok-bg);     color: var(--ok-fg); }
.sla-ok     .sla-dot { background: var(--ok-dot); }
.sla-warn   { background: var(--warn-bg);   color: var(--warn-fg); }
.sla-warn   .sla-dot { background: var(--warn-dot); }
.sla-danger { background: var(--danger-bg); color: var(--danger-fg); }
.sla-danger .sla-dot { background: var(--danger-dot); }
.sla-wait   { background: var(--wait-bg);   color: var(--wait-fg); }
.sla-wait   .sla-dot { background: var(--wait-dot); }
.sla-none   { color: var(--fg3); font-weight: 500; }  /* the "—" no-deadline case */

/* ---- Status chip (STARE axis) — quiet categorical fills ---------------- */
.chip { display: inline-flex; align-items: center; gap: 6px; height: var(--badge-h);
        padding: 0 9px; border-radius: var(--radius-sm); font-size: var(--text-sm);
        font-weight: 600; white-space: nowrap; }
.chip .chip-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.chip-nou   { background: #fff; border: 1px solid var(--border); color: var(--primary); }
.chip-nou   .chip-dot { background: var(--accent); }
.chip-lucru { background: var(--accent-soft); color: #14618c; }
.chip-lucru .chip-dot { background: var(--accent); }
.chip-astept{ background: var(--muted); color: var(--muted-foreground); }
.chip-astept .chip-dot { background: transparent; border: 1.5px solid var(--wait-dot); width: 7px; height: 7px; }
.chip-final { background: var(--ok-bg); color: var(--ok-fg); }
.chip-final .chip-dot { background: var(--ok-dot); }

/* ---- ETAPĂ tag (operational stage) — outline, secondary to STARE ------- */
.stage { display: inline-flex; align-items: center; gap: 6px; height: var(--badge-h);
         padding: 0 8px; border-radius: var(--radius-sm); font-size: var(--text-xs);
         font-weight: 600; color: var(--fg3); background: transparent;
         border: 1px dashed var(--border); white-space: nowrap; }

/* ---- Type badge (CDA / CO / V) ----------------------------------------- */
.type { display: inline-flex; align-items: center; justify-content: center;
        min-width: 34px; height: 20px; padding: 0 7px; border-radius: var(--radius-sm);
        font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700;
        letter-spacing: 0.04em; }
.type-cda { background: var(--primary); color: #fff; }          /* comandă        */
.type-co  { background: var(--accent);  color: #fff; }          /* cerere ofertă  */
.type-v   { background: #fff; border: 1px solid var(--border); color: var(--fg3); } /* vizită */

/* ---- Buttons (same language as the website) ---------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px;
       border-radius: var(--radius-sm); font-family: var(--font-body); font-weight: 600;
       font-size: var(--text-md); cursor: pointer; border: none; transition: all .15s;
       height: var(--btn-h); padding: 0 14px; }
.btn:active { transform: translateY(1px); }
.btn svg { width: 15px; height: 15px; stroke-width: 2.25; }
.btn-primary   { background: var(--accent); color: #fff; }
.btn-primary:hover { background: #1681b4; }
.btn-secondary { background: transparent; border: 1.5px solid var(--primary); color: var(--primary); }
.btn-secondary:hover { background: var(--primary); color: #fff; }
.btn-ghost     { background: transparent; border: 1px solid var(--border); color: var(--foreground); }
.btn-ghost:hover { border-color: var(--primary); color: var(--primary); }
.btn-danger    { background: transparent; border: 1px solid var(--danger-dot); color: var(--danger-fg); }
.btn-danger:hover { background: var(--danger-dot); color: #fff; }
.btn-sm { height: var(--btn-h-sm); padding: 0 10px; font-size: var(--text-sm); }

/* ---- Table (registru) -------------------------------------------------- */
.tbl { width: 100%; border-collapse: collapse; background: var(--card);
       font-size: var(--text-sm); }
.tbl thead th { text-align: left; font-family: var(--font-body); font-weight: 700;
       font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em;
       color: var(--fg3); background: var(--muted); padding: 8px 12px;
       border-bottom: 1px solid var(--border); white-space: nowrap; }
.tbl tbody td { padding: 0 12px; height: var(--row-h); border-bottom: 1px solid var(--border);
       color: var(--foreground); vertical-align: middle; }
@media (hover: hover) { .tbl tbody tr:hover { background: var(--accent-soft); } }
.tbl tbody tr:active { background: var(--accent-soft); }  /* touch feedback */
.tbl .num { text-align: right; color: var(--fg3); }
.tbl .client { font-weight: 600; }

/* ---- Summary stat tile ------------------------------------------------- */
.stat { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
        padding: 12px 14px; min-width: 130px; box-shadow: var(--shadow-sm); }
.stat .stat-label { font-size: var(--text-xs); text-transform: uppercase;
        letter-spacing: 0.1em; color: var(--fg3); font-weight: 700; }
.stat .stat-value { font-family: var(--font-headings); font-size: var(--text-stat);
        font-weight: 700; color: var(--primary); line-height: 1.1; margin-top: 2px;
        font-variant-numeric: tabular-nums; }
.stat.is-warn   .stat-value { color: var(--warn-fg); }
.stat.is-danger .stat-value { color: var(--danger-fg); }
.stat.is-ok     .stat-value { color: var(--ok-fg); }

/* ---- Next-action card (follow-up „ce urmează și când") -----------------
   Distinct from the termen badge (the delivery deadline); this
   is the next operational step for a solicitare — sună / relansează / confirmă.
   ONE state modifier on .next (.is-warn / .is-danger / .is-none) tints the left
   signal bar, the icon chip and the date pill together. Reuses the semantic
   palette; default (no modifier) = a calm future-scheduled action. */
.next { display: flex; align-items: flex-start; gap: 12px; background: var(--card);
        border: 1px solid var(--border); border-left: 3px solid var(--accent);
        border-radius: var(--radius); padding: 12px 14px; box-shadow: var(--shadow-sm); }
.next-icon { flex: none; width: 32px; height: 32px; border-radius: var(--radius-sm);
        display: inline-flex; align-items: center; justify-content: center;
        background: var(--accent-soft); color: var(--accent); }
.next-icon svg { width: 17px; height: 17px; stroke-width: 2; }
.next-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.next-kicker { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase;
        letter-spacing: 0.12em; color: var(--fg3); }
.next-action { font-size: var(--text-md); font-weight: 600; color: var(--foreground);
        line-height: 1.3; }
.next-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 3px; }
.next-date { display: inline-flex; align-items: center; height: var(--badge-h);
        padding: 0 9px; border-radius: var(--radius-sm); font-size: var(--text-sm);
        font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap;
        background: var(--accent-soft); color: #14618c; }
.next-owner { display: inline-flex; align-items: center; gap: 5px;
        font-size: var(--text-xs); color: var(--fg3); }
.next-owner svg { width: 13px; height: 13px; stroke-width: 2; }
/* urgency states — set on .next */
.next.is-warn   { border-left-color: var(--warn-dot); }
.next.is-warn   .next-icon { background: var(--warn-bg); color: var(--warn-fg); }
.next.is-warn   .next-date { background: var(--warn-bg); color: var(--warn-fg); }
.next.is-danger { border-left-color: var(--danger-dot); }
.next.is-danger .next-icon { background: var(--danger-bg); color: var(--danger-fg); }
.next.is-danger .next-date { background: var(--danger-bg); color: var(--danger-fg); }
.next.is-none   { border-left-color: var(--border); }
.next.is-none   .next-icon { background: var(--muted); color: var(--fg3); }
.next.is-none   .next-action { color: var(--fg3); font-weight: 500; }

/* ---- Operator load panel (manager view: fair distribution) -------------
   Answers two questions at a glance: WHO HAS HOW MUCH (the count) and WHO IS
   AT RISK (the segmented bar — verde la termen / chihlimbar scadent / roșu
   depășit, same semantic palette as the termen badge). A red flag + dimmed row
   surface an operator who is out (concediu/vizită) yet still holds overdue
   work — the cue to reallocate. */
.load-panel { background: var(--card); border: 1px solid var(--border);
        border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }
.load-head { display: flex; align-items: baseline; justify-content: space-between;
        gap: 10px; padding: 11px 14px; background: var(--muted);
        border-bottom: 1px solid var(--border); }
.load-title { font-family: var(--font-headings); font-weight: 700; font-size: var(--text-md);
        color: var(--primary); }
.load-sub { font-size: var(--text-xs); color: var(--fg3); font-variant-numeric: tabular-nums; }

.oper { display: flex; align-items: center; gap: 12px; padding: 11px 14px;
        border-bottom: 1px solid var(--border); }
.oper:last-of-type { border-bottom: none; }
.oper-avatar { flex: none; width: 36px; height: 36px; border-radius: 50%;
        display: inline-flex; align-items: center; justify-content: center;
        background: var(--accent-soft); color: var(--primary);
        font-weight: 700; font-size: var(--text-sm); }
.oper-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.oper-name { font-weight: 600; font-size: var(--text-md); color: var(--foreground); }
.oper-avail { display: inline-flex; align-items: center; gap: 6px;
        font-size: var(--text-xs); color: var(--fg3); }
.oper-avail .dot { width: 6px; height: 6px; border-radius: 50%; flex: none;
        background: var(--wait-dot); }
.oper-avail.is-free { color: var(--ok-fg); }
.oper-avail.is-free .dot { background: var(--ok-dot); }
.oper-flag { font-size: var(--text-xs); font-weight: 700; color: var(--danger-fg);
        margin-top: 1px; }
.oper-load { flex: none; width: 132px; display: flex; flex-direction: column;
        align-items: flex-end; gap: 6px; }
.oper-count { font-family: var(--font-headings); font-weight: 700; font-size: var(--text-lg);
        color: var(--primary); line-height: 1; font-variant-numeric: tabular-nums; }
.oper-count small { font-family: var(--font-body); font-weight: 600; font-size: var(--text-xs);
        color: var(--fg3); margin-left: 4px; }
.load-bar { display: flex; width: 100%; height: 8px; border-radius: var(--radius-pill);
        overflow: hidden; background: var(--muted); }
.load-bar > span { display: block; height: 100%; }
.load-bar .seg-ok     { background: var(--ok-dot); }
.load-bar .seg-warn   { background: var(--warn-dot); }
.load-bar .seg-danger { background: var(--danger-dot); }
.oper.is-out { opacity: 0.68; }

.load-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 9px 14px;
        background: var(--background); border-top: 1px solid var(--border);
        font-size: var(--text-xs); color: var(--fg3); }
.load-legend span { display: inline-flex; align-items: center; gap: 5px; }
.load-legend i { width: 8px; height: 8px; border-radius: 2px; flex: none; }

/* ---- Team availability (week grid) ------------------------------------
   Who is out and when. This is also the visual source for the termen "zile care
   nu contează" rule: weekend + legal holidays are hatched for everyone, and an
   operator's concediu / vizită days render the same way — days excluded from
   their termen. Letters C / V label the fills (never colour alone). Today's
   column is tinted. */
.avail-panel { background: var(--card); border: 1px solid var(--border);
        border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }
.avail-head { display: flex; align-items: baseline; justify-content: space-between;
        gap: 10px; padding: 11px 14px; background: var(--muted);
        border-bottom: 1px solid var(--border); }
.avail-title { font-family: var(--font-headings); font-weight: 700; font-size: var(--text-md);
        color: var(--primary); }
.avail-week { font-size: var(--text-xs); color: var(--fg3); font-variant-numeric: tabular-nums; }

.avail-grid { display: grid; grid-template-columns: 104px repeat(7, 1fr); }
.avail-grid > * { border-bottom: 1px solid var(--border); }
.avail-grid > *:nth-child(9n+1) { border-bottom: 1px solid var(--border); } /* keep name col ruled */

/* day-header row */
.avail-corner { background: var(--background); }
.avail-dh { text-align: center; padding: 7px 0 6px; background: var(--background);
        border-left: 1px solid var(--border); font-size: var(--text-xs); font-weight: 700;
        color: var(--fg3); }
.avail-dh .dnum { display: block; margin-top: 1px; font-size: 11px; font-weight: 600;
        color: var(--fg3); font-variant-numeric: tabular-nums; }
.avail-dh.is-off { color: var(--wait-fg); }
.avail-dh.is-today { color: var(--accent); }

/* operator label cell */
.avail-name { display: flex; align-items: center; gap: 8px; padding: 8px 12px; }
.avail-name .av { flex: none; width: 26px; height: 26px; border-radius: 50%;
        background: var(--accent-soft); color: var(--primary); font-weight: 700;
        font-size: 11px; display: inline-flex; align-items: center; justify-content: center; }
.avail-name .nm { font-weight: 600; font-size: var(--text-sm); color: var(--foreground); }

/* day cell */
.d { border-left: 1px solid var(--border); min-height: 40px;
     display: flex; align-items: center; justify-content: center; }
.d.is-today { background-color: #EEF7FC; }
.d.is-off { background: repeating-linear-gradient(135deg,
        var(--muted), var(--muted) 4px, #fff 4px, #fff 8px); }
.d .fill { width: calc(100% - 8px); height: 24px; border-radius: var(--radius-sm);
        display: flex; align-items: center; justify-content: center;
        font-size: 10px; font-weight: 700; letter-spacing: 0.04em; }
.d.leave .fill { background: var(--wait-bg); color: var(--wait-fg); }   /* concediu */
.d.visit .fill { background: var(--accent-soft); color: #14618c; }      /* vizită   */

/* ---- Forms -------------------------------------------------------------
   Field primitives for the add/edit screens. Focus ring = accent-soft halo,
   matching the app's --ring. Inputs jump to 16px on mobile (in the layer
   below) so iOS doesn't zoom on focus. */
.field { display: flex; flex-direction: column; gap: 6px; }
.field > .lbl { font-size: var(--text-sm); font-weight: 600; color: var(--foreground); }
.field .req { color: var(--danger-fg); font-weight: 700; }
.field .help { font-size: var(--text-xs); color: var(--fg3); }
.input, .select, .textarea { width: 100%; font-family: var(--font-body);
        font-size: var(--text-md); color: var(--foreground); background: #fff;
        border: 1px solid var(--input); border-radius: var(--radius-sm);
        height: 40px; padding: 0 11px; transition: border-color .15s, box-shadow .15s; }
.textarea { height: auto; min-height: 84px; padding: 9px 11px; line-height: 1.5; resize: vertical; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--ring);
        box-shadow: 0 0 0 3px var(--accent-soft); }
.input::placeholder, .textarea::placeholder { color: var(--fg3); }
.select { appearance: none; -webkit-appearance: none; padding-right: 32px; cursor: pointer;
        background-repeat: no-repeat; background-position: right 10px center;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23586174' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }

/* segmented control (tip solicitare, prioritate…) */
.segctl { display: inline-flex; background: var(--muted); border-radius: var(--radius-sm);
        padding: 3px; gap: 3px; }
.segctl button { border: none; background: transparent; font-family: var(--font-body);
        font-weight: 600; font-size: var(--text-sm); color: var(--fg2); cursor: pointer;
        height: 30px; padding: 0 14px; border-radius: 4px; transition: all .12s; }
.segctl button.is-on { background: #fff; color: var(--primary); box-shadow: var(--shadow-sm); }

/* toggle switch */
.switch { position: relative; display: inline-block; width: 40px; height: 24px; flex: none; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch .track { position: absolute; inset: 0; background: var(--border); border-radius: var(--radius-pill);
        transition: background .15s; pointer-events: none; }
.switch .knob { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background: #fff;
        border-radius: 50%; box-shadow: var(--shadow-sm); transition: transform .15s; pointer-events: none; }
.switch input:checked ~ .track { background: var(--accent); }
.switch input:checked ~ .knob  { transform: translateX(16px); }

/* ---- IESIRI: offer status, value (EUR etalon), document dossier --------
   An IESIRE is a solicitare that produced an offer. Three pieces:
   · offer lifecycle badge (after the offer is sent) — semantic palette;
   · value shown in EUR (the etalon) with the original currency kept discreet;
   · the document dossier as a per-document progression, so you can see exactly
     where the paperwork stalled. */

/* offer lifecycle badge */
.offer { display: inline-flex; align-items: center; gap: 6px; height: var(--badge-h);
        padding: 0 10px; border-radius: var(--radius-sm); font-size: var(--text-sm);
        font-weight: 600; white-space: nowrap; }
.offer .offer-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.offer-sent    { background: var(--accent-soft); color: #14618c; }
.offer-sent    .offer-dot { background: var(--accent); }
.offer-accept  { background: var(--ok-bg); color: var(--ok-fg); }
.offer-accept  .offer-dot { background: var(--ok-dot); }
.offer-reject  { background: var(--danger-bg); color: var(--danger-fg); }
.offer-reject  .offer-dot { background: var(--danger-dot); }
.offer-expired { background: var(--warn-bg); color: var(--warn-fg); }
.offer-expired .offer-dot { background: var(--warn-dot); }

/* value in EUR (etalon) + original currency kept for traceability */
.val { display: flex; flex-direction: column; gap: 1px; }
.val-eur { font-family: var(--font-headings); font-weight: 700; font-size: var(--text-xl);
        color: var(--primary); font-variant-numeric: tabular-nums; line-height: 1.1; }
.val-orig { font-size: var(--text-xs); color: var(--fg3); font-variant-numeric: tabular-nums; }

/* document dossier — per-document progression */
.dossier { display: flex; flex-direction: column; }
.doc { display: flex; align-items: center; gap: 12px; padding: 11px 0;
        border-bottom: 1px solid var(--border); }
.doc:last-child { border-bottom: none; }
.doc-ico { flex: none; width: 30px; height: 30px; border-radius: var(--radius-sm);
        background: var(--muted); color: var(--fg3);
        display: inline-flex; align-items: center; justify-content: center; }
.doc-ico svg { width: 16px; height: 16px; stroke-width: 2; }
.doc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.doc-name { font-size: var(--text-md); font-weight: 600; }
.doc-meta { font-size: var(--text-xs); color: var(--fg3); }
.doc-state { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px;
        border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: 700; white-space: nowrap; }
.doc.is-missing  .doc-state { background: transparent; border: 1px dashed var(--border); color: var(--fg3); }
.doc.is-uploaded .doc-state { background: var(--muted); color: var(--muted-foreground); }
.doc.is-uploaded .doc-ico   { background: var(--accent-soft); color: var(--accent); }
.doc.is-sent     .doc-state { background: var(--accent-soft); color: #14618c; }
.doc.is-sent     .doc-ico   { background: var(--accent-soft); color: var(--accent); }
.doc.is-signed   .doc-state { background: var(--ok-bg); color: var(--ok-fg); }
.doc.is-signed   .doc-ico   { background: var(--ok-bg); color: var(--ok-fg); }

/* ==========================================================================
   MOBILE LAYER — the primary surface (≤640px)
   ==========================================================================
   The desktop scale above stays dense for the manager's wide overview. On a
   phone we relax the scale for arm's-length reading, grow every tap target to
   ≥44px, and collapse the registru from a 6-column table into stacked cards so
   nothing scrolls sideways. One breakpoint, all token-driven.
   ========================================================================== */
@media (max-width: 640px) {
  :root {
    --text-xs:   12px;
    --text-sm:   14px;   /* table body & chips — legible held at 40cm        */
    --text-base: 15px;
    --text-md:   15px;
    --text-lg:   18px;
    --text-xl:   22px;
    --row-h:     52px;
    --btn-h:     46px;   --btn-h-sm: 42px;   /* thumb-friendly hit areas     */
    --badge-h:   26px;
  }

  /* iOS auto-zooms on focus if the field's text is < 16px — pin it */
  input, textarea, select,
  .input, .select, .textarea { font-size: 16px; }
  .input, .select { height: 44px; }   /* comfortable tap on phone */
  .btn { padding: 0 18px; }

  /* ---- Registru: table → stacked cards -------------------------------- */
  .tbl thead {                      /* hide the header row, keep it for a11y */
    position: absolute; width: 1px; height: 1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .tbl, .tbl tbody, .tbl tr, .tbl td { display: block; width: 100%; }
  .tbl tbody tr {
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--card); box-shadow: var(--shadow-sm);
    padding: 12px 14px; margin-bottom: 10px;
  }
  .tbl tbody td {
    height: auto; padding: 5px 0; border-bottom: none;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
  }
  .tbl tbody td::before {           /* label pulled from the cell's data-label */
    content: attr(data-label); flex: none;
    font-size: var(--text-xs); font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.08em; color: var(--fg3);
  }
  .tbl tbody td.client {            /* client = the card title, no label       */
    justify-content: flex-start; font-size: var(--text-lg);
    padding-top: 0; margin-bottom: 4px;
  }
  .tbl tbody td.client::before { content: none; }
  .tbl .num { text-align: left; }
}