/* ==========================================================================
   GoPajak Design System
   --------------------------------------------------------------------------
   Every rule here exists so templates can be written without a single inline
   `style` attribute. Production CSP sets `style-src 'self'` with no
   'unsafe-inline', which blocks style attributes outright — so any styling
   that is not in this file simply does not apply in production.

   Layout of this file:
     1. Design tokens (light)      7. Feedback: alerts, toasts, empty states
     2. Dark theme                 8. Modals & overlays
     3. Reset & elements           9. AI advisor drawer
     4. App shell & navigation    10. Command palette
     5. Surfaces & typography     11. Auth pages
     6. Controls: buttons, forms, 12. Print / report documents
        tables, badges            13. Utilities
   ========================================================================== */

/* ==========================================================================
   1. Design tokens (light)
   ========================================================================== */

:root {
  /* Brand ramp — emerald. Stays oriented the same way in both themes; the
     *reference* tokens below pick the readable end for the active theme. */
  --primary-50: #ecfdf5;
  --primary-100: #d1fae5;
  --primary-200: #a7f3d0;
  --primary-300: #6ee7b7;
  --primary-400: #34d399;
  --primary-500: #10b981;
  --primary-600: #059669;
  --primary-700: #047857;
  --primary-800: #065f46;
  --primary-900: #064e3b;

  /* Neutral ramp. 50 = lightest, 900 = darkest in light mode; the dark theme
     INVERTS this ramp (see §2), so `background: var(--slate-50)` paired with
     `color: var(--slate-900)` stays legible in both themes automatically. */
  --slate-50: #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;

  /* Fixed ink — never inverts. For surfaces that are dark in both themes
     (sidebar, auth backdrop, AI drawer header). */
  --ink-900: #0f172a;
  --ink-800: #1e293b;
  --ink-700: #334155;
  --on-ink: #ffffff;
  --on-ink-muted: #94a3b8;

  --accent-blue: #2563eb;
  --accent-indigo: #4f46e5;
  --accent-amber: #d97706;
  --accent-red: #dc2626;

  /* Semantic surfaces */
  --bg-page: #f8fafc;
  --bg-card: #ffffff;
  --bg-subtle: #f8fafc;
  --bg-inset: #f1f5f9;
  --border-card: #e2e8f0;
  --border-strong: #cbd5e1;

  --text-main: #0f172a;
  /* Both greys clear WCAG AA (4.5:1) on the card and page backgrounds:
     muted 7.58:1, subtle 4.76:1. --text-subtle was #94a3b8, which is 2.56:1 on
     white — it failed AA everywhere it was used, and it carried meaning
     (storage figures, the user's email, KPI comparison bases, help text). */
  --text-muted: #475569;
  --text-subtle: #64748b;
  --text-invert: #ffffff;

  /* Placeholders are explicitly not content under WCAG, and a placeholder dark
     enough to pass AA reads as a value the field already holds — which is a
     worse usability problem than the one it solves. Kept as its own token so
     darkening body text never drags placeholders along with it. */
  --text-placeholder: #94a3b8;

  /* Status pairs — background tint + readable foreground, per theme. */
  --ok-bg: #ecfdf5;
  --ok-fg: #047857;
  --ok-border: #a7f3d0;
  --info-bg: #eff6ff;
  --info-fg: #1d4ed8;
  --info-border: #bfdbfe;
  --warn-bg: #fffbeb;
  --warn-fg: #b45309;
  --warn-border: #fde68a;
  --danger-bg: #fef2f2;
  --danger-fg: #b91c1c;
  --danger-border: #fecaca;
  --neutral-bg: #f1f5f9;
  --neutral-fg: #475569;
  --neutral-border: #e2e8f0;

  /* Chrome */
  --sidebar-bg: #0f172a;
  --sidebar-fg: #cbd5e1;
  --sidebar-border: rgba(255, 255, 255, 0.08);
  --sidebar-width: 260px;

  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.07), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);

  /* Geometry. Tightened from 16/24px: a large corner radius reads as consumer
     software, and this is a tool people reconcile ledgers in. Precision is the
     impression to give. Definition and hairline borders now carry the
     separation that heavy shadows used to. */
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 9999px;

  /* Typography.
     -----------------------------------------------------------------------
     Named tokens rather than a literal stack, so adopting a brand face later
     is a one-line change here instead of a search across the stylesheet.
     Deliberately still the system stack: the production CSP is
     `font-src 'self'`, so a CDN webfont is blocked outright and self-hosting
     is the only route — a decision worth making on purpose rather than as a
     side effect of a CSS tidy-up. */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* Type scale — one ramp for everything.
     There used to be two: `h1` at 1.875rem from the element defaults, and
     `.page-header h1` at 1.35rem, so the same heading was two different sizes
     depending on which template rendered it. Headings now draw from the same
     tokens as body copy. */
  --fs-2xs: 0.675rem;
  --fs-xs: 0.75rem;
  --fs-sm: 0.825rem;
  --fs-base: 0.9rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.35rem;
  --fs-2xl: 1.5rem;

  --focus-ring: 0 0 0 3px rgba(16, 185, 129, 0.35);
}

/* ==========================================================================
   2. Dark theme
   --------------------------------------------------------------------------
   The neutral ramp is inverted rather than patched per-component, so any rule
   written as "light background + dark text" resolves to "dark background +
   light text" without a matching override.
   ========================================================================== */

:root[data-theme="dark"] {
  --slate-50: #0f1729;
  --slate-100: #182238;
  --slate-200: #27364f;
  --slate-300: #3b4c69;
  --slate-400: #64748b;
  --slate-500: #94a3b8;
  --slate-600: #b4c0d0;
  --slate-700: #cbd5e1;
  --slate-800: #e2e8f0;
  --slate-900: #f8fafc;

  --bg-page: #0b1324;
  --bg-card: #152035;
  --bg-subtle: #101a2c;
  --bg-inset: #1b2740;
  --border-card: #27364f;
  --border-strong: #3b4c69;

  --text-main: #f8fafc;
  --text-muted: #b4c0d0;
  --text-subtle: #94a3b8;   /* 6.35:1 on --bg-card */
  --text-invert: #0f172a;
  --text-placeholder: #7c8ba3;

  --ok-bg: rgba(16, 185, 129, 0.14);
  --ok-fg: #6ee7b7;
  --ok-border: rgba(16, 185, 129, 0.35);
  --info-bg: rgba(59, 130, 246, 0.16);
  --info-fg: #93c5fd;
  --info-border: rgba(59, 130, 246, 0.38);
  --warn-bg: rgba(245, 158, 11, 0.16);
  --warn-fg: #fcd34d;
  --warn-border: rgba(245, 158, 11, 0.4);
  --danger-bg: rgba(220, 38, 38, 0.16);
  --danger-fg: #fca5a5;
  --danger-border: rgba(220, 38, 38, 0.4);
  --neutral-bg: #1b2740;
  --neutral-fg: #b4c0d0;
  --neutral-border: #27364f;

  /* Light mode puts a dark rail against a light canvas (17:1). Dark mode had
     an even darker rail against a dark canvas (1.05:1), so the navigation
     dissolved into the page and the layout lost its spine. Inverting the
     relationship — a rail lighter than the canvas — restores the same
     hierarchy the light theme has. */
  --sidebar-bg: #18243c;
  --sidebar-border: rgba(255, 255, 255, 0.12);

  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.55);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.65);

  --focus-ring: 0 0 0 3px rgba(52, 211, 153, 0.4);

  color-scheme: dark;
}

/* Brand text on dark surfaces needs the light end of the emerald ramp. */
:root[data-theme="dark"] {
  --primary-600: #34d399;
  --primary-700: #6ee7b7;
  --primary-800: #a7f3d0;
  --accent-red: #f87171;
  --accent-amber: #fbbf24;
  --accent-indigo: #a5b4fc;
  --accent-blue: #93c5fd;
}

/* ==========================================================================
   3. Reset & elements
   ========================================================================== */

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

[x-cloak] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  color: var(--text-main);
  background-color: var(--bg-page);
  line-height: 1.6;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--primary-600);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s ease;
}

a:hover { color: var(--primary-700); }

h1, h2, h3, h4, h5, h6 {
  color: var(--text-main);
  letter-spacing: -0.025em;
  margin-top: 0;
  font-weight: 700;
}

h1 { font-size: var(--fs-2xl); line-height: 1.3; font-weight: 800; }
h2 { font-size: var(--fs-xl); line-height: 1.35; }
h3 { font-size: var(--fs-lg); line-height: 1.4; }
h4 { font-size: var(--fs-md); line-height: 1.45; }

code, .code {
  font-family: var(--font-mono);
  background: var(--bg-inset);
  color: var(--primary-700);
  padding: 0.15rem 0.4rem;
  border-radius: var(--radius-sm);
  font-size: 0.9em;
  border: 1px solid var(--border-card);
}

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

/* Visible keyboard focus everywhere, without showing rings on mouse clicks. */
:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
}

/* Screen-reader-only text that still receives focus. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10001;
  background: var(--primary-600);
  color: #ffffff;
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--radius-md) 0;
  font-weight: 700;
}

.skip-link:focus {
  left: 0;
  color: #ffffff;
}

/* ==========================================================================
   4. App shell & navigation
   ========================================================================== */

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

.sidebar {
  width: var(--sidebar-width);
  background: var(--sidebar-bg);
  color: var(--sidebar-fg);
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--sidebar-border);
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1100;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.sidebar-header {
  padding: 1.5rem 1.25rem 1rem 1.25rem;
  border-bottom: 1px solid var(--sidebar-border);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  gap: 0.75rem;
}

.sidebar .brand-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--on-ink);
  letter-spacing: -0.03em;
  width: 100%;
}

.sidebar .brand-logo-img {
  max-height: 42px;
}

.sidebar .logo-badge {
  background: linear-gradient(135deg, var(--primary-500), var(--accent-indigo));
  color: #ffffff;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  font-weight: 700;
}

/* Active-entity summary pinned under the brand. */
.sidebar-entity {
  padding: 0.75rem 1.25rem;
  background: rgba(16, 185, 129, 0.08);
  border-bottom: 1px solid var(--sidebar-border);
}

.sidebar-entity-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--primary-400);
  margin-bottom: 0.2rem;
}

.sidebar-entity-name {
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--on-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-entity-npwp {
  font-size: var(--fs-xs);
  color: var(--on-ink-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.sidebar-entity-empty {
  font-size: 0.8rem;
  color: #fca5a5;
  font-weight: 600;
}

.sidebar-nav {
  padding: 1rem 0.75rem;
  flex: 1;
}

.nav-section-label,
.nav-group-title {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #64748b;
  padding: 0.85rem 0.75rem 0.25rem 0.75rem;
}

.sidebar-nav a,
.nav-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  color: var(--sidebar-fg);
  border-radius: var(--radius-md);
  font-size: var(--fs-base);
  font-weight: 500;
  transition: background 0.15s ease, color 0.15s ease;
  margin-bottom: 0.15rem;
}

.sidebar-nav a:hover,
.nav-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--on-ink);
}

.sidebar-nav a.active,
.nav-item.active {
  background: var(--primary-600);
  color: #ffffff;
  font-weight: 600;
}

.nav-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: color 0.15s ease;
}

.sidebar-nav .nav-icon { color: #94a3b8; }

.sidebar-nav a:hover .nav-icon,
.sidebar-nav a.active .nav-icon {
  color: #ffffff;
}

.sidebar-footer {
  padding: 1rem 0.75rem;
  border-top: 1px solid var(--sidebar-border);
}

.sidebar-footer .btn.danger-text {
  gap: 0.75rem;
  justify-content: flex-start;
}

.main-content {
  margin-left: var(--sidebar-width);
  flex: 1;
  padding: 2rem;
  min-width: 0;
  max-width: calc(100vw - var(--sidebar-width));
}

/* Mobile navigation ------------------------------------------------------ */

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  background: var(--bg-inset);
  border: 1px solid var(--border-card);
  color: var(--text-main);
  cursor: pointer;
}

.sidebar-close {
  display: none;
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--on-ink-muted);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.15rem 0.35rem;
}

.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  z-index: 1050;
}

/* Desktop sidebar collapse ------------------------------------------------
   Reclaims 188px for the wide ledger tables. Only meaningful above the mobile
   breakpoint, where the sidebar is a fixed rail rather than a drawer. */

.sidebar-collapse-btn {
  display: none;  /* switched on in the desktop media query below */
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  background: var(--bg-inset);
  border: 1px solid var(--border-card);
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.sidebar-collapse-btn:hover { color: var(--primary-600); border-color: var(--primary-500); }

@media (min-width: 901px) {
  .sidebar-collapse-btn { display: inline-flex; }

  /* Redefining the token on <body> cascades to .sidebar's width and
     .main-content's margin, so neither rule needs a collapsed variant. */
  body.sidebar-collapsed { --sidebar-width: 72px; }

  body.sidebar-collapsed .sidebar-collapse-btn svg { transform: rotate(180deg); }

  /* The rail keeps its icons; the words are hidden visually but NOT removed —
     `display: none` would take them from screen readers too, leaving a nav of
     unlabelled icons. This is the .sr-only treatment applied conditionally. */
  body.sidebar-collapsed .nav-item > span,
  body.sidebar-collapsed .sidebar-footer .btn > span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* Section headings and the entity block are decoration at this width; the
     nav items they group remain individually labelled. */
  body.sidebar-collapsed .nav-section-label,
  body.sidebar-collapsed .sidebar-entity {
    display: none;
  }

  body.sidebar-collapsed .nav-item {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
  }

  body.sidebar-collapsed .sidebar-header { padding-left: 0.5rem; padding-right: 0.5rem; }
  body.sidebar-collapsed .brand-logo-img { max-width: 40px; }
  body.sidebar-collapsed .sidebar-footer .btn { justify-content: center; }
}

@media (max-width: 900px) {
  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    width: min(280px, 85vw);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.35);
  }

  .sidebar.is-open { transform: translateX(0); }

  body.nav-open .sidebar-backdrop { display: block; }

  .sidebar-close { display: block; }

  .nav-toggle { display: inline-flex; }

  .main-content {
    margin-left: 0;
    max-width: 100vw;
    padding: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* Top header ------------------------------------------------------------- */

.top-entity-header {
  background: var(--bg-card);
  color: var(--text-main);
  border-bottom: 1px solid var(--border-card);
  padding: 0.75rem 1.5rem;
  margin: -2rem -2rem 1.5rem -2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  box-shadow: var(--shadow-sm);

  /* Which entity you are editing must never scroll out of view: this is a
     multi-entity tax app, and posting a journal against the wrong taxpayer is
     not a mistake the UI should make easy. The quick search and theme toggle
     come along for free.

     Below the impersonation banner's z-index (9999) — during a support session
     that warning outranks everything. */
  position: sticky;
  top: 0;
  z-index: 900;
}

/* The banner is sticky at top:0 itself, so the header has to start below it
   rather than underneath it. Set from the template, which knows when a support
   session is active. */
body.has-impersonation .top-entity-header { top: var(--impersonation-height, 3rem); }

.top-entity-left,
.top-entity-right {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}

.top-entity-right { gap: 0.75rem; }

.top-entity-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  font-size: var(--fs-xs);
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.top-entity-label .nav-icon {
  width: 16px;
  height: 16px;
  color: var(--primary-600);
}

.entity-switcher {
  margin: 0;
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.entity-switcher select {
  font-size: var(--fs-sm);
  font-weight: 700;
  padding: 0.35rem 2.25rem 0.35rem 0.75rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background-color: var(--bg-inset);
  color: var(--text-main);
  width: auto;
  max-width: 320px;
  box-shadow: var(--shadow-sm);
}

.entity-name-static {
  font-weight: 700;
  color: var(--text-main);
}

.entity-empty { color: var(--accent-red); font-weight: 600; }

/* Quick-search trigger */
.quick-search-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: var(--fs-sm);
  padding: 0.45rem 0.85rem;
  background: var(--bg-inset);
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
  border-radius: var(--radius-md);
  width: 320px;
  max-width: 100%;
  min-width: 0;
  cursor: pointer;
  box-shadow: none;
}

.quick-search-btn:hover {
  background: var(--bg-inset);
  border-color: var(--primary-500);
  color: var(--text-main);
  transform: none;
}

.quick-search-btn > span:first-child {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quick-search-btn .nav-icon { width: 15px; height: 15px; }

kbd, .kbd {
  font-family: inherit;
  font-size: 0.65rem;
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  padding: 0.1rem 0.35rem;
  color: var(--text-muted);
  font-weight: 700;
  white-space: nowrap;
}

.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  background: var(--bg-inset);
  border: 1px solid var(--border-strong);
  color: var(--text-main);
  cursor: pointer;
  box-shadow: none;
}

.theme-toggle-btn:hover {
  background: var(--bg-inset);
  border-color: var(--primary-500);
  color: var(--primary-600);
  transform: none;
}

.theme-toggle-btn svg { width: 18px; height: 18px; }

.user-menu-dropdown {
  position: relative;
}

.user-badge-header {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.35rem 0.75rem 0.35rem 0.45rem;
  background: var(--bg-inset);
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-card);
  text-decoration: none;
  min-width: 0;
  cursor: pointer;
  color: var(--text-main);
  transition: border-color 0.15s ease, background 0.15s ease;
}

.user-badge-header:hover {
  border-color: var(--primary-500);
}

.user-menu-chevron {
  width: 14px;
  height: 14px;
  color: var(--text-muted);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.user-menu-chevron.open {
  transform: rotate(180deg);
}

.user-dropdown-panel {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  width: 250px;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  padding: 0.35rem 0;
}

.user-dropdown-header {
  padding: 0.75rem 1rem 0.6rem 1rem;
}

.user-dropdown-divider {
  height: 1px;
  background: var(--border-card);
  margin: 0.35rem 0;
}

.user-dropdown-menu {
  display: flex;
  flex-direction: column;
  padding: 0 0.35rem;
}

.user-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius-sm);
  color: var(--text-main);
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: 500;
  background: none;
  border: none;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
  width: 100%;
  text-align: left;
}

.user-dropdown-item:hover {
  background: var(--bg-subtle);
  color: var(--primary-600);
}

.user-dropdown-item.danger:hover {
  background: rgba(239, 68, 68, 0.08);
  color: var(--accent-red);
}

.user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--primary-600);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.8rem;
  flex-shrink: 0;
}

.sidebar-user .user-avatar { width: 36px; height: 36px; font-size: var(--fs-base); }

/* A photo replaces the initial entirely, so it fills the same circle. */
.user-avatar.has-photo { background: none; }

.user-avatar img,
.avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

/* Upload panels for the profile photo and the entity logo. */
.image-upload {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.image-preview {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--bg-inset);
  border: 1px solid var(--border-card);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  color: var(--text-subtle);
  font-size: 2rem;
  font-weight: 800;
}

.image-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* A logo is not a portrait: square crop and a circle would both mangle it. */
.image-preview.logo {
  width: 180px;
  height: 96px;
  border-radius: var(--radius-md);
  background: var(--bg-card);
  padding: 0.5rem;
}

.image-preview.logo img { object-fit: contain; }

.image-upload-controls { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; flex: 1 1 260px; }

/* The taxpayer's own mark on a document header. */
.entity-mark {
  max-height: 52px;
  max-width: 180px;
  object-fit: contain;
  display: block;
  margin-left: auto;
  margin-bottom: 0.4rem;
}

.user-info { overflow: hidden; line-height: 1.2; }

.user-name {
  color: var(--text-main);
  font-size: var(--fs-sm);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-email {
  color: var(--text-muted);
  font-size: 0.725rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid var(--sidebar-border);
}

.sidebar-user .user-name { color: var(--on-ink); }
.sidebar-user .user-email { color: var(--on-ink-muted); }

/* Support-mode impersonation banner (FR-ADM-004). */
.impersonation-banner {
  position: sticky;
  top: 0;
  z-index: 9999;
  background: #b91c1c;
  color: #ffffff;
  padding: 0.6rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font-size: var(--fs-base);
}

.impersonation-banner form { margin: 0; }

.impersonation-banner button {
  background: #ffffff;
  color: #b91c1c;
  border: 0;
  padding: 0.3rem 0.75rem;
  border-radius: 4px;
  font-weight: 700;
  cursor: pointer;
}

@media (max-width: 640px) {
  .top-entity-header {
    margin: -1rem -1rem 1rem -1rem;
    padding: 0.65rem 1rem;
  }

  /* The switcher is the widest thing in the header; letting it take a full
     row of its own is what stops the page scrolling sideways on a phone. */
  .top-entity-left { flex: 1 1 100%; flex-wrap: wrap; }
  .entity-switcher { width: 100%; }
  .entity-switcher select { width: 100%; max-width: 100%; }

  .quick-search-btn { width: auto; flex: 1 1 auto; }
  .quick-search-btn .quick-search-text { display: none; }
  .user-badge-header .user-info { display: none; }
  .user-badge-header { padding: 0.25rem; }
}

/* Nothing should make the document itself scroll horizontally; wide content
   scrolls inside its own .table-wrap / .code-pane instead.
   `clip` rather than `hidden`: `hidden` would turn the root into a scroll
   container and break position:sticky on the invoice preview pane and the
   impersonation banner. */
html, body { max-width: 100%; overflow-x: clip; }

/* ==========================================================================
   5. Surfaces & typography
   ========================================================================== */

.shell {
  max-width: 1200px;
  margin: 2rem auto;
  padding: 0 1.5rem;
}

.card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: 2rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow-sm);
}

/* No hover elevation. `.card` is the page-level container on nearly every
   screen, so lifting it on hover made the whole page twitch whenever the
   pointer crossed it. Elevation belongs to things you can actually click. */

/* `.card.wide` opts out of the auth-style narrow column. */
.card.wide { width: 100%; max-width: none; }

@media (max-width: 640px) {
  .card { padding: 1.25rem; border-radius: var(--radius-md); }
}

/* A flat inset surface inside a card — used for KPI tiles, summaries, notes. */
.panel {
  background: var(--bg-subtle);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: 1.25rem;
}

.panel.tight { padding: 0.85rem 1rem; }
.panel.plain { background: var(--bg-card); }

/* Breadcrumbs --------------------------------------------------------------
   Orientation for deep pages, which previously offered no route back except the
   browser button. Built from the same navigation definition as the sidebar. */

.breadcrumbs {
  margin-bottom: 1rem;
  font-size: var(--fs-sm);
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.breadcrumbs li {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

/* Separator drawn in CSS so it is not read out as content. */
.breadcrumbs li + li::before {
  content: "/";
  color: var(--text-subtle);
  font-weight: 600;
}

.breadcrumbs a {
  color: var(--text-muted);
  font-weight: 500;
}

.breadcrumbs a:hover { color: var(--primary-600); }

.breadcrumbs [aria-current="page"] {
  color: var(--text-main);
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 24rem;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-card);
  padding-bottom: 1rem;
}

/* Spacing only: the size comes from the shared h1 rule, which this used to
   contradict. */
.page-header h1 { margin-bottom: 0.25rem; }

.page-header-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.subtitle {
  color: var(--text-muted);
  font-size: var(--fs-base);
  margin-top: 0;
  margin-bottom: 1rem;
}

.text-muted, .muted { color: var(--text-muted); }
.text-subtle { color: var(--text-subtle); }
.text-important { color: var(--text-main); font-weight: 700; }
.text-icon-action { color: var(--primary-600); }

.help-text {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-top: 0.3rem;
  line-height: 1.5;
}

/* Figures: tabular numerals so columns of rupiah line up. */
.numeric, .figures {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* KPI tiles ------------------------------------------------------------- */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
  margin-bottom: 2rem;
}

.stat-grid.compact { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1rem; }

.stat-tile {
  background: var(--bg-subtle);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  min-width: 0;
}

.stat-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}

.stat-value {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text-main);
  font-variant-numeric: tabular-nums;
  overflow-wrap: break-word;
}

.stat-value.sm { font-size: 1.15rem; }
.stat-value.ok { color: var(--primary-700); }
.stat-value.danger { color: var(--accent-red); }
.stat-value.info { color: var(--accent-indigo); }

.stat-hint {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-top: 0.25rem;
}

.stat-hint.ok { color: var(--primary-600); }

/* Period-on-period change ------------------------------------------------
   Colour reflects whether the movement is good, not whether it is upward:
   rising expenses are red even though the arrow points the same way as rising
   revenue. */

.stat-delta {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  margin-top: 0.35rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.stat-delta.up-good, .stat-delta.down-good { color: var(--primary-600); }
.stat-delta.up-bad, .stat-delta.down-bad { color: var(--accent-red); }
.stat-delta.flat, .stat-delta.none { color: var(--text-subtle); font-weight: 600; }

.stat-delta-base {
  color: var(--text-subtle);
  font-weight: 500;
}

/* Sparkline -------------------------------------------------------------- */

.stat-spark {
  margin-top: 0.5rem;
  color: var(--text-subtle);
  line-height: 0;
}

.stat-spark.ok { color: var(--primary-500); }
.stat-spark.danger { color: var(--accent-red); }

.sparkline {
  display: block;
  width: 100%;
  height: 24px;
  overflow: visible;
}

/* preserveAspectRatio="none" stretches the line horizontally to the tile's
   width; without this the stroke would stretch with it and thicken. */
.sparkline polyline { vector-effect: non-scaling-stroke; }

/* ==========================================================================
   6. Controls: buttons, forms, tables, badges
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--primary-600);
  color: #ffffff;
  padding: 0.625rem 1.25rem;
  border-radius: var(--radius-md);
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 0.925rem;
  font-weight: 600;
  line-height: 1.35;
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  box-shadow: var(--shadow-sm);
}

.btn:hover {
  background: var(--primary-700);
  color: #ffffff;
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.btn:disabled, .btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* In-flight submit. The button keeps its label and width so the row does not
   reflow mid-click; the spinner is appended rather than swapped in. */
.btn.is-pending {
  cursor: progress;
  pointer-events: none;
}

.btn.is-pending::after {
  content: "";
  width: 0.85em;
  height: 0.85em;
  margin-left: 0.15rem;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  flex-shrink: 0;
  animation: btnSpin 0.6s linear infinite;
}

@keyframes btnSpin {
  to { transform: rotate(360deg); }
}

/* Respecting reduced motion: the spinner still signals "busy" by being there,
   it just stops rotating (the global reduced-motion rule kills the duration). */

/* A locked control is a label, not an action — never let it lift on hover. */
.btn[aria-disabled="true"]:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--border-strong);
  background: var(--bg-card);
  color: var(--text-main);
}

:root[data-theme="dark"] .btn.primary,
:root[data-theme="dark"] .btn:not(.secondary):not(.danger):not(.danger-text) {
  color: #04231a;
}

:root[data-theme="dark"] .btn.primary:hover,
:root[data-theme="dark"] .btn:not(.secondary):not(.danger):not(.danger-text):hover {
  color: #04231a;
}

.btn.secondary {
  background: var(--bg-card);
  color: var(--text-main);
  border-color: var(--border-strong);
}

.btn.secondary:hover {
  background: var(--bg-inset);
  border-color: var(--primary-500);
  color: var(--text-main);
}

.btn.danger, .btn.danger-text {
  background: var(--danger-bg);
  color: var(--danger-fg);
  border-color: var(--danger-border);
}

.btn.danger:hover, .btn.danger-text:hover {
  background: var(--accent-red);
  color: #ffffff;
}

/* Purchase-side actions are indigo so they read as distinct from sales. */
.btn.indigo {
  background: #4f46e5;
  color: #ffffff;
  border-color: #4f46e5;
}

.btn.indigo:hover { background: #4338ca; color: #ffffff; }

.btn.ghost {
  background: transparent;
  color: var(--text-muted);
  border-color: transparent;
  box-shadow: none;
}

.btn.ghost:hover {
  background: var(--bg-inset);
  color: var(--text-main);
  transform: none;
}

.btn-sm {
  padding: 0.35rem 0.7rem;
  font-size: var(--fs-sm);
  border-radius: var(--radius-sm);
  gap: 0.3rem;
}

.btn-lg { padding: 0.85rem 1.6rem; font-size: var(--fs-md); }

.btn-icon {
  padding: 0.5rem;
  width: 36px;
  height: 36px;
  gap: 0;
}

.btn svg { flex-shrink: 0; }
.btn-sm svg { width: 14px; height: 14px; }

.btn-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

.btn-row.end { justify-content: flex-end; }
.submit-row { display: flex; gap: 0.75rem; align-items: center; margin-top: 1.25rem; flex-wrap: wrap; }

.w-full { width: 100%; }

/* Forms ------------------------------------------------------------------ */

input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="date"], input[type="tel"], input[type="search"], input[type="url"],
select, textarea, .form-control {
  width: 100%;
  padding: 0.65rem 0.875rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  font: inherit;
  font-size: 0.95rem;
  color: var(--text-main);
  background-color: var(--bg-card);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input::placeholder, textarea::placeholder { color: var(--text-placeholder); }

input:focus, select:focus, textarea:focus, .form-control:focus {
  outline: none;
  border-color: var(--primary-600);
  box-shadow: var(--focus-ring);
}

input[type="file"] {
  width: 100%;
  font-size: var(--fs-base);
  color: var(--text-main);
}

input[disabled], select[disabled], textarea[disabled] {
  background: var(--bg-inset);
  color: var(--text-muted);
  cursor: not-allowed;
}

select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 1.1em 1.1em;
  padding-right: 2.5rem;
  cursor: pointer;
}

:root[data-theme="dark"] select {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
}

label {
  display: block;
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 0.35rem;
}

.form-group { margin-bottom: 1.15rem; }

.form-group label { margin-bottom: 0.35rem; }

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

.form-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: flex-end;
}

.form-row > * { flex: 1 1 200px; min-width: 0; }

/* Standardised clean rounded checkboxes (FR-UI) */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 1.125rem;
  height: 1.125rem;
  min-width: 1.125rem;
  min-height: 1.125rem;
  border: 1.5px solid var(--border-strong);
  border-radius: 4.5px;
  background-color: var(--bg-card);
  cursor: pointer;
  display: inline-grid;
  place-content: center;
  margin: 0;
  vertical-align: middle;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  flex-shrink: 0;
  box-sizing: border-box;
}

input[type="checkbox"]:hover {
  border-color: var(--primary-500);
}

input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
  border-color: var(--primary-600);
}

input[type="checkbox"]:checked {
  background-color: var(--primary-600);
  border-color: var(--primary-600);
}

input[type="checkbox"]:checked::before {
  content: "";
  width: 0.65rem;
  height: 0.35rem;
  border-left: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  transform: rotate(-45deg) translate(1px, -1px);
}

input[type="checkbox"]:indeterminate {
  background-color: var(--primary-600);
  border-color: var(--primary-600);
}

input[type="checkbox"]:indeterminate::before {
  content: "";
  width: 0.6rem;
  height: 2px;
  background-color: #ffffff;
  border-radius: 1px;
}

input[type="checkbox"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: var(--bg-inset);
  border-color: var(--border-card);
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}

.checkbox-row input[type="radio"] {
  width: auto;
  margin: 0;
  accent-color: var(--primary-600);
}

.checkbox-row label { margin: 0; font-weight: 500; }

.field-error, .error-text {
  color: var(--accent-red);
  font-size: var(--fs-xs);
  font-weight: 600;
  margin-top: 0.3rem;
  display: block;
}

input.error, select.error, textarea.error,
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: var(--accent-red);
}

/* Input with a leading icon (auth pages).
   `.field-icon` is self-sufficient: it only needs a positioned ancestor, so it
   works whether the wrapper carries `.field-with-icon` or just `.relative`. */
.field-with-icon { position: relative; }

.field-icon {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--text-subtle);
  pointer-events: none;
  z-index: 1;
}

/* The input has to leave room for the icon it sits behind. */
.field-with-icon input,
.field-with-icon select,
.field-icon + input,
.field-icon + select,
.field-icon + textarea { padding-left: 2.6rem; }

/* Password reveal button. Sits inside the field, so the input needs matching
   room on the right or the text runs underneath it. */
.field-with-icon.has-toggle input { padding-right: 2.9rem; }

.field-toggle {
  position: absolute;
  right: 0.4rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-muted);
  cursor: pointer;
}

.field-toggle:hover { color: var(--text-main); background: var(--bg-inset); }

/* The button sits on top of the input, so its focus ring must not be clipped. */
.field-toggle:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 1px;
}

/* Filter bar above list tables. */
.filter-bar {
  display: flex;
  gap: 0.65rem;
  align-items: flex-end;
  flex-wrap: wrap;
  padding: 0.9rem 1rem;
  background: var(--bg-subtle);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  margin-bottom: 1.25rem;
}

.filter-bar .filter-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.filter-bar .filter-field label {
  font-size: var(--fs-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin: 0;
}

.filter-bar .filter-field input,
.filter-bar .filter-field select {
  padding: 0.45rem 0.7rem;
  font-size: var(--fs-sm);
}

.filter-bar .filter-field.grow { flex: 1 1 220px; }
.filter-bar .filter-actions { display: flex; gap: 0.4rem; align-items: center; }

/* Tables ----------------------------------------------------------------- */

/* Wide tables must scroll inside their own box rather than blowing out the
   page on narrow viewports. */
.table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-md);
}

/* Sticky column headers.
   --------------------------------------------------------------------------
   This is opt-in rather than applied to every .table-wrap, because of a CSS
   rule that makes the obvious version silently do nothing: `overflow-x: auto`
   with `overflow-y: visible` computes overflow-y to `auto`, so .table-wrap is
   already a scrollport. A sticky thead therefore sticks to *its* scrollport,
   not the page — and since .table-wrap has auto height and never scrolls
   vertically, the header would never actually stick while the page scrolls.

   Bounding the height gives the header something to stick to. Only worth it on
   the long ledgers, hence the opt-in class: on a six-row table a nested scroll
   region is a nuisance, not a feature. max-height only engages once the table
   is taller than the space available. */
.table-wrap.sticky-head {
  max-height: calc(100vh - 16rem);
  overflow-y: auto;
}

/* .table th already carries an opaque background, so rows cannot show through
   the stuck header. border-collapse is `separate`, so its border-bottom stays
   painted while stuck. */
.table-wrap.sticky-head .table th {
  position: sticky;
  top: 0;
  z-index: 2;
}

.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-top: 1rem;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-card);
}

.table-wrap .table { margin-top: 0; }

.table th {
  background: var(--bg-subtle);
  color: var(--text-muted);
  font-weight: 700;
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border-card);
  text-align: left;
  white-space: nowrap;
}

.table td {
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--border-card);
  color: var(--text-main);
  font-size: var(--fs-base);
  vertical-align: middle;
}

.table tr:last-child td { border-bottom: none; }
.table tr:hover td { background: var(--bg-subtle); }

.table th.right, .table td.right { text-align: right; }
.table th.center, .table td.center { text-align: center; }
/* Money must not wrap mid-figure — "Rp 12.000.000,00" split across two lines
   is unreadable in a column of amounts. The wrapper scrolls instead. */
.table td.numeric, .table th.numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.table td.strong { font-weight: 700; }
.table td.nowrap, .table th.nowrap { white-space: nowrap; }

.table .row-actions {
  display: flex;
  gap: 0.35rem;
  justify-content: flex-end;
  align-items: center;
}

.table .total-row td {
  background: var(--bg-inset);
  font-weight: 700;
  border-top: 2px solid var(--border-strong);
}

.table .total-grand td {
  background: var(--bg-inset);
  font-weight: 800;
  font-size: var(--fs-md);
  border-top: 2px solid var(--text-main);
}

/* Sortable column headers. */
.table th a {
  color: inherit;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-weight: 700;
}

.table th a:hover { color: var(--primary-600); }

/* Reserve the arrow's width in every sortable header, so activating a sort does
   not shift the column widths under the cursor. */
.sort-arrow {
  display: inline-block;
  min-width: 0.75em;
  font-size: 0.9em;
  color: var(--primary-600);
}

.table th[aria-sort="none"] a .sort-arrow { color: var(--text-subtle); }

/* A hint that the header is interactive before it is hovered. */
.table th[aria-sort="none"] a:hover .sort-arrow::before { content: "↕"; }

.table th[aria-sort="ascending"] a,
.table th[aria-sort="descending"] a { color: var(--primary-600); }

/* In-flight status ------------------------------------------------------- */

/* A quietly pulsing dot on rows that are still being processed. It marks the
   difference between "this status is settled" and "this status is about to
   change on its own", which a static badge cannot express. */
.status-pulse {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  margin-right: 0.1rem;
  animation: statusPulse 1.6s ease-in-out infinite;
}

@keyframes statusPulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

/* Skeleton placeholders --------------------------------------------------
   Reserve the shape of the content while it loads, so the page does not jump
   when it arrives. Sized by the element they stand in for. */

.skeleton {
  background: linear-gradient(
    90deg,
    var(--bg-inset) 25%,
    var(--border-card) 37%,
    var(--bg-inset) 63%
  );
  background-size: 400% 100%;
  border-radius: var(--radius-sm);
  animation: skeletonSweep 1.4s ease-in-out infinite;
}

@keyframes skeletonSweep {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* Fills the reserved .chart-box while Chart.js parses and paints. */
.chart-skeleton {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-md);
}

/* Bulk selection --------------------------------------------------------- */

.select-col {
  width: 2.5rem;
  text-align: center;
  padding-right: 0.35rem !important;
}

.select-col input[type="checkbox"] {
  margin: 0 auto;
  cursor: pointer;
}

.table tr.is-selected td { background: var(--info-bg); }

/* Appears only while rows are selected, so it is never mistaken for a filter. */
.bulk-bar {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
  padding: 0.7rem 1rem;
  margin-bottom: 0.75rem;
  border: 1px solid var(--info-border);
  background: var(--info-bg);
  border-radius: var(--radius-md);
}

.bulk-bar-count {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  font-size: var(--fs-sm);
  color: var(--info-fg);
  font-weight: 600;
}

.bulk-bar-count strong { font-size: var(--fs-md); font-weight: 800; }

.bulk-bar select {
  width: auto;
  min-width: 14rem;
  padding: 0.4rem 2.5rem 0.4rem 0.7rem;
  font-size: var(--fs-sm);
}

@media (max-width: 640px) {
  .bulk-bar select { width: 100%; min-width: 0; }
}

/* Active filter chips --------------------------------------------------- */

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: -0.5rem 0 1.25rem 0;
}

.filter-chips-label {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--info-border);
  background: var(--info-bg);
  color: var(--info-fg);
  font-size: var(--fs-xs);
  font-weight: 600;
  max-width: 22rem;
}

.filter-chip:hover {
  border-color: var(--accent-red);
  background: var(--danger-bg);
  color: var(--danger-fg);
}

.filter-chip-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.filter-chip-x { font-size: 1rem; line-height: 1; opacity: 0.7; }
.filter-chip:hover .filter-chip-x { opacity: 1; }

/* Badges ----------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
  background: var(--neutral-bg);
  color: var(--neutral-fg);
  border: 1px solid var(--neutral-border);
}

a.badge:hover { filter: brightness(0.97); }

.badge.success { background: var(--ok-bg); color: var(--ok-fg); border-color: var(--ok-border); }
.badge.info { background: var(--info-bg); color: var(--info-fg); border-color: var(--info-border); }
.badge.warning { background: var(--warn-bg); color: var(--warn-fg); border-color: var(--warn-border); }
.badge.danger, .badge.error { background: var(--danger-bg); color: var(--danger-fg); border-color: var(--danger-border); }
.badge.sm { padding: 0.1rem 0.45rem; font-size: var(--fs-2xs); }

/* Filter chips (document category pills). */
.chip {
  padding: 0.45rem 0.85rem;
  border-radius: var(--radius-pill);
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--bg-inset);
  color: var(--text-muted);
  border: 1px solid var(--border-card);
  white-space: nowrap;
}

.chip:hover { color: var(--text-main); border-color: var(--border-strong); }
.chip.active { background: var(--primary-600); color: #ffffff; border-color: var(--primary-600); }
.chip.active:hover { color: #ffffff; }
.chip svg { width: 14px; height: 14px; }

.chip-row {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
}

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

.tab-strip {
  display: flex;
  gap: 1.5rem;
  border-bottom: 1px solid var(--border-card);
  margin-top: 0.75rem;
  overflow-x: auto;
}

.tab-strip-item {
  background: transparent;
  border: none;
  padding: 0.65rem 0.25rem;
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.tab-strip-item:hover { color: var(--text-main); }

.tab-strip-item.active {
  color: var(--text-main);
  font-weight: 700;
  border-bottom-color: var(--primary-600);
}

/* Pagination ------------------------------------------------------------- */

.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-card);
}

.pagination-info { font-size: var(--fs-sm); color: var(--text-muted); }

.pagination-links {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-wrap: wrap;
}

.pagination-links a,
.pagination-links span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 0.55rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-card);
  background: var(--bg-card);
  color: var(--text-main);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.pagination-links a:hover { border-color: var(--primary-500); color: var(--primary-600); }

.pagination-links .current {
  background: var(--primary-600);
  border-color: var(--primary-600);
  color: #ffffff;
}

.pagination-links .disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.pagination-links .gap {
  border: none;
  background: none;
  color: var(--text-subtle);
  min-width: 20px;
}

/* ==========================================================================
   7. Feedback: alerts, toasts, empty states
   ========================================================================== */

.alert {
  padding: 0.875rem 1.15rem;
  border-radius: var(--radius-md);
  font-size: var(--fs-base);
  font-weight: 500;
  background: var(--info-bg);
  color: var(--info-fg);
  border: 1px solid var(--info-border);
  margin-bottom: 1rem;
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

.alert.success { background: var(--ok-bg); color: var(--ok-fg); border-color: var(--ok-border); }
.alert.warning { background: var(--warn-bg); color: var(--warn-fg); border-color: var(--warn-border); }
.alert.danger, .alert.error { background: var(--danger-bg); color: var(--danger-fg); border-color: var(--danger-border); }
.alert svg { flex-shrink: 0; width: 18px; height: 18px; margin-top: 0.1rem; }

.messages { margin-bottom: 1.5rem; }

.message {
  padding: 0.875rem 1.25rem;
  border-radius: var(--radius-md);
  font-size: var(--fs-base);
  font-weight: 500;
  background: var(--info-bg);
  color: var(--info-fg);
  border: 1px solid var(--info-border);
  margin-bottom: 0.75rem;
}

/* Toasts ----------------------------------------------------------------- */

.toast-container {
  position: fixed;
  top: 20px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 380px;
  width: calc(100% - 48px);
}

.toast {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-left: 4px solid var(--primary-600);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xl);
  padding: 0.85rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: var(--fs-sm);
  color: var(--text-main);
}

.toast.success { border-left-color: var(--primary-600); }
.toast.warning { border-left-color: #f59e0b; }
.toast.error { border-left-color: var(--accent-red); }

.toast-close {
  background: none;
  border: none;
  font-size: 1.2rem;
  color: var(--text-subtle);
  cursor: pointer;
  line-height: 1;
  padding: 0;
  flex-shrink: 0;
}

.toast-close:hover { color: var(--text-main); }

@media (max-width: 640px) {
  .toast-container { top: 12px; right: 12px; left: 12px; width: auto; max-width: none; }
}

/* Empty states ----------------------------------------------------------- */

.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  background: var(--bg-card);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  color: var(--text-muted);
}

.empty-state-title {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 0.5rem;
}

.empty-state-body { font-size: var(--fs-base); margin-bottom: 1.5rem; }

.empty-state svg {
  width: 42px;
  height: 42px;
  color: var(--text-subtle);
  margin-bottom: 0.85rem;
}

/* Progress meter (storage quota). */
.meter {
  height: 8px;
  width: 100%;
  border-radius: var(--radius-pill);
  background: var(--bg-inset);
  overflow: hidden;
  border: 1px solid var(--border-card);
}

.meter-fill {
  height: 100%;
  background: var(--primary-600);
  border-radius: var(--radius-pill);
  transition: width 0.3s ease;
}

.meter-fill.warning { background: #f59e0b; }
.meter-fill.danger { background: var(--accent-red); }

/* ==========================================================================
   8. Modals & overlays
   ========================================================================== */

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.modal-overlay.top { align-items: flex-start; padding-top: 12vh; }

/* `display: flex` above outranks the `hidden` attribute's UA rule, so a
   hidden="true" overlay would stay on screen. This restores it. */
.modal-overlay[hidden] { display: none; }

/* While a modal is open the page behind it must not scroll — otherwise the
   wheel moves the ledger underneath the dialog. */
body.modal-open { overflow: hidden; }

/* Confirmation dialog ---------------------------------------------------- */

.confirm-modal { max-width: 440px; text-align: center; }

.confirm-modal .modal-title { margin-bottom: 0.5rem; }

.confirm-modal-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 1rem auto;
  border-radius: 50%;
  background: var(--danger-bg);
  color: var(--danger-fg);
}

.confirm-modal-body {
  color: var(--text-muted);
  font-size: var(--fs-base);
  margin: 0 0 1.5rem 0;
  line-height: 1.6;
}

.confirm-modal .btn-row { justify-content: center; }

.modal {
  background: var(--bg-card);
  color: var(--text-main);
  width: 100%;
  max-width: 580px;
  max-height: 86vh;
  overflow-y: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: 1.75rem;
  border: 1px solid var(--border-card);
}

.modal.lg { max-width: 760px; }
.modal.flush { padding: 0; overflow: hidden; display: flex; flex-direction: column; }

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  border-bottom: 2px solid var(--text-main);
  padding-bottom: 0.85rem;
  margin-bottom: 1.25rem;
}

.modal-title { font-size: var(--fs-lg); font-weight: 800; color: var(--text-main); }

.modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

/* ==========================================================================
   9. AI advisor drawer
   ========================================================================== */

@keyframes aiWavePulse {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1.15); opacity: 1; }
}

.ai-wave-dot {
  width: 7px;
  height: 7px;
  background: var(--primary-500);
  border-radius: 50%;
  display: inline-block;
  animation: aiWavePulse 1.2s infinite ease-in-out both;
}

.ai-wave-dot:nth-child(2) { animation-delay: 0.2s; }
.ai-wave-dot:nth-child(3) { animation-delay: 0.4s; }

.ai-thinking { display: flex; align-items: center; gap: 0.4rem; padding: 0.25rem 0.4rem; }

.ai-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 990;
  border-radius: var(--radius-pill);
  padding: 0.75rem 1.25rem;
  box-shadow: 0 10px 25px -5px rgba(16, 185, 129, 0.4);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: linear-gradient(135deg, var(--primary-700), var(--primary-600));
  border: 1px solid rgba(255, 255, 255, 0.3);
  font-weight: 700;
  color: #ffffff;
}

.ai-fab:hover { background: linear-gradient(135deg, var(--primary-800), var(--primary-700)); color: #ffffff; }
.ai-fab svg { width: 20px; height: 20px; color: #ffffff; }

:root[data-theme="dark"] .ai-fab,
:root[data-theme="dark"] .ai-fab:hover { color: #04231a; }
:root[data-theme="dark"] .ai-fab svg { color: #04231a; }

.ai-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  height: 100vh;
  height: 100dvh;
  width: 100%;
  max-width: 420px;
  z-index: 1050;
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.25);
  border-left: 1px solid var(--border-card);
}

.ai-drawer-header {
  padding: 0.9rem 1.15rem;
  background: var(--ink-900);
  color: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  border-bottom: 1px solid var(--ink-800);
  flex-shrink: 0;
}

.ai-drawer-brand { display: flex; align-items: center; gap: 0.5rem; }

.ai-drawer-mark {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--primary-600), var(--accent-indigo));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  flex-shrink: 0;
}

.ai-drawer-mark svg { width: 16px; height: 16px; color: #ffffff; }

.ai-drawer-title-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.ai-status-dot-thick {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #10b981;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.8);
  display: inline-block;
  flex-shrink: 0;
}

.ai-drawer-title {
  margin: 0;
  font-size: 0.95rem;
  color: #ffffff;
  font-weight: 800;
  line-height: 1.2;
}

.ai-drawer-status {
  font-size: var(--fs-2xs);
  color: var(--on-ink-muted);
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.15rem;
}

.ai-drawer-actions { display: flex; align-items: center; gap: 0.4rem; flex-shrink: 0; }

.ai-drawer-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  padding: 0.3rem 0.65rem;
  font-size: 0.725rem;
  font-weight: 700;
  color: #ffffff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: background 0.15s ease;
}

.ai-drawer-btn:hover { background: rgba(255, 255, 255, 0.2); }
.ai-drawer-btn svg { width: 13px; height: 13px; }

.ai-drawer-close {
  background: none;
  border: none;
  font-size: 1.4rem;
  color: var(--on-ink-muted);
  cursor: pointer;
  line-height: 1;
  padding: 0.2rem 0.4rem;
}

.ai-drawer-close:hover { color: #ffffff; }

.ai-drawer-body {
  flex: 1 1 0%;
  min-height: 0;
  overflow-y: auto;
  padding: 1rem;
  background: var(--bg-page);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.ai-drawer-body.is-dropping { outline: 2px dashed var(--primary-500); outline-offset: -6px; }

.ai-drawer-footer {
  padding: 0.85rem 1rem;
  background: var(--bg-card);
  border-top: 1px solid var(--border-card);
  flex-shrink: 0;
}

.ai-suggestions {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: 0.75rem;
}

.ai-suggestions-label {
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.5rem;
}

.ai-chip-row { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.ai-prompt-chip {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-pill);
  padding: 0.3rem 0.65rem;
  font-size: 0.725rem;
  font-weight: 600;
  color: var(--text-main);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  box-shadow: var(--shadow-sm);
}

.ai-prompt-chip:hover {
  border-color: var(--primary-500);
  color: var(--primary-600);
  transform: translateY(-1px);
}

.ai-msg-row { display: flex; flex-direction: column; }
.ai-msg-row.user { align-items: flex-end; }
.ai-msg-row.ai { align-items: flex-start; }
.ai-msg-row.user > * { max-width: 85%; }
.ai-msg-row.ai > * { max-width: 92%; }

.ai-msg-ai {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  color: var(--text-main);
  padding: 0.75rem 0.95rem;
  border-radius: 12px 12px 12px 2px;
  font-size: var(--fs-sm);
  line-height: 1.45;
  box-shadow: var(--shadow-sm);
  overflow-wrap: break-word;
}

.ai-msg-user {
  background: var(--bg-subtle);
  border: 1px solid var(--primary-500);
  color: var(--text-main);
  padding: 0.65rem 0.85rem;
  border-radius: 12px 12px 2px 12px;
  font-size: var(--fs-sm);
  font-weight: 500;
  box-shadow: var(--shadow-2xs);
  overflow-wrap: break-word;
}

.ai-msg-user a { color: var(--primary-600); text-decoration: underline; }

.ai-msg-attachment {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--bg-page);
  border: 1px solid var(--border-card);
  border-radius: 6px;
  padding: 0.25rem 0.55rem;
  margin-bottom: 0.35rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-main);
}

.ai-msg-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.35rem;
  margin-top: 0.4rem;
  border-top: 1px solid var(--border-card);
  padding-top: 0.25rem;
}

.ai-copy-btn {
  background: transparent;
  border: 1px solid var(--border-card);
  border-radius: 4px;
  padding: 0.15rem 0.4rem;
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.ai-copy-btn:hover {
  background: var(--primary-50);
  color: var(--primary-600);
  border-color: var(--primary-300);
}

:root[data-theme="dark"] .ai-copy-btn:hover { background: var(--bg-inset); }

.ai-copy-btn svg { width: 11px; height: 11px; }

/* Rendered markdown inside AI answers. */
.ai-md-h { display: block; font-weight: 800; color: var(--text-main); }
.ai-md-h1 { font-size: 0.95rem; margin: 0.35rem 0 0.1rem; }
.ai-md-h2 { font-size: 0.9rem; margin: 0.3rem 0 0.1rem; }
.ai-md-h3 {
  font-size: 0.875rem;
  margin: 0.25rem 0 0.08rem;
  border-bottom: 1px solid var(--border-card);
  padding-bottom: 0.1rem;
}

.ai-md-li { display: flex; gap: 0.35rem; margin: 0.08rem 0; align-items: flex-start; }
.ai-md-bullet { color: var(--primary-500); flex-shrink: 0; font-weight: bold; }
.ai-md-strong { color: var(--text-main); font-weight: 700; }
.ai-msg-user .ai-md-strong, .ai-msg-user .ai-md-h { color: var(--text-main); }

.ai-md-code {
  background: var(--bg-inset);
  color: var(--primary-700);
  padding: 0.15rem 0.35rem;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--fs-sm);
  border: 1px solid var(--border-card);
}

.ai-md-link { color: var(--primary-600); font-weight: 600; text-decoration: underline; }
.ai-md-hr { border: none; border-top: 1px dashed var(--border-card); margin: 0.4rem 0; }

/* AI Table Renderer */
.ai-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0.5rem 0;
  border-radius: 6px;
  border: 1px solid var(--border-card);
  box-shadow: var(--shadow-2xs);
  max-width: 100%;
}

.ai-table-wrapper::-webkit-scrollbar {
  height: 5px;
}

.ai-table-wrapper::-webkit-scrollbar-track {
  background: var(--bg-subtle);
  border-radius: 3px;
}

.ai-table-wrapper::-webkit-scrollbar-thumb {
  background: var(--border-card);
  border-radius: 3px;
}

.ai-table-wrapper::-webkit-scrollbar-thumb:hover {
  background: var(--primary-400);
}

.ai-table {
  width: 100%;
  min-width: max-content;
  border-collapse: collapse;
  font-size: 0.765rem;
  text-align: left;
  background: var(--bg-card);
}

.ai-table th {
  background: var(--bg-subtle);
  color: var(--text-main);
  font-weight: 700;
  padding: 0.35rem 0.6rem;
  border-bottom: 1px solid var(--border-card);
  border-right: 1px solid var(--border-card);
  white-space: nowrap;
}

.ai-table th:last-child { border-right: none; }

.ai-table td {
  padding: 0.35rem 0.6rem;
  border-bottom: 1px solid var(--border-card);
  border-right: 1px solid var(--border-card);
  color: var(--text-main);
  white-space: nowrap;
}

.ai-table td:last-child { border-right: none; }
.ai-table tr:last-child td { border-bottom: none; }
.ai-table tr:nth-child(even) td { background: var(--bg-subtle); }

/* Save-to-vault confirmation card. */
.ai-store-card {
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  border-radius: var(--radius-md);
  padding: 0.85rem;
  align-self: flex-start;
  max-width: 92%;
}

.ai-store-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--warn-fg);
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.ai-store-file {
  font-size: var(--fs-xs);
  color: var(--text-main);
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.ai-action-card {
  background: var(--bg-card);
  border: 1px solid var(--primary-500);
  border-radius: var(--radius-md);
  padding: 0.85rem;
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
  box-shadow: var(--shadow-sm);
}

.ai-action-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  margin-bottom: 0.6rem;
}

.ai-action-badge {
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  background: var(--bg-subtle);
  color: var(--primary-600);
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  letter-spacing: 0.5px;
}

.ai-action-title {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-main);
}

.ai-action-body {
  font-size: var(--fs-xs);
  color: var(--text-main);
  background: var(--bg-subtle);
  border-radius: 6px;
  padding: 0.6rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.ai-action-row {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
}

.ai-action-label {
  color: var(--text-muted);
}

.ai-action-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  border-top: 1px dashed var(--border-card);
  padding-top: 0.35rem;
  margin-top: 0.2rem;
}

.ai-store-file strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-store-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--warn-fg);
  display: block;
  margin-bottom: 0.2rem;
}

.ai-attachment-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  background: var(--bg-page);
  border: 1px solid var(--border-card);
  border-radius: 6px;
  padding: 0.35rem 0.65rem;
  margin-bottom: 0.5rem;
  font-size: var(--fs-xs);
}

.ai-attachment-name {
  color: var(--text-main);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-attachment-bar svg { width: 14px; height: 14px; color: var(--primary-500); flex-shrink: 0; }

.ai-inline-error {
  background: var(--danger-bg);
  border: 1px solid var(--danger-border);
  color: var(--danger-fg);
  border-radius: 6px;
  padding: 0.4rem 0.65rem;
  margin-bottom: 0.5rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.ai-composer { display: flex; gap: 0.5rem; align-items: flex-end; }

.ai-composer textarea {
  flex: 1;
  font-size: var(--fs-sm);
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  background: var(--bg-page);
  color: var(--text-main);
  resize: vertical;
  max-height: 320px;
  min-height: 72px;
  line-height: 1.4;
}

.ai-composer-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
  flex-shrink: 0;
}

.ai-attach-btn,
.ai-send-icon-btn {
  width: 27px !important;
  height: 27px !important;
  min-height: 27px !important;
  max-height: 27px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0;
  border-radius: 5px;
  box-sizing: border-box;
}

.ai-attach-btn {
  background: var(--bg-page);
  border: 1px solid var(--border-card);
  cursor: pointer;
  color: var(--text-muted);
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.ai-attach-btn:hover { border-color: var(--primary-500); color: var(--primary-600); background: var(--bg-subtle); }
.ai-attach-btn svg,
.ai-send-icon-btn svg { width: 13px; height: 13px; flex-shrink: 0; }

.ai-footnote {
  font-size: 0.65rem;
  color: var(--text-muted);
  text-align: center;
  margin-top: 0.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.ai-footnote svg { width: 12px; height: 12px; flex-shrink: 0; }

@media (max-width: 480px) {
  .ai-drawer { max-width: 100%; }
  .ai-fab { bottom: 16px; right: 16px; padding: 0.65rem 1rem; }
}

/* ==========================================================================
   10. Command palette
   ========================================================================== */

.cmdk {
  background: var(--bg-card);
  width: 100%;
  max-width: 760px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--border-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.cmdk-search {
  padding: 1.1rem 1.5rem;
  border-bottom: 1px solid var(--border-card);
  display: flex;
  align-items: center;
  gap: 0.85rem;
  background: var(--bg-subtle);
}

.cmdk-search svg { width: 22px; height: 22px; color: var(--primary-600); flex-shrink: 0; }

.cmdk-search input {
  width: 100%;
  font-size: 1.05rem;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text-main);
  font-weight: 600;
  padding: 0;
}

.cmdk-search input:focus { box-shadow: none; }

.cmdk-results { max-height: 420px; overflow-y: auto; padding: 0.25rem 0; }

.cmdk-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 0.7rem 1.5rem;
  cursor: pointer;
  border-bottom: 1px solid var(--border-card);
  border-left: 4px solid transparent;
  background: transparent;
  text-align: left;
}

.cmdk-item.is-active {
  background: var(--bg-subtle);
  border-left-color: var(--primary-600);
}

.cmdk-item-main { display: flex; align-items: center; gap: 0.85rem; flex: 1; min-width: 0; }

.cmdk-item-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--bg-inset);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--primary-600);
}

.cmdk-item-icon svg { width: 18px; height: 18px; }

.cmdk-item-title {
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cmdk-item-sub {
  font-size: 0.725rem;
  color: var(--text-subtle);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cmdk-item-meta { display: flex; align-items: center; gap: 0.65rem; flex-shrink: 0; }

.cmdk-empty { padding: 2.5rem 1rem; text-align: center; color: var(--text-muted); font-size: var(--fs-base); }

.cmdk-footer {
  padding: 0.65rem 1.25rem;
  background: var(--bg-inset);
  border-top: 1px solid var(--border-card);
  font-size: 0.725rem;
  color: var(--text-muted);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.cmdk-footer strong { color: var(--primary-700); }

@media (max-width: 640px) {
  .cmdk-item-meta .badge { display: none; }
  .cmdk-search { padding: 0.85rem 1rem; }
  .cmdk-item { padding: 0.7rem 1rem; }
}

/* ==========================================================================
   11. Auth pages
   ========================================================================== */

@keyframes orbFloatOne {
  0% { transform: translate(0, 0) scale(1); opacity: 0.45; }
  50% { transform: translate(90px, -60px) scale(1.35); opacity: 0.85; }
  100% { transform: translate(0, 0) scale(1); opacity: 0.45; }
}

@keyframes orbFloatTwo {
  0% { transform: translate(0, 0) scale(1); opacity: 0.4; }
  50% { transform: translate(-100px, 70px) scale(1.4); opacity: 0.8; }
  100% { transform: translate(0, 0) scale(1); opacity: 0.4; }
}

.auth-wrapper {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  z-index: 1000;
  overflow-y: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: var(--ink-900);
}

.auth-bg-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Referenced from CSS rather than a style attribute so the strict
     production CSP (style-src 'self') does not strip it. */
  background-image: url("../img/image_cover1.webp");
  background-size: cover;
  background-position: center;
  z-index: 1;
}

.auth-overlay-layer {
  position: absolute;
  inset: 0;
  background: transparent;
  z-index: 2;
  pointer-events: none;
}

.auth-glow-orb-1 {
  position: absolute;
  top: 10%;
  right: 12%;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.45) 0%, rgba(16, 185, 129, 0) 70%);
  filter: blur(40px);
  animation: orbFloatOne 7s ease-in-out infinite alternate;
  z-index: 3;
  pointer-events: none;
  will-change: transform, opacity;
}

.auth-glow-orb-2 {
  position: absolute;
  bottom: 8%;
  left: 8%;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.4) 0%, rgba(99, 102, 241, 0) 70%);
  filter: blur(50px);
  animation: orbFloatTwo 9s ease-in-out infinite alternate;
  z-index: 3;
  pointer-events: none;
  will-change: transform, opacity;
}

.auth-card {
  position: relative;
  z-index: 10;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-xl);
  padding: 3.25rem 2.25rem;
  width: 100%;
  max-width: 440px;
  box-shadow:
    0 25px 50px -12px rgba(0, 0, 0, 0.45),
    0 0 40px rgba(16, 185, 129, 0.15);
  text-align: center;
  margin: auto;
}

.auth-card.wide { max-width: 900px; }
.auth-card form { text-align: left; }
.auth-card .subtitle { text-align: center; }

.auth-brand {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text-main);
  margin-bottom: 0.35rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: center;
}

.auth-footer-note {
  margin-top: 1.5rem;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  text-align: center;
}

.password-reset-link {
  display: block;
  text-align: right;
  font-size: var(--fs-xs);
  font-weight: 600;
  margin-top: -0.75rem;
  margin-bottom: 1rem;
}

@media (max-width: 640px) {
  .auth-card { padding: 2.25rem 1.35rem; }
  .auth-glow-orb-1, .auth-glow-orb-2 { display: none; }
}

/* ==========================================================================
   12. Print / report documents
   ========================================================================== */

.report-doc {
  max-width: 820px;
  margin: 0 auto;
  background: #ffffff;
  color: #0f172a;
  padding: 2.5rem;
}

/* --report-accent is set per tenant by ui.js from data-accent; the fallback
   keeps the report legible if that never runs. */
.report-brand {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
  border-bottom: 3px solid var(--report-accent, var(--text-main));
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.report-brand img { max-height: 60px; max-width: 200px; }

.report-firm-name {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--report-accent, var(--text-main));
}

.report-footer {
  margin-top: 2.5rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border-card);
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* Side-by-side tax scheme comparison. */
.scheme-card {
  background: var(--bg-card);
  border: 2px solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.scheme-card.winner { border-color: var(--primary-600); }

.winner-ribbon {
  background: linear-gradient(135deg, var(--primary-600), var(--primary-700));
  color: #ffffff;
  font-size: 0.725rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  align-self: flex-start;
  margin-bottom: 0.85rem;
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.25);
}

/* Standalone printable invoice (accounting/invoice_pdf.html). */
.report-doc .header,
.invoice-doc .header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
  flex-wrap: wrap;
  border-bottom: 2px solid var(--text-main);
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
}

.report-doc .title,
.invoice-doc .title { font-size: var(--fs-xl); font-weight: 800; color: var(--text-main); }

.meta-table { width: 100%; border-collapse: collapse; font-size: var(--fs-base); }
.meta-table td { padding: 0.25rem 0; vertical-align: top; }
.meta-table td:first-child { color: var(--text-muted); width: 45%; }

.items-table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: var(--fs-base); }

.items-table th {
  background: var(--bg-inset);
  text-align: left;
  padding: 0.6rem 0.75rem;
  border-bottom: 2px solid var(--border-strong);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.items-table td { padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--border-card); }
.items-table .right, .items-table th.right { text-align: right; }

.total-box {
  margin-left: auto;
  width: 100%;
  max-width: 320px;
  font-size: var(--fs-base);
}

.total-row {
  display: flex;
  justify-content: space-between;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--border-card);
}

.total-grand {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0;
  border-top: 2px solid var(--text-main);
  font-weight: 800;
  font-size: var(--fs-md);
}

.variance { color: var(--accent-red); font-weight: 700; }
.variance-head { font-weight: 800; color: var(--text-main); }

.sev { font-weight: 700; }
.sev.HIGH { color: var(--accent-red); }
.sev.MEDIUM { color: var(--accent-amber); }
.sev.LOW { color: var(--primary-600); }

.why { font-size: var(--fs-sm); color: var(--text-muted); margin-top: 0.2rem; }

.explanation { margin-top: 1rem; }
.explanation-label { font-weight: 700; font-size: var(--fs-base); margin-bottom: 0.35rem; display: block; }

@media print {
  .no-print, .sidebar, .top-entity-header, .ai-fab, .ai-drawer, .toast-container { display: none !important; }
  .main-content { margin-left: 0; max-width: 100%; padding: 0; }
  .card { box-shadow: none; border: none; padding: 0; }
  body { background: #ffffff; }
}

/* ==========================================================================
   12b. Recurring blocks
   ========================================================================== */

/* Circular icon medallions used on confirmation and empty screens. */
.medallion {
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem auto;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  background: var(--ok-bg);
  color: var(--primary-600);
}

.medallion.sm { width: 42px; height: 42px; margin-bottom: 0.75rem; }
.medallion.md { width: 48px; height: 48px; margin-bottom: 1rem; }
.medallion.lg { width: 64px; height: 64px; }
.medallion.square { border-radius: var(--radius-md); }
.medallion.inline { margin: 0; }
.medallion.info { background: var(--info-bg); color: var(--info-fg); }
.medallion.warning { background: var(--warn-bg); color: var(--warn-fg); }
.medallion.danger { background: var(--danger-bg); color: var(--danger-fg); }
.medallion.brand { background: linear-gradient(135deg, var(--primary-600), var(--primary-700)); color: #ffffff; }
.medallion.on-dark { background: rgba(255, 255, 255, 0.1); color: #ffffff; }
.medallion svg { width: 45%; height: 45%; }

/* Dark gradient banner heading a feature page. */
.hero-panel {
  background: linear-gradient(135deg, var(--ink-900), var(--ink-800));
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.75rem;
  color: #ffffff;
  margin-bottom: 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.hero-panel h1, .hero-panel h2, .hero-panel h3 { color: #ffffff; margin: 0; }
.hero-panel .hero-sub { font-size: var(--fs-sm); color: #cbd5e1; margin-top: 0.15rem; }

/* Emerald-tinted call-out. */
.promo-panel {
  margin-top: 1.5rem;
  background: var(--ok-bg);
  border: 1px solid var(--primary-500);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  text-align: center;
}

/* Selectable option cards (plan pickers, scheme choices). */
.option-card {
  border: 2px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: 1.25rem 1rem;
  text-align: center;
  background: var(--bg-subtle);
  transition: border-color 0.2s ease;
  cursor: pointer;
}

.option-card:hover { border-color: var(--primary-500); }
.option-card.selected { border-color: var(--primary-600); background: var(--ok-bg); }

.ribbon {
  background: linear-gradient(135deg, var(--primary-600), var(--primary-700));
  color: #ffffff;
  font-size: 0.725rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-sm);
  display: inline-block;
}

.brand-wordmark {
  font-size: 1.85rem;
  font-weight: 900;
  color: var(--text-main);
  letter-spacing: -0.04em;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* Left-accented inline warning inside a form. */
.notice {
  background: var(--danger-bg);
  border-left: 4px solid var(--accent-red);
  color: var(--danger-fg);
  padding: 0.75rem;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  margin-bottom: 1.25rem;
}

.notice.ok { background: var(--ok-bg); border-left-color: var(--primary-600); color: var(--ok-fg); }
.notice.warn { background: var(--warn-bg); border-left-color: #f59e0b; color: var(--warn-fg); }
.notice.info { background: var(--info-bg); border-left-color: var(--accent-blue); color: var(--info-fg); }

/* Two-column split used by asset/correction lists: table + side form. */
.split-2-1 {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1.5rem;
  margin-top: 1rem;
  align-items: start;
}

@media (max-width: 900px) {
  .split-2-1 { grid-template-columns: minmax(0, 1fr); }
}

.narrow-page { max-width: 650px; margin: 1rem auto; }

/* One-time-password entry: wide tracking so digits are easy to read back. */
.otp-input {
  font-size: 1.35rem;
  letter-spacing: 0.3em;
  text-align: center;
  font-weight: 800;
  color: var(--text-main);
  padding: 0.75rem 1rem;
}

.qr-frame {
  display: inline-block;
  padding: 0.75rem;
  background: #ffffff;
  border: 2px solid var(--border-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  margin-bottom: 1rem;
}

.brand-wordmark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.brand-logo-img { max-height: 48px; max-width: 180px; object-fit: contain; }
.brand-logo-img.lg { max-height: 78px; max-width: 320px; object-fit: contain; }

/* Light/dark mode logo switching for card pages */
.logo-dark { display: none !important; }
.logo-light { display: inline-block !important; }

:root[data-theme="dark"] .logo-light,
html.dark .logo-light {
  display: none !important;
}
:root[data-theme="dark"] .logo-dark,
html.dark .logo-dark {
  display: inline-block !important;
}

/* Banner naming the entity currently in session. */
.active-entity-banner {
  background: var(--ok-bg);
  border: 1px solid var(--ok-border);
  border-left: 4px solid var(--primary-600);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.table tr.is-active-row td {
  background: var(--ok-bg);
  font-weight: 500;
}

.table tr.is-active-row td:first-child { box-shadow: inset 4px 0 0 var(--primary-600); }

/* Centred boxed panel (2FA verification, small confirmations). */
.boxed-center {
  max-width: 480px;
  margin: 0 auto;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow-sm);
  text-align: center;
}

.code-block {
  background: var(--bg-subtle);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: 0.85rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 1.5rem;
  word-break: break-all;
  text-align: left;
}

/* Plan cards on the subscription page. */
.plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.75rem;
  align-items: stretch;
  margin-bottom: 2.5rem;
}

.plan-card {
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.5rem;
  position: relative;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
}

.plan-card.popular {
  border: 2px solid var(--primary-600);
  box-shadow: var(--shadow-lg);
}

.plan-card .plan-features {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex: 1;
}

.plan-card .plan-features li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: var(--fs-base);
}

.plan-card .plan-features svg { width: 18px; height: 18px; color: var(--primary-600); flex-shrink: 0; }

.plan-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--primary-600);
  color: #ffffff;
  padding: 0.25rem 0.85rem;
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 800;
  white-space: nowrap;
}

/* Monthly/annual switch. */
.billing-switch {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2.5rem;
  background: var(--bg-inset);
  border-radius: var(--radius-pill);
  padding: 0.65rem 1.25rem;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  flex-wrap: wrap;
}

.billing-switch-label {
  font-size: 0.925rem;
  font-weight: 700;
  cursor: pointer;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.billing-switch-label.is-active { color: var(--text-main); }

.switch {
  width: 52px;
  height: 28px;
  border-radius: var(--radius-pill);
  border: none;
  cursor: pointer;
  position: relative;
  padding: 2px;
  background: var(--border-strong);
  transition: background-color 0.2s ease;
  flex-shrink: 0;
}

.switch[aria-checked="true"] { background: var(--primary-600); }

.switch-knob {
  width: 24px;
  height: 24px;
  background: #ffffff;
  border-radius: 50%;
  transition: transform 0.2s ease-in-out;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  display: block;
}

.switch[aria-checked="true"] .switch-knob { transform: translateX(24px); }

/* Donut gauge on the tax dashboard. */
.gauge {
  position: relative;
  width: 90px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.gauge svg { width: 90px; height: 90px; transform: rotate(-90deg); }
.gauge svg circle { transition: stroke-dashoffset 0.6s ease; }

.gauge-value {
  position: absolute;
  text-align: center;
  line-height: 1;
}

/* ==========================================================================
   13. Utilities
   --------------------------------------------------------------------------
   Deliberately small and predictable. These exist so one-off layout tweaks in
   templates do not need a style attribute (which production CSP blocks).
   ========================================================================== */

/* Display & flexbox */
.block { display: block; }
.inline-block { display: inline-block; }
.inline-flex { display: inline-flex; }
.flex { display: flex; }
.grid { display: grid; }
.hidden { display: none; }

.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.items-baseline { align-items: baseline; }
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.grow { flex: 1 1 auto; min-width: 0; }
.shrink-0 { flex-shrink: 0; }
.self-start { align-self: flex-start; }
.self-end { align-self: flex-end; }

/* Grid helpers */
.grid-auto { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.grid-auto-sm { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.grid-auto-lg { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 720px) {
  .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); }
}

/* Gaps */
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.4rem; }
.gap-3 { gap: 0.5rem; }
.gap-4 { gap: 0.75rem; }
.gap-5 { gap: 1rem; }
.gap-6 { gap: 1.25rem; }
.gap-7 { gap: 1.5rem; }

/* Margin */
.m-0 { margin: 0; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-5 { margin-top: 1.25rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-5 { margin-bottom: 1.25rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* Padding */
.p-0 { padding: 0; }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 0.75rem; }
.p-4 { padding: 1rem; }
.p-5 { padding: 1.25rem; }
.p-6 { padding: 1.5rem; }
.pt-3 { padding-top: 0.75rem; }
.pt-4 { padding-top: 1rem; }
.pb-3 { padding-bottom: 0.75rem; }
.pb-4 { padding-bottom: 1rem; }

/* Typography */
.text-2xs { font-size: var(--fs-2xs); }
.text-xs { font-size: var(--fs-xs); }
.text-sm { font-size: var(--fs-sm); }
.text-base { font-size: var(--fs-base); }
.text-md { font-size: var(--fs-md); }
.text-lg { font-size: var(--fs-lg); }
.text-xl { font-size: var(--fs-xl); }
.text-2xl { font-size: var(--fs-2xl); }

.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }

.uppercase { text-transform: uppercase; letter-spacing: 0.05em; }
.tracking-wide { letter-spacing: 0.08em; }
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.leading-tight { line-height: 1.25; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.nowrap { white-space: nowrap; }
.break-word { overflow-wrap: break-word; }

/* Colour */
.text-primary { color: var(--primary-600); }
.text-primary-strong { color: var(--primary-700); }
.text-danger { color: var(--accent-red); }
.text-warning { color: var(--accent-amber); }
.text-info { color: var(--accent-indigo); }
.text-white { color: #ffffff; }
.text-main { color: var(--text-main); }

/* Surfaces & borders */
.bg-card { background: var(--bg-card); }
.bg-subtle { background: var(--bg-subtle); }
.bg-inset { background: var(--bg-inset); }
.bordered { border: 1px solid var(--border-card); }
.border-t { border-top: 1px solid var(--border-card); }
.border-b { border-bottom: 1px solid var(--border-card); }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-default, .rounded { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-pill { border-radius: var(--radius-pill); }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-lg { box-shadow: var(--shadow-lg); }

/* Overflow & position */
.overflow-hidden { overflow: hidden; }
.overflow-y-auto { overflow-y: auto; }
.overflow-x-auto { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.min-h-0 { min-height: 0; }
.relative { position: relative; }
.items-stretch { align-items: stretch; }

/* Sizing */
.w-auto { width: auto; }
.max-w-sm { max-width: 420px; }
.max-w-md { max-width: 580px; }
.max-w-lg { max-width: 760px; }
.max-w-xl { max-width: 960px; }

/* Pairs an inline SVG with the text beside it. Icons replaced the emoji that
   used to open these lines; unlike an emoji glyph an SVG has no baseline of
   its own, so the row has to align it explicitly. */
.icon-text {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* When the text runs to several lines the icon belongs beside the first one,
   not floating in the vertical centre of the paragraph. */
.icon-text.top { align-items: flex-start; }
.icon-text.top > svg { margin-top: 0.15em; }

/* Icon sizes — SVGs in templates get a class rather than width/height attrs. */
.icon-xs { width: 12px; height: 12px; flex-shrink: 0; }
.icon-sm { width: 14px; height: 14px; flex-shrink: 0; }
.icon-md { width: 16px; height: 16px; flex-shrink: 0; }
.icon-lg { width: 18px; height: 18px; flex-shrink: 0; }
.icon-xl { width: 22px; height: 22px; flex-shrink: 0; }
.icon-2xl { width: 28px; height: 28px; flex-shrink: 0; }

/* Chart canvas boxes need an explicit height for Chart.js. */
.chart-box { position: relative; height: 280px; width: 100%; }
.chart-box.sm { height: 200px; }
.chart-box.lg { height: 340px; }

.legend-row {
  display: flex;
  gap: 1rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  flex-wrap: wrap;
}

.legend-item { display: inline-flex; align-items: center; gap: 0.35rem; }

.legend-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  display: inline-block;
  flex-shrink: 0;
}

.legend-swatch.revenue { background: #10b981; }
.legend-swatch.expense { background: #f87171; }
.legend-item.revenue { color: var(--primary-600); }
.legend-item.expense { color: var(--accent-red); }

/* Transition helpers used by Alpine x-transition attributes. Without these
   the drawer and modals jump straight to their end state. */
.transition { transition-property: transform, opacity; }
.ease-out { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }
.ease-in { transition-timing-function: cubic-bezier(0.4, 0, 1, 1); }
.duration-150 { transition-duration: 150ms; }
.duration-200 { transition-duration: 200ms; }
.transform { transform: translateZ(0); }
.translate-x-full { transform: translateX(100%); }
.translate-x-0 { transform: translateX(0); }
.opacity-0 { opacity: 0; }
.opacity-100 { opacity: 1; }

/* ==========================================================================
   14. Invoice builder (sales & purchase)
   ========================================================================== */

.wizard {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 1400px;
  margin: 0 auto;
}

.wizard-bar {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: 1rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  box-shadow: var(--shadow-sm);
}

.wizard-bar-title { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }

.wizard-bar h1 {
  font-size: 1.25rem;
  font-weight: 800;
  margin: 0;
  line-height: 1.2;
}

.wizard-bar .subtitle { font-size: 0.775rem; margin: 0; }

.wizard-back {
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-card);
  background: var(--bg-card);
}

.wizard-back:hover { border-color: var(--primary-500); color: var(--primary-600); }

.wizard-panes { display: flex; gap: 1.5rem; align-items: flex-start; }

.wizard-form-pane {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
  flex: 1 1 auto;
  transition: flex-basis 0.2s ease;
}

.wizard-preview {
  flex: 0 0 42%;
  position: sticky;
  top: 1.5rem;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 3rem);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  min-width: 0;
}

.wizard-preview-head { padding: 1.25rem 1.25rem 0 1.25rem; flex-shrink: 0; }

.wizard-preview-panel {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 1.25rem;
  background: var(--bg-subtle);
}

.wizard-preview-foot {
  border-top: 1px solid var(--border-card);
  padding: 0.85rem 1.25rem;
  background: var(--bg-card);
  flex-shrink: 0;
}

.form-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  box-shadow: var(--shadow-sm);
}

.form-card h2 {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 0.25rem;
}

.form-card h3 {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 0.75rem;
}

.party-row {
  background: var(--bg-subtle);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.party-avatar {
  width: 40px;
  height: 40px;
  background: var(--info-bg);
  color: var(--info-fg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.party-avatar svg { width: 20px; height: 20px; }

.line-item {
  background: var(--bg-subtle);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: 1rem;
  margin-bottom: 1rem;
}

.line-item-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1.5fr 1fr auto;
  gap: 0.75rem;
  align-items: flex-end;
}

.line-item-grid label,
.line-item-detail label {
  font-size: 0.725rem;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
}

.line-item-grid input,
.line-item-grid select { padding: 0.5rem; font-size: var(--fs-sm); }

.line-item-remove {
  background: none;
  border: none;
  color: var(--accent-red);
  cursor: pointer;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.line-item-remove:hover { color: #991b1b; }

.line-item-more {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--border-card);
}

.detail-toggle {
  background: var(--bg-inset);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-main);
  cursor: pointer;
  padding: 0.25rem 0.55rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.detail-toggle:hover { border-color: var(--primary-500); color: var(--primary-600); }

.chevron { width: 12px; height: 12px; flex-shrink: 0; transition: transform 0.2s ease; }
.chevron.open { transform: rotate(180deg); }

.line-item-detail {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: 0.85rem;
  margin-top: 0.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.75rem;
}

.line-item-detail input,
.line-item-detail select { padding: 0.4rem 0.5rem; font-size: 0.8rem; }

.toggle-stack {
  margin-top: 1.5rem;
  background: var(--bg-subtle);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.toggle-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.toggle-row + .toggle-row { border-top: 1px solid var(--border-card); padding-top: 0.75rem; }
.toggle-row-title { font-size: var(--fs-sm); font-weight: 700; color: var(--text-main); }
.toggle-row-hint { font-size: var(--fs-xs); color: var(--text-muted); }

.toggle-row input[type="checkbox"] {
  width: 1.25rem;
  height: 1.25rem;
  min-width: 1.25rem;
  min-height: 1.25rem;
}

.summary {
  margin-top: 1.5rem;
  border-top: 2px solid var(--border-card);
  padding-top: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  align-items: flex-end;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  width: 440px;
  max-width: 100%;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.summary-row strong, .summary-row span:last-child { font-variant-numeric: tabular-nums; }
.summary-row strong { color: var(--text-main); }

.summary-total {
  background: var(--bg-inset);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: 0.9rem 1.25rem;
  width: 440px;
  max-width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 0.5rem;
  font-weight: 800;
  color: var(--text-main);
}

.summary-total .amount { font-size: 1.2rem; font-variant-numeric: tabular-nums; }

/* Live document preview inside the builder. */
.preview-doc {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  font-size: var(--fs-sm);
}

.preview-doc-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 2px solid var(--text-main);
  padding-bottom: 0.85rem;
  margin-bottom: 1rem;
}

.mini-table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; }
.mini-table th { background: var(--bg-inset); border-bottom: 1px solid var(--border-strong); padding: 0.45rem; font-size: 0.725rem; text-align: left; }
.mini-table th.center, .mini-table td.center { text-align: center; }
.mini-table th.right, .mini-table td.right { text-align: right; }
.mini-table td { padding: 0.45rem; border-bottom: 1px solid var(--border-card); }

.preview-totals {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.4rem;
  font-size: 0.825rem;
  border-top: 1px solid var(--border-card);
  padding-top: 0.75rem;
}

.preview-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  width: 280px;
  max-width: 100%;
}

.preview-total-row.grand {
  font-weight: 800;
  font-size: var(--fs-sm);
  border-top: 1.5px solid var(--text-main);
  padding-top: 0.4rem;
}

.code-pane {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 1.25rem;
  background: var(--ink-900);
  color: #38bdf8;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--fs-xs);
}

.code-pane pre { margin: 0; white-space: pre-wrap; word-break: break-word; }

.kbd-hint {
  font-size: 0.7rem;
  opacity: 0.85;
  font-weight: 400;
  background: rgba(0, 0, 0, 0.2);
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
}

.info-tile {
  background: var(--bg-subtle);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  text-align: center;
}

.info-tile-icon {
  width: 44px;
  height: 44px;
  background: var(--info-bg);
  color: var(--info-fg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.65rem auto;
}

.info-tile-icon svg { width: 22px; height: 22px; }

.timeline-list {
  font-size: 0.775rem;
  color: var(--text-main);
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.timeline-list > div { display: flex; align-items: center; gap: 0.5rem; }
.timeline-list svg { width: 16px; height: 16px; color: var(--text-muted); flex-shrink: 0; }

/* ==========================================================================
   15. Financial statements (laba rugi, neraca, trial balance)
   ========================================================================== */

.report-page { max-width: 950px; margin: 1rem auto; }

.report-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
  border-bottom: 2px solid var(--text-main);
  padding-bottom: 1.25rem;
}

.report-eyebrow {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--primary-600);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.25rem;
}

.report-head h1 { font-size: 1.75rem; margin-bottom: 0.25rem; }
.report-head h2 { font-size: 1.1rem; font-weight: 600; color: var(--text-muted); margin-bottom: 0.25rem; }
.report-head-meta { font-size: var(--fs-base); color: var(--text-muted); }

.toolbar {
  background: var(--bg-subtle);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: 0.85rem 1.25rem;
  margin-bottom: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.toolbar-group { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin: 0; }

.toolbar-label {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.toolbar select {
  width: auto;
  padding: 0.3rem 2rem 0.3rem 0.55rem;
  font-size: 0.8rem;
  font-weight: 600;
}

.toolbar .btn-sm { font-size: var(--fs-xs); padding: 0.25rem 0.55rem; }

.statement-frame {
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.statement-frame-head {
  background: var(--ink-900);
  color: #ffffff;
  padding: 0.875rem 1.25rem;
  font-weight: 700;
  font-size: var(--fs-md);
  letter-spacing: 0.05em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.statement-frame-head .unit { font-size: 0.8rem; font-weight: 400; opacity: 0.8; }

.statement {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 0;
  border: none;
  border-radius: 0;
  background: var(--bg-card);
}

.statement td, .statement th {
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--border-card);
  font-size: var(--fs-base);
  color: var(--text-main);
}

.statement tr:last-child td { border-bottom: none; }

.statement .amount {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.statement .indent { padding-left: 1.5rem; }
.statement .indent-2 { padding-left: 2.75rem; }

.statement tr.section td {
  background: var(--bg-inset);
  font-weight: 700;
  color: var(--text-main);
}

.statement tr.subtotal td {
  font-weight: 700;
  background: var(--bg-subtle);
  border-top: 1px solid var(--border-strong);
}

.statement tr.total td {
  font-weight: 700;
  font-size: var(--fs-md);
  background: var(--bg-inset);
  border-top: 1px solid var(--border-strong);
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
}

.statement tr.grand td {
  font-weight: 800;
  font-size: 1.15rem;
  background: var(--ok-bg);
  color: var(--ok-fg);
  border-top: 2px solid var(--primary-600);
  border-bottom: 4px double var(--primary-700);
  padding: 1rem;
}

/* Balance-sheet style grand total: neutral rather than profit-green. */
.statement tr.grand-neutral td {
  font-weight: 800;
  font-size: 1.05rem;
  background: var(--bg-inset);
  color: var(--text-main);
  border-top: 2px solid var(--text-main);
  border-bottom: 4px double var(--text-main);
  padding: 1rem;
}

.balance-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: start;
}

@media (max-width: 960px) {
  .balance-columns { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
}

.statement .positive { color: var(--primary-700); }
.statement .negative { color: var(--accent-red); }

.statement tr.drill-row { cursor: pointer; }
.statement tr.drill-row:hover td { background: var(--bg-subtle); }

.drill-marker {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-right: 0.35rem;
}

.statement tr.drill-detail td {
  background: var(--bg-subtle);
  font-size: 0.775rem;
  color: var(--text-muted);
}

.statement .empty-line { padding-left: 1.5rem; font-style: italic; color: var(--text-muted); }

@media (max-width: 1100px) {
  .wizard-panes { flex-direction: column; }
  .wizard-preview { flex: 1 1 auto; width: 100%; position: static; max-height: none; }
  .line-item-grid { grid-template-columns: 1fr 1fr; }
  .line-item-remove { grid-column: span 2; justify-content: flex-end; }
}

@media (max-width: 560px) {
  .line-item-grid { grid-template-columns: 1fr; }
  .line-item-remove { grid-column: auto; }
  .summary-row, .summary-total { width: 100%; }
}

.header-notification-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--accent-red);
  color: var(--text-invert);
  font-size: 10px;
  font-weight: 700;
  border-radius: var(--radius-pill);
  min-width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  line-height: 1;
}