/* KPI Analytics | Interface refresh, October 2026
   Presentation only. No database operations or changes to user-entered content. */
:root {
  --hb-ink:#17243c; --hb-muted:#69768b; --hb-navy:#111d35; --hb-navy-2:#1c2c4b;
  --hb-red:#db3451; --hb-red-hover:#bc2541; --hb-line:#e6ebf2;
  --hb-white:#fff; --hb-ground:#f5f7fb; --hb-ring:rgba(219,52,81,.15);
  --hb-radius:15px;
}
*, *::before, *::after {box-sizing:border-box}
html {scroll-behavior:smooth}
body.hb-admin,body.hb-staff,body.hb-auth,body.hb-landing {
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--hb-ink);font-size:14px;letter-spacing:-.008em;-webkit-font-smoothing:antialiased;
}
body.hb-admin {margin:0;background:var(--hb-ground);overflow:hidden}
body.hb-staff {background:var(--hb-ground)}
body.hb-admin ::selection,body.hb-staff ::selection {background:#ffdce4;color:#721c2f}
/* Main application shell */
.hb-shell {height:100dvh;min-height:500px;display:flex;overflow:hidden}
.hb-sidebar {width:258px;flex:0 0 258px;background:var(--hb-navy);color:#f1f5ff;display:flex;flex-direction:column;min-height:0;position:relative;z-index:40;box-shadow:10px 0 35px rgba(12,27,53,.035)}
.hb-brand {padding:26px 20px 27px;display:flex;align-items:center;gap:11px;border-bottom:1px solid rgba(255,255,255,.09);min-height:101px}
.hb-brand-mark {width:42px;height:42px;border-radius:12px;display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;color:#fff;background:linear-gradient(145deg,#ef536b,#bd1c3d);box-shadow:0 7px 18px rgba(220,40,80,.23)}
.hb-brand-mark svg {width:22px;height:22px}
.hb-brand-name {font-size:17px;font-weight:800;letter-spacing:-.045em;line-height:1.25;white-space:nowrap}
.hb-brand-sub {font-size:9px;letter-spacing:.15em;color:#adb9d1;font-weight:750;margin-top:4px}
.hb-navigation-label {padding:27px 26px 12px;color:#8090ae;font-size:9px;font-weight:800;letter-spacing:.18em}
.hb-navigation {min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 12px 22px;display:flex;flex-direction:column;gap:4px;scrollbar-color:#475674 transparent;scrollbar-width:thin}
.hb-nav-item {position:relative;display:flex;align-items:center;min-height:44px;padding:10px 12px;gap:12px;border-radius:10px;color:#b9c5d9!important;text-decoration:none!important;font-size:12.6px;font-weight:580;transition:background .18s,color .18s,transform .18s;white-space:nowrap}
.hb-nav-item:hover,.hb-nav-item:focus-visible {background:#243452;color:white!important}
.hb-nav-item.is-active {color:white!important;background:#2a3b58;font-weight:700;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
.hb-nav-item.is-active::before {content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;background:#f4506f;border-radius:0 4px 4px 0}
.hb-nav-icon {width:18px;height:18px;flex-shrink:0;color:#a3b2cb}
.hb-nav-item.is-active .hb-nav-icon {color:#ff778e}
.hb-nav-name {min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis}
.hb-nav-count {background:var(--hb-red);color:#fff;font-size:10px;padding:2px 7px;min-width:22px;text-align:center;border-radius:20px;font-weight:750}
.hb-sidebar-bottom {margin-top:auto;border-top:1px solid rgba(255,255,255,.09);padding:15px 13px 18px}
.hb-sidebar-bottom-label {padding:3px 12px 8px;font-size:9px;font-weight:700;letter-spacing:.105em;color:#7e90ad}
.hb-logout {margin-top:4px}
.hb-main-column {display:flex;flex-direction:column;flex:1;min-width:0;min-height:0}
.hb-topbar {height:76px;min-height:76px;background:#fff;border-bottom:1px solid var(--hb-line);display:flex;align-items:center;justify-content:space-between;padding:0 34px;gap:15px;z-index:2}
.hb-topbar-left,.hb-topbar-right {display:flex;align-items:center;gap:14px}
.hb-topbar-eyebrow {font-size:10px;font-weight:780;letter-spacing:.105em;color:#8e9bad;line-height:1.5}
.hb-topbar-title {font-size:16px;font-weight:800;letter-spacing:-.03em;color:var(--hb-ink);line-height:1.35}
.hb-topbar-date {color:#7e899d;font-size:12px;font-weight:550;padding:8px 13px;background:#f6f8fb;border:1px solid #edf0f5;border-radius:9px}
.hb-admin-avatar,.hb-staff-avatar {width:35px;height:35px;flex:0 0 35px;display:flex;align-items:center;justify-content:center;border-radius:11px;background:#ffe9ed;color:#b92343;font-weight:800;box-shadow:inset 0 0 0 1px #fbdbe2}
.hb-content {min-width:0;min-height:0;flex:1;overflow:auto;background:radial-gradient(ellipse 700px 290px at 72% 0%,#eef3fd 0,transparent 88%),var(--hb-ground);padding:30px 34px 55px;overscroll-behavior:contain}
.hb-content > * {max-width:1600px;margin-left:auto;margin-right:auto}
.hb-menu-trigger,.hb-close-nav {display:none}
.hb-overlay {display:none}
/* Headlines and surfaces without modifying data, table columns or content */
.hb-content h2 {letter-spacing:-.045em;line-height:1.25;color:#14223c;font-weight:780}
.hb-content h2.text-3xl {font-size:26px}
.hb-content h2.text-2xl {font-size:25px}
.hb-content h3 {letter-spacing:-.024em}
.hb-content p.text-gray-600,.hb-content p.text-gray-500,.hb-staff-content p.text-gray-600 {color:var(--hb-muted)}
.hb-admin .hb-content div.bg-white[class*="rounded"],
.hb-staff .hb-staff-content div.bg-white[class*="rounded"] {border-color:#e9edf4!important;border-radius:var(--hb-radius)!important;box-shadow:0 3px 10px rgba(27,46,85,.025),0 13px 32px rgba(27,46,85,.04)!important}
.hb-admin .hb-content div.bg-gray-50[class*="rounded"],
.hb-staff .hb-staff-content div.bg-gray-50[class*="rounded"] {border-radius:var(--hb-radius)!important}
.hb-admin .hb-content .shadow-lg,.hb-staff-content .shadow-lg {box-shadow:0 6px 24px rgba(31,51,87,.06)!important}
.hb-admin .hb-content .rounded-2xl,.hb-staff-content .rounded-2xl {border-radius:16px}
.hb-admin .hb-content .bg-purple-50,.hb-staff-content .bg-purple-50 {background-color:#f6f5fd}
.hb-admin .hb-content div[class*="border-l-4"].bg-green-50 {background:#f0faf5;border-color:#18a86f;color:#186344}
.hb-admin .hb-content div[class*="border-l-4"].bg-red-50 {background:#fff2f2;border-color:#e3485d;color:#983041}
/* Form fields, selected controls, buttons */
.hb-content :is(input:not([type="checkbox"]):not([type="radio"]),textarea,select),
.hb-staff-content :is(input:not([type="checkbox"]):not([type="radio"]),textarea,select),
.hb-auth :is(input:not([type="checkbox"]):not([type="radio"]),textarea,select) {
  border-radius:9px!important;border:1px solid #dce3ee!important;background-color:#fff;color:#202d43;min-height:40px;
  transition:border-color .17s,box-shadow .17s,background .17s;max-width:100%;font-size:13px;
}
.hb-content :is(input,textarea,select):focus,.hb-staff-content :is(input,textarea,select):focus,.hb-auth :is(input,textarea,select):focus {outline:none!important;border-color:#dc526b!important;box-shadow:0 0 0 3px var(--hb-ring)!important}
.hb-content input[type="checkbox"],.hb-content input[type="radio"],.hb-staff-content input[type="checkbox"] {accent-color:var(--hb-red)}
.hb-content input::placeholder,.hb-staff-content input::placeholder {color:#a4afc0}
.hb-content label,.hb-staff-content label {color:#44536a}
.hb-content :is(button,a)[class*="bg-purple-600"],.hb-content :is(button,a)[class*="bg-purple-700"],
.hb-staff-content :is(button,a)[class*="bg-blue-600"] {background:#203657!important;color:#fff!important}
.hb-content :is(button,a)[class*="bg-purple-600"]:hover,.hb-content :is(button,a)[class*="bg-purple-700"]:hover,
.hb-staff-content :is(button,a)[class*="bg-blue-600"]:hover {background:#132540!important}
.hb-content :is(button,a)[class*="bg-blue-600"],.hb-content :is(button,a)[class*="bg-blue-700"] {background:#263f66!important;color:#fff!important}
.hb-content :is(button,a)[class*="bg-blue-600"]:hover,.hb-content :is(button,a)[class*="bg-blue-700"]:hover {background:#162b49!important}
.hb-content :is(button,a)[class*="bg-green-600"]:hover {background:#0b9365!important}
.hb-content :is(button,a)[class*="bg-red-600"]:hover {background:#bd2142!important}
.hb-content button,.hb-staff-content button,.hb-content a[class*="bg-"],.hb-staff-content a[class*="bg-"] {transition:background .17s,box-shadow .17s,transform .17s,border-color .17s}
.hb-content button:active,.hb-staff-content button:active {transform:translateY(1px)}
.hb-content button:focus-visible,.hb-staff-content a:focus-visible,.hb-content a:focus-visible {outline:3px solid var(--hb-ring);outline-offset:2px}
.hb-content button[class*="bg-"],.hb-staff-content a[class*="bg-"] {border-radius:9px!important;font-size:13px}
.hb-field-note {margin-top:7px;color:#77869b;font-weight:500;font-size:11px;line-height:1.5}
/* Data grid and score cards */
.hb-content table,.hb-staff-content table {font-size:12.5px;border-collapse:separate;border-spacing:0;width:100%}
.hb-content thead,.hb-staff-content thead {background:#f5f7fb!important}
.hb-content thead th,.hb-staff-content thead th {font-size:10px!important;font-weight:780!important;letter-spacing:.075em;color:#72819a!important;background:#f5f7fb;padding-top:13px!important;padding-bottom:13px!important;border-bottom:1px solid #e7ebf1;text-transform:uppercase}
.hb-content tbody tr,.hb-staff-content tbody tr {transition:background .15s}
.hb-content tbody tr:hover,.hb-staff-content tbody tr:hover {background-color:#f8faff}
.hb-content tbody td,.hb-staff-content tbody td {border-bottom:1px solid #f0f2f6}
.hb-content table tbody tr:last-child td,.hb-staff-content table tbody tr:last-child td {border-bottom:0}
.hb-admin .hb-content .group-hover\:opacity-100 {opacity:1}
.hb-content .text-purple-700,.hb-content .text-purple-600 {color:#374e73}
.hb-admin .hb-content > .grid.md\:grid-cols-3 > .bg-white {position:relative;overflow:hidden;min-height:130px}
.hb-admin .hb-content > .grid.md\:grid-cols-3 > .bg-white::after {content:"";position:absolute;height:3px;left:22px;right:22px;bottom:0;background:linear-gradient(90deg,#dc3655,#fdc0c9);border-radius:3px 3px 0 0}
.hb-admin .hb-content > .grid.md\:grid-cols-3 > .bg-white p.text-3xl {font-size:29px;font-weight:850;color:#182741}
.hb-content canvas {max-width:100%}
.hb-content .overflow-x-auto,.hb-staff-content .overflow-x-auto {scrollbar-width:thin;scrollbar-color:#cdd6e6 transparent}
.hb-content .overflow-x-auto::-webkit-scrollbar,.hb-staff-content .overflow-x-auto::-webkit-scrollbar {height:7px}
.hb-content .overflow-x-auto::-webkit-scrollbar-thumb,.hb-staff-content .overflow-x-auto::-webkit-scrollbar-thumb {border-radius:8px;background:#ccd5e3}
/* Staff shell */
.hb-staff-header {background:#fff;border-bottom:1px solid var(--hb-line);box-shadow:0 5px 22px rgba(24,42,72,.03);position:sticky;top:0;z-index:30}
.hb-staff-header-inner {max-width:1320px;padding:12px 27px;min-height:74px;margin:auto;display:flex;align-items:center;gap:28px;justify-content:space-between}
.hb-staff-brand {text-decoration:none!important;display:flex;align-items:center;gap:10px;flex-shrink:0;color:#14223c!important;font-weight:800;font-size:17px;letter-spacing:-.04em;line-height:1.2}
.hb-staff-brand small {display:block;font-size:9px;color:#8995a6;letter-spacing:.13em;margin-top:4px;font-weight:800}
.hb-staff-nav {display:flex;align-items:center;gap:4px;margin-right:auto;margin-left:25px}
.hb-staff-nav a {padding:10px 16px;color:#68788f;text-decoration:none!important;border-radius:9px;font-size:12.5px;font-weight:620;white-space:nowrap}
.hb-staff-nav a:hover {background:#f5f7fb;color:#1b2a47}
.hb-staff-nav a.is-active {color:#b92849;background:#ffedf1;font-weight:800}
.hb-staff-user {display:flex;align-items:center;gap:10px;margin-left:auto}
.hb-staff-greeting {color:#718097;font-size:12px;max-width:230px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hb-staff-signout {padding:9px 14px;border:1px solid #e4eaf2;border-radius:9px;color:#31415b;font-size:12.5px;font-weight:700;white-space:nowrap;text-decoration:none!important}
.hb-staff-signout:hover {background:#f5f7fc}
.hb-staff-content {max-width:1320px!important;padding-top:35px!important;padding-bottom:45px!important}
.hb-staff-content h2 {font-weight:820;letter-spacing:-.04em;color:#14223c}
.hb-staff-content h3 {letter-spacing:-.025em}
.hb-staff footer {border-top:1px solid var(--hb-line);color:#8290a5}
/* Entry and login */
body.hb-auth {background:radial-gradient(circle at 10% 8%,#fce4e9,transparent 33%),radial-gradient(circle at 86% 95%,#e1eafa,transparent 45%),#f5f7fb;min-height:100dvh}
.hb-auth > div:first-of-type h2 {color:var(--hb-ink);font-size:29px;letter-spacing:-.045em}
.hb-auth > div:nth-of-type(2) > .bg-white {border-radius:20px;box-shadow:0 24px 80px rgba(31,52,84,.10),0 3px 12px rgba(31,52,84,.03);border-color:#e9eefa;padding:34px 36px}
.hb-auth input {padding:10px 12px}
.hb-auth button[class*="bg-purple-"],.hb-auth button[class*="bg-blue-"] {background:#1e3355!important;border-radius:10px;min-height:43px}
.hb-auth button[class*="bg-purple-"]:hover,.hb-auth button[class*="bg-blue-"]:hover {background:#152643!important}
body.hb-landing {background:radial-gradient(circle at 14% 5%,#394c74 0,transparent 40%),radial-gradient(circle at 90% 100%,#542741 0,transparent 40%),#111d35!important;min-height:100dvh}
.hb-landing .glass-card {background:#fff;border:1px solid rgba(255,255,255,.2);border-radius:23px;box-shadow:0 18px 65px rgba(4,11,29,.22);backdrop-filter:none}
.hb-landing h1 {letter-spacing:-.055em;line-height:1.06}
.hb-landing .glass-card h2 {letter-spacing:-.035em}
.hb-landing .glass-card a[class*="bg-blue-"],.hb-landing .glass-card a[class*="bg-purple-"] {background:#1d3254!important;border-radius:10px;box-shadow:none;transition:background .18s,transform .18s}
.hb-landing .glass-card a[class*="bg-blue-"]:hover,.hb-landing .glass-card a[class*="bg-purple-"]:hover {background:#d53252!important;transform:translateY(-1px)}
/* Accessibility and responsive scaling */
@media (max-width:1100px) {
  .hb-sidebar {width:228px;flex-basis:228px}
  .hb-brand {padding-left:16px;padding-right:12px}
  .hb-navigation {padding-left:9px;padding-right:9px}
  .hb-content {padding-left:24px;padding-right:24px}
  .hb-staff-header-inner {gap:13px}
  .hb-staff-nav {margin-left:0}
  .hb-staff-greeting {display:none}
}
@media (max-width:790px) {
  body.hb-admin {overflow:hidden}
  .hb-sidebar {position:fixed;top:0;left:0;bottom:0;width:min(290px,86vw);max-height:100dvh;transform:translateX(-102%);transition:transform .24s ease;box-shadow:25px 0 55px rgba(8,21,46,.23)}
  body.hb-nav-open .hb-sidebar {transform:translateX(0)}
  .hb-overlay {position:fixed;inset:0;background:rgba(15,27,48,.58);z-index:35}
  body.hb-nav-open .hb-overlay {display:block}
  .hb-menu-trigger {border:1px solid #e3e9f1;background:white;color:#263652;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;cursor:pointer}
  .hb-close-nav {display:inline-flex;margin-left:auto;background:rgba(255,255,255,.07);width:29px;height:29px;border-radius:8px;font-size:22px;color:#fff;align-items:center;justify-content:center}
  .hb-topbar {height:69px;min-height:69px;padding:0 18px}
  .hb-topbar-date {display:none}
  .hb-content {padding:22px 15px 38px}
  .hb-content h2.text-3xl,.hb-content h2.text-2xl {font-size:23px}
  .hb-content > .flex {gap:12px;flex-wrap:wrap}
  .hb-content table {min-width:540px}
  .hb-staff-header-inner {padding:12px 15px;flex-wrap:wrap;gap:9px}
  .hb-staff-brand {font-size:16px}
  .hb-staff-brand .hb-brand-mark {width:37px;height:37px}
  .hb-staff-nav {order:3;flex-basis:100%;overflow-x:auto;border-top:1px solid #edf0f5;padding-top:10px;padding-bottom:1px;gap:2px}
  .hb-staff-nav a {padding:9px 13px}
  .hb-staff-user {margin-left:auto}
  .hb-staff-content {padding:25px 15px 40px!important}
  .hb-staff-content table {min-width:540px}
}
@media (max-width:480px) {
  .hb-topbar-title {font-size:14px}
  .hb-topbar-eyebrow {font-size:9px}
  .hb-admin-avatar {width:31px;height:31px;flex-basis:31px}
  .hb-content > .mb-6.flex,.hb-content > .mb-8.flex {align-items:flex-start}
  .hb-content h2.text-3xl,.hb-content h2.text-2xl {font-size:22px}
  .hb-staff-greeting {display:none}
  .hb-staff-avatar {display:none}
  .hb-staff-brand .hb-brand-mark {width:34px;height:34px}
  .hb-auth > div:nth-of-type(2) > .bg-white {padding:26px 22px}
  .hb-landing h1 {font-size:36px}
  .hb-content .flex.justify-between {flex-wrap:wrap;gap:10px}
  .hb-admin .hb-content .group-hover\:opacity-100 {opacity:1!important}
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after {scroll-behavior:auto!important;transition:none!important;animation:none!important}
}