/* ============================================================
   TMB Books — design tokens
   Deep navy + teal accent
   ============================================================ */
:root {
  --navy: #0F2940;
  --navy-700: #14324F;
  --navy-900: #0A1F33;
  --teal: #14B8A6;
  --teal-600: #0D9488;
  --teal-50: #ECFDF5;
  --bg: #F4F6F9;
  --card: #FFFFFF;
  --border: #E2E6EC;
  --text: #0F2940;
  --muted: #64748B;
  --muted-2: #94A3B8;
  --success: #10B981;
  --warning: #F59E0B;
  --danger: #EF4444;
  --radius: 8px;
  --shadow-sm: 0 1px 2px rgba(15, 41, 64, 0.06);
  --shadow: 0 4px 16px rgba(15, 41, 64, 0.08);
  --font: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  font-size: 14px;
  line-height: 1.45;
}
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: inherit; }
a { color: var(--teal-600); text-decoration: none; }
a:hover { text-decoration: underline; }
.center { text-align: center; }
.small { font-size: 12px; }
.muted { color: var(--muted); }
.error { color: var(--danger); margin-top: 8px; min-height: 18px; }

/* ============================================================
   Login + register
   ============================================================ */
.login-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-900) 100%);
  padding: 24px;
}
.login-card {
  width: 100%;
  max-width: 380px;
  background: var(--card);
  border-radius: 12px;
  padding: 32px;
  box-shadow: var(--shadow);
}
.login-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; }
.login-logo .mark {
  width: 38px; height: 38px; border-radius: 9px;
  background: var(--navy); color: white;
  display: grid; place-items: center;
  font-weight: 600; font-size: 15px; letter-spacing: -0.6px;
  font-family: -apple-system, "SF Pro Display", "Inter", sans-serif;
}
.login-logo .name { font-weight: 600; font-size: 18px; letter-spacing: -0.2px; }

/* NiggaBooks PNG logo
   Topbar: split-half effect — top half white inside the navbar, bottom half
   black hanging below. Two img elements stacked, each clipped to one half. */
.topbar { overflow: visible; }
.topbar .brand {
  position: relative;
  width: 104px;
  height: 56px;          /* same as topbar; imgs overflow below */
  cursor: pointer;
  background: transparent;
  padding: 0;
  margin-right: 12px;
  border-radius: 0;
  align-self: stretch;
  flex-shrink: 0;
}
.topbar .brand:hover { background: transparent; }
.topbar .brand-img-top,
.topbar .brand-img-bottom {
  position: absolute;
  top: 12px;             /* logo bottom-of-N (57 % of img) lands at topbar bottom (56px) */
  left: 0;
  width: 104px;
  height: 77px;          /* 5 % smaller than the previous 81px */
  display: block;
  user-select: none;
  cursor: pointer;
}
.topbar .brand-img-top {
  filter: brightness(0) invert(1);   /* white */
  -webkit-clip-path: inset(0 0 43% 0);
          clip-path: inset(0 0 43% 0);          /* show top 57 % — letters only */
}
.topbar .brand-img-bottom {
  filter: brightness(0);             /* black */
  -webkit-clip-path: inset(57% 0 0 0);
          clip-path: inset(57% 0 0 0);          /* show bottom 43 % — book swoosh */
  z-index: 5;
}

.login-logo-img {
  height: 96px;
  width: auto;
  display: block;
  margin-bottom: 8px;
}
.login-card h1 { font-size: 20px; margin: 0 0 4px; }
.login-card p.muted { color: var(--muted); margin: 0 0 20px; font-size: 13px; }

/* Form fields */
.field { margin-bottom: 14px; }
.field label {
  display: block; margin-bottom: 6px;
  font-size: 12px; color: var(--muted); font-weight: 500;
}
.field input, .field select, .field textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: white;
  color: var(--text);
  transition: border-color 0.15s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.15);
}

/* Hide the up/down spinner buttons on number inputs — they're noisy in
   amount fields and one wheel-scroll can change the value by accident. */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.ob-amt {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: white;
  font-variant-numeric: tabular-nums;
}

/* Date-picker modal — custom calendar that matches the rest of the app
   (same shadow-drop animation, rounded corners, navy header, teal accents). */
.dp-modal {
  padding: 0;
  border-radius: 14px;
  overflow: hidden;
  max-width: 340px;
  width: 92vw;
}
.dp-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  background: var(--navy);
  color: white;
  user-select: none;
}
.dp-header .dp-month { font-weight: 600; font-size: 15px; letter-spacing: 0.2px; }
.dp-arrow {
  background: rgba(255,255,255,0.10);
  border: none;
  color: white;
  width: 32px; height: 32px;
  border-radius: 50%;
  font-size: 20px; line-height: 1;
  cursor: pointer;
  transition: background 0.12s, transform 0.12s;
  display: grid; place-items: center;
}
.dp-arrow:hover { background: rgba(255,255,255,0.22); }
.dp-arrow:active { transform: scale(0.92); }

.dp-grid-wrap { padding: 14px; touch-action: pan-y; }
.dp-headers {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 6px;
}
.dp-day-header {
  text-align: center;
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.4px;
}
.dp-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.dp-day {
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  transition: background 0.12s, color 0.12s, transform 0.08s;
}
.dp-day:not(.dp-blank):not(.dp-selected):hover { background: var(--teal-50); }
.dp-day:not(.dp-blank):active { transform: scale(0.94); }
.dp-blank { cursor: default; }
.dp-today { color: var(--teal-600); font-weight: 700; }
.dp-selected {
  background: var(--teal);
  color: white;
  font-weight: 600;
}
.dp-selected:hover { background: var(--teal-600); }

/* Year-picker mode — clicking the year in the day-grid header flips the
 * picker into this 12-cell grid. Re-uses .dp-today / .dp-selected so the
 * current year and the currently-viewed year highlight the same way day
 * cells do. The header year is shown as a clickable underlined link. */
.dp-year-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 6px 4px;
}
.dp-year-cell {
  padding: 14px 6px;
  text-align: center;
  cursor: pointer;
  border-radius: 8px;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  user-select: none;
  transition: background 0.12s, color 0.12s, transform 0.08s;
}
.dp-year-cell:hover { background: var(--teal-50); }
.dp-year-cell.dp-today { color: var(--teal-600); font-weight: 700; }
.dp-year-cell.dp-selected {
  background: var(--teal);
  color: white;
  font-weight: 600;
}
.dp-year-cell.dp-selected:hover { background: var(--teal-600); }
.dp-year-cell:active { transform: scale(0.94); }
.dp-year-link {
  cursor: pointer;
  border-bottom: 1px dashed currentColor;
  padding-bottom: 1px;
  transition: color 0.12s;
}
.dp-year-link:hover { color: var(--teal-600); }
.dp-footer {
  padding: 8px 14px 14px;
  display: flex; gap: 8px; align-items: center;
}
.dp-footer .dp-quick {
  padding: 4px 10px; font-size: 12px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px; color: var(--muted);
  cursor: pointer;
}
.dp-footer .dp-quick:hover { background: var(--teal-50); border-color: var(--teal); color: var(--teal-600); }

/* Slide animation when stepping months left/right. */
.dp-grid.dp-slide-next { -webkit-animation: dp-in-right 0.22s ease both; animation: dp-in-right 0.22s ease both; }
.dp-grid.dp-slide-prev { -webkit-animation: dp-in-left  0.22s ease both; animation: dp-in-left  0.22s ease both; }
@-webkit-keyframes dp-in-right { 0% { -webkit-transform: translateX(40px); opacity: 0; } 100% { -webkit-transform: translateX(0); opacity: 1; } }
        @keyframes dp-in-right { 0% { transform: translateX(40px); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } }
@-webkit-keyframes dp-in-left  { 0% { -webkit-transform: translateX(-40px); opacity: 0; } 100% { -webkit-transform: translateX(0); opacity: 1; } }
        @keyframes dp-in-left  { 0% { transform: translateX(-40px); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } }

/* Custom-trigger button that replaces native <input type="date"> */
.dp-trigger {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 12px;
  width: 100%;
  background: white;
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  color: var(--text);
  transition: border-color 0.12s;
  text-align: left;
}
.dp-trigger:hover { border-color: var(--teal); }
.dp-trigger .dp-icon { font-size: 16px; opacity: 0.7; flex-shrink: 0; }
/* Compact dp-trigger — same look, tighter sizing to match the
   proportions of the native <select>s the bulk-apply bar previously
   used. Used inline in dense bars (CSV preview bulk bar) where a
   full-size dp-trigger would feel oversized. */
.dp-trigger.dp-compact {
  padding: 5px 8px;
  font-size: 12px;
  width: auto;
}
.dp-trigger.dp-compact .dp-icon { font-size: 11px; }
/* Single-line value with ellipsis when the picker is narrow (e.g. CSV
   preview cells with long account / VAT names like "23% DPH Slovakia"
   or "Refund - Vending Machine"). min-width: 0 lets the flex item
   actually shrink below its content's natural width so overflow:hidden
   takes effect. Without these rules the long value wraps and the cell
   grows tall, making Confident rows visually heavier than empty
   Needs-review rows. */
.dp-trigger .dp-value {
  flex: 1;
  min-width: 0;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Native <select>s inside the Split editor — visually align with the
   dp-trigger pickers used everywhere else (JE editor, CSV bulk bar,
   account drill-downs, etc.). The split editor still uses raw <select>
   under the hood for simplicity; this CSS removes the OS-default
   chrome (system chevron, system fonts, native border) and re-paints
   them as rounded white bordered pills with a hand-drawn SVG chevron —
   identical visual weight to a dp-trigger so the editor no longer
   feels like a different app. */
.modal select.split-type,
.modal select.split-transfer,
.modal select.split-parent,
.modal select.split-child,
.modal select.split-cls,
.modal select.split-vat {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: white;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 26px 6px 10px;
  font-family: inherit;
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.12s;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' width='12' height='8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23999' stroke-width='1.5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 10px 7px;
}
.modal select.split-type:hover,
.modal select.split-transfer:hover,
.modal select.split-parent:hover,
.modal select.split-child:hover,
.modal select.split-cls:hover,
.modal select.split-vat:hover { border-color: var(--teal); }
.modal select.split-type:focus,
.modal select.split-transfer:focus,
.modal select.split-parent:focus,
.modal select.split-child:focus,
.modal select.split-cls:focus,
.modal select.split-vat:focus { outline: none; border-color: var(--teal); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px;
  border: 1px solid var(--border);
  background: white;
  color: var(--text);
  border-radius: 6px;
  font-size: 13px; font-weight: 500;
  transition: all 0.12s;
}
.btn:hover { background: #F8FAFC; }
.btn-primary { background: var(--teal); border-color: var(--teal); color: white; }
.btn-primary:hover { background: var(--teal-600); border-color: var(--teal-600); }
.btn-navy { background: var(--navy); border-color: var(--navy); color: white; }
.btn-navy:hover { background: var(--navy-700); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn-ghost:hover { background: rgba(15, 41, 64, 0.05); color: var(--text); }
.btn-danger { background: white; color: var(--danger); border-color: #FECACA; }
.btn-danger:hover { background: #FEF2F2; }
.btn-block { width: 100%; justify-content: center; }
.btn-sm { padding: 5px 10px; font-size: 12px; }

hr { border: none; border-top: 1px solid var(--border); margin: 14px 0; }

/* ============================================================
   App shell - top bar
   ============================================================ */
.topbar {
  background: var(--navy);
  color: white;
  height: 56px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 18px;
  box-shadow: 0 1px 0 var(--navy-900);
}
.topbar .brand {
  display: flex; align-items: center; gap: 9px; margin-right: 8px;
  cursor: pointer;
  padding: 4px 8px; border-radius: 8px;
  transition: background 0.12s;
}
.topbar .brand:hover { background: rgba(255,255,255,0.06); }
.topbar .brand .mark {
  width: 30px; height: 30px; border-radius: 7px;
  background: var(--teal); color: var(--navy);
  display: grid; place-items: center;
  font-weight: 700; font-size: 12px; letter-spacing: -0.5px;
  font-family: -apple-system, "SF Pro Display", "Inter", sans-serif;
}
.topbar .brand .name {
  font-weight: 600; font-size: 15px;
  letter-spacing: -0.2px;
}
.topnav { display: flex; align-items: center; gap: 2px; height: 100%; }
.topnav button {
  background: transparent; border: none;
  color: rgba(255,255,255,0.78);
  height: 100%;
  padding: 0 14px;
  font-size: 13.5px; font-weight: 500;
  border-bottom: 2px solid transparent;
  transition: color 0.12s, border-color 0.12s;
}
.topnav button:hover { color: white; }
.topnav button.active { color: white; border-bottom-color: var(--teal); }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.company-switcher {
  background: var(--navy-700);
  border: 1px solid rgba(255,255,255,0.1);
  color: white; padding: 6px 12px; border-radius: 6px; font-size: 13px;
  display: flex; align-items: center; gap: 6px;
}
.company-switcher:hover { background: var(--navy-900); }
.user-pill {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--teal); color: var(--navy);
  display: grid; place-items: center; font-weight: 600; font-size: 13px;
  cursor: pointer; border: none;
}
.caret { opacity: 0.7; }

/* ============================================================
   Page layout
   ============================================================ */
main.content {
  padding: 24px 28px;
  max-width: 1400px;
  margin: 0 auto;
}
.page-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px; gap: 12px;
}
.page-header h1 { font-size: 22px; margin: 0; font-weight: 600; }
.page-header .actions { display: flex; gap: 8px; align-items: center; }
.breadcrumb { color: var(--muted); font-size: 12px; margin-bottom: 4px; }

/* Cards */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.card-pad { padding: 18px 20px; }
.card-h {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.card-h h2 { font-size: 15px; margin: 0; font-weight: 600; }
.card-h .meta { font-size: 12px; color: var(--muted); }

/* KPI grid */
.kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}
.kpi {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow-sm);
}
.kpi .label { font-size: 12px; color: var(--muted); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.4px; font-weight: 500; }
.kpi .value { font-size: 22px; font-weight: 600; color: var(--navy); }
.kpi .delta { font-size: 12px; margin-top: 4px; color: var(--muted); }
.kpi .delta.up { color: var(--success); }
.kpi .delta.down { color: var(--danger); }

.grid-2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

/* Tables */
table.t { width: 100%; border-collapse: collapse; font-size: 13px; }
table.t th, table.t td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
table.t th {
  background: #FAFBFC;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--muted); font-weight: 600;
}
table.t tbody tr:hover { background: #FAFBFC; }

/* Settings list wrappers (Classes / Locations / etc.) — cap visible
   height to ~8 rows and let the rest scroll, so adding more entries
   doesn't grow the Settings page indefinitely. Each row is ~40px
   plus a header of ~36px → 8 rows = ~360px total. The thead stays
   pinned via sticky positioning so column titles never scroll out. */
.settings-list-wrap {
  max-height: 360px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 6px;
}
.settings-list-wrap table.t {
  font-size: 13px;
}
.settings-list-wrap table.t thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #FAFBFC;
  /* Sticky cells lose their bottom border in some browsers — replace
     it with a box-shadow so the header is still visually separated. */
  box-shadow: inset 0 -1px 0 var(--border);
  border-bottom: none;
}
table.t td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.t th.num { text-align: right; }

/* Badges */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px; font-weight: 500;
  border: 1px solid transparent;
  white-space: nowrap;
}
.badge.confident { background: var(--teal-50); color: var(--teal-600); border-color: #A7F3D0; }
.badge.review    { background: #FFF7ED; color: #C2410C; border-color: #FED7AA; }
.badge.posted    { background: #EFF6FF; color: #1E40AF; border-color: #BFDBFE; }
.badge.draft     { background: #F1F5F9; color: var(--muted); border-color: #E2E8F0; }
.badge.in        { background: #ECFDF5; color: #047857; border-color: #A7F3D0; }
.badge.out       { background: #FEF2F2; color: #B91C1C; border-color: #FECACA; }

/* Filters */
.filters {
  display: flex;
  flex-wrap: nowrap;             /* keep all filters on one line on desktop  */
  overflow-x: auto;              /* …with horizontal scroll if it overflows  */
  gap: 8px;
  align-items: center;
  padding: 12px 16px;
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 14px;
}
.filters > input,
.filters > select,
.filters > button {
  flex: 0 0 auto;                /* don't let any one filter eat the row    */
  min-width: 0;
}
.filters > input[type="search"],
.filters > #f-search {
  flex: 1 1 200px;               /* search expands to fill leftover space   */
  min-width: 160px;
}
.filters > select { max-width: 150px; padding: 6px 10px; font-size: 13px; }
.filters .spacer { flex: 1 1 auto; }
.filters .field { margin-bottom: 0; }
.filters input[type="search"] { min-width: 240px; padding: 6px 10px; font-size: 13px; border: 1px solid var(--border); border-radius: 6px; }
.filters select, .filters input { padding: 6px 10px; font-size: 13px; border: 1px solid var(--border); border-radius: 6px; }
.filters .spacer { flex: 1; }

/* COA tree (legacy) */
.tree { font-size: 13.5px; }
.tree .node { padding: 6px 0; display: flex; align-items: center; gap: 8px; }
.tree .node.parent { font-weight: 600; color: var(--navy); }
.tree .node.child { padding-left: 22px; }
.tree .node .lock { color: var(--muted-2); font-size: 12px; }
.tree .node .code { color: var(--muted-2); font-size: 12px; font-variant-numeric: tabular-nums; min-width: 40px; }
.tree .group {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 16px;
  background: white;
  margin-bottom: 12px;
}
.tree .group h3 {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--muted); margin: 0 0 8px;
}

/* COA — parent-grouped layout */
.coa-section {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
}
.coa-section .coa-parent {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--navy);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
  display: flex; align-items: center; gap: 10px;
}
.coa-section .coa-parent .code {
  color: var(--muted-2);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  min-width: 48px;
}
.coa-section .node {
  padding: 6px 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
}
.coa-section .node.child {
  padding-left: 22px;
  color: var(--text);
  border-bottom: 1px dashed transparent;
}
.coa-section .node.child:hover {
  background: #FAFBFC;
  border-radius: 4px;
}
.coa-section .node .code {
  color: var(--muted-2);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  min-width: 48px;
}

/* Single neutral light-navy tint for every transaction row. The old
   green/red sign tints + green/red confidence tints made the table feel
   noisy now that the Debit / Credit columns already encode direction. */
.row-review,
.row-confident,
.row-split,
.row-amt-pos,
.row-amt-neg     { background: #F1F5F9 !important; }
.row-review:hover,
.row-confident:hover,
.row-split:hover,
.row-amt-pos:hover,
.row-amt-neg:hover { background: #E2E8F0 !important; }
/* Visual separator between transaction groups in the transactions list.
   Legs of one transaction (matched by split_group_id) sit adjacent with
   no border between them; rows that start a new group get a slightly
   stronger top border so the reader can tell at a glance "this is a new
   transaction." Solo (ungrouped) rows each get their own separator too,
   so single-row transactions don't visually run into each other. */
.t tbody tr.tr-group-start > td {
  border-top: 2px solid #CBD5E1;
}

/* CSV preview rows — keep every row at the same compact height so the
   Confident view (filled dropdowns) doesn't look heavier than the
   Needs-review view (empty dropdowns). Without this, dropdown text and
   long partner names push individual rows taller than their neighbors
   and the table reads as inconsistent. */
#csv-preview-tbody tr > td {
  height: 44px;
  padding-top: 6px;
  padding-bottom: 6px;
  vertical-align: middle;
}

/* Compact-row tables — Transactions page + all COA drill-downs use the
   same 44px row density as the CSV Review & Import preview, so all
   three transaction views feel uniform. Without this the Transactions
   page and drill-downs used the default 10px/12px padding (~52-56px
   rows) which felt taller and less dense than the review modal. */
table.t.t-compact tbody tr > td {
  height: 44px;
  padding-top: 6px;
  padding-bottom: 6px;
  vertical-align: middle;
}
/* Header row matches the same tighter spacing so the table reads as a
   single unit instead of a chunky header on top of compact rows. */
table.t.t-compact thead th {
  padding-top: 8px;
  padding-bottom: 8px;
}

/* Visual grouping for multi-leg postings (splits, transfers, JEs).
   Every row in a group carries .row-split. The pale blue tint marks
   the group as a single unit; the tr-group-start top-border (defined
   elsewhere) gives the boundary between groups. */
table.t tbody tr.row-split {
  background: #EFF6FF !important;
}
table.t tbody tr.row-split:hover {
  background: #DBEAFE !important;
}
/* Partner cell: long counterparty names like "FACEBK *TM9QXB5XL2"
   would otherwise wrap onto two lines and break row-height uniformity.
   Force a single line with ellipsis; the full name is still readable
   via the browser's native tooltip on hover. */
#csv-preview-tbody tr > td:nth-child(3) {
  max-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#csv-preview-tbody tr > td:nth-child(3) strong {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}
/* Transfer-flagged rows (single-row design): keep the sign tint so
   amount direction is still obvious, but add a teal left bar so the
   row reads as a flagged transfer at a glance. The border replaces
   the first cell's left padding via box-shadow so it doesn't shift
   column widths. */
.row-transfer > td:first-child {
  box-shadow: inset 3px 0 0 #14B8A6;
}

/* Transactions nav — pending-review badge + hover dropdown.
   The badge sits in the top-right corner of the Transactions button
   and shows the count of CSV rows still waiting in the review queue.
   Hovering the button reveals a dropdown with a green Review link. */
.topnav-item {
  position: relative;
  display: inline-flex;
  height: 100%;
  align-items: stretch;
}
.topnav-item > button[data-route] {
  position: relative; /* anchor for the corner badge */
}
.topnav-pending-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: var(--teal, #0EA5A4);
  color: white;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  pointer-events: none;
}
.topnav-dropdown {
  display: none;
  position: absolute;
  /* No margin-top: a 2px gap below the nav button broke the hover
     bridge. Cursor traversing that gap leaves the .topnav-item region
     and closes the dropdown. With margin-top:0, the dropdown butts
     directly against the button bottom; the visual breathing room
     comes from internal padding-top, which is INSIDE the hover area. */
  top: 100%;
  left: 0;
  margin-top: 0;
  min-width: 200px;
  background: var(--navy);
  border: none;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
  padding: 6px 0;
  z-index: 200;
  overflow: hidden;
  /* Click target lives on each row individually — see
     .topnav-dropdown-item:hover below. */
}
.topnav-item:not(.suppress-hover):hover .topnav-dropdown:not([hidden]) {
  display: block;
}
.topnav-dropdown-item {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  /* 15% shorter again: 51 → ~44px. */
  height: 44px;
  padding: 0 14px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.78);
  text-align: left;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s;
}
/* Each item reacts to its OWN hover — so when there are multiple
   items in the dropdown (Review + Journal Entries), only the row the
   cursor is actually over gets the highlight. The whole row is the
   hit target (display:flex + width:100% + height:44px above), so the
   background fills edge to edge. */
.topnav-dropdown-item.review {
  color: #4ADE80; /* bright green that pops on navy */
}
.topnav-dropdown-item.je {
  color: rgba(255, 255, 255, 0.78);
}
/* Per-row hover — background fills the whole 44px row, text brightens
   to match. Each row's hover is independent of the other. */
.topnav-dropdown-item:hover {
  background: var(--navy-700);
  color: white;
}
.topnav-dropdown-item.review:hover {
  color: #86EFAC;
}
.topnav-dropdown-icon {
  font-size: 13.5px; /* same scale as the label */
}
.topnav-dropdown-label {
  flex: 1;
  font-weight: 500; /* match the navbar */
}
.topnav-dropdown-count {
  min-width: 22px;
  padding: 0 8px;
  background: var(--teal, #0EA5A4);
  color: white;
  border-radius: 11px;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

/* Lightly highlight a row right after the user edits it. The highlight
   stays until the row leaves the viewport (handled in JS). */
tr.row-just-edited > td {
  background: #FEF3C7 !important;
  -webkit-animation: row-pulse 1.2s ease-in-out 0s 2 alternate;
          animation: row-pulse 1.2s ease-in-out 0s 2 alternate;
  transition: background-color 0.6s ease;
}
@-webkit-keyframes row-pulse {
  0%   { background: #FDE68A; }
  100% { background: #FEF3C7; }
}
@keyframes row-pulse {
  0%   { background: #FDE68A; }
  100% { background: #FEF3C7; }
}

/* Drill-down total row — sticky bottom strip */
table.t tfoot tr.drill-total-row td {
  background: #F1F5F9;
  border-top: 2px solid var(--navy);
  border-bottom: 0;
  padding: 12px;
  position: sticky; bottom: 0;
}

/* COA balance display */
.coa-balance {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  margin-left: auto;
  padding: 0 10px;
  font-size: 14px;
  color: var(--navy);
}
.coa-balance.neg { color: var(--danger); }
.coa-balance.zero { color: var(--muted-2); font-weight: 400; }
.coa-section .node .coa-balance {
  font-size: 13px;
  margin-left: auto;
  padding: 0 10px;
}

/* Clickable COA rows — clicking anywhere on the row (except buttons)
   opens the account drill-down. Buttons inside use stopPropagation so
   they don't bubble. */
.coa-clickable { cursor: pointer; transition: background 0.12s; border-radius: 4px; }
.coa-section .coa-clickable.node:hover    { background: #F1F5F9; }
.coa-section .coa-clickable.coa-parent:hover { background: #F1F5F9; }

/* Source pill: Bank vs Cash vs Coins badges in tables */
.src-bank { background: #DBEAFE; color: #1E3A8A; border: 1px solid #BFDBFE; }
.src-cash { background: #F3E8FF; color: #6B21A8; border: 1px solid #E9D5FF; }
.src-coin { background: #FEF3C7; color: #92400E; border: 1px solid #FDE68A; }

/* CSV preview filter pills — confidence keeps green/red, direction stays neutral white */
.csv-filter-btn,
.csv-dir-filter-btn { transition: box-shadow 0.12s, transform 0.12s; }
.csv-filter-btn.filter-confident {
  background: #ECFDF5; color: #047857; border-color: #A7F3D0;
}
.csv-filter-btn.filter-confident:hover { background: #D1FAE5; }
.csv-filter-btn.filter-review {
  background: #FEE2E2; color: #991B1B; border-color: #FECACA;
}
.csv-filter-btn.filter-review:hover { background: #FECACA; }
/* When a filter pill is the active tab, give it a 2px ring matching
   its own theme color so each pill reads as "selected" with the same
   visual weight (the Needs-review look). Default (All / direction
   pills) keeps the neutral navy ring. */
.csv-filter-btn.filter-active,
.csv-dir-filter-btn.filter-active {
  box-shadow: 0 0 0 2px var(--navy);
  transform: translateY(-1px);
}
.csv-filter-btn.filter-confident.filter-active {
  box-shadow: 0 0 0 2px #047857;
}
.csv-filter-btn.filter-review.filter-active {
  box-shadow: 0 0 0 2px #991B1B;
}

/* Tabs */
.tabs {
  display: flex; gap: 2px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.tabs button {
  background: transparent; border: none;
  padding: 10px 16px; font-size: 13.5px;
  color: var(--muted); border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tabs button.active { color: var(--navy); border-bottom-color: var(--teal); font-weight: 600; }

/* Reports */
table.report { width: 100%; border-collapse: collapse; font-size: 13px; }
table.report td { padding: 6px 0; }
table.report td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.report tr.section { user-select: none; }
table.report tr.section[data-pnl-section] { cursor: pointer; }
table.report tr.section[data-pnl-section]:hover td { background: #F1F5F9; }
table.report tr.section td {
  padding-top: 22px; padding-bottom: 10px;
  font-weight: 700; color: var(--navy);
  text-transform: uppercase; font-size: 14px; letter-spacing: 0.7px;
  border-bottom: 2px solid var(--border);
}
table.report tr.section td:first-child { padding-left: 4px; }
table.report tr.subtotal td {
  border-top: 1px solid var(--border);
  padding-top: 10px; padding-bottom: 8px;
  font-weight: 700; font-size: 15px; color: var(--navy);
}
table.report tr.total td {
  border-top: 2px solid var(--navy);
  padding-top: 12px; padding-bottom: 12px;
  font-weight: 800; color: var(--navy); font-size: 17px;
}
table.report tr.indent td { font-size: 13px; color: var(--ink); }
table.report tr.indent td:first-child { padding-left: 24px; }
.pnl-arrow { display: inline-block; width: 14px; margin-right: 6px; color: var(--muted); font-size: 11px; vertical-align: middle; }

/* Balance Sheet — two-column layout with totals aligned at the bottom */
.bs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 16px;
}
.bs-side {
  display: flex;
  flex-direction: column;
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.bs-side-h {
  margin: 0 0 12px;
  font-size: 13px;
  letter-spacing: 1.2px;
  color: var(--muted-2);
  border-bottom: 1px solid var(--border);
  padding-bottom: 10px;
  font-weight: 700;
}
.bs-content { flex: 1; }
.bs-section { margin-bottom: 4px; }
.bs-subsection-h {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--muted);
  font-weight: 600;
  margin: 6px 0 4px;
}
.bs-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 6px;
  font-size: 13.5px;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.12s;
}
.bs-row:hover { background: #F1F5F9; }
.bs-row .bs-amt {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.bs-row.bs-parent {
  font-weight: 700;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-size: 12.5px;
  padding-top: 8px;
}
.bs-row.bs-indent .bs-name { padding-left: 16px; color: var(--ink); }
.bs-row.bs-net-income {
  margin-top: 6px;
  font-style: italic;
  color: var(--ink);
}
.bs-subtotal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 6px 8px 6px;
  margin-top: 4px;
  border-top: 1px solid var(--border);
  font-weight: 700;
  font-size: 14px;
  color: var(--navy);
}
.bs-subtotal span:last-child { font-variant-numeric: tabular-nums; }
.bs-side-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 6px 4px 6px;
  margin-top: 10px;
  border-top: 2px solid var(--navy);
  font-weight: 800;
  font-size: 16px;
  color: var(--navy);
}
.bs-side-total span:last-child { font-variant-numeric: tabular-nums; font-size: 17px; }
.bs-balance-check {
  padding: 12px 18px;
  border-radius: var(--radius);
  font-size: 14px;
  text-align: center;
}
.bs-balance-check.ok  { background: #ECFDF5; color: #047857; border: 1px solid #A7F3D0; }
.bs-balance-check.bad { background: #FEF2F2; color: #B91C1C; border: 1px solid #FECACA; }

/* VAT Summary — section per VAT code, sales/purchases rows clickable */
.vat-section {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 14px;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}
.vat-section-h {
  margin: 0 0 12px;
  font-size: 14px;
  letter-spacing: 0.5px;
  color: var(--navy);
  font-weight: 700;
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
}
.vat-table { width: 100%; font-size: 13.5px; border-collapse: collapse; }
.vat-table th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--muted-2);
  font-weight: 600;
  padding: 4px 6px 8px;
  text-align: left;
}
.vat-table th.num { text-align: right; }
.vat-table td { padding: 8px 6px; }
.vat-table td.num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.vat-table tr.vat-row { cursor: pointer; transition: background 0.12s; }
.vat-table tr.vat-row:hover { background: #F1F5F9; }
.vat-table tr.vat-net td {
  border-top: 1px solid var(--navy);
  padding-top: 10px;
  color: var(--navy);
  font-size: 14px;
}
.vat-grand {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 22px;
  max-width: 820px;
  margin: 0 auto;
}
.vat-grand-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 6px 0;
  font-size: 13.5px;
}
.vat-grand-row strong { font-variant-numeric: tabular-nums; color: var(--navy); }
.vat-grand-row.vat-grand-final {
  border-top: 2px solid var(--navy);
  padding-top: 14px;
  margin-top: 8px;
  font-size: 16px;
}
.vat-grand-row.vat-grand-final strong { font-size: 18px; }

/* Report tab slide animation — when switching tabs the body slides
   left or right depending on the direction of travel. */
#reports-body {
  overflow: hidden;
  position: relative;
}
.report-slide-wrap {
  display: flex;
  flex-direction: row;
  width: 200%;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
.report-slide-pane {
  width: 50%;
  flex-shrink: 0;
  flex-grow: 0;
  box-sizing: border-box;
  padding-right: 12px;
}
.report-slide-pane:last-child { padding-right: 0; padding-left: 12px; }

/* Profit & Loss — single-column layout, INCOME → COGS → GROSS PROFIT
   → OPERATING EXPENSES → OPERATING INCOME → OTHER INCOME / EXPENSE
   → NET INCOME. Each row is clickable to open the account drill-down. */
.pnl-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 22px;
  max-width: 820px;
  margin: 0 auto;
}
.pnl-section-h {
  margin: 18px 0 8px;
  font-size: 12px;
  letter-spacing: 1.4px;
  color: var(--muted-2);
  font-weight: 700;
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
}
.pnl-section-h:first-child { margin-top: 0; }
.pnl-section-h.pnl-collapsible {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color 0.12s;
}
.pnl-section-h.pnl-collapsible:hover { color: var(--navy); }
.pnl-section-arrow {
  display: inline-block;
  width: 14px;
  font-size: 10px;
  color: var(--muted);
  transition: transform 0.15s;
}
.pnl-section-body { transition: opacity 0.15s; }
.pnl-section { margin-bottom: 4px; }
.pnl-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  font-size: 13.5px;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.12s;
}
.pnl-row:hover { background: #F1F5F9; }
.pnl-row .pnl-amt {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.pnl-row.pnl-parent {
  font-weight: 700;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-size: 12.5px;
  padding-top: 8px;
}
.pnl-row.pnl-indent .pnl-name { padding-left: 16px; color: var(--ink); }
.pnl-subtotal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 8px 10px 8px;
  margin-top: 6px;
  border-top: 1px solid var(--border);
  font-weight: 700;
  font-size: 14px;
  color: var(--navy);
}
.pnl-subtotal span:last-child { font-variant-numeric: tabular-nums; }
.pnl-subtotal.pnl-emphasis {
  background: #F8FAFC;
  margin: 8px -8px;
  padding: 12px 16px;
  border-top: 1px solid var(--navy);
  border-bottom: 1px solid var(--navy);
  font-size: 15px;
}
.pnl-grandtotal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 8px 6px 8px;
  margin-top: 14px;
  border-top: 2px solid var(--navy);
  font-weight: 800;
  font-size: 17px;
  color: var(--navy);
}
.pnl-grandtotal span:last-child { font-variant-numeric: tabular-nums; font-size: 18px; }
.pnl-grandtotal.pnl-positive span:last-child { color: var(--success); }
.pnl-grandtotal.pnl-negative span:last-child { color: var(--danger); }

/* Opening-balance tip box — sits at the top of OB forms to remind
   the user to enter positive amounts. */
.ob-tip {
  margin: 0 0 14px;
  padding: 10px 14px;
  background: #FFF7ED;
  border: 1px solid #FED7AA;
  border-radius: 6px;
  font-size: 12.5px;
  line-height: 1.55;
  color: #7C2D12;
}
.ob-tip strong { color: #9A3412; }

/* Invoice-matcher modal */
.inv-upload-card {
  display: flex; align-items: center;
  padding: 16px;
  background: #F8FAFC;
  border: 2px dashed var(--border);
  border-radius: 8px;
  margin-bottom: 14px;
}
.inv-section-h {
  margin: 18px 0 8px;
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--muted-2);
  font-weight: 700;
  text-transform: uppercase;
}
.inv-file-list {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: white;
}
.inv-file {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.inv-file:last-child { border-bottom: none; }
.inv-file-name { font-weight: 600; color: var(--ink); }
.inv-summary {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  padding: 12px 14px;
  background: #F1F5F9;
  border-radius: 8px;
  margin: 14px 0 6px;
  font-size: 13px;
}
.inv-stat-ok   { color: var(--success); }
.inv-stat-warn { color: #B45309; }
.inv-stat-bad  { color: var(--danger); }
.inv-result-table { width: 100%; font-size: 12.5px; }
.inv-result-table th { font-size: 11px; color: var(--muted-2); text-transform: uppercase; letter-spacing: 0.5px; }
.inv-result-table td.num { font-variant-numeric: tabular-nums; }

/* Account-modal natural-side hint — appears beneath the Type + Contra
   checkboxes and refreshes live when either is changed. */
.acct-natural-hint {
  margin-top: 10px;
  padding: 8px 12px;
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
  border-radius: 6px;
  font-size: 12.5px;
  color: #1E3A8A;
  line-height: 1.5;
}

/* Equity calculation breakdown — sits below "Total Equity" subtotal */
.bs-calc {
  margin-top: 12px;
  background: #F8FAFC;
  border: 1px dashed var(--border);
  border-radius: 6px;
  padding: 10px 12px;
}
.bs-calc-title {
  font-size: 11.5px;
  letter-spacing: 0.7px;
  color: var(--muted-2);
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 6px;
}
.bs-calc-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.bs-calc-table td {
  padding: 4px 0;
  color: var(--ink);
}
.bs-calc-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.bs-calc-table tr.bs-calc-ni td {
  border-top: 1px dashed var(--border);
  padding-top: 6px;
  font-style: italic;
  color: var(--muted);
}
.bs-calc-table tr.bs-calc-total td {
  border-top: 1px solid var(--navy);
  padding-top: 6px;
  font-weight: 700;
  color: var(--navy);
}

/* Modals */
.modal-back {
  position: fixed; inset: 0;
  background: rgba(15, 41, 64, 0.55);
  display: grid; place-items: center;
  z-index: 100;
  -webkit-perspective: 1000px;
          perspective: 1000px;
  -webkit-animation: backdrop-fade 0.25s ease-out both;
          animation: backdrop-fade 0.25s ease-out both;
}
/* Lock the page scroll behind any open modal, and contain modal scroll
   so reaching the bottom of the modal list doesn't bleed scroll to the body. */
body:has(.modal-back) { overflow: hidden; }
.modal-b { overscroll-behavior: contain; }
.modal {
  background: white;
  border-radius: 12px;
  width: 100%; max-width: 540px;
  max-height: 90vh; overflow: auto;
  -webkit-animation: shadow-drop-2-center 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
          animation: shadow-drop-2-center 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@-webkit-keyframes backdrop-fade { 0% { opacity: 0; } 100% { opacity: 1; } }
        @keyframes backdrop-fade { 0% { opacity: 0; } 100% { opacity: 1; } }
@-webkit-keyframes shadow-drop-2-center {
  0%   { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 0;
         -webkit-box-shadow: 0 0 0 0 rgba(0,0,0,0); box-shadow: 0 0 0 0 rgba(0,0,0,0); }
  100% { -webkit-transform: translateZ(50px); transform: translateZ(50px); opacity: 1;
         -webkit-box-shadow: 0 0 30px 2px rgba(0,0,0,0.45); box-shadow: 0 0 30px 2px rgba(0,0,0,0.45); }
}
@keyframes shadow-drop-2-center {
  0%   { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 0;
         -webkit-box-shadow: 0 0 0 0 rgba(0,0,0,0); box-shadow: 0 0 0 0 rgba(0,0,0,0); }
  100% { -webkit-transform: translateZ(50px); transform: translateZ(50px); opacity: 1;
         -webkit-box-shadow: 0 0 30px 2px rgba(0,0,0,0.45); box-shadow: 0 0 30px 2px rgba(0,0,0,0.45); }
}

/* Closing — reverse of the opening animations */
.modal-back.closing {
  -webkit-animation: backdrop-fade-out 0.22s ease-in forwards;
          animation: backdrop-fade-out 0.22s ease-in forwards;
}
.modal-back.closing .modal {
  -webkit-animation: shadow-drop-2-center-out 0.28s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;
          animation: shadow-drop-2-center-out 0.28s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;
}
@-webkit-keyframes backdrop-fade-out { 0% { opacity: 1; } 100% { opacity: 0; } }
        @keyframes backdrop-fade-out { 0% { opacity: 1; } 100% { opacity: 0; } }
@-webkit-keyframes shadow-drop-2-center-out {
  0%   { -webkit-transform: translateZ(50px); transform: translateZ(50px); opacity: 1;
         -webkit-box-shadow: 0 0 30px 2px rgba(0,0,0,0.45); box-shadow: 0 0 30px 2px rgba(0,0,0,0.45); }
  100% { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 0;
         -webkit-box-shadow: 0 0 0 0 rgba(0,0,0,0); box-shadow: 0 0 0 0 rgba(0,0,0,0); }
}
@keyframes shadow-drop-2-center-out {
  0%   { -webkit-transform: translateZ(50px); transform: translateZ(50px); opacity: 1;
         -webkit-box-shadow: 0 0 30px 2px rgba(0,0,0,0.45); box-shadow: 0 0 30px 2px rgba(0,0,0,0.45); }
  100% { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 0;
         -webkit-box-shadow: 0 0 0 0 rgba(0,0,0,0); box-shadow: 0 0 0 0 rgba(0,0,0,0); }
}
.modal-h { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.modal-h h2 { margin: 0; font-size: 16px; }
.modal-b { padding: 18px 20px; }
.modal-f { padding: 12px 20px; border-top: 1px solid var(--border); display: flex; gap: 8px; justify-content: flex-end; }

/* Drill-down filter popovers — float from their button without re-rendering the modal */
.drill-anchor { position: relative; display: inline-block; }
.drill-popover {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 30;
  background: white;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.18);
  min-width: 260px;
  -webkit-animation: drill-pop-in 0.14s ease-out both;
          animation: drill-pop-in 0.14s ease-out both;
}
.drill-popover[data-side="left"] { right: auto; left: 0; }
.drill-popover::before {
  content: "";
  position: absolute;
  top: -7px;
  right: 18px;
  width: 12px;
  height: 12px;
  background: white;
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.drill-popover[data-side="left"]::before { right: auto; left: 18px; }
@-webkit-keyframes drill-pop-in {
  0%   { opacity: 0; -webkit-transform: translateY(-4px) scale(0.97); }
  100% { opacity: 1; -webkit-transform: translateY(0)    scale(1); }
}
@keyframes drill-pop-in {
  0%   { opacity: 0; transform: translateY(-4px) scale(0.97); }
  100% { opacity: 1; transform: translateY(0)    scale(1); }
}
.drill-pop-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--teal); margin-left: 6px; vertical-align: middle; }

/* Wizard stepper */
.stepper { display: flex; gap: 6px; margin-bottom: 18px; }
.stepper .step { flex: 1; height: 4px; border-radius: 2px; background: var(--border); }
.stepper .step.done, .stepper .step.active { background: var(--teal); }

/* Picker */
.picker-wrap { min-height: 100vh; background: var(--bg); padding: 60px 24px; }
.picker { max-width: 720px; margin: 0 auto; }
.picker-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 24px; }
.picker h1 { font-size: 26px; margin: 0 0 6px; }
.picker .sub { color: var(--muted); margin: 0; }
.picker .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.picker .co-card {
  background: white; border: 1px solid var(--border);
  border-radius: 10px; padding: 18px; cursor: pointer;
  transition: all 0.12s; box-shadow: var(--shadow-sm);
  /* position:relative so the absolutely-positioned delete-X anchors to
     the card, not the viewport. */
  position: relative;
}
.picker .co-card:hover { border-color: var(--teal); transform: translateY(-1px); box-shadow: var(--shadow); }
/* Card-corner delete button. Hidden by default. After ~1.5s of
   continuous hover the opacity transition completes (delay 1.5s,
   transition 0.18s) and the X becomes visible. Hovering off the card
   immediately fades it back out (no exit delay). The button itself
   captures clicks so they don't propagate to the card's onclick
   (which would enter the company). */
.picker .co-card .co-del {
  position: absolute; top: 8px; right: 8px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #FEE2E2;
  color: #991B1B;
  font-weight: 700;
  font-size: 14px;
  line-height: 22px;
  text-align: center;
  cursor: pointer;
  border: 1px solid #FCA5A5;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s, background-color 0.12s;
  transition-delay: 1.5s, 0s;
  user-select: none;
}
.picker .co-card:hover .co-del {
  opacity: 1;
  pointer-events: auto;
}
.picker .co-card .co-del:hover { background: #FECACA; }
.picker .co-card .co-mark {
  width: 40px; height: 40px; border-radius: 8px;
  background: var(--navy); color: white;
  display: grid; place-items: center; font-weight: 700; margin-bottom: 12px;
}
.picker .co-card .co-name { font-weight: 600; margin-bottom: 2px; }
.picker .co-card .co-meta { font-size: 12px; color: var(--muted); }
.picker .co-card.add {
  border-style: dashed; display: grid; place-items: center;
  color: var(--muted); text-align: center;
}
.picker .co-card.add:hover { color: var(--teal-600); }

/* Misc */
.row { display: flex; gap: 8px; align-items: center; }
.stack { display: flex; flex-direction: column; gap: 8px; }
.spacer { flex: 1; }
.pill {
  background: #F1F5F9; color: var(--muted);
  padding: 2px 8px; border-radius: 4px;
  font-size: 11px; font-weight: 500;
}
.pill.teal { background: var(--teal-50); color: var(--teal-600); }
.nowrap { white-space: nowrap; }
.review-q {
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 16px;
  display: flex; align-items: center; gap: 12px;
}
.review-q .ic {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--warning); color: white;
  display: grid; place-items: center; font-weight: 700;
}
.review-q .text { flex: 1; }
.review-q .text strong { display: block; }
.review-q .text span { font-size: 12px; color: var(--muted); }
.bars { display: flex; flex-direction: column; gap: 8px; }
.bar-row { display: grid; grid-template-columns: 1fr 80px; gap: 8px; align-items: center; font-size: 13px; }
.bar { height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--teal); border-radius: 4px; }
.bar-row .amt { text-align: right; font-variant-numeric: tabular-nums; color: var(--navy); font-weight: 500; }
.empty { text-align: center; padding: 36px 20px; color: var(--muted); }

/* Page-transition: new page expands from the click origin (macOS Launchpad-ish).
   transformOrigin is set on #content from JS based on the clicked element. */
#content {
  will-change: transform, opacity;
  transform-origin: 50% 0%;
}
.page-enter {
  -webkit-animation: page-zoom 0.42s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
          animation: page-zoom 0.42s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}
@-webkit-keyframes page-zoom {
  0%   { -webkit-transform: scale(0.86); transform: scale(0.86); opacity: 0; }
  100% { -webkit-transform: scale(1);    transform: scale(1);    opacity: 1; }
}
@keyframes page-zoom {
  0%   { -webkit-transform: scale(0.86); transform: scale(0.86); opacity: 0; }
  100% { -webkit-transform: scale(1);    transform: scale(1);    opacity: 1; }
}

/* Loading splash */
.splash {
  position: fixed; inset: 0;
  background: rgba(255,255,255,0.7);
  display: grid; place-items: center;
  z-index: 200;
}
.spinner {
  width: 28px; height: 28px;
  border: 3px solid var(--border);
  border-top-color: var(--teal);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Toast */
.toast {
  position: fixed;
  bottom: 24px; right: 24px;
  background: var(--navy); color: white;
  padding: 10px 16px;
  border-radius: 8px;
  box-shadow: var(--shadow);
  font-size: 13px;
  z-index: 300;
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.15s, transform 0.15s;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast.error { background: var(--danger); }
.toast.success { background: var(--success); }

/* ============================================================
   MOBILE — phone & small tablet portrait
   Goal: every page works at 380px wide. Tables scroll horizontally,
   modals go nearly full-screen, the topbar nav scrolls horizontally,
   tap targets are at least 44 px tall.
   ============================================================ */
@media (max-width: 820px) {
  /* Page chrome */
  main.content { padding: 14px 12px; }
  .page-header { flex-direction: column; align-items: stretch; gap: 8px; }
  .page-header h1 { font-size: 19px; }
  .page-header .actions { flex-wrap: wrap; gap: 6px; }
  .page-header .actions .btn { flex: 1 1 auto; justify-content: center; min-height: 40px; }

  /* Topbar — make nav scroll horizontally so all tabs reach by swipe */
  .topbar { padding: 0 10px; gap: 8px; height: 52px; }
  .topbar .brand { width: 78px; height: 52px; }
  .topbar .brand-img-top, .topbar .brand-img-bottom { width: 78px; height: 58px; top: 9px; }
  .topnav {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .topnav::-webkit-scrollbar { display: none; }
  .topnav button { padding: 0 10px; font-size: 12.5px; flex-shrink: 0; }
  .topbar-right { gap: 6px; }
  .company-switcher {
    max-width: 110px; padding: 6px 8px; font-size: 12px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .company-switcher #co-current-name {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 80px; display: inline-block;
  }

  /* KPIs and grids collapse */
  .kpis { grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
  .kpi { padding: 12px 14px; }
  .kpi .value { font-size: 19px; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; gap: 10px; }

  /* Cards tighter */
  .card-pad { padding: 14px 12px; }
  .card-h { padding: 12px 14px; }
  .card-h h2 { font-size: 14px; }

  /* Tables: wrap them so they scroll horizontally inside their card */
  .card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table.t { font-size: 12.5px; min-width: 640px; }
  table.t th, table.t td { padding: 8px 10px; }

  /* Filter row stacks */
  .filters { flex-wrap: wrap; gap: 6px !important; }
  .filters input, .filters select { flex: 1 1 130px; min-width: 130px; font-size: 13px; }
  .filters .spacer { flex: 1 1 100%; }

  /* Source/All pills wrap */
  #src-pills { flex-wrap: wrap; }
  #src-pills .btn { flex: 1 1 auto; min-height: 38px; }

  /* Modals — almost full screen, zero margin */
  .modal-back { padding: 0; }
  .modal {
    max-width: 100% !important; width: 100vw !important;
    max-height: 100vh !important; height: 100vh !important;
    border-radius: 0 !important;
    display: flex; flex-direction: column;
  }
  .modal-h { padding: 12px 14px; flex-shrink: 0; }
  .modal-h h2 { font-size: 15px; }
  .modal-b { padding: 14px; flex: 1; overflow: auto; }
  .modal-f { padding: 10px 14px; flex-shrink: 0; flex-wrap: wrap; gap: 6px; }
  .modal-f .btn { min-height: 40px; }

  /* Drill-down filter bar wraps */
  [data-drill-fbar] { padding: 8px 10px !important; gap: 6px !important; flex-wrap: wrap; }
  #drill-search { flex: 1 1 100% !important; min-width: 0 !important; }
  .drill-anchor { flex: 1 1 auto; }
  .drill-anchor > .btn { width: 100%; justify-content: center; }
  .drill-popover {
    position: fixed !important;
    left: 8px !important; right: 8px !important; top: auto !important;
    bottom: 12px !important;
    min-width: 0 !important; max-width: none !important; width: auto !important;
  }
  .drill-popover::before { display: none !important; }

  /* Buttons inside drill-down popovers — let them wrap and grow */
  .drill-popover .row { flex-wrap: wrap; }

  /* Picker (company picker) */
  .picker-wrap { padding: 28px 14px; }
  .picker .grid { grid-template-columns: 1fr 1fr; gap: 10px; }

  /* Login card fits screen */
  .login-card { padding: 24px 18px; max-width: 100%; }
  .login-logo-img { height: 72px; }

  /* CSV preview & rules tables already inside cards — give them an obvious
     horizontal scroll affordance by letting the table itself scroll. */
  .modal table.t { min-width: 720px; }

  /* Reports table fits screen — collapse the giant headers a touch */
  table.report { font-size: 12.5px; }
  table.report tr.section td { font-size: 12.5px; padding-top: 16px; }
  table.report tr.subtotal td { font-size: 13.5px; }
  table.report tr.total td { font-size: 15px; padding-top: 10px; }
  table.report tr.indent td:first-child { padding-left: 16px; }

  /* Tap targets: every button at least 40 px tall on phones */
  .btn { min-height: 36px; }
  .btn-sm { min-height: 30px; }

  /* Form inputs: avoid iOS zoom on focus by keeping at 16 px */
  input, select, textarea { font-size: 16px !important; }

  /* Stepper bars */
  .stepper { margin-bottom: 14px; }

  /* Drill-down modal footer wraps amounts onto two lines if needed */
  .modal-f { font-size: 13px; }
}

@media (max-width: 480px) {
  .topbar { padding: 0 8px; }
  .topbar .brand { width: 66px; }
  .topbar .brand-img-top, .topbar .brand-img-bottom { width: 66px; height: 49px; top: 10px; }
  .company-switcher #co-current-name { max-width: 50px; }
  .kpis { grid-template-columns: 1fr; }
  .picker .grid { grid-template-columns: 1fr; }
  table.t { min-width: 540px; }
  .modal-h h2 { font-size: 14px; }
}

/* ============================================================
 * Company-pick intro animation
 * Fullscreen overlay with a Three.js shader (navy lines on white)
 * behind the NB logo and a static "Outsource your work" tagline.
 * Total runtime ~2s, fades out into the dashboard. All animation
 * timings are 20% faster than the original demo.
 * ============================================================ */
.intro-wrap {
  position: fixed; inset: 0; z-index: 10000;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  opacity: 1;
  transition: opacity 0.48s ease; /* 0.6s × 0.8 */
  cursor: pointer;
}
.intro-wrap.fading { opacity: 0; pointer-events: none; }
.intro-wrap canvas {
  position: absolute; inset: 0; width: 100% !important; height: 100% !important;
  display: block;
}
.intro-overlay {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 22px;
  text-align: center;
  pointer-events: none;
  user-select: none;
}
.intro-logo {
  /* +15% over the previous 220px — so the logo reads bigger and rides on
     top of the unfolding wave behind it. */
  width: 253px; height: auto;
  filter: drop-shadow(0 6px 24px rgba(15, 41, 64, 0.25))
          drop-shadow(0 2px 6px rgba(255, 255, 255, 0.7));
  /* Bloom in from nothing → full size, synced to the shader's first second.
     Cubic-bezier produces a slight overshoot-feel ease that mimics a wave
     opening up around the logo. */
  transform: scale(0);
  opacity: 0;
  transform-origin: center;
  animation: introLogoBloom 1.05s cubic-bezier(.2,.7,.2,1.05) forwards;
}
.intro-tagline {
  color: var(--navy);
  font-size: 24px; font-weight: 600;
  letter-spacing: 0.3px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  opacity: 0;
  /* Tagline rises after the logo has reached most of its size. */
  animation: introIn 0.72s cubic-bezier(.2,.8,.2,1) 0.55s forwards;
}
@keyframes introLogoBloom {
  /* Starts as a single point on the centerline, fades in while scaling up. */
  0%   { opacity: 0; transform: scale(0); }
  35%  { opacity: 1; }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes introIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (max-width: 480px) {
  .intro-logo { width: 196px; }
  .intro-tagline { font-size: 20px; padding: 0 18px; }
}

/* ============================================================
 * Anchored popover mode for the date picker + preset dropdown
 * Same calendar graphics as the in-app modal version, just shown
 * as a small floating window anchored to its trigger button —
 * no full-screen black backdrop.
 * ============================================================ */
.dp-popover {
  position: fixed;
  z-index: 9000;
  background: white;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(15, 41, 64, 0.18), 0 4px 10px rgba(15, 41, 64, 0.10);
  animation: dp-pop-in 0.16s ease both;
}
.dp-popover .modal { box-shadow: none; border-radius: 14px; max-width: none; width: auto; }
.dp-popover .dp-modal { max-width: 340px; width: 340px; }
@keyframes dp-pop-in {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* Custom preset dropdown — anchored list popover */
.dr-presets-pop {
  position: fixed;
  z-index: 9000;
  background: white;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px;
  min-width: 160px;
  box-shadow: 0 14px 40px rgba(15, 41, 64, 0.18), 0 4px 10px rgba(15, 41, 64, 0.10);
  display: flex; flex-direction: column; gap: 2px;
  animation: dp-pop-in 0.14s ease both;
}
.dr-preset-item {
  background: transparent;
  border: 0;
  padding: 8px 12px;
  text-align: left;
  font-size: 13px;
  font-family: inherit;
  color: var(--text);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}
.dr-preset-item:hover {
  background: var(--teal-50);
  color: var(--teal-600);
}

/* Smaller dp-trigger size for filter bars */
.dr-bar .dp-trigger {
  padding: 6px 10px;
  font-size: 13px;
}
.dr-bar .dr-preset-trigger {
  padding: 6px 10px;
  display: inline-flex; justify-content: space-between; gap: 8px;
}

/* ============================================================
 * Class filter — styled trigger + grouped popover list
 * Shared styling between the Transactions filter bar and the
 * drill-down's class popover. Visually consistent with the
 * date-range preset dropdown.
 * ============================================================ */
.cls-filter-trigger {
  display: inline-flex; justify-content: space-between; gap: 8px;
}
.cls-filter-pop {
  position: fixed;
  z-index: 9000;
  background: white;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px;
  min-width: 200px;
  max-width: 320px;
  max-height: min(420px, 70vh);
  overflow: auto;
  box-shadow: 0 14px 40px rgba(15, 41, 64, 0.18), 0 4px 10px rgba(15, 41, 64, 0.10);
  display: flex; flex-direction: column; gap: 2px;
  animation: dp-pop-in 0.14s ease both;
}
.cls-filter-section {
  display: flex; flex-direction: column; gap: 1px;
  padding: 4px 0 2px;
}
.cls-filter-header {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--muted);
  padding: 6px 12px 4px;
  user-select: none;
}
.cls-filter-item {
  background: transparent;
  border: 0;
  padding: 7px 12px 7px 18px;     /* indent under header */
  text-align: left;
  font-size: 13px;
  font-family: inherit;
  color: var(--text);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}
.cls-filter-item.cls-filter-item-all {
  padding-left: 12px;
  font-weight: 500;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
  border-radius: 6px 6px 0 0;
}
.cls-filter-item:hover,
.cls-filter-item.is-active {
  background: var(--teal-50);
  color: var(--teal-600);
}
.cls-filter-item.is-active { font-weight: 600; }

/* Type-to-filter input at the top of the popover. Auto-focused on open.
 * Filters items as you type (case-insensitive substring on the visible
 * label). Hidden for short lists (< 5 options) to avoid visual clutter. */
.cls-filter-search {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  color: var(--text);
  background: white;
  margin-bottom: 4px;
}
.cls-filter-search:focus {
  outline: none;
  border-color: var(--teal-500, #14b8a6);
  box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.15);
}
.cls-filter-empty {
  padding: 14px 12px;
  text-align: center;
  font-size: 12px;
  color: var(--muted);
}

/* Drill-down's class popover gets a fixed width so it doesn't grow with the
 * filter bar — it's anchored inside the modal instead of floating. */
.drill-cls-popover {
  min-width: 200px;
  max-width: 320px;
  max-height: 360px;
  overflow: auto;
  padding: 6px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 14px 40px rgba(15, 41, 64, 0.18), 0 4px 10px rgba(15, 41, 64, 0.10);
  display: flex; flex-direction: column; gap: 2px;
}

/* Footer row inside the class popover — holds the "Done" button. */
.cls-filter-footer {
  display: flex;
  justify-content: flex-end;
  padding: 8px 6px 4px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}

/* Settings managers — VAT codes / Classes / Locations.
 * Cap the table area so a long list scrolls inside the card instead of
 * making the page itself grow. The card-h header stays pinned at the top. */
.grid-3 > .card > table.t,
.grid-3 > .card > .card-pad {
  max-height: 320px;
  overflow-y: auto;
}
.grid-3 > .card { display: flex; flex-direction: column; }
.grid-3 > .card > .card-h { flex-shrink: 0; }

/* Chart legend clickable items — match the visual feedback of clickable
 * amounts elsewhere (COA balances, P&L lines, VAT Summary lines): cursor
 * changes, the dotted underline lifts to teal on hover. */
.chart-legend-link {
  cursor: pointer;
  text-decoration: underline dotted var(--muted-2);
  text-underline-offset: 2px;
  transition: color 0.15s, text-decoration-color 0.15s;
}
.chart-legend-link:hover {
  color: var(--teal-600);
  text-decoration-color: var(--teal-600);
}

/* ============================================================
 * Print / PDF export — Reports
 * Hides app chrome (top nav, breadcrumb, action buttons, tabs, date filter)
 * and surfaces a board-presentable cover sheet (logo + report title +
 * period). The Balance Sheet gets a single-line bottom summary spanning
 * both columns. Triggered by the "⤓ PDF (Print)" button.
 * ============================================================ */

/* Cover and BS print summary are hidden on screen, revealed only when printing. */
.print-cover { display: none; }
.bs-print-summary { display: none; }

/* Strip the browser-injected page header/footer (date, URL, page numbers).
 * With margin: 0 on the page box there's no margin area for the browser to
 * paint headers/footers into, so they collapse. We then push our own
 * padding inside the body during print so content doesn't hit the edge. */
@page {
  size: A4;
  margin: 0;
}

@media print {
  /* Preserve background colors and gradients on paper. */
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  html, body {
    background: #ffffff !important;
    color: #0f172a !important;
    font-size: 11pt;
  }

  /* Internal padding replaces the @page margins we zeroed out. */
  body {
    margin: 14mm 12mm 16mm 12mm !important;
  }

  /* Hide everything that's app chrome rather than the report itself. */
  .topbar,
  #modal-host,
  #splash,
  #intro,
  .login-wrap,
  .picker-wrap,
  .page-header,
  .dr-bar,
  .tabs {
    display: none !important;
  }

  /* Content fills the printable page. */
  main.content,
  #content {
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
  }

  /* Flatten the report card — paper doesn't need shadows or borders. */
  #reports-body {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }

  /* Each report still renders its own h2 + subtitle for the screen view;
     suppress those when printing so the cover sheet is the sole header. */
  #reports-body > h2,
  #reports-body > .muted {
    display: none !important;
  }

  /* === Cover sheet === */
  .print-cover {
    display: block !important;
    margin-bottom: 16pt;
    page-break-after: avoid;
    break-after: avoid;
  }
  .print-cover-row {
    position: relative;
    text-align: center;
    min-height: 64px;
    margin-bottom: 10pt;
  }
  .print-logo {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 56px;
    width: auto;
    /* The brand asset is multi-color; force a pure-black silhouette for paper. */
    filter: brightness(0) saturate(100%);
    -webkit-filter: brightness(0) saturate(100%);
  }
  .print-cover-center {
    display: inline-block;
    vertical-align: middle;
    line-height: 1.2;
  }
  .print-cover-rule {
    border-bottom: 1.25pt solid #0f172a;
    margin-bottom: 14pt;
  }
  .print-report-title {
    font-size: 22pt;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 4pt 0;
    letter-spacing: -0.3px;
    line-height: 1.15;
  }
  .print-report-range {
    font-size: 11.5pt;
    color: #475569;
    font-variant-numeric: tabular-nums;
  }

  /* === Balance Sheet — wider, tighter columns + one-line bottom summary === */
  .bs-grid {
    gap: 18pt !important;
  }
  .report-bs td {
    padding: 4pt 0 !important;
  }
  /* Hide each column's own TOTAL row on print — replaced by the unified
     bottom summary below. Keeps PnL / VAT totals untouched. */
  .report-bs tr.total {
    display: none !important;
  }
  .bs-print-summary {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 18pt;
    margin-top: 10pt;
    padding-top: 8pt;
    border-top: 1.5pt solid #0f172a;
    page-break-inside: avoid;
    break-inside: avoid;
  }
  .bs-summary-cell {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-weight: 700;
    font-size: 12pt;
    color: #0f172a;
    letter-spacing: 0.2px;
  }
  .bs-summary-cell span:last-child {
    font-variant-numeric: tabular-nums;
  }

  /* Hide the green/red "Balanced ✓" indicator on print — auditor-style
     check-tick is on-screen affordance, not for the board copy. */
  .bs-balance-check {
    display: none !important;
  }

  /* Tables on paper. */
  table.report {
    width: 100%;
    page-break-inside: auto;
    break-inside: auto;
  }
  table.report tr {
    page-break-inside: avoid;
    break-inside: avoid;
  }
  table.report tr.section td,
  table.report tr.subtotal td,
  table.report tr.total td {
    background: #ffffff !important;
  }
  table.report tr.section td {
    border-top: 0.75pt solid #cbd5e1;
  }
  table.report tr.total td {
    border-top: 1.25pt solid #0f172a;
  }

  /* Strip interactive affordances. */
  table.report tr.section[data-pnl-section] { cursor: auto !important; }
  table.report .pnl-arrow { display: none !important; }
  a, button {
    color: inherit !important;
    text-decoration: none !important;
  }
}

/* ===========================================================================
   MOBILE / PHONE LAYOUT (≤ 640px wide)
   ---------------------------------------------------------------------------
   Pure presentational adjustments — no data flow, no business logic touched.
   Above 640px the browser ignores everything in this block, so the desktop
   experience is byte-identical to before. Within this block we:
     1. Replace the horizontal nav with a hamburger → dropdown.
     2. Stack the dashboard KPI cards and chart legends vertically so the
        viewport doesn't sideways-scroll.
     3. Convert all wide data tables (.t / .t-compact) into a stacked
        card-per-row layout where each cell shows its column label inline.
        This is the standard "responsive table" pattern: rows become cards,
        cells become labelled lines, scrolling is vertical.
     4. Resize report and drill-down modals to consume the full screen so
        users aren't fighting a 95vw modal centered inside a 100vw window.
   =========================================================================== */

/* Apple-style hamburger button — 3 horizontal bars that morph into an X
   when the menu is open. Hidden on desktop. */
.nav-burger {
  display: none;
  width: 38px;
  height: 38px;
  background: transparent;
  border: 0;
  border-radius: 10px;
  padding: 0;
  cursor: pointer;
  position: relative;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}
.nav-burger:active {
  background: rgba(255,255,255,0.10);
}
.nav-burger .nav-burger-bar {
  display: block;
  width: 22px;
  height: 2px;
  background: white;
  border-radius: 2px;
  transition: transform 0.22s ease, opacity 0.18s ease;
  transform-origin: center;
}
/* Morph the 3 bars into an X when .topbar has .menu-open. */
.topbar.menu-open .nav-burger .nav-burger-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.topbar.menu-open .nav-burger .nav-burger-bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.topbar.menu-open .nav-burger .nav-burger-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 640px) {
  /* ---------- KILL HORIZONTAL OVERFLOW GLOBALLY ----------
     Apple devices: viewport width is fixed; nothing should bleed past
     the screen edge. Force everything to box-size correctly. */
  html, body {
    max-width: 100vw;
    overflow-x: hidden;
  }
  body, .content, #app, .modal-b {
    box-sizing: border-box;
  }

  /* ---------- TOP NAV: collapse into hamburger + drawer ---------- */
  .nav-burger { display: inline-flex; }
  .topbar {
    padding: 0 14px !important;
    gap: 10px;
    height: 56px;
    min-height: 56px;
    position: relative;
    z-index: 60;
  }
  .topbar .brand {
    width: auto !important;
    min-width: 0;
    flex: 0 1 auto;
    height: 40px !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .topbar .brand-img-bottom,
  .topbar .brand-img-top {
    height: 28px !important;
    width: auto !important;
    top: 6px !important;
    left: 0 !important;
  }
  /* Right side: company switcher + user pill + hamburger as the
     rightmost element. */
  .topbar .topbar-right {
    margin-left: auto;
    gap: 8px;
    flex-shrink: 0;
  }
  .topbar .company-switcher {
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 7px 10px;
    font-size: 13px;
    border-radius: 8px;
  }
  .topbar .user-pill {
    width: 32px;
    height: 32px;
    font-size: 13px;
  }

  /* Drawer-style nav: full-height side panel that slides in from the
     right when .menu-open is set. Uses fixed positioning so it sits on
     top of page content; backdrop dims everything beneath. */
  .topnav {
    position: fixed !important;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(82vw, 320px);
    height: 100vh;
    background: white;
    box-shadow: -8px 0 40px rgba(15,23,42,0.18);
    display: flex !important;
    flex-direction: column;
    gap: 2px;
    padding: 72px 14px 24px;
    margin: 0;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
    z-index: 55;
    border-top: 0;
  }
  .topbar.menu-open .topnav {
    transform: translateX(0);
  }
  /* Backdrop — appears behind the drawer when menu is open, dims the
     rest of the page. Click to dismiss the drawer. */
  .topbar::after {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
    z-index: 50;
  }
  .topbar.menu-open::after {
    opacity: 1;
    pointer-events: auto;
  }
  /* Nav items inside the drawer — Apple-style flat row, soft tap target,
     teal accent for active route. */
  .topnav button,
  .topnav .topnav-item > button[data-route] {
    width: 100%;
    text-align: left !important;
    padding: 13px 14px !important;
    font-size: 15px;
    font-weight: 500;
    border-radius: 10px;
    color: var(--text) !important;
    height: auto !important;
    background: transparent !important;
    border-bottom: 0 !important;
    transition: background 0.12s;
  }
  .topnav button:active,
  .topnav .topnav-item > button[data-route]:active {
    background: #F1F5F9 !important;
  }
  .topnav button.active,
  .topnav .topnav-item > button.active {
    background: #F0FDFA !important;
    color: var(--teal-600) !important;
  }
  /* Flatten the Transactions sub-dropdown so Review / Journal Entries
     appear as ordinary nav items rather than as a hover-popout that
     doesn't work on touch. */
  .topnav .topnav-item {
    position: static !important;
    display: block;
    width: 100%;
  }
  .topnav .topnav-dropdown {
    position: static !important;
    display: flex !important;
    flex-direction: column;
    box-shadow: none !important;
    border: 0 !important;
    background: transparent !important;
    padding: 2px 0 0 10px !important;
    margin: 2px 0 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
    min-width: 0 !important;
  }
  .topnav .topnav-dropdown-item {
    padding: 10px 12px !important;
    border-radius: 8px;
    color: var(--text);
    font-size: 13px;
  }

  /* ---------- PAGE CONTENT: tighter side padding ---------- */
  .content {
    padding: 10px 8px 80px;
  }
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .page-header .actions { width: 100%; flex-wrap: wrap; }

  /* ---------- DASHBOARD: stack KPI cards and chart legends ---------- */
  .kpis,
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .kpi-card,
  .card {
    padding: 14px !important;
  }
  /* Charts get max-width 100% so they don't blow out the viewport. */
  .card svg,
  .dashboard-chart svg {
    max-width: 100%;
    height: auto;
  }

  /* ---------- DATA TABLES → APPLE-STYLE STACKED CARDS ----------
     Each row turns into a self-contained card. Counterparty + date form
     the prominent header line; Debit/Credit show as the main amount on
     the right; everything else (Account / Class / Location / VAT / Edit)
     stacks below as labelled meta rows. Vertical stacking — no
     side-by-side grid — so values can't be squeezed off-screen. */
  table.t,
  table.t.t-compact {
    display: block;
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    margin: 0;
  }
  table.t thead { display: none; }
  table.t tbody { display: block; width: 100%; }
  table.t tbody tr {
    display: block;
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 12px;
    margin: 0 0 10px 0;
    padding: 12px 14px;
    background: white !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
    box-sizing: border-box;
  }
  table.t tbody tr.row-split { background: #EFF6FF !important; }
  table.t tbody tr.row-split:hover,
  table.t tbody tr:hover { background: white !important; }
  table.t tbody tr.row-split:hover { background: #EFF6FF !important; }

  /* Default: each <td> becomes a row with label on the left,
     value on the right. Wraps cleanly on long content. */
  table.t tbody td {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 6px 0 !important;
    border: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    text-align: left !important;
    width: 100%;
    box-sizing: border-box;
    white-space: normal !important;
    word-break: break-word;
  }
  table.t tbody td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    flex-shrink: 0;
  }
  table.t tbody td > * {
    text-align: right;
    min-width: 0;
    overflow-wrap: break-word;
  }
  /* Cells without data-label (Edit button row) span full width. */
  table.t tbody td:not([data-label]) {
    justify-content: stretch;
    padding-top: 10px !important;
    margin-top: 4px;
    border-top: 1px solid var(--border) !important;
  }
  table.t tbody td:not([data-label])::before { display: none; content: ""; }
  table.t tbody td:not([data-label]) > * {
    text-align: center;
    width: 100%;
  }
  table.t tbody td:not([data-label]) .btn {
    width: 100%;
    padding: 10px 14px;
    font-size: 14px;
  }

  /* Counterparty cell = card header. Hide its data-label, give it a
     bigger font weight, and push it to the top. */
  table.t tbody td[data-label="Counterparty"] {
    padding-top: 0 !important;
    padding-bottom: 8px !important;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--border) !important;
    justify-content: flex-start;
  }
  table.t tbody td[data-label="Counterparty"]::before {
    display: none;
    content: "";
  }
  table.t tbody td[data-label="Counterparty"] > * {
    text-align: left;
    font-size: 15px;
    font-weight: 600;
    width: 100%;
  }
  table.t tbody td[data-label="Counterparty"] .muted.small {
    font-weight: 400;
    font-size: 12px;
    color: var(--muted);
    margin-top: 2px;
  }

  /* Empty cells (e.g. — placeholders) get muted styling. */
  table.t tbody td .muted { color: var(--muted); }
  /* Kill inline white-space:nowrap so long counterparty names break
     instead of overflowing horizontally. */
  table.t tbody td span[style*="nowrap"] {
    white-space: normal !important;
  }
  table.t tbody td .pill {
    font-size: 11px;
    padding: 3px 8px;
  }

  /* ---------- MODALS: full-screen on mobile ---------- */
  .modal-back .modal {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }
  .modal-h,
  .modal-f {
    padding: 12px 14px !important;
  }
  .modal-b {
    padding: 12px 14px !important;
    max-height: none !important;
  }

  /* Reports specifically — the P&L / BS / VAT tables are too dense to
     stack as cards, so we ALLOW horizontal scroll on them only.
     Override the generic .t card-stacking rule with a narrower selector. */
  .report-section table.report,
  table.report {
    display: table;
  }
  .report-section table.report thead,
  table.report thead {
    display: table-header-group;
  }
  .report-section table.report tbody,
  table.report tbody {
    display: table-row-group;
  }
  .report-section table.report tbody tr,
  table.report tbody tr {
    display: table-row;
    margin: 0;
    padding: 0;
    border-radius: 0;
    border: 0;
    box-shadow: none;
  }
  .report-section table.report tbody td,
  table.report tbody td {
    display: table-cell;
    padding: 6px 8px !important;
  }
  .report-section table.report tbody td::before,
  table.report tbody td::before {
    content: "";
    flex: 0;
  }
  /* Wrap reports in a horizontal-scroll container so wide P&L / BS
     tables don't overflow the viewport. */
  .report-section,
  .report-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ---------- INPUTS: bigger touch targets ---------- */
  input, select, button.btn, button.dp-trigger {
    min-height: 38px;
    font-size: 14px;
  }
  .btn.btn-sm {
    min-height: 30px;
    padding: 6px 10px;
  }
}