/* Astroworx ERP — one stylesheet, design tokens shared with the Part 1 spec. */
:root{
  --bg:#F5F7FA;--surface:#FFFFFF;--surface-2:#EDF0F4;--ink:#171E27;--ink-2:#3B4552;--muted:#6B7684;
  --line:#D6DCE4;--line-2:#C2CAD4;--accent:#B5432B;--accent-ink:#FFFFFF;--accent-soft:#F7E6E1;
  --ok:#2F7A4C;--ok-soft:#E3F1E7;--warn:#9A6A12;--warn-soft:#F7EED9;--bad:#A8322B;--bad-soft:#F8E3E1;
  --info:#2F5DA8;--info-soft:#E4EBF7;--code-bg:#EEF1F5;--shadow:0 1px 2px rgba(23,30,39,.06);
  --font:"IBM Plex Sans","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  --mono:"IBM Plex Mono","Cascadia Mono",Consolas,ui-monospace,monospace;
}
@media (prefers-color-scheme: dark){
  :root{--bg:#0F141A;--surface:#161C24;--surface-2:#1D2530;--ink:#E6EAF0;--ink-2:#C3CBD6;--muted:#8B96A5;--line:#2A3441;--line-2:#37424F;
  --accent:#E0654B;--accent-ink:#0F141A;--accent-soft:#3A2119;--ok:#5DBB7E;--ok-soft:#1B3324;--warn:#D7A23A;--warn-soft:#3A2E14;
  --bad:#E57368;--bad-soft:#3E1F1C;--info:#7FA6E8;--info-soft:#1B2A44;--code-bg:#1D2530;--shadow:0 1px 2px rgba(0,0,0,.4)}
}
*{box-sizing:border-box}
html{font-size:15px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);line-height:1.45;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none} a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
h1,h2,h3{line-height:1.2;margin:0;text-wrap:balance} h1{font-size:1.5rem;font-weight:600} h2{font-size:1.1rem;font-weight:600;margin-top:1.5rem} h3{font-size:.95rem;font-weight:600}
p{margin:.5rem 0}
.mono{font-family:var(--mono);font-size:.9em} .muted{color:var(--muted)} .small{font-size:.85rem} .nowrap{white-space:nowrap} .right{text-align:right}
.tabular{font-variant-numeric:tabular-nums}

/* top bar */
.topbar{display:flex;align-items:center;gap:1rem;padding:.5rem 1rem;background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;flex-wrap:wrap}
.brand{font-weight:600;color:var(--ink);white-space:nowrap} .brand:hover{text-decoration:none}
.brand-mark{color:var(--accent);margin-right:.25rem} .brand-sub{color:var(--muted);font-weight:400;margin-left:.35rem;font-size:.85rem}
.nav{display:flex;gap:.15rem;flex-wrap:wrap}
.nav a{padding:.35rem .6rem;border-radius:4px;color:var(--ink-2);font-size:.92rem} .nav a:hover{background:var(--surface-2);text-decoration:none}
.nav a.on{background:var(--accent-soft);color:var(--accent);font-weight:600}
.topsearch{margin-left:auto} .topsearch input{width:16rem;max-width:40vw}
.user{display:flex;align-items:center;gap:.75rem;font-size:.9rem}
.linkbtn{background:none;border:0;color:var(--accent);cursor:pointer;font:inherit;padding:0}
form.inline{display:inline}
.page{max-width:1500px;margin:0 auto;padding:1.25rem 1rem 4rem}
.foot{text-align:center;color:var(--muted);font-size:.8rem;padding:1rem}
.messages{margin-bottom:1rem} .msg{padding:.5rem .8rem;border-radius:4px;margin:.25rem 0;border:1px solid var(--line);background:var(--surface)}
.msg-success{border-color:var(--ok);background:var(--ok-soft)} .msg-error{border-color:var(--bad);background:var(--bad-soft)}

/* controls */
input,select,textarea,button{font:inherit;color:inherit}
input[type=text],input[type=search],input[type=email],input[type=number],input[type=date],input[type=datetime-local],input[type=url],input[type=file],select,textarea{
  background:var(--surface);border:1px solid var(--line-2);border-radius:4px;padding:.4rem .55rem;width:100%;max-width:100%}
textarea{min-height:4rem;resize:vertical}
select{width:auto;min-width:8rem}
.btn{display:inline-block;padding:.4rem .8rem;border-radius:4px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink);cursor:pointer;font-size:.9rem;line-height:1.2}
.btn:hover{background:var(--surface-2);text-decoration:none}
.btn-accent{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)} .btn-accent:hover{filter:brightness(1.05);background:var(--accent)}
.btn-sm{padding:.2rem .5rem;font-size:.8rem}
.btn-ghost{border-color:transparent;background:transparent;color:var(--accent)}
.actions{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.pagehead{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap;margin-bottom:1rem} .pagehead .actions{margin-left:auto}
.filters{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin:.5rem 0 1rem;font-size:.9rem}
.filters select,.filters input{width:auto}
.filters .lbl{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

/* cards & grids */
.grid{display:grid;gap:1rem} .grid-2{grid-template-columns:1fr} .grid-3{grid-template-columns:1fr} .grid-4{grid-template-columns:1fr 1fr}
@media(min-width:900px){.grid-2{grid-template-columns:1fr 1fr}.grid-3{grid-template-columns:1fr 1fr 1fr}.grid-4{grid-template-columns:repeat(4,1fr)}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:.9rem 1rem;box-shadow:var(--shadow)}
.card h2,.card h3{margin-top:0} .card h2{margin-bottom:.5rem}
.stat{display:flex;flex-direction:column;gap:.1rem;padding:.7rem .9rem;background:var(--surface);border:1px solid var(--line);border-radius:6px;min-width:7rem}
.stat b{font-size:1.5rem;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.1} .stat span{font-size:.78rem;color:var(--muted)}
.stat a{color:inherit} .stat a:hover{text-decoration:none;color:var(--accent)}
.stats{display:flex;gap:.6rem;flex-wrap:wrap;margin:.5rem 0 1rem}
.eyebrow{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-weight:600}
.callout{border-left:3px solid var(--accent);background:var(--surface);padding:.7rem .9rem;border-radius:0 4px 4px 0;margin:.75rem 0}

/* tables */
.tablewrap{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:6px}
table{border-collapse:collapse;width:100%;font-size:.9rem}
th,td{padding:.5rem .65rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
th{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600;background:var(--surface-2);white-space:nowrap}
tr:last-child td{border-bottom:0} tr:hover td{background:color-mix(in srgb,var(--surface-2) 50%,transparent)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}

/* chips */
.chip{display:inline-block;font-size:.72rem;font-weight:600;padding:.1rem .45rem;border-radius:3px;white-space:nowrap;background:var(--surface-2);color:var(--ink-2);vertical-align:middle}
.st-enquiry{background:var(--surface-2)} .st-conversation{background:var(--info-soft);color:var(--info)} .st-quoted{background:var(--info-soft);color:var(--info)}
.st-contract{background:var(--warn-soft);color:var(--warn)} .st-signed{background:var(--ok-soft);color:var(--ok)} .st-onboarding{background:var(--ok-soft);color:var(--ok)}
.st-active{background:var(--ok);color:#fff} .st-paused{background:var(--warn-soft);color:var(--warn)} .st-churned{background:var(--bad-soft);color:var(--bad)} .st-lost{background:var(--bad-soft);color:var(--bad)}
.ball-ours{background:var(--accent-soft);color:var(--accent)} .ball-theirs{background:var(--surface-2);color:var(--muted)}
.days{font-family:var(--mono);font-size:.78rem} .days-ok{color:var(--muted)} .days-warm{color:var(--warn);font-weight:600} .days-hot{color:var(--bad);font-weight:600}
.tag{display:inline-block;font-size:.72rem;padding:.05rem .4rem;border:1px solid var(--line-2);border-radius:999px;color:var(--ink-2);margin-right:.2rem}
.tag-hot{border-color:var(--accent);color:var(--accent);font-weight:600}
.pos-vacant{background:var(--surface-2)} .pos-reserved{background:var(--warn-soft);color:var(--warn)} .pos-occupied{background:var(--ok);color:#fff} .pos-maintenance{background:var(--bad-soft);color:var(--bad)}

/* revenue KPIs */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.6rem;margin:0 0 1.25rem}
.kpi{display:flex;flex-direction:column;gap:.15rem;padding:.8rem .95rem;background:var(--surface);border:1px solid var(--line);border-radius:6px;color:var(--ink);box-shadow:var(--shadow)}
.kpi:hover{text-decoration:none;border-color:var(--line-2)}
.kpi b{font-size:1.65rem;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.15}
.kpi-label{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}
.kpi-sub{font-size:.78rem;color:var(--muted)}
.kpi-main{border-color:var(--ok);background:var(--ok-soft)} .kpi-main b{color:var(--ok)}
.kpi-alert{border-color:var(--bad);background:var(--bad-soft)} .kpi-alert b{color:var(--bad)}
.kpi-total{border-style:dashed}

/* pipeline board */
/* the board fills the window; columns scroll on their own, so the sideways scrollbar stays in view */
.board{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(240px,1fr);grid-template-rows:minmax(0,1fr);gap:.75rem;
  overflow-x:auto;overflow-y:hidden;height:calc(100vh - 12rem);min-height:22rem;padding-bottom:.4rem;scrollbar-gutter:stable}
.col{background:var(--surface-2);border-radius:6px;padding:0 .5rem .5rem;overflow-y:auto;min-height:0}
.col h3{display:flex;justify-content:space-between;align-items:baseline;padding:.6rem .3rem .5rem;font-size:.85rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2);
  position:sticky;top:0;background:var(--surface-2);z-index:1}
.col h3 span{font-family:var(--mono);font-weight:500;color:var(--muted)}
.kcard{background:var(--surface);border:1px solid var(--line);border-radius:5px;padding:.5rem .6rem;margin-bottom:.5rem;box-shadow:var(--shadow);font-size:.85rem}
.kcard.hot{border-left:3px solid var(--accent)}
.kcard .name{font-weight:600;font-size:.92rem} .kcard .name a{color:var(--ink)}
.kcard .meta{color:var(--muted);font-size:.78rem;margin-top:.15rem;display:flex;gap:.4rem;flex-wrap:wrap;align-items:center}
.kcard .eq{color:var(--ink-2);font-size:.8rem;margin-top:.25rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kcard .next{margin-top:.3rem;font-size:.78rem;color:var(--ink-2)} .kcard .next.overdue{color:var(--bad)}
.kcard form{margin-top:.35rem;display:flex;gap:.3rem;align-items:center} .kcard form select{font-size:.78rem;padding:.15rem .3rem;min-width:0;flex:1}
.kcard form button{font-size:.75rem;padding:.15rem .4rem}

/* timeline */
.timeline{list-style:none;padding:0;margin:0}
.timeline li{display:grid;grid-template-columns:8.5rem 1fr;gap:.75rem;padding:.55rem 0;border-top:1px solid var(--line)}
.timeline li:first-child{border-top:0}
.timeline .when{font-family:var(--mono);font-size:.78rem;color:var(--muted)}
.timeline .kind{font-size:.72rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2)}
.timeline .kind.in{color:var(--info)} .timeline .kind.out{color:var(--ok)}
.timeline .body{white-space:pre-wrap;color:var(--ink-2);font-size:.88rem;margin-top:.2rem;max-width:80ch}
.timeline .actor{color:var(--muted);font-size:.78rem}

/* tabs */
.tabs{display:flex;gap:.2rem;border-bottom:1px solid var(--line);margin:1rem 0;flex-wrap:wrap}
.tabs a{padding:.45rem .7rem;color:var(--ink-2);border-bottom:2px solid transparent;font-size:.9rem;margin-bottom:-1px}
.tabs a.on{border-color:var(--accent);color:var(--accent);font-weight:600} .tabs a:hover{text-decoration:none;color:var(--accent)}
.tabs a .n{color:var(--muted);font-family:var(--mono);font-size:.78rem;margin-left:.2rem}

/* forms */
.form{display:grid;gap:.75rem;max-width:56rem} .form-2{grid-template-columns:1fr} @media(min-width:800px){.form-2{grid-template-columns:1fr 1fr}}
.field label{display:block;font-size:.8rem;color:var(--ink-2);margin-bottom:.15rem;font-weight:600}
.field .help{font-size:.75rem;color:var(--muted);margin-top:.15rem} .err{color:var(--bad);font-size:.8rem;margin-top:.15rem}
.field.wide{grid-column:1/-1} .field.check{display:flex;align-items:center;gap:.4rem} .field.check label{margin:0;font-weight:400}
.formbar{display:flex;gap:.5rem;align-items:center;margin-top:.5rem}
.inlineform{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap} .inlineform input,.inlineform select{width:auto}
.login{max-width:24rem;margin:4rem auto} .login .field{margin-bottom:.75rem}
.btn-block{display:block;width:100%;text-align:center;padding:.6rem .8rem;font-size:1rem}
.login .divider{display:flex;align-items:center;gap:.6rem;margin:1.25rem 0 .75rem} .login .divider::before,.login .divider::after{content:"";flex:1;border-top:1px solid var(--line)}
.page button[type=submit]:not(.btn):not(.linkbtn){display:inline-block;padding:.4rem .8rem;border-radius:4px;border:1px solid var(--accent);background:var(--accent);color:var(--accent-ink);cursor:pointer}
.dl{display:grid;grid-template-columns:9rem 1fr;gap:.25rem .75rem;font-size:.9rem} .dl dt{color:var(--muted)} .dl dd{margin:0}
.kv{margin:0} .kv dt{font-size:.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em} .kv dd{margin:0 0 .5rem}
.empty{color:var(--muted);font-style:italic;padding:.5rem 0}
.hero-note{white-space:pre-wrap;font-size:.9rem;color:var(--ink-2)}
.posgrid{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.4rem}
.pos{border:1px solid var(--line);border-radius:4px;padding:.25rem .45rem;font-size:.8rem;min-width:5.5rem;background:var(--surface)}
.pos b{font-family:var(--mono);font-weight:500;display:block} .pos small{color:var(--muted)}
.pos.pos-occupied{background:var(--ok-soft);border-color:var(--ok)} .pos.pos-reserved{background:var(--warn-soft);border-color:var(--warn)} .pos.pos-maintenance{background:var(--bad-soft);border-color:var(--bad)}
.pos.pos-occupied,.pos.pos-reserved,.pos.pos-maintenance{color:var(--ink)}
.done{color:var(--muted);text-decoration:line-through}
@media(max-width:700px){.timeline li{grid-template-columns:1fr} .topsearch{order:5;width:100%} .topsearch input{width:100%;max-width:none} .dl{grid-template-columns:1fr}}