/* FiscalTrack — stylesheet
   Institutional green and warm neutrals. DM Sans for text, DM Mono for money.
   Brand colours are injected per tenant as --brand / --sb-start / --sb-end.
   -------------------------------------------------------------------------- */

:root {
  --green-900:#0d3320; --green-800:#1a6b4a; --green-700:#2d9e71;
  --green-100:#e8f5ee; --green-50:#f4faf7;
  --navy-800:#0c447c;  --navy-100:#e6f1fb;
  --amber-800:#854f0b; --amber-100:#faeeda;
  --red-800:#a32d2d;   --red-100:#fcebeb;

  --gray-900:#1a1a1a; --gray-800:#2c2c2a; --gray-600:#5f5e5a;
  --gray-400:#888780; --gray-200:#d3d1c7; --gray-100:#f1efe8;
  --gray-50:#f8f7f4;  --white:#ffffff;

  --brand:var(--green-800);
  --brand-accent:var(--green-700);
  --sb-start:var(--green-900);
  --sb-end:var(--green-800);

  --font-sans:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'DM Mono','SFMono-Regular',Menlo,monospace;

  --radius-sm:4px; --radius-md:8px; --radius-lg:12px;
  --shadow-sm:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --shadow-md:0 4px 12px rgba(0,0,0,.08);
  --shadow-lg:0 12px 32px rgba(0,0,0,.12);

  --sidebar-width:236px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;background:var(--gray-50);color:var(--gray-900);
  font-family:var(--font-sans);font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{font-weight:700;letter-spacing:-.015em;margin:0}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
.icon{flex:none;display:block}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--brand);color:#fff;padding:10px 16px}
.skip:focus{left:0}
:where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:2px solid var(--brand-accent);outline-offset:2px;border-radius:var(--radius-sm)}

/* ── layout ───────────────────────────────────────────────────────────── */

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

.sidebar{
  width:var(--sidebar-width);flex:none;
  background:linear-gradient(170deg,var(--sb-start),var(--sb-end));
  color:rgba(255,255,255,.82);
  display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;
}

.brand{display:flex;align-items:center;gap:11px;padding:18px 16px;color:#fff}
.brand:hover{text-decoration:none}
.brand-mark{
  width:38px;height:38px;border-radius:var(--radius-md);flex:none;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.14);
  display:grid;place-items:center;font-weight:700;font-size:14px;letter-spacing:.02em;
}
.brand-text{display:grid;line-height:1.3;min-width:0}
.brand-text strong{font-size:15px}
.brand-text small{font-size:11.5px;color:rgba(255,255,255,.6);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.nav-scroll{flex:1;overflow-y:auto;padding:4px 10px 12px}
.nav-section{
  font-size:10.5px;font-weight:500;letter-spacing:.11em;text-transform:uppercase;
  color:rgba(255,255,255,.42);padding:14px 8px 6px;
}
.nav{display:grid;gap:1px}
.nav-item{
  display:flex;align-items:center;gap:10px;padding:9px 10px;
  border-radius:var(--radius-md);color:rgba(255,255,255,.82);font-size:14px;
  transition:background .13s ease,color .13s ease;
}
.nav-item:hover{background:rgba(255,255,255,.09);color:#fff;text-decoration:none}
.nav-item.is-active{background:rgba(255,255,255,.16);color:#fff;font-weight:500}

.sb-user{
  display:flex;align-items:center;gap:10px;padding:12px 16px;
  border-top:1px solid rgba(255,255,255,.12);color:#fff;
}
.sb-user:hover{background:rgba(255,255,255,.07);text-decoration:none}
.sb-user-text{display:grid;line-height:1.3;min-width:0}
.sb-user-text strong{font-size:13.5px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-user-text small{font-size:11px;color:rgba(255,255,255,.6)}
.avatar{
  width:32px;height:32px;border-radius:50%;flex:none;
  background:rgba(255,255,255,.2);display:grid;place-items:center;
  font-size:12.5px;font-weight:700;
}

.main{flex:1;min-width:0}
.page{max-width:1120px;margin:0 auto;padding:28px 30px 72px}

.menu-toggle{
  display:none;position:sticky;top:10px;z-index:20;margin:10px 0 0 12px;
  width:40px;height:40px;border:1px solid var(--gray-200);border-radius:var(--radius-md);
  background:var(--white);color:var(--gray-600);cursor:pointer;place-items:center;
}

/* ── page header ──────────────────────────────────────────────────────── */

.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:22px;flex-wrap:wrap}
.page-head h1{font-size:27px;margin-bottom:3px}
.page-head p{margin:0;color:var(--gray-400);font-size:14.5px}
.head-actions{display:flex;gap:9px;flex-wrap:wrap}

.backlink{display:inline-flex;align-items:center;gap:7px;color:var(--gray-600);font-size:13.5px;margin-bottom:12px}
.backlink:hover{color:var(--brand);text-decoration:none}

.section-title{font-size:11.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--gray-600)}

/* ── stat cards ───────────────────────────────────────────────────────── */

.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:20px}
.stat{
  border-radius:var(--radius-lg);padding:16px 18px;border:1px solid var(--gray-200);
  background:var(--white);min-height:104px;display:grid;align-content:space-between;
  box-shadow:var(--shadow-sm);
}
.stat-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.stat-label{font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--gray-600)}
.stat-value{font-family:var(--font-mono);font-size:27px;font-weight:500;letter-spacing:-.02em}
.stat-chip{width:30px;height:30px;border-radius:var(--radius-md);display:grid;place-items:center}

.stat--income{background:var(--green-50);border-color:#cfe8dc}
.stat--income .stat-value{color:var(--green-800)}
.stat--income .stat-chip{background:var(--green-100);color:var(--green-700)}

.stat--expense{background:#fdf6f6;border-color:#f2dada}
.stat--expense .stat-value{color:var(--red-800)}
.stat--expense .stat-chip{background:var(--red-100);color:var(--red-800)}

.stat--balance{background:#f5f9fd;border-color:#d8e6f4}
.stat--balance .stat-value{color:var(--navy-800)}
.stat--balance .stat-chip{background:var(--navy-100);color:var(--navy-800)}
.stat--balance.is-negative .stat-value{color:var(--red-800)}

/* ── cards & tables ───────────────────────────────────────────────────── */

.card{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:hidden}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 20px;border-bottom:1px solid var(--gray-100)}
.card-count{font-size:12.5px;color:var(--gray-400)}
.card-body{padding:20px}
.stack{display:grid;gap:16px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}

.table-scroll{overflow-x:auto}
table.data{width:100%;border-collapse:collapse;font-size:14px}
table.data th{
  text-align:left;font-size:10.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gray-400);padding:10px 12px;background:var(--gray-50);
  border-bottom:1px solid var(--gray-100);white-space:nowrap;
}
table.data td{padding:12px;border-bottom:1px solid var(--gray-100);color:var(--gray-800);vertical-align:middle}
table.data tbody tr:last-child td{border-bottom:0}
table.data tbody tr:hover{background:var(--gray-50)}
th.right,td.right{text-align:right}
th.first,td.first{padding-left:20px}
th.last,td.last{padding-right:20px}

.row-title{display:flex;align-items:center;gap:9px;color:var(--gray-900);font-weight:500}
.dot{width:8px;height:8px;border-radius:50%;flex:none}
.dot--income{background:var(--green-700)}
.dot--expense{background:#d0605f}

.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.amt--income{color:var(--green-800);font-weight:500}
.amt--expense{color:var(--red-800);font-weight:500}
.muted{color:var(--gray-400)}
.seq{font-family:var(--font-mono);font-size:12px;color:var(--gray-400)}

.chip{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:99px;background:var(--gray-100);color:var(--gray-600);font-size:12px;white-space:nowrap}
.chip-dot{width:6px;height:6px;border-radius:50%}
.chip--ok{background:var(--green-100);color:var(--green-800)}
.chip--warn{background:var(--amber-100);color:var(--amber-800)}
.chip--bad{background:var(--red-100);color:var(--red-800)}
.chip--info{background:var(--navy-100);color:var(--navy-800)}
.chip--void{background:var(--gray-100);color:var(--gray-400);text-decoration:line-through}

tr.is-void td{opacity:.55}

/* ── filters ──────────────────────────────────────────────────────────── */

.filterbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.pill{
  display:inline-flex;align-items:center;gap:7px;padding:7px 15px;border-radius:99px;
  border:1px solid var(--gray-200);background:var(--white);color:var(--gray-600);
  font-size:13.5px;cursor:pointer;transition:all .13s ease;
}
.pill:hover{border-color:var(--gray-400);color:var(--gray-900);text-decoration:none}
.pill.is-active{background:var(--green-900);border-color:var(--green-900);color:#fff}
.pill-dot{width:7px;height:7px;border-radius:50%}

/* ── forms ────────────────────────────────────────────────────────────── */

.form-card{max-width:660px}
.form-grid{display:grid;gap:15px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.field{display:grid;gap:5px}
.field>label{font-size:12.5px;color:var(--gray-600);font-weight:500}
.req{color:var(--red-800)}

.input,select.input,textarea.input{
  width:100%;padding:10px 12px;border:1px solid var(--gray-200);border-radius:var(--radius-md);
  background:var(--white);color:var(--gray-900);font:inherit;transition:border-color .13s,box-shadow .13s;
}
.input::placeholder{color:#b5b3aa}
.input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(26,107,74,.13)}
.input.has-error{border-color:var(--red-800)}
textarea.input{min-height:84px;resize:vertical}
select.input{
  appearance:none;padding-right:32px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23888780' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;
}
.input.mono{font-family:var(--font-mono)}
.field-error{font-size:12px;color:var(--red-800)}
.field-hint{font-size:12px;color:var(--gray-400)}

.toggle{display:grid;grid-template-columns:1fr 1fr;background:var(--gray-100);border-radius:var(--radius-md);padding:3px;gap:3px}
.toggle input{position:absolute;opacity:0;pointer-events:none}
.toggle label{text-align:center;padding:8px;border-radius:var(--radius-sm);font-size:14px;font-weight:500;color:var(--gray-600);cursor:pointer;transition:all .13s}
.toggle input:checked+label{background:var(--white);box-shadow:var(--shadow-sm)}
.toggle input#kind-income:checked+label{color:var(--green-800)}
.toggle input#kind-expense:checked+label{color:var(--red-800)}

.check-row{display:flex;align-items:flex-start;gap:9px;font-size:14px;color:var(--gray-800)}
.check-row input{margin-top:3px;accent-color:var(--brand)}

.form-actions{display:flex;gap:9px;align-items:center;margin-top:4px;flex-wrap:wrap}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:10px 17px;border-radius:var(--radius-md);border:1px solid transparent;
  font:inherit;font-weight:500;cursor:pointer;transition:all .13s;
}
.btn:hover{text-decoration:none}
.btn--primary{background:var(--brand);color:#fff}
.btn--primary:hover{background:var(--green-900)}
.btn--ghost{background:var(--white);border-color:var(--gray-200);color:var(--gray-600)}
.btn--ghost:hover{border-color:var(--gray-400);color:var(--gray-900)}
.btn--danger{background:var(--white);border-color:#e5c5c5;color:var(--red-800)}
.btn--danger:hover{background:var(--red-100)}
.btn--sm{padding:6px 12px;font-size:13px}
.btn--wide{flex:1}

.icon-btn{border:0;background:none;padding:6px;border-radius:var(--radius-sm);color:var(--gray-400);cursor:pointer;display:inline-grid;place-items:center}
.icon-btn:hover{color:var(--red-800);background:var(--red-100)}

/* ── flashes & callouts ───────────────────────────────────────────────── */

.flash{padding:11px 15px;border-radius:var(--radius-md);margin-bottom:16px;font-size:14px;border:1px solid}
.flash--success{background:var(--green-100);border-color:#c6e5d5;color:var(--green-900)}
.flash--error{background:var(--red-100);border-color:#f0d2d2;color:var(--red-800)}

.callout{padding:14px 16px;border-radius:var(--radius-md);border:1px solid;display:flex;gap:11px;align-items:flex-start;font-size:14px}
.callout--ok{background:var(--green-50);border-color:#cfe8dc;color:var(--green-900)}
.callout--warn{background:#fdfaf3;border-color:#eddfc4;color:var(--amber-800)}
.callout--bad{background:#fdf6f6;border-color:#f0d2d2;color:var(--red-800)}
.callout strong{display:block;margin-bottom:2px}

.upsell{
  border:1px dashed #b9d6c8;background:var(--green-50);border-radius:var(--radius-lg);
  padding:24px;display:grid;gap:8px;justify-items:start;
}
.upsell .icon{color:var(--brand)}
.upsell h2{font-size:19px}
.upsell p{margin:0;color:var(--gray-600)}

.empty{text-align:center;padding:48px 24px;display:grid;gap:9px;justify-items:center}
.empty-mark{width:48px;height:48px;border-radius:var(--radius-lg);background:var(--green-100);color:var(--brand);display:grid;place-items:center}
.empty h2{font-size:17px;margin-top:4px}
.empty p{margin:0;color:var(--gray-400);max-width:46ch}

/* ── verification-specific ────────────────────────────────────────────── */

.variance{font-family:var(--font-mono);font-size:26px;font-weight:500}
.variance--ok{color:var(--green-800)}
.variance--bad{color:var(--red-800)}

.count-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:16px}
.count-box{border:1px solid var(--gray-200);border-radius:var(--radius-md);padding:14px;background:var(--white)}
.count-box .label{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gray-400);display:block;margin-bottom:4px}
.count-box .value{font-family:var(--font-mono);font-size:20px;font-weight:500}

.sig-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.sig{border:1px solid var(--gray-200);border-radius:var(--radius-md);padding:14px;background:var(--gray-50)}
.sig .label{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gray-400)}
.sig .name{font-weight:500;margin-top:3px}
.sig .when{font-size:12.5px;color:var(--gray-400)}

.hashline{font-family:var(--font-mono);font-size:11.5px;color:var(--gray-400);word-break:break-all}

/* ── charts ───────────────────────────────────────────────────────────── */

.chart-box{position:relative;height:280px;margin-top:4px}
.legend{display:flex;flex-wrap:wrap;gap:13px;justify-content:center;margin-top:10px;font-size:12.5px;color:var(--gray-600)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:10px;height:10px;border-radius:3px}

/* ── plan matrix ──────────────────────────────────────────────────────── */

.tier-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:20px}
.tier{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-lg);padding:18px;display:grid;gap:5px;align-content:start}
.tier.is-current{border-color:var(--brand);box-shadow:0 0 0 3px rgba(26,107,74,.1)}
.tier h3{font-size:17px}
.tier .price{font-family:var(--font-mono);font-size:24px;font-weight:500}
.tier .price small{font-size:12.5px;color:var(--gray-400);font-family:var(--font-sans)}
.tier p{margin:0;font-size:13px;color:var(--gray-400)}
.tier .badge{justify-self:start;margin-top:5px;font-size:10.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;background:var(--green-100);color:var(--green-800);padding:3px 8px;border-radius:var(--radius-sm)}

table.matrix{width:100%;border-collapse:collapse;font-size:13.5px}
table.matrix th,table.matrix td{padding:10px 12px;border-bottom:1px solid var(--gray-100);text-align:center}
table.matrix th:first-child,table.matrix td:first-child{text-align:left}
table.matrix thead th{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gray-400)}
.tick{color:var(--green-700);font-weight:700}
.cross{color:var(--gray-200)}

/* ── login / installer ────────────────────────────────────────────────── */

.body--bare{display:grid;place-items:center;min-height:100vh;padding:24px;background:linear-gradient(170deg,var(--green-900),var(--green-800))}
.bare-wrap{width:100%;max-width:420px}
.login-card{background:var(--white);border-radius:var(--radius-lg);padding:28px;box-shadow:var(--shadow-lg)}
.login-brand{display:flex;align-items:center;gap:11px;margin-bottom:20px}
.login-brand .brand-mark{background:var(--brand);color:#fff;border:0}
.login-brand strong{display:block;font-size:16px}
.login-brand small{color:var(--gray-400);font-size:12.5px}

.setup{max-width:640px;margin:40px auto;padding:0 20px 60px}
.setup .card{margin-bottom:16px}
.step-list{display:grid;gap:10px;counter-reset:s;padding:0;margin:0;list-style:none}
.step-list li{display:flex;gap:11px;align-items:flex-start;font-size:14px;color:var(--gray-600)}
.step-list li::before{
  counter-increment:s;content:counter(s);
  width:22px;height:22px;border-radius:50%;flex:none;
  background:var(--green-100);color:var(--green-800);
  display:grid;place-items:center;font-size:11.5px;font-weight:700;
}
.check-list{display:grid;gap:7px;padding:0;margin:0;list-style:none;font-size:14px}
.check-list li{display:flex;gap:9px;align-items:flex-start}
.ok-mark{color:var(--green-700);font-weight:700}
.bad-mark{color:var(--red-800);font-weight:700}

/* ── responsive & print ───────────────────────────────────────────────── */

@media (max-width:920px){
  .stats,.form-row,.grid-2,.count-grid,.sig-grid{grid-template-columns:1fr}
  .tier-grid{grid-template-columns:1fr}
  .page{padding:20px 16px 60px}
  .menu-toggle{display:grid}
  .sidebar{position:fixed;z-index:30;left:0;top:0;transform:translateX(-100%);transition:transform .2s ease;box-shadow:var(--shadow-lg)}
  .sidebar.is-open{transform:none}
  .page-head h1{font-size:23px}
}

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

@media print{
  .sidebar,.menu-toggle,.filterbar,.btn,.icon-btn,.head-actions{display:none !important}
  body{background:#fff}
  .card{box-shadow:none;border-color:#ccc;break-inside:avoid}
  .page{max-width:none;padding:0}
}