/* ============================================================================
   RESTMAN — DESIGN SYSTEM pentru SCHIȚE DE ECRAN
   Tokeni + componente extrase din aplicația reală (lib/widgets/style/*).
   Două straturi:
     • "doc chrome"  (--doc-*)  = fișa de spec din jurul telefonului
     • "device"      (--rm-*)   = UI-ul aplicației Restman (fidel)
   Suportă light + dark (prefers-color-scheme + toggle data-theme).
   Fiecare ecran linkează acest fișier: <link rel="stylesheet" href="../assets/restman-ui.css">
   ============================================================================ */

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

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

  /* doc chrome — slate cu bias indigo */
  --doc-bg: #E9ECF6;
  --doc-bg2: #DCE1F1;
  --doc-panel: #FFFFFF;
  --doc-ink: #1B1E2B;
  --doc-muted: #5A6076;
  --doc-line: #D3D8EA;
  --doc-accent: #6366F1;
  --doc-accent-soft: rgba(99,102,241,.10);

  --bezel: #121319;
  --bezel-edge: #2A2C36;
  --bezel-shadow: rgba(30,34,60,.28);

  /* device — tokeni reali Restman (light) */
  --rm-primary: #6366F1;
  --rm-primary-dark: #4F46E5;
  --rm-secondary: #14B8A6;
  --rm-accent: #F97316;
  --rm-accent-dark: #EA580C;
  --rm-bg: #F8FAFC;
  --rm-surface: #FFFFFF;
  --rm-text: #212121;
  --rm-text2: #757575;
  --rm-on-primary: #FFFFFF;
  --rm-success: #10B981;
  --rm-success-dark: #059669;
  --rm-warning: #F59E0B;
  --rm-warning-dark: #D97706;
  --rm-error: #EF4444;
  --rm-error-dark: #DC2626;
  --rm-info: #3B82F6;
  --rm-info-dark: #2563EB;
  --rm-border: #E5E7EB;
  --rm-shadow: rgba(15,23,42,.08);
  --rm-table-avail: #D1FAE5;
  --rm-table-occ: #FEE2E2;
  --rm-table-res: #FEF3C7;
}

@media (prefers-color-scheme: dark) {
  :root {
    --doc-bg: #0B0C11; --doc-bg2: #10111A; --doc-panel: #15161E; --doc-ink: #E7E9F2;
    --doc-muted: #9CA1B6; --doc-line: #262835; --doc-accent: #818CF8; --doc-accent-soft: rgba(129,140,248,.16);
    --bezel: #000000; --bezel-edge: #1C1E27; --bezel-shadow: rgba(0,0,0,.55);

    --rm-primary: #818CF8; --rm-primary-dark: #6366F1; --rm-secondary: #5EEAD4;
    --rm-accent: #FB923C; --rm-accent-dark: #F97316;
    --rm-bg: #121212; --rm-surface: #1E1E1E; --rm-text: #F5F5F5; --rm-text2: #B3B3B3; --rm-on-primary: #121212;
    --rm-success: #34D399; --rm-success-dark: #A7F3D0; --rm-warning: #FBBF24; --rm-warning-dark: #FDE68A;
    --rm-error: #F87171; --rm-error-dark: #FCA5A5; --rm-info: #60A5FA; --rm-info-dark: #BFDBFE;
    --rm-border: #3A3A3A; --rm-shadow: rgba(0,0,0,.5);
    --rm-table-avail: #14532D; --rm-table-occ: #5C1A1A; --rm-table-res: #5C4A0F;
  }
}

:root[data-theme="light"] {
  --doc-bg: #E9ECF6; --doc-bg2: #DCE1F1; --doc-panel: #FFFFFF; --doc-ink: #1B1E2B;
  --doc-muted: #5A6076; --doc-line: #D3D8EA; --doc-accent: #6366F1; --doc-accent-soft: rgba(99,102,241,.10);
  --bezel: #121319; --bezel-edge: #2A2C36; --bezel-shadow: rgba(30,34,60,.28);
  --rm-primary: #6366F1; --rm-primary-dark: #4F46E5; --rm-secondary: #14B8A6; --rm-accent: #F97316; --rm-accent-dark: #EA580C;
  --rm-bg: #F8FAFC; --rm-surface: #FFFFFF; --rm-text: #212121; --rm-text2: #757575; --rm-on-primary: #FFFFFF;
  --rm-success: #10B981; --rm-success-dark: #059669; --rm-warning: #F59E0B; --rm-warning-dark: #D97706;
  --rm-error: #EF4444; --rm-error-dark: #DC2626; --rm-info: #3B82F6; --rm-info-dark: #2563EB;
  --rm-border: #E5E7EB; --rm-shadow: rgba(15,23,42,.08);
  --rm-table-avail: #D1FAE5; --rm-table-occ: #FEE2E2; --rm-table-res: #FEF3C7;
}
:root[data-theme="dark"] {
  --doc-bg: #0B0C11; --doc-bg2: #10111A; --doc-panel: #15161E; --doc-ink: #E7E9F2;
  --doc-muted: #9CA1B6; --doc-line: #262835; --doc-accent: #818CF8; --doc-accent-soft: rgba(129,140,248,.16);
  --bezel: #000000; --bezel-edge: #1C1E27; --bezel-shadow: rgba(0,0,0,.55);
  --rm-primary: #818CF8; --rm-primary-dark: #6366F1; --rm-secondary: #5EEAD4; --rm-accent: #FB923C; --rm-accent-dark: #F97316;
  --rm-bg: #121212; --rm-surface: #1E1E1E; --rm-text: #F5F5F5; --rm-text2: #B3B3B3; --rm-on-primary: #121212;
  --rm-success: #34D399; --rm-success-dark: #A7F3D0; --rm-warning: #FBBF24; --rm-warning-dark: #FDE68A;
  --rm-error: #F87171; --rm-error-dark: #FCA5A5; --rm-info: #60A5FA; --rm-info-dark: #BFDBFE;
  --rm-border: #3A3A3A; --rm-shadow: rgba(0,0,0,.5);
  --rm-table-avail: #14532D; --rm-table-occ: #5C1A1A; --rm-table-res: #5C4A0F;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--doc-ink);
  background: radial-gradient(1200px 700px at 50% -10%, var(--doc-bg2), transparent 60%), var(--doc-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- page + spec header ---------- */
.page { max-width: 760px; margin: 0 auto; padding: 40px 20px 64px; display: flex; flex-direction: column; align-items: center; gap: 28px; }
.spec { width: 100%; max-width: 520px; text-align: center; }
.spec-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--doc-muted); }
.spec-eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--doc-accent); box-shadow: 0 0 0 4px var(--doc-accent-soft); }
.spec-code { display: inline-block; margin: 14px 0 6px; font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--doc-accent); padding: 4px 10px; border: 1px solid var(--doc-line); border-radius: 999px; background: var(--doc-accent-soft); }
.spec-title { margin: 6px 0 8px; font-size: 30px; line-height: 1.15; font-weight: 700; letter-spacing: -.02em; text-wrap: balance; }
.spec-purpose { margin: 0 auto; max-width: 48ch; font-size: 15px; line-height: 1.55; color: var(--doc-muted); }

/* ---------- device frame ---------- */
.device-wrap { display: flex; justify-content: center; width: 100%; }
.device { position: relative; width: 100%; max-width: 384px; background: var(--bezel); border: 1px solid var(--bezel-edge); border-radius: 46px; padding: 13px; box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 30px 60px -24px var(--bezel-shadow), 0 12px 26px -18px var(--bezel-shadow); transition: transform .35s ease; }
.device:hover { transform: translateY(-4px); }
.notch { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 116px; height: 24px; background: var(--bezel); border-radius: 0 0 16px 16px; z-index: 6; }
.notch::after { content: ""; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 42px; height: 5px; border-radius: 3px; background: #34363f; }
.screen { position: relative; border-radius: 34px; overflow: hidden; background: var(--rm-bg); display: flex; flex-direction: column; min-height: 720px; }

.statusbar { background: var(--rm-primary); color: var(--rm-on-primary); padding: 12px 22px 6px; display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.statusbar.plain { background: var(--rm-surface); color: var(--rm-text2); }
.statusbar .sys { display: flex; align-items: center; gap: 6px; }
.statusbar svg { width: 16px; height: 16px; }

/* ---------- app bar ---------- */
.appbar { background: var(--rm-primary); color: var(--rm-on-primary); padding: 6px 8px 12px 6px; display: flex; align-items: center; gap: 4px; box-shadow: 0 3px 8px -3px var(--rm-shadow); }
.appbar.tall { padding-bottom: 14px; }
.icon-btn { appearance: none; border: 0; background: transparent; cursor: pointer; color: currentColor; width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.icon-btn:hover { background: rgba(255,255,255,.14); }
.icon-btn svg { width: 22px; height: 22px; }
.appbar .title { flex: 1 1 auto; min-width: 0; padding-left: 2px; }
.appbar .title h2 { margin: 0; font-size: 18px; font-weight: 500; letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appbar .sub { display: flex; align-items: center; gap: 5px; margin-top: 2px; opacity: .92; }
.appbar .sub svg { width: 14px; height: 14px; }
.appbar .sub span { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.appbar-actions { display: flex; align-items: center; }

/* ---------- body ---------- */
.body { flex: 1 1 auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.body.pad0 { padding: 0; }
.section-label { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--rm-text2); margin: 4px 2px 0; }

/* toolbar: search + filter */
.toolbar { display: flex; align-items: center; gap: 8px; }
.search { flex: 1 1 auto; display: flex; align-items: center; gap: 8px; background: var(--rm-surface); border: 1px solid var(--rm-border); border-radius: 12px; padding: 9px 12px; color: var(--rm-text2); }
.search svg { width: 18px; height: 18px; flex: none; }
.search span { font-size: 13px; }

/* hint / banners */
.hint { display: flex; align-items: center; gap: 7px; border-radius: 9px; padding: 7px 11px; font-size: 11.5px; font-weight: 500; background: color-mix(in srgb, var(--rm-primary) 7%, transparent); border: 1px solid color-mix(in srgb, var(--rm-primary) 26%, transparent); color: var(--rm-primary); }
.hint svg { width: 15px; height: 15px; flex: none; }
.banner { display: flex; align-items: center; gap: 8px; border-radius: 9px; padding: 9px 11px; font-size: 12px; font-weight: 500; border: 1px solid; }
.banner svg { width: 17px; height: 17px; flex: none; }
.banner.warn { background: color-mix(in srgb, var(--rm-warning) 13%, transparent); border-color: color-mix(in srgb, var(--rm-warning) 40%, transparent); color: var(--rm-warning-dark); }
.banner.info { background: color-mix(in srgb, var(--rm-info) 11%, transparent); border-color: color-mix(in srgb, var(--rm-info) 34%, transparent); color: var(--rm-info); }
.banner.success { background: color-mix(in srgb, var(--rm-success) 12%, transparent); border-color: color-mix(in srgb, var(--rm-success) 36%, transparent); color: var(--rm-success-dark); }

/* ---------- generic list + cards ---------- */
.list { display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.list.tight { gap: 5px; }
.card { background: var(--rm-surface); border: 1px solid color-mix(in srgb, var(--rm-border) 70%, transparent); border-radius: 12px; box-shadow: 0 1px 2px var(--rm-shadow); }
.card.pad { padding: 12px 13px; }
.row { display: flex; align-items: center; gap: 11px; background: var(--rm-surface); border: 1px solid color-mix(in srgb, var(--rm-border) 70%, transparent); border-radius: 12px; padding: 11px 13px; box-shadow: 0 1px 2px var(--rm-shadow); }
.row .lead { flex: none; width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: var(--doc-accent-soft); color: var(--rm-primary); }
.row .lead svg { width: 20px; height: 20px; }
.row .lead.accent { background: color-mix(in srgb, var(--rm-accent) 14%, transparent); color: var(--rm-accent); }
.row .lead.success { background: color-mix(in srgb, var(--rm-success) 14%, transparent); color: var(--rm-success); }
.row .lead.warn { background: color-mix(in srgb, var(--rm-warning) 16%, transparent); color: var(--rm-warning-dark); }
.row .main { flex: 1 1 auto; min-width: 0; }
.row .t { font-size: 14.5px; font-weight: 600; color: var(--rm-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .s { font-size: 12px; color: var(--rm-text2); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .trail { flex: none; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.row .trail svg { width: 20px; height: 20px; color: var(--rm-text2); }
.chevron { color: var(--rm-text2); }
.chevron svg { width: 20px; height: 20px; }

.money { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--rm-primary); }
.money.big { font-size: 16px; }
.muted { color: var(--rm-text2); }

/* POS product row */
.prod { display: flex; align-items: center; gap: 11px; background: var(--rm-surface); border: .5px solid color-mix(in srgb, var(--rm-border) 60%, transparent); border-radius: 9px; padding: 10px 12px; box-shadow: 0 1px 2px var(--rm-shadow); }
.qty { flex: none; font-size: 13.5px; font-weight: 700; color: #fff; padding: 6px 9px; border-radius: 7px; background: linear-gradient(135deg, var(--rm-accent), var(--rm-accent-dark)); box-shadow: 0 2px 5px -1px color-mix(in srgb, var(--rm-accent) 45%, transparent); font-variant-numeric: tabular-nums; }
.prod .main { flex: 1 1 auto; min-width: 0; }
.prod-name { display: flex; align-items: center; gap: 6px; }
.prod-name .nm { font-size: 15px; font-weight: 600; color: var(--rm-text); letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prod-name svg { width: 19px; height: 19px; flex: none; }
.st-info { color: var(--rm-info); } .st-ok { color: var(--rm-success); } .st-lock { color: var(--rm-error); } .st-wait { color: var(--rm-warning); }
.obs { margin-top: 3px; font-size: 12px; font-style: italic; color: var(--rm-error); }
.row-act { flex: none; width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 1px solid; background: transparent; }
.row-act svg { width: 18px; height: 18px; }
.act-edit { color: var(--rm-info); border-color: color-mix(in srgb, var(--rm-info) 32%, transparent); background: color-mix(in srgb, var(--rm-info) 10%, transparent); }
.act-del { color: var(--rm-error); border-color: color-mix(in srgb, var(--rm-error) 32%, transparent); background: color-mix(in srgb, var(--rm-error) 10%, transparent); }

/* ---------- status pills ---------- */
.pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; letter-spacing: .02em; padding: 3px 9px; border-radius: 999px; }
.pill svg { width: 12px; height: 12px; }
.pill.ok { background: color-mix(in srgb, var(--rm-success) 15%, transparent); color: var(--rm-success-dark); }
.pill.warn { background: color-mix(in srgb, var(--rm-warning) 18%, transparent); color: var(--rm-warning-dark); }
.pill.err { background: color-mix(in srgb, var(--rm-error) 15%, transparent); color: var(--rm-error-dark); }
.pill.info { background: color-mix(in srgb, var(--rm-info) 14%, transparent); color: var(--rm-info-dark); }
.pill.neutral { background: color-mix(in srgb, var(--rm-text2) 15%, transparent); color: var(--rm-text2); }

/* ---------- chips (filtre) ---------- */
.chips { display: flex; gap: 7px; overflow: hidden; flex-wrap: wrap; }
.chip { font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--rm-border); background: var(--rm-surface); color: var(--rm-text2); white-space: nowrap; }
.chip.active { background: var(--rm-primary); border-color: var(--rm-primary); color: var(--rm-on-primary); }

/* ---------- category tabs ---------- */
.tabs { display: flex; gap: 6px; overflow: hidden; border-bottom: 1px solid var(--rm-border); }
.tab { font-size: 13px; font-weight: 600; padding: 9px 12px; color: var(--rm-text2); border-bottom: 2px solid transparent; white-space: nowrap; }
.tab.active { color: var(--rm-primary); border-bottom-color: var(--rm-primary); }

/* ---------- KPI tiles ---------- */
.kpi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.kpi { background: var(--rm-surface); border: 1px solid var(--rm-border); border-radius: 13px; padding: 12px 13px; box-shadow: 0 1px 2px var(--rm-shadow); }
.kpi .kl { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--rm-text2); }
.kpi .kl svg { width: 14px; height: 14px; }
.kpi .kv { font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: var(--rm-text); margin-top: 6px; font-variant-numeric: tabular-nums; }
.kpi .kd { font-size: 11.5px; font-weight: 600; margin-top: 2px; }
.kd.up { color: var(--rm-success-dark); } .kd.down { color: var(--rm-error-dark); }

/* ---------- mini bar chart ---------- */
.bars { display: flex; align-items: flex-end; gap: 8px; height: 108px; padding: 8px 4px 0; }
.bars .b { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 5px; height: 100%; justify-content: flex-end; }
.bars .b i { width: 100%; max-width: 26px; border-radius: 5px 5px 0 0; background: linear-gradient(180deg, var(--rm-primary), var(--rm-primary-dark)); display: block; }
.bars .b small { font-size: 9.5px; color: var(--rm-text2); }

/* ---------- data table ---------- */
.tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; background: var(--rm-surface); border-radius: 12px; overflow: hidden; box-shadow: 0 1px 2px var(--rm-shadow); }
.tbl th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--rm-text2); background: color-mix(in srgb, var(--rm-primary) 6%, var(--rm-surface)); padding: 8px 10px; font-weight: 700; }
.tbl td { padding: 8px 10px; border-top: 1px solid var(--rm-border); color: var(--rm-text); }
.tbl td.num, .tbl th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl tfoot td { font-weight: 700; background: color-mix(in srgb, var(--rm-primary) 5%, var(--rm-surface)); }

/* ---------- forms ---------- */
.field { display: flex; flex-direction: column; gap: 5px; }
.field > label { font-size: 11.5px; font-weight: 600; color: var(--rm-text2); letter-spacing: .02em; }
.input { display: flex; align-items: center; gap: 8px; background: var(--rm-surface); border: 1px solid var(--rm-border); border-radius: 11px; padding: 11px 13px; font-size: 14px; color: var(--rm-text); min-height: 44px; }
.input.focused { border-color: var(--rm-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rm-primary) 18%, transparent); }
.input .ph { color: var(--rm-text2); }
.input svg { width: 18px; height: 18px; color: var(--rm-text2); flex: none; }
.input .val { color: var(--rm-text); flex: 1 1 auto; }
.switch { width: 42px; height: 24px; border-radius: 999px; background: var(--rm-border); position: relative; flex: none; }
.switch.on { background: var(--rm-primary); }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: left .2s ease; box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.switch.on::after { left: 20px; }
.segmented { display: flex; background: color-mix(in srgb, var(--rm-primary) 8%, transparent); border-radius: 11px; padding: 3px; gap: 3px; }
.segmented .seg { flex: 1 1 0; text-align: center; font-size: 12.5px; font-weight: 600; padding: 7px; border-radius: 8px; color: var(--rm-text2); }
.segmented .seg.active { background: var(--rm-surface); color: var(--rm-primary); box-shadow: 0 1px 2px var(--rm-shadow); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-size: 14px; font-weight: 600; padding: 12px 16px; border-radius: 12px; border: 1px solid transparent; }
.btn svg { width: 18px; height: 18px; }
.btn.primary { background: var(--rm-primary); color: var(--rm-on-primary); }
.btn.tonal { background: var(--doc-accent-soft); color: var(--rm-primary); border-color: color-mix(in srgb, var(--rm-primary) 25%, transparent); }
.btn.danger { background: var(--rm-error); color: #fff; }
.btn.block { width: 100%; }

/* ---------- hub grid (ecrane meniu) ---------- */
.hub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.hub-card { background: var(--rm-surface); border: 1px solid var(--rm-border); border-radius: 16px; padding: 16px 14px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 1px 3px var(--rm-shadow); }
.hub-card .hi { width: 44px; height: 44px; border-radius: 13px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--rm-primary), var(--rm-primary-dark)); color: var(--rm-on-primary); }
.hub-card .hi svg { width: 23px; height: 23px; }
.hub-card .hi.a2 { background: linear-gradient(135deg, var(--rm-accent), var(--rm-accent-dark)); }
.hub-card .hi.a3 { background: linear-gradient(135deg, var(--rm-secondary), var(--rm-success-dark)); }
.hub-card .hi.a4 { background: linear-gradient(135deg, var(--rm-info), var(--rm-info-dark)); }
.hub-card .ht { font-size: 14px; font-weight: 700; color: var(--rm-text); }
.hub-card .hd { font-size: 11.5px; color: var(--rm-text2); line-height: 1.4; }

/* ---------- FAB ---------- */
.fab { position: absolute; right: 16px; bottom: 20px; z-index: 5; width: 56px; height: 56px; border-radius: 18px; background: var(--rm-primary); color: var(--rm-on-primary); display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 20px -6px color-mix(in srgb, var(--rm-primary) 55%, transparent); border: 0; }
.fab.above-bar { bottom: 60px; }
.fab.extended { width: auto; padding: 0 18px; gap: 8px; font-size: 14px; font-weight: 700; }
.fab svg { width: 26px; height: 26px; }
.fab.extended svg { width: 22px; height: 22px; }

/* ---------- bottom bar / nav ---------- */
.bottombar { background: var(--rm-surface); border-top: 1px solid var(--rm-border); padding: 13px; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--rm-text2); box-shadow: 0 -2px 6px -3px var(--rm-shadow); }
.bottombar svg { width: 18px; height: 18px; }
.bottombar span { font-size: 12px; font-style: italic; }
.total-bar { background: var(--rm-surface); border-top: 1px solid var(--rm-border); padding: 13px 16px; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 -2px 6px -3px var(--rm-shadow); }
.total-bar .tl { font-size: 12px; color: var(--rm-text2); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.total-bar .tv { font-size: 20px; font-weight: 800; color: var(--rm-primary); font-variant-numeric: tabular-nums; }

/* ---------- empty state ---------- */
.empty { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; padding: 40px 24px; color: var(--rm-text2); }
.empty .ei { width: 66px; height: 66px; border-radius: 20px; display: flex; align-items: center; justify-content: center; background: var(--doc-accent-soft); color: var(--rm-primary); }
.empty .ei svg { width: 32px; height: 32px; }
.empty .et { font-size: 15px; font-weight: 700; color: var(--rm-text); }
.empty .ed { font-size: 12.5px; max-width: 30ch; }

/* ---------- table map (harta sălii) ---------- */
.tablemap { position: relative; flex: 1 1 auto; background:
   linear-gradient(color-mix(in srgb, var(--rm-primary) 4%, transparent) 1px, transparent 1px) 0 0 / 22px 22px,
   linear-gradient(90deg, color-mix(in srgb, var(--rm-primary) 4%, transparent) 1px, transparent 1px) 0 0 / 22px 22px,
   var(--rm-bg);
  border-radius: 12px; overflow: hidden; }
.tnode { position: absolute; border-radius: 12px; border: 2px solid; display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 700; box-shadow: 0 2px 5px var(--rm-shadow); }
.tnode .tn { font-size: 13px; color: var(--rm-text); }
.tnode .tm { font-size: 10px; font-weight: 600; }
.tnode.avail { background: var(--rm-table-avail); border-color: color-mix(in srgb, var(--rm-success) 55%, transparent); }
.tnode.occ { background: var(--rm-table-occ); border-color: color-mix(in srgb, var(--rm-error) 55%, transparent); }
.tnode.res { background: var(--rm-table-res); border-color: color-mix(in srgb, var(--rm-warning) 55%, transparent); }
.tnode.round { border-radius: 50%; }

/* ---------- legend (fișă spec) ---------- */
.legend { width: 100%; max-width: 560px; }
.legend h2 { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--doc-muted); margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--doc-line); }
.feat { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 560px) { .feat { grid-template-columns: 1fr 1fr; } }
.feat li { display: flex; gap: 11px; align-items: flex-start; background: var(--doc-panel); border: 1px solid var(--doc-line); border-radius: 12px; padding: 12px 13px; }
.feat .fi { flex: none; width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: var(--doc-accent-soft); color: var(--doc-accent); }
.feat .fi svg { width: 17px; height: 17px; }
.feat .ft { font-size: 13.5px; font-weight: 600; color: var(--doc-ink); line-height: 1.35; }
.feat .fd { font-size: 12.5px; color: var(--doc-muted); line-height: 1.45; margin-top: 2px; }

/* ---------- detail-card rows (liste card header + atribute) ---------- */
.ch-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ch-head .nm { font-size: 14px; font-weight: 800; letter-spacing: .03em; color: var(--rm-text); }
.dl { display: flex; flex-direction: column; gap: 5px; margin-top: 9px; }
.dl .r { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; }
.dl .r .k { color: var(--rm-text2); }
.dl .r .v { color: var(--rm-text); font-weight: 600; text-align: right; }
.dot-sev { width: 11px; height: 11px; border-radius: 50%; display: inline-block; flex: none; }
.kpi3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.kpi3 .kpi { padding: 10px; } .kpi3 .kv { font-size: 17px; } .kpi3 .kl { font-size: 9px; }

.foot { width: 100%; max-width: 560px; text-align: center; font-size: 12px; color: var(--doc-muted); line-height: 1.6; }
.foot code { font-family: var(--font-mono); font-size: 11.5px; background: var(--doc-accent-soft); color: var(--doc-accent); padding: 2px 6px; border-radius: 5px; }

:focus-visible { outline: 2px solid var(--doc-accent); outline-offset: 2px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }