/*
  Title:      Zen Booking back-office styles ("Black & Gold")
  File:       app/static/zb_style.css
  Version:    1.0.0
  Date:       2026-10-01
  Sections:   1 colour tokens (change a colour here and every screen follows), 2 base,
              3 header bar, 4 page parts (titles, pills, buttons, cards, tables, forms),
              5 status colours, 6 schedule grid, 7 checkout, 8 chart of accounts band, 9 print
  Depends on: Google Fonts Cormorant Garamond + Figtree (loaded in zb_base.html)
  Used by:    every page through templates/zb_base.html
  Purpose:    A calm, readable look for a dim front desk: warm parchment page, near-black text,
              a black title bar with a gold foil rule under it, gold highlights on buttons.
              Text is never pale: body text contrast is at least 7:1.
  Revisions:  1.0.0 2026-10-01 Claude Code: first version.
*/

/* ---------- 1. colour tokens: tweak here ---------- */
:root{
  --page:#ECE5D6;          /* page background: warm parchment, not glaring white */
  --card:#FAF7F0;          /* cards and tables */
  --card-alt:#F3EEE3;      /* zebra rows, hover */
  --ink:#1D1913;           /* main text */
  --ink-2:#433B30;         /* secondary text */
  --muted:#6A5F50;         /* labels */
  --line:#D6CAB4;          /* borders */
  --bar:#16130E;           /* the title bar */
  --bar-ink:#F3E9D2;       /* menu text on the bar */
  --gold:#B08A3E;          /* gold accent (borders, icons) */
  --gold-ink:#7A5A1C;      /* gold that is dark enough for text on light backgrounds */
  --gold-soft:#F1E3C0;     /* pale gold fill */
  --foil:linear-gradient(90deg,#8C6A2F 0%,#D9B871 22%,#F6E6B4 40%,#C9A257 58%,#8C6A2F 78%,#E2C584 100%);
  --btn:#1D1913;  --btn-ink:#F6E6B4;      /* primary button: black with pale gold text */
  --ok:#2F6B47;   --ok-soft:#DCEBDF;      /* active, arrived, paid */
  --warn:#8A5A12; --warn-soft:#F6E5C4;
  --bad:#9B3A2E;  --bad-soft:#F6DCD6;     /* the one red: alerts, no-shows */
  --off:#E9C9C9;                          /* inactive band (pink) */
  --info:#3C5A78; --info-soft:#DDE6EF;
  --radius:10px; --radius-lg:14px;
  --display:"Cormorant Garamond",Georgia,serif;
  --body:"Figtree","Segoe UI",system-ui,sans-serif;
}

/* ---------- 2. base ---------- */
*{box-sizing:border-box}
html{scroll-padding-top:110px}
body{margin:0; background:var(--page); color:var(--ink); font-family:var(--body); font-size:16.5px; line-height:1.5; -webkit-font-smoothing:antialiased}
a{color:var(--ink)}
h1,h2,h3{font-family:var(--display); font-weight:600; margin:0; line-height:1.15; color:var(--ink)}
h1{font-size:2.1rem}
h2{font-size:1.55rem}
h3{font-size:1.25rem}
:focus-visible{outline:3px solid var(--gold); outline-offset:2px; border-radius:4px}
.wrap{width:min(1440px,100% - 40px); margin:0 auto}
main.wrap{padding:22px 0 60px}
.muted{color:var(--muted)}
.small{font-size:.88rem}
.num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.nowrap{white-space:nowrap}
.hidden{display:none!important}

/* ---------- 3. header bar ---------- */
.top{position:sticky; top:0; z-index:40}
.bar{background:var(--bar); color:var(--bar-ink)}
.bar .wrap{display:flex; align-items:center; gap:22px; min-height:64px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--bar-ink)}
.brand svg{width:30px; height:30px; flex:none}
.brand b{font-family:var(--display); font-size:1.7rem; font-weight:600; letter-spacing:.01em;
  background:var(--foil); -webkit-background-clip:text; background-clip:text; color:transparent}
.brand small{display:block; font-size:.62rem; letter-spacing:.24em; text-transform:uppercase; color:#BFAE88; margin-top:-2px}
.menu{display:flex; flex-wrap:wrap; gap:4px; flex:1}
.menu a{color:var(--bar-ink); text-decoration:none; font-weight:600; font-size:.98rem; padding:8px 12px; border-radius:8px; opacity:.86}
.menu a:hover{opacity:1; background:rgba(246,230,180,.08)}
.menu a[aria-current="page"]{opacity:1; background:rgba(246,230,180,.14); box-shadow:inset 0 -2px 0 var(--gold)}
.who{display:flex; align-items:center; gap:12px; font-size:.92rem; color:#E9DDBF}
.who .role{font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:#C9B27C}
.who button{background:transparent; color:var(--bar-ink); border:1px solid rgba(246,230,180,.4); border-radius:8px; padding:7px 12px; font:inherit; font-weight:600; cursor:pointer}
.who button:hover{border-color:var(--gold)}
.foil-rule{height:4px; background:var(--foil)}
.flash{margin:0; padding:10px 20px; font-weight:600; background:var(--ok-soft); color:var(--ok); border-bottom:1px solid var(--line)}
.flash.err{background:var(--bad-soft); color:var(--bad)}
.foot{height:10px; background:var(--foil); position:fixed; left:0; right:0; bottom:0; opacity:.9}
@media (max-width:1100px){ .bar .wrap{flex-wrap:wrap; padding-block:8px} .menu{order:3; flex-basis:100%} }

/* ---------- 4. page parts ---------- */
.crumbs{font-size:.88rem; color:var(--muted); margin-bottom:4px}
.crumbs a{color:var(--muted)}
.pagehead{display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px; margin-bottom:16px}
.pagehead h1{margin-right:auto}
.pills{display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 16px}
.pill{display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border-radius:999px; border:1px solid var(--line); background:var(--card); color:var(--ink); text-decoration:none; font-size:.94rem; font-weight:500}
.pill:hover{border-color:var(--gold)}
.pill[aria-current="page"],.pill.on{background:var(--bar); color:var(--btn-ink); border-color:var(--bar)}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:9px 16px; border-radius:var(--radius); border:1px solid var(--btn); background:var(--btn); color:var(--btn-ink); font:inherit; font-weight:600; text-decoration:none; cursor:pointer; white-space:nowrap}
.btn:hover{box-shadow:0 0 0 2px var(--gold) inset}
.btn.gold{background:var(--foil); color:#1D1913; border-color:#A8823A}
.btn.ghost{background:var(--card); color:var(--ink); border-color:var(--line)}
.btn.ghost:hover{border-color:var(--gold); box-shadow:none}
.btn.ok{background:var(--ok); border-color:var(--ok); color:#fff}
.btn.bad{background:var(--card); color:var(--bad); border-color:var(--bad)}
.btn.small{padding:5px 10px; font-size:.86rem}
.btn[disabled]{opacity:.45; cursor:not-allowed}
.linkbtn{background:none; border:0; padding:0; font:inherit; color:var(--ink); text-decoration:underline; cursor:pointer}
.row{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.grid2{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:18px}
.grid3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px}
.side{display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:18px; align-items:start}
@media (max-width:1000px){ .grid2,.grid3,.side{grid-template-columns:minmax(0,1fr)} }
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); padding:18px 20px}
.card h2{margin-bottom:10px}
.card.flat{padding:0; overflow:hidden}
.card.flat>h2,.card.flat>.cardhead{padding:14px 18px; margin:0; border-bottom:1px solid var(--line)}
.cardhead{display:flex; justify-content:space-between; align-items:center; gap:10px}
.cardhead h2{margin:0}
.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:14px; margin-bottom:18px}
.tile{background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); padding:14px 16px}
.tile.lead{border-left:5px solid var(--gold)}
.tile .k{font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.tile .v{font-size:1.6rem; font-weight:700; font-variant-numeric:tabular-nums}
table.t{width:100%; border-collapse:collapse; background:var(--card)}
table.t th{text-align:left; font-weight:600; color:var(--ink-2); font-size:.9rem; padding:10px 12px; border-bottom:1px solid var(--line); background:var(--card)}
table.t th.num{text-align:right}
table.t td select{min-width:110px}
table.t td{padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top}
table.t tbody tr:hover td{background:var(--card-alt)}
table.t tfoot td{font-weight:700; border-top:2px solid var(--ink); border-bottom:0}
table.t .sub td{font-size:.9rem; color:var(--ink-2)}
.tablewrap{border:1px solid var(--line); border-radius:var(--radius-lg); overflow:auto; background:var(--card)}
.empty{padding:22px; color:var(--muted); text-align:center}
form.stack{display:grid; gap:14px}
label.f{display:grid; gap:5px; font-size:.9rem; color:var(--ink-2); font-weight:600}
label.f small{font-weight:400; color:var(--muted)}
input,select,textarea{font:inherit; font-size:1rem; color:var(--ink); background:#FFFDF8; border:1px solid var(--line); border-radius:8px; padding:9px 11px; width:100%}
input:focus,select:focus,textarea:focus{border-color:var(--gold); outline:none; box-shadow:0 0 0 3px rgba(176,138,62,.22)}
input[type=checkbox],input[type=radio]{width:18px; height:18px; accent-color:var(--ink); padding:0}
textarea{min-height:76px; resize:vertical}
.check{display:inline-flex; align-items:center; gap:8px; font-weight:500; color:var(--ink)}
.filter{max-width:320px}
.fields{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px}
.fields .wide{grid-column:1/-1}
.actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:6px}
.alert{display:flex; gap:10px; align-items:flex-start; background:var(--bad-soft); color:var(--bad); border:1px solid #E3B4AA; border-left:5px solid var(--bad); border-radius:var(--radius); padding:10px 14px; font-weight:600}
.alert svg{flex:none; width:20px; height:20px; margin-top:2px}
.note{background:var(--gold-soft); border-left:5px solid var(--gold); border-radius:var(--radius); padding:10px 14px; color:var(--ink)}
.kv{display:grid; grid-template-columns:140px minmax(0,1fr); gap:6px 14px}
.kv dt{color:var(--muted); font-size:.9rem}
.kv dd{margin:0}

/* ---------- 5. status colours ---------- */
.st{display:inline-block; padding:2px 10px; border-radius:999px; font-size:.8rem; font-weight:700; letter-spacing:.02em; white-space:nowrap}
.st.booked{background:var(--info-soft); color:var(--info)}
.st.arrived,.st.in_service{background:var(--ok-soft); color:var(--ok)}
.st.completed,.st.closed{background:var(--gold-soft); color:var(--gold-ink)}
.st.no_show{background:var(--bad-soft); color:var(--bad)}
.st.cancelled,.st.void{background:#E6E1D8; color:#6A5F50; text-decoration:line-through}
.st.open{background:var(--warn-soft); color:var(--warn)}
.st.online{background:#EDE3F2; color:#5B3E6E}

/* ---------- 6. schedule grid ---------- */
.sched{display:grid; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--card); overflow:auto; max-height:calc(100vh - 230px)}
.sched-head{position:sticky; top:0; z-index:5; background:var(--card); border-bottom:2px solid var(--ink); padding:10px 8px; font-weight:700; text-align:center; font-size:.95rem}
.sched-head small{display:block; font-weight:500; color:var(--muted); font-size:.75rem}
.sched-head .dot{display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px}
.sched-time{position:sticky; left:0; z-index:4; background:var(--card); border-right:1px solid var(--line); font-size:.78rem; white-space:nowrap; color:var(--muted); text-align:right; padding:0 8px; font-variant-numeric:tabular-nums}
.sched-col{position:relative; border-right:1px solid var(--line)}
.sched-slot{border-bottom:1px dotted #E2D8C6}
.sched-slot.hour{border-bottom:1px solid var(--line)}
.sched-off{position:absolute; left:0; right:0; background:repeating-linear-gradient(135deg,#E4DCCB 0 6px,#EDE6D8 6px 12px); opacity:.85}
.appt{position:absolute; left:4px; right:4px; border-radius:8px; padding:5px 8px; overflow:hidden; text-decoration:none; color:var(--ink); background:#FFFDF8; border:1px solid var(--line); border-left:5px solid var(--info); font-size:.86rem; line-height:1.25; box-shadow:0 2px 6px -3px rgba(0,0,0,.25)}
.appt:hover{border-color:var(--gold); z-index:3}
.appt b{display:block; font-size:.93rem}
.appt .tm{color:var(--muted); font-size:.78rem}
.appt.arrived,.appt.in_service{border-left-color:var(--ok); background:#F2F8F3}
.appt.completed{border-left-color:var(--gold); background:#FBF5E6}
.appt.no_show{border-left-color:var(--bad); background:#FBEDEA}
.appt .warn{color:var(--bad); font-weight:700}
.appt .req{color:var(--gold-ink); font-weight:700}
.now-line{position:absolute; left:0; right:0; height:2px; background:var(--bad); z-index:6}
.daynav{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.daynav input{width:auto}

/* ---------- 7. checkout ---------- */
.totals{display:grid; gap:6px; font-variant-numeric:tabular-nums}
.totals div{display:flex; justify-content:space-between; gap:20px}
.totals .big{font-size:1.35rem; font-weight:700; border-top:2px solid var(--ink); padding-top:6px}
.totals .due{color:var(--bad)}
.totals .done{color:var(--ok)}
.addline{display:grid; grid-template-columns:minmax(0,2fr) repeat(4,minmax(0,1fr)) auto; gap:8px; align-items:end}
@media (max-width:1000px){ .addline{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} }

/* ---------- 8. chart of accounts band: green = active, pink = inactive ---------- */
td.band{width:10px; padding:0!important; background:var(--ok)}
tr.inactive td.band{background:var(--off)}
tr.inactive td{color:var(--muted)}
.slots{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px}
.slot{display:grid; gap:2px; text-align:left; padding:10px 12px; border:1px solid var(--line); border-radius:var(--radius); background:#FFFDF8; cursor:pointer; font:inherit}
.slot:hover{border-color:var(--gold)}
.slot b{font-size:1.05rem}
.slot small{color:var(--muted)}
.slot input{display:none}
.slot:has(input:checked){border:2px solid var(--ink); background:var(--gold-soft)}
.matrix th.rot{writing-mode:vertical-rl; transform:rotate(180deg); white-space:nowrap; padding:10px 6px}
.matrix td.c{text-align:center}

/* ---------- 9. print ---------- */
@media print{ .top,.foot,.actions,.noprint{display:none!important} body{background:#fff} .card{border:0} }