/* ============================================================
   SYTEH Platform — Design System
   Dark-first, IBM Carbon-inspired. Shared across all pages.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  /* Color tokens */
  --bg: #141414;
  --layer-1: #1c1c1c;
  --layer-2: #232323;
  --layer-hover: #2a2a2a;
  --border: #333333;
  --border-subtle: #262626;
  --text-1: #f4f4f4;
  --text-2: #a8a8a8;
  --text-3: #8d8d8d; /* WCAG AA: 4.7–5.6:1 on all surfaces (was #6f6f6f = 3.1–3.7, sub-AA) */
  --inverse: #ffffff;

  --blue: #0f62fe;
  --blue-hover: #0353e9;
  --blue-light: #78a9ff;
  --blue-mid: #4589ff;

  --green: #42be65;
  --yellow: #f1c21b;
  --red: #fa4d56;
  --teal: #08bdba;
  --purple: #be95ff;
  --cyan: #33b1ff;

  /* Type */
  --sans: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'IBM Plex Mono', 'Courier New', monospace;

  /* Layout */
  --sidebar-w: 240px;
  --topbar-h: 48px;

  /* Spacing scale on a 4px grid (#3 audit) — the canonical steps for gaps,
     padding and margins. New/adjusted styles should pick from these rather than
     ad-hoc rem values, so spacing stays on the grid. */
  --space-1: 0.25rem;  /* 4px  */
  --space-2: 0.5rem;   /* 8px  */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.25rem;  /* 20px */
  --space-6: 1.5rem;   /* 24px */
  --space-8: 2rem;     /* 32px */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { font-size: 16px; }

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text-1);
  font-size: 0.875rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

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

::selection { background: var(--blue); color: #fff; }

:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Typography helpers ---------- */

.eyebrow {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue-light);
}

h1.page-title { font-size: 1.5rem; font-weight: 400; letter-spacing: -0.01em; }
h2.section-title { font-size: 1.0625rem; font-weight: 500; }

.mono { font-family: var(--mono); }
.muted { color: var(--text-2); }
.dim { color: var(--text-3); }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ============================================================
   APP SHELL
   ============================================================ */

.app { display: flex; min-height: 100vh; }

/* ---------- Sidebar ---------- */

.sidebar {
  width: var(--sidebar-w);
  background: #101010;
  border-right: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 60;
}

.sidebar-logo {
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  padding: 0 var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.14em;
  color: var(--inverse);
}

.sidebar-logo .dot { color: var(--blue); }

.sidebar-logo .product {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  color: var(--text-3);
  margin-left: var(--space-2);
  padding-left: var(--space-2);
  border-left: 1px solid var(--border);
}

.nav-scroll { flex: 1; overflow-y: auto; padding: 0.75rem 0 1rem; }

.nav-group { margin-bottom: 1.25rem; }

.nav-group-label {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 0 var(--space-4);
  margin-bottom: var(--space-2);
  display: block;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  color: var(--text-2);
  font-size: 0.8125rem;
  border-left: 3px solid transparent;
  transition: background 0.1s, color 0.1s;
}

.nav-item:hover { background: var(--layer-1); color: var(--text-1); text-decoration: none; }

.nav-item.active {
  background: var(--layer-1);
  color: var(--inverse);
  border-left-color: var(--blue);
}

.nav-item svg { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.5; }

.nav-item .soon {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 0.5625rem;
  letter-spacing: 0.08em;
  color: var(--text-3);
  border: 1px solid var(--border);
  padding: 0 var(--space-1);
}

.sidebar-foot {
  border-top: 1px solid var(--border-subtle);
  padding: var(--space-3) var(--space-4);
  font-family: var(--mono);
  font-size: 0.625rem;
  color: var(--text-3);
  letter-spacing: 0.06em;
}

/* ---------- Topbar ---------- */

.main { flex: 1; margin-left: var(--sidebar-w); display: flex; flex-direction: column; min-width: 0; }

.topbar {
  height: var(--topbar-h);
  background: var(--bg);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 0 var(--space-4);
  position: sticky;
  top: 0;
  z-index: 50;
}

.breadcrumbs { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; color: var(--text-3); white-space: nowrap; }
.breadcrumbs a { color: var(--text-2); }
.breadcrumbs .sep { color: var(--text-3); }
.breadcrumbs .current { color: var(--text-1); }

.search-trigger {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--layer-1);
  border: 1px solid var(--border);
  color: var(--text-3);
  font-family: var(--sans);
  font-size: 0.75rem;
  padding: var(--space-2) var(--space-3);
  width: 280px;
  cursor: pointer;
  text-align: left;
}

.search-trigger:hover { border-color: var(--text-3); }
.search-trigger kbd {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 0.625rem;
  border: 1px solid var(--border);
  padding: 0 0.3rem;
  color: var(--text-3);
}

.topbar-actions { display: flex; align-items: center; gap: 0.25rem; }

.icon-btn {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  color: var(--text-2);
  position: relative;
}
.icon-btn:hover { background: var(--layer-1); color: var(--text-1); }
.icon-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.5; }
.icon-btn .badge-dot {
  position: absolute; top: 6px; right: 7px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--blue); border: 1px solid var(--bg);
}

.avatar {
  width: 28px; height: 28px;
  background: var(--blue);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.6875rem; font-weight: 600;
  cursor: pointer;
  border: none;
  font-family: var(--sans);
}

.avatar.sm { width: 24px; height: 24px; font-size: 0.625rem; }
.avatar.teal { background: var(--teal); color: #002; }
.avatar.purple { background: var(--purple); color: #201040; }
.avatar.yellow { background: var(--yellow); color: #2a2000; }
.avatar.gray { background: var(--layer-hover); color: var(--text-2); }

.avatar-stack { display: flex; }
.avatar-stack .avatar { margin-left: -6px; border: 2px solid var(--layer-1); }
.avatar-stack .avatar:first-child { margin-left: 0; }

/* ---------- Dropdown menus ---------- */

.menu-anchor { position: relative; }

.dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 220px;
  background: var(--layer-1);
  border: 1px solid var(--border);
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  display: none;
  z-index: 80;
}
.dropdown.open { display: block; }

.dropdown-head {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  font-size: 0.75rem;
}
.dropdown-head .name { color: var(--text-1); font-weight: 500; }
.dropdown-head .sub { color: var(--text-3); font-size: 0.6875rem; }

.dropdown a.item, .dropdown button.item {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--space-2) var(--space-4);
  color: var(--text-2);
  font-size: 0.8125rem;
  background: none; border: none; cursor: pointer;
  font-family: var(--sans);
}
.dropdown a.item:hover, .dropdown button.item:hover { background: var(--layer-2); color: var(--text-1); text-decoration: none; }
.dropdown .divider { border-top: 1px solid var(--border-subtle); }

.notif-item { padding: 0.625rem 0.875rem; border-bottom: 1px solid var(--border-subtle); font-size: 0.75rem; }
.notif-item:last-child { border-bottom: none; }
.notif-item .t { color: var(--text-1); }
.notif-item .when { font-family: var(--mono); font-size: 0.625rem; color: var(--text-3); margin-top: 2px; }

/* ---------- Page container ---------- */

.page { padding: 1.5rem 2rem 3rem; max-width: 1600px; width: 100%; }

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

.page-head .titles .eyebrow { display: block; margin-bottom: 0.25rem; }
.page-head .sub { color: var(--text-2); font-size: 0.8125rem; margin-top: 0.25rem; }
.page-head .actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* ============================================================
   COMPONENTS
   ============================================================ */

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--sans);
  font-size: 0.8125rem;
  padding: var(--space-2) var(--space-4);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.1s;
  white-space: nowrap;
}

.btn.primary { background: var(--blue); color: #fff; }
.btn.primary:hover { background: var(--blue-hover); text-decoration: none; }

.btn.secondary { background: transparent; color: var(--text-1); border-color: var(--border); }
.btn.secondary:hover { border-color: var(--text-3); text-decoration: none; }

.btn.ghost { background: transparent; color: var(--blue-light); }
.btn.ghost:hover { background: var(--layer-1); text-decoration: none; }

.btn.danger { background: transparent; color: var(--red); border-color: var(--red); }
.btn.danger:hover { background: rgba(250,77,86,0.1); }

.btn.sm { padding: 0.25rem 0.625rem; font-size: 0.75rem; }

.btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.75; }

/* ---------- Tags ---------- */

.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--mono);
  font-size: 0.6563rem;
  letter-spacing: 0.04em;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--border);
  color: var(--text-2);
  white-space: nowrap;
}

.tag::before { content: ''; width: 6px; height: 6px; flex: none; background: var(--text-3); }

.tag.blue   { color: var(--blue-light); border-color: rgba(69,137,255,0.4); } .tag.blue::before { background: var(--blue-mid); }
.tag.green  { color: var(--green); border-color: rgba(66,190,101,0.4); }     .tag.green::before { background: var(--green); }
.tag.yellow { color: var(--yellow); border-color: rgba(241,194,27,0.4); }    .tag.yellow::before { background: var(--yellow); }
.tag.red    { color: var(--red); border-color: rgba(250,77,86,0.4); }        .tag.red::before { background: var(--red); }
.tag.teal   { color: var(--teal); border-color: rgba(8,189,186,0.4); }       .tag.teal::before { background: var(--teal); }
.tag.purple { color: var(--purple); border-color: rgba(190,149,255,0.4); }   .tag.purple::before { background: var(--purple); }
.tag.plain::before { display: none; }

/* ---------- Cards / panels ---------- */

.card {
  background: var(--layer-1);
  border: 1px solid var(--border-subtle);
}

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
}

.card-head h2 { font-size: 0.875rem; font-weight: 500; }
.card-head .link { font-size: 0.75rem; }

.card-body { padding: 1.125rem; }
.card-body.flush { padding: 0; }

/* ---------- KPI widgets ---------- */

.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border-subtle); border: 1px solid var(--border-subtle); margin-bottom: 1.5rem; }

.kpi {
  background: var(--layer-1);
  padding: var(--space-4) var(--space-5);
}

.kpi .label { font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.kpi .value { font-size: 1.75rem; font-weight: 300; margin: 0.25rem 0 0.125rem; font-variant-numeric: tabular-nums; }
.kpi .delta { font-family: var(--mono); font-size: 0.6875rem; }
.kpi .delta.up { color: var(--green); }
.kpi .delta.down { color: var(--red); }
.kpi .delta.flat { color: var(--text-3); }

/* ---------- Tables / data grid ---------- */

.table-wrap { overflow-x: auto; }

table.grid { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }

table.grid th {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--text-3);
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  background: var(--layer-1);
}

table.grid td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
  white-space: nowrap;
}

table.grid tbody tr { transition: background 0.08s; }
table.grid tbody tr:hover { background: var(--layer-2); }
table.grid tbody tr.selected { background: rgba(15,98,254,0.08); }

table.grid .primary-cell a { color: var(--text-1); font-weight: 500; }
table.grid .primary-cell a:hover { color: var(--blue-light); }
table.grid .sub-cell { font-size: 0.6875rem; color: var(--text-3); }

table.grid td.r, table.grid th.r { text-align: right; }
/* right-aligned cells are numeric by convention — keep digits aligned (#3 audit:
   tabular figures), so columns line up even without the .num class */
table.grid td.r { font-variant-numeric: tabular-nums; }

input[type="checkbox"].chk {
  appearance: none;
  width: 14px; height: 14px;
  border: 1px solid var(--text-3);
  background: transparent;
  cursor: pointer;
  position: relative;
  vertical-align: middle;
}
input[type="checkbox"].chk:checked { background: var(--blue); border-color: var(--blue); }
input[type="checkbox"].chk:checked::after {
  content: ''; position: absolute; left: 4px; top: 1px;
  width: 4px; height: 8px;
  border: solid #fff; border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}

.table-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  flex-wrap: wrap;
}

.table-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--text-3);
  flex-wrap: wrap;
  gap: var(--space-2);
}

.pager { display: flex; gap: 1px; }
.pager button {
  min-width: 28px; height: 28px;
  background: var(--layer-2); border: none; color: var(--text-2);
  font-family: var(--mono); font-size: 0.6875rem; cursor: pointer;
}
.pager button.on { background: var(--blue); color: #fff; }
.pager button:hover:not(.on) { background: var(--layer-hover); }

/* ---------- Inputs ---------- */

.field { display: flex; flex-direction: column; gap: 0.375rem; }

.field label {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}

.field label .req { color: var(--red); }

.input, .select, textarea.input {
  font-family: var(--sans);
  font-size: 0.8125rem;
  color: var(--text-1);
  background: var(--layer-2);
  border: none;
  border-bottom: 1px solid var(--border);
  padding: var(--space-2) var(--space-3);
  width: 100%;
}

.input:focus, .select:focus, textarea.input:focus { outline: 2px solid var(--blue); outline-offset: -2px; }
.input::placeholder { color: var(--text-3); }

.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23a8a8a8' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: var(--space-8);
  cursor: pointer;
}

.search-input {
  display: flex; align-items: center; gap: 0.5rem;
  background: var(--layer-2);
  border-bottom: 1px solid var(--border);
  padding: 0 var(--space-3);
  flex: 1;
  min-width: 200px;
  max-width: 360px;
}
.search-input svg { width: 14px; height: 14px; stroke: var(--text-3); fill: none; stroke-width: 1.5; flex: none; }
.search-input input {
  background: none; border: none; color: var(--text-1);
  font-family: var(--sans); font-size: 0.8125rem;
  padding: 0.5625rem 0; width: 100%;
}
.search-input input:focus { outline: none; }
.search-input input::placeholder { color: var(--text-3); }

/* Toggle switch */
.switch { position: relative; width: 32px; height: 18px; display: inline-block; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .track {
  position: absolute; inset: 0;
  background: var(--layer-hover);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.15s;
}
.switch .track::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 12px; height: 12px; background: var(--text-2);
  transition: transform 0.15s, background 0.15s;
}
.switch input:checked + .track { background: var(--blue); border-color: var(--blue); }
.switch input:checked + .track::after { transform: translateX(14px); background: #fff; }

/* ---------- Tabs ---------- */

.tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border-subtle);
  overflow-x: auto;
}

.tab {
  font-family: var(--sans);
  font-size: 0.8125rem;
  color: var(--text-2);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  white-space: nowrap;
}

.tab:hover { color: var(--text-1); }
.tab.active { color: var(--inverse); border-bottom-color: var(--blue); }
.tab .count { font-family: var(--mono); font-size: 0.625rem; color: var(--text-3); margin-left: 0.375rem; }

.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ---------- Progress ---------- */

.progress { height: 4px; background: var(--layer-hover); position: relative; min-width: 80px; }
.progress .bar { position: absolute; inset: 0 auto 0 0; background: var(--blue); }
.progress .bar.green { background: var(--green); }
.progress .bar.yellow { background: var(--yellow); }
.progress .bar.red { background: var(--red); }

/* ---------- Timeline / activity ---------- */

.timeline { list-style: none; }

.timeline li {
  position: relative;
  padding: 0 0 var(--space-5) var(--space-6);
  border-left: 1px solid var(--border);
  margin-left: var(--space-2);
}
.timeline li:last-child { padding-bottom: 0.25rem; }

.timeline li::before {
  content: '';
  position: absolute;
  left: -4.5px; top: 4px;
  width: 8px; height: 8px;
  background: var(--text-3);
}
.timeline li.blue::before { background: var(--blue); }
.timeline li.green::before { background: var(--green); }
.timeline li.yellow::before { background: var(--yellow); }
.timeline li.red::before { background: var(--red); }

.timeline .t { font-size: 0.8125rem; color: var(--text-1); }
.timeline .meta { font-family: var(--mono); font-size: 0.625rem; color: var(--text-3); margin-top: 2px; letter-spacing: 0.04em; }

/* ---------- Kanban ---------- */

.kanban {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  align-items: start;
}

.kanban-col {
  background: var(--layer-1);
  border: 1px solid var(--border-subtle);
  border-top: 2px solid var(--border);
}
.kanban-col.c-blue { border-top-color: var(--blue); }
.kanban-col.c-teal { border-top-color: var(--teal); }
.kanban-col.c-purple { border-top-color: var(--purple); }
.kanban-col.c-yellow { border-top-color: var(--yellow); }
.kanban-col.c-green { border-top-color: var(--green); }
.kanban-col.c-red { border-top-color: var(--red); }

.kanban-col-head {
  display: flex; align-items: baseline; gap: 0.5rem;
  padding: var(--space-3) var(--space-4) var(--space-2);
}
.kanban-col-head .name { font-size: 0.8125rem; font-weight: 500; }
.kanban-col-head .n { font-family: var(--mono); font-size: 0.6875rem; color: var(--text-3); }
.kanban-col-head .sum { margin-left: auto; font-family: var(--mono); font-size: 0.6875rem; color: var(--text-2); }

.kanban-cards { padding: 0.5rem; display: flex; flex-direction: column; gap: 0.5rem; min-height: 60px; }

.kcard {
  background: var(--layer-2);
  border: 1px solid var(--border-subtle);
  border-left: 2px solid var(--border);
  padding: var(--space-3);
  cursor: grab;
  display: block;
  color: inherit;
}
.kcard:hover { border-color: var(--text-3); text-decoration: none; }
.kcard .co { font-size: 0.8125rem; font-weight: 500; color: var(--text-1); }
.kcard .what { font-size: 0.75rem; color: var(--text-2); margin-top: 2px; }
.kcard .foot { display: flex; align-items: center; justify-content: space-between; margin-top: 0.625rem; }
.kcard .val { font-family: var(--mono); font-size: 0.75rem; color: var(--blue-light); }
.kcard.dragging { opacity: 0.4; }

/* ---------- Global search overlay ---------- */

.overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.65);
  display: none;
  z-index: 100;
  padding: 10vh 1rem 0;
  justify-content: center;
  align-items: flex-start;
}
.overlay.open { display: flex; }

.search-panel {
  width: 100%; max-width: 640px;
  background: var(--layer-1);
  border: 1px solid var(--border);
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}

.search-panel .search-row {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0 var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}
.search-panel .search-row svg { width: 16px; height: 16px; stroke: var(--text-3); fill: none; stroke-width: 1.5; }
.search-panel input {
  flex: 1; background: none; border: none;
  color: var(--text-1); font-family: var(--sans); font-size: 0.9375rem;
  padding: var(--space-4) 0;
}
.search-panel input:focus { outline: none; }
.search-panel .esc { font-family: var(--mono); font-size: 0.625rem; color: var(--text-3); border: 1px solid var(--border); padding: 0.1rem 0.35rem; }

.search-results { max-height: 50vh; overflow-y: auto; padding-bottom: 0.5rem; }
.sr-group { font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); padding: 0.75rem 1rem 0.375rem; }
.sr-item { display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem 1rem; color: var(--text-2); font-size: 0.8125rem; }
.sr-item:hover { background: var(--layer-2); color: var(--text-1); text-decoration: none; }
.sr-item .k { font-family: var(--mono); font-size: 0.625rem; color: var(--text-3); margin-left: auto; }

/* ---------- Toast ---------- */

.toast {
  position: fixed;
  bottom: 1.5rem; right: 1.5rem;
  background: var(--layer-1);
  border: 1px solid var(--border);
  border-left: 3px solid var(--green);
  padding: var(--space-3) var(--space-4);
  font-size: 0.8125rem;
  color: var(--text-1);
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  z-index: 120;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast .sub { font-family: var(--mono); font-size: 0.625rem; color: var(--text-3); margin-top: 2px; }

/* ---------- Detail page header ---------- */

.record-head {
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}

.record-mark {
  width: 56px; height: 56px;
  background: var(--layer-2);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono);
  font-size: 1rem;
  color: var(--blue-light);
  flex: none;
}

.record-head .info { flex: 1; min-width: 240px; }
.record-head h1 { font-size: 1.375rem; font-weight: 400; }
.record-head .meta-row { display: flex; gap: 0.5rem; margin-top: 0.5rem; flex-wrap: wrap; }
.record-head .actions { display: flex; gap: 0.5rem; align-items: flex-start; }

.stat-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px;
  background: var(--border-subtle);
  border: 1px solid var(--border-subtle);
  margin-bottom: var(--space-5);
}
.stat-strip .stat { background: var(--layer-1); padding: 0.75rem 1rem; }
.stat-strip .stat .label { font-family: var(--mono); font-size: 0.5938rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.stat-strip .stat .v { font-size: 1.0625rem; font-weight: 400; margin-top: 2px; font-variant-numeric: tabular-nums; }

/* ---------- Definition lists ---------- */

.def-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem 1.5rem; }
.def-grid .def .label { font-family: var(--mono); font-size: 0.5938rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); margin-bottom: 2px; }
.def-grid .def .v { font-size: 0.8125rem; color: var(--text-1); }

/* ---------- Layout helpers ---------- */

.cols-2 { display: grid; grid-template-columns: 2fr 1fr; gap: 1.25rem; align-items: start; }
.cols-2-even { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; align-items: start; }
.cols-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; align-items: start; }
/* Grid (and flex) children default to min-width:auto, so a wide table — even one
   already wrapped in an overflow-x:auto .table-wrap — refuses to let its column
   shrink and pushes the whole page wider than a phone viewport. Letting these
   columns shrink to 0 lets the .table-wrap scroll the table instead of the page. */
.cols-2 > *, .cols-2-even > *, .cols-3 > *, .admin-layout > * { min-width: 0; }
/* Filter rows: fixed repeat(N,1fr) grids don't fit a phone. auto-fit + minmax
   collapses them to as many columns as fit, down to one, with no media query. */
.filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-4); }
.stack { display: flex; flex-direction: column; gap: 1.25rem; }
.row { display: flex; align-items: center; gap: 0.625rem; flex-wrap: wrap; }
.spacer { flex: 1; }
.mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 1.5rem; } .mb-1 { margin-bottom: 1rem; }

/* ============================================================
   LOGIN PAGE
   ============================================================ */

body.login-page { display: flex; min-height: 100vh; }

.login-visual {
  flex: 1.2;
  position: relative;
  background: #0d0d0d;
  border-right: 1px solid var(--border-subtle);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 3rem;
}

.login-visual canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

.login-visual .tagline { position: relative; z-index: 2; max-width: 460px; }
.login-visual .tagline .eyebrow { display: block; margin-bottom: 0.75rem; }
.login-visual .tagline h2 { font-size: 1.75rem; font-weight: 300; line-height: 1.3; color: var(--inverse); }
.login-visual .tagline p { color: var(--text-2); margin-top: 0.75rem; font-size: 0.875rem; }

.login-form-side {
  width: 480px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3rem;
}

.login-form-side .logo { font-size: 1.125rem; font-weight: 600; letter-spacing: 0.14em; margin-bottom: 3rem; }
.login-form-side .logo .dot { color: var(--blue); }
.login-form-side h1 { font-size: 1.5rem; font-weight: 300; margin-bottom: 0.375rem; }
.login-form-side .sub { color: var(--text-2); font-size: 0.8125rem; margin-bottom: 2rem; }
.login-form-side .field { margin-bottom: 1.25rem; }
.login-form-side .foot { margin-top: 2.5rem; font-family: var(--mono); font-size: 0.625rem; color: var(--text-3); letter-spacing: 0.06em; }

/* ============================================================
   ADMIN-SPECIFIC
   ============================================================ */

.admin-layout { display: grid; grid-template-columns: 260px 1fr; gap: 1.25rem; align-items: start; }

.admin-list { background: var(--layer-1); border: 1px solid var(--border-subtle); }
.admin-list .head { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-subtle); }
.admin-list a {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--space-2) var(--space-4);
  color: var(--text-2); font-size: 0.8125rem;
  border-left: 3px solid transparent;
}
.admin-list a:hover { background: var(--layer-2); color: var(--text-1); text-decoration: none; }
.admin-list a.on { background: var(--layer-2); color: var(--inverse); border-left-color: var(--blue); }
.admin-list a .n { font-family: var(--mono); font-size: 0.625rem; color: var(--text-3); }

/* Form builder */
.builder-layout { display: grid; grid-template-columns: 220px 1fr 280px; gap: 1.25rem; align-items: start; }

.palette-item {
  display: flex; align-items: center; gap: 0.625rem;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-subtle);
  background: var(--layer-2);
  font-size: 0.75rem;
  color: var(--text-2);
  cursor: grab;
  margin-bottom: var(--space-2);
}
.palette-item:hover { border-color: var(--text-3); color: var(--text-1); }
.palette-item .ft { font-family: var(--mono); font-size: 0.5938rem; color: var(--text-3); margin-left: auto; }

.canvas-field {
  border: 1px solid var(--border-subtle);
  background: var(--layer-2);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-2);
  display: flex; align-items: center; gap: 0.75rem;
  cursor: pointer;
}
.canvas-field:hover { border-color: var(--text-3); }
.canvas-field.selected { border-color: var(--blue); outline: 1px solid var(--blue); }
.canvas-field .grip { color: var(--text-3); font-family: var(--mono); cursor: grab; }
.canvas-field .fl { flex: 1; }
.canvas-field .fl .name { font-size: 0.8125rem; }
.canvas-field .fl .type { font-family: var(--mono); font-size: 0.5938rem; color: var(--text-3); letter-spacing: 0.06em; text-transform: uppercase; }
.canvas-field .flags { display: flex; gap: 0.375rem; }

.section-divider {
  font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--blue-light);
  padding: var(--space-4) 0 var(--space-2);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-3);
}

/* Theme engine */
.swatch-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0; }
.swatch { width: 28px; height: 28px; border: 1px solid var(--border); flex: none; }
.swatch-row .hex { font-family: var(--mono); font-size: 0.75rem; color: var(--text-2); }
.swatch-row .name { font-size: 0.8125rem; flex: 1; }

.theme-preview {
  border: 1px solid var(--border);
  background: var(--bg);
}
.theme-preview .tp-top { height: 28px; border-bottom: 1px solid var(--border-subtle); display: flex; align-items: center; padding: 0 0.75rem; gap: 0.5rem; }
.theme-preview .tp-dot { width: 8px; height: 8px; background: var(--blue); }
.theme-preview .tp-body { display: flex; }
.theme-preview .tp-side { width: 60px; border-right: 1px solid var(--border-subtle); padding: 0.5rem 0.375rem; display: flex; flex-direction: column; gap: 0.25rem; }
.theme-preview .tp-side i { display: block; height: 6px; background: var(--layer-hover); }
.theme-preview .tp-side i.on { background: var(--blue); }
.theme-preview .tp-main { flex: 1; padding: 0.625rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.375rem; }
.theme-preview .tp-main i { display: block; height: 28px; background: var(--layer-1); border: 1px solid var(--border-subtle); }

/* Timesheet grid */
.ts-grid td input {
  width: 56px;
  background: var(--layer-2);
  border: none; border-bottom: 1px solid var(--border);
  color: var(--text-1);
  font-family: var(--mono); font-size: 0.75rem;
  padding: var(--space-2) var(--space-2);
  text-align: right;
}
.ts-grid td input:focus { outline: 2px solid var(--blue); outline-offset: -2px; }
.ts-grid td.total { font-family: var(--mono); color: var(--blue-light); }

/* ============================================================
   CHARTS (inline SVG helpers)
   ============================================================ */

.chart-legend { display: flex; gap: 1rem; flex-wrap: wrap; font-size: 0.6875rem; color: var(--text-2); }
.chart-legend .li { display: flex; align-items: center; gap: 0.375rem; }
.chart-legend .sw { width: 10px; height: 10px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1200px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .cols-2, .cols-2-even, .cols-3 { grid-template-columns: 1fr; }
  .builder-layout { grid-template-columns: 1fr; }
  .admin-layout { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .sidebar { transform: translateX(-100%); transition: transform 0.2s; }
  .sidebar.open { transform: translateX(0); }
  .main { margin-left: 0; }
  .menu-toggle { display: flex !important; }
  /* search must be allowed to shrink below its content, or it forces the
     topbar wider than the viewport */
  .search-trigger { width: auto; flex: 1; min-width: 0; max-width: 260px; }
  .search-trigger .hint-text { display: none; }
  .login-visual { display: none; }
  .login-form-side { width: 100%; }
  .page { padding: 1rem 1rem 3rem; }
}

/* On a phone the breadcrumb (white-space:nowrap) plus the search box and the two
   action buttons do not fit the row and push the topbar — and with it the whole
   .app/.main flex track — wider than the viewport, giving every SPA page a
   horizontal scroll. The page already shows its own <h1>, so the breadcrumb is
   redundant here and is hidden to reclaim the width. */
@media (max-width: 640px) {
  .breadcrumbs { display: none; }
}

.menu-toggle { display: none; }

.scrim {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5);
  z-index: 55; display: none;
}
.scrim.show { display: block; }

/* ===== Invoice document (v1.7) ===== */
.invoice-page { background: #e0e0e0; }
.inv-toolbar { display:flex; gap:0.75rem; align-items:center; max-width:820px; margin:1.5rem auto 1rem; padding:0 1rem; }
.invoice-doc { background:#ffffff; color:#161616; max-width:820px; margin:0 auto 3rem; padding:3rem; font-family:'IBM Plex Sans',sans-serif; box-shadow:0 2px 12px rgba(0,0,0,0.35); }
.inv-head { display:flex; justify-content:space-between; align-items:flex-start; border-bottom:3px solid #0F62FE; padding-bottom:1.5rem; }
.inv-brand { font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:1.5rem; letter-spacing:0.05em; }
.inv-brand span { color:#0F62FE; }
.inv-supplier { margin-top:0.75rem; font-size:0.8125rem; line-height:1.5; white-space:pre-line; color:#393939; }
.inv-title { text-align:right; }
.inv-word { font-family:'IBM Plex Mono',monospace; font-size:0.6875rem; letter-spacing:0.2em; color:#8d8d8d; }
.inv-number { font-size:1.375rem; font-weight:300; margin-top:0.25rem; }
.inv-parties { display:flex; justify-content:space-between; gap:2rem; margin:2rem 0; }
.inv-label { font-family:'IBM Plex Mono',monospace; font-size:0.625rem; letter-spacing:0.15em; color:#8d8d8d; margin-bottom:0.5rem; }
.inv-block { font-size:0.875rem; line-height:1.6; white-space:pre-line; }
.inv-meta { font-size:0.8125rem; border-collapse:collapse; }
.inv-meta td { padding:0.15rem 0; }
.inv-meta td:first-child { color:#8d8d8d; padding-right:1.5rem; }
.inv-meta td:last-child { font-family:'IBM Plex Mono',monospace; text-align:right; }
.inv-lines { width:100%; border-collapse:collapse; font-size:0.8125rem; margin-top:0.5rem; }
.inv-lines th { text-align:left; font-family:'IBM Plex Mono',monospace; font-size:0.625rem; letter-spacing:0.1em; color:#8d8d8d; border-bottom:1px solid #c6c6c6; padding:0.5rem 0.5rem 0.5rem 0; }
.inv-lines td { border-bottom:1px solid #e0e0e0; padding:0.6rem 0.5rem 0.6rem 0; vertical-align:top; }
.inv-lines .r, .inv-totals .r { text-align:right; font-family:'IBM Plex Mono',monospace; }
.inv-totals { display:flex; justify-content:flex-end; margin-top:1rem; }
.inv-totals table { border-collapse:collapse; font-size:0.875rem; min-width:280px; }
.inv-totals td { padding:0.35rem 0 0.35rem 1.5rem; }
.inv-totals .due td { border-top:2px solid #161616; font-weight:600; font-size:1rem; padding-top:0.6rem; }
.inv-note { margin-top:1.25rem; font-size:0.75rem; color:#393939; border-left:3px solid #0F62FE; padding-left:0.75rem; }
.inv-pay { margin-top:2rem; }
.inv-pay div:last-child { font-family:'IBM Plex Mono',monospace; font-size:0.8125rem; line-height:1.6; white-space:pre-line; }
.inv-footer { margin-top:2.5rem; padding-top:1rem; border-top:1px solid #e0e0e0; font-size:0.6875rem; color:#8d8d8d; white-space:pre-line; }
.inv-status .tag { vertical-align:middle; }
/* acceptance protocol — signature blocks */
.ap-signatures { display:flex; gap:3rem; margin-top:3.5rem; page-break-inside:avoid; }
.ap-sign { flex:1; }
.ap-sign-line { border-bottom:1px solid #8d8d8d; height:3.5rem; }
.ap-sign-role { font-family:'IBM Plex Mono',monospace; font-size:0.6875rem; letter-spacing:0.08em; color:#161616; margin-top:0.5rem; }
.ap-sign-hint { font-size:0.6875rem; color:#8d8d8d; margin-top:0.15rem; }

/* invoice document on a phone: the A4-ish 820px sheet with 3rem padding
   overflows a narrow screen, so below 640px it fills the width, drops the
   padding, and the side-by-side head / parties / totals / signatures stack
   into a single column. Only affects screen — the print block above is
   untouched, so printed/PDF invoices keep their full layout. */
@media (max-width: 640px) {
  .inv-toolbar { flex-wrap: wrap; padding: 0 0.75rem; margin-top: 1rem; }
  .invoice-doc { padding: 1.15rem; margin-bottom: 1.5rem; }
  .inv-head { flex-direction: column; gap: 1rem; }
  .inv-title { text-align: left; }
  .inv-brand { font-size: 1.25rem; }
  .inv-number { font-size: 1.15rem; }
  .inv-parties { flex-direction: column; gap: 1.25rem; margin: 1.5rem 0; }
  .inv-lines { font-size: 0.75rem; }
  .inv-lines th, .inv-lines td { padding-left: 0.25rem; padding-right: 0.25rem; }
  .inv-totals { justify-content: stretch; }
  .inv-totals table { min-width: 0; width: 100%; }
  .inv-totals td { padding-left: 0; }
  .ap-signatures { flex-direction: column; gap: 2rem; margin-top: 2rem; }
}

@media print {
  .no-print, .inv-toolbar, .toast { display:none !important; }
  body.invoice-page, .invoice-page { background:#ffffff !important; }
  .invoice-doc { box-shadow:none; margin:0; max-width:none; padding:0.5cm 0; }
  @page { margin: 1.4cm; }
}


/* ===== Timesheet month view + holidays (v2.2) ===== */
th.ts-hol, td.ts-hol { background: rgba(255, 131, 137, 0.09); }
th.ts-hol { color: #ff8389; cursor: help; }
td.ts-hol { cursor: help; }
th.ts-wkend, td.ts-wkend { background: rgba(255, 255, 255, 0.035); }
th.ts-today, td.ts-today { box-shadow: inset 0 2px 0 var(--blue, #0F62FE); }
th.ts-day, td.ts-day { padding-left: 0.2rem; padding-right: 0.2rem; }
th.ts-day .ts-dow { display: block; font-size: 0.5rem; letter-spacing: 0.08em; color: var(--text-2); }
td.ts-day input { width: 2.4rem; min-width: 2.4rem; padding: 0.3rem 0.15rem; text-align: right; font-size: 0.6875rem; }

/* Timesheet row note (v2.5) */
table.grid .sub-note { font-size: 0.6875rem; color: var(--text-2); font-style: italic; margin-top: 0.15rem; }

/* Forecast capacity ceiling (v2.8) */
.capacity-callout { border:1px solid var(--line); border-left:3px solid var(--blue); background:rgba(15,98,254,0.05); padding:0.7rem 0.9rem; font-size:0.75rem; line-height:1.5; }
.capacity-callout .big { font-size:0.95rem; color:var(--text); font-weight:500; }
.capacity-callout .cap-label { color:var(--text-2); text-transform:uppercase; font-size:0.625rem; letter-spacing:0.08em; }
.capacity-callout .cap-row { display:flex; gap:2rem; flex-wrap:wrap; margin-top:0.35rem; }

.capacity-callout .cap-people { font-size:0.6875rem; }
.capacity-callout .cap-people th { font-size:0.5625rem; }
.capacity-callout .cap-people td, .capacity-callout .cap-people th { padding:0.3rem 0.5rem; }

/* Forecast per-person available (v2.8.3) */
.fc-cap-note { font-size:0.625rem; color:var(--text-2); margin-top:0.25rem; }
.cap-avail { color:var(--green, #24a148); }
.cap-over { color:var(--red, #da1e28); font-weight:500; }

/* ---- prepínač jazyka v topbare (v2.27) ---- */
.lang-switch {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line, #2a2f3a);
  border-radius: 6px;
  overflow: hidden;
  margin-right: var(--space-2);
}
.lang-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted, #8b93a7);
  font: inherit;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.28rem 0.5rem;
  cursor: pointer;
  line-height: 1;
}
.lang-btn:hover { color: var(--text, #e6e9ef); }
.lang-btn.active {
  background: var(--accent, #0d6efd);
  color: #fff;
}
.lang-btn:focus-visible { outline: 2px solid var(--accent, #0d6efd); outline-offset: -2px; }

/* ---- akcie v riadku tabuľky (v2.30) ----
   Až štrnásť ovládacích prvkov sa do jedného riadku nezmestí, takže sa
   zalamujú. Každý prvok má rovnakú pevnú výšku a ikony rovnakú šírku —
   bez toho sedia textové chipy nižšie než ikonové tlačidlá a celý blok
   vyzerá rozhádzane. */
.row-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-1);
  justify-content: flex-end;
  align-items: center;
  margin-left: auto;
}
/* one height for everything in the block, whatever the tag or content */
.row-actions > .btn {
  height: 26px;
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  line-height: 1;
  gap: 0;
  vertical-align: middle;
}
.row-actions > .btn.ico {
  width: 26px;
  min-width: 26px;
  padding: 0;
}
.row-actions > .btn.chip {
  padding: 0 0.4rem;
  font-size: 0.6563rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  font-family: var(--mono);
}
.row-actions .btn.ico svg {
  width: 15px;
  height: 15px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.row-actions .btn[disabled] { opacity: 0.45; cursor: default; }
.row-actions .btn.ico.busy svg { opacity: 0.35; }


/* ---- prepad akcií do menu (v2.31) ---- */
.act-menu { position: relative; display: inline-flex; }
.act-pop {
  /* fixed, not absolute: the table wrapper scrolls (overflow-x: auto) and an
     absolutely positioned menu gets clipped by it, turning the popup into a
     little scrollable box of its own. Fixed escapes that clipping; the
     coordinates are set from the button's rectangle in JS. */
  position: fixed;
  z-index: 400;
  display: flex;
  flex-direction: column;
  min-width: 12rem;
  padding: var(--space-1);
  background: var(--layer-0, #12161f);
  border: 1px solid var(--border, #2a2f3a);
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
}
.act-pop[hidden] { display: none; }
.act-item {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--text-1, #e6e9ef);
  font: inherit;
  font-size: 0.75rem;
  text-align: left;
  padding: 0.4rem 0.55rem;
  cursor: pointer;
  white-space: nowrap;
}
.act-item:hover { background: var(--layer-1, #1b202b); text-decoration: none; }
.act-item:focus-visible { outline: 2px solid var(--blue, #0d6efd); outline-offset: -2px; }

/* ---- mesačný výkaz po týždňoch (v2.32) ----
   Tridsaťjeden stĺpcov sa na obrazovku nezmestí, takže mesiac je rozdelený
   na týždne pod sebou. Sedem stĺpcov sa zmestí vždy a skroluje sa len zvisle. */
.ts-month { display: flex; flex-direction: column; gap: 1rem; padding: 0 0 0.5rem; }
.ts-week {
  border: 1px solid var(--border, #2a2f3a);
}
.ts-week-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: 0.4rem 0.75rem;
  background: var(--layer-1, #1b202b);
  border-bottom: 1px solid var(--border, #2a2f3a);
}
.ts-week-head .wk {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: var(--text-2, #8b93a7);
}
.ts-week-head .rng { font-size: 0.75rem; color: var(--text-1, #e6e9ef); }
.ts-week-head .wtot {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--blue-light, #78a9ff);
}
.ts-week table { width: 100%; }
.ts-week td.ts-out, .ts-week th.ts-out { opacity: 0.3; }
.ts-month-foot {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  font-family: var(--mono);
  font-size: 0.8125rem;
}
.ts-month-foot .big { color: var(--blue-light, #78a9ff); font-size: 1rem; }

/* ---- percento hotového priamo v zozname (v2.34) ---- */
.prog-edit { display: flex; align-items: center; gap: 0.5rem; }
.prog-edit .prog-in {
  width: 3.6rem;
  padding: 0.15rem 0.3rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  text-align: right;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-2, #8b93a7);
}
.prog-edit .prog-in:hover { border-color: var(--border, #2a2f3a); }
.prog-edit .prog-in:focus { border-color: var(--blue, #0d6efd); color: var(--text-1, #e6e9ef); outline: none; }
table.grid tr[data-id] { cursor: pointer; }
table.grid tr[data-id]:focus-visible { outline: 2px solid var(--blue, #0d6efd); outline-offset: -2px; }

/* ---- záložky v nastaveniach (v2.35) ---- */
.settings-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  border-bottom: 1px solid var(--border, #2a2f3a);
  margin-bottom: var(--space-4);
}
.settings-tabs .tab {
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--text-2, #8b93a7);
  font: inherit;
  font-size: 0.8125rem;
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  margin-bottom: -1px;
}
.settings-tabs .tab:hover { color: var(--text-1, #e6e9ef); }
.settings-tabs .tab.active {
  color: var(--text-1, #e6e9ef);
  border-bottom-color: var(--blue, #0d6efd);
}
.tabpanel[hidden] { display: none; }
.tabpanel > .card { margin-bottom: 1rem; }
.panel-save { display: flex; justify-content: flex-end; padding: 0.25rem 0 1rem; }

/* ---- lišta nad dokladom (v2.37) ----
   Doklad je biely "papier" a lišta nad ním dedila tlačidlá tmavej témy —
   svetlý text na svetlom podklade. Dostáva vlastnú tmavú plochu ako horné
   menu, takže je čitateľná bez ohľadu na pozadie stránky. */
.inv-toolbar {
  background: var(--layer-1, #1b202b);
  border: 1px solid var(--border, #2a2f3a);
  padding: var(--space-2) var(--space-3);
  border-radius: 2px;
}
.inv-toolbar .btn.secondary {
  color: #e6e9ef;
  border-color: rgba(255,255,255,0.28);
  background: transparent;
}
.inv-toolbar .btn.secondary:hover { border-color: #e6e9ef; background: rgba(255,255,255,0.06); }
.inv-toolbar .btn.primary { color: #fff; }
.inv-toolbar .lang-switch { border-color: rgba(255,255,255,0.28); }
.inv-toolbar .lang-btn { color: #b9c0cf; }
.inv-toolbar .lang-btn:hover { color: #fff; }
.inv-toolbar .lang-btn.active { background: var(--blue, #0d6efd); color: #fff; }

/* ---- číslo dokladu vedie na doklad (v2.40) ---- */
.doc-link { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.doc-link:hover { color: var(--blue-light, #78a9ff); border-bottom-color: currentColor; text-decoration: none; }

/* ---- dvojstĺpcové dialógy (v2.45) ----
   Polia sa skladajú do mriežky; pole s .half zaberie polovicu, takže dvojice
   ako PSČ + Mesto sedia vedľa seba. Group je nadpis skupiny cez celú šírku. */
.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3) var(--space-4);
}
.field-grid > .field { grid-column: 1 / -1; }
.field-grid > .field.half { grid-column: span 1; }
.field-grid > .field-group {
  grid-column: 1 / -1;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-2, #8b93a7);
  border-bottom: 1px solid var(--border, #2a2f3a);
  padding-bottom: var(--space-1);
  margin-top: var(--space-1);
}
.field-grid > .field-group:first-child { margin-top: 0; }
@media (max-width: 640px) {
  .field-grid { grid-template-columns: 1fr; }
  .field-grid > .field.half { grid-column: 1 / -1; }
}

/* ---- hromadné akcie a vedľajšie stĺpce (v2.46) ---- */
.chk-col { width: 2.25rem; text-align: center; }
.bulk-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
  background: var(--layer-1, #1b202b);
  border: 1px solid var(--blue, #0d6efd);
  border-radius: 2px;
}
.bulk-bar[hidden] { display: none; }
.bulk-count { font-size: 0.8125rem; color: var(--text-1, #e6e9ef); margin-right: auto; }

/* Under 1200 px the secondary columns fold away: the essentials (number,
   customer, amount, actions) stay, the rest is one tap into the row. */
@media (max-width: 1200px) {
  .grid th.col-sec, .grid td.col-sec { display: none; }
}

/* ---- rekapitulácia DPH na doklade (v2.51) ---- */
.inv-recap {
  width: auto;
  margin: 0 0 var(--space-4) auto;
  border-collapse: collapse;
  font-size: 0.8125rem;
}
.inv-recap th, .inv-recap td {
  padding: 0.3rem 0.75rem;
  border-bottom: 1px solid var(--border, #e5e7eb);
  text-align: right;
}
.inv-recap th:first-child, .inv-recap td:first-child { text-align: left; }
.inv-recap thead th { font-weight: 600; color: var(--text-2, #6b7280); }
.inv-recap .recap-sum td { font-weight: 700; border-top: 2px solid var(--border, #e5e7eb); }

/* ---- taby v module Sklad (v2.53) ---- */
.tabbar { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--border, #2a2f3a); margin-bottom: 1rem; overflow-x: auto; }
.tabbar .tab {
  appearance: none; background: none; border: none; cursor: pointer;
  padding: 0.6rem 1rem; font: inherit; font-size: 0.875rem;
  color: var(--text-2, #8b93a7); border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tabbar .tab:hover { color: var(--text-1, #e6e9ef); }
.tabbar .tab.active { color: var(--text-1, #e6e9ef); border-bottom-color: var(--blue, #0d6efd); font-weight: 600; }

/* ---- finančný prehľad na dashboarde (v2.59) ---- */
.fin-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 1rem; }
@media (max-width: 1100px) { .fin-grid { grid-template-columns: 1fr; } }
/* finance KPI strip (roadmap 3): DSO / DPO / margin / operating result */
.fin-kpi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border-subtle); border: 1px solid var(--border-subtle); border-radius: 4px; overflow: hidden; margin-bottom: 1rem; }
.fin-kpi-tile { background: var(--layer-1); padding: 0.75rem 1rem; }
.fin-kpi-tile .label { font-size: 0.625rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.fin-kpi-tile .v { font-size: 1.375rem; font-weight: 300; margin-top: 0.125rem; font-variant-numeric: tabular-nums; }
.fin-kpi-tile .v .unit { font-size: 0.8rem; color: var(--text-2); }
.fin-kpi-tile .v.neg { color: var(--red); }
.fin-kpi-tile .sub { font-size: 0.625rem; display: block; margin-top: 0.125rem; }
@media (max-width: 720px) { .fin-kpi { grid-template-columns: repeat(2, 1fr); } }
.fin-cell { border: 1px solid var(--border, #2a2f3a); border-radius: 4px; padding: 0.75rem; }
.fin-cell-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; font-size: 0.8125rem; font-weight: 600; color: var(--text-2, #8b93a7); }
.fin-chart { position: relative; overflow-x: auto; }
.fin-bar { cursor: pointer; transition: opacity 0.12s; }
.fin-bar:hover { opacity: 0.8; }
.seg { display: inline-flex; border: 1px solid var(--border, #2a2f3a); border-radius: 4px; overflow: hidden; }
.seg-btn { appearance: none; background: none; border: none; cursor: pointer; padding: 0.35rem 0.7rem; font: inherit; font-size: 0.75rem; color: var(--text-2, #8b93a7); }
.seg-btn.active { background: var(--blue, #2f6bff); color: #fff; }
.leg-item { appearance: none; background: none; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.35rem; font: inherit; font-size: 0.75rem; color: var(--text-2, #8b93a7); opacity: 0.45; }
.leg-item.active { opacity: 1; }
.leg-dot { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.fin-tip { position: absolute; z-index: 20; background: var(--layer-1, #1b202b); border: 1px solid var(--border, #2a2f3a); border-radius: 4px; padding: 0.5rem 0.6rem; font-size: 0.72rem; pointer-events: none; min-width: 160px; box-shadow: 0 6px 20px rgba(0,0,0,0.3); }
.fin-tip .tip-row { display: flex; align-items: center; gap: 0.35rem; margin-top: 0.3rem; }
.fin-tip .tip-sub { color: var(--text-3, #6b7280); margin-left: 1rem; }
.fin-line { display: flex; justify-content: space-between; padding: 0.25rem 0; font-size: 0.8125rem; }
.fin-line.strong { font-weight: 600; }
.fin-line.sub { color: var(--text-2, #8b93a7); padding-left: 0.75rem; font-size: 0.75rem; }
.fin-line[data-href]:hover { color: var(--blue-light, #78a9ff); }
.fin-num { font-variant-numeric: tabular-nums; }
/* period-over-period delta badge (roadmap 3) */
.fin-delta { font-size: 0.625rem; font-weight: 600; margin-left: 0.4rem; white-space: nowrap; letter-spacing: 0.02em; }
.fin-delta.good { color: var(--green); }
.fin-delta.bad { color: var(--red); }
.fin-group { margin-bottom: 0.6rem; }
.fin-group-h { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-3, #6b7280); margin-bottom: 0.2rem; }
.fin-diff { border-top: 1px solid var(--border, #2a2f3a); margin-top: 0.4rem; padding-top: 0.3rem; }
.fin-hint { font-size: 0.68rem; margin-top: 0.5rem; }

/* ---- prepínač spoločnosti (v2.63) ---- */
.company-switch { display: inline-flex; align-items: center; margin-right: 0.5rem; }
.company-switch select {
  background: var(--layer-1, #1b202b); color: var(--text-1, #e6e9ef);
  border: 1px solid var(--border, #2a2f3a); border-radius: 4px;
  padding: 0.3rem 0.5rem; font-size: 0.78rem; max-width: 14rem;
}

/* ---- načítanie firmy z registra (v2.64) ---- */
.reg-lookup { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.reg-lookup .dim { font-size: 0.72rem; }

/* ---- dlhé dialógy sa dajú skrolovať (v2.65) ----
   The overlay is position:fixed, so a dialog taller than the viewport simply
   ran off the bottom with no way to reach the fields down there — the company
   form, with seventeen fields, hit this first. The overlay now scrolls, the
   panel is capped, and its body scrolls inside, with the buttons kept in view
   so Save never has to be hunted for. */
.overlay {
  overflow-y: auto;
  padding: 6vh 1rem 4vh;
  -webkit-overflow-scrolling: touch;
}
.overlay > .search-panel {
  max-height: 88vh;
  display: flex;
  flex-direction: column;
}
.overlay > .search-panel > .card-head { flex: 0 0 auto; }
.overlay > .search-panel > .card-body {
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* the action row stays reachable at the foot of the scrolling body */
.overlay > .search-panel > .card-body > .row:last-child {
  position: sticky;
  bottom: 0;
  background: var(--layer-1, #1b202b);
  padding-top: var(--space-2);
  margin-top: 0.2rem;
  border-top: 1px solid var(--border, #2a2f3a);
}
@media (max-width: 640px) {
  .overlay { padding: 2vh 0.6rem 3vh; }
  .overlay > .search-panel {
    max-height: 94vh;
    max-width: 100% !important;
    width: 100%;
  }
  /* inputs fill the column cleanly (field-grid already goes single-column at 640) */
  .overlay > .search-panel .field .input,
  .overlay > .search-panel .field .select,
  .overlay > .search-panel .field textarea { width: 100%; box-sizing: border-box; }
}
.brand-preview { display: inline-flex; align-items: center; gap: 0.3rem; }
.brand-preview img { height: 26px; width: auto; max-width: 90px; object-fit: contain; background: #fff; border-radius: 3px; padding: 2px; }

/* ---- akcentový náznak firmy v prepínači (v2.65) ---- */
.company-switch.has-accent { position: relative; }
.company-switch.has-accent select {
  border-left: 3px solid var(--company-accent, var(--blue));
}

/* ---- prístup používateľa k firmám (v2.66) ---- */
.uc-box { border: 1px solid var(--border, #2a2f3a); border-radius: 5px; padding: 0.7rem 0.85rem; margin-bottom: 0.4rem; }
.uc-head { font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-2, #9aa3b2); margin-bottom: 0.4rem; }
.uc-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.2rem 0; font-size: 0.82rem; cursor: pointer; }
.uc-item input { accent-color: var(--company-accent, var(--blue, #0f62fe)); }

/* ---- konsolidovaný prepínač vo fin. prehľade (v2.66) ---- */
.fin-scope { display: inline-flex; gap: 0.3rem; margin-left: 0.75rem; }
.fin-scope .chip { font-size: 0.72rem; padding: 0.25rem 0.6rem; border: 1px solid var(--border, #2a2f3a); border-radius: 999px; background: transparent; color: var(--text-2, #9aa3b2); cursor: pointer; }
.fin-scope .chip.active { background: var(--company-accent, var(--blue, #0f62fe)); color: #fff; border-color: transparent; }

/* ---- loading & empty states (v2.73) ----
   Until now a list was blank between the click and the data arriving, so a slow
   response looked the same as an empty table. A skeleton fills that gap with a
   hint of the rows to come, and a proper empty state replaces the bare "no
   rows" line with something composed. */

/* skeleton rows shimmer while data loads; the shimmer is disabled for anyone
   who has asked for reduced motion, leaving a static placeholder */
.skeleton-row td { padding: 0.75rem 0.9rem; }
.skeleton-bar {
  height: 10px; border-radius: 3px;
  background: linear-gradient(90deg, var(--layer-2) 25%, var(--layer-hover) 37%, var(--layer-2) 63%);
  background-size: 400% 100%;
  animation: skeleton-shimmer 1.4s ease infinite;
}
.skeleton-bar.w-60 { width: 60%; }
.skeleton-bar.w-40 { width: 40%; }
.skeleton-bar.w-80 { width: 80%; }
@keyframes skeleton-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton-bar { animation: none; background: var(--layer-2); }
}

/* a composed empty state: a muted icon, a line of explanation, and room for an
   optional action, instead of a lone sentence in a table cell */
.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.6rem; padding: 2.75rem 1.5rem; text-align: center; color: var(--text-2);
}
.empty-state svg { width: 34px; height: 34px; color: var(--text-3); stroke-width: 1.4; }
.empty-state .es-title { color: var(--text-1); font-size: 0.9rem; font-weight: 500; }
.empty-state .es-sub { color: var(--text-2); font-size: 0.8rem; max-width: 26rem; }
.empty-state .es-action { margin-top: 0.4rem; }

/* ---- touch targets on small screens (v2.74) ----
   Buttons and icon buttons are sized for a mouse (32px, and small buttons
   smaller still). On a phone that is below the ~44px that Apple and Google
   recommend for a finger, so taps miss. On touch-width screens the tap area is
   raised to 44px — for icon buttons by growing the box, for text buttons via a
   min-height, and for checkboxes by enlarging the control and padding its
   label — without changing anything on the desktop, where the pointer is
   precise and the compact sizing is wanted. */
@media (max-width: 640px) {
  .btn { min-height: 44px; }
  .btn.sm { min-height: 40px; padding-top: 0.5rem; padding-bottom: 0.5rem; }
  .icon-btn,
  .avatar,
  .menu-toggle,
  .search-trigger { min-width: 44px; min-height: 44px; }
  /* checkboxes: a 14px box is hard to hit — enlarge it and give the row height */
  input[type="checkbox"],
  input[type="checkbox"].chk { width: 20px; height: 20px; }
  .uc-item,
  label.switch-row { min-height: 44px; }
  /* tabs and chips get finger room too */
  .tab { padding-top: 0.75rem; padding-bottom: 0.75rem; }
  .fin-scope .chip,
  .company-switch select { min-height: 40px; }
  /* table action buttons sit in tight rows — keep them reachable */
  table.grid .btn.sm { min-height: 38px; }
}

/* ---- responsive table cards (v2.76) ----
   Below 640px a wide grid table restructures into one card per row. The header
   row is hidden and each cell becomes a "label: value" line, the label coming
   from the data-label that labelizeTable() copied off the header. Only tables
   marked .cards-on-mobile opt in, so tables that are already narrow or have
   their own small-screen handling are untouched. Desktop is unaffected — this
   whole block is inside the mobile media query. */
@media (max-width: 640px) {
  table.grid.cards-on-mobile { display: block; }
  table.grid.cards-on-mobile thead { display: none; }
  table.grid.cards-on-mobile tbody { display: block; }
  table.grid.cards-on-mobile tr {
    display: block;
    background: var(--layer-1);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-2);
  }
  /* skeleton and empty-state rows must not get the card treatment */
  table.grid.cards-on-mobile tr.skeleton-row,
  table.grid.cards-on-mobile tr:has(.empty-state) {
    background: none; border: none; padding: 0; margin: 0;
  }
  table.grid.cards-on-mobile td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-1) 0;
    border: none;
    text-align: right;
  }
  /* the label sits on the left, from the copied header text */
  table.grid.cards-on-mobile td[data-label]::before {
    content: attr(data-label);
    color: var(--text-3);
    font-size: 0.7rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-align: left;
    flex: none;
  }
  /* the primary cell (name/number) reads as the card title, full width */
  table.grid.cards-on-mobile td.primary-cell {
    display: block;
    text-align: left;
    font-size: 0.95rem;
    padding-bottom: var(--space-2);
    margin-bottom: var(--space-1);
    border-bottom: 1px solid var(--border-subtle);
  }
  table.grid.cards-on-mobile td.primary-cell::before { display: none; }
  /* hide the empty trailing action cell and the select checkbox cell as labels */
  table.grid.cards-on-mobile td:empty { display: none; }
}

/* actionable links in the dashboard greeting sub-line */
.hs-link { color: var(--blue, #2f6bff); text-decoration: none; border-bottom: 1px dashed color-mix(in srgb, var(--blue, #2f6bff) 50%, transparent); cursor: pointer; }
.hs-link:hover { border-bottom-style: solid; }

/* action center (v4.0) */
.ac-groups { display: flex; flex-direction: column; }
.ac-group { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.75rem 1rem;
  background: transparent; border: none; border-top: 1px solid var(--line, #23262d); cursor: pointer; text-align: left; color: inherit; font: inherit; }
.ac-group:first-child { border-top: none; }
.ac-group:hover { background: var(--surface-2, rgba(255,255,255,0.03)); }
.ac-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.ac-dot.blue { background: var(--blue, #2f6bff); }
.ac-dot.red { background: var(--red, #e0533f); }
.ac-dot.amber { background: var(--amber, #e0922f); }
.ac-dot.purple { background: var(--purple, #8b5cf6); }
.ac-dot.teal { background: var(--teal, #0c9c8b); }
.ac-label { flex: 1 1 auto; font-size: 0.875rem; }
.ac-count { font-family: var(--mono); font-size: 0.8125rem; color: var(--text-2); background: var(--surface-2, rgba(255,255,255,0.05)); border-radius: 10px; padding: 0.1rem 0.5rem; }
.ac-arrow { color: var(--text-3); font-size: 1rem; }

/* command palette (Ctrl/Cmd-K) */
.cp-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); display: none; z-index: 200; align-items: flex-start; justify-content: center; }
.cp-overlay.open { display: flex; }
.cp-box { width: min(560px, 92vw); margin-top: 12vh; background: var(--surface-1, #16181d); border: 1px solid var(--line, #2a2e37); border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); overflow: hidden; }
.cp-input { width: 100%; border: none; background: transparent; color: var(--text-1, #e6e9ef); font-size: 1rem; padding: 1rem 1.1rem; outline: none; border-bottom: 1px solid var(--line, #2a2e37); }
.cp-list { max-height: 46vh; overflow: auto; }
.cp-item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.65rem 1.1rem; cursor: pointer; }
.cp-item.sel { background: var(--blue, #2f6bff); }
.cp-item.sel .cp-kind { color: rgba(255,255,255,0.8); }
.cp-item.sel .cp-label { color: #fff; }
.cp-label { font-size: 0.875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-kind { font-size: 0.6875rem; color: var(--text-3, #8a8f99); text-transform: uppercase; letter-spacing: 0.04em; flex: 0 0 auto; }
.cp-empty { padding: 1.1rem; font-size: 0.875rem; }
.cp-hint { padding: 0.5rem 1.1rem; font-size: 0.6875rem; color: var(--text-3, #8a8f99); border-top: 1px solid var(--line, #2a2e37); }

/* ============================================================
   MOBILE OPTIMISATION (v4.5)
   Card-stacking of .cards-on-mobile grids already exists (v2.76), and
   touch-target sizing in the v2.75 640px block. This block layers on
   the rest: stacked toolbars/card-heads, full-width filters, a
   thumb-reachable fixed bulk bar, single-column KPIs, horizontally
   scrolling report tabs, and small-screen tuning for the newer
   action-center and command-palette. Stacked-row action cells are
   refined so row buttons wrap and stay tappable. All bills/projects/
   recurring lists now opt into cards-on-mobile and are auto-labelised
   by a MutationObserver, so their rows stack as cards too.
   ============================================================ */
@media (max-width: 640px) {

  /* --- refine stacked-row action cells (buttons wrap, stay tappable) ---
     (touch-target sizing itself is handled by the v2.75 640px block above) */
  table.grid.cards-on-mobile td:last-child { flex-wrap: wrap; justify-content: flex-start; }
  table.grid.cards-on-mobile td:last-child::before { display: none; }

  /* --- toolbars & filters stack full width --- */
  .toolbar { flex-wrap: wrap; gap: 0.5rem; }
  .toolbar .input, .toolbar .select { flex: 1 1 100%; width: 100%; }
  .card-head { flex-wrap: wrap; gap: 0.6rem; }

  /* --- action center rows a touch taller --- */
  .ac-group { padding: 0.9rem 1rem; }

  /* --- command palette fills the screen better --- */
  .cp-box { width: 96vw; margin-top: 6vh; }
  .cp-list { max-height: 60vh; }

  /* --- bulk bar sticks to the bottom, thumb-reachable --- */
  .bulk-bar:not([hidden]) {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    border-radius: 0; border-top: 1px solid var(--line, #23262d);
    flex-wrap: wrap; gap: 0.4rem; padding: 0.6rem 0.8rem;
    margin-bottom: 0;
    background: var(--layer-1, #1b202b);
    box-shadow: 0 -4px 16px rgba(0,0,0,0.3);
  }
  .bulk-bar .btn { flex: 1 1 auto; }

  /* --- KPI cards one per row on the smallest screens --- */
  .kpi-grid { grid-template-columns: 1fr !important; }

  /* --- reports tabs scroll horizontally instead of wrapping --- */
  .report-tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .report-tabs .tab { flex: 0 0 auto; white-space: nowrap; }

  /* --- page padding tighter --- */
  .page { padding: 0.85rem 0.85rem 5rem; }
}

/* report charts (v4.7) */
.rep-chart { padding: 0.75rem 1rem 0.25rem; }
.rep-chart svg { display: block; }
.rep-bar { transition: opacity 0.1s; }
.rep-bar:hover { opacity: 0.8; }
.rep-bucket-bar { padding: 0 0 0.5rem; }
.rep-stack { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: var(--layer-2, #1b202b); }
.rep-seg { display: block; height: 100%; }
.rep-legend { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; margin-top: 0.5rem; }
.rep-leg-item { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.72rem; color: var(--text-2, #9aa3b2); }
.rep-leg-dot { width: 8px; height: 8px; border-radius: 2px; flex: 0 0 auto; }

/* list pager (v5.3) */
.pager { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 0.9rem 0; }
.pager-info { font-size: 0.8125rem; color: var(--text-2, #9aa3b2); min-width: 8rem; text-align: center; }
.pager .btn[disabled] { opacity: 0.4; pointer-events: none; }

/* e-invoice validation (v5.5) */
.ev-head { font-size: 0.8rem; font-weight: 600; margin: 0.5rem 0 0.35rem; }
.ev-head-error { color: var(--red, #e0533f); }
.ev-head-warn { color: var(--amber, #e0922f); }
.ev-list { list-style: none; margin: 0 0 0.5rem; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.ev-item { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.8125rem; line-height: 1.35; }
.ev-dot { width: 7px; height: 7px; border-radius: 50%; margin-top: 0.35rem; flex: 0 0 auto; }
.ev-error .ev-dot { background: var(--red, #e0533f); }
.ev-warn .ev-dot { background: var(--amber, #e0922f); }
.ev-code { font-family: var(--mono); font-size: 0.625rem; color: var(--text-3); letter-spacing: 0.04em; }

/* e-invoice status tags (v5.6) */
.ei-tag { font-size: 0.5625rem; letter-spacing: 0.05em; }
.ei-generated { background: rgba(47,107,255,0.15); color: var(--blue, #2f6bff); }
.ei-sent { background: rgba(224,146,47,0.15); color: var(--amber, #e0922f); }
.ei-reported { background: rgba(12,156,139,0.15); color: var(--teal, #0c9c8b); }

/* e-invoice exemption tag (v5.7) */
.ei-exempt-tag { background: rgba(139,147,167,0.15); color: var(--text-2, #9aa3b2); }

/* Accountant role (v6.0) — a finance-only login sees documents and exports,
   not the CRM/operations pages. Nav items are hidden by their href. */
body[data-role="accountant"] .nav-item[href="customers.php"],
body[data-role="accountant"] .nav-item[href="pipeline.php"],
body[data-role="accountant"] .nav-item[href="quotes.php"],
body[data-role="accountant"] .nav-item[href="projects.php"],
body[data-role="accountant"] .nav-item[href="timesheets.php"],
body[data-role="accountant"] .nav-item[href="recurring-invoices.php"],
body[data-role="accountant"] .nav-item[href="purchase-orders.php"],
body[data-role="accountant"] .nav-item[href="suppliers.php"],
body[data-role="accountant"] .nav-item[href="sklad.php"],
body[data-role="accountant"] .nav-item[href="capacity.php"],
body[data-role="accountant"] .nav-item[href="forecast.php"],
body[data-role="accountant"] .nav-item[href="admin-users.php"],
body[data-role="accountant"] .nav-item[href="admin-settings.php"] {
  display: none;
}

/* Document intake review (v7.5.1) */
.intake-layout { display: grid; grid-template-columns: 340px 1fr; gap: 1rem; align-items: start; }
.intake-queue { position: sticky; top: 1rem; }
.intake-row { display: block; width: 100%; text-align: left; border: 0; background: none;
  padding: 0.7rem 1rem; border-bottom: 1px solid var(--line, #262626); cursor: pointer; color: inherit; }
.intake-row:hover { background: rgba(255,255,255,0.03); }
.intake-row.active { background: rgba(47,107,255,0.12); }
.intake-row .ir-top { display: flex; justify-content: space-between; gap: 0.5rem; align-items: baseline; }
.intake-row .ir-name { font-weight: 600; font-size: 0.85rem; }
.intake-row .ir-amount { font-variant-numeric: tabular-nums; font-size: 0.8rem; }
.intake-row .ir-sub { font-size: 0.72rem; color: var(--text-2, #9aa3b2); margin-top: 0.15rem; }
.intake-split { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; align-items: start; }
.intake-pdf { display: flex; flex-direction: column; height: 72vh; }
.intake-pdf iframe { flex: 1; border-radius: 8px; }
.intake-flag { display: flex; gap: 0.5rem; align-items: flex-start; padding: 0.6rem 0.8rem;
  border-radius: 8px; margin-bottom: 0.5rem; font-size: 0.8rem; line-height: 1.4; }
.intake-flag.block { background: rgba(224,83,63,0.12); border: 1px solid rgba(224,83,63,0.35); }
.intake-flag.warn { background: rgba(224,146,47,0.12); border: 1px solid rgba(224,146,47,0.3); }
.intake-flag .if-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 0.35rem; flex: 0 0 auto; }
.intake-flag.block .if-dot { background: var(--red, #e0533f); }
.intake-flag.warn .if-dot { background: var(--amber, #e0922f); }
.intake-form .field input.changed { border-color: var(--amber, #e0922f); }

@media (max-width: 900px) {
  .intake-layout { grid-template-columns: 1fr; }
  .intake-queue { position: static; }
  .intake-split { grid-template-columns: 1fr; display: flex; flex-direction: column; }
  /* on a phone the reviewer works from the values and only checks the PDF when
     needed, so put the form first and drop the PDF below it, compact. */
  .intake-split .intake-form { order: 1; }
  .intake-split .intake-pdf { order: 2; height: 46vh; }
  /* big, thumb-friendly action buttons on the phone */
  .intake-form .row .btn { flex: 1 1 100%; padding-top: 0.7rem; padding-bottom: 0.7rem; }
}

/* Intake feedback controls (v7.6.0) */
.reason-ctl { display: flex; gap: 0.4rem; margin-top: 0.35rem; }
.reason-ctl .reason-sel { flex: 0 0 auto; font-size: 0.75rem; }
.reason-ctl .reason-note { flex: 1; font-size: 0.75rem; }
.intake-flag .flag-wrong { flex: 0 0 auto; font-size: 0.7rem; opacity: 0.75; }
.intake-flag .flag-wrong:hover { opacity: 1; }

/* rule-provenance (info) flag — v7.7.0 */
.intake-flag.info { background: rgba(47,107,255,0.08); border: 1px solid rgba(47,107,255,0.25); }
.intake-flag.info .if-dot { background: var(--blue, #2f6bff); }

/* worker status strip (v7.9.0) */
.intake-status { border-radius: 10px; padding: 0.7rem 1rem; margin-bottom: 1rem; border: 1px solid var(--line, #262626); }
.intake-status.ok { background: rgba(12,156,139,0.08); border-color: rgba(12,156,139,0.3); }
.intake-status.paused { background: rgba(224,146,47,0.08); border-color: rgba(224,146,47,0.3); }
.intake-status.error, .intake-status.stale { background: rgba(224,83,63,0.09); border-color: rgba(224,83,63,0.35); }
.intake-status .iss-line { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; font-size: 0.85rem; }
.intake-status .iss-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.intake-status.ok .iss-dot { background: var(--teal, #08bdba); }
.intake-status.paused .iss-dot { background: var(--amber, #e0922f); }
.intake-status.error .iss-dot, .intake-status.stale .iss-dot { background: var(--red, #e0533f); }
.intake-status-notes { margin-top: 0.4rem; font-size: 0.78rem; color: var(--red, #e0533f); }

/* intake queue: at-a-glance block reason + tab layout (v7.9.4) */
.intake-row .ir-why { margin-top: 0.3rem; font-size: 0.72rem; line-height: 1.35; color: var(--red, #e0533f); }
.intake-row.is-blocked { border-left: 2px solid var(--red, #e0533f); }
section.itab[hidden] { display: none !important; }

/* intake detail empty state (v7.9.7) */
.intake-empty { display: flex; align-items: center; justify-content: center; min-height: 40vh; }
.intake-empty[hidden] { display: none !important; }
.intake-empty-inner { text-align: center; max-width: 20rem; color: var(--text-3); }
.intake-empty-inner p { margin-top: 0.75rem; font-size: 0.85rem; line-height: 1.5; }

/* in-app notifications (v7.13.0) */
.notif-item.unread { border-left: 2px solid var(--blue, #2f6bff); }
.badge-dot { display: none; }

/* Safe-area insets for notched iPhones in the installed PWA / native shell (B4).
   env() is 0 in a normal browser (no visual change) and non-zero on a notch, so
   content clears the status bar and the home indicator. viewport-fit=cover in the
   page head is what exposes these insets. */
.topbar { padding-top: env(safe-area-inset-top, 0px); height: calc(var(--topbar-h) + env(safe-area-inset-top, 0px)); box-sizing: border-box; }
.sidebar { padding-top: env(safe-area-inset-top, 0px); }
.main { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
.page { padding-bottom: calc(3rem + env(safe-area-inset-bottom, 0px)); }
body.login-page { padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); box-sizing: border-box; }
@media (max-width: 900px) {
  /* the mobile drawer and its scrim already cover the screen; keep the drawer's
     content below the notch too */
  .sidebar { padding-top: env(safe-area-inset-top, 0px); }
}

/* Face ID lock overlay — native app only (B1) */
.faceid-lock { position: fixed; inset: 0; z-index: 9999; background: var(--bg, #0b0b0b);
  display: flex; align-items: center; justify-content: center;
  padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
.faceid-lock .fl-inner { text-align: center; }
.faceid-lock .fl-logo { font-weight: 700; letter-spacing: 0.04em; font-size: 1.4rem; margin-bottom: 1.25rem; }

/* configurable dashboard — customize panel (v7.42) */
.btn.xs { padding: 0.1rem 0.4rem; font-size: 0.7rem; line-height: 1.4; }
.dash-cfg { display: flex; flex-direction: column; gap: 0.5rem; }
.dash-cfg-sec { font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-2); margin-top: 0.4rem; }
.dash-cfg-row { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; cursor: pointer; }
.dash-cfg-order { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.dash-cfg-order li { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.35rem 0.5rem; border: 1px solid var(--border-subtle); border-radius: 4px; font-size: 0.85rem; }
.dash-cfg-move { display: inline-flex; gap: 0.25rem; }

/* Partner detail — linked role rows (Fáza B/D). A clean divided list that
   drops its trailing border, instead of inline per-row styling. */
.pd-role-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-2) 0; border-bottom: 1px solid var(--border); }
.pd-role-row:first-child { padding-top: 0; }
.pd-role-row:last-child { border-bottom: none; padding-bottom: 0; }

/* Touch targets (audit, low priority): on phones, bring small interactive
   controls up toward the ~44px recommendation so they're comfortable to tap.
   Desktop is untouched — this block is inside the phone media query. */
@media (max-width: 640px) {
  .nav-item { min-height: 44px; }
  .lang-btn { min-height: 36px; display: inline-flex; align-items: center; }
  .seg-btn { min-height: 40px; display: inline-flex; align-items: center; }
  .leg-item { min-height: 36px; }
  .pager button { min-height: 40px; min-width: 40px; }
  .card-head .link { min-height: 36px; display: inline-flex; align-items: center; }
}

/* Skip-to-content link (WCAG 2.4.1): hidden until a keyboard user tabs to it,
   then it appears top-left to jump past the sidebar/topbar into the page. */
.skip-link {
  position: fixed; top: -60px; left: var(--space-2); z-index: 200;
  background: var(--blue); color: #fff; font-size: 0.8125rem; font-weight: 600;
  padding: var(--space-2) var(--space-4); border-radius: 6px; text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus { top: var(--space-2); outline: 2px solid #fff; outline-offset: 2px; }