/* ============================================================
   DESIGN NOTE (v2 revamp)
   Subject: Indian small-business account ledgers + official GST paperwork.
   Signature element: a rotated red ink-stamp seal (the "ख" mark) — the
   thing every Indian business owner has seen on stamped invoices, cheques,
   and register books their whole life. It replaces the old plain gold
   square icon everywhere the brand mark appears (sidebar + login).
   Palette: deep ledger-green + brass (value/premium accent) + stamp-red
   (authenticity accent) + cool paper (not cream/terracotta).
   Type: Spectral (serif, document authority) for headings, JetBrains Mono
   for all figures/invoice numbers (ledger digit feel), system sans for UI
   chrome. Restraint: the stamp + gate ledger-line texture are the one bold
   move; everything else stays quiet and disciplined.
   ============================================================ */
:root{
  --ink: #14231e;
  --ink-soft: #3d4e46;
  --paper: #f3f5ee;
  --paper-raised: #fbfcf8;
  --emerald: #0b4f3c;
  --emerald-dark: #082f22;
  --emerald-tint: #e4efe9;
  --brass: #a9791f;
  --brass-light: #e4c980;
  --stamp-red: #a03a2c;
  --stamp-red-soft: #c4574a;
  --rule: #d9ddc9;
  --rule-strong: #b9c0a8;
  --danger: #a4342a;
  --danger-tint: #f5e4e1;
  --paid: #2f7d4f;
  --paid-tint: #e3efe6;
  --partial: #9a6a13;
  --partial-tint: #faf0da;
  --overdue: #8f2a20;
  --overdue-tint: #f7e3df;
  --shadow: 0 8px 24px rgba(20,35,30,0.08);
  --shadow-lg: 0 20px 50px rgba(8,25,18,0.28);
  --radius: 10px;
  font-size: 16px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background: var(--paper);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3{
  font-family: "Spectral", Georgia, serif;
  color: var(--emerald-dark);
  margin: 0;
  letter-spacing: -0.012em;
}
h1{font-size: 1.9rem; font-weight: 600;}
h2{font-size: 1.2rem; font-weight: 600;}
h3.section-title{font-size: 1.05rem; margin: 28px 0 12px; color: var(--emerald-dark); border-bottom: 1px solid var(--rule); padding-bottom: 8px;}
.mono, input, select, textarea, .stat-value, .data-table td, .amount-words, #invoiceNumberDisplay{
  font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
}
.eyebrow{
  font-family: "JetBrains Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass);
  font-weight: 600;
  margin-bottom: 4px;
}
.muted{color: var(--ink-soft); font-size: 0.9rem;}
:focus-visible{outline: 2px solid var(--emerald); outline-offset: 2px;}

/* ============================================================
   Signature element — the ink-stamp seal (used at every brand mark)
   ============================================================ */
.stamp-mark{
  position: relative;
  display:flex; align-items:center; justify-content:center;
  border-radius: 50%;
  border: 2px solid var(--stamp-red);
  color: var(--stamp-red);
  font-family: "Spectral", serif;
  font-weight: 700;
  background: transparent;
  transform: rotate(-7deg);
  flex-shrink: 0;
}
.stamp-mark::before{
  content:"";
  position:absolute; inset: 3px;
  border: 1px solid var(--stamp-red);
  border-radius: 50%;
  opacity: 0.55;
}
.stamp-mark, .brand-mark, .brand-mark-lg{
  position: relative;
  display:flex; align-items:center; justify-content:center;
  border-radius: 50%;
  border: 2px solid var(--stamp-red);
  color: var(--stamp-red);
  font-family: "Spectral", serif;
  font-weight: 700;
  background: transparent;
  transform: rotate(-7deg);
  flex-shrink: 0;
}
.stamp-mark::before, .brand-mark::before, .brand-mark-lg::before{
  content:"";
  position:absolute; inset: 3px;
  border: 1px solid var(--stamp-red);
  border-radius: 50%;
  opacity: 0.55;
}
.brand-mark{ /* small stamp, used in sidebar */
  width:38px; height:38px; font-size:1.15rem;
}
.brand-mark-lg{ /* large stamp, used on the login gate */
  width:58px; height:58px; font-size:1.7rem;
  margin: 0 auto 14px;
}

/* ============================================================
   Auth gate — full-screen login/signup
   ============================================================ */
.auth-gate{
  display:none; position:fixed; inset:0; z-index:1000;
  background: var(--paper);
}
.auth-gate.active{display:grid; grid-template-columns: 1.15fr 1fr;}

/* Left: marketing/ledger panel */
.auth-gate-panel{
  position:relative; overflow:hidden;
  background: linear-gradient(160deg, var(--emerald) 0%, var(--emerald-dark) 100%);
  display:flex; align-items:center; justify-content:center;
  padding: 60px 56px;
}
.gate-ledger-lines{
  position:absolute; inset:0; pointer-events:none;
  background: repeating-linear-gradient(180deg,
    rgba(255,255,255,0.05) 0px, rgba(255,255,255,0.05) 1px,
    transparent 1px, transparent 32px);
}
.gate-watermark{
  position:absolute; right:-30px; bottom:-90px;
  font-family:"Spectral",serif; font-weight:700;
  font-size:28rem; line-height:1; color: rgba(255,255,255,0.045);
  pointer-events:none; user-select:none;
}
.gate-panel-content{position:relative; z-index:1; max-width:400px; text-align:left;}
.gate-panel-content .brand-mark-lg{margin:0 0 22px; background:#fff;}
.gate-panel-content .gate-brand-name{color:#fff; text-align:left; margin-bottom:10px;}
.gate-tagline{
  font-family:"Spectral",serif; font-size:1.35rem; font-weight:500;
  line-height:1.42; color:#fff; margin: 0 0 30px;
}
.gate-feature-list{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:15px;}
.gate-feature-list li{position:relative; padding-left:28px; font-size:0.92rem; color:#cfe0d5; line-height:1.4;}
.gate-feature-list li::before{
  content:"✓"; position:absolute; left:0; top:0;
  color: var(--brass-light); font-weight:700;
}

/* Right: the actual login/signup form */
.auth-gate-formside{
  display:flex; align-items:center; justify-content:center; padding:24px;
  background: var(--paper);
}
.gate-mobile-mark{display:none;}
.auth-gate-card{
  background: var(--paper-raised); border-radius: 16px; padding:40px 34px;
  width:100%; max-width:384px; text-align:center; box-shadow: var(--shadow-lg);
  border: 1px solid rgba(8,25,18,0.06);
  animation: gateRise 0.35s ease;
}
@keyframes gateRise{ from{opacity:0; transform:translateY(10px) scale(0.98);} to{opacity:1; transform:translateY(0) scale(1);} }
.gate-brand-name{
  font-family:"Spectral",serif; font-weight:700; font-size:1.2rem; color: var(--emerald-dark);
  margin-bottom:20px; letter-spacing:-0.01em;
}
.auth-gate-card h1{font-size:1.1rem; font-weight:600; margin-bottom:20px; color: var(--ink);}
.auth-gate-card .field{text-align:left; margin-bottom:14px;}
.gate-error{color: var(--danger); font-size:0.8rem; min-height:1.1em; text-align:left; margin-top:-6px; margin-bottom:6px;}
#gateOfflineNotice code{background: var(--emerald-tint); padding:1px 5px; border-radius:4px; font-family:"JetBrains Mono",monospace;}
#gateOfflineNotice .link-btn{font-weight:700; text-decoration:underline;}

@media (max-width: 860px){
  .auth-gate.active{display:flex; flex-direction:column; overflow-y:auto;}
  .auth-gate-panel{display:none;}
  .auth-gate-formside{flex:1; min-height:100vh;}
  .gate-mobile-mark{display:flex;}
}

/* ============================================================
   App shell
   ============================================================ */
.app-shell{display:flex; min-height:100vh;}
.sidebar{
  width: 252px;
  flex-shrink:0;
  background: linear-gradient(180deg, var(--emerald) 0%, var(--emerald-dark) 100%);
  color: #eef4ef;
  display:flex;
  flex-direction:column;
  padding: 22px 14px;
  position: sticky;
  top:0;
  height:100vh;
  overflow-y:auto;
}
.brand{display:flex; align-items:center; gap:11px; padding: 4px 8px 22px;}
.brand-text{display:flex; flex-direction:column; line-height:1.15;}
.brand-name{font-family:"Spectral",serif; font-weight:700; font-size:1.12rem;}
.brand-sub{font-size:0.68rem; letter-spacing:0.09em; text-transform:uppercase; color: var(--brass-light);}

.nav{display:flex; flex-direction:column; gap:1px; flex:1;}
.nav-item{
  display:flex; align-items:center; gap:10px;
  background:none; border:none; border-left: 3px solid transparent;
  text-align:left; color: #cfe0d5; font-size:0.92rem; font-weight:500;
  padding:10px 11px; border-radius:0 8px 8px 0; cursor:pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.nav-ic{width:16px; text-align:center; color: var(--brass-light); font-size:0.9rem;}
.nav-item:hover{background: rgba(255,255,255,0.07);}
.nav-item.active{background: rgba(255,255,255,0.1); color:#fff; border-left-color: var(--brass);}
.nav-item.active .nav-ic{color:#fff;}

/* business switcher (populated by business.js) */
.biz-switcher-wrap{
  display:flex; flex-direction:column; gap:7px;
  padding: 12px 10px 14px; margin: 8px 2px 0;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.biz-switcher-wrap select{
  width:100%; padding:7px 9px; border-radius:7px; border:1px solid rgba(255,255,255,0.2);
  background: rgba(0,0,0,0.18); color:#eef4ef; font-size:0.82rem;
}
.biz-switcher-wrap .link-btn{color: var(--brass-light); text-align:left; font-size:0.8rem;}
#currentRoleChip{color:#a9c2b3;}
#noBusinessNotice{
  padding: 10px 12px; margin: 8px 2px 0; font-size:0.78rem; line-height:1.4;
  border-top: 1px solid rgba(255,255,255,0.12); color:#b7cabe;
}

.sidebar-foot{margin-top:16px;}
.sync-status{
  display:flex; align-items:center; gap:7px;
  font-size:0.74rem; color:#a9c2b3; padding:0 2px 10px;
}
.sync-dot{
  width:7px; height:7px; border-radius:50%; background: var(--paid);
  box-shadow: 0 0 0 3px rgba(47,125,79,0.25);
  transition: background 0.2s, box-shadow 0.2s;
  flex-shrink:0;
}
.sync-status.offline .sync-dot{background: var(--danger); box-shadow: 0 0 0 3px rgba(164,52,42,0.25);}
.sync-status.offline #syncStatusText{color: var(--danger-tint);}
.auth-chip{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  font-size:0.76rem; color:#dce8e0; padding:6px 2px 12px;
  border-bottom:1px solid rgba(255,255,255,0.12); margin-bottom:10px;
}
.auth-link-btn{
  background:none; border:none; color: var(--brass-light); font-weight:700;
  cursor:pointer; font-size:0.76rem; padding:2px 4px;
}
.plan-chip{
  font-size:0.72rem; color: var(--brass-light);
  background: rgba(0,0,0,0.2);
  padding:9px 11px; border-radius:8px; margin-bottom:8px;
  font-family:"JetBrains Mono",monospace;
  border: 1px solid rgba(255,255,255,0.08);
}
.upgrade-btn{
  width:100%; padding:10px; border:1px solid var(--brass);
  background: transparent; color: var(--brass-light);
  border-radius:8px; font-weight:600; cursor:pointer; font-size:0.85rem;
  transition: background 0.15s, transform 0.15s;
}
.upgrade-btn:hover{background: rgba(169,121,31,0.22); transform: translateY(-1px);}

.topbar{display:none;}

.main{flex:1; padding: 32px 40px; max-width: 1180px;}

/* ===== View sections ===== */
.view{display:none;}
.view.active{display:block; animation: fadeIn 0.25s ease;}
@keyframes fadeIn{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);}}

.view-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  margin-bottom:24px; gap:16px; flex-wrap:wrap;
}
.head-actions{display:flex; gap:10px;}

/* ===== Buttons ===== */
.btn{
  font-family: inherit; font-size:0.88rem; font-weight:600;
  padding:10px 18px; border-radius:8px; cursor:pointer;
  border:1px solid transparent; transition: all 0.15s;
}
.btn.primary{background: var(--emerald); color:#fff;}
.btn.primary:hover{background: var(--emerald-dark); transform: translateY(-1px);}
.btn.ghost{background: var(--paper-raised); border-color: var(--rule-strong); color: var(--emerald-dark);}
.btn.ghost:hover{border-color: var(--emerald); background: var(--emerald-tint);}
.btn.small{padding:7px 12px; font-size:0.8rem;}
.btn.danger-text{color: var(--danger); background:none; border:none; padding:4px 6px;}
.btn:disabled{opacity:0.5; cursor:not-allowed; transform:none !important;}
.link-btn{background:none; border:none; color: var(--emerald); font-weight:600; cursor:pointer; font-size:0.85rem;}
.file-btn{display:inline-flex; align-items:center; justify-content:center;}

/* ===== Stat cards ===== */
.stat-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:16px; margin-bottom:28px;}
.stat-card{
  background: var(--paper-raised); border:1px solid var(--rule);
  border-radius: var(--radius); padding:18px 20px;
  display:flex; flex-direction:column; gap:6px;
  transition: transform 0.15s, box-shadow 0.15s;
}
.stat-card:hover{transform: translateY(-2px); box-shadow: var(--shadow);}
.stat-card.accent{border-color: var(--brass); background: linear-gradient(135deg, #fff, var(--emerald-tint));}
.stat-label{font-size:0.78rem; color: var(--ink-soft); text-transform:uppercase; letter-spacing:0.05em;}
.stat-value{font-size:1.5rem; font-weight:600; color: var(--emerald-dark);}

/* ===== Panels ===== */
.panel{
  background: var(--paper-raised); border:1px solid var(--rule);
  border-radius: var(--radius); padding:24px; margin-bottom:24px;
  box-shadow: var(--shadow);
}
.panel-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:14px;}
.panel-title{margin-bottom:16px;}

/* ===== Tables — ledger-register style: horizontal rules, no cell borders ===== */
.table-wrap{overflow-x:auto;}
.data-table{width:100%; border-collapse:collapse; font-size:0.88rem;}
.data-table thead th{
  text-align:left; font-family:"JetBrains Mono",monospace; font-size:0.7rem;
  text-transform:uppercase; letter-spacing:0.06em; color: var(--brass);
  border-bottom:2px solid var(--emerald); padding:8px 10px; white-space:nowrap;
}
.data-table tbody td{
  padding:11px 10px; border-bottom:1px solid var(--rule); vertical-align:middle;
}
.data-table tbody tr:hover{background: var(--emerald-tint);}
.status-pill{
  padding:3px 10px; border-radius:20px; font-size:0.72rem; font-weight:700;
  font-family:"JetBrains Mono",monospace; letter-spacing:0.03em; text-transform:uppercase;
  display:inline-block;
}
.status-pill.paid{background: var(--paid-tint); color: var(--paid);}
.status-pill.unpaid{background: var(--danger-tint); color: var(--danger);}
.status-pill.partial{background: var(--partial-tint); color: var(--partial);}
.status-pill.overdue{background: var(--overdue-tint); color: var(--overdue);}

.empty-state{text-align:center; padding:40px 20px; color: var(--ink-soft);}
.checkbox-row{display:flex; align-items:center; gap:8px; font-size:0.85rem; color: var(--ink-soft); margin: 4px 0 14px; cursor:pointer;}
.checkbox-row input{width:auto;}
.stock-low{color: var(--danger); font-weight:700;}

/* ===== Forms ===== */
.form-row{margin-bottom:16px;}
.form-row.two-col{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.field{display:flex; flex-direction:column; gap:6px;}
.field label{font-size:0.78rem; font-weight:600; color: var(--ink-soft);}
input[type="text"], input[type="date"], input[type="month"], input[type="number"],
input[type="email"], input[type="password"], input[type="file"], select, textarea{
  padding:9px 12px; border:1px solid var(--rule-strong); border-radius:7px;
  font-size:0.9rem; background:#fff; color: var(--ink); width:100%;
}
textarea{min-height:70px; font-family:inherit; resize:vertical;}
input:focus, select:focus, textarea:focus{outline:2px solid var(--emerald); outline-offset:1px; border-color: var(--emerald);}
.filter-row{display:flex; gap:12px; margin-bottom:16px; flex-wrap:wrap; align-items:center;}
.filter-row input, .filter-row select{width:auto; min-width:180px;}
.inline-label{display:flex; align-items:center; gap:8px; font-size:0.8rem; font-weight:600; color: var(--ink-soft);}
.inline-label input{width:auto;}
#bizLogoPreview{display:none; max-height:60px; margin-bottom:6px; border-radius:6px; border:1px solid var(--rule);}
#bizGstinMsg{font-size:0.78rem; margin-top:2px;}

/* ===== Invoice builder ===== */
.items-table input, .items-table select{padding:6px 8px; font-size:0.85rem;}
.items-table td:nth-child(3), .items-table td:nth-child(4), .items-table td:nth-child(5){width:90px;}
.line-amount{font-weight:600; color: var(--emerald-dark);}
.remove-line{background:none; border:none; color: var(--danger); cursor:pointer; font-size:1rem;}

.invoice-summary{display:grid; grid-template-columns: 1.3fr 1fr; gap:28px; margin-top:24px;}
.summary-notes textarea{min-height:110px;}
.summary-notes label{font-size:0.78rem; font-weight:600; color: var(--ink-soft); display:block; margin-bottom:6px;}
.summary-totals{background: var(--emerald-tint); border-radius:8px; padding:16px 20px; border:1px solid var(--rule);}
.total-row{display:flex; justify-content:space-between; padding:6px 0; font-size:0.9rem;}
.total-row.grand{border-top:2px solid var(--emerald); margin-top:6px; padding-top:10px; font-weight:700; font-size:1.1rem; color: var(--emerald-dark);}
.amount-words{margin-top:12px; font-size:0.76rem; color: var(--ink-soft); font-style:italic; border-top:1px dashed var(--rule-strong); padding-top:10px;}

/* ===== Modal ===== */
.modal-overlay{
  display:none; position:fixed; inset:0; background: rgba(20,35,30,0.5);
  align-items:center; justify-content:center; z-index:100; padding:20px;
  backdrop-filter: blur(1.5px);
}
.modal-overlay.active{display:flex;}
.modal{
  background:#fff; border-radius:var(--radius); padding:26px;
  width:100%; max-width:440px; box-shadow: var(--shadow-lg);
  max-height: 90vh; overflow-y:auto;
  animation: gateRise 0.2s ease;
}
.modal.wide{max-width:760px;}
.modal h2{margin-bottom:16px;}
.modal .field{margin-bottom:14px;}
.modal-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:18px;}

/* ===== Toast ===== */
.toast{
  position:fixed; bottom:24px; left:50%; transform: translateX(-50%) translateY(20px);
  background: var(--emerald-dark); color:#fff; padding:12px 22px; border-radius:8px;
  font-size:0.88rem; font-weight:500; opacity:0; pointer-events:none;
  transition: all 0.25s; z-index:200; box-shadow: var(--shadow);
}
.toast.show{opacity:1; transform: translateX(-50%) translateY(0);}

/* ===== Responsive ===== */
@media (max-width: 900px){
  .app-shell{flex-direction:column;}
  .sidebar{
    position:fixed; left:-260px; top:0; height:100vh; z-index:90;
    transition: left 0.2s; width:250px;
  }
  .sidebar.open{left:0; box-shadow: 0 0 30px rgba(0,0,0,0.3);}
  .topbar{
    display:flex; align-items:center; gap:14px; padding:14px 18px;
    background: var(--emerald); color:#fff; position:sticky; top:0; z-index:80;
  }
  .hamburger{background:none; border:none; color:#fff; font-size:1.3rem; cursor:pointer;}
  .topbar-title{font-family:"Spectral",serif; font-weight:600; font-size:1.1rem;}
  .main{padding:20px 16px;}
  .stat-grid{grid-template-columns:1fr 1fr;}
  .form-row.two-col{grid-template-columns:1fr;}
  .invoice-summary{grid-template-columns:1fr;}
  h1{font-size:1.5rem;}
}
@media (max-width:520px){
  .stat-grid{grid-template-columns:1fr;}
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .view.active, .auth-gate-card, .modal{animation:none;}
  *{transition:none !important;}
}

/* ============================================================
   Dark mode — toggled via [data-theme="dark"] on <html>
   Redefines the paper/ink/rule tokens; brand colors (emerald, brass,
   status colors) stay recognizable in both themes since they're the
   "ink stamp" identity, not a light/dark surface.
   ============================================================ */
:root[data-theme="dark"]{
  --ink: #e7ede8;
  --ink-soft: #9fb3a6;
  --paper: #101d18;
  --paper-raised: #16261f;
  --emerald-tint: #1b3327;
  --brass-light: #f0d38a;
  --rule: #26392f;
  --rule-strong: #3a5344;
  --danger-tint: #3a2320;
  --paid-tint: #163829;
  --partial-tint: #3a2e14;
  --overdue-tint: #3a2320;
  --shadow: 0 8px 24px rgba(0,0,0,0.45);
  --shadow-lg: 0 24px 60px rgba(0,0,0,0.6);
}
:root[data-theme="dark"] input[type="text"],
:root[data-theme="dark"] input[type="date"],
:root[data-theme="dark"] input[type="month"],
:root[data-theme="dark"] input[type="number"],
:root[data-theme="dark"] input[type="email"],
:root[data-theme="dark"] input[type="password"],
:root[data-theme="dark"] input[type="file"],
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea{
  background: var(--paper-raised); color: var(--ink); border-color: var(--rule-strong);
}
:root[data-theme="dark"] .modal{background: var(--paper-raised); color: var(--ink);}
:root[data-theme="dark"] .stat-card.accent{background: linear-gradient(135deg, var(--paper-raised), var(--emerald-tint));}
:root[data-theme="dark"] .data-table tbody tr:hover{background: var(--emerald-tint);}
:root[data-theme="dark"] .auth-gate-formside{background: var(--paper);}
:root[data-theme="dark"] .btn.ghost{background: var(--paper-raised);}
:root[data-theme="dark"] #gateOfflineNotice code{background: var(--emerald-tint); color: var(--ink);}
:root[data-theme="dark"] .summary-totals{background: var(--emerald-tint);}

/* Theme toggle switch (sidebar) */
.theme-toggle{
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 2px; margin-bottom:8px; font-size:0.76rem; color:#a9c2b3;
}
.theme-toggle button{
  background: rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.15);
  color:#eef4ef; border-radius:20px; padding:4px 12px; font-size:0.74rem;
  cursor:pointer; font-weight:600; transition: background 0.15s;
}
.theme-toggle button:hover{background: rgba(255,255,255,0.16);}

/* Analytics: 2-up chart grid that properly collapses on small screens */
.analytics-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media (max-width:700px){
  .analytics-grid{grid-template-columns:1fr;}
}