/* ═══════════════════════════════════════════════════════════
   VISUVATE · INVOICE STUDIO — design system
   Brand: #4263FF · Onest (headings 600) · Geist (body)
   Brand constants are fixed; semantic tokens flip per theme.
   The invoice "paper" stays light in both themes (it's a document).
═══════════════════════════════════════════════════════════ */
:root{
  /* Brand constants — never themed */
  --blue:#4263FF; --blue-600:#2F4BE0; --blue-700:#2740c4;
  --black:#0A0A0A; --white:#FFFFFF;
  --gray-900:#161616; --gray-800:#222; --gray-700:#363636; --gray-600:#5A5A5A;
  --gray-500:#757575; --gray-400:#898989; --gray-300:#ABABAB; --gray-200:#D8D8D8;
  --gray-150:#E6E6E6; --gray-100:#F0F0F0; --gray-050:#FAFAFA;
  /* Accents (used individually) */
  --violet:#7A3DFF; --coral:#FF5A3D; --lime:#C8FF3D; --amber:#FFB840; --mint:#3DE8B0; --rose:#FF5C8A;

  /* Invoice-paper palette — always light (a document), inherited by the
     off-screen clone used for PDF export, so it must live on :root. */
  --pk:#5A5A5A; --pd:#161616; --pl:#898989; --pln:#E6E6E6; --pln2:#D8D8D8;

  --r-lg:14px; --r-md:10px; --r-sm:8px; --r-pill:999px;
  --head:'Onest',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --body:'Geist','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --rail-w:240px;
}

/* ── Light theme (default) ─────────────────────────────── */
:root, :root[data-theme="light"]{
  --bg:#F6F7F9; --surface:#FFFFFF; --surface-2:#FAFAFA; --surface-3:#F0F1F4;
  --border:#E6E6E6; --border-2:#D8D8D8;
  --text:#0A0A0A; --text-2:#5A5A5A; --text-3:#898989;
  --field-bg:#FFFFFF; --rail-bg:#FFFFFF; --rail-active:#EEF1FF;
  --ring:rgba(66,99,255,.14);
  --shadow-card:0 1px 2px rgba(10,10,10,.04), 0 8px 24px rgba(10,10,10,.05);
  --shadow-pop:0 12px 40px rgba(10,10,10,.16);
  --topbar-bg:rgba(246,247,249,.82);
  --sel:#EEF1FF;
  --arrow:%235A5A5A;
}
/* ── Dark theme ────────────────────────────────────────── */
:root[data-theme="dark"]{
  --bg:#0B0C0E; --surface:#151619; --surface-2:#1B1D21; --surface-3:#212429;
  --border:#282B31; --border-2:#33373F;
  --text:#F3F4F6; --text-2:#A6ABB4; --text-3:#787D86;
  --field-bg:#131417; --rail-bg:#0F1013; --rail-active:#1A1F33;
  --ring:rgba(66,99,255,.32);
  --shadow-card:0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.35);
  --shadow-pop:0 16px 50px rgba(0,0,0,.55);
  --topbar-bg:rgba(11,12,14,.78);
  --sel:#1F2740;
  --arrow:%23A6ABB4;
}

*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none !important}   /* the hidden attribute must always win over layout rules */
html,body{height:100%}
body{
  font-family:var(--body); color:var(--text); background:var(--bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; line-height:1.5;
  transition:background .3s var(--ease), color .3s var(--ease);
}
::selection{background:var(--sel)}
a{color:inherit;text-decoration:none}
.muted{color:var(--text-3)}
.eyebrow{font-family:var(--head);font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.ic{width:18px;height:18px;flex:none}

/* ── Buttons ───────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font-family:var(--head);font-weight:600;font-size:13px;
  padding:9px 15px;border-radius:var(--r-md);border:1px solid transparent;cursor:pointer;
  transition:background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease),transform .06s var(--ease);
  white-space:nowrap;user-select:none;
}
.btn:active{transform:translateY(1px)}
.btn .ic{width:16px;height:16px}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:var(--blue-600)}
.btn-ghost{background:transparent;color:var(--text-2);border-color:var(--border-2)}
.btn-ghost:hover{background:var(--surface-2);border-color:var(--text-3);color:var(--text)}
.btn-danger{background:var(--coral);color:#fff}
.btn-danger:hover{background:#e64828}
.btn-block{width:100%}
.btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--r-md);border:1px solid var(--border);background:var(--surface);color:var(--text-2);cursor:pointer;transition:all .16s var(--ease)}
.icon-btn:hover{color:var(--text);border-color:var(--border-2);background:var(--surface-2)}

/* ── Fields ────────────────────────────────────────────── */
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field > span, .field > label{font-size:11.5px;font-weight:500;color:var(--text-2);letter-spacing:.01em}
.field em{font-style:normal;color:var(--text-3);font-weight:400}
.grid{display:grid;gap:12px}
.grid-2{grid-template-columns:1fr 1fr}
.grid-3{grid-template-columns:1fr 1fr 1fr}
.span-2{grid-column:1 / -1}
.stack{display:flex;flex-direction:column;gap:16px}
input,textarea,select,.select{
  font-family:var(--body);font-size:14px;color:var(--text);background:var(--field-bg);
  border:1px solid var(--border-2);border-radius:var(--r-md);padding:10px 12px;width:100%;
  transition:border-color .16s var(--ease),box-shadow .16s var(--ease),background .16s var(--ease);
  -webkit-appearance:none;appearance:none;
}
textarea{resize:vertical;min-height:64px;line-height:1.5}
input::placeholder,textarea::placeholder{color:var(--text-3)}
input:hover,textarea:hover,select:hover{border-color:var(--text-3)}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--ring)}
select,.select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' stroke='var(--arrow)' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:34px;cursor:pointer;
}

/* Segmented control */
.seg{display:inline-flex;background:var(--surface-3);border-radius:var(--r-md);padding:3px;gap:2px}
.seg button{font-family:var(--head);font-weight:600;font-size:12.5px;color:var(--text-2);border:none;background:transparent;padding:6px 12px;border-radius:7px;cursor:pointer;transition:all .16s var(--ease);white-space:nowrap}
.seg button.on{background:var(--surface);color:var(--text);box-shadow:0 1px 2px rgba(0,0,0,.12)}

.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font-family:var(--head);font-weight:500;font-size:11.5px;color:var(--text-2);background:var(--surface-2);border:1px solid var(--border-2);border-radius:var(--r-pill);padding:5px 11px;cursor:pointer;transition:all .14s var(--ease)}
.chip:hover{border-color:var(--blue);color:var(--blue)}
.chip.on{background:var(--blue);border-color:var(--blue);color:#fff}
.check{display:flex;align-items:center;gap:9px;cursor:pointer;user-select:none;font-size:13.5px;color:var(--text);padding-top:2px}
.check input{appearance:none;-webkit-appearance:none;width:18px;height:18px;min-width:18px;padding:0;flex:none;border:1.5px solid var(--border-2);border-radius:4px;background:var(--field-bg);position:relative;cursor:pointer;transition:all .15s var(--ease)}
.check input:checked{background:var(--blue);border-color:var(--blue)}
.check input:checked::after{content:"";position:absolute;left:5px;top:1.5px;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}

/* ── Cards ─────────────────────────────────────────────── */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-card)}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px 0}
.card-head h2{font-family:var(--head);font-weight:600;font-size:15px;letter-spacing:-.01em;color:var(--text)}
.card-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:14px}
.hint{font-size:11.5px;color:var(--text-3);display:flex;align-items:center;gap:6px}
.hint .ic{width:13px;height:13px}
.alert{background:rgba(255,90,61,.1);border:1px solid rgba(255,90,61,.3);color:var(--coral);font-size:13px;font-weight:500;padding:11px 14px;border-radius:var(--r-md)}
.card.locked .card-body input{background:var(--surface-2);color:var(--text-2);cursor:default;border-color:var(--border)}
.lock-hint{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--text-3)}
.lock-hint .ic{width:12px;height:12px}

/* ═══ AUTH ═══════════════════════════════════════════════ */
body.auth{display:grid;place-items:center;min-height:100vh;padding:24px;
  background:radial-gradient(1200px 600px at 50% -10%, var(--rail-active), var(--bg) 60%)}
.auth-wrap{width:100%;max-width:400px;position:relative}
.auth-card{background:var(--surface);border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow-pop);padding:36px 32px 32px;text-align:center}
.auth-mark{width:40px;height:40px;color:var(--blue);margin:0 auto 18px}
.auth-mark svg{width:100%;height:100%;display:block}
.auth-title{font-family:var(--head);font-weight:600;font-size:24px;letter-spacing:-.02em;color:var(--text)}
.auth-sub{font-size:13.5px;color:var(--text-3);margin-top:6px;line-height:1.5}
.auth-form{margin-top:24px;display:flex;flex-direction:column;gap:14px;text-align:left}
.auth-form .btn{margin-top:6px;padding:12px}
.auth-theme{
  position:absolute;top:-58px;right:0;width:40px;height:40px;
  display:grid;place-items:center;border-radius:12px;
  background:var(--surface);border:1px solid var(--border);color:var(--text-2);
  box-shadow:var(--shadow-card);cursor:pointer;
  transition:color .18s var(--ease),border-color .18s var(--ease),transform .18s var(--ease);
}
.auth-theme:hover{color:var(--blue);border-color:var(--blue);transform:translateY(-1px)}
.auth-theme:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.auth-legal{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:20px;font-size:12px;color:var(--text-3)}
.auth-legal a{color:var(--text-3)}
.auth-legal a:hover{color:var(--blue)}
.auth-divider{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--text-3);font-size:12px}
.auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:var(--border)}
.google-btn{padding:12px;gap:10px}
.google-btn .ic{width:18px;height:18px;color:var(--blue)}

/* ═══ LEGAL PAGES ════════════════════════════════════════ */
body.legal{background:var(--bg);min-height:100vh}
.legal-wrap{max-width:760px;margin:0 auto;padding:36px 24px 90px}
.legal-head{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.legal-mark{width:30px;height:30px;color:var(--blue);flex:none}
.legal-mark svg{width:100%;height:100%;display:block}
.legal-brand{font-family:var(--head);font-weight:600;font-size:15px;color:var(--text)}
.legal-back{margin-left:auto;font-size:13px;color:var(--text-3)}
.legal-back:hover{color:var(--blue)}
.legal h1{font-family:var(--head);font-weight:600;font-size:32px;letter-spacing:-.02em;color:var(--text);margin-top:20px}
.legal-updated{color:var(--text-3);font-size:13px;margin-top:6px}
.legal-body{margin-top:28px}
.legal-body h2{font-family:var(--head);font-weight:600;font-size:18px;color:var(--text);margin-top:30px;margin-bottom:8px}
.legal-body p,.legal-body li{color:var(--text-2);font-size:15px;line-height:1.7}
.legal-body ul{margin:6px 0 6px 20px}
.legal-body li{margin:4px 0}
.legal-body a{color:var(--blue)}
.legal-note{margin-top:36px;padding:14px 16px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface-2);font-size:13px;color:var(--text-3)}

/* ═══ APP SHELL ══════════════════════════════════════════ */
body.app{min-height:100vh}
.rail{
  width:var(--rail-w);position:fixed;top:0;left:0;height:100vh;overflow-y:auto;
  background:var(--rail-bg);border-right:1px solid var(--border);
  display:flex;flex-direction:column;justify-content:space-between;padding:18px 14px;z-index:60;
}
.rail-brand{display:flex;align-items:center;gap:10px;padding:6px 8px 18px}
.rail-mark{width:26px;height:26px;color:var(--blue);flex:none}
.rail-mark svg{width:100%;height:100%;display:block}
.rail-nav{display:flex;flex-direction:column;gap:3px}
.rail-link{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:var(--r-md);color:var(--text-2);font-family:var(--head);font-weight:500;font-size:13.5px;cursor:pointer;border:none;background:transparent;width:100%;text-align:left;transition:all .15s var(--ease)}
.rail-link:hover{background:var(--surface-2);color:var(--text)}
.rail-link[aria-current="page"]{background:var(--rail-active);color:var(--blue);font-weight:600}
.rail-ic{width:19px;height:19px;flex:none;display:inline-flex}
.rail-ic .ic{width:19px;height:19px}
.rail-bottom{display:flex;flex-direction:column;gap:3px;border-top:1px solid var(--border);padding-top:12px}
.rail-user{display:flex;align-items:center;gap:10px;padding:8px 12px}
.rail-avatar{width:30px;height:30px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font-family:var(--head);font-weight:600;font-size:13px;flex:none}
.rail-who{display:flex;flex-direction:column;min-width:0}
.rail-who b{font-size:12.5px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rail-who small{font-size:11px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.main{min-width:0;display:flex;flex-direction:column;margin-left:var(--rail-w)}
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px clamp(18px,3vw,36px);background:var(--topbar-bg);backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--border)}
.topbar-title h1{font-family:var(--head);font-weight:600;font-size:21px;letter-spacing:-.02em;color:var(--text)}
.topbar-title p{font-size:12.5px;margin-top:2px}
.topbar-actions{display:flex;gap:10px;align-items:center}
.content{padding:clamp(18px,3vw,36px);max-width:1320px;width:100%;margin:0 auto;display:flex;flex-direction:column;gap:22px}
.content.narrow{max-width:860px}

.account-row{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.account-who{display:flex;flex-direction:column;min-width:0}
.account-who b{font-family:var(--head);font-weight:600;font-size:14px;color:var(--text)}
.account-who small{font-size:12px;color:var(--text-3)}
.signout-btn{align-self:flex-start}
.signout-btn .ic{color:var(--coral)}
.app-legal{display:flex;align-items:center;justify-content:center;gap:10px;padding:8px 0 4px;font-size:12px;color:var(--text-3)}
.app-legal a{color:var(--text-3)}
.app-legal a:hover{color:var(--blue)}

/* ── Stats ─────────────────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-card);padding:18px;display:flex;align-items:center;gap:14px}
.stat-ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;flex:none;background:var(--rail-active);color:var(--blue)}
.stat-ic .ic{width:20px;height:20px}
.stat:nth-child(2) .stat-ic{background:rgba(255,184,64,.16);color:var(--amber)}
.stat:nth-child(3) .stat-ic{background:rgba(61,232,176,.16);color:#12b981}
.stat:nth-child(4) .stat-ic{background:rgba(122,61,255,.14);color:var(--violet)}
.stat-body{display:flex;flex-direction:column;gap:3px;min-width:0}
.stat-k{font-size:12px;color:var(--text-3);white-space:nowrap}
.stat-v{font-family:var(--head);font-weight:600;font-size:22px;letter-spacing:-.02em;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── Toolbar ───────────────────────────────────────────── */
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.search{position:relative;flex:1;min-width:240px;max-width:420px}
.search .ic{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--text-3);width:17px;height:17px}
.search input{padding-left:38px}
.filters{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.filters .select{width:auto;min-width:130px}

/* ── Table ─────────────────────────────────────────────── */
.table-card{overflow:hidden;position:relative}
.table-scroll{overflow-x:auto}
.table{width:100%;border-collapse:collapse;font-size:13.5px}
.table thead th{text-align:left;font-family:var(--head);font-weight:600;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);padding:14px 16px;border-bottom:1px solid var(--border);white-space:nowrap;background:var(--surface-2)}
.table th.r,.table td.r{text-align:right}
.table tbody td{padding:14px 16px;border-bottom:1px solid var(--border);color:var(--text-2);vertical-align:middle;white-space:nowrap}
.table tbody tr{transition:background .13s var(--ease);cursor:pointer}
.table tbody tr:hover{background:var(--surface-2)}
.table tbody tr:last-child td{border-bottom:none}
.t-num{font-family:var(--head);font-weight:600;color:var(--text)}
.t-client{color:var(--text);font-weight:500}
.t-client small{display:block;color:var(--text-3);font-weight:400;font-size:11.5px}
.t-amt{font-variant-numeric:tabular-nums;color:var(--text);font-weight:500}
.badge{display:inline-flex;align-items:center;gap:5px;font-family:var(--head);font-weight:600;font-size:11px;padding:4px 10px;border-radius:var(--r-pill);letter-spacing:.01em}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.badge.draft{background:var(--surface-3);color:var(--text-2)}
.badge.sent{background:rgba(66,99,255,.12);color:var(--blue)}
.badge.paid{background:rgba(61,232,176,.15);color:#0fae76}
.badge.overdue{background:rgba(255,90,61,.13);color:var(--coral)}
.row-actions{display:flex;gap:4px;justify-content:flex-end}
.row-actions button{width:32px;height:32px;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--text-3);cursor:pointer;display:grid;place-items:center;transition:all .14s var(--ease)}
.row-actions button:hover{background:var(--surface-3);color:var(--text);border-color:var(--border)}
.row-actions .del:hover{color:var(--coral);border-color:rgba(255,90,61,.3);background:rgba(255,90,61,.08)}
.row-actions .ic{width:16px;height:16px}

.empty{padding:56px 24px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}
.empty-mark{width:40px;height:40px;color:var(--border-2)}
.empty-mark svg{width:100%;height:100%}
.empty h3{font-family:var(--head);font-weight:600;font-size:17px;color:var(--text)}
.empty .btn{margin-top:8px}
.table-loading{padding:40px;text-align:center;color:var(--text-3);font-size:13px}

/* ── Modal ─────────────────────────────────────────────── */
.modal{position:fixed;inset:0;background:rgba(10,10,12,.5);backdrop-filter:blur(3px);display:grid;place-items:center;z-index:200;padding:24px;animation:fade .18s var(--ease)}
.modal-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-pop);padding:26px;max-width:400px;width:100%;animation:pop .22s var(--spring)}
.modal-card h3{font-family:var(--head);font-weight:600;font-size:18px;color:var(--text)}
.modal-card p{margin-top:8px;font-size:13.5px}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}
@keyframes fade{from{opacity:0}}
@keyframes pop{from{opacity:0;transform:scale(.96) translateY(6px)}}

/* ── Theme toggle ──────────────────────────────────────── */
.theme-toggle{cursor:pointer}
.icon-btn.theme-toggle .ic,.auth-theme .ic{width:18px;height:18px}

/* ═══ EDITOR ═════════════════════════════════════════════ */
body.editor-page{padding-top:65px}   /* clears the fixed editor bar */
.etopbar{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px clamp(14px,3vw,28px);background:var(--topbar-bg);backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--border)}
.etop-left{display:flex;align-items:center;gap:12px;min-width:0}
.etop-mark{width:24px;height:24px;color:var(--blue);flex:none}
.etop-mark svg{width:100%;height:100%;display:block}
.etop-heading{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.etop-heading b{font-family:var(--head);font-weight:600;font-size:14px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.etop-heading span{font-size:11px}
.etop-right{display:flex;align-items:center;gap:10px;flex:none}
.statusseg button.on[data-status="paid"]{color:#0fae76}
.statusseg button.on[data-status="sent"]{color:var(--blue)}

.workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(16px,2.4vw,32px);max-width:1560px;margin:0 auto;padding:clamp(16px,2.4vw,32px);align-items:start}
.editor{display:flex;flex-direction:column;gap:16px;min-width:0}
.preview-col{position:sticky;top:89px;min-width:0}

.items{display:flex;flex-direction:column;gap:10px}
.item{border:1px solid var(--border);border-radius:var(--r-md);padding:12px;background:var(--surface-2);position:relative;transition:all .16s var(--ease)}
.item:hover{border-color:var(--border-2)}
.item-grid{display:grid;grid-template-columns:1fr 74px 118px 118px;gap:10px;align-items:end}
.item .desc{grid-column:1 / -1}
.item-amount{font-family:var(--head);font-weight:600;font-size:14px;color:var(--text);padding:10px 0;text-align:right;white-space:nowrap}
.item-remove{position:absolute;top:-9px;right:-9px;width:26px;height:26px;border-radius:50%;background:var(--surface);border:1px solid var(--border-2);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-3);opacity:0;transition:all .16s var(--ease);box-shadow:0 2px 6px rgba(0,0,0,.12)}
.item:hover .item-remove{opacity:1}
.item-remove:hover{color:var(--coral);border-color:rgba(255,90,61,.4)}
.item-remove svg{width:13px;height:13px}
.add-row{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;font-family:var(--head);font-weight:600;font-size:13px;color:var(--blue);background:var(--rail-active);border:1px dashed rgba(66,99,255,.4);border-radius:var(--r-md);padding:10px 14px;cursor:pointer;transition:all .16s var(--ease)}
.add-row:hover{border-color:var(--blue)}
.add-row .ic{width:15px;height:15px}
.amt-wrap{display:flex;flex-direction:column;gap:6px}
.amt-lbl{font-size:11.5px;color:var(--text-2)}

.summary-rows{display:flex;flex-direction:column;gap:9px}
.srow{display:flex;align-items:center;justify-content:space-between;gap:12px}
.srow .k{font-size:13px;color:var(--text-2)}
.srow .v{font-family:var(--head);font-weight:500;font-size:14px;color:var(--text);white-space:nowrap}
.srow.total{padding-top:11px;margin-top:3px;border-top:1px solid var(--border)}
.srow.total .k{font-family:var(--head);font-weight:600;font-size:15px;color:var(--text)}
.srow.total .v{font-weight:600;font-size:18px;color:var(--blue)}
.inline-adj{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}
.adj-value{display:flex;gap:8px;align-items:center}
.adj-value input{width:110px}
.mini{font-size:11px;color:var(--text-3)}

/* ── Preview paper (ALWAYS light — it's a document) ─────── */
.paper-wrap{display:flex;justify-content:center;overflow:hidden;padding:2px}
.paper-fit{overflow:hidden}
.paper-scale{transform-origin:top left;width:794px}
#paper{
  width:794px;min-height:1123px;background:#fff;color:#0A0A0A;
  padding:56px 56px 44px;box-shadow:var(--shadow-pop);border-radius:2px;
  display:flex;flex-direction:column;
}
.pv-top{display:flex;justify-content:space-between;align-items:flex-start;gap:32px}
.pv-logo-full{display:inline-flex;height:27px;color:var(--blue)}
.pv-logo-full svg{height:27px;width:auto;display:block}
.pv-meta{text-align:right}
.pv-meta .doc{font-family:var(--head);font-weight:600;font-size:27px;text-transform:uppercase;color:#0A0A0A;line-height:1}
.pv-sub{margin-top:12px;display:flex;flex-direction:column;gap:4px}
.pv-sub > div{font-size:12px;color:var(--pk);line-height:1.45}
.pv-sub > div b{font-weight:500;color:var(--pd)}
.pv-rule{height:1px;background:var(--pln2);margin:22px 0}
.pv-parties{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.pv-party .lbl{font-family:var(--head);font-weight:600;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin-bottom:6px}
.pv-party .nm{font-family:var(--head);font-weight:600;font-size:16px;color:#0A0A0A;letter-spacing:-.01em}
.pv-party .sub{font-size:13px;color:var(--pd);margin-top:2px}
.pv-party .dim{font-size:13px;color:var(--pk);margin-top:1px}
.pv-table{margin-top:30px;width:100%;border-collapse:collapse}
.pv-table thead th{background:var(--blue);color:#fff;font-family:var(--head);font-weight:600;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;padding:11px 14px;text-align:left}
.pv-table thead th.r{text-align:right}
.pv-table thead th:first-child{border-radius:4px 0 0 4px}
.pv-table thead th:last-child{border-radius:0 4px 4px 0}
.pv-table tbody td{padding:13px 14px;border-bottom:1px solid var(--pln);vertical-align:top;font-size:13.5px;color:var(--pd)}
.pv-table td.r{text-align:right;white-space:nowrap}
.pv-table .it-title{font-family:var(--head);font-weight:600;color:#0A0A0A;font-size:14px}
.pv-table .it-note{font-size:12.5px;color:var(--pk);margin-top:3px;white-space:pre-line}
.pv-table td.num{font-variant-numeric:tabular-nums;color:var(--pd)}
.pv-totals{margin-top:18px;display:flex;justify-content:flex-end}
.pv-totals .box{width:300px;display:flex;flex-direction:column;gap:9px}
.pv-totals .tr{display:flex;justify-content:space-between;gap:16px;font-size:13.5px}
.pv-totals .tr .k{color:var(--pk)}
.pv-totals .tr .v{font-variant-numeric:tabular-nums;color:var(--pd)}
.pv-totals .tr.grand{margin-top:6px;padding-top:12px;border-top:1px solid var(--pln2)}
.pv-totals .tr.grand .k{font-family:var(--head);font-weight:600;font-size:15px;color:#0A0A0A}
.pv-totals .tr.grand .v{font-family:var(--head);font-weight:600;font-size:19px;color:var(--blue)}
.pv-totals .tr.paid .v{color:#1a9d5a}
.pv-totals .tr.balance{padding-top:8px}
.pv-totals .tr.balance .k{font-weight:500;color:var(--pd)}
.pv-totals .tr.balance .v{font-family:var(--head);font-weight:600;color:#0A0A0A}
.pv-pay{margin-top:34px}
.pv-pay .lbl{font-family:var(--head);font-weight:600;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin-bottom:12px}
.pv-pay .rows{display:grid;grid-template-columns:150px 1fr;row-gap:8px;column-gap:16px}
.pv-pay .rows .k{font-size:12.5px;color:var(--pk)}
.pv-pay .rows .v{font-size:12.5px;color:#0A0A0A}
.pv-pay .rows .v.strong{font-family:var(--head);font-weight:600}
.pv-block{margin-top:18px}
.pv-block .k{font-family:var(--head);font-weight:600;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--pl);margin-bottom:4px}
.pv-block .t{font-size:12px;color:var(--pd);white-space:pre-line;line-height:1.55}
.pv-signoff{margin-top:24px;font-style:italic;color:var(--pk);font-size:13px;line-height:1.55}
.pv-fill{flex:1 1 auto;min-height:44px}   /* pushes footer down, but always keeps a gap */
.pv-foot{padding-top:26px;border-top:1px solid var(--pln2);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:11.5px;color:var(--pk)}
.pv-foot .f{font-family:var(--head);font-weight:500;letter-spacing:.02em}

/* ── Toast ─────────────────────────────────────────────── */
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(20px);background:var(--text);color:var(--bg);font-family:var(--head);font-weight:500;font-size:13px;padding:11px 18px;border-radius:var(--r-pill);box-shadow:var(--shadow-pop);opacity:0;pointer-events:none;transition:all .28s var(--ease);z-index:300;display:flex;align-items:center;gap:9px}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.err{background:var(--coral);color:#fff}

.mtabs{display:none}

/* ── Responsive ────────────────────────────────────────── */
@media (max-width:1080px){
  .rail{width:70px;padding:16px 10px}
  .main{margin-left:70px}
  .rail-label,.rail-who{display:none}
  .rail-brand{justify-content:center;padding:6px 0 16px}
  .rail-link{justify-content:center;padding:11px}
  .rail-user{justify-content:center;padding:8px 0}
  .stats{grid-template-columns:1fr 1fr}
  .workspace{grid-template-columns:1fr;gap:0}
  .preview-col{position:static;margin-top:16px}
  .mtabs{display:flex;position:sticky;top:65px;z-index:40;justify-content:center;padding:12px 16px;background:var(--topbar-bg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
  .pane{display:none}
  .pane.active{display:flex;flex-direction:column;gap:16px}
  .preview-col.pane{display:none}
  .preview-col.pane.active{display:block}
}

/* ── Phones: side rail becomes a bottom tab bar ────────── */
@media (max-width:640px){
  .rail{
    width:auto;height:auto;top:auto;bottom:0;left:0;right:0;overflow:visible;
    flex-direction:row;align-items:center;justify-content:space-around;
    padding:6px 6px;border-right:none;border-top:1px solid var(--border);
    box-shadow:0 -6px 24px rgba(0,0,0,.14);
  }
  /* Flatten the two groups so every item is one flex row we can order */
  .rail-top,.rail-bottom,.rail-nav{display:contents}
  .rail-brand,.rail-user{display:none}
  /* Equal-width cells keep the centre button truly centred */
  .rail-link{flex-direction:column;gap:3px;padding:6px 4px;font-size:10px;flex:1 1 0;min-width:0}
  .rail-label{display:block;font-size:10px;font-weight:500}
  .rail-ic .ic{width:21px;height:21px}
  /* Order items with Dashboard in the middle */
  .rail-link[data-nav="new"]{order:1}
  .rail-link[data-nav="team"]{order:2}
  .rail-link[data-nav="dashboard"]{order:3}
  .rail-link[data-nav="settings"]{order:4}
  .rail-link[data-nav="theme"]{order:5}
  /* Dashboard = raised centre button (grid keeps the icon perfectly centred) */
  .rail-link[data-nav="dashboard"]{
    display:grid;place-items:center;gap:0;
    background:var(--blue);color:#fff;width:56px;height:56px;border-radius:50%;
    padding:0;margin-top:-22px;flex:0 0 56px;
    box-shadow:0 8px 20px rgba(66,99,255,.45);
  }
  .rail-link[data-nav="dashboard"][aria-current="page"]{background:var(--blue);color:#fff}
  .rail-link[data-nav="dashboard"] .rail-label{display:none}
  /* icon box must match the icon exactly, or it overflows off-centre */
  .rail-link[data-nav="dashboard"] .rail-ic{display:grid;place-items:center;line-height:0;width:25px;height:25px}
  .rail-link[data-nav="dashboard"] .rail-ic .ic{width:25px;height:25px}
  .main{margin-left:0}

  .stats{grid-template-columns:1fr 1fr;gap:12px}
  .stat{padding:14px}
  .stat-v{font-size:19px}
  .grid-2,.grid-3{grid-template-columns:1fr}
  .item-grid{grid-template-columns:1fr 1fr}
  .item-grid .desc{grid-column:1 / -1}
  .etop-heading{display:none}
  .btn .label{display:none}
  .topbar-title h1{font-size:18px}
  .topbar{padding:14px 16px}
  /* Clearance for the fixed bottom nav must live on the in-flow container:
     html/body are height:100%, so body padding never moves overflowing content. */
  .content{padding:16px;padding-bottom:calc(92px + env(safe-area-inset-bottom))}
  .content.narrow{padding-bottom:calc(92px + env(safe-area-inset-bottom))}
  .search{min-width:0;max-width:none;flex:1 1 100%}
  .filters{width:100%;justify-content:space-between}
  .filters .select{flex:1}
  /* Trim low-priority columns per table — never the Actions column.
     Invoices: hide Issued(3), Due(4), Balance(6). */
  #invoiceTable thead th:nth-child(3),#invoiceTable tbody td:nth-child(3),
  #invoiceTable thead th:nth-child(4),#invoiceTable tbody td:nth-child(4),
  #invoiceTable thead th:nth-child(6),#invoiceTable tbody td:nth-child(6){display:none}
  /* Team: hide Role(3) and Last sign-in(5); keep Access(4) and Actions(6). */
  #teamTable thead th:nth-child(3),#teamTable tbody td:nth-child(3),
  #teamTable thead th:nth-child(5),#teamTable tbody td:nth-child(5){display:none}
  /* Tighten so the remaining columns fit without sideways scrolling */
  .table{font-size:12.5px}
  .table thead th,.table tbody td{padding:11px 5px}
  .table thead th{font-size:10px;letter-spacing:.04em}
  .table .t-num{font-size:12px}
  .table .t-client{max-width:86px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .table .t-client small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .badge{padding:3px 8px;font-size:10.5px}
  .row-actions button{width:28px;height:28px}
}
@media print{
  .rail,.etopbar,.mtabs,.editor,.topbar,.toast{display:none !important}
  body{background:#fff}
  .workspace{display:block;padding:0;max-width:none}
  .preview-col{position:static}
  .paper-wrap{overflow:visible}
  #paper{box-shadow:none;width:auto;min-height:auto}
  .paper-scale{transform:none !important}
}