/* ─────────────────────────────────────────────────────────────
   WEBSCULPT — billing app theme
   Palette, type and the chunky sticker button are taken verbatim
   from websculpt.com.au: warm cream canvas, paper surfaces, coral
   accent, Fraunces display over Inter body.
   ───────────────────────────────────────────────────────────── */
:root{
  --cream:#F6F3EC;
  --paper:#FDFBF5;
  --ink:#1B1610;
  --ink-70:rgba(27,22,16,.72);
  --ink-50:rgba(27,22,16,.52);
  --ink-30:rgba(27,22,16,.30);
  --ink-12:rgba(27,22,16,.12);
  --coral:#F4502A;
  --coral-deep:#D63C18;
  --coral-soft:#FCD9CF;
  --mint:#2FBC71;
  --mint-soft:#D9F2E4;
  --sun:#F3B73E;
  --dark:#17130D;
  --cream-on-dark:#F3EEE3;

  /* aliases so older rules keep working */
  --bg:var(--cream);
  --surface:var(--paper);
  --muted:var(--ink-70);
  --faint:var(--ink-50);
  --border:var(--ink-12);
  --border-strong:var(--ink-30);
  --accent:var(--coral);
  --danger:var(--coral-deep);

  --radius:18px;
  --radius-lg:28px;
  --font-display:'Fraunces',Georgia,serif;
  --font-sans:'Inter',-apple-system,'Segoe UI',sans-serif;
  --font-mono:'Inter',-apple-system,'Segoe UI',sans-serif;
}
*{box-sizing:border-box}
body{margin:0;font:15px/1.6 var(--font-sans);background:var(--cream);color:var(--ink);
  -webkit-font-smoothing:antialiased}
a{color:var(--ink);text-decoration:none;border-bottom:1px solid transparent;transition:.2s}
a:hover{border-bottom-color:var(--coral)}
h1,h2,.brand-name,.card-value,.doc-title,.doc-wordmark{font-family:var(--font-display);font-weight:600}
.mono{font-family:var(--font-sans);font-variant-numeric:tabular-nums}
.muted{color:var(--ink-70)}
.small{font-size:12.5px}
.strong{font-weight:600}
.lede-sm{margin:-10px 0 22px;max-width:62ch}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;
  background:var(--ink-12);padding:1px 6px;border-radius:5px}

/* ── Top bar ── */
.topbar{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;
  padding:14px 28px;border-bottom:1px solid var(--ink-12);background:rgba(246,243,236,.88);
  backdrop-filter:blur(12px);position:sticky;top:0;z-index:10}
.brand{display:flex;align-items:center;gap:10px}
.brand:hover{border-bottom-color:transparent}
.brand-logo{height:30px;width:30px;display:block}
.brand-name{font-size:18px;letter-spacing:.01em}
.brand-sub{font-size:11px;letter-spacing:.25em;text-transform:uppercase;color:var(--ink-50)}
.topbar nav{display:flex;gap:2px;flex-wrap:wrap}
.topbar nav a{color:var(--ink-70);padding:7px 14px;border-radius:999px;font-size:14px;border-bottom:none}
.topbar nav a:hover{color:var(--ink);background:var(--ink-12)}
.topbar nav a.active{background:var(--ink);color:var(--cream);font-weight:600}
.topbar nav a.nav-logout{color:var(--ink-50)}

.container{max-width:1060px;margin:36px auto;padding:0 22px}
h1{font-size:32px;letter-spacing:-.02em;margin:0 0 22px}
h2{font-size:19px;margin:30px 0 12px;letter-spacing:-.01em}
.panel h2:first-child{margin-top:0}
.page-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;gap:14px;flex-wrap:wrap}
.page-head h1{margin:0}
.app-foot{margin:56px 0 8px;padding-top:18px;border-top:1px solid var(--ink-12);
  color:var(--ink-50);font-size:12.5px;letter-spacing:.03em}

/* ── Flash & notices ── */
.flash{background:var(--mint-soft);border:1px solid rgba(47,188,113,.4);color:#17743F;
  padding:12px 16px;border-radius:var(--radius);margin-bottom:22px;font-size:14px}
.flash-error{background:var(--coral-soft);border-color:rgba(214,60,24,.4);color:var(--coral-deep)}
.notice{padding:14px 18px;border-radius:var(--radius);margin-bottom:18px;font-size:14px;line-height:1.65}
.notice-warn{background:#FBEBCB;border:1px solid var(--sun);color:#6B4703}

/* ── Cards ── */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:26px}
.card{background:var(--paper);border:1px solid var(--ink-12);border-radius:var(--radius);
  padding:20px 22px;transition:.2s}
.card:hover{border-color:var(--ink-30);transform:translateY(-2px)}
.card-link{display:block}
.card-link:hover{border-bottom-color:var(--ink-30)}
.card-accent{border-color:var(--coral);box-shadow:0 4px 0 var(--coral-soft)}
.card-label{color:var(--ink-50);font-size:11.5px;text-transform:uppercase;letter-spacing:.14em;font-weight:600}
.card-value{font-size:30px;margin-top:8px;letter-spacing:-.02em}
.card-note{font-size:12px;color:var(--ink-50);margin-top:2px}

/* ── Panels & forms ── */
.panel{background:var(--paper);border:1px solid var(--ink-12);border-radius:var(--radius);
  padding:24px;margin-bottom:22px}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.form-grid label{display:flex;flex-direction:column;gap:6px;font-size:11.5px;font-weight:600;
  text-transform:uppercase;letter-spacing:.1em;color:var(--ink-50)}
.form-grid .span-2{grid-column:span 2}
@media (max-width:620px){.form-grid .span-2{grid-column:auto}}
.check-label{flex-direction:row!important;align-items:center;gap:9px;text-transform:none;
  letter-spacing:0;font-size:14px;font-weight:400;color:var(--ink)}
input,select,textarea{font:400 14.5px var(--font-sans);padding:10px 13px;border-radius:11px;
  border:1px solid var(--ink-30);background:var(--paper);color:var(--ink);width:100%;
  transition:.16s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--coral);
  box-shadow:0 0 0 3px var(--coral-soft)}
input[type=checkbox]{width:auto;accent-color:var(--coral);height:17px}
.form-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:18px;grid-column:1/-1}
.quick-actions{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.filter-bar{display:flex;gap:16px;align-items:flex-end;flex-wrap:wrap;margin-bottom:18px}
.filter-bar label{display:flex;flex-direction:column;gap:6px;font-size:11.5px;font-weight:600;
  text-transform:uppercase;letter-spacing:.1em;color:var(--ink-50)}

/* ── Buttons — the site's chunky sticker treatment ── */
.btn{display:inline-block;font:500 14px var(--font-sans);padding:9px 18px;
  border:1px solid var(--ink-30);border-radius:999px;background:var(--paper);color:var(--ink);
  cursor:pointer;transition:.18s;text-align:center;width:auto}
.btn:hover{background:var(--ink-12);border-color:var(--ink);transform:translateY(-1px);
  border-bottom-color:var(--ink)}
.btn-primary{background:var(--coral);border-color:var(--coral);color:#fff;font-weight:600;
  box-shadow:0 4px 0 var(--coral-deep)}
.btn-primary:hover{background:var(--coral);border-color:var(--coral);
  box-shadow:0 2px 0 var(--coral-deep);transform:translateY(2px)}
.btn-danger{color:var(--coral-deep);border-color:rgba(214,60,24,.35);background:var(--paper)}
.btn-danger:hover{background:var(--coral-soft);border-color:var(--coral-deep)}
.btn-small{padding:5px 13px;font-size:13px}
.btn-block{width:100%;text-align:center;padding:12px}

/* ── Tables ── */
.table{width:100%;border-collapse:collapse;background:var(--paper);
  border:1px solid var(--ink-12);border-radius:var(--radius);overflow:hidden}
.table th{background:rgba(27,22,16,.04);text-align:left;font-size:11px;text-transform:uppercase;
  letter-spacing:.12em;color:var(--ink-50);font-weight:600;padding:11px 14px}
.table td{padding:12px 14px;border-top:1px solid var(--ink-12);vertical-align:middle}
.table tr:hover td{background:rgba(27,22,16,.02)}
.table .right{text-align:right}
.table .center{text-align:center}
.table td{font-variant-numeric:tabular-nums}
.row-inactive td{opacity:.55}
.owed{color:var(--coral-deep);font-weight:600}
.row-actions{display:flex;gap:6px;flex-wrap:wrap;align-items:center;justify-content:flex-end}
.row-actions form{display:inline}
.status-form{display:flex;gap:8px;align-items:center}
.status-form select{width:auto;padding:4px 8px;font-size:12.5px}
.tag-manual{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-50);
  border:1px solid var(--ink-30);border-radius:999px;padding:1px 7px;margin-left:6px;font-weight:500}

/* ── Badges ── */
.badge{display:inline-block;padding:3px 12px;border-radius:999px;font-size:11.5px;font-weight:600;
  white-space:nowrap}
.badge-draft{background:var(--ink-12);color:var(--ink-70)}
.badge-sent{background:#E4EEF6;color:#1A5A8A}
.badge-accepted,.badge-paid{background:var(--mint-soft);color:#17743F}
.badge-declined{background:var(--coral-soft);color:var(--coral-deep)}
.badge-overdue{background:#FBEBCB;color:#8A5A05}

/* ── Modal dialogs ──
   Native <dialog> renders in the top layer, so .table{overflow:hidden}
   can't clip it the way it clipped the old absolutely-positioned pop-outs. */
dialog.modal{border:1px solid var(--ink-12);border-radius:var(--radius);padding:0;
  width:min(380px,calc(100vw - 32px));background:var(--paper);color:var(--ink);
  box-shadow:0 24px 60px rgba(27,22,16,.22)}
dialog.modal::backdrop{background:rgba(27,22,16,.38);backdrop-filter:blur(2px)}
dialog.modal form{display:flex;flex-direction:column;gap:14px;padding:24px;text-align:left}
dialog.modal h3{font-family:var(--font-display);font-weight:600;font-size:18px;margin:0;
  letter-spacing:-.01em}
dialog.modal .modal-sub{margin:-6px 0 0;font-size:13px;color:var(--ink-70);line-height:1.55}
dialog.modal label{display:flex;flex-direction:column;gap:6px;font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.1em;color:var(--ink-50)}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:4px}
@media (max-width:640px){
  .modal-actions{flex-direction:column-reverse}
  .modal-actions .btn{width:100%}
}

/* ── Items editor / totals ── */
.items-table input{margin:0}
.col-qty{width:90px}.col-price{width:140px}.col-gst{width:60px}.col-line{width:120px}
.line-total{font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.totals{margin:18px 0 0 auto;max-width:320px;display:flex;flex-direction:column;gap:8px;font-size:15px}
.totals>div{display:flex;justify-content:space-between;color:var(--ink-70)}
.totals strong{font-variant-numeric:tabular-nums;color:var(--ink);font-weight:600}
.totals .grand{font-size:20px;border-top:2px solid var(--ink);padding-top:10px;color:var(--ink)}
.totals .grand strong{font-size:22px}
.commission-note{margin-top:16px;padding:12px 18px;background:var(--coral-soft);
  border-radius:12px;color:var(--ink);font-size:14px}

/* ── Login ── */
.login-body{min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:var(--cream);position:relative;overflow:hidden}
.login-glow{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 45% at 50% 25%,var(--coral-soft) 0%,transparent 65%)}
.login-card{position:relative;width:100%;max-width:410px;margin:20px;background:var(--paper);
  border:1px solid var(--ink-12);border-radius:var(--radius-lg);padding:40px 36px;
  box-shadow:0 18px 44px rgba(27,22,16,.10)}
.login-logo{height:44px;width:44px;margin-bottom:16px;display:block}
.login-tag{font-size:10.5px;letter-spacing:.28em;color:var(--ink-50);margin-bottom:10px;font-weight:600}
.login-card h1{font-size:26px;margin:0 0 20px}
.login-card label{display:flex;flex-direction:column;gap:7px;font-size:11.5px;color:var(--ink-50);
  text-transform:uppercase;letter-spacing:.1em;font-weight:600;margin-bottom:16px}
.login-error{background:var(--coral-soft);border:1px solid rgba(214,60,24,.4);color:var(--coral-deep);
  padding:10px 14px;border-radius:11px;font-size:13.5px;margin-bottom:18px}
.login-foot{margin-top:26px;text-align:center;font-size:11.5px;color:var(--ink-50);letter-spacing:.06em}

/* ── Printable document ── */
.doc-view{background:var(--cream)}
.toolbar{max-width:840px;margin:22px auto 0;padding:0 16px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.toolbar form{display:inline}
.toolbar-flash{max-width:840px;margin:12px auto 0}
.doc-sheet{background:var(--paper);color:var(--ink);max-width:840px;margin:16px auto 48px;
  padding:52px 56px;box-shadow:0 18px 50px rgba(27,22,16,.12);border-radius:var(--radius);
  font-family:var(--font-sans)}
.doc-header{display:flex;justify-content:space-between;gap:28px;
  border-bottom:3px solid var(--ink);padding-bottom:22px}
.doc-brand{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.doc-logo{height:40px;width:40px}
.doc-wordmark{font-size:23px;letter-spacing:.01em}
.doc-biz-sub{font-size:12px;color:var(--ink-50);margin-bottom:8px;max-width:38ch}
.doc-header .mono{font-size:13px}
.doc-meta{text-align:right}
.doc-title{font-size:28px;letter-spacing:.04em;color:var(--coral)}
.doc-number{font-size:16px;font-weight:600;margin:6px 0}
.doc-billto{margin:26px 0}
.doc-label{font-size:11px;text-transform:uppercase;letter-spacing:.16em;color:var(--ink-50);
  margin-bottom:5px;font-weight:600}
.doc-items{background:var(--paper);border:1px solid var(--ink-12);border-radius:12px}
.doc-items th{background:rgba(27,22,16,.04)}
.doc-items tr:hover td{background:transparent}
.doc-totals{margin:20px 0 0 auto;max-width:300px;display:flex;flex-direction:column;gap:6px}
.doc-totals>div{display:flex;justify-content:space-between;color:var(--ink-70)}
.doc-totals .mono{color:var(--ink)}
.doc-totals .grand{font-size:19px;font-weight:700;border-top:2px solid var(--ink);
  padding-top:9px;color:var(--ink)}
.doc-notes{margin-top:28px;color:var(--ink-70)}
.doc-payment{margin-top:28px;background:var(--cream);border:1px solid var(--ink-12);
  border-radius:14px;padding:18px 22px}
.pay-cols{display:grid;grid-template-columns:1.35fr 1fr .85fr;gap:18px;margin-top:8px}
@media (max-width:640px){.pay-cols{grid-template-columns:1fr}}
.pay-head{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;margin-bottom:4px}
.pay-strong{font-weight:600;font-size:14px;overflow-wrap:anywhere}
.pay-note{font-size:12px;color:var(--ink-50);margin-top:3px}
.pay-table{border-collapse:collapse;width:auto}
.pay-table td{padding:2px 16px 2px 0;font-size:13.5px;color:var(--ink-70)}
.pay-table td.mono{color:var(--ink)}
.doc-thanks{margin-top:30px;text-align:center;font-family:var(--font-display);
  font-weight:500;color:var(--ink-50);font-size:14px;letter-spacing:.02em}
.doc-sheet .muted{color:var(--ink-50)}

@media print{
  .no-print{display:none!important}
  body,.doc-view{background:#fff}
  .doc-sheet{box-shadow:none;margin:0;max-width:none;padding:12px 0;border-radius:0;background:#fff}
  .topbar{display:none}
}
@media (max-width:640px){
  .doc-sheet{padding:28px 20px}
  .doc-header{flex-direction:column}
  .doc-meta{text-align:left}
  .brand-sub{display:none}
  .row-actions{justify-content:flex-start}
}