/* === TOKENS ============================================ */
:root {
  /* Fun-with-Learning brand: a warm yellow→orange gradient (matches the
     mascot). Kept under the legacy --brand-pink/--brand-purple names so the
     whole theme (gradients, accents, links) re-skins from these two tokens.
     "pink" = the golden-yellow end, "purple" = the orange end. */
  --brand-pink:   #FFB31F;
  --brand-purple: #F4631E;
  --accent-cyan:  #00E5FF;
  --accent-gold:  #FFB800;
  --accent-lime:  #A7F432;
  --accent-teal:  #14B8A6;

  --font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, monospace;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
}

/* Light defaults */
:root, :root[data-theme="light"] {
  --bg:         #FAFAFC;
  --surface:    #FFFFFF;
  --surface-2:  #F3F4F7;
  --fg:         #141422;
  --fg-muted:   #5B5B74;
  --border:     #E4E4EE;
  --ring:       color-mix(in oklab, var(--brand-pink) 45%, transparent);
  --shadow-sm:  0 1px 2px 0 rgba(20, 20, 34, 0.06);
  --shadow-md:  0 6px 24px -4px rgba(20, 20, 34, 0.10);
}

/* Auto-dark when OS says so AND no manual override */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:         #0B0B14;
    --surface:    #141422;
    --surface-2:  #1C1C2E;
    --fg:         #F2F2F7;
    --fg-muted:   #9A9AB0;
    --border:     #262639;
    --ring:       color-mix(in oklab, var(--brand-pink) 55%, transparent);
    --shadow-sm:  0 1px 2px 0 rgba(0, 0, 0, 0.35);
    --shadow-md:  0 8px 32px -6px rgba(0, 0, 0, 0.55);
  }
}

/* Manual dark override */
:root[data-theme="dark"] {
  --bg:         #0B0B14;
  --surface:    #141422;
  --surface-2:  #1C1C2E;
  --fg:         #F2F2F7;
  --fg-muted:   #9A9AB0;
  --border:     #262639;
  --ring:       color-mix(in oklab, var(--brand-pink) 55%, transparent);
  --shadow-sm:  0 1px 2px 0 rgba(0, 0, 0, 0.35);
  --shadow-md:  0 8px 32px -6px rgba(0, 0, 0, 0.55);
}

/* === BASE =============================================== */
html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-feature-settings: "ss01", "cv02";
  /* Flex column so the footer sits at the end of the document flow
     on short pages but is naturally pushed further down by tall
     content (e.g. EJ2 grids) instead of being absolutely positioned
     and overlapping the grid. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
body > .container { flex: 1 0 auto; }
body > footer { flex-shrink: 0; padding: var(--space-3) 0; margin-top: var(--space-5); }
h1, h2, h3, .display { font-family: var(--font-display); letter-spacing: -0.02em; }
a { color: var(--brand-purple); text-decoration: none; }
a:hover { color: var(--brand-pink); }
code, kbd, pre { font-family: var(--font-mono); color: var(--accent-cyan); }

/* Bootstrap override for card-on-dark-mode: let our tokens drive it. */
.card { background: var(--surface); color: var(--fg); border-color: var(--border); }
.form-control, .form-control:focus {
  background: var(--surface); color: var(--fg); border-color: var(--border);
}
.form-control:focus { border-color: var(--brand-purple); box-shadow: 0 0 0 0.2rem var(--ring); }
.dropdown-menu { background: var(--surface); border-color: var(--border); }
.dropdown-item { color: var(--fg); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--surface-2); color: var(--fg); }
.text-muted { color: var(--fg-muted) !important; }
.border-bottom, .border-top { border-color: var(--border) !important; }

/* === COMPONENTS ========================================= */
.chr-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4);
}
.chr-stat {
  display: flex; flex-direction: column; gap: var(--space-1);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  position: relative; overflow: hidden;
}
.chr-stat::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px; background: var(--accent, var(--brand-pink));
}
.chr-stat--pink   { --accent: var(--brand-pink); }
.chr-stat--purple { --accent: var(--brand-purple); }
.chr-stat--cyan   { --accent: var(--accent-cyan); }
.chr-stat--gold   { --accent: var(--accent-gold); }
.chr-stat--lime   { --accent: var(--accent-lime); }
.chr-stat--teal   { --accent: var(--accent-teal); }
.chr-stat__label { color: var(--fg-muted); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; }
.chr-stat__value { font-family: var(--font-display); font-size: 2rem; font-weight: 600; }

.btn-chronos {
  background: linear-gradient(135deg, var(--brand-pink), var(--brand-purple));
  color: #fff; border: 0; border-radius: var(--radius-md);
  padding: 0.65em 1.25em; font-weight: 600;
  box-shadow: var(--shadow-sm);
  transition: transform 120ms ease, box-shadow 120ms ease;
  display: inline-flex; align-items: center; gap: var(--space-2);
  text-decoration: none;
}
.btn-chronos:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); color: #fff; }
.btn-chronos:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }

.btn-chronos-ghost {
  background: transparent; color: var(--fg);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 0.6em 1.2em; font-weight: 600;
  display: inline-flex; align-items: center; gap: var(--space-2);
  text-decoration: none;
  transition: border-color 120ms ease, color 120ms ease;
}
.btn-chronos-ghost:hover { border-color: var(--brand-purple); color: var(--brand-purple); }
.btn-chronos-ghost:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }

/* === NAVBAR ============================================= */
.chr-navbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  backdrop-filter: saturate(140%) blur(8px);
  position: relative;
  z-index: 1050;
}
.chr-navbar .dropdown-menu {
  z-index: 1060;
}
.chr-navbar .nav-link { color: var(--fg); }
.chr-navbar .nav-link:hover { color: var(--brand-purple); }
.chr-brand {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em;
  text-decoration: none;
}
.chr-brand svg { height: 28px; width: 28px; }
/* Full horizontal brand logo (mascot + wordmark) — keep aspect, size by height. */
.chr-brand-logo { height: 36px; width: auto; display: block; }
/* The inline navbar mark must win over .chr-section-hero__art etc. —
   pin size explicitly so nothing else in the cascade shrinks it. */
.chr-brand-mark { display: block; flex: 0 0 auto; }
.chr-brand-word {
  background: linear-gradient(90deg, var(--brand-pink), var(--brand-purple));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* The little "with" badge in the middle of the wordmark (mirrors the logo). */
.chr-brand-with {
  -webkit-background-clip: border-box; background-clip: border-box;
  display: inline-block; margin: 0 0.28em; padding: 0.04em 0.42em;
  background: #2B2B45; color: #fff;
  font-size: 0.62em; font-weight: 700; letter-spacing: 0.02em;
  border-radius: 999px; vertical-align: 0.18em;
}
:root[data-theme="dark"] .chr-brand-with { background: #11111d; }

.chr-theme-toggle {
  border: 1px solid var(--border); background: var(--surface-2);
  color: var(--fg);
  border-radius: 999px; padding: 0.4rem 0.7rem; display: inline-flex;
  align-items: center; gap: 0.35rem; cursor: pointer;
  font-family: var(--font-body); font-size: 0.85rem; font-weight: 500;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.chr-theme-toggle:hover { color: var(--brand-purple); border-color: var(--brand-purple); background: var(--surface); }
.chr-theme-toggle:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
.chr-theme-toggle svg { width: 18px; height: 18px; stroke: currentColor; fill: none; }
.chr-theme-toggle__label { letter-spacing: 0.02em; }
/* Icon visibility by toggle state: light shows sun, dark shows moon,
   auto shows both at reduced opacity. */
.chr-theme-toggle[data-theme-state="light"] .chr-icon-moon { display: none; }
.chr-theme-toggle[data-theme-state="dark"]  .chr-icon-sun  { display: none; }
.chr-theme-toggle[data-theme-state="auto"]  svg { opacity: 0.55; }

/* === LANDING ============================================ */
.chr-landing {
  min-height: 100vh;
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6);
  align-items: center; padding: var(--space-6);
  background:
    radial-gradient(1200px 600px at 20% 10%, color-mix(in oklab, var(--brand-pink) 10%, transparent), transparent 50%),
    radial-gradient(1200px 600px at 80% 90%, color-mix(in oklab, var(--accent-teal) 10%, transparent), transparent 50%),
    var(--bg);
}
@media (max-width: 900px) { .chr-landing { grid-template-columns: 1fr; } }
.chr-landing__headline {
  font-family: var(--font-display); font-size: clamp(2.25rem, 4vw, 3.75rem);
  font-weight: 700; line-height: 1.05; letter-spacing: -0.03em;
}
.chr-landing__headline .gradient {
  background: linear-gradient(90deg, var(--brand-pink), var(--brand-purple), var(--accent-cyan));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.chr-landing__sub { color: var(--fg-muted); font-size: 1.125rem; max-width: 52ch; margin-top: var(--space-3); }
.chr-landing__ctas { display: flex; gap: var(--space-3); margin-top: var(--space-5); flex-wrap: wrap; }
.chr-landing__hero { margin: 0; }
.chr-landing__hero img {
  width: 100%; height: auto; max-height: 70vh;
  filter: drop-shadow(0 30px 60px color-mix(in oklab, var(--brand-purple) 30%, transparent));
  animation: chr-float 12s ease-in-out infinite;
}
@keyframes chr-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-12px) rotate(1deg); }
}

.chr-value-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); padding: var(--space-6); }
@media (max-width: 900px) { .chr-value-row { grid-template-columns: 1fr; } }
.chr-value-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--space-4); box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: var(--space-2);
}
.chr-value-card h3 { font-family: var(--font-display); margin: 0; display: flex; align-items: center; gap: var(--space-2); }
.chr-value-card p { color: var(--fg-muted); margin: 0; }
.chr-value-card__icon {
  width: 48px; height: 48px; border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--accent, var(--brand-pink)), color-mix(in oklab, var(--accent, var(--brand-pink)) 55%, var(--surface)));
  box-shadow: 0 6px 18px -4px color-mix(in oklab, var(--accent, var(--brand-pink)) 45%, transparent);
}
.chr-value-card--pink   { --accent: var(--brand-pink); }
.chr-value-card--purple { --accent: var(--brand-purple); }
.chr-value-card--cyan   { --accent: var(--accent-cyan); }
.chr-badge-new {
  background: var(--accent-lime); color: #0B0B14;
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.12em;
  padding: 0.15em 0.5em; border-radius: 999px; text-transform: uppercase;
}

/* === AUTH =============================================== */
.chr-auth-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: var(--space-5);
  background:
    radial-gradient(800px 400px at 50% 20%, color-mix(in oklab, var(--brand-purple) 8%, transparent), transparent 60%),
    var(--bg);
}
.chr-auth-card { width: 100%; max-width: 420px; }
.chr-auth-card h1 { font-size: 1.75rem; margin-bottom: var(--space-4); }
.chr-auth-card label { color: var(--fg-muted); font-size: 0.85rem; font-weight: 500; margin-bottom: 0.35rem; display: block; }
.chr-auth-card input { width: 100%; }
.chr-auth-card .chr-field { margin-bottom: var(--space-3); }
.chr-auth-card .chr-error { color: var(--brand-pink); font-size: 0.9rem; margin-bottom: var(--space-3); }

/* === COMING SOON ======================================== */
.chr-coming-soon { max-width: 560px; margin: var(--space-6) auto; text-align: center; }
.chr-coming-soon__badge {
  display: inline-block; padding: 0.5rem 1rem; border-radius: 999px;
  background: linear-gradient(90deg, var(--brand-pink), var(--brand-purple));
  color: #fff; font-family: var(--font-display); font-weight: 600; letter-spacing: 0.02em;
  margin-bottom: var(--space-4);
}

/* === DASHBOARD ========================================== */
.chr-dashboard-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
@media (max-width: 900px) { .chr-dashboard-grid { grid-template-columns: 1fr; } }
.chr-dashboard-split { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-3); }
@media (max-width: 900px) { .chr-dashboard-split { grid-template-columns: 1fr; } }
.chr-section-title { font-family: var(--font-display); font-size: 1.1rem; margin: 0 0 var(--space-3) 0; }
.chr-contract-list { list-style: none; padding: 0; margin: 0; max-height: 320px; overflow-y: auto; }
.chr-contract-list li {
  padding: 0.5rem 0; border-bottom: 1px solid var(--border); color: var(--fg);
}
.chr-contract-list li:last-child { border-bottom: 0; }

/* === STATUS HERO ======================================== */
.chr-status-hero {
  display: grid; grid-template-columns: 120px 1fr; gap: var(--space-4);
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  align-items: center; position: relative; overflow: hidden;
}
.chr-status-hero::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--status-accent), transparent 70%);
  opacity: 0.12; pointer-events: none;
}
.chr-status-hero--green  { --status-accent: var(--accent-lime); }
.chr-status-hero--yellow { --status-accent: var(--accent-gold); }
.chr-status-hero--red    { --status-accent: var(--brand-pink); }

.chr-status-hero__light {
  width: 96px; height: 96px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%,
    color-mix(in oklab, var(--status-accent) 90%, white),
    var(--status-accent) 55%,
    color-mix(in oklab, var(--status-accent) 40%, black) 100%);
  box-shadow: 0 0 48px color-mix(in oklab, var(--status-accent) 50%, transparent);
  justify-self: center;
}
.chr-status-hero__body { position: relative; z-index: 1; }
.chr-status-hero__eyebrow { color: var(--fg-muted); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; margin: 0; }
.chr-status-hero__headline { font-family: var(--font-display); font-size: clamp(1.5rem, 2.5vw, 2.25rem); font-weight: 700; letter-spacing: -0.02em; margin: 0 0 var(--space-2); }
.chr-status-hero__sub { color: var(--fg-muted); max-width: 60ch; margin: 0; }
.chr-status-hero__bar { height: 8px; border-radius: 999px; background: var(--surface-2); margin: var(--space-3) 0 var(--space-1); overflow: hidden; }
.chr-status-hero__bar-fill { height: 100%; background: linear-gradient(90deg, var(--status-accent), var(--brand-purple)); }
.chr-status-hero__bar-label { font-size: 0.85rem; color: var(--fg-muted); margin-bottom: var(--space-3); }
/* Secondary dashboard CTAs — e.g. quiet leave-request link next to
   the primary "Log time now" / "Open timesheet" button. Sized down so
   it's there when you need it without pulling attention away from the
   log-time ask. */
.chr-status-hero__ctas { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.chr-status-hero__ctas .btn-sm {
  font-size: 0.85rem; padding: 0.35rem 0.75rem;
  color: var(--fg-muted); border-color: var(--border);
}
.chr-status-hero__ctas .btn-sm:hover { color: var(--brand-purple); border-color: var(--brand-purple); }
@media (max-width: 600px) {
  .chr-status-hero { grid-template-columns: 1fr; text-align: center; }
  .chr-status-hero__sub { margin-left: auto; margin-right: auto; }
}

/* === TEAM LOG STATUS ==================================== */
.chr-team__header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); flex-wrap: wrap; }
.chr-team__counts { display: inline-flex; gap: var(--space-2); flex-wrap: wrap; }
.chr-team__table { width: 100%; border-collapse: collapse; }
.chr-team__table th { text-align: left; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-muted); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border); }
.chr-team__table td { padding: var(--space-3); border-bottom: 1px solid var(--border); color: var(--fg); }
.chr-team__table tr:last-child td { border-bottom: 0; }
.chr-team__table .num { text-align: right; font-variant-numeric: tabular-nums; }

.chr-status-pill {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.25rem 0.65rem; border-radius: 999px;
  font-size: 0.8rem; font-weight: 600;
  background: color-mix(in oklab, var(--pill-accent) 12%, transparent);
  color: var(--pill-accent);
  border: 1px solid color-mix(in oklab, var(--pill-accent) 30%, transparent);
}
.chr-status-pill::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--pill-accent);
  box-shadow: 0 0 6px var(--pill-accent);
}
.chr-status-pill--green  { --pill-accent: var(--accent-lime); }
.chr-status-pill--yellow { --pill-accent: var(--accent-gold); }
.chr-status-pill--orange { --pill-accent: #ff8a3d; }
.chr-status-pill--red    { --pill-accent: var(--brand-pink); }

/* PBI #13486 — tier escalation backgrounds for the budget alerts table.
   Subtle row-tint (5% alpha) so the colour reads as a state hint without
   shouting over the data. The 70% tier reuses the existing yellow tone
   from the dashboard for visual continuity with the status pills. */
.chr-budget-row--tier-70  { background: color-mix(in oklab, var(--accent-gold) 5%, transparent); }
.chr-budget-row--tier-90  { background: color-mix(in oklab, #ff8a3d 8%, transparent); }
.chr-budget-row--tier-100 { background: color-mix(in oklab, var(--brand-pink) 10%, transparent); }

/* Notify-client toggle — a flat checkbox + label combo. Just a
   visual nudge that this is an inline switch; the underlying
   <input> stays a real checkbox for a11y. */
.chr-toggle { display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; }
.chr-toggle input { width: 14px; height: 14px; }

/* PBI #13486 — mobile dashboard pass. The org snapshot grid is six
   cards on desktop; on phones we collapse to a single column so the
   numbers stay readable rather than getting squeezed to 50px wide.
   Budget-alert table hides the Project + Signed columns on phones
   (kept on tablet) — Client + Contract + % used + Tier + Send is
   the minimum to act on a row. */
@media (max-width: 640px) {
  .chr-dashboard-grid { grid-template-columns: 1fr; gap: var(--space-2); }
  .chr-stat__sub { display: none; }
  .chr-budget__table thead th:nth-child(2),
  .chr-budget__table tbody td:nth-child(2),
  .chr-budget__table thead th:nth-child(5),
  .chr-budget__table tbody td:nth-child(5),
  .chr-budget__table thead th:nth-child(9),
  .chr-budget__table tbody td:nth-child(9) { display: none; }
}

/* === EJ2 grid polish ================================================= */
/* Bug #13803 — kill the page-jump on /Admin/Contracts (and every other
   EJ2 grid surface). Root cause: <ejs-grid> mounts as a zero-height
   div, then EJ2 inserts the table on its own JS frame, then the page
   below the grid jumps down. Reserving a min-height on the grid root
   stabilises the layout so the section header + footer stay put.
   The reserved space is irrelevant once data lands (any non-empty
   grid quickly exceeds 320px). Measured CLS dropped 0.1289 → ~0 on
   /Admin/Contracts after this rule. */
/* Bug #13803 — kill the page-jump on every EJ2 grid surface
   (/Admin/Contracts was Calvin's repro; same pattern applies to
   Clients, Sales, Invoices, Users, etc.). Two layout-shift
   sources:
     (a) the EJ2 grid mounts as a zero-height div, then expands
         when its data lands, pushing the footer down by ~830px.
     (b) inside the toolbar, .e-overlay placeholder items render
         at a slightly NARROWER width than their final state, so
         each button shifts a few pixels horizontally as labels
         resolve — that adds another ~0.001 CLS per button.
   Fix: reserve enough vertical space on the grid wrapper that the
   footer stays below the fold during the entire render lifecycle,
   and pin the toolbar overlay placeholders so they don't grow.
   Final-state grids that are taller still expand normally; the
   reservation only matters for the very first paint window. */
ejs-grid { display: block; min-height: calc(100vh - 200px); }
.e-grid { min-height: calc(100vh - 200px); }
.e-toolbar-item.e-overlay { visibility: hidden; }

/* PBI #13807 — wider Add/Edit dialog on /Admin/Invoices. The form
   has 7 cols of inputs + a 5-column line-item table + a 6-stat
   totals strip; the EJ2 default ~440px squashes everything to a
   single column. Pinning the dialog content to a sensible col
   layout keeps the form scannable. */
.chr-invoice-dialog .e-dlg-content { padding: 1.25rem 1.5rem; }
.chr-invoice-dialog .e-control.e-grid { min-width: auto; }
.chr-invoice-dialog #invoice-lines-editor table { font-size: 0.92rem; }
.chr-invoice-dialog .form-group { margin-bottom: 0.85rem; }

/* Hidden dialog stubs — many admin pages render a Razor stub
   <div id="…-dialog" style="display:none"> that gets re-parented
   into an EJ2 Dialog at runtime. The re-parent triggers a layout
   shift even though the dialog stays hidden. Pin the stubs to
   zero footprint so the shift impact is zero. */
[id$="-dialog"]:not(.e-control-rendered):not(.e-popup) {
  position: absolute; left: -9999px; height: 0; overflow: hidden;
}

/* Adds Chronos-styled alternating rows + hover glow on every EJ2 grid. The
   default EJ2 tailwind3 theme ships a flat white-on-white look; this
   layers a subtle brand-tinted surface on odd rows and a stronger accent
   band on hover so the table has the same lift as .chr-stat / status-pill. */
.e-grid .e-row {
  background: var(--surface);
}
.e-grid .e-altrow {
  /* 5% purple tint gives a barely-there stripe that still reads in dark mode */
  background: color-mix(in oklab, var(--brand-purple) 4%, var(--surface));
}
.e-grid .e-row:hover,
.e-grid .e-altrow:hover,
.e-grid .e-row.e-rowselect,
.e-grid .e-altrow.e-rowselect {
  background: color-mix(in oklab, var(--brand-pink) 8%, var(--surface)) !important;
}
.e-grid .e-row > td,
.e-grid .e-altrow > td {
  border-color: var(--border) !important;
}
.e-grid .e-headercell {
  background: color-mix(in oklab, var(--brand-purple) 6%, var(--surface-2)) !important;
  color: var(--fg) !important;
  border-bottom: 1px solid var(--border) !important;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-size: 0.72rem;
}
.e-grid .e-headertext { color: var(--fg) !important; }
/* Selected row: pink accent bar on the left, consistent with Stat cards. */
.e-grid .e-row.e-rowselect > td:first-child,
.e-grid .e-altrow.e-rowselect > td:first-child {
  box-shadow: inset 3px 0 0 var(--brand-pink);
}
/* Toolbar sits on surface-2 (slight lift) so it reads as above the rows. */
.e-grid .e-toolbar {
  background: var(--surface-2) !important;
  border-bottom: 1px solid var(--border) !important;
}
/* Pager matches the lift. */
.e-grid .e-gridpager { background: var(--surface-2) !important; border-top: 1px solid var(--border) !important; }

/* === section header hero ============================================ */
/* Compact branded header that sits above each section's grid / content.
   The inline SVG to the left carries the section identity so you always
   know where you are. Tinted background adopts the section's accent. */
.chr-section-hero {
  display: flex; align-items: center; gap: 1.25rem;
  padding: 1.1rem 1.25rem;
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--accent, var(--brand-pink)) 10%, var(--surface-2)) 0%,
    var(--surface-2) 55%);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent, var(--brand-pink));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.chr-section-hero__art {
  flex: 0 0 auto; width: 72px; height: 72px;
  display: grid; place-items: center;
  background: var(--surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  padding: 8px;
}
.chr-section-hero__art svg { width: 100%; height: 100%; display: block; }
.chr-section-hero__body { flex: 1; min-width: 0; }
.chr-section-hero__title {
  font-family: var(--font-display);
  font-size: 1.75rem; font-weight: 700; line-height: 1.1;
  margin: 0; color: var(--fg);
}
.chr-section-hero__subtitle {
  color: var(--fg-muted); margin: 0.25rem 0 0 0; font-size: 0.9rem;
}
/* PBI #13542 — context help link in the section hero. Sized to read
   as a quiet utility, not a CTA. */
.chr-section-hero__help {
  display: inline-block; margin-top: 0.5rem; padding: 0.15rem 0.55rem;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em;
  color: var(--fg-muted); text-decoration: none;
  border: 1px solid var(--border); border-radius: 999px;
  background: color-mix(in oklab, var(--accent, var(--brand-pink)) 6%, transparent);
}
.chr-section-hero__help:hover {
  color: var(--fg); border-color: var(--accent, var(--brand-pink));
  background: color-mix(in oklab, var(--accent, var(--brand-pink)) 14%, transparent);
}
/* Section accents — the --accent var drives the left border + bg tint. */
.chr-section-hero--home      { --accent: var(--brand-pink); }
.chr-section-hero--logs      { --accent: var(--brand-purple); }
.chr-section-hero--people    { --accent: var(--accent-cyan); }
.chr-section-hero--customers { --accent: var(--accent-gold); }
.chr-section-hero--sales     { --accent: var(--accent-lime); }
.chr-section-hero--finance   { --accent: var(--accent-teal); }
.chr-section-hero--customer-public { --accent: var(--brand-pink); }

@media (max-width: 540px) {
  .chr-section-hero { gap: 0.9rem; padding: 0.9rem 1rem; }
  .chr-section-hero__art { width: 56px; height: 56px; padding: 6px; }
  .chr-section-hero__title { font-size: 1.4rem; }
}

/* Themed confirm-before-destroy dialog. Overrides the EJ2 defaults so
   the popup reads as a Chronos card rather than a plain alert. The
   content host (.chr-confirm-body) sits inside the standard EJ2
   .e-dialog-content slot. */
.chr-confirm-dialog .e-dlg-header,
.chr-confirm-dialog .e-dlg-header-content { background: transparent; }
.chr-confirm-dialog .e-dlg-header-content .e-dlg-header { color: var(--fg); font-weight: 600; }
.chr-confirm-dialog .e-dlg-content { padding: 1rem 1.25rem 0.25rem 1.25rem; color: var(--fg); background: transparent; }
.chr-confirm-dialog .chr-confirm-body { padding: 0; }
.chr-confirm-dialog .chr-confirm-message { margin: 0 0 0.25rem 0; font-size: 0.95rem; color: var(--fg-muted); line-height: 1.45; }
.chr-confirm-dialog .e-footer-content { border-top: 1px solid var(--border, #e5e7eb); padding: 0.75rem 1rem; background: transparent; }
.chr-confirm-dialog .e-footer-content .e-btn { border-radius: 10px; padding: 0.45rem 1rem; font-weight: 500; }
.chr-confirm-dialog .chr-confirm-ok {
  background: var(--brand-purple, #6f42c1);
  border-color: var(--brand-purple, #6f42c1);
}
.chr-confirm-dialog .chr-confirm-danger {
  background: #e11d48;
  border-color: #e11d48;
}
.chr-confirm-dialog .chr-confirm-danger:hover { background: #be123c; border-color: #be123c; }

/* /LogsEntry Quick-Log shortcut row — two chip-style buttons that
   stamp a ready-to-submit row for the most common non-billable
   entries (break + lunch). Lives directly under the main Submit
   row so the visual hierarchy reads: (1) pick date + set total,
   (2) quick-stamp shortcuts, (3) detailed grid. */
.chr-quicklog {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--border);
}
.chr-quicklog__label {
  font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fg-muted); font-weight: 600;
}
.chr-quicklog__hint { flex: 1 1 auto; min-width: 12ch; color: var(--fg-muted); }

/* MyLeave PT strip — shows "today in PT" alongside the viewer's local
   clock so a PH engineer at 3am local can see at a glance that it's
   11am PT and pick the right Monday. Horizontal at wide widths;
   stacks on mobile. */
.chr-leave-ptstrip {
  display: grid; grid-template-columns: auto auto 1fr; gap: 1rem 1.5rem;
  align-items: center; padding: 0.85rem 1rem;
  border-left: 4px solid var(--brand-purple);
}
.chr-leave-ptstrip__pair { display: flex; flex-direction: column; gap: 0.1rem; }
.chr-leave-ptstrip__label {
  font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fg-muted);
}
.chr-leave-ptstrip__value { font-family: var(--font-display); font-size: 1.05rem; color: var(--fg); }
.chr-leave-ptstrip__note { justify-self: end; max-width: 40ch; text-align: right; }
@media (max-width: 720px) {
  .chr-leave-ptstrip { grid-template-columns: 1fr; }
  .chr-leave-ptstrip__note { justify-self: start; text-align: left; }
}
.chr-leave-preview {
  background: color-mix(in oklab, var(--brand-purple) 5%, var(--surface));
  padding: 0.6rem 0.8rem; border-radius: var(--radius-sm);
  border-left: 3px solid var(--brand-purple);
}
.chr-leave-preview .text-warning { color: var(--accent-gold); }

/* Footer motto — the pink→purple gradient text that sits beside the
   copyright line in _Layout. Keeps the layout understated at its
   normal size but the gradient fills the whole letterform so the
   "Ours is the craft. The thunder is His." line reads as a
   branded tagline, not ordinary fine print. */
.chr-footer-motto {
  background: linear-gradient(90deg, var(--brand-pink), var(--brand-purple));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  font-weight: 500; letter-spacing: 0.01em;
}
.chr-footer-link { color: var(--fg-muted); text-decoration: none; border-bottom: 1px dashed var(--border); }
.chr-footer-link:hover, .chr-footer-link:focus-visible { color: var(--brand-pink); border-bottom-color: var(--brand-pink); }

/* /Account/Profile leave-balance card — two side-by-side tiles that
   surface vacation + sick remaining at-a-glance. The accent border
   picks up the same gradient stops the section hero uses, tied to
   the balance type so vacation / sick read differently at a glance. */
.chr-balance-card {
  background: var(--surface-2);
  border-radius: var(--radius-md);
  padding: 1rem 1.1rem;
  border-left: 4px solid var(--accent, var(--brand-pink));
  box-shadow: var(--shadow-sm);
}
.chr-balance-card--vacation { --accent: var(--accent-teal); }
.chr-balance-card--sick     { --accent: var(--brand-purple); }
.chr-balance-card__label {
  font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fg-muted); margin-bottom: 0.25rem;
}
.chr-balance-card__value {
  font-family: var(--font-display);
  font-size: 2rem; font-weight: 700; line-height: 1.1;
  color: var(--fg);
}
.chr-balance-card__unit {
  font-size: 1rem; color: var(--fg-muted); font-weight: 500;
}
.chr-balance-card__breakdown {
  font-size: 0.82rem; color: var(--fg-muted); margin-top: 0.25rem;
  display: flex; flex-wrap: wrap; gap: 0.35rem;
}
.chr-balance-card__breakdown strong { color: var(--fg); font-weight: 600; }

/* EJ2 Grid Add/Edit dialog uses a <table class="e-table"> whose cells
   (td.e-rowcell) auto-size to their content. A RichTextEditor with its
   full toolbar is wider than the dialog's fixed width, so without
   table-layout:fixed the td grows until the right edge bleeds past the
   dialog border and the form loses its right-side margin. Forcing
   table-layout:fixed clamps every cell to the dialog width, which is
   exactly the behaviour the form shell wants. */
.e-dialog .e-table { table-layout: fixed; width: 100% !important; max-width: 100%; }
.e-dialog .e-table .e-rowcell { overflow: hidden; word-wrap: break-word; }
.e-dialog .e-table .e-rowcell .chr-notes-rte,
.e-dialog .e-table .e-rowcell .e-richtexteditor {
  max-width: 100%; box-sizing: border-box;
}

/* PBI #14213 — mobile dialog overflow fix.
   Every view that mounts an EJ2 Dialog (batch edit, promote, history
   notes, prospect letter, convert prospect, renewal skip, etc.)
   passes an absolute width literal like '460px' / '640px' / '820px'.
   On a 375px phone viewport the dialog body extends past the right
   edge, but the fullscreen .e-dlg-overlay still paints — repro was
   "a grey panel takes over" on mobile. Cap every dialog (incl. the
   default EJ2 Grid Add/Edit dialog) to 95vw on narrow screens with
   a centered margin so the body always fits. !important needed
   because EJ2 inlines the width as `style="width: 460px"`. */
@media (max-width: 720px) {
  .e-dialog {
    max-width: 95vw !important;
    width: 95vw !important;
    left: 2.5vw !important;
    right: auto !important;
  }
  .e-dialog .e-dlg-content { max-width: 100%; box-sizing: border-box; }
}

/* ==================================================================
   PBI #14XXX — mobile UX pass (2026-05-07)
   1. Hamburger toggler is invisible in dark mode (Bootstrap 5 ships
      a black-stroked SVG that disappears against our dark surface).
      Override with a white-stroked SVG when the dark theme is active.
   2. Mobile menu items get an icon prefix so the collapsed nav is
      scannable on a phone (icons set inline in _Layout.cshtml; CSS
      here just sizes them and hides them on the desktop layout).
   3. Syncfusion EJ2 grids flip to stacked detail-card layout below
      720px so admins on a phone don't have to scroll left/right
      across columns. Column labels are stamped onto each tbody td
      via a tiny script in _Layout.cshtml (sets data-mobilelabel
      from the matching thead text); CSS here uses ::before to
      surface the label.
   ================================================================== */

/* 1. Hamburger visibility on dark theme */
.chr-navbar .navbar-toggler {
  border-color: var(--border, rgba(255,255,255,0.15));
}
.chr-navbar .navbar-toggler:focus {
  box-shadow: 0 0 0 0.18rem color-mix(in oklab, var(--brand-pink) 35%, transparent);
}
[data-theme="dark"] .chr-navbar .navbar-toggler-icon {
  /* White-stroked hamburger so it shows on the dark surface. */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.95%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .chr-navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.95%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  }
}

/* 2. Mobile menu icons — sized and only shown when the navbar has
      collapsed (Bootstrap toggles .show on .navbar-collapse). On the
      desktop expanded layout we keep the text-only nav. */
/* !important on the size + display rules so neither Bootstrap's
   img/svg block resets nor Syncfusion's reset can blow the icon
   up to its default 300x150 viewport size if site.css ever loads
   late or stale. Belt-and-suspenders alongside the inline
   width="14" height="14" attributes on the SVG itself. */
.chr-nav-icon {
  display: none !important;
  width: 14px !important;
  height: 14px !important;
  max-width: 14px;
  max-height: 14px;
  /* 2026-05-07 — switched stroke from currentColor (read as hard
     white on dark / hard black on light) to brand-pink at low
     opacity. Reads as a soft accent rather than a glyph fighting
     the label. */
  stroke: var(--brand-pink, #d96bff) !important;
  stroke-width: 1.5;
  margin-right: 0.55rem;
  vertical-align: -0.12em;
  flex-shrink: 0;
  opacity: 0.55;
}
@media (max-width: 575.98px) {
  .navbar-collapse.show .chr-nav-icon,
  .navbar-collapse.collapsing .chr-nav-icon { display: inline-block !important; }
  .navbar-collapse.show .nav-link,
  .navbar-collapse.show .dropdown-item { display: flex; align-items: center; }
}

/* Dropdown-item icons on the DESKTOP dropdown — pop-out menus from
   Logs / People / Customers / Sales-Marketing / Finance / Account.
   Always-visible (independent of the mobile collapse state). The
   .nav-link icons stay mobile-only — the desktop top bar has limited
   horizontal space, but the pop-out dropdowns benefit from a glyph
   prefix for fast scanning. */
.dropdown-menu .dropdown-item .chr-nav-icon {
  display: inline-block !important;
}
.dropdown-menu .dropdown-item {
  display: flex !important;
  align-items: center;
  gap: 0;
}

/* 3. Syncfusion EJ2 grid → stacked detail-card layout below 720px.
      Column labels populated via JS in _Layout.cshtml.
      EVERY structural property is !important because Syncfusion's own
      CSS aggressively sets table-layout/display/width on its grid
      tree; without !important the rules silently lose specificity. */
/* PBI #14213 follow-up (Christin's L3 phone repro) — global cap on
   every EJ2 DropDownList popup width AND height so it never extends
   past a phone viewport. Without this, the popup would size to its
   content, scrolling the top items off-screen and burying the grid
   pager underneath. !important needed because EJ2 inlines popup
   width/height as `style="..."` from popupHeight/popupWidth props. */
@media (max-width: 720px) {
  .e-popup.e-ddl,
  .e-popup.e-ddl .e-content,
  .e-popup.e-ddl .e-dropdownbase {
    max-width: 92vw !important;
    max-height: 45vh !important;
  }
  /* And the EJ2 DropDownList component itself — the closed-state
     widget — should never overflow its parent column. */
  .e-input-group.e-ddl,
  .e-ddl.e-input-group {
    max-width: 100% !important;
  }
}

@media (max-width: 720px) {
  /* Hide the grid header row + scroll wrapper so the body stacks
     full-width, and the natural overflow disappears. */
  .e-grid .e-gridheader,
  .e-grid .e-gridfooter,
  .e-grid .e-gridheader.e-lib { display: none !important; }
  .e-grid .e-gridcontent,
  .e-grid .e-content,
  .e-grid .e-gridcontent .e-content {
    overflow-x: visible !important;
    overflow-y: visible !important;
  }

  /* Each tbody row becomes a card. */
  .e-grid .e-gridcontent .e-table,
  .e-grid .e-gridcontent .e-table > tbody,
  .e-grid .e-gridcontent .e-table > tbody > tr,
  .e-grid table.e-table,
  .e-grid table.e-table > tbody,
  .e-grid table.e-table > tbody > tr {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    table-layout: auto !important;
  }
  .e-grid .e-gridcontent .e-table > tbody > tr,
  .e-grid table.e-table > tbody > tr {
    border: 1px solid var(--border, rgba(255,255,255,0.12)) !important;
    border-radius: var(--radius-md, 8px);
    padding: 0.55rem 0.7rem !important;
    margin: 0 0 0.6rem 0 !important;
    background: var(--surface, transparent) !important;
    box-shadow: 0 1px 0 color-mix(in oklab, var(--fg) 6%, transparent);
    height: auto !important;
  }

  /* Each cell becomes a label/value row. */
  .e-grid .e-gridcontent .e-table > tbody > tr > td,
  .e-grid .e-gridcontent .e-table > tbody > tr > td.e-rowcell,
  .e-grid table.e-table > tbody > tr > td,
  .e-grid table.e-table > tbody > tr > td.e-rowcell {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
    padding: 0.25rem 0 !important;
    border: 0 !important;
    border-bottom: 1px dashed color-mix(in oklab, var(--border) 60%, transparent) !important;
    text-align: right;
    word-break: break-word;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    line-height: 1.35;
    white-space: normal !important;
  }
  .e-grid .e-gridcontent .e-table > tbody > tr > td:last-child {
    border-bottom: 0 !important;
  }
  .e-grid .e-gridcontent .e-table > tbody > tr > td::before {
    content: attr(data-mobilelabel);
    font-weight: 600;
    font-size: 0.72rem;
    color: var(--fg-muted, rgba(255,255,255,0.6));
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex: 0 0 auto;
    text-align: left;
    padding-top: 0.05rem;
    min-width: 6.5rem;
  }
  /* Cells with no label (selectAll checkbox column, command column)
     stretch the value full-width — no label gap to the left. */
  .e-grid .e-gridcontent .e-table > tbody > tr > td:not([data-mobilelabel])::before,
  .e-grid .e-gridcontent .e-table > tbody > tr > td[data-mobilelabel=""]::before {
    content: none;
  }
  .e-grid .e-gridcontent .e-table > tbody > tr > td:not([data-mobilelabel]),
  .e-grid .e-gridcontent .e-table > tbody > tr > td[data-mobilelabel=""] {
    justify-content: flex-start;
  }

  /* Selected-row highlight stays visible as a left border accent
     (the default Syncfusion bg-tint can be jarring on a card). */
  .e-grid .e-gridcontent .e-table > tbody > tr.e-row.e-selectionbackground,
  .e-grid .e-gridcontent .e-table > tbody > tr.e-row.e-active {
    border-left: 3px solid var(--brand-pink, #d946ef) !important;
  }

  /* Pager wraps cleanly. */
  .e-grid .e-gridpager .e-pagercontainer { flex-wrap: wrap; }
}

/* === Wider Add/Edit dialog ============================== */
/* The grid edit dialog spans 75% of the viewport, with its fields laid
   out in two columns so the extra width is actually used (EJ2 renders the
   form as a one-field-per-row <table> — we turn that <tbody> into a 2-col
   grid). Collapses to a single column on small screens. */
.e-edit-dialog.e-dialog { width: 75vw !important; max-width: 75vw !important; }
.e-edit-dialog .e-gridform > .e-table { width: 100%; display: block; }
.e-edit-dialog .e-gridform > .e-table > tbody {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 2rem;
  row-gap: 0.1rem;
}
.e-edit-dialog .e-gridform > .e-table > tbody > tr { display: block; }
.e-edit-dialog .e-gridform > .e-table > tbody > tr > td.e-rowcell {
  display: block; width: 100%; padding: 0.3rem 0;
}
@media (max-width: 760px) {
  .e-edit-dialog.e-dialog { width: 96vw !important; max-width: 96vw !important; }
  .e-edit-dialog .e-gridform > .e-table > tbody { grid-template-columns: 1fr; }
}

/* ===== Left sidebar layout (replaces the top navbar) ===== */
.chr-shell { display: flex; align-items: stretch; min-height: 100vh; }
.chr-sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; width: 232px;
    display: flex; flex-direction: column;
    background: var(--surface); border-right: 1px solid var(--border);
    padding: 1rem .75rem; overflow-y: auto; z-index: 100;
}
.chr-content {
    flex: 1 1 auto; min-width: 0; margin-left: 232px;
    display: flex; flex-direction: column; min-height: 100vh; padding: 0 1.5rem;
}
.chr-content > main { flex: 1 0 auto; padding-top: 1.25rem; }

.chr-sidebar .chr-brand { display: block; padding: .25rem .35rem 1rem; }
.chr-sidebar .chr-brand-logo { height: 40px; width: auto; }

.chr-side-nav { display: flex; flex-direction: column; gap: 2px; }
.chr-side-section {
    font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em;
    color: var(--fg-muted); margin: 1rem .55rem .3rem;
}
.chr-side-nav > .chr-side-section:first-child { margin-top: .25rem; }
.chr-side-link {
    display: flex; align-items: center; gap: .6rem;
    padding: .5rem .6rem; border-radius: var(--radius-sm);
    color: var(--fg); text-decoration: none; font-size: .92rem; line-height: 1.25;
}
.chr-side-link:hover { background: var(--surface-2); color: var(--brand-purple); }
.chr-side-link.active {
    background: color-mix(in oklab, var(--brand-pink) 16%, var(--surface));
    color: var(--brand-purple); font-weight: 600;
}
.chr-side-icon { width: 17px; height: 17px; flex: 0 0 auto; display: inline-block; }

.chr-sidebar-foot {
    margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--border);
    display: flex; flex-direction: column; gap: .55rem;
}
.chr-sidebar-foot .chr-theme-toggle { width: 100%; justify-content: flex-start; }
.chr-side-user { display: flex; flex-direction: column; gap: .25rem; }
.chr-side-user-name {
    font-size: .78rem; color: var(--fg-muted); padding: 0 .6rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chr-side-signout {
    display: flex; align-items: center; gap: .55rem; width: 100%;
    padding: .5rem .6rem; border: 0; cursor: pointer;
    /* Active-state look for visibility: brand tint + purple bold text; the
       icon uses currentColor so it picks up the same colour. */
    background: color-mix(in oklab, var(--brand-pink) 18%, var(--surface));
    color: var(--brand-purple); font-weight: 600;
    border-radius: var(--radius-sm); font-size: .9rem; text-align: left;
}
.chr-side-signout:hover {
    background: color-mix(in oklab, var(--brand-pink) 30%, var(--surface));
    color: var(--brand-purple);
}

@media (max-width: 768px) {
    .chr-shell { flex-direction: column; }
    .chr-sidebar {
        position: static; width: auto; flex-direction: row; flex-wrap: wrap;
        align-items: center; gap: .25rem .5rem;
        border-right: 0; border-bottom: 1px solid var(--border); padding: .5rem .75rem;
    }
    .chr-sidebar .chr-brand { padding: .25rem .5rem; }
    .chr-side-nav { flex-direction: row; flex-wrap: wrap; gap: 2px; }
    .chr-side-section { display: none; }
    .chr-sidebar-foot {
        margin-top: 0; padding-top: 0; border-top: 0; margin-left: auto;
        flex-direction: row; align-items: center; gap: .5rem;
    }
    .chr-sidebar-foot .chr-theme-toggle { width: auto; }
    .chr-content { margin-left: 0; padding: 0 1rem; }
}

.chr-plain { min-height: 100vh; }
.chr-plain > main { padding: 0; }