/* app.css — component styles: login, tabs, KPIs, form, receivables,
   chart, ledger, reports, tables, modals. */

/* ---------- login ---------- */
.login-screen{min-height:80vh;display:flex;align-items:center;justify-content:center;padding:40px 20px}
.login-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:30px;width:100%;max-width:380px}
.login-card .mark{font-family:var(--serif);font-weight:600;font-size:30px;display:block;margin-bottom:4px}
.login-card .mark .dot{color:var(--amber)}
.login-card .tagline{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);
  font-weight:600;margin-bottom:24px}
.login-err{font-size:13px;color:var(--out);background:var(--out-soft);border-radius:8px;
  padding:8px 11px;margin-bottom:12px}
.login-foot{font-size:12px;color:var(--ink-soft);margin-top:16px;line-height:1.5}

/* ---------- view tabs + user menu ---------- */
.tabs{display:flex;gap:4px;background:var(--card);border:1px solid var(--line);padding:4px;border-radius:11px;flex-wrap:wrap}
.tabs button{border:none;background:transparent;font-family:var(--sans);font-size:13px;font-weight:600;
  padding:7px 14px;border-radius:8px;cursor:pointer;color:var(--ink-soft)}
.tabs button:hover{color:var(--ink)}
.tabs button.active{background:var(--navy);color:#fff}
/* second-level nav: the views inside the current section. Deliberately
   quieter than .tabs — underline rather than a filled pill — so the eye
   still reads the section row as the primary control. */
.subtabs{display:flex;gap:2px;flex-wrap:wrap;padding-bottom:12px;margin-top:-4px}
.subtabs[hidden]{display:none}
.subtabs button{border:none;background:transparent;font-family:var(--sans);font-size:13px;font-weight:500;
  padding:6px 12px;border-radius:8px;cursor:pointer;color:var(--ink-soft);
  border-bottom:2px solid transparent}
.subtabs button:hover{color:var(--ink);background:var(--card)}
.subtabs button.active{color:var(--navy);border-bottom-color:var(--navy);font-weight:600}

/* month + sync + export: the view controls, pinned to the right of the nav row */
.head-tools{display:flex;align-items:center;gap:10px;margin-left:auto;flex-wrap:wrap}

/* account cluster — sits top-right, name and action read as one unit */
.usermenu{display:flex;align-items:center;gap:12px}
.usermenu .who{font-size:12.5px;color:var(--ink-soft);white-space:nowrap;
  padding-right:12px;border-right:1px solid var(--line-strong)}
.usermenu .who b{color:var(--ink);font-weight:600}
/* #who is filled in async — no stray divider before it loads */
.usermenu .who:empty{padding-right:0;border-right:none}
/* scoped: give sign-out a real edge so it reads as a control, not loose text.
   Other .ghost buttons (leads, jobs) stay borderless. */
.usermenu .btn.ghost{border-color:var(--line-strong);color:var(--ink-soft)}
.usermenu .btn.ghost:hover{border-color:var(--navy);color:var(--ink)}

/* ---------- KPIs ---------- */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:24px 0 8px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow)}
.kpi .lbl{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft);font-weight:600}
.kpi .big{font-size:26px;font-weight:600;margin-top:8px}
.kpi .meta{font-size:12px;color:var(--ink-soft);margin-top:5px;display:flex;align-items:center;gap:5px}
.kpi.lead{background:var(--ink);color:#fff;border-color:var(--ink)}
.kpi.lead .lbl{color:#b9bdc4} .kpi.lead .split{color:#cfd3d9;font-size:12px;margin-top:6px}
.kpi .in{color:var(--in)} .kpi .out{color:var(--out)}
.net-pos{color:var(--in)} .net-neg{color:var(--out)}
.delta{font-weight:600} .delta.up{color:var(--in)} .delta.down{color:var(--out)}

/* ---------- layout ---------- */
.cols{display:grid;grid-template-columns:340px 1fr;gap:20px;margin-top:22px;align-items:start}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;margin-bottom:20px}
.panel h2{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);font-weight:600;margin-bottom:14px}
.panel .sub-note{font-size:12px;color:var(--ink-soft);margin-bottom:12px;line-height:1.5}

/* ---------- record form ---------- */
.flow-toggle{display:flex;gap:6px;background:var(--paper);padding:4px;border-radius:11px;margin-bottom:14px;border:1px solid var(--line)}
.flow-toggle button{flex:1;border:none;background:transparent;font-family:var(--sans);font-size:13.5px;font-weight:600;padding:9px;border-radius:8px;cursor:pointer;color:var(--ink-soft)}
.flow-toggle button.active{background:var(--card);box-shadow:0 1px 2px rgba(0,0,0,.06)}
.flow-toggle button.active[data-on="in"]{color:var(--in)} .flow-toggle button.active[data-on="out"]{color:var(--out)}
.check{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-size:13px;color:var(--ink-soft)}
.check input{width:16px;height:16px;accent-color:var(--navy)}
.price-hint{font-size:12px;color:var(--navy);background:var(--navy-soft);border-radius:8px;padding:7px 10px;margin-top:8px;font-weight:500;line-height:1.35}
.form-hint{font-size:12px;color:var(--ink-soft);background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:8px 10px;margin-top:4px;line-height:1.4}
.submit{width:100%;border:none;background:var(--navy);color:#fff;font-family:var(--sans);font-size:14px;font-weight:600;padding:11px;border-radius:10px;cursor:pointer;margin-top:4px}
.submit:hover{background:#1C4A2E} .submit:disabled{opacity:.5;cursor:default}
.form-editing{font-size:12px;color:var(--amber);font-weight:600;margin-top:10px;display:flex;gap:8px;align-items:center}

/* ---------- receivables ---------- */
.owed-strip{display:flex;align-items:center;gap:12px;background:var(--owed-soft);border:1px solid #E8DDB8;border-radius:12px;padding:12px 16px;margin-bottom:18px}
.owed-strip .lbl{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--owed);font-weight:600}
.owed-strip .amt{font-size:20px;font-weight:600;color:var(--owed);margin-left:auto}
.recv-list{display:flex;flex-direction:column;gap:8px}
.recv-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.recv-row:last-child{border-bottom:none}
.recv-row .who{font-weight:500;font-size:13.5px}
.recv-row .sub{font-size:12px;color:var(--ink-soft);margin-top:2px}
.recv-row .amt{margin-left:auto;font-weight:600;color:var(--owed)}
.recv-row .pay{font-size:12px;font-weight:600;border:1px solid var(--in);color:var(--in);background:var(--in-soft);border-radius:8px;padding:6px 11px;cursor:pointer}
.recv-row .pay:hover{background:var(--in);color:#fff}

/* ---------- editable table cells (packages, promos) ---------- */
td input, td select{width:100%;font-family:var(--sans);font-size:13px;color:var(--ink);
  border:1px solid var(--line-strong);background:var(--card);border-radius:8px;padding:6px 8px}
td input:focus, td select:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px var(--navy-soft)}
td input.num{font-family:var(--mono);text-align:right}
/* a switched-off package still shows, greyed — the list doubles as price history */
tr.is-off{opacity:.5}
.pill{display:inline-block;font-size:11px;font-weight:600;padding:2px 8px;border-radius:99px;
  background:var(--in-soft);color:var(--in);border:1px solid #BFE0CC}
.pill.off{background:var(--card);color:var(--ink-soft);border-color:var(--line-strong)}

/* ---------- books check ---------- */
.health{background:var(--in-soft);border:1px solid #BFE0CC;color:var(--in);
  border-radius:var(--radius);padding:12px 16px;font-size:13px;margin-bottom:20px}
.health b{font-weight:600}
.health-panel{margin-bottom:20px;border-left:3px solid var(--owed)}
.health-panel.has-error{border-left-color:var(--out)}
.health-item{padding:12px 0;border-bottom:1px solid var(--line)}
.health-item:last-child{border-bottom:none;padding-bottom:0}
.health-item .hi-title{font-weight:600;font-size:13.5px}
.health-item.error .hi-title{color:var(--out)}
.health-item.warn  .hi-title{color:#6b5a23}
.health-item .hi-detail{font-size:12.5px;color:var(--ink-soft);margin:4px 0 8px;line-height:1.5}

/* ---------- chart ---------- */
.chartcard{margin-bottom:20px}
.chart-legend{display:flex;gap:16px;font-size:12px;color:var(--ink-soft);margin-bottom:6px}
.chart-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:middle}
svg{display:block;width:100%;height:auto;overflow:visible}

/* ---------- ledger / generic tables ---------- */
.tbl-head{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.tbl-head h2{margin:0;margin-right:auto}
.controls{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.controls select,.controls input{font-family:var(--sans);font-size:13px;border:1px solid var(--line-strong);background:var(--card);border-radius:9px;padding:7px 10px;color:var(--ink)}
.controls input{width:140px}
.chip{font-size:12px;font-weight:500;padding:6px 11px;border-radius:99px;cursor:pointer;border:1px solid var(--line-strong);background:var(--card);color:var(--ink-soft)}
.chip.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.chip:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{text-align:left;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);font-weight:600;padding:0 8px 9px;border-bottom:1px solid var(--line)}
td{padding:11px 8px;border-bottom:1px solid var(--line);vertical-align:top}
tr:last-child td{border-bottom:none}
th.num,td.num{text-align:right}
.t-amt{text-align:right;font-weight:600} .t-amt.in{color:var(--in)} .t-amt.out{color:var(--out)}
.tag{font-size:11px;font-weight:500;padding:2px 8px;border-radius:6px;display:inline-block;white-space:nowrap}
.tag.cash{background:var(--in-soft);color:var(--in)} .tag.gcash{background:var(--owed-soft);color:var(--owed)}
.tag.other{background:var(--paper);color:var(--ink-soft);border:1px solid var(--line)}
.t-cat{font-weight:500} .t-sub{font-size:12px;color:var(--ink-soft);margin-top:2px}
.rowbtns{display:flex;gap:2px;justify-content:flex-end}
.iconbtn{border:none;background:none;cursor:pointer;color:var(--ink-soft);font-size:14px;padding:3px 7px;border-radius:6px;line-height:1}
.iconbtn:hover{color:var(--navy);background:var(--navy-soft)}
.iconbtn.del:hover{color:var(--out);background:var(--out-soft)}
.empty{text-align:center;color:var(--ink-soft);font-size:14px;padding:40px 0}
.empty b{display:block;color:var(--ink);font-weight:600;margin-bottom:4px}
.loading{text-align:center;color:var(--ink-soft);padding:30px;font-size:14px}

/* ---------- status tags (leads / jobs / invoices / galleries) ---------- */
.tag.st-new,.tag.st-booked,.tag.st-issued,.tag.st-published{background:var(--navy-soft);color:var(--navy)}
.tag.st-contacted,.tag.st-draft{background:var(--owed-soft);color:var(--owed)}
.tag.st-converted,.tag.st-done{background:var(--in-soft);color:var(--in)}
.tag.st-closed,.tag.st-cancelled,.tag.st-void,.tag.st-archived{background:var(--out-soft);color:var(--out)}

/* ---------- homepage hero editor ---------- */
.hero-edit{display:grid;grid-template-columns:260px 1fr;gap:16px;align-items:start}
.hero-preview{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--paper);aspect-ratio:3/2}
.hero-preview img{width:100%;height:100%;object-fit:cover;display:block}
.hero-empty{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;font-size:13px;color:var(--ink-soft);padding:12px}
.hero-empty span{font-size:11.5px;color:var(--line-strong)}
.hero-fields .field:last-of-type{margin-bottom:14px}
@media (max-width:720px){.hero-edit{grid-template-columns:1fr}}

/* ---------- report head / toolbar ---------- */
.report-head{display:flex;align-items:center;gap:12px;margin:24px 0 4px;flex-wrap:wrap}
.report-head h2{font-family:var(--serif);font-size:20px;font-weight:600;margin-right:auto;text-transform:none;letter-spacing:0;color:var(--ink)}

/* ---------- photo grid (galleries) ---------- */
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:6px;margin-top:.75rem}
.photo-grid .cell{position:relative;aspect-ratio:1;background:var(--line);border-radius:8px;overflow:hidden}
.photo-grid img{width:100%;height:100%;object-fit:cover}
.photo-grid .remove{position:absolute;top:4px;right:4px;background:rgba(0,0,0,.6);color:#fff;border:none;border-radius:50%;width:22px;height:22px;cursor:pointer;font-size:12px}

/* ---------- portfolio manager (public homepage grid) ---------- */
.pf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px;margin-top:14px}
.pf-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;cursor:grab}
.pf-card:active{cursor:grabbing}
.pf-card.dragging{opacity:.4}
.pf-card.drop-target{outline:2px dashed var(--navy);outline-offset:-2px}
.pf-card .thumb{position:relative;aspect-ratio:1;background:var(--line)}
.pf-card .thumb img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.pf-card .ord{position:absolute;top:6px;left:6px;background:rgba(0,0,0,.6);color:#fff;border-radius:6px;
  font-family:var(--mono);font-size:11px;padding:2px 6px}
.pf-card .remove{position:absolute;top:6px;right:6px;background:rgba(0,0,0,.6);color:#fff;border:none;
  border-radius:50%;width:24px;height:24px;cursor:pointer;font-size:13px}
.pf-card .fields{padding:10px;display:flex;flex-direction:column;gap:8px}
.pf-card .fields label{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);font-weight:600}
.pf-card .fields input{width:100%;font-size:12px;padding:6px 8px;border:1px solid var(--line-strong);
  border-radius:8px;font-family:var(--sans);color:var(--ink);background:var(--card)}
.pf-card .fields input:focus{outline:2px solid var(--navy);outline-offset:-1px}

/* ---------- responsive ---------- */
/* below this the tabs claim the whole row, so let the tools sit on their own
   line instead of being squeezed against the nav */
@media (max-width:900px){.head-tools{margin-left:0;width:100%}}
@media (max-width:880px){.kpis{grid-template-columns:1fr 1fr}.cols{grid-template-columns:1fr}}
@media (max-width:520px){.kpi .big{font-size:21px}.controls input{width:110px}.row2{grid-template-columns:1fr}}