/* ============================================================================
   breme-ui.css — canonical Breme / SPZDBL app design system (single source of
   truth). AMOLED black, BLUE accent. Extracted from DTF sheet maker style.css
   (2026-07-14). Every web app in the family uses THESE tokens + components
   verbatim. Do not fork per-app variants; extend here.

   SHARED RUNTIME (2026-08-28): served to ALL apps from
   https://manager.breme.si/breme-ui.css?v=N
   Edit THIS file (C:\NC SYNC\claude\breme-ui\breme-ui.css), deploy to
   /var/www/breme-manager/public/breme-ui.css, bump ?v= in app heads only on
   breaking changes (additive changes propagate without a bump).
   ONE accent for every app — no per-app accent variants, no brand overrides.
   OD 2026-08-31: vrednosti tokenov niso več fiksne. BREME PORTAL vrine izbrano
   shemo (:root blok) v svoj odgovor te datoteke; spodnje vrednosti so privzeta
   shema `amoled` in veljajo, dokler shema ni izbrana. Nabori so v THEMES v
   /var/www/breme-manager/server.js, izbrana shema v tabeli settings (ključ
   `theme`), stikalo na /admin/videz.
   ============================================================================ */

:root {
  color-scheme: dark;
  --bg: #000000;      /* AMOLED black page background */
  --panel: #101014;   /* cards, inputs, table row hover */
  --panel2: #16161c;  /* buttons, nav hover, raised chips */
  --border: #26262e;  /* all hairlines / outlines */
  --text: #e8e8ec;    /* primary text */
  --muted: #8b8b96;   /* secondary text, labels, th */
  --accent: #3b82f6;      /* primary action / active state */
  --accent-dim: #1d4ed8;  /* accent hover */
  --accent-on: #ffffff;   /* besedilo NA poudarku — svetle sheme ga potrebujejo temnega */
  --green: #22c55e;
  --amber: #f59e0b;
  --red: #ef4444;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, "Segoe UI", sans-serif;
  font-size: 15px;
}

/* ---- topbar / brand / nav ------------------------------------------------
   Metrics are ABSOLUTE by standard (2026-07-15): never let an app's body
   font-size leak into the topbar — same height everywhere. */
.topbar {
  display: flex; align-items: center; gap: 16px; justify-content: space-between;
  padding: 14px 22px; border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: var(--bg); z-index: 10;
}
.brand { font-weight: 800; letter-spacing: 2px; font-size: 16px; }
.brand .accent { color: var(--accent); }

/* topbar chain: BREME PORTAL - <APP> - <sekcija> (standard iz SPZDBL POMOČNIKA) */
.brand-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
a.brand { color: var(--text); text-decoration: none; }
.brand-section { font-weight: 800; letter-spacing: 2px; font-size: 16px; color: var(--text); text-decoration: none; }
.brand-sep { color: var(--muted); }
a.brand:hover, a.brand-section:hover { color: var(--accent); }
.topbar nav { display: flex; gap: 8px; }
.topbar nav a {
  color: var(--muted); text-decoration: none;
  padding: 8px 16px; border-radius: 8px; font-weight: 600;
}
.topbar nav a.active, .topbar nav a:hover { color: var(--text); background: var(--panel2); }

main { padding: 24px; max-width: 1400px; margin: 0 auto; }

h1 { font-size: 22px; margin: 0 0 12px; }
h2 { font-size: 15px; margin: 22px 0 8px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
.muted { color: var(--muted); }
.page-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }

/* ---- buttons ------------------------------------------------------------- */
.btn {
  background: var(--panel2); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 9px 16px; font-size: 14px; font-weight: 600; cursor: pointer;
}
.btn:hover { border-color: var(--accent); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-on); }
.btn.primary:hover { background: var(--accent-dim); }
.btn.small { padding: 5px 10px; font-size: 13px; }
.btn.wide { width: 100%; margin-top: 8px; }
.btn.danger:hover { border-color: var(--red); color: var(--red); }

/* ---- inputs -------------------------------------------------------------- */
input[type="text"], input[type="search"], input[type="number"],
input[type="date"], input[type="month"], select, textarea {
  background: var(--panel); border: 1px solid var(--border); color: var(--text);
  border-radius: 8px; padding: 9px 12px; font-size: 14px; width: 100%;
  color-scheme: dark;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); }
label.block { display: block; margin: 10px 0; font-size: 13px; color: var(--muted); }
label.block input, label.block select { margin-top: 5px; }
label.inline { font-size: 13px; color: var(--muted); display: inline-flex; align-items: center; gap: 8px; }
label.inline select, label.inline input[type="date"] { width: auto; }
input[type="checkbox"] { accent-color: var(--accent); }

/* ---- chips / pills ------------------------------------------------------- */
.chip {
  background: var(--panel); border: 1px solid var(--border); color: var(--muted);
  border-radius: 999px; padding: 6px 14px; font-size: 13px; cursor: pointer;
}
.chip.active { color: var(--accent-on); background: var(--accent); border-color: var(--accent); }

/* ---- tables -------------------------------------------------------------- */
.table { width: 100%; border-collapse: collapse; }
.table th {
  text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: 1px;
  color: var(--muted); padding: 8px 12px; border-bottom: 1px solid var(--border);
}
.table td { padding: 10px 12px; border-bottom: 1px solid var(--panel2); }
.table tr:hover td { background: var(--panel); }
.row-actions { display: flex; gap: 6px; justify-content: flex-end; }

/* ---- dialogs ------------------------------------------------------------- */
dialog {
  background: var(--panel); color: var(--text);
  border: 1px solid var(--border); border-radius: 14px; padding: 0;
  width: min(440px, 92vw);
}
dialog::backdrop { background: rgba(0, 0, 0, 0.7); }
.dlg-body { padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.dlg-body h2 { margin: 0 0 4px; color: var(--text); text-transform: none; letter-spacing: 0; font-size: 18px; }
.dlg-body label { font-size: 13px; color: var(--muted); display: block; }
.row { display: flex; gap: 10px; align-items: end; }
.row.right { justify-content: flex-end; align-items: center; margin-top: 6px; }
.row.spread { justify-content: space-between; align-items: center; }

/* ---- messages / toasts --------------------------------------------------- */
.msg { padding: 10px 12px; border-radius: 8px; font-size: 13px; background: var(--panel2); }
.msg.error { background: rgba(239, 68, 68, 0.12); color: #fca5a5; border: 1px solid rgba(239, 68, 68, 0.4); }
.msg.ok { background: rgba(34, 197, 94, 0.1); color: #86efac; border: 1px solid rgba(34, 197, 94, 0.35); }
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--panel2); border: 1px solid var(--border);
  padding: 12px 20px; border-radius: 10px; font-size: 14px; z-index: 100;
}
.toast.ok { border-color: var(--green); }
.toast.error { border-color: var(--red); }
.toast.warn { border-color: var(--amber); color: #fcd34d; font-weight: 600; }


/* shema iz /admin/videz */
:root {
  --bg: #0d0708;
  --panel: #17100f;
  --panel2: #201615;
  --border: #3a2422;
  --text: #f0e6e4;
  --muted: #a3908d;
  --accent: #e03e4a;
  --accent-dim: #b32c37;
  --accent-on: #ffffff;
  --green: #4ade80;
  --amber: #fbbf24;
  --red: #ff8f9a;
}