/*! Fernly Bento Workspace Engine for GymMan ERP — © 2026 Hasib (OVERSHOOT) & GymMan Architecture */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

:root {
  /* Official Design System Tokens - Dark Mode */
  --page: #0B1110;
  --panel: #131C19;
  --card: #131C19;
  --card-hover: #1C2924;
  --hair: #24332C;
  --ink: #F8FAFC;
  --muted: #94A3B8;
  --faint: #64748B;
  --brand: #10B880;
  --btn-primary: #0EB47D;
  --btn-hover: #12C58B;
  --btn-text: #FFFFFF;

  /* Typography System */
  --font-heading: "Plus Jakarta Sans", sans-serif;
  --font-body: "Inter", sans-serif;
  --font-mono: "Inter", monospace;
  --font: var(--font-body);
  --font-inter: var(--font-body);

  /* Semantic UI Tokens */
  --bg-canvas: #0B1110;
  --bg-surface: #131C19;
  --bg-surface-elevated: #1C2924;
  --bg-well: #131C19;
  --border-subtle: #24332C;
  --border-light: #24332C;
  --primary-brand: #10B880;
  --primary-brand-hover: #12C58B;
  --primary-brand-dim: rgba(16, 184, 128, 0.12);
  --primary-brand-glow: rgba(16, 184, 128, 0.25);
  --primary-brand-text: #FFFFFF;
  --primary-volt: var(--primary-brand);
  --primary-volt-hover: var(--primary-brand-hover);
  --primary-volt-dim: var(--primary-brand-dim);
  --primary-volt-glow: var(--primary-brand-glow);
  --accent-emerald: #10B880;
  --text-pure: #F8FAFC;
  --text-muted: #94A3B8;
  --text-dim: #64748B;
  --font-sans: var(--font-body);
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 9999px;
  --rail-width: 80px;

  --r-lg: 20px;
  --r-md: 14px;
  --gap: 16px;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 8px 24px -12px rgba(0, 0, 0, 0.35);
  --shadow-card: var(--shadow);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --focus: 0 0 0 2px var(--card), 0 0 0 4px var(--brand);
}

/* Official Design System Tokens - Light Mode */
html.light, body.light {
  --page: #F9FAFB;
  --panel: #FFFFFF;
  --card: #FFFFFF;
  --card-hover: #F3F4F6;
  --hair: #E5E7EB;
  --ink: #111827;
  --muted: #4B5563;
  --faint: #9CA3AF;
  --brand: #10B880;
  --btn-primary: #0EB47D;
  --btn-hover: #0C9A6A;
  --btn-text: #FFFFFF;

  --bg-canvas: #F9FAFB;
  --bg-surface: #FFFFFF;
  --bg-surface-elevated: #F3F4F6;
  --bg-well: #F9FAFB;
  --border-subtle: #E5E7EB;
  --border-light: #E5E7EB;
  --primary-brand: #10B880;
  --primary-brand-hover: #0C9A6A;
  --primary-brand-dim: rgba(16, 184, 128, 0.10);
  --primary-brand-glow: rgba(16, 184, 128, 0.20);
  --primary-brand-text: #FFFFFF;
  --primary-volt: var(--primary-brand);
  --text-pure: #111827;
  --text-muted: #4B5563;
  --text-dim: #9CA3AF;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 4px 12px -2px rgba(0, 0, 0, 0.05);
  --shadow-card: var(--shadow);
}

/* Base Reset & Core Typography */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
[hidden] {
  display: none !important;
}

body {
  background: var(--page);
  min-height: 100dvh;
  color: var(--ink);
  font: 400 15px/1.45 var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums;
  margin: 0;
  overflow-x: hidden;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}

h1, h2, h3, h4, p, ul, ol {
  margin: 0;
}
ul, ol {
  padding: 0;
  list-style: none;
}
button, input, select, textarea {
  font: inherit;
  color: inherit;
}
button {
  cursor: pointer;
  background: 0 0;
  border: 0;
  padding: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7px;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
  width: 20px;
  height: 20px;
}
:where(a, button, input, select, textarea):focus-visible {
  box-shadow: var(--focus);
  outline: none;
}

/* ==========================================================================
   Typography Standards: Plus Jakarta Sans (Headings) & Inter (Body/Controls)
   - Headings (H1-H3): Plus Jakarta Sans, Bold (700)
   - Body / Subtext: Inter, Regular (400)
   - Buttons / Labels: Inter, Medium (500)
   - Numbers / Money: Inter / font-mono, Medium (500)
   ========================================================================== */
h1 {
  letter-spacing: -0.035em !important;
  font-family: var(--font-heading) !important;
  font-size: clamp(28px, 3vw, 36px) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  color: var(--ink) !important;
}

h2 {
  letter-spacing: -0.03em !important;
  font-family: var(--font-heading) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  color: var(--ink) !important;
}

h3 {
  letter-spacing: -0.02em !important;
  font-family: var(--font-heading) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: var(--ink) !important;
}

h4, h5, h6, .section-title, .board__title, .card__title {
  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
}

body, p, .body-text, td, .table td {
  font-family: var(--font-body) !important;
  font-weight: 400 !important;
}

button, .btn, .nav__item, label, .field__label, th, .table th {
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
}

.font-num,
.font-mono,
[class*="font-mono"] {
  font-family: var(--font-mono) !important;
  font-weight: 500 !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: -0.01em;
}

.section-inter {
  font-family: var(--font-body) !important;
}

.section-inter *:not(code):not(kbd):not(pre):not(.section-title):not(.font-heading) {
  font-family: var(--font-body) !important;
}

.section-inter p,
.section-inter span:not(.section-title),
.section-inter label,
.section-inter button,
.section-inter input,
.section-inter select,
.section-inter textarea,
.section-inter th,
.section-inter td {
  font-family: var(--font-inter) !important;
}

.section-inter .font-mono,
.section-inter .font-num {
  font-family: var(--font-inter) !important;
  font-variant-numeric: tabular-nums;
}

/* Enforce Plus Jakarta Sans for section titles across all views: Scales up to 60px on Desktop */
.section-title,
.font-heading,
.board__title,
.section-inter .section-title,
.section-inter h1.section-title,
.section-inter h2.section-title {
  font-family: var(--font) !important; /* "Plus Jakarta Sans" */
  font-size: clamp(28px, 4.5vw, 36px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.15 !important;
  color: #ffffff !important;
}

@media (min-width: 1024px) {
  .section-title,
  .font-heading,
  .board__title,
  .section-inter .section-title,
  .section-inter h1.section-title,
  .section-inter h2.section-title {
    font-size: 40px !important;
    line-height: 1.15 !important;
    letter-spacing: -0.03em !important;
    font-weight: 700 !important;
  }

  .view .flex.items-center:has(.section-title) > span.rounded-full:first-child,
  .view .flex.items-center .w-2\.5.h-2\.5.rounded-full.bg-emerald-400,
  .view .flex.items-center .w-2\.5.h-2\.5.rounded-full.bg-emerald-500 {
    width: 15px !important;
    height: 15px !important;
  }

  .section-title ~ span[class*="rounded-full"],
  .section-title + span[class*="rounded-full"] {
    font-size: 13px !important;
    padding: 4px 12px !important;
    height: 28px !important;
  }
}

body.light .section-title,
body.light .font-heading,
body.light .board__title,
body.light .section-inter .section-title {
  color: #0B1110 !important;
}

/* Header Pill Badges: Universal Single-Line Guarantee (Never Wrap or Squish) */
.section-title ~ span,
.section-title + span,
span[class*="rounded-full"][class*="border-emerald"],
.view header span[class*="rounded-full"],
.view .section-title ~ span[class*="rounded-full"] {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* Custom Fernly Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--hair);
  border-radius: var(--radius-pill);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--muted);
}

/* Skip link */
.skip {
  z-index: 100;
  color: #F3F4F6;
  background: var(--g-950);
  border-radius: 10px;
  padding: 10px 16px;
  position: fixed;
  top: 12px;
  left: 16px;
  transform: translateY(-160%);
  transition: transform .2s var(--ease);
}
.skip:focus {
  transform: none;
}
.sr-only {
  clip-path: inset(50%);
  white-space: nowrap;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  position: absolute;
  overflow: hidden;
}

/* -------------------------------------------------------------
 * 1. APP GRID & SHELL (Exact Fernly 252px Bento Architecture)
 * ------------------------------------------------------------- */
.app {
  grid-template-columns: 252px minmax(0, 1fr);
  gap: 14px;
  max-width: 1680px;
  min-height: 100dvh;
  margin: 0 auto;
  padding: 14px;
  display: grid;
  width: 100%;
  box-sizing: border-box;
}

.shell {
  grid-template-rows: auto 1fr;
  gap: 14px;
  min-width: 0;
  display: contents;
}

.workspace {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  min-height: 0;
  flex: 1;
}

/* -------------------------------------------------------------
 * 2. SIDEBAR NAVIGATION
 * ------------------------------------------------------------- */
.sidebar {
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  overscroll-behavior: contain;
  flex-direction: column;
  height: calc(100dvh - 28px);
  padding: 26px 0 18px;
  display: flex;
  position: sticky;
  top: 14px;
  overflow-y: auto;
  width: 252px;
  box-sizing: border-box;
  z-index: 40;
}
.sidebar__top {
  justify-content: space-between;
  align-items: center;
  padding: 0 20px 0 24px;
  display: flex;
}
.icon-btn.sidebar__close {
  display: none;
}
.brand {
  align-items: center;
  gap: 12px;
  display: inline-flex;
  cursor: pointer;
}
.brand__badge {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--card);
  border: 1px solid var(--hair);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}
.brand__name {
  letter-spacing: -0.03em;
  font-size: 21px;
  font-weight: 600;
  color: var(--ink);
}
.sidebar__navs {
  position: relative;
  margin-top: 18px;
}
/* Facility Branch Switcher (On Top of Dashboard in Sidebar) */
.sidebar__facility {
  padding: 0 16px;
  margin-bottom: 14px;
}
.sidebar__facility select,
.sidebar #header-branch-select {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  background-color: var(--card) !important;
  color: var(--ink) !important;
  border: 1px solid var(--hair) !important;
  border-radius: 12px !important;
  padding: 8px 28px 8px 10px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  outline: none !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}
.sidebar__facility select:hover,
.sidebar #header-branch-select:hover {
  border-color: rgba(16, 185, 129, 0.5) !important;
}
.sidebar__facility select:focus-visible,
.sidebar #header-branch-select:focus-visible {
  border-color: #10B880 !important;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2) !important;
}
.nav {
  margin-top: 14px;
}
.nav + .nav {
  margin-top: 22px;
}
.nav__label {
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--faint);
  padding: 0 24px 8px;
  font-size: 11.5px;
  font-weight: 600;
}
.nav__link, .nav-btn {
  text-align: left;
  width: 100%;
  color: var(--muted);
  align-items: center;
  gap: 12px;
  padding: 10px 24px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  transition: color .2s, background-color .2s;
  display: flex;
  position: relative;
  background: transparent;
  border: none;
  cursor: pointer;
  text-decoration: none;
  box-sizing: border-box;
}
.nav__link svg, .nav-btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  transition: color .2s;
}
.nav__link:hover, .nav-btn:hover {
  color: var(--ink);
}
.nav__link[aria-current=page], .nav-btn.active {
  color: var(--ink) !important;
  font-weight: 600;
}
.nav__link[aria-current=page] svg, .nav-btn.active svg {
  color: var(--g-700) !important;
}
.nav__link[aria-current=page]::before, .nav-btn.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: var(--g-700);
}
.nav__badge {
  color: #F3F4F6;
  background: var(--g-950);
  border-radius: 6px;
  margin-left: auto;
  padding: 2px 7px;
  font-size: 10.5px;
  font-weight: 600;
}

/* Signature Mobile Promo Bento Card */
.promo {
  isolation: isolate;
  border-radius: var(--r-md);
  color: #F3F4F6;
  background: var(--deep);
  margin: auto 16px 0;
  padding: 18px 16px 16px;
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--g-700) 40%, transparent);
}
.promo::before {
  content: "";
  z-index: -1;
  background: repeating-radial-gradient(circle at 78% 70%, transparent 0 14px, var(--swirl) 15px 16px),
              radial-gradient(70% 60% at 85% 85%, var(--g-700), transparent 70%),
              radial-gradient(60% 50% at 10% 0%, var(--g-950), transparent 70%);
  position: absolute;
  inset: -40%;
}
.promo__icon {
  color: #0B1110;
  background: #F3F4F6;
  border-radius: 50%;
  place-items: center;
  width: 26px;
  height: 26px;
  display: grid;
}
.promo__icon svg {
  width: 15px;
  height: 15px;
}
.promo__title {
  letter-spacing: -0.02em;
  margin-top: 12px;
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.2;
}
.promo__sub {
  color: #10B880;
  margin-top: 4px;
  font-size: 12px;
}
.promo__btn {
  width: 100%;
  color: #ffffff;
  text-align: center;
  background: var(--g-800);
  border-radius: 999px;
  margin-top: 16px;
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 600;
  transition: background .2s, transform .2s var(--ease);
  display: block;
  border: none;
  cursor: pointer;
}
.promo__btn:hover {
  background: var(--g-700);
  transform: translateY(-1px);
}

/* -------------------------------------------------------------
 * 3. TOPBAR HEADER
 * ------------------------------------------------------------- */
.topbar {
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  display: flex;
  box-shadow: var(--shadow);
  box-sizing: border-box;
}
.icon-btn.topbar__menu {
  display: none;
}
.search {
  flex: 0 380px;
  position: relative;
  display: flex;
  align-items: center;
}
.search input,
#global-search-input {
  background: var(--card) !important;
  border: 1px solid var(--hair) !important;
  border-radius: 999px !important;
  outline: none !important;
  width: 100% !important;
  height: 40px !important;
  padding: 0 48px 0 38px !important;
  font-size: 13px !important;
  color: var(--ink) !important;
  transition: border-color .2s, box-shadow .2s !important;
  box-sizing: border-box !important;
}
body.light .search input,
body.light #global-search-input {
  background: #ffffff !important;
  color: #131C19 !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
}
.search input::placeholder,
#global-search-input::placeholder {
  color: var(--faint) !important;
}
body.light .search input::placeholder,
body.light #global-search-input::placeholder {
  color: #94A3B8 !important;
}
.search input:focus-visible,
#global-search-input:focus-visible {
  box-shadow: var(--focus) !important;
  border-color: var(--g-600) !important;
}
.search__icon {
  width: 16px !important;
  height: 16px !important;
  color: var(--muted) !important;
  pointer-events: none !important;
  position: absolute !important;
  top: 50% !important;
  left: 14px !important;
  transform: translateY(-50%) !important;
  z-index: 2 !important;
}
.search__kbd {
  font: 500 11px var(--font) !important;
  color: var(--ink) !important;
  background: var(--panel) !important;
  border: 1px solid var(--hair) !important;
  pointer-events: none !important;
  border-radius: 6px !important;
  padding: 2px 6px !important;
  position: absolute !important;
  top: 50% !important;
  right: 10px !important;
  transform: translateY(-50%) !important;
  z-index: 2 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
}
body.light .search__kbd {
  background: #F3F4F6 !important;
  border-color: #E5E7EB !important;
  color: #4b5563 !important;
}

/* Centralized Live Time & Date Capsule */
.topbar {
  position: relative !important;
}

.topbar__center {
  display: none !important;
}

@media (min-width: 1024px) {
  .topbar__center {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10 !important;
    pointer-events: none !important;
  }

  .topbar__center > * {
    pointer-events: auto !important;
  }
}

.topbar__actions {
  align-items: center;
  gap: 12px;
  margin-left: auto;
  display: flex;
}
.icon-btn {
  width: 44px;
  height: 44px;
  color: var(--ink);
  border-radius: 12px;
  place-items: center;
  display: grid;
  cursor: pointer;
  background: transparent;
  border: none;
}
.icon-btn--round {
  background: var(--card);
  border: 1px solid var(--hair);
  width: 48px;
  height: 48px;
  transition: transform .25s var(--ease), border-color .2s;
  border-radius: 50%;
  position: relative;
  place-items: center;
  display: grid;
  cursor: pointer;
  color: var(--ink);
}
.icon-btn--round:hover {
  transform: translateY(-2px);
  border-color: var(--g-600);
}
.capsule-pill {
  background-color: var(--card);
  border: 1px solid var(--hair);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: all 0.15s ease;
}
.capsule-pill:hover {
  border-color: var(--g-600);
}
.profile {
  text-align: left;
  border-radius: 999px;
  align-items: center;
  gap: 12px;
  padding: 2px 6px 2px 2px;
  display: flex;
  cursor: pointer;
}
/* Merged Profile & Role Switcher Pill */
.profile-role-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 3px 12px 3px 4px !important;
  border-radius: 9999px !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
  background: var(--card) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
  transition: all 0.2s ease !important;
}
.profile-role-pill:hover {
  border-color: rgba(16, 185, 129, 0.6) !important;
  background: var(--card-hover) !important;
}
.profile-role-pill .avatar {
  width: 30px !important;
  height: 30px !important;
  font-size: 11px !important;
  border: 1px solid rgba(16, 185, 129, 0.35) !important;
}
.profile-role-pill select,
#header-role-select {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  color: #10B880 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  padding: 0 16px 0 2px !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2310B981'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right center !important;
  background-size: 14px !important;
}
.avatar {
  background: var(--g-100);
  color: var(--g-950);
  border-radius: 50%;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  font-size: 13.5px;
  font-weight: 600;
  display: grid;
  border: 1px solid var(--hair);
  position: relative;
}

/* -------------------------------------------------------------
 * 4. BUTTONS & CHIPS
 * ------------------------------------------------------------- */
.btn {
  white-space: nowrap;
  cursor: pointer;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 24px;
  font-size: 15px;
  font-weight: 500;
  transition: background-color .2s, box-shadow .2s, color .2s, transform .25s var(--ease);
  display: inline-flex;
  border: none;
  text-decoration: none;
  box-sizing: border-box;
}
.btn:active {
  transform: scale(0.97);
}
.btn--primary, .btn-primary, .btn-volt {
  color: var(--btn-text) !important;
  background-color: var(--btn-primary) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important;
  border-radius: 999px !important;
  border: 1px solid var(--btn-primary) !important;
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
}
.btn--primary:hover, .btn-primary:hover, .btn-volt:hover {
  background-color: var(--btn-hover) !important;
  border-color: var(--btn-hover) !important;
  transform: translateY(-1px) !important;
}
.btn--ghost, .btn-ghost {
  color: var(--ink) !important;
  background: var(--card) !important;
  border: 1px solid var(--hair) !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}
.btn--ghost:hover, .btn-ghost:hover {
  background: var(--card-hover) !important;
  border-color: var(--hair) !important;
}
.btn-profile {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 14px !important;
  border-radius: 10px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  background-color: #1E293B !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #FFFFFF !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
  text-decoration: none !important;
  line-height: 1 !important;
}
.btn-profile:hover {
  background-color: #0F172A !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35) !important;
}
.btn-profile svg {
  color: #94A3B8 !important;
  flex-shrink: 0 !important;
}
.btn-profile:hover svg {
  color: #FFFFFF !important;
}
body.light .btn-profile {
  background-color: #1E293B !important;
  border: 1px solid #0F172A !important;
  color: #FFFFFF !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.2) !important;
}
body.light .btn-profile:hover {
  background-color: #0F172A !important;
  border-color: #020617 !important;
  color: #FFFFFF !important;
}
body.light .btn-profile svg {
  color: #94A3B8 !important;
}
body.light .btn-profile:hover svg {
  color: #FFFFFF !important;
}

/* -------------------------------------------------------------
 * High-Contrast Segmented Controls (Light & Dark Mode)
 * ------------------------------------------------------------- */
.segmented-tray {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 4px !important;
  border-radius: 12px !important;
  background-color: rgba(0, 0, 0, 0.45) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3) !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  white-space: nowrap !important;
  scrollbar-width: none !important;
}
.segmented-tray::-webkit-scrollbar {
  display: none !important;
}
body.light .segmented-tray {
  background-color: #E2E8F0 !important;
  border: 1px solid #CBD5E1 !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06) !important;
}

.segmented-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 5px 10px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  border: 1px solid transparent !important;
  color: #94A3B8 !important;
  background-color: transparent !important;
  transition: all 0.15s ease !important;
  text-decoration: none !important;
}
.segmented-pill:hover {
  color: #FFFFFF !important;
  background-color: rgba(255, 255, 255, 0.06) !important;
}
body.light .segmented-pill {
  color: #475569 !important;
}
body.light .segmented-pill:hover {
  color: #0F172A !important;
  background-color: rgba(255, 255, 255, 0.6) !important;
}

/* Active State that POPS OUT */
.segmented-pill.is-active {
  background-color: rgba(255, 255, 255, 0.16) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) !important;
  font-weight: 600 !important;
}
body.light .segmented-pill.is-active {
  background-color: #FFFFFF !important;
  color: #0F172A !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06) !important;
  font-weight: 600 !important;
}

/* Counter Badge inside Pill */
.segmented-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 2px 6px !important;
  border-radius: 6px !important;
  font-size: 10px !important;
  font-family: var(--font-mono, monospace) !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: #94A3B8 !important;
  transition: all 0.15s ease !important;
}
body.light .segmented-badge {
  background-color: #CBD5E1 !important;
  color: #334155 !important;
}

.segmented-pill.is-active .segmented-badge {
  background-color: rgba(16, 184, 128, 0.25) !important;
  color: #34D399 !important;
  border: 1px solid rgba(16, 184, 128, 0.3) !important;
}
body.light .segmented-pill.is-active .segmented-badge {
  background-color: rgba(16, 184, 128, 0.15) !important;
  color: #059669 !important;
  border: 1px solid rgba(16, 184, 128, 0.25) !important;
}
.btn--danger {
  color: #F3F4F6;
  background: linear-gradient(#94A3B8, #94A3B8);
}
.btn--danger:hover {
  background: linear-gradient(#94A3B8, #94A3B8);
}
.chip {
  white-space: nowrap;
  height: 36px;
  box-shadow: inset 0 0 0 1.5px var(--hair);
  border-radius: 999px;
  flex: none;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  font-size: 13.5px;
  font-weight: 500;
  transition: background .2s, box-shadow .2s;
  display: inline-flex;
  color: var(--ink);
}
.chip:hover {
  background: var(--g-100);
  box-shadow: inset 0 0 0 1.5px var(--g-600);
}

/* -------------------------------------------------------------
 * 5. CARDS, BENTO STATS & BOARDS
 * ------------------------------------------------------------- */
.board {
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  min-width: 0;
  padding: 26px 22px 22px;
  flex: 1;
  overflow-y: auto;
  box-shadow: var(--shadow);
  box-sizing: border-box;
}
.board__head {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px 24px;
  margin-bottom: 24px;
  display: flex;
}
.board__title {
  letter-spacing: -0.035em;
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 600;
  line-height: 1.1;
  color: var(--ink);
}
.board__sub {
  color: var(--muted);
  margin-top: 6px;
  font-size: 14.5px;
}
.board__actions {
  flex-wrap: wrap;
  gap: 12px;
  display: flex;
}

.card, .glass-card, .card-surface {
  background: var(--card) !important;
  border: 1px solid var(--hair) !important;
  border-radius: var(--r-md) !important;
  min-width: 0;
  box-shadow: var(--shadow) !important;
  padding: 22px !important;
  position: relative;
  transition: transform 0.25s var(--ease), box-shadow 0.25s ease, border-color 0.2s ease;
  box-sizing: border-box;
  color: var(--ink);
}
.card:hover, .glass-card:hover, .card-surface:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--g-600) 40%, var(--hair)) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1), 0 16px 36px -12px rgba(0, 0, 0, 0.18) !important;
}

.stat {
  flex-direction: column;
  min-height: 172px;
  display: flex;
}
.stat__head {
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  display: flex;
}
.stat__title {
  letter-spacing: -0.015em;
  font-size: 17.5px;
  font-weight: 500;
  color: var(--ink);
}
.arrow {
  width: 38px;
  height: 38px;
  transition: transform 0.3s var(--ease), background 0.2s, color 0.2s;
  border-radius: 50%;
  flex: none;
  place-items: center;
  display: grid;
  box-shadow: inset 0 0 0 1.5px currentColor;
  cursor: pointer;
  color: inherit;
}
.arrow:hover {
  background: var(--ink);
  color: var(--card);
  transform: rotate(45deg);
}
.stat__num {
  letter-spacing: -0.04em;
  margin: auto 0 8px;
  padding-top: 14px;
  font-size: clamp(38px, 3.8vw, 54px);
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
}
.stat__note {
  color: var(--muted);
  align-items: center;
  gap: 8px;
  font-size: 13px;
  display: flex;
}
.trend {
  border-radius: 5px;
  align-items: center;
  gap: 2px;
  padding: 1px 6px;
  font-size: 11px;
  line-height: 16px;
  display: inline-flex;
  box-shadow: inset 0 0 0 1px currentColor;
  font-weight: 600;
}
.trend--up {
  color: #10B880;
  background: rgba(16, 185, 129, 0.12);
}
.trend--down {
  color: #94A3B8;
  background: rgba(239, 68, 68, 0.12);
}

.stat--hero {
  color: #F3F4F6 !important;
  background: linear-gradient(135deg, var(--g-800) 0%, var(--g-950) 100%) !important;
  box-shadow: 0 14px 30px -16px rgba(16, 184, 128, 0.4) !important;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.stat--hero::after {
  content: "";
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(90% 80% at 100% 100%, rgba(16, 184, 128, 0.25), transparent 60%);
  position: absolute;
  inset: 0;
}
.stat--hero .arrow {
  color: var(--g-950);
  box-shadow: none;
  background: #F3F4F6;
}
.stat--hero .arrow:hover {
  background: var(--g-400);
}
.stat--hero .stat__note {
  color: #10B880;
}

/* -------------------------------------------------------------
 * 6. FORMS, INPUTS & MODALS
 * ------------------------------------------------------------- */
.form-input,
input[type="text"],
input[type="tel"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="search"]:not(#global-search-input):not(.search input) {
  background-color: var(--card) !important;
  border: 1.5px solid var(--hair) !important;
  color: var(--ink) !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
  font-size: 14.5px !important;
  font-family: var(--font);
  line-height: 1.5;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.input-with-icon,
input.input-with-icon,
input.has-icon-left {
  padding-left: 38px !important;
}
.form-input::placeholder, input::placeholder {
  color: var(--faint) !important;
}
.form-input:focus, input:focus {
  outline: none !important;
  border-color: var(--g-600) !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18) !important;
}

select {
  background-color: var(--card) !important;
  border: 1.5px solid var(--hair) !important;
  color: var(--ink) !important;
  border-radius: 12px !important;
  padding: 8px 12px !important;
  font-size: 13.5px !important;
  font-family: var(--font);
  transition: border-color 0.2s, box-shadow 0.2s;
}
select:focus {
  outline: none !important;
  border-color: var(--g-600) !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18) !important;
}
select option {
  background-color: var(--card) !important;
  color: var(--ink) !important;
  padding: 10px 14px;
}
select option:checked {
  background-color: var(--g-700) !important;
  color: #ffffff !important;
}

/* Modal Animations */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background-color: rgba(11, 15, 12, 0.75);
  backdrop-filter: blur(4px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-card, .dlg[open] {
  background-color: var(--card);
  border: 1px solid var(--hair);
  border-radius: 22px;
  max-width: 540px;
  width: 100%;
  box-shadow: 0 30px 80px -20px rgba(19, 28, 25, 0.45);
  padding: 26px;
  animation: dlg-in 0.35s var(--ease);
  color: var(--ink);
}
@keyframes dlg-in {
  0% { opacity: 0; transform: translateY(14px) scale(0.98); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Toast Notification Animation & Overlay Rules */
#toast-container {
  z-index: 99999 !important;
  pointer-events: none;
}
#toast-container > * {
  pointer-events: auto;
}
.toast {
  z-index: 99999 !important;
  animation: toast-in 0.35s var(--ease);
}
@keyframes toast-in {
  0% { opacity: 0; transform: translateY(12px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-5px); }
  40%, 80% { transform: translateX(5px); }
}
.animate-shake {
  animation: shake 0.35s ease-in-out;
}


/* -------------------------------------------------------------
 * 8. TAILWIND ARBITRARY CLASS MAPPING & UNIVERSAL THEME ENGINE
 * ------------------------------------------------------------- */
.bg-\[\#0B1110\], .bg-\[\#0B1110\],
.bg-\[\#0B1110\], .bg-\[\#0B1110\] {
  background-color: var(--page) !important;
}
.bg-\[\#131C19\], .bg-\[\#131C19\],
.bg-\[\#131C19\], .bg-\[\#131C19\],
.bg-\[\#0B1110\], .bg-\[\#131C19\], .bg-\[\#131C19\] {
  background-color: var(--card) !important;
}
.bg-\[\#131C19\], .bg-\[\#131C19\] {
  background-color: var(--card-hover) !important;
}

.border-white\/10,
.border-white\/\[0\.08\],
.border-white\/\[0\.06\],
.border-white\/\[0\.05\],
.border-white\/\[0\.04\],
.border-white\/15,
.border-white\/20,
.border-\[\#1C2924\], .border-\[\#1C2924\] {
  border-color: var(--hair) !important;
}

.text-white {
  color: var(--ink) !important;
}
.text-slate-400, .text-neutral-400 {
  color: var(--muted) !important;
}
.text-slate-300, .text-neutral-300 {
  color: var(--ink) !important;
}
.text-slate-500 {
  color: var(--faint) !important;
}

.text-emerald-400, .text-emerald-500, .text-brand {
  color: #10B880 !important;
}
body.light .text-emerald-400, body.light .text-emerald-500 {
  color: #10B880 !important;
}
.bg-emerald-500, .bg-brand {
  background-color: #10B880 !important;
}
.border-emerald-500, .border-brand {
  border-color: #10B880 !important;
}

.striped-bar-emerald {
  background: #10B880 !important;
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.4);
  border-radius: var(--radius-pill);
}
body.light .striped-bar-emerald {
  background: #10B880 !important;
  box-shadow: 0 0 12px rgba(21, 90, 55, 0.25);
}

/* Calendar & Agenda High-Fidelity Responsive System */
.cal-agenda-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin-top: 16px !important;
}

.cal-agenda-card,
.cal__agenda .agenda li,
.cal__agenda ol li {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  box-shadow: none !important;
  background: var(--panel) !important;
  border: 1px solid var(--hair) !important;
  border-radius: 14px !important;
  padding: 14px 16px !important;
  gap: 10px !important;
  min-width: 0 !important;
}

.cal-upnext-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin-top: 14px !important;
}

.cal-upnext-card {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 14px !important;
  border-radius: 14px !important;
  border: 1px solid var(--hair) !important;
  background: var(--panel) !important;
  gap: 12px !important;
  min-width: 0 !important;
}

/* Clean, subtle calendar day event indicator (replaces rainbow dots) */
.day__indicator {
  display: flex !important;
  align-items: center !important;
  gap: 3.5px !important;
  margin-top: 4px !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.day__indicator span,
.day__dot {
  width: 5.5px !important;
  height: 5.5px !important;
  border-radius: 50% !important;
  display: inline-block !important;
}

/* ============================================================
   THE SOFT PASTEL SYSTEM (Light & Dark Mode)
   ============================================================ */
.soft-pill {
  padding: 3px 9px !important;
  border-radius: 9999px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
  letter-spacing: 0.01em !important;
}

/* ==========================================================================
   Zero-Rainbow Semantic State System
   Strictly maps all states to the authorized color matrix:
   Light: #F9FAFB, #FFFFFF, #F3F4F6, #E5E7EB, #111827, #4B5563, #9CA3AF, #10B880, #0EB47D, #0C9A6A, #FFFFFF
   Dark:  #0B1110, #131C19, #1C2924, #24332C, #F8FAFC, #94A3B8, #64748B, #10B880, #0EB47D, #12C58B, #FFFFFF
   ========================================================================== */

.soft-pill {
  padding: 3px 9px !important;
  border-radius: 9999px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
  letter-spacing: 0.01em !important;
  font-family: var(--font-body) !important;
}

/* Status Badges - Dark Mode (Default) */
.soft-green,
.pill--done,
body:not(.light) .soft-green,
html:not(.light) .soft-green {
  background-color: #1C2924 !important;
  color: #10B880 !important;
  border: 1px solid #24332C !important;
}

.soft-red,
.soft-blue,
.soft-yellow,
.soft-teal,
.soft-slate,
.pill--prog,
.pill--pend,
body:not(.light) .soft-red,
body:not(.light) .soft-blue,
body:not(.light) .soft-yellow,
body:not(.light) .soft-teal,
body:not(.light) .soft-slate {
  background-color: #1C2924 !important;
  color: #94A3B8 !important;
  border: 1px solid #24332C !important;
}

/* Scrap Rainbow Utility Classes - Dark Mode */
body:not(.light) [class*="text-rose"],
body:not(.light) [class*="text-red"],
body:not(.light) [class*="text-amber"],
body:not(.light) [class*="text-orange"],
body:not(.light) [class*="text-yellow"],
body:not(.light) [class*="text-blue"],
body:not(.light) [class*="text-cyan"],
body:not(.light) [class*="text-pink"],
body:not(.light) [class*="text-purple"] {
  color: #94A3B8 !important;
}

body:not(.light) [class*="bg-red"],
body:not(.light) [class*="bg-rose"],
body:not(.light) [class*="bg-amber"],
body:not(.light) [class*="bg-orange"],
body:not(.light) [class*="bg-yellow"],
body:not(.light) [class*="bg-blue"],
body:not(.light) [class*="bg-cyan"],
body:not(.light) [class*="bg-pink"],
body:not(.light) [class*="bg-purple"] {
  background-color: #1C2924 !important;
  border-color: #24332C !important;
}

body:not(.light) [class*="border-red"],
body:not(.light) [class*="border-amber"],
body:not(.light) [class*="border-blue"],
body:not(.light) [class*="border-pink"] {
  border-color: #24332C !important;
}

body:not(.light) [class*="text-emerald"],
body:not(.light) [class*="text-teal"],
body:not(.light) .text-\[\#10B880\],
body:not(.light) .text-\[\#10B880\],
body:not(.light) .text-\[\#10B880\] {
  color: #10B880 !important;
}

body:not(.light) [class*="bg-emerald"],
body:not(.light) [class*="bg-teal"] {
  background-color: #1C2924 !important;
  border-color: #24332C !important;
}

/* Calendar Month Day Grid */
.cal__grid {
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.day {
  min-height: 64px !important;
  padding: 8px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  border-radius: 12px !important;
  border: 1px solid transparent !important;
  background-color: var(--card) !important;
}

.day:hover {
  border-color: var(--hair) !important;
  background-color: var(--card-hover) !important;
}

.day.is-selected {
  border-color: #10B880 !important;
  box-shadow: 0 0 0 1px #10B880 !important;
}

.day--today .day__n {
  background-color: #10B880 !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
}

/* Global Mobile Scroll Protection for Tables */
.overflow-x-auto > table {
  min-width: 680px;
}

/* ==========================================================================
   Comprehensive Light Mode Color & Contrast System
   ========================================================================== */
body.light {
  background-color: #F9FAFB !important;
  color: #111827 !important;
}

body.light .glass-card,
body.light [class*="glass-card"],
body.light .modal-card,
body.light .card,
body.light div[class*="bg-[#131C19]"],
body.light div[class*="bg-[#131C19]"],
body.light div[class*="bg-[#131C19]"],
body.light div[class*="bg-[#131C19]"],
body.light div[class*="bg-[#131C19]"],
body.light div[class*="bg-[#0B1110]"],
body.light div[class*="bg-[#0B1110]"],
body.light .side,
body.light .topbar {
  background-color: #FFFFFF !important;
  border-color: #E5E7EB !important;
  color: #111827 !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05) !important;
}

body.light .sub-details-strip,
body.light div[class*="bg-black/20"],
body.light div[class*="bg-black/30"],
body.light div[class*="bg-black/40"],
body.light div[class*="bg-black/50"],
body.light div[class*="bg-black/60"],
body.light div[class*="bg-white/[0.02]"],
body.light div[class*="bg-white/[0.03]"],
body.light div[class*="bg-white/[0.04]"],
body.light div[class*="bg-white/[0.05]"] {
  background-color: #F3F4F6 !important;
  border-color: #E5E7EB !important;
  color: #111827 !important;
}

body.light input[type="text"],
body.light input[type="number"],
body.light input[type="search"],
body.light input[type="email"],
body.light input[type="tel"],
body.light input[type="password"],
body.light input[type="date"],
body.light select,
body.light textarea {
  background-color: #FFFFFF !important;
  color: #111827 !important;
  border: 1px solid #E5E7EB !important;
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
}

body.light input::placeholder,
body.light textarea::placeholder {
  color: #9CA3AF !important;
}

body.light select option {
  background-color: #FFFFFF !important;
  color: #111827 !important;
}

/* Light Mode Badges - Zero Rainbow */
body.light .soft-green,
body.light .pill--done {
  background-color: #F3F4F6 !important;
  color: #10B880 !important;
  border: 1px solid #E5E7EB !important;
}

body.light .soft-red,
body.light .soft-blue,
body.light .soft-yellow,
body.light .soft-teal,
body.light .soft-slate,
body.light .pill--prog,
body.light .pill--pend {
  background-color: #F3F4F6 !important;
  color: #4B5563 !important;
  border: 1px solid #E5E7EB !important;
}

/* Scrap Rainbow Utility Classes - Light Mode */
body.light [class*="text-rose"],
body.light [class*="text-red"],
body.light [class*="text-amber"],
body.light [class*="text-orange"],
body.light [class*="text-yellow"],
body.light [class*="text-blue"],
body.light [class*="text-cyan"],
body.light [class*="text-pink"],
body.light [class*="text-purple"] {
  color: #4B5563 !important;
}

body.light [class*="bg-red"],
body.light [class*="bg-rose"],
body.light [class*="bg-amber"],
body.light [class*="bg-orange"],
body.light [class*="bg-yellow"],
body.light [class*="bg-blue"],
body.light [class*="bg-cyan"],
body.light [class*="bg-pink"],
body.light [class*="bg-purple"] {
  background-color: #F3F4F6 !important;
  border-color: #E5E7EB !important;
}

body.light [class*="border-red"],
body.light [class*="border-amber"],
body.light [class*="border-blue"],
body.light [class*="border-pink"] {
  border-color: #E5E7EB !important;
}

body.light [class*="text-emerald"],
body.light [class*="text-teal"],
body.light .text-\[\#10B880\],
body.light .text-\[\#10B880\],
body.light .text-\[\#10B880\] {
  color: #10B880 !important;
}

body.light [class*="bg-emerald"],
body.light [class*="bg-teal"] {
  background-color: #F3F4F6 !important;
  border-color: #E5E7EB !important;
}

/* Banners (e.g. Overdue Key, Gate Block) */
body.light .gate-block-banner,
body.light #overdue-key-banner {
  background-color: #F3F4F6 !important;
  border: 1px solid #E5E7EB !important;
  color: #111827 !important;
}

body.light .gate-block-banner .gate-block-icon {
  background: #FFFFFF !important;
  border-color: #E5E7EB !important;
  color: #10B880 !important;
}

body.light .gate-block-banner .gate-block-title {
  color: #111827 !important;
}

body.light .gate-block-banner .gate-block-tag {
  background-color: #FFFFFF !important;
  color: #4B5563 !important;
  border: 1px solid #E5E7EB !important;
}

body.light .gate-block-banner .gate-block-desc {
  color: #4B5563 !important;
}

/* Light Mode Tables */
body.light thead,
body.light thead tr {
  background-color: #FFFFFF !important;
  color: #4B5563 !important;
}

body.light thead th {
  color: #4B5563 !important;
  border-color: #E5E7EB !important;
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
}

body.light tbody tr:hover {
  background-color: #F3F4F6 !important;
}

body.light tbody tr {
  border-color: #E5E7EB !important;
}

body.light .divide-white\/5 > * + *,
body.light .divide-white\/\[0\.04\] > * + *,
body.light .divide-white\/10 > * + * {
  border-color: #E5E7EB !important;
}

/* Segmented Control */
body.light .seg {
  background: #F3F4F6 !important;
  border: 1px solid #E5E7EB !important;
}

body.light .seg__btn {
  color: #4B5563 !important;
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
}

body.light .seg__btn:hover {
  color: #111827 !important;
  background: rgba(255, 255, 255, 0.7) !important;
}

body.light .seg__btn.active,
body.light .seg__btn[aria-pressed="true"] {
  background: #FFFFFF !important;
  color: #111827 !important;
  font-weight: 700 !important;
  border: 1px solid #E5E7EB !important;
}

/* Universal Light Mode Typography Overrides */
body.light h1,
body.light h2,
body.light h3,
body.light h4,
body.light .section-title,
body.light .board__title,
body.light .card__title {
  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
  color: #111827 !important;
}

body.light .text-white:not(.btn-primary):not(.btn-primary *):not(.btn--primary):not(.btn--primary *) {
  color: #111827 !important;
}

body.light p.text-slate-400,
body.light span.text-slate-400,
body.light .text-slate-400,
body.light p.text-slate-500,
body.light span.text-slate-500,
body.light .text-slate-500,
body.light .text-slate-300,
body.light .text-slate-200,
body.light .text-slate-100 {
  color: #4B5563 !important;
}

body.light .member__name {
  color: #111827 !important;
}

body.light .member__role {
  color: #4B5563 !important;
}

/* -------------------------------------------------------------
 * 9. FERNLY COMPLETE BENTO SUITE BASE COMPONENTS
 * ------------------------------------------------------------- */

.bento-legacy-grid{gap:var(--gap);grid-template-columns:repeat(12,minmax(0,1fr));grid-template-areas:"s1 s1 s1 s2 s2 s2 s3 s3 s3 s4 s4 s4""an an an an an an re re re sd sd sd""tm tm tm tm tm pg pg pg pg sd sd sd";display:grid}.side{gap:var(--gap);flex-direction:column;min-width:0;display:flex}.side .projects{flex:1}.card{background:var(--card);border-radius:var(--r-md);min-width:0;box-shadow:var(--shadow);padding:22px;position:relative}.card__head{justify-content:space-between;align-items:center;gap:12px;display:flex}.card__title{letter-spacing:-.02em;font-size:19px;font-weight:500}.stat{flex-direction:column;min-height:178px;display:flex}.stat__head{justify-content:space-between;align-items:flex-start;gap:10px;display:flex}.stat__title{letter-spacing:-.015em;font-size:18px;font-weight:500}.arrow{width:38px;height:38px;transition:transform .3s var(--ease), background .2s, color .2s;border-radius:50%;flex:none;place-items:center;display:grid;box-shadow:inset 0 0 0 1.5px}.arrow:hover{background:var(--ink);color:var(--card);transform:rotate(45deg)}.stat__num{letter-spacing:-.04em;margin:auto 0 10px;padding-top:18px;font-size:clamp(42px,4vw,56px);font-weight:600;line-height:1}.stat__note{color:var(--muted);align-items:center;gap:8px;font-size:13.5px;display:flex}.stat__note--plain{color:var(--g-700)}.trend{border-radius:5px;align-items:center;gap:1px;padding:0 4px;font-size:10.5px;line-height:16px;display:inline-flex;box-shadow:inset 0 0 0 1px}.trend svg{stroke-width:2.6px;width:10px;height:10px}.stat--hero{color:#F3F4F6;background:linear-gradient(135deg, var(--g-800) 0%, var(--g-950) 100%);box-shadow:0 14px 30px -16px rgba(16, 184, 128, 0.4)}.stat--hero:after{content:"";border-radius:inherit;pointer-events:none;background:radial-gradient(90% 80% at 100% 100%,rgba(16, 184, 128, 0.25),transparent 60%);position:absolute;inset:0}.stat--hero .arrow{color:var(--g-950);box-shadow:none;background:#F3F4F6}.stat--hero .arrow:hover{background:var(--g-400)}.stat--hero .stat__note{color:#10B880}.analytics{flex-direction:column;display:flex}.bars{flex:1;grid-template-columns:repeat(7,minmax(0,1fr));gap:clamp(8px,1.4vw,16px);min-height:190px;margin-top:26px;display:grid}.bars li{grid-template-rows:1fr auto;gap:10px;min-width:0;display:grid}.bar{width:100%;height:calc(var(--h) * 100%);-webkit-tap-highlight-color:transparent;border-radius:999px;align-self:end;min-height:40px;position:relative;overflow:hidden}.bar:focus-visible{box-shadow:var(--focus)}.bar__fill{border-radius:inherit;background:var(--g-700);position:absolute;inset:0}.bar--light .bar__fill{background:var(--g-400)}.bar--dark .bar__fill{background:var(--g-950)}.bar--plan .bar__fill{background:repeating-linear-gradient(-45deg, var(--hatch) 0 2.4px, transparent 2.4px 8px);border-radius:inherit;box-shadow:inset 0 0 0 1.5px rgba(148, 163, 184, 0.35)}.bar:hover .bar__fill{filter:brightness(1.08)}.bar__day{text-align:center;color:var(--faint);font-size:14px}.bars__tip{z-index:2;white-space:nowrap;color:var(--ink);background:var(--card);box-shadow:0 0 0 1px var(--hair), 0 6px 16px -8px rgba(19, 28, 25, 0.35);pointer-events:none;border-radius:7px;padding:3px 8px;font-size:11px;font-weight:600;position:absolute;top:0;left:0}.bars__tip:after{content:"";background:var(--hatch);width:1px;height:10px;position:absolute;top:100%;left:50%;translate:-50%}.reminder{flex-direction:column;display:flex}.reminder__what{letter-spacing:-.025em;color:var(--g-800);margin-top:26px;font-size:clamp(20px,1.8vw,24px);font-weight:600;line-height:1.15}.reminder__when{color:var(--muted);margin:10px 0 22px;font-size:14.5px}.reminder__btn{margin-top:auto}.reminder__btn[aria-pressed=true]{background:linear-gradient(#94A3B8,#94A3B8)}.reminder__btn svg{width:22px;height:22px}.rec{background:#FFFFFF;border-radius:50%;width:9px;height:9px;display:none}.reminder__btn[aria-pressed=true] .rec{display:block}.reminder__btn[aria-pressed=true] svg{display:none}.plist{overscroll-behavior:contain;scrollbar-width:thin;gap:16px;max-height:300px;margin-top:20px;display:grid;overflow-y:auto}.pitem{align-items:center;gap:14px;display:flex}.pitem__name{font-size:15px;font-weight:500;line-height:1.3;display:block}.pitem__due{color:var(--faint);font-size:12px;display:block}.pico{border-radius:8px;flex:none;width:28px;height:28px;position:relative}.pico--api{background:repeating-linear-gradient(-60deg,transparent 0 4px,#10B880 4px 7px,transparent 7px 9px);border-radius:4px}.pico--flow{background:conic-gradient(#10B880 0 33%, #10B880 0 66%, #10B880 0);border-radius:50%}.pico--dash{background:linear-gradient(#94A3B8,#94A3B8) 50% 0/6px 11px no-repeat,linear-gradient(#10B880,#10B880) 50% 100%/6px 11px no-repeat,linear-gradient(#94A3B8,#94A3B8) 0/11px 6px no-repeat,linear-gradient(#10B880,#10B880) 100%/11px 6px no-repeat}.pico--speed{background:conic-gradient(from 200deg, #94A3B8 0 50%, #94A3B8 0 75%, transparent 0);border-radius:50%}.pico--qa{background:radial-gradient(circle at 50% 30%,#94A3B8 0 6px,transparent 6.5px),radial-gradient(circle at 28% 70%,#10B880 0 6px,transparent 6.5px),radial-gradient(circle at 72% 70%,#10B880 0 6px,transparent 6.5px)}.pico--new{background:radial-gradient(circle, var(--g-400) 0 5px, transparent 5.5px), var(--g-100);border-radius:50%}.tlist{gap:14px;margin-top:22px;display:grid}.titem{align-items:center;gap:14px;display:flex}.titem__body{flex:1;min-width:0;display:grid}.titem__name{font-size:15.5px;font-weight:500}.titem__task{color:var(--faint);white-space:nowrap;text-overflow:ellipsis;font-size:12.5px;overflow:hidden}.titem__task b{color:var(--ink);font-weight:600}.pill{border-radius:6px;flex:none;padding:2px 8px;font-size:11px;font-weight:500;box-shadow:inset 0 0 0 1px}.pill--done{color:var(--g-700);background:var(--g-100)}.pill--prog{color:var(--amber);background:var(--amber-bg)}.pill--pend{color:var(--rose);background:var(--rose-bg)}.progress{flex-direction:column;display:flex}.gauge{flex:1;place-items:end center;width:min(100%,300px);margin:18px auto 0;display:grid;position:relative}.gauge__svg{width:100%;height:auto;overflow:visible}.gauge__track,.gauge__seg{stroke-width:44px;stroke-linecap:round;fill:none}.gauge__track{stroke:var(--panel)}.gauge__seg{stroke-dasharray:0 100}.gauge__seg--done{stroke:var(--g-700)}.gauge__seg--prog{stroke:var(--g-950)}.gauge__seg--pend{stroke:url(#hatch)}.gauge__read{justify-items:center;display:grid;position:absolute;bottom:0;left:0;right:0}.gauge__pct{letter-spacing:-.05em;font-size:clamp(40px,4vw,54px);font-weight:600;line-height:1}.gauge__lbl{color:var(--muted);margin-top:4px;font-size:13.5px}.legend{color:var(--muted);flex-wrap:wrap;justify-content:center;gap:8px 16px;margin-top:22px;font-size:13.5px;display:flex}.legend li{align-items:center;gap:8px;display:inline-flex}.sw{border-radius:50%;width:16px;height:16px}.sw--done{background:var(--g-700)}.sw--prog{background:var(--g-950)}.sw--pend{background:repeating-linear-gradient(-45deg, var(--hatch) 0 2px, transparent 2px 5px);box-shadow:inset 0 0 0 1px rgba(148, 163, 184, 0.4)}.tracker{isolation:isolate;color:#F3F4F6;background:var(--deep);flex-direction:column;min-height:210px;display:flex;overflow:hidden}.tracker:before{content:"";z-index:-1;background:repeating-radial-gradient(ellipse at 95% 105%, transparent 0 11px, var(--swirl) 12px 13px), radial-gradient(60% 70% at 100% 100%, var(--g-700), transparent 70%), radial-gradient(55% 55% at 0% 0%, var(--g-950), transparent 70%);position:absolute;inset:-30%}.tracker .card__title{font-weight:500}.tracker__time{text-align:center;letter-spacing:-.02em;justify-content:center;margin:auto 0 0;padding-top:14px;font-size:clamp(38px,3.4vw,46px);font-weight:600;display:flex}.dg{height:1.15em;line-height:1.15;display:inline-block;overflow:hidden}.dg__col{display:grid}.dg__col span{height:1.15em}.dg-sep{padding:0 .02em}.tracker__ctrl{justify-content:center;gap:14px;margin-top:14px;display:flex}.tbtn{width:50px;height:50px;color:var(--g-950);transition:transform .25s var(--ease);background:#F3F4F6;border-radius:50%;place-items:center;display:grid}.tbtn:hover{transform:scale(1.07)}.tbtn:active{transform:scale(.94)}.tbtn svg{width:22px;height:22px}.tbtn--stop{color:#F3F4F6;background:#94A3B8}.tbtn:focus-visible{box-shadow:0 0 0 3px var(--deep), 0 0 0 5px #F3F4F6}.empty{color:var(--faint);margin-top:14px;font-size:13.5px}mark{color:inherit;background:#10B880;border-radius:3px}.dlg{width:min(420px,100vw - 32px);color:var(--ink);background:var(--card);border:0;border-radius:22px;padding:0;box-shadow:0 30px 80px -20px rgba(19, 28, 25, 0.45)}.dlg::backdrop{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:rgba(19, 28, 25, 0.4)}.dlg[open]{animation:dlg-in .35s var(--ease)}@keyframes dlg-in{0%{opacity:0;transform:translateY(14px)scale(.98)}}.dlg__form{gap:16px;padding:26px;display:grid}.dlg__title{letter-spacing:-.03em;font-size:22px;font-weight:600}.field{color:var(--muted);gap:6px;font-size:13.5px;font-weight:500;display:grid}.field input{border:1.5px solid var(--hair);background:var(--panel);height:48px;color:var(--ink);border-radius:12px;outline:none;padding:0 14px;font-size:15px;transition:border-color .2s}.field input:focus-visible{border-color:var(--g-600);box-shadow:0 0 0 3px rgba(16, 184, 128, 0.18)}.dlg__row{justify-content:flex-end;gap:10px;margin-top:6px;display:flex}.dlg .btn{height:46px;padding:0 20px;font-size:15px}.toast{z-index:50;color:#F3F4F6;background:var(--g-950);opacity:0;pointer-events:none;border-radius:999px;width:fit-content;max-width:calc(100vw - 32px);margin:0 auto;padding:12px 18px;font-size:14px;font-weight:500;position:fixed;bottom:24px;left:0;right:0;box-shadow:0 16px 40px -14px rgba(16, 184, 128, 0.35)}.toast:empty{display:none}

.view:focus-visible,.board__title:focus{outline:none}.word{vertical-align:top;margin-bottom:-.08em;padding-bottom:.08em;display:inline-block;overflow:hidden}.ch{display:inline-block}.card__sub{color:var(--muted);margin-top:4px;font-size:13px}.toolbar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 20px;margin-bottom:18px;display:flex}.toolbar__meta{color:var(--muted);font-size:14px}.toolbar__meta b{color:var(--ink);font-weight:600}.seg{isolation:isolate;background:var(--card);border:1px solid var(--hair);box-shadow:var(--shadow);scrollbar-width:none;border-radius:999px;gap:3px;max-width:100%;padding:4px;display:inline-flex;align-items:center;position:relative;overflow-x:auto}.seg::-webkit-scrollbar{display:none}.seg__btn{white-space:nowrap;height:36px;color:var(--muted);border-radius:999px;padding:0 16px;font-size:13.5px;font-weight:500;transition:all .2s ease;cursor:pointer;border:none;background:transparent;display:inline-flex;align-items:center;justify-content:center;outline:none}.seg__btn:hover{color:var(--ink);background:var(--panel)}.seg__btn[aria-pressed=true],.seg__btn.active{color:#ffffff !important;background:linear-gradient(135deg, #10B880, #10B880) !important;box-shadow:0 2px 8px rgba(6,95,70,0.35) !important;font-weight:600 !important}.seg__btn:focus-visible{box-shadow:inset 0 0 0 2px var(--g-400)}.seg--range .seg__btn{height:36px;padding:0 14px}body.light .seg{background:#F3F4F6 !important;border-color:#E5E7EB !important;box-shadow:0 1px 3px rgba(0,0,0,0.06)}body.light .seg__btn{color:#1C2924 !important}body.light .seg__btn:hover{color:#0B1110 !important;background:#E5E7EB !important}body.light .seg__btn[aria-pressed=true],body.light .seg__btn.active{color:#0B1110 !important;background:#ffffff !important;box-shadow:0 1px 4px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.08) !important;font-weight:700 !important;border:1px solid rgba(0,0,0,0.08) !important}.tray-wrap{position:relative}.tray{z-index:45;background:var(--card);width:min(360px,100vw - 24px);box-shadow:0 0 0 1px var(--hair), 0 24px 60px -20px rgba(19, 28, 25, 0.35);transform-origin:90% 0;border-radius:20px;padding:16px;position:absolute;top:calc(100% + 12px);right:-8px}.tray__head{justify-content:space-between;align-items:center;margin-bottom:10px;display:flex}.tray__title{font-weight:600}.tray__list{gap:4px;display:grid}.tray__list li{color:var(--muted);border-radius:14px;align-items:flex-start;gap:12px;padding:10px;font-size:13.5px;line-height:1.4;display:flex}.tray__list li.is-unread{background:var(--g-100)}.tray__list b{color:var(--ink);font-weight:600}.tray__list .avatar{width:36px;height:36px;font-size:12px}.tray__ago{color:var(--faint);margin-top:2px;font-size:12px;display:block}.kanban{gap:var(--gap);scroll-snap-type:x mandatory;grid-template-columns:repeat(4,minmax(250px,1fr));align-items:start;padding-bottom:6px;display:grid;overflow-x:auto}.col{border-radius:var(--r-md);min-height:420px;box-shadow:inset 0 0 0 1px var(--hair);scroll-snap-align:start;background:rgba(255, 255, 255, 0.55);flex-direction:column;padding:14px;transition:background-color .2s,box-shadow .2s;display:flex}.col.is-over{background:var(--g-100);box-shadow:inset 0 0 0 2px var(--g-400)}.col__head{align-items:center;gap:10px;padding:4px 4px 12px;display:flex}.col__dot{background:var(--c);border-radius:50%;width:10px;height:10px}.col__title{font-size:15px;font-weight:600}.col__count{text-align:center;background:var(--card);min-width:28px;box-shadow:inset 0 0 0 1px var(--hair);border-radius:999px;margin-left:auto;padding:2px 8px;font-size:12.5px;font-weight:600}.col__list{flex:1;align-content:start;gap:12px;min-height:60px;display:grid}.col__empty{text-align:center;color:var(--faint);box-shadow:inset 0 0 0 1.5px var(--hair);border-radius:14px;padding:22px 10px;font-size:13px}.task{background:var(--card);box-shadow:var(--shadow);cursor:grab;touch-action:pan-y;-webkit-user-select:none;user-select:none;border-radius:16px;padding:14px 14px 12px;position:relative}.task:focus-visible{box-shadow:var(--focus);outline:none}.task.is-dragging{opacity:.35}.task__top{align-items:center;gap:8px;display:flex}.tag{color:var(--fg);background:var(--bg);border-radius:999px;padding:3px 9px;font-size:11.5px;font-weight:600}.pri{color:var(--muted);align-items:center;gap:4px;font-size:11.5px;font-weight:600;display:inline-flex}.pri svg{width:13px;height:13px}.pri--high{color:var(--rose)}.pri--med{color:var(--amber)}.task__menu{width:30px;height:30px;color:var(--muted);cursor:pointer;border-radius:8px;place-items:center;margin-left:auto;display:grid}.task__menu:hover{background:var(--panel);color:var(--ink)}.task__menu svg{width:18px;height:18px}.task__title{letter-spacing:-.01em;margin:10px 0 12px;font-size:14.5px;font-weight:600;line-height:1.35}.task.is-done .task__title{color:var(--muted);text-decoration:line-through;-webkit-text-decoration-color:var(--hatch);text-decoration-color:var(--hatch)}.meter{background:var(--panel);border-radius:99px;height:6px;overflow:hidden}.meter__fill{border-radius:inherit;background:var(--g-600);transform-origin:0;height:100%}.task__foot{color:var(--muted);align-items:center;gap:10px;margin-top:12px;font-size:12px;display:flex}.task__due{align-items:center;gap:4px;display:inline-flex}.task__due svg{width:14px;height:14px}.task__due.is-late{color:var(--rose);font-weight:600}.task__notes{align-items:center;gap:4px;display:inline-flex}.task__notes svg{width:14px;height:14px}.stack{margin-left:auto;display:flex}.stack .avatar{letter-spacing:0;width:30px;height:30px;box-shadow:0 0 0 2px var(--card);font-size:10.5px}.stack .avatar+.avatar{margin-left:-5px}.ghost{z-index:80;pointer-events:none;cursor:grabbing;margin:0;position:fixed;top:0;left:0;box-shadow:0 24px 50px -16px rgba(19, 28, 25, 0.4)}.menu{z-index:85;background:var(--card);min-width:190px;box-shadow:0 0 0 1px var(--hair), 0 18px 40px -12px rgba(19, 28, 25, 0.35);transform-origin:100% 0;border-radius:14px;padding:6px;position:fixed}.menu__label{letter-spacing:.06em;text-transform:uppercase;color:var(--faint);padding:8px 10px 4px;font-size:11.5px;font-weight:600}.menu__item{text-align:left;border-radius:9px;align-items:center;gap:10px;width:100%;padding:9px 10px;font-size:14px;display:flex}.menu__item:hover,.menu__item:focus-visible{background:var(--g-100);outline:none}.menu__item[aria-disabled=true]{color:var(--faint);cursor:default;background:0 0}.menu__item .col__dot{flex:none}.cal{gap:var(--gap);grid-template:"month agenda""month next"1fr/minmax(0,2fr) minmax(280px,1fr);display:grid}.cal__month{flex-direction:column;grid-area:month;display:flex}.cal__agenda{grid-area:agenda}.cal__next{grid-area:next}.cal__label{letter-spacing:-.03em;font-size:22px;font-weight:600}.cal__nav{gap:8px;display:flex}.cal__dow,.cal__grid{grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;display:grid}.cal__dow{margin:18px 0 8px}.cal__dow span{text-align:center;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);font-size:12px;font-weight:600}.cal__viewport{border-radius:14px;flex:1;overflow:hidden}.cal__grid{grid-auto-rows:minmax(84px,1fr)}.day{text-align:left;background:var(--panel);border-radius:14px;flex-direction:column;align-items:flex-start;gap:6px;padding:8px;transition:background-color .2s,box-shadow .2s;display:flex;position:relative}.day:hover{background:var(--g-100)}.day:focus-visible{box-shadow:var(--focus);outline:none}.day--out{background:0 0}.day--out .day__n{color:var(--faint);opacity:.6}.day__n{border-radius:50%;place-items:center;width:30px;height:30px;font-size:14px;font-weight:600;display:grid}.day--today .day__n{color:#F3F4F6;background:var(--g-700)}.day[aria-pressed=true]{background:var(--card);box-shadow:inset 0 0 0 2px var(--g-600)}.day__dots{flex-wrap:wrap;gap:4px;display:flex}.day__dot{background:var(--c);border-radius:50%;width:7px;height:7px}.day__evt{white-space:nowrap;text-overflow:ellipsis;max-width:100%;color:var(--c);background:color-mix(in srgb, var(--c) 12%, transparent);border-radius:6px;padding:2px 6px;font-size:11px;font-weight:600;display:block;overflow:hidden}.cal__legend{color:var(--muted);flex-wrap:wrap;gap:6px 18px;margin-top:16px;font-size:13px;display:flex}.cal__legend li{align-items:center;gap:7px;display:inline-flex}.cal__eyebrow{letter-spacing:.06em;text-transform:uppercase;color:var(--g-700);font-size:13px;font-weight:600}.cal__day{letter-spacing:-.035em;margin-top:2px;font-size:28px;font-weight:600}.agenda{gap:10px;margin-top:18px;display:grid}.agenda li{background:var(--panel);box-shadow:inset 4px 0 0 var(--c);border-radius:14px;grid-template-columns:64px 1fr;gap:12px;padding:12px;display:grid}.agenda__time{color:var(--muted);font-size:12.5px;font-weight:600;line-height:1.4}.agenda__time small{color:var(--faint);font-weight:500;display:block}.agenda__t{font-size:14.5px;font-weight:600;line-height:1.3}.agenda__k{color:var(--c);margin-top:2px;font-size:12px;font-weight:600}.agenda .stack{margin:8px 0 0}.agenda .stack .avatar{box-shadow:0 0 0 2px var(--panel)}.upnext{gap:4px;margin-top:14px;display:grid}.upnext button{text-align:left;border-radius:12px;align-items:center;gap:12px;width:100%;padding:8px;display:flex}.upnext button:hover{background:var(--panel)}.upnext__date{background:var(--g-100);width:46px;height:46px;color:var(--g-800);border-radius:12px;flex:none;place-items:center;line-height:1;display:grid}.upnext__date b{font-size:17px}.upnext__date small{text-transform:uppercase;font-size:10.5px;font-weight:600}.upnext__t{font-size:14px;font-weight:600}.upnext__s{color:var(--muted);font-size:12px}.an-grid{gap:var(--gap);grid-template-columns:repeat(12,minmax(0,1fr));display:grid}.kpi{flex-direction:column;grid-column:span 3;min-height:168px;display:flex;overflow:hidden}.kpi__label{color:var(--muted);font-size:14.5px;font-weight:500}.kpi__num{letter-spacing:-.04em;margin-top:10px;font-size:clamp(30px,2.6vw,40px);font-weight:600;line-height:1}.kpi__delta{color:var(--g-700);align-items:center;gap:4px;margin-top:8px;font-size:12.5px;font-weight:600;display:inline-flex}.kpi__delta.is-down{color:var(--rose)}.kpi__delta svg{stroke-width:2.4px;width:14px;height:14px}.kpi__delta span{color:var(--faint);font-weight:500}.spark{width:calc(100% + 44px);height:46px;margin:auto -22px -22px}.spark__line{fill:none;stroke:var(--g-600);stroke-width:2px;vector-effect:non-scaling-stroke}.spark__area{fill:var(--g-100);stroke:none}.trend-card{flex-direction:column;grid-column:span 8;display:flex}.key{color:var(--muted);gap:16px;font-size:13px;display:flex}.key li{align-items:center;gap:7px;display:inline-flex}.key__sw{background:var(--g-600);border-radius:3px;width:16px;height:3px}.key__sw--prev{background:repeating-linear-gradient(90deg, var(--hatch) 0 4px, transparent 4px 7px)}.chart{touch-action:pan-y;flex:1;min-height:260px;margin-top:16px;position:relative}.chart__svg{width:100%;height:calc(100% - 26px);position:absolute;inset:0 0 26px;overflow:visible}.chart__grid line{stroke:var(--hair);stroke-width:1px}.chart__grid text{fill:var(--faint);stroke:none;font-size:11px}.chart__line{fill:none;stroke:var(--g-600);stroke-width:2.5px;stroke-linejoin:round}.chart__area{fill:url(#area-grad);stroke:none}.chart__prev{fill:none;stroke:var(--hatch);stroke-width:1.6px;stroke-dasharray:5 5}.chart__cross{stroke:var(--g-800);stroke-width:1px;stroke-dasharray:3 4;opacity:0}.chart__dot{fill:var(--card);stroke:var(--g-700);stroke-width:3px;opacity:0}.chart__x{height:18px;color:var(--faint);font-size:11px;position:absolute;bottom:0;left:0;right:0}.chart__x span{white-space:nowrap;position:absolute;top:0;transform:translate(-50%)}.chart__tip{z-index:2;color:#F3F4F6;background:var(--g-950);white-space:nowrap;pointer-events:none;opacity:0;border-radius:12px;padding:8px 12px;font-size:12px;position:absolute;top:0;left:0;box-shadow:0 12px 30px -10px rgba(16, 184, 128, 0.3)}.chart__tip b{font-size:16px;display:block}.donut-card{flex-direction:column;grid-column:span 4;display:flex}.donut{width:min(220px,100%);margin:18px auto 0;position:relative}.donut__svg{width:100%;height:auto;display:block;transform:rotate(-90deg)}.donut__svg circle{fill:none;stroke-width:16px;stroke-linecap:butt;cursor:pointer;transition:opacity .2s}.donut__svg .donut__track{stroke:var(--panel);cursor:default}.donut__svg.is-focus circle:not(.is-on):not(.donut__track){opacity:.25}.donut__read{text-align:center;place-content:center;display:grid;position:absolute;inset:0}.donut__num{letter-spacing:-.04em;font-size:30px;font-weight:600}.donut__lbl{color:var(--muted);font-size:12.5px}.donut__legend{gap:4px;margin-top:18px;display:grid}.donut__legend button{text-align:left;border-radius:10px;align-items:center;gap:10px;width:100%;padding:7px 8px;font-size:13.5px;display:flex}.donut__legend button:hover,.donut__legend button[aria-pressed=true]{background:var(--panel)}.donut__legend .col__dot{flex:none}.donut__legend b{margin-left:auto;font-weight:600}.heat-card{grid-column:span 8}.heat__scale{color:var(--faint);align-items:center;gap:4px;font-size:12px;display:flex}.heat__scale i,.heat i{border-radius:4px;display:block}.heat__scale i{width:12px;height:12px}.heat{grid-template-rows:repeat(7,1fr);grid-auto-flow:column;gap:5px;margin-top:18px;display:grid}.heat i{aspect-ratio:1}[data-l="0"]{background:var(--panel)}[data-l="1"]{background:color-mix(in srgb, var(--g-400) 35%, var(--panel))}[data-l="2"]{background:var(--g-400)}[data-l="3"]{background:var(--g-700)}[data-l="4"]{background:var(--g-950)}.leaders-card{grid-column:span 4}.leaders{gap:14px;margin-top:18px;display:grid}.leaders li{grid-template-columns:auto 1fr auto;align-items:center;gap:4px 12px;display:grid}.leaders .avatar{grid-row:span 2;width:38px;height:38px;font-size:12px}.leaders__name{font-size:14px;font-weight:600}.leaders__n{color:var(--muted);font-size:13px;font-weight:600}.leaders .meter{grid-column:2/4}.people{gap:var(--gap);grid-template-columns:repeat(auto-fill,minmax(250px,1fr));display:grid}.member{text-align:center;flex-direction:column;align-items:center;padding:26px 20px 20px;display:flex;position:relative}.member__av{position:relative}.member__av .avatar{width:76px;height:76px;font-size:22px}.status{background:var(--c);width:16px;height:16px;box-shadow:0 0 0 3px var(--card);border-radius:50%;position:absolute;bottom:2px;right:2px}.status--online{--c:#10B880}.status--away{--c:#94A3B8}.status--offline{--c:#94A3B8}.member__name{letter-spacing:-.015em;margin-top:14px;font-size:16.5px;font-weight:600}.member__role{color:var(--muted);margin-top:2px;font-size:13.5px}.member__dept{color:var(--g-800);background:var(--g-100);border-radius:999px;margin-top:10px;padding:3px 10px;font-size:11.5px;font-weight:600}.member__stats{border-top:1px solid var(--hair);grid-template-columns:1fr 1fr;width:100%;margin-top:18px;padding-top:16px;display:grid}.member__stats p{color:var(--muted);font-size:12px}.member__stats b{color:var(--ink);font-size:18px;display:block}.member__load{text-align:left;width:100%;margin-top:16px}.member__load p{color:var(--muted);justify-content:space-between;margin-bottom:6px;font-size:12px;display:flex}.member__load .meter__fill.is-hot{background:var(--amber)}.member__actions{gap:8px;width:100%;margin-top:18px;display:flex}.member__actions .btn{flex:1;height:42px;padding:0 12px;font-size:14px}.panel{z-index:70;overscroll-behavior:contain;background:var(--card);border-radius:26px;width:min(420px,100vw - 24px);padding:26px;position:fixed;top:12px;bottom:12px;right:12px;overflow-y:auto;box-shadow:-30px 0 80px -30px rgba(19, 28, 25, 0.45)}.panel-scrim{z-index:65;background:rgba(19, 28, 25, 0.32);position:fixed;inset:0}.panel__close{background:var(--panel);border-radius:50%;position:absolute;top:16px;right:16px}.panel__hero{text-align:center;flex-direction:column;align-items:center;padding-top:10px;display:flex}.panel__hero .avatar{width:96px;height:96px;font-size:28px}.panel__name{letter-spacing:-.03em;margin-top:14px;font-size:22px;font-weight:600}.panel__meta{color:var(--muted);flex-wrap:wrap;justify-content:center;gap:6px 14px;margin-top:8px;font-size:13px;display:flex}.panel__meta span{align-items:center;gap:5px;display:inline-flex}.panel__meta svg{width:15px;height:15px}.panel__stats{grid-template-columns:repeat(3,1fr);gap:10px;margin-top:22px;display:grid}.panel__stats div{background:var(--panel);text-align:center;border-radius:14px;padding:12px}.panel__stats b{font-size:20px;display:block}.panel__stats span{color:var(--muted);font-size:12px}.panel__h{margin:24px 0 10px;font-size:14px;font-weight:600}.panel__tasks{gap:8px;display:grid}.panel__tasks li{background:var(--panel);border-radius:12px;align-items:center;gap:10px;padding:10px 12px;font-size:13.5px;display:flex}.panel__tasks .col__dot{flex:none}.panel__tasks small{color:var(--faint);white-space:nowrap;margin-left:auto}.panel__actions{gap:10px;margin-top:22px;display:flex}.panel__actions .btn{flex:1;height:48px}.settings{gap:var(--gap);grid-template-columns:260px minmax(0,1fr);align-items:start;display:grid}.set-nav{padding:10px;position:relative}.set-nav__tabs{gap:4px;display:grid;position:relative}.set-nav__pill{background:var(--g-100);transform-origin:50% 0;border-radius:14px;height:48px;position:absolute;top:10px;left:10px;right:10px}.set-nav__tab{height:48px;color:var(--muted);border-radius:14px;align-items:center;gap:12px;padding:0 14px;font-size:15px;font-weight:500;transition:color .2s;display:flex;position:relative}.set-nav__tab:hover{color:var(--ink)}.set-nav__tab[aria-selected=true]{color:var(--g-800);font-weight:600}.set-nav__tab:focus-visible{box-shadow:inset 0 0 0 2px var(--g-600)}.set-body{min-height:460px;padding:28px}.pane__head{align-items:center;gap:18px;margin-bottom:24px;display:flex}.pane__title{letter-spacing:-.03em;font-size:22px;font-weight:600}.pane__sub{color:var(--muted);margin-top:4px;font-size:14px}.form-grid{grid-template-columns:1fr 1fr;gap:16px 18px;display:grid}.field--wide{grid-column:1/-1}.field select,.field textarea{border:1.5px solid var(--hair);background:var(--panel);min-height:48px;color:var(--ink);font:inherit;border-radius:12px;outline:none;padding:12px 14px;font-size:15px;transition:border-color .2s}.field textarea{resize:vertical;line-height:1.5}.field select{appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23646d67' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");background-position:right 14px center;background-repeat:no-repeat;background-size:18px;padding-right:42px}.field select:focus-visible,.field textarea:focus-visible{border-color:var(--g-600);box-shadow:0 0 0 3px color-mix(in srgb, var(--g-600) 18%, transparent)}.field input[aria-invalid=true]{border-color:var(--rose)}.field__err{min-height:0;color:var(--rose);font-size:12.5px;font-style:normal}.field__err:empty{display:none}.pane__foot{border-top:1px solid var(--hair);justify-content:flex-end;gap:10px;margin-top:26px;padding-top:20px;display:flex}.save-btn{min-width:170px;position:relative;overflow:hidden}.save-btn__done{opacity:0;justify-content:center;align-items:center;gap:8px;display:flex;position:absolute;inset:0}.save-btn__done svg{stroke-width:2.6px;stroke-dasharray:1;stroke-dashoffset:1px;width:20px;height:20px}.switches{margin-top:18px;display:grid}.switches li{border-bottom:1px solid var(--hair);justify-content:space-between;align-items:center;gap:18px;padding:16px 0;display:flex}.switches li:last-child{border-bottom:0}.switches__t{font-size:15px;font-weight:600}.switches__d{color:var(--muted);margin-top:2px;font-size:13px}.switch{background:#E5E7EB;border-radius:999px;flex:none;width:52px;height:30px;transition:background-color .3s;position:relative}.switch[aria-checked=true]{background:var(--g-700)}.switch__knob{background:#F3F4F6;border-radius:50%;width:24px;height:24px;position:absolute;top:3px;left:3px;box-shadow:0 2px 6px rgba(19, 28, 25, 0.25)}.switch:focus-visible{box-shadow:var(--focus)}.set-label{letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin-bottom:12px;padding:0;font-size:13px;font-weight:600}fieldset{border:0;min-width:0;margin:26px 0 0;padding:0}.swatches{flex-wrap:wrap;gap:12px;display:flex}.swatches legend{width:100%}.swatch{background:var(--panel);cursor:pointer;border-radius:14px;align-items:center;gap:10px;padding:10px 16px 10px 10px;font-size:14.5px;font-weight:500;transition:box-shadow .2s,background-color .2s;display:flex;box-shadow:inset 0 0 0 1.5px transparent}.swatch input{opacity:0;pointer-events:none;position:absolute}.swatch__chip{background:linear-gradient(135deg, var(--sw), color-mix(in srgb, var(--sw) 55%, #0B1110));border-radius:9px;width:30px;height:30px}.swatch:has(input:checked){background:var(--card);box-shadow:inset 0 0 0 2px var(--sw)}.swatch:has(input:focus-visible){box-shadow:var(--focus)}.radios{flex-wrap:wrap;gap:10px;display:flex}.radios legend{width:100%}.radio{cursor:pointer}.radio input{opacity:0;pointer-events:none;position:absolute}.radio span{background:var(--panel);border-radius:999px;padding:10px 18px;font-size:14.5px;font-weight:500;transition:background-color .2s,color .2s;display:inline-block}.radio input:checked+span{color:#F3F4F6;background:var(--g-700)}.radio input:focus-visible+span{box-shadow:var(--focus)}.help{gap:var(--gap);grid-template-columns:minmax(0,2fr) minmax(280px,1fr);grid-template-areas:"hero hero""faq keys""faq contact";align-items:start;display:grid}.help__hero{isolation:isolate;color:#F3F4F6;background:var(--g-950);grid-area:hero;padding:30px;overflow:hidden}.help__hero:before{content:"";z-index:-1;background:repeating-radial-gradient(circle at 88% 30%, transparent 0 16px, rgba(255, 255, 255, 0.06) 17px 18px), radial-gradient(60% 80% at 90% 20%, color-mix(in srgb, var(--g-600) 80%, transparent), transparent 70%);position:absolute;inset:-40%}.help__q{letter-spacing:-.035em;font-size:clamp(26px,2.6vw,34px);font-weight:600}.help__hint{color:rgba(243, 244, 246, 0.75);margin-top:6px;font-size:14px}.help__cats{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:22px;display:grid}.hcat{text-align:left;color:#F3F4F6;background:rgba(255, 255, 255, 0.08);border-radius:16px;align-items:center;gap:12px;padding:14px;transition:background-color .2s,color .2s;display:flex;box-shadow:inset 0 0 0 1px rgba(255, 255, 255, 0.12)}.hcat svg{width:24px;height:24px}.hcat b{font-size:14.5px;font-weight:600;display:block}.hcat small{opacity:.75;font-size:12px}.hcat:hover{background:rgba(255, 255, 255, 0.14)}.hcat[aria-pressed=true]{color:var(--g-950);background:#F3F4F6}.hcat:focus-visible{box-shadow:0 0 0 3px var(--g-950), 0 0 0 5px #F3F4F6}.help__faq{grid-area:faq}.faq{margin-top:10px;display:grid}.faq__item{border-bottom:1px solid var(--hair)}.faq__item:last-child{border-bottom:0}.faq__q{text-align:left;justify-content:space-between;align-items:center;gap:16px;width:100%;padding:18px 2px;font-size:15.5px;font-weight:600;display:flex}.faq__q:focus-visible{border-radius:8px}.faq__icon{background:var(--panel);border-radius:50%;flex:none;place-items:center;width:30px;height:30px;display:grid}.faq__icon svg{stroke-width:2.2px;width:16px;height:16px}.faq__a{color:var(--muted);padding:0 40px 18px 2px;font-size:14.5px;line-height:1.6}.faq__a b{color:var(--ink)}.faq__a code{background:var(--panel);border-radius:6px;padding:1px 6px;font-size:13px}.help__keys{grid-area:keys}.keys{gap:10px;margin:16px 0 0;display:grid}.keys div{justify-content:space-between;align-items:center;gap:12px;font-size:14px;display:flex}.keys dt{gap:4px;display:flex}.keys dd{color:var(--muted);text-align:right;margin:0}kbd{min-width:26px;height:26px;font:600 12px var(--font);background:var(--panel);box-shadow:inset 0 -2px 0 var(--hair), inset 0 0 0 1px var(--hair);border-radius:7px;place-items:center;padding:0 7px;display:inline-grid}.search__kbd{min-width:0;height:auto;box-shadow:none;align-items:center;gap:3px;display:inline-flex}.help__contact{isolation:isolate;color:#F3F4F6;background:var(--deep);grid-area:contact;overflow:hidden}.help__contact:before{content:"";z-index:-1;background:repeating-radial-gradient(ellipse at 100% 100%, transparent 0 11px, var(--swirl) 12px 13px), radial-gradient(60% 70% at 100% 100%, color-mix(in srgb, var(--g-700) 90%, transparent), transparent 70%);position:absolute;inset:-30%}.help__contact .promo__icon{width:34px;height:34px}.help__contact .promo__icon svg{width:18px;height:18px}.help__contact-t{letter-spacing:-.03em;margin-top:14px;font-size:22px;font-weight:600}.help__contact-d{color:rgba(243, 244, 246, 0.75);margin-top:6px;font-size:14px}.help__contact-row{flex-wrap:wrap;gap:10px;margin-top:20px;display:flex}.help__contact-row .btn{flex:1;height:48px;padding:0 16px;font-size:15px}.empty--block{text-align:center;padding:40px}.dlg__cols{grid-template-columns:1fr 1fr;gap:12px;display:grid}.dlg__text{color:var(--muted);font-size:14.5px}.dlg--sm{width:min(380px,100vw - 32px)}


/* =============================================================
 * 10. MASTER RESPONSIVE BREAKPOINT ENGINE (GymMan ERP)
 *
 * Mathematically unified layout across all 6 standard viewports:
 *   1. Small Mobile:         360px  [@media (max-width: 639px)]
 *   2. Large Mobile / SM:    640px  [@media (min-width: 640px) and (max-width: 767px)]
 *   3. Tablet Portrait / MD: 768px  [@media (min-width: 768px) and (max-width: 1023px)]
 *   4. Tablet Landscape/LG: 1024px  [@media (min-width: 1024px) and (max-width: 1279px)]
 *   5. Desktop / XL:        1280px  [@media (min-width: 1280px) and (max-width: 1535px)]
 *   6. Widescreen / 2XL:    1536px+ [@media (min-width: 1536px)]
 * ============================================================= */

/* Accessibility: Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* =============================================================
 * BREAKPOINT 1: SMALL MOBILE (360px - max-width: 639px)
 * ============================================================= */
@media (max-width: 639px) {
  .app {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 8px !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    min-height: 100dvh !important;
    box-sizing: border-box !important;
  }

  .shell {
    gap: 8px !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .workspace {
    gap: 8px !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  /* Off-canvas Mobile Drawer */
  .sidebar {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    width: min(290px, 84vw) !important;
    height: 100dvh !important;
    z-index: 50 !important;
    border-radius: 0 var(--r-lg) var(--r-lg) 0 !important;
    visibility: hidden !important;
    transform: translateX(-105%) !important;
    transition: transform 0.35s var(--ease), visibility 0s 0.35s !important;
    box-shadow: 20px 0 60px rgba(0, 0, 0, 0.55) !important;
    margin: 0 !important;
  }

  .sidebar.is-open {
    visibility: visible !important;
    transform: none !important;
    transition: transform 0.35s var(--ease) !important;
  }

  .icon-btn.sidebar__close {
    display: grid !important;
  }

  .scrim {
    z-index: 45 !important;
    opacity: 0 !important;
    background: rgba(13, 24, 17, 0.65) !important;
    backdrop-filter: blur(4px) !important;
    transition: opacity 0.3s !important;
    position: fixed !important;
    inset: 0 !important;
    pointer-events: none !important;
  }

  .scrim.is-on {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Mobile Topbar — Zero Overflow on 360px */
  .topbar {
    border-radius: 18px !important;
    padding: 6px 10px !important;
    gap: 6px !important;
    min-height: 48px !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .icon-btn.topbar__menu {
    display: grid !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    flex-shrink: 0 !important;
  }

  .facility-label {
    display: none !important;
  }

  .sidebar #header-branch-select {
    width: 100% !important;
    max-width: 100% !important;
  }

  .search {
    display: none !important;
  }

  .topbar__actions {
    gap: 6px !important;
    margin-left: auto !important;
    align-items: center !important;
    flex-shrink: 0 !important;
  }

  .topbar__actions .capsule-pill,
  #header-role-select,
  .profile__name {
    display: none !important;
  }

  .icon-btn--round {
    width: 36px !important;
    height: 36px !important;
  }

  .icon-btn--round svg {
    width: 18px !important;
    height: 18px !important;
  }

  .avatar {
    width: 34px !important;
    height: 34px !important;
    font-size: 11px !important;
  }

  /* Board Viewport */
  .board {
    border-radius: 18px !important;
    padding: 14px 10px 12px !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .board__head {
    gap: 8px !important;
    margin-bottom: 12px !important;
    padding: 0 !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .board__title {
    font-size: 22px !important;
    line-height: 1.2 !important;
  }

  .board__sub {
    font-size: 11.5px !important;
    margin-top: 2px !important;
  }

  .board__actions {
    width: 100% !important;
    gap: 6px !important;
  }

  .board__actions .btn {
    flex: 1 1 auto !important;
    height: 40px !important;
    padding: 0 12px !important;
    font-size: 12.5px !important;
  }

  /* Cards & Primitives */
  .card, .glass-card, .card-surface {
    padding: 14px 10px !important;
    border-radius: 14px !important;
  }

  .card__title {
    font-size: 16px !important;
  }

  .card__sub {
    font-size: 11.5px !important;
  }

  .stat {
    min-height: 124px !important;
    padding: 12px !important;
  }

  .stat__title {
    font-size: 13.5px !important;
  }

  .stat__num {
    font-size: clamp(28px, 6.5vw, 34px) !important;
    padding-top: 6px !important;
  }

  .arrow {
    width: 28px !important;
    height: 28px !important;
  }

  .arrow svg {
    width: 14px !important;
    height: 14px !important;
  }

  .stat__note {
    font-size: 11px !important;
  }

  .btn, .btn--primary, .btn-primary {
    height: 42px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
  }

  /* Calendar at 360px */
  .cal {
    grid-template-columns: 1fr !important;
    grid-template-areas: "month" "agenda" "next" !important;
    gap: 12px !important;
  }

  .cal__grid {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    grid-auto-rows: minmax(44px, auto) !important;
    gap: 2.5px !important;
  }

  .cal__dow {
    gap: 2.5px !important;
    margin: 8px 0 4px !important;
  }

  .cal__dow span {
    font-size: 10.5px !important;
  }

  .day {
    min-height: 44px !important;
    padding: 2px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    border-radius: 8px !important;
  }

  .day__n {
    width: 22px !important;
    height: 22px !important;
    font-size: 11px !important;
  }

  .day__dots {
    gap: 2px !important;
    margin-top: 1.5px !important;
    justify-content: center !important;
  }

  .day__dot {
    width: 4.5px !important;
    height: 4.5px !important;
  }

  .day__evt {
    display: none !important;
  }

  .cal__legend {
    gap: 6px 10px !important;
    font-size: 11px !important;
    margin-top: 10px !important;
  }

  .cal-agenda-card {
    padding: 10px 12px !important;
    border-radius: 12px !important;
    gap: 6px !important;
  }

  .cal-upnext-card {
    padding: 8px 10px !important;
    border-radius: 12px !important;
  }

  /* Analytics at 360px */
  .an-grid {
    gap: 10px !important;
  }

  .kpi {
    grid-column: span 12 !important;
    min-height: 110px !important;
    padding: 12px !important;
  }

  .kpi__label {
    font-size: 12px !important;
  }

  .kpi__num {
    font-size: 24px !important;
  }

  .kpi__delta span {
    display: none !important;
  }

  .trend-card, .heat-card, .donut-card, .leaders-card {
    grid-column: span 12 !important;
  }

  .chart {
    min-height: 170px !important;
  }

  .heat {
    gap: 2.5px !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    padding-bottom: 6px !important;
  }

  .spark {
    width: calc(100% + 20px) !important;
    height: 32px !important;
    margin: auto -10px -10px !important;
  }

  /* Team at 360px */
  .people {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .member {
    padding: 16px 12px !important;
  }

  /* Kanban at 360px */
  .kanban {
    grid-template-columns: repeat(4, 85%) !important;
    gap: 10px !important;
  }

  /* Settings at 360px */
  .settings {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .set-nav__tabs {
    grid-auto-columns: 1fr !important;
    grid-auto-flow: column !important;
  }

  .set-nav__pill {
    display: none !important;
  }

  .set-nav__tab {
    justify-content: center !important;
    padding: 0 8px !important;
    font-size: 13px !important;
  }

  .set-nav__tab svg {
    display: none !important;
  }

  .set-body {
    padding: 14px 10px !important;
  }

  .form-grid, .dlg__cols {
    grid-template-columns: 1fr !important;
  }

  .help {
    grid-template-columns: 1fr !important;
    grid-template-areas: "hero" "faq" "keys" "contact" !important;
  }

  .help__hero {
    padding: 18px !important;
  }

  .help__cats {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
}

/* =============================================================
 * BREAKPOINT 2: LARGE MOBILE / PHABLET (640px to 767px)
 * ============================================================= */
@media (min-width: 640px) and (max-width: 767px) {
  .app {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 10px !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    min-height: 100dvh !important;
    box-sizing: border-box !important;
  }

  .shell {
    gap: 10px !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
  }

  .workspace {
    gap: 10px !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  .sidebar {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    width: min(300px, 80vw) !important;
    height: 100dvh !important;
    z-index: 50 !important;
    border-radius: 0 var(--r-lg) var(--r-lg) 0 !important;
    visibility: hidden !important;
    transform: translateX(-105%) !important;
    transition: transform 0.35s var(--ease), visibility 0s 0.35s !important;
    box-shadow: 20px 0 60px rgba(0, 0, 0, 0.55) !important;
    margin: 0 !important;
  }

  .sidebar.is-open {
    visibility: visible !important;
    transform: none !important;
    transition: transform 0.35s var(--ease) !important;
  }

  .icon-btn.sidebar__close {
    display: grid !important;
  }

  .scrim {
    z-index: 45 !important;
    opacity: 0 !important;
    background: rgba(13, 24, 17, 0.65) !important;
    backdrop-filter: blur(4px) !important;
    transition: opacity 0.3s !important;
    position: fixed !important;
    inset: 0 !important;
    pointer-events: none !important;
  }

  .scrim.is-on {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .topbar {
    border-radius: 20px !important;
    padding: 8px 12px !important;
    gap: 8px !important;
    min-height: 50px !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .icon-btn.topbar__menu {
    display: grid !important;
    width: 38px !important;
    height: 38px !important;
    flex-shrink: 0 !important;
  }

  .facility-label {
    display: none !important;
  }

  .sidebar #header-branch-select {
    width: 100% !important;
    max-width: 100% !important;
  }

  .search {
    display: none !important;
  }

  .topbar__actions {
    gap: 8px !important;
    margin-left: auto !important;
    align-items: center !important;
    flex-shrink: 0 !important;
  }

  .topbar__actions .capsule-pill,
  .profile__name {
    display: none !important;
  }

  #header-role-select {
    display: block !important;
    max-width: 140px !important;
    font-size: 11px !important;
    padding: 4px 8px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }

  .icon-btn--round {
    width: 38px !important;
    height: 38px !important;
  }

  .avatar {
    width: 36px !important;
    height: 36px !important;
    font-size: 12px !important;
  }

  .board {
    border-radius: 20px !important;
    padding: 18px 14px !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .board__title {
    font-size: 26px !important;
  }

  .card, .glass-card {
    padding: 18px 14px !important;
    border-radius: 16px !important;
  }

  /* Calendar at 640px */
  .cal {
    grid-template-columns: 1fr !important;
    grid-template-areas: "month" "agenda" "next" !important;
    gap: 14px !important;
  }

  .cal__grid {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    grid-auto-rows: minmax(54px, auto) !important;
    gap: 4px !important;
  }

  .day {
    min-height: 54px !important;
    padding: 4px !important;
  }

  .day__n {
    width: 26px !important;
    height: 26px !important;
    font-size: 12px !important;
  }

  /* Analytics at 640px */
  .kpi {
    grid-column: span 6 !important;
    min-height: 124px !important;
  }

  .trend-card, .heat-card, .donut-card, .leaders-card {
    grid-column: span 12 !important;
  }

  .people {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
}

/* =============================================================
 * BREAKPOINT 3: TABLET PORTRAIT (768px to 1023px)
 * ============================================================= */
@media (min-width: 768px) and (max-width: 1023px) {
  .app {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding: 12px !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    min-height: 100dvh !important;
    box-sizing: border-box !important;
  }

  .shell {
    gap: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
  }

  .workspace {
    gap: 12px !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  .sidebar {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    width: min(300px, 60vw) !important;
    height: 100dvh !important;
    z-index: 50 !important;
    border-radius: 0 var(--r-lg) var(--r-lg) 0 !important;
    visibility: hidden !important;
    transform: translateX(-105%) !important;
    transition: transform 0.35s var(--ease), visibility 0s 0.35s !important;
    box-shadow: 20px 0 60px rgba(0, 0, 0, 0.55) !important;
    margin: 0 !important;
  }

  .sidebar.is-open {
    visibility: visible !important;
    transform: none !important;
    transition: transform 0.35s var(--ease) !important;
  }

  .icon-btn.sidebar__close {
    display: grid !important;
  }

  .scrim {
    z-index: 45 !important;
    opacity: 0 !important;
    background: rgba(13, 24, 17, 0.65) !important;
    backdrop-filter: blur(4px) !important;
    transition: opacity 0.3s !important;
    position: fixed !important;
    inset: 0 !important;
    pointer-events: none !important;
  }

  .scrim.is-on {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .topbar {
    border-radius: 22px !important;
    padding: 10px 16px !important;
    gap: 10px !important;
    min-height: 52px !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .icon-btn.topbar__menu {
    display: grid !important;
    width: 40px !important;
    height: 40px !important;
    flex-shrink: 0 !important;
  }

  .facility-label {
    display: inline !important;
    font-size: 11px !important;
  }

  .sidebar #header-branch-select {
    width: 100% !important;
    max-width: 100% !important;
  }

  .search {
    display: flex !important;
    max-width: 180px !important;
    min-width: 130px !important;
    flex: 1 1 auto !important;
  }

  .search input,
  #global-search-input {
    height: 38px !important;
    font-size: 12px !important;
    padding-left: 34px !important;
    padding-right: 12px !important;
  }

  .search__icon {
    left: 10px !important;
    width: 15px !important;
    height: 15px !important;
  }

  .search__kbd {
    display: none !important;
  }

  .topbar__actions {
    gap: 8px !important;
    margin-left: auto !important;
    align-items: center !important;
    flex-shrink: 0 !important;
  }

  .topbar__actions .capsule-pill,
  .profile__name {
    display: none !important;
  }

  #header-role-select {
    display: block !important;
    max-width: 155px !important;
    font-size: 11.5px !important;
    padding: 5px 8px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }

  .icon-btn--round {
    width: 40px !important;
    height: 40px !important;
  }

  .avatar {
    width: 38px !important;
    height: 38px !important;
    font-size: 12.5px !important;
  }

  .board {
    border-radius: 22px !important;
    padding: 20px 16px !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .board__title {
    font-size: 28px !important;
  }

  .card, .glass-card {
    padding: 20px 16px !important;
  }

  /* Calendar at 768px */
  .cal {
    grid-template-columns: 1fr 1fr !important;
    grid-template-areas: "month month" "agenda next" !important;
    gap: 16px !important;
  }

  .cal__grid {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    grid-auto-rows: minmax(64px, auto) !important;
    gap: 6px !important;
  }

  .day {
    min-height: 64px !important;
    padding: 6px !important;
  }

  .day__n {
    width: 28px !important;
    height: 28px !important;
    font-size: 13px !important;
  }

  /* Analytics at 768px */
  .kpi {
    grid-column: span 6 !important;
    min-height: 136px !important;
  }

  .trend-card {
    grid-column: span 12 !important;
  }

  .donut-card {
    grid-column: span 6 !important;
  }

  .leaders-card {
    grid-column: span 6 !important;
  }

  .heat-card {
    grid-column: span 12 !important;
  }

  .people {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }
}

/* =============================================================
 * BREAKPOINT 4: TABLET LANDSCAPE / LAPTOP (1024px to 1279px)
 * ============================================================= */
@media (min-width: 1024px) and (max-width: 1279px) {
  .app {
    display: grid !important;
    grid-template-columns: 220px minmax(0, 1fr) !important;
    gap: 12px !important;
    padding: 12px !important;
    width: 100% !important;
    max-width: 100vw !important;
    min-height: 100dvh !important;
    box-sizing: border-box !important;
  }

  .shell {
    display: contents !important;
  }

  .workspace {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    flex: 1 !important;
  }

  .sidebar {
    display: flex !important;
    position: sticky !important;
    top: 12px !important;
    width: 220px !important;
    height: calc(100dvh - 24px) !important;
    visibility: visible !important;
    transform: none !important;
    border-radius: var(--r-lg) !important;
    z-index: 40 !important;
    box-shadow: none !important;
    padding: 20px 0 16px !important;
  }

  .icon-btn.sidebar__close,
  .scrim,
  .icon-btn.topbar__menu,
  .topbar__actions .capsule-pill {
    display: none !important;
  }

  .topbar {
    padding: 10px 16px !important;
    gap: 12px !important;
    border-radius: 22px !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .facility-label {
    display: inline !important;
  }

  .sidebar #header-branch-select {
    width: 100% !important;
    max-width: 100% !important;
  }

  .search {
    display: flex !important;
    max-width: 220px !important;
    min-width: 150px !important;
    flex: 1 1 auto !important;
  }

  .search input,
  #global-search-input {
    height: 38px !important;
    font-size: 12.5px !important;
    padding-left: 36px !important;
    padding-right: 14px !important;
  }

  .search__icon {
    left: 12px !important;
    width: 15px !important;
    height: 15px !important;
  }

  .search__kbd {
    display: none !important;
  }

  .topbar__actions {
    gap: 10px !important;
    margin-left: auto !important;
    align-items: center !important;
    min-width: 0 !important;
    flex-shrink: 0 !important;
  }

  #header-role-select {
    display: block !important;
    max-width: 140px !important;
    font-size: 12px !important;
    padding: 5px 10px !important;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
    white-space: nowrap !important;
  }

  .profile__name {
    display: none !important;
  }

  .board {
    padding: 22px 18px !important;
    border-radius: 22px !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .board__title,
  .section-title,
  h1.section-title,
  h1.board__title {
    font-size: 40px !important;
    line-height: 1.15 !important;
    letter-spacing: -0.03em !important;
    font-weight: 700 !important;
  }

  /* Calendar at 1024px */
  .cal {
    grid-template: "month agenda" "month next" 1fr / minmax(0, 1.4fr) minmax(280px, 1fr) !important;
    gap: 14px !important;
  }

  .cal__grid {
    grid-auto-rows: minmax(72px, 1fr) !important;
    gap: 6px !important;
  }

  /* Analytics at 1024px */
  .kpi {
    grid-column: span 3 !important;
  }

  .trend-card {
    grid-column: span 12 !important;
  }

  .donut-card {
    grid-column: span 4 !important;
  }

  .heat-card {
    grid-column: span 4 !important;
  }

  .leaders-card {
    grid-column: span 4 !important;
  }

  .people {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }
}

/* =============================================================
 * BREAKPOINT 5: DESKTOP (1280px to 1535px)
 * ============================================================= */
@media (min-width: 1280px) and (max-width: 1535px) {
  .app {
    display: grid !important;
    grid-template-columns: 252px minmax(0, 1fr) !important;
    gap: 14px !important;
    padding: 14px !important;
    max-width: 1680px !important;
    margin: 0 auto !important;
    min-height: 100dvh !important;
    box-sizing: border-box !important;
  }

  .shell {
    display: contents !important;
  }

  .workspace {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    flex: 1 !important;
  }

  .sidebar {
    width: 252px !important;
    height: calc(100dvh - 28px) !important;
    top: 14px !important;
    display: flex !important;
    position: sticky !important;
    border-radius: var(--r-lg) !important;
  }

  .icon-btn.sidebar__close,
  .scrim,
  .icon-btn.topbar__menu {
    display: none !important;
  }

  .topbar {
    padding: 12px 18px !important;
    gap: 14px !important;
    border-radius: var(--r-lg) !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .facility-label {
    display: inline !important;
  }

  .sidebar #header-branch-select {
    width: 100% !important;
    max-width: 100% !important;
  }

  .search {
    display: flex !important;
    max-width: 320px !important;
    min-width: 200px !important;
  }

  .search input,
  #global-search-input {
    height: 40px !important;
    font-size: 13px !important;
    padding-left: 40px !important;
    padding-right: 52px !important;
  }

  .search__icon {
    left: 14px !important;
    width: 16px !important;
    height: 16px !important;
  }

  .search__kbd {
    display: inline-flex !important;
  }

  .topbar__actions {
    gap: 12px !important;
    margin-left: auto !important;
    align-items: center !important;
    min-width: 0 !important;
    flex-shrink: 0 !important;
  }

  .topbar__actions .capsule-pill {
    display: inline-flex !important;
  }

  #header-role-select {
    display: block !important;
    max-width: 175px !important;
    font-size: 12.5px !important;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
    white-space: nowrap !important;
  }

  .profile__name {
    display: inline !important;
  }

  .board {
    padding: 26px 22px !important;
    border-radius: var(--r-lg) !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .board__title,
  .section-title,
  h1.section-title,
  h1.board__title {
    font-size: 40px !important;
    line-height: 1.15 !important;
    letter-spacing: -0.03em !important;
    font-weight: 700 !important;
  }

  /* Calendar at 1280px */
  .cal {
    grid-template: "month agenda" "month next" 1fr / minmax(0, 2fr) minmax(320px, 1fr) !important;
    gap: 16px !important;
  }

  .cal__grid {
    grid-auto-rows: minmax(84px, 1fr) !important;
    gap: 8px !important;
  }

  /* Analytics at 1280px */
  .kpi {
    grid-column: span 3 !important;
  }

  .trend-card {
    grid-column: span 12 !important;
  }

  .donut-card {
    grid-column: span 4 !important;
  }

  .heat-card {
    grid-column: span 4 !important;
  }

  .leaders-card {
    grid-column: span 4 !important;
  }

  .people {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }
}

/* =============================================================
 * BREAKPOINT 6: WIDESCREEN / 2XL (1536px and above)
 * ============================================================= */
@media (min-width: 1536px) {
  .app {
    display: grid !important;
    grid-template-columns: 260px minmax(0, 1fr) !important;
    gap: 16px !important;
    padding: 16px !important;
    max-width: 1800px !important;
    margin: 0 auto !important;
    min-height: 100dvh !important;
    box-sizing: border-box !important;
  }

  .shell {
    display: contents !important;
  }

  .workspace {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    flex: 1 !important;
  }

  .sidebar {
    width: 260px !important;
    height: calc(100dvh - 32px) !important;
    top: 16px !important;
    display: flex !important;
    position: sticky !important;
    border-radius: var(--r-lg) !important;
  }

  .icon-btn.sidebar__close,
  .scrim,
  .icon-btn.topbar__menu {
    display: none !important;
  }

  .topbar {
    padding: 14px 22px !important;
    gap: 16px !important;
    border-radius: var(--r-lg) !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .facility-label {
    display: inline !important;
  }

  .sidebar #header-branch-select {
    width: 100% !important;
    max-width: 100% !important;
  }

  .search {
    display: flex !important;
    max-width: 380px !important;
    min-width: 240px !important;
  }

  .search input,
  #global-search-input {
    height: 42px !important;
    font-size: 13.5px !important;
    padding-left: 42px !important;
    padding-right: 56px !important;
  }

  .search__icon {
    left: 14px !important;
    width: 17px !important;
    height: 17px !important;
  }

  .search__kbd {
    display: inline-flex !important;
  }

  .topbar__actions {
    gap: 14px !important;
    margin-left: auto !important;
    min-width: 0 !important;
    flex-shrink: 0 !important;
  }

  .topbar__actions .capsule-pill {
    display: inline-flex !important;
  }

  #header-role-select {
    display: block !important;
    max-width: 230px !important;
    font-size: 13px !important;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
    white-space: nowrap !important;
  }

  .profile__name {
    display: inline !important;
  }

  .board {
    padding: 28px 24px !important;
    border-radius: var(--r-lg) !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .board__title,
  .section-title,
  h1.section-title,
  h1.board__title {
    font-size: 40px !important;
    line-height: 1.15 !important;
    letter-spacing: -0.03em !important;
    font-weight: 700 !important;
  }

  .cal {
    grid-template: "month agenda" "month next" 1fr / minmax(0, 2fr) minmax(360px, 1fr) !important;
    gap: 18px !important;
  }

  .cal__grid {
    grid-auto-rows: minmax(88px, 1fr) !important;
    gap: 8px !important;
  }

  .kpi {
    grid-column: span 3 !important;
  }

  .trend-card {
    grid-column: span 12 !important;
  }

  .donut-card {
    grid-column: span 4 !important;
  }

  .heat-card {
    grid-column: span 4 !important;
  }

  .leaders-card {
    grid-column: span 4 !important;
  }

  .people {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }
}

/* =============================================================
 * 11. UNIVERSAL LIGHT MODE & ACCESSIBILITY CONTRAST ENGINE
 * ============================================================= */

/* Segmented control track & buttons in light mode */
body.light .seg {
  background: #F3F4F6 !important;
  border: 1px solid #E5E7EB !important;
}

body.light .seg__btn {
  color: #4B5563 !important;
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
}

body.light .seg__btn:hover {
  color: #111827 !important;
  background: #F3F4F6 !important;
}

body.light .seg__btn.active,
body.light .seg__btn[aria-pressed="true"] {
  background: #FFFFFF !important;
  color: #111827 !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  border: 1px solid #E5E7EB !important;
}

/* Light mode avatar circles */
body.light .avatar {
  background: #F3F4F6 !important;
  color: #111827 !important;
  border: 1px solid #E5E7EB !important;
}

body.light .stack .avatar {
  box-shadow: 0 0 0 2px #FFFFFF !important;
}

/* Topbar overflow containment & light mode elevation */
.topbar {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

body.light .topbar {
  background: #FFFFFF !important;
  border: 1px solid #E5E7EB !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

body.light .topbar__actions {
  color: #111827 !important;
}

body.light .sidebar__facility select,
body.light #header-branch-select {
  background: #FFFFFF !important;
  color: #111827 !important;
  border: 1px solid #E5E7EB !important;
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
}

body.light .sidebar__facility select:hover,
body.light #header-branch-select:hover {
  border-color: #10B880 !important;
}

body.light .profile-role-pill {
  background: #FFFFFF !important;
  border: 1px solid #E5E7EB !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

body.light .profile-role-pill:hover {
  border-color: #10B880 !important;
  background: #F3F4F6 !important;
}

body.light .profile-role-pill select,
body.light #header-role-select {
  color: #10B880 !important;
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
}

body.light .capsule-pill {
  background: #F3F4F6 !important;
  border: 1px solid #E5E7EB !important;
  color: #111827 !important;
}

body.light .capsule-pill span {
  color: #111827 !important;
}

body.light .search input,
body.light #global-search-input {
  background: #FFFFFF !important;
  color: #111827 !important;
  border: 1px solid #E5E7EB !important;
}

body.light .search input::placeholder,
body.light #global-search-input::placeholder {
  color: #9CA3AF !important;
}

body.light .search__kbd {
  background: #F3F4F6 !important;
  color: #4B5563 !important;
  border: 1px solid #E5E7EB !important;
}

body.light .icon-btn {
  background: #FFFFFF !important;
  color: #4B5563 !important;
  border: 1px solid #E5E7EB !important;
}

body.light .icon-btn:hover {
  background: #F3F4F6 !important;
  color: #111827 !important;
}

body.light .profile__name {
  color: #111827 !important;
}

/* Light mode text contrast guarantees */
body.light .text-emerald-400,
body.light .text-emerald-300,
body.light .text-emerald-500 {
  color: #10B880 !important;
}

body.light .btn--ghost, body.light .btn-ghost {
  background: #FFFFFF !important;
  border: 1px solid #E5E7EB !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
  color: #111827 !important;
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
}

body.light .btn--ghost:hover, body.light .btn-ghost:hover {
  background: #F3F4F6 !important;
  border-color: #E5E7EB !important;
  color: #111827 !important;
}

/* Section Headings Desktop (1024px and above) 40px enforcement */
@media (min-width: 1024px) {
  .section-title,
  .board__title,
  h1.section-title,
  h1.board__title,
  .section-inter .section-title,
  .section-inter h1.section-title,
  .section-inter h2.section-title,
  #h-dashboard,
  #h-analytics,
  #h-calendar,
  #h-team,
  #h-team-roles {
    font-size: 40px !important;
    line-height: 1.15 !important;
    letter-spacing: -0.03em !important;
    font-weight: 700 !important;
  }
}