/* OMF DWH Portal — LIGHT theme for operating platform.
 *
 * Brand DNA preserved (teal accent, navy ink, Inter+Lora fonts, pill buttons,
 * teal radial glow accents) but on light surface for daily CFO work —
 * Excel/Power BI-grade readability.
 *
 * Design rule: marketing web = dark/dramatic. Operating platform = light/calm.
 */

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

:root {
  /* OMF brand palette — locked, identical hex values to onemanfinance.com */
  --navy:        #1E293B;       /* primary "ink" — text, headings, important numbers */
  --navy-light:  #334155;
  --navy-deep:   #0F172A;       /* used sparingly — emphasis, hover */
  --teal:        #2EC4B6;       /* brand accent — CTAs, links, active, status-ok */
  --teal-dark:   #25A89C;
  --teal-glow:   rgba(46, 196, 182, 0.10);
  --teal-border: rgba(46, 196, 182, 0.35);
  --coral:       #E17055;       /* warnings, overdue, errors */
  --coral-glow:  rgba(225, 112, 85, 0.10);
  --coral-border:rgba(225, 112, 85, 0.30);

  /* Surfaces (light theme) */
  --bg:        #F8FAFC;          /* page background */
  --surface:   #FFFFFF;          /* cards, topbar, dialogs */
  --surface-2: #F1F5F9;          /* subtle alt rows, hover backgrounds */
  --line:      #E2E8F0;          /* borders, dividers */
  --line-soft: #EDF1F5;          /* very subtle borders */

  /* Text on light surface */
  --ink:        var(--navy);     /* primary text */
  --ink-muted:  #475569;         /* secondary text */
  --ink-soft:   #64748B;         /* labels, captions */
  --ink-faint:  #94A3B8;         /* placeholders, disabled */

  /* Semantic (kept for status colors throughout) */
  --pos: var(--teal);            /* positive = brand teal */
  --neg: var(--coral);           /* negative = brand coral */
  --warn:#B45309;                /* amber for warnings on light bg */

  /* Shadows — subtle on light, never harsh */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.08), 0 4px 8px rgba(15, 23, 42, 0.04);
}

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

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: var(--teal-dark); text-decoration: none; transition: color 0.15s; }
a:hover { color: var(--navy); }

.muted { color: var(--ink-soft); }

code {
  background: var(--surface-2);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.9em;
  font-family: ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;
  color: var(--navy);
  border: 1px solid var(--line);
}

/* ─────────── Top bar ─────────── */
.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: 0.85rem 2rem;
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 100;
  box-shadow: var(--shadow-xs);
}
.brand { display: flex; align-items: center; height: 36px; }
.brand img { height: 100%; width: auto; display: block; }
.brand:hover { text-decoration: none; }

.product-tag {
  margin-left: 14px;
  padding-left: 14px;
  border-left: 1px solid var(--line);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}

.topbar-nav { display: flex; align-items: center; gap: 1.4rem; font-size: 0.9rem; }
.topbar-nav a { color: var(--ink-muted); font-weight: 500; }
.topbar-nav a:hover { color: var(--teal-dark); text-decoration: none; }
.topbar-nav .muted { color: var(--ink-faint); }

/* ─────────── Buttons (pill shape — brand DNA) ─────────── */
.btn-primary, .btn-ghost {
  display: inline-block;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.92rem;
  padding: 0.65rem 1.4rem;
  border-radius: 100px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.18s;
  text-decoration: none;
  letter-spacing: 0.005em;
  white-space: nowrap;
}
.btn-primary {
  background: var(--teal);
  color: var(--surface);
  border-color: var(--teal);
}
.btn-primary:hover {
  background: var(--teal-dark);
  border-color: var(--teal-dark);
  color: var(--surface);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(46, 196, 182, 0.30);
}
.btn-ghost {
  background: var(--surface);
  color: var(--navy);
  border-color: var(--line);
}
.btn-ghost:hover {
  background: var(--surface-2);
  border-color: var(--teal);
  color: var(--teal-dark);
  text-decoration: none;
}
.btn-lg { padding: 0.85rem 1.8rem; font-size: 0.98rem; }
.btn-block { display: block; width: 100%; margin-top: 1rem; text-align: center; }

/* F9.3 (Petr 2026-05-08): Manual Save button — three states.
   Clean: disabled, gray ghost. Dirty: enabled, vivid green with badge count.
   Saving: spinner-like opacity pulse. */
.btn-save-builder {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.92rem;
  padding: 0.65rem 1.2rem;
  border-radius: 100px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.18s;
  white-space: nowrap;
  letter-spacing: 0.005em;
}
.btn-save-builder.is-clean {
  background: #f1f5f9;
  color: #94a3b8;
  border-color: #e2e8f0;
  cursor: not-allowed;
}
.btn-save-builder.is-dirty {
  background: #10b981;       /* emerald-500 */
  color: #ffffff;
  border-color: #059669;     /* emerald-600 */
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35);
  animation: save-btn-pulse 2.2s ease-in-out infinite;
}
.btn-save-builder.is-dirty:hover {
  background: #059669;
  border-color: #047857;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(16, 185, 129, 0.45);
}
.btn-save-builder.is-saving {
  opacity: 0.7;
  cursor: wait;
  animation: none;
}
.btn-save-builder .save-btn-icon { font-size: 1.05em; line-height: 1; }
.btn-save-builder .save-btn-badge {
  display: inline-block;
  background: rgba(255,255,255,0.28);
  color: #ffffff;
  border-radius: 100px;
  padding: 1px 8px;
  font-size: 0.78em;
  font-weight: 700;
  min-width: 22px;
  text-align: center;
}
@keyframes save-btn-pulse {
  0%, 100% { box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35); }
  50%      { box-shadow: 0 6px 20px rgba(16, 185, 129, 0.55); }
}

/* Live Preview stale state — when pending changes mean the right-side preview
   no longer reflects what's in the canvas. Grayscaled + "uložte" overlay. */
#live-preview.is-stale {
  position: relative;
  filter: grayscale(0.55) opacity(0.55);
  pointer-events: none;
}
#live-preview.is-stale::before {
  content: "Náhled zastaralý — klikni \"Uložit\" pro aktualizaci";
  position: absolute;
  top: 0; left: 0; right: 0;
  background: #fef3c7;       /* amber-100 */
  color: #92400e;            /* amber-800 */
  border-bottom: 1px solid #fbbf24;
  padding: 6px 10px;
  font-size: 0.75rem;
  font-weight: 700;
  text-align: center;
  pointer-events: auto;
  filter: grayscale(0) opacity(1.82);   /* counter parent's grayscale */
  z-index: 10;
}

/* F10.0 (Petr 2026-05-09 night): P&L Insights grid — 6 quadrant tiles + monthly P&L table.
   Generic across firmy. Inline SVG charts, no JS. */
.pl-insights {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.insights-header { margin-bottom: 1rem; }
.insights-header h2 { margin: 0 0 0.2rem; font-size: 1.4rem; }

.insights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 1rem;
}

.insight-tile {
  background: var(--surface, #fff);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-height: 220px;
}
.insight-tile .tile-header { display: flex; flex-direction: column; gap: 0.3rem; }
.insight-tile h3 { margin: 0; font-size: 1rem; font-weight: 700; }
.insight-tile .tile-kpis { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: baseline; font-size: 0.82rem; }
.insight-tile .kpi { display: inline-flex; gap: 0.25rem; align-items: baseline; }
.insight-tile .kpi strong { font-size: 1rem; }
.insight-tile .kpi-delta {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 100px;
  font-weight: 700;
  font-size: 0.78rem;
}
.insight-tile .kpi-delta.pos { background: #d1fae5; color: #065f46; }
.insight-tile .kpi-delta.neg { background: #fee2e2; color: #991b1b; }
.insight-tile .tile-footer { font-size: 0.75rem; margin: 0.3rem 0 0; }

/* Cost structure — bar list */
.cost-bars-table { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.cost-bars-table td { padding: 4px 6px; vertical-align: middle; }
.cost-bars-label { white-space: nowrap; }
.cost-bars-bar { width: 50%; }
.cost-bar-track { background: #f1f5f9; height: 10px; border-radius: 5px; overflow: hidden; }
.cost-bar-fill { background: linear-gradient(90deg, var(--teal-dark, #0d9488) 0%, var(--teal, #14b8a6) 100%); height: 100%; }
.cost-bars-amount { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.cost-bars-pct { text-align: right; width: 40px; font-variant-numeric: tabular-nums; }

/* Top partners table */
.partners-table { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.partners-table th { text-align: left; padding: 4px 6px; border-bottom: 1px solid var(--line); font-weight: 600; color: var(--ink-medium); }
.partners-table th.num, .partners-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.partners-table td { padding: 5px 6px; border-bottom: 1px solid #f1f5f9; }
.partners-table tr:last-child td { border-bottom: none; }
.partners-table .partner-name { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Monthly P&L table — full width below tiles
   F11 (Petr 2026-05-09): table-layout fixed + uniform column widths.
   Layout: row-label 140px + 12 month-cols (uniform) + 3 ytd-cols.
   Total: 16 columns. Use colgroup-like fixed widths via nth-child + class. */
.monthly-pl-section { margin-top: 1.5rem; }
.monthly-pl-section h3 {
  margin: 0 0 0.6rem; font-size: 1.05rem;
  display: flex; align-items: center; gap: 0.5rem;
}
.monthly-pl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.monthly-pl-table {
  width: 100%; border-collapse: collapse; font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  table-layout: fixed;       /* F11: enforce uniform column widths */
  min-width: 1100px;         /* horizontal scroll on narrow screens */
}
.monthly-pl-table th, .monthly-pl-table td {
  padding: 6px 6px; border-bottom: 1px solid #f1f5f9;
  overflow: hidden; text-overflow: ellipsis;
}
.monthly-pl-table thead th {
  background: #f8fafc; font-weight: 700; color: var(--ink-medium);
  position: sticky; top: 0;
  font-size: 0.72rem; line-height: 1.2;
}
.monthly-pl-table th.num, .monthly-pl-table td.num { text-align: right; }

/* Column widths — fixed layout requires explicit widths */
.monthly-pl-table .row-label {
  font-weight: 600; white-space: nowrap; text-align: left;
  width: 130px; min-width: 130px;
}
.monthly-pl-table .month-col   { width: 56px; }    /* 12× = 672px */
.monthly-pl-table .ytd-col     { width: 80px; background: #f0fdfa; font-weight: 700; border-left: 1px solid var(--line); }
.monthly-pl-table .ytd-py      { background: #f8fafc; font-weight: 600; color: var(--ink-muted); }
.monthly-pl-table .ytd-delta   { background: #fefce8; }
/* thead PY/Δ columns — header doesn't have body classes; use sibling selector */
.monthly-pl-table thead th.ytd-col + .ytd-col              { background: #f8fafc; color: var(--ink-muted); }
.monthly-pl-table thead th.ytd-col + .ytd-col + .ytd-col   { background: #fefce8; }
.monthly-pl-table .ytd-sub {
  display: block; font-size: 0.62rem; font-weight: 500;
  color: var(--ink-muted); letter-spacing: 0.04em;
}

/* Selected month column highlight (matches slicer above) */
.monthly-pl-table .is-selected-month {
  background: rgba(46, 196, 182, 0.08);
  font-weight: 700;
}
.monthly-pl-table thead th.is-selected-month {
  background: rgba(46, 196, 182, 0.18);
  color: var(--teal-dark, #1ea99e);
}

/* Subtotal rows (Σ Marže/EBITDA/EBIT) — match P&L table styling */
.monthly-pl-table tr.is-subtotal { background: rgba(46, 196, 182, 0.07); font-weight: 700; }
.monthly-pl-table tr.is-subtotal td.row-label { color: var(--teal-dark, #1ea99e); }
.monthly-pl-table tr.is-subtotal td { border-top: 1px solid var(--teal-border, #5eead4); }
/* Subtotal row keeps selected-month tint blended */
.monthly-pl-table tr.is-subtotal td.is-selected-month {
  background: rgba(46, 196, 182, 0.18);
}

/* Δ% trend coloring (uses .trend.pos/.neg from P&L table) */
.monthly-pl-table .ytd-delta .trend.pos { color: var(--teal-dark, #1ea99e); font-weight: 700; }
.monthly-pl-table .ytd-delta .trend.neg { color: var(--coral, #E17055); font-weight: 700; }

.monthly-pl-table .neg { color: #dc2626; }

/* F12.B: drillable cells in monthly P&L (Petr 2026-05-09 review feedback —
   "monthly P&L potřebuje drill down stejně jako hlavní P&L"). */
.monthly-pl-table td.is-drillable {
  position: relative;
  transition: background 0.12s, box-shadow 0.12s;
}
.monthly-pl-table td.is-drillable:hover {
  background: rgba(46, 196, 182, 0.18) !important;
  box-shadow: inset 0 0 0 1px var(--teal-dark, #1ea99e);
}
.monthly-pl-table td.is-drillable.ytd-col:hover {
  background: rgba(46, 196, 182, 0.22) !important;
}

/* Line chart inline SVG sizing */
.line-chart { display: block; max-width: 100%; height: auto; }
.line-chart-wrap { position: relative; width: 100%; }

/* F10.3: chart points hover state + custom tooltip overlay */
.chart-point {
  cursor: pointer;
}
/* F12.A (Petr 2026-05-09): hitzone is invisible ellipse, no visual hover effect.
   Visible AC dot has its own circle (no chart-point class, pointer-events:none).
   Hover scaling effect from F10.3 removed — was buggy on hitzone (ellipse rx/ry
   doesn't animate via `r:7`) and added unnecessary visual noise. Tooltip itself
   is the hover feedback. */
.chart-hitzone {
  fill: transparent;
}
.chart-tooltip {
  position: absolute;
  pointer-events: none;
  background: #0f172a;
  color: #f8fafc;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.78rem;
  font-family: Inter, system-ui, sans-serif;
  box-shadow: 0 6px 16px rgba(0,0,0,0.18);
  white-space: nowrap;
  z-index: 100;
  transform: translate(-50%, -110%);
  transition: opacity 0.1s;
}
.chart-tooltip[hidden] { display: none; }
.chart-tooltip strong { color: #fff; font-weight: 700; }
.chart-tooltip .tt-month { font-weight: 700; margin-bottom: 2px; }
.chart-tooltip .tt-line { display: flex; gap: 8px; align-items: baseline; line-height: 1.4; }
.chart-tooltip .tt-label { color: #94a3b8; min-width: 28px; }
.chart-tooltip .tt-value { color: #fff; font-weight: 600; }
.chart-tooltip .tt-delta { font-size: 0.72rem; padding: 1px 6px; border-radius: 100px; margin-top: 4px; display: inline-block; }
.chart-tooltip .tt-delta.pos { background: #d1fae5; color: #065f46; }
.chart-tooltip .tt-delta.neg { background: #fee2e2; color: #991b1b; }

/* Selected month period label badge (above chart KPIs) */
.tile-period-label {
  font-size: 0.72rem;
  background: #f1f5f9;
  color: #475569;
  padding: 2px 8px;
  border-radius: 100px;
  font-weight: 600;
  margin-left: 4px;
}

/* F9.4: "↶ Zrušit změny" — discreet ghost button next to Save.
   Less prominent than Save (gray text, no fill), but visible enough to find. */
.btn-cancel-changes {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: inherit;
  font-weight: 500;
  font-size: 0.86rem;
  padding: 0.55rem 0.95rem;
  border-radius: 100px;
  background: transparent;
  color: var(--ink-medium);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.btn-cancel-changes:hover {
  background: #fef3c7;
  color: #92400e;
  border-color: #fbbf24;
}

/* Form label hint — small inline "(volitelné)" badge */
.form-label-hint {
  font-size: 0.75rem;
  color: var(--ink-soft);
  font-weight: 400;
  margin-left: 4px;
}

/* ─────────── Container & footer ─────────── */
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
  flex: 1;
  width: 100%;
}
.footer {
  padding: 1.2rem 2rem;
  border-top: 1px solid var(--line);
  background: var(--surface);
  font-size: 0.78rem;
  color: var(--ink-soft);
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.footer .muted { color: var(--ink-faint); }

/* ─────────── Hero (landing — keeps a touch of teal glow) ─────────── */
.hero {
  position: relative;
  padding: 3rem 0 4rem;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  top: -25%; right: -8%;
  width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(46, 196, 182, 0.12) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.hero-content {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 3rem;
  align-items: center;
}
.hero-badge {
  display: inline-block;
  background: var(--teal-glow);
  border: 1px solid var(--teal-border);
  color: var(--teal-dark);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.35rem 0.95rem;
  border-radius: 100px;
  margin-bottom: 1.4rem;
  letter-spacing: 0.04em;
}
.hero h1 {
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  font-weight: 800;
  color: var(--navy);
  line-height: 1.1;
  margin-bottom: 1.4rem;
  letter-spacing: -0.02em;
}
.hero h1 .accent { color: var(--teal); }
.hero p.lead {
  font-size: 1.08rem;
  color: var(--ink-muted);
  line-height: 1.7;
  margin-bottom: 1.8rem;
  max-width: 560px;
}
.hero p.lead strong { color: var(--navy); font-weight: 600; }
.hero p.lead .pain { color: var(--coral); font-weight: 700; }
.hero p.lead .green { color: var(--teal-dark); font-weight: 700; }

.cta-row { display: flex; gap: 0.8rem; align-items: center; }

.hero-quote {
  font-family: 'Lora', Georgia, serif;
  font-style: italic;
  color: var(--teal-dark);
  font-size: 0.92rem;
  line-height: 1.55;
  margin-top: 1.8rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  max-width: 520px;
  opacity: 0.85;
}

.hero-stats {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.5rem;
  display: grid;
  gap: 0.9rem;
  box-shadow: var(--shadow-sm);
}
.stat-card {
  padding: 0.7rem 0.9rem;
  background: var(--surface-2);
  border-left: 3px solid var(--teal);
  border-radius: 6px;
}
.stat-number {
  font-size: 1.85rem; font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.stat-label {
  font-size: 0.8rem;
  color: var(--ink-soft);
  margin-top: 0.2rem;
}

/* ─────────── Features grid ─────────── */
.features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: 2.5rem;
}
.feature {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 1.4rem;
  border-radius: 12px;
  transition: all 0.18s;
  box-shadow: var(--shadow-xs);
}
.feature:hover {
  border-color: var(--teal-border);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.feature h3 {
  font-size: 1.02rem; font-weight: 700;
  margin: 0.7rem 0 0.45rem;
  color: var(--navy);
  letter-spacing: -0.01em;
}
.feature p { margin: 0; font-size: 0.84rem; color: var(--ink-muted); line-height: 1.55; }
.feature-tag {
  display: inline-block;
  background: var(--teal-glow);
  color: var(--teal-dark);
  font-size: 0.62rem;
  letter-spacing: 0.13em;
  padding: 0.22rem 0.65rem;
  border-radius: 100px;
  font-weight: 800;
  border: 1px solid var(--teal-border);
}
.feature-tag-coming {
  background: var(--coral-glow);
  color: var(--coral);
  border-color: var(--coral-border);
}
.feature-coming { opacity: 0.92; }

/* ─────────── Page header ─────────── */
.page-header {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 1.8rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--line);
  gap: 1rem;
}
.page-header h1 {
  margin: 0 0 0.25rem;
  font-size: 1.65rem; font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.02em;
}
.page-header .muted { font-size: 0.88rem; margin: 0; color: var(--ink-soft); }

/* ─────────── Client grid (logged-in home) ─────────── */
.client-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 1rem;
}
.client-card {
  display: block;
  background: var(--surface);
  padding: 1.3rem 1.4rem;
  border-radius: 12px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--teal);
  color: var(--ink);
  transition: all 0.18s;
  box-shadow: var(--shadow-xs);
}
.client-card:hover {
  border-color: var(--teal-border);
  border-left-color: var(--teal);
  transform: translateY(-2px);
  text-decoration: none;
  box-shadow: var(--shadow-md);
}
.client-name { font-size: 1.05rem; font-weight: 700; color: var(--navy); }
.client-slug { font-size: 0.7rem; color: var(--ink-faint); margin-top: 0.15rem; font-family: ui-monospace, "Cascadia Code", Menlo, Consolas, monospace; }
.client-meta { display: flex; align-items: center; gap: 0.7rem; margin-top: 0.95rem; font-size: 0.75rem; }
.client-meta .muted { color: var(--ink-soft); }
.client-stats { font-size: 0.72rem; margin-top: 0.55rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* ─────────── Badges ─────────── */
.badge {
  display: inline-block;
  padding: 0.13rem 0.6rem;
  border-radius: 100px;
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.badge-ok        { background: var(--teal-glow);   color: var(--teal-dark);  border: 1px solid var(--teal-border); }
.badge-error     { background: var(--coral-glow);  color: var(--coral);      border: 1px solid var(--coral-border); }
.badge-none      { background: var(--surface-2);   color: var(--ink-soft);   border: 1px solid var(--line); }
.badge-admin     { background: rgba(124, 58, 237, 0.10); color: #7c3aed; border: 1px solid rgba(124, 58, 237, 0.25); }
.badge-cfo       { background: var(--teal-glow);   color: var(--teal-dark);  border: 1px solid var(--teal-border); }
.badge-end_client{ background: var(--surface-2);   color: var(--ink-soft);   border: 1px solid var(--line); }

/* ─────────── Refresh freshness indicator ───────────
   Used on dashboard header next to "last refresh" timestamp.
   Color cue answers "is this data fresh?" at a glance — instead of forcing
   the user to mentally subtract today's date from "2026-05-05 06:00".
*/
.freshness {
  display: inline-block;
  padding: 0.13rem 0.55rem;
  border-radius: 100px;
  font-size: 0.7rem; font-weight: 600;
  margin-left: 0.4rem;
  letter-spacing: 0.02em;
}
.freshness::before {
  content: "●";
  margin-right: 0.35em;
  font-size: 0.75em;
  vertical-align: 1px;
}
.freshness-fresh { background: rgba(22, 163, 74, 0.10);  color: #15803d; border: 1px solid rgba(22, 163, 74, 0.25); }
.freshness-ok    { background: rgba(101, 163, 13, 0.10); color: #4d7c0f; border: 1px solid rgba(101, 163, 13, 0.25); }
.freshness-stale { background: rgba(245, 158, 11, 0.12); color: #b45309; border: 1px solid rgba(245, 158, 11, 0.30); }
.freshness-old   { background: rgba(220, 38, 38, 0.10);  color: #b91c1c; border: 1px solid rgba(220, 38, 38, 0.25); }
.freshness-na    { background: var(--surface-2);          color: var(--ink-soft); border: 1px solid var(--line); }

/* ─────────── AR mailto reminder button (in aging top table) ─────────── */
.btn-reminder {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 500;
  text-decoration: none;
  background: var(--teal-glow);
  color: var(--teal-dark);
  border: 1px solid var(--teal-border);
  transition: background 0.15s ease, color 0.15s ease;
}
.btn-reminder:hover {
  background: var(--teal);
  color: white;
  text-decoration: none;
}
.btn-reminder:active { transform: translateY(1px); }

/* ─────────── Login card ─────────── */
.login-wrap {
  display: flex; justify-content: center; align-items: flex-start;
  padding-top: 3rem;
  position: relative;
}
.login-wrap::before {
  content: '';
  position: absolute;
  top: 5%; left: 50%; transform: translateX(-50%);
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(46, 196, 182, 0.12) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
}
.login-card {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 2.4rem;
  border-radius: 16px;
  width: 100%;
  max-width: 460px;
  box-shadow: var(--shadow-md);
  position: relative;
}
.login-card h1 {
  font-size: 1.7rem; font-weight: 800;
  margin: 0 0 0.45rem;
  color: var(--navy);
  letter-spacing: -0.02em;
}
.login-card .muted { font-size: 0.9rem; margin-bottom: 1.6rem; color: var(--ink-soft); }

.login-card label {
  display: block;
  font-size: 0.85rem; font-weight: 600;
  margin-bottom: 0.4rem;
  color: var(--ink);
}
.login-card input[type=email] {
  width: 100%;
  padding: 0.7rem 0.95rem;
  font-size: 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  font-family: inherit;
  transition: all 0.15s;
}
.login-card input[type=email]::placeholder { color: var(--ink-faint); }
.login-card input[type=email]:focus {
  outline: none;
  border-color: var(--teal);
  background: var(--surface);
  box-shadow: 0 0 0 3px var(--teal-glow);
}

.alert {
  padding: 0.95rem 1.1rem;
  border-radius: 8px;
  font-size: 0.9rem;
  margin-bottom: 1.4rem;
  border-left: 3px solid;
}
.alert-success {
  background: var(--teal-glow);
  color: var(--teal-dark);
  border-left-color: var(--teal);
}
.alert-error {
  background: var(--coral-glow);
  color: var(--coral);
  border-left-color: var(--coral);
}
.alert strong { color: var(--navy); }

.login-help {
  margin-top: 1.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  font-size: 0.78rem;
  text-align: center;
  color: var(--ink-soft);
}

/* ─────────── Dashboard placeholder + admin table ─────────── */
.placeholder-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--coral);
  padding: 1.8rem;
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}
.placeholder-card h2 { margin-top: 0; color: var(--navy); font-size: 1.1rem; font-weight: 700; }
.placeholder-card ul { padding-left: 1.4rem; margin: 0.9rem 0; }
.placeholder-card li { margin-bottom: 0.45rem; color: var(--ink); }

.admin-table-wrap {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.admin-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.admin-table th {
  text-align: left;
  padding: 0.75rem 1.2rem;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  font-size: 0.68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-soft);
}
.admin-table td {
  padding: 0.85rem 1.2rem;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink);
  vertical-align: middle;
}
.admin-table td strong { color: var(--navy); }
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tr:hover td { background: var(--surface-2); }

.empty-state {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 3rem 2rem;
  border-radius: 12px;
  text-align: center;
  color: var(--ink-soft);
  box-shadow: var(--shadow-sm);
}
.empty-state p { margin: 0.5rem 0; }

/* ─────────── Year selector (HTMX pill row) ─────────── */
.year-selector {
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.year-pills { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.year-pill {
  font-family: inherit;
  font-size: 0.85rem; font-weight: 600;
  padding: 0.4rem 0.95rem;
  border-radius: 100px;
  background: var(--surface);
  color: var(--ink-muted);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: all 0.15s;
  font-variant-numeric: tabular-nums;
}
.year-pill:hover {
  border-color: var(--teal-border);
  color: var(--teal-dark);
}
.year-pill.is-active {
  background: var(--teal);
  color: var(--surface);
  border-color: var(--teal);
}
.year-pill.is-active:hover { background: var(--teal-dark); border-color: var(--teal-dark); color: var(--surface); }
.year-window-info { font-size: 0.78rem; margin-left: auto; }

/* ─────────── KPI grid (top-level dashboard) ─────────── */
.kpi-section { margin-bottom: 2rem; }
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.9rem;
}
.kpi-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.1rem 1.2rem;
  box-shadow: var(--shadow-xs);
  transition: box-shadow 0.15s;
}
.kpi-card:hover { box-shadow: var(--shadow-sm); }
.kpi-card-emphasis {
  border-color: var(--teal-border);
  background: linear-gradient(180deg, rgba(46, 196, 182, 0.04), var(--surface) 60%);
}
.kpi-label {
  font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  margin-bottom: 0.45rem;
}
.kpi-value {
  font-size: 1.7rem; font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.kpi-value.pos { color: var(--teal-dark); }
.kpi-value.neg { color: var(--coral); }
.kpi-unit {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-soft);
  letter-spacing: 0;
}
.kpi-yoy {
  font-size: 0.75rem;
  margin-top: 0.5rem;
  display: flex; align-items: baseline; gap: 0.4rem;
  flex-wrap: wrap;
}
.kpi-yoy .trend.pos { color: var(--teal-dark); font-weight: 700; }
.kpi-yoy .trend.neg { color: var(--coral); font-weight: 700; }

/* ─────────── Aging cards ─────────── */
.aging-section { margin-bottom: 2rem; }
.aging-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.aging-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.4rem;
  box-shadow: var(--shadow-xs);
}
.aging-card-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 0.2rem;
}
.aging-card-head h3 {
  font-size: 1rem; font-weight: 700; margin: 0;
  color: var(--navy);
}
.aging-total {
  font-size: 1.3rem; font-weight: 800;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.aging-meta { font-size: 0.78rem; margin-bottom: 1rem; }
.aging-overdue {
  background: var(--coral-glow);
  border-left: 3px solid var(--coral);
  padding: 0.6rem 0.85rem;
  border-radius: 6px;
  margin-bottom: 1rem;
  display: flex; justify-content: space-between; align-items: center;
}
.aging-overdue .overdue-label { font-size: 0.8rem; font-weight: 600; color: var(--coral); }
.aging-overdue strong { font-variant-numeric: tabular-nums; font-size: 0.95rem; }

.aging-buckets {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.4rem;
}
.aging-bucket {
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  padding: 0.55rem 0.6rem;
  text-align: left;
}
.aging-bucket.is-overdue {
  background: var(--coral-glow);
  border-color: var(--coral-border);
}
.bucket-label {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  font-weight: 600;
  margin-bottom: 0.2rem;
}
.bucket-amount {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.bucket-count { font-size: 0.65rem; margin-top: 0.1rem; }

/* ─────────── Quick links ─────────── */
.quick-links { margin-top: 2rem; }
.quick-link-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.8rem;
}
.quick-link-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.95rem 1.1rem;
  text-decoration: none;
  transition: all 0.15s;
}
.quick-link-card:hover:not(.disabled) {
  border-color: var(--teal-border);
  transform: translateY(-1px);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
}
.quick-link-card strong { display: block; color: var(--navy); font-size: 0.92rem; margin-bottom: 0.2rem; }
.quick-link-card .muted { font-size: 0.74rem; line-height: 1.4; display: block; }
.quick-link-card.disabled { opacity: 0.55; cursor: not-allowed; }

/* ─────────── Page header actions slot ─────────── */
.page-header .header-actions { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }

/* Generic helpers used in templates */
.pos { color: var(--teal-dark); }
.neg { color: var(--coral); }
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ─────────── Cashflow page ─────────── */
.cf-section { margin-bottom: 2.2rem; }

.cash-snapshot { display: grid; grid-template-columns: 1fr 1.4fr; gap: 1rem; align-items: stretch; }
@media (max-width: 900px) { .cash-snapshot { grid-template-columns: 1fr; } }

.cash-total-card {
  background: linear-gradient(135deg, var(--teal) 0%, var(--teal-dark) 100%);
  color: var(--surface);
  padding: 1.6rem;
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; justify-content: center;
}
.cash-total-label {
  font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  opacity: 0.85;
  margin-bottom: 0.5rem;
}
.cash-total-value {
  font-size: 2.6rem; font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}
.cash-total-value .kpi-unit { font-size: 1.1rem; opacity: 0.85; font-weight: 600; }
.cash-total-meta {
  margin-top: 0.7rem;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.85);
}

.cash-accounts {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1rem;
  box-shadow: var(--shadow-xs);
}
.cash-accounts .section-label { padding-left: 0.6rem; }

/* Forecast grid */
.forecast-grid {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.4rem;
  box-shadow: var(--shadow-xs);
}

.forecast-summary {
  display: flex; align-items: stretch; gap: 1rem;
  padding-bottom: 1.2rem;
  margin-bottom: 1.2rem;
  border-bottom: 1px solid var(--line);
}
.fc-stat {
  flex: 1;
  padding: 0.6rem 0.9rem;
  background: var(--surface-2);
  border-radius: 8px;
  border-left: 3px solid var(--line);
}
.fc-stat-emphasis {
  background: var(--teal-glow);
  border-left-color: var(--teal);
}
.fc-stat-arrow {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-faint);
  font-size: 1.5rem;
  background: transparent;
  border: 0;
  padding: 0 0.5rem;
}
.fc-stat-label {
  font-size: 0.7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-soft);
  margin-bottom: 0.3rem;
}
.fc-stat-value {
  font-size: 1.45rem; font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.fc-stat-value.pos { color: var(--teal-dark); }
.fc-stat-value.neg { color: var(--coral); }
.fc-stat-value .kpi-unit { font-size: 0.8rem; color: var(--ink-soft); font-weight: 600; }

.forecast-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.forecast-table th {
  text-align: left;
  padding: 0.7rem 0.9rem;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-soft);
}
.forecast-table th.num { text-align: right; }
.forecast-table td {
  padding: 0.85rem 0.9rem;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink);
  vertical-align: top;
}
.forecast-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.forecast-table td .muted { font-size: 0.72rem; margin-top: 0.15rem; display: block; }
.forecast-table tr:last-child td { border-bottom: none; }
.forecast-table .fc-row-net td       { background: var(--surface-2); }
.forecast-table .fc-row-balance td   { background: var(--teal-glow); font-weight: 700; }

.forecast-method {
  margin-top: 1rem;
  font-size: 0.78rem;
  line-height: 1.5;
}
.forecast-method strong { color: var(--ink); }

/* Risk callouts */
.risk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0.9rem; }
.risk-card {
  padding: 1rem 1.2rem;
  border-radius: 10px;
  border-left: 3px solid;
}
.risk-card strong { color: var(--navy); display: block; margin-bottom: 0.3rem; font-size: 0.95rem; }
.risk-card p { margin: 0; font-size: 0.83rem; line-height: 1.5; }
.risk-warn     { background: var(--coral-glow); border-left-color: var(--coral); }
.risk-critical {
  background: var(--coral-glow);
  border: 2px solid var(--coral);
  border-left-width: 4px;
}

/* ─────────── Section labels (small uppercase teal headings) ─────────── */
.section-label {
  color: var(--teal-dark);
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  margin-bottom: 1rem;
  display: block;
}

/* ─────────── P&L view (Sub-sprint 5.5) ─────────── */
.pl-slicer {
  display: flex; flex-direction: column; gap: 0.6rem;
  margin-bottom: 1.5rem;
  padding: 0.9rem 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  /* F10.4 (Petr 2026-05-09): sticky při scroll dolů, slicer zůstává viditelný.
     top: 76px = nasedá pod topbar (sticky 75px). z-index 90 = pod topbar (100)
     ale nad běžnou content, takže insights/tables se schovají za slicer při scroll. */
  position: sticky;
  top: 76px;
  z-index: 90;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.slicer-row {
  display: flex; align-items: center; gap: 0.75rem;
  flex-wrap: wrap;
}
.month-pills { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.month-pill {
  font-family: inherit;
  font-size: 0.8rem; font-weight: 600;
  padding: 0.3rem 0.65rem;
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink-muted);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: all 0.12s;
  font-variant-numeric: tabular-nums;
  min-width: 36px;
}
.month-pill:hover {
  border-color: var(--teal-border);
  color: var(--teal-dark);
}
.month-pill.is-active {
  background: var(--teal);
  color: var(--surface);
  border-color: var(--teal);
}
.month-pill.is-active:hover {
  background: var(--teal-dark); border-color: var(--teal-dark); color: var(--surface);
}

.pl-tables {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
  align-items: start;
}
.pl-block {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}
.pl-block-head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--line);
  background: var(--surface-soft, #f8fafc);
}
.pl-block-head h2 {
  margin: 0;
  font-size: 1.05rem; font-weight: 700;
  letter-spacing: 0.02em;
}

.pl-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
}
.pl-table thead th {
  text-align: right;
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  position: sticky; top: 0;
}
.pl-table thead th.col-name { text-align: left; }
.pl-table tbody td {
  padding: 0.4rem 0.9rem;
  border-bottom: 1px solid var(--line-soft, #f1f5f9);
}
.pl-table tbody tr:last-child td { border-bottom: none; }
.pl-table tbody tr:hover td { background: var(--surface-soft, #f8fafc); }

/* P&L now has 5 columns: name + AC + PY + YoY abs + % (Sprint 7e2) */
.pl-table .col-name {
  text-align: left;
  width: 28%;
  white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.pl-table .col-amt {
  text-align: right;
  width: 20%;          /* 3× col-amt (AC, PY, YoY abs) = 60% */
  padding-left: 0.5rem; padding-right: 0.7rem;
  font-feature-settings: "tnum";
}
.pl-table .col-yoy {
  text-align: right;
  width: 12%;          /* % column — short, 5-7 chars max ("+123.4 %") */
  padding-left: 0.5rem; padding-right: 0.7rem;
}
.pl-table thead th { padding-left: 0.5rem; padding-right: 0.7rem; }
.pl-table .col-unit {
  font-size: 0.65rem;
  font-weight: 500;
  margin-left: 2px;
  letter-spacing: 0.04em;
}
/* Block head with subtitle (scale info) */
.pl-block-head { flex-direction: row; flex-wrap: wrap; gap: 0.5rem 1rem; }
.pl-block-head .muted { font-size: 0.78rem; font-weight: 500; }

/* Row types */
.pl-table .row-bucket td       { color: var(--ink-muted); }
.pl-table .row-subtotal td     { color: var(--ink); border-top: 1px solid var(--line); }
.pl-table .row-formula td      { color: var(--ink-muted); font-style: italic; font-size: 0.78rem; }
.pl-table .row-header td       { font-weight: 700; padding: 0.7rem 0.9rem 0.4rem; color: var(--ink); }
.pl-table .row-separator td    { padding: 0.2rem 0.9rem; border-top: 2px solid var(--line); border-bottom: none; height: 1px; }

.pl-table .is-bold td          { font-weight: 700; color: var(--ink); }
.pl-table .is-kpi td           { background: rgba(46, 196, 182, 0.04); }
.pl-table .is-bold.is-kpi td   { background: rgba(46, 196, 182, 0.08); }

.pl-table .col-amt.neg         { color: var(--coral, #E17055); }
.pl-table .trend.pos           { color: var(--teal-dark, #1ea99e); font-weight: 600; }
.pl-table .trend.neg           { color: var(--coral, #E17055); font-weight: 600; }

/* Sprint 8g — BU variance: subtle pill highlight when |Δ| > 10% so CFO eye
   catches outliers immediately. Same color logic as YoY (pos/neg) but with
   stronger emphasis (rounded fill background + thicker font). */
.pl-table .trend.is-big-var    { padding: 2px 6px; border-radius: 999px; font-weight: 700; }
.pl-table .trend.is-big-var.pos { background: rgba(30, 169, 158, 0.15); }
.pl-table .trend.is-big-var.neg { background: rgba(225, 112, 85, 0.18); }

/* ─────────── F11 — P&L font hierarchy (Petr 2026-05-09) ─────────────────
   Cíl: CFO scan za 3 sec, vidí strukturu. Rozlišení podle L1 / L2 / Σ.
   Selectors use data-indent (added to <tr>), additive — nepřebíjí existing rules. */

/* L1 buckets (top-level: Tržby, COGS, OPEX...): větší, plné ink, medium weight */
.pl-table .row-bucket[data-indent="0"] td {
  font-size: 0.93rem;
  font-weight: 600;
  color: var(--ink);
  padding-top: 0.5rem; padding-bottom: 0.5rem;
}

/* L2+ buckets (nested under L1): menší, dimmed, indent přes inline padding */
.pl-table .row-bucket[data-indent="1"] td,
.pl-table .row-bucket[data-indent="2"] td {
  font-size: 0.80rem;
  font-weight: 400;
  color: var(--ink-muted);
}

/* L2 leading "↳" prefix u col-name pro vizuální nesting cue */
.pl-table .row-bucket[data-indent="1"] td.col-name::before,
.pl-table .row-bucket[data-indent="2"] td.col-name::before {
  content: "↳ ";
  color: var(--line);
  margin-right: 2px;
}

/* Σ subtotaly (Marže, EBITDA, EBIT, EBT, EAT): highlighted color + bg + thicker top border */
.pl-table .row-subtotal td {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--teal-dark, #1ea99e);
  background: rgba(46, 196, 182, 0.07);
  border-top: 2px solid var(--teal-border, #5eead4) !important;
  padding-top: 0.55rem; padding-bottom: 0.55rem;
}
.pl-table .row-subtotal.is-bold td {
  font-weight: 700;
  background: rgba(46, 196, 182, 0.10);
}
/* Σ subtotaly with KPI flag (top-level summary): strongest emphasis */
.pl-table .row-subtotal.is-kpi td {
  background: rgba(46, 196, 182, 0.13);
  font-size: 1.0rem;
}

.formula-error {
  display: inline-block;
  margin-left: 6px;
  color: var(--coral, #E17055);
  cursor: help;
  font-size: 0.85em;
}

/* ─────────── P&L mapping page (Sub-sprint 5.2) ─────────── */
/* Sprint 8 v4 — red callout for unmapped accounts (Bonus D) */
.callout-danger {
  background: #fee2e2;
  border: 1px solid #fca5a5;
  border-left: 4px solid #dc2626;
  padding: 0.85rem 1.1rem;
  border-radius: 8px;
  margin-bottom: 1.2rem;
  color: #7f1d1d;
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.callout-danger strong { color: #991b1b; }
.callout-danger a.btn-primary { background: #dc2626; border-color: #dc2626; }

.callout-warn {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-left: 4px solid var(--coral, #E17055);
  padding: 0.85rem 1.1rem;
  border-radius: 8px;
  margin-bottom: 1.2rem;
  display: flex; align-items: center; gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.92rem;
}

.mapping-filters {
  display: flex; flex-direction: column; gap: 0.5rem;
  margin-bottom: 1rem;
  padding: 0.85rem 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.filter-row {
  display: flex; align-items: center; gap: 0.7rem;
  flex-wrap: wrap;
}
.filter-pills { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.filter-pill {
  font-family: inherit;
  font-size: 0.78rem; font-weight: 600;
  padding: 0.3rem 0.8rem;
  border-radius: 100px;
  background: var(--surface);
  color: var(--ink-muted);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: all 0.12s;
  font-variant-numeric: tabular-nums;
}
.filter-pill:hover { border-color: var(--teal-border); color: var(--teal-dark); }
.filter-pill.is-active { background: var(--teal); color: var(--surface); border-color: var(--teal); }
.filter-pill.is-warn.is-active { background: var(--coral, #E17055); border-color: var(--coral, #E17055); }
.filter-pill.is-info.is-active { background: #3b82f6; border-color: #3b82f6; }
.filter-pill.is-danger.is-active { background: #dc2626; color: #fff; border-color: #dc2626; }
.filter-pill.is-danger { color: #991b1b; border-color: #fca5a5; }

.mapping-table-wrap {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}
.mapping-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}
.mapping-table thead th {
  text-align: left;
  font-weight: 600;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  padding: 0.7rem 0.85rem;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  position: sticky; top: 0;
  z-index: 1;
}
.mapping-table tbody td {
  padding: 0.55rem 0.85rem;
  border-bottom: 1px solid var(--line-soft, #f1f5f9);
  vertical-align: middle;
}
.mapping-table tbody tr:hover td { background: var(--surface-soft, #f8fafc); }
.mapping-table tbody tr:last-child td { border-bottom: none; }

.mapping-table .col-check    { width: 36px; text-align: center; }
.mapping-table .col-account  { width: 78px; }
.mapping-table .col-name     { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mapping-table .col-l1       { width: 110px; }
.mapping-table .col-l2       { width: 160px; }
.mapping-table .col-amt      { width: 130px; text-align: right; }
.mapping-table .col-status   { width: 110px; text-align: center; }
.mapping-table .col-actions  { width: 80px; text-align: right; }

.mapping-table code {
  background: rgba(0,0,0,0.04);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 0.85em;
}

.mapping-table .activity-legs {
  display: block;
  font-size: 0.7rem;
  margin-top: 1px;
}

/* L1 badges — inline color cue */
.l1-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.l1-revenue   { background: #d1fae5; color: #065f46; }
.l1-cogs      { background: #fef3c7; color: #92400e; }
.l1-opex      { background: #e0e7ff; color: #3730a3; }
.l1-da        { background: #fce7f3; color: #831843; }
.l1-financial { background: #cffafe; color: #155e75; }
.l1-tax       { background: #f3e8ff; color: #581c87; }
.l1-other     { background: #f1f5f9; color: #334155; }
.l1-unmapped  { background: #fee2e2; color: #991b1b; }

/* Status badges */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.badge-ok    { background: #d1fae5; color: #065f46; }
.badge-warn  { background: #fef3c7; color: #92400e; }
.badge-info  { background: #dbeafe; color: #1e40af; }
.badge-danger { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.badge-error { background: #fee2e2; color: #991b1b; }

/* Highlight rows that need review */
.mapping-row.status-auto-fallback td {
  background: rgba(254, 243, 199, 0.15);   /* faint amber tint */
}
.mapping-row.status-cfo-edited td {
  background: rgba(219, 234, 254, 0.15);   /* faint blue tint */
}
.mapping-row.status-auto-fallback:hover td { background: rgba(254, 243, 199, 0.5); }
.mapping-row.status-cfo-edited:hover td    { background: rgba(219, 234, 254, 0.5); }

.mapping-row-editing td {
  background: rgba(46, 196, 182, 0.06) !important;
}

.btn-row-edit, .btn-row-cancel {
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.3rem 0.7rem;
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink-muted);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: all 0.12s;
}
.btn-row-edit:hover  { color: var(--teal-dark); border-color: var(--teal-border); }
.btn-row-cancel:hover { color: var(--coral, #E17055); border-color: var(--coral, #E17055); }

/* Inline edit form (replaces L1+L2+amt cells when editing) */
.inline-edit-form {
  display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap;
}
.inline-edit-form select,
.inline-edit-form input[type="text"] {
  font-family: inherit;
  font-size: 0.85rem;
  padding: 0.3rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
}
.inline-edit-form select { min-width: 110px; }
.inline-edit-form .notes-input { flex: 1; min-width: 180px; }
.btn-sm { padding: 0.3rem 0.85rem; font-size: 0.82rem; }

/* Bulk action bar — slides up from bottom when checkboxes selected */
.bulk-bar {
  position: sticky; bottom: 0;
  display: none;
  align-items: center; gap: 0.7rem;
  padding: 0.85rem 1rem;
  background: var(--ink, #1E293B);
  color: var(--surface);
  border-radius: 12px 12px 0 0;
  margin-top: 0.5rem;
  box-shadow: 0 -4px 12px rgba(0,0,0,0.1);
  flex-wrap: wrap;
}
.bulk-bar.is-visible { display: flex; }
.bulk-bar select, .bulk-bar input[type="text"] {
  padding: 0.4rem 0.7rem;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.08);
  color: var(--surface);
  border-radius: 6px;
  font-family: inherit;
}
.bulk-bar select option { background: var(--ink, #1E293B); color: var(--surface); }
.bulk-bar .muted { color: rgba(255,255,255,0.7); }

/* ─────────── L1 / L2 Buckets management page (Sub-sprint 5.6) ─────────── */
.callout-info {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-left: 4px solid #3b82f6;
  padding: 0.75rem 1.1rem;
  border-radius: 8px;
  margin-bottom: 1.2rem;
  font-size: 0.9rem;
}

.buckets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 1rem;
}

.bucket-l1-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  display: flex; flex-direction: column;
}
.bucket-l1-card.l1-revenue   { border-top: 3px solid #10b981; }
.bucket-l1-card.l1-cogs      { border-top: 3px solid #f59e0b; }
.bucket-l1-card.l1-opex      { border-top: 3px solid #6366f1; }
.bucket-l1-card.l1-da        { border-top: 3px solid #ec4899; }
.bucket-l1-card.l1-financial { border-top: 3px solid #06b6d4; }
.bucket-l1-card.l1-tax       { border-top: 3px solid #a855f7; }
.bucket-l1-card.l1-other     { border-top: 3px solid #94a3b8; }

.l1-card-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1rem 1.1rem 0.7rem;
  border-bottom: 1px solid var(--line);
}
.l1-card-head .l1-meta { font-size: 0.78rem; margin-left: 0.5rem; }
.l1-amount {
  font-weight: 700; font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.l1-amount.neg { color: var(--coral, #E17055); }

.l2-list {
  display: flex; flex-direction: column;
  padding: 0.4rem;
  gap: 0.2rem;
}
.l2-item {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  transition: all 0.15s;
}
.l2-item[open] {
  background: var(--surface-soft, #f8fafc);
  border-color: var(--line);
}
/* New layout: caret | name | (badges optional) | amount → cleaner left-to-right reading */
.l2-summary {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.85rem 0.55rem 0.5rem;
  cursor: pointer;
  font-size: 0.88rem;
  list-style: none;
  user-select: none;
  border-radius: 6px;
  transition: background-color var(--motion-fast) ease;
}
.l2-summary::-webkit-details-marker { display: none; }
/* New explicit caret span — replaces ::before pseudo so layout grid can target it */
.l2-caret {
  color: var(--ink-soft);
  font-size: 0.75em;
  transition: transform var(--motion-fast) ease;
  display: inline-block;
  text-align: center;
}
.l2-item[open] > .l2-summary .l2-caret { transform: rotate(90deg); color: var(--teal-dark); }
.l2-summary:hover { background: var(--teal-glow); }
.l2-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.l2-stats {
  font-size: 0.74rem;
  display: flex; align-items: center; gap: 0.25rem;
  white-space: nowrap;
}
.l2-stats .badge { padding: 1px 5px; font-size: 0.65rem; }
.l2-amount {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 0.92rem;
  text-align: right;
  min-width: 72px;
  color: var(--ink);
}
.l2-amount.neg { color: var(--coral, #E17055); }
.l2-amount.muted { color: var(--ink-faint); font-weight: 500; }

.l2-actions {
  padding: 0.7rem 1rem 0.85rem;
  border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 0.7rem;
}
.l2-action-form {
  display: flex; align-items: center; gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 0.82rem;
}
.l2-action-form label { color: var(--ink-muted); font-weight: 500; }
.l2-action-form input[type="text"],
.l2-action-form select {
  font-family: inherit; font-size: 0.82rem;
  padding: 0.3rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  flex: 1; min-width: 110px;
}

/* ─────────── Layout editor (Sub-sprint 5.6b) ─────────── */
.layout-table-wrap {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  margin-bottom: 1rem;
}
.layout-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}
.layout-table thead th {
  text-align: left;
  font-weight: 600;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  padding: 0.7rem 0.85rem;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.layout-table tbody td {
  padding: 0.55rem 0.85rem;
  border-bottom: 1px solid var(--line-soft, #f1f5f9);
  vertical-align: middle;
}
.layout-table .col-order   { width: 40px; text-align: right; color: var(--ink-muted); }
.layout-table .col-name    { min-width: 220px; }
.layout-table .col-type    { width: 110px; }
.layout-table .col-source  { min-width: 220px; }
.layout-table .col-format  { width: 90px; }
.layout-table .col-flags   { width: 130px; }
.layout-table .col-actions { width: 130px; text-align: right; }

.layout-row.layout-type-bucket   td { background: rgba(46, 196, 182, 0.03); }
.layout-row.layout-type-subtotal td { background: rgba(99, 102, 241, 0.04); }
.layout-row.layout-type-formula  td { background: rgba(168, 85, 247, 0.04); font-style: italic; }
.layout-row.is-bold              td { font-weight: 700; }

.type-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: rgba(0,0,0,0.05);
  color: var(--ink-muted);
}
.type-bucket   { background: rgba(46, 196, 182, 0.15); color: #0f766e; }
.type-subtotal { background: rgba(99, 102, 241, 0.15); color: #4338ca; }
.type-formula  { background: rgba(168, 85, 247, 0.15); color: #7e22ce; }
.type-header   { background: rgba(100, 116, 139, 0.15); color: #475569; }
.type-separator{ background: rgba(100, 116, 139, 0.10); color: #94a3b8; }

.flag-badge {
  display: inline-block;
  font-size: 0.7rem;
  padding: 1px 5px;
  margin-right: 3px;
  background: rgba(0,0,0,0.04);
  color: var(--ink-muted);
  border-radius: 3px;
}
.flag-badge.flag-kpi { background: rgba(46, 196, 182, 0.15); color: var(--teal-dark, #0f766e); }

.formula-text {
  font-family: 'JetBrains Mono', Menlo, monospace;
  font-size: 0.8em;
  background: rgba(0,0,0,0.04);
  padding: 1px 5px;
  border-radius: 3px;
}

.btn-icon {
  font-family: inherit;
  font-size: 0.85rem;
  padding: 0.25rem 0.45rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--ink-muted);
  cursor: pointer;
  transition: all 0.12s;
}
.btn-icon:hover  { background: var(--surface-soft, #f1f5f9); color: var(--teal-dark); border-color: var(--line); }
.btn-danger:hover { color: var(--coral, #E17055); border-color: var(--coral, #E17055); }

.layout-edit-row {
  display: none;
  background: rgba(46, 196, 182, 0.03);
}
.layout-edit-row.is-open { display: table-row; }
.layout-edit-row > td { padding: 0.75rem 1rem !important; }

.layout-form {
  display: flex; flex-direction: column; gap: 0.6rem;
}
.layout-form .form-row {
  display: flex; gap: 0.7rem; align-items: flex-end; flex-wrap: wrap;
}
.layout-form label {
  display: flex; flex-direction: column; gap: 0.2rem;
  font-size: 0.78rem; color: var(--ink-muted); font-weight: 500;
}
.layout-form label.grow { flex: 1; min-width: 200px; }
.layout-form label.checkbox {
  flex-direction: row; align-items: center; gap: 0.3rem;
  padding-bottom: 0.3rem;
}
.layout-form input[type="text"],
.layout-form input[type="number"],
.layout-form select {
  font-family: inherit; font-size: 0.85rem;
  padding: 0.35rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
}
.layout-form small { font-size: 0.7rem; line-height: 1.4; word-break: break-word; }

.layout-add-section {
  background: var(--surface);
  border: 1px dashed var(--line);
  border-radius: 12px;
  padding: 0.5rem 1rem;
}
.add-row-toggle {
  font-weight: 600;
  cursor: pointer;
  padding: 0.5rem 0;
  color: var(--teal-dark, #0f766e);
  list-style: none;
}
.add-row-toggle::-webkit-details-marker { display: none; }
details[open] > .add-row-toggle { padding-bottom: 1rem; border-bottom: 1px solid var(--line); margin-bottom: 1rem; }

/* ─────────── Recurring patterns page (Sprint 6) ─────────── */
.proj-table-wrap {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}
.proj-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}
.proj-table thead th {
  text-align: left;
  font-weight: 600;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  padding: 0.6rem 0.85rem;
  border-bottom: 1px solid var(--line);
}
.proj-table thead th.num { text-align: right; }
.proj-table tbody td {
  padding: 0.4rem 0.85rem;
  border-bottom: 1px solid var(--line-soft, #f1f5f9);
}
.proj-table .num { text-align: right; }
.proj-table tbody tr:last-child td { border-bottom: none; }
.proj-table tbody tr:hover td { background: var(--surface-soft, #f8fafc); }

.bar-cell { width: 25%; padding: 0.3rem 0.85rem !important; }
.bar-row { height: 8px; margin: 1px 0; background: rgba(0,0,0,0.03); border-radius: 3px; overflow: hidden; }
.bar { height: 100%; }
.bar.bar-pos { background: var(--teal, #2EC4B6); }
.bar.bar-neg { background: var(--coral, #E17055); }

.recurring-table .num { text-align: right; }
.recurring-row.conf-high     td { background: rgba(46, 196, 182, 0.04); }
.recurring-row.conf-medium   td { background: rgba(99, 102, 241, 0.03); }
.recurring-row.conf-low      td { background: rgba(254, 243, 199, 0.10); }

/* ─────────── Drill-down modal (Sprint 6.5) ─────────── */
.drill-modal {
  position: fixed; inset: 0;
  display: none;
  z-index: 1000;
  align-items: center; justify-content: center;
}
.drill-modal.is-open { display: flex; }

.drill-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(2px);
  animation: drillFadeIn 0.15s ease-out;
}
.drill-modal-panel {
  position: relative;
  background: var(--surface);
  border-radius: 16px;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.35);
  max-width: 95vw; max-height: 90vh;
  width: 1100px;
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: drillSlideIn 0.2s ease-out;
}
@keyframes drillFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes drillSlideIn {
  from { opacity: 0; transform: translateY(20px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.drill-modal-close {
  position: absolute; top: 12px; right: 12px;
  z-index: 2;
  font-family: inherit; font-size: 1rem;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink-muted);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.12s;
}
.drill-modal-close:hover { color: var(--coral, #E17055); border-color: var(--coral, #E17055); }

.drill-modal-body {
  overflow-y: auto;
  padding: 1.5rem 1.75rem;
  flex: 1;
}

/* Drill content layout */
.drill-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 1rem;
}
.drill-header h2 {
  margin: 0 0 0.3rem;
  font-size: 1.3rem; font-weight: 700;
}
.drill-breadcrumb {
  font-size: 0.78rem;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.4rem;
}
.drill-breadcrumb a {
  color: var(--teal-dark, #0f766e);
  text-decoration: none;
  cursor: pointer;
}
.drill-breadcrumb a:hover { text-decoration: underline; }
.drill-summary-amount {
  font-size: 1.4rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.drill-summary-amount.neg { color: var(--coral, #E17055); }
.drill-summary-meta { font-size: 0.85rem; color: var(--ink-muted); margin-top: 0.2rem; text-align: right; }

.drill-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}
.drill-table thead th {
  text-align: left;
  font-weight: 600;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  padding: 0.55rem 0.85rem;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  position: sticky; top: 0; z-index: 1;
}
.drill-table thead th.num { text-align: right; }
.drill-table tbody td {
  padding: 0.45rem 0.85rem;
  border-bottom: 1px solid var(--line-soft, #f1f5f9);
}
.drill-table tbody tr:last-child td { border-bottom: none; }
.drill-table tbody tr.is-clickable { cursor: pointer; transition: background 0.1s; }
.drill-table tbody tr.is-clickable:hover td { background: rgba(46, 196, 182, 0.06); }
.drill-table .num { text-align: right; }
.drill-table .pct-bar {
  display: inline-block;
  width: 60px; height: 6px;
  background: rgba(0,0,0,0.05);
  border-radius: 3px;
  overflow: hidden;
  margin-left: 0.5rem;
  vertical-align: middle;
}
.drill-table .pct-bar .pct-bar-fill { height: 100%; background: var(--teal, #2EC4B6); }
.drill-table .pct-bar .pct-bar-fill.neg { background: var(--coral, #E17055); }

.drill-empty {
  padding: 3rem 1rem;
  text-align: center;
  color: var(--ink-muted);
}

/* Make P&L bucket / subtotal lines visibly clickable */
.pl-table .row-bucket.is-drillable,
.pl-table .row-subtotal.is-drillable {
  cursor: pointer;
  transition: background 0.1s;
}
.pl-table .row-bucket.is-drillable:hover td,
.pl-table .row-subtotal.is-drillable:hover td {
  background: rgba(46, 196, 182, 0.08) !important;
}
.pl-table .row-bucket.is-drillable td:first-child::after,
.pl-table .row-subtotal.is-drillable td:first-child::after {
  content: "↗";
  margin-left: 6px;
  color: var(--teal-dark, #0f766e);
  opacity: 0;
  transition: opacity 0.1s;
}
.pl-table .row-bucket.is-drillable:hover td:first-child::after,
.pl-table .row-subtotal.is-drillable:hover td:first-child::after {
  opacity: 1;
}

/* ─────────── P&L period title (Sprint 7e2) ─────────── */
.pl-period-title {
  margin: 1rem 0 0.7rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink-muted);
}
.pl-period-title strong {
  color: var(--teal-dark, #0f766e);
  font-weight: 700;
}

/* Export button — distinct from filter pills */
.export-pill {
  background: var(--teal, #2EC4B6) !important;
  color: var(--surface) !important;
  border-color: var(--teal, #2EC4B6) !important;
  text-decoration: none;
  font-weight: 600;
}
.export-pill:hover {
  background: var(--teal-dark, #0f766e) !important;
  border-color: var(--teal-dark, #0f766e) !important;
  color: var(--surface) !important;
}

/* ─────────── Drill modal filter/sort controls (Sprint 7d) ─────────── */
.drill-controls {
  display: flex; flex-direction: column; gap: 0.6rem;
  padding: 0.7rem 0.85rem;
  background: var(--surface-soft, #f8fafc);
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-bottom: 1rem;
}
.drill-control-row {
  display: flex; align-items: center; gap: 0.5rem;
  flex-wrap: wrap;
}
.drill-control-label {
  font-size: 0.78rem;
  color: var(--ink-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.drill-sort-select,
.drill-search-input {
  font-family: inherit;
  font-size: 0.85rem;
  padding: 0.35rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  min-width: 180px;
}
.drill-search-input {
  flex: 1; min-width: 200px; max-width: 280px;
}
.drill-search-input:focus,
.drill-sort-select:focus {
  outline: none;
  border-color: var(--teal-border);
  box-shadow: 0 0 0 3px rgba(46, 196, 182, 0.15);
}
.drill-search-form {
  display: inline-flex; align-items: center; gap: 0.4rem;
  margin: 0;
}

/* ─────────── Cashflow drill: 4-section grid (Sprint 7c) ─────────── */
.cf-drill-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: start;
}
.cf-drill-section {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.cf-drill-section-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.7rem 0.95rem;
  border-bottom: 1px solid var(--line);
}
.cf-drill-section-head h3 { margin: 0; font-size: 0.95rem; font-weight: 700; }
.cf-drill-section-head.pos-bg { background: rgba(46, 196, 182, 0.06); }
.cf-drill-section-head.neg-bg { background: rgba(225, 112, 85, 0.06); }
.cf-drill-sum {
  font-weight: 700;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}
.cf-drill-table { font-size: 0.78rem; }
.cf-drill-table tbody td { padding: 0.35rem 0.7rem; }
.cf-drill-empty {
  padding: 1.5rem; text-align: center; color: var(--ink-muted);
  font-size: 0.85rem;
}
@media (max-width: 900px) {
  .cf-drill-grid { grid-template-columns: 1fr; }
}

/* ─────────── P&L Builder — 3-pane drag-drop (Sprint 7i) ─────────── */
.builder-workspace {
  display: grid;
  /* Builder v2 F5+: KATEGORIE 560px (3 sub-cols ~175px each), LAYOUT flex 1fr,
     PREVIEW 340px. Total min-width ~900px before overflow scroll. */
  /* F9.5 (Petr 2026-05-08): wider Live Preview, narrower canvas. Petr:
     "Lay out je zbytečně široký, live preview se pak nevejde". */
  grid-template-columns: 480px minmax(380px, 1fr) 480px;
  gap: 0.9rem;
  align-items: start;
  margin-top: 1rem;
}

/* LEFT pane: source palette */
.builder-palette {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.85rem;
  box-shadow: var(--shadow-soft-xs);
  position: sticky; top: 1rem;
  max-height: calc(100vh - 7rem);
  overflow-y: auto;
}
.palette-section-title {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--teal-dark);
  margin: 0.6rem 0 0.4rem;
}
.palette-section-title:first-child { margin-top: 0; }
.palette-list {
  display: flex; flex-direction: column;
  gap: 4px;
  margin-bottom: 0.6rem;
}
.palette-item {
  display: grid;
  grid-template-columns: 18px 1fr auto auto;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: grab;
  font-size: 0.82rem;
  transition: all var(--motion-fast) ease;
}
.palette-item:hover {
  border-color: var(--teal-border);
  background: var(--teal-glow);
  transform: translateX(2px);
}
/* Default: hide already-placed items entirely (drag-out feel — palette empties) */
.palette-list:not(.show-placed) .palette-item.is-placed { display: none; }
/* When toggle is ON: show greyed-out, still draggable for re-add */
.palette-list.show-placed .palette-item.is-placed {
  opacity: 0.5;
  background: var(--surface-soft, #f1f5f9);
}

/* ════════════════════════════════════════════════════════════════
   BUILDER v2 — F3: 3-column KATEGORIE palette (Petr 2026-05-07 part-3)
   ════════════════════════════════════════════════════════════════ */

/* Palette v2 needs more horizontal space — wider when 3-col layout active */
.builder-palette.palette-v2 { max-height: calc(100vh - 5rem); }

/* The 3 sub-columns inside KATEGORIE panel */
.cat-cols {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  margin-top: 0.5rem;
}
.cat-col {
  background: var(--surface-soft, #f8fafc);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 6px;
  min-height: 260px;
  max-height: calc(100vh - 16rem);
  overflow-y: auto;
}
/* Stronger column dividers when 3 sub-cols visible */
.cat-cols { gap: 8px; }
.cat-col-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 4px 6px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
}
.cat-col-title {
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--ink-medium);
}
.cat-col-l1  .cat-col-title { color: var(--teal-dark); }
.cat-col-l2  .cat-col-title { color: #0284c7; }
.cat-col-sub .cat-col-title { color: #7c3aed; }
.cat-col-count {
  font-size: 0.62rem; color: var(--ink-soft);
  background: var(--surface); padding: 1px 5px; border-radius: 3px;
}

.cat-item {
  display: flex; gap: 5px;
  padding: 6px 7px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 5px;
  margin-bottom: 4px;
  cursor: grab;
  font-size: 0.78rem;
  transition: all var(--motion-fast) ease;
  align-items: flex-start;
}
.cat-item:hover { border-color: var(--teal); background: var(--teal-glow); }

.cat-item-handle { color: var(--ink-faint); font-size: 0.75rem; flex-shrink: 0; padding-top: 1px; }
.cat-item-body { flex: 1; min-width: 0; }
.cat-item-name {
  font-weight: 600; color: var(--ink);
  /* Allow 2-line wrap rather than truncating — more readable in 175px columns */
  display: flex; align-items: flex-start; gap: 3px;
  font-size: 0.82rem;
  line-height: 1.25;
  word-break: break-word;
}
.cat-item-name strong { font-weight: 600; }
.cat-lock { color: var(--amber); font-size: 0.75rem; flex-shrink: 0; }
.cat-item-meta {
  display: flex; gap: 4px; align-items: center;
  margin-top: 3px;
  font-size: 0.62rem;
}

.cat-pill {
  font-size: 0.55rem; padding: 1px 4px; border-radius: 2px;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  white-space: nowrap;
}
.cat-pill-teal    { background: var(--teal-glow);  color: var(--teal-dark); }
.cat-pill-orange  { background: #fed7aa;            color: #9a3412; }
.cat-pill-blue    { background: #e0f2fe;            color: #0284c7; }
.cat-pill-purple  { background: #f3e8ff;            color: #6b21a8; }
.cat-pill-pink    { background: #fce7f3;            color: #be185d; }
.cat-pill-red     { background: #fee2e2;            color: #b91c1c; }
.cat-pill-custom  { background: #ddd6fe;            color: #5b21b6; }
.cat-pill-amber   {
  background: var(--amber-glow, #fef3c7); color: var(--amber, #d97706);
  font-size: 0.55rem; padding: 1px 4px; border-radius: 2px;
  font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
}
.cat-amount {
  font-size: 0.62rem; color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

/* Custom L1 items get dashed border */
.cat-item.is-custom { border-style: dashed; border-color: #c4b5fd; }

/* Canonical L1 items get colored left accent */
.cat-item.is-canonical { border-left-width: 3px; border-left-style: solid; }
.cat-item.is-canonical.canon-color-teal    { border-left-color: #14b8a6; }
.cat-item.is-canonical.canon-color-orange  { border-left-color: #ea580c; }
.cat-item.is-canonical.canon-color-blue    { border-left-color: #0284c7; }
.cat-item.is-canonical.canon-color-purple  { border-left-color: #7c3aed; }
.cat-item.is-canonical.canon-color-pink    { border-left-color: #db2777; }
.cat-item.is-canonical.canon-color-red     { border-left-color: #dc2626; }

/* F9.8 (Petr 2026-05-09 evening): REVERT F9.7 — Petr's original vision správně:
   "drop in layout = ZMIZÍ z palety, drag out = VRÁTÍ se".
   Tj. is-placed items ARE hidden default ("uklizeno"), toggle ▼ Zobrazit
   už použité je override pro re-drag use case. Skutečný bug F9.7 byl že
   drag-out nebyl immediate (queue) → palette stayed stale. Fix v builder.js. */
.cat-col:not(.show-placed) .cat-item.is-placed { display: none; }
.cat-col.show-placed .cat-item.is-placed {
  opacity: 0.5; background: var(--surface-soft); border-style: dashed;
}

.cat-add-row {
  display: block; text-align: center;
  padding: 4px 6px; margin-top: 4px;
  border: 1px dashed var(--line); color: var(--ink-soft);
  font-size: 0.65rem; border-radius: 4px; cursor: pointer;
}
.cat-add-row:hover { background: var(--teal-glow); color: var(--teal-dark); border-color: var(--teal-border); }

/* Empty-state hint inside a cat-col when nothing is yet defined.
   F9 (Petr 2026-05-08): L2 column starts empty per design; this guides
   the user toward the two ways to populate it (+ L2 button or mapping). */
.cat-col-empty {
  margin: 8px 0 6px;
  padding: 10px 8px;
  background: var(--surface-soft, #f8fafc);
  border: 1px dashed var(--line);
  border-radius: 6px;
  font-size: 0.7rem;
  line-height: 1.4;
  color: var(--ink-medium);
}
.cat-col-empty-title {
  margin: 0 0 4px; padding: 0;
  font-weight: 700; color: var(--ink);
}
.cat-col-empty-body {
  margin: 0 0 4px; padding: 0;
}
.cat-col-empty-body:last-child { margin-bottom: 0; }
.cat-col-empty-body em { font-style: normal; color: var(--ink); font-weight: 600; }
.cat-col-empty-body a { color: var(--teal-dark); text-decoration: underline; }
.cat-col-empty-body a:hover { color: var(--teal); }

/* F9.1 (Petr 2026-05-08): × delete button on L2 palette items.
   Hidden by default, appears on hover of cat-item. Stops drag init via
   Sortable.js `filter: '.cat-item-delete'` setting. */
.cat-item { position: relative; }
.cat-item-delete {
  position: absolute;
  top: 4px; right: 4px;
  width: 18px; height: 18px;
  padding: 0; line-height: 16px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 50%;
  color: var(--ink-soft);
  font-size: 14px; font-weight: 700;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s, color 0.15s, border-color 0.15s;
}
.cat-item:hover .cat-item-delete { opacity: 1; }
.cat-item-delete:hover {
  background: #fee2e2;
  color: #991b1b;
  border-color: #fca5a5;
}

/* Specials section — collapsible (less common items) */
.palette-specials-details {
  margin-top: 0.6rem;
  padding: 0.4rem 0.5rem;
  background: var(--surface-soft, #f8fafc);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.palette-specials-details summary {
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--ink-medium); cursor: pointer;
}
.palette-specials-details[open] summary { margin-bottom: 6px; }

.palette-hint {
  font-size: 0.62rem; font-style: italic; margin-top: 8px;
  text-align: center; line-height: 1.5;
}

/* Palette header with create button */
.palette-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 0.4rem;
}
.btn-create-category {
  font-family: inherit; font-size: 0.72rem; font-weight: 700;
  padding: 0.25rem 0.55rem;
  border-radius: 5px;
  background: var(--teal, #2EC4B6);
  color: var(--surface);
  border: 1px solid var(--teal, #2EC4B6);
  cursor: pointer;
  transition: all var(--motion-fast) ease;
  white-space: nowrap;
}
.btn-create-category:hover {
  background: var(--teal-dark);
  border-color: var(--teal-dark);
  transform: translateY(-1px);
}

/* Create-category form (hidden by default) */
.create-category-form {
  display: none;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.6rem;
  background: var(--teal-glow);
  border: 1px solid var(--teal-border);
  border-radius: 6px;
  margin-bottom: 0.5rem;
}
.create-category-form.is-open { display: flex; }
.create-category-form label {
  display: flex; flex-direction: column; gap: 0.2rem;
  font-size: 0.72rem; font-weight: 600; color: var(--ink-muted);
}
.create-category-form input[type="text"],
.create-category-form select {
  font-family: inherit; font-size: 0.82rem;
  padding: 0.3rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface);
}
/* F7 — form hint about account mapping going elsewhere */
.create-category-form .form-hint {
  font-size: 0.7rem;
  margin: 0.4rem 0 0;
  padding: 0.4rem 0.6rem;
  background: rgba(20, 184, 166, 0.06);
  border-left: 2px solid var(--teal);
  border-radius: 3px;
  line-height: 1.4;
}
.create-category-form .form-hint a { color: var(--teal-dark); text-decoration: underline; }

/* "Show already placed" checkbox toggle */
.palette-toggle {
  display: flex; align-items: center; gap: 0.4rem;
  font-size: 0.72rem;
  color: var(--ink-muted);
  margin-bottom: 0.5rem;
  padding: 0.3rem 0.4rem;
  cursor: pointer;
  user-select: none;
}
.palette-toggle:hover { color: var(--teal-dark); }
.palette-toggle input { cursor: pointer; }
.palette-handle {
  color: var(--ink-faint);
  font-size: 0.85rem;
  line-height: 1;
  user-select: none;
}
.palette-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-amount {
  font-variant-numeric: tabular-nums;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}
.palette-check { color: var(--teal-dark); font-size: 0.85rem; }
.palette-l1-tag {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 0.65rem;
  font-weight: 700;
  margin-right: 4px;
  vertical-align: 1px;
}
.palette-tag {
  display: inline-block;
  width: 18px; height: 18px;
  text-align: center; line-height: 18px;
  border-radius: 3px;
  font-size: 0.7rem; font-weight: 700;
  margin-right: 2px;
}
.palette-tag.tag-pct { background: rgba(168, 85, 247, 0.15); color: #7e22ce; }
.palette-tag.tag-sum { background: rgba(99, 102, 241, 0.15); color: #4338ca; }
.palette-formula {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.65rem;
  background: rgba(0,0,0,0.03);
  padding: 1px 4px;
  border-radius: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 130px;
  display: inline-block;
}

/* CENTER pane: canvas */
.builder-canvas-wrap {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.85rem;
  min-height: 400px;
  box-shadow: var(--shadow-soft-xs);
}
.canvas-header {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 0.7rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--line);
}
.canvas-header h3 { margin: 0; font-size: 0.95rem; font-weight: 700; }

.builder-canvas {
  min-height: 300px;
  display: flex; flex-direction: column;
  gap: 4px;
}
.canvas-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--ink-soft);
  border: 2px dashed var(--line);
  border-radius: 8px;
  font-size: 0.95rem;
}
.canvas-line {
  display: grid;
  /* F8.5 simplified — check | handle | name (flex 1) | amount | %col | %toggle */
  grid-template-columns: 22px 18px 1fr 90px 60px auto;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.7rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 0.9rem;
  transition: all var(--motion-fast) ease;
}
.canvas-pct {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--teal-dark);
  font-weight: 600;
  font-size: 0.85rem;
}
.canvas-line .canvas-name { font-size: 0.95rem; }
.canvas-line .canvas-name strong { font-weight: 700; }

/* L2 row visual subordination (Petr 2026-05-07: 'level 2 je odsazený, trošku menší') */
.canvas-line.is-l2 {
  margin-left: 24px;            /* indent the whole row, not just text */
  margin-top: -2px;              /* tighter spacing between L1 + its L2 children */
  padding: 0.4rem 0.6rem;        /* less padding than L1 */
  background: var(--surface-soft, #f8fafc);
  border-color: #e2e8f0;
  border-left: 2px solid #cbd5e1;
  position: relative;
}
.canvas-line.is-l2::before {
  /* Vertical connector linking back to parent L1 */
  content: "↳";
  position: absolute;
  left: -16px;
  top: 50%;
  transform: translateY(-50%);
  color: #0284c7;
  font-size: 0.85rem;
  font-weight: 700;
}
.canvas-line.is-l2 .canvas-name { font-size: 0.82rem; color: var(--ink-medium); font-weight: 500; }
.canvas-line.is-l2 .canvas-name strong { font-weight: 500; }
.canvas-line.is-l2 .canvas-amount { font-size: 0.85rem; font-weight: 500; color: var(--ink-medium); }
/* Hide the legacy 'BUCKET'/'SUBTOTAL'/'FORMULA' badge — info encoded visually now */
.canvas-line .canvas-type-badge { display: none; }

/* Amount column — right-aligned, tabular nums, larger on bucket/subtotal */
.canvas-amount {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 0.95rem;
  min-width: 80px;
  text-align: right;
  color: var(--ink);
}
.canvas-amount.neg { color: var(--coral); }
.canvas-line.is-l2 .canvas-amount { font-weight: 500; font-size: 0.85rem; color: var(--ink-medium); }

/* AUTO badge on auto-derived subtotaly */
.canvas-auto-badge {
  display: inline-block;
  background: #7c3aed;
  color: white;
  font-size: 0.62rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 3px;
  margin-left: 8px;
  letter-spacing: 0.05em;
  vertical-align: 1px;
}

/* % toggle pill on subtotaly */
.canvas-pct-toggle {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 9px;
  border-radius: 100px;
  font-size: 0.72rem;
  font-weight: 600;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink-medium);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.canvas-pct-toggle.is-on {
  background: var(--teal); color: white; border-color: var(--teal);
}
.canvas-pct-toggle:hover { border-color: var(--teal); }

/* Hide legacy formula text on subtotaly (only show on truly explicit-formula lines) */
.canvas-formula-hint {
  font-family: monospace;
  font-size: 0.75rem;
  background: rgba(124, 58, 237, 0.08);
  color: #7c3aed;
  padding: 2px 6px;
  border-radius: 3px;
  margin-left: 8px;
}
.canvas-line:hover { border-color: var(--teal-border); background: var(--surface-soft, #f8fafc); }
.canvas-handle {
  color: var(--ink-faint);
  cursor: grab;
  font-size: 0.95rem;
  line-height: 1;
  user-select: none;
}
.canvas-handle:active { cursor: grabbing; }
.canvas-type-badge {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  padding: 2px 5px;
  border-radius: 3px;
  background: rgba(0,0,0,0.05);
  color: var(--ink-muted);
}
.canvas-type-badge.type-bucket   { background: rgba(46, 196, 182, 0.15); color: #0f766e; }
.canvas-type-badge.type-subtotal { background: rgba(99, 102, 241, 0.15); color: #4338ca; }
.canvas-type-badge.type-formula  { background: rgba(168, 85, 247, 0.15); color: #7e22ce; }
.canvas-type-badge.type-header   { background: rgba(100, 116, 139, 0.18); color: #334155; }
.canvas-type-badge.type-separator{ background: rgba(100, 116, 139, 0.10); color: #94a3b8; }
.canvas-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.canvas-line.is-bold .canvas-name { font-weight: 700; }
.canvas-flags { display: flex; gap: 3px; }
.canvas-actions {
  display: flex; gap: 4px;
  opacity: 0.6;
  transition: opacity var(--motion-fast) ease;
}
.canvas-line:hover .canvas-actions { opacity: 1; }

/* ════════════════════════════════════════════════════════════════
   BUILDER v2 — F2 visual hierarchy (Petr 2026-05-07 part-3)
   - Color-coded left border per canonical L1
   - 🔒 lock icon on canonical L1 buckets (visible cross-tenant lock)
   - Vertical spacing between L1 groups
   - L2 (indented) lines have ↳ connector to parent
   - Subtotaly visually distinct (purple highlight)
   ════════════════════════════════════════════════════════════════ */

/* Canonical L1 color-coded left border */
.canvas-line.is-canonical-l1     { border-left-width: 3px; border-left-style: solid; }
.canvas-line.canon-color-teal    { border-left-color: #14b8a6; }
.canvas-line.canon-color-orange  { border-left-color: #ea580c; }
.canvas-line.canon-color-blue    { border-left-color: #0284c7; }
.canvas-line.canon-color-purple  { border-left-color: #7c3aed; }
.canvas-line.canon-color-pink    { border-left-color: #db2777; }
.canvas-line.canon-color-red     { border-left-color: #dc2626; }

/* Subtle background tint per canonical color (only on bucket rows, NOT subtotal/formula) */
.canvas-line.is-canonical-l1.line-type-bucket.canon-color-teal    { background: linear-gradient(90deg, #ccfbf1 0%, transparent 30%); }
.canvas-line.is-canonical-l1.line-type-bucket.canon-color-orange  { background: linear-gradient(90deg, #fed7aa 0%, transparent 30%); }
.canvas-line.is-canonical-l1.line-type-bucket.canon-color-blue    { background: linear-gradient(90deg, #e0f2fe 0%, transparent 30%); }
.canvas-line.is-canonical-l1.line-type-bucket.canon-color-purple  { background: linear-gradient(90deg, #f3e8ff 0%, transparent 30%); }
.canvas-line.is-canonical-l1.line-type-bucket.canon-color-pink    { background: linear-gradient(90deg, #fce7f3 0%, transparent 30%); }
.canvas-line.is-canonical-l1.line-type-bucket.canon-color-red     { background: linear-gradient(90deg, #fee2e2 0%, transparent 30%); }

/* 🔒 Lock icon prefix on canonical L1 names (uses ::before to keep DOM clean) */
.canvas-line.is-canonical-l1[data-indent="0"] .canvas-name strong::before {
  content: "🔒 ";
  font-size: 0.85em;
  margin-right: 2px;
  filter: hue-rotate(20deg);
}

/* Vertical spacing between L1 groups
   - Default: every L1 bucket row (indent=0) gets margin-top
   - First child has no margin (no awkward leading gap) */
.canvas-line[data-indent="0"].line-type-bucket { margin-top: 0.6rem; }
.canvas-line:first-child[data-indent="0"]      { margin-top: 0; }

/* L2 indent lines: visual connector to parent L1
   - Existing inline style sets padding-left based on indent_level * 18
   - We add a soft left border + ↳ arrow as visual cue */
.canvas-line[data-indent]:not([data-indent="0"]) .canvas-name {
  position: relative;
}
.canvas-line[data-indent]:not([data-indent="0"]) .canvas-name strong::before {
  content: "↳ ";
  color: #0284c7;
  font-weight: 400;
  margin-right: 4px;
  font-size: 0.95em;
}

/* Subtotal rows — emphasized purple highlight (visible separator) */
.canvas-line.line-type-subtotal {
  background: linear-gradient(90deg, #ede9fe 0%, transparent 60%);
  border-left: 3px solid #7c3aed;
  margin-top: 0.4rem;
  margin-bottom: 0.4rem;
  font-weight: 600;
}
.canvas-line.line-type-subtotal .canvas-name strong::before {
  content: "Σ ";
  color: #7c3aed;
  font-weight: 700;
  margin-right: 4px;
}

/* Formula rows — softer purple, italic name */
.canvas-line.line-type-formula {
  background: linear-gradient(90deg, #faf5ff 0%, transparent 60%);
  border-left: 2px solid #c084fc;
}
.canvas-line.line-type-formula .canvas-name { font-style: italic; }

/* Disable delete button on canonical L1 (visual hint — actual block in route handler) */
.canvas-line.is-canonical-l1[data-indent="0"] .btn-danger[title*="Smazat"] {
  opacity: 0.25;
  cursor: not-allowed;
  pointer-events: none;
}

/* RIGHT pane: live preview */
.builder-preview {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.85rem;
  box-shadow: var(--shadow-soft-xs);
  position: sticky; top: 1rem;
  max-height: calc(100vh - 7rem);
  overflow-y: auto;
}
.preview-header {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 0.5rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--line);
}
.preview-header h3 { margin: 0; font-size: 0.9rem; font-weight: 700; }
.preview-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}
.preview-table tbody td {
  padding: 0.3rem 0.4rem;
  border-bottom: 1px solid var(--line-soft, #f1f5f9);
}
.preview-row.is-bold td { font-weight: 700; color: var(--ink); }
.preview-row.is-subtotal td { background: rgba(46, 196, 182, 0.05); }
.preview-row.is-bold.is-subtotal td { background: rgba(46, 196, 182, 0.10); border-top: 1px solid var(--teal-border); }
.preview-amt { text-align: right; }
.preview-amt.neg { color: var(--coral, #E17055); }
.preview-name { color: var(--ink); }
.preview-header-row td { padding-top: 0.6rem; color: var(--teal-dark); }

/* ════════════════════════════════════════════════════════════════
   PREVIEW v2 (F6) — inline % column on subtotaly, no separate "EBITDA %" rows
   ════════════════════════════════════════════════════════════════ */
.preview-table.preview-v2 thead th {
  font-size: 0.65rem; font-weight: 700; color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: 0.05em;
  padding: 4px 6px;
  border-bottom: 2px solid var(--ink);
  text-align: left;
}
.preview-table.preview-v2 thead .preview-col-amt { text-align: right; width: 80px; }
.preview-table.preview-v2 thead .preview-col-pct { text-align: right; width: 50px; color: var(--teal-dark); }

.preview-table.preview-v2 .preview-name { white-space: nowrap; }
.preview-table.preview-v2 .preview-pct {
  text-align: right;
  color: var(--teal-dark);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.preview-table.preview-v2 .preview-l2-arrow { color: #0284c7; font-size: 0.85em; }
.preview-table.preview-v2 .preview-sigma { color: #7c3aed; font-weight: 700; font-size: 0.95em; }

/* Visual: extra spacing before each L1 bucket (mockup-style L1 group separator) */
.preview-table.preview-v2 tr.is-l1-bucket td { padding-top: 8px; font-weight: 700; }
.preview-table.preview-v2 tr.is-l1-bucket + tr td { padding-top: 4px; }

/* Subtotal rows: stronger purple highlight (matches mockup) */
.preview-table.preview-v2 tr.is-subtotal td {
  background: rgba(124, 58, 237, 0.06);
  font-weight: 700; color: var(--ink);
  border-top: 1.5px solid #7c3aed;
  border-bottom: 1.5px solid #7c3aed;
  padding-top: 5px; padding-bottom: 5px;
}

/* Sortable.js classes — drag visual feedback (Polish #4 — visual upgrade) */
.sortable-ghost {
  opacity: 0.5;
  background: linear-gradient(90deg, rgba(20, 184, 166, 0.18) 0%, rgba(20, 184, 166, 0.08) 100%);
  outline: 2px dashed #14b8a6;
  outline-offset: -2px;
  border-radius: 6px;
}
.sortable-ghost::after {
  content: "↓ drop here";
  display: block; padding: .25rem .5rem; font-size: .75rem;
  color: #0d9488; font-weight: 600; text-align: center;
}
.sortable-chosen {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12), 0 0 0 2px #14b8a6;
  z-index: 5;
}
.sortable-drag {
  opacity: 0.95;
  cursor: grabbing !important;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
  transform: rotate(0.5deg);
  transition: none !important;
}
.canvas-handle, .palette-handle {
  cursor: grab;
  user-select: none;
}
.canvas-handle:active, .palette-handle:active { cursor: grabbing; }

/* Polish #9 — Responsive: stack panes on narrow viewports + tabs on mobile */
@media (max-width: 1300px) {
  .builder-workspace { grid-template-columns: 280px 1fr 320px; gap: 0.7rem; }
}
@media (max-width: 1100px) {
  /* Tablet: 2-pane (palette + canvas), preview hidden */
  .builder-workspace { grid-template-columns: 280px 1fr; }
  .builder-preview { display: none; }
  .builder-palette, .builder-canvas-wrap { position: static; max-height: none; }
}
@media (max-width: 800px) {
  /* Phone: tabbed UI — show canvas only by default; toggle bar at top to switch */
  .builder-workspace {
    grid-template-columns: 1fr;
    grid-template-areas:
      "tabs"
      "palette"
      "canvas"
      "preview";
  }
  .builder-workspace::before {
    grid-area: tabs;
    content: "📱 Mobilní zobrazení — palette + canvas naskládané pod sebou. Pro pohodlnou práci použij desktop.";
    display: block; padding: .5rem .75rem; margin-bottom: .5rem;
    background: #fef3c7; border: 1px solid #f59e0b; border-radius: 6px;
    color: #92400e; font-size: .85rem;
  }
  .builder-palette { grid-area: palette; max-height: 280px; overflow-y: auto; }
  .builder-canvas-wrap { grid-area: canvas; }
  .builder-preview { grid-area: preview; display: block; max-height: 300px; overflow-y: auto; }
  .canvas-actions .btn-icon {
    /* Touch-friendly: larger tap targets on mobile */
    min-width: 32px; min-height: 32px; padding: 4px 6px;
  }
  .palette-amount, .palette-formula { display: none; }   /* save horizontal space */
  .canvas-line {
    /* Stack visually on narrow */
    flex-wrap: wrap;
  }
  .canvas-flags { order: 99; flex-basis: 100%; }
  .bulk-action-bar {
    flex-wrap: wrap; gap: .5rem;
  }
  .bulk-actions { width: 100%; justify-content: space-around; }
}

/* ─────────── Recurring partner historical bar chart (Sprint 6.6) ─────────── */
.recurring-history {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 140px;
  padding: 0.7rem;
  background: var(--surface-soft, #f8fafc);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow-x: auto;
}
.hist-bar-wrap {
  display: flex; flex-direction: column; align-items: center;
  flex: 1 0 28px;
  height: 100%;
  justify-content: flex-end;
}
.hist-bar {
  width: 80%;
  min-height: 1px;
  background: var(--teal, #2EC4B6);
  border-radius: 2px 2px 0 0;
  transition: background 0.12s;
}
.hist-bar.neg { background: var(--coral, #E17055); }
.hist-bar-wrap:hover .hist-bar { opacity: 0.75; }
.hist-label {
  font-size: 0.65rem;
  color: var(--ink-muted);
  margin-top: 4px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Clickable cues */
.aging-bucket.is-clickable { transition: all 0.12s; }
.aging-bucket.is-clickable:hover {
  border-color: var(--teal-border) !important;
  background: rgba(46, 196, 182, 0.05);
  transform: translateY(-1px);
}
.drillable-total {
  display: inline-flex; align-items: center; gap: 4px;
  transition: color 0.12s;
}
.drillable-total:hover { color: var(--teal-dark, #0f766e); }

/* ─────────── 12-month cashflow forecast (Sprint 6.7) ─────────── */
.cf-bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 120px;
  padding: 0.7rem 0.5rem 0;
  margin-bottom: 1rem;
  background: var(--surface-soft, #f8fafc);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.cf-bar-col {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  flex: 1;
  height: 100%;
  position: relative;
}
.cf-bar-fill {
  width: 75%;
  background: var(--teal, #2EC4B6);
  border-radius: 3px 3px 0 0;
  min-height: 1px;
  transition: opacity 0.12s;
}
.cf-bar-col.is-negative .cf-bar-fill { background: var(--coral, #E17055); }
.cf-bar-col:hover .cf-bar-fill { opacity: 0.75; }
.cf-bar-label {
  font-size: 0.65rem;
  color: var(--ink-muted);
  margin-top: 4px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.forecast-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.cf-12-table {
  font-size: 0.78rem;
  min-width: 100%;
}
.cf-12-table th, .cf-12-table td {
  padding: 0.4rem 0.5rem;
  white-space: nowrap;
}
.cf-12-table th.is-overdue-col {
  background: rgba(254, 243, 199, 0.4);
}
.cf-12-table .fc-row-section td {
  background: var(--surface-soft, #f8fafc);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  padding: 0.4rem 0.5rem 0.3rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Sprint 7g — Design polish (additive overrides; loaded last so cascade wins)
 * 5 principles:
 *   1. Design tokens — additive variables for spacing & motion
 *   2. Typografie — tabular nums everywhere on numeric columns
 *   3. Modal/card polish — softer shadows, smoother enter
 *   4. Filter pills — refined active state with subtle elevation
 *   5. Tables — lighter row dividers, smoother hover
 * ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Spacing scale (4px grid) — for consistent padding/margins */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;

  /* Refined shadows — softer, more diffused */
  --shadow-soft-xs: 0 1px 2px rgba(15, 23, 42, 0.03);
  --shadow-soft-sm: 0 2px 4px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.03);
  --shadow-soft-md: 0 6px 16px rgba(15, 23, 42, 0.06), 0 2px 6px rgba(15, 23, 42, 0.03);
  --shadow-soft-lg: 0 16px 40px rgba(15, 23, 42, 0.10), 0 4px 12px rgba(15, 23, 42, 0.04);
  --shadow-modal: 0 32px 64px rgba(15, 23, 42, 0.18), 0 8px 24px rgba(15, 23, 42, 0.06);

  /* Motion curves */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --motion-fast:   150ms;
  --motion-medium: 220ms;
  --motion-slow:   320ms;

  /* Focus ring (consistent across forms) */
  --focus-ring: 0 0 0 3px rgba(46, 196, 182, 0.18);
}

/* ────── Typografie: tabular nums on EVERY numeric cell ────── */
/* CFO needs columns of numbers to align — even if developer forgot to add it. */
.col-amt, .col-yoy, .col-num, .num,
.kpi-value, .l1-amount, .l2-amount,
.cf-stat-value, .drill-summary-amount,
table td.num, table th.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ────── Page header — slightly larger h1, more breathing ────── */
.page-header { margin-bottom: var(--sp-6); padding-bottom: var(--sp-5); }
.page-header h1 {
  font-size: 1.85rem;
  letter-spacing: -0.025em;
  line-height: 1.15;
}
.page-header h1 strong { color: var(--teal-dark); }
.page-header .muted { font-size: 0.9rem; line-height: 1.5; }

/* ────── Cards: softer shadows + subtle hover lift ────── */
.kpi-card,
.aging-card,
.bucket-l1-card,
.client-card,
.quick-link-card {
  box-shadow: var(--shadow-soft-xs);
  transition: box-shadow var(--motion-medium) var(--ease-out),
              transform var(--motion-medium) var(--ease-out),
              border-color var(--motion-medium) var(--ease-out);
}
.kpi-card:hover,
.aging-card:hover,
.client-card:hover {
  box-shadow: var(--shadow-soft-sm);
}
.quick-link-card:hover:not(.disabled) {
  box-shadow: var(--shadow-soft-md);
  transform: translateY(-1px);
}

/* KPI card values — bigger visual punch */
.kpi-value {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0.3rem 0 0.4rem;
}
.kpi-card-emphasis {
  background: linear-gradient(180deg, var(--surface) 0%, rgba(46, 196, 182, 0.04) 100%);
  border-color: var(--teal-border);
}

/* ────── Modal polish: softer shadow, smoother enter ────── */
.drill-modal-panel {
  box-shadow: var(--shadow-modal);
  border-radius: 18px;
  animation: drillSlideInRefined var(--motion-slow) var(--ease-out);
}
@keyframes drillSlideInRefined {
  from { opacity: 0; transform: translateY(24px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
.drill-modal-backdrop {
  background: rgba(15, 23, 42, 0.50);
  backdrop-filter: blur(4px);
  animation: drillFadeIn var(--motion-medium) var(--ease-out);
}
.drill-modal-close {
  width: 36px; height: 36px;
  font-size: 1.05rem;
  box-shadow: var(--shadow-soft-sm);
  transition: all var(--motion-fast) var(--ease-out);
}
.drill-modal-close:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-soft-md);
}

/* ────── Filter pills: refined active state ────── */
.filter-pill, .year-pill, .month-pill {
  transition: all var(--motion-fast) var(--ease-out);
  font-weight: 600;
}
.filter-pill:hover:not(.is-active),
.year-pill:hover:not(.is-active),
.month-pill:hover:not(.is-active) {
  background: var(--teal-glow);
  border-color: var(--teal-border);
  color: var(--teal-dark);
  transform: translateY(-1px);
}
.filter-pill.is-active,
.year-pill.is-active,
.month-pill.is-active {
  box-shadow: 0 4px 12px rgba(46, 196, 182, 0.30),
              0 1px 2px rgba(46, 196, 182, 0.20);
  transform: translateY(-1px);
}
.filter-pill.is-warn.is-active {
  box-shadow: 0 4px 12px rgba(225, 112, 85, 0.30);
}
.filter-pill.is-info.is-active {
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.30);
}

/* ────── Tables: lighter dividers + smoother hover ────── */
.pl-table tbody tr,
.mapping-table tbody tr,
.drill-table tbody tr,
.layout-table tbody tr,
.proj-table tbody tr,
.recurring-table tbody tr {
  transition: background-color var(--motion-fast) ease;
}
.pl-table tbody td,
.mapping-table tbody td,
.drill-table tbody td,
.proj-table tbody td {
  border-bottom-color: rgba(226, 232, 240, 0.6);
}
.pl-table tbody tr:hover td,
.mapping-table tbody tr:hover td,
.drill-table tbody tr:hover td {
  background: rgba(46, 196, 182, 0.04);
}

/* Subtotal rows pop a bit more */
.pl-table .row-subtotal td {
  background: rgba(46, 196, 182, 0.025);
  border-top-color: var(--line);
}
.pl-table .row-subtotal.is-bold td {
  background: rgba(46, 196, 182, 0.05);
  border-top: 2px solid var(--teal-border);
}

/* ────── Form inputs — consistent focus ring ────── */
.drill-search-input:focus,
.drill-sort-select:focus,
.inline-edit-form input:focus,
.inline-edit-form select:focus,
.layout-form input:focus,
.layout-form select:focus,
.l2-action-form input:focus,
.l2-action-form select:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: var(--focus-ring);
}

/* ────── Empty state polish ────── */
.drill-empty,
.cf-drill-empty {
  padding: var(--sp-8) var(--sp-4);
  font-size: 0.95rem;
  color: var(--ink-soft);
}
.drill-empty::before,
.cf-drill-empty::before {
  content: "📭";
  display: block;
  font-size: 2rem;
  margin-bottom: var(--sp-3);
  opacity: 0.6;
}

/* ────── Topbar refinement — slightly more refined ────── */
.topbar { box-shadow: var(--shadow-soft-xs); }
.topbar-nav a {
  transition: color var(--motion-fast) ease;
  font-weight: 500;
}
.topbar-nav a:not(.btn-primary):not(.btn-ghost):hover { color: var(--teal-dark); }

/* ────── Breadcrumb in drill — clearer link affordance ────── */
.drill-breadcrumb a {
  color: var(--teal-dark);
  border-bottom: 1px dotted var(--teal-border);
  transition: all var(--motion-fast) ease;
  padding-bottom: 1px;
}
.drill-breadcrumb a:hover {
  color: var(--navy);
  border-bottom-color: var(--navy);
  text-decoration: none;
}

/* ────── Buttons: consistent system ────── */
.btn-primary, .btn-ghost {
  transition: all var(--motion-fast) var(--ease-out);
}
.btn-primary:hover, .btn-ghost:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-soft-sm);
}

/* ────── Section labels (small uppercase) — slightly tighter ────── */
.section-label {
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--teal-dark);
  font-size: 0.7rem;
}

/* ────── Slicer pills row — better visual grouping ────── */
.pl-slicer {
  background: var(--surface);
  box-shadow: var(--shadow-soft-xs);
}
.slicer-row .section-label {
  min-width: 130px;
}

/* ────── Drill summary amount — bigger, more dramatic ────── */
.drill-summary-amount {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* ────── Drillable rows — clearer affordance ────── */
.is-drillable, .is-clickable {
  transition: background-color var(--motion-fast) ease,
              transform var(--motion-fast) ease;
}

/* ────── L1 / L2 buckets cards — smoother ────── */
.bucket-l1-card { transition: box-shadow var(--motion-medium) var(--ease-out); }
.bucket-l1-card:hover { box-shadow: var(--shadow-soft-md); }

/* ─────────── Responsive ─────────── */
@media (max-width: 1100px) {
  .pl-tables { grid-template-columns: 1fr; }
  .buckets-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .hero-content { grid-template-columns: 1fr; gap: 2rem; }
  .features { grid-template-columns: repeat(2, 1fr); }
  .topbar { padding: 0.7rem 1rem; }
  .container { padding: 1.5rem 1rem; }
  .product-tag { display: none; }
}
@media (max-width: 540px) {
  .features { grid-template-columns: 1fr; }
  .cta-row { flex-direction: column; align-items: stretch; }
  .btn-primary, .btn-ghost { width: 100%; text-align: center; }
  .pl-table { font-size: 0.78rem; }
  .pl-table .col-name, .pl-table .col-amt, .pl-table .col-yoy { padding: 0.35rem 0.4rem; }
}

/* When P&L tables are stacked vertically on tablet, more horizontal room → bigger font */
@media (max-width: 1100px) {
  .pl-table { font-size: 0.88rem; }
  .pl-table .col-name { width: 30%; }
  .pl-table .col-amt  { width: 19%; }
  .pl-table .col-yoy  { width: 13%; }
}
/* On medium-narrow desktops where tables are still side-by-side but tight,
   shrink P&L font slightly so big numbers fit. */
@media (min-width: 1101px) and (max-width: 1500px) {
  .pl-table { font-size: 0.80rem; }
  .pl-table thead th { font-size: 0.66rem; }
}

/* ─────────── Sprint 7j — refresh button + clean progress panel (UX v2) ─────────── */
.refresh-panel { display: inline-block; vertical-align: middle; }
.refresh-btn   { white-space: nowrap; }

.refresh-progress,
.refresh-result {
  display: inline-flex;
  flex-direction: column;
  gap: .5rem;
  padding: .65rem .85rem;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  min-width: 360px;
  max-width: 540px;
  font-size: .9rem;
}
.refresh-success { background: #f0fdf4; border-color: #86efac; color: #166534; }
.refresh-error   { background: #fef2f2; border-color: #fca5a5; color: #991b1b; }

.refresh-status-line {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
}
.refresh-step  { font-size: .95rem; }
.refresh-eta   { margin-left: auto; font-size: .82rem; }
.refresh-meta  { font-size: .78rem; }
.refresh-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

.check-icon { color: #16a34a; font-size: 1.2rem; font-weight: 700; }
.error-icon { color: #dc2626; font-size: 1.2rem; font-weight: 700; }

/* Determinate progress bar — fills 0→100% with live percent label */
.progress-bar-determinate {
  position: relative; height: 18px;
  background: #e2e8f0; border-radius: 999px; overflow: hidden;
}
.progress-bar-fill-pct {
  position: absolute; inset: 0 auto 0 0;
  background: linear-gradient(90deg, var(--teal-dark, #1ea99e) 0%, #2cd5c2 100%);
  border-radius: 999px;
  transition: width .8s ease-out;
}
.progress-bar-label {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .78rem; color: #0f172a;
  letter-spacing: .03em; text-shadow: 0 0 2px rgba(255,255,255,.7);
}

.spinner {
  display: inline-block; width: 14px; height: 14px;
  border: 2px solid #cbd5e1;
  border-top-color: var(--teal-dark, #1ea99e);
  border-radius: 50%; animation: spinner-rot .9s linear infinite;
}
@keyframes spinner-rot { to { transform: rotate(360deg); } }

/* Admin-only collapsed tech log — small, subdued (NOT visible to end-users) */
.refresh-log-admin { margin-top: .25rem; font-size: .78rem; }
.refresh-log-admin summary {
  cursor: pointer; user-select: none; color: #64748b; padding: .15rem 0;
}
.refresh-log-tail {
  margin: .35rem 0 0; padding: .5rem .75rem;
  background: #0f172a; color: #cbd5e1; border-radius: 6px;
  max-height: 200px; overflow: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .72rem; line-height: 1.4;
  white-space: pre-wrap; word-break: break-word;
}

/* ─────────── Demo client view toggle (Sprint launch prep) ─────────── */
.view-toggle {
  display: inline-flex;
  gap: .25rem;
  margin-right: .75rem;
}
.view-toggle .filter-pill {
  padding: .35rem .7rem;
  font-size: .82rem;
}
.client-card-demo {
  border-style: dashed;
  border-color: #c084fc;
  background: linear-gradient(135deg, #faf5ff 0%, #fff 60%);
}
.demo-badge {
  display: inline-block;
  margin-left: .4rem;
  padding: 1px 6px;
  background: #a855f7;
  color: white;
  border-radius: 4px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  vertical-align: middle;
}

/* ─────────── Aging Detail page (Sprint 7.1+) ─────────── */

/* KPI cards row */
.aging-kpis {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  margin: 1.25rem 0;
}
@media (max-width: 1200px) { .aging-kpis { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .aging-kpis { grid-template-columns: 1fr; } }

.kpi-card {
  padding: .9rem 1rem;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  border-left: 4px solid var(--teal-dark, #1ea99e);
}
.kpi-card.kpi-dso { border-left-color: #f59e0b; }
.kpi-card.kpi-dpo { border-left-color: #6366f1; }
.kpi-card.kpi-warning { border-left-color: #dc2626; background: linear-gradient(135deg, #fef2f2 0%, #fff 80%); }
.kpi-label { font-size: .72rem; color: #64748b; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.kpi-value { font-size: 1.6rem; font-weight: 700; margin: .25rem 0; color: #0f172a; }
.kpi-value-name { font-size: 1rem; font-weight: 700; margin: .25rem 0; color: #991b1b;
                  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-unit { font-size: .9rem; color: #64748b; font-weight: 400; }
.kpi-sub { font-size: .82rem; color: #475569; }

/* Filter bar */
.aging-filters {
  display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
  padding: .75rem 1rem; background: #f8fafc; border-radius: 8px;
  margin-bottom: 1rem; font-size: .88rem;
}
.aging-filters .filter-check { display: flex; align-items: center; gap: .35rem; cursor: pointer; }
.aging-filters .filter-inline { display: flex; align-items: center; gap: .35rem; }
.aging-filters select, .aging-filters input[type="search"] {
  padding: .3rem .5rem; border: 1px solid #cbd5e1; border-radius: 6px;
}
.aging-filters .filter-search { flex: 1; min-width: 180px; }
.aging-filters .filter-search input { flex: 1; }

/* Side-by-side AR/AP layout */
.aging-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 1rem;
}
@media (max-width: 900px) { .aging-split { grid-template-columns: 1fr; } }

.aging-side {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 1.1rem 1.2rem;
}
.aging-side-head { display: flex; align-items: baseline; justify-content: space-between;
                   margin-bottom: 1rem; gap: .75rem; flex-wrap: wrap; }
.aging-side-head h2 { margin: 0; font-size: 1.05rem; }
.aging-ar { border-left: 4px solid #16a34a; }    /* green = money coming in */
.aging-ap { border-left: 4px solid #dc2626; }    /* red = money going out */

/* Bucket chart (stacked horizontal bar + table) */
.bucket-chart { margin-bottom: 1.25rem; }
.bucket-bar-stack {
  display: flex; height: 24px; border-radius: 6px; overflow: hidden;
  margin-bottom: .6rem; background: #f1f5f9;
}
.bucket-segment {
  display: flex; align-items: center; justify-content: center;
  font-size: .7rem; color: white; font-weight: 700;
  transition: all .2s ease; min-width: 1px;
}
.bucket-segment:hover { filter: brightness(1.1); }
.bucket-0_not_due { background: #16a34a; }    /* green = healthy */
.bucket-1_1_30    { background: #facc15; color: #422006; }
.bucket-2_31_60   { background: #fb923c; }
.bucket-3_61_90   { background: #ef4444; }
.bucket-4_90_plus { background: #991b1b; }

.bucket-table { width: 100%; font-size: .82rem; border-collapse: collapse; }
.bucket-table th, .bucket-table td { padding: .25rem .4rem; text-align: left; border-bottom: 1px solid #f1f5f9; }
.bucket-table th { color: #64748b; font-weight: 600; font-size: .72rem; text-transform: uppercase; }
.bucket-table td.num, .bucket-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.bucket-dot { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: .35rem; vertical-align: middle; }

/* Top partners table */
.top-partners-block { margin-top: 1.25rem; }
.top-title { font-size: .9rem; margin: 0 0 .5rem; color: #475569; font-weight: 600; }
.top-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.top-table th { text-align: left; padding: .4rem .5rem; background: #f8fafc;
                font-weight: 600; color: #475569; font-size: .72rem;
                text-transform: uppercase; letter-spacing: .03em; border-bottom: 1px solid #e2e8f0; }
.top-table td { padding: .4rem .5rem; border-bottom: 1px solid #f1f5f9; }
.top-table td.num, .top-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.top-table td.expand-icon {
  width: 22px; text-align: center; color: #94a3b8;
  display: inline-block; transition: transform .2s ease, color .15s ease;
}
.top-table tr.top-row { cursor: pointer; user-select: none; }
.top-table tr.top-row:hover { background: #f8fafc; }
.top-table tr.top-row:hover td.expand-icon { color: var(--teal-dark, #1ea99e); }
.top-table tr.top-row.is-expanded {
  background: #ecfeff;
  box-shadow: inset 3px 0 0 var(--teal-dark, #1ea99e);
}
.top-table tr.top-row.is-expanded td.expand-icon {
  color: var(--teal-dark, #1ea99e);
  transform: rotate(90deg);
  font-weight: 700;
}
.top-table .top-row-anon { background: rgba(241, 245, 249, .5); font-style: italic; }
.top-table .neg { color: #dc2626; font-weight: 600; }
.top-table code { font-size: .72rem; color: #94a3b8; margin-left: .35rem; }

/* Expand fragment styling */
.expand-row { background: #f8fafc; }
.expand-content { padding: .5rem .75rem; }
.invoices-table { width: 100%; font-size: .8rem; border-collapse: collapse; background: white;
                  border-radius: 6px; overflow: hidden; }
.invoices-table th { background: #e2e8f0; padding: .35rem .5rem; text-align: left; font-weight: 600; font-size: .7rem; text-transform: uppercase; color: #475569; }
.invoices-table td { padding: .35rem .5rem; border-bottom: 1px solid #f1f5f9; }
.invoices-table td.num, .invoices-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.invoices-table .neg { color: #dc2626; font-weight: 600; }

.bucket-pill { display: inline-block; padding: 1px 6px; border-radius: 4px; font-size: .7rem;
               font-weight: 600; color: white; }
.bucket-pill.bucket-0_not_due { background: #16a34a; }
.bucket-pill.bucket-1_1_30    { background: #facc15; color: #422006; }
.bucket-pill.bucket-2_31_60   { background: #fb923c; }
.bucket-pill.bucket-3_61_90   { background: #ef4444; }
.bucket-pill.bucket-4_90_plus { background: #991b1b; }

/* ─────────── Agency Cockpit (/clients page redesign) ─────────── */

/* Hero KPI strip */
.cockpit-kpis {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: .75rem;
  margin: 1rem 0 1.5rem;
}
@media (max-width: 1400px) { .cockpit-kpis { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 750px)  { .cockpit-kpis { grid-template-columns: repeat(2, 1fr); } }
.kpi-status-summary .kpi-status-row { display: flex; gap: .35rem; margin-top: .35rem; flex-wrap: wrap; }
.status-pill {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: .75rem; font-weight: 700; line-height: 1.4;
}
.status-pill.healthy { background: #dcfce7; color: #166534; }
.status-pill.warning { background: #fef3c7; color: #854d0e; }
.status-pill.error   { background: #fee2e2; color: #991b1b; }

/* Action items feed */
.cockpit-actions {
  background: white;
  border: 1px solid #fde68a;
  border-left: 4px solid #f59e0b;
  border-radius: 10px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
}
.cockpit-actions h3 { margin: 0 0 .65rem; font-size: 1rem; color: #92400e; }
.action-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .25rem; }
.action-item a {
  display: grid;
  grid-template-columns: 28px 200px 1fr 24px;
  gap: .65rem;
  padding: .4rem .6rem;
  border-radius: 6px;
  text-decoration: none;
  color: #1e293b;
  align-items: center;
  font-size: .88rem;
  transition: background .15s ease;
}
.action-item a:hover { background: #fef3c7; }
.action-item.action-sev-2 a { color: #991b1b; }
.action-item .action-icon { font-size: 1rem; }
.action-item .action-client { font-weight: 600; }
.action-item .action-msg { color: #475569; }
.action-item .action-arrow { color: #94a3b8; font-size: 1.1rem; text-align: right; }
@media (max-width: 700px) {
  .action-item a { grid-template-columns: 24px 1fr; gap: .35rem; }
  .action-item .action-msg, .action-item .action-arrow { display: none; }
}

/* Sort bar */
.cockpit-sortbar { display: flex; align-items: center; gap: .5rem; margin: 1rem 0 .75rem; flex-wrap: wrap; font-size: .85rem; }

/* Cockpit grid (rich cards) */
.cockpit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1rem;
}
.cockpit-card {
  background: white;
  border: 1px solid #e2e8f0;
  border-left: 4px solid #cbd5e1;
  border-radius: 10px;
  padding: 1rem 1.1rem;
  text-decoration: none;
  color: inherit;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  display: flex; flex-direction: column;
}
.cockpit-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.08); }
.cockpit-card.status-healthy { border-left-color: #16a34a; }
.cockpit-card.status-warning { border-left-color: #f59e0b; background: linear-gradient(135deg, #fffbeb 0%, #fff 80%); }
.cockpit-card.status-error   { border-left-color: #dc2626; background: linear-gradient(135deg, #fef2f2 0%, #fff 80%); }
.cockpit-card.cockpit-card-demo {
  border-style: dashed; border-color: #c084fc;
  background: linear-gradient(135deg, #faf5ff 0%, #fff 60%);
}

.cockpit-card-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: .8rem; gap: .5rem; }
.cockpit-card-title { flex: 1; min-width: 0; }
.cockpit-card-name { font-weight: 700; font-size: 1rem; color: #0f172a; line-height: 1.3; }
.cockpit-card-slug { font-size: .72rem; font-family: ui-monospace, monospace; margin-top: .1rem; }
.cockpit-status .status-pill { font-size: .85rem; padding: 2px 6px; }

.cockpit-card-kpis {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .5rem .75rem;
  padding: .5rem 0 .75rem;
  border-top: 1px solid #f1f5f9;
  border-bottom: 1px solid #f1f5f9;
  margin-bottom: .5rem;
}
.ckpi-label { font-size: .68rem; color: #64748b; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.ckpi-value { font-size: .95rem; font-weight: 700; color: #0f172a; margin-top: .15rem; }
.ckpi-value.neg { color: #dc2626; }
.ckpi-warn { font-size: .7rem; color: #b91c1c; margin-top: .2rem; font-weight: 600; }

.cockpit-card-foot {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .72rem; color: #64748b; gap: .5rem; flex-wrap: wrap;
}
.cockpit-card-meta { font-variant-numeric: tabular-nums; }

/* ─────────── Builder polish (Sprint 7i — confirm modal, add-row, toast, indent) ─────────── */

/* Generic confirm modal (also used for add-row) */
.confirm-modal {
  position: fixed; inset: 0;
  display: none;
  z-index: 9999;
}
.confirm-modal.is-open { display: block; }
.confirm-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(2px);
}
.confirm-modal-panel {
  position: absolute;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: white;
  border-radius: 12px;
  padding: 1.5rem 1.75rem;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  min-width: 380px; max-width: 480px;
  width: calc(100% - 2rem);
}
.confirm-modal-panel h3 { margin: 0 0 .65rem; font-size: 1.1rem; color: #0f172a; }
.confirm-modal-panel p { margin: 0 0 1.25rem; line-height: 1.45; }
.confirm-modal-actions {
  display: flex; gap: .65rem; justify-content: flex-end; margin-top: 1rem;
}
.confirm-modal-actions .btn-danger {
  background: #dc2626; color: white; border: none;
  padding: .55rem 1.1rem; border-radius: 6px; cursor: pointer; font-weight: 600;
}
.confirm-modal-actions .btn-danger:hover { background: #b91c1c; }

/* Add-row modal options (one button per line type) */
.addrow-options {
  display: flex; flex-direction: column; gap: .5rem;
  margin: .75rem 0 1rem;
}
.addrow-opt {
  display: flex; flex-direction: column; gap: .15rem;
  text-align: left;
  padding: .85rem 1rem;
  background: #f8fafc;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  cursor: pointer;
  transition: all .15s ease;
}
.addrow-opt:hover { border-color: var(--teal-dark, #1ea99e); background: #ecfeff; transform: translateX(2px); }
.addrow-opt strong { font-size: .95rem; color: #0f172a; }
.addrow-opt .muted { font-size: .82rem; }
.addrow-opt code { font-size: .75rem; background: #fff; padding: 1px 4px; border-radius: 3px; }

/* Save toast — fixed bottom-right, slides up + fades */
.save-toast {
  position: fixed;
  bottom: 24px; right: 24px;
  background: #16a34a;
  color: white;
  padding: .65rem 1.25rem;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(22, 163, 74, 0.4);
  font-weight: 600;
  font-size: .9rem;
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 10000;
}
.save-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Indent buttons (Builder canvas) — small ‹/› */
.btn-icon.btn-indent {
  width: 22px;
  font-size: 1.1rem;
  font-weight: 700;
  color: #64748b;
  padding: 2px 4px;
}
.btn-icon.btn-indent:hover:not([disabled]) {
  color: var(--teal-dark, #1ea99e);
  background: #ecfeff;
}
.btn-icon.btn-indent[disabled] {
  opacity: 0.3;
  cursor: not-allowed;
}

/* Add-row button in canvas header */
.btn-add-row {
  margin-left: auto;
  font-size: .85rem;
}
.canvas-header { display: flex; align-items: center; gap: .75rem; }

/* ─────────── Whitelabel mode (Sprint brand-protection) ─────────── */
.demo-banner {
  position: fixed;
  top: 0; left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #a855f7, #6366f1);
  color: white;
  padding: 3px 14px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  border-radius: 0 0 6px 6px;
  z-index: 100;
  box-shadow: 0 2px 6px rgba(99, 102, 241, 0.4);
}
.brand-text {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--brand-primary, #1E2761);
  letter-spacing: -0.01em;
}

/* ─────────── Balance Sheet view (Sprint BS) ─────────── */
.bs-controls { display: flex; flex-direction: column; gap: .5rem; margin: 1rem 0 1.25rem; }
.bs-controls .filter-row { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }

.bs-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 1rem;
}
@media (max-width: 1100px) { .bs-kpis { grid-template-columns: repeat(2, 1fr); } }
.kpi-card.kpi-balanced   { border-left-color: #16a34a; }
.kpi-card.kpi-imbalanced { border-left-color: #dc2626; background: linear-gradient(135deg, #fef2f2 0%, #fff 80%); }

.bs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
  margin-top: 1rem;
}
@media (max-width: 1200px) { .bs-grid { grid-template-columns: 1fr; } }

.bs-section {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 1rem 1.1rem;
}
.bs-section-asset     { border-left: 4px solid #16a34a; }
.bs-section-liability { border-left: 4px solid #dc2626; }
.bs-section-equity    { border-left: 4px solid #6366f1; }
.bs-section-head { display: flex; justify-content: space-between; align-items: baseline;
                   border-bottom: 2px solid #e2e8f0; padding-bottom: .5rem; margin-bottom: .8rem; }
.bs-section-head h2 { margin: 0; font-size: 1.1rem; }
.bs-section-total { font-size: 1.05rem; font-weight: 700; color: #0f172a; font-variant-numeric: tabular-nums; }

.bs-subclass { margin-bottom: 1rem; }
.bs-subclass-head { display: flex; justify-content: space-between; align-items: baseline;
                    background: #f8fafc; padding: .35rem .5rem; border-radius: 4px;
                    border-left: 3px solid #94a3b8; }
.bs-subclass-label { font-weight: 600; font-size: .82rem; }
.bs-subclass-label code { background: #e2e8f0; padding: 1px 4px; border-radius: 3px; font-size: .72rem; }
.bs-subclass-total { font-weight: 600; font-size: .85rem; font-variant-numeric: tabular-nums; }

.bs-accounts { width: 100%; font-size: .82rem; border-collapse: collapse; margin-top: .25rem; }
.bs-accounts td { padding: .25rem .5rem; border-bottom: 1px dashed #f1f5f9; }
.bs-accounts .bs-acc-code code { font-size: .72rem; color: #64748b; }
.bs-accounts .bs-acc-name { color: #475569; }
.bs-accounts .bs-acc-amount { text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; }

/* ─── Working Capital view (Sprint WC) ─── */
.wc-grid { grid-template-columns: 1fr 1fr; }
@media (max-width: 1100px) { .wc-grid { grid-template-columns: 1fr; } }

/* KPI band colors (good / ok / warning / danger / n/a) — for ratio cards */
.kpi-card.kpi-band-good    { border-left-color: #16a34a; }
.kpi-card.kpi-band-ok      { border-left-color: #65a30d; }
.kpi-card.kpi-band-warning { border-left-color: #f59e0b; background: linear-gradient(135deg, #fffbeb 0%, #fff 80%); }
.kpi-card.kpi-band-danger  { border-left-color: #dc2626; background: linear-gradient(135deg, #fef2f2 0%, #fff 80%); }
.kpi-card.kpi-band-na      { border-left-color: #94a3b8; }

/* Context strip (long-term / equity, smaller cards) */
.wc-context-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem;
}
@media (max-width: 800px) { .wc-context-grid { grid-template-columns: 1fr; } }
.wc-mini-card {
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px;
  padding: 0.6rem 0.85rem;
}
.wc-mini-card .kpi-label { font-size: .7rem; }
.wc-mini-card .kpi-value { margin-top: .1rem; }

/* ─── P&L Revenue trend (Sprint Tržby) ─── */
.revenue-trend {
  margin-top: 2rem; padding: 1.25rem; background: #f8fafc;
  border-radius: 8px; border: 1px solid #e2e8f0;
}
.revenue-trend .rt-head {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
  gap: 1rem; margin-bottom: .75rem;
}
.revenue-trend .rt-head h2 { margin: 0; font-size: 1.05rem; }
.rt-compare-toggle { display: flex; gap: .35rem; align-items: center; flex-wrap: wrap; }

.rt-totals {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem;
  margin-bottom: 1rem;
}
@media (max-width: 700px) { .rt-totals { grid-template-columns: 1fr; } }
.rt-total-card {
  background: var(--surface, #fff); border: 1px solid #e2e8f0; border-left: 3px solid #94a3b8;
  border-radius: 6px; padding: 0.55rem 0.85rem;
}
.rt-total-card .kpi-label { font-size: .68rem; }
.rt-total-card .kpi-value { font-size: 1.15rem; margin-top: .15rem; }
.rt-total-card.rt-delta-pos { border-left-color: #16a34a; }
.rt-total-card.rt-delta-neg { border-left-color: #dc2626; }

.rt-table { width: 100%; border-collapse: collapse; font-size: .85rem; background: #fff;
            border: 1px solid #e2e8f0; border-radius: 6px; overflow: hidden; }
.rt-table th, .rt-table td { padding: .35rem .55rem; border-bottom: 1px solid #f1f5f9; }
.rt-table th { background: #f1f5f9; font-weight: 600; text-align: left; font-size: .76rem;
               color: #475569; text-transform: uppercase; letter-spacing: .03em; }
.rt-table td.num, .rt-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.rt-table tfoot td { background: #f8fafc; border-top: 2px solid #cbd5e1; font-weight: 600; }
.rt-table .rt-empty-row { opacity: .45; }
.rt-month-col { width: 90px; }
.rt-bar-col { min-width: 200px; max-width: 320px; }

/* Stacked thin bars: AC on top, compare below */
.rt-bar-pair { display: flex; flex-direction: column; gap: 2px; }
.rt-bar { height: 7px; border-radius: 2px; min-width: 0px; }
.rt-bar-ac      { background: linear-gradient(90deg, #14b8a6 0%, #0d9488 100%); }
.rt-bar-compare { background: #cbd5e1; }

.rt-delta-pos { color: #16a34a; }
.rt-delta-neg { color: #dc2626; }

/* Responsive: hide bar column on narrow */
@media (max-width: 800px) {
  .rt-bar-col { display: none; }
}

/* ─── Runway / Burn rate (Sprint Runway) ─── */
.rw-chart-section { margin-top: 1rem; }
.rw-chart-card {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 6px;
  padding: 0.75rem 0.85rem;
}
.rw-chart-title {
  font-size: .8rem; color: #475569; font-weight: 600; margin-bottom: .35rem;
  text-transform: uppercase; letter-spacing: .03em;
}

/* Status colored callouts (reuse existing callout classes if present) */
.callout-info {
  padding: 0.75rem 1rem; background: #eff6ff; border-left: 3px solid #3b82f6;
  border-radius: 4px; color: #1e40af;
}
.callout-danger {
  padding: 0.75rem 1rem; background: #fef2f2; border-left: 3px solid #dc2626;
  border-radius: 4px; color: #991b1b;
}

/* ─── Admin user-creation form ─── */
.admin-create-form {
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px;
  padding: 1rem 1.25rem; margin-bottom: 1rem;
}
.admin-form-row {
  display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: .6rem;
}
.admin-form-row label {
  display: flex; flex-direction: column; gap: .25rem; flex: 1; min-width: 200px;
}
.admin-form-row .form-label {
  font-size: .8rem; font-weight: 600; color: #475569;
  text-transform: uppercase; letter-spacing: .03em;
}
.admin-form-row input[type="email"],
.admin-form-row input[type="text"],
.admin-form-row select {
  padding: .45rem .65rem; border: 1px solid #cbd5e1; border-radius: 4px;
  font-size: .9rem; background: #fff;
}
.admin-form-row select[multiple] { padding: .25rem; }
.btn-sm { font-size: .78rem; padding: .25rem .55rem; }

/* Role badges (additional colors) */
.badge-cfo            { background: #14b8a6; color: #fff; }
.badge-admin          { background: #6366f1; color: #fff; }
.badge-agency_admin   { background: #8b5cf6; color: #fff; }
.badge-end_client     { background: #94a3b8; color: #fff; }
.badge {
  display: inline-block; padding: 1px 7px; border-radius: 10px;
  font-size: .7rem; font-weight: 600; text-transform: uppercase;
}

/* ─── i18n language switcher (top nav) ─── */
.lang-switcher {
  display: inline-flex; gap: 2px; align-items: center; margin: 0 .35rem;
  border: 1px solid #cbd5e1; border-radius: 5px; overflow: hidden;
}
.lang-pill {
  display: inline-block; padding: 3px 8px;
  font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  line-height: 1.4; color: #64748b; background: #fff;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.lang-pill:hover { background: #f1f5f9; color: #0f172a; }
.lang-pill.is-active {
  background: #14b8a6; color: #fff;
}

/* ─── AI Agent chat (Phase 3) ─── */
.ai-chat-wrap {
  display: flex; flex-direction: column; max-width: 920px; margin: 0 auto;
  height: calc(100vh - 200px); min-height: 480px;
}
.chat-history {
  flex: 1; overflow-y: auto; padding: 1rem;
  background: #fafbfc; border: 1px solid #e2e8f0; border-radius: 8px 8px 0 0;
  display: flex; flex-direction: column; gap: 1rem;
}
.chat-empty {
  text-align: center; padding: 2rem 1rem; margin: auto 0;
}
.chat-suggestions {
  display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center;
  margin-top: 1rem; max-width: 600px; margin-left: auto; margin-right: auto;
}
.chat-suggestion {
  padding: .4rem .75rem; font-size: .82rem;
  background: #fff; border: 1px solid #cbd5e1; border-radius: 16px;
  cursor: pointer; transition: all .15s;
}
.chat-suggestion:hover {
  background: #f0f9ff; border-color: #14b8a6; color: #0d9488;
}
.chat-turn { display: flex; flex-direction: column; gap: .35rem; }
.chat-bubble {
  padding: .65rem .9rem; border-radius: 10px; max-width: 85%;
  font-size: .92rem; line-height: 1.5;
}
.chat-bubble-user {
  align-self: flex-end; background: #14b8a6; color: #fff;
}
.chat-bubble-user .chat-bubble-role { color: rgba(255,255,255,0.85); }
.chat-bubble-assistant {
  align-self: flex-start; background: #fff;
  border: 1px solid #e2e8f0;
}
.chat-bubble-role {
  font-size: .68rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; opacity: .65; margin-bottom: .2rem;
}
.chat-bubble-text { white-space: pre-wrap; word-wrap: break-word; }
.chat-bubble-text code {
  background: rgba(0,0,0,.06); padding: 1px 5px; border-radius: 3px;
  font-size: .85rem;
}
.chat-bubble-user .chat-bubble-text code { background: rgba(255,255,255,.18); }
.chat-tool-trace { margin-top: .5rem; }
.chat-tool-list {
  list-style: none; padding-left: 0; margin: .25rem 0;
  background: #f1f5f9; border-radius: 4px; padding: .35rem .5rem;
}
.chat-tool-item { font-size: .78rem; padding: .15rem 0; }
.chat-tool-err { color: #dc2626; margin-left: .5rem; font-size: .75rem; }

.chat-input-form {
  display: flex; gap: .5rem; padding: .75rem;
  background: #fff; border: 1px solid #e2e8f0; border-top: none;
  border-radius: 0 0 8px 8px;
}
.chat-input-form textarea {
  flex: 1; padding: .55rem .75rem;
  border: 1px solid #cbd5e1; border-radius: 6px;
  font-family: inherit; font-size: .92rem; resize: vertical;
  min-height: 2.5em; max-height: 8em;
}
.chat-input-form textarea:focus {
  outline: 2px solid #14b8a6; outline-offset: -1px;
  border-color: #14b8a6;
}
.chat-input-form button { align-self: flex-end; }

.quick-link-ai { border-left: 3px solid #8b5cf6 !important; }
.quick-link-ai:hover { border-left-color: #7c3aed !important; }

/* ─── Builder Polish #7: bulk select + action bar ─── */
.bulk-select-all {
  display: inline-flex; gap: .25rem; align-items: center; cursor: pointer;
  margin-left: .75rem; font-size: .82rem;
}
.canvas-bulk-check {
  display: inline-flex; align-items: center; padding: 0 .35rem; cursor: pointer;
}
.canvas-bulk-check input[type="checkbox"] {
  cursor: pointer; transform: scale(1.1);
}
.canvas-line:has(.bulk-row-check:checked) {
  background: linear-gradient(90deg, #fef3c7 0%, #fff 80%) !important;
  outline: 2px solid #f59e0b; outline-offset: -2px;
}
.bulk-action-bar {
  position: sticky; top: 0; z-index: 10;
  display: flex; gap: 1rem; align-items: center; justify-content: space-between;
  padding: .5rem .85rem; margin-bottom: .5rem;
  background: linear-gradient(90deg, #fef3c7 0%, #fffbeb 100%);
  border: 1px solid #f59e0b; border-radius: 6px;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.15);
  animation: bulk-bar-in 0.18s ease-out;
}
@keyframes bulk-bar-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.bulk-action-bar[hidden] { display: none !important; }
.bulk-count {
  font-size: .9rem; color: #92400e;
}
.bulk-count strong { font-size: 1.05rem; color: #78350f; }
.bulk-actions { display: flex; gap: .35rem; flex-wrap: wrap; }

/* ─── Builder Polish #5: formula live validation ─── */
.formula-input {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: .9rem;
  width: 100%;
}
.formula-status {
  font-size: .82rem; margin-top: .25rem; padding: .25rem .55rem;
  min-height: 1.2em; border-radius: 4px;
}
.formula-status-ok   { background: #ecfdf5; color: #047857; }
.formula-status-err  { background: #fef2f2; color: #991b1b; }
.formula-status-warn { background: #fffbeb; color: #92400e; }
.ref-tag {
  display: inline-block; padding: 2px 6px; margin: 2px;
  background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe;
  border-radius: 4px; font-size: .78rem; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.ref-tag:hover { background: #dbeafe; border-color: #60a5fa; }
.formula-save-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ─── Builder Polish #6: history slide-in panel ─── */
.history-panel {
  position: fixed; top: 0; right: 0; width: 380px; max-width: 95vw;
  height: 100vh; background: #fff; border-left: 1px solid #cbd5e1;
  box-shadow: -4px 0 12px rgba(0, 0, 0, .12);
  overflow-y: auto; z-index: 100;
  animation: slide-in 0.18s ease-out;
}
@keyframes slide-in {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
.history-panel-head {
  position: sticky; top: 0; background: #f8fafc;
  display: flex; justify-content: space-between; align-items: center;
  padding: .75rem 1rem; border-bottom: 1px solid #e2e8f0;
}
.history-panel-head h3 { margin: 0; font-size: 1rem; }
.history-empty { padding: 1.5rem 1rem; text-align: center; }
.history-list {
  list-style: none; padding: .5rem; margin: 0;
}
.history-item {
  display: flex; gap: .5rem; align-items: flex-start; justify-content: space-between;
  padding: .5rem .65rem; margin: .25rem 0;
  border: 1px solid #e2e8f0; border-radius: 6px;
  background: #fafbfc;
}
.history-item:hover { background: #f0f9ff; border-color: #14b8a6; }
.history-item-info { flex: 1; min-width: 0; }
.history-summary {
  font-size: .85rem; font-weight: 500; color: #1e293b;
  word-break: break-word;
}
.history-meta {
  font-size: .72rem; margin-top: .15rem; color: #64748b;
}
.history-meta code { font-size: .7rem; }

/* ─────────── F12 — Side-by-side compare modal (Petr 2026-05-09 day) ─────────── */

/* When drill-modal contains a compare-modal, expand the panel to fit two tables */
.drill-modal-panel:has(.compare-modal) {
  width: 1500px;
  max-width: 96vw;
}

.compare-modal {
  display: flex; flex-direction: column;
  gap: 0.8rem;
}

.compare-modal-header h2 {
  margin: 0 0 0.4rem;
  font-size: 1.15rem;
  display: flex; align-items: center; gap: 0.6rem;
}
.compare-diff-summary {
  margin: 0 0 0.4rem;
  font-size: 0.82rem;
}
.compare-legend {
  display: flex; gap: 0.5rem; flex-wrap: wrap;
}
.legend-chip {
  font-size: 0.72rem; padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
}
.legend-chip.legend-added   { background: rgba(46, 196, 182, 0.15); color: var(--teal-dark, #1ea99e); border-color: var(--teal-border, #5eead4); }
.legend-chip.legend-deleted { background: rgba(225, 112, 85, 0.13); color: var(--coral, #E17055);     border-color: rgba(225, 112, 85, 0.35); }

/* Two-column split — equal width tables side-by-side */
.compare-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: start;
}

.compare-pane {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.compare-pane.compare-baseline { border-left: 3px solid #94a3b8; }    /* slate */
.compare-pane.compare-proposed { border-left: 3px solid var(--teal-dark, #1ea99e); }

.compare-pane-header {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 0.55rem 0.85rem;
  background: var(--surface-soft, #f8fafc);
  border-bottom: 1px solid var(--line);
}
.compare-pane-header h3 { margin: 0; font-size: 0.92rem; }
.compare-pane-header .muted { font-size: 0.72rem; }

.compare-table { width: 100%; font-size: 0.78rem; }
.compare-table .preview-name  { padding-left: 6px; }
.compare-table td, .compare-table th { padding: 4px 8px; }

/* Diff row coloring */
.compare-row-added td   { background: rgba(46, 196, 182, 0.10); }
.compare-row-deleted td { background: rgba(225, 112, 85, 0.10); text-decoration: line-through; opacity: 0.7; }
.compare-marker {
  display: inline-block;
  width: 14px;
  font-weight: 700;
  margin-right: 4px;
}
.compare-row-added   .compare-marker { color: var(--teal-dark, #1ea99e); }
.compare-row-deleted .compare-marker { color: var(--coral, #E17055); }

/* Builder save-button area: compare button styling */
.btn-compare-builder {
  font-family: inherit;
  font-size: 0.85rem;
  padding: 0.45rem 0.9rem;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.35rem;
  transition: all 0.12s;
}
.btn-compare-builder:hover:not(:disabled) {
  border-color: var(--teal-dark, #1ea99e);
  color: var(--teal-dark, #1ea99e);
  background: rgba(46, 196, 182, 0.05);
}
.btn-compare-builder:disabled { opacity: 0.5; cursor: not-allowed; }

/* Mobile: stack panes vertically */
@media (max-width: 900px) {
  .drill-modal-panel:has(.compare-modal) { width: 96vw; }
  .compare-split { grid-template-columns: 1fr; }
}

/* ─────────── F12+ Phase 2 — Excel import preview modal (Petr 2026-05-09) ─────────── */

.import-preview-modal {
  display: flex; flex-direction: column;
  gap: 0.6rem;
}
.import-modal-header h2 {
  margin: 0 0 0.4rem;
  font-size: 1.1rem;
  display: flex; align-items: center; gap: 0.6rem;
}
.import-diff-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
}
.diff-card {
  background: var(--surface-soft, #f8fafc);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.75rem 0.9rem;
}
.diff-card-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.4rem;
}
.diff-card-counts {
  display: flex; gap: 0.5rem; align-items: baseline;
  margin-bottom: 0.55rem;
}
.diff-card-counts .diff-stat strong { font-size: 1.2rem; color: var(--ink); }
.diff-card-counts .diff-current { color: var(--ink-muted); font-size: 0.78rem; }
.diff-breakdown {
  display: flex; gap: 0.35rem; flex-wrap: wrap;
}
.diff-chip {
  font-size: 0.72rem;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-weight: 600;
}
.diff-chip.diff-added     { background: rgba(46, 196, 182, 0.12); color: var(--teal-dark, #1ea99e); border-color: var(--teal-border, #5eead4); }
.diff-chip.diff-modified  { background: rgba(250, 204, 21, 0.18); color: #92400e; border-color: rgba(250, 204, 21, 0.5); }
.diff-chip.diff-deleted   { background: rgba(225, 112, 85, 0.12); color: var(--coral, #E17055); border-color: rgba(225, 112, 85, 0.35); }
.diff-chip.diff-unchanged { background: var(--surface); color: var(--ink-muted); }

.import-modal-actions {
  display: flex; justify-content: flex-end; gap: 0.5rem;
  padding-top: 0.4rem;
  border-top: 1px solid var(--line);
}

/* Wider modal panel when import preview is shown */
.drill-modal-panel:has(.import-preview-modal) {
  width: 1100px;
  max-width: 96vw;
}
@media (max-width: 700px) {
  .import-diff-grid { grid-template-columns: 1fr; }
}