/* Consulting Hub — Camybara branding.
   Palette and type come from the Camybara brand kit; Ageo is served locally so
   the page has no external dependencies. */

@font-face{font-family:Ageo;src:url("fonts/Ageo-Light.ttf") format("truetype");
  font-weight:300;font-display:swap}
@font-face{font-family:Ageo;src:url("fonts/Ageo-Regular.ttf") format("truetype");
  font-weight:400;font-display:swap}
@font-face{font-family:Ageo;src:url("fonts/Ageo-Medium.ttf") format("truetype");
  font-weight:500;font-display:swap}
@font-face{font-family:Ageo;src:url("fonts/Ageo-SemiBold.ttf") format("truetype");
  font-weight:600;font-display:swap}
@font-face{font-family:Ageo;src:url("fonts/Ageo-Bold.ttf") format("truetype");
  font-weight:700;font-display:swap}

:root{
  --brown:#A77F5B; --taupe:#615550; --orange:#FF7800; --olive:#64634D;
  --leaf:#81A547; --grey:#A09B9B;
  --bg:#FAFAFA; --card:#FFFFFF; --line:#F0EEEC; --altrow:#F5F2EF;
  --tip:#FFF5EB; --success:#F0F7E8;
  --ink:var(--taupe); --muted:var(--grey); --accent:var(--orange);
  --ok:#5F7F33; --warn:#9A6700; --bad:#B42318;
  --ok-bg:var(--success); --warn-bg:var(--tip); --bad-bg:#FDECEB; --sent-bg:#F3EDE7;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--olive);
  font:15px/1.6 Ageo,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif}
a{color:var(--brown);text-decoration:none}
a:hover{text-decoration:underline}

/* Brown top rule echoes the accent bar on Camybara documents. */
header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5;
  box-shadow:inset 0 3px 0 var(--brown)}
header .inner{max-width:1100px;margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:26px}
header .brand{display:flex;align-items:center;gap:12px;padding:12px 0}
header .brand img{height:30px;width:auto;display:block}
header .brand .appname{padding-left:0;border-left:none}
header .brand .appname{font-weight:600;color:var(--taupe);font-size:16px;
  letter-spacing:-.01em;padding-left:12px;border-left:1px solid var(--line)}
header nav{display:flex;gap:20px}
header nav a{padding:16px 0;color:var(--grey);font-weight:500;border-bottom:2px solid transparent}
header nav a:hover{color:var(--taupe);text-decoration:none}
header nav a.on{color:var(--taupe);border-bottom-color:var(--orange)}
main{max-width:1100px;margin:0 auto;padding:28px 24px 72px}

h1{font-size:25px;margin:0 0 4px;letter-spacing:-.02em;color:var(--taupe);font-weight:700}
h2{font-size:13px;margin:0 0 12px;color:var(--brown);font-weight:600;
  text-transform:uppercase;letter-spacing:.08em}
.sub{color:var(--grey);margin:0 0 24px}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px}
.pad{padding:20px}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:28px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px 20px}
.stat .label{color:var(--brown);font-size:12px;margin-bottom:6px;font-weight:600;
  text-transform:uppercase;letter-spacing:.07em}
.stat .value{font-size:27px;font-weight:700;letter-spacing:-.02em;color:var(--taupe)}
.stat .note{color:var(--grey);font-size:13px;margin-top:4px}
a.stat{display:block;color:inherit;transition:border-color .12s,transform .12s}
a.stat:hover{border-color:var(--orange);text-decoration:none;transform:translateY(-1px)}
a.stat:hover .value{color:var(--orange)}

table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.07em;
  color:var(--brown);padding:11px 14px;border-bottom:1px solid var(--line);font-weight:600}
td{padding:12px 14px;border-bottom:1px solid var(--line)}
tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--altrow)}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}

.pill{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600}
.s-Paid{background:var(--success);color:var(--ok)}
.s-Sent{background:var(--sent-bg);color:var(--brown)}
.s-InProgress,.s-Completed{background:var(--tip);color:var(--warn)}
.s-Cancelled{background:var(--bad-bg);color:var(--bad)}
.s-Archived{background:var(--line);color:var(--grey)}

.tabs{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.tabs a{padding:7px 14px;border:1px solid var(--line);border-radius:999px;
  background:#fff;color:var(--olive);font-size:14px;font-weight:500}
.tabs a:hover{border-color:var(--brown);text-decoration:none}
.tabs a.on{background:var(--brown);border-color:var(--brown);color:#fff}

.btn{display:inline-block;padding:9px 16px;border-radius:8px;border:1px solid var(--line);
  background:#fff;font-weight:600;font-size:14px;cursor:pointer;color:var(--taupe);
  font-family:inherit}
.btn:hover{background:var(--altrow);text-decoration:none}
.btn.primary{background:var(--orange);border-color:var(--orange);color:#fff}
.btn.primary:hover{background:#E56C00}
.btn.danger{color:var(--bad);border-color:#F0C6C2}
.btn.danger:hover{background:var(--bad-bg)}
.btn:disabled{opacity:.4;cursor:not-allowed}

.row{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:22px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
label{display:block;font-size:13px;color:var(--brown);margin-bottom:5px;font-weight:500}
input,select,textarea{width:100%;padding:9px 11px;border:1px solid var(--line);
  border-radius:8px;font:inherit;background:#fff;color:var(--olive)}
input:focus,select:focus,textarea:focus{outline:2px solid #FFE0C2;border-color:var(--orange)}
.field{margin-bottom:14px}

.flash{padding:12px 16px;border-radius:8px;margin-bottom:18px;font-weight:500}
.flash.ok{background:var(--success);color:var(--ok)}
.flash.error{background:var(--bad-bg);color:var(--bad)}
.banner{background:var(--tip);color:var(--warn);padding:12px 16px;border-radius:8px;
  margin-bottom:18px;font-size:14px;border-left:3px solid var(--orange)}
.muted{color:var(--grey)}
.small{font-size:13px}
.empty{padding:44px;text-align:center;color:var(--grey)}
.kv{display:grid;grid-template-columns:120px 1fr;gap:8px 16px;font-size:14px}
.kv dt{color:var(--brown)}
.kv dd{margin:0}

td.drag{width:28px;color:var(--grey);cursor:grab;user-select:none;text-align:center}
td.drag span{display:inline-block;padding:2px 4px;letter-spacing:1px}
tr[draggable]:hover td.drag{color:var(--brown)}
tr.dragging{opacity:.45;background:var(--tip)}

input.cell,textarea.cell{width:100%;border:1px solid transparent;background:transparent;
  padding:5px 7px;border-radius:6px;font:inherit;color:var(--olive);resize:vertical}
input.cell:hover,textarea.cell:hover{border-color:var(--line);background:#fff}
input.cell:focus,textarea.cell:focus{border-color:var(--orange);background:#fff;
  outline:2px solid #FFE0C2}
input.cell.num{text-align:right;font-variant-numeric:tabular-nums}
textarea.cell{min-height:34px;line-height:1.4;overflow:hidden}
#items{table-layout:fixed}
#items td,#items th{overflow:hidden}
#items textarea.cell{field-sizing:content;max-height:none}
#items input.cell{min-width:0}
#items input.cell.num{min-width:64px}
#items td{padding:6px 8px;vertical-align:middle}

.savestate{font-size:13px;font-weight:600;margin-left:8px;display:inline-block;min-height:18px}
.savestate.saving{color:var(--grey)}
.savestate.saved{color:var(--leaf)}
.savestate.unsaved{color:var(--bad)}
.savestate.saved::before{content:"\2713 "}
.savestate.unsaved::before{content:"\26A0 "}
/* each client's name has its own colour and opens that client's page */
.client-name{font-weight:600}
.cl-TDI{color:#1F5F8B}
.cl-CatC{color:#4B6E1F}
.cl-Nep{color:#6B3FA0}
.cl-RA{color:#9A4B1F}
.cl-TEST{color:#7A7474}
/* invoice numbers are buttons, so they are easy to hit */
.btn.sm{padding:5px 12px;font-size:13px;white-space:nowrap;border-color:#E3DED9}
.btn.sm:hover{border-color:var(--brown)}