:root{
  /* ============================================================
     SYMMETRA DESIGN TOKENS
     Semantic, scaled, predictable — single source of truth for
     colors, spacing, typography, motion, and elevation.
     ============================================================ */

  /* — Surfaces & lines — */
  --bg:#f6f8fc;--panel:#fff;--border:#e4eaf3;--border-soft:#eef2f7;--text:#0f172a;--muted:#64748b;
  --surface-1:#ffffff;--surface-2:#fbfcfe;--surface-3:#f4f7fc;--surface-raised:linear-gradient(180deg,#fff 0%,#fcfdff 100%);

  /* — Brand & state palette — */
  --primary:#1d4ed8;--primary-soft:#dbeafe;--primary-700:#1e40af;--primary-50:#eff6ff;
  --secondary:#eef2ff;
  --success:#16a34a;--success-soft:#dcfce7;--success-fg:#14532d;
  --warning:#d97706;--warning-soft:#fef3c7;--warning-fg:#92400e;
  --danger:#dc2626;--danger-soft:#fee2e2;--danger-fg:#9f1239;
  --info:#0ea5e9;--info-soft:#e0f2fe;

  /* — Spacing scale (4px base) — */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;--sp-10:40px;--sp-12:48px;

  /* — Radius scale — */
  --radius-sm:6px;--radius:8px;--radius-md:10px;--radius-lg:14px;--radius-xl:18px;--radius-pill:999px;

  /* — Elevation — */
  --shadow:0 4px 16px rgba(15,23,42,.06);
  --shadow-sm:0 1px 2px rgba(15,23,42,.05);
  --shadow-md:0 6px 18px rgba(15,23,42,.07);
  --shadow-lg:0 18px 40px rgba(15,23,42,.10);
  --shadow-xl:0 24px 60px rgba(15,23,42,.14);

  /* — Motion (consistent timing across the app) — */
  --ease-out:cubic-bezier(.2,.8,.2,1);
  --ease-spring:cubic-bezier(.34,1.4,.64,1);
  --dur-fast:140ms;
  --dur:220ms;
  --dur-slow:360ms;

  /* — Typography rhythm — */
  --fs-xs:11px;--fs-sm:12px;--fs-base:13px;--fs-md:14px;--fs-lg:16px;--fs-xl:20px;--fs-2xl:24px;--fs-3xl:28px;
  --lh-tight:1.15;--lh:1.45;--lh-loose:1.6;

  /* — Focus ring (consistent a11y outline) — */
  --focus-ring:0 0 0 3px rgba(29,78,216,.25);
}

/* ============================================================
   GLOBAL POLISH — applies app-wide so every existing component
   benefits without changing component classes.
   ============================================================ */

/* Smoother type rendering on Windows / macOS */
html{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; }

/* Custom scrollbars (subtle; respects light theme) */
*::-webkit-scrollbar{ width:10px;height:10px }
*::-webkit-scrollbar-track{ background:transparent }
*::-webkit-scrollbar-thumb{ background:#cdd6e4;border-radius:999px;border:2px solid transparent;background-clip:padding-box }
*::-webkit-scrollbar-thumb:hover{ background:#9aa6ba;background-clip:padding-box }

/* Selection */
::selection{ background:rgba(29,78,216,.18);color:#0f172a }

/* Default smooth transition for interactive elements (only color/transform
   to avoid layout thrash). Components can opt out via .no-anim. */
button, .btn, .nav-btn, .nav-section-btn, .nav-subbtn, a, .stat-card, .panel,
input, select, textarea, .icon-btn, .toast {
  transition: background-color var(--dur) var(--ease-out),
              border-color    var(--dur) var(--ease-out),
              color           var(--dur) var(--ease-out),
              box-shadow      var(--dur) var(--ease-out),
              transform       var(--dur-fast) var(--ease-out),
              opacity         var(--dur) var(--ease-out);
}
.no-anim, .no-anim * { transition:none !important; animation:none !important; }

/* Universal :focus-visible ring (subtle, consistent) */
:focus { outline:none }
:focus-visible{ outline:none; box-shadow: var(--focus-ring); border-radius: 6px; }
button:focus-visible, .btn:focus-visible, .nav-btn:focus-visible, .nav-subbtn:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible{
  box-shadow: var(--focus-ring) !important;
}

/* Buttons gain micro-interactions — no class changes required */
.btn:hover:not(:disabled){ transform:translateY(-1px); box-shadow: var(--shadow-md); }
.btn:active:not(:disabled){ transform:translateY(0); box-shadow: var(--shadow-sm); }
.btn.primary:hover:not(:disabled){ background:var(--primary-700); }

/* Panel & cards lift slightly on hover where appropriate */
.stat-card{ transition: box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
.stat-card:hover{ transform:translateY(-2px); box-shadow:0 16px 32px rgba(15,23,42,.08); }

/* Navigation: cleaner active state */
.nav-btn, .nav-section-btn, .nav-subbtn{ transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }

/* Tables: row hover tint for readability */
.grid tbody tr{ transition: background-color var(--dur-fast) var(--ease-out); }
.grid tbody tr:hover{ background:#f8fbff; }

/* Mapping table density polish (was very dense; tighten + breathe) */
.mapping-table th, .mapping-table td{ transition: background-color var(--dur-fast) var(--ease-out); }
.mapping-table tbody tr:hover{ background:#f4f8ff; }

/* Inputs: prettier focus state */
input, select, textarea{ transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
input:focus, select:focus, textarea:focus{ border-color:#a6c0ff; box-shadow:0 0 0 3px rgba(29,78,216,.15); }

/* Modal motion — pop-in instead of snap-in */
.modal{ animation: modal-pop var(--dur-slow) var(--ease-spring); transform-origin: center top; }
.modal-backdrop{ animation: backdrop-fade var(--dur) var(--ease-out); }
@keyframes modal-pop{ 0%{opacity:0;transform:translateY(8px) scale(.985)} 100%{opacity:1;transform:translateY(0) scale(1)} }
@keyframes backdrop-fade{ 0%{opacity:0} 100%{opacity:1} }

/* Page enter — removed. Was triggering on every state mutation and
   causing the visible "freeze for a sec" the user reported. */
.main { animation: none !important; }

/* ============================================================
   SKELETON LOADERS — drop-in classes for placeholder UI
   ============================================================ */
.skeleton{
  display:block;
  background: linear-gradient(90deg, #eef2f7 0%, #f5f8fc 40%, #eef2f7 80%);
  background-size: 200% 100%;
  border-radius: 6px;
  animation: skeleton-shimmer 1.4s linear infinite;
  color: transparent !important;
  user-select: none;
  pointer-events: none;
}
.skeleton.line{ height:12px; margin:6px 0; }
.skeleton.line.lg{ height:18px; }
.skeleton.block{ height:80px; border-radius:10px; }
.skeleton.circle{ border-radius:50%; aspect-ratio:1/1; }
@keyframes skeleton-shimmer{
  0%{ background-position: 200% 0 }
  100%{ background-position: -200% 0 }
}

/* ============================================================
   BOOT SPLASH — shown by SYMMETRA.html before runtime renders
   ============================================================ */
.boot-splash{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:100vh; gap:14px; padding:32px;
  background:
    radial-gradient(circle at 18% 12%, rgba(124,92,255,.22), transparent 42%),
    radial-gradient(circle at 86% 88%, rgba(157,107,255,.18), transparent 40%),
    linear-gradient(180deg,#f4f4fe 0%,#eef0fb 100%);
}
.boot-lock{
  width:min(392px, calc(100vw - 48px));
  overflow:hidden;
  background:#ffffff;
  border:1px solid #e7e9f3;
  border-radius:26px;
  box-shadow:0 28px 70px rgba(28,36,64,.18);
}
.boot-lock__hero{
  position:relative;
  width:100%;
  aspect-ratio:16 / 9;
  overflow:hidden;
  border-radius:0 0 34px 34px;
  background:linear-gradient(180deg,#dddde1 0%,#ececf0 100%);
}
.boot-lock__hero::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:40px;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(252,252,253,.56) 74%, rgba(255,255,255,.90) 100%);
}
.boot-lock__video{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center center;
  filter:saturate(.99) contrast(1.01) brightness(1.01);
}
.boot-lock__form{
  padding:16px 34px 26px;
  display:grid;
  gap:14px;
}
.boot-lock__field{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.boot-lock__field span{
  font:750 11.5px/1 Inter,Segoe UI,Arial,sans-serif;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#6b7392;
}
.boot-lock__input{
  width:100%;
  height:44px;
  border:1px solid #e7e9f3;
  border-radius:10px;
  background:#f7f8fc;
}
.boot-lock__button{
  width:100%;
  height:46px;
  margin-top:4px;
  border-radius:10px;
  background:linear-gradient(135deg,#7c5cff 0%,#9d6bff 100%);
  box-shadow:0 12px 26px rgba(124,92,255,.28);
}
@keyframes boot-shine{
  0%{ transform:translateX(-100%) }
  100%{ transform:translateX(120%) }
}
@keyframes boot-bar{
  0%{ transform:translateX(-100%); background-position:0 0 }
  100%{ transform:translateX(420%); background-position:200% 0 }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}


*{box-sizing:border-box} html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,Segoe UI,Arial,sans-serif;overflow-x:hidden} html{scrollbar-gutter:stable}
button,input,select,textarea{font:inherit}
body{min-height:100vh}
.app{display:grid;grid-template-columns:248px 1fr;min-height:100vh}
.sidebar{background:#fff;border-right:1px solid var(--border);padding:18px;position:sticky;top:0;height:100vh}
.brand{display:flex;gap:12px;align-items:center;margin-bottom:18px}
.brand-mark{width:38px;height:38px;border-radius:8px;background:#1d4ed8;box-shadow:var(--shadow)}
.brand-logo{width:38px;height:38px;object-fit:contain;flex:0 0 38px}
.brand-copy{display:grid;gap:2px}
.brand-name{font-size:20px;font-weight:800}
.brand-sub{font-size:12px;color:var(--muted)}
.brand-byline{font-size:10px;color:#94a3b8;font-weight:700;letter-spacing:.02em}
.nav{display:flex;flex-direction:column;gap:8px;margin:18px 0}
.nav-btn{border:0;background:transparent;padding:10px 12px;text-align:left;border-radius:8px;color:#334155;font-weight:700;cursor:pointer}
.nav-btn:hover,.nav-btn.active{background:var(--primary-soft);color:#1d4ed8}
.nav-section{display:grid;gap:6px}
.nav-section-btn{display:flex;align-items:center;justify-content:space-between;border:0;background:transparent;padding:10px 12px;text-align:left;border-radius:8px;color:#334155;font-weight:800;cursor:pointer}
.nav-section-btn:hover,.nav-section-btn.active{background:var(--primary-soft);color:#1d4ed8}
.nav-chevron{font-size:11px;color:#64748b}
.nav-subnav{display:grid;gap:4px;padding-left:10px}
.nav-subbtn{border:0;background:transparent;padding:8px 12px;text-align:left;border-radius:8px;color:#475569;font-weight:700;cursor:pointer;font-size:13px}
.nav-subbtn:hover,.nav-subbtn.active{background:#eef4ff;color:#1d4ed8}
.side-box{background:#f8fbff;border:1px solid var(--border);border-radius:8px;padding:12px}
.side-title{font-weight:800;margin-bottom:8px}
.main{padding:16px}
.page-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-end;margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid rgba(208,216,230,.82)}
.page-head h1{margin:0;font-size:27px;line-height:1.05;letter-spacing:-.02em}.subtitle{display:none;color:var(--muted);font-size:12px;line-height:1.35;margin-top:3px}
.page-head>div:first-child{max-width:720px}
.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:end;justify-content:flex-end}
.actions:empty{display:none}
.actions label{min-width:136px}
.panel{background:linear-gradient(180deg,#ffffff 0%,#fcfdff 100%);border:1px solid rgba(208,216,230,.9);border-radius:var(--radius);box-shadow:0 12px 26px rgba(15,23,42,.045);padding:10px}
.panel-title{font-size:15px;font-weight:800;margin-bottom:8px}
.panel-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:8px}
.panel-title-row .muted,.detail-panel summary span{display:none}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:12px}
.stat-card{background:#fff;border:1px solid rgba(208,216,230,.88);border-radius:12px;box-shadow:0 10px 24px rgba(15,23,42,.04);padding:12px}
.stat-label{font-size:10px;color:var(--muted);margin-bottom:5px;text-transform:uppercase;letter-spacing:.05em}.stat-value{font-size:22px;font-weight:800}.stat-hint{font-size:10px;color:var(--muted);margin-top:4px}
.two-col{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(360px,.9fr);gap:14px;margin-top:14px}
.btn{border:0;border-radius:8px;padding:9px 12px;font-weight:800;cursor:pointer;min-height:36px}
.btn.primary{background:var(--primary);color:#fff}.btn.secondary{background:#f8fafc;border:1px solid var(--border);color:#334155}.btn.small{padding:5px 8px;font-size:12px;min-height:28px}.btn:disabled{opacity:.55;cursor:not-allowed}.btn.icon-only{display:inline-flex;align-items:center;justify-content:center;min-width:36px;padding:8px}.btn.icon-only svg{width:16px;height:16px}
.grid{width:100%;border-collapse:collapse}.grid th,.grid td{padding:9px 10px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top}.grid th{font-size:11px;text-transform:uppercase;color:var(--muted);background:#fbfcfe;position:sticky;top:0;z-index:1}
.grid.compact th,.grid.compact td{padding:6px 8px;font-size:12.5px}
.simple{width:100%;border-collapse:collapse}.simple td{padding:10px 0;border-bottom:1px solid var(--border)}
.muted{color:var(--muted)} .mini-list{display:grid;gap:6px;font-size:13px} .small-gap{height:8px}.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:end;margin-bottom:10px}.compact-toolbar{margin-top:0}
.report-wrap{background:#fff;border:1px solid var(--border);box-shadow:var(--shadow);border-radius:12px;padding:10px 12px}
.report-head{display:grid;gap:2px;margin-bottom:6px}
.report-title-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.report-title{font-size:16px;font-weight:800;text-align:left;line-height:1.1}.report-subtitle{font-size:11px;font-weight:800;color:#475569;margin:0;text-transform:uppercase;letter-spacing:.04em}.report-date{color:var(--muted);margin:0;font-size:11px;line-height:1.25}
.report-company-logo{width:42px;height:42px;object-fit:contain;border-radius:12px;background:rgba(255,255,255,.72);border:1px solid rgba(208,216,230,.85);padding:4px;flex:0 0 auto}
.report{width:100%;border-collapse:collapse}.report td,.report th{padding:4px 7px;border-bottom:1px solid #eef2f7}.report th{font-size:10.5px;text-transform:uppercase;color:var(--muted)}
.right{text-align:right}.indent{padding-left:22px !important}.section-row td{font-weight:700;background:#fafcff;cursor:pointer}.section-row.bold td{font-weight:800}.total-row td{font-weight:800}.total-row.heavy td{font-size:14px;border-top:2px solid #0f172a}
label{display:flex;flex-direction:column;gap:3px;font-size:11px;font-weight:700} input,select,textarea{padding:7px 9px;border:1px solid #d0d8e6;border-radius:8px;background:#fff;min-height:32px} textarea{min-height:90px}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.span-2,.span-all{grid-column:1/-1}
.modal-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.35);z-index:50}.modal-shell{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;z-index:51}
.toast-viewport{position:fixed;top:18px;right:18px;display:grid;gap:10px;z-index:120;pointer-events:none}
.toast{min-width:260px;max-width:min(420px,calc(100vw - 28px));padding:12px 16px;border:1px solid var(--border);border-radius:18px;background:rgba(255,255,255,.92);box-shadow:0 18px 40px rgba(15,23,42,.18);color:#0f172a;transform-origin:top right;animation:toast-pop .28s ease-out;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.toast-success{border-color:#bbf7d0;background:rgba(240,253,244,.94);color:#14532d}
.toast-error{border-color:#fecdd3;background:rgba(255,241,242,.95);color:#9f1239}
.toast-info{border-color:#bfdbfe;background:rgba(239,246,255,.94);color:#1d4ed8}
.toast-body{font-size:13px;line-height:1.45;font-weight:700}
@keyframes toast-pop{0%{opacity:0;transform:translateY(-14px) scale(.94)}100%{opacity:1;transform:translateY(0) scale(1)}}
.modal{width:min(980px,100%);max-height:90vh;overflow:auto;background:#fff;border-radius:8px;border:1px solid var(--border);box-shadow:0 30px 90px rgba(0,0,0,.25)}
.modal-head{padding:14px 18px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;background:#fff}
.modal-body{padding:18px}.modal-foot{padding:14px 18px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:10px}
.icon-btn{border:0;background:#f8fafc;border-radius:8px;padding:8px 10px;cursor:pointer}
.check-list{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;border:1px solid var(--border);border-radius:8px;padding:10px}
.check-list label{display:flex;flex-direction:row;align-items:center;font-weight:600}
.table-scroll{max-height:min(72vh,860px);overflow:auto;border:1px solid var(--border);border-radius:8px}
.date-filter{display:flex;gap:6px;align-items:end;flex-wrap:wrap}
.date-filter label{min-width:118px}
.status{display:grid;gap:4px;background:#f8fafc;border:1px solid var(--border);border-radius:8px;padding:10px;margin-bottom:10px;font-size:13px}
.status.success{background:#f0fdf4;border-color:#bbf7d0;color:#14532d}
.status.error{background:#fff1f2;border-color:#fecdd3;color:#9f1239}
.check-strip{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:8px;font-size:12px}
.check-strip label{flex-direction:row;align-items:center;font-weight:700}
.gl-workflow-stack{display:grid;gap:10px;margin-top:10px}
.gl-status-strip{display:grid;gap:6px;padding:8px 10px}
.gl-status-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.gl-status-actions{display:flex;justify-content:space-between;gap:10px;align-items:center}
.gl-minimal-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 12px}
.gl-minimal-bar__identity{display:grid;gap:2px;min-width:0}
.gl-minimal-bar__identity strong{font-size:15px}
.gl-minimal-bar__identity span{font-size:11px;color:var(--muted);overflow-wrap:anywhere}
.gl-minimal-bar__actions{display:flex;gap:8px;justify-content:flex-end}
.gl-journey-panel{padding:0;overflow:hidden}
.gl-journey-shell{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);gap:14px;align-items:center;padding:18px 18px 16px;background:linear-gradient(135deg,#eff6ff 0%,#f8fbff 42%,#fff 100%)}
.gl-journey-kicker,.currency-kicker,.coa-overview-kicker{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#1d4ed8;margin-bottom:8px}
.gl-journey-title,.currency-hero-title,.coa-overview-title{font-size:24px;line-height:1.18;font-weight:800;color:#0f172a;max-width:760px}
.gl-journey-copy,.currency-hero-copy{margin-top:8px;font-size:13px;line-height:1.55;color:#475569;max-width:760px}
.gl-journey-chiprow,.coa-overview-chiprow{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;align-items:flex-start}
.gl-journey-chiprow span,.coa-overview-chiprow span{display:inline-flex;align-items:center;padding:8px 10px;border:1px solid #cfe0ff;border-radius:999px;background:rgba(255,255,255,.92);font-size:12px;font-weight:800;color:#1e3a8a;box-shadow:0 10px 24px rgba(29,78,216,.08)}
.currency-hero-panel{padding:0;overflow:hidden}
.currency-hero-shell{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);gap:14px;align-items:start;padding:18px;background:linear-gradient(145deg,#fffaf0 0%,#fff 46%,#f8fbff 100%)}
.currency-hero-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.history-warning{background:#fff7ed;border-color:#fdba74;color:#9a3412}
.history-warning strong{color:#9a3412}
.coa-overview-panel{border:1px solid var(--border);border-radius:8px;background:linear-gradient(140deg,#f8fbff 0%,#fff 45%,#f8fafc 100%);padding:16px}
.coa-overview-shell{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(260px,.85fr);gap:14px;align-items:start}
.workflow-center-panel{margin-bottom:12px;padding:14px}
.workflow-overview-shell{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:10px}
.workflow-company-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
.workflow-company-card{border:1px solid rgba(208,216,230,.88);border-radius:12px;background:linear-gradient(180deg,#fbfcfe 0%,#fff 100%);padding:12px}
.workflow-company-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;margin-bottom:8px}
.workflow-company-name{font-size:15px;font-weight:800;margin-bottom:2px}
.workflow-summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px}
.workflow-summary-grid-wide{margin-bottom:10px}
.workflow-summary-grid-tight{margin-top:4px}
.workflow-summary-card{border:1px solid rgba(208,216,230,.82);border-radius:10px;background:#fff;padding:8px 10px}
.workflow-summary-card strong,.workflow-summary-card span{display:block}
.workflow-summary-card strong{font-size:14px;color:#0f172a}
.workflow-summary-card span{font-size:10px;color:var(--muted);margin-top:2px}
.workflow-summary-shell{display:grid;gap:10px}
.workflow-next-row{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-top:8px}
.workflow-next-card{border:1px solid rgba(208,216,230,.82);border-radius:12px;background:#f8fafc;padding:9px 10px}
.workflow-next-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.workflow-pill{display:inline-flex;align-items:center;border-radius:999px;padding:4px 8px;font-size:11px;font-weight:800;border:1px solid var(--border)}
.workflow-pill.ready{background:#ecfdf5;color:#166534;border-color:#bbf7d0}
.workflow-pill.review{background:#fffbeb;color:#92400e;border-color:#fde68a}
.workflow-pill.import{background:#eff6ff;color:#1d4ed8;border-color:#bfdbfe}
.workflow-pill.waiting{background:#f8fafc;color:#64748b;border-color:#e2e8f0}
.workflow-meta-line{font-size:11px;color:var(--muted);font-weight:700}
.gl-format-grid{display:grid;grid-template-columns:minmax(360px,1fr) minmax(420px,.9fr);gap:12px;align-items:start}
.gl-format-main{min-width:0}
.gl-stepline{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 12px}
.gl-stepline span{background:#f8fafc;border:1px solid var(--border);border-radius:8px;padding:6px 8px;color:#334155;font-size:12px;font-weight:800}
.gl-toolbar label{min-width:160px;flex:1 1 170px}
.compact-panel-title{margin-bottom:6px}
.gl-layout-note,.preview-guidance,.preview-empty{background:#f8fafc;border:1px solid var(--border);border-radius:8px;padding:9px 10px;color:#475569;font-size:12px;line-height:1.45;margin-bottom:10px}
.ai-assist-strip{display:grid;gap:4px}
.ai-assist-meta{color:#475569;font-size:12px;line-height:1.4}
.review-focus-panel{display:grid;gap:8px;margin-bottom:6px}
.compact-review-shell{gap:8px}
.review-summary-grid{margin-bottom:0}
.detail-panel{border:1px solid var(--border);border-radius:8px;background:#fff;margin-bottom:10px}
.detail-panel summary{display:flex;justify-content:space-between;gap:10px;align-items:center;cursor:pointer;list-style:none;padding:10px 12px;font-size:12px}
.detail-panel summary::-webkit-details-marker{display:none}
.detail-panel summary strong{font-size:12px;text-transform:uppercase;color:#475569}
.detail-panel summary span{font-size:12px;color:var(--muted)}
.detail-panel-body{padding:0 12px 12px}
.field-map-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px}
.field-map-grid label{min-width:0}
.field-map-grid select,.field-map-grid input{width:100%;min-width:0}
.gl-actions input{min-width:220px;flex:1 1 240px}
.gl-preview-pane{min-width:0}
.gl-layout-block{margin-bottom:12px}
.gl-save-layout{flex:1 1 280px}
.gl-column-structure{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:4px}
.gl-column-pill{display:inline-flex;align-items:center;padding:7px 10px;border:1px solid var(--border);border-radius:999px;background:#fbfcfe;font-size:12px;font-weight:700;color:#334155;cursor:pointer}
.gl-column-pill.is-mapped,.gl-column-pill.is-added{cursor:default;opacity:.7}
.gl-column-pill.is-mapped{background:#e2e8f0}
.gl-column-pill.is-added{background:#dbeafe;border-color:#93c5fd}
.gl-extra-map-card{display:grid;gap:6px;min-width:0}
.gl-extra-map-control{display:flex;align-items:center;gap:8px;min-width:0}
.gl-extra-map-value{flex:1;min-width:0;min-height:42px;display:flex;align-items:center;padding:11px 14px;border:1px solid var(--border);border-radius:16px;background:#fff;color:#334155;font-size:13px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gl-extra-field{min-width:0;display:flex;flex-direction:column;gap:4px}
.gl-extra-field-row{display:flex;gap:6px;align-items:center;min-width:0}
.gl-extra-field-row select{flex:1;min-width:0}
.gl-extra-remove{flex:0 0 auto;width:30px;height:30px;border:1px solid var(--border);border-radius:8px;background:#fbfcfe;color:#475569;cursor:pointer;font-size:16px;line-height:1;padding:0;display:inline-flex;align-items:center;justify-content:center}
.gl-extra-remove:hover{background:#fee2e2;color:#b91c1c;border-color:#fca5a5}
.preview-heading{font-size:12px;font-weight:800;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.preview-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(115px,1fr));gap:8px;margin-bottom:10px}
.preview-summary div{border:1px solid var(--border);border-radius:8px;padding:8px;background:#fbfcfe}
.preview-summary strong,.preview-summary span{display:block}
.preview-summary strong{font-size:14px;color:#0f172a}
.preview-summary span{font-size:11px;color:var(--muted);margin-top:2px}
.detected-fields{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 10px}
.detected-fields span{display:inline-flex;gap:4px;align-items:center;border:1px solid var(--border);border-radius:999px;background:#fbfcfe;padding:5px 8px;font-size:11px;color:#334155}
.preview-table{max-height:360px}
.inline-check{flex-direction:row;align-items:center;gap:8px}
.mapping-toolbar input{min-width:180px}
.mapping-toolbar select{min-width:170px}
.mapping-toolbar-tight{margin-bottom:4px}
.mapping-workspace{max-height:min(76vh,980px);overflow:auto;border:1px solid var(--border);border-radius:8px;padding:8px;background:#f8fafc;max-width:100%}
.mapping-workspace-compact{padding:0;background:#fff}
.mapping-table{width:100%;min-width:980px;border-collapse:collapse;table-layout:fixed}
.mapping-table th,.mapping-table td{border-bottom:1px solid var(--border);padding:7px 8px;text-align:left;vertical-align:top;font-size:12px;line-height:1.35;overflow-wrap:anywhere;word-break:break-word}
.mapping-table th{position:sticky;top:0;z-index:2;background:#f8fafc;color:var(--muted);text-transform:uppercase;font-size:10.5px;letter-spacing:0;font-weight:800}
.mapping-table th:nth-child(1){width:112px}.mapping-table th:nth-child(2){width:20%}.mapping-table th:nth-child(3){width:19%}.mapping-table th:nth-child(4){width:17%}.mapping-table th:nth-child(5){width:19%}.mapping-table th:nth-child(6){width:110px}.mapping-table th:nth-child(7){width:72px}.mapping-table th:nth-child(8){width:92px}.mapping-table th:nth-child(9){width:130px}
.mapping-row:hover td{background:#fbfcfe}
.mapping-row-conflict td{background:#fff7f8}.mapping-row-warning td{background:#fffdf5}
.mapping-row-note td{padding-top:5px;padding-bottom:6px;font-weight:700}.mapping-note-hard td{background:#fff1f2;color:#9f1239}.mapping-note-soft td{background:#fffbeb;color:#92400e}
.mapping-item-select{width:100%;min-width:0}
.mapping-currency-input{width:100%;min-width:0}
.mapping-actions-cell{white-space:nowrap}
.mapping-focus-panel{position:fixed;inset:18px;z-index:65;overflow:auto;box-shadow:0 24px 80px rgba(15,23,42,.28);padding:16px}
.mapping-focus-panel .mapping-workspace{max-height:calc(100vh - 170px)}
.mapping-coach-row{display:flex;justify-content:space-between;gap:12px;align-items:center;background:#f8fafc;border:1px solid var(--border);border-radius:8px;padding:8px 10px;margin-bottom:8px;font-size:12px}
.recent-choice-strip{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.mapping-table-v11 th:nth-child(1){width:96px}.mapping-table-v11 th:nth-child(2){width:20%}.mapping-table-v11 th:nth-child(3){width:18%}.mapping-table-v11 th:nth-child(4){width:14%}.mapping-table-v11 th:nth-child(5){width:20%}.mapping-table-v11 th:nth-child(6){width:104px}.mapping-table-v11 th:nth-child(7){width:72px}.mapping-table-v11 th:nth-child(8){width:96px}.mapping-table-v11 th:nth-child(9){width:132px}
.mapping-table-compact th:nth-child(1){width:92px}.mapping-table-compact th:nth-child(2){width:20%}.mapping-table-compact th:nth-child(3){width:16%}.mapping-table-compact th:nth-child(4){width:14%}.mapping-table-compact th:nth-child(5){width:20%}.mapping-table-compact th:nth-child(6){width:20%}.mapping-table-compact th:nth-child(7){width:76px}
.mapping-table-compact td{padding-top:4px;padding-bottom:4px}
.mapping-compact-why{font-size:12px;line-height:1.35;color:#334155}
.ready-strip{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:8px 10px;border:1px solid #bbf7d0;border-radius:8px;background:#f0fdf4;color:#166534;font-size:12px}
.ready-strip strong{display:block}
.ready-strip span{color:#166534}
.mapping-fsli-select{width:100%;min-width:0}
.mapping-card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:12px;margin-bottom:8px;max-width:100%;overflow:hidden;box-shadow:0 10px 28px rgba(15,23,42,.04)}
.mapping-card-stack{display:grid;gap:10px}
.mapping-card-auto_ready{border-color:#bfdbfe;background:#f8fbff}
.mapping-card-review,.mapping-card-low_confidence{border-color:#fde68a;background:#fffdf5}
.mapping-card-unmapped{border-color:#fecdd3;background:#fff7f8}
.mapping-card-conflict{border-color:#fecdd3;background:#fff7f8}
.mapping-card-blocked{border-color:#fecdd3;background:#fff7f8}
.mapping-card-warning{border-color:#fde68a;background:#fffdf5}
.mapping-card-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:8px}
.mapping-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:8px}
.mapping-card-label{display:block;font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;margin-bottom:4px}
.mapping-card-value{font-size:14px;font-weight:800;color:var(--text)}
.mapping-card-submeta{display:block;color:var(--muted);font-size:12px;line-height:1.45;margin-top:4px;overflow-wrap:anywhere}
.mapping-reason-pills{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
.mapping-reason-pills span{display:inline-flex;align-items:center;padding:4px 8px;border:1px solid var(--border);border-radius:999px;background:#fff;font-size:11px;color:#334155}
.mapping-meta,.mapping-local span,.mapping-activity span,.mapping-item-field small{display:block;color:var(--muted);font-size:12px;margin-top:3px;overflow-wrap:anywhere;word-break:break-word}
.mapping-local{min-width:0;overflow-wrap:anywhere}
.mapping-local strong{display:block;margin-bottom:2px;overflow-wrap:anywhere}
.mapping-table td strong{display:block}
.mapping-table select,.mapping-table input{max-width:100%}
.mapping-activity{text-align:right;min-width:0}
.mapping-actions-cell{white-space:normal}
.mapping-actions-cell .btn{margin:2px 2px 0 0}
.mapping-warning{margin:8px 0;padding:8px;border-radius:8px;background:#fff1f2;color:#9f1239;font-size:12px;font-weight:700}
.mapping-soft-warning{margin:8px 0;padding:8px;border-radius:8px;background:#fffbeb;color:#92400e;font-size:12px;font-weight:700}
.mapping-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px;margin-top:8px;align-items:end;max-width:100%}
.mapping-fields label{min-width:0}
.mapping-fields select,.mapping-fields input{width:100%;min-width:0}
.mapping-item-field{grid-column:span 2}
.mapping-note{font-size:12px;color:var(--muted);align-self:center}
.mapping-actions{display:grid;grid-template-columns:minmax(180px,1fr) minmax(220px,1.1fr) auto auto;gap:8px;margin-top:10px;align-items:end}
.mapping-card-actions{display:grid;grid-template-columns:minmax(180px,1fr) minmax(220px,1.1fr) auto auto;gap:8px;margin-top:10px;align-items:end}
.mapping-card-actions .btn{min-height:34px}
.help-btn{margin-left:4px}
.help-modal{width:min(440px,calc(100vw - 32px))}
.help-modal p{margin:0;color:#334155;line-height:1.55}
.coach-popover{position:fixed;z-index:70;width:min(320px,calc(100vw - 24px));background:#fff;border:1px solid #cbd5e1;border-radius:8px;box-shadow:0 18px 45px rgba(15,23,42,.18);padding:12px;pointer-events:auto}
.coach-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.coach-title{font-weight:800;color:#0f172a;font-size:13px}
.coach-body{font-size:12px;line-height:1.45;color:#334155}
.coach-foot{display:flex;justify-content:flex-end;margin-top:10px}
.coach-close{border:0;background:transparent;color:#64748b;font-size:16px;line-height:1;cursor:pointer;padding:2px 4px;border-radius:6px}
.coach-close:hover{background:#f1f5f9;color:#0f172a}
.coach-anchor-ring{outline:2px solid rgba(37,99,235,.35);outline-offset:2px}
.companies-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(340px,.65fr);gap:12px;margin-top:12px}
.compact-company-table{max-height:640px}
.action-cell{white-space:nowrap}
.pill{display:inline-flex;align-items:center;padding:3px 7px;border:1px solid var(--border);border-radius:8px;background:#f8fafc;color:#334155;font-size:11px;font-weight:700;margin:0 4px 4px 0}
.icon-only{min-width:30px;padding:5px 8px}
.company-directory-table tbody tr{cursor:pointer}
.company-directory-table tbody tr:hover td{background:#f8fbff}
.company-row-link strong{display:block}
.company-directory-note{margin-top:8px;font-size:12px}
.company-overview-modal{width:min(1320px,calc(100vw - 20px))}
.company-overview-body{display:grid;gap:14px}
.company-overview-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:flex-start;padding:14px;border:1px solid var(--border);border-radius:12px;background:linear-gradient(145deg,#eff6ff 0%,#fff 42%,#f8fafc 100%)}
.company-overview-identity{display:flex;align-items:flex-start;gap:14px;min-width:0}
.company-overview-copy{min-width:0}
.company-logo-mark{width:48px;height:48px;border-radius:14px;border:1px solid rgba(208,216,230,.9);background:rgba(255,255,255,.76);object-fit:contain;padding:5px;box-shadow:0 10px 24px rgba(15,23,42,.08);flex:0 0 auto}
.company-logo-mark-large{width:64px;height:64px;border-radius:18px}
.company-logo-placeholder{display:grid;place-items:center;padding:0;font-weight:900;font-size:24px;color:#1e3a8a;background:linear-gradient(145deg,#ffffff 0%,#dbeafe 100%)}
.company-logo-action{position:relative;overflow:hidden;cursor:pointer}
.company-logo-action input{position:absolute;inset:0;opacity:0;cursor:pointer}
.company-overview-kicker{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#1d4ed8;margin-bottom:6px}
.company-overview-name{font-size:24px;font-weight:800;line-height:1.15;overflow-wrap:anywhere}
.company-overview-submeta{font-size:13px;color:var(--muted);margin-top:6px;overflow-wrap:anywhere}
.company-overview-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;align-items:flex-start;max-width:min(560px,44vw)}
.company-overview-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.company-overview-grid-lower{align-items:start;grid-template-columns:1fr}
.company-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.company-detail-grid div,.company-summary-grid div{border:1px solid var(--border);border-radius:10px;background:#fbfcfe;padding:7px 9px}
.company-detail-grid span{display:block;font-size:10px;color:var(--muted);font-weight:800;text-transform:uppercase}
.company-detail-grid strong{display:block;font-size:13px;margin-top:4px}
.company-notes-box{margin-top:10px;border:1px solid var(--border);border-radius:10px;background:#fff;padding:10px;font-size:12px;line-height:1.5;color:#475569}
.company-summary-grid{margin-bottom:6px;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:6px}
.company-meta-strip{display:flex;gap:8px;flex-wrap:wrap}
.company-meta-strip span{display:inline-flex;align-items:center;padding:6px 8px;border:1px solid var(--border);border-radius:999px;background:#f8fafc;font-size:11px;font-weight:800;color:#475569}
.compact-company-files{max-height:260px}
.status-badge{display:inline-flex;align-items:center;border-radius:8px;padding:3px 7px;font-size:11px;font-weight:800;text-transform:capitalize;background:#eef2ff;color:#334155;border:1px solid var(--border)}
.status-badge.mapped{background:#ecfdf5;color:#166534;border-color:#bbf7d0}.status-badge.suggested{background:#eff6ff;color:#1d4ed8;border-color:#bfdbfe}.status-badge.conflict{background:#fff1f2;color:#9f1239;border-color:#fecdd3}.status-badge.review,.status-badge.low_confidence{background:#fffbeb;color:#92400e;border-color:#fde68a}.status-badge.blocked{background:#fff1f2;color:#9f1239;border-color:#fecdd3}.status-badge.auto_ready{background:#eff6ff;color:#1d4ed8;border-color:#bfdbfe}.status-badge.draft{background:#f8fafc;color:#64748b;border-color:#e2e8f0}
.currency-controls{display:flex;gap:8px;flex-wrap:wrap;align-items:end;margin-bottom:10px}
.currency-controls label{min-width:160px}
.currency-status-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin-bottom:10px}
.currency-status-grid div{border:1px solid var(--border);border-radius:8px;background:#fbfcfe;padding:8px}
.currency-status-grid span,.currency-status-grid strong{display:block}.currency-status-grid span{font-size:11px;color:var(--muted);font-weight:800;text-transform:uppercase}.currency-status-grid strong{font-size:13px;margin-top:2px}
.currency-table{max-height:560px}.currency-note{margin-top:8px;font-size:12px}.compact-fx-manual{max-height:220px}.btn-compact{padding:7px 10px;min-height:32px}
.currency-page-stack{display:grid;gap:14px}
.currency-control-panel{padding:8px 10px}
.currency-control-grid{display:grid;grid-template-columns:minmax(104px,122px) minmax(138px,162px) minmax(0,1fr) auto;gap:5px;align-items:end}
.currency-range-controls{display:grid;grid-template-columns:repeat(3,minmax(118px,148px));gap:6px;align-items:end;justify-content:start}
.currency-primary-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.currency-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,.82fr);gap:12px;margin-top:0}
.currency-meta-strip{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.currency-meta-strip span{display:inline-flex;align-items:center;padding:3px 7px;border:1px solid rgba(208,216,230,.82);border-radius:999px;background:#fbfcfe;font-size:10px;font-weight:700;color:#64748b}
.currency-meta-strip.compact{margin-top:6px}
.currency-refresh-note{margin-top:6px;padding:5px 8px;border-radius:8px;border:1px solid rgba(208,216,230,.82);background:#f8fafc;color:#64748b;font-size:10.5px}
.currency-refresh-note.warning{background:#fff7ed;border-color:#fdba74;color:#9a3412}
.currency-refresh-note.success{background:#f0fdf4;border-color:#bbf7d0;color:#166534}
.currency-refresh-note.error{background:#fff1f2;border-color:#fecdd3;color:#9f1239}
.validation-summary{grid-template-columns:repeat(5,minmax(100px,1fr))}
.validation-box{border:1px solid var(--border);border-radius:8px;padding:8px;margin:8px 0;background:#f8fafc}
.validation-box.has-errors{background:#fff1f2;border-color:#fecdd3}.validation-box.needs-review{background:#fffbeb;border-color:#fde68a}.validation-box.is-clean{background:#f0fdf4;border-color:#bbf7d0}
.validation-list{margin:0;padding-left:18px;font-size:12px}.validation-list li{margin:3px 0}.validation-list li.error{color:#9f1239}.validation-list li.warning,.validation-list li.review{color:#92400e}.validation-list li.info{color:#475569}
.ledger-table{max-height:540px}
.coa-lock-banner{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:6px;padding:6px 8px;border:1px solid var(--border);border-radius:8px;background:#f8fafc;font-size:10.5px;line-height:1.3}
.coa-lock-banner strong{font-size:12px}
.coa-lock-banner span{color:var(--muted)}
.coa-lock-banner.locked{background:#fff7ed;border-color:#fdba74;color:#9a3412}
.coa-lock-banner.locked span{color:#9a3412}
.coa-lock-banner.unlocked{background:#f0fdf4;border-color:#bbf7d0;color:#166534}
.coa-lock-banner.unlocked span{color:#166534}
.coa-summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin-bottom:10px}
.coa-summary-grid div{border:1px solid var(--border);border-radius:8px;background:#fbfcfe;padding:8px 10px}
.coa-summary-grid span,.coa-summary-grid strong{display:block}
.coa-summary-grid span{font-size:11px;color:var(--muted);font-weight:800;text-transform:uppercase}
.coa-summary-grid strong{font-size:15px;margin-top:3px}
.coa-master-panel{padding:12px}
.coa-experience-panel{display:grid;gap:8px}
.global-coa-toolbar{align-items:end}
.link-btn,.sort-link{appearance:none;border:0;background:none;padding:0;color:#1d4ed8;font:inherit;font-weight:800;cursor:pointer}
.link-btn:hover,.sort-link:hover{text-decoration:underline}
.coa-filter-panel{display:grid;gap:4px;padding:2px 0}
.coa-filter-bar{display:grid;grid-template-columns:minmax(240px,1.5fr) repeat(3,minmax(118px,.72fr)) auto auto;gap:6px;align-items:center}
.coa-filter-bar .btn{min-height:26px;padding:3px 8px}
.coa-filter-meta{margin-top:0;font-size:10.5px;color:var(--muted);white-space:nowrap;justify-self:end}
.coa-guidance-strip{border:1px solid var(--border);border-radius:8px;background:#f8fafc;padding:10px 12px;font-size:12px;line-height:1.5;color:#475569}
.coa-section-toolbar{margin-bottom:4px}
.coa-report-group-stack{display:grid;gap:8px}
.coa-report-group-section{border:1px solid var(--border);border-radius:12px;background:#fbfcfe}
.coa-report-group-section[open]{box-shadow:0 10px 28px rgba(15,23,42,.04)}
.coa-report-group-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;padding:8px 10px;cursor:pointer;list-style:none}
.coa-report-group-head::-webkit-details-marker{display:none}
.coa-report-group-title{font-size:15px;font-weight:800;color:#0f172a}
.coa-report-group-submeta{font-size:12px;color:var(--muted)}
.coa-report-group-body{padding:0 10px 10px}
.coa-category-stack{display:grid;gap:8px}
.coa-category-group{border:1px solid var(--border);border-radius:10px;background:#fff;padding:5px 6px}
.coa-category-head{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:4px}
.coa-category-title{font-size:13px;font-weight:800;color:#0f172a}
.coa-category-submeta{font-size:12px;color:var(--muted);margin-top:3px}
.coa-category-table{max-height:min(76vh,980px)}
.coa-compact-table th,.coa-compact-table td{padding:1px 4px}
.coa-compact-table input,.coa-compact-table select{min-height:22px;padding:1px 5px}
.coa-item-row-meta{font-size:9px;line-height:1.2;color:var(--muted);margin-top:2px}
.report-page-stack{display:grid;gap:6px}
.report-control-panel{padding:12px}
.report-control-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.report-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.report-filter-bar{padding:0;display:grid;gap:0;border:0;background:transparent;box-shadow:none}
.report-toolbar-shell{padding:5px 7px;border-radius:12px;background:linear-gradient(180deg,#ffffff 0%,#fbfcff 100%);border:1px solid rgba(208,216,230,.9);box-shadow:0 8px 20px rgba(15,23,42,.04)}
.report-toolbar{display:grid;grid-template-columns:auto minmax(0,1.55fr) auto auto;gap:8px;align-items:center}
.report-toolbar-group{display:flex;align-items:center;gap:6px;min-width:0}
.report-toolbar-kicker{font-size:9.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#64748b;white-space:nowrap}
.report-toolbar select,.report-toolbar input{min-height:28px;padding:4px 8px;font-size:12px;border-radius:9px}
.report-toolbar-scope select:first-of-type{width:96px;flex:0 0 96px}
.report-toolbar-scope select:last-of-type{min-width:170px;max-width:250px}
.report-toolbar-when{min-width:0}
.report-date-cluster{display:grid;gap:6px;align-items:center;min-height:28px;min-width:0}
.report-toolbar-date-row-date{grid-template-columns:96px 144px}
.report-toolbar-date-row-range{grid-template-columns:88px 120px 140px 140px}
.report-toolbar-view select:first-of-type{width:78px;flex:0 0 78px}
.report-toolbar-view select:last-of-type{min-width:148px}
.report-toolbar-actions{justify-content:flex-end}
.report-toolbar-actions .btn{min-height:28px;padding:4px 8px;font-size:11px;border-radius:9px}
.ai-inline-actions{display:flex;justify-content:flex-end;margin:0 0 6px}
.ai-settings-stack{display:grid;gap:12px}
.ai-settings-panel,.ai-provider-panel{border:1px solid rgba(191,204,220,.9);background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%);box-shadow:0 10px 28px rgba(15,23,42,.05)}
.ai-status-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ai-status-card{border:1px solid rgba(210,220,235,.95);border-radius:12px;background:linear-gradient(180deg,#fdfefe 0%,#f7fbff 100%);padding:10px 12px;display:grid;gap:4px}
.ai-status-card span{font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:#64748b}
.ai-status-card strong{font-size:15px;color:#0f172a}
.ai-provider-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(180px,.8fr) auto;gap:10px;align-items:end}
.ai-provider-actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.ai-provider-meta{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:#475569;margin-top:8px}
.ai-provider-pill{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;background:#e2e8f0;color:#334155;font-size:12px;font-weight:700}
.ai-provider-pill.is-connected{background:#dcfce7;color:#166534}
.ai-provider-pill.is-configured{background:#dbeafe;color:#1d4ed8}
.integration-settings-stack{display:grid;gap:10px}
.integration-hero{display:flex;justify-content:space-between;gap:18px;align-items:center;padding:14px;background:linear-gradient(135deg,#f8fbff 0%,#ffffff 54%,#f7fee7 100%)}
.integration-hero h2{margin:0 0 6px;font-size:20px;line-height:1.18;color:#0f172a}
.integration-kicker{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#1d4ed8;margin-bottom:5px}
.integration-hero-actions,.integration-actions,.integration-row-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.integration-panel,.integration-mini-card{border:1px solid rgba(191,204,220,.9);box-shadow:0 8px 22px rgba(15,23,42,.045)}
.integration-provider-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(160px,.6fr);gap:8px;align-items:end}
.integration-provider-grid input,.integration-provider-grid select,.integration-mail-table input,.integration-mail-table select{width:100%;min-height:28px;padding:4px 7px;font-size:12px}
.integration-two-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.integration-mail-table{max-height:420px}
.integration-mail-table th,.integration-mail-table td{padding:5px 7px}
.cashflow-settings-stack{display:grid;gap:12px}
.cashflow-filter-bar{display:grid;grid-template-columns:repeat(5,minmax(130px,1fr));gap:8px;align-items:end}
.cashflow-filter-bar label{min-width:0}
.cashflow-filter-bar .cashflow-search{min-width:0}
.cashflow-workbench-title{align-items:center}
.cashflow-workbench-scroll{max-height:min(62vh,720px);overflow-x:auto}
/* Fixed layout: every cell respects its column width — a wide control or long
   value can NEVER push into the neighbouring column (the misalignment/overlap
   class). Columns: 1 check, 2 date, 3 account, 4 amount, 5 comment,
   6 counterparty, 7 contra, 8 category, 9 item, 10 note, 11 status, 12 approve. */
.cashflow-workbench-table{width:100%;min-width:1610px;table-layout:fixed}
.cashflow-workbench-table th:nth-child(1){width:40px}
.cashflow-workbench-table th:nth-child(2){width:96px}
.cashflow-workbench-table th:nth-child(3){width:170px}
.cashflow-workbench-table th:nth-child(4){width:110px}
.cashflow-workbench-table th:nth-child(5){width:150px}
.cashflow-workbench-table th:nth-child(6){width:150px}
.cashflow-workbench-table th:nth-child(7){width:180px}
.cashflow-workbench-table th:nth-child(8){width:172px}
.cashflow-workbench-table th:nth-child(9){width:162px}
.cashflow-workbench-table th:nth-child(10){width:120px}
.cashflow-workbench-table th:nth-child(11){width:104px}
.cashflow-workbench-table th:nth-child(12){width:96px}
.cashflow-workbench-table td{vertical-align:middle}
.cashflow-workbench-table select,.cashflow-workbench-table input{width:100%;min-height:28px;padding:4px 7px;font-size:12px}
/* Controls are boxed INSIDE their cell — min-widths from the pill skins must not win. */
.cashflow-workbench-table select,.cashflow-workbench-table input{max-width:100% !important;min-width:0 !important;box-sizing:border-box !important}
.cashflow-workbench-table .cashflow-item-meta{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.cashflow-workbench-table th,.cashflow-workbench-table td{overflow:hidden;text-overflow:ellipsis}
.cashflow-workbench-table td:nth-child(4),.cashflow-workbench-table th:nth-child(4),.cashflow-workbench-table td:nth-child(10),.cashflow-workbench-table th:nth-child(10){white-space:nowrap}
/* Text-heavy columns (Comment, Counterparty, Contra) truncate on one line instead
   of wrapping — a long value can no longer inflate row height or push into the
   neighbouring column. The full value stays available via the cell's title tooltip. */
.cashflow-workbench-table td:nth-child(5),.cashflow-workbench-table td:nth-child(6){white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
/* Contra shows account number (bold) + name (muted) on two lines, each truncated. */
.cashflow-workbench-table td.cf-cell-contra{white-space:normal;max-width:220px;line-height:1.25}
.cashflow-workbench-table td.cf-cell-contra strong,.cashflow-workbench-table td.cf-cell-contra .muted{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cashflow-workbench-table td:nth-child(8){white-space:normal}
.cashflow-small-table{max-height:260px}
.cashflow-report-card{display:grid;gap:4px}
.cashflow-report-table .indent{padding-left:22px}
.report-kicker{display:inline-flex;width:max-content;align-items:center;gap:6px;border:1px solid rgba(191,204,220,.9);background:rgba(255,255,255,.68);border-radius:999px;padding:5px 10px;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#1f5b4d}
.integration-memory-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.integration-memory-grid div{border:1px solid var(--border);border-radius:8px;background:#fbfcfe;padding:8px}
.integration-memory-grid span,.integration-memory-grid strong{display:block}
.integration-memory-grid span{font-size:10px;font-weight:800;text-transform:uppercase;color:var(--muted)}
.integration-memory-grid strong{font-size:14px;margin-top:2px;color:#0f172a}
.smart-ai-modal{width:min(760px,calc(100vw - 32px))}
.smart-ai-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.smart-ai-option{border:1px solid rgba(191,204,220,.95);border-radius:8px;background:#fff;text-align:left;padding:10px 12px;display:grid;gap:4px;cursor:pointer;box-shadow:0 8px 18px rgba(15,23,42,.035)}
.smart-ai-option:hover{border-color:#93c5fd;background:#f8fbff}
.smart-ai-option strong{font-size:13px;color:#0f172a}
.smart-ai-option span{font-size:12px;line-height:1.35;color:#475569}
.email-report-form{display:grid;gap:10px}
.email-report-form textarea{min-height:78px}
.btn.ghost{background:transparent;border:1px solid transparent;color:#475569}
.btn.ghost:hover{background:#f8fafc;border-color:var(--border)}
.grid tbody tr:hover td,.report tbody tr:hover td{background:#f8fbff}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.main{max-width:1680px;width:100%}
.panel,.report-wrap,.stat-card{backdrop-filter:saturate(1.08)}
@media (max-width:1300px){.integration-provider-grid,.integration-two-col{grid-template-columns:1fr}.integration-memory-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.integration-hero{align-items:flex-start;flex-direction:column}.smart-ai-grid,.integration-memory-grid{grid-template-columns:1fr}.integration-row-actions{justify-content:flex-start}}
.currency-control-panel label{gap:1px;font-size:9.5px}
.currency-control-panel input,.currency-control-panel select{min-height:26px;padding:3px 6px}
.coa-filter-panel label{gap:1px;font-size:9.5px}
.coa-filter-panel input,.coa-filter-panel select{min-height:26px;padding:3px 6px}
.report-summary-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.report-summary-chip{border:1px solid var(--border);border-radius:10px;background:#fbfcfe;padding:10px 12px}
.report-summary-chip strong,.report-summary-chip span{display:block}
.report-summary-chip strong{font-size:14px}
.report-summary-chip span{font-size:11px;color:var(--muted);margin-top:2px}
.coa-table-scroll{max-height:min(80vh,1100px)}
.coa-grid th,.coa-grid td{padding:3px 5px;font-size:11px}
.coa-grid th:nth-child(1){width:28%}
.coa-grid th:nth-child(2){width:17%}
.coa-grid th:nth-child(3){width:16%}
.coa-grid th:nth-child(4){width:20%}
.coa-grid th:nth-child(5){width:14%}
.coa-grid th:nth-child(6){width:70px}
.coa-grid th:nth-child(7){width:88px}
.coa-item-cell{min-width:0}
.coa-name-input{width:min(100%,430px);min-width:0}
.coa-grid select,.coa-grid input{width:100%;min-width:0}
.coa-select,.coa-name-input{min-height:24px;padding:3px 6px}
.coa-grid td{line-height:1.25}
.global-coa-headbar,.section-headbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.global-coa-headbar input,.section-headbar__actions input{min-width:min(320px,100%)}
.global-coa-headbar{padding:0 2px}
.section-headbar__actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;flex:1 1 auto}
.section-headbar__actions select,.section-headbar__actions input{flex:0 1 auto}
.header-cell-inline{display:flex;align-items:center;justify-content:flex-start;gap:8px;min-height:32px}
.sort-link{appearance:none;border:0;background:transparent;padding:0;font:inherit;font-weight:800;color:inherit;cursor:pointer;line-height:1;display:inline-flex;align-items:center}
.coa-global-grid th{vertical-align:middle}
.sort-link.is-active::after{content:"";display:inline-block;margin-left:6px;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;vertical-align:middle}
.coa-item-row td{padding-top:4px;padding-bottom:4px}
.coa-item-row-meta{margin-top:2px;font-size:10.5px;line-height:1.15}
.coa-global-table-scroll{max-height:min(66vh,860px)}
.coa-global-grid{table-layout:fixed}
.coa-global-grid th:nth-child(1){width:32%}
.coa-global-grid th:nth-child(2){width:14%}
.coa-global-grid th:nth-child(3){width:22%}
.coa-global-grid th:nth-child(4){width:24%}
.coa-global-grid th:nth-child(5){width:8%}
.coa-unmapped-table-scroll{max-height:min(52vh,620px)}
.coa-unmapped-grid{table-layout:fixed}
.coa-unmapped-grid th:nth-child(1){width:30%}
.coa-unmapped-grid th:nth-child(2){width:14%}
.coa-unmapped-grid th:nth-child(3){width:18%}
.coa-unmapped-grid th:nth-child(4){width:18%}
.coa-unmapped-grid th:nth-child(5){width:14%}
.coa-unmapped-grid th:nth-child(6){width:12%}
.coa-unmapped-grid .coa-select{min-height:28px;padding:4px 8px;font-size:11.5px}
.coa-unmapped-grid td{vertical-align:middle}
/* min-width keeps every column (esp. the Unmap action) usable on narrow screens;
   the .coa-usage-table wrapper (overflow:auto) scrolls horizontally instead of
   collapsing the Action column to nothing and hiding the Unmap button. */
.coa-usage-grid{table-layout:fixed;min-width:680px}
.coa-usage-grid th:nth-child(1){width:12%}
.coa-usage-grid th:nth-child(2){width:14%}
.coa-usage-grid th:nth-child(3){width:10%}
.coa-usage-grid th:nth-child(4){width:13%}
.coa-usage-grid th:nth-child(5){width:15%}
.coa-usage-grid th:nth-child(6){width:12%}
.coa-usage-grid th:nth-child(7){width:24%}
/* Action is the LAST column now (holds the Unmap button) — widths above sum to
   100%, so the "Action" header sits directly over its buttons. Keep it clipped
   with the button on its own stacking layer so nothing paints over the click
   target. */
.coa-usage-grid td.action-cell{overflow:hidden;text-overflow:ellipsis;position:relative;z-index:2}
.coa-usage-grid td.action-cell .btn{position:relative;z-index:3}
.coa-fsli-row{display:flex;gap:6px;align-items:center}
.coa-fsli-row select{flex:1 1 auto;min-width:0}
.coa-upload-mapping-table{max-height:calc(92vh - 190px);overflow:auto;overflow-x:hidden}
.coa-upload-grid{width:100%;table-layout:fixed}
.coa-upload-grid th,.coa-upload-grid td{padding:3px 4px;font-size:10.5px;vertical-align:top}
.coa-upload-grid th:nth-child(1){width:18%}
.coa-upload-grid th:nth-child(2){width:7%}
.coa-upload-grid th:nth-child(3){width:11%}
.coa-upload-grid th:nth-child(4){width:18%}
.coa-upload-grid th:nth-child(5){width:22%}
.coa-upload-grid th:nth-child(6){width:16%}
.coa-upload-grid th:nth-child(7){width:8%}
.coa-upload-grid-no-currency th:nth-child(1){width:20%}
.coa-upload-grid-no-currency th:nth-child(2){width:11%}
.coa-upload-grid-no-currency th:nth-child(3){width:18%}
.coa-upload-grid-no-currency th:nth-child(4){width:23%}
.coa-upload-grid-no-currency th:nth-child(5){width:18%}
.coa-upload-grid-no-currency th:nth-child(6){width:10%}
.coa-upload-select{width:100%;min-width:0;min-height:22px;padding:2px 5px;font-size:10.5px}
.coa-upload-account-cell,.coa-upload-item-cell{min-width:0;overflow-wrap:anywhere;word-break:break-word}
.coa-upload-currency-cell,.coa-upload-approve-cell{white-space:nowrap}
.coa-upload-modal{width:min(1500px,calc(100vw - 16px));overflow:hidden;display:flex;flex-direction:column}
.coa-upload-modal .modal-head,.coa-upload-modal .modal-foot{flex:0 0 auto}
.coa-upload-modal .modal-body{min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:8px}
/* Global CoA export picker (choose one company or all) */
.modal.coa-export-modal{width:min(460px,calc(100vw - 24px)) !important;display:flex;flex-direction:column}
.coa-export-pick-list{display:flex;flex-direction:column;gap:6px;max-height:min(52vh,420px);overflow:auto}
.coa-export-pick{display:flex;align-items:center;gap:9px;padding:9px 12px;border:1px solid var(--border);border-radius:10px;cursor:pointer;transition:background .12s,border-color .12s}
.coa-export-pick:hover{background:var(--surface-2,rgba(127,127,127,.08));border-color:var(--accent,#3b6cff)}
.coa-export-pick input{margin:0;flex:0 0 auto}
.opening-balance-form{margin-bottom:8px}
.btn.danger,.btn.secondary.danger{color:#9f1239;border-color:#fecdd3;background:#fff7f8}
.hidden,
.modal-backdrop.hidden,
.modal-shell.hidden{
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
}
@media (max-width:980px){.global-coa-headbar,.section-headbar{align-items:flex-start}.global-coa-headbar input,.section-headbar__actions input{min-width:220px}.section-headbar__actions{justify-content:flex-start}}
@media print{.sidebar,.page-head,.no-print,.help-btn{display:none!important}.app{display:block}.main{padding:0}.report-wrap{border:0;box-shadow:none;padding:0}.panel{box-shadow:none}}
@media (max-width:1300px){.gl-format-grid,.companies-grid,.currency-split,.gl-journey-shell,.currency-hero-shell,.coa-overview-shell,.coa-filter-bar,.report-control-grid{grid-template-columns:1fr}.report-toolbar{grid-template-columns:1fr 1fr}.report-date-cluster,.currency-range-controls{grid-template-columns:repeat(2,minmax(0,1fr))}.mapping-item-field{grid-column:auto}.mapping-coach-row{align-items:flex-start;flex-direction:column}.recent-choice-strip{justify-content:flex-start}.validation-summary{grid-template-columns:repeat(2,minmax(100px,1fr))}.coa-grid th:nth-child(1){width:240px}.coa-grid th:nth-child(4){width:220px}.coa-summary-grid,.ai-status-grid{grid-template-columns:repeat(2,minmax(120px,1fr))}.gl-journey-chiprow,.coa-overview-chiprow{justify-content:flex-start}.currency-hero-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.gl-status-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ai-provider-grid{grid-template-columns:1fr}}
@media (max-width:1100px){.app{grid-template-columns:1fr}.sidebar{position:relative;height:auto}.stats-grid,.two-col,.form-grid,.check-list,.workflow-company-grid,.report-summary-strip,.gl-status-grid,.ai-status-grid,.company-overview-grid,.company-detail-grid,.company-overview-hero{grid-template-columns:1fr}.main{padding:12px}.date-filter label{min-width:0;flex:1 1 150px}.workflow-next-row,.workflow-overview-shell,.page-head,.gl-status-actions{flex-direction:column;align-items:flex-start}.workflow-next-actions,.actions,.report-actions,.currency-primary-actions,.report-filter-actions,.ai-provider-actions,.company-overview-actions{justify-content:flex-start;max-width:none}}
@media (max-width:1100px){.mapping-card-grid,.mapping-fields,.coa-item-edit-grid,.currency-hero-grid,.currency-control-grid,.report-date-cluster{grid-template-columns:1fr}.mapping-activity{text-align:left}.mapping-actions,.mapping-card-actions,.coa-item-foot{grid-template-columns:1fr;justify-content:flex-start;flex-wrap:wrap}.gl-journey-title,.currency-hero-title,.coa-overview-title{font-size:20px}.ready-strip{flex-direction:column;align-items:flex-start}}
/* Debaruis Vendor OS-inspired full-app shell transplant for Symmetra */
:root{
  --bg:#b9ddcf;
  --bg-accent:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(15,58,39,.18)),
    url("../assets/glass-valley-background.jpg");
  --panel:rgba(255,255,255,.16);
  --panel-strong:rgba(255,255,255,.28);
  --border:rgba(255,255,255,.58);
  --line:rgba(255,255,255,.52);
  --line-strong:rgba(255,255,255,.68);
  --text:#0d2340;
  --muted:#46607f;
  --primary:#175fe6;
  --primary-soft:rgba(225,239,250,.96);
  --secondary:rgba(255,255,255,.56);
  --shadow:0 22px 48px rgba(5,25,52,.20), inset 0 1px 0 rgba(255,255,255,.48);
  --shadow-soft:0 14px 28px rgba(16,40,76,.10);
  --radius:24px;
}
html,body{
  background-color:var(--bg) !important;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(20,65,44,.20)),
    url("../assets/glass-valley-background.jpg") !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  background-attachment:scroll !important;
  color:var(--text);
  font-family:Inter,"Segoe UI",Arial,sans-serif;
  font-weight:600;
  letter-spacing:-.01em;
}
/* NOTE: a leftover `html{zoom:.8}` lived here and contradicted the later
   "DENSITY (replaces fragile CSS zoom)" pass. CSS `zoom` re-broke Chrome's
   <select> hit-testing and 100vh math (clicks landing in the wrong place,
   the app rendering at 80% leaving blank space around it, and jumpy/stuck
   layout). Density is handled by the font-size tokens below, so the zoom is
   removed entirely. */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 4%, rgba(255,255,255,.34), transparent 26rem),
    linear-gradient(90deg, rgba(255,255,255,.04), rgba(235,250,255,.18), rgba(255,255,255,.04));
  z-index:0;
}
.app,.main,.sidebar{position:relative;z-index:1}
.modal-shell,.modal-backdrop{z-index:80}
.toast-viewport{z-index:140}
.app{
  grid-template-columns:280px minmax(0,1fr);
  gap:18px;
  padding:18px;
  min-height:100vh;
  background-image:var(--bg-accent);
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
}
.sidebar{
  padding:16px 16px 20px;
  border:1px solid var(--border);
  border-radius:28px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.34), rgba(217,241,218,.12)),
    rgba(255,255,255,.12) !important;
  box-shadow:var(--shadow);
  backdrop-filter:blur(18px) saturate(1.35);
  -webkit-backdrop-filter:blur(18px) saturate(1.35);
}
.brand{gap:14px;align-items:flex-start;margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.28)}
.brand-logo{width:62px;height:62px;border-radius:18px;background:rgba(255,255,255,.22);box-shadow:0 10px 20px rgba(18,38,76,.10);padding:6px}
.brand-copy{min-width:0}
.brand-name{font-size:22px;line-height:1;font-weight:800;letter-spacing:-.03em;color:var(--text)}
.brand-sub,.brand-byline{color:var(--muted)}
.brand-sub{margin-top:6px;font-size:13px;line-height:1.25}
.brand-byline{margin-top:4px;font-size:11px;font-weight:800}
.nav{gap:10px}
.nav-btn,.nav-section-btn,.nav-subbtn{
  border:1px solid transparent;
  border-radius:18px;
  background:transparent;
  color:var(--text);
  font-weight:700;
  transition:background .18s ease,border-color .18s ease,box-shadow .18s ease,transform .16s ease,color .18s ease;
}
.nav-btn,.nav-section-btn,.nav-subbtn{display:flex;align-items:center;gap:12px}
.nav-btn,.nav-section-btn{padding:14px 16px;min-height:54px}
.nav-subnav{gap:8px;padding:8px 0 0 10px}
.nav-subbtn{padding:10px 12px;min-height:40px;font-size:13px}
.nav-btn-icon{display:inline-grid;place-items:center;flex:0 0 auto;width:20px;height:20px}
.nav-btn-icon svg{width:20px;height:20px}
.nav-btn-label{white-space:nowrap}
.nav-btn:hover,.nav-section-btn:hover,.nav-subbtn:hover{
  background:rgba(255,255,255,.22);
  border-color:rgba(255,255,255,.34);
  box-shadow:var(--shadow-soft);
  transform:translateY(-1px);
}
.nav-btn.active,.nav-section-btn.active,.nav-subbtn.active{
  background:linear-gradient(135deg, rgba(82,155,255,.28), rgba(40,115,233,.28));
  border-color:rgba(197,221,255,.56);
  box-shadow:0 10px 24px rgba(6,30,88,.14);
  color:#0d3f9b;
}
.nav-chevron{margin-left:auto;color:var(--muted);font-size:12px}
.main{max-width:none;padding:10px 6px 24px}
.background-controls{
  position:fixed;
  top:10px;
  right:10px;
  z-index:90;
  display:flex;
  align-items:center;
  gap:8px;
}
.btn.icon-only,.background-toggle{
  width:30px;
  min-width:30px;
  height:30px;
  min-height:30px;
  padding:0;
  border-radius:10px;
  display:inline-grid;
  place-items:center;
}
.btn.icon-only svg,.background-toggle svg{width:16px;height:16px}
.page-head{
  margin-bottom:10px;
  padding:8px 14px;
  border:1px solid var(--border);
  border-radius:22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.40), rgba(234,248,239,.18)),
    rgba(255,255,255,.14) !important;
  box-shadow:var(--shadow);
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  align-items:center;
}
.page-head h1{font-size:24px;line-height:1;letter-spacing:-.02em;font-weight:800;color:var(--text);white-space:nowrap}
.subtitle{display:none !important;margin-top:8px;color:var(--muted);font-size:13px;line-height:1.45}
.actions{gap:8px;justify-content:flex-end}
.panel,.report-wrap,.stat-card,.modal,.detail-panel,.workflow-company-card,.mapping-card,.provider-card,.sidebar-card{
  border:1px solid var(--border) !important;
  border-radius:24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.30), rgba(232,249,235,.14)),
    rgba(255,255,255,.13) !important;
  box-shadow:var(--shadow);
  backdrop-filter:blur(18px) saturate(1.35);
  -webkit-backdrop-filter:blur(18px) saturate(1.35);
}
.panel,.report-wrap,.mapping-card{padding:18px 20px}
.panel-title,.report-title,.workflow-company-name,.coa-overview-title,.gl-journey-title,.currency-hero-title{color:var(--text);letter-spacing:-.02em}
.panel-title{font-size:20px;font-weight:800}
.muted,.report-date,.stat-hint,.workflow-meta-line,.mapping-card-submeta,.mapping-meta,.mapping-local span,.mapping-activity span{color:var(--muted)}
.stat-card{padding:16px;border-radius:20px}
.stat-label{color:#52648a;font-size:10px;font-weight:800;text-transform:uppercase}
.stat-value{margin-top:8px;font-size:22px;line-height:1.1;color:var(--text)}
.btn,.icon-btn,input,select,textarea{
  border:1px solid rgba(255,255,255,.68);
  border-radius:16px;
  background:rgba(255,255,255,.48) !important;
  box-shadow:0 10px 22px rgba(31,54,88,.08);
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
}
.btn{min-height:44px;padding:0 18px;color:var(--text);font-size:13px;font-weight:780}
.btn:hover{transform:translateY(-1px);box-shadow:0 14px 28px rgba(31,54,88,.12)}
.btn.primary{
  border-color:rgba(132,125,255,.62);
  background:linear-gradient(135deg, #175fe6, #547dff) !important;
  color:#fff;
  box-shadow:0 14px 28px rgba(83,98,232,.26);
}
.btn.secondary,.btn.ghost,.icon-btn{color:#23456f}
.btn.small,.btn.btn-compact{min-height:28px;padding:0 9px;border-radius:10px;font-size:11px}
label{gap:6px;color:#40577d;font-size:12px;font-weight:700}
input,select,textarea{min-height:36px;padding:7px 10px;color:var(--text)}
input:focus,select:focus,textarea:focus{
  outline:none;
  border-color:rgba(117,104,255,.70);
  box-shadow:0 0 0 4px rgba(117,104,255,.14), 0 10px 22px rgba(31,54,88,.08);
}
.table-scroll,.mapping-workspace{
  border:1px solid rgba(255,255,255,.50);
  border-radius:18px;
  background:rgba(255,255,255,.13) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42);
}
.grid,.report{border-collapse:separate;border-spacing:0 8px}
.grid th,.grid td,.report td,.report th{border-bottom:0}
.grid th,.report th,.mapping-table th{
  background:rgba(255,255,255,.36) !important;
  color:#52648a;
  font-size:11px;
  font-weight:830;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
.grid tbody td,.report tbody td{
  background:rgba(255,255,255,.32);
  border-top:1px solid rgba(255,255,255,.58);
  border-bottom:1px solid rgba(255,255,255,.46);
}
.grid tbody td:first-child,.report tbody td:first-child{
  border-left:1px solid rgba(255,255,255,.52);
  border-top-left-radius:12px;
  border-bottom-left-radius:12px;
}
.grid tbody td:last-child,.report tbody td:last-child{
  border-right:1px solid rgba(255,255,255,.52);
  border-top-right-radius:12px;
  border-bottom-right-radius:12px;
}
.grid tbody tr:hover td,.report tbody tr:hover td{background:rgba(255,255,255,.48) !important}
.pill,.status-badge,.workflow-pill,.mapping-reason-pills span,.detected-fields span,.currency-meta-strip span,.gl-stepline span,.filter-chip{
  border:1px solid rgba(255,255,255,.54);
  border-radius:999px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.58);
}
.status,.validation-box,.coa-guidance-strip,.gl-layout-note,.preview-guidance,.preview-empty,.mapping-warning,.mapping-soft-warning{
  border-radius:16px;
  border-color:rgba(255,255,255,.58);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.52);
}
.report-toolbar-shell,.currency-control-panel,.coa-overview-panel,.gl-journey-panel,.currency-hero-panel,.workflow-center-panel{
  border-radius:24px;
  border:1px solid rgba(255,255,255,.58);
  background:
    linear-gradient(180deg, rgba(255,255,255,.28), rgba(232,249,235,.12)),
    rgba(255,255,255,.12) !important;
  box-shadow:var(--shadow);
}
.report-toolbar{grid-template-columns:auto minmax(0,1.6fr) auto auto;gap:10px}
.report-toolbar-kicker,.gl-journey-kicker,.currency-kicker,.coa-overview-kicker,.integration-kicker{color:#5c6c91}
.report-toolbar-actions{gap:8px}
.cashflow-filter-bar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;align-items:end}
.cashflow-filter-bar .cashflow-search{grid-column:span 2}
.cashflow-status-toggle{display:inline-flex;gap:6px;align-items:center}
.cashflow-load-more{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;flex-wrap:wrap}
.cashflow-item-cell{display:flex;align-items:center;gap:6px}
.cashflow-item-cell select{flex:1 1 auto;min-width:0}
.cashflow-add-inline{width:24px;min-width:24px;height:24px;min-height:24px;padding:0;border-radius:8px;font-size:15px;line-height:1}
input[type="checkbox"]{width:12px;height:12px;min-height:12px;min-width:12px;padding:0;border-radius:3px}
.cashflow-workbench-title{align-items:flex-start}
.cashflow-workbench-scroll{max-height:min(62vh,720px);overflow:auto}
.cashflow-workbench-table{width:100%;min-width:1400px;table-layout:fixed}
.cashflow-workbench-table th:nth-child(1){width:36px}
.cashflow-workbench-table th:nth-child(2){width:92px}
.cashflow-workbench-table th:nth-child(3){width:140px}
.cashflow-workbench-table th:nth-child(4){width:104px}
.cashflow-workbench-table th:nth-child(5){width:130px}
.cashflow-workbench-table th:nth-child(6){width:130px}
.cashflow-workbench-table th:nth-child(7){width:160px}
.cashflow-workbench-table th:nth-child(8){width:150px}
.cashflow-workbench-table th:nth-child(9){width:140px}
.cashflow-workbench-table th:nth-child(10){width:110px}
.cashflow-workbench-table th:nth-child(11){width:96px}
.cashflow-workbench-table th:nth-child(12){width:88px}
.cashflow-workbench-table select,.cashflow-workbench-table input{width:100%;min-height:26px;padding:3px 6px;font-size:11px;max-width:100% !important;min-width:0 !important;box-sizing:border-box !important}
.cashflow-workbench-table th,.cashflow-workbench-table td{overflow:hidden;text-overflow:ellipsis}
.cashflow-workbench-table td:nth-child(4),.cashflow-workbench-table th:nth-child(4),.cashflow-workbench-table td:nth-child(9),.cashflow-workbench-table th:nth-child(9),.cashflow-workbench-table td:nth-child(10),.cashflow-workbench-table th:nth-child(10){white-space:nowrap}
.cashflow-workbench-table td:nth-child(5),.cashflow-workbench-table td:nth-child(6){white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cashflow-workbench-table td.cf-cell-contra{white-space:normal;line-height:1.2}
.cashflow-workbench-table td.cf-cell-contra strong,.cashflow-workbench-table td.cf-cell-contra .muted{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cashflow-workbench-table td:nth-child(8){white-space:normal}
.modal-backdrop{background:rgba(10,26,52,.24);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.modal{
  width:min(1120px, calc(100vw - 36px));
  max-height:92vh;
  background:
    linear-gradient(180deg, rgba(255,255,255,.76), rgba(239,249,241,.58)),
    rgba(255,255,255,.44) !important;
}
.modal-head,.modal-foot{border-color:rgba(255,255,255,.62);background:transparent}
.integration-hero,.gl-journey-shell,.currency-hero-shell,.coa-overview-shell{background:transparent}
.app.background-image-off,
html.background-image-off body,
body.background-image-off{
  background:#f6f9fd !important;
  background-image:none !important;
}
.app.background-image-off{
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(245,250,255,.9)),
    #f6f9fd !important;
}
.app.background-image-off .sidebar,
.app.background-image-off .panel,
.app.background-image-off .report-wrap,
.app.background-image-off .page-head,
.app.background-image-off .modal,
.app.background-image-off .detail-panel,
.app.background-image-off .workflow-company-card,
.app.background-image-off .mapping-card,
.app.background-image-off .provider-card,
.app.background-image-off .sidebar-card{
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,251,255,.96)),
    #fff !important;
}
.coa-report-group-section,
.coa-category-group{
  border:1px solid rgba(255,255,255,.52);
  border-radius:20px;
  background:rgba(255,255,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.44);
}
.coa-report-group-section{overflow:hidden}
.coa-report-group-head{padding:14px 16px}
.coa-report-group-body{padding:0 14px 14px}
.coa-report-group-table-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  gap:12px;
  margin-bottom:10px;
  color:var(--muted);
  font-size:12px;
  font-weight:700;
}
.coa-action-cluster{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.coa-head-search{min-width:320px;max-width:520px}
.icon-only-btn{width:42px;min-width:42px;justify-content:center;padding-left:0!important;padding-right:0!important;font-size:18px;line-height:1}
.companies-coa-panel{margin-top:14px}
.coa-filter-bar.companies-coa-filter-bar{grid-template-columns:minmax(180px,.6fr) minmax(260px,1.5fr) minmax(150px,.5fr) auto}
.coa-category-head .coa-action-cluster,.coa-report-group-head .coa-action-cluster{align-items:center}
.coa-filter-bar{
  grid-template-columns:minmax(260px,1.4fr) repeat(5,minmax(130px,.75fr)) auto auto;
  gap:10px;
}
.coa-lock-banner{
  border-radius:16px;
}
.currency-column-picker{margin-bottom:10px}
.currency-column-picker-summary{
  list-style:none;
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.56);
  border-radius:16px;
  background:rgba(255,255,255,.26);
  color:var(--text);
  cursor:pointer;
}
.currency-column-picker-summary::-webkit-details-marker{display:none}
.currency-column-picker-menu{
  margin-top:8px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.52);
  border-radius:16px;
  background:rgba(255,255,255,.22);
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(92px,1fr));
  gap:8px;
}
.currency-column-picker-menu label{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:8px;
  min-width:0;
}
.app{
  background:
    radial-gradient(circle at top left, rgba(59,130,246,.10), transparent 28%),
    radial-gradient(circle at top right, rgba(14,165,233,.10), transparent 24%),
    linear-gradient(180deg, #f4f8ff 0%, #eef4ff 48%, #f7fbff 100%);
}
.sidebar{
  background:linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(247,250,255,.98) 100%);
  box-shadow:inset -1px 0 0 rgba(203,213,225,.58), 12px 0 40px rgba(15,23,42,.04);
}
.brand{
  padding:10px 12px;
  border:1px solid rgba(191,219,254,.62);
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.94) 0%, rgba(239,246,255,.95) 100%);
  box-shadow:0 16px 40px rgba(29,78,216,.10);
}
.brand-mark{
  background:linear-gradient(135deg,#2563eb 0%,#0ea5e9 100%);
  box-shadow:0 14px 30px rgba(37,99,235,.28);
}
.nav,.nav-section,.nav-subnav{gap:10px}
.nav-btn,.nav-section-btn,.nav-subbtn{
  border:1px solid transparent;
  background:rgba(255,255,255,.58);
}
.nav-btn:hover,.nav-section-btn:hover,.nav-subbtn:hover{
  transform:translateY(-1px);
  border-color:rgba(191,219,254,.95);
  box-shadow:0 12px 26px rgba(37,99,235,.10);
}
.nav-btn.active,.nav-section-btn.active,.nav-subbtn.active{
  border-color:rgba(147,197,253,.95);
  box-shadow:0 14px 28px rgba(37,99,235,.12);
}
.page-head{
  padding:18px 20px 14px;
  border:1px solid rgba(191,219,254,.5);
  border-radius:20px;
  background:linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(248,250,255,.96) 100%);
  box-shadow:0 22px 46px rgba(15,23,42,.06);
}
.panel,.report-wrap,.stat-card,.modal,.detail-panel,.workflow-company-card,.mapping-card,.provider-card,.company-overview-panel{
  border-color:rgba(203,213,225,.68);
  box-shadow:0 22px 44px rgba(15,23,42,.08), 0 2px 0 rgba(255,255,255,.6) inset;
}
.panel,.report-wrap,.mapping-card{
  background:linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(250,252,255,.98) 100%);
}
.panel-title-row{margin-bottom:12px}
.panel-title{letter-spacing:-.02em}
.btn.primary{
  background:linear-gradient(135deg,#2563eb 0%,#0284c7 100%);
  box-shadow:0 14px 28px rgba(37,99,235,.24);
}
.btn.secondary{
  background:linear-gradient(180deg,#fff 0%,#f8fbff 100%);
}
.btn.secondary.danger,.btn.danger{
  border:1px solid rgba(254,202,202,.95);
  color:#b91c1c;
  background:linear-gradient(180deg,#fff5f5 0%,#fff1f2 100%);
}
.btn:hover{transform:translateY(-1px)}
.workflow-center-panel,
.gl-import-guide,
.coa-overview-panel,
.currency-hero-panel,
.gl-journey-panel{overflow:hidden}
.workflow-center-panel{
  background:linear-gradient(135deg, rgba(239,246,255,.94) 0%, rgba(255,255,255,.98) 52%, rgba(248,250,252,.98) 100%);
}
.workflow-company-card{
  background:linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(247,250,255,.98) 100%);
}
.workflow-next-card,.workflow-summary-card,.stat-card{box-shadow:0 14px 26px rgba(15,23,42,.05)}
.gl-import-guide{
  background:linear-gradient(135deg, rgba(239,246,255,.98) 0%, rgba(255,255,255,.98) 44%, rgba(240,249,255,.98) 100%);
}
.gl-import-guide__actions{margin-top:12px}
.gl-toolbar-advanced{
  padding:10px 12px;
  border:1px solid rgba(191,219,254,.75);
  border-radius:16px;
  background:rgba(239,246,255,.72);
}
.company-directory-table tbody tr,
.grid.compact tbody tr{
  transition:background .16s ease, transform .16s ease, box-shadow .16s ease;
}
.company-directory-table tbody tr:hover{
  background:rgba(239,246,255,.72);
  box-shadow:inset 0 0 0 1px rgba(147,197,253,.65);
}
.company-overview-hero{
  padding:18px;
  border:1px solid rgba(191,219,254,.55);
  border-radius:22px;
  background:linear-gradient(135deg, rgba(239,246,255,.96) 0%, rgba(255,255,255,.98) 58%, rgba(224,242,254,.85) 100%);
  box-shadow:0 20px 44px rgba(14,116,144,.10);
}
.company-overview-actions .btn,
.workflow-next-actions .btn,
.gl-minimal-bar__actions .btn{min-height:38px}
.report-wrap{
  background:linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(251,253,255,.99) 100%);
}
.report-head{
  padding-bottom:8px;
  border-bottom:1px solid rgba(226,232,240,.92);
}
.mapping-card,.detail-panel,.table-scroll{border-radius:16px}
.table-scroll{background:rgba(255,255,255,.78)}
@media (max-width:1280px){
  html{zoom:1}
  .app{grid-template-columns:1fr;padding:14px;width:100%;min-height:100vh}
  .sidebar{position:relative;height:auto}
  .nav{grid-template-columns:repeat(auto-fit, minmax(148px,1fr))}
  .page-head{padding:18px}
  .cashflow-filter-bar{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cashflow-filter-bar .cashflow-search{grid-column:auto}
}
@media (max-width:760px){
  html{zoom:1}
  .app{padding:10px;gap:12px;width:100%;min-height:100vh}
  .sidebar,.panel,.report-wrap,.page-head,.modal{border-radius:20px}
  .page-head h1{font-size:24px}
  .nav{grid-template-columns:1fr}
  .background-controls{top:8px;right:8px}
  .coa-filter-bar{grid-template-columns:1fr}
  .currency-column-picker-summary{flex-direction:column;align-items:flex-start}
}

/* 2026-05-10 stronger premium visibility pass */
body{
  background:
    radial-gradient(circle at 12% 0%, rgba(14,165,233,.20), transparent 28%),
    radial-gradient(circle at 88% 8%, rgba(37,99,235,.16), transparent 24%),
    linear-gradient(180deg, #edf4ff 0%, #e9f2ff 42%, #f7fbff 100%);
}
.app{
  gap:22px;
  padding:22px;
  background:
    radial-gradient(circle at top left, rgba(56,189,248,.20), transparent 24%),
    radial-gradient(circle at top right, rgba(37,99,235,.16), transparent 20%),
    linear-gradient(180deg, #eef5ff 0%, #edf4ff 52%, #f8fbff 100%) !important;
}
.sidebar{
  background:
    linear-gradient(180deg, rgba(15,23,42,.98) 0%, rgba(20,37,66,.98) 100%) !important;
  border-color:rgba(96,165,250,.18) !important;
  box-shadow:0 24px 60px rgba(15,23,42,.20), inset 0 1px 0 rgba(255,255,255,.06) !important;
}
.brand{
  background:
    linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.06) 100%) !important;
  border-color:rgba(148,163,184,.18) !important;
  box-shadow:0 20px 48px rgba(2,8,23,.20) !important;
}
.brand-name{color:#f8fbff !important}
.brand-sub,.brand-byline{color:rgba(226,232,240,.82) !important}
.nav-btn,.nav-section-btn,.nav-subbtn{
  color:rgba(226,232,240,.92) !important;
  background:rgba(255,255,255,.04) !important;
  border-color:transparent !important;
}
.nav-btn:hover,.nav-section-btn:hover,.nav-subbtn:hover{
  color:#fff !important;
  background:rgba(255,255,255,.08) !important;
  border-color:rgba(191,219,254,.16) !important;
  box-shadow:0 16px 32px rgba(2,8,23,.24) !important;
}
.nav-btn.active,.nav-section-btn.active,.nav-subbtn.active{
  color:#eff6ff !important;
  background:linear-gradient(135deg, rgba(37,99,235,.78), rgba(14,165,233,.54)) !important;
  border-color:rgba(147,197,253,.40) !important;
  box-shadow:0 18px 36px rgba(37,99,235,.34) !important;
}
.nav-chevron{color:rgba(191,219,254,.72) !important}
.page-head{
  padding:22px 24px 18px !important;
  border-radius:24px !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.98) 0%, rgba(243,247,255,.98) 58%, rgba(235,245,255,.96) 100%) !important;
  box-shadow:0 26px 56px rgba(15,23,42,.10) !important;
}
.page-head h1{
  font-size:30px !important;
  font-weight:850 !important;
}
.subtitle{
  display:block !important;
  max-width:760px;
  color:#5b6f95 !important;
  font-size:14px !important;
}
.panel,.report-wrap,.stat-card,.modal,.detail-panel,.workflow-company-card,.mapping-card,.provider-card,.company-overview-panel{
  border-radius:26px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.99) 0%, rgba(248,251,255,.99) 100%) !important;
  box-shadow:0 26px 60px rgba(15,23,42,.10), 0 1px 0 rgba(255,255,255,.78) inset !important;
}
.panel-title{
  font-size:22px !important;
  letter-spacing:-.025em !important;
}
.table-scroll{
  border-radius:22px !important;
  background:linear-gradient(180deg, rgba(247,250,255,.98) 0%, rgba(255,255,255,.98) 100%) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.88), inset 0 0 0 1px rgba(191,219,254,.22) !important;
}
.grid{
  border-spacing:0 12px !important;
}
.grid th,.report th,.mapping-table th{
  background:transparent !important;
  color:#6b7c9d !important;
  font-size:10.5px !important;
  letter-spacing:.08em !important;
}
.grid tbody td,.report tbody td{
  background:linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(249,251,255,.98) 100%) !important;
  border-top:1px solid rgba(219,234,254,.95) !important;
  border-bottom:1px solid rgba(219,234,254,.95) !important;
}
.company-directory-table tbody tr:hover td{
  background:linear-gradient(180deg, rgba(239,246,255,1) 0%, rgba(248,251,255,1) 100%) !important;
  transform:translateY(-1px);
}
.company-directory-table .action-cell{
  white-space:nowrap;
}
.company-directory-note{
  margin-top:12px;
  padding:12px 14px;
  border:1px solid rgba(191,219,254,.55);
  border-radius:16px;
  background:linear-gradient(135deg, rgba(239,246,255,.88), rgba(255,255,255,.96));
  color:#496184 !important;
}
.btn{
  min-height:46px !important;
  border-radius:16px !important;
}
.btn.primary{
  background:linear-gradient(135deg, #1d4ed8 0%, #0ea5e9 100%) !important;
  box-shadow:0 18px 34px rgba(29,78,216,.28) !important;
}
.btn.secondary{
  background:linear-gradient(180deg, #ffffff 0%, #f5f9ff 100%) !important;
}
.btn.small,.btn.btn-compact{
  min-height:32px !important;
  padding:0 10px !important;
  border-radius:12px !important;
}
.workflow-center-panel{
  background:
    radial-gradient(circle at top right, rgba(14,165,233,.12), transparent 22%),
    linear-gradient(135deg, rgba(241,245,255,1) 0%, rgba(255,255,255,1) 54%, rgba(240,249,255,.98) 100%) !important;
}
.gl-import-guide{
  border:1px solid rgba(125,211,252,.42) !important;
  background:
    radial-gradient(circle at top right, rgba(14,165,233,.14), transparent 18%),
    linear-gradient(135deg, rgba(239,246,255,1) 0%, rgba(255,255,255,1) 48%, rgba(236,254,255,.98) 100%) !important;
}
.workflow-pill,.pill,.status-badge{
  box-shadow:0 8px 18px rgba(15,23,42,.08) !important;
}
@media (max-width:760px){
  .page-head h1{font-size:24px !important}
  .subtitle{font-size:13px !important}
}

/* 2026-05-10 reference-aligned shell redesign */
html{zoom:1 !important}
body.theme-light,
body.theme-dark{
  --shell-radius:24px;
  --shell-radius-sm:16px;
  --shell-shadow:0 18px 48px rgba(15,23,42,.10);
  --shell-shadow-soft:0 12px 30px rgba(15,23,42,.06);
  --shell-ring:0 0 0 1px rgba(255,255,255,.44) inset;
  --shell-bg-image:var(--symmetra-background-image);
  font-family:Inter,"Segoe UI",Arial,sans-serif !important;
}
body.theme-light{
  --bg:#eef4ff;
  --text:#17325c;
  --muted:#6e84a8;
  --primary:#3b82f6;
  --primary-strong:#2563eb;
  --primary-soft:#dbeafe;
  --panel:#ffffff;
  --panel-soft:rgba(255,255,255,.78);
  --panel-strong:rgba(255,255,255,.92);
  --line:rgba(191,219,254,.82);
  --line-strong:rgba(148,163,184,.36);
  --sidebar-top:#f9fbff;
  --sidebar-bottom:#edf4ff;
  --sidebar-text:#17325c;
  --nav-bg:rgba(255,255,255,.54);
  --nav-hover:rgba(255,255,255,.88);
  --nav-active-start:#5ea4ff;
  --nav-active-end:#2d71f7;
  --nav-active-text:#ffffff;
  --body-gradient:
    radial-gradient(circle at 20% 0%, rgba(147,197,253,.34), transparent 25%),
    linear-gradient(180deg, rgba(244,248,255,.96), rgba(232,240,255,.92));
}
body.theme-dark{
  --bg:#091127;
  --text:#eef3ff;
  --muted:#94a8d2;
  --primary:#7c5cff;
  --primary-strong:#9d6bff;
  --primary-soft:rgba(124,92,255,.18);
  --panel:#0d1835;
  --panel-soft:rgba(13,24,53,.82);
  --panel-strong:rgba(11,21,47,.92);
  --line:rgba(104,132,208,.26);
  --line-strong:rgba(124,92,255,.28);
  --sidebar-top:#0a1430;
  --sidebar-bottom:#0a1636;
  --sidebar-text:#eef3ff;
  --nav-bg:rgba(255,255,255,.03);
  --nav-hover:rgba(255,255,255,.08);
  --nav-active-start:#7b4eff;
  --nav-active-end:#b167ff;
  --nav-active-text:#ffffff;
  --body-gradient:
    radial-gradient(circle at 15% 0%, rgba(76,29,149,.32), transparent 24%),
    radial-gradient(circle at 88% 92%, rgba(59,130,246,.18), transparent 20%),
    linear-gradient(180deg, rgba(7,14,31,.98), rgba(5,10,25,.98));
}
body.theme-light,
body.theme-dark{
  background:var(--body-gradient) !important;
  color:var(--text) !important;
}
body.theme-light::before,
body.theme-dark::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at top, rgba(255,255,255,.36), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0));
  z-index:0;
}
body.background-image-on .app{
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0)),
    var(--shell-bg-image) !important;
  background-size:cover !important;
  background-position:center center !important;
}
body.background-image-off .app{
  background-image:none !important;
}
.app{
  position:relative !important;
  z-index:1 !important;
  grid-template-columns:308px minmax(0,1fr) !important;
  gap:26px !important;
  padding:22px !important;
  min-height:100vh !important;
  background-color:transparent !important;
}
.sidebar{
  position:sticky !important;
  top:20px !important;
  height:calc(100vh - 40px) !important;
  padding:18px !important;
  border:1px solid var(--line) !important;
  border-radius:30px !important;
  background:linear-gradient(180deg, var(--sidebar-top), var(--sidebar-bottom)) !important;
  box-shadow:var(--shell-shadow), var(--shell-ring) !important;
  color:var(--sidebar-text) !important;
  backdrop-filter:blur(18px) saturate(1.14) !important;
  -webkit-backdrop-filter:blur(18px) saturate(1.14) !important;
}
.brand{
  align-items:flex-start !important;
  gap:14px !important;
  margin-bottom:20px !important;
  padding:14px 16px !important;
  border:1px solid var(--line) !important;
  border-radius:22px !important;
  background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.06)) !important;
}
body.theme-light .brand{background:linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.66)) !important}
.brand-logo{
  width:54px !important;
  height:54px !important;
  padding:6px !important;
  border-radius:18px !important;
  background:rgba(255,255,255,.92) !important;
  box-shadow:0 10px 26px rgba(15,23,42,.12) !important;
}
.brand-name{font-size:20px !important;font-weight:850 !important;color:var(--sidebar-text) !important}
.brand-sub,.brand-byline{color:var(--muted) !important}
.nav{gap:10px !important;margin:8px 0 18px !important}
.nav-btn,.nav-section-btn,.nav-subbtn{
  border:1px solid transparent !important;
  border-radius:18px !important;
  background:var(--nav-bg) !important;
  color:var(--sidebar-text) !important;
  min-height:58px !important;
  padding:0 18px !important;
  font-weight:750 !important;
  transition:all .18s ease !important;
}
.nav-subbtn{
  min-height:46px !important;
  padding:0 16px !important;
  font-size:13px !important;
}
.nav-btn:hover,.nav-section-btn:hover,.nav-subbtn:hover{
  background:var(--nav-hover) !important;
  border-color:var(--line) !important;
  transform:translateY(-1px) !important;
}
.nav-btn.active,.nav-section-btn.active,.nav-subbtn.active{
  background:linear-gradient(135deg, var(--nav-active-start), var(--nav-active-end)) !important;
  color:var(--nav-active-text) !important;
  box-shadow:0 18px 36px rgba(37,99,235,.26) !important;
}
body.theme-dark .nav-btn.active,
body.theme-dark .nav-section-btn.active,
body.theme-dark .nav-subbtn.active{
  box-shadow:0 18px 36px rgba(124,92,255,.28) !important;
}
.nav-chevron{color:currentColor !important;opacity:.72}
.side-box{
  margin-top:auto !important;
  padding:16px !important;
  border-radius:20px !important;
  border:1px solid var(--line) !important;
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04)) !important;
  color:var(--sidebar-text) !important;
}
body.theme-light .side-box{background:linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.72)) !important}
.main{padding:0 4px 24px !important}
.background-controls{
  position:fixed !important;
  top:26px !important;
  right:28px !important;
  z-index:100 !important;
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  padding:8px !important;
  border:1px solid var(--line) !important;
  border-radius:20px !important;
  background:var(--panel-soft) !important;
  box-shadow:var(--shell-shadow-soft), var(--shell-ring) !important;
  backdrop-filter:blur(18px) !important;
  -webkit-backdrop-filter:blur(18px) !important;
}
.background-toggle{
  width:42px !important;
  min-width:42px !important;
  height:42px !important;
  min-height:42px !important;
  border-radius:14px !important;
}
.page-head{
  margin-bottom:18px !important;
  padding:24px 28px !important;
  border:1px solid var(--line) !important;
  border-radius:28px !important;
  background:var(--panel-strong) !important;
  box-shadow:var(--shell-shadow), var(--shell-ring) !important;
  backdrop-filter:blur(24px) !important;
  -webkit-backdrop-filter:blur(24px) !important;
}
.page-head h1{
  margin:0 !important;
  font-size:28px !important;
  line-height:1.04 !important;
  letter-spacing:-.03em !important;
  font-weight:850 !important;
  color:var(--text) !important;
}
.subtitle{
  display:block !important;
  margin-top:8px !important;
  color:var(--muted) !important;
  font-size:13px !important;
  line-height:1.5 !important;
}
.actions{gap:10px !important}
.panel,.report-wrap,.stat-card,.modal,.detail-panel,.workflow-company-card,.mapping-card,.provider-card,.company-overview-panel,.side-box,.report-toolbar-shell{
  border-radius:26px !important;
  border:1px solid var(--line) !important;
  background:var(--panel-strong) !important;
  box-shadow:var(--shell-shadow), var(--shell-ring) !important;
  backdrop-filter:blur(22px) !important;
  -webkit-backdrop-filter:blur(22px) !important;
}
.panel,.report-wrap,.mapping-card{padding:18px 20px !important}
.panel-title{
  font-size:18px !important;
  font-weight:840 !important;
  color:var(--text) !important;
  margin-bottom:12px !important;
}
.panel-title-row{margin-bottom:14px !important}
.stats-grid{gap:14px !important;margin-bottom:18px !important}
.stat-card{padding:18px 20px !important}
.stat-label{font-size:11px !important;color:var(--muted) !important}
.stat-value{font-size:22px !important;color:var(--text) !important}
.btn,.icon-btn,input,select,textarea{
  border-radius:16px !important;
  border:1px solid var(--line) !important;
  box-shadow:none !important;
}
.btn{
  min-height:42px !important;
  padding:0 16px !important;
  font-weight:760 !important;
}
.btn.primary{
  background:linear-gradient(135deg, var(--primary), var(--primary-strong)) !important;
  color:#fff !important;
  border-color:transparent !important;
  box-shadow:0 16px 28px rgba(59,130,246,.22) !important;
}
body.theme-dark .btn.primary{box-shadow:0 16px 28px rgba(124,92,255,.24) !important}
.btn.secondary,.icon-btn{
  background:rgba(255,255,255,.08) !important;
  color:var(--text) !important;
}
body.theme-light .btn.secondary,
body.theme-light .icon-btn{
  background:#ffffff !important;
}
.btn.small,.btn.btn-compact{
  min-height:34px !important;
  border-radius:12px !important;
  padding:0 10px !important;
}
input,select,textarea{
  min-height:42px !important;
  padding:10px 12px !important;
  background:rgba(255,255,255,.08) !important;
  color:var(--text) !important;
}
body.theme-light input,
body.theme-light select,
body.theme-light textarea{
  background:#ffffff !important;
}
input::placeholder,textarea::placeholder{color:var(--muted) !important}
.table-scroll,.mapping-workspace{
  border-radius:20px !important;
  border:1px solid var(--line) !important;
  background:rgba(255,255,255,.05) !important;
}
body.theme-light .table-scroll,
body.theme-light .mapping-workspace{background:rgba(255,255,255,.58) !important}
.grid,.report{border-collapse:separate !important;border-spacing:0 10px !important}
.grid th,.report th,.mapping-table th{
  background:transparent !important;
  color:var(--muted) !important;
  font-size:10.5px !important;
  letter-spacing:.06em !important;
  text-transform:uppercase !important;
}
.grid td,.report td{
  border-bottom:0 !important;
  color:var(--text) !important;
}
.grid tbody td,.report tbody td{
  background:rgba(255,255,255,.08) !important;
  border-top:1px solid var(--line) !important;
  border-bottom:1px solid var(--line) !important;
}
body.theme-light .grid tbody td,
body.theme-light .report tbody td{
  background:rgba(255,255,255,.82) !important;
}
.grid tbody td:first-child,.report tbody td:first-child{
  border-left:1px solid var(--line) !important;
  border-top-left-radius:14px !important;
  border-bottom-left-radius:14px !important;
}
.grid tbody td:last-child,.report tbody td:last-child{
  border-right:1px solid var(--line) !important;
  border-top-right-radius:14px !important;
  border-bottom-right-radius:14px !important;
}
.grid tbody tr:hover td,.report tbody tr:hover td{
  transform:translateY(-1px) !important;
  background:rgba(255,255,255,.14) !important;
}
body.theme-light .grid tbody tr:hover td,
body.theme-light .report tbody tr:hover td{
  background:#ffffff !important;
}
.pill,.workflow-pill,.status-badge,.gl-journey-chiprow span,.coa-overview-chiprow span,.currency-meta-strip span,.company-meta-strip span{
  border-radius:999px !important;
  border:1px solid var(--line) !important;
  background:rgba(255,255,255,.08) !important;
  color:var(--text) !important;
}
body.theme-light .pill,
body.theme-light .workflow-pill,
body.theme-light .status-badge,
body.theme-light .gl-journey-chiprow span,
body.theme-light .coa-overview-chiprow span,
body.theme-light .currency-meta-strip span,
body.theme-light .company-meta-strip span{
  background:#ffffff !important;
}
.report-toolbar-shell,.gl-journey-panel,.currency-hero-panel,.coa-overview-panel,.workflow-center-panel,.gl-import-guide{
  overflow:hidden !important;
}
.company-overview-hero,.gl-import-guide,.workflow-center-panel,.gl-journey-shell,.currency-hero-shell,.coa-overview-panel,.integration-hero{
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)) !important;
}
body.theme-light .company-overview-hero,
body.theme-light .gl-import-guide,
body.theme-light .workflow-center-panel,
body.theme-light .gl-journey-shell,
body.theme-light .currency-hero-shell,
body.theme-light .coa-overview-panel,
body.theme-light .integration-hero{
  background:linear-gradient(180deg, rgba(255,255,255,.66), rgba(255,255,255,.42)) !important;
}
.company-directory-note,.coa-guidance-strip,.preview-guidance,.gl-layout-note,.validation-box,.status,.mapping-coach-row,.ready-strip{
  border-radius:16px !important;
  border:1px solid var(--line) !important;
  background:rgba(255,255,255,.06) !important;
  color:var(--muted) !important;
}
body.theme-light .company-directory-note,
body.theme-light .coa-guidance-strip,
body.theme-light .preview-guidance,
body.theme-light .gl-layout-note,
body.theme-light .validation-box,
body.theme-light .status,
body.theme-light .mapping-coach-row,
body.theme-light .ready-strip{
  background:rgba(255,255,255,.74) !important;
}
.modal-head,.modal-foot{
  background:transparent !important;
  border-color:var(--line) !important;
}
.modal-backdrop{background:rgba(5,10,25,.54) !important}
.toast{
  border:1px solid var(--line) !important;
  background:var(--panel-strong) !important;
  color:var(--text) !important;
}
.report-filter-bar,.report-toolbar-shell{
  padding:12px !important;
}
body.theme-dark .report-toolbar-shell,
body.theme-dark .panel,
body.theme-dark .report-wrap{
  box-shadow:0 18px 42px rgba(1,6,20,.42), var(--shell-ring) !important;
}
@media (max-width:1100px){
  .app{grid-template-columns:1fr !important;padding:14px !important}
  .sidebar{position:relative !important;top:0 !important;height:auto !important}
  .background-controls{top:12px !important;right:12px !important}
}
@media (max-width:760px){
  .page-head{padding:18px 18px 16px !important}
  .page-head h1{font-size:24px !important}
  .sidebar,.panel,.report-wrap,.modal{border-radius:22px !important}
  .background-controls{gap:8px !important;padding:6px !important}
  .background-toggle{width:38px !important;min-width:38px !important;height:38px !important;min-height:38px !important}
}

/* ============================================================
   END-OF-FILE POLISH PACK
   - Status pills, empty states, mapping table refinements
   - Sidebar nav active indicator
   - Progress bars, dividers
   ============================================================ */

/* Status pill — semantic, drop-in */
.pill{
  display:inline-flex; align-items:center; gap:4px;
  padding: 3px 10px; border-radius: var(--radius-pill);
  font: 700 11px/1.4 Inter, Segoe UI, Arial, sans-serif;
  letter-spacing:.02em; text-transform:uppercase;
  border:1px solid transparent; white-space:nowrap;
}
.pill::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background: currentColor; opacity:.8;
}
.pill.is-ok      { background:var(--success-soft); color:var(--success-fg); border-color:rgba(22,163,74,.18); }
.pill.is-warning { background:var(--warning-soft); color:var(--warning-fg); border-color:rgba(217,119,6,.20); }
.pill.is-danger  { background:var(--danger-soft);  color:var(--danger-fg);  border-color:rgba(220,38,38,.20); }
.pill.is-info    { background:var(--info-soft);    color:#075985;           border-color:rgba(14,165,233,.18); }
.pill.is-neutral { background:#f1f5f9;             color:#334155;           border-color:#e2e8f0; }

/* Empty state component */
.empty-state{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding: 32px 24px; gap: 8px; text-align:center;
  border:1px dashed var(--border); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #fbfdff 0%, #f7f9fc 100%);
  color: var(--muted);
}
.empty-state__icon{
  width:44px; height:44px; border-radius: 12px;
  background: var(--primary-soft); color: var(--primary);
  display:inline-flex; align-items:center; justify-content:center;
  font-size: 22px; font-weight: 800;
}
.empty-state__title{ color: var(--text); font-weight: 800; font-size: var(--fs-md); }
.empty-state__hint{ font-size: var(--fs-sm); max-width: 480px; line-height: var(--lh); }
.empty-state .btn{ margin-top: 6px; }

/* Sidebar active indicator (subtle left bar) */
.nav-btn.active, .nav-section-btn.active, .nav-subbtn.active{
  position: relative;
}
.nav-btn.active::before, .nav-section-btn.active::before, .nav-subbtn.active::before{
  content:""; position:absolute; left:-4px; top:8px; bottom:8px;
  width:3px; border-radius:3px; background: var(--primary);
}

/* Progress bar (drop-in, generic) */
.progress{
  width:100%; height:6px; background:#e9eef6; border-radius:999px; overflow:hidden;
}
.progress > span{
  display:block; height:100%;
  background: linear-gradient(90deg, var(--primary) 0%, #60a5fa 100%);
  border-radius:999px;
  transition: width var(--dur) var(--ease-out);
}

/* Sticky-aware section divider */
hr.divider{
  border:0; border-top:1px solid var(--border-soft); margin: 12px 0;
}

/* Mapping table — denser, breathable, clearer hover */
.mapping-table th, .mapping-table td{
  padding: 8px 10px; vertical-align: middle;
}
.mapping-table tbody tr.selected{ background: var(--primary-50) !important; }
.mapping-table .status-cell{
  display:inline-flex; gap:6px; align-items:center;
}

/* Card-like grouping */
.card{
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 14px;
  transition: box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.card:hover{ box-shadow: var(--shadow-md); }

/* Spinner (generic, drop-in) */
.spinner{
  display:inline-block; width:14px; height:14px;
  border:2px solid rgba(29,78,216,.22);
  border-top-color: var(--primary);
  border-radius:50%;
  animation: spin .9s linear infinite;
  vertical-align: -2px;
}
.spinner.lg{ width:22px; height:22px; border-width:3px; }
@keyframes spin{ to { transform: rotate(360deg); } }

/* "Working" inline indicator for buttons */
.btn.is-working{ pointer-events:none; opacity:.85; }
.btn.is-working::after{
  content:""; display:inline-block; width:12px; height:12px; margin-left:8px; vertical-align:-2px;
  border:2px solid rgba(255,255,255,.35); border-top-color:#fff; border-radius:50%;
  animation: spin .8s linear infinite;
}
.btn.secondary.is-working::after{ border-color: rgba(29,78,216,.25); border-top-color: var(--primary); }

/* Subtle badge for counts */
.badge-count{
  display:inline-flex; align-items:center; justify-content:center;
  min-width: 20px; height:20px; padding: 0 6px; border-radius: 999px;
  background: var(--primary-soft); color: var(--primary-700);
  font: 800 11px/1 Inter, Segoe UI, Arial, sans-serif;
}

/* ============================================================
   CRITICAL FIXES — must override earlier rules.
   These come last in the cascade so specificity isn't required.
   ============================================================ */

/* ----------------------------------------------------------
   1) Floating background controls were oversized and blocking
   clicks on right-side buttons (Approve All, Save, search box).
   Shrink + tuck above the topbar so they never cover content.
   ---------------------------------------------------------- */
.background-controls{
  position: fixed !important;
  top: 6px !important;
  right: 10px !important;
  z-index: 1000 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 3px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.85) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.2) !important;
  backdrop-filter: blur(12px) saturate(1.2) !important;
  border: 1px solid rgba(208,216,230,.6) !important;
  box-shadow: 0 6px 16px rgba(15,23,42,.08) !important;
}
.background-controls > .btn.icon-only,
.background-controls > .background-toggle{
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  border: 0 !important;
  background: transparent !important;
  color: #475569 !important;
}
.background-controls > .btn.icon-only:hover,
.background-controls > .background-toggle:hover{
  background: var(--primary-soft) !important;
  color: var(--primary) !important;
  transform: none !important;   /* don't lift inside the pill */
  box-shadow: none !important;
}
.background-controls > .btn.icon-only svg,
.background-controls > .background-toggle svg{
  width: 14px !important;
  height: 14px !important;
}

/* Reserve a sliver of top space so the page-head never visually
   collides with the floating pill. */
.main, .app .main { padding-top: 12px !important; }

/* ----------------------------------------------------------
   2) Company Overview modal header — clean, no overlap with
   the hero section. Make the modal head clearly subordinate.
   ---------------------------------------------------------- */
.company-overview-modal{
  border-radius: 16px !important;
  overflow: hidden;
}
.company-overview-modal .modal-head{
  position: sticky; top: 0; z-index: 5;
  background: #ffffff !important;
  padding: 14px 20px !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: 0 1px 0 rgba(15,23,42,.04);
  align-items: center !important;
}
.company-overview-modal .modal-head > div:first-child{
  display:flex; flex-direction:column; gap:2px; min-width:0;
}
.company-overview-modal .modal-head h3{
  font-size: 11px !important;
  font-weight: 800 !important;
  color: #64748b !important;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 0 !important;
  line-height: 1.2 !important;
}
.company-overview-modal .modal-head .muted{
  font-size: 12px !important;
  line-height: 1.3 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.company-overview-modal .modal-body{
  padding-top: 16px !important;
}
.company-overview-modal .company-overview-hero{
  display:grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 16px !important;
  align-items: start !important;
  padding: 4px 4px 14px !important;
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 14px;
}
.company-overview-modal .company-overview-identity{
  display:flex !important; gap:14px !important; align-items:center !important; min-width:0;
}
.company-overview-modal .company-overview-name{
  font-size: 22px !important; font-weight: 800 !important; line-height: 1.15 !important;
  letter-spacing: -.015em;
}
.company-overview-modal .company-overview-kicker{
  font-size: 10px !important; font-weight: 800; color: var(--primary);
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: 3px;
}
.company-overview-modal .company-overview-submeta{
  color: var(--muted); font-size: 12px; margin-top: 2px;
}
.company-overview-modal .icon-btn{
  width: 32px; height: 32px;
  display:inline-flex; align-items:center; justify-content:center;
  background: #f1f5f9 !important; color: #334155 !important;
  border-radius: 999px !important; font-size: 16px !important;
  border: 0 !important;
}
.company-overview-modal .icon-btn:hover{ background: #e2e8f0 !important; }

/* Action buttons row (Logo, edit, stats, Company CoA, Delete) — make
   them consistent and well-spaced. */
.company-overview-modal .company-overview-actions{
  display:flex !important; flex-wrap:wrap !important; gap:8px !important;
  align-items:center !important;
}
.company-overview-modal .company-overview-actions .btn{
  border-radius: 999px !important;
  height: 34px;
  display:inline-flex; align-items:center; gap:6px;
  font-size: 12.5px;
  padding: 0 14px;
}
.company-overview-modal .company-overview-actions .btn.icon-only{
  width: 34px; min-width: 34px; height: 34px; padding: 0;
}

/* ----------------------------------------------------------
   3) Sidebar — prevent label overflow on long names like
   "Companies and Groups", "Cash Flow Settings", etc.
   ---------------------------------------------------------- */
.sidebar{ overflow-y: auto; overflow-x: hidden; }
.nav-btn, .nav-section-btn, .nav-subbtn{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
}
.nav-section-btn{ justify-content: space-between; }
.nav-section-btn > span:first-child{
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.nav-subbtn{
  font-size: 12.5px;
  padding: 8px 10px !important;
}
/* Ensure the sidebar can fit a touch more text by tightening padding */
.sidebar{ padding: 16px 14px !important; }

/* ----------------------------------------------------------
   4) Higher-fidelity ("4K-feel") rendering polish
   ---------------------------------------------------------- */
html{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11", "ss01";
}
body{
  background-image:
    radial-gradient(1200px 600px at 80% -10%, rgba(219,234,254,.45), transparent 60%),
    radial-gradient(900px 500px at -10% 100%, rgba(238,242,255,.55), transparent 55%);
}
/* Crisper borders on hi-DPI displays (where a 1px border can look fuzzy) */
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi){
  .panel, .grid, .card, .modal, .stat-card, .side-box, .empty-state{
    border-width: 1px;
    box-shadow:
      0 0 0 0.5px rgba(15,23,42,.04),
      var(--shadow);
  }
  .stat-value, .panel-title, .brand-name, .report-title, .gl-journey-title, h1, h2, h3{
    -webkit-font-smoothing: subpixel-antialiased;
  }
}

/* Sharper tables — denser baseline + hairline dividers */
.grid th, .grid td{
  border-bottom-color: rgba(208,216,230,.6) !important;
}
.grid.compact th, .grid.compact td{ font-size: 12.5px; }

/* Sharper inputs — better contrast border, snappier focus */
input, select, textarea{
  border-color: #d6dde9 !important;
  background: #fff !important;
}
input:focus, select:focus, textarea:focus{
  border-color: #80a6ff !important;
  box-shadow: 0 0 0 3px rgba(29,78,216,.18) !important;
}
/* Native select arrow polish: hide default ugly arrow on Chrome where possible */
select{
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 12px !important;
  padding-right: 30px !important;
}

/* Coa mapping selects — make them feel like a single connected workflow */
.coa-select{
  height: 34px;
  border-radius: 8px !important;
  font-weight: 600;
  font-size: 12.5px;
  background-color: #fff !important;
}
.coa-select:disabled{
  background-color: #f8fafc !important;
  color: #94a3b8 !important;
  cursor: not-allowed;
}

/* "Approve" row button — larger tap target, clearer affordance */
.coa-unmapped-grid td .btn.small.primary,
.coa-grid td .btn.small.primary{
  height: 32px; padding: 0 14px; border-radius: 8px;
  font-weight: 800; letter-spacing: .01em;
}

/* Search inputs in section header — give them more room and a search icon */
.section-headbar input[placeholder*="Search"],
.section-headbar input[placeholder*="search"]{
  min-width: 220px; padding-left: 32px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='m21 21-4.3-4.3'/></svg>");
  background-repeat: no-repeat;
  background-position: 10px center;
  background-size: 14px;
}

/* "Logo" placeholder in modal — make it actually look like a logo slot */
.company-overview-modal .company-overview-actions > .btn:first-child{
  background: linear-gradient(135deg, #eff6ff, #dbeafe) !important;
  color: var(--primary-700) !important;
  border: 1px dashed rgba(29,78,216,.35) !important;
}

/* Brand area in sidebar — ensure no overflow even on dense font hinting */
.brand-copy{ min-width: 0; overflow: hidden; }
.brand-name, .brand-sub, .brand-byline{
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}

/* ----------------------------------------------------------
   5) Page-head polish so it doesn't tangle with floating pill
   ---------------------------------------------------------- */
.page-head{
  padding-right: 110px !important;  /* keep title row clear of the pill */
}
.page-head .actions{ row-gap: 8px; }

/* Toasts must stay below the floating pill, not above it */
.toast-viewport{ z-index: 900 !important; top: 56px !important; }

/* ============================================================
   ⬛ DESIGN PASS v2
   - Baked-in 70% scale so the app feels denser at native zoom
   - Vivid, layered background so panels visibly pop
   - Glassy translucent panels with stronger contrast
   - Color-coded statement & status badges
   - Polished company overview modal hero
   - Tighter, modern toolbar/button positions
   ============================================================ */

/* ---------- 1) DENSITY (replaces fragile CSS zoom) ----------
   Earlier we baked-in `zoom: 0.7` on <html>. That broke Chrome's
   native <select> popup hit-testing and modal `vh` math — which is
   why the unmapped section appeared "stuck" (clicks were landing in
   the wrong place). Instead we now use proper density tokens: a
   smaller base font, tighter spacing, and compact controls. The app
   still feels 70%-dense, but every form control behaves normally. */
:root{
  --app-density: 0.85; /* still adjustable for future tuning */
}
html{
  font-size: 14px;  /* base rem step (was 16) — global tighter typography */
}
body{
  font-size: 12.5px;
  line-height: 1.45;
}

/* ---------- 2) VIVID, LAYERED BACKGROUND ---------- */
body{
  background:
    radial-gradient(1100px 700px at 12% -8%,  rgba(165,196,255,.55), transparent 55%),
    radial-gradient(1300px 800px at 110% 5%,  rgba(255,205,225,.40), transparent 60%),
    radial-gradient(1100px 700px at 50% 110%, rgba(199,210,255,.55), transparent 60%),
    linear-gradient(180deg, #eef3fb 0%, #f5f3ff 50%, #fff5f7 100%) !important;
  background-attachment: fixed !important;
}
body.theme-dark{
  background:
    radial-gradient(1200px 700px at 10% 0%,   rgba(99,102,241,.30), transparent 55%),
    radial-gradient(1300px 800px at 110% 10%, rgba(168,85,247,.25), transparent 55%),
    radial-gradient(1100px 700px at 50% 110%, rgba(56,189,248,.18), transparent 60%),
    linear-gradient(180deg, #0b1024 0%, #11132f 50%, #0a0e22 100%) !important;
}
body.theme-dark{ color:#e2e8f0; }
body.theme-dark .muted{ color:#94a3b8; }

/* ---------- 3) GLASSY PANELS — strong contrast vs background ---------- */
.panel, .stat-card, .side-box, .modal, .report-wrap, .card, .empty-state{
  background: linear-gradient(180deg, rgba(255,255,255,.78) 0%, rgba(255,255,255,.62) 100%) !important;
  border: 1px solid rgba(255,255,255,.85) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.4) !important;
  backdrop-filter: blur(18px) saturate(1.4) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 0 0 1px rgba(15,23,42,.05),
    0 16px 40px rgba(15,23,42,.10) !important;
  border-radius: 14px !important;
}
body.theme-dark .panel, body.theme-dark .stat-card, body.theme-dark .side-box,
body.theme-dark .modal, body.theme-dark .report-wrap, body.theme-dark .card,
body.theme-dark .empty-state{
  background: linear-gradient(180deg, rgba(30,34,68,.55) 0%, rgba(20,24,52,.45) 100%) !important;
  border: 1px solid rgba(148,163,184,.18) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 0 0 1px rgba(99,102,241,.10),
    0 22px 50px rgba(0,0,0,.45) !important;
}

/* Sidebar gets the same treatment so it feels integrated */
.sidebar{
  background: linear-gradient(180deg, rgba(255,255,255,.82) 0%, rgba(255,255,255,.65) 100%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.3) !important;
  backdrop-filter: blur(20px) saturate(1.3) !important;
  border-right: 1px solid rgba(255,255,255,.7) !important;
  box-shadow: 1px 0 0 rgba(15,23,42,.04), 4px 0 24px rgba(15,23,42,.04) !important;
}
body.theme-dark .sidebar{
  background: linear-gradient(180deg, rgba(20,24,52,.65) 0%, rgba(15,18,42,.55) 100%) !important;
  border-right: 1px solid rgba(148,163,184,.12) !important;
}

/* Page-head gets a glassy hero treatment */
.page-head{
  background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.55)) !important;
  border: 1px solid rgba(255,255,255,.9) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.4) !important;
  backdrop-filter: blur(20px) saturate(1.4) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 12px 28px rgba(15,23,42,.06) !important;
  border-radius: 16px !important;
}
body.theme-dark .page-head{
  background: linear-gradient(180deg, rgba(30,34,68,.55), rgba(20,24,52,.45)) !important;
  border: 1px solid rgba(148,163,184,.18) !important;
}

/* ---------- 4) COA / TABLE ROWS — alive, not flat ---------- */
.coa-item-row, .coa-grid tbody tr, .grid tbody tr{
  transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.coa-item-row:nth-child(even), .coa-grid tbody tr:nth-child(even){
  background: rgba(247,250,255,.55);
}
.coa-item-row:hover, .coa-grid tbody tr:hover, .grid tbody tr:hover{
  background: linear-gradient(90deg, rgba(219,234,254,.40), rgba(238,242,255,.45)) !important;
}

/* Color-coded Statement select — P&L = blue, BS = violet */
select.coa-select{
  border: 1px solid rgba(208,216,230,.7) !important;
  background-color: rgba(255,255,255,.85) !important;
  font-weight: 600;
  transition: all var(--dur-fast) var(--ease-out);
}
select.coa-select:hover:not(:disabled){
  border-color: #c7d3eb !important;
  background-color: #fff !important;
}
/* Visual rhythm — each step in the workflow gets a subtle accent border */
.coa-grid tbody td:nth-child(2) select.coa-select{ border-left: 3px solid #3b82f6 !important; }
.coa-grid tbody td:nth-child(3) select.coa-select{ border-left: 3px solid #8b5cf6 !important; }
.coa-grid tbody td:nth-child(4) select.coa-select{ border-left: 3px solid #06b6d4 !important; }
.coa-grid tbody td:nth-child(5) select.coa-select{ border-left: 3px solid #10b981 !important; }

/* Status / mode badges */
.status-badge{
  display:inline-flex; align-items:center; gap:5px;
  padding: 4px 10px; border-radius: 999px;
  font: 800 10.5px/1.2 Inter, Segoe UI, Arial, sans-serif;
  letter-spacing: .04em; text-transform: uppercase;
  border: 1px solid transparent;
}
.status-badge::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background: currentColor; opacity:.85;
}
.status-badge.suggested,
.status-badge.editable,
.status-badge[class*="suggest"]{
  background: linear-gradient(180deg, #dcfce7, #bbf7d0);
  color: #14532d;
  border-color: rgba(22,163,74,.25);
}
.status-badge.draft,
.status-badge.locked,
.status-badge[class*="lock"]{
  background: linear-gradient(180deg, #fef3c7, #fde68a);
  color: #92400e;
  border-color: rgba(217,119,6,.25);
}
.status-badge.approved, .status-badge.success{
  background: linear-gradient(180deg, #cffafe, #a5f3fc);
  color: #155e75; border-color: rgba(8,145,178,.25);
}

/* Make COA item cells more readable */
.coa-item-cell{ padding: 10px 12px !important; }
.coa-item-cell .coa-name-input{
  font-weight: 700; border: 1px solid transparent !important;
  background: transparent !important; padding: 6px 8px !important;
  border-radius: 6px; transition: all var(--dur-fast) var(--ease-out);
}
.coa-item-cell .coa-name-input:hover:not(:disabled){
  background: rgba(241,245,249,.7) !important;
}
.coa-item-cell .coa-name-input:focus{
  background: #fff !important;
  border-color: #80a6ff !important;
  box-shadow: 0 0 0 3px rgba(29,78,216,.18) !important;
}
.coa-item-row-meta{
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}

/* Global CoA toolbar */
.global-coa-headbar{
  display:flex; align-items:center; gap:14px; padding: 14px 16px;
  border-bottom: 1px solid rgba(208,216,230,.5);
}
#coaSearch{
  flex: 1; height: 40px; padding-left: 38px !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='m21 21-4.3-4.3'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: 12px center !important;
  background-color: rgba(255,255,255,.7) !important;
  font-size: 13.5px;
}
.coa-filter-meta{ font-size: 12px; color: var(--muted); white-space: nowrap; }
/* CoA search row: the 3-mode search added a selector next to the search box.
   Keep the mode selector, search field and company filter the SAME height/shape
   and stop the search field from stretching to the full width. */
.global-coa-headbar{ justify-content: flex-start; gap: 10px; }
.global-coa-headbar #coaSearch,
.global-coa-headbar #coaSearchMode,
.global-coa-headbar #coaCompanyFilter{
  height: 40px; box-sizing: border-box; border-radius: 10px; font-size: 13.5px;
  border: 1px solid rgba(208,216,230,.8);
  background-color: rgba(255,255,255,.7);
}
.global-coa-headbar #coaSearchMode,
.global-coa-headbar #coaCompanyFilter{
  flex: 0 0 auto; width: auto; min-width: 148px; padding: 0 12px;
}
.global-coa-headbar #coaSearch{ flex: 1 1 240px; max-width: 480px; }
/* Narrow viewports: keep wide directory tables (companies / groups) INSIDE their
   panel — scroll horizontally instead of spilling past the rounded card and
   overlapping neighbouring content. Specific enough to beat
   `.companies-grid .table-scroll{overflow:visible!important}`. */
.companies-grid .table-scroll.compact-company-table,
.table-scroll.compact-company-table{
  overflow-x: auto !important; overflow-y: visible; max-width: 100%;
}
/* ---------- 5) COMPANY OVERVIEW MODAL — proper hero design ---------- */
.company-overview-modal{
  width: min(960px, 96vw) !important;
  border-radius: 20px !important;
}
.company-overview-modal .modal-head{
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.78)) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.3) !important;
  backdrop-filter: blur(20px) saturate(1.3) !important;
  padding: 14px 20px !important;
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 12px;
  align-items: center !important;
  border-bottom: 1px solid rgba(208,216,230,.5) !important;
}
.company-overview-modal .modal-head h3{
  font-size: 11px !important; font-weight: 800 !important;
  color: #64748b !important; text-transform: uppercase; letter-spacing: .12em;
  margin: 0 0 2px 0 !important;
}
.company-overview-modal .modal-head .muted{
  font-size: 12.5px !important; color: #475569 !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 420px;
}
.company-overview-modal .modal-head > button.icon-btn{
  width: 34px; height: 34px; border-radius: 999px;
  background: rgba(241,245,249,.85) !important;
  color: #334155 !important; font-size: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(208,216,230,.6) !important;
  flex-shrink: 0;
}
.company-overview-modal .modal-head > button.icon-btn:hover{
  background: rgba(226,232,240,.95) !important;
}

.company-overview-modal .modal-body{
  padding: 20px 24px 24px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.6) 0%, rgba(245,247,255,.5) 100%) !important;
}

/* Hero — grid with identity on left, action buttons on right */
.company-overview-modal .company-overview-hero{
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 18px !important;
  align-items: center !important;
  padding: 18px 20px !important;
  margin-bottom: 18px !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, rgba(239,246,255,.85) 0%, rgba(237,233,254,.7) 100%) !important;
  border: 1px solid rgba(186,202,255,.45) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 10px 24px rgba(29,78,216,.08) !important;
}
.company-overview-modal .company-overview-identity{
  display: flex !important; gap: 16px !important; align-items: center !important; min-width: 0;
}
.company-overview-modal .company-overview-name{
  font-size: 26px !important; font-weight: 800 !important;
  letter-spacing: -.02em; line-height: 1.1 !important;
  color: #0f172a;
}
.company-overview-modal .company-overview-kicker{
  font-size: 10.5px !important; color: var(--primary) !important;
  letter-spacing: .12em; text-transform: uppercase; font-weight: 800;
  margin-bottom: 4px !important;
}
.company-overview-modal .company-overview-submeta{
  margin-top: 4px !important; color: #64748b; font-size: 12.5px;
}
/* The "logo" placeholder — turn it into a circular avatar with initial */
.company-overview-modal .company-overview-actions{
  display: inline-flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: center !important;
  justify-content: flex-end;
  max-width: 360px;
}
.company-overview-modal .company-overview-actions .btn{
  height: 36px;
  padding: 0 14px;
  border-radius: 10px !important;
  font-size: 12.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.company-overview-modal .company-overview-actions .btn.icon-only{
  width: 36px; min-width: 36px; padding: 0;
}
.company-overview-modal .company-overview-actions .btn.primary{
  background: linear-gradient(180deg, #2563eb, #1d4ed8) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 6px 14px rgba(29,78,216,.30) !important;
}
.company-overview-modal .company-overview-actions .btn.secondary{
  background: rgba(255,255,255,.85) !important;
  border: 1px solid rgba(208,216,230,.7) !important;
}
.company-overview-modal .company-overview-actions .btn.secondary:hover{
  background: #fff !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}
/* Logo button — make it visibly different (it's a placeholder slot) */
.company-overview-modal .company-overview-actions > .btn:first-child{
  background: linear-gradient(135deg, #ffffff, #eff6ff) !important;
  border: 1px dashed rgba(29,78,216,.45) !important;
  color: var(--primary-700) !important;
}

/* Stats grid in modal */
.company-overview-modal .company-overview-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

/* ---------- 6) BUTTON POLISH — global ---------- */
.btn{
  border-radius: 10px !important;
  font-weight: 700;
  letter-spacing: -.005em;
}
.btn.primary{
  background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%) !important;
  color: #fff !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 6px 16px rgba(29,78,216,.28) !important;
  border: 0 !important;
}
.btn.primary:hover:not(:disabled){
  background: linear-gradient(180deg, #1d4ed8 0%, #1e40af 100%) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 10px 22px rgba(29,78,216,.34) !important;
}
.btn.secondary{
  background: rgba(255,255,255,.78) !important;
  border: 1px solid rgba(208,216,230,.7) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.btn.secondary:hover:not(:disabled){
  background: #fff !important;
  border-color: rgba(29,78,216,.35) !important;
  color: var(--primary-700) !important;
}

/* Icon-only buttons — properly sized and rounded across the app */
.btn.icon-only{
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  display: inline-flex;
  align-items: center; justify-content: center;
  border-radius: 999px !important;
}
.btn.icon-only.btn-compact{
  width: 30px !important;
  min-width: 30px !important;
  height: 30px !important;
}

/* Toolbar action rows in page heads — consistent spacing */
.page-head .actions{
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}

/* Stat card — vibrant value */
.stat-value{
  background: linear-gradient(180deg, #0f172a 0%, #334155 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 800 !important;
  letter-spacing: -.02em;
}

/* ---------- 7) DARK THEME tweaks ---------- */
body.theme-dark .grid th{ background: rgba(15,18,42,.5) !important; color:#cbd5e1 !important; }
body.theme-dark .grid td{ border-bottom-color: rgba(148,163,184,.12) !important; }
body.theme-dark .coa-item-row:nth-child(even),
body.theme-dark .coa-grid tbody tr:nth-child(even){ background: rgba(255,255,255,.025); }
body.theme-dark select.coa-select{
  background-color: rgba(15,18,42,.5) !important;
  color: #e2e8f0 !important;
  border-color: rgba(148,163,184,.2) !important;
}
body.theme-dark .nav-btn, body.theme-dark .nav-section-btn, body.theme-dark .nav-subbtn{
  color: #cbd5e1 !important;
}
body.theme-dark .nav-btn:hover, body.theme-dark .nav-btn.active,
body.theme-dark .nav-section-btn:hover, body.theme-dark .nav-section-btn.active{
  background: rgba(99,102,241,.18) !important;
  color: #c7d2fe !important;
}
body.theme-dark .btn.secondary{
  background: rgba(30,34,68,.6) !important;
  border-color: rgba(148,163,184,.2) !important;
  color: #cbd5e1 !important;
}
body.theme-dark .background-controls{
  background: rgba(20,24,52,.7) !important;
  border-color: rgba(148,163,184,.18) !important;
}
body.theme-dark .background-controls > .btn.icon-only,
body.theme-dark .background-controls > .background-toggle{
  color: #cbd5e1 !important;
}

/* ---------- 8) Sidebar nav — clearer active state ---------- */
.nav-btn.active, .nav-section-btn.active{
  background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%) !important;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(29,78,216,.32) !important;
  border-radius: 12px !important;
}
.nav-btn.active::before, .nav-section-btn.active::before{ display: none !important; }
.nav-subbtn.active{
  background: rgba(219,234,254,.85) !important;
  color: var(--primary-700) !important;
  border-radius: 10px !important;
}

/* Brand box becomes a small card */
.brand{
  padding: 12px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 14px;
  box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 8px 16px rgba(15,23,42,.05);
  margin-bottom: 16px !important;
}
body.theme-dark .brand{
  background: rgba(30,34,68,.5);
  border-color: rgba(148,163,184,.18);
  box-shadow: 0 8px 16px rgba(0,0,0,.3);
}

/* ---------- 9) Modal-shell overlay glass ---------- */
.modal-backdrop{
  background: rgba(15,23,42,.32) !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.modal{
  border-radius: 18px !important;
  box-shadow: 0 30px 80px rgba(15,23,42,.28), 0 1px 0 rgba(255,255,255,.9) inset !important;
}

/* ---------- 10) Reduce !important conflicts: ensure side-box still glassy ---------- */
body.theme-light .side-box,
.side-box{
  background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.55)) !important;
  border: 1px solid rgba(255,255,255,.85) !important;
}

/* ---------- 11) Help button polish ---------- */
.icon-btn{
  border-radius: 999px !important;
  background: rgba(255,255,255,.7) !important;
  border: 1px solid rgba(208,216,230,.6) !important;
  transition: all var(--dur-fast) var(--ease-out);
}
.icon-btn:hover{
  background: #fff !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}

/* ============================================================
   🟦 DESIGN PASS v3
   - Density via real CSS sizing (no fragile zoom)
   - Dark-mode contrast pass (selects/inputs visible)
   - Modal proper scrolling + sticky head + sticky foot
   - Company-overview hero with proper button grid
   - Compact, dense layout across the app
   ============================================================ */

/* ---------- A) DARK MODE CONTRAST (was broken) ---------- */
/* Inputs, selects, textareas — make text legible and inputs visible */
body.theme-dark input,
body.theme-dark select,
body.theme-dark textarea{
  background-color: rgba(15,18,42,.65) !important;
  color: #e2e8f0 !important;
  border-color: rgba(148,163,184,.30) !important;
}
body.theme-dark input::placeholder,
body.theme-dark textarea::placeholder{ color: #94a3b8 !important; }
body.theme-dark select{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
}
body.theme-dark select option{
  background-color: #11132f !important;
  color: #e2e8f0 !important;
}
body.theme-dark input:focus,
body.theme-dark select:focus,
body.theme-dark textarea:focus{
  border-color: #818cf8 !important;
  box-shadow: 0 0 0 3px rgba(129,140,248,.25) !important;
  background-color: rgba(15,18,42,.85) !important;
}
/* Date inputs — native calendar picker uses dark scheme */
body.theme-dark input[type="date"],
body.theme-dark input[type="datetime-local"],
body.theme-dark input[type="time"]{
  color-scheme: dark;
}
/* Labels in dark mode */
body.theme-dark label, body.theme-dark .muted, body.theme-dark .stat-label,
body.theme-dark .panel-title, body.theme-dark .subtitle{
  color: #cbd5e1 !important;
}
body.theme-dark .panel-title, body.theme-dark h1, body.theme-dark h2, body.theme-dark h3,
body.theme-dark .stat-value, body.theme-dark .report-title{
  color: #f1f5f9 !important;
}
/* Filter pill row in Reports — strong contrast */
body.theme-dark .toolbar select,
body.theme-dark .actions select,
body.theme-dark .date-filter input{
  background-color: rgba(30,34,68,.85) !important;
  color: #f1f5f9 !important;
  border-color: rgba(148,163,184,.25) !important;
  font-weight: 600;
}
/* Report headers in dark */
body.theme-dark .report{ color: #e2e8f0 !important; }
body.theme-dark .report th{ color: #94a3b8 !important; }
body.theme-dark .report td{ border-bottom-color: rgba(148,163,184,.12) !important; }
body.theme-dark .section-row td{ background: rgba(99,102,241,.08) !important; color: #e2e8f0 !important; }
/* Status badges contrast in dark */
body.theme-dark .status-badge.suggested,
body.theme-dark .status-badge.editable{
  background: linear-gradient(180deg, rgba(34,197,94,.18), rgba(22,163,74,.10)) !important;
  color: #86efac !important;
  border-color: rgba(34,197,94,.35) !important;
}
body.theme-dark .status-badge.draft,
body.theme-dark .status-badge.locked{
  background: linear-gradient(180deg, rgba(245,158,11,.22), rgba(217,119,6,.12)) !important;
  color: #fcd34d !important;
  border-color: rgba(245,158,11,.4) !important;
}
/* Pill / chip contrast */
body.theme-dark .pill{ color: #e2e8f0; }
body.theme-dark .pill.is-neutral{
  background: rgba(148,163,184,.18) !important;
  border-color: rgba(148,163,184,.25) !important;
  color: #cbd5e1 !important;
}
/* Tables — dark mode legible */
body.theme-dark .grid th{
  background: rgba(15,18,42,.7) !important;
  color: #cbd5e1 !important;
  border-bottom-color: rgba(148,163,184,.18) !important;
}
body.theme-dark .grid td{ color: #e2e8f0 !important; }
/* Modal head in dark */
body.theme-dark .modal-head{
  background: rgba(20,24,52,.85) !important;
  border-bottom-color: rgba(148,163,184,.18) !important;
}
body.theme-dark .modal-foot{
  background: rgba(20,24,52,.85) !important;
  border-top-color: rgba(148,163,184,.18) !important;
}
body.theme-dark .icon-btn{
  background: rgba(30,34,68,.7) !important;
  border-color: rgba(148,163,184,.25) !important;
  color: #cbd5e1 !important;
}
body.theme-dark .icon-btn:hover{
  background: rgba(99,102,241,.25) !important;
  color: #c7d2fe !important;
}
body.theme-dark .nav-subbtn.active{
  background: rgba(99,102,241,.22) !important;
  color: #c7d2fe !important;
}
body.theme-dark .brand-name{ color: #f1f5f9 !important; }
body.theme-dark .brand-sub, body.theme-dark .brand-byline{ color: #94a3b8 !important; }

/* ---------- B) MODAL SCROLLING — sticky head & foot, scrollable body ---------- */
.modal{
  display: flex !important;
  flex-direction: column !important;
  max-height: min(86vh, 800px) !important;
  overflow: hidden !important;  /* the body scrolls, not the modal */
  width: min(960px, 96vw) !important;
}
.modal-head{
  flex: 0 0 auto !important;
  position: relative !important;   /* sticky no longer needed; body scrolls */
}
.modal-body{
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  min-height: 0 !important;
}
.modal-foot{
  flex: 0 0 auto !important;
  position: relative !important;
  border-top: 1px solid var(--border) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(248,250,253,.95)) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  padding: 12px 18px !important;
}

/* ---------- C) COMPANY OVERVIEW — compact hero + icon action strip ---------- */
.company-overview-modal{
  width: min(880px, 96vw) !important;
}
.company-overview-modal .company-overview-hero{
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 12px !important;
  align-items: center !important;
  padding: 12px 14px !important;
  margin-bottom: 12px !important;
  border-radius: 12px !important;
  min-height: 0 !important;
  background: linear-gradient(135deg, rgba(239,246,255,.85) 0%, rgba(237,233,254,.7) 100%) !important;
  border: 1px solid rgba(186,202,255,.45) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 6px 16px rgba(29,78,216,.06) !important;
}
.company-overview-modal .company-overview-identity{
  gap: 12px !important;
  align-items: center !important;
}
.company-overview-modal .company-overview-name{
  font-size: 19px !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
  letter-spacing: -.015em;
}
.company-overview-modal .company-overview-kicker{
  font-size: 9.5px !important;
  margin-bottom: 2px !important;
}
.company-overview-modal .company-overview-submeta{
  font-size: 11.5px !important;
  margin-top: 2px !important;
}
/* Icon action strip — compact horizontal row */
.company-overview-modal .company-overview-actions-icons{
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  align-items: center !important;
  justify-content: flex-end;
}
.company-overview-modal .company-overview-actions-icons .btn,
.company-overview-modal .company-overview-actions-icons .btn.icon-only{
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  border-radius: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255,255,255,.9) !important;
  border: 1px solid rgba(208,216,230,.7) !important;
  color: #334155 !important;
  cursor: pointer;
}
.company-overview-modal .company-overview-actions-icons .btn:hover{
  background: #fff !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(29,78,216,.18);
}
.company-overview-modal .company-overview-actions-icons .btn svg{
  width: 16px !important;
  height: 16px !important;
}
.company-overview-modal .company-overview-actions-icons .btn.company-overview-delete{
  color: #b91c1c !important;
}
.company-overview-modal .company-overview-actions-icons .btn.company-overview-delete:hover{
  background: #fef2f2 !important;
  border-color: #dc2626 !important;
  color: #b91c1c !important;
  box-shadow: 0 6px 14px rgba(220,38,38,.22);
}
.company-overview-modal .company-overview-actions-icons .company-logo-action{
  border-style: dashed !important;
  border-color: rgba(29,78,216,.45) !important;
  color: var(--primary-700) !important;
  background: linear-gradient(135deg, #ffffff, #eff6ff) !important;
}
.company-overview-modal .company-overview-actions-icons .company-logo-action input[type="file"]{
  display: none;
}

/* Dark mode tints */
body.theme-dark .company-overview-modal .company-overview-hero{
  background: linear-gradient(135deg, rgba(49,46,129,.45) 0%, rgba(67,56,202,.35) 100%) !important;
  border-color: rgba(99,102,241,.30) !important;
}
body.theme-dark .company-overview-modal .company-overview-name{ color: #f1f5f9 !important; }
body.theme-dark .company-overview-modal .company-overview-actions-icons .btn{
  background: rgba(30,34,68,.7) !important;
  border-color: rgba(148,163,184,.25) !important;
  color: #cbd5e1 !important;
}
body.theme-dark .company-overview-modal .company-overview-actions-icons .btn:hover{
  background: rgba(99,102,241,.30) !important;
  border-color: #818cf8 !important;
  color: #c7d2fe !important;
}

/* Modal body padding compact too */
.company-overview-modal .modal-body{
  padding: 14px 16px 18px !important;
}
.company-overview-modal .company-overview-grid{
  gap: 10px !important;
}
.company-overview-modal section{
  margin-bottom: 10px;
}
.company-overview-modal .company-overview-grid > .panel{
  padding: 12px !important;
}

/* The company avatar mark — keep small so hero stays tight */
.company-overview-modal .company-logo-mark-large{
  width: 52px !important;
  height: 52px !important;
  border-radius: 12px !important;
  font-size: 22px !important;
  flex-shrink: 0;
}

/* ============================================================
   🟪 FIX: Company Overview details/summary cards in dark mode
   Inner detail boxes had a hardcoded light bg (#fbfcfe) but their
   text colors weren't forced — making everything unreadable in
   dark mode. Also kill the redundant "COMPANY" kicker (the modal
   head already says "Company Overview").
   ============================================================ */

/* Hide the redundant kicker — modal-head already labels this view */
.company-overview-modal .company-overview-kicker{ display: none !important; }

/* Make sure the identity row sits clean — name flush with avatar */
.company-overview-modal .company-overview-identity{
  display: flex !important;
  flex-direction: row !important;
  gap: 14px !important;
  align-items: center !important;
}
.company-overview-modal .company-overview-copy{
  display: flex !important;
  flex-direction: column !important;
  gap: 2px;
  min-width: 0;
}

/* Detail / summary cards — proper contrast in BOTH themes */
.company-detail-grid div,
.company-summary-grid div{
  border: 1px solid var(--border) !important;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
  border-radius: 10px !important;
  padding: 8px 11px !important;
}
.company-detail-grid span,
.company-summary-grid span{
  color: #64748b !important;
  font-size: 9.5px !important;
  letter-spacing: .08em;
  font-weight: 800 !important;
}
.company-detail-grid strong,
.company-summary-grid strong{
  color: #0f172a !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  margin-top: 2px !important;
}

/* Dark mode — detail/summary cards adapt fully */
body.theme-dark .company-detail-grid div,
body.theme-dark .company-summary-grid div{
  background: linear-gradient(180deg, rgba(30,34,68,.55) 0%, rgba(20,24,52,.45) 100%) !important;
  border-color: rgba(148,163,184,.20) !important;
}
body.theme-dark .company-detail-grid span,
body.theme-dark .company-summary-grid span{
  color: #94a3b8 !important;
}
body.theme-dark .company-detail-grid strong,
body.theme-dark .company-summary-grid strong{
  color: #f1f5f9 !important;
}

/* Notes box — dark mode adaptation */
body.theme-dark .company-notes-box{
  background: rgba(30,34,68,.55) !important;
  border-color: rgba(148,163,184,.20) !important;
  color: #cbd5e1 !important;
}

/* Quick financial summary date filter — dark mode legibility */
body.theme-dark .company-overview-modal input[type="date"]{
  color-scheme: dark !important;
  background-color: rgba(15,18,42,.75) !important;
  color: #f1f5f9 !important;
  border-color: rgba(148,163,184,.30) !important;
}
body.theme-dark .company-overview-modal label > span{ color: #94a3b8 !important; }

/* Panel title contrast in modal */
body.theme-dark .company-overview-modal .panel-title{
  color: #f1f5f9 !important;
}
body.theme-dark .company-overview-modal .panel{
  background: linear-gradient(180deg, rgba(30,34,68,.72) 0%, rgba(20,24,52,.62) 100%) !important;
  border-color: rgba(148,163,184,.18) !important;
}

/* Submeta in dark mode of hero */
body.theme-dark .company-overview-modal .company-overview-submeta{
  color: #cbd5e1 !important;
}

/* The "P" avatar in dark mode — keep it light so the letter pops */
body.theme-dark .company-overview-modal .company-logo-mark-large{
  background: linear-gradient(135deg, #ffffff 0%, #e0e7ff 100%) !important;
  color: #1e40af !important;
  border-color: rgba(255,255,255,.4) !important;
}

/* ============================================================
   🔧 FINAL HERO FIX — kill clipping, opaque panels in dark mode
   ============================================================ */

/* Hero needs proper bottom breathing room AND a real gap before the
   panels below. Six earlier rules were fighting each other; this one
   is the last word and uses max specificity so it always wins. */
.company-overview-modal section.company-overview-hero{
  padding: 14px 16px 16px 16px !important;
  margin-bottom: 16px !important;
  border: 1px solid rgba(186,202,255,.45) !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #eef4ff 0%, #ede9fe 55%, #fdf2f8 100%) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 8px 22px rgba(29,78,216,.08) !important;
  overflow: visible !important;   /* nothing inside should be clipped */
  position: relative;
  z-index: 1;                     /* sit above the modal-body bg */
}

/* Submeta must NOT sit at the hero's edge — give it room and weight */
.company-overview-modal .company-overview-submeta{
  font-size: 12px !important;
  font-weight: 500 !important;
  margin-top: 4px !important;
  padding-bottom: 2px;
  white-space: normal !important;
  word-break: break-word;
}

/* Identity row keeps name + submeta vertically packed; align-items
   stretches so the copy isn't centered on the avatar (which made the
   submeta hang below the avatar's bottom). */
.company-overview-modal .company-overview-identity{
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 14px !important;
}
.company-overview-modal .company-overview-copy{
  display: flex !important;
  flex-direction: column !important;
  justify-content: center;
  gap: 0;
  min-width: 0;
}
.company-overview-modal .company-overview-name{
  font-size: 19px !important;
  line-height: 1.18 !important;
}

/* DARK MODE — make the panels opaque so the hero submeta doesn't
   bleed through. Translucent navy was the cause of the visual cut.  */
body.theme-dark .company-overview-modal .company-overview-grid > .panel,
body.theme-dark .company-overview-modal section.panel{
  background: linear-gradient(180deg, #1f2547 0%, #181c3c 100%) !important;
  border: 1px solid rgba(99,102,241,.18) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.04) inset,
    0 14px 30px rgba(0,0,0,.40) !important;
}
body.theme-dark .company-overview-modal .modal-body{
  background: linear-gradient(180deg, #0f1230 0%, #11132f 100%) !important;
}
body.theme-dark .company-overview-modal section.company-overview-hero{
  background: linear-gradient(135deg, #312e81 0%, #4338ca 60%, #6366f1 100%) !important;
  border: 1px solid rgba(99,102,241,.45) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.10) inset,
    0 14px 32px rgba(67,56,202,.40) !important;
}
body.theme-dark .company-overview-modal .company-overview-submeta{
  color: #c7d2fe !important;
  font-weight: 500 !important;
}
body.theme-dark .company-overview-modal .company-overview-name{
  color: #ffffff !important;
}

/* Detail / summary cards inside opaque dark panels — match palette */
body.theme-dark .company-overview-modal .company-detail-grid div,
body.theme-dark .company-overview-modal .company-summary-grid div{
  background: rgba(15,18,42,.6) !important;
  border: 1px solid rgba(99,102,241,.18) !important;
}

/* Quick-financial date filter row visibility in dark */
body.theme-dark .company-overview-modal .panel input[type="date"]{
  background-color: rgba(15,18,42,.85) !important;
  color: #f1f5f9 !important;
  border-color: rgba(99,102,241,.30) !important;
}

/* ============================================================
   🟪 DESIGN PASS v4
   1) Unified Company Overview bar (head + hero merged)
   2) Self-explanatory subtitles hidden globally
   3) Consistent icon-only button styling across the app
   4) Tighter spacing/scale globally
   ============================================================ */

/* ---------- 1) UNIFIED COMPANY OVERVIEW BAR ---------- */
/* The new modal has a single combined strip (avatar + name + actions)
   replacing the old "head + hero" two-row design. */
.company-overview-modal{
  width: min(940px, 96vw) !important;
  border-radius: 16px !important;
}
.company-overview-modal .modal-head.company-overview-bar{
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 14px !important;
  align-items: center !important;
  padding: 14px 18px !important;
  border-bottom: 1px solid rgba(99,102,241,.18) !important;
  background: linear-gradient(135deg, #4338ca 0%, #6366f1 55%, #818cf8 100%) !important;
  color: #fff !important;
}
.company-overview-modal .modal-head.company-overview-bar .company-overview-identity{
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0;
}
.company-overview-modal .modal-head .company-overview-copy{
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.company-overview-modal .modal-head .company-overview-name{
  color: #ffffff !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: -.015em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.company-overview-modal .modal-head .company-overview-submeta{
  color: rgba(255,255,255,.78) !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  margin-top: 2px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Avatar inside the bar — clean square that contrasts the gradient */
.company-overview-modal .modal-head .company-logo-mark-large{
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border-radius: 10px !important;
  font-size: 16px !important;
  background: linear-gradient(135deg, #ffffff 0%, #e0e7ff 100%) !important;
  color: #312e81 !important;
  border: 1px solid rgba(255,255,255,.55) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.20);
  flex-shrink: 0;
}
/* Action buttons within the bar — translucent over the gradient */
.company-overview-modal .modal-head .company-overview-actions-icons{
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  align-items: center !important;
}
.company-overview-modal .modal-head .company-overview-actions-icons .btn{
  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,.16) !important;
  border: 1px solid rgba(255,255,255,.25) !important;
  color: #fff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all var(--dur-fast) var(--ease-out);
}
.company-overview-modal .modal-head .company-overview-actions-icons .btn:hover{
  background: rgba(255,255,255,.30) !important;
  border-color: rgba(255,255,255,.45) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,.18);
}
.company-overview-modal .modal-head .company-overview-actions-icons .btn svg{
  width: 14px !important;
  height: 14px !important;
}
.company-overview-modal .modal-head .company-overview-actions-icons .btn.company-overview-delete{
  color: #fecaca !important;
}
.company-overview-modal .modal-head .company-overview-actions-icons .btn.company-overview-delete:hover{
  background: rgba(220,38,38,.50) !important;
  border-color: rgba(248,113,113,.60) !important;
  color: #fff !important;
}
.company-overview-modal .modal-head .company-overview-actions-icons .company-logo-action{
  border-style: dashed !important;
  border-color: rgba(255,255,255,.55) !important;
}

/* Body — remove the now-redundant hero space, just go straight to content */
.company-overview-modal .modal-body{
  padding: 16px 18px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.6), rgba(248,250,253,.7)) !important;
}
body.theme-dark .company-overview-modal .modal-body{
  background: linear-gradient(180deg, #131634 0%, #0f1230 100%) !important;
}
.company-overview-modal .company-overview-body > section:first-child{ margin-top: 0; }

/* ---------- 2) SUBTITLES HIDDEN GLOBALLY ---------- */
/* These were self-explanatory and wasted vertical space. */
.subtitle{ display: none !important; }
.page-head .subtitle{ display: none !important; }
.page-head > div:first-child > .subtitle{ display: none !important; }

/* Page-head a touch more compact now that subtitle is gone */
.page-head{ padding: 10px 14px !important; min-height: 0 !important; }
.page-head h1{ font-size: 18px !important; line-height: 1.15 !important; font-weight: 800 !important; }

/* ---------- 3) CONSISTENT ICON-ONLY BUTTONS ----------
   Make every icon-only button across the app look identical to the
   company-overview action style: 30x30 px, 8 px radius, translucent
   background, hover lift. */
.btn.icon-only,
.icon-btn{
  width: 30px !important;
  min-width: 30px !important;
  height: 30px !important;
  padding: 0 !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255,255,255,.85) !important;
  border: 1px solid rgba(208,216,230,.7) !important;
  color: #475569 !important;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.btn.icon-only:hover:not(:disabled),
.icon-btn:hover{
  background: #fff !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(29,78,216,.15);
}
.btn.icon-only:active:not(:disabled),
.icon-btn:active{
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(29,78,216,.18);
}
.btn.icon-only svg, .icon-btn svg{
  width: 14px !important;
  height: 14px !important;
}
.btn.icon-only.btn-compact{
  width: 26px !important; min-width: 26px !important; height: 26px !important;
}
/* Primary icon-only (for "Approve" rows) keeps brand color */
.btn.icon-only.primary{
  background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%) !important;
  border: 0 !important;
  color: #fff !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 4px 12px rgba(29,78,216,.30) !important;
}
.btn.icon-only.primary:hover:not(:disabled){
  background: linear-gradient(180deg, #1d4ed8 0%, #1e40af 100%) !important;
}
/* Danger variant */
.btn.icon-only.danger{
  color: #b91c1c !important;
}
.btn.icon-only.danger:hover:not(:disabled){
  background: #fef2f2 !important;
  border-color: #dc2626 !important;
  color: #b91c1c !important;
}
/* Dark theme adjustments for all icon buttons */
body.theme-dark .btn.icon-only,
body.theme-dark .icon-btn{
  background: rgba(30,34,68,.7) !important;
  border-color: rgba(148,163,184,.25) !important;
  color: #cbd5e1 !important;
}
body.theme-dark .btn.icon-only:hover:not(:disabled),
body.theme-dark .icon-btn:hover{
  background: rgba(99,102,241,.25) !important;
  border-color: #818cf8 !important;
  color: #e0e7ff !important;
  box-shadow: 0 4px 10px rgba(99,102,241,.30);
}

/* Floating background-controls — match the same look */
.background-controls > .btn.icon-only,
.background-controls > .background-toggle{
  width: 26px !important;
  min-width: 26px !important;
  height: 26px !important;
  min-height: 26px !important;
  padding: 0 !important;
  border-radius: 7px !important;
  background: transparent !important;
  border: 0 !important;
}
.background-controls > .btn.icon-only:hover,
.background-controls > .background-toggle:hover{
  background: rgba(29,78,216,.12) !important;
  color: var(--primary) !important;
  transform: none !important;
  box-shadow: none !important;
}
.background-controls > .btn.icon-only svg,
.background-controls > .background-toggle svg{
  width: 13px !important;
  height: 13px !important;
}

/* ---------- 4) GLOBAL DENSITY — even tighter ---------- */
html{ font-size: 13.5px; }
body{ font-size: 12px; }
.btn{ min-height: 30px !important; padding: 5px 11px !important; font-size: 12px !important; }
.btn.small{ min-height: 24px !important; padding: 3px 9px !important; font-size: 11px !important; }
input, select, textarea{
  min-height: 30px !important;
  font-size: 12px !important;
  padding: 4px 9px !important;
}
select{ padding-right: 26px !important; }
.grid th, .grid td{ padding: 6px 8px !important; font-size: 12px !important; }
.panel{ padding: 11px !important; border-radius: 11px !important; }
.stat-card{ padding: 9px 11px !important; border-radius: 10px !important; }
.stat-label{ font-size: 9px !important; letter-spacing: .05em; }
.stat-value{ font-size: 17px !important; }
.brand-name{ font-size: 14.5px !important; }
.brand-sub{ font-size: 10px !important; }
.brand-byline{ font-size: 8.5px !important; }
.nav-btn, .nav-section-btn{ padding: 7px 10px !important; font-size: 12px !important; min-height: 32px; }
.nav-subbtn{ padding: 5px 9px !important; font-size: 11.5px !important; min-height: 28px; }
.panel-title{ font-size: 12.5px !important; }
.report-title{ font-size: 13.5px !important; }
.modal-head{ padding: 11px 16px !important; }
.modal-head h3{ font-size: 12.5px !important; }
.muted{ font-size: 11px; }
.sidebar{ padding: 12px 10px !important; }
.app{ grid-template-columns: 208px 1fr !important; }
@media (min-width: 1400px){
  .app{ grid-template-columns: 228px 1fr !important; }
}
.main, .app .main { padding-top: 8px !important; padding-left: 8px !important; padding-right: 8px !important; }

/* Brand block tighter */
.brand{ padding: 10px !important; margin-bottom: 12px !important; border-radius: 11px !important; }

/* Page hero panels (like GL Journey, Currency Hero) — tighter padding */
.gl-journey-shell, .currency-hero-shell, .coa-overview-shell{
  padding: 12px 14px !important;
}

/* Section heads with kicker — tighter */
.gl-journey-kicker, .currency-kicker, .coa-overview-kicker{
  font-size: 10px !important;
  margin-bottom: 5px !important;
}
.gl-journey-title, .currency-hero-title, .coa-overview-title{
  font-size: 18px !important;
  line-height: 1.18 !important;
}

/* Make sure the loaded text doesn't show subtitle in any context */
.page-head .subtitle,
.page-head .muted.subtitle,
.page-head + .subtitle{ display: none !important; }


/* ---------- D) DENSITY ACROSS APP — replaces zoom approach ---------- */
.btn{
  min-height: 32px !important;
  padding: 6px 12px !important;
  font-size: 12.5px !important;
}
.btn.small{ min-height: 26px !important; padding: 4px 10px !important; font-size: 11.5px !important; }
.btn.icon-only{
  width: 32px !important; min-width: 32px !important; height: 32px !important;
}
.btn.icon-only.btn-compact{
  width: 26px !important; min-width: 26px !important; height: 26px !important;
}
.btn.icon-only svg, .background-toggle svg{ width: 14px !important; height: 14px !important; }
input, select, textarea{
  min-height: 32px !important;
  font-size: 12.5px !important;
  padding: 5px 10px !important;
}
select{ padding-right: 28px !important; }
.grid th, .grid td{ padding: 7px 9px !important; font-size: 12.5px !important; }
.grid.compact th, .grid.compact td{ padding: 5px 8px !important; font-size: 12px !important; }
.panel{ padding: 12px !important; }
.stat-card{ padding: 10px 12px !important; }
.stat-label{ font-size: 9.5px !important; }
.stat-value{ font-size: 19px !important; }
.stat-hint{ font-size: 10px !important; }
.page-head h1{ font-size: 22px !important; line-height: 1.1 !important; }
.brand-name{ font-size: 16px !important; }
.brand-sub{ font-size: 10.5px !important; }
.brand-byline{ font-size: 9px !important; }
.nav-btn, .nav-section-btn{ padding: 8px 10px !important; font-size: 12.5px !important; }
.nav-subbtn{ padding: 6px 10px !important; font-size: 11.5px !important; }
.panel-title{ font-size: 13px !important; }
.report-title{ font-size: 14px !important; }
.modal-head{ padding: 12px 18px !important; }
.modal-head h3{ font-size: 13px !important; }
label{ font-size: 10.5px !important; }
.muted{ font-size: 11.5px; }
.sidebar{ padding: 14px 12px !important; }

/* App shell — narrower sidebar at higher density */
.app{ grid-template-columns: 220px 1fr !important; }
@media (min-width: 1400px){
  .app{ grid-template-columns: 240px 1fr !important; }
}

/* Make sure background-controls are also dense */
.background-controls{
  top: 6px !important; right: 8px !important;
  gap: 3px !important; padding: 3px !important;
}
.background-controls > .btn.icon-only,
.background-controls > .background-toggle{
  width: 26px !important; min-width: 26px !important;
  height: 26px !important; min-height: 26px !important;
}
.background-controls > .btn.icon-only svg,
.background-controls > .background-toggle svg{
  width: 13px !important; height: 13px !important;
}

/* Glassy panel radius slightly smaller at density */
.panel, .stat-card, .side-box, .modal, .report-wrap, .card{ border-radius: 12px !important; }
.page-head{ border-radius: 14px !important; padding: 12px 16px !important; }

/* ---------- E) ENSURE UNMAPPED ROW INTERACTIONS WORK ----------
   Defensive: anything claiming to be a control or interactive area
   must NOT lose pointer events. (Was being suspected as the cause of
   the "stuck unmapped section" — confirmed root cause was zoom + the
   floating pill overlay; both are fixed above.) */
.coa-select, .coa-name-input, .btn, .icon-btn, button, a, label,
input, select, textarea{
  pointer-events: auto !important;
}
.coa-unmapped-grid select.coa-select,
.coa-unmapped-grid .btn{
  position: relative; z-index: 1;  /* sit above any decorative pseudo-elements */
}

/* ---------- F) GLOBAL CONTRAST RESCUE ----------
   In a few spots earlier glass styles were too washed out. Bump
   panel background opacity on the dashboards and reports so content
   stays readable on the colorful background. */
.panel, .report-wrap, .side-box{
  background: linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.78) 100%) !important;
}
body.theme-dark .panel, body.theme-dark .report-wrap, body.theme-dark .side-box{
  background: linear-gradient(180deg, rgba(30,34,68,.78) 0%, rgba(20,24,52,.65) 100%) !important;
}

/* Report row titles in dark mode */
body.theme-dark .report .total-row td{ color: #fff !important; }
body.theme-dark .report .section-row td{ background: rgba(99,102,241,.10) !important; color: #f1f5f9 !important; }

/* Filter row container ("toolbar") — give it a glassy backdrop */
.toolbar{
  padding: 8px 12px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.55));
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  border: 1px solid rgba(255,255,255,.85);
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 8px 18px rgba(15,23,42,.05);
  align-items: center !important;
}
body.theme-dark .toolbar{
  background: linear-gradient(180deg, rgba(30,34,68,.6), rgba(20,24,52,.5));
  border-color: rgba(148,163,184,.18);
}

/* Each label inside a toolbar */
.toolbar label{
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0; font-weight: 700;
}

/* Reports run button — primary gradient stays prominent in dark mode too */
body.theme-dark .btn.primary{
  background: linear-gradient(180deg, #4f46e5 0%, #4338ca 100%) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.15) inset, 0 8px 22px rgba(79,70,229,.45) !important;
}

/* ============================================================
   ⬛ FINAL CONSISTENCY PASS (v5)
   This is the LAST CSS block in the file. Everything here uses
   high specificity + !important to win over earlier conflicting
   rules. Goal: ONE consistent look for every button, list, panel.
   ============================================================ */

/* ---------- A) HARD-HIDE ALL EXPLANATORY SUBTITLES ---------- */
.subtitle, .page-head .subtitle, .page-head > div > .subtitle,
.page-head + .subtitle, .panel > .muted.subtitle, .modal-head .subtitle,
.companies-grid .muted.company-directory-note,
.company-directory-note,
.preview-guidance{
  display: none !important;
}
/* Keep ".muted" useful for inline meta but never as a paragraph subtitle */
.panel-title-row + .muted:not(.pill):not(.coa-filter-meta){ display: none !important; }

/* ---------- B) ONE CANONICAL ICON-ONLY BUTTON ---------- */
/* Every icon-only button across the app uses this exact look. */
.btn.icon-only,
.btn.icon-only.btn-compact,
.icon-only-btn,
.btn.small.icon-only,
.icon-btn,
.background-toggle{
  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  border-radius: 9px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255,255,255,.86) !important;
  border: 1px solid rgba(208,216,230,.7) !important;
  color: #475569 !important;
  cursor: pointer !important;
  font-size: 0 !important;
  line-height: 1 !important;
  transition: background-color 140ms ease, border-color 140ms ease,
              color 140ms ease, transform 120ms ease, box-shadow 140ms ease;
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 1px 2px rgba(15,23,42,.05) !important;
}
.btn.icon-only:hover:not(:disabled),
.icon-only-btn:hover:not(:disabled),
.icon-btn:hover,
.background-toggle:hover{
  background: #ffffff !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(29,78,216,.18) !important;
}
.btn.icon-only:active:not(:disabled),
.icon-only-btn:active:not(:disabled),
.icon-btn:active{
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(29,78,216,.20) !important;
}
.btn.icon-only svg,
.icon-only-btn svg,
.icon-btn svg,
.background-toggle svg{
  width: 15px !important;
  height: 15px !important;
  display: block;
  flex-shrink: 0;
}
.office-export-icon{
  --export-icon-size:36px;
  display:block !important;
  width:var(--export-icon-size) !important;
  height:var(--export-icon-size) !important;
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center;
  flex-shrink:0;
}
.office-export-icon--word{ background-image:url("../assets/export-word-icon.png"); }
.office-export-icon--excel{ background-image:url("../assets/export-excel-icon.png"); }
.office-export-icon--pdf{ background-image:url("../assets/export-pdf-icon.png"); }
.btn.icon-only.office-export-action{
  width:36px !important;
  min-width:36px !important;
  height:36px !important;
  min-height:36px !important;
  border-radius:9px !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
/* Primary variant — solid brand gradient */
.btn.icon-only.primary{
  background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%) !important;
  border: 0 !important;
  color: #fff !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 4px 12px rgba(29,78,216,.30) !important;
}
.btn.icon-only.primary:hover:not(:disabled){
  background: linear-gradient(180deg, #1d4ed8 0%, #1e40af 100%) !important;
  color: #fff !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 8px 18px rgba(29,78,216,.40) !important;
}
.btn.icon-only.office-export-action,
.btn.icon-only.office-export-action.primary,
.btn.icon-only.office-export-action.secondary{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
.btn.icon-only.office-export-action:hover:not(:disabled){
  background:transparent !important;
  border-color:transparent !important;
  box-shadow:none !important;
}
/* Danger variant */
.btn.icon-only.danger{
  color: #b91c1c !important;
}
.btn.icon-only.danger:hover:not(:disabled){
  background: #fef2f2 !important;
  border-color: #dc2626 !important;
  color: #b91c1c !important;
  box-shadow: 0 4px 12px rgba(220,38,38,.20) !important;
}
/* Small variant (e.g. in table rows) */
.btn.small.icon-only{
  width: 28px !important; min-width: 28px !important; height: 28px !important;
  min-height: 28px !important; border-radius: 8px !important;
}
.btn.small.icon-only svg{ width: 13px !important; height: 13px !important; }

/* Disabled state */
.btn.icon-only:disabled,
.icon-only-btn:disabled{
  opacity: .42 !important;
  cursor: not-allowed !important;
  transform: none !important;
  background: rgba(241,245,249,.8) !important;
  border-color: rgba(208,216,230,.5) !important;
  color: #94a3b8 !important;
  box-shadow: none !important;
}

/* Dark mode unified */
body.theme-dark .btn.icon-only,
body.theme-dark .icon-only-btn,
body.theme-dark .icon-btn,
body.theme-dark .background-toggle{
  background: rgba(30,34,68,.72) !important;
  border-color: rgba(99,102,241,.22) !important;
  color: #cbd5e1 !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 1px 2px rgba(0,0,0,.30) !important;
}
body.theme-dark .btn.icon-only:hover:not(:disabled),
body.theme-dark .icon-only-btn:hover:not(:disabled),
body.theme-dark .icon-btn:hover,
body.theme-dark .background-toggle:hover{
  background: rgba(99,102,241,.28) !important;
  border-color: #818cf8 !important;
  color: #e0e7ff !important;
  box-shadow: 0 4px 12px rgba(99,102,241,.30) !important;
}
body.theme-dark .btn.icon-only.danger{ color: #fca5a5 !important; }
body.theme-dark .btn.icon-only.danger:hover:not(:disabled){
  background: rgba(220,38,38,.35) !important;
  border-color: #fca5a5 !important;
  color: #fee2e2 !important;
}

/* Floating background-controls: keep tucked top-right but use the same look */
.background-controls{
  position: fixed !important;
  top: 6px !important; right: 10px !important;
  z-index: 1000 !important;
  display: inline-flex !important;
  gap: 4px !important;
  padding: 3px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.85) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.2) !important;
  backdrop-filter: blur(12px) saturate(1.2) !important;
  border: 1px solid rgba(208,216,230,.6) !important;
  box-shadow: 0 4px 12px rgba(15,23,42,.10) !important;
}
.background-controls > .btn.icon-only,
.background-controls > .background-toggle{
  width: 28px !important; min-width: 28px !important;
  height: 28px !important; min-height: 28px !important;
  border-radius: 999px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.background-controls > .btn.icon-only:hover,
.background-controls > .background-toggle:hover{
  background: rgba(29,78,216,.12) !important;
  border: 0 !important;
  transform: none !important;
  box-shadow: none !important;
  color: var(--primary) !important;
}
.background-controls > .btn.icon-only svg,
.background-controls > .background-toggle svg{
  width: 13px !important; height: 13px !important;
}
body.theme-dark .background-controls{
  background: rgba(20,24,52,.78) !important;
  border-color: rgba(99,102,241,.22) !important;
}
body.theme-dark .background-controls > .btn.icon-only:hover,
body.theme-dark .background-controls > .background-toggle:hover{
  background: rgba(99,102,241,.30) !important;
  color: #c7d2fe !important;
}

/* ---------- C) TEXT BUTTONS — also one canonical look ---------- */
.btn{
  border-radius: 9px !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  min-height: 32px !important;
  padding: 6px 12px !important;
  letter-spacing: -.005em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background-color 140ms ease, border-color 140ms ease,
              color 140ms ease, transform 120ms ease, box-shadow 140ms ease;
}
.btn.small{ min-height: 26px !important; padding: 4px 10px !important; font-size: 11.5px !important; }
.btn.primary{
  background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%) !important;
  color: #ffffff !important;
  border: 0 !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 4px 12px rgba(29,78,216,.30) !important;
}
.btn.primary:hover:not(:disabled){
  background: linear-gradient(180deg, #1d4ed8 0%, #1e40af 100%) !important;
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 8px 18px rgba(29,78,216,.40) !important;
}
.btn.secondary{
  background: rgba(255,255,255,.86) !important;
  border: 1px solid rgba(208,216,230,.7) !important;
  color: #334155 !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 1px 2px rgba(15,23,42,.05) !important;
}
.btn.secondary:hover:not(:disabled){
  background: #ffffff !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(29,78,216,.16) !important;
}
body.theme-dark .btn.secondary{
  background: rgba(30,34,68,.7) !important;
  border-color: rgba(99,102,241,.22) !important;
  color: #cbd5e1 !important;
}
body.theme-dark .btn.secondary:hover:not(:disabled){
  background: rgba(99,102,241,.28) !important;
  border-color: #818cf8 !important;
  color: #e0e7ff !important;
}

/* ---------- D) LISTS / TABLES — denser, calmer ---------- */
.grid{ border-collapse: separate; border-spacing: 0; }
.grid th{
  font-size: 10px !important;
  letter-spacing: .08em;
  font-weight: 800 !important;
  text-transform: uppercase;
  padding: 8px 10px !important;
  background: linear-gradient(180deg, rgba(248,250,253,.95), rgba(241,245,249,.85)) !important;
  border-bottom: 1px solid rgba(208,216,230,.5) !important;
}
.grid td{
  padding: 7px 10px !important;
  font-size: 12px !important;
  border-bottom: 1px solid rgba(226,232,240,.55) !important;
  vertical-align: middle;
}
.grid.compact th, .grid.compact td{ padding: 5px 8px !important; font-size: 11.5px !important; }
.grid tbody tr{ transition: background-color 120ms ease; }
.grid tbody tr:hover{ background: rgba(239,246,255,.55) !important; }
.grid tbody tr:nth-child(even){ background: rgba(247,250,255,.45); }
body.theme-dark .grid th{
  background: rgba(15,18,42,.65) !important;
  color: #cbd5e1 !important;
  border-bottom-color: rgba(99,102,241,.20) !important;
}
body.theme-dark .grid td{
  border-bottom-color: rgba(99,102,241,.12) !important;
  color: #e2e8f0 !important;
}
body.theme-dark .grid tbody tr:nth-child(even){ background: rgba(99,102,241,.04); }
body.theme-dark .grid tbody tr:hover{ background: rgba(99,102,241,.10) !important; }

/* ---------- E) COA ITEM ROWS — tight, no clutter ---------- */
/* The "0 mapped accounts" tag becomes a subtle inline hint, not a subtitle */
.coa-item-row .coa-item-row-meta{
  font-size: 10px !important;
  color: #94a3b8 !important;
  margin-top: 1px !important;
  line-height: 1.2;
}
body.theme-dark .coa-item-row .coa-item-row-meta{ color: #64748b !important; }
.coa-item-row td{ padding: 5px 8px !important; }
.coa-item-row .coa-name-input{ font-size: 12.5px !important; }
/* Make the FSLI accent border slimmer & only on first column for rhythm */
.coa-grid tbody td:nth-child(2) select.coa-select{ border-left: 2px solid #3b82f6 !important; }
.coa-grid tbody td:nth-child(3) select.coa-select{ border-left: 2px solid #8b5cf6 !important; }
.coa-grid tbody td:nth-child(4) select.coa-select{ border-left: 2px solid #06b6d4 !important; }
.coa-grid tbody td:nth-child(5) select.coa-select{ border-left: 2px solid #10b981 !important; }

/* Coa select base styling */
.coa-select{
  height: 28px !important;
  min-height: 28px !important;
  padding: 3px 24px 3px 8px !important;
  font-size: 12px !important;
  border-radius: 7px !important;
  font-weight: 600;
}

/* "Editable" mode pill — keep but smaller */
.status-badge{
  padding: 2px 8px !important;
  font-size: 9.5px !important;
  letter-spacing: .04em;
}

/* ---------- F) PAGE HEAD / FILTER BARS — fit on one line ---------- */
.page-head{
  padding: 9px 14px !important;
  border-radius: 12px !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px;
}
.page-head h1{
  font-size: 17px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  margin: 0 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.page-head .actions{
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  align-items: center !important;
  justify-content: flex-end;
}
.page-head .actions input{
  min-width: 200px;
}

/* Reports filter / toolbar — fix wrapping */
.report-filter-bar, .toolbar, .report-toolbar{
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 12px !important;
  border-radius: 11px !important;
  min-height: 0 !important;
}
.report-toolbar label{ min-width: 0 !important; }
.report-toolbar select,
.report-toolbar input{
  min-height: 30px !important;
  font-size: 12px !important;
  padding: 4px 9px !important;
}
.report-toolbar-kicker{
  font-size: 10px !important;
  font-weight: 800;
  letter-spacing: .08em;
  color: #64748b;
  text-transform: uppercase;
  padding: 0 2px;
}

/* ---------- G) PANELS / CARDS — calmer ---------- */
.panel{
  padding: 12px !important;
  border-radius: 12px !important;
}
.panel-title{ font-size: 12.5px !important; font-weight: 800 !important; margin-bottom: 8px !important; }
.panel-title-row{ margin-bottom: 8px !important; }

/* ---------- H) FORM INPUTS — consistent ---------- */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select, textarea{
  min-height: 30px !important;
  padding: 4px 10px !important;
  font-size: 12px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(208,216,230,.7) !important;
  background: rgba(255,255,255,.92) !important;
  transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}
select{ padding-right: 28px !important; }
input:focus, select:focus, textarea:focus{
  border-color: #80a6ff !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(29,78,216,.18) !important;
}
body.theme-dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
body.theme-dark select, body.theme-dark textarea{
  background: rgba(15,18,42,.65) !important;
  color: #e2e8f0 !important;
  border-color: rgba(99,102,241,.22) !important;
}
body.theme-dark input:focus, body.theme-dark select:focus, body.theme-dark textarea:focus{
  border-color: #818cf8 !important;
  background: rgba(15,18,42,.82) !important;
  box-shadow: 0 0 0 3px rgba(129,140,248,.30) !important;
}

/* ---------- I) SIDEBAR — denser, cleaner ---------- */
.sidebar{ padding: 12px 10px !important; }
.brand{ padding: 9px !important; margin-bottom: 10px !important; border-radius: 11px !important; }
.brand-mark, .brand-logo{ width: 30px !important; height: 30px !important; }
.brand-name{ font-size: 13.5px !important; }
.brand-sub{ font-size: 9.5px !important; }
.brand-byline{ font-size: 8px !important; }
.nav-btn, .nav-section-btn{
  padding: 7px 10px !important;
  font-size: 12px !important;
  border-radius: 9px !important;
  min-height: 30px;
}
.nav-subbtn{
  padding: 5px 10px !important;
  font-size: 11.5px !important;
  border-radius: 8px !important;
  min-height: 26px;
}
.side-box{ padding: 10px !important; border-radius: 11px !important; }
.side-title{ font-size: 11px !important; margin-bottom: 6px !important; }
.app{ grid-template-columns: 200px 1fr !important; }
@media (min-width: 1400px){ .app{ grid-template-columns: 220px 1fr !important; } }

/* ---------- J) MAIN AREA — tighter ---------- */
.main, .app .main{
  padding: 6px 10px 16px !important;
}

/* ---------- K) STAT CARDS — uniform ---------- */
.stat-card{ padding: 9px 11px !important; border-radius: 11px !important; }
.stat-label{ font-size: 9.5px !important; letter-spacing: .06em; }
.stat-value{ font-size: 17px !important; }
.stat-hint{ font-size: 9.5px !important; }

/* ---------- L) MODAL — consistent ---------- */
.modal{ border-radius: 14px !important; }
.modal-head{ padding: 10px 14px !important; }
.modal-head h3{ font-size: 13px !important; }
.modal-body{ padding: 12px 14px !important; }
.modal-foot{ padding: 10px 14px !important; }

/* ---------- M) PILL / BADGE ---------- */
.pill{
  padding: 2px 8px !important;
  font-size: 10px !important;
  letter-spacing: .04em;
  border-radius: 999px;
}

/* ---------- N) FINAL TYPE TUNING ---------- */
html{ font-size: 13px; }
body{ font-size: 11.5px; line-height: 1.45; }

/* Make sure ALL buttons (text or icon) use the same animation timing */
button, .btn, .nav-btn, .nav-section-btn, .nav-subbtn, a, .stat-card,
input, select, textarea{
  transition-duration: 120ms !important;
  transition-timing-function: cubic-bezier(.2,.8,.2,1) !important;
}
.no-anim *{ transition: none !important; animation: none !important; }

/* ============================================================
   PERFORMANCE — kill heavy effects that cause "freeze for a sec"
   ============================================================ */

/* Backdrop-filter is GPU-expensive. Keep it only on persistent surfaces
   (sidebar, page-head, modal-head). Remove it from frequently re-rendered
   panels/cards/stat-cards so we don't pay the cost on every render. */
.panel, .stat-card, .report-wrap, .card, .empty-state, .side-box{
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
/* Panels are translucent enough without blur — keep readable background */
.panel, .stat-card, .report-wrap, .card, .empty-state, .side-box{
  background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%) !important;
}
body.theme-dark .panel, body.theme-dark .stat-card, body.theme-dark .report-wrap,
body.theme-dark .card, body.theme-dark .empty-state, body.theme-dark .side-box{
  background: linear-gradient(180deg, #1f2547 0%, #181c3c 100%) !important;
}

/* Reduce transition surface to ONLY visual properties — never layout-affecting */
button, .btn, .nav-btn, .nav-section-btn, .nav-subbtn, .icon-btn,
.btn.icon-only, .background-toggle, .stat-card, a, .toast{
  transition-property: background-color, border-color, color, box-shadow, transform !important;
}
input, select, textarea{
  transition-property: background-color, border-color, color, box-shadow !important;
}

/* Layout containment — tells the browser our panels can't affect outer layout,
   so layout/paint can be scoped to the panel rather than the whole page. */
.panel, .stat-card, .report-wrap, .card, .empty-state, .side-box, .modal{
  contain: layout style;
}
/* Tables containing many rows also benefit */
.table-scroll{ contain: layout style; }
/* Sidebar is fixed — paint independently */
.sidebar{ contain: layout style paint; }

/* Will-change hints for actively animated nav items (cheap when used sparingly) */
.nav-btn.active, .nav-section-btn.active{ will-change: auto; }

/* Skeleton shimmer animation paused if no skeleton is rendered (saves CPU
   when there's nothing to animate). */
@media (prefers-reduced-motion: reduce){
  .skeleton{ animation: none !important; background: #eef2f7 !important; }
}

/* Toast pop animation: shorten to half */
@keyframes toast-pop{0%{opacity:0;transform:translateY(-8px) scale(.96)}100%{opacity:1;transform:translateY(0) scale(1)}}
.toast{ animation-duration: 180ms !important; }

/* Modal pop animation: shorter & GPU-only */
@keyframes modal-pop{0%{opacity:0;transform:translateY(4px) scale(.99)}100%{opacity:1;transform:translateY(0) scale(1)}}
.modal{ animation-duration: 180ms !important; }
.modal-backdrop{ animation-duration: 140ms !important; }

/* Disable any global blur on body — it's the single most expensive effect. */
body{ -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

/* Keep blur on the floating background-controls pill, the sidebar, and the
   modal-head — but not on the body, panels, or cards. */

/* ============================================================
   FINAL UI FIXES (v6) — addressing the user's latest report
   ============================================================ */

/* ---------- 1) FLOATING BACKGROUND-CONTROLS — tiny, tucked ----------
   Smaller (24x24), top-right above the page-head, fixed in viewport. */
.background-controls{
  position: fixed !important;
  top: 4px !important;
  right: 6px !important;
  z-index: 2147483647 !important; /* sit above everything */
  padding: 2px !important;
  gap: 2px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.82) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.2) !important;
  backdrop-filter: blur(10px) saturate(1.2) !important;
  border: 1px solid rgba(208,216,230,.55) !important;
  box-shadow: 0 2px 8px rgba(15,23,42,.08) !important;
}
.background-controls > .btn.icon-only,
.background-controls > .background-toggle{
  width: 24px !important;
  min-width: 24px !important;
  height: 24px !important;
  min-height: 24px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}
.background-controls > .btn.icon-only svg,
.background-controls > .background-toggle svg{
  width: 12px !important;
  height: 12px !important;
}
.background-controls > .btn.icon-only:hover,
.background-controls > .background-toggle:hover{
  background: rgba(29,78,216,.12) !important;
  color: var(--primary) !important;
  transform: none !important;
}
body.theme-dark .background-controls{
  background: rgba(20,24,52,.85) !important;
  border-color: rgba(99,102,241,.30) !important;
}
body.theme-dark .background-controls > .btn.icon-only:hover,
body.theme-dark .background-controls > .background-toggle:hover{
  background: rgba(99,102,241,.30) !important;
}

/* Ensure the topbar starts BELOW the controls and never collides */
.app .main{ padding-top: 4px !important; padding-right: 90px !important; }
.page-head{
  padding-right: 14px !important;  /* the .main already reserves the right gutter */
}

/* ---------- 2) BIGGER LOGO, NO WHITE BACKGROUND ---------- */
.brand{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 4px 4px 12px 4px !important;
  margin-bottom: 8px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
}
.brand-logo, .brand-mark{
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  border-radius: 11px !important;
  object-fit: contain !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: 0 4px 12px rgba(29,78,216,.18);
  padding: 0 !important;
}
body.theme-dark .brand-logo,
body.theme-dark .brand-mark{
  box-shadow: 0 4px 14px rgba(99,102,241,.30);
}
.brand-copy{ display: flex !important; flex-direction: column !important; min-width: 0; }
.brand-name{ font-size: 15px !important; font-weight: 800 !important; line-height: 1.1 !important; }
.brand-sub{ font-size: 10px !important; line-height: 1.2 !important; color: var(--muted); }
.brand-byline{ font-size: 8.5px !important; line-height: 1.2 !important; color: #94a3b8; letter-spacing: .04em; }

body.theme-dark .brand-name{ color: #f1f5f9 !important; }
body.theme-dark .brand-sub{ color: #cbd5e1 !important; }
body.theme-dark .brand-byline{ color: #94a3b8 !important; }

/* ---------- 3) DARK MODE — COMPREHENSIVE COVERAGE ----------
   Earlier dark-mode rules missed many sections (cashflow, currency,
   workflow, integration, AI settings). One sweeping rule fixes that
   by giving every visible section a dark surface. */
body.theme-dark{
  background: linear-gradient(180deg, #0b1024 0%, #11132f 50%, #0a0e22 100%) !important;
  color: #e2e8f0 !important;
}
body.theme-dark .page-head{
  background: linear-gradient(180deg, rgba(31,37,71,.78), rgba(24,28,60,.65)) !important;
  border-color: rgba(99,102,241,.22) !important;
}
body.theme-dark .page-head h1,
body.theme-dark h1, body.theme-dark h2, body.theme-dark h3, body.theme-dark h4{
  color: #f1f5f9 !important;
}
body.theme-dark .muted, body.theme-dark .stat-label, body.theme-dark .stat-hint{
  color: #94a3b8 !important;
}
body.theme-dark .stat-value{
  background: linear-gradient(180deg, #f1f5f9 0%, #c7d2fe 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}
body.theme-dark .panel,
body.theme-dark .stat-card,
body.theme-dark .side-box,
body.theme-dark .report-wrap,
body.theme-dark .card,
body.theme-dark .empty-state,
body.theme-dark .workflow-company-card,
body.theme-dark .mapping-card,
body.theme-dark .provider-card,
body.theme-dark .detail-panel,
body.theme-dark .table-scroll,
body.theme-dark .gl-journey-shell,
body.theme-dark .currency-hero-shell,
body.theme-dark .coa-overview-shell,
body.theme-dark .workflow-center-panel,
body.theme-dark .integration-hero,
body.theme-dark .coa-experience-panel,
body.theme-dark .coa-overview-panel,
body.theme-dark .currency-hero-panel,
body.theme-dark .gl-journey-panel{
  background: linear-gradient(180deg, #1f2547 0%, #181c3c 100%) !important;
  border: 1px solid rgba(99,102,241,.22) !important;
  color: #e2e8f0 !important;
}
body.theme-dark .panel-title{ color: #f1f5f9 !important; }
body.theme-dark .preview-guidance,
body.theme-dark .gl-layout-note,
body.theme-dark .ready-strip,
body.theme-dark .validation-box,
body.theme-dark .status,
body.theme-dark .mapping-coach-row{
  background: rgba(15,18,42,.5) !important;
  border-color: rgba(99,102,241,.22) !important;
  color: #cbd5e1 !important;
}
body.theme-dark .grid th{
  background: rgba(15,18,42,.7) !important;
  color: #cbd5e1 !important;
  border-bottom-color: rgba(99,102,241,.22) !important;
}
body.theme-dark .grid td{
  border-bottom-color: rgba(99,102,241,.12) !important;
  color: #e2e8f0 !important;
}
body.theme-dark .grid tbody tr:hover{ background: rgba(99,102,241,.10) !important; }
body.theme-dark .grid tbody tr:nth-child(even){ background: rgba(99,102,241,.04); }
body.theme-dark .nav-btn, body.theme-dark .nav-section-btn{
  color: #cbd5e1 !important;
}
body.theme-dark .nav-btn:hover, body.theme-dark .nav-section-btn:hover{
  background: rgba(99,102,241,.18) !important;
  color: #c7d2fe !important;
}
body.theme-dark .nav-btn.active, body.theme-dark .nav-section-btn.active{
  background: linear-gradient(180deg, #4f46e5 0%, #4338ca 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 18px rgba(79,70,229,.40) !important;
}
body.theme-dark .nav-subbtn{ color: #cbd5e1 !important; }
body.theme-dark .nav-subbtn.active{
  background: rgba(99,102,241,.22) !important;
  color: #c7d2fe !important;
}
body.theme-dark label{ color: #cbd5e1 !important; }

/* ---------- 4) SEARCH INPUTS — instant + GPU-only paint ---------- */
input[type="text"], input[type="search"], input:not([type]){
  will-change: auto;
}
/* Make sure search inputs don't carry expensive transitions */
input[type="text"], input[type="search"], input:not([type]){
  transition-property: border-color, box-shadow !important;
  transition-duration: 80ms !important;
}

/* ---------- 5) PERFORMANCE: REDUCE WORK PER RENDER ---------- */
/* Disable shadow transitions on rows — they were repainting 60+ rows
   every time a single dropdown changed. */
.grid tbody tr, .coa-item-row{ transition: background-color 80ms ease !important; }

/* ---------- 6) FIX: page-head + actions = always single row ---------- */
.page-head{
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 12px !important;
  align-items: center !important;
}
.page-head > div:first-child{ min-width: 0; }
.page-head .actions, .page-head > div:last-child{
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  align-items: center !important;
}

/* ---------- 7) BACKGROUND TOGGLE WORKS APP-WIDE ----------
   The dark theme class is applied to body. Make sure every "white"
   surface respects it (legacy rules used hardcoded #fff). */
body.theme-dark .sidebar,
body.theme-dark .panel-title-row,
body.theme-dark .compact-panel-title{
  background: transparent !important;
  color: #e2e8f0 !important;
}
body.theme-dark .toast{
  background: rgba(20,24,52,.92) !important;
  color: #e2e8f0 !important;
  border-color: rgba(99,102,241,.30) !important;
}
body.theme-dark .toast-success{ background: rgba(20,83,45,.85) !important; color: #bbf7d0 !important; border-color: rgba(34,197,94,.35) !important; }
body.theme-dark .toast-error{ background: rgba(127,29,29,.80) !important; color: #fecaca !important; border-color: rgba(248,113,113,.35) !important; }
body.theme-dark .toast-info{ background: rgba(30,58,138,.75) !important; color: #c7d2fe !important; border-color: rgba(99,102,241,.40) !important; }

/* ============================================================
   FINAL PERFORMANCE PASS (v7)
   ============================================================ */

/* content-visibility:auto on grid bodies — browser skips paint+layout
   for rows that are off-screen. Huge win for 60+ row tables. */
.grid tbody tr{
  content-visibility: auto;
  contain-intrinsic-size: auto 36px;
}

/* Sidebar items have stable size — let the browser skip layout work
   when nothing changes inside them. */
.nav-btn, .nav-section-btn, .nav-subbtn{
  contain: content;
}

/* Theme transition: when body class changes, use a tiny transition
   only on background-color (NOT on every descendant). This is the
   reason the toggle felt frozen — every panel had a 200ms transition
   on every property triggered on theme swap. */
body{
  transition: background-color 120ms ease, color 120ms ease !important;
}
/* When swapping themes, DON'T animate the heavy stuff — it's
   the cascade of 60+ animated panels that froze things. */
body.theme-light *, body.theme-dark *{
  transition: background-color 100ms ease, color 100ms ease, border-color 100ms ease, box-shadow 100ms ease !important;
}

/* COA filter dropdown — same size as search input next to it */
#coaCompanyFilter{
  min-width: 180px;
  margin-right: 10px;
}
.global-coa-headbar{
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
  flex-wrap: wrap;
}

/* ============================================================
   DESIGN-MATCH PASS (v8) — applying the reference style:
   1. Stat cards with colored icon tiles (Revenue/Expenses/Net Profit/Cash)
   2. Statement badges (P&L blue, BS blue) as proper pills
   3. Category chips (Operating Expenses, Equity, etc.) in soft tints
   4. EDITABLE green pill consistent
   5. Workflow center stat cards with icons
   6. "Chips row" filter buttons for Current Scope etc.
   ============================================================ */

/* Currency toggle grid for the new Currency tab settings */
.currency-toggle-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 6px;
  max-height: 320px;
  overflow-y: auto;
  padding: 8px;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: rgba(248,250,253,.5);
}
body.theme-dark .currency-toggle-grid{
  background: rgba(15,18,42,.5);
  border-color: rgba(99,102,241,.18);
}
.currency-toggle{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border-radius: 7px;
  background: #fff;
  border: 1px solid rgba(208,216,230,.5);
  cursor: pointer;
  user-select: none;
  font-size: 11.5px;
  font-weight: 700;
  transition: all 120ms ease;
}
.currency-toggle:hover{
  background: var(--primary-soft);
  color: var(--primary);
  border-color: var(--primary);
}
.currency-toggle input{
  margin: 0 !important;
  width: 13px !important;
  height: 13px !important;
  min-height: 0 !important;
  padding: 0 !important;
  accent-color: var(--primary);
}
body.theme-dark .currency-toggle{
  background: rgba(30,34,68,.7);
  border-color: rgba(99,102,241,.22);
  color: #e2e8f0;
}
body.theme-dark .currency-toggle:hover{
  background: rgba(99,102,241,.22);
  border-color: #818cf8;
  color: #c7d2fe;
}

/* ──────────── STAT CARDS WITH COLORED ICONS ───────────── */
.stat-card{
  display: grid !important;
  grid-template-columns: 36px 1fr !important;
  gap: 10px !important;
  align-items: center !important;
  padding: 11px 13px !important;
  border-radius: 13px !important;
}
.stat-card::before{
  content: "";
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 10px;
  background-color: #dbeafe;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%231d4ed8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='4' width='16' height='16' rx='3'/><path d='M8 16V11M12 16V8M16 16v-3'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px;
}
/* Color-code stat cards by their label keyword */
.stat-card[data-stat-kind="revenue"]::before{
  background-color: #cffafe;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2306b6d4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m3 17 6-6 4 4 8-8'/><path d='M14 7h7v7'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px;
}
.stat-card .stat-label{ font-size: 9px !important; color: #64748b !important; letter-spacing: .08em !important; text-transform: uppercase; font-weight: 800 !important; }
.stat-card .stat-value{ font-size: 18px !important; font-weight: 800 !important; }
.stat-card .stat-hint{ font-size: 9.5px !important; }
body.theme-dark .stat-card .stat-label{ color: #94a3b8 !important; }
body.theme-dark .stat-card::before{
  background-color: rgba(99,102,241,.28);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23c7d2fe' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='4' width='16' height='16' rx='3'/><path d='M8 16V11M12 16V8M16 16v-3'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px;
}

/* ──────────── STATEMENT BADGE (P&L / BS) AS A PILL ───────────── */
.coa-grid tbody td:nth-child(2) select.coa-select{
  border-left: 0 !important;
  font-weight: 800 !important;
  text-align: center;
  background-color: var(--primary-soft) !important;
  color: var(--primary-700) !important;
  border: 1px solid rgba(29,78,216,.22) !important;
  border-radius: 999px !important;
  padding: 3px 22px 3px 12px !important;
  min-width: 56px;
}
body.theme-dark .coa-grid tbody td:nth-child(2) select.coa-select{
  background-color: rgba(99,102,241,.22) !important;
  color: #c7d2fe !important;
  border-color: rgba(99,102,241,.35) !important;
}

/* Category chip (3rd col) — soft purple tint */
.coa-grid tbody td:nth-child(3) select.coa-select{
  border-left: 0 !important;
  background-color: #f5f3ff !important;
  color: #5b21b6 !important;
  border: 1px solid rgba(139,92,246,.22) !important;
  border-radius: 999px !important;
  padding: 3px 22px 3px 12px !important;
  font-weight: 700;
}
body.theme-dark .coa-grid tbody td:nth-child(3) select.coa-select{
  background-color: rgba(139,92,246,.18) !important;
  color: #ddd6fe !important;
  border-color: rgba(139,92,246,.35) !important;
}

/* FSLI column — keep colored left bar as inset */
.coa-grid tbody td:nth-child(4) select.coa-select{
  border-left: 0 !important;
  background-color: rgba(236,254,255,.7) !important;
  color: #0e7490 !important;
  border: 1px solid rgba(6,182,212,.22) !important;
  border-radius: 8px !important;
  font-weight: 600;
}
body.theme-dark .coa-grid tbody td:nth-child(4) select.coa-select{
  background-color: rgba(6,182,212,.15) !important;
  color: #a5f3fc !important;
  border-color: rgba(6,182,212,.35) !important;
}

/* Item column (5th col) — neutral pill */
.coa-grid tbody td:nth-child(5) select.coa-select{
  border-left: 0 !important;
}

/* COA list rows get a colored left accent bar — design ref style */
.coa-item-row, .coa-grid tbody tr{
  position: relative;
}
.coa-item-row td:first-child, .coa-grid tbody tr td:first-child{
  border-left: 3px solid var(--primary);
  padding-left: 10px !important;
}
body.theme-dark .coa-item-row td:first-child,
body.theme-dark .coa-grid tbody tr td:first-child{
  border-left-color: #818cf8;
}

/* ──────────── EDITABLE / Mode pill — design ref ───────────── */
.status-badge.editable,
.status-badge.suggested{
  background: linear-gradient(180deg, #dcfce7, #bbf7d0) !important;
  color: #14532d !important;
  border: 1px solid rgba(22,163,74,.30) !important;
  font-size: 9.5px !important;
  font-weight: 800 !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 3px 9px !important;
  border-radius: 999px !important;
}
body.theme-dark .status-badge.editable,
body.theme-dark .status-badge.suggested{
  background: linear-gradient(180deg, rgba(34,197,94,.20), rgba(22,163,74,.12)) !important;
  color: #86efac !important;
  border-color: rgba(34,197,94,.40) !important;
}

/* ──────────── PAGE-HEAD ACTION BUTTONS (Import/Export/Filters/Add) ───
   The reference has TEXT + ICON buttons in the page-head. Don't
   force-icon-only on these specific labels. */
.page-head .actions .btn{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 6px 14px !important;
  font-size: 12.5px !important;
  height: 34px;
  border-radius: 9px;
}
.page-head .actions .btn.icon-only{
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
}

/* Workflow center stat tiles — 5 in a row, like reference */
.workflow-summary-grid-wide{
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
  gap: 10px !important;
}
.workflow-summary-grid{
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  gap: 10px !important;
}

/* "Chips row" filter buttons style for ALL COMPANIES / EUR VIEW / MAPPED DATA */
.chip-row{
  display: inline-flex; gap: 6px; flex-wrap: wrap;
}
.chip-row .btn{
  border-radius: 999px !important;
  padding: 5px 14px !important;
  height: 30px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.chip-row .btn.primary{
  background: linear-gradient(180deg, #2563eb, #1d4ed8) !important;
  box-shadow: 0 4px 12px rgba(29,78,216,.25) !important;
}

/* Tables — softer hover, design-ref alignment */
.grid tbody tr:hover{ background: rgba(239,246,255,.55) !important; }
body.theme-dark .grid tbody tr:hover{ background: rgba(99,102,241,.10) !important; }

/* Cash flow report section row in dark */
body.theme-dark .report .section-row td{
  background: rgba(99,102,241,.12) !important;
  color: #e0e7ff !important;
  border-radius: 6px;
}
body.theme-dark .report .total-row.heavy td{
  border-top: 2px solid #818cf8 !important;
  color: #ffffff !important;
}

/* Section row in light */
.report .section-row td{
  background: linear-gradient(180deg, #eff6ff, #f5f3ff) !important;
  font-weight: 800 !important;
  border-radius: 6px;
}

/* Smoother focus state on inputs */
input:focus-visible, select:focus-visible, textarea:focus-visible{
  border-color: #80a6ff !important;
  box-shadow: 0 0 0 3px rgba(29,78,216,.18) !important;
  outline: none;
}

/* Sidebar — match reference left-pill highlight */
.nav-btn.active, .nav-section-btn.active{
  background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%) !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(29,78,216,.28) !important;
  border-radius: 10px !important;
}
body.theme-dark .nav-btn.active, body.theme-dark .nav-section-btn.active{
  background: linear-gradient(180deg, #6366f1 0%, #4f46e5 100%) !important;
  box-shadow: 0 6px 16px rgba(99,102,241,.40) !important;
}

/* "Add Account" / "+ New Company" primary buttons in page-head — wider */
.page-head .actions .btn.primary{
  padding: 6px 16px !important;
  gap: 6px;
}

/* ============================================================
   DESIGN PASS v9 — MATCH REFERENCE IMAGE
   Goals:
   1. Semantic colored chips per data type (OpEx orange, Liab red, Equity purple, Assets teal)
   2. Compact row layout matching reference (tight padding, two-line cells)
   3. Stat cards with colored icon tiles
   4. Pagination & action buttons matching reference
   5. Reduce noise: thinner borders, calmer shadows, tighter spacing
   6. Polish purple/indigo accents in dark mode
   ============================================================ */

/* ---------- SEMANTIC CATEGORY CHIPS ---------- */
/* Per the reference image: OpEx = orange, Current Liabilities = red,
   Equity = purple, Current Assets = orange-yellow, Non-Current Assets = blue.
   Each chip gets a colored tinted background and matching text. */

/* Category chip — base styling already set in earlier blocks. Override
   per-category colors based on the option text content. We can't target
   <option> from CSS reliably, so we tint by the value the select shows.
   Instead, give the entire 3rd-column select a recognizable look that's
   readable regardless of which category is selected. */
.coa-grid tbody td:nth-child(3) select.coa-select,
.company-coa-grid tbody td:nth-child(3) select.coa-select{
  background-color: #fff7ed !important;   /* warm peach base */
  color: #9a3412 !important;
  border: 1px solid rgba(234,88,12,.25) !important;
  border-radius: 999px !important;
  padding: 3px 22px 3px 12px !important;
  font-weight: 700;
}
body.theme-dark .coa-grid tbody td:nth-child(3) select.coa-select,
body.theme-dark .company-coa-grid tbody td:nth-child(3) select.coa-select{
  background-color: rgba(234,88,12,.16) !important;
  color: #fdba74 !important;
  border-color: rgba(234,88,12,.35) !important;
}

/* FSLI chip — soft purple (Item names tend to be category-specific) */
.coa-grid tbody td:nth-child(4) select.coa-select,
.company-coa-grid tbody td:nth-child(4) select.coa-select{
  background-color: #faf5ff !important;
  color: #6b21a8 !important;
  border: 1px solid rgba(139,92,246,.20) !important;
  border-radius: 8px !important;
}
body.theme-dark .coa-grid tbody td:nth-child(4) select.coa-select,
body.theme-dark .company-coa-grid tbody td:nth-child(4) select.coa-select{
  background-color: rgba(139,92,246,.16) !important;
  color: #c4b5fd !important;
  border-color: rgba(139,92,246,.35) !important;
}

/* Item column (5th) — neutral pill matching reference */
.coa-grid tbody td:nth-child(5) select.coa-select{
  background-color: #f8fafc !important;
  color: #1e293b !important;
  border: 1px solid rgba(208,216,230,.6) !important;
  border-radius: 8px !important;
}
body.theme-dark .coa-grid tbody td:nth-child(5) select.coa-select{
  background-color: rgba(99,102,241,.12) !important;
  color: #c7d2fe !important;
  border-color: rgba(99,102,241,.25) !important;
}

/* Statement P&L / BS — soft blue pill */
.coa-grid tbody td:nth-child(2) select.coa-select{
  background-color: #eff6ff !important;
  color: #1e40af !important;
  border: 1px solid rgba(29,78,216,.20) !important;
  border-radius: 999px !important;
  padding: 3px 22px 3px 12px !important;
  font-weight: 800;
  min-width: 56px;
  text-align: center;
}
body.theme-dark .coa-grid tbody td:nth-child(2) select.coa-select{
  background-color: rgba(29,78,216,.18) !important;
  color: #93c5fd !important;
  border-color: rgba(29,78,216,.35) !important;
}

/* ---------- COMPACT ROW LAYOUT (matching reference) ---------- */
.coa-grid tbody tr td{
  padding: 8px 10px !important;
  vertical-align: middle !important;
}
.coa-grid tbody td:first-child{
  padding-left: 12px !important;
  border-left: 3px solid var(--primary);
}
body.theme-dark .coa-grid tbody td:first-child{
  border-left-color: #818cf8;
}
.coa-item-cell strong{
  font-size: 13px !important;
  font-weight: 800 !important;
  display: block;
  line-height: 1.2;
}
.coa-item-cell .coa-item-row-meta{
  font-size: 10.5px !important;
  color: #94a3b8 !important;
  margin-top: 2px !important;
  font-weight: 600;
}
body.theme-dark .coa-item-cell .coa-item-row-meta{
  color: #64748b !important;
}
.coa-name-input{
  font-size: 13px !important;
  font-weight: 700 !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  padding: 4px 6px !important;
  border-radius: 6px;
  width: 100%;
}
.coa-name-input:hover:not(:disabled){
  background: rgba(241,245,249,.6) !important;
}
.coa-name-input:focus{
  background: #fff !important;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(29,78,216,.15);
}
body.theme-dark .coa-name-input{
  color: #f1f5f9 !important;
}
body.theme-dark .coa-name-input:hover:not(:disabled){
  background: rgba(99,102,241,.10) !important;
}
body.theme-dark .coa-name-input:focus{
  background: rgba(15,18,42,.85) !important;
}

/* Make selects feel like proper pills (no native chevron, custom arrow) */
.coa-select{
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 9px center !important;
  background-size: 10px !important;
}
body.theme-dark .coa-select{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
}

/* Mode/EDITABLE pill — soft green per reference */
.status-badge{
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  font: 800 9.5px/1.3 Inter, Segoe UI, Arial, sans-serif !important;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.status-badge::before{
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
}

/* ---------- ACTION COLUMN — small icon buttons (reference) ---------- */
.coa-grid tbody td:last-child,
.action-cell{
  text-align: right !important;
  white-space: nowrap !important;
}
.coa-grid tbody td:last-child .btn.icon-only,
.action-cell .btn.icon-only,
.action-cell .icon-btn{
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  border-radius: 8px !important;
  background: rgba(248,250,253,.8) !important;
  border: 1px solid rgba(208,216,230,.5) !important;
  margin-left: 4px;
}
body.theme-dark .coa-grid tbody td:last-child .btn.icon-only,
body.theme-dark .action-cell .btn.icon-only,
body.theme-dark .action-cell .icon-btn{
  background: rgba(30,34,68,.7) !important;
  border-color: rgba(99,102,241,.22) !important;
}

/* ---------- STAT CARDS — vertical stack matching reference ---------- */
/* Reference: icon top-left, BIG number, small uppercase label below.
   The earlier 2-column grid forced labels to wrap awkwardly into 3+
   lines. We now use a clean vertical stack with gap, normal text wrap,
   and a max of 2 lines for labels. */
.workflow-summary-card{
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  align-items: flex-start !important;
  padding: 12px 14px !important;
  min-height: 90px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(208,216,230,.55) !important;
  background: linear-gradient(180deg, #ffffff, #fafbff) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 1px 3px rgba(15,23,42,.04) !important;
  position: relative;
}
.workflow-summary-card::before{
  content: "";
  display: block;
  width: 30px; height: 30px;
  border-radius: 9px;
  background-color: #dbeafe;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231d4ed8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='4' width='16' height='16' rx='3'/><path d='M8 16V11M12 16V8M16 16v-3'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px;
  flex-shrink: 0;
  margin-bottom: 2px;
}
.workflow-summary-card strong{
  font-size: 22px !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  display: block !important;
  color: #0f172a !important;
  letter-spacing: -.02em;
}
.workflow-summary-card span{
  font-size: 9.5px !important;
  font-weight: 800 !important;
  color: #64748b !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  display: block !important;
  line-height: 1.25 !important;
  /* allow up to 2 lines for long labels like "NEED CASH FLOW MAPPING";
     never break in the middle of a word */
  white-space: normal !important;
  word-break: keep-all;
  overflow-wrap: normal;
  hyphens: none;
}
body.theme-dark .workflow-summary-card{
  background: linear-gradient(180deg, #1f2547, #181c3c) !important;
  border-color: rgba(99,102,241,.25) !important;
}
body.theme-dark .workflow-summary-card::before{
  background-color: rgba(99,102,241,.28);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23c7d2fe' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='4' width='16' height='16' rx='3'/><path d='M8 16V11M12 16V8M16 16v-3'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px;
}
body.theme-dark .workflow-summary-card strong{ color: #f1f5f9 !important; }
body.theme-dark .workflow-summary-card span{ color: #94a3b8 !important; }

/* Color variations per card semantic content */
.workflow-summary-card[data-tone="success"]::before,
.workflow-summary-card[data-tone="green"]::before{
  background-color: #bbf7d0 !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m3 17 6-6 4 4 8-8'/><path d='M14 7h7v7'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 16px !important;
}
.workflow-summary-card[data-tone="warn"]::before,
.workflow-summary-card[data-tone="orange"]::before{
  background-color: #fed7aa !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23d97706' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 7v6M12 17h0'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 16px !important;
}
.workflow-summary-card[data-tone="purple"]::before{
  background-color: #ddd6fe !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237c3aed' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m12 3 2 5 5 2-5 2-2 5-2-5-5-2 5-2 2-5z'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 16px !important;
}

/* ---------- PAGE-HEAD POLISH ---------- */
/* Reference shows page-head with title + search + filter icon + favorite icon + action button */
.page-head{
  padding: 10px 14px !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, #ffffff, #fbfcfe) !important;
  border: 1px solid rgba(208,216,230,.6) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 1px 2px rgba(15,23,42,.03) !important;
}
.page-head h1{
  font-size: 18px !important;
  font-weight: 800 !important;
  letter-spacing: -.015em;
}
body.theme-dark .page-head{
  background: linear-gradient(180deg, #1f2547, #181c3c) !important;
  border-color: rgba(99,102,241,.20) !important;
}

/* ---------- PANELS — reduce visual noise ---------- */
.panel{
  border-radius: 14px !important;
  border: 1px solid rgba(208,216,230,.55) !important;
  box-shadow: 0 1px 2px rgba(15,23,42,.03) !important;
  padding: 12px !important;
}
body.theme-dark .panel{
  border-color: rgba(99,102,241,.20) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.25) !important;
}
.panel-title{
  font-size: 14px !important;
  font-weight: 800 !important;
  margin-bottom: 10px !important;
  letter-spacing: -.01em;
}
.panel-title-row{ margin-bottom: 8px !important; }

/* ---------- REPORT TABLE STYLING (matches reference) ---------- */
.report{
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}
.report th{
  font-size: 10px !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #64748b !important;
  padding: 8px 12px !important;
  border-bottom: 1px solid rgba(208,216,230,.5) !important;
  background: transparent !important;
}
.report td{
  padding: 7px 12px !important;
  font-size: 12px !important;
  border-bottom: 1px solid rgba(226,232,240,.4) !important;
}
.report .section-row > td{
  background: linear-gradient(180deg, rgba(239,246,255,.6), rgba(245,243,255,.5)) !important;
  font-weight: 800 !important;
  border-radius: 0 !important;
}
.report .total-row td{
  font-weight: 800 !important;
  background: linear-gradient(90deg, rgba(99,102,241,.06), rgba(139,92,246,.04)) !important;
}
.report .total-row.heavy td{
  background: linear-gradient(90deg, rgba(99,102,241,.14), rgba(139,92,246,.08)) !important;
  color: #4338ca !important;
  border-top: 2px solid #6366f1 !important;
}
body.theme-dark .report .section-row > td{
  background: rgba(99,102,241,.10) !important;
  color: #e0e7ff !important;
}
body.theme-dark .report .total-row td{
  background: rgba(99,102,241,.16) !important;
  color: #e0e7ff !important;
}
body.theme-dark .report .total-row.heavy td{
  background: linear-gradient(90deg, rgba(99,102,241,.30), rgba(139,92,246,.20)) !important;
  color: #ffffff !important;
  border-top-color: #818cf8 !important;
}

/* ---------- SIDEBAR — clean reference look ---------- */
.sidebar{
  padding: 14px 12px !important;
  border-right: 1px solid rgba(208,216,230,.55) !important;
  background: linear-gradient(180deg, #ffffff, #fafbff) !important;
  box-shadow: none !important;
}
body.theme-dark .sidebar{
  background: linear-gradient(180deg, #0c0f24, #11132f) !important;
  border-right-color: rgba(99,102,241,.18) !important;
}
.brand{
  padding: 0 !important;
  margin-bottom: 18px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.brand-logo, .brand-mark{
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 10px rgba(29,78,216,.18);
}
body.theme-dark .brand-logo,
body.theme-dark .brand-mark{
  box-shadow: 0 4px 14px rgba(99,102,241,.32);
}
.brand-name{ font-size: 14px !important; font-weight: 800 !important; }
.brand-sub{ font-size: 10px !important; color: #64748b !important; }
.brand-byline{ font-size: 9px !important; color: #94a3b8 !important; letter-spacing: .03em; }
.nav-btn, .nav-section-btn{
  border-radius: 10px !important;
  font-size: 12px !important;
  padding: 8px 12px !important;
  min-height: 32px;
  font-weight: 700 !important;
  color: #475569 !important;
}
.nav-btn:hover:not(.active),
.nav-section-btn:hover:not(.active){
  background: rgba(239,246,255,.85) !important;
  color: #1d4ed8 !important;
}
body.theme-dark .nav-btn:hover:not(.active),
body.theme-dark .nav-section-btn:hover:not(.active){
  background: rgba(99,102,241,.12) !important;
  color: #c7d2fe !important;
}
.nav-btn.active, .nav-section-btn.active{
  background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(29,78,216,.32) !important;
}
body.theme-dark .nav-btn.active,
body.theme-dark .nav-section-btn.active{
  background: linear-gradient(180deg, #818cf8 0%, #6366f1 100%) !important;
  box-shadow: 0 4px 14px rgba(99,102,241,.40) !important;
}
.nav-subbtn{
  border-radius: 8px !important;
  font-size: 11.5px !important;
  padding: 6px 10px !important;
  min-height: 28px;
  font-weight: 700 !important;
}

/* ---------- PAGINATION ---------- */
.pagination, .grid-pagination, .table-pagination{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  font-size: 11.5px;
  color: #64748b;
}
.pagination .page-info{ font-size: 11px; }
.pagination .page-numbers{ display: inline-flex; gap: 4px; }
.pagination .page-numbers .btn{
  min-width: 28px !important;
  height: 28px !important;
  padding: 0 8px !important;
  border-radius: 7px !important;
  font-size: 11.5px;
}

/* ---------- REDUCE EMPTY SPACE ---------- */
.app .main{
  padding: 6px 10px 12px !important;
}
.stats-grid{
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  gap: 10px !important;
}
.two-col{ gap: 12px !important; }
.companies-grid{ gap: 12px !important; }

/* ---------- SOFTER BACKGROUND (less visual noise) ---------- */
body.theme-light{
  background:
    radial-gradient(900px 500px at 10% 0%,  rgba(239,246,255,.55), transparent 50%),
    radial-gradient(900px 500px at 100% 100%, rgba(245,243,255,.55), transparent 50%),
    #f8fafc !important;
}
body.theme-dark{
  background:
    radial-gradient(1000px 500px at 10% 0%,  rgba(67,56,202,.16), transparent 55%),
    radial-gradient(900px 500px at 100% 100%, rgba(124,58,237,.12), transparent 55%),
    #0a0e22 !important;
}

/* ---------- TOAST POLISH ---------- */
.toast{
  border-radius: 12px !important;
  font-weight: 700;
  font-size: 12px;
  padding: 10px 14px !important;
  box-shadow: 0 10px 30px rgba(15,23,42,.15) !important;
}

/* ---------- DARK MODE: company-overview bar deeper indigo gradient ---------- */
body.theme-dark .company-overview-modal .modal-head.company-overview-bar{
  background: linear-gradient(135deg, #4338ca 0%, #6366f1 60%, #818cf8 100%) !important;
}

/* ---------- BUTTON in actions area — match reference compact size ---------- */
.btn.btn-compact{
  height: 30px !important;
  padding: 5px 12px !important;
  font-size: 11.5px !important;
  border-radius: 8px !important;
}

/* ============================================================
   📐 DESIGN PASS v10 — PEARL/NAVY PREMIUM FINANCIAL UI
   Per the user's detailed spec:
   - Light: pearl off-white bg, bright white cards layered on top,
     thin blue-gray borders, soft shadows, 3D floating effect
   - Dark: deep navy gradient, dark glass panels with blue borders,
     glowing buttons, vivid contrast, dimensional depth
   - Tighter sidebar (less mobile-style padding)
   - Less main-content margin (use horizontal space)
   - Stronger button hierarchy (primary pops, secondary calm)
   - Inner cards subtly tinted (blue/purple/green hints)
   - KPI cards: inline icon HTML (not CSS pseudo) for reliable render
   ============================================================ */

/* ---------- LIGHT MODE BACKGROUND (pearl) ---------- */
body.theme-light, body:not(.theme-dark){
  background:
    radial-gradient(900px 400px at 0% 0%, rgba(219,234,254,.45), transparent 60%),
    radial-gradient(800px 400px at 100% 100%, rgba(237,233,254,.40), transparent 60%),
    #eef2f7 !important;
}

/* ---------- DARK MODE BACKGROUND (deep navy) ---------- */
body.theme-dark{
  background:
    radial-gradient(900px 500px at 10% 0%, rgba(67,56,202,.22), transparent 55%),
    radial-gradient(900px 500px at 100% 100%, rgba(124,58,237,.18), transparent 55%),
    linear-gradient(180deg, #0a0e22 0%, #0d1230 50%, #0a0e22 100%) !important;
}

/* ---------- PANELS: bright white cards with floating depth ---------- */
.panel{
  background: #ffffff !important;
  border: 1px solid #dbe1ec !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 1px 2px rgba(15,23,42,.04),
    0 6px 18px rgba(15,23,42,.06) !important;
  border-radius: 14px !important;
  padding: 14px !important;
}
body.theme-dark .panel{
  background: linear-gradient(180deg, #1a1f43, #14182f) !important;
  border: 1px solid rgba(99,102,241,.22) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.04) inset,
    0 1px 3px rgba(0,0,0,.40),
    0 12px 32px rgba(0,0,0,.30),
    0 0 0 1px rgba(99,102,241,.06) !important;
}

/* ---------- KPI TILE: inline icon, slim, tinted ---------- */
.workflow-summary-card{
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 6px !important;
  padding: 12px 14px !important;
  min-height: 92px !important;
  border-radius: 12px !important;
  border: 1px solid #e2e8f0 !important;
  background: linear-gradient(180deg, #ffffff, #fafbff) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.95) inset,
    0 1px 2px rgba(15,23,42,.05) !important;
  position: relative;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.workflow-summary-card:hover{
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.95) inset,
    0 4px 14px rgba(29,78,216,.12) !important;
}
/* KILL the pseudo-element icon — we render real <svg> in HTML now */
.workflow-summary-card::before{ display: none !important; content: none !important; }

/* The new inline-icon container */
.workflow-summary-icon{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 9px !important;
  margin-bottom: 2px !important;
  background: #dbeafe;
  color: #1d4ed8;
  flex-shrink: 0;
}
.workflow-summary-icon svg{
  width: 16px !important;
  height: 16px !important;
  display: block;
}
/* Tone variants — soft tinted icon tiles */
.workflow-summary-card[data-tone="warn"] .workflow-summary-icon{
  background: #fef3c7; color: #b45309;
}
.workflow-summary-card[data-tone="orange"] .workflow-summary-icon{
  background: #ffedd5; color: #c2410c;
}
.workflow-summary-card[data-tone="purple"] .workflow-summary-icon{
  background: #ede9fe; color: #6d28d9;
}
.workflow-summary-card[data-tone="success"] .workflow-summary-icon{
  background: #d1fae5; color: #047857;
}
.workflow-summary-card[data-tone="info"] .workflow-summary-icon{
  background: #dbeafe; color: #1d4ed8;
}
.workflow-summary-card strong{
  font-size: 22px !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  color: #0f172a !important;
  letter-spacing: -.025em;
  display: block !important;
}
.workflow-summary-card span{
  font-size: 10px !important;
  font-weight: 700 !important;
  color: #64748b !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  display: block !important;
  line-height: 1.25 !important;
  white-space: normal !important;
  word-break: keep-all;
  overflow-wrap: normal;
}

/* Dark mode KPI tile */
body.theme-dark .workflow-summary-card{
  background: linear-gradient(180deg, rgba(31,37,71,.85), rgba(20,24,52,.85)) !important;
  border-color: rgba(99,102,241,.25) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.04) inset,
    0 4px 16px rgba(0,0,0,.35) !important;
}
body.theme-dark .workflow-summary-card:hover{
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 8px 22px rgba(99,102,241,.25) !important;
}
body.theme-dark .workflow-summary-card strong{ color: #f1f5f9 !important; }
body.theme-dark .workflow-summary-card span{ color: #94a3b8 !important; }
body.theme-dark .workflow-summary-card .workflow-summary-icon{
  background: rgba(99,102,241,.22); color: #c7d2fe;
}
body.theme-dark .workflow-summary-card[data-tone="warn"] .workflow-summary-icon{
  background: rgba(217,119,6,.20); color: #fbbf24;
}
body.theme-dark .workflow-summary-card[data-tone="orange"] .workflow-summary-icon{
  background: rgba(234,88,12,.20); color: #fb923c;
}
body.theme-dark .workflow-summary-card[data-tone="purple"] .workflow-summary-icon{
  background: rgba(124,58,237,.22); color: #c4b5fd;
}
body.theme-dark .workflow-summary-card[data-tone="success"] .workflow-summary-icon{
  background: rgba(5,150,105,.22); color: #6ee7b7;
}
body.theme-dark .workflow-summary-card[data-tone="info"] .workflow-summary-icon{
  background: rgba(29,78,216,.30); color: #93c5fd;
}

/* ---------- SIDEBAR: tighter, denser ---------- */
.sidebar{
  padding: 10px 8px !important;
  width: auto;
}
.app{ grid-template-columns: 188px 1fr !important; }
@media (min-width: 1400px){ .app{ grid-template-columns: 208px 1fr !important; } }
.brand{
  padding: 4px 4px 12px !important;
  margin-bottom: 6px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  gap: 9px !important;
}
.brand-logo, .brand-mark{
  width: 34px !important; height: 34px !important;
  border-radius: 10px !important;
}
.brand-name{ font-size: 13.5px !important; }
.brand-sub{ font-size: 9.5px !important; }
.brand-byline{ font-size: 8px !important; }
.nav{ gap: 3px !important; margin: 6px 0 !important; }
.nav-btn, .nav-section-btn{
  padding: 7px 10px !important;
  font-size: 12px !important;
  min-height: 30px !important;
  border-radius: 9px !important;
  font-weight: 700 !important;
}
.nav-subbtn{
  padding: 5px 9px !important;
  font-size: 11px !important;
  min-height: 26px !important;
  border-radius: 8px !important;
}
.nav-section{ gap: 2px !important; }
.nav-subnav{ gap: 2px !important; padding-left: 8px !important; }
.side-box{ padding: 9px !important; }

/* ---------- MAIN AREA: less wasted horizontal space ---------- */
.app .main{
  padding: 8px 12px 14px !important;
}

/* ---------- PAGE-HEAD: tight, anchored ---------- */
.page-head{
  padding: 10px 14px !important;
  border-radius: 12px !important;
  margin-bottom: 10px !important;
  background: #ffffff !important;
  border: 1px solid #dbe1ec !important;
  box-shadow: 0 1px 2px rgba(15,23,42,.04) !important;
}
body.theme-dark .page-head{
  background: linear-gradient(180deg, #1a1f43, #14182f) !important;
  border-color: rgba(99,102,241,.22) !important;
}
.page-head h1{
  font-size: 17px !important;
  font-weight: 800 !important;
  margin: 0 !important;
  letter-spacing: -.01em;
}
body.theme-dark .page-head h1{ color: #f1f5f9 !important; }

/* ---------- PRIMARY BUTTONS: vivid royal blue, glow on hover ---------- */
.btn.primary{
  background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%) !important;
  color: #ffffff !important;
  border: 0 !important;
  font-weight: 800 !important;
  letter-spacing: -.005em;
  box-shadow:
    0 1px 0 rgba(255,255,255,.30) inset,
    0 4px 12px rgba(29,78,216,.32) !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.10);
}
.btn.primary:hover:not(:disabled){
  background: linear-gradient(180deg, #1d4ed8 0%, #1e3a8a 100%) !important;
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.30) inset,
    0 10px 24px rgba(29,78,216,.48) !important;
}
body.theme-dark .btn.primary{
  background: linear-gradient(180deg, #6366f1 0%, #4f46e5 100%) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.20) inset,
    0 0 0 1px rgba(99,102,241,.40),
    0 6px 18px rgba(99,102,241,.50) !important;
}
body.theme-dark .btn.primary:hover:not(:disabled){
  background: linear-gradient(180deg, #818cf8 0%, #6366f1 100%) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.25) inset,
    0 0 0 1px rgba(129,140,248,.55),
    0 12px 28px rgba(99,102,241,.65) !important;
}

/* ---------- SECONDARY BUTTONS: calm, gentle ---------- */
.btn.secondary{
  background: #ffffff !important;
  border: 1px solid #dbe1ec !important;
  color: #334155 !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 2px rgba(15,23,42,.03) !important;
}
.btn.secondary:hover:not(:disabled){
  background: #f1f5f9 !important;
  border-color: #2563eb !important;
  color: #1d4ed8 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(29,78,216,.10) !important;
}
body.theme-dark .btn.secondary{
  background: linear-gradient(180deg, #1a1f43, #14182f) !important;
  border-color: rgba(99,102,241,.25) !important;
  color: #cbd5e1 !important;
}
body.theme-dark .btn.secondary:hover:not(:disabled){
  background: rgba(99,102,241,.18) !important;
  border-color: #818cf8 !important;
  color: #e0e7ff !important;
}

/* ---------- WORKFLOW CENTER LAYOUT — denser, no wasted space ---------- */
.workflow-center-panel{
  padding: 14px !important;
  margin-bottom: 12px !important;
}
.workflow-overview-shell{
  margin-bottom: 12px !important;
  align-items: center;
}
.workflow-overview-shell .panel-title{
  font-size: 14px !important;
  margin-bottom: 0 !important;
}
.workflow-summary-grid{ gap: 10px !important; }
.workflow-company-grid{
  gap: 12px !important;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)) !important;
}
.workflow-company-card{
  padding: 14px !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  border: 1px solid #dbe1ec !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.95) inset,
    0 4px 14px rgba(15,23,42,.05) !important;
}
body.theme-dark .workflow-company-card{
  background: linear-gradient(180deg, #1a1f43, #14182f) !important;
  border-color: rgba(99,102,241,.22) !important;
}
.workflow-company-head{ margin-bottom: 10px !important; }
.workflow-company-name{ font-size: 15px !important; }

/* Per-company inner stat grid — match reference density */
.workflow-company-card .workflow-summary-grid{
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
}
.workflow-company-card .workflow-summary-card{
  min-height: 80px !important;
  padding: 10px 11px !important;
}
.workflow-company-card .workflow-summary-card strong{
  font-size: 18px !important;
}

/* ---------- "NEXT ROW" actions strip — clean separator ---------- */
.workflow-next-row{
  margin-top: 12px !important;
  padding: 10px !important;
  border-radius: 10px !important;
  background: rgba(241,245,249,.7);
}
body.theme-dark .workflow-next-row{
  background: rgba(15,18,42,.55);
}
.workflow-next-card{
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

/* ---------- TYPOGRAPHY: sharper, more navy in light ---------- */
body.theme-light, body:not(.theme-dark){
  color: #0f172a !important;
}
body.theme-light h1, body.theme-light h2, body.theme-light h3,
body:not(.theme-dark) h1, body:not(.theme-dark) h2, body:not(.theme-dark) h3{
  color: #0f172a !important;
}

/* ---------- TAGS / PILLS (pastel) ---------- */
.workflow-pill{
  padding: 3px 9px !important;
  border-radius: 999px !important;
  font: 800 9.5px/1.3 Inter, Segoe UI, Arial, sans-serif !important;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.workflow-pill.waiting{
  background: linear-gradient(180deg, #dbeafe, #bfdbfe) !important;
  color: #1e40af !important;
  border: 1px solid rgba(29,78,216,.20) !important;
}
body.theme-dark .workflow-pill.waiting{
  background: rgba(29,78,216,.30) !important;
  color: #93c5fd !important;
  border-color: rgba(99,102,241,.40) !important;
}

/* "55 to review" style pill — make it pop */
.workflow-pill.review,
.workflow-pill.import{
  background: linear-gradient(180deg, #fef3c7, #fde68a) !important;
  color: #92400e !important;
  border: 1px solid rgba(217,119,6,.25) !important;
}
body.theme-dark .workflow-pill.review,
body.theme-dark .workflow-pill.import{
  background: rgba(234,88,12,.20) !important;
  color: #fcd34d !important;
  border-color: rgba(217,119,6,.40) !important;
}

/* ---------- COMPANY HEADER row tighter ---------- */
.workflow-company-name + .muted, .workflow-company-card .muted{
  font-size: 11px !important;
  margin-top: 2px;
}

/* ---------- SIDEBAR nav active state — vivid royal blue ---------- */
.nav-btn.active, .nav-section-btn.active{
  background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%) !important;
  color: #ffffff !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.25) inset,
    0 4px 12px rgba(29,78,216,.32) !important;
  border-radius: 10px !important;
}
body.theme-dark .nav-btn.active,
body.theme-dark .nav-section-btn.active{
  background: linear-gradient(180deg, #6366f1 0%, #4f46e5 100%) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.20) inset,
    0 0 0 1px rgba(99,102,241,.45),
    0 6px 18px rgba(99,102,241,.50) !important;
}

/* ---------- HEADER ACTIONS / FLOATING CONTROLS ---------- */
.background-controls{
  top: 4px !important;
  right: 6px !important;
}
.page-head .actions .btn.primary{
  height: 32px;
  padding: 0 14px;
}

/* ============================================================
   ✨ POLISH PASS v11 — SHARPER TEXT, MORE 3D, GLOWING BRAND
   ============================================================ */

/* ---------- SHARPER, MORE VIVID TEXT ---------- */
html, body{
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: geometricPrecision !important;
  font-feature-settings: "cv02","cv03","cv04","cv11","ss01","ss03" !important;
  font-variant-ligatures: contextual common-ligatures !important;
}

/* Headings — stronger weight, tighter tracking, deeper navy */
h1, h2, h3, h4, .page-head h1, .panel-title{
  font-weight: 900 !important;
  letter-spacing: -.022em !important;
  color: #0a1734 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.6);
}
body.theme-dark h1, body.theme-dark h2, body.theme-dark h3,
body.theme-dark h4, body.theme-dark .page-head h1, body.theme-dark .panel-title{
  color: #f8fafc !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.45), 0 0 12px rgba(99,102,241,.18) !important;
}

/* Body text — sharper, slightly darker */
body, body.theme-light, body:not(.theme-dark){
  color: #1e293b !important;
}

/* Big numbers (KPI strong, stat-value, report totals) — extra crisp */
.workflow-summary-card strong,
.stat-value,
.report .total-row td,
.coa-item-cell strong{
  font-weight: 900 !important;
  letter-spacing: -.028em !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.55);
  color: #0a1734 !important;
}
body.theme-dark .workflow-summary-card strong,
body.theme-dark .stat-value,
body.theme-dark .coa-item-cell strong{
  color: #f8fafc !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.55), 0 0 8px rgba(165,180,252,.20);
}

/* Labels (uppercase small text) — heavier, slightly darker */
.workflow-summary-card span,
.stat-label,
.report th,
.muted{
  font-weight: 800 !important;
}

/* Inputs and selects — sharper border, slightly thicker */
input, select, textarea{
  border-width: 1.5px !important;
  color: #0a1734 !important;
  font-weight: 600 !important;
}
body.theme-dark input,
body.theme-dark select,
body.theme-dark textarea{
  color: #f1f5f9 !important;
}

/* ---------- 3D DEPTH ON PANELS / CARDS ---------- */
.panel, .workflow-company-card, .stat-card, .report-wrap, .side-box, .modal{
  background:
    linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(252,253,255,1) 100%) !important;
  border: 1px solid #d6dde9 !important;
  box-shadow:
    /* inner top highlight */
    0 1px 0 rgba(255,255,255,.95) inset,
    /* inner bottom slight darken (gives roundness) */
    0 -1px 0 rgba(15,23,42,.02) inset,
    /* contact shadow (close to surface) */
    0 1px 2px rgba(15,23,42,.05),
    /* mid shadow (perceived elevation) */
    0 6px 16px rgba(15,23,42,.06),
    /* far shadow (depth halo) */
    0 18px 36px rgba(15,23,42,.05) !important;
  border-radius: 14px !important;
}
body.theme-dark .panel,
body.theme-dark .workflow-company-card,
body.theme-dark .stat-card,
body.theme-dark .report-wrap,
body.theme-dark .side-box,
body.theme-dark .modal{
  background: linear-gradient(180deg, #1d2348 0%, #161a38 100%) !important;
  border: 1px solid rgba(99,102,241,.28) !important;
  box-shadow:
    /* inner top highlight (subtle gloss) */
    0 1px 0 rgba(255,255,255,.06) inset,
    /* inner bottom darken */
    0 -1px 0 rgba(0,0,0,.30) inset,
    /* contact shadow */
    0 1px 2px rgba(0,0,0,.55),
    /* perceived elevation */
    0 8px 20px rgba(0,0,0,.40),
    /* depth halo */
    0 24px 48px rgba(0,0,0,.30),
    /* indigo rim glow */
    0 0 0 1px rgba(99,102,241,.10),
    0 0 22px rgba(99,102,241,.10) !important;
}

/* KPI tiles — slightly more pronounced 3D */
.workflow-summary-card{
  background: linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,1) inset,
    0 -1px 0 rgba(15,23,42,.02) inset,
    0 1px 2px rgba(15,23,42,.04),
    0 4px 12px rgba(15,23,42,.05),
    0 14px 28px rgba(15,23,42,.04) !important;
}
.workflow-summary-card:hover{
  transform: translateY(-2px) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,1) inset,
    0 2px 4px rgba(15,23,42,.06),
    0 10px 24px rgba(29,78,216,.16),
    0 22px 40px rgba(15,23,42,.08) !important;
}
body.theme-dark .workflow-summary-card{
  background: linear-gradient(180deg, #1f2547 0%, #161a38 100%) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.05) inset,
    0 1px 2px rgba(0,0,0,.45),
    0 6px 16px rgba(0,0,0,.40),
    0 18px 32px rgba(0,0,0,.30),
    0 0 0 1px rgba(99,102,241,.14) !important;
}
body.theme-dark .workflow-summary-card:hover{
  transform: translateY(-2px) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.08) inset,
    0 4px 14px rgba(99,102,241,.32),
    0 24px 44px rgba(0,0,0,.45),
    0 0 0 1px rgba(99,102,241,.30) !important;
}

/* Icon tile inside KPI — give it micro-depth too */
.workflow-summary-icon{
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 1px 2px rgba(15,23,42,.10);
}
body.theme-dark .workflow-summary-icon{
  box-shadow:
    0 1px 0 rgba(255,255,255,.10) inset,
    0 2px 6px rgba(0,0,0,.35);
}

/* ---------- LOGO: 3D GLOSSY TREATMENT ---------- */
.brand-logo, .brand-mark{
  position: relative;
  width: 40px !important;
  height: 40px !important;
  border-radius: 11px !important;
  background: linear-gradient(145deg, #ffffff 0%, #e0e7ff 60%, #c7d2fe 100%) !important;
  box-shadow:
    /* inner highlight (top gloss) */
    0 1px 0 rgba(255,255,255,.9) inset,
    0 4px 6px rgba(255,255,255,.4) inset,
    /* inner bottom darken (curvature) */
    0 -2px 4px rgba(29,78,216,.08) inset,
    /* outer drop (elevation) */
    0 4px 10px rgba(29,78,216,.30),
    0 10px 20px rgba(29,78,216,.20),
    /* outer glow */
    0 0 24px rgba(99,102,241,.30) !important;
  border: 1px solid rgba(255,255,255,.6) !important;
  padding: 3px !important;
  object-fit: contain;
}
body.theme-dark .brand-logo,
body.theme-dark .brand-mark{
  background: linear-gradient(145deg, #6366f1 0%, #4f46e5 50%, #4338ca 100%) !important;
  box-shadow:
    /* inner top gloss */
    0 1px 0 rgba(255,255,255,.30) inset,
    0 4px 8px rgba(255,255,255,.15) inset,
    /* inner bottom darken */
    0 -2px 6px rgba(0,0,0,.25) inset,
    /* outer drop */
    0 6px 14px rgba(99,102,241,.55),
    0 12px 28px rgba(99,102,241,.40),
    /* aura glow */
    0 0 32px rgba(129,140,248,.45) !important;
  border: 1px solid rgba(165,180,252,.45) !important;
}

/* ---------- APP NAME: VIVID + SOFT GLOW ---------- */
.brand-name{
  font-size: 15px !important;
  font-weight: 900 !important;
  letter-spacing: .02em !important;
  background: linear-gradient(135deg, #1e40af 0%, #4338ca 50%, #6366f1 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  text-shadow: 0 0 12px rgba(99,102,241,.22),
               0 1px 0 rgba(255,255,255,.6) !important;
  /* The text-shadow won't render on the clipped text directly, so we use a
     filter for the glow */
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.6)) drop-shadow(0 0 8px rgba(99,102,241,.18));
}
body.theme-dark .brand-name{
  background: linear-gradient(135deg, #c7d2fe 0%, #a5b4fc 50%, #818cf8 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  filter:
    drop-shadow(0 0 12px rgba(165,180,252,.45))
    drop-shadow(0 0 22px rgba(99,102,241,.32))
    drop-shadow(0 1px 0 rgba(0,0,0,.40));
}

.brand-sub{
  font-size: 10px !important;
  color: #475569 !important;
  font-weight: 700 !important;
  letter-spacing: .01em;
}
body.theme-dark .brand-sub{
  color: #94a3b8 !important;
}
.brand-byline{
  font-size: 9px !important;
  font-weight: 800 !important;
  color: #6366f1 !important;
  letter-spacing: .05em;
}
body.theme-dark .brand-byline{
  color: #818cf8 !important;
  text-shadow: 0 0 8px rgba(129,140,248,.40);
}

/* ---------- TABLE ROWS — slight 3D layering ---------- */
.grid tbody tr td{
  background: linear-gradient(180deg, #ffffff, #fcfdff);
  transition: background 100ms ease, transform 100ms ease;
}
.grid tbody tr:nth-child(even) td{
  background: linear-gradient(180deg, #fafbff, #f7f8fc);
}
.grid tbody tr:hover td{
  background: linear-gradient(180deg, #eef4ff, #e6edff) !important;
}
body.theme-dark .grid tbody tr td{
  background: linear-gradient(180deg, rgba(31,37,71,.55), rgba(20,24,52,.55));
}
body.theme-dark .grid tbody tr:nth-child(even) td{
  background: linear-gradient(180deg, rgba(99,102,241,.06), rgba(99,102,241,.03));
}
body.theme-dark .grid tbody tr:hover td{
  background: linear-gradient(180deg, rgba(99,102,241,.18), rgba(99,102,241,.12)) !important;
}

/* ---------- PILLS / BADGES — sharper text ---------- */
.pill, .status-badge, .workflow-pill{
  font-weight: 900 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.4);
}
body.theme-dark .pill, body.theme-dark .status-badge, body.theme-dark .workflow-pill{
  text-shadow: 0 1px 0 rgba(0,0,0,.30);
}

/* ---------- PRIMARY BUTTON — extra glow + crisper label ---------- */
.btn.primary{
  font-weight: 900 !important;
  letter-spacing: -.005em;
  text-shadow: 0 1px 0 rgba(0,0,0,.18);
}
body.theme-dark .btn.primary{
  text-shadow: 0 1px 0 rgba(0,0,0,.35), 0 0 8px rgba(165,180,252,.40);
}

/* ---------- SIDEBAR active nav — small glow ---------- */
.nav-btn.active, .nav-section-btn.active{
  text-shadow: 0 1px 0 rgba(0,0,0,.20);
  position: relative;
}
body.theme-dark .nav-btn.active,
body.theme-dark .nav-section-btn.active{
  text-shadow: 0 1px 0 rgba(0,0,0,.40), 0 0 10px rgba(165,180,252,.30);
}

/* ---------- REPORT NUMBERS — crisp + slight depth ---------- */
.report .right{
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.005em;
}
.report .total-row.heavy td{
  text-shadow: 0 1px 0 rgba(255,255,255,.4);
}
body.theme-dark .report .total-row.heavy td{
  text-shadow: 0 1px 0 rgba(0,0,0,.40), 0 0 12px rgba(165,180,252,.30);
}

/* Soften any remaining low-contrast areas */
.muted{ color: #475569 !important; }
body.theme-dark .muted{ color: #a3b5c9 !important; }

/* ============================================================
   🔧 BLUR FIX + SCALE DOWN + BRAND COLOR (v12)
   - Remove every filter:drop-shadow on TEXT (it rasterizes glyphs)
   - Remove background-clip:text on brand name (subpixel blur)
   - Use simple text-shadow only — preserves glyph sharpness
   - Reduce scale ~12% via smaller base font + tighter spacing
   - Brand name: SOLID BLACK in light mode, SOLID PURPLE in dark
   ============================================================ */

/* Sharper rendering — but use SUBPIXEL antialiasing where best.
   geometricPrecision can soften text on some displays; legibility wins. */
html, body{
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
}

/* Kill every filter:drop-shadow on text — that's the main blur cause */
h1, h2, h3, h4, .panel-title, .page-head h1,
.brand-name, .brand-sub, .brand-byline,
.workflow-summary-card strong, .stat-value,
.report .total-row td, .coa-item-cell strong,
.report .right, .nav-btn.active, .nav-section-btn.active,
.btn.primary, .pill, .status-badge, .workflow-pill{
  filter: none !important;
}

/* Lighter, single-layer text-shadows that don't blur the glyphs */
h1, h2, h3, h4, .panel-title, .page-head h1{
  text-shadow: 0 1px 0 rgba(255,255,255,.5) !important;
}
body.theme-dark h1, body.theme-dark h2, body.theme-dark h3,
body.theme-dark h4, body.theme-dark .panel-title, body.theme-dark .page-head h1{
  text-shadow: 0 1px 0 rgba(0,0,0,.35) !important;
}

.workflow-summary-card strong, .stat-value,
.coa-item-cell strong, .report .total-row td{
  text-shadow: 0 1px 0 rgba(255,255,255,.4) !important;
}
body.theme-dark .workflow-summary-card strong,
body.theme-dark .stat-value,
body.theme-dark .coa-item-cell strong,
body.theme-dark .report .total-row td{
  text-shadow: 0 1px 0 rgba(0,0,0,.40) !important;
}

/* Force pixel-aligned rendering — never half-pixel positions */
.workflow-summary-card, .stat-card, .panel, .nav-btn, .nav-section-btn,
.btn, .brand, .brand-logo, .brand-mark, h1, h2, h3{
  transform: translateZ(0);
  backface-visibility: hidden;
}
.workflow-summary-card:hover{
  /* hover lift is fine but use whole pixels to avoid blur */
  transform: translateY(-2px) translateZ(0) !important;
}

/* ============================================================
   APP NAME — solid BLACK in light, solid PURPLE in dark
   ============================================================ */
.brand-name{
  /* Reset previous gradient/clip tricks that caused blur */
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  filter: none !important;
  /* Solid color for crisp glyphs */
  color: #000000 !important;
  font-weight: 900 !important;
  font-size: 15px !important;
  letter-spacing: .015em !important;
  /* Soft glow via text-shadow (does NOT blur the letters themselves,
     only adds a halo behind them) */
  text-shadow:
    0 0 1px rgba(0,0,0,.6),
    0 0 8px rgba(15,23,42,.18),
    0 0 16px rgba(15,23,42,.10),
    0 1px 0 rgba(255,255,255,.7) !important;
}
body.theme-dark .brand-name{
  color: #c4b5fd !important;       /* solid soft-purple */
  text-shadow:
    0 0 1px rgba(196,181,253,.85),
    0 0 8px rgba(167,139,250,.55),
    0 0 18px rgba(139,92,246,.45),
    0 0 28px rgba(124,58,237,.30),
    0 1px 0 rgba(0,0,0,.45) !important;
}

.brand-sub{
  filter: none !important;
  color: #475569 !important;
  text-shadow: none !important;
}
body.theme-dark .brand-sub{
  color: #94a3b8 !important;
}
.brand-byline{
  filter: none !important;
  color: #4338ca !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.5) !important;
}
body.theme-dark .brand-byline{
  color: #a5b4fc !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.40) !important;
}

/* ============================================================
   SCALE DOWN ~12% — everything tighter, smaller fonts
   ============================================================ */
html{ font-size: 12.5px !important; }
body{ font-size: 11.5px !important; }

/* Page head */
.page-head{ padding: 9px 12px !important; }
.page-head h1{ font-size: 16px !important; }

/* Sidebar */
.app{ grid-template-columns: 178px 1fr !important; }
@media (min-width: 1400px){ .app{ grid-template-columns: 196px 1fr !important; } }
.sidebar{ padding: 9px 7px !important; }
.brand{ padding: 4px !important; margin-bottom: 6px !important; gap: 8px !important; }
.brand-logo, .brand-mark{ width: 36px !important; height: 36px !important; border-radius: 10px !important; }
.brand-sub{ font-size: 9.5px !important; line-height: 1.2 !important; }
.brand-byline{ font-size: 8.5px !important; line-height: 1.2 !important; }
.nav-btn, .nav-section-btn{
  padding: 6px 9px !important;
  font-size: 11.5px !important;
  min-height: 28px !important;
}
.nav-subbtn{
  padding: 5px 8px !important;
  font-size: 10.5px !important;
  min-height: 24px !important;
}

/* Main content area */
.app .main{ padding: 6px 10px 12px !important; }

/* Panels */
.panel{ padding: 12px !important; }
.panel-title{ font-size: 13px !important; margin-bottom: 8px !important; }

/* KPI tiles - smaller */
.workflow-summary-card{
  padding: 10px 12px !important;
  min-height: 80px !important;
}
.workflow-summary-icon{
  width: 26px !important;
  height: 26px !important;
  border-radius: 8px !important;
}
.workflow-summary-icon svg{
  width: 14px !important;
  height: 14px !important;
}
.workflow-summary-card strong{ font-size: 19px !important; }
.workflow-summary-card span{ font-size: 9px !important; }

/* Inner per-company stat tiles even smaller */
.workflow-company-card .workflow-summary-card{
  min-height: 70px !important;
  padding: 9px 10px !important;
}
.workflow-company-card .workflow-summary-card strong{ font-size: 16px !important; }

/* Stat cards (Revenue/Expenses/etc) */
.stat-card{ padding: 9px 11px !important; }
.stat-label{ font-size: 9px !important; }
.stat-value{ font-size: 16px !important; }
.stat-hint{ font-size: 9px !important; }

/* Buttons */
.btn{
  min-height: 28px !important;
  padding: 5px 10px !important;
  font-size: 11.5px !important;
}
.btn.small{
  min-height: 24px !important;
  padding: 3px 8px !important;
  font-size: 11px !important;
}
.btn.btn-compact{
  height: 28px !important;
  padding: 4px 11px !important;
  font-size: 11px !important;
}
.btn.icon-only, .icon-btn{
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
}
.btn.icon-only svg, .icon-btn svg{
  width: 13px !important;
  height: 13px !important;
}

/* Inputs */
input, select, textarea{
  min-height: 28px !important;
  font-size: 11.5px !important;
  padding: 4px 8px !important;
}
select{ padding-right: 24px !important; }

/* Grid cells */
.grid th, .grid td{ padding: 6px 9px !important; font-size: 11.5px !important; }
.grid.compact th, .grid.compact td{ padding: 4px 7px !important; font-size: 11px !important; }
.grid th{ font-size: 9.5px !important; }

/* COA row chips */
.coa-grid tbody td:nth-child(2) select.coa-select{
  padding: 3px 20px 3px 10px !important;
  font-size: 10.5px !important;
  min-width: 52px;
}
.coa-grid tbody td:nth-child(3) select.coa-select,
.coa-grid tbody td:nth-child(4) select.coa-select{
  padding: 3px 20px 3px 10px !important;
  font-size: 10.5px !important;
}

/* Status / mode pills */
.status-badge{
  padding: 2px 8px !important;
  font-size: 8.5px !important;
}
.pill{
  padding: 2px 8px !important;
  font-size: 9px !important;
}
.workflow-pill{
  padding: 3px 8px !important;
  font-size: 9px !important;
}

/* Modal */
.modal-head{ padding: 10px 14px !important; }
.modal-head h3{ font-size: 12.5px !important; }
.modal-body{ padding: 12px 14px !important; }
.modal-foot{ padding: 9px 14px !important; }

/* Floating background-controls */
.background-controls{
  top: 4px !important;
  right: 6px !important;
  padding: 2px !important;
}
.background-controls > .btn.icon-only,
.background-controls > .background-toggle{
  width: 22px !important;
  min-width: 22px !important;
  height: 22px !important;
}
.background-controls > .btn.icon-only svg,
.background-controls > .background-toggle svg{
  width: 11px !important;
  height: 11px !important;
}

/* Toast */
.toast{ font-size: 11.5px !important; padding: 9px 13px !important; }

/* Stat-value gradient (had filter that may blur) - use solid */
.stat-value{
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  color: #0f172a !important;
  filter: none !important;
}
body.theme-dark .stat-value{
  color: #f1f5f9 !important;
}

/* Logo: keep glossy 3D but ensure it doesn't blur its container */
.brand-logo, .brand-mark{
  transform: translateZ(0);
  image-rendering: -webkit-optimize-contrast;
}

/* ============================================================
   📑 IFRS-STYLE BALANCE SHEET REPORT (v13)
   Based on EY Good Group + Deloitte IFRS illustrative reports
   ============================================================ */

.report-bs{
  width: 100% !important;
  border-collapse: collapse !important;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.report-bs thead th{
  font-size: 9.5px !important;
  font-weight: 900 !important;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #64748b !important;
  padding: 10px 12px !important;
  border-bottom: 2px solid #0a1734 !important;
  background: transparent !important;
}
body.theme-dark .report-bs thead th{
  color: #94a3b8 !important;
  border-bottom-color: #818cf8 !important;
}
.report-bs .bs-header-left{ text-align: left; }
.report-bs .bs-header-amount{ width: 30%; }

/* GROUP-LEVEL ROW (ASSETS / EQUITY AND LIABILITIES) */
.report-bs .bs-group-row td{
  padding: 14px 12px 6px !important;
  font-size: 10.5px !important;
  font-weight: 900 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase;
  color: #0a1734 !important;
  background: transparent !important;
  border-bottom: 1px solid rgba(15,23,42,.10) !important;
  border-top: 2px solid rgba(15,23,42,.06);
}

/* P&L / CF group-level heading (Revenue, Operating expenses, Income tax, ...) */
.report .pnl-group-row td{
  padding: 14px 12px 6px !important;
  font-size: 10.5px !important;
  font-weight: 900 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase;
  color: #0a1734 !important;
  background: transparent !important;
  border-bottom: 1px solid rgba(15,23,42,.10) !important;
  border-top: 2px solid rgba(15,23,42,.06);
}
body.theme-dark .report .pnl-group-row td{
  color: #f1f5f9 !important;
  border-bottom-color: rgba(99,102,241,.30) !important;
  border-top-color: rgba(99,102,241,.18);
}
/* Final bottom-line row (Profit for the period / Closing cash) — double underline */
.report .pnl-final td{
  border-top: 3px double #0f172a !important;
  border-bottom: 3px double #0f172a !important;
  background: linear-gradient(180deg, rgba(16,185,129,.06), rgba(16,185,129,.02)) !important;
}
body.theme-dark .report .pnl-final td{
  border-top-color: #f1f5f9 !important;
  border-bottom-color: #f1f5f9 !important;
}
body.theme-dark .report-bs .bs-group-row td{
  color: #f1f5f9 !important;
  border-bottom-color: rgba(99,102,241,.30) !important;
  border-top-color: rgba(99,102,241,.18);
}

/* SUBSECTION ROW (Non-current assets, Current assets, Equity, etc.) — clickable */
.report-bs .bs-subsection-row td{
  padding: 9px 12px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  color: #1e293b !important;
  background: linear-gradient(180deg, rgba(239,246,255,.5), rgba(239,246,255,.3)) !important;
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid rgba(208,216,230,.4) !important;
}
.report-bs .bs-subsection-row:hover td{
  background: linear-gradient(180deg, rgba(219,234,254,.6), rgba(219,234,254,.4)) !important;
}
body.theme-dark .report-bs .bs-subsection-row td{
  color: #e0e7ff !important;
  background: linear-gradient(180deg, rgba(99,102,241,.10), rgba(99,102,241,.06)) !important;
  border-bottom-color: rgba(99,102,241,.18) !important;
}
body.theme-dark .report-bs .bs-subsection-row:hover td{
  background: linear-gradient(180deg, rgba(99,102,241,.18), rgba(99,102,241,.12)) !important;
}
.report-bs .bs-toggle{
  display: inline-block;
  width: 14px;
  color: #64748b;
  margin-right: 4px;
  font-size: 11px;
}

/* LINE ROW — individual accounts within a section */
.report-bs .bs-line td{
  padding: 5px 12px !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  color: #1e293b !important;
  border-bottom: 1px dashed rgba(226,232,240,.6) !important;
  background: transparent !important;
}
.report-bs .bs-line:hover td{
  background: rgba(248,250,253,.7) !important;
}
.report-bs .bs-line .indent{ padding-left: 28px !important; }
.report-bs .bs-line-name{ color: #334155 !important; }
body.theme-dark .report-bs .bs-line td{
  color: #cbd5e1 !important;
  border-bottom-color: rgba(99,102,241,.08) !important;
}
body.theme-dark .report-bs .bs-line:hover td{
  background: rgba(99,102,241,.06) !important;
}
body.theme-dark .report-bs .bs-line-name{ color: #cbd5e1 !important; }

/* SUBTOTAL row (Total non-current assets, etc.) */
.report-bs .bs-subtotal td{
  padding: 7px 12px !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  color: #0a1734 !important;
  background: transparent !important;
  border-top: 1px solid rgba(15,23,42,.18) !important;
  border-bottom: 1px solid rgba(15,23,42,.06) !important;
}
.report-bs .bs-subtotal-label{ padding-left: 20px !important; font-style: italic; color: #475569 !important; }
body.theme-dark .report-bs .bs-subtotal td{
  color: #f1f5f9 !important;
  border-top-color: rgba(99,102,241,.35) !important;
  border-bottom-color: rgba(99,102,241,.12) !important;
}
body.theme-dark .report-bs .bs-subtotal-label{ color: #cbd5e1 !important; }

/* TOTAL ROW (Total assets, Total equity and liabilities) — strong emphasis */
.report-bs .bs-total-row td{
  padding: 12px 12px !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  color: #0a1734 !important;
  background: linear-gradient(90deg, rgba(29,78,216,.06), rgba(99,102,241,.04)) !important;
  border-top: 2.5px solid #0a1734 !important;
  border-bottom: 4px double #0a1734 !important;
  letter-spacing: -.005em;
}
body.theme-dark .report-bs .bs-total-row td{
  color: #ffffff !important;
  background: linear-gradient(90deg, rgba(99,102,241,.22), rgba(139,92,246,.16)) !important;
  border-top-color: #818cf8 !important;
  border-bottom-color: #818cf8 !important;
  text-shadow: 0 0 12px rgba(165,180,252,.30);
}

/* BALANCE CHECK row — small, italic, calm */
.report-bs .bs-balance-check td{
  padding: 8px 12px !important;
  font-size: 10.5px !important;
  font-style: italic;
  color: #64748b !important;
  background: transparent !important;
  border-top: 1px solid rgba(208,216,230,.4) !important;
}
body.theme-dark .report-bs .bs-balance-check td{
  color: #94a3b8 !important;
  border-top-color: rgba(99,102,241,.18) !important;
}

/* Right-aligned amount column — tabular */
.report-bs .right{
  text-align: right !important;
  font-variant-numeric: tabular-nums !important;
  font-feature-settings: "tnum" !important;
  letter-spacing: -.005em;
}

/* Professional statement-of-financial-position presentation. Keep this
   deliberately quieter than the app shell: the report should read like
   an IFRS financial statement, not an operational dashboard. */
.report-wrap[data-report-type="bs"]{
  width: min(980px, 100%) !important;
  max-width: 980px !important;
  margin: 0 auto !important;
  padding: 28px 34px !important;
  border-radius: 6px !important;
  background: #fff !important;
  border: 1px solid #d7dee9 !important;
  box-shadow: 0 10px 28px rgba(15,23,42,.07) !important;
}
.report-wrap[data-report-type="bs"] .report-head{
  margin-bottom: 18px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid #111827 !important;
}
.report-wrap[data-report-type="bs"] .report-title{
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #111827 !important;
}
.report-wrap[data-report-type="bs"] .report-subtitle{
  margin-left: auto !important;
  color: #111827 !important;
}
.report-bs{
  font-size: 12px !important;
  line-height: 1.32 !important;
}
.report-bs thead th{
  padding: 8px 0 9px !important;
  color: #334155 !important;
  border-bottom: 1.5px solid #111827 !important;
  letter-spacing: .04em !important;
}
.report-bs .bs-group-row td{
  padding: 17px 0 7px !important;
  color: #111827 !important;
  border-top: 0 !important;
  border-bottom: 1px solid #cbd5e1 !important;
  background: transparent !important;
}
.report-bs .bs-subsection-row td{
  padding: 8px 0 !important;
  color: #1f2937 !important;
  background: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
}
.report-bs .bs-toggle{
  display: none !important;
}
.report-bs .bs-line td{
  padding: 5px 0 !important;
  border-bottom: 1px solid #edf2f7 !important;
  background: transparent !important;
}
.report-bs .bs-line .indent{
  padding-left: 18px !important;
}
.report-bs .bs-subtotal td{
  padding: 7px 0 9px !important;
  border-top: 1px solid #cbd5e1 !important;
  border-bottom: 0 !important;
  background: transparent !important;
}
.report-bs .bs-subtotal-label{
  padding-left: 18px !important;
  font-style: normal !important;
  color: #334155 !important;
}
.report-bs .bs-total-row td{
  padding: 9px 0 10px !important;
  color: #111827 !important;
  background: transparent !important;
  border-top: 1.5px solid #111827 !important;
  border-bottom: 3px double #111827 !important;
}
.report-bs .bs-balance-check td{
  padding: 8px 0 !important;
  color: #64748b !important;
}
@media print{
  .report-wrap[data-report-type="bs"]{
    max-width: none !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
  }
}

/* ============================================================
   FURTHER SCALE-DOWN (user requested "more zoomed out")
   ============================================================ */
html{ font-size: 12px !important; }
body{ font-size: 11px !important; }
.page-head{ padding: 8px 12px !important; }
.page-head h1{ font-size: 15px !important; }
.panel{ padding: 11px !important; }
.panel-title{ font-size: 12.5px !important; margin-bottom: 7px !important; }
.workflow-summary-card{
  padding: 9px 11px !important;
  min-height: 72px !important;
}
.workflow-summary-icon{ width: 24px !important; height: 24px !important; border-radius: 7px !important; }
.workflow-summary-icon svg{ width: 13px !important; height: 13px !important; }
.workflow-summary-card strong{ font-size: 17px !important; }
.workflow-summary-card span{ font-size: 8.5px !important; }
.workflow-company-card .workflow-summary-card{
  min-height: 62px !important;
  padding: 8px 9px !important;
}
.workflow-company-card .workflow-summary-card strong{ font-size: 15px !important; }
.workflow-company-card .workflow-summary-card span{ font-size: 8.5px !important; }
.app{ grid-template-columns: 172px 1fr !important; }
@media (min-width: 1400px){ .app{ grid-template-columns: 188px 1fr !important; } }
.sidebar{ padding: 8px 7px !important; }
.brand-logo, .brand-mark{ width: 33px !important; height: 33px !important; }
.brand-name{ font-size: 14px !important; }
.brand-sub{ font-size: 9px !important; }
.brand-byline{ font-size: 8px !important; }
.nav-btn, .nav-section-btn{
  padding: 6px 8px !important;
  font-size: 11px !important;
  min-height: 26px !important;
}
.nav-subbtn{
  padding: 4px 8px !important;
  font-size: 10px !important;
  min-height: 22px !important;
}
.btn{
  min-height: 26px !important;
  padding: 4px 9px !important;
  font-size: 11px !important;
}
.btn.small{ min-height: 22px !important; padding: 2px 7px !important; font-size: 10.5px !important; }
.btn.btn-compact{ height: 26px !important; padding: 3px 10px !important; font-size: 10.5px !important; }
.btn.icon-only, .icon-btn{ width: 26px !important; min-width: 26px !important; height: 26px !important; }
.btn.icon-only svg, .icon-btn svg{ width: 12px !important; height: 12px !important; }
input, select, textarea{
  min-height: 26px !important;
  font-size: 11px !important;
  padding: 3px 7px !important;
}
.grid th, .grid td{ padding: 5px 8px !important; font-size: 11px !important; }
.grid.compact th, .grid.compact td{ padding: 4px 6px !important; font-size: 10.5px !important; }
.grid th{ font-size: 9px !important; }
.app .main{ padding: 5px 9px 10px !important; }
.modal-head{ padding: 9px 12px !important; }
.modal-head h3{ font-size: 12px !important; }
.modal-body{ padding: 10px 12px !important; }
.modal-foot{ padding: 8px 12px !important; }
.stat-card{ padding: 8px 10px !important; }
.stat-label{ font-size: 8.5px !important; }
.stat-value{ font-size: 15px !important; }
.background-controls > .btn.icon-only,
.background-controls > .background-toggle{
  width: 20px !important; min-width: 20px !important; height: 20px !important;
}
.background-controls > .btn.icon-only svg,
.background-controls > .background-toggle svg{ width: 10px !important; height: 10px !important; }

/* ============================================================
   V14 VISUAL STABILITY AND RESPONSIVENESS PASS
   ============================================================ */
:root{
  --surface-1:#ffffff;
  --surface-2:#f7fbff;
  --surface-3:#eef6ff;
  --ink-strong:#0f172a;
  --ink-muted:#64748b;
  --accent-blue:#3b82f6;
  --accent-green:#10b981;
  --accent-violet:#7c3aed;
}
body.theme-light{
  color:#152039 !important;
  background:
    radial-gradient(circle at 16% 12%, rgba(59,130,246,.12), transparent 28%),
    radial-gradient(circle at 88% 8%, rgba(16,185,129,.10), transparent 24%),
    linear-gradient(135deg, #f7fbff 0%, #f6fff9 54%, #f9f7ff 100%) !important;
}
body.theme-dark{
  color:#e6edf8 !important;
  background:
    radial-gradient(circle at 14% 0%, rgba(59,130,246,.24), transparent 28%),
    radial-gradient(circle at 86% 8%, rgba(16,185,129,.18), transparent 26%),
    linear-gradient(135deg, #050a18 0%, #091225 54%, #111827 100%) !important;
}
body.theme-dark.background-image-on::before{
  background: linear-gradient(135deg, rgba(5,10,24,.90), rgba(9,18,37,.88)) !important;
  backdrop-filter: blur(1px) saturate(.8);
}
.panel,
.page-head,
.modal,
.report-wrap,
.table-scroll{
  border-color: rgba(99,102,241,.18) !important;
}
body.theme-light .panel,
body.theme-light .page-head,
body.theme-light .modal,
body.theme-light .report-wrap{
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,252,255,.92)) !important;
  box-shadow: 0 18px 44px rgba(30,64,175,.08), inset 0 1px 0 rgba(255,255,255,.86) !important;
}
body.theme-light .sidebar{
  background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(239,248,255,.76)) !important;
  border-color: rgba(59,130,246,.20) !important;
  box-shadow: 0 20px 50px rgba(30,64,175,.10) !important;
}
body.theme-dark .sidebar,
body.theme-dark .panel,
body.theme-dark .page-head,
body.theme-dark .modal,
body.theme-dark .report-wrap,
body.theme-dark .table-scroll{
  background: linear-gradient(180deg, rgba(15,23,42,.94), rgba(8,13,30,.93)) !important;
  border-color: rgba(129,140,248,.25) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.06) !important;
}
body.theme-dark .page-head h1,
body.theme-dark .panel-title,
body.theme-dark .modal-head h3,
body.theme-dark .grid td,
body.theme-dark .grid th,
body.theme-dark .company-overview-name,
body.theme-dark strong{
  color:#f8fafc !important;
}
body.theme-dark .muted,
body.theme-dark .mapping-meta,
body.theme-dark .report-subtitle,
body.theme-dark .company-overview-submeta{
  color:#aebbd1 !important;
}
body.theme-dark input,
body.theme-dark select,
body.theme-dark textarea{
  color:#eef4ff !important;
  background: rgba(15,23,42,.92) !important;
  border-color: rgba(129,140,248,.36) !important;
}
body.theme-dark input::placeholder,
body.theme-dark textarea::placeholder{
  color:#8fa1bb !important;
}
.btn,
.icon-btn,
.background-toggle{
  color:inherit;
}
.btn svg,
.icon-btn svg,
.background-toggle svg,
.nav-btn svg,
.nav-section-btn svg{
  color:currentColor !important;
  stroke:currentColor !important;
  fill:none;
}
.btn.icon-only,
.icon-btn,
.background-toggle{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  color:#1d4ed8 !important;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(228,240,255,.94)) !important;
  border:1px solid rgba(59,130,246,.28) !important;
  box-shadow: 0 8px 18px rgba(37,99,235,.16), inset 0 1px 0 rgba(255,255,255,.80) !important;
}
body.theme-dark .btn.icon-only,
body.theme-dark .icon-btn,
body.theme-dark .background-toggle{
  color:#dbeafe !important;
  background: linear-gradient(180deg, rgba(30,41,59,.96), rgba(15,23,42,.96)) !important;
  border-color: rgba(129,140,248,.34) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
.btn.primary{
  background: linear-gradient(135deg, #2563eb, #4f46e5 56%, #7c3aed) !important;
  color:#fff !important;
  border-color: transparent !important;
  box-shadow: 0 12px 26px rgba(79,70,229,.28) !important;
}
.btn.secondary{
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(238,246,255,.92)) !important;
  color:#1e3a8a !important;
  border-color: rgba(59,130,246,.22) !important;
}
body.theme-dark .btn.secondary{
  background: linear-gradient(180deg, rgba(30,41,59,.95), rgba(15,23,42,.92)) !important;
  color:#dbeafe !important;
  border-color: rgba(129,140,248,.32) !important;
}
.nav-btn.active,
.nav-section-btn.active{
  background: linear-gradient(135deg, rgba(37,99,235,.98), rgba(79,70,229,.94)) !important;
  box-shadow: 0 14px 28px rgba(37,99,235,.26) !important;
}
.grid thead th{
  background: linear-gradient(180deg, rgba(239,246,255,.96), rgba(233,242,255,.88)) !important;
  color:#1e3a8a !important;
  border-bottom:1px solid rgba(59,130,246,.20) !important;
}
body.theme-dark .grid thead th{
  background: linear-gradient(180deg, rgba(30,41,59,.96), rgba(15,23,42,.96)) !important;
  color:#bfdbfe !important;
}
.grid tbody tr{
  content-visibility:auto;
  contain-intrinsic-size: 34px;
}
.grid tbody tr:hover td{
  background: rgba(219,234,254,.42) !important;
}
body.theme-dark .grid tbody tr:hover td{
  background: rgba(59,130,246,.10) !important;
}
.workflow-summary-card,
.stat-card,
.preview-summary > div{
  background: linear-gradient(135deg, rgba(59,130,246,.10), rgba(16,185,129,.08) 58%, rgba(124,58,237,.08)) !important;
  border:1px solid rgba(59,130,246,.18) !important;
  box-shadow: 0 14px 28px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.72) !important;
}
body.theme-dark .workflow-summary-card,
body.theme-dark .stat-card,
body.theme-dark .preview-summary > div{
  background: linear-gradient(135deg, rgba(37,99,235,.18), rgba(16,185,129,.12) 58%, rgba(124,58,237,.14)) !important;
  border-color: rgba(129,140,248,.22) !important;
  box-shadow: 0 16px 34px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
.report-table .total-row td,
.report-table .summary-row td,
.report-table tr[class*="total"] td,
.grid tr.total-row td,
.grid tr.summary-row td{
  background: linear-gradient(90deg, rgba(16,185,129,.12), rgba(59,130,246,.10), rgba(124,58,237,.08)) !important;
  color:#0f172a !important;
  font-weight:850 !important;
}
body.theme-dark .report-table .total-row td,
body.theme-dark .report-table .summary-row td,
body.theme-dark .report-table tr[class*="total"] td,
body.theme-dark .grid tr.total-row td,
body.theme-dark .grid tr.summary-row td{
  background: linear-gradient(90deg, rgba(16,185,129,.18), rgba(59,130,246,.16), rgba(124,58,237,.14)) !important;
  color:#f8fafc !important;
}
.draggable-col{
  cursor:grab;
  user-select:none;
  position:relative;
}
.draggable-col:active{
  cursor:grabbing;
}
.draggable-col:hover{
  background-color:rgba(99,102,241,.08);
}
.preview-drag-hint{
  font-size:11px;
  margin:4px 0 6px;
}
@media (prefers-reduced-motion:no-preference){
  .panel,
  .btn,
  .nav-btn,
  .workflow-summary-card{
    transition: transform .14s ease, box-shadow .14s ease, background-color .14s ease;
  }
  .btn:hover,
  .workflow-summary-card:hover{
    transform: translateY(-1px);
  }
}

/* ============================================================
   V15 READABILITY, DARK MODE, REPORT TOTALS, AND SPEED FIX
   ============================================================ */
.grid tbody tr{
  content-visibility: visible !important;
  contain-intrinsic-size: auto !important;
}

body.theme-light .page-head,
body.theme-light .panel,
body.theme-light .workflow-center-panel,
body.theme-light .workflow-company-card,
body.theme-light .report-wrap,
body.theme-light .table-scroll,
body.theme-light .modal{
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,252,255,.96)) !important;
  color: #102033 !important;
  border-color: rgba(96,165,250,.24) !important;
}

body.theme-light.background-image-on::before{
  background: rgba(247,251,255,.32) !important;
}

body.theme-light.background-image-on .app{
  background-image:
    linear-gradient(180deg, rgba(248,252,255,.50), rgba(248,252,255,.34)),
    var(--shell-bg-image) !important;
}

body.theme-light .page-head h1,
body.theme-light .panel-title,
body.theme-light .workflow-company-name,
body.theme-light .workflow-company-card h3,
body.theme-light .report-title,
body.theme-light .stat-value,
body.theme-light .workflow-summary-card strong,
body.theme-light .grid td,
body.theme-light .report td,
body.theme-light strong{
  color: #0f1f3d !important;
  text-shadow: none !important;
}

body.theme-light .muted,
body.theme-light .subtitle,
body.theme-light .stat-label,
body.theme-light .stat-hint,
body.theme-light .workflow-summary-card span,
body.theme-light .workflow-meta-line,
body.theme-light .report-date,
body.theme-light .report-subtitle{
  color: #52647f !important;
  text-shadow: none !important;
}

body.theme-light .workflow-summary-card,
body.theme-light .stat-card,
body.theme-light .preview-summary > div{
  background: linear-gradient(135deg, rgba(239,248,255,.96), rgba(237,253,246,.94) 56%, rgba(245,243,255,.95)) !important;
  color: #102033 !important;
  border-color: rgba(96,165,250,.30) !important;
  box-shadow: 0 12px 26px rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,.88) !important;
}

body.theme-dark{
  color: #e8eef9 !important;
  background:
    radial-gradient(circle at 14% 0%, rgba(59,130,246,.18), transparent 28%),
    radial-gradient(circle at 86% 8%, rgba(16,185,129,.14), transparent 26%),
    linear-gradient(135deg, #040817 0%, #08111f 54%, #101827 100%) !important;
}

body.theme-dark.background-image-on::before{
  background: linear-gradient(135deg, rgba(4,8,23,.94), rgba(8,17,31,.93)) !important;
  backdrop-filter: blur(1.5px) saturate(.70);
}

body.theme-dark.background-image-on .app{
  background-image:
    linear-gradient(180deg, rgba(4,8,23,.74), rgba(8,17,31,.78)),
    var(--shell-bg-image) !important;
}

body.theme-dark .page-head,
body.theme-dark .sidebar,
body.theme-dark .panel,
body.theme-dark .workflow-center-panel,
body.theme-dark .workflow-company-card,
body.theme-dark .report-wrap,
body.theme-dark .table-scroll,
body.theme-dark .modal,
body.theme-dark .card,
body.theme-dark .empty-state{
  background: linear-gradient(180deg, rgba(15,23,42,.97), rgba(8,13,30,.96)) !important;
  color: #e8eef9 !important;
  border-color: rgba(129,140,248,.34) !important;
  box-shadow: 0 18px 44px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.07) !important;
}

body.theme-dark .page-head h1,
body.theme-dark .panel-title,
body.theme-dark .workflow-company-name,
body.theme-dark .workflow-company-card h3,
body.theme-dark .report-title,
body.theme-dark .stat-value,
body.theme-dark .workflow-summary-card strong,
body.theme-dark .grid td,
body.theme-dark .report td,
body.theme-dark strong{
  color: #f8fafc !important;
  text-shadow: none !important;
}

body.theme-dark .muted,
body.theme-dark .subtitle,
body.theme-dark .stat-label,
body.theme-dark .stat-hint,
body.theme-dark .workflow-summary-card span,
body.theme-dark .workflow-meta-line,
body.theme-dark .report-date,
body.theme-dark .report-subtitle{
  color: #a9b8cf !important;
  text-shadow: none !important;
}

body.theme-dark .workflow-summary-card,
body.theme-dark .stat-card,
body.theme-dark .preview-summary > div{
  background: linear-gradient(135deg, rgba(30,64,175,.24), rgba(6,95,70,.20) 56%, rgba(91,33,182,.22)) !important;
  color: #f8fafc !important;
  border-color: rgba(129,140,248,.34) !important;
}

.btn.icon-only,
.icon-only-btn,
.icon-btn,
.background-toggle{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #1d4ed8 !important;
  background: linear-gradient(180deg, #ffffff, #eaf3ff) !important;
  border: 1px solid rgba(59,130,246,.30) !important;
}

.btn.icon-only svg,
.icon-only-btn svg,
.icon-btn svg,
.background-toggle svg{
  display: block !important;
  width: 1.05em !important;
  height: 1.05em !important;
  color: currentColor !important;
  stroke: currentColor !important;
}

body.theme-dark .btn.icon-only,
body.theme-dark .icon-only-btn,
body.theme-dark .icon-btn,
body.theme-dark .background-toggle{
  color: #dbeafe !important;
  background: linear-gradient(180deg, rgba(30,41,59,.98), rgba(15,23,42,.98)) !important;
  border-color: rgba(129,140,248,.38) !important;
}

.report .section-row td{
  background: linear-gradient(90deg, rgba(219,234,254,.78), rgba(224,242,254,.58)) !important;
  color: #17345f !important;
  border-top: 1px solid rgba(37,99,235,.18) !important;
  border-bottom: 1px solid rgba(37,99,235,.16) !important;
}

.report .total-row td,
.report .summary-row td,
.grid .total-row td,
.grid .summary-row td{
  background: linear-gradient(90deg, rgba(220,252,231,.86), rgba(219,234,254,.74), rgba(237,233,254,.72)) !important;
  color: #0f172a !important;
  font-weight: 900 !important;
  border-top: 1px solid rgba(16,185,129,.30) !important;
  border-bottom: 1px solid rgba(79,70,229,.18) !important;
}

.report .total-row.heavy td,
.grid .total-row.heavy td{
  background: linear-gradient(90deg, rgba(187,247,208,.94), rgba(191,219,254,.86), rgba(221,214,254,.84)) !important;
  border-top: 2px solid rgba(21,128,61,.65) !important;
  border-bottom: 3px double rgba(30,64,175,.72) !important;
}

.report-bs .bs-subsection-row td{
  background: linear-gradient(90deg, rgba(239,246,255,.96), rgba(236,253,245,.88)) !important;
  color: #17345f !important;
}

.report-bs .bs-subtotal td{
  background: linear-gradient(90deg, rgba(236,253,245,.76), rgba(239,246,255,.58)) !important;
  color: #17345f !important;
  border-top: 1px solid rgba(16,185,129,.35) !important;
}

.report-bs .bs-total-row td{
  background: linear-gradient(90deg, rgba(187,247,208,.94), rgba(191,219,254,.86), rgba(221,214,254,.84)) !important;
  color: #0f172a !important;
  border-top: 2px solid rgba(21,128,61,.70) !important;
  border-bottom: 3px double rgba(30,64,175,.75) !important;
}

body.theme-dark .report .section-row td,
body.theme-dark .report-bs .bs-subsection-row td{
  background: linear-gradient(90deg, rgba(30,64,175,.28), rgba(14,116,144,.18)) !important;
  color: #dbeafe !important;
  border-color: rgba(129,140,248,.25) !important;
}

body.theme-dark .report .total-row td,
body.theme-dark .report .summary-row td,
body.theme-dark .grid .total-row td,
body.theme-dark .grid .summary-row td,
body.theme-dark .report-bs .bs-subtotal td,
body.theme-dark .report-bs .bs-total-row td{
  background: linear-gradient(90deg, rgba(22,101,52,.36), rgba(30,64,175,.32), rgba(91,33,182,.30)) !important;
  color: #f8fafc !important;
  border-color: rgba(129,140,248,.35) !important;
}

body.theme-dark .report .total-row.heavy td,
body.theme-dark .grid .total-row.heavy td,
body.theme-dark .report-bs .bs-total-row td{
  border-top-color: rgba(74,222,128,.70) !important;
  border-bottom-color: rgba(129,140,248,.80) !important;
}

body.theme-light .report .section-row td,
body.theme-light .report-bs .bs-subsection-row td{
  background: linear-gradient(90deg, rgba(219,234,254,.90), rgba(236,253,245,.78)) !important;
  color: #17345f !important;
}

body.theme-light .report .total-row td,
body.theme-light .report .summary-row td,
body.theme-light .grid .total-row td,
body.theme-light .grid .summary-row td,
body.theme-light .report-bs .bs-subtotal td,
body.theme-light .report-bs .bs-total-row td{
  background: linear-gradient(90deg, rgba(220,252,231,.92), rgba(219,234,254,.84), rgba(237,233,254,.82)) !important;
  color: #0f172a !important;
}

body.theme-light .report .total-row.heavy td,
body.theme-light .grid .total-row.heavy td,
body.theme-light .report-bs .bs-total-row td{
  background: linear-gradient(90deg, rgba(187,247,208,.96), rgba(191,219,254,.90), rgba(221,214,254,.88)) !important;
  border-top-color: rgba(21,128,61,.70) !important;
  border-bottom-color: rgba(30,64,175,.75) !important;
}

body.theme-dark .report-wrap[data-report-type="bs"] .report-title,
body.theme-dark .report-wrap[data-report-type="bs"] .report-subtitle,
body.theme-dark .report-wrap[data-report-type="bs"] .report-date,
body.theme-dark .report-bs thead th,
body.theme-dark .report-bs .bs-group-row td{
  color: #f8fafc !important;
  border-color: rgba(129,140,248,.55) !important;
}

/* ===== REPORT ROW COLORS: calm, single-color, no neon mixing ===== */

/* Light: section / subsection headers — soft lavender */
body.theme-light .report .section-row td,
body.theme-light .report-bs .bs-subsection-row td{
  background: rgba(237,233,254,.52) !important;
  color: #3730a3 !important;
  border-top: 1px solid rgba(124,58,237,.16) !important;
  border-bottom: 1px solid rgba(124,58,237,.12) !important;
}

/* Light: total / summary / subtotal rows — soft mint green */
body.theme-light .report .total-row td,
body.theme-light .report .summary-row td,
body.theme-light .grid .total-row td,
body.theme-light .grid .summary-row td,
body.theme-light .report-bs .bs-subtotal td,
body.theme-light .report-bs .bs-total-row td{
  background: rgba(220,252,231,.60) !important;
  color: #14532d !important;
  border-top: 1px solid rgba(21,128,61,.20) !important;
  border-bottom: 1px solid rgba(21,128,61,.16) !important;
}

/* Light: heavy total rows — soft sky blue */
body.theme-light .report .total-row.heavy td,
body.theme-light .grid .total-row.heavy td{
  background: rgba(219,234,254,.68) !important;
  color: #1e3a8a !important;
  border-top: 2px solid rgba(37,99,235,.28) !important;
  border-bottom: 2px solid rgba(37,99,235,.22) !important;
}

/* Dark: section / subsection headers — soft purple */
body.theme-dark .report .section-row td,
body.theme-dark .report-bs .bs-subsection-row td{
  background: rgba(109,40,217,.15) !important;
  color: #ddd6fe !important;
  border-top: 1px solid rgba(124,58,237,.22) !important;
  border-bottom: 1px solid rgba(124,58,237,.16) !important;
}

/* Dark: total / summary / subtotal rows — soft emerald green */
body.theme-dark .report .total-row td,
body.theme-dark .report .summary-row td,
body.theme-dark .grid .total-row td,
body.theme-dark .grid .summary-row td,
body.theme-dark .report-bs .bs-subtotal td,
body.theme-dark .report-bs .bs-total-row td{
  background: rgba(21,128,61,.15) !important;
  color: #bbf7d0 !important;
  border-top: 1px solid rgba(21,128,61,.28) !important;
  border-bottom: 1px solid rgba(21,128,61,.22) !important;
}

/* Dark: heavy total rows — soft sapphire blue */
body.theme-dark .report .total-row.heavy td,
body.theme-dark .grid .total-row.heavy td{
  background: rgba(30,64,175,.20) !important;
  color: #bfdbfe !important;
  border-top: 2px solid rgba(59,130,246,.36) !important;
  border-bottom: 2px solid rgba(59,130,246,.26) !important;
}

/* ===== DARK MODE RENDERING FIXES ===== */

/* Sidebar: solid dark background with clear nav text */
body.theme-dark .sidebar{
  background: linear-gradient(180deg, #0d1835 0%, #0a1430 100%) !important;
  border-color: rgba(99,102,241,.22) !important;
}

/* Nav buttons: fully visible text, no unintended opacity */
body.theme-dark .nav-btn,
body.theme-dark .nav-section-btn,
body.theme-dark .nav-subbtn{
  color: #e2e8f0 !important;
  opacity: 1 !important;
  background: rgba(255,255,255,.04) !important;
}
body.theme-dark .nav-btn svg,
body.theme-dark .nav-section-btn svg,
body.theme-dark .nav-subbtn svg{
  opacity: 1 !important;
  color: #e2e8f0 !important;
  stroke: #e2e8f0 !important;
}
body.theme-dark .nav-btn:hover,
body.theme-dark .nav-section-btn:hover,
body.theme-dark .nav-subbtn:hover{
  background: rgba(99,102,241,.16) !important;
  color: #c7d2fe !important;
}
body.theme-dark .nav-btn.active,
body.theme-dark .nav-section-btn.active,
body.theme-dark .nav-subbtn.active{
  background: linear-gradient(135deg, #4f46e5, #6366f1) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(99,102,241,.42) !important;
}

/* Panels and page-head: consistent dark opaque background */
body.theme-dark .panel,
body.theme-dark .report-wrap,
body.theme-dark .page-head{
  background: linear-gradient(180deg, #0e1a3a 0%, #090f26 100%) !important;
  border-color: rgba(99,102,241,.20) !important;
  color: #e8eef9 !important;
}

/* Grid cells and table headers: visible in dark */
body.theme-dark .grid td,
body.theme-dark .grid th,
body.theme-dark .report td,
body.theme-dark .report th{
  color: #e2e8f0 !important;
  border-color: rgba(99,102,241,.14) !important;
}

/* Form inputs in dark mode */
body.theme-dark input,
body.theme-dark select,
body.theme-dark textarea{
  background: rgba(9,17,39,.88) !important;
  color: #e8eef9 !important;
  border-color: rgba(99,102,241,.30) !important;
}

/* ===== DARK MODE: REPLACE LIGHT BACKGROUND IMAGE WITH DARK GRADIENT =====
   The .app div shows glass-valley-background.jpg (a light image) as its
   background. In dark mode we must replace it with a dark gradient so the
   backdrop-filter blur on panels/sidebar doesn't pick up light pixels.
   Without this override everything appears washed-out/light even with
   body.theme-dark set.
   ===================================================================== */
body.theme-dark .app,
body.theme-dark.background-image-on .app,
body.theme-dark.background-image-off .app{
  background-image:
    linear-gradient(180deg, rgba(6,11,28,.98) 0%, rgba(4,8,20,.97) 100%) !important;
  background-size: cover !important;
  background-color: #060b1c !important;
}

/* 2026-05-13 visual cleanup: calm dark mode + reliable action icons */
body.theme-dark{
  --bg:#07101f;
  --panel:#0d1830;
  --text:#edf3ff;
  --muted:#9aabd0;
  --border:#22355f;
  --border-soft:#182845;
}
body.theme-dark .app,
body.theme-dark.background-image-on .app,
body.theme-dark.background-image-off .app{
  background:
    radial-gradient(circle at 18% 8%, rgba(48,82,160,.16), transparent 24%),
    radial-gradient(circle at 82% 0%, rgba(68,93,168,.10), transparent 22%),
    linear-gradient(180deg, #06101e 0%, #050b17 100%) !important;
}
body.theme-dark .sidebar{
  background:linear-gradient(180deg,#0b1730 0%,#091227 100%) !important;
  border-color:rgba(58,86,150,.38) !important;
  box-shadow:inset 0 0 0 1px rgba(104,132,201,.10), 0 18px 38px rgba(2,6,23,.34) !important;
}
body.theme-dark .page-head,
body.theme-dark .panel,
body.theme-dark .report-wrap,
body.theme-dark .modal,
body.theme-dark .detail-panel,
body.theme-dark .workflow-company-card,
body.theme-dark .company-overview-panel,
body.theme-dark .side-box,
body.theme-dark .report-toolbar-shell{
  background:linear-gradient(180deg,#0d1830 0%,#091226 100%) !important;
  border-color:rgba(55,84,144,.42) !important;
  box-shadow:0 18px 40px rgba(2,6,23,.30), inset 0 0 0 1px rgba(114,142,210,.06) !important;
  color:#edf3ff !important;
}
body.theme-dark .modal-head,
body.theme-dark .company-overview-hero{
  background:linear-gradient(180deg,#14284f 0%,#10203f 100%) !important;
  border-color:rgba(75,106,179,.40) !important;
}
body.theme-dark .company-overview-modal .modal-head.company-overview-bar{
  background:linear-gradient(180deg,#14284f 0%,#10203f 100%) !important;
  border-color:rgba(75,106,179,.40) !important;
  color:#f8fbff !important;
}
body.theme-dark .company-overview-modal .modal-head .company-overview-submeta{
  color:rgba(227,236,255,.78) !important;
}
body.theme-dark .company-overview-modal .modal-head .company-logo-mark-large{
  background:linear-gradient(135deg,#f8fbff 0%,#d9e5ff 100%) !important;
  color:#294274 !important;
  border-color:rgba(205,221,255,.62) !important;
}
body.theme-dark .company-overview-modal .modal-head .company-overview-actions-icons .btn{
  background:rgba(12,26,54,.78) !important;
  border-color:rgba(92,124,193,.42) !important;
  color:#eef4ff !important;
}
body.theme-dark .company-overview-modal .modal-head .company-overview-actions-icons .btn:hover{
  background:rgba(18,37,74,.92) !important;
  border-color:rgba(122,150,214,.56) !important;
}
body.theme-dark .company-detail-grid div,
body.theme-dark .company-summary-grid div,
body.theme-dark .company-overview-grid .panel,
body.theme-dark .company-overview-grid .panel .table-scroll{
  background:linear-gradient(180deg,#1a2545 0%,#131d37 100%) !important;
  border-color:rgba(65,96,159,.34) !important;
}
body.theme-dark .panel-title,
body.theme-dark h1,
body.theme-dark h2,
body.theme-dark h3,
body.theme-dark h4,
body.theme-dark strong{
  color:#f8fbff !important;
}
body.theme-dark .muted,
body.theme-dark .subtitle,
body.theme-dark .workflow-meta-line,
body.theme-dark .report-date,
body.theme-dark .report-subtitle,
body.theme-dark .stat-hint,
body.theme-dark .brand-sub,
body.theme-dark .brand-byline{
  color:#95a9d2 !important;
}
body.theme-dark .nav-btn,
body.theme-dark .nav-section-btn,
body.theme-dark .nav-subbtn{
  background:rgba(255,255,255,.025) !important;
  border:1px solid rgba(75,102,158,.16) !important;
  color:#dbe6ff !important;
}
body.theme-dark .nav-btn:hover,
body.theme-dark .nav-section-btn:hover,
body.theme-dark .nav-subbtn:hover{
  background:rgba(83,111,176,.12) !important;
  border-color:rgba(102,132,198,.28) !important;
  color:#eef4ff !important;
  box-shadow:none !important;
}
body.theme-dark .nav-btn.active,
body.theme-dark .nav-section-btn.active,
body.theme-dark .nav-subbtn.active{
  background:linear-gradient(135deg,#3f5ef7 0%,#6a63ff 100%) !important;
  border-color:rgba(121,127,255,.52) !important;
  color:#ffffff !important;
  box-shadow:0 12px 28px rgba(72,91,255,.26) !important;
}
body.theme-dark .stat-card,
body.theme-dark .workflow-summary-card,
body.theme-dark .workflow-next-card,
body.theme-dark .currency-status-card,
body.theme-dark .ai-status-card,
body.theme-dark .integration-mini-card{
  background:linear-gradient(180deg,#102244 0%,#0b1830 100%) !important;
  border-color:rgba(61,96,168,.44) !important;
  color:#edf3ff !important;
  box-shadow:0 14px 30px rgba(2,6,23,.28) !important;
}
body.theme-dark .workflow-summary-card[data-tone],
body.theme-dark .stat-card[data-tone]{
  background:linear-gradient(180deg,#102244 0%,#0b1830 100%) !important;
}
body.theme-dark .workflow-summary-icon{
  background:rgba(255,255,255,.04) !important;
  border:1px solid rgba(255,255,255,.06) !important;
  box-shadow:none !important;
}
body.theme-dark .workflow-summary-card[data-tone="warn"] .workflow-summary-icon{background:rgba(180,110,28,.26) !important;color:#ffc76b !important}
body.theme-dark .workflow-summary-card[data-tone="orange"] .workflow-summary-icon{background:rgba(157,87,42,.26) !important;color:#ffb074 !important}
body.theme-dark .workflow-summary-card[data-tone="purple"] .workflow-summary-icon{background:rgba(111,70,184,.26) !important;color:#d7b7ff !important}
body.theme-dark .workflow-summary-card[data-tone="success"] .workflow-summary-icon{background:rgba(31,120,84,.24) !important;color:#8ef0c1 !important}
body.theme-dark .workflow-summary-card[data-tone="info"] .workflow-summary-icon{background:rgba(45,91,184,.24) !important;color:#9fc6ff !important}
body.theme-dark .workflow-summary-card strong,
body.theme-dark .stat-card strong,
body.theme-dark .workflow-summary-card span,
body.theme-dark .stat-card span{
  color:inherit !important;
}
body.theme-dark .workflow-pill.waiting,
body.theme-dark .workflow-pill.import,
body.theme-dark .workflow-pill.review,
body.theme-dark .workflow-pill.ready{
  background:rgba(9,20,44,.88) !important;
  border-color:rgba(66,102,176,.38) !important;
  box-shadow:none !important;
}
body.theme-dark .workflow-pill.waiting{color:#9db8ff !important}
body.theme-dark .workflow-pill.import{color:#8fc5ff !important}
body.theme-dark .workflow-pill.review{color:#f7c37b !important}
body.theme-dark .workflow-pill.ready{color:#9eebc7 !important}
body.theme-dark .btn,
body.theme-dark .icon-btn,
body.theme-dark input,
body.theme-dark select,
body.theme-dark textarea{
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
body.theme-dark .btn.secondary,
body.theme-dark .btn.ghost,
body.theme-dark .icon-btn{
  background:linear-gradient(180deg,#132445 0%,#0d1a34 100%) !important;
  border:1px solid rgba(67,98,162,.44) !important;
  color:#dfe9ff !important;
}
body.theme-dark .btn.primary{
  background:linear-gradient(135deg,#3f62ff 0%,#685fff 100%) !important;
  border:1px solid rgba(132,136,255,.42) !important;
  color:#ffffff !important;
  box-shadow:0 16px 30px rgba(71,91,255,.24) !important;
}
body.theme-dark .btn.secondary:hover,
body.theme-dark .btn.ghost:hover,
body.theme-dark .icon-btn:hover{
  background:linear-gradient(180deg,#172b52 0%,#102041 100%) !important;
  border-color:rgba(92,124,193,.52) !important;
}
body.theme-dark .btn.primary:hover{
  background:linear-gradient(135deg,#4b6cff 0%,#7567ff 100%) !important;
}
body.theme-dark .btn.icon-only,
body.theme-dark .icon-btn,
body.theme-dark .icon-only-btn{
  color:#dfe9ff !important;
  font-size:16px !important;
  line-height:1 !important;
}
body.theme-dark .btn.primary.icon-only{
  color:#ffffff !important;
}
body.theme-dark .btn.icon-only svg,
body.theme-dark .icon-btn svg,
body.theme-dark .icon-only-btn svg,
body.theme-light .btn.icon-only svg,
body.theme-light .icon-btn svg,
body.theme-light .icon-only-btn svg{
  width:16px !important;
  height:16px !important;
  display:block !important;
  opacity:1 !important;
}
body.theme-dark .btn.icon-only svg *,
body.theme-dark .icon-btn svg *,
body.theme-dark .icon-only-btn svg *,
body.theme-light .btn.icon-only svg *,
body.theme-light .icon-btn svg *,
body.theme-light .icon-only-btn svg *{
  stroke:currentColor !important;
  opacity:1 !important;
}
body.theme-dark .btn.icon-only,
body.theme-dark .icon-btn,
body.theme-dark .icon-only-btn,
body.theme-light .btn.icon-only,
body.theme-light .icon-btn,
body.theme-light .icon-only-btn{
  align-items:center !important;
  justify-content:center !important;
  text-indent:0 !important;
}
body.theme-light .panel,
body.theme-light .workflow-company-card,
body.theme-light .report-wrap,
body.theme-light .page-head{
  background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%) !important;
}
body.theme-light .stat-card,
body.theme-light .workflow-summary-card,
body.theme-light .workflow-next-card{
  background:linear-gradient(180deg,#fdfefe 0%,#f4f8ff 100%) !important;
  border-color:rgba(194,208,234,.92) !important;
  box-shadow:0 12px 24px rgba(15,23,42,.06) !important;
}
body.theme-light .btn.secondary,
body.theme-light .icon-btn{
  background:linear-gradient(180deg,#ffffff 0%,#f4f8ff 100%) !important;
  border-color:rgba(191,206,232,.96) !important;
  color:#28446f !important;
}
body.theme-light .btn.icon-only,
body.theme-light .icon-btn,
body.theme-light .icon-only-btn{
  color:#2d4f85 !important;
  font-size:16px !important;
  line-height:1 !important;
}

/* ============================================================
   2026-05-13 POLISH PACK — sharpness, brand, report depth, dark mode
   ============================================================ */

/* Sharper text rendering everywhere (Task 7) */
html, body, .app, .panel, .report-wrap, .sidebar, .modal,
.btn, input, select, textarea, table, th, td{
  -webkit-font-smoothing:antialiased !important;
  -moz-osx-font-smoothing:grayscale !important;
  text-rendering:optimizeLegibility !important;
}
.panel, .report-wrap, .sidebar, .page-head, .modal, .stat-card,
.workflow-company-card, .mapping-card{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* Sidebar brand — bigger logo, no frame, 3D pop (Tasks 5, 6) */
.brand{
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
  padding:14px 8px !important;
  margin-bottom:18px !important;
  background:transparent !important;
  border:0 !important;
  border-bottom:1px solid var(--line) !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
.brand-logo{
  width:64px !important;
  height:64px !important;
  flex:0 0 64px !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:
    0 12px 24px rgba(99,102,241,.32),
    0 2px 6px rgba(15,23,42,.18) !important;
  filter:drop-shadow(0 6px 12px rgba(124,92,255,.30));
  object-fit:contain !important;
}
.brand-copy{display:flex !important; flex-direction:column !important; gap:2px !important; min-width:0 !important;}
.brand-name{
  font-size:24px !important;
  line-height:1 !important;
  font-weight:900 !important;
  letter-spacing:-.02em !important;
  background:linear-gradient(135deg, #6d8aff 0%, #b489ff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:0 2px 12px rgba(124,92,255,.28);
  filter:drop-shadow(0 1px 0 rgba(15,23,42,.08));
}
body.theme-dark .brand-name{
  background:linear-gradient(135deg, #a4b5ff 0%, #d3a8ff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:0 2px 14px rgba(167,139,250,.42);
}
.brand-sub{display:none !important}
.brand-byline{
  font-size:10.5px !important;
  font-weight:800 !important;
  letter-spacing:.06em !important;
  text-transform:uppercase !important;
  color:var(--muted) !important;
  opacity:.86;
}

/* Report toolbar / scope panel — cleaner, balanced layout (Task 2) */
.report-filter-bar,
.report-toolbar-shell{
  padding:14px 18px !important;
  border-radius:20px !important;
  background:var(--panel-strong) !important;
  border:1px solid var(--line) !important;
  box-shadow:0 14px 36px rgba(15,23,42,.10), 0 1px 0 rgba(255,255,255,.5) inset !important;
}
.report-toolbar{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  gap:14px 18px !important;
  grid-template-columns:none !important;
}
.report-toolbar-group{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  padding:6px 12px !important;
  border-radius:14px !important;
  background:transparent !important;
  min-width:0 !important;
}
.report-toolbar-group + .report-toolbar-group{
  border-left:1px solid var(--line);
}
.report-toolbar-actions{margin-left:auto !important; border-left:0 !important;}
.report-toolbar-kicker{
  font-size:10.5px !important;
  font-weight:800 !important;
  letter-spacing:.10em !important;
  text-transform:uppercase !important;
  color:var(--muted) !important;
  opacity:.92;
  white-space:nowrap !important;
  padding-right:4px !important;
}
.report-toolbar select,
.report-toolbar input{
  min-height:36px !important;
  padding:7px 12px !important;
  font-size:13px !important;
  font-weight:600 !important;
  border-radius:12px !important;
}
.report-toolbar-scope select:first-of-type{width:auto !important; min-width:108px !important; flex:0 0 auto !important;}
.report-toolbar-scope select:last-of-type{min-width:200px !important; max-width:320px !important;}
.report-toolbar-view select:first-of-type{width:auto !important; min-width:90px !important; flex:0 0 auto !important;}
.report-toolbar-view select:last-of-type{min-width:170px !important;}
.report-toolbar-date-row-date,
.report-toolbar-date-row-range{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:8px !important;
  grid-template-columns:none !important;
}
.report-toolbar-actions .btn{
  min-height:36px !important;
  padding:0 14px !important;
  font-size:12px !important;
  font-weight:700 !important;
  border-radius:12px !important;
}

/* Report cards — rounded, 3D depth between line items (Task 4) */
.report-wrap{
  border-radius:24px !important;
  overflow:visible !important;
  padding:22px 24px !important;
  border:1px solid var(--line) !important;
  background:var(--panel-strong) !important;
  box-shadow:
    0 28px 60px rgba(15,23,42,.12),
    0 4px 12px rgba(15,23,42,.06),
    0 1px 0 rgba(255,255,255,.6) inset !important;
}
.report-head{
  margin-bottom:14px !important;
  padding-bottom:14px !important;
  border-bottom:1px solid var(--line) !important;
}
.report-title{
  font-size:22px !important;
  font-weight:900 !important;
  letter-spacing:-.02em !important;
  color:var(--text) !important;
}
.report-subtitle{
  font-size:11px !important;
  font-weight:800 !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
  color:var(--primary) !important;
}
.report-date{
  font-size:12px !important;
  color:var(--muted) !important;
}
.report{
  border-collapse:separate !important;
  border-spacing:0 8px !important;
  width:100% !important;
}
.report tbody td{
  padding:11px 14px !important;
  background:linear-gradient(180deg, rgba(255,255,255,.88), rgba(248,250,255,.78)) !important;
  border-top:1px solid var(--line) !important;
  border-bottom:1px solid var(--line) !important;
  box-shadow:0 2px 4px rgba(15,23,42,.04), 0 1px 0 rgba(255,255,255,.7) inset !important;
}
.report tbody td:first-child{
  border-left:1px solid var(--line) !important;
  border-top-left-radius:12px !important;
  border-bottom-left-radius:12px !important;
}
.report tbody td:last-child{
  border-right:1px solid var(--line) !important;
  border-top-right-radius:12px !important;
  border-bottom-right-radius:12px !important;
}
.report tbody tr.section-row td{
  background:linear-gradient(180deg, rgba(249,250,254,.78), rgba(245,247,252,.70)) !important;
  font-weight:700 !important;
  color:#2a3556 !important;
  box-shadow:none !important;
}
.report tbody tr.total-row td{
  background:linear-gradient(180deg, rgba(238,241,253,.62), rgba(232,236,250,.55)) !important;
  font-weight:700 !important;
  color:#2a3556 !important;
  box-shadow:none !important;
  backdrop-filter:blur(10px) saturate(1.03) !important;
  -webkit-backdrop-filter:blur(10px) saturate(1.03) !important;
}
.report tbody tr.total-row.heavy td{
  background:linear-gradient(180deg, rgba(228,232,250,.70), rgba(218,224,246,.62)) !important;
  font-weight:800 !important;
  font-size:13px !important;
  color:#1f2a4a !important;
  letter-spacing:.005em !important;
}
.report tbody tr.bs-group-row td{
  background:linear-gradient(180deg, rgba(243,245,252,.78), rgba(237,240,250,.70)) !important;
  font-weight:800 !important;
  text-transform:uppercase !important;
  letter-spacing:.06em !important;
  font-size:11px !important;
  color:#3a4a6a !important;
  padding-top:11px !important;
  padding-bottom:11px !important;
}
.report tbody tr.bs-total-row td{
  background:linear-gradient(180deg, rgba(228,232,250,.70), rgba(218,224,246,.62)) !important;
  font-weight:800 !important;
  color:#1f2a4a !important;
  box-shadow:none !important;
  backdrop-filter:blur(10px) saturate(1.03) !important;
  -webkit-backdrop-filter:blur(10px) saturate(1.03) !important;
}
.report tbody tr.bs-subtotal td{
  background:linear-gradient(180deg, rgba(243,245,252,.62), rgba(237,240,250,.55)) !important;
  font-weight:700 !important;
  color:#3a4a6a !important;
}
.report tbody tr:hover td{
  transform:none !important;
  box-shadow:none !important;
  filter:brightness(0.985);
}

/* Cash flow item input (Task 3 visual) */
.cashflow-item-input{
  min-height:34px !important;
  padding:6px 10px !important;
  font-size:12.5px !important;
  border-radius:10px !important;
  border:1px solid var(--line) !important;
  background:rgba(255,255,255,.96) !important;
  color:var(--text) !important;
  width:100% !important;
}
body.theme-dark .cashflow-item-input{
  background:rgba(20,30,58,.78) !important;
  color:var(--text) !important;
  border-color:rgba(124,92,255,.32) !important;
}

/* ============================================================
   DARK MODE — consistent night-blue/violet across the app (Task 8)
   ============================================================ */
body.theme-dark{
  --bg:#070d22;
  --text:#eef3ff;
  --muted:#9aa9cd;
  --primary:#8b75ff;
  --primary-strong:#a48aff;
  --primary-soft:rgba(139,117,255,.18);
  --panel:#0d1633;
  --panel-soft:rgba(15,24,52,.86);
  --panel-strong:rgba(13,22,51,.94);
  --line:rgba(124,131,200,.22);
  --line-strong:rgba(167,139,250,.34);
  --sidebar-top:#0a1230;
  --sidebar-bottom:#0a1638;
  --sidebar-text:#eef3ff;
  --nav-bg:rgba(255,255,255,.03);
  --nav-hover:rgba(139,117,255,.10);
  --nav-active-start:#5a4eff;
  --nav-active-end:#a06bff;
  --nav-active-text:#ffffff;
  color-scheme:dark;
}
body.theme-dark{
  background:
    radial-gradient(circle at 18% -4%, rgba(124,92,255,.32), transparent 28%),
    radial-gradient(circle at 86% 90%, rgba(56,108,255,.18), transparent 26%),
    linear-gradient(180deg, #050a1c 0%, #060d24 50%, #070f28 100%) !important;
}
body.theme-dark .app{background:transparent !important}

body.theme-dark .sidebar{
  background:linear-gradient(180deg, rgba(11,18,46,.96), rgba(9,16,40,.96)) !important;
  border:1px solid var(--line) !important;
  box-shadow:0 24px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04) !important;
}

body.theme-dark .panel,
body.theme-dark .report-wrap,
body.theme-dark .stat-card,
body.theme-dark .modal,
body.theme-dark .detail-panel,
body.theme-dark .workflow-company-card,
body.theme-dark .mapping-card,
body.theme-dark .provider-card,
body.theme-dark .company-overview-panel,
body.theme-dark .side-box,
body.theme-dark .report-toolbar-shell,
body.theme-dark .report-filter-bar,
body.theme-dark .page-head,
body.theme-dark .workflow-center-panel,
body.theme-dark .gl-import-guide,
body.theme-dark .gl-journey-panel,
body.theme-dark .currency-hero-panel,
body.theme-dark .coa-overview-panel,
body.theme-dark .integration-hero,
body.theme-dark .integration-panel{
  background:linear-gradient(180deg, rgba(15,24,52,.92) 0%, rgba(12,20,46,.92) 100%) !important;
  border:1px solid var(--line) !important;
  box-shadow:0 24px 48px rgba(0,0,0,.42), 0 1px 0 rgba(255,255,255,.04) inset !important;
  color:var(--text) !important;
}
body.theme-dark .page-head h1,
body.theme-dark .panel-title,
body.theme-dark .report-title,
body.theme-dark .workflow-company-name,
body.theme-dark .coa-overview-title,
body.theme-dark .gl-journey-title,
body.theme-dark .currency-hero-title{
  color:var(--text) !important;
}
body.theme-dark .subtitle,
body.theme-dark .muted,
body.theme-dark .report-date,
body.theme-dark .report-toolbar-kicker,
body.theme-dark .stat-label,
body.theme-dark .stat-hint,
body.theme-dark .workflow-meta-line,
body.theme-dark .mapping-card-submeta,
body.theme-dark .mapping-meta,
body.theme-dark .mapping-local span,
body.theme-dark .brand-byline{color:var(--muted) !important}

body.theme-dark .report-subtitle{color:var(--primary-strong) !important}

/* Dark mode inputs / selects / textareas */
body.theme-dark input,
body.theme-dark select,
body.theme-dark textarea,
body.theme-dark .btn.secondary,
body.theme-dark .icon-btn{
  background:rgba(20,30,58,.78) !important;
  color:var(--text) !important;
  border:1px solid var(--line) !important;
  box-shadow:0 4px 14px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.04) !important;
}
body.theme-dark input::placeholder,
body.theme-dark textarea::placeholder{color:var(--muted) !important; opacity:.78}
body.theme-dark input:focus,
body.theme-dark select:focus,
body.theme-dark textarea:focus{
  border-color:var(--line-strong) !important;
  box-shadow:0 0 0 3px rgba(139,117,255,.20) !important;
  outline:none !important;
}
body.theme-dark option{background:#0d1633 !important; color:var(--text) !important}

/* Dark mode buttons */
body.theme-dark .btn{color:var(--text) !important}
body.theme-dark .btn.primary{
  background:linear-gradient(135deg, #6d52ff 0%, #a06bff 100%) !important;
  color:#fff !important;
  border-color:transparent !important;
  box-shadow:0 16px 32px rgba(124,92,255,.40), 0 1px 0 rgba(255,255,255,.10) inset !important;
}
body.theme-dark .btn.secondary:hover,
body.theme-dark .icon-btn:hover{
  background:rgba(124,92,255,.16) !important;
  border-color:var(--line-strong) !important;
}

/* Dark mode tables / reports */
body.theme-dark .grid th,
body.theme-dark .report th,
body.theme-dark .mapping-table th{
  background:transparent !important;
  color:var(--muted) !important;
  border-bottom:1px solid var(--line) !important;
}
body.theme-dark .grid tbody td,
body.theme-dark .report tbody td{
  background:linear-gradient(180deg, rgba(20,30,60,.74), rgba(15,24,52,.74)) !important;
  border-top:1px solid var(--line) !important;
  border-bottom:1px solid var(--line) !important;
  color:var(--text) !important;
  box-shadow:0 2px 6px rgba(0,0,0,.32), 0 1px 0 rgba(255,255,255,.04) inset !important;
}
body.theme-dark .grid tbody td:first-child,
body.theme-dark .report tbody td:first-child{border-left:1px solid var(--line) !important}
body.theme-dark .grid tbody td:last-child,
body.theme-dark .report tbody td:last-child{border-right:1px solid var(--line) !important}
body.theme-dark .grid tbody tr:hover td,
body.theme-dark .report tbody tr:hover td{
  background:linear-gradient(180deg, rgba(40,52,98,.82), rgba(28,42,82,.82)) !important;
}
body.theme-dark .report tbody tr.section-row td{
  background:linear-gradient(180deg, rgba(40,52,98,.92), rgba(30,42,84,.92)) !important;
  color:var(--text) !important;
}
body.theme-dark .report tbody tr.total-row td{
  background:linear-gradient(180deg, rgba(58,42,118,.86), rgba(42,30,98,.86)) !important;
  color:#eef3ff !important;
  box-shadow:0 8px 18px rgba(124,92,255,.24), 0 1px 0 rgba(255,255,255,.05) inset !important;
}
body.theme-dark .report tbody tr.total-row.heavy td{
  background:linear-gradient(180deg, rgba(72,52,148,.94), rgba(52,38,128,.94)) !important;
  color:#fff !important;
}
body.theme-dark .report tbody tr.bs-group-row td{
  background:linear-gradient(180deg, rgba(38,48,92,.92), rgba(28,38,82,.92)) !important;
  color:#eef3ff !important;
}
body.theme-dark .report tbody tr.bs-total-row td{
  background:linear-gradient(180deg, rgba(58,42,118,.94), rgba(42,30,98,.94)) !important;
  color:#fff !important;
  box-shadow:0 8px 18px rgba(124,92,255,.30), 0 1px 0 rgba(255,255,255,.06) inset !important;
}
body.theme-dark .report tbody tr.bs-subtotal td{
  background:linear-gradient(180deg, rgba(30,42,86,.92), rgba(24,34,78,.92)) !important;
  color:var(--text) !important;
}

/* Dark mode modals & dropdowns */
body.theme-dark .modal{
  background:linear-gradient(180deg, rgba(13,22,51,.98), rgba(10,18,44,.98)) !important;
  color:var(--text) !important;
}
body.theme-dark .modal-backdrop{background:rgba(2,5,16,.72) !important}
body.theme-dark .modal-head,
body.theme-dark .modal-foot{border-color:var(--line) !important}

/* Dark mode status badges / pills */
body.theme-dark .pill,
body.theme-dark .workflow-pill,
body.theme-dark .status-badge,
body.theme-dark .gl-journey-chiprow span,
body.theme-dark .coa-overview-chiprow span,
body.theme-dark .currency-meta-strip span,
body.theme-dark .company-meta-strip span{
  background:rgba(124,92,255,.14) !important;
  color:#dcd0ff !important;
  border:1px solid rgba(124,92,255,.30) !important;
}
body.theme-dark .status-badge.mapped{background:rgba(34,197,94,.14) !important; color:#86efac !important; border-color:rgba(34,197,94,.30) !important}
body.theme-dark .status-badge.conflict{background:rgba(248,113,113,.14) !important; color:#fda4af !important; border-color:rgba(248,113,113,.32) !important}

/* Dark mode tab/notes/validation boxes */
body.theme-dark .company-directory-note,
body.theme-dark .coa-guidance-strip,
body.theme-dark .preview-guidance,
body.theme-dark .gl-layout-note,
body.theme-dark .validation-box,
body.theme-dark .status,
body.theme-dark .mapping-coach-row,
body.theme-dark .ready-strip{
  background:rgba(20,30,60,.62) !important;
  color:var(--muted) !important;
  border:1px solid var(--line) !important;
}
body.theme-dark .validation-box.success{background:rgba(34,197,94,.10) !important; color:#bbf7d0 !important; border-color:rgba(34,197,94,.30) !important}
body.theme-dark .validation-box.error{background:rgba(248,113,113,.10) !important; color:#fecaca !important; border-color:rgba(248,113,113,.32) !important}

/* Dark mode page-head text */
body.theme-dark .page-head{
  background:linear-gradient(180deg, rgba(15,24,52,.92), rgba(12,20,46,.92)) !important;
  border:1px solid var(--line) !important;
}

/* Stat cards icons (dashboard) — keep their tint readable */
body.theme-dark .stat-icon,
body.theme-dark .workflow-stat-icon{filter:saturate(1.1) brightness(1.05)}

/* Sharper headings & high-contrast body text */
body.theme-light{color:#0f1a36 !important}
body.theme-light .panel-title,
body.theme-light .page-head h1,
body.theme-light .report-title{color:#0b1430 !important}
body.theme-light .muted,
body.theme-light .subtitle{color:#516381 !important}

/* Background controls in dark mode */
body.theme-dark .background-controls{
  background:rgba(15,24,52,.78) !important;
  border:1px solid var(--line) !important;
  box-shadow:0 12px 30px rgba(0,0,0,.42) !important;
}
body.theme-dark .background-toggle,
body.theme-dark .background-controls .btn{
  background:rgba(124,92,255,.14) !important;
  color:var(--text) !important;
  border:1px solid var(--line) !important;
}

/* Mobile small refinements */
@media (max-width:760px){
  .brand{flex-direction:row !important; padding:10px 4px !important}
  .brand-logo{width:48px !important; height:48px !important; flex:0 0 48px !important}
  .brand-name{font-size:20px !important}
  .report-toolbar{gap:10px 12px !important}
  .report-toolbar-group + .report-toolbar-group{border-left:0 !important}
}

/* ============================================================
   2026-05-13 ROUND 2 — sidebar fit + readability fixes
   ============================================================ */

/* Widen sidebar so brand fits comfortably */
.app{grid-template-columns:240px minmax(0,1fr) !important}
@media (min-width:1400px){.app{grid-template-columns:260px minmax(0,1fr) !important}}
.sidebar{padding:18px 14px !important; width:auto !important}

/* Brand stacked vertically: logo on top, name + byline below, all centered */
.brand{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  gap:10px !important;
  padding:8px 4px 18px !important;
  margin-bottom:14px !important;
  background:transparent !important;
  border:0 !important;
  border-bottom:1px solid var(--line) !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
.brand-logo{
  width:84px !important;
  height:84px !important;
  flex:0 0 84px !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  border-radius:50% !important;
  box-shadow:
    0 18px 32px rgba(99,102,241,.38),
    0 4px 10px rgba(15,23,42,.22),
    0 1px 0 rgba(255,255,255,.30) inset !important;
  filter:drop-shadow(0 10px 18px rgba(124,92,255,.36));
  object-fit:contain !important;
}
.brand-copy{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  gap:3px !important;
  min-width:0 !important;
  width:100% !important;
}
.brand-name{
  font-size:22px !important;
  line-height:1 !important;
  font-weight:900 !important;
  letter-spacing:-.01em !important;
  background:linear-gradient(135deg, #6d8aff 0%, #b489ff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:0 2px 14px rgba(124,92,255,.36);
  overflow:visible !important;
  text-overflow:clip !important;
  white-space:nowrap !important;
}
body.theme-light .brand-name{
  background:linear-gradient(135deg, #2547e6 0%, #7a4dff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.brand-byline{
  font-size:9.5px !important;
  font-weight:800 !important;
  letter-spacing:.10em !important;
  text-transform:uppercase !important;
  color:var(--muted) !important;
  opacity:.92;
  white-space:nowrap !important;
}
.brand-sub{display:none !important}

/* Nav button readability — force high-contrast in dark mode */
body.theme-dark .nav-btn,
body.theme-dark .nav-section-btn,
body.theme-dark .nav-subbtn{
  color:#eef3ff !important;
  background:rgba(255,255,255,.04) !important;
  border:1px solid transparent !important;
  font-weight:700 !important;
}
body.theme-dark .nav-btn:hover,
body.theme-dark .nav-section-btn:hover,
body.theme-dark .nav-subbtn:hover{
  color:#ffffff !important;
  background:rgba(139,117,255,.16) !important;
  border-color:var(--line-strong) !important;
}
body.theme-dark .nav-btn.active,
body.theme-dark .nav-section-btn.active,
body.theme-dark .nav-subbtn.active{
  color:#ffffff !important;
  background:linear-gradient(135deg, #5a4eff 0%, #a06bff 100%) !important;
  border-color:transparent !important;
  box-shadow:0 16px 32px rgba(124,92,255,.40), 0 1px 0 rgba(255,255,255,.10) inset !important;
}
body.theme-light .nav-btn,
body.theme-light .nav-section-btn,
body.theme-light .nav-subbtn{color:#1f2a4a !important; font-weight:700 !important}

/* High-contrast page titles and panel titles in dark mode */
body.theme-dark .page-head{
  background:linear-gradient(180deg, rgba(15,24,52,.96), rgba(12,20,46,.96)) !important;
  border:1px solid var(--line) !important;
  box-shadow:0 18px 40px rgba(0,0,0,.42), 0 1px 0 rgba(255,255,255,.04) inset !important;
}
body.theme-dark .page-head h1,
body.theme-dark .page-head h2,
body.theme-dark .panel-title,
body.theme-dark .report-title,
body.theme-dark .workflow-company-name,
body.theme-dark .coa-overview-title,
body.theme-dark .gl-journey-title,
body.theme-dark .currency-hero-title,
body.theme-dark h1,
body.theme-dark h2,
body.theme-dark h3{
  color:#f5f8ff !important;
  text-shadow:0 1px 0 rgba(0,0,0,.20);
}
body.theme-dark .stat-value,
body.theme-dark .workflow-stat-value{color:#f5f8ff !important}
body.theme-dark .stat-label,
body.theme-dark .workflow-stat-label{color:#a8b6da !important; font-weight:800 !important}

/* Light-mode contrast tightening */
body.theme-light .page-head h1,
body.theme-light .panel-title,
body.theme-light .report-title{color:#0b1430 !important}
body.theme-light .nav-btn,
body.theme-light .nav-section-btn,
body.theme-light .nav-subbtn{color:#1f2a4a !important}

/* Make sure the "subtitle" text under page-head h1 is hidden everywhere
   (we already removed the SYMMETRA subtitle, but page subtitles were also blurry) */
.page-head .subtitle{display:none !important}

/* Polish: keep a hint of backdrop-blur on dark mode panels for depth, but
   don't smear the text */
body.theme-dark .panel,
body.theme-dark .report-wrap,
body.theme-dark .page-head,
body.theme-dark .modal,
body.theme-dark .sidebar{
  backdrop-filter:blur(6px) saturate(1.10) !important;
  -webkit-backdrop-filter:blur(6px) saturate(1.10) !important;
}

/* Mobile: keep brand stacked but smaller */
@media (max-width:760px){
  .app{grid-template-columns:1fr !important}
  .brand-logo{width:64px !important; height:64px !important; flex:0 0 64px !important}
  .brand-name{font-size:20px !important}
}

/* ============================================================
   2026-05-13 FINAL — compact, refined, reference-matched dark mode
   This block is the terminal source of truth for visuals.
   ============================================================ */

/* ---- Density handled by tokens + responsive breakpoints; CSS zoom removed
   (it broke hit-testing / vh math and didn't adapt across devices). ---- */

/* ---- Sidebar: tighter width, single compact column ---- */
.app{grid-template-columns:218px minmax(0,1fr) !important; gap:18px !important; padding:18px !important}
@media (min-width:1500px){.app{grid-template-columns:230px minmax(0,1fr) !important}}
.sidebar{
  padding:14px 12px !important;
  border-radius:22px !important;
  position:sticky !important;
  top:16px !important;
  height:calc(100vh - 32px) !important;
}

/* ---- Brand: compact, side-by-side, soft (Tasks 1, 2, 4) ---- */
.brand{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:flex-start !important;
  text-align:left !important;
  gap:10px !important;
  padding:6px 6px 14px !important;
  margin-bottom:10px !important;
  background:transparent !important;
  border:0 !important;
  border-bottom:1px solid var(--line) !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
.brand-logo{
  width:38px !important;
  height:38px !important;
  flex:0 0 38px !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  border-radius:50% !important;
  box-shadow:0 2px 6px rgba(15,23,42,.18) !important;
  filter:none !important;
  object-fit:contain !important;
}
.brand-copy{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  gap:1px !important;
  min-width:0 !important;
  width:auto !important;
  flex:1 1 auto !important;
  overflow:hidden !important;
}
.brand-name{
  font-size:15px !important;
  line-height:1.1 !important;
  font-weight:800 !important;
  letter-spacing:.01em !important;
  color:var(--text) !important;
  background:none !important;
  -webkit-text-fill-color:initial !important;
  text-shadow:none !important;
  filter:none !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  max-width:100% !important;
}
.brand-sub{
  display:block !important;
  font-size:10px !important;
  line-height:1.25 !important;
  font-weight:500 !important;
  color:var(--muted) !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  max-width:100% !important;
  margin-top:1px !important;
}
.brand-byline{
  font-size:9px !important;
  font-weight:800 !important;
  letter-spacing:.06em !important;
  text-transform:uppercase !important;
  color:#8b5cf6 !important;
  white-space:nowrap !important;
  margin-top:2px !important;
  opacity:.95;
}
body.theme-dark .brand-byline{color:#a78bfa !important}

/* ---- Nav buttons: smaller, calmer ---- */
.nav{gap:4px !important; margin:6px 0 14px !important}
.nav-btn,.nav-section-btn{
  min-height:38px !important;
  padding:0 12px !important;
  font-size:13px !important;
  font-weight:700 !important;
  border-radius:12px !important;
  border:1px solid transparent !important;
  background:transparent !important;
  box-shadow:none !important;
  gap:10px !important;
}
.nav-subbtn{
  min-height:32px !important;
  padding:0 10px !important;
  font-size:12px !important;
  font-weight:600 !important;
  border-radius:10px !important;
  background:transparent !important;
  border:1px solid transparent !important;
  box-shadow:none !important;
  gap:9px !important;
}
.nav-btn-icon{width:18px !important; height:18px !important}
.nav-btn-icon svg{width:18px !important; height:18px !important}
.nav-section{gap:2px !important}
.nav-subnav{gap:2px !important; padding:4px 0 0 8px !important}
.nav-btn.active::before,
.nav-section-btn.active::before,
.nav-subbtn.active::before{display:none !important}

/* ---- Soften the active button (less shine) ---- */
.nav-btn.active,
.nav-section-btn.active,
.nav-subbtn.active{
  background:linear-gradient(135deg, #4f6dff 0%, #7a4dff 100%) !important;
  color:#ffffff !important;
  border-color:transparent !important;
  box-shadow:0 6px 14px rgba(79,109,255,.22) !important;
}

/* ---- Page head: tighter, less padding ---- */
.page-head{
  padding:14px 18px !important;
  border-radius:18px !important;
  margin-bottom:12px !important;
  box-shadow:0 2px 0 rgba(15,23,42,.02) !important;
}
.page-head h1{
  font-size:20px !important;
  font-weight:800 !important;
  line-height:1.1 !important;
  letter-spacing:-.01em !important;
}
.page-head .subtitle,
.subtitle{display:none !important}

/* ---- Panels: less padding, calmer shadow ---- */
.panel,.report-wrap,.workflow-company-card,.mapping-card,.provider-card,.company-overview-panel,.workflow-center-panel,.gl-import-guide,.gl-journey-panel,.coa-overview-panel,.currency-hero-panel,.integration-hero,.integration-panel{
  padding:16px 18px !important;
  border-radius:18px !important;
  box-shadow:0 6px 16px rgba(15,23,42,.05) !important;
}
.panel-title{
  font-size:15px !important;
  font-weight:800 !important;
  margin-bottom:10px !important;
}

/* ---- Stat cards: smaller, single soft tone ---- */
.stat-card{
  padding:12px 14px !important;
  border-radius:14px !important;
  box-shadow:0 4px 10px rgba(15,23,42,.04) !important;
}
.stat-label{font-size:10px !important; letter-spacing:.04em !important}
.stat-value{font-size:18px !important; font-weight:800 !important; margin-top:4px !important}

/* ---- Buttons: subtle ---- */
.btn{
  min-height:34px !important;
  padding:0 14px !important;
  font-size:12.5px !important;
  font-weight:700 !important;
  border-radius:11px !important;
  box-shadow:none !important;
  letter-spacing:0 !important;
  text-shadow:none !important;
}
.btn.primary{
  background:linear-gradient(135deg, #4f6dff 0%, #7a4dff 100%) !important;
  color:#ffffff !important;
  border:0 !important;
  box-shadow:0 4px 10px rgba(79,109,255,.18) !important;
}
body.theme-dark .btn.primary{box-shadow:0 6px 14px rgba(124,92,255,.30) !important}
.btn.primary:hover{filter:brightness(1.05); transform:translateY(-1px)}
.btn.small,.btn.btn-compact{
  min-height:28px !important;
  padding:0 10px !important;
  font-size:11.5px !important;
  border-radius:9px !important;
}

/* ---- Inputs: smaller, refined ---- */
input,select,textarea{
  min-height:34px !important;
  padding:7px 10px !important;
  font-size:12.5px !important;
  border-radius:10px !important;
  box-shadow:none !important;
}

/* ---- Reports filter/scope panel: clean grid alignment (Task 6) ---- */
.report-filter-bar,.report-toolbar-shell{
  padding:14px 16px !important;
  border-radius:16px !important;
  box-shadow:0 4px 12px rgba(15,23,42,.04) !important;
}
.report-toolbar{
  display:grid !important;
  grid-template-columns:auto 1fr auto !important;
  grid-template-rows:auto auto !important;
  grid-template-areas:
    "scope  when  view"
    ".      .     actions" !important;
  gap:12px 18px !important;
  align-items:center !important;
}
.report-toolbar-group{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
}
.report-toolbar-group + .report-toolbar-group{border-left:0 !important}
.report-toolbar-scope{grid-area:scope !important}
.report-toolbar-when{grid-area:when !important; justify-content:center !important}
.report-toolbar-view{grid-area:view !important; justify-content:flex-end !important}
.report-toolbar-actions{
  grid-area:actions !important;
  justify-content:flex-end !important;
  display:flex !important;
  gap:8px !important;
  flex-wrap:wrap !important;
}
.report-toolbar-kicker{
  font-size:10px !important;
  font-weight:800 !important;
  letter-spacing:.10em !important;
  text-transform:uppercase !important;
  color:var(--muted) !important;
  padding-right:2px !important;
  min-width:42px !important;
}
.report-toolbar select,
.report-toolbar input{
  min-height:32px !important;
  padding:5px 10px !important;
  font-size:12px !important;
  font-weight:600 !important;
  border-radius:9px !important;
}
.report-toolbar-scope select:first-of-type{min-width:96px !important; flex:0 0 auto !important; width:auto !important}
.report-toolbar-scope select:last-of-type{min-width:160px !important; max-width:240px !important}
.report-toolbar-view select:first-of-type{min-width:76px !important; flex:0 0 auto !important; width:auto !important}
.report-toolbar-view select:last-of-type{min-width:140px !important}
.report-toolbar-date-row-date,
.report-toolbar-date-row-range{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:8px !important;
  grid-template-columns:none !important;
  justify-content:center !important;
}
.report-toolbar-actions .btn{
  min-height:32px !important;
  padding:0 12px !important;
  font-size:11.5px !important;
}
@media (max-width:1100px){
  .report-toolbar{
    grid-template-columns:1fr !important;
    grid-template-areas:"scope" "when" "view" "actions" !important;
  }
  .report-toolbar-when,.report-toolbar-view,.report-toolbar-actions{justify-content:flex-start !important}
}

/* ---- Report body: refined, less shine ---- */
.report-wrap{padding:18px 20px !important; border-radius:20px !important}
.report-title{font-size:18px !important; font-weight:800 !important}
.report-subtitle{font-size:10px !important; letter-spacing:.10em !important}
.report-date{font-size:11px !important}
.report{border-spacing:0 4px !important}
.report tbody td{
  padding:9px 12px !important;
  box-shadow:none !important;
}
.report tbody tr.total-row td,
.report tbody tr.bs-total-row td{box-shadow:none !important; font-size:13px !important}
.report tbody tr.total-row.heavy td{font-size:13.5px !important}
.report tbody tr:hover td{transform:none !important; box-shadow:none !important}

/* ============================================================
   LIGHT MODE — gentle single-tone tints (Task 5)
   Each section gets ONE soft tone, no mixing inside a panel.
   ============================================================ */
body.theme-light{
  background:
    radial-gradient(circle at 18% 0%, rgba(124,92,255,.06), transparent 30%),
    linear-gradient(180deg, #f5f7ff 0%, #f1f4fb 100%) !important;
}
body.theme-light .sidebar{
  background:#ffffff !important;
  border:1px solid #e6ebf5 !important;
  box-shadow:0 4px 18px rgba(15,23,42,.04) !important;
}
body.theme-light .page-head{
  background:#ffffff !important;
  border:1px solid #e6ebf5 !important;
  box-shadow:0 2px 8px rgba(15,23,42,.04) !important;
}
/* Default panel — soft blue tint */
body.theme-light .panel,
body.theme-light .report-wrap,
body.theme-light .report-toolbar-shell,
body.theme-light .report-filter-bar,
body.theme-light .modal{
  background:linear-gradient(180deg, #fbfcff 0%, #f4f7ff 100%) !important;
  border:1px solid #e5ebf7 !important;
  box-shadow:0 4px 14px rgba(48,76,170,.05) !important;
}
/* Workflow center — soft purple tint */
body.theme-light .workflow-center-panel{
  background:linear-gradient(180deg, #fbfaff 0%, #f4f0ff 100%) !important;
  border:1px solid #ece4ff !important;
  box-shadow:0 4px 14px rgba(124,92,255,.06) !important;
}
/* Company cards — soft green tint */
body.theme-light .workflow-company-card{
  background:linear-gradient(180deg, #f9fdfb 0%, #effaf3 100%) !important;
  border:1px solid #d8efe1 !important;
  box-shadow:0 4px 14px rgba(34,139,82,.06) !important;
}
/* GL import / journey — soft blue */
body.theme-light .gl-import-guide,
body.theme-light .gl-journey-panel{
  background:linear-gradient(180deg, #f9fbff 0%, #eef4ff 100%) !important;
  border:1px solid #dfe7f7 !important;
  box-shadow:0 4px 14px rgba(48,76,170,.05) !important;
}
/* Mapping cards — soft purple */
body.theme-light .mapping-card{
  background:linear-gradient(180deg, #fbfaff 0%, #f4f0ff 100%) !important;
  border:1px solid #ece4ff !important;
  box-shadow:0 4px 14px rgba(124,92,255,.06) !important;
}
/* Stat cards — alternate tones via nth-child */
body.theme-light .stat-card{
  background:#ffffff !important;
  border:1px solid #e6ebf5 !important;
}
body.theme-light .stats-grid .stat-card:nth-child(5n+1){background:linear-gradient(180deg, #fcfdff 0%, #f1f5ff 100%) !important; border-color:#dfe7f7 !important}
body.theme-light .stats-grid .stat-card:nth-child(5n+2){background:linear-gradient(180deg, #fdfcff 0%, #f5f1ff 100%) !important; border-color:#ece4ff !important}
body.theme-light .stats-grid .stat-card:nth-child(5n+3){background:linear-gradient(180deg, #fcfffe 0%, #effaf3 100%) !important; border-color:#d8efe1 !important}
body.theme-light .stats-grid .stat-card:nth-child(5n+4){background:linear-gradient(180deg, #fdfcff 0%, #f5f1ff 100%) !important; border-color:#ece4ff !important}
body.theme-light .stats-grid .stat-card:nth-child(5n+5){background:linear-gradient(180deg, #fcfdff 0%, #f1f5ff 100%) !important; border-color:#dfe7f7 !important}

body.theme-light .nav-btn,
body.theme-light .nav-section-btn,
body.theme-light .nav-subbtn{color:#1f2a4a !important; background:transparent !important; border:1px solid transparent !important}
body.theme-light .nav-btn:hover,
body.theme-light .nav-section-btn:hover,
body.theme-light .nav-subbtn:hover{background:#f1f4fb !important; border-color:transparent !important}

body.theme-light .report tbody td{
  background:#ffffff !important;
  border-top:1px solid #ecf0f7 !important;
  border-bottom:1px solid #ecf0f7 !important;
}
body.theme-light .report tbody tr.section-row td{background:#f4f7ff !important; color:#1f2a4a !important}
body.theme-light .report tbody tr.total-row td{background:#eef9f1 !important; color:#0f1a36 !important}
body.theme-light .report tbody tr.total-row.heavy td{background:#dff4e6 !important}
body.theme-light .report tbody tr.bs-group-row td{background:#eef2fd !important; color:#1f2a4a !important}
body.theme-light .report tbody tr.bs-total-row td{background:#eef9f1 !important}
body.theme-light .report tbody tr.bs-subtotal td{background:#f4f7ff !important}

/* ============================================================
   DARK MODE — match reference: deep night-blue, no white, no shine
   ============================================================ */
body.theme-dark{
  --bg:#070d22;
  --text:#eef3ff;
  --muted:#94a3c4;
  --primary:#7c5cff;
  --primary-strong:#9d6bff;
  --primary-soft:rgba(124,92,255,.16);
  --panel:#0c1530;
  --panel-soft:rgba(12,21,48,.78);
  --panel-strong:#0d1633;
  --line:rgba(124,131,200,.18);
  --line-strong:rgba(167,139,250,.32);
  --sidebar-top:#0a1230;
  --sidebar-bottom:#08102a;
  --sidebar-text:#eef3ff;
  --nav-bg:transparent;
  --nav-hover:rgba(124,92,255,.10);
  --nav-active-start:#4f6dff;
  --nav-active-end:#7a4dff;
  --nav-active-text:#ffffff;
  color-scheme:dark;
}
body.theme-dark{
  background:
    radial-gradient(circle at 12% -4%, rgba(124,92,255,.18), transparent 30%),
    radial-gradient(circle at 88% 92%, rgba(56,108,255,.10), transparent 28%),
    linear-gradient(180deg, #060c1f 0%, #070d22 50%, #060c1f 100%) !important;
}
body.theme-dark::before{display:none !important}
body.theme-dark .app{background:transparent !important}

body.theme-dark .sidebar{
  background:#0a1230 !important;
  border:1px solid var(--line) !important;
  box-shadow:0 8px 28px rgba(0,0,0,.36) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* Every panel-like container in dark mode is the same calm navy */
body.theme-dark .panel,
body.theme-dark .report-wrap,
body.theme-dark .report-toolbar-shell,
body.theme-dark .report-filter-bar,
body.theme-dark .stat-card,
body.theme-dark .modal,
body.theme-dark .detail-panel,
body.theme-dark .workflow-company-card,
body.theme-dark .mapping-card,
body.theme-dark .provider-card,
body.theme-dark .company-overview-panel,
body.theme-dark .side-box,
body.theme-dark .page-head,
body.theme-dark .workflow-center-panel,
body.theme-dark .gl-import-guide,
body.theme-dark .gl-journey-panel,
body.theme-dark .currency-hero-panel,
body.theme-dark .coa-overview-panel,
body.theme-dark .integration-hero,
body.theme-dark .integration-panel{
  background:#0c1530 !important;
  border:1px solid var(--line) !important;
  box-shadow:0 4px 14px rgba(0,0,0,.26) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  color:var(--text) !important;
}
body.theme-dark .stat-card{background:#0d1838 !important}

body.theme-dark .page-head h1,
body.theme-dark .page-head h2,
body.theme-dark .panel-title,
body.theme-dark .report-title,
body.theme-dark .workflow-company-name,
body.theme-dark .coa-overview-title,
body.theme-dark .gl-journey-title,
body.theme-dark .currency-hero-title,
body.theme-dark h1,
body.theme-dark h2,
body.theme-dark h3{color:#f5f8ff !important; text-shadow:none !important}
body.theme-dark .brand-name{color:#f5f8ff !important}
body.theme-dark .subtitle,
body.theme-dark .muted,
body.theme-dark .report-date,
body.theme-dark .report-toolbar-kicker,
body.theme-dark .stat-label,
body.theme-dark .stat-hint,
body.theme-dark .workflow-meta-line,
body.theme-dark .mapping-card-submeta,
body.theme-dark .mapping-meta,
body.theme-dark .brand-sub{color:#94a3c4 !important}

body.theme-dark .nav-btn,
body.theme-dark .nav-section-btn,
body.theme-dark .nav-subbtn{
  color:#cdd6f4 !important;
  background:transparent !important;
  border:1px solid transparent !important;
  box-shadow:none !important;
}
body.theme-dark .nav-btn:hover,
body.theme-dark .nav-section-btn:hover,
body.theme-dark .nav-subbtn:hover{
  background:rgba(124,92,255,.10) !important;
  color:#ffffff !important;
  border-color:transparent !important;
}

/* Dark inputs / selects */
body.theme-dark input,
body.theme-dark select,
body.theme-dark textarea{
  background:#0e1838 !important;
  color:var(--text) !important;
  border:1px solid var(--line) !important;
  box-shadow:none !important;
}
body.theme-dark input::placeholder,
body.theme-dark textarea::placeholder{color:#7884a8 !important; opacity:1}
body.theme-dark input:focus,
body.theme-dark select:focus,
body.theme-dark textarea:focus{
  border-color:var(--line-strong) !important;
  box-shadow:0 0 0 3px rgba(124,92,255,.18) !important;
  outline:none !important;
}
body.theme-dark option{background:#0c1530 !important; color:var(--text) !important}

body.theme-dark .btn.secondary,
body.theme-dark .icon-btn{
  background:#0e1838 !important;
  color:var(--text) !important;
  border:1px solid var(--line) !important;
  box-shadow:none !important;
}
body.theme-dark .btn.secondary:hover,
body.theme-dark .icon-btn:hover{background:#11214a !important; border-color:var(--line-strong) !important}

/* Dark tables */
body.theme-dark .grid th,
body.theme-dark .report th,
body.theme-dark .mapping-table th{
  background:transparent !important;
  color:#94a3c4 !important;
  border-bottom:1px solid var(--line) !important;
}
body.theme-dark .grid tbody td,
body.theme-dark .report tbody td{
  background:#0e1838 !important;
  border-top:1px solid var(--line) !important;
  border-bottom:1px solid var(--line) !important;
  color:var(--text) !important;
  box-shadow:none !important;
}
body.theme-dark .grid tbody tr:hover td,
body.theme-dark .report tbody tr:hover td{background:#142150 !important}
body.theme-dark .report tbody tr.section-row td{background:#0f1c40 !important; color:var(--text) !important}
body.theme-dark .report tbody tr.total-row td{background:#161a48 !important; color:#eef3ff !important}
body.theme-dark .report tbody tr.total-row.heavy td{background:#1c1f56 !important; color:#ffffff !important}
body.theme-dark .report tbody tr.bs-group-row td{background:#101c44 !important; color:#eef3ff !important}
body.theme-dark .report tbody tr.bs-total-row td{background:#1c1f56 !important; color:#ffffff !important}
body.theme-dark .report tbody tr.bs-subtotal td{background:#0f1c40 !important}

/* Modal */
body.theme-dark .modal{background:#0c1530 !important}
body.theme-dark .modal-backdrop{background:rgba(2,6,18,.78) !important}
body.theme-dark .modal-head,
body.theme-dark .modal-foot{border-color:var(--line) !important}

/* Pills, badges, notes */
body.theme-dark .pill,
body.theme-dark .workflow-pill,
body.theme-dark .status-badge,
body.theme-dark .gl-journey-chiprow span,
body.theme-dark .coa-overview-chiprow span,
body.theme-dark .currency-meta-strip span,
body.theme-dark .company-meta-strip span{
  background:rgba(124,92,255,.12) !important;
  color:#d8d0ff !important;
  border:1px solid rgba(124,92,255,.24) !important;
}
body.theme-dark .status-badge.mapped{background:rgba(34,197,94,.12) !important; color:#86efac !important; border-color:rgba(34,197,94,.26) !important}
body.theme-dark .status-badge.conflict{background:rgba(248,113,113,.12) !important; color:#fda4af !important; border-color:rgba(248,113,113,.28) !important}
body.theme-dark .workflow-pill.import,
body.theme-dark .workflow-pill.warning{background:rgba(251,146,60,.14) !important; color:#fdba74 !important; border-color:rgba(251,146,60,.30) !important}
body.theme-dark .pill.is-info{background:rgba(56,108,255,.14) !important; color:#93c5fd !important; border-color:rgba(56,108,255,.30) !important}

body.theme-dark .company-directory-note,
body.theme-dark .coa-guidance-strip,
body.theme-dark .preview-guidance,
body.theme-dark .gl-layout-note,
body.theme-dark .validation-box,
body.theme-dark .status,
body.theme-dark .mapping-coach-row,
body.theme-dark .ready-strip{
  background:#0e1838 !important;
  color:#94a3c4 !important;
  border:1px solid var(--line) !important;
}

/* Background controls (top-right) */
body.theme-dark .background-controls{
  background:#0c1530 !important;
  border:1px solid var(--line) !important;
  box-shadow:0 4px 14px rgba(0,0,0,.32) !important;
}
body.theme-dark .background-toggle,
body.theme-dark .background-controls .btn{
  background:#0e1838 !important;
  color:var(--text) !important;
  border:1px solid var(--line) !important;
}

/* Remove any lingering text-shadow / drop-shadow shine */
body.theme-dark .brand-logo{box-shadow:0 2px 8px rgba(0,0,0,.40) !important; filter:none !important}
body.theme-light .brand-logo{box-shadow:0 2px 6px rgba(15,23,42,.15) !important; filter:none !important}

/* ============================================================
   2026-05-13 ARCHITECTURE FIX — kill global background-image leak,
   make app shell opaque and full-height, force theme tokens.
   This is the LAST word on body/html/app backgrounds.
   ============================================================ */
html,
html body,
html body.theme-light,
html body.theme-dark{
  min-height:100vh !important;
  background-image:none !important;
  background-attachment:scroll !important;
  background-repeat:no-repeat !important;
}
html body.theme-light{
  background:#f1f4fb !important;
  color:#0f1a36 !important;
}
html body.theme-dark{
  background:
    radial-gradient(circle at 14% -4%, rgba(124,92,255,.20), transparent 30%),
    radial-gradient(circle at 86% 92%, rgba(56,108,255,.12), transparent 28%),
    linear-gradient(180deg, #060c1f 0%, #070d22 50%, #060c1f 100%) !important;
  background-color:#060c1f !important;
  color:#eef3ff !important;
}
/* ============================================================
   2026-05-13 — final polish pass (Task 7)
   Sharper text, bolder icons, gentle depth, soft single-tone tints.
   ============================================================ */
html, body{
  font-feature-settings:"ss01","cv11","cv10" !important;
  text-rendering:optimizeLegibility !important;
  -webkit-font-smoothing:subpixel-antialiased !important;
  -moz-osx-font-smoothing:grayscale !important;
}
/* High-contrast body text */
body, .panel, .report-wrap, .modal{color:#0e1a36 !important}
.muted, .subtitle{color:#5b6c8a !important; font-weight:500 !important}
.panel-title, .page-head h1, .report-title, .workflow-company-name{
  color:#0b1430 !important;
  letter-spacing:-.012em !important;
}

/* Sharper, bolder icons everywhere */
.btn svg, .icon-btn svg, .nav-btn-icon svg, .workflow-summary-icon svg, .stat-card svg{
  stroke-width:2.2 !important;
  shape-rendering:geometricPrecision !important;
}
.nav-btn-icon svg{stroke-width:2 !important}
.workflow-summary-icon{
  border-radius:10px !important;
  box-shadow:0 2px 6px rgba(15,23,42,.06) !important;
}

/* Stat cards: gentle pop-out with subtle single tone */
.stat-card{
  border-radius:14px !important;
  background:linear-gradient(180deg, #fcfdff 0%, #f6f9ff 100%) !important;
  border:1px solid #e3e8f3 !important;
  box-shadow:0 3px 10px rgba(48,76,170,.06), 0 1px 0 rgba(255,255,255,.6) inset !important;
  transition:transform .14s ease, box-shadow .14s ease;
}
.stat-card:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(48,76,170,.10), 0 1px 0 rgba(255,255,255,.7) inset !important;
}
.stat-label{color:#5b6c8a !important; font-weight:800 !important; font-size:10.5px !important; letter-spacing:.06em !important}
.stat-value{color:#0b1430 !important; font-weight:850 !important; font-size:20px !important}

/* Workflow summary tiles get the same gentle depth */
.workflow-summary-card{
  border-radius:14px !important;
  background:linear-gradient(180deg, #fdfdff 0%, #f6f8ff 100%) !important;
  border:1px solid #e3e8f3 !important;
  box-shadow:0 3px 10px rgba(48,76,170,.06), 0 1px 0 rgba(255,255,255,.6) inset !important;
  padding:14px 16px !important;
}
.workflow-summary-card[data-tone="warn"]{background:linear-gradient(180deg, #fffefb 0%, #fffaf0 100%) !important; border-color:#f5e6c8 !important}
.workflow-summary-card[data-tone="orange"]{background:linear-gradient(180deg, #fffcfb 0%, #fff4f0 100%) !important; border-color:#f4d8cb !important}
.workflow-summary-card[data-tone="purple"]{background:linear-gradient(180deg, #fdfcff 0%, #f6f1ff 100%) !important; border-color:#ece4ff !important}
.workflow-summary-card[data-tone="success"]{background:linear-gradient(180deg, #fafefb 0%, #effbf3 100%) !important; border-color:#d9eee0 !important}
.workflow-summary-card[data-tone="info"]{background:linear-gradient(180deg, #fcfdff 0%, #f1f5ff 100%) !important; border-color:#dfe7f7 !important}
.workflow-summary-card strong{color:#0b1430 !important; font-size:22px !important; font-weight:850 !important; line-height:1.05 !important}
.workflow-summary-card span{color:#5b6c8a !important; font-size:11px !important; font-weight:700 !important; letter-spacing:.04em !important}

/* Buttons: clean, slightly bolder, with gentle depth */
.btn{
  font-weight:750 !important;
  letter-spacing:0 !important;
  border-radius:11px !important;
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease !important;
}
.btn.primary{
  background:linear-gradient(180deg, #4f6dff 0%, #3d5cff 100%) !important;
  color:#ffffff !important;
  border:0 !important;
  box-shadow:0 4px 12px rgba(79,109,255,.22), 0 1px 0 rgba(255,255,255,.20) inset !important;
}
.btn.primary:hover{transform:translateY(-1px); filter:brightness(1.05); box-shadow:0 6px 16px rgba(79,109,255,.26) !important}
.btn.secondary{
  background:linear-gradient(180deg, #ffffff 0%, #f7faff 100%) !important;
  color:#1f2a4a !important;
  border:1px solid #d8dfee !important;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset !important;
}
.btn.secondary:hover{background:#fbfcff !important; border-color:#c5d0e5 !important}

/* Page-head sharper */
.page-head{
  background:linear-gradient(180deg, #ffffff 0%, #fbfcff 100%) !important;
  border:1px solid #e3e8f3 !important;
  border-radius:16px !important;
  box-shadow:0 2px 8px rgba(15,23,42,.04) !important;
}
.page-head h1{font-size:20px !important; font-weight:850 !important}

/* Sidebar: solid, single calm tone */
.sidebar{
  background:linear-gradient(180deg, #ffffff 0%, #f6f9ff 100%) !important;
  border:1px solid #e3e8f3 !important;
  box-shadow:0 4px 14px rgba(15,23,42,.04) !important;
}
.nav-btn, .nav-section-btn, .nav-subbtn{
  color:#1f2a4a !important;
  font-weight:700 !important;
}
.nav-btn:hover, .nav-section-btn:hover, .nav-subbtn:hover{
  background:#eef2fa !important;
}
.nav-btn.active, .nav-section-btn.active, .nav-subbtn.active{
  background:linear-gradient(135deg, #4f6dff 0%, #7a4dff 100%) !important;
  color:#ffffff !important;
  box-shadow:0 4px 12px rgba(79,109,255,.24) !important;
}
.nav-btn.active::before, .nav-section-btn.active::before, .nav-subbtn.active::before{display:none !important}

/* Brand: refined */
.brand{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  gap:10px !important;
  padding:6px 6px 14px !important;
  margin-bottom:10px !important;
  background:transparent !important;
  border:0 !important;
  border-bottom:1px solid #e3e8f3 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
.brand-logo{
  width:38px !important;
  height:38px !important;
  flex:0 0 38px !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  border-radius:50% !important;
  box-shadow:0 2px 6px rgba(15,23,42,.12) !important;
  filter:none !important;
  object-fit:contain !important;
}
.brand-name{
  font-size:15px !important;
  line-height:1.1 !important;
  font-weight:850 !important;
  letter-spacing:0 !important;
  color:#0b1430 !important;
  background:none !important;
  -webkit-text-fill-color:#0b1430 !important;
  text-shadow:none !important;
  filter:none !important;
}
.brand-sub{
  display:block !important;
  font-size:10px !important;
  line-height:1.25 !important;
  font-weight:500 !important;
  color:#5b6c8a !important;
}
.brand-byline{
  font-size:9px !important;
  font-weight:800 !important;
  letter-spacing:.06em !important;
  text-transform:uppercase !important;
  color:#7a4dff !important;
}

/* Inputs/selects sharper */
input, select, textarea{
  border:1px solid #d8dfee !important;
  background:#ffffff !important;
  color:#1f2a4a !important;
  border-radius:10px !important;
  font-weight:600 !important;
  box-shadow:none !important;
}
input:focus, select:focus, textarea:focus{
  border-color:#7a4dff !important;
  box-shadow:0 0 0 3px rgba(122,77,255,.16) !important;
  outline:none !important;
}

/* Theme toggle pill, top-right */
.background-controls{display:flex !important}

/* ============================================================
   Overview tab — financial summary + charts (Task 1)
   ============================================================ */
.overview-stack{display:grid; gap:14px;}
.overview-stats{margin-bottom:0 !important;}
.overview-panel{padding:18px 20px !important; border-radius:18px !important}
.overview-panel--blue{
  background:linear-gradient(180deg, #fcfdff 0%, #f5f8ff 100%) !important;
  border:1px solid #e0e7f6 !important;
  box-shadow:0 4px 14px rgba(48,76,170,.05) !important;
}
.overview-panel--purple{
  background:linear-gradient(180deg, #fdfcff 0%, #f8f4ff 100%) !important;
  border:1px solid #ece4ff !important;
  box-shadow:0 4px 14px rgba(124,92,255,.05) !important;
}
.overview-panel--green{
  background:linear-gradient(180deg, #fafefb 0%, #f0faf3 100%) !important;
  border:1px solid #d9eee0 !important;
  box-shadow:0 4px 14px rgba(34,139,82,.05) !important;
}
.overview-chart{display:flex; flex-direction:column; gap:10px}
.overview-chart svg{display:block; width:100%; max-width:100%}
.overview-chart__legend{display:flex; gap:14px; flex-wrap:wrap}
.overview-chart__legend-item{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:#3a4a6a}
.overview-chart__swatch{display:inline-block; width:12px; height:12px; border-radius:3px}
.overview-empty{
  padding:30px 18px;
  text-align:center;
  color:#6a7895;
  font-size:13px;
  background:rgba(255,255,255,.6);
  border:1px dashed #dde3ef;
  border-radius:12px;
}
.overview-cash-table{
  max-height:340px;
  overflow:auto;
  border:1px solid #e3e8f3;
  border-radius:12px;
  background:#fff;
}

/* ============================================================
   GL header drag-reorder + manual header row override (Task 4)
   ============================================================ */
.gl-header-override{
  display:flex !important;
  align-items:end !important;
  gap:10px !important;
  margin:4px 0 12px !important;
  padding:10px 12px !important;
  border-radius:12px !important;
  background:linear-gradient(180deg, #fcfdff, #f6f9ff) !important;
  border:1px solid #e3e8f3 !important;
}
.gl-header-override label{display:flex !important; flex-direction:column !important; gap:4px !important}
.gl-header-override input{
  width:100px !important;
  min-height:30px !important;
  padding:5px 10px !important;
  border-radius:8px !important;
  border:1px solid #d8dfee !important;
  background:#fff !important;
  color:#1f2a4a !important;
}
.gl-header-override .btn{min-height:30px !important; padding:0 12px !important; font-size:11.5px !important}
.field-map-grid{
  display:grid !important;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr)) !important;
  gap:10px !important;
}
.gl-field-tile{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  padding:10px 12px !important;
  border-radius:12px !important;
  background:linear-gradient(180deg, #fcfdff, #f7faff) !important;
  border:1px solid #e3e8f3 !important;
  cursor:grab !important;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.gl-field-tile:hover{
  border-color:#c8d3ec !important;
  box-shadow:0 4px 12px rgba(48,76,170,.08) !important;
}
.gl-field-tile.is-dragging{
  opacity:.55 !important;
  cursor:grabbing !important;
  transform:scale(0.98) !important;
}
.gl-field-tile__grip{
  display:inline-block !important;
  font-weight:700 !important;
  color:#a4adc7 !important;
  font-size:11px !important;
  letter-spacing:.15em !important;
  user-select:none !important;
  cursor:grab !important;
  padding:0 4px !important;
}
.gl-field-tile label{flex:1 1 auto !important; min-width:0 !important; margin:0 !important; display:flex !important; flex-direction:column !important; gap:3px !important}
.gl-field-tile select{
  min-height:32px !important;
  padding:5px 9px !important;
  font-size:12px !important;
  font-weight:600 !important;
  border-radius:9px !important;
  border:1px solid #d8dfee !important;
  background:#fff !important;
}

/* ============================================================
   Report Scope panel — clean labeled-group layout
   ============================================================ */
.report-scope-shell{
  padding:18px 22px !important;
  border-radius:18px !important;
  background:linear-gradient(180deg, #ffffff 0%, #fbfcff 100%) !important;
  border:1px solid #e3e8f3 !important;
  box-shadow:0 6px 18px rgba(15,23,42,.05) !important;
}
.report-scope{
  display:grid !important;
  grid-template-columns:minmax(220px,auto) minmax(280px,1fr) minmax(240px,auto) !important;
  gap:22px 28px !important;
  align-items:start !important;
  margin-bottom:14px !important;
}
.report-scope__group{
  display:flex !important;
  flex-direction:column !important;
  gap:6px !important;
  min-width:0 !important;
}
.report-scope__kicker{
  font-size:10px !important;
  font-weight:800 !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
  color:#6a7895 !important;
}
.report-scope__controls{
  display:flex !important;
  gap:8px !important;
  align-items:center !important;
  flex-wrap:wrap !important;
}
.report-scope__controls select,
.report-scope__controls input{
  min-height:36px !important;
  padding:7px 11px !important;
  font-size:12.5px !important;
  font-weight:600 !important;
  border-radius:10px !important;
  border:1px solid #d8dfee !important;
  background:#ffffff !important;
  color:#1f2a4a !important;
  box-shadow:none !important;
}
.report-scope__controls--when{flex-wrap:wrap !important; gap:6px !important}
.report-scope__controls--when select{flex:0 0 auto !important; min-width:100px !important}
.report-scope__controls--when input[type="date"]{flex:1 1 130px !important; min-width:130px !important; max-width:160px !important}
.report-scope__actions{
  display:flex !important;
  gap:8px !important;
  justify-content:flex-end !important;
  align-items:center !important;
  flex-wrap:wrap !important;
  padding-top:14px !important;
  border-top:1px solid #eef1f8 !important;
}
.report-scope__actions .btn{
  min-height:34px !important;
  padding:0 16px !important;
  font-size:12.5px !important;
  font-weight:700 !important;
  border-radius:10px !important;
}
@media (max-width:1100px){
  .report-scope{grid-template-columns:1fr !important; gap:14px !important}
  .report-scope__actions{justify-content:flex-start !important}
}

/* Decorative overlay layer used to be the forest image — kill it */
html body::before,
html body.theme-light::before,
html body.theme-dark::before{
  display:none !important;
  content:none !important;
  background:none !important;
  background-image:none !important;
}
/* App shell: opaque, full-height, no inherited image */
html body .app,
html body.background-image-on .app,
html body.background-image-off .app,
html body.theme-light .app,
html body.theme-dark .app,
html body.theme-light.background-image-on .app,
html body.theme-light.background-image-off .app,
html body.theme-dark.background-image-on .app,
html body.theme-dark.background-image-off .app{
  background:transparent !important;
  background-image:none !important;
  background-color:transparent !important;
  min-height:100vh !important;
}
/* Main content scroll area inherits app bg */
html body .main{
  background:transparent !important;
  min-height:calc(100vh - 40px) !important;
}

/* ============================================================
   2026-05-13 — FINAL report row override (terminal source of truth)
   Beats every earlier green-tinted total / subtotal rule.
   Uses html body prefix for max specificity.
   ============================================================ */
html body .report tbody tr.section-row td,
html body .report .section-row td,
html body .grid tr.section-row td{
  background:linear-gradient(180deg, #f7f9fe, #f3f6fc) !important;
  background-image:linear-gradient(180deg, #f7f9fe, #f3f6fc) !important;
  color:#27324e !important;
  font-weight:700 !important;
  border-top:1px solid #e3e8f3 !important;
  border-bottom:1px solid #e3e8f3 !important;
  box-shadow:none !important;
}
html body .report tbody tr.total-row td,
html body .report .total-row td,
html body .report-table .total-row td,
html body .grid tr.total-row td,
html body .report-table tr[class*="total"] td{
  background:linear-gradient(180deg, #f3f1fb, #ebe7f8) !important;
  background-image:linear-gradient(180deg, #f3f1fb, #ebe7f8) !important;
  color:#2a2752 !important;
  font-weight:750 !important;
  border-top:1px solid #ddd6f0 !important;
  border-bottom:1px solid #ddd6f0 !important;
  box-shadow:none !important;
}
html body .report tbody tr.total-row.heavy td,
html body .report .total-row.heavy td,
html body .grid tr.total-row.heavy td{
  background:linear-gradient(180deg, #e9e4f6, #ddd5ef) !important;
  background-image:linear-gradient(180deg, #e9e4f6, #ddd5ef) !important;
  color:#231d4a !important;
  font-weight:850 !important;
  font-size:13.5px !important;
  border-top:1px solid #c8bce6 !important;
  border-bottom:1px solid #c8bce6 !important;
  box-shadow:none !important;
}
html body .report-bs .bs-group-row td,
html body .report tbody tr.bs-group-row td{
  background:linear-gradient(180deg, #eef3fc, #e6edf8) !important;
  background-image:linear-gradient(180deg, #eef3fc, #e6edf8) !important;
  color:#1f2d52 !important;
  font-weight:800 !important;
  text-transform:uppercase !important;
  letter-spacing:.06em !important;
  font-size:11px !important;
  border-bottom:1px solid #d4dcec !important;
  box-shadow:none !important;
}
html body .report-bs .bs-subsection-row td{
  background:linear-gradient(180deg, #f4f5fd, #ecedf8) !important;
  background-image:linear-gradient(180deg, #f4f5fd, #ecedf8) !important;
  color:#262c52 !important;
  font-weight:700 !important;
  box-shadow:none !important;
}
html body .report-bs .bs-subtotal td,
html body .report tbody tr.bs-subtotal td{
  background:linear-gradient(180deg, #f3f1fb, #ebe7f8) !important;
  background-image:linear-gradient(180deg, #f3f1fb, #ebe7f8) !important;
  color:#3a3a6a !important;
  font-weight:750 !important;
  border-top:1px solid #ddd6f0 !important;
  border-bottom:1px solid #ddd6f0 !important;
  box-shadow:none !important;
}
html body .report-bs .bs-total-row td,
html body .report tbody tr.bs-total-row td{
  background:linear-gradient(180deg, #e3eaf9, #d6e1f5) !important;
  background-image:linear-gradient(180deg, #e3eaf9, #d6e1f5) !important;
  color:#1a2654 !important;
  font-weight:850 !important;
  border-top:1px solid #c3d2ec !important;
  border-bottom:2px solid #b4c5e6 !important;
  box-shadow:none !important;
}
html body .report .total-row td .muted,
html body .report .bs-total-row td .muted,
html body .report .section-row td .muted{color:inherit !important; opacity:.62}

/* Kill any earlier neon/heavy panel mixes — calm soft single-tone backdrops */
html body .currency-hero-shell,
html body .gl-journey-shell,
html body .coa-overview-panel{
  background:linear-gradient(180deg, #fbfcff, #f5f8ff) !important;
  background-image:linear-gradient(180deg, #fbfcff, #f5f8ff) !important;
  border:1px solid #e3e8f3 !important;
  box-shadow:0 4px 14px rgba(48,76,170,.05) !important;
}
html body .gl-import-guide{
  background:linear-gradient(180deg, #fdfcff, #f7f3ff) !important;
  background-image:linear-gradient(180deg, #fdfcff, #f7f3ff) !important;
  border:1px solid #ece4ff !important;
  box-shadow:0 4px 14px rgba(124,92,255,.05) !important;
}
html body .integration-hero{
  background:linear-gradient(180deg, #fafefb, #f0faf3) !important;
  background-image:linear-gradient(180deg, #fafefb, #f0faf3) !important;
  border:1px solid #d9eee0 !important;
  box-shadow:0 4px 14px rgba(34,139,82,.05) !important;
}

/* App scaling: density is now handled by font/spacing tokens + responsive
   breakpoints (see "RESPONSIVE DENSITY" block at end of file). CSS `zoom` was
   removed here — it broke Chrome <select> hit-testing and 100vh math (mis-clicks,
   blank space, jumpy layout) and did not adapt across devices. */
html body .app{
  grid-template-columns:226px minmax(0,1fr) !important;
  gap:18px !important;
  padding:16px !important;
}
@media (min-width:1500px){
  html body .app{grid-template-columns:236px minmax(0,1fr) !important; padding:18px !important}
}
html body .panel,
html body .report-wrap{padding:16px 18px !important; border-radius:14px !important}
html body .page-head{padding:12px 16px !important; border-radius:14px !important}
html body .page-head h1{font-size:18px !important}
html body .panel-title{font-size:14px !important}
html body .stat-card{padding:11px 13px !important; border-radius:12px !important}
html body .stat-value{font-size:18px !important}
html body .stat-label{font-size:9.5px !important}
html body .workflow-summary-card{padding:12px 14px !important; border-radius:12px !important}
html body .workflow-summary-card strong{font-size:18px !important}
html body .workflow-summary-card span{font-size:10px !important}
html body .btn{min-height:30px !important; font-size:12px !important; padding:0 12px !important}
html body .btn.small,
html body .btn.btn-compact{min-height:26px !important; font-size:11px !important; padding:0 9px !important}
html body input,
html body select,
html body textarea{min-height:30px !important; font-size:12px !important; padding:5px 9px !important}
html body .nav-btn,
html body .nav-section-btn{min-height:34px !important; padding:0 11px !important; font-size:12.5px !important}
html body .nav-subbtn{min-height:28px !important; padding:0 9px !important; font-size:11.5px !important}
html body .brand-logo{width:34px !important; height:34px !important; flex:0 0 34px !important}
html body .brand-name{font-size:14px !important}
html body .brand-sub{font-size:9.5px !important}
html body .brand-byline{font-size:8.5px !important}

/* Sharper text — no blur anywhere */
html body, html body *{
  -webkit-font-smoothing:antialiased !important;
  -moz-osx-font-smoothing:grayscale !important;
}
html body .panel,
html body .page-head,
html body .sidebar,
html body .modal,
html body .stat-card,
html body .workflow-summary-card,
html body .workflow-company-card,
html body .mapping-card,
html body .report-wrap{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* ============================================================
   Sidebar layout: pin Currencies + Integrations to the bottom
   ============================================================ */
.sidebar{
  display:flex !important;
  flex-direction:column !important;
}
.sidebar .nav{
  flex:1 1 auto !important;
  display:flex !important;
  flex-direction:column !important;
  min-height:0 !important;
}
.sidebar .nav-bottom{
  margin-top:auto !important;
  display:flex !important;
  flex-direction:column !important;
  gap:8px !important;
  padding-top:14px !important;
}
.sidebar .nav-divider{
  height:1px !important;
  background:#e3e8f3 !important;
  margin:0 6px 10px !important;
  border:0 !important;
}
body.theme-dark .sidebar .nav-divider{
  background:rgba(148,163,184,.28) !important;
}

/* ============================================================
   Overview tab — premium polish
   ============================================================ */

/* Page head: bigger title, calmer subtitle, polished actions row */
.page-head h1{
  font-size:28px !important;
  font-weight:800 !important;
  letter-spacing:-.01em !important;
  color:#0b1430 !important;
}
.page-head .subtitle{
  color:#64748b !important;
  font-size:13px !important;
  margin-top:2px !important;
}
.page-head{
  align-items:center !important;
  margin-bottom:18px !important;
}
.page-head-controls{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.page-head-controls select{
  height:38px;
  min-width:170px;
  border:1px solid #e3e8f3 !important;
  border-radius:10px !important;
  background:#ffffff !important;
  padding:0 32px 0 14px !important;
  font-weight:600 !important;
  color:#1f2a4a !important;
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M3 4.5l3 3 3-3' stroke='%23475569' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
  background-repeat:no-repeat !important;
  background-position:right 10px center !important;
}
.btn.btn-icon-only{
  width:38px !important;
  min-width:38px !important;
  height:38px !important;
  padding:0 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:10px !important;
}
.btn.btn-icon-only svg{ width:18px; height:18px; }
.btn.primary.btn-icon-only{
  background:linear-gradient(135deg, #4f6dff 0%, #6f5dff 100%) !important;
  color:#ffffff !important;
  border:0 !important;
  box-shadow:0 6px 14px rgba(79,109,255,.30) !important;
}
.btn.secondary.btn-icon-only{
  background:#ffffff !important;
  color:#475569 !important;
  border:1px solid #e3e8f3 !important;
  box-shadow:0 1px 2px rgba(15,23,42,.04) !important;
}

/* KPI grid: consistent spacing + softer separation */
.kpi-grid{
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  gap:16px !important;
  margin-bottom:18px !important;
}
@media (max-width: 1180px){
  .kpi-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)) !important; }
}

/* KPI card: icon tile + label + value */
.stat-card.kpi-card{
  position:relative;
  display:flex !important;
  flex-direction:column !important;
  gap:14px !important;
  padding:18px 20px !important;
  border-radius:16px !important;
  border:1px solid #e7ecf6 !important;
  background:#ffffff !important;
  box-shadow:0 1px 2px rgba(15,23,42,.03), 0 6px 18px rgba(15,23,42,.04) !important;
  overflow:hidden;
}
.stat-card.kpi-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, var(--kpi-tint, rgba(99,102,241,.05)) 0%, transparent 70%);
  pointer-events:none;
}
.stat-card.kpi-card > *{ position:relative; z-index:1; }
.stat-card.kpi-card .kpi-icon{
  width:36px;
  height:36px;
  border-radius:10px;
  display:inline-grid;
  place-items:center;
  background:var(--kpi-icon-bg, #eef2ff);
  color:var(--kpi-icon-fg, #4f46e5);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.6);
}
.stat-card.kpi-card .kpi-icon svg{ width:18px; height:18px; }
.stat-card.kpi-card .stat-label{
  font-size:11px !important;
  font-weight:800 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
  color:#64748b !important;
}
.stat-card.kpi-card .stat-value{
  font-size:26px !important;
  font-weight:850 !important;
  letter-spacing:-.01em !important;
  color:#0b1430 !important;
  line-height:1.1 !important;
}
.kpi-card--blue   { --kpi-tint:rgba(79,109,255,.07);  --kpi-icon-bg:#e6ecff;  --kpi-icon-fg:#3b56e0; }
.kpi-card--purple { --kpi-tint:rgba(160,107,255,.07); --kpi-icon-bg:#f0e7ff;  --kpi-icon-fg:#7a4dff; }
.kpi-card--green  { --kpi-tint:rgba(34,197,94,.08);   --kpi-icon-bg:#e2f6ea;  --kpi-icon-fg:#16a34a; }
.kpi-card--amber  { --kpi-tint:rgba(245,158,11,.08);  --kpi-icon-bg:#fdf0d6;  --kpi-icon-fg:#b45309; }

/* Overview panels: consistent spacing, softer borders, better titles */
.overview-stack{ display:grid !important; gap:16px !important; }
.overview-panel,
.panel.overview-panel,
.panel.overview-panel--green,
.panel.overview-panel--blue,
.panel.overview-panel--purple{
  background:#ffffff !important;
  border:1px solid #e7ecf6 !important;
  border-radius:18px !important;
  box-shadow:0 1px 2px rgba(15,23,42,.03), 0 8px 22px rgba(15,23,42,.04) !important;
  padding:20px 22px !important;
}
.overview-panel .panel-title,
.scope-panel .panel-title{
  font-size:16px !important;
  font-weight:800 !important;
  color:#0b1430 !important;
}
.overview-panel .panel-title-row{
  display:flex !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  gap:16px !important;
  margin-bottom:12px !important;
}
.overview-panel .panel-title-row .muted{
  color:#64748b !important;
  font-size:12px !important;
  margin-top:2px !important;
}
.overview-chart{ padding:6px 4px 2px !important; }
.overview-chart-panel{ padding-bottom:18px !important; }

/* Chart legend */
.chart-legend{
  display:flex;
  align-items:center;
  gap:14px;
  font-size:12px;
  font-weight:700;
  color:#475569;
}
.legend-dot{
  width:10px; height:10px; border-radius:3px;
  display:inline-block; margin-right:6px; margin-left:0;
}
.legend-dot--blue{   background:#5a6dff; }
.legend-dot--purple{ background:#a06bff; }
.chart-legend .legend-dot + .legend-dot{ margin-left:8px; }

/* Cash by currency table — cleaner */
.overview-cash-table .grid th{
  font-size:10.5px !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
  color:#64748b !important;
  font-weight:800 !important;
  background:transparent !important;
  border-bottom:1px solid #eef1f8 !important;
}
.overview-cash-table .grid td{
  padding:12px 10px !important;
  border-bottom:1px solid #f1f4fb !important;
  font-weight:600 !important;
  color:#1f2a4a !important;
}
.overview-cash-table .grid tbody tr:last-child td{ border-bottom:0 !important; }

/* Current scope — pills + structured list with chevrons */
.scope-panel .check-strip{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:8px !important;
  margin:6px 0 14px !important;
}
.scope-panel .check-strip .pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px !important;
  border-radius:999px !important;
  background:#eef2ff !important;
  color:#3b56e0 !important;
  border:0 !important;
  font-size:11px !important;
  font-weight:800 !important;
  letter-spacing:.04em !important;
  text-transform:uppercase !important;
}
.scope-panel .check-strip .pill::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:currentColor; opacity:.8;
}
.scope-summary{
  list-style:none;
  padding:0;
  margin:0;
  border-top:1px solid #eef1f8;
}
.scope-summary__row{
  display:grid;
  grid-template-columns:28px 1fr auto 16px;
  align-items:center;
  gap:12px;
  padding:14px 4px;
  border-bottom:1px solid #f1f4fb;
  cursor:pointer;
  transition:background .15s ease;
}
.scope-summary__row:last-child{ border-bottom:0; }
.scope-summary__row:hover{ background:#f8fafe; }
.scope-summary__icon{
  width:28px; height:28px;
  display:inline-grid; place-items:center;
  border-radius:8px;
  background:#eef2ff;
  color:#3b56e0;
}
.scope-summary__icon svg{ width:16px; height:16px; }
.scope-summary__label{
  font-weight:700;
  color:#1f2a4a;
  font-size:14px;
}
.scope-summary__value{
  font-weight:800;
  color:#0b1430;
  font-size:15px;
}
.scope-summary__chev{
  color:#94a3b8;
  font-size:18px;
  line-height:1;
  font-weight:600;
}

/* Sidebar active state: softer tinted bg, no heavy gradient */
.sidebar .nav-btn,
.sidebar .nav-section-btn,
.sidebar .nav-subbtn{
  border-radius:10px !important;
  font-weight:700 !important;
  color:#1f2a4a !important;
  background:transparent !important;
  box-shadow:none !important;
  border:0 !important;
}
.sidebar .nav-btn.active,
.sidebar .nav-section-btn.active,
.sidebar .nav-subbtn.active{
  background:#eef2ff !important;
  color:#3b56e0 !important;
  box-shadow:inset 0 0 0 1px rgba(79,109,255,.18) !important;
}
.sidebar .nav-btn.active .nav-btn-icon,
.sidebar .nav-section-btn.active .nav-btn-icon,
.sidebar .nav-subbtn.active .nav-btn-icon{
  color:#3b56e0 !important;
}
.sidebar .nav-btn:hover,
.sidebar .nav-section-btn:hover,
.sidebar .nav-subbtn:hover{
  background:#f3f5fb !important;
}

/* Two-col tighter, equal */
.overview-stack .two-col{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:16px !important;
}
@media (max-width: 1180px){
  .overview-stack .two-col{ grid-template-columns:1fr !important; }
}

/* ============================================================
   Polish pass v2 — premium SaaS feel
   ============================================================ */

/* App shell: warmer page background, separation from cards */
body, html{ background:#f6f8fc !important; }
.app-shell, .app{ background:transparent !important; }

/* Sidebar: warmer panel, more breathing room, soft elevation */
.sidebar{
  background:#ffffff !important;
  border:1px solid #e9edf6 !important;
  border-radius:18px !important;
  box-shadow:0 1px 2px rgba(15,23,42,.02), 0 8px 24px rgba(15,23,42,.04) !important;
  padding:22px 16px 18px !important;
  margin:12px 0 12px 12px !important;
  height:calc(100vh - 24px) !important;
}

/* Brand: remove harsh divider, more breathing room */
.brand{
  border-bottom:0 !important;
  padding:4px 6px 22px !important;
  margin-bottom:10px !important;
  gap:12px !important;
}
.brand-logo{
  width:42px !important;
  height:42px !important;
  flex:0 0 42px !important;
  box-shadow:0 4px 10px rgba(15,23,42,.08) !important;
}
.brand-name{ font-size:17px !important; font-weight:900 !important; letter-spacing:-.01em !important; }

/* Nav items: roomier, cleaner hierarchy */
.sidebar .nav{ gap:4px !important; margin:6px 0 !important; }
.sidebar .nav-btn,
.sidebar .nav-section-btn{
  padding:11px 12px !important;
  min-height:44px !important;
  font-size:13.5px !important;
  font-weight:600 !important;
  color:#475569 !important;
  gap:12px !important;
}
.sidebar .nav-btn-icon{ width:18px !important; height:18px !important; color:#64748b !important; }
.sidebar .nav-btn-icon svg{ width:18px !important; height:18px !important; stroke-width:1.7 !important; }
.sidebar .nav-subnav{ padding:2px 0 0 8px !important; gap:2px !important; }
.sidebar .nav-subbtn{
  padding:9px 12px !important;
  min-height:38px !important;
  font-size:13px !important;
  font-weight:600 !important;
  color:#64748b !important;
  gap:12px !important;
}
.sidebar .nav-btn.active,
.sidebar .nav-section-btn.active,
.sidebar .nav-subbtn.active{
  background:#eef2ff !important;
  color:#3b56e0 !important;
  box-shadow:none !important;
  border:0 !important;
  font-weight:700 !important;
}
.sidebar .nav-btn.active .nav-btn-icon,
.sidebar .nav-section-btn.active .nav-btn-icon,
.sidebar .nav-subbtn.active .nav-btn-icon{
  color:#3b56e0 !important;
}
.sidebar .nav-divider{
  margin:6px 8px 12px !important;
  background:#eef1f8 !important;
}
.sidebar .nav-bottom{ padding-top:10px !important; gap:2px !important; }

/* Main area: side-padding grows on wide screens so content stays well-proportioned
   without leaving a hard dead-zone on the right */
.main{
  padding:24px max(32px, calc((100% - 1520px) / 2)) !important;
  background:transparent !important;
}

/* Page head: bigger title, calmer subtitle, no divider */
.page-head{
  border-bottom:0 !important;
  padding:6px 0 18px !important;
  margin-bottom:14px !important;
  gap:16px !important;
}
.page-head h1{
  font-size:24px !important;
  font-weight:800 !important;
  color:#0f172a !important;
  letter-spacing:-.01em !important;
}
.page-head .subtitle{ display:none !important; }

/* KPI grid */
.kpi-grid{
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  gap:20px !important;
  margin-bottom:20px !important;
}
@media (max-width: 1180px){ .kpi-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)) !important; } }

/* KPI card: taller, stronger tint, bigger value */
.stat-card.kpi-card{
  position:relative !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:space-between !important;
  gap:18px !important;
  padding:22px 24px !important;
  min-height:140px !important;
  border-radius:18px !important;
  border:1px solid var(--kpi-border, #e9edf6) !important;
  background:var(--kpi-bg, #ffffff) !important;
  box-shadow:0 1px 2px rgba(15,23,42,.04), 0 10px 24px rgba(15,23,42,.05) !important;
  overflow:hidden !important;
}
.stat-card.kpi-card::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  background:linear-gradient(135deg, var(--kpi-tint, rgba(99,102,241,.10)) 0%, transparent 60%) !important;
  pointer-events:none !important;
}
.stat-card.kpi-card > *{ position:relative; z-index:1; }
.stat-card.kpi-card .kpi-icon{
  width:40px !important;
  height:40px !important;
  border-radius:11px !important;
  background:var(--kpi-icon-bg, #eef2ff) !important;
  color:var(--kpi-icon-fg, #4f46e5) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.7), 0 2px 6px rgba(15,23,42,.06) !important;
}
.stat-card.kpi-card .kpi-icon svg{ width:20px !important; height:20px !important; stroke-width:1.9 !important; }
.stat-card.kpi-card .kpi-body{
  display:flex !important;
  flex-direction:column !important;
  gap:6px !important;
}
.stat-card.kpi-card .stat-label{
  font-size:11.5px !important;
  font-weight:800 !important;
  letter-spacing:.09em !important;
  text-transform:uppercase !important;
  color:#64748b !important;
}
.stat-card.kpi-card .stat-value{
  font-size:30px !important;
  font-weight:850 !important;
  letter-spacing:-.02em !important;
  color:#0b1430 !important;
  line-height:1.05 !important;
}
.kpi-card--blue   { --kpi-bg:#f5f8ff; --kpi-border:#e3eaff; --kpi-tint:rgba(79,109,255,.14);  --kpi-icon-bg:#dde6ff;  --kpi-icon-fg:#3b56e0; }
.kpi-card--purple { --kpi-bg:#faf6ff; --kpi-border:#ece4ff; --kpi-tint:rgba(160,107,255,.13); --kpi-icon-bg:#ebdfff;  --kpi-icon-fg:#7a4dff; }
.kpi-card--green  { --kpi-bg:#f3fbf6; --kpi-border:#d8efe1; --kpi-tint:rgba(34,197,94,.13);   --kpi-icon-bg:#d5f1de;  --kpi-icon-fg:#15803d; }
.kpi-card--amber  { --kpi-bg:#fff8ee; --kpi-border:#f5e3c1; --kpi-tint:rgba(245,158,11,.16);  --kpi-icon-bg:#fbe3b6;  --kpi-icon-fg:#a3590c; }

/* Overview panels: bigger title, softer shadow, more inner padding */
.overview-stack{ display:grid !important; gap:20px !important; }
.panel.overview-panel,
.panel.overview-panel--green,
.panel.overview-panel--blue,
.panel.overview-panel--purple{
  background:#ffffff !important;
  border:1px solid #e9edf6 !important;
  border-radius:20px !important;
  box-shadow:0 1px 2px rgba(15,23,42,.03), 0 10px 28px rgba(15,23,42,.04) !important;
  padding:22px 26px !important;
}
.overview-panel .panel-title,
.scope-panel .panel-title{
  font-size:16px !important;
  font-weight:800 !important;
  color:#0f172a !important;
  letter-spacing:-.005em !important;
}
.overview-panel .panel-title-row{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  margin-bottom:18px !important;
}
.overview-panel .panel-title-row .muted{
  color:#64748b !important;
  font-size:12px !important;
  font-weight:500 !important;
  margin-top:3px !important;
}
.overview-chart{ padding:8px 4px 4px !important; }
.overview-chart svg{ display:block; }

/* Legend */
.chart-legend{
  display:flex; align-items:center; gap:18px;
  font-size:12.5px; font-weight:700; color:#475569;
}
.chart-legend .legend-dot{
  width:10px; height:10px; border-radius:3px;
  display:inline-block; margin-right:6px;
}
.chart-legend .legend-dot--blue{ background:#5a6dff; }
.chart-legend .legend-dot--purple{ background:#a06bff; }
.chart-legend .legend-dot + .legend-dot{ margin-left:4px; }

/* Cash table: roomy financial-table feel */
.overview-cash-table{ margin-top:6px; }
.overview-cash-table .grid{ width:100%; border-collapse:separate !important; border-spacing:0 !important; }
.overview-cash-table .grid thead th{
  padding:10px 14px !important;
  font-size:10.5px !important;
  letter-spacing:.1em !important;
  text-transform:uppercase !important;
  color:#64748b !important;
  font-weight:800 !important;
  background:transparent !important;
  border:0 !important;
  border-bottom:1px solid #eef1f8 !important;
  text-align:left;
}
.overview-cash-table .grid thead th.right{ text-align:right; }
.overview-cash-table .grid tbody td{
  padding:18px 14px !important;
  font-weight:700 !important;
  font-size:14px !important;
  color:#0f172a !important;
  background:transparent !important;
  border:0 !important;
  border-bottom:1px solid #f1f4fb !important;
}
.overview-cash-table .grid tbody td.right{ text-align:right; }
.overview-cash-table .grid tbody tr:last-child td{ border-bottom:0 !important; }
.overview-cash-table .grid tbody tr:hover td{ background:#fafbff !important; }

/* Pills inside Current scope */
.scope-panel .check-strip{
  display:flex !important; flex-wrap:wrap !important; gap:8px !important;
  margin:0 0 14px !important;
}
.scope-panel .check-strip .pill{
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 12px !important;
  border-radius:999px !important;
  background:#eef2ff !important;
  color:#3b56e0 !important;
  border:0 !important;
  font-size:11px !important;
  font-weight:800 !important;
  letter-spacing:.05em !important;
  text-transform:uppercase !important;
}
.scope-panel .check-strip .pill::before{
  content:"" !important; width:6px !important; height:6px !important; border-radius:50% !important;
  background:currentColor !important; opacity:.85 !important;
}

/* Scope summary list rows */
.scope-summary{ list-style:none; padding:0; margin:6px 0 0; border-top:1px solid #eef1f8; }
.scope-summary__row{
  display:grid !important;
  grid-template-columns:36px 1fr auto 18px !important;
  align-items:center !important;
  gap:14px !important;
  padding:16px 4px !important;
  border-bottom:1px solid #f1f4fb !important;
  cursor:pointer !important;
  transition:background .15s ease;
}
.scope-summary__row:last-child{ border-bottom:0 !important; }
.scope-summary__row:hover{ background:#fafbff !important; }
.scope-summary__icon{
  width:36px !important; height:36px !important;
  display:inline-grid; place-items:center;
  border-radius:10px !important;
  background:#eef2ff !important;
  color:#3b56e0 !important;
}
.scope-summary__icon svg{ width:18px !important; height:18px !important; stroke-width:1.7 !important; }
.scope-summary__label{ font-weight:700 !important; color:#0f172a !important; font-size:14px !important; }
.scope-summary__value{ font-weight:800 !important; color:#0b1430 !important; font-size:16px !important; }
.scope-summary__chev{ color:#94a3b8 !important; font-size:20px !important; line-height:1 !important; font-weight:600 !important; }

/* Top-bar controls polish */
.page-head .actions{ display:flex; align-items:center; gap:10px; }
.page-head-controls select{
  height:40px !important;
  border-radius:12px !important;
  font-size:13px !important;
  font-weight:700 !important;
  color:#0f172a !important;
}
.btn.btn-icon-only{
  width:40px !important; min-width:40px !important; height:40px !important;
  border-radius:12px !important;
}
.btn.primary.btn-icon-only{
  background:linear-gradient(135deg, #4f6dff 0%, #6f5dff 100%) !important;
  color:#ffffff !important; border:0 !important;
  box-shadow:0 8px 18px rgba(79,109,255,.34) !important;
}
.btn.primary.btn-icon-only:hover{
  box-shadow:0 10px 22px rgba(79,109,255,.40) !important;
  transform:translateY(-1px);
}
.btn.secondary.btn-icon-only{
  background:#ffffff !important; color:#475569 !important;
  border:1px solid #e9edf6 !important;
  box-shadow:0 1px 2px rgba(15,23,42,.04) !important;
}
.btn.secondary.btn-icon-only:hover{ background:#fafbff !important; border-color:#dde3f0 !important; }

/* Chart axis labels — rendered as HTML overlay so they don't stretch with the SVG */
.overview-chart__plot{
  position:relative !important;
  width:100% !important;
}
.overview-chart__plot svg{
  display:block !important;
  width:100% !important;
  height:100% !important;
}
.overview-chart__y-labels,
.overview-chart__x-labels{
  position:absolute !important;
  pointer-events:none !important;
  font-family:inherit;
}
.overview-chart__y-labels{
  left:0; top:0; bottom:0; width:100%;
}
.overview-chart__y-label{
  position:absolute !important;
  left:0 !important;
  transform:translateY(-50%) !important;
  width:40px;
  text-align:right;
  font-size:11px !important;
  font-weight:600 !important;
  color:#94a3b8 !important;
  line-height:1 !important;
  letter-spacing:0 !important;
}
.overview-chart__x-labels{
  left:0; right:0; bottom:4px; height:18px;
}
.overview-chart__x-label{
  position:absolute !important;
  transform:translateX(-50%) !important;
  font-size:11px !important;
  font-weight:600 !important;
  color:#94a3b8 !important;
  line-height:1 !important;
  letter-spacing:0 !important;
  white-space:nowrap;
}

/* ============================================================
   Reports — financial statement experience
   ============================================================ */

/* Toolbar shell: airy, single light card */
.report-page-stack{ display:flex; flex-direction:column; gap:18px; }
.report-page-stack .report-filter-bar{
  background:#ffffff !important;
  border:1px solid #e9edf6 !important;
  border-radius:18px !important;
  box-shadow:0 1px 2px rgba(15,23,42,.03), 0 8px 22px rgba(15,23,42,.04) !important;
  padding:18px 22px !important;
}
/* Combined header — title + meta row sit above the filter row, inside the same card */
.report-page-stack .report-header-shell{
  padding-top:14px !important;
  padding-bottom:18px !important;
}
.report-page-stack .report-header-row{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  margin-bottom:14px !important;
  gap:14px !important;
}
.report-page-stack .report-header-title{
  margin:0 !important;
  font-size:22px !important;
  font-weight:850 !important;
  letter-spacing:-.01em !important;
  color:#0b1430 !important;
  line-height:1 !important;
}
.report-page-stack .report-header-meta{
  display:flex;
  align-items:center;
  gap:8px;
}
.report-page-stack .report-header-meta .btn{
  height:34px !important;
  padding:0 14px !important;
  border-radius:10px !important;
  font-size:12.5px !important;
  font-weight:700 !important;
}
.report-page-stack .report-toolbar.rtb{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:flex-end !important;
  gap:18px 22px !important;
}
/* Force a row break before the actions cluster so the filter groups stay on
   one aligned row and the buttons get their own row to the right. */
.report-page-stack .report-toolbar.rtb .rtb-actions{
  flex-basis:100% !important;
  justify-content:flex-end !important;
  padding-top:8px !important;
  border-top:1px solid #f1f4fb !important;
  margin-top:6px !important;
}
.report-page-stack .rtb-group{
  display:flex !important;
  flex-direction:column !important;
  gap:8px !important;
  min-width:0 !important;
}
.report-page-stack .rtb-kicker{
  font-size:10.5px !important;
  font-weight:800 !important;
  letter-spacing:.10em !important;
  text-transform:uppercase !important;
  color:#64748b !important;
}
.report-page-stack .rtb-row{
  display:flex !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  gap:8px !important;
}
.report-page-stack .rtb-select,
.report-page-stack .rtb-input,
.report-page-stack input.rtb-input,
.report-page-stack select.rtb-select{
  height:40px !important;
  border:1px solid #e9edf6 !important;
  background:#ffffff !important;
  border-radius:11px !important;
  font-size:13.5px !important;
  font-weight:600 !important;
  color:#0f172a !important;
  padding:0 32px 0 14px !important;
  min-width:140px !important;
  appearance:none !important;
  -webkit-appearance:none !important;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M3 4.5l3 3 3-3' stroke='%2364748b' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
  background-repeat:no-repeat !important;
  background-position:right 12px center !important;
  background-size:12px 12px !important;
}
.report-page-stack input.rtb-input{
  padding:0 12px !important;
  background-image:none !important;
  min-width:132px !important;
}
.report-page-stack .rtb-select--entity{ min-width:200px !important; }
.report-page-stack .rtb-select--preset{ min-width:140px !important; }
.report-page-stack .rtb-select--currency{ min-width:96px !important; }
.report-page-stack .rtb-select--statement{ min-width:170px !important; }
/* Belt-and-braces: hide legacy IE/Edge expand arrow */
.report-page-stack .rtb-select::-ms-expand{ display:none !important; }
.report-page-stack .rtb-dash{
  color:#94a3b8;
  font-weight:600;
  padding:0 2px;
  user-select:none;
}

/* Segmented Scope control with icons */
.report-page-stack .rtb-seg{
  display:inline-flex !important;
  padding:4px !important;
  background:#f1f4fb !important;
  border:1px solid #e9edf6 !important;
  border-radius:12px !important;
  gap:2px !important;
  height:40px !important;
}
.report-page-stack .rtb-seg__btn{
  display:inline-flex !important;
  align-items:center !important;
  gap:7px !important;
  border:0 !important;
  background:transparent !important;
  color:#64748b !important;
  font-size:13px !important;
  font-weight:700 !important;
  padding:0 14px !important;
  border-radius:9px !important;
  cursor:pointer !important;
  height:100% !important;
  min-width:104px !important;
  white-space:nowrap !important;
}
.report-page-stack .rtb-seg__btn .rtb-seg__icon{
  width:16px; height:16px; flex:0 0 16px;
}
.report-page-stack .rtb-seg__btn.is-active{
  background:#ffffff !important;
  color:#3b56e0 !important;
  box-shadow:0 1px 2px rgba(15,23,42,.06), 0 2px 6px rgba(79,109,255,.10) !important;
}

/* Actions cluster anchors right (no divider) */
.report-page-stack .rtb-actions{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  gap:8px !important;
  margin-left:auto !important;
  align-self:flex-end !important;
}
.report-page-stack .rtb-actions-spacer{
  width:14px;
  height:1px;
  display:inline-block;
}
.report-page-stack .btn-utility--ai{
  background:linear-gradient(135deg, #f0e7ff 0%, #e6e7ff 100%) !important;
  color:#5b3fcb !important;
  border-color:#d8d2f4 !important;
}
.report-page-stack .btn-utility--ai:hover{
  background:linear-gradient(135deg, #e7daff 0%, #dadcff 100%) !important;
  border-color:#c3bcef !important;
}

/* Compare group */
.report-page-stack .rtb-group--compare .rtb-select{ min-width:190px !important; }

/* Multi-period report — let amount columns share remaining width */
.report-wrap .report.report-multi{
  table-layout:auto !important;
  width:100% !important;
}
.report-wrap .report.report-multi thead th,
.report-wrap .report.report-multi tbody td{
  white-space:nowrap;
}
.report-wrap .report.report-multi thead th:first-child,
.report-wrap .report.report-multi tbody td:first-child{
  width:auto !important;
  white-space:normal;
}
.report-wrap .report.report-multi thead th:not(:first-child),
.report-wrap .report.report-multi tbody td:not(:first-child){
  width:auto !important;
  min-width:130px;
}
.report-wrap .report.report-multi[data-period-count="2"] thead th:not(:first-child),
.report-wrap .report.report-multi[data-period-count="2"] tbody td:not(:first-child){ min-width:160px; }
.report-wrap .report.report-multi[data-period-count="3"] thead th:not(:first-child),
.report-wrap .report.report-multi[data-period-count="3"] tbody td:not(:first-child){ min-width:140px; }
.report-wrap .report.report-multi[data-period-count="4"] thead th:not(:first-child),
.report-wrap .report.report-multi[data-period-count="4"] tbody td:not(:first-child){ min-width:120px; }

/* When the report has multiple periods the sheet should breathe wider */
.report-wrap:has(.report-multi[data-period-count="2"]){ max-width:1180px !important; }
.report-wrap:has(.report-multi[data-period-count="3"]){ max-width:1300px !important; }
.report-wrap:has(.report-multi[data-period-count="4"]){ max-width:1440px !important; }

/* ============================================================
   AI menu modal
   ============================================================ */
.modal.ai-menu-modal{
  max-width:580px !important;
  border-radius:18px !important;
}
.modal.ai-menu-modal .modal-body{ display:flex; flex-direction:column; gap:12px; padding:18px 22px 22px !important; }
.ai-menu-card{
  display:flex !important;
  align-items:flex-start !important;
  gap:14px !important;
  width:100% !important;
  text-align:left !important;
  padding:16px !important;
  border-radius:14px !important;
  border:1px solid #e9edf6 !important;
  background:#ffffff !important;
  cursor:pointer !important;
  transition:border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.ai-menu-card:hover{
  border-color:#c3bcef !important;
  background:#fafaff !important;
  box-shadow:0 6px 14px rgba(122,77,255,.08) !important;
}
.ai-menu-card__icon{
  width:40px; height:40px; flex:0 0 40px;
  display:inline-grid; place-items:center;
  border-radius:10px;
  background:linear-gradient(135deg, #f0e7ff 0%, #e0e4ff 100%);
  color:#5b3fcb;
}
.ai-menu-card__icon svg{ width:22px; height:22px; }
.ai-menu-card__text{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.ai-menu-card__title{
  font-size:14px;
  font-weight:800;
  color:#0b1430;
}
.ai-menu-card__desc{
  font-size:12.5px;
  font-weight:500;
  color:#64748b;
  line-height:1.5;
}

/* ============================================================
   Reports Smart Summary & Analysis modal
   ============================================================ */
.modal.report-smart-summary{
  max-width:920px !important;
  width:92vw !important;
  border-radius:18px !important;
}
.modal.report-smart-summary .modal-head{
  display:flex !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  padding:22px 24px 16px !important;
  border-bottom:1px solid #eef1f8 !important;
  background:linear-gradient(180deg, #fafaff 0%, #ffffff 100%) !important;
  border-radius:18px 18px 0 0 !important;
}
.modal.report-smart-summary .modal-head .icon-btn{
  border:0; background:transparent; cursor:pointer;
  font-size:20px; color:#64748b;
}
.rss-head{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.rss-head__kicker{
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#5b3fcb;
}
.rss-head__title{
  margin:0 !important;
  font-size:20px !important;
  font-weight:850 !important;
  color:#0b1430 !important;
  letter-spacing:-.01em !important;
}
.rss-head__sub{
  font-size:12.5px;
  font-weight:600;
  color:#475569;
}
.rss-head__sub strong{ color:#0b1430; font-weight:800; }

.modal.report-smart-summary .modal-body{
  padding:20px 24px 14px !important;
  display:flex !important;
  flex-direction:column !important;
  gap:18px !important;
  max-height:min(82vh, 760px) !important;
  overflow-y:auto !important;
}

.rss-lead{
  margin:0 !important;
  font-size:14px;
  line-height:1.55;
  color:#0b1430;
  font-weight:600;
  padding:14px 16px;
  border-radius:12px;
  background:linear-gradient(135deg, #f5f3ff 0%, #f0f4ff 100%);
  border:1px solid #e3deff;
}

.rss-kpis{
  display:grid !important;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)) !important;
  gap:12px !important;
}
.rss-kpi{
  background:#ffffff;
  border:1px solid #e9edf6;
  border-radius:12px;
  padding:14px;
  display:flex; flex-direction:column; gap:4px;
  box-shadow:0 1px 2px rgba(15,23,42,.03);
}
.rss-kpi__label{
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#64748b;
}
.rss-kpi__value{
  font-size:20px;
  font-weight:850;
  color:#0b1430;
  font-variant-numeric:tabular-nums;
  line-height:1.1;
}
.rss-kpi__delta{
  font-size:11.5px;
  font-weight:700;
  display:flex; align-items:center; gap:6px;
  margin-top:4px;
}
.rss-kpi__delta--pos{ color:#15803d; }
.rss-kpi__delta--neg{ color:#b14a47; }
.rss-kpi__delta--flat{ color:#64748b; }
.rss-kpi__delta-vs{ color:#94a3b8; font-weight:600; }

.rss-chart-wrap{
  background:#ffffff;
  border:1px solid #e9edf6;
  border-radius:12px;
  padding:14px 16px 8px;
}
.rss-chart-wrap .overview-chart__plot{ height:200px !important; }
.rss-chart-wrap .overview-chart__y-label,
.rss-chart-wrap .overview-chart__x-label{ color:#64748b !important; }

.rss-insights{
  background:#ffffff;
  border:1px solid #e9edf6;
  border-radius:12px;
  padding:14px 18px 16px;
}
.rss-insights__title{
  font-size:11px;
  font-weight:800;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:#5b3fcb;
  margin-bottom:8px;
}
.rss-insights__list{
  margin:0; padding:0; list-style:none;
  display:flex; flex-direction:column; gap:8px;
}
.rss-insights__list li{
  font-size:13px;
  line-height:1.55;
  color:#0b1430;
  padding-left:18px;
  position:relative;
}
.rss-insights__list li::before{
  content:""; position:absolute; left:0; top:9px;
  width:6px; height:6px; border-radius:50%;
  background:#7a4dff;
}

.modal.report-smart-summary .modal-foot{
  display:flex; justify-content:flex-end; gap:8px;
  padding:14px 22px 18px !important;
  border-top:1px solid #eef1f8 !important;
}

/* Run report demoted — filters auto-render, this is just a manual refresh */
.report-page-stack .rtb-actions .btn.primary.report-run-btn{
  height:40px !important;
  padding:0 16px !important;
  border-radius:11px !important;
  font-size:13px !important;
  font-weight:700 !important;
  background:#ffffff !important;
  color:#3b56e0 !important;
  border:1px solid #d9e2ff !important;
  box-shadow:none !important;
}
.report-page-stack .rtb-actions .btn.primary.report-run-btn:hover{
  background:#f5f8ff !important;
  border-color:#bfd0ff !important;
}

/* Group bundle (Consolidated / Standalone — X) — quiet kicker, no panel chrome */
.report-group-section{ margin-bottom:28px; }
.report-group-section + .report-group-section{ border-top:1px dashed #e9edf6; padding-top:22px; }
.report-group-section__kicker{
  font-size:11px;
  font-weight:800;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:#94a3b8;
  margin-bottom:10px;
}

/* CF empty state */
.report-wrap .report-empty{
  padding:24px 16px;
  text-align:center;
  font-size:13.5px;
}
.report-page-stack .rtb-actions .btn.primary.report-run-btn{
  background:linear-gradient(135deg, #4f6dff 0%, #6f5dff 100%) !important;
  color:#ffffff !important;
  border:0 !important;
  height:40px !important;
  padding:0 18px !important;
  border-radius:12px !important;
  font-weight:700 !important;
  font-size:13px !important;
  box-shadow:0 8px 18px rgba(79,109,255,.30) !important;
}
.report-page-stack .report-toolbar-actions .btn.primary.report-run-btn:hover{
  box-shadow:0 10px 22px rgba(79,109,255,.38) !important;
  transform:translateY(-1px);
}
.report-page-stack .btn-utility{
  width:40px !important;
  height:40px !important;
  min-width:40px !important;
  padding:0 !important;
  border-radius:11px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:#ffffff !important;
  border:1px solid #e9edf6 !important;
  color:#475569 !important;
  box-shadow:0 1px 2px rgba(15,23,42,.04) !important;
}
.report-page-stack .btn-utility:hover{
  background:#fafbff !important;
  border-color:#dde3f0 !important;
  color:#0f172a !important;
}
.report-page-stack .btn-utility svg{ width:18px; height:18px; }
/* Branded monogram tiles for Word + Excel — SVG already paints the brand fill,
   so the button itself just holds the icon at full size with no extra chrome. */
.report-page-stack .btn-utility--word,
.report-page-stack .btn-utility--excel,
.report-page-stack .btn-utility--pdf{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
}
.report-page-stack .btn-utility--word .office-export-icon,
.report-page-stack .btn-utility--excel .office-export-icon,
.report-page-stack .btn-utility--pdf .office-export-icon{
  width:36px !important; height:36px !important;
  display:block;
}
.report-page-stack .btn-utility--word:hover,
.report-page-stack .btn-utility--excel:hover,
.report-page-stack .btn-utility--pdf:hover{
  background:transparent !important;
  border-color:transparent !important;
  box-shadow:none !important;
}

/* Inline office-export icon: small branded glyph prepended to text buttons
   like "Export XLS" / "Export Word" / "Excel". Vertical-align matches button
   text baseline; no extra layout cost. */
.btn-export-glyph{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:16px;
  height:16px;
  margin-right:6px;
  vertical-align:-3px;
}
.btn-export-glyph svg{
  width:16px;
  height:16px;
  display:block;
  border-radius:3px;
}

/* Report wrap: one calm sheet, constrained to a printable column width */
.report-wrap{
  background:#ffffff !important;
  border:1px solid #e9edf6 !important;
  border-radius:18px !important;
  box-shadow:0 1px 2px rgba(15,23,42,.03), 0 10px 28px rgba(15,23,42,.04) !important;
  padding:26px 36px !important;
  max-width:1080px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* Report head: hierarchical title block */
.report-wrap .report-head{
  border:0 !important;
  padding:0 0 22px !important;
  margin-bottom:0 !important;
}
.report-wrap .report-title-row{
  display:flex !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  gap:18px !important;
}
.report-wrap .report-title-block{ min-width:0; }
.report-wrap .report-title{
  font-size:24px !important;
  font-weight:850 !important;
  letter-spacing:-.01em !important;
  color:#0b1430 !important;
  line-height:1.15 !important;
}
.report-wrap .report-subtitle{
  font-size:15px !important;
  font-weight:700 !important;
  color:#1f2a4a !important;
  margin-top:4px !important;
}
.report-wrap .report-date{
  font-size:12.5px !important;
  font-weight:500 !important;
  color:#64748b !important;
  margin-top:6px !important;
}
.report-wrap .report-date-sep{ margin:0 6px; color:#cbd5e1; }
.report-wrap .report-amounts-tag{
  font-size:11px !important;
  font-weight:700 !important;
  letter-spacing:.06em !important;
  text-transform:uppercase !important;
  color:#64748b !important;
  align-self:flex-start;
  padding-top:6px;
  white-space:nowrap;
}

/* Table baseline — IFRS-statement feel: tight rows, fixed amount column */
.report-wrap .report,
.report-wrap .report-bs{
  width:100% !important;
  border-collapse:separate !important;
  border-spacing:0 !important;
  margin-top:4px !important;
  font-size:13px !important;
  color:#0b1430 !important;
  table-layout:fixed;
}
/* Amount column is a fixed narrow band so labels and figures stay close together */
.report-wrap .report thead th:last-child,
.report-wrap .report-bs thead th:last-child,
.report-wrap .report tbody td:last-child,
.report-wrap .report-bs tbody td:last-child{
  width:200px !important;
}
.report-wrap .report thead th,
.report-wrap .report-bs thead th{
  font-size:10px !important;
  font-weight:800 !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
  color:#94a3b8 !important;
  background:transparent !important;
  padding:8px 12px 8px !important;
  border:0 !important;
  border-bottom:1px solid #eef1f8 !important;
  text-align:left;
}
.report-wrap .report thead th.right,
.report-wrap .report-bs thead th.right{ text-align:right; }

/* All cells: tight, no background, transparent, black text */
.report-wrap .report tbody td,
.report-wrap .report-bs tbody td{
  padding:6px 12px !important;
  border:0 !important;
  background:transparent !important;
  font-size:13px !important;
  font-weight:500 !important;
  color:#0b1430 !important;
  vertical-align:middle !important;
  line-height:1.45 !important;
}
.report-wrap .report tbody td.right,
.report-wrap .report-bs tbody td.right{
  text-align:right !important;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
  color:#0b1430 !important;
  font-weight:600 !important;
  white-space:nowrap !important;
}

/* Detail / sub-account rows — quieter, indented */
.report-wrap .report tbody td.indent,
.report-wrap .report-bs tbody td.indent{
  padding-left:28px !important;
  font-size:12.5px !important;
  font-weight:500 !important;
  color:#1f2937 !important;
}
.report-wrap .report tbody tr:not(.section-row):not(.total-row):not(.bs-group-row):not(.bs-subsection-row):not(.bs-subtotal):not(.bs-total-row) td.right,
.report-wrap .report-bs tbody tr.bs-line td.right{
  font-size:12.5px !important;
  font-weight:500 !important;
  color:#0b1430 !important;
}

/* Detail-row separator — single hairline between sub-account rows */
.report-wrap .report tbody tr:not(.section-row):not(.total-row):not(.bs-group-row):not(.bs-subsection-row):not(.bs-subtotal):not(.bs-total-row):not(:last-child) td,
.report-wrap .report-bs tbody tr.bs-line:not(:last-child) td{
  border-bottom:1px solid #f1f3f8 !important;
}
/* No hairline directly before a section/total — let the divider above it carry the separation */
.report-wrap .report tbody tr:has(+ tr.section-row) td,
.report-wrap .report tbody tr:has(+ tr.total-row) td,
.report-wrap .report-bs tbody tr:has(+ tr.bs-subsection-row) td,
.report-wrap .report-bs tbody tr:has(+ tr.bs-total-row) td,
.report-wrap .report-bs tbody tr:has(+ tr.bs-subtotal) td,
.report-wrap .report-bs tbody tr:has(+ tr.bs-group-row) td{
  border-bottom:0 !important;
}

/* SECTION HEADERS — black bold, tight padding, thin rule above */
.report-wrap .report tbody tr.section-row td,
.report-wrap .report-bs tbody tr.bs-subsection-row td{
  font-weight:800 !important;
  color:#0b1430 !important;
  font-size:13px !important;
  padding:12px 12px 6px !important;
  border-top:1px solid #eaeef6 !important;
  background:transparent !important;
}
.report-wrap .report tbody tr.section-row td.right,
.report-wrap .report-bs tbody tr.bs-subsection-row td.right{
  font-size:13px !important;
  font-weight:800 !important;
  color:#0b1430 !important;
}
/* First section in the table — no top divider */
.report-wrap .report tbody tr.section-row:first-child td,
.report-wrap .report-bs tbody tr.bs-subsection-row:first-child td{
  border-top:0 !important;
  padding-top:8px !important;
}

/* BS GROUP rows (ASSETS / EQUITY AND LIABILITIES) — small uppercase, breathing space */
.report-wrap .report-bs tbody tr.bs-group-row td{
  background:transparent !important;
  color:#0b1430 !important;
  font-weight:850 !important;
  font-size:10.5px !important;
  letter-spacing:.14em !important;
  text-transform:uppercase !important;
  padding:18px 12px 4px !important;
  border-top:1px solid #e6eaf2 !important;
}
.report-wrap .report-bs tbody tr:first-child.bs-group-row td{
  border-top:0 !important;
  padding-top:6px !important;
}

/* TOTALS — black label, thin top rule, gentle purple amount */
.report-wrap .report tbody tr.total-row td,
.report-wrap .report-bs tbody tr.bs-subtotal td{
  background:transparent !important;
  color:#0b1430 !important;
  font-weight:800 !important;
  font-size:13px !important;
  padding:9px 12px !important;
  border-top:1px solid #e6e2f5 !important;
}
.report-wrap .report tbody tr.total-row td.right,
.report-wrap .report-bs tbody tr.bs-subtotal td.right{
  color:#6b5fc7 !important;
  font-weight:800 !important;
  font-size:13px !important;
}

/* HEAVY TOTALS — accounting-style double rule, slightly larger */
.report-wrap .report tbody tr.total-row.heavy td,
.report-wrap .report-bs tbody tr.bs-total-row td{
  background:transparent !important;
  color:#0b1430 !important;
  font-weight:900 !important;
  font-size:13.5px !important;
  padding:11px 12px 10px !important;
  border-top:1px solid #dad4ee !important;
  box-shadow:inset 0 3px 0 #ffffff, inset 0 4px 0 #dad4ee !important;
}
.report-wrap .report tbody tr.total-row.heavy td.right,
.report-wrap .report-bs tbody tr.bs-total-row td.right{
  color:#574bb8 !important;
  font-weight:900 !important;
  font-size:14px !important;
}

/* Balance check (small reconciliation footer) */
.report-wrap .report-bs tbody tr.bs-balance-check td{
  background:transparent !important;
  font-size:11px !important;
  font-weight:600 !important;
  color:#64748b !important;
  padding:8px 12px !important;
  border-top:1px dashed #e0e6f0 !important;
}

/* Negative values — gentle financial red. Totals stay in their own color. */
.report-wrap .report tbody td.right.is-negative,
.report-wrap .report-bs tbody td.right.is-negative{
  color:#b14a47 !important;
}
.report-wrap .report tbody tr.total-row td.right.is-negative,
.report-wrap .report tbody tr.total-row.heavy td.right.is-negative,
.report-wrap .report-bs tbody tr.bs-subtotal td.right.is-negative,
.report-wrap .report-bs tbody tr.bs-total-row td.right.is-negative{
  /* keep total purple even when negative */
  color:inherit !important;
}

/* Section toggle chevron */
.report-wrap .report .section-row td,
.report-wrap .report-bs .bs-subsection-row td{
  cursor:pointer;
}
.report-wrap .bs-toggle{
  display:inline-block;
  width:14px;
  color:#64748b;
  font-size:10px;
  margin-right:4px;
}

/* Hover affordance on detail rows */
.report-wrap .report tbody tr:not(.section-row):not(.total-row):not(.bs-group-row):hover td,
.report-wrap .report-bs tbody tr.bs-line:hover td{
  background:#fafbff !important;
}

/* Remove any inherited heavy borders on tables inside report-wrap */
.report-wrap table.report,
.report-wrap table.report-bs{
  border:0 !important;
  box-shadow:none !important;
  background:transparent !important;
}

/* ============================================================
   REPORTS PAGE REDESIGN — final override block
   Toolbar, page background, report card, header layout, table
   ============================================================ */

/* Soft gradient page backdrop scoped to the reports page */
.report-page-stack{
  background:linear-gradient(160deg, #f5f7fc 0%, #eef2fb 38%, #f6f4fb 100%) !important;
  padding:24px 28px 36px !important;
  border-radius:24px !important;
  display:flex !important;
  flex-direction:column !important;
  gap:22px !important;
}

/* "Reports" page title — large, dark, embossed/glassy 3D */
.report-page-stack .report-header-row{
  padding:0 4px 2px !important;
}
.report-page-stack .report-header-title{
  font-size:34px !important;
  font-weight:900 !important;
  letter-spacing:-.02em !important;
  color:#0a0f1d !important;
  margin:0 !important;
  line-height:1.05 !important;
  text-shadow:0 1px 0 rgba(255,255,255,.85),
              0 2px 4px rgba(15,23,42,.12),
              0 6px 18px rgba(15,23,42,.06) !important;
}

/* Slim glass toolbar: light blur, soft border, soft shadow, generous horizontal padding */
.report-page-stack .report-toolbar-shell{
  padding:8px 20px !important;
  border-radius:16px !important;
  background:linear-gradient(180deg, rgba(255,255,255,.85) 0%, rgba(252,253,255,.78) 100%) !important;
  border:1px solid rgba(218,225,240,.55) !important;
  box-shadow:0 10px 28px rgba(15,23,42,.05),
             0 1px 3px rgba(15,23,42,.02),
             inset 0 1px 0 rgba(255,255,255,.7) !important;
  backdrop-filter:blur(12px) saturate(1.1) !important;
  -webkit-backdrop-filter:blur(12px) saturate(1.1) !important;
}
.report-page-stack .report-header-shell{
  display:flex !important;
  align-items:center !important;
  gap:28px !important;
}
.report-page-stack .report-header-row{
  flex:0 0 auto !important;
  padding:0 !important;
  margin-right:8px !important;
}
.report-page-stack .report-toolbar.rtb{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  gap:0 !important;
  padding:0 !important;
  flex:1 1 auto !important;
}
/* Generous horizontal spacing between filter groups — no visible dividers, breathing room only */
.report-page-stack .rtb-group{
  flex:0 0 auto !important;
  padding:0 16px !important;
  border-right:0 !important;
  gap:4px !important;
  min-height:auto !important;
  justify-content:center !important;
}
.report-page-stack .rtb-group:first-of-type{ padding-left:0 !important; }
.report-page-stack .rtb-group--view{ padding-right:8px !important; }
.report-page-stack .rtb-actions,
.report-page-stack .report-toolbar.rtb .rtb-actions{
  padding-left:14px !important;
  padding-right:0 !important;
  border-left:0 !important;
  border-top:0 !important;
  margin-top:0 !important;
  padding-top:0 !important;
  margin-left:auto !important;
  flex:0 0 auto !important;
  flex-basis:auto !important;
  min-height:auto !important;
  gap:10px !important;
  align-items:center !important;
}
/* Darker, semibold, tight section labels */
.report-page-stack .rtb-kicker{
  font-size:10px !important;
  font-weight:700 !important;
  letter-spacing:.06em !important;
  text-transform:uppercase !important;
  color:#475569 !important;
  margin:0 0 4px 2px !important;
}
/* Dropdowns: medium height, lighter borders, soft */
.report-page-stack .rtb-select,
.report-page-stack .rtb-input,
.report-page-stack input.rtb-input,
.report-page-stack select.rtb-select{
  height:38px !important;
  border:1px solid rgba(225,231,243,.85) !important;
  background:#ffffff !important;
  border-radius:10px !important;
  font-size:13px !important;
  font-weight:600 !important;
  color:#0f172a !important;
  padding:0 32px 0 12px !important;
  box-shadow:0 1px 2px rgba(15,23,42,.02) !important;
  transition:border-color .15s ease, box-shadow .15s ease !important;
}
.report-page-stack .rtb-select:hover,
.report-page-stack .rtb-input:hover{
  border-color:rgba(195,206,231,.95) !important;
}
.report-page-stack .rtb-select:focus,
.report-page-stack .rtb-input:focus{
  outline:none !important;
  border-color:#9aaef0 !important;
  box-shadow:0 0 0 3px rgba(154,174,240,.18) !important;
}
.report-page-stack .rtb-seg{
  height:38px !important;
  padding:3px !important;
  border:1px solid rgba(225,231,243,.85) !important;
  background:rgba(241,244,251,.55) !important;
  border-radius:10px !important;
}
.report-page-stack .rtb-seg__btn{
  padding:0 12px !important;
  font-size:12.5px !important;
}

/* Run report button — fully hidden; the toolbar now applies on change */
.report-page-stack .report-run-btn,
.report-page-stack .rtb-actions .btn.primary.report-run-btn{
  display:none !important;
}

/* Icon buttons: compact 34×34 tile, soft border, light hover elevation */
.report-page-stack .btn-utility{
  width:34px !important;
  height:34px !important;
  min-width:34px !important;
  border-radius:9px !important;
  background:#ffffff !important;
  border:1px solid rgba(225,231,243,.85) !important;
  box-shadow:0 1px 2px rgba(15,23,42,.03) !important;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease !important;
  padding:3px !important;
}
.report-page-stack .btn-utility:hover{
  transform:translateY(-1px) !important;
  box-shadow:0 5px 12px rgba(15,23,42,.09), 0 1px 2px rgba(15,23,42,.04) !important;
  border-color:rgba(195,206,231,1) !important;
}
.report-page-stack .btn-utility svg{ width:16px !important; height:16px !important; }
/* Word, Excel, and PDF export buttons: same white tile, app mark centered. */
.report-page-stack .btn-utility--word,
.report-page-stack .btn-utility--excel,
.report-page-stack .btn-utility--pdf{
  width:36px !important;
  min-width:36px !important;
  height:36px !important;
  border-radius:9px !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
}
.report-page-stack .btn-utility--word:hover,
.report-page-stack .btn-utility--excel:hover,
.report-page-stack .btn-utility--pdf:hover{
  background:transparent !important;
  border-color:transparent !important;
  transform:translateY(-1px) !important;
  box-shadow:none !important;
}
.report-page-stack .btn-utility--word .office-export-icon,
.report-page-stack .btn-utility--excel .office-export-icon,
.report-page-stack .btn-utility--pdf .office-export-icon{
  width:36px !important;
  height:36px !important;
  display:block !important;
}

/* Report card: glassy, soft border, larger radius, inner highlight, big shadow */
.report-page-stack .report-wrap{
  background:linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(252,253,255,.92) 100%) !important;
  border:1px solid rgba(220,226,240,.6) !important;
  border-radius:20px !important;
  padding:28px 32px 26px !important;
  box-shadow:0 24px 56px rgba(15,23,42,.07),
             0 4px 10px rgba(15,23,42,.03),
             inset 0 1px 0 rgba(255,255,255,.85) !important;
  backdrop-filter:blur(10px) !important;
  -webkit-backdrop-filter:blur(10px) !important;
}

/* New report header layout: title-block on the left, logo alone top-right */
.report-page-stack .report-wrap .report-head{
  display:flex !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  gap:24px !important;
  margin-bottom:14px !important;
  padding-bottom:14px !important;
  border-bottom:1px solid rgba(220,226,240,.55) !important;
}
.report-page-stack .report-wrap .report-title-block{
  display:flex !important;
  flex-direction:column !important;
  gap:4px !important;
  min-width:0 !important;
  flex:1 1 auto !important;
}
.report-page-stack .report-wrap .report-title{
  font-size:22px !important;
  font-weight:800 !important;
  color:#0a0f1d !important;
  line-height:1.15 !important;
}
.report-page-stack .report-wrap .report-subtitle{
  font-size:11.5px !important;
  font-weight:700 !important;
  letter-spacing:.08em !important;
  color:#1f2a44 !important;
  margin-top:2px !important;
}
.report-page-stack .report-wrap .report-date{
  font-size:12px !important;
  color:#475569 !important;
  margin-top:2px !important;
}
.report-page-stack .report-wrap .report-logo-slot{
  flex:0 0 auto !important;
  display:flex !important;
  align-items:center !important;
}
.report-page-stack .report-wrap .report-company-logo{
  width:auto !important;
  max-width:160px !important;
  max-height:48px !important;
  height:auto !important;
  object-fit:contain !important;
  border:0 !important;
  background:transparent !important;
  padding:0 !important;
  border-radius:0 !important;
  /* Strip the baked-in white background from uploaded logo PNGs.
     mix-blend-mode: multiply makes pure-white pixels disappear into the
     light report card background; the logo's colored pixels stay vivid. */
  mix-blend-mode:multiply !important;
}

/* Drop the "Amounts in AED" pill entirely (also removed from HTML) */
.report-page-stack .report-wrap .report-amounts-tag{ display:none !important; }

/* Table: navy LINE ITEM header, white text, soft-purple total rows, blue-gray dividers */
.report-page-stack .report-wrap .report thead th,
.report-page-stack .report-wrap .report-bs thead th{
  background:#162B58 !important;
  color:#ffffff !important;
  font-size:11.5px !important;
  font-weight:700 !important;
  letter-spacing:.06em !important;
  text-transform:uppercase !important;
  padding:11px 14px !important;
  border:0 !important;
}
.report-page-stack .report-wrap .report thead th:first-child,
.report-page-stack .report-wrap .report-bs thead th:first-child{
  border-top-left-radius:10px !important;
  border-bottom-left-radius:10px !important;
}
.report-page-stack .report-wrap .report thead th:last-child,
.report-page-stack .report-wrap .report-bs thead th:last-child{
  border-top-right-radius:10px !important;
  border-bottom-right-radius:10px !important;
}
.report-page-stack .report-wrap .report tbody td,
.report-page-stack .report-wrap .report-bs tbody td{
  padding:7px 14px !important;
  border-bottom:1px solid #e6ecf5 !important;
  color:#0b1430 !important;
  font-size:13px !important;
}
.report-page-stack .report-wrap .report tbody tr:last-child td,
.report-page-stack .report-wrap .report-bs tbody tr:last-child td{
  border-bottom:0 !important;
}
.report-page-stack .report-wrap .report .section-row td,
.report-page-stack .report-wrap .report-bs .section-row td{
  background:transparent !important;
  font-weight:800 !important;
  color:#0a0f1d !important;
}
.report-page-stack .report-wrap .report .total-row td,
.report-page-stack .report-wrap .report-bs .total-row td{
  background:rgba(167,139,250,.13) !important;
  font-weight:800 !important;
  color:#0a0f1d !important;
  border-bottom:1px solid rgba(167,139,250,.25) !important;
}
.report-page-stack .report-wrap .report .total-row.heavy td,
.report-page-stack .report-wrap .report-bs .total-row.heavy td{
  background:rgba(139,92,246,.16) !important;
  font-size:13.5px !important;
  border-top:1px solid rgba(139,92,246,.35) !important;
}
/* Negative amounts stay red */
.report-page-stack .report-wrap .negative,
.report-page-stack .report-wrap td.negative,
.report-page-stack .report-wrap .report .right.negative{
  color:#dc2626 !important;
}

/* Page background — softer, away from flat gray */
body{
  background:linear-gradient(160deg, #f5f7fc 0%, #eef2fb 40%, #f7f4fb 100%) !important;
}

/* "Approved" label shown in CoA mappings dialog instead of the Approve button
   when the mapping is already approved. Sits inline before the Unmap button. */
.coa-approved-label{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 11px;
  border-radius:999px;
  background:#dcfce7;
  color:#166534;
  font-size:11px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  border:1px solid #bbf7d0;
}
.coa-approved-label::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:#16a34a;
  display:inline-block;
}

/* ============================================================
   COMPANIES AND GROUPS PAGE — soft pastel redesign
   Calm flat tints (no gradient noise), clean atmosphere,
   gentle visual hierarchy through breathing room and color.
   ============================================================ */

/* Subtle cool-gray page surface so the white cards float without competing */
body:has(.companies-grid){
  background:#f5f6fa !important;
}

.companies-grid{
  gap:22px !important;
  margin-top:18px !important;
}

/* Cards — pure white, soft layered shadow, generous padding, no border */
.companies-grid .panel{
  background:#ffffff !important;
  border:0 !important;
  border-radius:20px !important;
  box-shadow:0 1px 3px rgba(15,23,42,.04),
             0 8px 24px rgba(15,23,42,.04) !important;
  padding:26px 28px 22px !important;
}
.companies-grid .panel-title{
  font-size:18px !important;
  font-weight:800 !important;
  color:#0a0f1d !important;
  letter-spacing:-.01em !important;
}
.companies-grid .panel-title-row{
  margin-bottom:18px !important;
  align-items:center !important;
}

/* Count pill — soft purple with leading dot */
.companies-grid .panel-title-row .pill{
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  padding:4px 11px 4px 9px !important;
  background:#ede9fe !important;
  color:#6d28d9 !important;
  font-size:11px !important;
  font-weight:700 !important;
  border-radius:999px !important;
  border:0 !important;
}
.companies-grid .panel-title-row .pill::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:#8b5cf6;
  display:inline-block;
}

/* Rows as gently-spaced rounded cards */
.companies-grid .grid{
  border-collapse:separate !important;
  border-spacing:0 6px !important;
  width:100% !important;
  margin-top:-2px !important;
}
.companies-grid .table-scroll{
  border:0 !important;
  background:transparent !important;
  overflow:visible !important;
  max-height:none !important;
}

/* Headers — calm light-lavender strip, fully rounded ends */
.companies-grid .grid thead th{
  background:#f5f3ff !important;
  color:#6b7280 !important;
  font-size:10.5px !important;
  font-weight:700 !important;
  letter-spacing:.10em !important;
  padding:13px 16px !important;
  text-transform:uppercase !important;
  border:0 !important;
}
.companies-grid .grid thead th:first-child{
  border-top-left-radius:12px !important;
  border-bottom-left-radius:12px !important;
}
.companies-grid .grid thead th:last-child{
  border-top-right-radius:12px !important;
  border-bottom-right-radius:12px !important;
}

/* Body cells: roomy, no dividers — flat soft tint */
.companies-grid .grid tbody td{
  border:0 !important;
  padding:16px 16px !important;
  color:#0a0f1d !important;
  font-size:13.5px !important;
  vertical-align:middle !important;
  font-weight:500 !important;
}
.companies-grid .grid tbody tr td:first-child{
  border-top-left-radius:14px !important;
  border-bottom-left-radius:14px !important;
}
.companies-grid .grid tbody tr td:last-child{
  border-top-right-radius:14px !important;
  border-bottom-right-radius:14px !important;
}
.companies-grid .grid tbody tr{
  cursor:pointer !important;
  transition:background-color .15s ease !important;
}

/* Flat pastel tints — visible enough to read instantly, still calm */
.companies-grid .co-row--purple td{
  background:#ede9fe !important;
}
.companies-grid .co-row--blue td{
  background:#dbeafe !important;
}
.companies-grid .co-row--purple:hover td{
  background:#ddd6fe !important;
}
.companies-grid .co-row--blue:hover td{
  background:#bfdbfe !important;
}

/* Group row — soft purple matching the chip tone */
.companies-grid .group-row td{
  background:#ede9fe !important;
}
.companies-grid .group-row:hover td{
  background:#ddd6fe !important;
}

/* Initial badges — flat soft pastel solid, NOT gradients */
.co-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:40px;
  height:40px;
  padding:0 8px;
  border-radius:11px;
  font-size:13px;
  font-weight:800;
  letter-spacing:.02em;
  flex:0 0 auto;
}
.co-badge--purple{
  background:#e9dffe;
  color:#6d28d9;
}
.co-badge--blue{
  background:#dbe7fe;
  color:#2563eb;
}

/* Company-name cell layout */
.companies-grid .co-name-cell{
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
}
.companies-grid .co-name-cell .co-name-text{
  display:flex;
  flex-direction:column;
  min-width:0;
}
.companies-grid .co-name-cell strong{
  font-weight:700;
  color:#0a0f1d;
  font-size:14px;
}
.companies-grid .co-name-cell .muted{
  font-size:11px;
  margin-top:2px;
  color:#9ca3af;
}

/* Chips in Groups table — soft pastel with leading dot */
.co-chip{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:5px 11px 5px 10px;
  border-radius:999px;
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.10em;
  text-transform:uppercase;
  margin:0 6px 4px 0;
  white-space:nowrap;
  border:0;
}
.co-chip::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  display:inline-block;
  flex:0 0 auto;
}
.co-chip--purple{
  background:#ede9fe;
  color:#6d28d9;
}
.co-chip--purple::before{ background:#8b5cf6; }
.co-chip--blue{
  background:#dbeafe;
  color:#1d4ed8;
}
.co-chip--blue::before{ background:#3b82f6; }

/* Action buttons — clean white rounded squares, very subtle */
.companies-grid .action-cell{
  white-space:nowrap;
  text-align:right;
  width:1%;
}
.companies-grid .action-cell .btn.icon-only{
  width:34px !important;
  height:34px !important;
  min-width:34px !important;
  padding:0 !important;
  border-radius:9px !important;
  background:#ffffff !important;
  border:1px solid #e5e7eb !important;
  box-shadow:0 1px 2px rgba(15,23,42,.04) !important;
  color:#6b7280 !important;
  margin-left:6px !important;
  transition:all .15s ease !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.companies-grid .action-cell .btn.icon-only:first-child{ margin-left:0 !important; }
.companies-grid .action-cell .btn.icon-only:hover{
  transform:translateY(-1px) !important;
  border-color:#c7d2fe !important;
  box-shadow:0 4px 10px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.04) !important;
  color:#6d28d9 !important;
}
.companies-grid .action-cell .btn.icon-only.danger:hover{
  border-color:#fecaca !important;
  color:#dc2626 !important;
}
.companies-grid .action-cell .btn.icon-only svg{
  width:15px !important;
  height:15px !important;
}

/* Empty-state row */
.companies-grid .grid tbody tr td.muted[colspan]{
  background:#fafbff !important;
  color:#9ca3af !important;
  text-align:center !important;
  padding:24px !important;
}

/* Neutralize legacy hover that would flatten the tint */
.companies-grid .company-directory-table tbody tr:hover td{
  background:inherit !important;
}

/* ============================================================
   COMPANY OVERVIEW POPUP — purple gradient header, sub-card grids,
   color-coded financial cards, soft pastel atmosphere
   ============================================================ */

/* Modal shell — bigger, softer rounded, light pastel surface */
.modal.company-overview-modal{
  width:min(1080px, 96vw) !important;
  max-height:92vh !important;
  border-radius:18px !important;
  border:0 !important;
  background:#fafbfd !important;
  box-shadow:0 30px 80px rgba(15,23,42,.20), 0 6px 16px rgba(15,23,42,.06) !important;
  overflow:hidden !important;
}

/* Header — soft purple gradient, identity left, icon toolbar right */
.modal.company-overview-modal .company-overview-bar{
  background:linear-gradient(135deg, #dcd3fa 0%, #c8d6fb 100%) !important;
  padding:16px 22px !important;
  border:0 !important;
  border-bottom:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:18px !important;
  position:relative !important;
}
.modal.company-overview-modal .company-overview-identity{
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
  min-width:0 !important;
}
.modal.company-overview-modal .company-logo-mark{
  width:48px !important;
  height:48px !important;
  border-radius:12px !important;
  background:#a78bfa !important;
  color:#ffffff !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-weight:800 !important;
  font-size:18px !important;
  box-shadow:0 4px 12px rgba(124,58,237,.25) !important;
  flex:0 0 auto !important;
  overflow:hidden !important;
}
.modal.company-overview-modal .company-logo-mark img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  border-radius:inherit !important;
  mix-blend-mode:multiply !important;
}
.modal.company-overview-modal .company-overview-name{
  font-size:22px !important;
  font-weight:800 !important;
  color:#0a0f1d !important;
  letter-spacing:-.01em !important;
  line-height:1.2 !important;
}
.modal.company-overview-modal .company-overview-submeta{
  font-size:12px !important;
  color:#5b6378 !important;
  margin-top:3px !important;
  font-weight:500 !important;
}
.modal.company-overview-modal .company-overview-actions{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  flex:0 0 auto !important;
}
.modal.company-overview-modal .company-overview-actions .btn.icon-only,
.modal.company-overview-modal .company-overview-actions label.btn.icon-only{
  width:36px !important;
  height:36px !important;
  min-width:36px !important;
  padding:0 !important;
  border-radius:10px !important;
  background:#ffffff !important;
  border:1px solid #e5e7eb !important;
  box-shadow:0 1px 2px rgba(15,23,42,.06) !important;
  color:#475569 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  transition:all .15s ease !important;
  cursor:pointer !important;
}
.modal.company-overview-modal .company-overview-actions .btn.icon-only svg{
  width:16px !important;
  height:16px !important;
}
.modal.company-overview-modal .company-overview-actions .btn.icon-only:hover{
  transform:translateY(-1px) !important;
  box-shadow:0 5px 12px rgba(15,23,42,.10), 0 1px 2px rgba(15,23,42,.04) !important;
  border-color:#c7d2fe !important;
  color:#6d28d9 !important;
}
.modal.company-overview-modal .company-overview-actions .company-overview-delete:hover{
  border-color:#fecaca !important;
  color:#dc2626 !important;
}
.modal.company-overview-modal .company-overview-actions .company-overview-close:hover{
  border-color:#e5e7eb !important;
  color:#0a0f1d !important;
}

/* Body — light pastel bg, big card grid */
.modal.company-overview-modal .modal-body.company-overview-body{
  background:#fafbfd !important;
  padding:22px !important;
  display:flex !important;
  flex-direction:column !important;
  gap:18px !important;
}
.modal.company-overview-modal .company-overview-grid{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
  gap:18px !important;
}
.modal.company-overview-modal .company-overview-grid-lower{
  grid-template-columns:1fr !important;
}
.modal.company-overview-modal .modal-body .panel{
  background:#ffffff !important;
  border:0 !important;
  border-radius:16px !important;
  box-shadow:0 1px 3px rgba(15,23,42,.04),
             0 6px 18px rgba(15,23,42,.04) !important;
  padding:22px 22px 20px !important;
}
.modal.company-overview-modal .modal-body .panel .panel-title{
  font-size:15px !important;
  font-weight:800 !important;
  color:#0a0f1d !important;
  margin-bottom:16px !important;
}
.modal.company-overview-modal .modal-body .panel .panel-title-row{
  margin-bottom:14px !important;
}

/* Company-details grid: 2-col sub-cards with label + value */
.modal.company-overview-modal .company-detail-grid{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0,1fr)) !important;
  gap:10px !important;
}
.modal.company-overview-modal .company-detail-grid > div{
  background:#f8fafc !important;
  border:1px solid #eef0f5 !important;
  border-radius:12px !important;
  padding:11px 14px !important;
  display:flex !important;
  flex-direction:column !important;
  gap:3px !important;
  min-width:0 !important;
}
.modal.company-overview-modal .company-detail-grid span{
  font-size:9.5px !important;
  font-weight:700 !important;
  letter-spacing:.10em !important;
  text-transform:uppercase !important;
  color:#6b7280 !important;
}
.modal.company-overview-modal .company-detail-grid strong{
  font-size:14px !important;
  font-weight:700 !important;
  color:#0a0f1d !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
.modal.company-overview-modal .company-notes-box{
  margin-top:10px !important;
  background:#f8fafc !important;
  border:1px solid #eef0f5 !important;
  border-radius:12px !important;
  padding:13px 14px !important;
  font-size:12.5px !important;
  color:#6b7280 !important;
}

/* Quick financial summary — date inputs then 2-col colored sub-cards */
.modal.company-overview-modal .panel .toolbar{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:10px !important;
  margin-bottom:12px !important;
}
.modal.company-overview-modal .panel .toolbar label{
  background:#f8fafc !important;
  border:1px solid #eef0f5 !important;
  border-radius:12px !important;
  padding:8px 14px !important;
  display:flex !important;
  flex-direction:column !important;
  gap:2px !important;
}
.modal.company-overview-modal .panel .toolbar label span{
  font-size:9.5px !important;
  font-weight:700 !important;
  letter-spacing:.10em !important;
  text-transform:uppercase !important;
  color:#6b7280 !important;
}
.modal.company-overview-modal .panel .toolbar label input{
  border:0 !important;
  background:transparent !important;
  padding:0 !important;
  min-height:auto !important;
  font-size:13.5px !important;
  font-weight:700 !important;
  color:#0a0f1d !important;
}
.modal.company-overview-modal .company-summary-grid{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0,1fr)) !important;
  gap:10px !important;
}
.modal.company-overview-modal .company-summary-grid > div{
  background:#f8fafc !important;
  border:1px solid #eef0f5 !important;
  border-radius:12px !important;
  padding:12px 14px !important;
  display:flex !important;
  flex-direction:column !important;
  gap:4px !important;
}
.modal.company-overview-modal .company-summary-grid > div span{
  order:1 !important;
  font-size:10px !important;
  font-weight:700 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
  color:#6b7280 !important;
}
.modal.company-overview-modal .company-summary-grid > div strong{
  order:2 !important;
  font-size:15.5px !important;
  font-weight:800 !important;
  color:#0a0f1d !important;
}
/* All financial cards share the same neutral pastel — no red/pink anywhere */
/* Negative-value coloring (if needed) should be applied at the render layer
   based on the actual sign of the number, not by card position. */

/* Upload section — same card style */
.modal.company-overview-modal .company-overview-grid-lower .panel{
  padding:22px 22px 18px !important;
}
.modal.company-overview-modal .company-overview-grid-lower .toolbar{
  display:grid !important;
  grid-template-columns:1fr 1fr 1.4fr !important;
  gap:12px !important;
  margin-bottom:14px !important;
  background:transparent !important;
}
.modal.company-overview-modal .company-overview-grid-lower .toolbar label{
  background:transparent !important;
  border:0 !important;
  padding:0 !important;
  display:flex !important;
  flex-direction:column !important;
  gap:4px !important;
}
.modal.company-overview-modal .company-overview-grid-lower .toolbar label span{
  font-size:10px !important;
  font-weight:700 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
  color:#6b7280 !important;
}
.modal.company-overview-modal .company-overview-grid-lower .toolbar label input,
.modal.company-overview-modal .company-overview-grid-lower .toolbar label select{
  border:1px solid #e5e7eb !important;
  border-radius:9px !important;
  background:#ffffff !important;
  padding:8px 12px !important;
  font-size:13px !important;
  color:#0a0f1d !important;
}
.modal.company-overview-modal .company-overview-grid-lower .panel > .panel-title{
  font-size:13.5px !important;
  margin:8px 0 10px !important;
  font-weight:700 !important;
  color:#0a0f1d !important;
}
.modal.company-overview-modal .compact-company-files{
  border:0 !important;
  background:transparent !important;
  max-height:none !important;
  overflow:visible !important;
}
.modal.company-overview-modal .compact-company-files table.grid{
  border-collapse:separate !important;
  border-spacing:0 !important;
}
.modal.company-overview-modal .compact-company-files thead th{
  background:#f0eafe !important;
  color:#6b7280 !important;
  font-size:10px !important;
  font-weight:700 !important;
  letter-spacing:.10em !important;
  padding:11px 14px !important;
  text-transform:uppercase !important;
  border:0 !important;
}
.modal.company-overview-modal .compact-company-files thead th:first-child{
  border-top-left-radius:10px !important;
  border-bottom-left-radius:10px !important;
}
.modal.company-overview-modal .compact-company-files thead th:last-child{
  border-top-right-radius:10px !important;
  border-bottom-right-radius:10px !important;
}
.modal.company-overview-modal .compact-company-files tbody td{
  border:0 !important;
  border-bottom:1px solid #f1f4fb !important;
  padding:12px 14px !important;
  font-size:12.5px !important;
  color:#0a0f1d !important;
}
.modal.company-overview-modal .compact-company-files tbody td.muted{
  color:#9ca3af !important;
  font-style:italic !important;
}

/* Modal foot — close button right-aligned */
.modal.company-overview-modal .modal-foot{
  background:#fafbfd !important;
  border-top:1px solid #eef0f5 !important;
  padding:14px 22px !important;
}
.modal.company-overview-modal .modal-foot .btn.secondary{
  background:#ffffff !important;
  border:1px solid #e5e7eb !important;
  border-radius:10px !important;
  padding:8px 18px !important;
  font-size:13px !important;
  font-weight:700 !important;
  color:#475569 !important;
  box-shadow:0 1px 2px rgba(15,23,42,.04) !important;
}
.modal.company-overview-modal .modal-foot .btn.secondary:hover{
  border-color:#c7d2fe !important;
  color:#6d28d9 !important;
}

/* ============================================================
   Responsive / mobile adaptation
   Added so the app reflows for phones & tablets instead of keeping the
   fixed two-column desktop shell. The sidebar becomes an off-canvas drawer
   (toggled by symmetra-mobile-nav.js), multi-column layouts collapse to one
   column, and wide tables scroll within their panel.
   ============================================================ */
.sym-mnav-toggle{ display:none; }
.sym-mnav-backdrop{ display:none; }

/* NOTE: this stylesheet has many layered `.app{...!important}` and
   `html{zoom:...!important}` rules from earlier density passes, so the mobile
   overrides below MUST use !important (and are last in the file) to win. */
@media (max-width: 860px){
  /* The desktop zoom trick makes everything tiny on a phone — full size reads better. */
  html{ zoom:1 !important; }

  /* Single column; main content gets the full width. (html body … to out-rank
     the layered `html body .app{…!important}` density rules earlier in the file.) */
  html body .app{ grid-template-columns:1fr !important; gap:0 !important; padding:0 !important; }
  html body .main, html body .app .main{ max-width:100% !important; padding:64px 14px 28px !important; }

  /* Hamburger button — only once logged in (JS adds .sym-mnav-enabled). */
  html.sym-mnav-enabled .sym-mnav-toggle{
    display:flex !important; align-items:center; justify-content:center;
    position:fixed; top:10px; left:10px; z-index:95;
    width:44px; height:44px; border-radius:14px; cursor:pointer;
    border:1px solid var(--border);
    background:rgba(255,255,255,.92); color:#1d4ed8;
    box-shadow:0 6px 18px rgba(15,23,42,.16);
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  }

  .sym-mnav-backdrop{
    display:block !important; position:fixed; inset:0; z-index:90;
    background:rgba(15,23,42,.45);
    opacity:0; visibility:hidden;
    transition:opacity .25s ease, visibility .25s ease;
  }
  html.sym-mnav-open .sym-mnav-backdrop{ opacity:1; visibility:visible; }

  /* Sidebar as an off-canvas drawer. */
  html body .sidebar{
    position:fixed !important; top:0 !important; left:0 !important; height:100vh !important;
    width:min(86vw, 320px) !important;
    max-width:none !important;
    transform:translateX(-100%) !important;
    transition:transform .26s cubic-bezier(.4,0,.2,1) !important;
    z-index:92 !important; overflow-y:auto !important;
    border-radius:0 24px 24px 0 !important;
    padding:18px 16px 24px !important;
  }
  html.sym-mnav-open body .sidebar{ transform:translateX(0) !important; }

  /* Keep the desktop background-controls clear of the hamburger. */
  .background-controls{ top:10px !important; right:10px !important; }

  /* Collapse the major multi-column layouts to a single column. */
  .stats-grid{ grid-template-columns:repeat(2,1fr) !important; }
  .two-col,
  .companies-grid,
  .company-overview-hero,
  .company-overview-grid,
  .company-detail-grid,
  .gl-journey-shell,
  .gl-format-grid,
  .currency-hero-shell,
  .currency-split,
  .coa-overview-shell,
  .form-grid,
  .integration-two-col,
  .smart-ai-grid,
  .ai-status-grid,
  .ai-provider-grid,
  .integration-provider-grid,
  .gl-status-grid{ grid-template-columns:1fr !important; }

  /* Toolbars / filter rows: stack so controls don't get crushed. */
  .report-toolbar,
  .coa-filter-bar,
  .cashflow-filter-bar,
  .currency-control-grid,
  .currency-range-controls,
  .mapping-actions,
  .mapping-card-actions,
  .mapping-card-grid{ grid-template-columns:1fr !important; gap:8px !important; }

  .page-head{ flex-direction:column !important; align-items:flex-start !important; gap:10px !important; }

  /* Wide tables scroll inside their panel instead of breaking the layout. */
  .panel, .report-wrap, .table-wrap{ overflow-x:auto !important; -webkit-overflow-scrolling:touch; }
  .panel table, .report-wrap table, .table-wrap table{ min-width:480px; }

  .modal-shell{ padding:10px !important; }
}

@media (max-width: 480px){
  .stats-grid{ grid-template-columns:1fr !important; }
  .currency-hero-grid,
  .company-summary-grid,
  .coa-summary-grid,
  .preview-summary,
  .workflow-summary-grid{ grid-template-columns:1fr !important; }
  .brand-name{ font-size:20px; }
  .main, .app .main{ padding:60px 10px 24px !important; }
}

/* ── GL report: account filter sits inline in the panel title row ─────── */
.panel-title.gl-report-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.gl-account-search{ min-width:200px; max-width:300px; }

/* ── Report line drill-down: clickable lines + breakdown modal ────────── */
tr.report-line-clickable{ cursor:pointer; }
tr.report-line-clickable:hover > td{ background:rgba(122,77,255,.06); }
.breakdown-modal .breakdown-tabs{ display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap; }
.breakdown-modal table{ width:100%; }
.breakdown-modal .breakdown-amt{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.breakdown-modal .breakdown-others td{ font-style:italic; opacity:.85; }
.breakdown-modal .breakdown-total td{ font-weight:700; border-top:2px solid currentColor; }

/* Reports toolbar R15: a bounded five-column control grid plus one aligned utility row. */
.report-page-stack{ width:100% !important; max-width:100% !important; min-width:0 !important; overflow-x:clip !important; }
.report-page-stack .report-header-shell{
  display:block !important; width:100% !important; max-width:100% !important; min-width:0 !important;
  box-sizing:border-box !important; padding:12px 16px 11px !important;
}
.report-page-stack .report-header-row{ margin:0 0 9px !important; }
.report-page-stack .report-header-title{ font-size:30px !important; line-height:1 !important; }
.report-page-stack .report-toolbar.rtb{
  display:grid !important;
  grid-template-columns:minmax(190px,1fr) minmax(220px,1.45fr) minmax(140px,.72fr) minmax(175px,.9fr) minmax(360px,1.75fr) !important;
  gap:9px 12px !important;
  align-items:end !important;
  width:100% !important; max-width:100% !important; min-width:0 !important;
}
.report-page-stack .report-toolbar.rtb .rtb-group{
  display:grid !important; grid-template-rows:auto 36px !important; gap:4px !important;
  padding:0 !important; margin:0 !important; min-width:0 !important; width:100% !important;
  align-items:end !important; justify-content:stretch !important; justify-items:stretch !important;
}
.report-page-stack .report-toolbar.rtb .rtb-row{
  min-height:36px !important; width:100% !important; min-width:0 !important;
  gap:6px !important; flex-wrap:nowrap !important; justify-content:stretch !important;
}
.report-page-stack .report-toolbar.rtb .rtb-select,
.report-page-stack .report-toolbar.rtb .rtb-input,
.report-page-stack .report-toolbar.rtb .rtb-seg{ min-height:36px !important; height:36px !important; }
.report-page-stack .report-toolbar.rtb .rtb-group--scope{ justify-self:start !important; }
.report-page-stack .report-toolbar.rtb .rtb-group--entity{ min-width:0 !important; }
.report-page-stack .rtb-group--entity .rtb-select--entity,
.report-page-stack .rtb-group--period .rtb-select--preset,
.report-page-stack .rtb-group--compare .rtb-select--compare{ width:100% !important; min-width:0 !important; max-width:none !important; }
.report-page-stack .report-toolbar.rtb .rtb-row--period{ flex-wrap:nowrap !important; }
.report-page-stack .report-toolbar.rtb .rtb-group--view{ margin-left:0 !important; }
.report-page-stack .rtb-group--view .rtb-row{
  display:grid !important; grid-template-columns:minmax(76px,.55fr) minmax(140px,1.1fr) minmax(130px,1fr) !important;
}
.report-page-stack .rtb-group--view .rtb-select{ width:100% !important; min-width:0 !important; max-width:none !important; }
.report-page-stack .rtb-group--saved{ grid-column:1 / 4 !important; grid-row:2 !important; justify-self:start !important; }
.report-page-stack .rtb-row--saved{
  display:grid !important; grid-template-columns:minmax(180px,260px) auto auto !important;
  justify-content:start !important; justify-items:start !important;
}
.report-page-stack .rtb-select--views{ width:100% !important; min-width:0 !important; max-width:260px !important; }
.report-page-stack .rtb-save-view-btn{
  width:auto !important; min-width:104px !important; height:36px !important;
  padding:0 14px !important; border-radius:10px !important;
  border:1px solid rgba(205,214,235,.95) !important; background:#fff !important;
  color:#334155 !important; font-size:12.5px !important; font-weight:750 !important;
  white-space:nowrap !important;
}
.report-page-stack .rtb-delete-view-btn{ flex:0 0 34px !important; }
.report-page-stack .report-toolbar.rtb .rtb-actions{
  grid-column:4 / 6 !important; grid-row:2 !important; align-self:end !important;
  justify-self:end !important; min-height:36px !important; margin:0 !important; padding:0 !important;
}
.report-wrap .report-head-meta{ display:flex; flex-direction:column; align-items:flex-end; gap:10px; margin-left:auto; }
.report-wrap .report-freshness{
  display:inline-flex; align-items:center; gap:7px; min-height:30px; padding:6px 10px;
  border:1px solid #dbe4f2; border-radius:999px; background:#f8fbff; color:#344766;
  font-size:11px; font-weight:750; letter-spacing:.01em; white-space:nowrap;
}
.report-wrap .report-freshness__dot{ width:7px; height:7px; border-radius:50%; background:#22a06b; box-shadow:0 0 0 3px rgba(34,160,107,.12); }
.report-wrap .report-freshness--empty{ color:#7a879d; background:#fafbfc; }
body.theme-dark .report-wrap .report-freshness{ color:#dbe7ff; border-color:rgba(123,151,205,.32); background:rgba(24,38,66,.78); }
@media (max-width:1500px){
  .report-page-stack .report-toolbar.rtb{ grid-template-columns:minmax(190px,.9fr) minmax(220px,1.35fr) minmax(140px,.72fr) minmax(175px,.9fr) !important; }
  .report-page-stack .report-toolbar.rtb .rtb-group--view{ grid-column:1 / 4 !important; grid-row:2 !important; }
  .report-page-stack .report-toolbar.rtb .rtb-group--saved{ grid-column:1 / 4 !important; grid-row:3 !important; }
  .report-page-stack .report-toolbar.rtb .rtb-actions{ grid-column:4 !important; grid-row:3 !important; }
}
@media (max-width:900px){
  .report-page-stack .report-toolbar.rtb{ grid-template-columns:1fr 1fr !important; }
  .report-page-stack .report-toolbar.rtb .rtb-group,
  .report-page-stack .report-toolbar.rtb .rtb-group--view,
  .report-page-stack .report-toolbar.rtb .rtb-group--saved,
  .report-page-stack .report-toolbar.rtb .rtb-actions{ grid-column:auto !important; grid-row:auto !important; }
  .report-page-stack .report-toolbar.rtb .rtb-group--view,
  .report-page-stack .report-toolbar.rtb .rtb-group--saved{ grid-column:1 / -1 !important; }
  .report-page-stack .rtb-row{ flex-wrap:wrap !important; }
  .report-page-stack .rtb-select--views{ min-width:0 !important; max-width:none !important; flex:1 1 100% !important; }
  .report-page-stack .report-toolbar.rtb .rtb-actions{ justify-self:start !important; }
  .report-wrap .report-head{ align-items:flex-start !important; }
  .report-wrap .report-head-meta{ align-items:flex-start; margin-left:0; }
}

/* ============================================================
   Sidebar layout: user chip on top, logo + live version stamp
   pinned to the bottom (feedback round: switch logo & user tab).
   ============================================================ */
.sidebar{ display:flex; flex-direction:column; }
.sidebar > .nav{ flex:1 1 auto; }
/* User chip sits at the very top now. */
.sidebar > .sym-profile-dock{ margin:0 0 14px 0; order:-1; }

/* Bottom footer holds the (smaller) logo + version badge. */
.sidebar-footer{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.28);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}
.brand-footer{
  margin:0;
  padding:0;
  border-bottom:0;
  gap:8px;
  align-items:center;
  justify-content:center;
}
.brand-footer .brand-logo{
  width:38px;
  height:38px;
  border-radius:12px;
  padding:4px;
}

/* Live app version + health dot. Green = app live & healthy. */
.sym-app-version{
  display:flex;
  align-items:center;
  gap:7px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.02em;
  color:var(--muted);
  padding:2px 4px;
  user-select:none;
}
.sym-app-version__dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#94a3b8;
  box-shadow:0 0 0 3px rgba(148,163,184,.18);
  flex:0 0 auto;
}
.sym-app-version.is-healthy .sym-app-version__dot{
  background:#16a34a;
  box-shadow:0 0 0 3px rgba(22,163,74,.20);
}
.sym-app-version.is-pending .sym-app-version__dot{
  background:#f59e0b;
  box-shadow:0 0 0 3px rgba(245,158,11,.18);
}
.sym-app-version__text{ white-space:nowrap; }

/* ============================================================
   Settings hub page (App.go('settings')) — aligned tiles that
   open Currencies / Integration Settings / (owner) sub-tabs.
   ============================================================ */
.settings-hub{ display:flex; flex-direction:column; gap:18px; }
.settings-hub__grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:14px;
}
.settings-tile{
  display:flex;
  align-items:center;
  gap:14px;
  width:100%;
  text-align:left;
  padding:18px;
  border:1px solid var(--border);
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(248,250,255,.75));
  box-shadow:var(--shadow-soft);
  cursor:pointer;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.settings-tile:hover{
  transform:translateY(-2px);
  border-color:rgba(140,170,240,.6);
  box-shadow:0 14px 30px rgba(6,30,88,.12);
}
.settings-tile__icon{
  flex:0 0 auto;
  width:42px;
  height:42px;
  display:inline-grid;
  place-items:center;
  border-radius:12px;
  background:var(--primary-soft);
  color:#1d4ed8;
}
.settings-tile__icon svg{ width:22px; height:22px; }
.settings-tile__copy{ display:grid; gap:3px; min-width:0; flex:1 1 auto; }
.settings-tile__title{ font-size:15px; font-weight:800; color:var(--text); }
.settings-tile__sub{ font-size:12.5px; color:var(--muted); line-height:1.3; }
.settings-tile__chev{ font-size:22px; color:#94a3b8; flex:0 0 auto; }
.settings-hub__owner:empty{ display:none; }
.settings-hub__owner{ display:flex; flex-wrap:wrap; gap:12px; }

/* ============================================================
   Reports toolbar (feedback round): content-sized filters (no
   stretched empty space), icon-only scope, no Saved Views, and
   export buttons moved onto the report head.
   ============================================================ */
.report-page-stack .report-toolbar.rtb{
  display:flex !important;
  grid-template-columns:none !important;
  flex-wrap:wrap !important;
  align-items:flex-end !important;
  gap:10px 14px !important;
}
.report-page-stack .report-toolbar.rtb .rtb-group{
  display:flex !important;
  flex-direction:column !important;
  grid-template-rows:none !important;
  gap:4px !important;
  width:auto !important;
  min-width:0 !important;
}
.report-page-stack .report-toolbar.rtb .rtb-row{
  width:auto !important;
  justify-content:flex-start !important;
  gap:6px !important;
}
.report-page-stack .rtb-group--view .rtb-row{
  display:flex !important;
  grid-template-columns:none !important;
}
/* Selects size to their content, with sensible min/max caps. */
.report-page-stack .report-toolbar.rtb .rtb-select{ width:auto !important; min-width:0 !important; max-width:none !important; }
.report-page-stack .rtb-group--entity .rtb-select--entity{ min-width:150px !important; max-width:230px !important; width:auto !important; }
.report-page-stack .rtb-group--period .rtb-select--preset{ min-width:120px !important; width:auto !important; }
.report-page-stack .rtb-group--compare .rtb-select--compare{ min-width:130px !important; width:auto !important; }
.report-page-stack .rtb-select--currency{ min-width:72px !important; width:auto !important; }
.report-page-stack .rtb-select--statement{ min-width:120px !important; width:auto !important; }
.report-page-stack .rtb-select--lens{ min-width:120px !important; width:auto !important; }
/* Icon-only scope toggle. */
.report-page-stack .rtb-seg--icononly{ width:auto !important; }
.report-page-stack .rtb-seg--icononly .rtb-seg__btn{ padding:0 !important; width:42px !important; justify-content:center !important; }
/* AI tools button stays at the toolbar's right edge. */
.report-page-stack .report-toolbar.rtb .rtb-actions{
  grid-column:auto !important; grid-row:auto !important;
  margin-left:auto !important; align-self:flex-end !important;
  display:flex !important; align-items:center !important;
}

/* Export buttons now on the report head, above "Updated as of". */
.report-wrap .report-export-actions{
  display:flex; align-items:center; gap:6px; justify-content:flex-end;
}
.report-wrap .report-export-btn{
  width:34px !important; height:34px !important; min-height:34px !important;
  padding:0 !important; border-radius:9px !important;
  display:inline-flex; align-items:center; justify-content:center;
}
@media print{ .report-wrap .report-export-actions{ display:none !important; } }

/* ============================================================
   Settings hub as a tabbed page (Currencies / Integration Settings /
   Website Owner / Workspaces) — tab bar under the title, active tab
   underlined, section content inline below (vendor-page pattern).
   ============================================================ */
.settings-tabs-shell{ display:flex; flex-direction:column; }
.settings-tabbar{
  display:flex;
  gap:4px;
  flex-wrap:wrap;
  border-bottom:1px solid var(--border);
  margin-bottom:18px;
}
.settings-tab{
  appearance:none;
  border:0;
  background:transparent;
  cursor:pointer;
  padding:12px 14px 13px;
  margin-bottom:-1px;
  font-size:14px;
  font-weight:700;
  color:var(--muted);
  border-bottom:2px solid transparent;
  transition:color .15s ease, border-color .15s ease;
  white-space:nowrap;
}
.settings-tab:hover{ color:var(--text); }
.settings-tab.is-active{
  color:#1d4ed8;
  border-bottom-color:#1d4ed8;
}
.settings-tabpanel{ min-height:120px; }
/* Inline Owner / Workspaces panels reuse the modal body markup. */
.settings-inline-panel{
  border:1px solid var(--border);
  border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(248,250,255,.7));
  box-shadow:var(--shadow-soft);
  padding:20px;
}
.integration-inline-actions{ display:flex; justify-content:flex-end; margin-bottom:2px; }

/* ── Settings ▸ API Keys panel (Integration API key management) ─────────────
   Selectors are scoped under #settingsSectionApiKeys with enough specificity to
   beat the app's global input/label rules (e.g. input{width:100%}). */
#settingsSectionApiKeys{display:block}
#settingsSectionApiKeys .sym-ak-card{max-width:820px;margin:0 0 18px;padding:20px 22px;background:var(--surface,#fff);border:1px solid var(--line,#e3e8ef);border-radius:14px;box-shadow:0 1px 2px rgba(16,24,40,.04)}
#settingsSectionApiKeys .sym-ak-card-head{margin-bottom:16px}
#settingsSectionApiKeys .sym-ak-card-title{font-size:16px;font-weight:700;color:inherit}
#settingsSectionApiKeys .sym-ak-card-sub{margin-top:4px;font-size:13px;opacity:.6;line-height:1.5}
#settingsSectionApiKeys .sym-ak-field{margin-bottom:16px}
#settingsSectionApiKeys .sym-ak-label{display:block;font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;opacity:.6;margin-bottom:8px}
#settingsSectionApiKeys .sym-ak-input{width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid var(--line,#d7dce5);border-radius:9px;font:inherit;font-size:14px;background:var(--surface,#fff);color:inherit}
#settingsSectionApiKeys .sym-ak-input:focus{outline:none;border-color:#7c6cf0;box-shadow:0 0 0 3px rgba(124,108,240,.15)}
#settingsSectionApiKeys .sym-ak-select{width:auto;min-width:150px;cursor:pointer}
#settingsSectionApiKeys .sym-ak-hint{margin-top:6px;font-size:12px;opacity:.55;line-height:1.4}
/* Scope groups + responsive grid of checkbox pills */
#settingsSectionApiKeys .sym-ak-scope-group{margin-bottom:14px}
#settingsSectionApiKeys .sym-ak-scope-group:last-child{margin-bottom:0}
#settingsSectionApiKeys .sym-ak-group-title{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;opacity:.5;margin:0 0 8px}
#settingsSectionApiKeys .sym-ak-scope-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
#settingsSectionApiKeys .sym-ak-scope{display:flex;align-items:center;gap:10px;margin:0;padding:9px 12px;border:1px solid var(--line,#e3e8ef);border-radius:9px;cursor:pointer;background:var(--surface,#fff);transition:border-color .12s,background .12s}
#settingsSectionApiKeys .sym-ak-scope:hover{border-color:#c7cdf7;background:rgba(124,108,240,.04)}
#settingsSectionApiKeys .sym-ak-scope input[type=checkbox]{width:16px!important;height:16px;min-width:16px;margin:0!important;flex:0 0 auto;accent-color:#7c6cf0;cursor:pointer}
#settingsSectionApiKeys .sym-ak-scope-text{display:flex;flex-direction:column;line-height:1.25;min-width:0}
#settingsSectionApiKeys .sym-ak-scope-name{font-size:13px;font-weight:600}
#settingsSectionApiKeys .sym-ak-scope-code{font-size:11px;opacity:.5;font-family:ui-monospace,Menlo,Consolas,monospace}
/* Footer: expiry + create button on one row */
#settingsSectionApiKeys .sym-ak-footer{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap;margin-top:4px}
#settingsSectionApiKeys .sym-ak-field--inline{margin-bottom:0}
#settingsSectionApiKeys .sym-ak-createbtn{height:40px;padding:0 20px;white-space:nowrap}
/* One-time key reveal */
#settingsSectionApiKeys .sym-ak-newkey{margin-top:16px;padding:14px 16px;border:1px solid #f0c36d;background:rgba(240,195,109,.12);border-radius:11px}
#settingsSectionApiKeys .sym-ak-newkey-label{font-size:12.5px;font-weight:600;margin-bottom:8px}
#settingsSectionApiKeys .sym-ak-newkey-row{display:flex;align-items:center;gap:10px}
#settingsSectionApiKeys .sym-ak-newkey-row code{flex:1;min-width:0;overflow:auto;padding:9px 11px;background:var(--surface,#fff);border:1px solid var(--line,#d7dce5);border-radius:8px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;white-space:nowrap}
/* Keys table */
#settingsSectionApiKeys .sym-ak-prefix{opacity:.5;font-size:11px;font-family:ui-monospace,Menlo,Consolas,monospace;margin-top:2px}
#settingsSectionApiKeys .sym-ak-scopes-cell{max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;opacity:.8}
#settingsSectionApiKeys .sym-btn--sm{padding:5px 12px;font-size:12px}
#settingsSectionApiKeys table{width:100%}
#settingsSectionApiKeys table td{vertical-align:middle}
/* Settings -> Zoho Sync (reuses the API Keys card styles) */
#settingsSectionZoho{display:block}
#settingsSectionZoho .sym-ak-card{max-width:820px;margin:0 0 18px;padding:20px 22px;background:var(--surface,#fff);border:1px solid var(--line,#e3e8ef);border-radius:14px;box-shadow:0 1px 2px rgba(16,24,40,.04)}
#settingsSectionZoho .sym-ak-card-head{margin-bottom:16px}
#settingsSectionZoho .sym-ak-card-title{font-size:16px;font-weight:700;color:inherit}
#settingsSectionZoho .sym-ak-card-sub{margin-top:4px;font-size:13px;opacity:.6;line-height:1.5}
#settingsSectionZoho .sym-ak-field{margin-bottom:16px}
#settingsSectionZoho .sym-ak-label{display:block;font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;opacity:.6;margin-bottom:8px}
#settingsSectionZoho .sym-ak-input{width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid var(--line,#d7dce5);border-radius:9px;font:inherit;font-size:14px;background:var(--surface,#fff);color:inherit}
#settingsSectionZoho .sym-ak-input:focus{outline:none;border-color:#7c6cf0;box-shadow:0 0 0 3px rgba(124,108,240,.15)}
#settingsSectionZoho .sym-ak-select{width:auto;min-width:150px;cursor:pointer}
#settingsSectionZoho .sym-ak-hint{margin-top:6px;font-size:12px;opacity:.55;line-height:1.4}
#settingsSectionZoho .sym-ak-scope-group{margin-bottom:14px}
#settingsSectionZoho .sym-ak-scope-group:last-child{margin-bottom:0}
#settingsSectionZoho .sym-ak-group-title{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;opacity:.5;margin:0 0 8px}
#settingsSectionZoho .sym-ak-scope-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
#settingsSectionZoho .sym-ak-scope{display:flex;align-items:center;gap:10px;margin:0;padding:9px 12px;border:1px solid var(--line,#e3e8ef);border-radius:9px;cursor:pointer;background:var(--surface,#fff);transition:border-color .12s,background .12s}
#settingsSectionZoho .sym-ak-scope:hover{border-color:#c7cdf7;background:rgba(124,108,240,.04)}
#settingsSectionZoho .sym-ak-scope input[type=checkbox]{width:16px!important;height:16px;min-width:16px;margin:0!important;flex:0 0 auto;accent-color:#7c6cf0;cursor:pointer}
#settingsSectionZoho .sym-ak-scope-text{display:flex;flex-direction:column;line-height:1.25;min-width:0}
#settingsSectionZoho .sym-ak-scope-name{font-size:13px;font-weight:600}
#settingsSectionZoho .sym-ak-scope-code{font-size:11px;opacity:.5;font-family:ui-monospace,Menlo,Consolas,monospace}
#settingsSectionZoho .sym-ak-footer{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap;margin-top:4px}
#settingsSectionZoho .sym-ak-field--inline{margin-bottom:0}
#settingsSectionZoho .sym-ak-createbtn{height:40px;padding:0 20px;white-space:nowrap}
#settingsSectionZoho .sym-ak-newkey{margin-top:16px;padding:14px 16px;border:1px solid #f0c36d;background:rgba(240,195,109,.12);border-radius:11px}
#settingsSectionZoho .sym-ak-newkey-label{font-size:12.5px;font-weight:600;margin-bottom:8px}
#settingsSectionZoho .sym-ak-newkey-row{display:flex;align-items:center;gap:10px}
#settingsSectionZoho .sym-ak-newkey-row code{flex:1;min-width:0;overflow:auto;padding:9px 11px;background:var(--surface,#fff);border:1px solid var(--line,#d7dce5);border-radius:8px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;white-space:nowrap}
#settingsSectionZoho .sym-ak-prefix{opacity:.5;font-size:11px;font-family:ui-monospace,Menlo,Consolas,monospace;margin-top:2px}
#settingsSectionZoho .sym-ak-scopes-cell{max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;opacity:.8}
#settingsSectionZoho .sym-btn--sm{padding:5px 12px;font-size:12px}
#settingsSectionZoho table{width:100%}
#settingsSectionZoho table td{vertical-align:middle}
#settingsSectionZoho .sym-ak-card{max-width:1100px}
#settingsSectionZoho .sym-zs-actions{white-space:nowrap;text-align:right}
#settingsSectionZoho .sym-zs-auto{display:inline-flex;align-items:center;gap:6px;font-size:13px}
#settingsSectionZoho .sym-zs-detail-row td{padding:0 0 10px;border-top:0}
#settingsSectionZoho .sym-zs-detail{font-size:13px;color:var(--muted,#5b6577);padding:4px 0 6px}
#settingsSectionZoho .sym-zs-detail table{margin-top:8px}
#settingsSectionZoho .sym-zs-warn{color:#b45309;margin-top:4px}
#settingsSectionZoho .sym-zs-ws{margin:10px 0 4px;max-width:360px}

/* ===== F-53 — bidirectional text (Hebrew / Arabic names mixed with numbers & parentheses) =====
   Text that comes from the user or from an imported file takes its base direction from its OWN
   first strong character (what dir="auto" does), so a Hebrew name that starts with a number or a
   bracket or contains a Latin word — "4000 - מכירות", "(רווח) לפני מס", "עמלות Stripe 2.9%" — no
   longer shows its numbers, parentheses and Latin words in the wrong place (checked in Chrome).
   - LTR text is unchanged: its first strong character is Latin, so it stays LTR exactly as before.
   - text-align:match-parent keeps every cell aligned with its column (a Hebrew name does not
     jump to the other edge); an explicit alignment rule on a cell still wins. Chromium computes
     the standard keyword to "start", which plaintext then flips per paragraph, so the
     -webkit-match-parent spelling follows it (Chromium/WebKit use it; Firefox drops it and keeps
     match-parent).
   - Every selector is wrapped in :where() (specificity 0), so no existing rule is overridden.
   - Amount / number columns (.right, .num, .amount, .breakdown-amt) are pinned LTR.
   Chat bubbles carry dir="auto" in their markup (symmetra-ai-copilot.js). */
:where(table.grid, table.report, table.mapping-table, table.sym-users-table, table.simple) :where(td):not(:where(.right, .num, .amount, .breakdown-amt)){
  unicode-bidi: plaintext;
  text-align: match-parent;
  text-align: -webkit-match-parent;
}
:where(table.grid, table.report, table.mapping-table, table.sym-users-table, table.simple) :where(th):not(:where(.right, .num, .amount, .breakdown-amt)){
  unicode-bidi: plaintext;
}
:where(table.grid, table.report, table.mapping-table, table.sym-users-table, table.simple) :where(td, th):where(.right, .num, .amount, .breakdown-amt){
  direction: ltr;
  unicode-bidi: isolate;
}
:where(.report-title, .company-overview-name, .workflow-company-name, .co-name-text, .sym-user-name, .sym-profile-dock__name, .sym-wm-name, .sym-wm-detail-title){
  unicode-bidi: plaintext;
  text-align: match-parent;
  text-align: -webkit-match-parent;
}

/* ===== F-08 — Settings → Report emails (same card look as API Keys / Zoho Sync) ===== */
#settingsSectionMail .sym-ak-card{max-width:820px;margin:0 0 18px;padding:20px 22px;background:var(--surface,#fff);border:1px solid var(--line,#e3e8ef);border-radius:14px;box-shadow:0 1px 2px rgba(16,24,40,.04)}
#settingsSectionMail .sym-ak-card-head{margin-bottom:16px}
#settingsSectionMail .sym-ak-card-title{font-size:16px;font-weight:700;color:inherit}
#settingsSectionMail .sym-ak-card-sub{margin-top:4px;font-size:13px;opacity:.6;line-height:1.5}
#settingsSectionMail .sym-ak-field{margin-bottom:16px;max-width:420px}
#settingsSectionMail .sym-ak-label{display:block;font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;opacity:.6;margin-bottom:8px}
#settingsSectionMail .sym-ak-input{width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid var(--line,#d7dce5);border-radius:9px;font:inherit;font-size:14px;background:var(--surface,#fff);color:inherit}
#settingsSectionMail .sym-ak-input:focus{outline:none;border-color:#7c6cf0;box-shadow:0 0 0 3px rgba(124,108,240,.15)}
#settingsSectionMail .sym-ak-input:disabled{opacity:.7;cursor:not-allowed}
#settingsSectionMail .sym-ak-select{cursor:pointer}
#settingsSectionMail .sym-ak-hint{margin-top:6px;font-size:12px;opacity:.6;line-height:1.4}
#settingsSectionMail .sym-ak-footer{display:flex;gap:12px;margin:4px 0 12px}
#settingsSectionMail .sym-mail-notice{margin:0 0 14px;padding:8px 12px;border-radius:9px;background:rgba(22,163,74,.1);color:#15803d;font-size:13px;font-weight:600}