/* Mauder HVAC - design tokens + base reset */

:root {
  /* Brand */
  --red:        #d8232f;
  --red-bright: #f0454f;
  --red-deep:   #b01b25;
  --blue:       #3498db;
  --blue-hover: #2782c4;
  --blue-wash:  #eaf3fb;

  /* Warm neutrals */
  --ink:        #1c1a17;
  --ink-2:      #48423b;
  --ink-3:      #6b6359;
  --ink-4:      #8c8478;
  --bg:         #f4f1ec;
  --surface:    #ffffff;
  --surface-2:  #f8f5f0;
  --hair:       #eee8df;
  --th-bg:      #ffffff;   /* table header - same white as rows; defined by the rule, not a fill */
  --th-line:    #e3ddd0;   /* header bottom rule */
  --row-hover:  #f9f6ef;   /* super-light warm tan, lighter than --bg */

  /* Dark rail */
  --dk:        #1c1813;
  --dk-2:      #141009;
  --dk-txt:    #c6bfb4;
  --dk-dim:    #928a7e;
  --dk-active: rgba(255,255,255,.06);

  /* Status */
  --green:       #1f8a55;
  --green-wash:  #e7f3ea;
  --amber:       #a9780a;
  --amber-wash:  #f8efd6;
  --slate:       #6b6258;
  --slate-wash:  #efeae2;

  /* Shape & elevation */
  --r:    15px;
  --r-sm: 10px;
  --shadow:      0 1px 2px rgba(45,33,20,.05), 0 3px 10px rgba(45,33,20,.05);
  --shadow-lift: 0 3px 8px rgba(45,33,20,.07), 0 12px 28px rgba(45,33,20,.08);
  --shadow-pop:  0 18px 54px rgba(28,20,10,.24), 0 5px 16px rgba(28,20,10,.12);

  /* Typography */
  --ui:      "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --display: var(--ui);
  --font:    var(--ui);
  --mono:    var(--ui);
}

/* ── Base reset ─────────────────────────────────────── */
*{box-sizing:border-box;}
html,body{margin:0;}
body{font-family:var(--font);background:var(--bg);color:var(--ink);font-size:14px;line-height:1.45;
  -webkit-font-smoothing:antialiased;}
a{color:var(--blue);text-decoration:none;} a:hover{color:var(--blue-hover);}
h1,h2,h3{letter-spacing:-.02em;color:var(--ink);} h1{font-size:25px;font-weight:800;} h2,h3{font-weight:700;}
.num,td[class*=num],.money{font-variant-numeric:tabular-nums;}

/* bake content wrapper */
.content{background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow);padding:22px 24px;margin-bottom:22px;}

/* tables (bake index/view) */
table{width:100%;border-collapse:collapse;font-size:13px;}
table thead th{text-align:left;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);
  font-weight:700;padding:10px 14px;background:var(--th-bg);border-bottom:1px solid var(--th-line);}
table thead th a{color:var(--ink-3);} table thead th a:hover{color:var(--ink);}
table tbody td{padding:11px 14px;border-bottom:1px solid var(--hair);color:var(--ink-2);}
table tbody tr:hover{background:var(--row-hover);}
td.actions{white-space:nowrap;} td.actions a{margin-right:10px;font-weight:600;font-size:12.5px;}

/* forms (FormHelper) */
form .input,form .text,form .select,form .checkbox{margin-bottom:16px;}
label{display:block;font-size:12px;font-weight:600;color:var(--ink-2);margin-bottom:6px;}
input,select,textarea{width:100%;font:inherit;font-size:13px;color:var(--ink);
  background:#fff;border:1px solid var(--hair);border-radius:10px;padding:10px 12px;outline:none;
  transition:border-color .12s,box-shadow .12s;}
input:focus,select:focus,textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-wash);}
input[type=checkbox]{width:auto;}
input:disabled,select:disabled,textarea:disabled{background:var(--surface-2);color:var(--ink-4);cursor:default;}
select{appearance:none;-webkit-appearance:none;padding-right:34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238c8478' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:12px;}

/* buttons & links styled as buttons (bake uses class="button") */
.button,button,input[type=submit]{display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:13px;
  font-weight:600;border:0;border-radius:10px;padding:9px 15px;cursor:pointer;background:var(--blue);color:#fff;}
.button:hover,button:hover,input[type=submit]:hover{background:var(--blue-hover);color:#fff;}
.button.button-outline,.button.button-clear{background:var(--surface);color:var(--ink-2);box-shadow:var(--shadow);}
.button.button-outline:hover,.button.button-clear:hover{background:var(--surface-2);color:var(--ink);box-shadow:var(--shadow-lift);}

/* utilities bake templates rely on */
.float-right{float:right;} .clearfix::after{content:"";display:table;clear:both;}

/* pagination buttons (used in the table footer) */
.pg-btn{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:32px;padding:0 12px;
  background:var(--surface);border-radius:9px;color:var(--ink-2);font-size:12.5px;font-weight:600;
  text-decoration:none;box-shadow:var(--shadow);transition:box-shadow .12s,color .12s;}
.pg-btn:hover{box-shadow:var(--shadow-lift);color:var(--ink);}
.pg-btn.on{background:var(--blue);color:#fff;box-shadow:none;}
.pg-btn.is-off{color:var(--ink-4);background:transparent;box-shadow:none;cursor:default;}

/* disabled controls (set by the global double-submit guard) */
/* Disabled controls read as greyed-out, not just faded - a solid colour at low
   opacity still looks active. pointer-events:none also kills the hover state. */
button:disabled,.btn:disabled,.button:disabled,input[type=submit]:disabled{
  background:var(--surface-2);color:var(--ink-4);box-shadow:none;cursor:default;pointer-events:none;}

/* flash */
.message{padding:12px 16px;border-radius:10px;margin-bottom:16px;font-weight:500;font-size:13px;}
.message.success{background:var(--green-wash);color:var(--green);}
.message.error{background:#fdecec;color:var(--red);}

/* ── Component & layout layer (ported from portal-mockup.html) ─────────────── */

/* app shell grid */
.app{display:grid;grid-template-columns:var(--nav-w,232px) 1fr;min-height:100vh;}
.main{display:flex;flex-direction:column;min-width:0;}
.content-area{padding:24px 28px 54px;}

/* ── dark rail ── */
.side{background:linear-gradient(186deg,var(--dk),var(--dk-2));display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;color:var(--dk-txt);z-index:10;}
.brand{padding:20px 16px 18px;}
.brand-logo{display:block;width:100%;height:auto;background:#fff;border-radius:11px;padding:11px 14px;}
.logo{display:inline-flex;flex-direction:column;align-items:center;border:1.5px solid var(--red-bright);
  border-radius:50%/58%;padding:5px 18px 6px;box-shadow:0 0 0 4px rgba(240,69,79,.08);}
.logo .word{font-size:21px;font-weight:800;font-style:italic;letter-spacing:-.01em;color:var(--red-bright);line-height:1;text-shadow:0 1px 0 rgba(0,0,0,.4);}
.logo .tag{font-size:7.5px;letter-spacing:.22em;color:#d6d0c6;margin-top:3px;font-weight:600;}

.nav{padding:8px 12px;overflow-y:auto;flex:1;}
.nav .grp{font-size:10px;letter-spacing:.17em;text-transform:uppercase;color:var(--dk-dim);padding:18px 10px 7px;font-weight:700;}
.nav a{display:flex;align-items:center;gap:11px;padding:8px 11px;border-radius:8px;color:var(--dk-txt);
  font-size:13.5px;font-weight:500;position:relative;margin:1px 0;transition:background .14s,color .14s;}
.nav a .ic{width:17px;height:17px;flex:none;color:var(--dk-dim);transition:color .14s;}
.nav a:hover{background:rgba(255,255,255,.045);color:#efece6;}
.nav a:hover .ic{color:#b4ac9f;}
.nav a.on{background:var(--dk-active);color:#fff;font-weight:600;}
.nav a.on .ic{color:var(--red-bright);}
.nav a.on::before{content:"";position:absolute;left:-12px;top:8px;bottom:8px;width:3px;border-radius:0 4px 4px 0;background:var(--red-bright);}

.side-foot{padding:14px 12px;display:flex;align-items:center;gap:10px;}
.avatar{width:31px;height:31px;border-radius:9px;background:linear-gradient(140deg,var(--red),var(--red-deep));color:#fff;
  display:grid;place-items:center;font-size:12px;font-weight:700;flex:none;}
.side-foot .who-block{flex:1;min-width:0;}
.side-foot .who{font-size:12.5px;font-weight:600;color:#efece6;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.side-foot .role{font-size:11px;color:var(--dk-dim);margin-top:1px;}
.side-foot .cog{flex:none;display:flex;align-items:center;color:var(--dk-dim);cursor:pointer;}
.side-foot .cog svg{width:18px;height:18px;}
.side-foot .cog:hover{color:#b4ac9f;}

/* ── topbar ── */
.topbar{min-height:62px;background:rgba(244,241,236,.85);backdrop-filter:saturate(180%) blur(10px);
  display:flex;align-items:center;gap:14px;padding:13px 28px;position:sticky;top:0;z-index:5;
  border-bottom:1px solid var(--hair);}
.crumbs{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-4);font-weight:500;}
.crumbs b{color:var(--ink);font-weight:600;}
.crumbs .sep{opacity:.5;}
.search{margin-left:6px;flex:0 1 340px;max-width:340px;display:flex;align-items:center;gap:10px;background:var(--surface);
  border-radius:11px;padding:9px 13px;color:var(--ink-4);font-size:13px;box-shadow:var(--shadow);transition:box-shadow .15s;}
.search:focus-within{box-shadow:0 0 0 3px var(--blue-wash), var(--shadow);}
.search input{border:0;background:transparent;outline:none;font:inherit;color:var(--ink);width:100%;}
.search kbd{margin-left:auto;font:11px var(--mono);color:var(--ink-4);background:var(--surface-2);border-radius:5px;padding:2px 6px;}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:6px;}

/* ── button family ── */
.btn{display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:13px;font-weight:600;border:0;border-radius:11px;
  padding:10px 16px;cursor:pointer;white-space:nowrap;line-height:1;box-shadow:var(--shadow);transition:.15s;}
.btn:hover{box-shadow:var(--shadow-lift);}
.btn .ic{width:15px;height:15px;}
.btn-primary{background:var(--blue);color:#fff;}
.btn-primary:hover{background:var(--blue-hover);color:#fff;}
.btn-danger{background:var(--red);color:#fff;}
.btn-danger:hover{background:var(--red-deep);color:#fff;}
.btn-ghost{background:var(--surface);color:var(--ink-2);}
.btn-ghost:hover{color:var(--ink);}
.btn-ondark{background:rgba(255,255,255,.1);color:#fff;}
.btn-ondark:hover{background:rgba(255,255,255,.17);color:#fff;}
.btn-sm{padding:8px 13px;font-size:12.5px;border-radius:10px;}
.icon-btn{width:38px;height:38px;display:grid;place-items:center;border:0;border-radius:11px;background:transparent;
  color:var(--ink-3);cursor:pointer;position:relative;transition:.15s;}
.icon-btn:hover{color:var(--ink);background:rgba(28,24,19,.06);}
.icon-btn .dot{position:absolute;top:9px;right:10px;width:7px;height:7px;border-radius:50%;background:var(--red);box-shadow:0 0 0 2px var(--bg);}

/* ── greeting + stats bar ── */
.greeting{display:flex;align-items:flex-end;gap:16px;margin:4px 2px 20px;}
.greeting h1{font-size:25px;font-weight:800;letter-spacing:-.03em;margin:0;}
.greeting .saying{font-size:13.5px;color:var(--ink-3);margin-top:6px;}
.greeting .gr-right{margin-left:auto;text-align:right;}
.greeting .date{font-size:13px;color:var(--ink-2);font-weight:600;}
.greeting .period-pill{display:inline-flex;align-items:center;gap:7px;margin-top:7px;font-size:12px;font-weight:600;
  color:var(--green);background:var(--green-wash);border-radius:20px;padding:4px 11px;}
.greeting .period-pill i{width:6px;height:6px;border-radius:50%;background:var(--green);}

.statbar{display:flex;background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow);
  padding:4px 0;margin-bottom:22px;}
.statbar .s{flex:1;padding:16px 22px;position:relative;}
.statbar .s + .s::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:1px;background:var(--hair);}
.statbar .s-num{font-size:23px;font-weight:800;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums;}
.statbar .s-num .cur{color:var(--ink-3);font-weight:700;}
.statbar .s-lab{font-size:12px;color:var(--ink-3);font-weight:600;margin-top:8px;}

/* ── section heads ── */
.sec-head{display:flex;align-items:flex-end;gap:16px;margin:6px 2px 14px;}
.sec-head h2{font-family:var(--display);font-size:17px;font-weight:600;letter-spacing:-.02em;margin:0;}
.sec-head .meta{font-size:12px;color:var(--ink-4);font-weight:500;}
.sec-head .right{margin-left:auto;display:flex;gap:10px;align-items:center;}
.link{color:var(--blue);font-weight:600;font-size:12.5px;cursor:pointer;}
.link:hover{color:var(--blue-hover);}

/* ── panels + grid ── */
.grid-2{display:grid;grid-template-columns:1.6fr 1fr;gap:20px;align-items:start;margin-bottom:22px;}
.panel{background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;}
.panel-head{display:flex;align-items:center;gap:10px;padding:17px 20px 14px;}
.panel-head h2{font-family:var(--display);font-size:15px;font-weight:600;margin:0;letter-spacing:-.01em;}
.panel-head .meta{font-size:12px;color:var(--ink-4);}
.panel-head .right{margin-left:auto;display:flex;gap:8px;align-items:center;}
.col{display:flex;flex-direction:column;gap:20px;}

/* ── needs attention ── */
.period-strip{padding:0 20px 16px;}
.period-strip .pr{display:flex;justify-content:space-between;align-items:baseline;font-size:12.5px;color:var(--ink-3);margin-bottom:9px;}
.period-strip .pr b{color:var(--ink);font-size:13px;font-weight:700;}
.period-strip .track{height:7px;border-radius:6px;background:var(--surface-2);overflow:hidden;}
.period-strip .track span{display:block;height:100%;background:var(--blue);border-radius:6px;}
.attn{padding:4px 8px 10px;}
.attn a{display:flex;align-items:center;gap:13px;padding:11px 12px;border-radius:12px;cursor:pointer;transition:background .12s;}
.attn a:hover{background:var(--surface-2);}
.attn .cnt{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-family:var(--display);
  font-size:16px;font-weight:600;flex:none;}
.attn .cnt.b{color:var(--blue);background:var(--blue-wash);}
.attn .cnt.a{color:var(--amber);background:var(--amber-wash);}
.attn .cnt.s{color:var(--slate);background:var(--slate-wash);}
.attn .tx{font-size:13px;color:var(--ink-2);font-weight:500;line-height:1.35;}
.attn .tx b{color:var(--ink);font-weight:700;}
.attn .go{margin-left:auto;color:var(--ink-4);flex:none;}
.attn a:hover .go{color:var(--blue);}

/* ── data tables ── */
table.data{width:100%;border-collapse:collapse;font-size:13px;}
table.data thead th{text-align:left;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);
  font-weight:700;padding:10px 20px;background:var(--th-bg);border-bottom:1px solid var(--th-line);white-space:nowrap;}
table.data thead th.sort{cursor:pointer;}
table.data thead th.sort:hover{color:var(--ink);}
table.data thead th .car{color:var(--blue);margin-left:3px;font-size:9px;}
table.data thead th.r,table.data td.r{text-align:right;}
table.data tbody td{padding:12px 20px;border-bottom:1px solid var(--hair);color:var(--ink-2);white-space:nowrap;}
table.data tbody tr:last-child td{border-bottom:0;}
table.data tbody tr{transition:background .1s;}
table.data tbody tr[data-href]{cursor:pointer;}
table.data tbody tr:hover{background:var(--row-hover);}
table.data tbody tr[data-href]:focus-visible{outline:2px solid var(--blue);outline-offset:-2px;background:var(--row-hover);}
td .person{display:flex;align-items:center;gap:10px;}
td .ava{width:29px;height:29px;border-radius:9px;display:grid;place-items:center;font-size:10.5px;font-weight:700;color:#fff;flex:none;}
td .pri{color:var(--ink);font-weight:600;}
td .role{font-size:11.5px;color:var(--ink-3);}
.mono{font-size:12.5px;color:var(--ink-2);font-weight:500;font-variant-numeric:tabular-nums;}
.muni{color:var(--ink-2);}
.money{font-weight:700;color:var(--ink);}
.sub-rate{color:var(--ink-3);}
.rowx{opacity:0;transition:.12s;color:var(--ink-4);font-weight:700;}
table.data tbody tr:hover .rowx{opacity:1;}
table.data tfoot td{padding:13px 20px;font-family:var(--display);font-weight:600;color:var(--ink);background:var(--surface-2);}
table.data tfoot td.lab{font-family:var(--font);color:var(--ink-3);font-weight:600;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;}

/* ── tfoot pagination strip ── */
.tfoot{display:flex;align-items:center;gap:12px;padding:14px 20px;background:var(--surface);border-top:1px solid var(--hair);font-size:12.5px;color:var(--ink-3);}
.tfoot b{color:var(--ink);}
.tfoot .pg{margin-left:auto;display:flex;align-items:center;gap:5px;}

/* ── pill status badges ── */
.pill{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;border-radius:20px;padding:3px 11px;line-height:1.4;}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;}
.pill.ready,.pill.paid,.pill.finalized{color:var(--green);background:var(--green-wash);}
.pill.draft,.pill.open{color:var(--slate);background:var(--slate-wash);}
.pill.hold,.pill.pending{color:var(--amber);background:var(--amber-wash);}

/* ── work entries page head ── */
.page-head{display:flex;align-items:flex-end;gap:16px;margin-bottom:22px;}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);margin-bottom:6px;}
.page-head h1{font-family:var(--display);font-size:26px;font-weight:600;letter-spacing:-.025em;margin:0;}
.page-head .lead{font-size:13.5px;color:var(--ink-3);margin-top:6px;}
.page-head .right{margin-left:auto;display:flex;gap:10px;align-items:center;}

/* ── toolbar ── */
.toolbar{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap;}
.seg{display:inline-flex;border-radius:11px;overflow:hidden;background:var(--surface);box-shadow:var(--shadow);}
.seg button{font:inherit;font-size:12.5px;font-weight:600;border:0;background:transparent;color:var(--ink-3);
  padding:8px 14px;cursor:pointer;transition:.12s;}
.seg button.on{background:var(--blue);color:#fff;}
.seg button:hover:not(.on){color:var(--ink);}
.field{display:flex;align-items:center;gap:8px;background:var(--surface);border-radius:11px;padding:8px 13px;
  font-size:12.5px;color:var(--ink-2);cursor:pointer;box-shadow:var(--shadow);transition:.15s;}
.field:hover{box-shadow:var(--shadow-lift);}
.field .ic{width:14px;height:14px;color:var(--ink-4);}
.field .v{color:var(--ink);font-weight:600;}
.field .x{color:var(--ink-4);font-size:10px;}
.tool-search{display:flex;align-items:center;gap:8px;background:var(--surface);border-radius:11px;padding:8px 13px;
  color:var(--ink-4);font-size:12.5px;min-width:210px;box-shadow:var(--shadow);transition:.15s;}
.tool-search:focus-within{box-shadow:0 0 0 3px var(--blue-wash), var(--shadow);}
.tool-search input{border:0;background:transparent;outline:none;font:inherit;color:var(--ink);width:100%;}
.tablewrap{background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;}

/* ── drawer ── */
.scrim{position:fixed;inset:0;background:rgba(20,14,6,.44);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .22s;z-index:40;}
.scrim.show{opacity:1;pointer-events:auto;}
.drawer{position:fixed;top:0;right:0;height:100vh;width:448px;max-width:92vw;background:var(--surface);
  box-shadow:var(--shadow-pop);transform:translateX(100%);transition:transform .26s cubic-bezier(.4,0,.2,1);z-index:50;display:flex;flex-direction:column;}
.drawer.show{transform:none;}
.drawer-head{display:flex;align-items:center;gap:10px;padding:20px 24px 16px;}
.drawer-head h3{font-family:var(--display);margin:0;font-size:18px;font-weight:600;letter-spacing:-.02em;}
.drawer-head .sub{font-size:12px;color:var(--ink-4);}
.drawer-body{padding:6px 24px 20px;overflow-y:auto;flex:1;}
.drawer-foot{padding:16px 24px;display:flex;gap:10px;justify-content:flex-end;background:var(--surface-2);}
.fld{margin-bottom:17px;}
.fld label{display:block;font-size:12px;font-weight:600;color:var(--ink-2);margin-bottom:7px;}
.fld label .req{color:var(--red);}
.fld input,.fld select,.fld textarea{width:100%;font:inherit;font-size:13px;color:var(--ink);background:#fff;
  border:1px solid var(--hair);border-radius:11px;padding:10px 12px;outline:none;transition:border-color .12s,box-shadow .12s;}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-wash);}
.fld select{background-color:#fff;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238c8478' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:12px;padding-right:34px;}

/* form pages */
.formwrap{max-width:680px;}
.form-card{padding:0;}
.form-card .form-section{padding:20px 24px;}
.form-card .form-section + .form-section{border-top:1px solid var(--hair);}
.form-card .form-section .fld:last-child{margin-bottom:0;}
.form-foot{display:flex;justify-content:flex-end;gap:10px;padding:16px 24px;border-top:1px solid var(--hair);}
.fld textarea{min-height:92px;resize:vertical;}
.fld-err{font-size:11.5px;color:var(--red);margin-top:6px;}
.fld.is-error input,.fld.is-error select,.fld.is-error textarea{border-color:var(--red);}
.fld.fld-check label,.fld.checkbox label{display:inline-flex;align-items:center;gap:9px;margin:0;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;}
.fld.fld-check input,.fld.checkbox input{width:auto;}
.fld .hint{font-size:11.5px;color:var(--ink-4);margin-top:6px;}
.fld-row{display:grid;grid-template-columns:1fr 1fr;gap:13px;}
.calc{background:var(--blue-wash);border-radius:12px;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;margin-top:2px;}
.calc .l{font-size:12px;color:var(--blue-hover);font-weight:700;}
.calc .v{font-family:var(--display);font-size:24px;font-weight:600;color:var(--blue-hover);letter-spacing:-.02em;}
.hint-foot{margin-top:24px;text-align:center;color:var(--ink-4);font-size:11.5px;}
.hint-foot b{color:var(--ink-3);}

/* ── responsive: collapse grid at 1180px ── */
@media (max-width:1180px){.grid-2{grid-template-columns:1fr;}}

/* ── hamburger: hidden on desktop ── */
.nav-toggle{display:none;}
@media (max-width:760px){
  .app{grid-template-columns:1fr;}
  .nav-toggle{display:grid;}
  .side{position:fixed;left:0;top:0;bottom:0;width:236px;transform:translateX(-100%);
    transition:transform .26s cubic-bezier(.4,0,.2,1);z-index:60;}
  .side.open{transform:none;box-shadow:var(--shadow-pop);}
  .nav-scrim{position:fixed;inset:0;background:rgba(20,14,6,.44);backdrop-filter:blur(2px);
    opacity:0;pointer-events:none;transition:opacity .22s;z-index:55;}
  .nav-scrim.open{opacity:1;pointer-events:auto;}
}
@media (min-width:761px){ .nav-scrim{display:none;} }

/* login / auth layout */
.auth{min-height:100vh;display:grid;place-items:center;padding:24px;background:var(--bg);}
.auth-card{width:100%;max-width:380px;background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow-lift);padding:30px 30px 34px;}
.auth-brand{display:flex;justify-content:center;margin-bottom:18px;}
.auth-logo{width:210px;max-width:78%;height:auto;}
.auth-card h1,.auth-card h3{font-size:19px;margin:0 0 18px;}
.auth-card .button,.auth-card button,.auth-card input[type=submit]{width:100%;justify-content:center;margin-top:6px;}
.auth-brand .logo .tag{color:var(--ink-3);}

/* error pages */
.error-container{max-width:640px;margin:60px auto;padding:30px 32px;background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow);}
.error-container .button{margin-top:18px;}

/* ── detail pages ── */
.back-link{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;
  color:var(--ink-3);text-decoration:none;margin-bottom:14px;}
.back-link:hover{color:var(--ink);}
.back-link svg{width:15px;height:15px;}
.detail-hero{display:flex;align-items:center;gap:16px;background:var(--surface);border-radius:var(--r);
  box-shadow:var(--shadow);padding:20px 22px;margin-bottom:16px;}
.detail-hero .ava{width:56px;height:56px;border-radius:15px;color:#fff;display:flex;align-items:center;
  justify-content:center;font-size:20px;font-weight:700;flex:none;}
.detail-hero .ava.red{background:linear-gradient(135deg,#e8444e,#b01b25);}
.detail-hero h1{font-size:22px;font-weight:700;margin:0;letter-spacing:-.02em;color:var(--ink);}
.detail-hero .meta{display:flex;align-items:center;gap:12px;margin-top:7px;flex-wrap:wrap;}
.detail-hero .role{font-size:13px;font-weight:600;color:var(--ink-3);}
.detail-hero .contact{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:700;
  color:var(--ink);text-decoration:none;}
.detail-hero .contact svg{width:15px;height:15px;color:var(--blue);}
.detail-hero .h-actions{margin-left:auto;display:flex;gap:8px;}

.panel-head--divide{border-bottom:1px solid var(--hair);}
.panel-link{font-size:12px;font-weight:600;color:var(--blue);text-decoration:none;}
.panel-link:hover{text-decoration:underline;}

.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:16px;}
.tile{display:flex;gap:13px;align-items:center;background:var(--surface);border-radius:var(--r);
  box-shadow:var(--shadow);padding:17px 18px;}
.tile .ico{width:40px;height:40px;border-radius:11px;flex:none;display:flex;align-items:center;justify-content:center;}
.tile .ico svg{width:19px;height:19px;}
.tile .ico.b{background:var(--blue-wash);color:var(--blue);}
.tile .ico.g{background:var(--green-wash);color:var(--green);}
.tile .ico.a{background:var(--amber-wash);color:var(--amber);}
.tile .t-body{display:flex;flex-direction:column;gap:7px;}
.tile .tv{font-size:23px;font-weight:700;color:var(--ink);letter-spacing:-.015em;line-height:1.05;
  font-variant-numeric:tabular-nums;}
.tile .tl{font-size:12.5px;font-weight:600;color:var(--ink-2);line-height:1.05;}
.tile .tc{font-size:12px;font-weight:600;line-height:1.05;}
.tile .tc.b{color:var(--blue);}.tile .tc.g{color:var(--green);}.tile .tc.a{color:var(--amber);}

.detail-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:16px;align-items:start;}
.detail-grid .col{display:flex;flex-direction:column;gap:16px;}
.detail-narrow{max-width:640px;}

.drow{display:flex;gap:14px;padding:9px 18px;border-bottom:1px solid var(--hair);font-size:13.5px;align-items:baseline;}
.drow:last-child{border-bottom:0;padding-bottom:15px;}
.drow .k{width:108px;flex:none;color:var(--ink-4);font-weight:600;font-size:12px;}
.drow .v{color:var(--ink);font-weight:600;}
.drow .v.muted{color:var(--ink-4);font-weight:600;}

.panel>table.data tbody tr:last-child td{padding-bottom:16px;}

@media(max-width:860px){.tiles{grid-template-columns:1fr;}.detail-grid{grid-template-columns:1fr;}}

/* ── person form ── */
.formwrap--wide{max-width:880px;}
.person-form{padding:24px 26px 8px;}
.person-form__grid{display:grid;grid-template-columns:180px 1fr;gap:30px;align-items:start;}
.person-form__fields{min-width:0;}
.form-section{margin-bottom:22px;}
.form-section:last-child{margin-bottom:6px;}
.form-section__title{font-size:12px;font-weight:700;letter-spacing:.02em;color:var(--ink-3);
  text-transform:none;margin:0 0 12px;padding-bottom:7px;border-bottom:1px solid var(--hair);}

/* circular uploader */
.avatar-up{display:flex;flex-direction:column;align-items:center;gap:11px;}
.avatar-up__ring{position:relative;width:148px;height:148px;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;background:var(--surface-2);border:2px dashed #d8cfc0;
  overflow:hidden;transition:.15s;}
.avatar-up__ring:hover{border-color:var(--blue);background:var(--blue-wash);}
.avatar-up.has-photo .avatar-up__ring{border-style:solid;border-color:var(--hair);}
.avatar-up__img{width:100%;height:100%;object-fit:cover;}
.avatar-up__empty{display:flex;flex-direction:column;align-items:center;gap:7px;color:var(--ink-4);font-size:12px;font-weight:600;}
.avatar-up__empty svg{width:30px;height:30px;}
.avatar-up__input{position:absolute;inset:0;opacity:0;cursor:pointer;}
.avatar-up__meta{display:flex;flex-direction:column;align-items:center;gap:3px;}
.avatar-up__hint{font-size:11px;color:var(--ink-4);}
.avatar-up__remove{background:none;border:0;color:var(--red);font:inherit;font-size:11.5px;font-weight:600;cursor:pointer;padding:0;}
.avatar-up__remove:hover{text-decoration:underline;}
.avatar-up__remove[hidden]{display:none;}
.avatar-up__img[hidden],.avatar-up__empty[hidden]{display:none;}

/* money prefix */
.money-wrap{position:relative;display:block;}
.money-wrap::before{content:"$";position:absolute;left:12px;top:50%;transform:translateY(-50%);
  font-size:13px;color:var(--ink-4);pointer-events:none;}
.money-wrap input{padding-left:22px;}

/* status strip + toggle */
.status-strip{display:flex;align-items:center;justify-content:space-between;gap:24px;
  margin:8px -26px 0;padding:18px 26px;border-top:1px solid var(--hair);background:var(--surface);}
.person-form__foot{margin:0 -26px;border-radius:0 0 var(--r) var(--r);}
.status-strip__text strong{display:block;font-size:13px;color:var(--ink);margin-bottom:3px;}
.status-strip__text p{margin:0;font-size:12px;color:var(--ink-3);max-width:52ch;line-height:1.5;}
.switch{display:inline-flex;align-items:center;gap:10px;cursor:pointer;flex-shrink:0;}
.switch__input{position:absolute;opacity:0;width:0;height:0;}
.switch__track{position:relative;width:44px;height:25px;border-radius:13px;background:#cfc6b8;transition:.18s;}
.switch__thumb{position:absolute;top:3px;left:3px;width:19px;height:19px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.2);transition:.18s;}
.switch__input:checked + .switch__track{background:var(--green);}
.switch__input:checked + .switch__track .switch__thumb{transform:translateX(19px);}
.switch__input:focus-visible + .switch__track{box-shadow:0 0 0 3px var(--blue-wash);}
.switch__label{font-size:13px;font-weight:600;color:var(--ink-2);min-width:54px;}

@media (max-width:760px){
  .person-form__grid{grid-template-columns:1fr;justify-items:center;}
  .person-form__fields{width:100%;}
  .status-strip{flex-direction:column;align-items:flex-start;gap:14px;}
}

/* avatar image variants */
.ava-img{padding:0;overflow:hidden;}
.ava-img img{width:100%;height:100%;object-fit:cover;}
.cell-person{display:flex;align-items:center;gap:10px;}
.row-ava{width:30px;height:30px;border-radius:50%;object-fit:cover;flex-shrink:0;}
.row-ava--blank{display:grid;place-items:center;background:var(--blue-wash);color:var(--blue-hover);
  font-size:12px;font-weight:700;}