/* ============================================================
   CAPWISE DESIGN SYSTEM — capwise.css
   One stylesheet, every page. Restyles the app's shared class
   vocabulary so pages migrate without JS changes.

   Contents
   1. Tokens          2. Base & typography   3. Layout shells
   4. Brand           5. Buttons             6. Forms
   7. Cards           8. Pills & badges      9. Tabs & pickers
   10. Stats          11. Filters            12. Deal/row cards
   13. Messages       14. Tables             15. States (empty/loading)
   16. Toast/banner   17. Motion & a11y
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root{
  /* surfaces */
  --bg:#07080B;
  --bg2:#0A0C11;
  --bg-2:#0A0C11;              /* legacy alias */
  --surface:#0E1117;
  --surface-2:#12151D;
  --surface-3:#171B25;
  --card:#0E1117;              /* legacy alias */

  /* text */
  --text:#EDF0F7;
  --text-2:#C4CAD8;
  --muted:#8A93A6;
  --faint:#5C6577;

  /* lines */
  --border:rgba(255,255,255,.07);
  --border-strong:rgba(255,255,255,.12);

  /* brand */
  --accent:#5B7CFF;
  --accent2:#8FA6FF;
  --accent-2:#8FA6FF;          /* legacy alias */
  --accent-soft:rgba(91,124,255,.12);
  --accent-border:rgba(91,124,255,.4);

  /* semantic — Capwise colour system */
  --green:#34D399;   --green-soft:rgba(52,211,153,.1);   --green-border:rgba(52,211,153,.28);
  --orange:#FB923C;  --orange-soft:rgba(251,146,60,.1);  --orange-border:rgba(251,146,60,.3);
  --red:#F87171;     --red-soft:rgba(248,113,113,.1);    --red-border:rgba(248,113,113,.3);
  --blue:#60A5FA;    --blue-soft:rgba(96,165,250,.1);    --blue-border:rgba(96,165,250,.3);
  --purple:#A78BFA;  --purple-soft:rgba(167,139,250,.12);--purple-border:rgba(167,139,250,.3);

  --ok:var(--green);
  --danger:var(--red);
  --bad:var(--red);            /* legacy alias */
  --warn:var(--orange);

  /* geometry */
  --r-sm:8px; --r-md:10px; --r-lg:14px; --r-xl:18px;

  /* effects */
  --ring:0 0 0 3px rgba(91,124,255,.28);
  --shadow-card:0 1px 2px rgba(0,0,0,.4), 0 8px 32px -12px rgba(0,0,0,.5);
  --shadow-pop:0 4px 12px rgba(0,0,0,.4), 0 16px 48px -12px rgba(0,0,0,.6);

  --font:"Inter",system-ui,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
}

/* ---------- 2. BASE & TYPOGRAPHY ---------- */
*{box-sizing:border-box}
::selection{background:rgba(91,124,255,.35)}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  font-family:var(--font);
  font-size:14px;
  line-height:1.5;
  color:var(--text);
  background:
    radial-gradient(900px 480px at 15% -12%, rgba(91,124,255,.09), transparent 60%),
    radial-gradient(800px 420px at 110% 20%, rgba(91,124,255,.05), transparent 55%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  background-attachment:fixed;
  padding:clamp(16px, 3vw, 32px) clamp(14px, 3vw, 28px) 64px;
}

h1{margin:0; font-size:1.375rem; font-weight:600; letter-spacing:-0.02em}
h2{margin:0 0 4px; font-size:1.15rem; font-weight:600; letter-spacing:-0.015em}
h3{margin:0; font-size:.98rem; font-weight:600; letter-spacing:-0.01em}

.muted{color:var(--muted)}
.small{font-size:.86rem}
.tiny{font-size:.76rem}
.mono{font-family:var(--mono); font-size:.85em; letter-spacing:0}
.ok{color:var(--ok)}
.bad{color:var(--danger)}
.num{font-variant-numeric:tabular-nums}

:where(a,button,select,input,textarea,[tabindex]):focus-visible{
  outline:none;
  box-shadow:var(--ring);
  border-color:var(--accent-border);
}

/* ---------- 3. LAYOUT SHELLS ---------- */
.wrap{max-width:1100px; margin:0 auto}

/* page header used on every app page */
.top{
  display:flex; gap:16px;
  justify-content:space-between; align-items:flex-start;
  flex-wrap:wrap;
  margin:0 0 24px;
}
.top .muted.small{font-size:.82rem; color:var(--faint)}
.top .muted.small:first-of-type{color:var(--muted)}
.top h1 + .muted.small{margin-top:2px}

.row{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.nav-actions{display:flex; gap:8px; flex-wrap:wrap; align-items:center}

.grid2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.grid4{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
@media(max-width:900px){.grid4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.grid2{grid-template-columns:1fr}}
@media(max-width:520px){.grid4{grid-template-columns:1fr}}

.hr{height:1px; background:var(--border); border:0; margin:16px 0}

/* centered auth shell (login / join / accept / reset) */
body.auth{
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding:24px 16px;
}
body.auth .wrap{width:100%; max-width:440px}
body.auth .wrap.wide{max-width:560px}

/* ---------- 4. BRAND ---------- */
.brand{
  display:flex; align-items:center; gap:11px;
  justify-content:center; user-select:none;
  margin:0 0 8px;
}
.brand .name{
  font-weight:700; letter-spacing:-0.02em; font-size:1.3rem;
}
.brand svg{display:block}
.sub{
  color:var(--muted); text-align:center;
  margin:0 0 20px; font-size:.86rem;
}

/* ---------- 5. BUTTONS ---------- */
.btn,
button.primary, a.primary{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  height:38px; padding:0 15px;
  border-radius:var(--r-md);
  border:1px solid transparent;
  background:var(--accent);
  color:#fff;
  font-family:var(--font);
  font-weight:600; font-size:.87rem;
  cursor:pointer; text-decoration:none;
  white-space:nowrap;
  transition:background .15s ease, border-color .15s ease, color .15s ease,
             opacity .15s ease, transform .1s ease;
}
.btn:hover, button.primary:hover, a.primary:hover{background:#6E8BFF}
.btn:active{transform:translateY(1px)}
.btn:disabled, button:disabled{opacity:.55; cursor:not-allowed; transform:none}

.btn.secondary, button.secondary, a.secondary, .btn-secondary{
  background:var(--surface-2);
  border-color:var(--border);
  color:var(--text-2);
}
.btn.secondary:hover, button.secondary:hover, a.secondary:hover, .btn-secondary:hover{
  background:var(--surface-3); color:var(--text); border-color:var(--border-strong);
}

.btn.ghost{
  background:transparent; border-color:var(--border); color:var(--muted);
}
.btn.ghost:hover{color:var(--text); border-color:var(--border-strong); background:var(--surface-2)}

.btn.danger{
  background:transparent;
  border-color:var(--red-border);
  color:var(--red);
}
.btn.danger:hover{background:var(--red-soft)}

.btn.ok{
  background:transparent; border-color:var(--green-border); color:var(--green);
}
.btn.ok:hover{background:var(--green-soft)}

.btn.sm{height:32px; padding:0 12px; font-size:.82rem; border-radius:var(--r-sm)}
.btn.big{height:46px; padding:0 20px; font-size:.95rem; border-radius:var(--r-lg)}
.btn.block{width:100%}

.btn .ic{width:14px; height:14px; flex:none; opacity:.85}

/* quiet inline text-button */
.link{
  background:none; border:0; padding:2px 6px; width:auto; height:auto;
  color:var(--muted); cursor:pointer;
  font-family:var(--font); font-size:.85rem; font-weight:500;
  border-radius:6px;
  transition:color .15s ease;
}
.link:hover{color:var(--accent2)}

.back{
  display:block; margin-top:18px; text-align:center;
  color:var(--muted); font-size:.85rem; text-decoration:none;
  transition:color .15s ease;
}
.back:hover{color:var(--accent2)}

/* ---------- 6. FORMS ---------- */
label, .flabel{
  display:block;
  margin:14px 0 6px;
  font-size:.72rem; font-weight:600;
  letter-spacing:.05em; text-transform:uppercase;
  color:var(--muted);
}
label:first-of-type{margin-top:0}

input, select, textarea{
  font-family:var(--font);
  font-size:.9rem;
  color:var(--text);
  color-scheme:dark;
}

input:not([type="checkbox"]):not([type="radio"]), textarea, .input{
  width:100%;
  height:40px;
  padding:0 13px;
  border-radius:var(--r-md);
  border:1px solid var(--border);
  background:var(--bg2);
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
  font-variant-numeric:tabular-nums;
}
textarea{height:auto; padding:10px 13px; resize:vertical}
input:hover, textarea:hover{border-color:var(--border-strong)}
input::placeholder, textarea::placeholder{color:var(--faint)}
input:focus, textarea:focus{box-shadow:var(--ring); border-color:var(--accent-border)}

select{
  height:38px;
  padding:0 32px 0 11px;
  border-radius:var(--r-sm);
  border:1px solid var(--border);
  background-color:var(--surface-2);
  cursor:pointer;
  appearance:none; -webkit-appearance:none;
  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='%238A93A6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 10px center;
  transition:border-color .15s ease;
}
select:hover{border-color:var(--border-strong)}
select option{background:var(--surface); color:var(--text)}

.field{min-width:0}
.field label, .field .flabel{margin-top:0}

input[type="checkbox"]{
  width:16px; height:16px;
  accent-color:var(--accent);
  cursor:pointer;
}
.check{
  display:inline-flex; align-items:center; gap:8px;
  height:38px;
  color:var(--text-2); font-size:.86rem; font-weight:500;
  cursor:pointer; user-select:none;
}
.check label{margin:0; text-transform:none; letter-spacing:0; font-size:.86rem; font-weight:500; color:var(--text-2); cursor:pointer}

/* ---------- 7. CARDS ---------- */
.card{
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  padding:22px;
  background:linear-gradient(180deg, var(--surface), var(--bg2));
  box-shadow:var(--shadow-card);
}
.card > b:first-child{
  display:block;
  font-size:.72rem; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase;
  color:var(--faint);
  margin-bottom:4px;
}
.sectionTitle{
  display:flex; justify-content:space-between;
  gap:10px; align-items:flex-start; flex-wrap:wrap;
}
.sectionTitle > div > b{font-size:.95rem; font-weight:600; color:var(--text)}

.dangerZone{
  margin-top:18px; padding:16px;
  border:1px solid var(--red-border);
  border-radius:var(--r-lg);
  background:var(--red-soft);
}
.dangerZone > b{font-size:.88rem; font-weight:600; color:var(--red)}

.infoBox{
  margin-top:16px; padding:12px 14px;
  border-radius:var(--r-lg);
  border:1px solid var(--blue-border);
  background:var(--blue-soft);
  color:var(--text-2); line-height:1.5;
  font-size:.84rem;
}

/* ---------- 8. PILLS & BADGES ---------- */
.pill{
  display:inline-flex; align-items:center; gap:7px;
  padding:5px 11px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--surface-2);
  font-weight:500; font-size:.78rem;
  color:var(--muted);
  white-space:nowrap;
}
.pill b{font-weight:600; color:var(--text-2); font-variant-numeric:tabular-nums}
.pill.brandpill{
  background:var(--accent-soft); border-color:var(--accent-border);
  color:var(--accent2); font-weight:600;
}

.badge{
  display:inline-flex; align-items:center; gap:6px;
  height:22px; padding:0 9px;
  border-radius:999px;
  border:1px solid var(--border-strong);
  background:var(--surface-3);
  font-size:.72rem; font-weight:600;
  letter-spacing:.03em; text-transform:capitalize;
  color:var(--text-2);
  white-space:nowrap;
}
.badge .dot, .pill .dot{width:6px; height:6px; border-radius:99px; background:var(--faint); flex:none}

.badge.b-activated, .badge.ok,   .statusPill.ok  {background:var(--green-soft);  border-color:var(--green-border);  color:var(--green)}
.badge.b-pending,   .badge.warn, .statusPill.warn{background:var(--orange-soft); border-color:var(--orange-border); color:var(--orange)}
.badge.b-cancelled, .badge.bad,  .statusPill.bad {background:var(--red-soft);    border-color:var(--red-border);    color:var(--red)}
.badge.info {background:var(--blue-soft);   border-color:var(--blue-border);   color:var(--blue)}
.badge.premium{background:var(--purple-soft); border-color:var(--purple-border); color:var(--purple)}
.badge.b-activated .dot{background:var(--green)}
.badge.b-pending .dot{background:var(--orange)}
.badge.b-cancelled .dot{background:var(--red)}

.tag{
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 9px; border-radius:999px;
  border:1px solid var(--border);
  background:var(--bg2);
  font-size:.74rem; font-weight:500; color:var(--muted);
}
.tags{display:flex; gap:6px; flex-wrap:wrap}

/* ---------- 9. TABS, SEGMENTS & PICKERS ---------- */
.tabs{
  display:flex; gap:2px; margin:0 0 18px;
  padding:3px;
  border:1px solid var(--border);
  border-radius:var(--r-md);
  background:var(--bg2);
}
.tab{
  flex:1;
  height:34px; padding:0 12px;
  border-radius:7px;
  border:1px solid transparent;
  background:transparent;
  color:var(--muted);
  font-family:var(--font); font-weight:500; font-size:.86rem;
  cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.tab:hover{color:var(--text-2)}
.tab.active{
  background:var(--surface-3);
  color:var(--text);
  border-color:var(--border-strong);
  font-weight:600;
  box-shadow:0 1px 3px rgba(0,0,0,.35);
}

.seg{
  display:inline-flex; padding:3px; gap:2px;
  border:1px solid var(--border);
  border-radius:var(--r-md);
  background:var(--bg2);
}
.fbtn{
  height:30px; padding:0 13px;
  border-radius:7px;
  border:1px solid transparent;
  background:transparent;
  color:var(--muted);
  font-family:var(--font); font-weight:500; font-size:.84rem;
  cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.fbtn:hover{color:var(--text-2)}
.fbtn.active{
  background:var(--surface-3); color:var(--text);
  border-color:var(--border-strong); font-weight:600;
  box-shadow:0 1px 3px rgba(0,0,0,.35);
}

/* account-type / option pickers */
.picker{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:6px 0 4px}
@media(max-width:440px){.picker{grid-template-columns:1fr}}
.pick{
  border-radius:var(--r-lg);
  padding:12px 14px;
  border:1px solid var(--border);
  background:var(--surface-2);
  color:var(--text);
  font-family:var(--font);
  cursor:pointer; text-align:left;
  transition:border-color .15s ease, background .15s ease;
}
.pick:hover{border-color:var(--border-strong)}
.pick strong{display:block; font-size:.88rem; font-weight:600; letter-spacing:-0.01em}
.pick span{display:block; margin-top:3px; color:var(--muted); font-size:.78rem; line-height:1.4}
.pick.active{
  border-color:var(--accent-border);
  background:var(--accent-soft);
}
.pick.active strong{color:var(--accent2)}

/* ---------- 10. STATS ---------- */
.stats, .statGrid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  gap:10px;
}
.stat{
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  background:var(--surface-2);
  padding:12px 14px;
  min-width:0;
}
.stat .k, .stat .label{
  display:flex; align-items:center; gap:6px;
  font-size:.72rem; font-weight:600;
  letter-spacing:.05em; text-transform:uppercase;
  color:var(--muted);
  margin:0 0 5px;
}
.stat .v, .stat .value{
  font-size:1.05rem; font-weight:600;
  letter-spacing:-0.015em;
  font-variant-numeric:tabular-nums;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.stat.pending .v{color:var(--orange)}
.stat.activated .v{color:var(--green)}
.stat .dot{width:7px; height:7px; border-radius:99px; flex:none}

/* KPI hero tiles (dashboards) */
.card.kpi .label{
  font-size:.72rem; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted);
}
.card.kpi .val{
  margin-top:6px;
  font-size:1.5rem; font-weight:700; letter-spacing:-0.025em;
  font-variant-numeric:tabular-nums;
}

/* ---------- 11. FILTER TOOLBAR ---------- */
.filters{
  margin-top:16px;
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
}
.pill:has(select){padding:0 6px 0 12px; height:38px}
.pill select{border:none; background-color:transparent; height:30px}
.pill select:hover{border:none}

/* ---------- 12. ROW / DEAL CARDS ---------- */
.month{
  margin-top:20px;
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  padding:16px;
  background:var(--surface);
  box-shadow:var(--shadow-card);
}
.month-head{
  display:flex; justify-content:space-between; gap:12px;
  flex-wrap:wrap; align-items:center;
  padding:2px 4px 12px;
  border-bottom:1px solid var(--border);
  margin-bottom:4px;
}
.month-head > b{font-size:.98rem; font-weight:600; letter-spacing:-0.01em}
.month-head .metrics{display:flex; gap:6px; flex-wrap:wrap}
.pill.metric{padding:4px 10px; height:auto; background:var(--bg2)}
.pill.metric.pending b{color:var(--orange)}
.pill.metric.activated b{color:var(--green)}

.item, .rowCard, .job, .tenantCard{
  position:relative;
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  background:var(--surface-2);
  margin-top:12px;
  padding:16px;
  transition:border-color .15s ease;
}
.item:hover, .rowCard:hover, .job:hover, .tenantCard:hover{border-color:var(--border-strong)}
.rowCard.clickable{cursor:pointer}
.rowCard.clickable:hover{background:var(--surface-3)}

/* status rail (left edge) */
.item{overflow:hidden; padding-left:19px}
.item::before{
  content:""; position:absolute; left:0; top:0; bottom:0;
  width:3px; background:var(--faint);
}
.item.s-pending::before{background:var(--orange)}
.item.s-activated::before{background:var(--green)}
.item.s-cancelled::before, .item.s-cancel::before{background:var(--red)}

/* ---------- 13. MESSAGES ---------- */
.msg, .msgBox, .box{
  margin-top:14px;
  padding:11px 13px;
  border-radius:var(--r-md);
  border:1px solid var(--border);
  background:var(--surface-2);
  color:var(--muted);
  white-space:pre-wrap;
  line-height:1.5;
  font-size:.85rem;
}
.msg:empty, .msgBox:empty, .box:empty{display:none}
.msg.ok, .msgBox.ok, .box.ok{
  color:var(--green); border-color:var(--green-border); background:var(--green-soft);
}
.msg.bad, .msgBox.bad, .box.bad{
  color:var(--red); border-color:var(--red-border); background:var(--red-soft);
}
/* plain-text status lines (index.html sets className="small ok|bad|muted") */
#msg.small{border:none; background:none; padding:0}

.priceBox{
  margin-top:14px; padding:11px 14px;
  border-radius:var(--r-md);
  border:1px solid var(--accent-border);
  background:var(--accent-soft);
  color:var(--text-2); font-size:.85rem;
}
.priceBox b{color:var(--accent2); font-weight:700; font-variant-numeric:tabular-nums}

/* ---------- 14. TABLES ---------- */
.tableWrap{
  margin-top:14px;
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  overflow:auto;
  background:var(--surface-2);
}
table{width:100%; border-collapse:collapse; font-size:.86rem}
thead th{
  text-align:left;
  padding:10px 14px;
  font-size:.72rem; font-weight:600;
  letter-spacing:.05em; text-transform:uppercase;
  color:var(--muted);
  border-bottom:1px solid var(--border-strong);
  background:var(--bg2);
  white-space:nowrap;
}
tbody td{
  padding:11px 14px;
  border-bottom:1px solid var(--border);
  font-variant-numeric:tabular-nums;
}
tbody tr:last-child td{border-bottom:none}
tbody tr{transition:background .12s ease}
tbody tr:hover{background:rgba(255,255,255,.02)}

/* ---------- 15. STATES ---------- */
.empty, #empty{
  margin-top:20px;
  padding:36px 20px;
  border:1px dashed var(--border-strong);
  border-radius:var(--r-xl);
  text-align:center;
  color:var(--muted);
  font-weight:500;
}

.skeleton{
  border-radius:var(--r-sm);
  background:linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
  background-size:200% 100%;
  animation:shimmer 1.4s ease infinite;
  color:transparent !important;
  user-select:none;
}
@keyframes shimmer{to{background-position:-200% 0}}

.spinner{
  display:inline-block; width:14px; height:14px; flex:none;
  border:2px solid var(--border-strong);
  border-top-color:var(--accent);
  border-radius:50%;
  animation:spin .7s linear infinite;
  vertical-align:-2px;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- 16. TOASTS & BANNERS ---------- */
.toast{
  position:fixed; right:18px; bottom:18px; z-index:50;
  max-width:340px;
  padding:12px 16px;
  border-radius:var(--r-lg);
  border:1px solid var(--border-strong);
  background:var(--surface-3);
  box-shadow:var(--shadow-pop);
  font-size:.86rem;
  animation:toastIn .25s ease;
}
@keyframes toastIn{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}

.demoBanner{
  display:none;
  margin:0 0 20px;
  padding:10px 16px;
  border-radius:var(--r-md);
  border:1px solid var(--accent-border);
  background:var(--accent-soft);
  color:#C8D6FF;
  font-weight:600; font-size:.85rem;
  letter-spacing:.01em;
}

/* ---------- 17. MOTION & A11Y ---------- */
.card, .month, .item{animation:rise .3s ease both}
@keyframes rise{from{opacity:0; transform:translateY(4px)}to{opacity:1; transform:none}}

/* ---------- 18. DASHBOARD COMPONENTS ---------- */
/* sticky topbar (consultant dashboard) */
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex-wrap:wrap;
  position:sticky; top:0; z-index:10;
  padding:12px 0 16px; margin-bottom:8px;
  background:linear-gradient(180deg, rgba(7,8,11,.94), rgba(7,8,11,.7), rgba(7,8,11,0));
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.right{display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:flex-end}

/* tertiary button (legacy alias of secondary) */
.btn-ter{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  height:38px; padding:0 15px;
  border-radius:var(--r-md);
  border:1px solid var(--border);
  background:var(--surface-2);
  color:var(--text-2);
  font-family:var(--font); font-weight:600; font-size:.87rem;
  cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.btn-ter:hover{background:var(--surface-3); color:var(--text); border-color:var(--border-strong)}

/* KPI extras */
.kpi{cursor:pointer; transition:border-color .15s ease, transform .12s ease}
.kpi:hover{border-color:var(--accent-border); transform:translateY(-1px)}
.kpi .sub{color:var(--faint); font-size:.76rem; margin-top:6px}

/* section title rows (dashboards) */
.sectionTitle{
  margin:24px 0 10px;
  font-size:.72rem; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase;
  color:var(--faint);
}
.sectionTitle span:first-child{color:var(--faint)}
.mini3{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
@media(max-width:720px){.mini3{grid-template-columns:1fr}}

/* quick links */
.links{display:flex; gap:14px; flex-wrap:wrap}
a.link{
  color:var(--muted); text-decoration:none;
  border-bottom:1px dashed var(--border-strong);
  padding-bottom:2px; font-size:.82rem;
  transition:color .15s ease, border-color .15s ease;
}
a.link:hover{color:var(--accent2); border-color:var(--accent-border)}

/* KPI pills row + inline status text (manager dashboard) */
.pills{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px}
.msgOk{color:var(--green); font-weight:600}
.msgBad{color:var(--red); font-weight:600}

/* key/value micro-layout (admin, invoice, jobtracker) */
.k{
  color:var(--muted);
  font-size:.72rem; font-weight:600;
  letter-spacing:.05em; text-transform:uppercase;
  margin-bottom:4px;
}
.v{font-weight:600; line-height:1.4; font-variant-numeric:tabular-nums}

/* generic sub-section box */
.section{
  margin-top:14px;
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:14px;
  background:var(--surface-2);
}
.section h3{margin:0 0 10px; font-size:.88rem; font-weight:600}

/* admin tenant cards */
.tenantList{display:grid; gap:12px}
.tenantCard{margin-top:0; padding:0; overflow:hidden}
.tenantHead{
  padding:16px;
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr auto;
  gap:14px;
  align-items:start;
}
@media (max-width:1100px){.tenantHead{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.tenantHead{grid-template-columns:1fr}}
.tenantDetail{
  display:none;
  padding:0 16px 16px;
  border-top:1px solid var(--border);
  background:var(--bg2);
}
.tenantDetail.open{display:block}
.actions{display:flex; gap:6px; flex-wrap:wrap; align-content:flex-start}

/* ---------- 19. MOTION & A11Y ---------- */
@media (prefers-reduced-motion: reduce){
  *{transition:none !important; animation:none !important}
}

/* ---------- 18. DASHBOARD PATTERNS ---------- */
/* sticky page topbar (consultant dashboard) */
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex-wrap:wrap;
  position:sticky; top:0; z-index:10;
  padding:10px 0 14px; margin-bottom:10px;
  background:linear-gradient(180deg, rgba(7,8,11,.92), rgba(7,8,11,.7), rgba(7,8,11,0));
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.right{display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:flex-end}

/* tertiary button used by consultant dashboard */
.btn-ter{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  height:38px; padding:0 15px;
  border-radius:var(--r-md);
  border:1px solid var(--border);
  background:var(--surface-2);
  color:var(--text-2);
  font-family:var(--font); font-weight:600; font-size:.87rem;
  cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.btn-ter:hover{background:var(--surface-3); color:var(--text); border-color:var(--border-strong)}

/* KPI extras */
.kpi{cursor:pointer; transition:transform .12s ease, border-color .15s ease}
.kpi:hover{transform:translateY(-2px); border-color:var(--border-strong)}
.kpi .sub{color:var(--faint); font-size:.76rem; margin-top:5px}

/* pill clusters emitted by JS renderers */
.pills{display:flex; gap:6px; flex-wrap:wrap; margin-top:10px}

/* inline status text (manager dashboard setMsg) */
.msgOk{color:var(--green); font-weight:600}
.msgBad{color:var(--red); font-weight:600}

/* key / value pairs (admin, invoice, jobtracker) */
.k{
  color:var(--muted);
  font-size:.72rem; font-weight:600;
  letter-spacing:.05em; text-transform:uppercase;
  margin-bottom:4px;
}
.v{font-weight:600; line-height:1.4; font-variant-numeric:tabular-nums}

/* quick drilldown links */
.links{display:flex; gap:14px; flex-wrap:wrap; margin-top:4px}
.links .link, a.link{
  color:var(--muted); text-decoration:none;
  border-bottom:1px dashed var(--border-strong);
  padding-bottom:2px; font-size:.82rem;
  transition:color .15s ease, border-color .15s ease;
}
.links .link:hover, a.link:hover{color:var(--accent2); border-color:var(--accent-border)}

/* section blocks inside expandable details */
.section{
  margin-top:14px;
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:14px;
  background:var(--surface-2);
}
.section h3{margin:0 0 10px; font-size:.88rem; font-weight:600}

/* admin tenant list */
.tenantList{display:grid; gap:12px}
.tenantCard{margin-top:0; overflow:hidden; padding:0}
.tenantHead{
  padding:16px;
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr auto;
  gap:14px;
  align-items:start;
}
@media (max-width:1100px){.tenantHead{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.tenantHead{grid-template-columns:1fr}}
.tenantDetail{
  display:none;
  padding:0 16px 16px;
  border-top:1px solid var(--border);
}
.tenantDetail.open{display:block}
.actions{display:flex; gap:8px; flex-wrap:wrap}

/* checkboxes */
input[type="checkbox"]{
  accent-color:var(--accent);
  width:16px; height:16px;
  cursor:pointer;
}

/* toast hides when cleared */
.toast:empty{display:none}

@media print{
  body{background:#fff; color:#000; padding:0}
  .hidePrint{display:none !important}
}