/* ==========================================================================
   Thirdy's Group OS — design system
   Single stylesheet. No framework, no build step, no runtime cost.
   ========================================================================== */

/* ── Tokens ────────────────────────────────────────────────────── */
:root{
  --gold:#d4af37; --gold-dk:#b8962f; --gold-soft:rgba(212,175,55,.14);

  --ok:#46a171; --ok-soft:rgba(70,161,113,.14);
  --warn:#d5803b; --warn-soft:rgba(213,128,59,.14);
  --bad:#e56458; --bad-soft:rgba(229,100,88,.14);
  --info:#5e9fe8; --info-soft:rgba(94,159,232,.14);
  --plum:#bf8eda; --teal:#4fb9c9; --rose:#df84a8;

  --r-xs:4px; --r-sm:6px; --r:9px; --r-lg:13px; --r-full:999px;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;

  --sb-w:236px; --sb-w-collapsed:64px; --tb-h:58px;

  --ease:cubic-bezier(.32,.72,0,1);
  --fast:110ms var(--ease);
  --med:180ms var(--ease);

  --font:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --display:'Cinzel',Georgia,serif;
  --mono:ui-monospace,'SF Mono',Menlo,monospace;
}

html[data-theme="dark"]{
  --bg:#08131f; --surface:#0d1f33; --surface-2:#122842; --raised:#17324f;
  --line:#1d3a5c; --line-soft:rgba(255,255,255,.07);
  --text:#e8eef7; --text-2:#9fb2c9; --text-3:#6d829c;
  --field:#0a1a2b;
  --shadow:0 10px 34px rgba(0,0,0,.42);
  --scrim:rgba(3,9,17,.72);
  --grid:rgba(255,255,255,.055);
}
html[data-theme="light"]{
  --bg:#f4f6fa; --surface:#ffffff; --surface-2:#f7f9fc; --raised:#eef2f8;
  --line:#dde4ee; --line-soft:rgba(10,25,47,.07);
  --text:#0e1c2f; --text-2:#4e6076; --text-3:#7d8ea3;
  --field:#f7f9fc;
  --shadow:0 10px 30px rgba(16,36,64,.13);
  --scrim:rgba(16,32,56,.42);
  --grid:rgba(10,25,47,.07);
}

/* ── Reset ─────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--font); font-size:14px; line-height:1.5;
  background:var(--bg); color:var(--text);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow:hidden;
}
svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.75;
    stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:var(--info);text-decoration:none}
kbd{
  font-family:var(--mono);font-size:10px;padding:2px 5px;border-radius:var(--r-xs);
  background:var(--raised);border:1px solid var(--line);color:var(--text-2);
}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:var(--r-full)}
::-webkit-scrollbar-thumb:hover{background:var(--text-3)}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:var(--r-xs)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ── Boot splash ───────────────────────────────────────────────── */
#boot{
  position:fixed;inset:0;z-index:900;background:var(--bg);
  display:grid;place-content:center;gap:var(--s5);justify-items:center;
}
#boot.done{opacity:0;pointer-events:none;transition:opacity 200ms var(--ease)}
.boot-mark{
  width:52px;height:52px;border-radius:var(--r-lg);display:grid;place-items:center;
  font-family:var(--display);font-size:26px;font-weight:700;color:#08131f;
  background:linear-gradient(140deg,var(--gold),#f0d980);
}
.boot-bar{width:150px;height:2px;background:var(--line);border-radius:var(--r-full);overflow:hidden}
.boot-bar i{display:block;height:100%;width:40%;background:var(--gold);border-radius:inherit;
  animation:bootslide 900ms var(--ease) infinite}
@keyframes bootslide{0%{transform:translateX(-100%)}100%{transform:translateX(350%)}}

/* ── Shell ─────────────────────────────────────────────────────── */
#shell{display:flex;height:100vh;height:100dvh;overflow:hidden}
#main{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden}

#view{
  flex:1;overflow-y:auto;overflow-x:hidden;padding:var(--s5) var(--s6) var(--s7);
  scroll-behavior:smooth;
}
#view:focus{outline:none}

/* View transition: cheap opacity+translate only — no layout thrash */
.view-in{animation:viewIn 150ms var(--ease) both}
@keyframes viewIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ── Sidebar ─────────────────────────────────────────────────── */
#sidebar{
  width:var(--sb-w);flex-shrink:0;background:var(--surface);
  border-right:1px solid var(--line);display:flex;flex-direction:column;
  transition:width var(--med);overflow:hidden;
}
html.sb-collapsed #sidebar{width:var(--sb-w-collapsed)}
html.sb-collapsed .sb-brand-txt,
html.sb-collapsed .sb-nav-label,
html.sb-collapsed .sb-sec-hd,
html.sb-collapsed .sb-scope,
html.sb-collapsed .sb-key,
html.sb-collapsed .sb-foot-btn span,
html.sb-collapsed .sb-user-txt{display:none}
html.sb-collapsed .sb-collapse svg{transform:rotate(180deg)}
html.sb-collapsed .sb-nav-item{justify-content:center;padding-inline:0}

.sb-brand{display:flex;align-items:center;gap:var(--s3);padding:var(--s4);
  border-bottom:1px solid var(--line);min-height:var(--tb-h)}
.sb-logo{width:30px;height:30px;border-radius:var(--r-sm);display:grid;place-items:center;
  font-family:var(--display);font-size:15px;font-weight:700;color:#08131f;flex-shrink:0;
  background:linear-gradient(140deg,var(--gold),#f0d980)}
.sb-brand-txt{min-width:0;line-height:1.15}
.sb-brand-txt b{display:block;font-family:var(--display);font-size:13px;letter-spacing:.1em}
.sb-brand-txt span{font-size:10px;color:var(--text-3);letter-spacing:.08em;text-transform:uppercase}
.sb-collapse{margin-left:auto;color:var(--text-3);padding:4px;border-radius:var(--r-xs)}
.sb-collapse:hover{color:var(--text);background:var(--raised)}
.sb-collapse svg{width:15px;height:15px;transition:transform var(--med)}

/* Property scope switcher */
.sb-scope{padding:var(--s3) var(--s3) var(--s2);display:grid;gap:2px}
.sb-scope-hd{font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-3);padding:0 var(--s2) var(--s2)}
.sb-scope-btn{
  display:flex;align-items:center;gap:var(--s2);padding:7px var(--s2);border-radius:var(--r-sm);
  font-size:12.5px;font-weight:600;color:var(--text-2);width:100%;min-height:34px;
  transition:background var(--fast),color var(--fast);
}
.sb-scope-btn:hover{background:var(--raised);color:var(--text)}
.sb-scope-btn.on{background:var(--raised);color:var(--text)}
.sb-scope-btn.on .sb-scope-name{font-weight:700}
.sb-scope-dot{width:8px;height:8px;border-radius:var(--r-full);flex-shrink:0;background:var(--pc,var(--gold))}
.sb-scope-dot.all{background:conic-gradient(from 180deg,#d4af37,#4a9fd8,#6cbf8b,#d4af37)}
.sb-scope-name{flex:1;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-scope-n{font-size:10px;color:var(--text-3);font-variant-numeric:tabular-nums}

/* Nav */
.sb-nav{flex:1;overflow-y:auto;padding:var(--s2) var(--s3) var(--s4);display:grid;gap:1px;align-content:start}
.sb-sec-hd{font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-3);padding:var(--s4) var(--s2) var(--s2)}
.sb-nav-item{
  display:flex;align-items:center;gap:var(--s3);padding:8px var(--s2);border-radius:var(--r-sm);
  color:var(--text-2);font-size:13px;font-weight:500;min-height:36px;position:relative;
  transition:background var(--fast),color var(--fast);
}
.sb-nav-item:hover{background:var(--raised);color:var(--text)}
.sb-nav-item.on{background:var(--gold-soft);color:var(--gold);font-weight:600}
.sb-nav-item.on::before{content:"";position:absolute;left:-var(--s3);left:calc(var(--s3) * -1);
  top:8px;bottom:8px;width:2px;background:var(--gold);border-radius:var(--r-full)}
.sb-nav-item svg{width:17px;height:17px}
.sb-nav-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-key{font-size:10px;color:var(--text-3);font-family:var(--mono)}
.sb-badge{font-size:10px;font-weight:700;padding:1px 6px;border-radius:var(--r-full);
  background:var(--bad);color:#fff;font-variant-numeric:tabular-nums}

.sb-foot{border-top:1px solid var(--line);padding:var(--s3);display:grid;gap:var(--s1)}
.sb-foot-btn{display:flex;align-items:center;gap:var(--s3);padding:8px var(--s2);
  border-radius:var(--r-sm);color:var(--text-2);font-size:12.5px;font-weight:500;min-height:36px;
  transition:background var(--fast)}
.sb-foot-btn:hover{background:var(--raised);color:var(--text)}
html[data-theme="dark"] .ico-sun{display:none}
html[data-theme="light"] .ico-moon{display:none}
.sb-user{display:flex;align-items:center;gap:var(--s3);padding:var(--s2);border-radius:var(--r-sm)}
.sb-avatar{width:26px;height:26px;border-radius:var(--r-full);display:grid;place-items:center;
  font-size:11px;font-weight:700;background:var(--gold-soft);color:var(--gold);flex-shrink:0}
.sb-user-txt{min-width:0;line-height:1.25}
.sb-user-txt b{display:block;font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-user-txt span{font-size:10px;color:var(--text-3)}

.sb-scrim{display:none}

/* ── Topbar ──────────────────────────────────────────────────── */
#topbar{
  height:var(--tb-h);flex-shrink:0;display:flex;align-items:center;gap:var(--s4);
  padding:0 var(--s5);border-bottom:1px solid var(--line);background:var(--surface);
}
.tb-burger{display:none;color:var(--text-2);padding:6px;border-radius:var(--r-sm)}
.tb-crumb{min-width:0;line-height:1.2}
.tb-crumb h1{font-family:var(--display);font-size:16px;font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-crumb span{font-size:11px;color:var(--text-3)}

.tb-search{
  margin-left:auto;display:flex;align-items:center;gap:var(--s2);min-width:0;
  width:min(320px,32vw);padding:7px var(--s3);border-radius:var(--r-sm);
  background:var(--field);border:1px solid var(--line);color:var(--text-3);
  font-size:12.5px;min-height:36px;transition:border-color var(--fast),color var(--fast);
}
.tb-search:hover{border-color:var(--text-3);color:var(--text-2)}
.tb-search span{flex:1;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-search svg{width:15px;height:15px}
.tb-right{display:flex;align-items:center;gap:var(--s3)}
.tb-icon{position:relative;color:var(--text-2);padding:7px;border-radius:var(--r-sm);
  transition:background var(--fast),color var(--fast)}
.tb-icon:hover{background:var(--raised);color:var(--text)}
.tb-icon .dot{position:absolute;top:5px;right:5px;width:7px;height:7px;border-radius:var(--r-full);
  background:var(--bad);border:2px solid var(--surface)}
.tb-clock{font-size:12px;color:var(--text-3);font-variant-numeric:tabular-nums;white-space:nowrap}

/* ── Layout primitives ─────────────────────────────────────────── */
.wrap{max-width:1400px}
.row{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.row-tight{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.spread{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);flex-wrap:wrap}
.push{margin-left:auto}
.stack{display:grid;gap:var(--s4)}
.stack-sm{display:grid;gap:var(--s2)}
.grid{display:grid;gap:var(--s3)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.sec{margin-bottom:var(--s6)}
.sec-hd{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s3)}
.sec-hd h2{font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-2)}
.sec-hd .line{flex:1;height:1px;background:var(--line)}
.sec-hd .note{font-size:11px;color:var(--text-3)}

.page-hd{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s4);
  flex-wrap:wrap;margin-bottom:var(--s5)}
.page-hd h2{font-family:var(--display);font-size:23px;font-weight:700;line-height:1.15;
  display:flex;align-items:center;gap:var(--s3)}
.page-hd p{font-size:12.5px;color:var(--text-2);margin-top:var(--s1)}

/* ── Floating Taglish staff guide ─────────────────────────────── */
.guide-fab{
  position:fixed;right:22px;bottom:22px;z-index:280;
  display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:8px 15px 8px 9px;
  border:1px solid color-mix(in srgb,var(--gold) 75%,var(--line));border-radius:var(--r-full);
  background:var(--gold);color:#08131f;box-shadow:0 12px 35px rgba(0,0,0,.34);
  font-size:12.5px;transition:transform var(--fast),box-shadow var(--fast);
}
.guide-fab:hover{transform:translateY(-2px);box-shadow:0 16px 42px rgba(0,0,0,.42)}
.guide-fab span{
  width:27px;height:27px;display:grid;place-items:center;border-radius:50%;
  background:#08131f;color:var(--gold);font-family:var(--display);font-size:16px;font-weight:700;
}
.guide-fab b{font-weight:800}
.guide-layer{position:fixed;inset:0;z-index:270;pointer-events:none}
.guide-shade{position:fixed;background:rgba(3,9,17,.42);backdrop-filter:saturate(.75)}
.guide-spotlight{
  position:fixed;border:3px solid var(--gold);border-radius:12px;
  box-shadow:0 0 0 3px rgba(212,175,55,.2),0 0 30px rgba(212,175,55,.55);
  animation:guidePulse 1.7s ease-in-out infinite;transition:inset 180ms var(--ease),width 180ms var(--ease),height 180ms var(--ease);
}
@keyframes guidePulse{50%{box-shadow:0 0 0 7px rgba(212,175,55,.13),0 0 38px rgba(212,175,55,.68)}}
.guide-card{
  position:fixed;right:22px;bottom:22px;z-index:281;width:min(390px,calc(100vw - 28px));
  padding:18px;background:var(--surface);border:1px solid var(--gold);border-radius:var(--r-lg);
  box-shadow:0 20px 60px rgba(0,0,0,.5);animation:guideIn 180ms var(--ease) both;
}
.guide-card.guide-card-left{right:auto;left:22px}
@keyframes guideIn{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
.guide-top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s3)}
.guide-top>div{display:grid;gap:2px}
.guide-top b{font-family:var(--display);font-size:16px}
.guide-kicker{font-size:9px;font-weight:800;letter-spacing:.14em;color:var(--gold)}
.guide-close{
  width:30px;height:30px;display:grid;place-items:center;border-radius:50%;
  color:var(--text-2);font-size:24px;line-height:1;transition:background var(--fast),color var(--fast);
}
.guide-close:hover{background:var(--raised);color:var(--text)}
.guide-progress{height:3px;margin:14px 0 9px;background:var(--raised);border-radius:var(--r-full);overflow:hidden}
.guide-progress i{display:block;height:100%;background:var(--gold);border-radius:inherit;transition:width var(--med)}
.guide-count{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.guide-card h3{font-size:17px;line-height:1.3;margin:6px 0 7px;color:var(--text)}
.guide-card p{font-size:13px;line-height:1.62;color:var(--text-2)}
.guide-tip{
  display:flex;gap:7px;align-items:center;margin-top:12px;padding:8px 10px;border-radius:var(--r-sm);
  background:var(--gold-soft);color:var(--text-2);font-size:11px;
}
.guide-tip span{font-weight:800;color:var(--gold);text-transform:uppercase;letter-spacing:.06em}
.guide-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}
.guide-actions .btn[disabled]{opacity:.42;cursor:not-allowed}

@media (max-width:620px){
  .guide-fab{right:12px;bottom:12px}
  .guide-card,.guide-card.guide-card-left{left:12px;right:12px;bottom:12px;width:auto;padding:16px}
  .guide-card p{font-size:12.5px;line-height:1.55}
  .guide-shade{background:rgba(3,9,17,.32)}
}

/* ── Card ────────────────────────────────────────────────────── */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s4) var(--s5)}
.card-tight{padding:var(--s3) var(--s4)}
.card-hd{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  margin-bottom:var(--s4);flex-wrap:wrap}
.card-hd h3{font-size:13px;font-weight:700}
.card-hd .note{font-size:11px;color:var(--text-3)}

/* KPI */
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s4) var(--s4) var(--s3);position:relative;overflow:hidden}
.kpi::before{content:"";position:absolute;inset:0 0 auto;height:2px;background:var(--kc,var(--line))}
.kpi-l{font-size:9.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--text-3);margin-bottom:var(--s2)}
.kpi-v{font-family:var(--display);font-size:25px;font-weight:700;line-height:1;
  margin-bottom:6px;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.kpi-m{font-size:11px;color:var(--text-2);line-height:1.4}
.meter{height:4px;border-radius:var(--r-full);background:var(--field);overflow:hidden;margin:2px 0 7px}
.meter i{display:block;height:100%;border-radius:inherit;background:var(--mc,var(--gold));
  transition:width var(--med)}

/* ── Buttons ────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:8px 14px;min-height:36px;border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--surface-2);color:var(--text);
  font-size:12.5px;font-weight:600;white-space:nowrap;
  transition:background var(--fast),border-color var(--fast),transform var(--fast);
}
.btn:hover{background:var(--raised)}
.btn:active{transform:scale(.98)}
.btn svg{width:15px;height:15px}
.btn-pri{background:var(--gold);border-color:var(--gold);color:#08131f}
.btn-pri:hover{background:var(--gold-dk);border-color:var(--gold-dk)}
.btn-ghost{background:transparent}
.btn-ghost:hover{background:var(--raised)}
.btn-danger{color:var(--bad);border-color:rgba(229,100,88,.35);background:var(--bad-soft)}
.btn-danger:hover{background:rgba(229,100,88,.2)}
.btn-sm{padding:5px 10px;min-height:30px;font-size:11.5px}
.btn-icon{padding:7px;min-height:32px;min-width:32px}
.btn[disabled]{opacity:.45;pointer-events:none}

.seg{display:inline-flex;background:var(--field);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:2px;gap:2px}
.seg button{padding:6px 12px;min-height:32px;border-radius:var(--r-xs);font-size:11.5px;
  font-weight:600;color:var(--text-3);white-space:nowrap;transition:background var(--fast),color var(--fast)}
.seg button:hover{color:var(--text)}
.seg button.on{background:var(--surface);color:var(--text);box-shadow:0 1px 2px rgba(0,0,0,.16)}

/* ── Forms ───────────────────────────────────────���──────────── */
.fld{display:grid;gap:6px;min-width:0}
.fld > label{font-size:9.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.inp{
  width:100%;padding:9px var(--s3);min-height:38px;border-radius:var(--r-sm);
  background:var(--field);border:1px solid var(--line);color:var(--text);font-size:13px;
  transition:border-color var(--fast);
}
.inp:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-soft)}
.inp::placeholder{color:var(--text-3)}
textarea.inp{min-height:76px;resize:vertical;line-height:1.5}
select.inp{cursor:pointer;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 15px) 17px,calc(100% - 10px) 17px;
  background-size:5px 5px;background-repeat:no-repeat;padding-right:32px}
.fld-hint{font-size:10.5px;color:var(--text-3);line-height:1.45}
.fld-err{font-size:10.5px;color:var(--bad);font-weight:600}
.inp.bad{border-color:var(--bad)}
.chk{display:flex;align-items:center;gap:9px;font-size:12.5px;cursor:pointer;min-height:34px}
.chk input{width:16px;height:16px;accent-color:var(--gold);cursor:pointer;flex-shrink:0}
.switch{position:relative;width:36px;height:20px;flex-shrink:0}
.switch input{opacity:0;width:100%;height:100%;cursor:pointer;margin:0}
.switch i{position:absolute;inset:0;border-radius:var(--r-full);background:var(--line);
  transition:background var(--fast);pointer-events:none}
.switch i::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;
  border-radius:var(--r-full);background:#fff;transition:transform var(--fast)}
.switch input:checked + i{background:var(--ok)}
.switch input:checked + i::after{transform:translateX(16px)}

/* ── Table ──────────────────────────────────────────────────── */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
table{width:100%;border-collapse:collapse;font-size:12.5px}
th{text-align:left;font-size:9.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-3);padding:11px var(--s4);border-bottom:1px solid var(--line);
  white-space:nowrap;background:var(--surface);position:sticky;top:0;z-index:1}
td{padding:10px var(--s4);border-bottom:1px solid var(--line-soft);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr{transition:background var(--fast)}
tbody tr:hover td{background:var(--surface-2)}
tr.clickable{cursor:pointer}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.t-strong{font-weight:700}
.t-mute{color:var(--text-3)}
.t-sm{font-size:11px}

/* ── Chips / badges ───────────────────────────────────────────── */
.chip{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;
  padding:3px 8px;border-radius:var(--r-full);white-space:nowrap;
  background:var(--raised);color:var(--text-2)}
.chip-dot{width:6px;height:6px;border-radius:var(--r-full);background:currentColor;flex-shrink:0}
.chip.ok{background:var(--ok-soft);color:var(--ok)}
.chip.warn{background:var(--warn-soft);color:var(--warn)}
.chip.bad{background:var(--bad-soft);color:var(--bad)}
.chip.info{background:var(--info-soft);color:var(--info)}
.chip.gold{background:var(--gold-soft);color:var(--gold)}
.tag{display:inline-block;font-size:8.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  padding:2px 6px;border-radius:var(--r-xs);background:var(--raised);color:var(--text-3)}

/* ── Empty / loading ─────────────────────────────────────────── */
.empty{display:grid;justify-items:center;gap:var(--s3);padding:var(--s6) var(--s4);
  border:1px dashed var(--line);border-radius:var(--r-lg);text-align:center}
.empty svg{width:26px;height:26px;color:var(--text-3)}
.empty b{font-size:13px;font-weight:600}
.empty p{font-size:12px;color:var(--text-3);max-width:44ch}

/* ── Modal ───────────────────────────────────────────────────── */
#modalHost:empty{display:none}
.modal-bg{position:fixed;inset:0;z-index:300;background:var(--scrim);display:flex;
  align-items:center;justify-content:center;padding:var(--s4);
  animation:fade 120ms var(--ease)}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  width:100%;max-width:var(--mw,540px);max-height:88vh;display:flex;flex-direction:column;
  box-shadow:var(--shadow);animation:pop 150ms var(--ease)}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.99)}to{opacity:1;transform:none}}
.modal-hd{padding:var(--s4) var(--s5);border-bottom:1px solid var(--line);
  display:flex;align-items:flex-start;gap:var(--s3)}
.modal-hd h3{font-family:var(--display);font-size:16px;font-weight:700}
.modal-hd p{font-size:11.5px;color:var(--text-3);margin-top:2px}
.modal-x{margin-left:auto;color:var(--text-3);padding:5px;border-radius:var(--r-xs)}
.modal-x:hover{background:var(--raised);color:var(--text)}
.modal-bd{padding:var(--s5);overflow-y:auto;display:grid;gap:var(--s4)}
.modal-ft{padding:var(--s3) var(--s5) var(--s4);border-top:1px solid var(--line);
  display:flex;gap:var(--s2);justify-content:flex-end;flex-wrap:wrap}

/* ── Toast ───────────────────────────────────────────────────── */
#toastHost{position:fixed;bottom:var(--s5);left:50%;transform:translateX(-50%);z-index:500;
  display:grid;gap:var(--s2);justify-items:center;pointer-events:none}
.toast{display:flex;align-items:center;gap:var(--s3);background:var(--surface);
  border:1px solid var(--line);border-left:3px solid var(--tc,var(--ok));
  padding:10px var(--s4);border-radius:var(--r);box-shadow:var(--shadow);
  font-size:12.5px;font-weight:600;pointer-events:auto;
  animation:toastIn 180ms var(--ease)}
.toast.out{animation:toastOut 150ms var(--ease) forwards}
@keyframes toastIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateY(8px)}}
.toast svg{width:15px;height:15px;color:var(--tc)}
.toast button{font-size:11.5px;font-weight:700;color:var(--gold);margin-left:var(--s2)}

/* ── Command palette ─────────────────────────────────────────── */
.pal-bg{position:fixed;inset:0;z-index:400;background:var(--scrim);display:flex;
  justify-content:center;padding:12vh var(--s4) var(--s4);animation:fade 100ms var(--ease)}
.pal{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  width:100%;max-width:560px;max-height:64vh;display:flex;flex-direction:column;
  box-shadow:var(--shadow);overflow:hidden;animation:pop 130ms var(--ease)}
.pal-in{display:flex;align-items:center;gap:var(--s3);padding:var(--s4);border-bottom:1px solid var(--line)}
.pal-in svg{color:var(--text-3)}
.pal-in input{flex:1;background:none;border:0;outline:none;font-size:15px}
.pal-in input::placeholder{color:var(--text-3)}
.pal-list{overflow-y:auto;padding:var(--s2)}
.pal-grp{font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-3);padding:var(--s3) var(--s3) var(--s2)}
.pal-item{display:flex;align-items:center;gap:var(--s3);padding:9px var(--s3);border-radius:var(--r-sm);
  cursor:pointer;font-size:13px;width:100%;text-align:left;min-height:38px}
.pal-item svg{width:16px;height:16px;color:var(--text-3)}
.pal-item.on{background:var(--gold-soft)}
.pal-item.on svg{color:var(--gold)}
.pal-item b{font-weight:500;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pal-item span{font-size:11px;color:var(--text-3)}
.pal-ft{border-top:1px solid var(--line);padding:var(--s2) var(--s4);display:flex;gap:var(--s4);
  font-size:10.5px;color:var(--text-3)}

/* ── Alerts drawer ────────────────────────────────────────────── */
.drawer-bg{position:fixed;inset:0;z-index:350;background:var(--scrim);animation:fade 120ms var(--ease)}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(400px,92vw);z-index:351;
  background:var(--surface);border-left:1px solid var(--line);display:flex;flex-direction:column;
  box-shadow:var(--shadow);animation:slideIn 200ms var(--ease)}
@keyframes slideIn{from{transform:translateX(100%)}to{transform:none}}
.drawer-hd{padding:var(--s4) var(--s5);border-bottom:1px solid var(--line);display:flex;
  align-items:center;gap:var(--s3)}
.drawer-hd h3{font-family:var(--display);font-size:15px;font-weight:700;flex:1}
.drawer-bd{flex:1;overflow-y:auto;padding:var(--s3)}
.alert-row{display:flex;gap:var(--s3);padding:var(--s3);border-radius:var(--r);
  cursor:pointer;transition:background var(--fast)}
.alert-row:hover{background:var(--surface-2)}
.alert-ic{width:30px;height:30px;border-radius:var(--r-sm);display:grid;place-items:center;flex-shrink:0;
  background:var(--ac-soft);color:var(--ac)}
.alert-ic svg{width:15px;height:15px}
.alert-tx{min-width:0;flex:1}
.alert-tx b{display:block;font-size:12.5px;font-weight:600;margin-bottom:2px}
.alert-tx p{font-size:11.5px;color:var(--text-3);line-height:1.45}

/* ── Room board ─────────────────────────────────────────────── */
.room-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:var(--s2);
  contain:content}
.room{background:var(--surface-2);border:1px solid var(--line);border-left:3px solid var(--sc);
  border-radius:var(--r);padding:9px 10px;min-height:78px;cursor:pointer;text-align:left;
  transition:transform var(--fast),border-color var(--fast)}
.room:hover{transform:translateY(-2px);border-color:var(--sc)}
.room-n{font-family:var(--display);font-size:15px;font-weight:700;line-height:1}
.room-t{font-size:9px;color:var(--text-3);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.room-s{font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--sc);margin-top:6px}
.room-g{font-size:10px;color:var(--text-2);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── Timeline (reservations) ────────────────────────────────────── */
.tl-wrap{overflow:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);
  max-height:70vh;contain:paint}
.tl{display:grid;position:relative;min-width:max-content}
.tl-cell{border-right:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);height:38px}
.tl-cell.today{background:var(--gold-soft)}
.tl-cell.we{background:var(--grid)}
.tl-cell.free{cursor:pointer}
.tl-cell.free:hover{background:var(--gold-soft)}
.tl-hd{position:sticky;top:0;z-index:3;background:var(--surface);border-bottom:1px solid var(--line);
  font-size:10px;font-weight:700;color:var(--text-3);text-align:center;padding:6px 0;
  border-right:1px solid var(--line-soft)}
.tl-hd.today{color:var(--gold);background:var(--gold-soft)}
.tl-hd b{display:block;font-size:12px;color:var(--text)}
.tl-room{position:sticky;left:0;z-index:2;background:var(--surface);border-right:1px solid var(--line);
  display:flex;align-items:center;gap:var(--s2);padding:0 var(--s3);font-size:12px;font-weight:600;
  border-bottom:1px solid var(--line-soft)}
.tl-room span{font-size:9px;color:var(--text-3);margin-left:auto}
.tl-corner{position:sticky;left:0;top:0;z-index:4;background:var(--surface);
  border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.tl-bar{position:absolute;height:30px;border-radius:var(--r-sm);padding:0 8px;
  display:flex;align-items:center;font-size:11px;font-weight:600;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;z-index:1;
  box-shadow:0 1px 3px rgba(0,0,0,.28);transition:filter var(--fast),transform var(--fast)}
.tl-bar:hover{filter:brightness(1.12);transform:translateY(-1px)}

/* ── Misc ───────────────────────────────────────────────────── */
.list{display:grid;gap:2px}
.list-row{display:flex;align-items:center;gap:var(--s3);padding:9px var(--s3);
  border-radius:var(--r);background:var(--surface-2);transition:background var(--fast)}
.list-row:hover{background:var(--raised)}
.list-bar{width:3px;align-self:stretch;min-height:28px;border-radius:var(--r-full);flex-shrink:0}
.list-main{flex:1;min-width:0}
.list-main b{display:block;font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.list-main span{font-size:10.5px;color:var(--text-3);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;display:block}
.list-end{font-size:11.5px;font-weight:700;text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums}

.avatar{width:30px;height:30px;border-radius:var(--r-full);display:grid;place-items:center;
  font-size:11px;font-weight:700;flex-shrink:0;background:var(--raised);color:var(--text-2)}

.spark{display:block;width:100%;height:32px}
.chart{display:block;width:100%;height:auto;min-width:min(100%,420px)}
.chart-scroll{overflow-x:auto;max-width:100%}
.legend{display:flex;flex-wrap:wrap;gap:6px var(--s4);margin-top:var(--s3)}
.legend i{width:9px;height:9px;border-radius:2px;flex-shrink:0}
.legend span{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text-2)}

.divider{height:1px;background:var(--line);margin:var(--s4) 0}
.hide{display:none!important}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width:1180px){
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  #view{padding:var(--s4) var(--s4) var(--s7)}
  #topbar{padding:0 var(--s4);gap:var(--s3)}
  .tb-burger{display:grid;place-items:center}
  .tb-search span,.tb-search kbd{display:none}
  .tb-search{width:auto;min-width:36px;padding:7px;margin-left:auto}
  .tb-clock{display:none}
  #sidebar{position:fixed;top:0;bottom:0;left:0;z-index:200;width:var(--sb-w);
    transform:translateX(-100%);transition:transform var(--med)}
  html.sb-open #sidebar{transform:none}
  html.sb-collapsed #sidebar{width:var(--sb-w)}
  html.sb-collapsed .sb-brand-txt,html.sb-collapsed .sb-nav-label,
  html.sb-collapsed .sb-sec-hd,html.sb-collapsed .sb-scope,
  html.sb-collapsed .sb-foot-btn span,html.sb-collapsed .sb-user-txt{display:revert}
  html.sb-collapsed .sb-nav-item{justify-content:flex-start;padding-inline:var(--s2)}
  .sb-collapse{display:none}
  html.sb-open .sb-scrim{display:block;position:fixed;inset:0;z-index:199;background:var(--scrim)}
}
@media (max-width:620px){
  .g2,.g3,.g4{grid-template-columns:minmax(0,1fr)}
  .page-hd h2{font-size:19px}
  .card{padding:var(--s4)}
  .modal-bd,.modal-hd,.modal-ft{padding-inline:var(--s4)}
  #toastHost{left:var(--s4);right:var(--s4);transform:none;justify-items:stretch}
}

@media print{
  #sidebar,#topbar,#toastHost,.btn,.seg{display:none!important}
  #view{overflow:visible;padding:0}
  body{background:#fff;color:#000}
}

/* ==========================================================================
   Shell text stacks — markup uses <b>/<i> pairs; make them stack and truncate
   ========================================================================== */
.tb-crumb b{display:block;font-family:var(--display);font-size:16px;font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-crumb i{display:block;font-style:normal;font-size:11px;color:var(--text-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

#tbClock{text-align:right;line-height:1.2;white-space:nowrap}
#tbClock b{display:block;font-size:12.5px;font-weight:600;letter-spacing:.01em}
#tbClock i{display:block;font-style:normal;font-size:10.5px;color:var(--text-3)}

.sb-scope-txt{flex:1;min-width:0;text-align:left;line-height:1.25}
.sb-scope-txt b{display:block;font-size:12px;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-scope-txt i{display:block;font-style:normal;font-size:10px;color:var(--text-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.sb-user-txt i{display:block;font-style:normal;font-size:10px;color:var(--text-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.sb-scope-menu button i{display:block;font-style:normal;font-size:10px;
  color:var(--text-3);margin-top:1px}

@media (max-width:900px){
  #tbClock{display:none}
}

/* ==========================================================================
   Nav group labels
   ========================================================================== */
.sb-group{
  padding:var(--s4) var(--s3) 5px;font-size:9.5px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--text-3);
}
.sb-group:first-child{padding-top:var(--s2)}
html.sb-collapsed .sb-group{
  text-align:center;padding-left:0;padding-right:0;font-size:0;
}
html.sb-collapsed .sb-group::after{
  content:"";display:block;height:1px;background:var(--line);margin:var(--s2) 12px 0;
}

/* ==========================================================================
   Callout
   ========================================================================== */
.callout{
  display:flex;gap:10px;padding:11px 13px;border-radius:var(--r2);
  background:var(--surface-2);border:1px solid var(--line);
  font-size:12px;line-height:1.5;color:var(--text-2);
}
.callout.warn{
  border-color:color-mix(in srgb,var(--warn) 45%,transparent);
  background:color-mix(in srgb,var(--warn) 10%,transparent);color:var(--text);
}
.callout.bad{
  border-color:color-mix(in srgb,var(--bad) 45%,transparent);
  background:color-mix(in srgb,var(--bad) 10%,transparent);color:var(--text);
}
.callout.ok{
  border-color:color-mix(in srgb,var(--ok) 45%,transparent);
  background:color-mix(in srgb,var(--ok) 10%,transparent);color:var(--text);
}

/* ==========================================================================
   Command palette
   ========================================================================== */
.pal-scrim{
  position:fixed;inset:0;z-index:80;
  background:rgba(3,9,17,.62);backdrop-filter:blur(3px);
  animation:palFade var(--fast) ease both;
}
@keyframes palFade{from{opacity:0}to{opacity:1}}

.pal{
  position:fixed;z-index:81;left:50%;top:11vh;transform:translateX(-50%);
  width:min(660px,calc(100vw - 32px));
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r4);box-shadow:var(--shadow-lg);overflow:hidden;
  animation:palIn var(--med) var(--ease) both;
}
@keyframes palIn{
  from{opacity:0;transform:translateX(-50%) translateY(-10px) scale(.985)}
  to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
}

.pal-in{
  display:flex;align-items:center;gap:10px;
  padding:13px var(--s4);border-bottom:1px solid var(--line);
}
.pal-in svg{width:16px;height:16px;flex:none;color:var(--text-3)}
.pal-in input{
  flex:1;min-width:0;background:none;border:0;outline:none;
  color:var(--text);font:inherit;font-size:14px;
}
.pal-in input::placeholder{color:var(--text-3)}

.pal-list{max-height:52vh;overflow-y:auto;padding:6px}

.pal-item{
  width:100%;display:flex;align-items:center;gap:11px;
  padding:9px 11px;border:0;border-radius:var(--r2);
  background:none;color:var(--text-2);cursor:pointer;text-align:left;
  font:inherit;
}
.pal-item.on{background:var(--raised);color:var(--text)}
.pal-item.on .pal-kind{border-color:var(--gold);color:var(--gold)}

.pal-ico{display:flex;flex:none;color:var(--text-3)}
.pal-ico svg{width:15px;height:15px}
.pal-item.on .pal-ico{color:var(--gold)}

.pal-lbl{flex:1;min-width:0;line-height:1.3}
.pal-lbl b{
  display:block;font-size:12.5px;font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pal-lbl i{
  display:block;font-style:normal;font-size:10.5px;color:var(--text-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.pal-kind{
  flex:none;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-3);border:1px solid var(--line);
  padding:2px 7px;border-radius:99px;
}

.pal-none{padding:26px var(--s4);text-align:center;font-size:12px;color:var(--text-3)}

.pal-foot{
  display:flex;gap:var(--s4);padding:9px var(--s4);
  border-top:1px solid var(--line);background:var(--surface-2);
  font-size:10.5px;color:var(--text-3);
}
.pal-foot span{display:flex;align-items:center;gap:5px}

@media (max-width:620px){
  .pal{top:0;left:0;transform:none;width:100vw;height:100dvh;
    border-radius:0;border:0;max-height:none}
  @keyframes palIn{from{opacity:0}to{opacity:1}}
  .pal-list{max-height:calc(100dvh - 108px)}
}

/* ==========================================================================
   Mobile topbar — search collapses to an icon so the page title keeps its room
   ========================================================================== */
@media (max-width:760px){
  #tbSearch{
    flex:none;width:34px;height:34px;padding:0;
    justify-content:center;border-radius:var(--r2);
  }
  #tbSearch span,#tbSearch kbd{display:none}
  .tb-crumb{flex:1}
  .tb-crumb b{font-size:14.5px}
}

/* ==========================================================================
   PROPERTY SWITCHER — always visible, colour-coded, never a dropdown
   ========================================================================== */
.sb-scope{
  padding:var(--s3);display:grid;gap:3px;
  border-bottom:1px solid var(--line);
}
.sb-scope-hd{
  display:flex;align-items:center;justify-content:space-between;
  font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-3);padding:0 var(--s2) 6px;
}
.sb-scope-hd em{font-style:normal;font-family:var(--mono);letter-spacing:0;opacity:.7}

.sb-scope-btn{
  position:relative;display:flex;align-items:center;gap:9px;
  padding:8px var(--s2) 8px 10px;border-radius:var(--r-sm);
  font-size:12.5px;font-weight:500;color:var(--text-2);
  width:100%;min-height:38px;text-align:left;cursor:pointer;
  background:none;border:1px solid transparent;
  transition:background var(--fast),color var(--fast),border-color var(--fast);
}
.sb-scope-btn:hover{background:var(--raised);color:var(--text)}

/* Active property: tinted in its own colour with a solid left marker */
.sb-scope-btn.on{
  color:var(--text);font-weight:600;
  background:color-mix(in srgb,var(--pc,var(--gold)) 15%,transparent);
  border-color:color-mix(in srgb,var(--pc,var(--gold)) 42%,transparent);
}
.sb-scope-btn.on::before{
  content:"";position:absolute;left:0;top:7px;bottom:7px;width:3px;
  border-radius:0 3px 3px 0;background:var(--pc,var(--gold));
}
.sb-scope-btn.on .sb-scope-n{
  color:var(--pc,var(--gold));border-color:color-mix(in srgb,var(--pc) 40%,transparent);
}

.sb-scope-dot{
  width:10px;height:10px;border-radius:var(--r-full);flex-shrink:0;
  background:var(--pc,var(--gold));
  box-shadow:0 0 0 3px color-mix(in srgb,var(--pc,var(--gold)) 22%,transparent);
}
.sb-scope-dot.all{background:conic-gradient(from 180deg,#d4af37,#4a9fd8,#6cbf8b,#d4af37)}

.sb-scope-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-scope-n{
  flex:none;font-size:9.5px;font-weight:700;color:var(--text-3);
  font-variant-numeric:tabular-nums;padding:1px 6px;border-radius:var(--r-full);
  border:1px solid var(--line);
}

/* ── Collapsed rail: switcher becomes a column of colour dots ───────────── */
html.sb-collapsed .sb-scope{display:grid;padding:var(--s2) 0;justify-items:center;gap:6px}
html.sb-collapsed .sb-scope-hd,
html.sb-collapsed .sb-scope-name,
html.sb-collapsed .sb-scope-n{display:none}
html.sb-collapsed .sb-scope-btn{
  width:38px;height:34px;min-height:0;padding:0;justify-content:center;
}
html.sb-collapsed .sb-scope-btn.on::before{display:none}
html.sb-collapsed .sb-scope-dot{width:12px;height:12px}

/* ── Tooltips when the rail is collapsed ────────────────────────────────── */
html.sb-collapsed .sb-nav-item,
html.sb-collapsed .sb-scope-btn,
html.sb-collapsed .sb-foot-btn{position:relative}
html.sb-collapsed .sb-nav-item[data-tip]:hover::after,
html.sb-collapsed .sb-scope-btn[data-tip]:hover::after,
html.sb-collapsed .sb-foot-btn[data-tip]:hover::after{
  content:attr(data-tip);position:absolute;left:calc(100% + 10px);top:50%;
  transform:translateY(-50%);z-index:300;
  background:var(--raised);color:var(--text);border:1px solid var(--line);
  padding:5px 9px;border-radius:var(--r-sm);font-size:11.5px;font-weight:500;
  white-space:nowrap;box-shadow:var(--shadow-lg);pointer-events:none;
}

/* ==========================================================================
   MOBILE PROPERTY BAR — the primary switcher on small screens
   ========================================================================== */
#propBar{display:none}

.pb-track{
  display:flex;gap:6px;align-items:center;
  overflow-x:auto;scrollbar-width:none;
  padding:8px var(--s4);
  -webkit-overflow-scrolling:touch;
}
.pb-track::-webkit-scrollbar{display:none}

.pb-btn{
  flex:none;display:inline-flex;align-items:center;gap:7px;
  padding:8px 13px;min-height:38px;border-radius:var(--r-full);
  background:var(--field);border:1px solid var(--line);
  color:var(--text-2);font-size:12.5px;font-weight:600;
  white-space:nowrap;cursor:pointer;
  transition:background var(--fast),color var(--fast),border-color var(--fast);
}
.pb-btn i{
  width:9px;height:9px;border-radius:var(--r-full);flex:none;
  background:var(--pc,var(--gold));
}
.pb-btn i.all{background:conic-gradient(from 180deg,#d4af37,#4a9fd8,#6cbf8b,#d4af37)}
.pb-btn em{
  font-style:normal;font-size:10px;font-weight:700;opacity:.65;
  font-variant-numeric:tabular-nums;
}
.pb-btn.on{
  color:var(--text);
  background:color-mix(in srgb,var(--pc,var(--gold)) 20%,transparent);
  border-color:var(--pc,var(--gold));
}

@media (max-width:900px){
  #propBar{
    display:block;flex-shrink:0;
    background:var(--surface);border-bottom:1px solid var(--line);
  }
}

/* ==========================================================================
   MOBILE SHELL — drawer, hamburger, tap targets
   ========================================================================== */
@media (max-width:900px){
  /* Comfortable thumb-sized controls */
  .tb-burger{
    display:grid;place-items:center;width:38px;height:38px;
    border-radius:var(--r-sm);background:var(--field);border:1px solid var(--line);
    color:var(--text);flex:none;
  }
  .tb-burger:active{background:var(--raised)}
  .tb-burger svg{width:19px;height:19px}

  /* Off-canvas drawer gets depth + safe-area padding */
  #sidebar{
    box-shadow:none;
    padding-bottom:env(safe-area-inset-bottom);
    will-change:transform;
  }
  html.sb-open #sidebar{box-shadow:24px 0 60px -20px rgba(0,0,0,.6)}

  /* Scrim fades in rather than snapping */
  html.sb-open .sb-scrim{animation:scrimIn var(--med) ease both}
  @keyframes scrimIn{from{opacity:0}to{opacity:1}}

  /* Drawer close affordance */
  .sb-drawer-x{
    display:grid;place-items:center;margin-left:auto;
    width:32px;height:32px;border-radius:var(--r-sm);
    color:var(--text-2);background:var(--field);border:1px solid var(--line);
  }
  .sb-drawer-x svg{width:16px;height:16px}

  /* Bigger rows for touch */
  .sb-nav-item{min-height:44px;font-size:13.5px}
  .sb-scope-btn{min-height:44px;font-size:13.5px}
  .sb-foot-btn{min-height:42px}
}

.sb-drawer-x{display:none}

@media (min-width:901px){
  .tb-burger{display:none}
}

/* ── Phones ────────────────────────────────────────────────────────────── */
@media (max-width:620px){
  #view{padding:var(--s4) var(--s3) var(--s7)}
  .pb-track{padding:7px var(--s3)}
  #sidebar{width:min(86vw,300px)}
  html.sb-collapsed #sidebar{width:min(86vw,300px)}

  /* Tables scroll rather than squeeze */
  .tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tbl-wrap table{min-width:560px}

  /* Page headers stack cleanly */
  .page-hd{flex-wrap:wrap;gap:var(--s3)}
  .page-hd .push{width:100%}
  .seg{overflow-x:auto;scrollbar-width:none;max-width:100%}
  .seg::-webkit-scrollbar{display:none}

  /* Full-width primary actions read better on a phone */
  .page-hd{flex-direction:column;align-items:stretch;gap:var(--s3)}
  .page-hd>.row-tight{width:100%;flex-wrap:wrap;gap:var(--s2)}
  /* Period switcher gets its own scrollable row so nothing is clipped. */
  .page-hd .seg{flex:1 1 100%;overflow-x:auto;scrollbar-width:none}
  .page-hd .seg::-webkit-scrollbar{display:none}
  .page-hd .seg>*{flex:0 0 auto}
  /* Buttons stay content-sized instead of stretching edge to edge. */
  .page-hd .btn{flex:0 0 auto;min-height:38px;padding:0 var(--s4)}
}

/* Respect users who don't want motion */
@media (prefers-reduced-motion:reduce){
  #sidebar,.pb-btn,.sb-scope-btn{transition:none}
  html.sb-open .sb-scrim{animation:none}
}

/* ==========================================================================
   COLLAPSED RAIL — keep every child inside the 64px width
   ========================================================================== */
html.sb-collapsed .sb-nav{padding-inline:0;justify-items:center}
html.sb-collapsed .sb-nav-item{width:40px;padding:0;justify-content:center}
html.sb-collapsed .sb-nav-item.on::before{left:0}

/* The alert count becomes a dot so it can't push the rail wider */
html.sb-collapsed .sb-badge{
  position:absolute;top:5px;right:5px;
  width:7px;height:7px;min-width:0;padding:0;
  font-size:0;line-height:0;border-radius:var(--r-full);
  border:2px solid var(--surface);
}

html.sb-collapsed .sb-foot{padding-inline:0;justify-items:center}
html.sb-collapsed .sb-foot-btn{width:40px;padding:0;justify-content:center}
html.sb-collapsed .sb-user{justify-content:center;padding-inline:0}
html.sb-collapsed .sb-brand{padding-inline:0;justify-content:center}

/* Active property reads clearly even as a bare dot */
html.sb-collapsed .sb-scope-btn.on{
  background:color-mix(in srgb,var(--pc,var(--gold)) 18%,transparent);
  border-color:color-mix(in srgb,var(--pc,var(--gold)) 50%,transparent);
}
html.sb-collapsed .sb-scope-btn.on .sb-scope-dot{
  box-shadow:0 0 0 3px color-mix(in srgb,var(--pc,var(--gold)) 38%,transparent);
}

/* ══════════════════════════════════════════════════════════════════════
   REPORT DOCUMENT
   A print-first, table-only report pack. Styled like a bound document
   rather than a dashboard: hairline rules, tabular figures, gold section
   numerals, and a letterhead that survives printing.
   ════════════════════════���═════════════════════════════════════════════ */

.rpt{
  display:grid;gap:var(--s6);
  /* Figures must align vertically in every column. */
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

/* ── Letterhead ─────────────────────────────────────────────────── */
.rpt-head{
  display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s5);
  flex-wrap:wrap;
  padding:var(--s5);border:1px solid var(--line);border-radius:var(--r4);
  background:
    radial-gradient(120% 180% at 0% 0%, color-mix(in srgb,var(--gold) 9%, transparent), transparent 60%),
    var(--surface);
  position:relative;overflow:hidden;
}
.rpt-head::after{
  content:'';position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,var(--gold),var(--gold-dk),transparent);
}
.rpt-head-l{display:flex;align-items:center;gap:var(--s4);min-width:0}
.rpt-mark{
  width:46px;height:46px;flex:0 0 auto;border-radius:var(--r2);
  display:grid;place-items:center;
  font-family:var(--display);font-weight:700;font-size:23px;color:#1a1200;
  background:linear-gradient(150deg,var(--gold),var(--gold-dk));
  box-shadow:0 4px 14px rgba(0,0,0,.25);
}
.rpt-head-l h1{
  font-family:var(--display);font-size:24px;font-weight:700;letter-spacing:.01em;
  line-height:1.1;color:var(--text);
}
.rpt-head-l p{font-size:12px;color:var(--text-2);margin-top:3px;letter-spacing:.09em;text-transform:uppercase}

.rpt-meta{border-collapse:collapse;font-size:11.5px}
.rpt-meta td{padding:2px 0;vertical-align:top}
.rpt-meta td:first-child{
  color:var(--text-3);text-transform:uppercase;letter-spacing:.08em;
  padding-right:var(--s4);white-space:nowrap;font-size:10px;
}
.rpt-meta td:last-child{color:var(--text);font-weight:500;text-align:right}

/* ── Section jump bar ───────────────────────────────────────────── */
.rpt-index{
  display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;
  padding:var(--s3);border:1px solid var(--line);border-radius:var(--r2);
  background:var(--surface-2);
}
.rpt-index-lbl{
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);
  padding-inline:var(--s1);
}
.rpt-index button{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 10px;border:1px solid var(--line);border-radius:var(--r-full);
  background:var(--surface);color:var(--text-2);
  font-size:11.5px;font-weight:500;cursor:pointer;
  transition:color var(--fast),border-color var(--fast),background var(--fast);
}
.rpt-index button:hover{color:var(--text);border-color:var(--gold);background:var(--raised)}
.rpt-index button em{
  font-style:normal;font-family:var(--mono);font-size:9.5px;color:var(--gold);
}

/* ── Sections ───────────────────────────────────────────────────── */
.rpt-sec{display:grid;gap:var(--s3);scroll-margin-top:calc(var(--tb-h) + var(--s5))}
.rpt-sec-hd{
  display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap;
  padding-bottom:var(--s2);border-bottom:1px solid var(--line);
}
.rpt-no{
  font-family:var(--mono);font-size:11px;font-weight:600;color:var(--gold);
  letter-spacing:.06em;flex:0 0 auto;
}
.rpt-sec-hd h3{
  font-family:var(--display);font-size:17px;font-weight:600;color:var(--text);
  letter-spacing:.01em;
}
.rpt-note{
  font-size:11px;color:var(--text-3);margin-left:auto;text-align:right;
}

/* Two-up grid for the small mix tables */
.rpt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:var(--s4)}
.rpt-col{display:grid;gap:var(--s2);align-content:start}
.rpt-col h4{
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);
}
.rpt-col h4+.rpt-tbl th:first-child{color:transparent}

/* ── Tables ─────────────────────────────────────────────────────── */
.rpt-tbl{
  border:1px solid var(--line);border-radius:var(--r2);overflow:auto;
  background:var(--surface);
}
.rpt-tbl table{width:100%;border-collapse:collapse;font-size:12px}
.rpt-tbl thead th{
  position:sticky;top:0;z-index:2;
  background:var(--surface-2);
  padding:9px var(--s3);text-align:left;white-space:nowrap;
  font-size:9.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--text-3);border-bottom:1px solid var(--line);
}
.rpt-tbl th.num,.rpt-tbl td.num{text-align:right}
.rpt-tbl tbody td{
  padding:7px var(--s3);border-bottom:1px solid color-mix(in srgb,var(--line) 55%, transparent);
  color:var(--text-2);white-space:nowrap;
}
.rpt-tbl tbody tr:last-child td{border-bottom:0}
.rpt-tbl tbody tr:hover td{background:color-mix(in srgb,var(--gold) 4%, transparent)}
.rpt-tbl td.rpt-lbl{color:var(--text);font-weight:500}
.rpt-tbl .t-strong{color:var(--text);font-weight:600}
.rpt-tbl .t-mute{color:var(--text-3)}

/* Group / total column and rows carry the gold accent */
.rpt-tbl .rpt-tot{
  background:color-mix(in srgb,var(--gold) 7%, transparent);
  border-left:1px solid color-mix(in srgb,var(--gold) 30%, transparent);
}
.rpt-tbl tr.rpt-rule td{border-bottom:1px solid var(--line)}
.rpt-tbl tr.rpt-sub td{
  background:var(--surface-2);color:var(--text);font-weight:600;
  border-top:1px solid var(--line);
}
.rpt-tbl tfoot tr.rpt-total td,.rpt-tbl tbody tr.rpt-total td{
  background:color-mix(in srgb,var(--gold) 10%, transparent);
  border-top:1.5px solid color-mix(in srgb,var(--gold) 45%, transparent);
  color:var(--text);font-weight:700;font-size:12px;
}
.rpt-tbl tr.rpt-we td{background:color-mix(in srgb,var(--info) 5%, transparent)}
.rpt-tbl tr.rpt-we:hover td{background:color-mix(in srgb,var(--info) 9%, transparent)}
.rpt-empty{color:var(--text-3);font-style:italic;padding:var(--s5)!important;text-align:center}

.rpt-pos{color:var(--ok)}
.rpt-neg{color:var(--bad)}
.rpt-ref{font-family:var(--mono);font-size:10.5px;color:var(--text-3)}

/* Property name with its own colour flag */
.rpt-ph{display:inline-flex;align-items:center;gap:6px;color:var(--text);font-weight:500}
.rpt-ph::before{
  content:'';width:7px;height:7px;border-radius:var(--r-full);
  background:var(--pc,var(--gold));flex:0 0 auto;
}
th .rpt-ph{color:var(--text-2)}
th.num .rpt-ph{flex-direction:row-reverse}

/* Inline occupancy bar that still prints */
.rpt-bar{
  display:inline-block;width:46px;height:4px;border-radius:var(--r-full);
  background:var(--raised);margin-right:8px;overflow:hidden;vertical-align:middle;
}
.rpt-bar i{display:block;height:100%;border-radius:var(--r-full)}

/* Status tags */
.rpt-tag{
  display:inline-block;padding:2px 7px;border-radius:var(--r-full);
  font-size:10px;font-weight:600;letter-spacing:.03em;white-space:nowrap;
  border:1px solid transparent;
}
.rpt-tag.is-occ{color:var(--gold);background:color-mix(in srgb,var(--gold) 13%, transparent);border-color:color-mix(in srgb,var(--gold) 35%, transparent)}
.rpt-tag.is-vac{color:var(--ok);background:color-mix(in srgb,var(--ok) 13%, transparent);border-color:color-mix(in srgb,var(--ok) 32%, transparent)}
.rpt-tag.is-att{color:var(--warn);background:color-mix(in srgb,var(--warn) 14%, transparent);border-color:color-mix(in srgb,var(--warn) 34%, transparent)}
.rpt-tag.is-ooo{color:var(--text-3);background:var(--raised);border-color:var(--line)}

/* ── Document footer ────────────────────────────────────────────── */
.rpt-foot{
  display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;
  padding-top:var(--s3);border-top:1px solid var(--line);
  font-size:10.5px;color:var(--text-3);letter-spacing:.03em;
}

@media (max-width:620px){
  .rpt{gap:var(--s5)}
  .rpt-head{padding:var(--s4)}
  .rpt-head-l h1{font-size:20px}
  .rpt-head-r{width:100%}
  .rpt-meta{width:100%}
  .rpt-sec-hd h3{font-size:15px}
  .rpt-note{margin-left:0;width:100%;text-align:left}
  .rpt-tbl table{min-width:520px}
}

/* ══════════════════════════════════════════════════════════════════════
   PRINT
   Force a light, ink-friendly document: drop the app shell, unpin sticky
   headers, and keep sections and rows from splitting across pages.
   ══════════════════════════════════════════════════════════════════════ */
/* Philippine long bond / Folio: 8.5 x 13in, portrait, flowing over pages. */
@page{size:215.9mm 330.2mm;margin:11mm 9mm 13mm}

@media print{
  /* Ink-on-paper palette regardless of the on-screen theme */
  :root,html[data-theme="dark"],html[data-theme="light"]{
    --bg:#fff;--surface:#fff;--surface-2:#fff;--raised:#f0f0f0;
    --line:#c9c9c9;--text:#000;--text-2:#333;--text-3:#666;--field:#fff;
    --gold:#8a6d1f;--gold-dk:#6d5518;--ok:#1c6b3a;--bad:#a52a1a;
    --warn:#8a5a12;--info:#1c4f8a;--plum:#5c3a72;--shadow-lg:none;
  }
  html,body{background:#fff!important;color:#000!important}

  /* The app chrome is not part of the document */
  #sidebar,#topbar,#propBar,#sbScrim,#toastHost,#paletteHost,#alertHost,#guideHost,
  #boot,.no-print,.page-hd>.row-tight,.tb-burger{display:none!important}
  #main{margin:0!important;padding:0!important}
  #view{padding:0!important;overflow:visible!important}
  .wrap{max-width:none!important;padding:0!important;margin:0!important}
  .view-in{animation:none!important}

  /* Report page title becomes a quiet running head */
  .page-hd{display:none!important}

  .rpt{gap:7mm;display:block}
  .rpt>*+*{margin-top:6mm}

  .rpt-head{
    border:0;border-bottom:1.5pt solid #000;border-radius:0;
    background:#fff!important;padding:0 0 4mm;
  }
  .rpt-head::after{display:none}
  .rpt-mark{
    background:#fff!important;color:#000!important;
    border:1pt solid #000;box-shadow:none;width:38px;height:38px;font-size:19px;
  }
  .rpt-head-l h1{font-size:17pt}
  .rpt-head-l p{font-size:7.5pt}
  .rpt-meta{font-size:7.5pt}

  /* Sections should not be orphaned or split mid-table */
  .rpt-sec{break-inside:avoid;page-break-inside:avoid}
  .rpt-sec-hd{border-bottom:.75pt solid #000;padding-bottom:1.5mm}
  .rpt-sec-hd h3{font-size:11.5pt}
  .rpt-no{color:#000;font-size:8pt}
  .rpt-note{font-size:7.5pt;color:#444}

  .rpt-tbl{border:.75pt solid #999;border-radius:0;overflow:visible!important}
  .rpt-tbl table{font-size:7.5pt;min-width:0!important;width:100%}
  /* Repeat headers on every printed page */
  .rpt-tbl thead{display:table-header-group}
  .rpt-tbl tfoot{display:table-footer-group}
  .rpt-tbl tr{break-inside:avoid;page-break-inside:avoid}
  .rpt-tbl thead th{
    position:static!important;background:#ececec!important;color:#000!important;
    border-bottom:.75pt solid #666;padding:1.6mm 2mm;font-size:6.5pt;
  }
  .rpt-tbl tbody td{
    padding:1.4mm 2mm;border-bottom:.4pt solid #ddd;color:#111!important;
    white-space:normal;
  }
  .rpt-tbl tbody tr:hover td{background:transparent!important}
  .rpt-tbl .rpt-tot,
  .rpt-tbl tr.rpt-total td,
  .rpt-tbl tr.rpt-sub td{background:#ececec!important;color:#000!important}
  .rpt-tbl tr.rpt-total td{border-top:1pt solid #000}
  .rpt-tbl tr.rpt-we td{background:#f6f6f6!important}

  /* Colour still carries meaning on paper, so keep the accents printing */
  .rpt-bar,.rpt-bar i,.rpt-ph::before,.rpt-tag{
    -webkit-print-color-adjust:exact;print-color-adjust:exact;
  }
  .rpt-tag{border:.5pt solid #999;background:#fff!important;color:#000!important}
  .rpt-bar{border:.4pt solid #bbb;background:#fff}

  .rpt-foot{
    border-top:.75pt solid #000;font-size:7pt;color:#333;padding-top:2mm;
  }

  /* Anything the report doesn't need */
  .btn,.seg,.chart-scroll,.meter{display:none!important}
}

/* ══════════════════════════════════════════════════════════════════════
   REPORT — COMPACT / LONG BOND
   The report is a paper document first. Density matters more than air,
   so this block tightens type and padding on screen and tightens them
   further again for print, where the sheet is 8.5 x 13in portrait.
   ══════════════════════════════════════════════════════════════════════ */

/* Headline strip: the money answer, before any table. */
.rpt-head-top{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s5);flex-wrap:wrap}
.rpt-headline{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;margin-top:var(--s4);
  border:1px solid var(--line);background:var(--line);border-radius:var(--r-sm);overflow:hidden}
.rpt-hl{background:var(--surface);padding:var(--s3) var(--s3) calc(var(--s3) - 2px)}
.rpt-hl span{display:block;font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-3);margin-bottom:3px}
.rpt-hl b{display:block;font-size:17px;font-weight:600;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.rpt-hl b.rpt-pos{color:var(--ok)}
.rpt-hl b.rpt-neg{color:var(--bad)}

/* Jump index numerals */
.rpt-index em{font-style:normal;font-family:var(--mono);font-size:9px;color:var(--gold);
  margin-right:6px;opacity:.85}

/* Denser tables on screen */
.rpt-tbl table{font-size:11.5px}
.rpt-tbl th,.rpt-tbl td{padding:5px var(--s2)}
.rpt-sec{margin-top:var(--s5)}

@media (max-width:620px){
  .rpt-headline{grid-template-columns:repeat(2,1fr)}
  .rpt-hl b{font-size:15px}
}

@media print{
  /* Compact enough that a wide table still fits 8.5in of portrait paper. */
  .rpt{font-size:8pt}
  .rpt-tbl table{font-size:6.6pt}
  .rpt-tbl th,.rpt-tbl td{padding:1.5pt 3pt}
  .rpt-tbl.rpt-wide table{font-size:5.8pt}
  .rpt-tbl.rpt-wide th,.rpt-tbl.rpt-wide td{padding:1pt 2pt}
  /* No horizontal scrolling on paper — let wide tables use the full sheet. */
  .rpt-tbl{overflow:visible!important}
  .rpt-tbl table{min-width:0!important;width:100%;table-layout:auto}
  .rpt-tbl td,.rpt-tbl th{white-space:normal;word-break:break-word}

  .rpt-head{padding:0 0 4mm;margin-bottom:4mm}
  .rpt-head h1{font-size:15pt}
  .rpt-head p{font-size:7.5pt}
  .rpt-mark{width:11mm;height:11mm;font-size:13pt}
  .rpt-meta{font-size:7pt}
  .rpt-headline{grid-template-columns:repeat(6,1fr);margin-top:3mm}
  .rpt-hl{padding:1.5mm 2mm}
  .rpt-hl span{font-size:5.5pt}
  .rpt-hl b{font-size:9pt}

  .rpt-sec{margin-top:4mm}
  .rpt-sec-hd{margin-bottom:1.5mm;padding-bottom:1mm}
  .rpt-sec-hd h3{font-size:9.5pt}
  .rpt-no{font-size:7pt}
  .rpt-note{font-size:6.5pt}
  .rpt-grid{grid-template-columns:1fr 1fr;gap:3mm}

  /* Long tables SHOULD break across pages — the header repeats, so a
     ledger stays readable. Only keep the heading with its first rows. */
  .rpt-sec{break-inside:auto}
  .rpt-sec-hd{break-after:avoid;break-inside:avoid}
  .rpt-tbl thead{break-after:avoid}
  .rpt-tbl tr{break-inside:avoid}
  .rpt-total,.rpt-sub{break-before:avoid}
  .rpt-foot{margin-top:4mm;font-size:6.5pt}
}