/* ════════════════════════════════════════════════════════════════════
   AIN REAL ESTATE — Design System
   Flat near-white canvas, periwinkle-tinted neutrals.
   Periwinkle primary · Coral secondary · Teal accent · Soft yellow.
   Inter (LTR) + IBM Plex Sans Arabic (RTL).
   ════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Base canvas ── */
  --bg:                    #fafbff;

  /* Surfaces (flat, periwinkle-tinted neutrals) */
  --surface:               #ffffff;
  --surface-strong:        #ffffff;          /* alias of --surface-solid; kept for inline-style refs */
  --surface-recessed:      #f6f7fc;
  --surface-solid:         #ffffff;
  --surface-2:             #f5f6fc;
  --surface-3:             #e8eaf2;

  /* Borders / outlines */
  --border:                #e5e7ef;
  --border-strong:         #d8dbe8;
  --outline-variant:       #e2e4ee;

  /* Text */
  --text:                  #181b24;
  --text-muted:            #464653;
  --text-dim:              #767685;

  /* Brand palette — periwinkle primary, coral secondary, teal tertiary */
  --brand:                 #474dc5;          /* primary */
  --brand-2:               #6067df;          /* lighter */
  --brand-3:               #bfc2ff;          /* dim — kept on probation for future shades */
  --brand-soft:            rgba(71, 77, 197, 0.10);

  --accent:                #006762;          /* tertiary teal */
  --accent-2:              #00837c;
  --accent-3:              #40dcd1;          /* mint — kept on probation for future shades */
  --accent-soft:           rgba(0, 103, 98, 0.10);

  --secondary:             #884f41;          /* coral / brown */
  --secondary-soft:        rgba(136, 79, 65, 0.10);

  --info:                  #5a7cff;
  --warning:               #c47200;
  --warning-2:             #ffb84d;          /* kept on probation for future warm-tone use */
  --warning-soft:          rgba(196, 114, 0, 0.12);
  --danger:                #ba1a1a;
  --danger-2:              #ff6b8a;          /* kept on probation for future error-tone use */
  --danger-soft:           rgba(186, 26, 26, 0.10);

  /* Gradients — only --grad-brand is in active use; kept for solid brand button. */
  --grad-brand:            linear-gradient(135deg, #474dc5 0%, #6067df 100%);

  /* Radii */
  --radius-sm:             8px;
  --radius:                12px;
  --radius-lg:             20px;
  --radius-xl:             28px;
  --radius-pill:           9999px;

  /* Typography */
  --font-ar:               'IBM Plex Sans Arabic', system-ui, sans-serif;
  --font-en:               'Inter', system-ui, sans-serif;
  --font-sans:             var(--font-ar);
  --font-mono:             'JetBrains Mono', monospace;
  --font-display:          var(--font-en);

  /* Shadows — neutral, near-black with low opacity */
  --shadow-xs:             0 1px 2px rgba(20, 24, 40, 0.04);
  --shadow-sm:             0 2px 4px rgba(20, 24, 40, 0.05), 0 1px 2px rgba(20, 24, 40, 0.04);
  --shadow-md:             0 8px 20px rgba(20, 24, 40, 0.08), 0 2px 4px rgba(20, 24, 40, 0.04);
  --shadow-lg:             0 16px 40px rgba(20, 24, 40, 0.10), 0 4px 8px rgba(20, 24, 40, 0.04);

  /* Subtle brand-tinted fills — table headers, row stripes, toolbar
     strips, soft hover surfaces. Centralized so dark mode flips them
     in one place. Use these instead of hardcoded rgba(241, 243, 255). */
  --tint-soft:             var(--tint-soft);
  --tint-soft-strong:      var(--tint-soft-strong);
  --tint-clear:            var(--tint-clear);
  --tint-clear-strong:     var(--tint-clear-strong);

  --ease:                  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce:           cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ════════════════════════════════════════════════════════════════════
   DARK THEME
   Soft navy-tinted dark mode. We override the same tokens the rest of
   the system already consumes — no per-component dark rules needed.
   Brand/accent hues are nudged brighter for AA contrast on dark
   surfaces; soft fills (rgba "*-soft" tokens) get higher alpha so
   they remain visible against the darker base.
   ════════════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  /* Base canvas — deep navy, NOT pure black (less eye fatigue). */
  --bg:                    #0e1019;

  --surface:               #181b25;
  --surface-strong:        #1c1f2b;
  --surface-recessed:      #14161e;
  --surface-solid:         #1c1f2b;
  --surface-2:             #20232f;
  --surface-3:             #2a2d3a;

  --border:                #2a2d3a;
  --border-strong:         #353948;
  --outline-variant:       #2c2f3c;

  --text:                  #e8eaf2;
  --text-muted:            #b3b6c4;
  --text-dim:              #8388a0;

  /* Brand — periwinkle brightened so it reads AA on dark surfaces. */
  --brand:                 #7c83fd;
  --brand-2:               #969cff;
  --brand-3:               #5559c8;
  --brand-soft:            rgba(124, 131, 253, 0.16);

  --accent:                #4ed6ce;
  --accent-2:              #6ee0d8;
  --accent-3:              #00837c;
  --accent-soft:           rgba(78, 214, 206, 0.14);

  --secondary:             #d49887;
  --secondary-soft:        rgba(212, 152, 135, 0.14);

  --info:                  #8ba4ff;
  --warning:               #ffb84d;
  --warning-2:             #ffc97a;
  --warning-soft:          rgba(255, 184, 77, 0.16);
  --danger:                #ff6b8a;
  --danger-2:              #ff8b9e;
  --danger-soft:           rgba(255, 107, 138, 0.16);

  --grad-brand:            linear-gradient(135deg, #7c83fd 0%, #969cff 100%);

  /* Shadows — pure-black with higher alpha. */
  --shadow-xs:             0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-sm:             0 2px 4px rgba(0, 0, 0, 0.40), 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-md:             0 8px 20px rgba(0, 0, 0, 0.50), 0 2px 4px rgba(0, 0, 0, 0.30);
  --shadow-lg:             0 16px 40px rgba(0, 0, 0, 0.60), 0 4px 8px rgba(0, 0, 0, 0.40);

  /* Subtle tints flipped from light periwinkle → soft dark periwinkle. */
  --tint-soft:             rgba(124, 131, 253, 0.06);
  --tint-soft-strong:      rgba(124, 131, 253, 0.10);
  --tint-clear:            rgba(124, 131, 253, 0.04);
  --tint-clear-strong:     rgba(124, 131, 253, 0.08);

  color-scheme: dark;
}

[data-theme="light"] { color-scheme: light; }

/* Smooth theme transitions — applied ONLY during the moment of toggle.
   common.js adds .theme-transitioning to <html> for ~300ms after the
   user clicks the theme button, then removes it. Outside that window
   no transition is active so hover / focus / open-modal interactions
   keep their normal snappy feel. */
html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
  transition:
    background-color 220ms ease,
    background        220ms ease,
    color             220ms ease,
    border-color      220ms ease,
    box-shadow        220ms ease,
    fill              220ms ease,
    stroke            220ms ease !important;
}

body.lang-en, html.lang-en body { --font-sans: var(--font-en); }

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideDown { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes countUp { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } }
@keyframes hyperPop {
  from { opacity: 0; transform: translateY(14px) scale(0.97); filter: blur(4px); }
  60%  { filter: blur(0); }
  to   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes shimmerSweep {
  0%   { background-position: -150% 0; }
  100% { background-position: 250% 0; }
}
@keyframes spinOnce { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(124, 131, 253, 0.30); }
  60%      { box-shadow: 0 0 0 14px rgba(124, 131, 253, 0); }
}

/* .hyper-pop kept — used by forgot_password.html and reset_password.html. */
.hyper-pop { animation: hyperPop 0.55s var(--ease-bounce) both; }

.stagger > * { animation: slideUp 0.5s var(--ease) both; }
.stagger > *:nth-child(1) { animation-delay: 0.04s; }
.stagger > *:nth-child(2) { animation-delay: 0.08s; }
.stagger > *:nth-child(3) { animation-delay: 0.12s; }
.stagger > *:nth-child(4) { animation-delay: 0.16s; }
.stagger > *:nth-child(5) { animation-delay: 0.20s; }
.stagger > *:nth-child(6) { animation-delay: 0.24s; }
.stagger > *:nth-child(7) { animation-delay: 0.28s; }
.stagger > *:nth-child(8) { animation-delay: 0.32s; }

.app-shell { display: flex; flex-direction: column; min-height: 100vh; position: relative; z-index: 1; }
.main {
  flex: 1;
  padding: 28px 32px 80px;
  max-width: 1480px;
  margin: 0 auto;
  width: 100%;
  position: relative;
  z-index: 2;
  transition: margin 0.25s var(--ease);
}
.main.narrow { max-width: 760px; }

/* Push the main column past the fixed sidebar on desktop. The drawer overlays
   the canvas on mobile, so we don't reserve space there. */
.app-shell.has-sidebar .main {
  margin: 0;
  max-width: none;
  padding: 28px 36px 80px;
}
.app-shell.has-sidebar .main > * { max-width: 1380px; margin-inline-start: auto; margin-inline-end: auto; }
@media (min-width: 1025px) {
  html[dir="ltr"] .app-shell.has-sidebar .main { padding-left: calc(260px + 36px); }
  html[dir="rtl"] .app-shell.has-sidebar .main { padding-right: calc(260px + 36px); }
}

/* ──────────────────────────────────────────────────────────────────
   SURFACE PRIMITIVES — flat cards on a solid canvas
   ────────────────────────────────────────────────────────────────── */
.card,
.chart-card,
.form-section,
.table-wrap,
.pf-filter-bar,
.pf-card,
.kpi-cell,
.stat {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
}

.card,
.chart-card,
.form-section,
.table-wrap {
  border-radius: var(--radius-lg);
  padding: 22px;
  margin-bottom: 20px;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
  animation: fadeIn 0.5s var(--ease) both;
}

.card:hover,
.chart-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.card-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ──────────────────────────────────────────────────────────────────
   SIDEBAR
   ────────────────────────────────────────────────────────────────── */
.sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 260px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  padding: 20px 16px 16px;
  background: var(--surface-solid);
  border-inline-end: 1px solid var(--border);
  box-shadow: 1px 0 0 rgba(20, 24, 40, 0.04);
  gap: 4px;
  transition: transform 0.3s var(--ease);
  overflow-y: auto;
}

html[dir="ltr"] .sidebar { left: 0; }
html[dir="rtl"] .sidebar { right: 0; box-shadow: -1px 0 0 rgba(20, 24, 40, 0.04); }

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px 18px;
  border-bottom: 1px solid var(--outline-variant);
  margin-bottom: 12px;
  text-decoration: none;
  color: var(--text);
}
.sidebar-brand .topnav-brand-icon {
  width: 40px; height: 40px;
  font-size: 18px;
}
.sidebar-brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.sidebar-brand-name {
  font-weight: 800;
  font-size: 15px;
  color: var(--brand);
  letter-spacing: -0.01em;
  font-family: var(--font-display);
}
.sidebar-brand-tag {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
}

.sidebar-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 12px 14px 6px;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: var(--radius);
  color: var(--text-muted);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 600;
  transition: all 0.2s var(--ease);
  position: relative;
}
.sidebar-link:hover {
  color: var(--brand);
  background: rgba(124, 131, 253, 0.08);
  transform: translateX(2px);
}
html[dir="rtl"] .sidebar-link:hover { transform: translateX(-2px); }
.sidebar-link.active {
  color: #fff;
  background: var(--brand);
  box-shadow: var(--shadow-xs);
}
.sidebar-link.active .sidebar-link-icon { color: #fff; }

/* Sidebar count badge — used by the Manager Intervention link. JS hides
   the badge when the count is zero and toggles `.is-high` based on
   priority breakdown. Sits on the trailing edge so RTL flips for free. */
.sidebar-badge {
  margin-inline-start: auto;
  background: var(--warning);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 3px 8px;
  border-radius: 9999px;
  min-width: 22px;
  text-align: center;
}
.sidebar-badge.is-high { background: var(--danger); }
.sidebar-link.active .sidebar-badge {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

/* Logout button — sidebar-link reset + danger color */
.sidebar-link.is-logout {
  background: transparent;
  border: none;
  width: 100%;
  text-align: inherit;
  font-family: inherit;
  cursor: pointer;
  color: var(--danger);
}
.sidebar-link.is-logout:hover {
  background: var(--danger-soft);
  color: var(--danger);
}
.sidebar-link.is-logout .sidebar-link-icon { color: var(--danger); }
.sidebar-link-icon {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--brand);
  flex-shrink: 0;
}
.sidebar-link-icon .material-symbols-outlined { font-size: 22px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
.sidebar-link.active .sidebar-link-icon .material-symbols-outlined { font-variation-settings: 'FILL' 1, 'wght' 500; }

.sidebar-divider {
  height: 1px;
  background: var(--outline-variant);
  margin: 12px 4px;
}

.sidebar-spacer { flex: 1; }

/* Backdrop shown only when sidebar opens on mobile */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(20, 24, 40, 0.40);
  z-index: 55;
  animation: fadeIn 0.2s var(--ease);
}
.sidebar-backdrop.open { display: block; }

/* ──────────────────────────────────────────────────────────────────
   TOPNAV — slim glass header that sits above the main content
   ────────────────────────────────────────────────────────────────── */
.topnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 28px;
  background: var(--surface-solid);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 50;
  gap: 16px;
  min-height: 56px;
}
@media (min-width: 1025px) {
  html[dir="ltr"] .app-shell.has-sidebar .topnav { padding-left: calc(260px + 28px); }
  html[dir="rtl"] .app-shell.has-sidebar .topnav { padding-right: calc(260px + 28px); }
}

.topnav-brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 16px;
  text-decoration: none; color: var(--brand);
  flex-shrink: 0;
  letter-spacing: -0.02em;
}

/* On desktop with sidebar: brand and inline nav both live in the sidebar. */
@media (min-width: 1025px) {
  .app-shell.has-sidebar .topnav-brand,
  .app-shell.has-sidebar .topnav-links { display: none; }
}

.topnav-brand-icon {
  width: 36px; height: 36px;
  background: var(--grad-brand);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: #ffffff;
  box-shadow: 0 4px 14px rgba(71, 77, 197, 0.28), inset 0 1px 0 rgba(255,255,255,0.18);
  flex-shrink: 0;
}
/* Inline AIN logo mark sits inside the brand icon — sized to fill the
   container, color inherits from the parent so it renders white on the
   gradient background. */
.topnav-brand-icon svg,
.brand-mark svg {
  width: 70%; height: 70%;
  color: #ffffff;
  display: block;
}

.topnav-links { display: flex; gap: 4px; flex: 1; justify-content: center; }

.topnav-burger {
  display: none;
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface-recessed);
  color: var(--brand);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  padding: 0;
  flex-shrink: 0;
}
.topnav-burger span {
  display: block;
  width: 18px; height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.25s var(--ease), opacity 0.2s var(--ease);
}
.topnav-burger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.topnav-burger.open span:nth-child(2) { opacity: 0; }
.topnav-burger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.topnav-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.lang-toggle {
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface-recessed);
  color: var(--brand);
  font-size: 12px; font-weight: 700;
  font-family: var(--font-en);
  cursor: pointer;
  transition: all 0.2s var(--ease);
  display: flex; align-items: center; justify-content: center;
}

/* Theme toggle — sun in light mode, moon in dark mode. We swap which
   icon is visible via [data-theme] selectors so a single button serves
   both states without JS having to mutate the markup. */
.theme-toggle {
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface-recessed);
  color: var(--brand);
  cursor: pointer;
  transition: all 0.2s var(--ease);
  display: flex; align-items: center; justify-content: center;
  padding: 0;
}
.theme-toggle:hover {
  background: var(--brand);
  color: #fff;
  border-color: transparent;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(71, 77, 197, 0.28);
}
.theme-toggle .material-symbols-outlined {
  font-size: 20px;
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}
.theme-toggle .theme-toggle-icon-dark { display: none; }
[data-theme="dark"] .theme-toggle .theme-toggle-icon-light { display: none; }
[data-theme="dark"] .theme-toggle .theme-toggle-icon-dark { display: inline-block; }

.lang-toggle:hover {
  background: var(--brand);
  color: #fff;
  border-color: transparent;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(71, 77, 197, 0.28);
}

.topnav-user {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 10px 4px 4px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  background: var(--surface-recessed);
  cursor: pointer;
  position: relative;
  transition: all 0.2s var(--ease);
}

html[dir="rtl"] .topnav-user { padding: 4px 4px 4px 10px; }

.topnav-user:hover { background: var(--surface-strong); box-shadow: var(--shadow-xs); }

.avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--grad-brand);
  color: #ffffff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.45);
  overflow: hidden;
}
/* When the user has an uploaded avatar we wrap an <img> instead of the
   initial. Drop the gradient bg + inset ring so the photo isn't tinted. */
.avatar.avatar-img {
  background: var(--surface-solid);
  box-shadow: inset 0 0 0 1px var(--border);
  padding: 0;
}
.avatar.avatar-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.user-info { font-size: 12px; display: flex; flex-direction: column; line-height: 1.2; }
.user-info .name { font-weight: 600; color: var(--text); }
.user-info .role { color: var(--text-muted); font-size: 11px; margin-top: 1px; }

.dropdown {
  position: absolute;
  top: calc(100% + 10px);
  background: var(--surface-solid);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  min-width: 200px;
  padding: 6px;
  display: none;
  z-index: 100;
  animation: slideDown 0.2s var(--ease);
}

html[dir="rtl"] .dropdown { left: 0; }
html[dir="ltr"] .dropdown { right: 0; }

.dropdown.open { display: block; }

/* On desktop the sidebar always shows Profile + Logout, so the avatar dropdown
   would be redundant. Disable click-to-open on screens with the sidebar. */
@media (min-width: 1025px) {
  .app-shell.has-sidebar .topnav-user .dropdown { display: none !important; }
  .app-shell.has-sidebar .topnav-user { cursor: default; }
}

.dropdown-item {
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  color: var(--text);
  text-decoration: none;
  font-size: 13px;
  display: block;
  cursor: pointer;
  border: none;
  background: transparent;
  width: 100%;
  text-align: inherit;
  font-family: inherit;
  transition: background 0.15s;
}

.dropdown-item:hover { background: rgba(124, 131, 253, 0.10); color: var(--brand); }
.dropdown-item.danger { color: var(--danger); }
.dropdown-item.danger:hover { background: var(--danger-soft); color: var(--danger); }
.dropdown-divider { height: 1px; background: var(--outline-variant); margin: 6px 0; }

/* ──────────────────────────────────────────────────────────────────
   PAGE HEADER
   ────────────────────────────────────────────────────────────────── */
.page-header {
  margin-bottom: 32px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  animation: slideUp 0.5s var(--ease) both;
}

.page-title {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.2;
}

html[lang="ar"] .page-title, html[dir="rtl"] .page-title {
  font-family: var(--font-ar);
  font-weight: 700;
}

.page-subtitle { font-size: 14px; color: var(--text-muted); margin-top: 6px; font-weight: 400; }

/* ──────────────────────────────────────────────────────────────────
   STATS GRID
   ────────────────────────────────────────────────────────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 18px;
  margin-bottom: 28px;
}

.stat {
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  transition: box-shadow 0.2s var(--ease);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stat:hover {
  box-shadow: var(--shadow-sm);
}

.stat-value {
  font-family: var(--font-display);
  font-size: 28px; font-weight: 700;
  line-height: 1.1; letter-spacing: -0.02em;
  color: var(--text);
  animation: countUp 0.6s var(--ease-bounce) both;
}

.stat-value.sm { font-size: 18px; }
.stat-value.lg { font-size: 38px; }
.stat-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; font-weight: 500; }

.stat {
  position: relative;
}
.stat-icon {
  position: absolute;
  top: 18px; inset-inline-end: 18px;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--brand-soft);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  color: var(--brand);
}
.stat-icon .material-symbols-outlined {
  font-size: 22px;
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

.stat.accent  .stat-icon { background: rgba(0, 103, 98, 0.10);  color: var(--accent-2); }
.stat.warn    .stat-icon { background: rgba(255, 184, 77, 0.16); color: var(--warning); }
.stat.danger  .stat-icon { background: rgba(186, 26, 26, 0.10);  color: var(--danger); }
.stat.success .stat-icon { background: rgba(64, 220, 209, 0.18); color: var(--accent-2); }

/* ──────────────────────────────────────────────────────────────────
   FORMS
   ────────────────────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }

/* Tiny uppercase muted label — shared section/field label across the system.
   8 selectors collapsed into one rule (audit pass 2). The rules that need an
   explicit margin-bottom add it via the smaller follow-up below. */
.field label,
.field .field-label-text,
.stat-label,
.kpi-tile-label,
.tl-headline-label,
.tl-team-stat .lbl,
.kpi-drill-item dt,
.profile-info-item dt {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.stat-label,
.tl-team-stat .lbl,
.kpi-drill-item dt,
.profile-info-item dt {
  margin-bottom: 4px;
}
.field label small {
  font-weight: 400;
  color: var(--text-dim);
  margin-inline-start: 4px;
  text-transform: none;
  letter-spacing: 0;
}

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field-row.three { grid-template-columns: repeat(3, 1fr); }
.field-row.four  { grid-template-columns: repeat(4, 1fr); }
.field-row.five  { grid-template-columns: repeat(5, 1fr); }

@media (max-width: 900px) {
  .field-row, .field-row.three, .field-row.four, .field-row.five { grid-template-columns: 1fr 1fr; }
}

input[type=text], input[type=password], input[type=email], input[type=tel],
input[type=number], input[type=month], input[type=date], select, textarea {
  padding: 12px 14px;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-sm);
  background: var(--surface-solid);
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  transition: all 0.2s var(--ease);
  width: 100%;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02);
}

input::placeholder, textarea::placeholder { color: var(--text-dim); opacity: 0.7; }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(71, 77, 197, 0.12), inset 0 1px 2px rgba(0, 0, 0, 0.02);
  background: var(--surface-solid);
}

input[readonly] { opacity: 0.55; cursor: not-allowed; }
textarea { resize: vertical; min-height: 80px; }

/* Range slider — periwinkle thumb */
input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: var(--surface-3);
  border-radius: 9999px;
  outline: none;
  border: none;
  padding: 0;
  box-shadow: none;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--grad-brand);
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(71, 77, 197, 0.40);
  border: 2px solid #fff;
  transition: transform 0.15s var(--ease);
}
input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.15); }
input[type=range]::-moz-range-thumb {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--brand);
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(71, 77, 197, 0.40);
  border: 2px solid var(--surface-solid);
}

/* Inline glass select arrow */
select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23474dc5' d='M6 8L0 0h12z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-inline-end: 36px;
}
html[dir="rtl"] select { background-position: left 14px center; padding-inline-start: 36px; padding-inline-end: 14px; }

/* Native checkbox accent */
input[type=checkbox] { accent-color: var(--brand); }

/* ──────────────────────────────────────────────────────────────────
   BUTTONS
   ────────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-solid);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s var(--ease);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}

.btn:hover:not(:disabled) {
  border-color: var(--brand);
  color: var(--brand);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.btn:active:not(:disabled) { transform: translateY(0); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn { min-height: 36px; }
@media (hover: none), (pointer: coarse) {
  /* Touch-primary surfaces — bump the hit area on every coarse-pointer device. */
  .btn { min-height: 44px; }
  .btn-sm { min-height: 36px; }
}

/* When the primary button is in loading state, keep it visible & branded. */
.btn-primary:disabled {
  opacity: 0.92;
  cursor: progress;
  transform: none;
  filter: saturate(0.85);
}

/* Spinner inside a button — sized & coloured to read against the bg. */
.btn .loading {
  width: 18px;
  height: 18px;
  border-width: 2.5px;
}
.btn-primary .loading {
  border-color: rgba(255, 255, 255, 0.35);
  border-top-color: #ffffff;
}

.btn-primary {
  background: var(--grad-brand);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 22px rgba(71, 77, 197, 0.30), inset 0 1px 0 rgba(255,255,255,0.25);
}

.btn-primary:hover:not(:disabled) {
  color: #fff;
  border-color: transparent;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(71, 77, 197, 0.40), inset 0 1px 0 rgba(255,255,255,0.3);
}

.btn-danger {
  background: transparent;
  border-color: rgba(186, 26, 26, 0.28);
  color: var(--danger);
}
.btn-danger:hover:not(:disabled) { background: var(--danger-soft); color: var(--danger); border-color: var(--danger); }

.btn-ghost {
  background: rgba(124, 131, 253, 0.06);
  border-color: rgba(71, 77, 197, 0.28);
  color: var(--brand);
  box-shadow: none;
}
.btn-ghost:hover:not(:disabled) {
  background: rgba(124, 131, 253, 0.14);
  color: var(--brand);
  border-color: var(--brand);
}

.btn-sm { padding: 7px 13px; font-size: 12px; }
.btn-full { width: 100%; }

/* ──────────────────────────────────────────────────────────────────
   TABLES
   ────────────────────────────────────────────────────────────────── */
.table-wrap {
  border-radius: var(--radius-lg);
  overflow: hidden;
  animation: fadeIn 0.5s var(--ease) both;
  padding: 0;
}

table { width: 100%; border-collapse: collapse; }

th {
  text-align: start;
  padding: 14px 18px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
  background: var(--tint-soft);
  border-bottom: 1px solid var(--outline-variant);
}

td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--outline-variant);
  font-size: 13px;
  color: var(--text);
}

tr:last-child td { border-bottom: none; }
tbody tr { transition: background 0.18s var(--ease), transform 0.25s var(--ease); }
tbody tr:hover td { background: var(--surface-2); }
tbody tr.clickable:hover { transform: translateX(2px); cursor: pointer; }
html[dir="rtl"] tbody tr.clickable:hover { transform: translateX(-2px); }

.table-empty {
  padding: 60px 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

/* ──────────────────────────────────────────────────────────────────
   BADGES
   ────────────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
}

.badge-excellent, .badge-vgood {
  background: rgba(0, 131, 124, 0.10);
  color: var(--accent-2);
  border-color: rgba(0, 131, 124, 0.20);
}
.badge-good {
  background: rgba(71, 77, 197, 0.10);
  color: var(--brand);
  border-color: rgba(71, 77, 197, 0.20);
}
.badge-medium {
  background: rgba(255, 184, 77, 0.18);
  color: var(--warning);
  border-color: rgba(255, 184, 77, 0.32);
}
.badge-weak, .badge-bad {
  background: var(--danger-soft);
  color: var(--danger);
  border-color: rgba(186, 26, 26, 0.20);
}
.badge-pending {
  background: rgba(124, 131, 253, 0.08);
  color: var(--text-muted);
  border-color: var(--outline-variant);
}
.badge-role-admin    { background: rgba(136, 79, 65, 0.10);   color: var(--secondary); border-color: rgba(136, 79, 65, 0.20); }
.badge-role-manager  { background: rgba(90, 124, 255, 0.12);  color: var(--info);      border-color: rgba(90, 124, 255, 0.22); }
.badge-role-team_leader { background: rgba(0, 131, 124, 0.10);   color: var(--accent-2);  border-color: rgba(0, 131, 124, 0.20); }
.badge-role-marketing{ background: rgba(196, 114, 0, 0.10);   color: var(--warning);          border-color: rgba(196, 114, 0, 0.22); }
.badge-role-dataentry{ background: rgba(255, 184, 77, 0.16);  color: var(--warning);          border-color: rgba(255, 184, 77, 0.30); }
.badge-role-sales    { background: rgba(71, 77, 197, 0.10);   color: var(--brand);     border-color: rgba(71, 77, 197, 0.22); }

/* Dashboard table row utility classes — replaces inline styles in renderTable */
.row-actor {
  display: flex;
  align-items: center;
  gap: 10px;
}
.row-actor-name {
  font-weight: 600;
  font-size: 13px;
}
.row-actor-sub {
  color: var(--text-dim);
  font-size: 11px;
}
.avatar.avatar-sm {
  width: 32px;
  height: 32px;
  font-size: 13px;
}
.score-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}
.score-cell-num {
  font-family: var(--font-display);
  font-weight: 700;
  min-width: 50px;
}
.score-cell-bar { flex: 1; }
.weakest-cell {
  color: var(--text-muted);
  font-size: 11px;
}
.fin-key-num {
  font-weight: 700;
  color: var(--text);
}

/* Finance tile expand-to-breakdown — one panel below the tiles row,
   populated when any KPI tile is clicked. Active tile gets a brand
   ring so the user knows which metric is being broken down. */
.kpi-tile.is-active {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.fin-tile-breakdown {
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 18px 18px;
  margin-bottom: 22px;
  box-shadow: var(--shadow-xs);
  animation: fadeIn 0.25s var(--ease) both;
}
.fin-tile-breakdown-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.fin-tile-breakdown-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}
.fin-tile-breakdown-sub {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 2px;
}
.fin-tile-breakdown-close {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--outline-variant);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s var(--ease), color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.fin-tile-breakdown-close:hover {
  background: var(--tint-soft);
  color: var(--brand);
  border-color: var(--brand);
}
.fin-tile-breakdown-close .material-symbols-outlined { font-size: 18px; }

.fin-tile-breakdown-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}
.fin-tile-breakdown-cell {
  background: var(--tint-soft);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease);
}
.fin-tile-breakdown-cell:hover {
  background: var(--tint-soft-strong);
  border-color: var(--border);
}
.fin-tile-breakdown-month {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.fin-tile-breakdown-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--text);
}
/* Peak month — best in the range. Low — worst. Both painted on the
   border + tint so the cell still reads as a number, not a badge. */
.fin-tile-breakdown-cell.is-peak {
  border-color: color-mix(in srgb, var(--accent, #006762) 50%, var(--border));
  background: color-mix(in srgb, var(--accent, #006762) 10%, var(--tint-soft));
}
.fin-tile-breakdown-cell.is-peak .fin-tile-breakdown-value { color: var(--accent, #006762); }
.fin-tile-breakdown-cell.is-low {
  border-color: color-mix(in srgb, var(--warning, #c47200) 40%, var(--border));
  background: color-mix(in srgb, var(--warning, #c47200) 8%, var(--tint-soft));
}
/* Optional third line under the value — used by the treemap drill-down to
   show "<deals> · <reservations>" for that month without a second column. */
.fin-tile-breakdown-sub-line {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-dim);
  letter-spacing: 0.02em;
  margin-top: 2px;
}
/* Variant used for the "Others" list — a name (not a month) on top, total
   below. The label gets normal-case so rep names don't shout in caps. */
.fin-tile-breakdown-cell.is-rep-row .fin-tile-breakdown-month {
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  color: var(--text);
}

@media (max-width: 720px) {
  .fin-tile-breakdown { padding: 12px 12px 14px; }
  .fin-tile-breakdown-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .fin-tile-breakdown-cell { padding: 10px 12px; }
  .fin-tile-breakdown-value { font-size: 16px; }
}

/* Finance report — expandable per-rep activity breakdown.
   Each rep occupies two <tr>s: a clickable summary row and a detail
   row that's hidden until the user expands it. The detail row uses a
   nested table so the column alignment matches the parent grid. */
.fin-summary {
  cursor: pointer;
  transition: background 0.15s var(--ease);
}
.fin-summary:hover { background: var(--tint-soft); }
.fin-summary.is-expanded { background: var(--tint-soft-strong); }
.fin-expand-btn {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease), transform 0.15s var(--ease);
}
.fin-expand-btn:hover {
  background: var(--tint-soft);
  border-color: var(--brand);
  color: var(--brand);
}
.fin-expand-chev {
  font-size: 18px;
  transition: transform 0.18s var(--ease);
}
.fin-summary.is-expanded .fin-expand-chev { transform: rotate(180deg); }

/* Spacer to keep the avatar + name aligned for rows that don't get an
   expand button (rep had zero revenue across the whole range). Width
   matches the button width so the rows below line up regardless of
   which ones have expanders. */
.fin-expand-spacer {
  display: inline-block;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}
.fin-summary.is-empty {
  cursor: default;
  opacity: 0.85;
}
.fin-summary.is-empty:hover { background: transparent; }

.fin-detail-row > td {
  padding: 0 !important;
  background: var(--surface);
}
.fin-detail-wrap {
  padding: 14px 18px 18px;
  border-top: 1px solid var(--border);
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--brand) 4%, transparent) 0%,
              transparent 100%);
}
.fin-detail-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}
.fin-detail-table {
  width: 100%;
  border-collapse: collapse;
  background: transparent;
}
.fin-detail-table thead th {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 6px 10px;
  text-align: start;
  background: transparent;
  border-bottom: 1px solid var(--outline-variant);
}
.fin-detail-table tbody td {
  font-size: 12px;
  padding: 8px 10px;
  border-bottom: 1px dashed var(--outline-variant);
  color: var(--text);
}
.fin-detail-table tbody tr:last-child td { border-bottom: none; }
.fin-detail-table tbody tr:hover { background: var(--tint-soft); }

@media (max-width: 720px) {
  .fin-detail-wrap { padding: 10px 12px 14px; }
  .fin-detail-table thead th,
  .fin-detail-table tbody td { padding: 6px 8px; font-size: 11px; }
}

/* Status pill — used in dashboard table to show submitted/evaluated state.
   Carries icon + text so the signal isn't color-only. */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px 3px 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: var(--radius-pill);
  border: 1px solid var(--outline-variant);
  margin-inline-end: 4px;
  margin-bottom: 2px;
  white-space: nowrap;
}
.status-pill .material-symbols-outlined {
  font-size: 14px;
  font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 20;
}
.status-pill.is-done {
  background: var(--accent-soft);
  color: var(--accent-2);
  border-color: rgba(0, 131, 124, 0.20);
}
.status-pill.is-pending {
  background: transparent;
  color: var(--text-dim);
}
.status-pill.is-pending .material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}
.status-pill.is-warn {
  background: var(--warning-soft);
  color: var(--warning);
  border-color: rgba(196, 114, 0, 0.20);
}
.status-pill.is-bad {
  background: var(--danger-soft);
  color: var(--danger);
  border-color: rgba(186, 26, 26, 0.20);
}

/* ──────────────────────────────────────────────────────────────────
   PROGRESS BARS
   ────────────────────────────────────────────────────────────────── */
.bar {
  height: 8px;
  background: var(--surface-3);
  border-radius: var(--radius-pill);
  overflow: hidden;
  min-width: 100px;
  position: relative;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
}

.bar-fill {
  height: 100%;
  border-radius: var(--radius-pill);
  transition: width 0.6s var(--ease);
}

.bar-fill.success { background: var(--accent); }
.bar-fill.warn    { background: var(--warning); }
.bar-fill.danger  { background: var(--danger); }
.bar-fill.brand   { background: var(--brand); }

/* ──────────────────────────────────────────────────────────────────
   TOAST
   ────────────────────────────────────────────────────────────────── */
.toast {
  position: fixed;
  top: 24px;
  inset-inline-start: 50%;
  transform: translateX(-50%) translateY(-20px);
  background: var(--surface-solid);
  border: 1px solid var(--border-strong);
  color: var(--text);
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 500;
  box-shadow: var(--shadow-md);
  opacity: 0;
  transition: all 0.3s var(--ease);
  pointer-events: none;
  z-index: 999;
}

html[dir="rtl"] .toast { transform: translateX(50%) translateY(-20px); }
html[dir="rtl"] .toast.show { transform: translateX(50%) translateY(0); }
html[dir="ltr"] .toast.show { transform: translateX(-50%) translateY(0); }

.toast.show { opacity: 1; }
.toast.success { border-color: rgba(0, 131, 124, 0.32); color: var(--accent-2); }
.toast.error   { border-color: rgba(186, 26, 26, 0.32); color: var(--danger); }
.toast.warn    { border-color: rgba(214, 153, 0, 0.32); color: var(--warning, #d69900); }
.toast.has-action {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  pointer-events: auto;
}
.toast-action {
  background: transparent;
  border: 1px solid currentColor;
  color: inherit;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  white-space: nowrap;
}
.toast-action:hover { filter: brightness(0.95); }

/* ──────────────────────────────────────────────────────────────────
   UTILITIES
   ────────────────────────────────────────────────────────────────── */
.hidden { display: none !important; }
.is-hidden { display: none !important; }
.text-muted { color: var(--text-muted); }
.text-dim { color: var(--text-dim); }
.text-success { color: var(--accent-2); }
.text-warn { color: var(--warning); }
.text-danger { color: var(--danger); }
.text-center { text-align: center; }
.mb-2 { margin-bottom: 16px; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: 6px; }
.gap-2 { gap: 12px; }

/* ──────────────────────────────────────────────────────────────────
   ADMIN / TEAMS — user CRUD + team CRUD
   ────────────────────────────────────────────────────────────────── */

/* Team list card — extracted from inline styles in teams.html render() */
.team-card { margin-bottom: 12px; }
.team-card-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.team-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent-2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.team-card-icon .material-symbols-outlined {
  font-size: 22px;
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}
.team-card-body { flex: 1; min-width: 200px; }
.team-card-name {
  font-weight: 600;
  font-size: 16px;
  color: var(--text);
}
.team-card-desc {
  color: var(--text-muted);
  font-size: 12px;
  margin-top: 2px;
}
.team-card-meta {
  margin-top: 6px;
  display: flex;
  gap: 16px;
  font-size: 13px;
  flex-wrap: wrap;
}
.team-card-meta strong { margin-inline-start: 4px; color: var(--text); }
.team-card-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Stacked avatar pile — overlapping circles in the team-card meta row.
   The first ~5 members are rendered, then a "+N" pill takes the rest. */
.team-card-leader-line,
.team-card-members-line {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.team-avatars-stack {
  display: inline-flex;
  align-items: center;
}
.team-avatar-stacked {
  margin-inline-start: -8px;
  outline: 2px solid var(--surface-solid);
  outline-offset: 0;
  position: relative;
  z-index: 1;
}
.team-avatar-stacked:first-child { margin-inline-start: 0; }
.team-avatar-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  min-width: 32px;
  padding: 0 8px;
  margin-inline-start: -8px;
  border-radius: var(--radius-pill);
  background: var(--surface-recessed);
  border: 2px solid var(--surface-solid);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
}

/* Expandable details panel — closed by default, opens on summary click */
.team-card { padding: 0; overflow: hidden; }
.team-card > summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 22px;
  user-select: none;
}
.team-card > summary::-webkit-details-marker { display: none; }
.team-card > summary::marker { content: ""; }

.team-card-chev {
  font-size: 22px;
  color: var(--text-muted);
  transition: transform 0.2s var(--ease);
  margin-inline-start: 4px;
}
.team-card[open] > summary .team-card-chev {
  transform: rotate(180deg);
}

.team-card-expand {
  border-top: 1px solid var(--outline-variant);
  padding: 16px 22px 20px;
  background: var(--surface-recessed);
  animation: fadeIn 0.25s var(--ease);
}
.team-expand-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.team-expand-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
}
.team-expand-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--surface-solid);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-sm);
}
.team-expand-meta { flex: 1; min-width: 0; }
.team-expand-name {
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.team-expand-sub {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.team-expand-contact {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--brand-soft);
  color: var(--brand);
  flex-shrink: 0;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.team-expand-contact:hover { background: var(--brand); color: #fff; }
.team-expand-contact .material-symbols-outlined { font-size: 16px; }
.team-expand-empty {
  font-size: 13px;
  color: var(--text-dim);
  text-align: center;
  padding: 20px;
}

/* Members fieldset — used inside the team modal */
fieldset.field {
  border: none;
  padding: 0;
  margin: 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
fieldset.field legend {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0;
  margin-bottom: 6px;
}
.team-members-list {
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.team-member-row {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 6px;
  transition: background 0.15s;
  font-size: 13px;
  color: var(--text);
}
.team-member-row:hover { background: var(--surface-2); }
.team-member-row input[type="checkbox"] { accent-color: var(--brand); }
.team-member-row.is-hidden { display: none; }
.team-member-username {
  color: var(--text-muted);
  font-size: 11px;
}

/* Admin user table — sub-cell text + action-row spacing */
.admin-cell-sub {
  color: var(--text-muted);
  font-size: 12px;
}
.admin-row-actions { flex-wrap: wrap; }

/* Members list toolbar — Batch 4 (search + select-all) */
.team-members-toolbar {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  align-items: stretch;
  flex-wrap: wrap;
}
.team-members-toolbar .pf-search-input-wrap { flex: 1; min-width: 160px; }
.team-members-toolbar .btn { white-space: nowrap; }

/* Tiny utility for description-style small text */
.text-sm { font-size: 13px; }

/* Destructive-action modals — used by admin.html, teams.html, marketing.html */
.user-delete-name {
  margin-top: 10px;
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
}
.user-delete-typed-expected {
  display: inline-block;
  font-family: var(--font-mono);
  background: var(--surface-2);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-sm);
  padding: 1px 8px;
  margin-inline-start: 4px;
  color: var(--text);
}
/* Cancel-first DOM order means Cancel sits in the first slot, which is
   visually the leading edge — fine. The danger button sits at the trailing
   edge of the footer. */
.user-delete-footer { justify-content: flex-end; gap: 10px; }
.user-delete-footer .btn { min-width: 100px; }

/* ──────────────────────────────────────────────────────────────────
   DASHBOARD — deep-dive disclosure + clickable tile affordance
   ────────────────────────────────────────────────────────────────── */
.dash-deep-dive {
  margin-bottom: 22px;
}
.dash-deep-dive-summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--surface-solid);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  user-select: none;
  margin-bottom: 18px;
  transition: color 0.15s, border-color 0.15s, box-shadow 0.15s;
  min-height: 40px;
}
.dash-deep-dive-summary::-webkit-details-marker { display: none; }
.dash-deep-dive-summary:hover {
  color: var(--brand);
  border-color: var(--brand);
  box-shadow: var(--shadow-xs);
}
.dash-deep-dive-summary .material-symbols-outlined {
  font-size: 18px;
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 20;
}
.dash-deep-dive-summary .dash-deep-dive-chevron {
  margin-inline-start: auto;
  transition: transform 0.2s var(--ease);
}
.dash-deep-dive[open] .dash-deep-dive-summary .dash-deep-dive-chevron {
  transform: rotate(180deg);
}

/* Clickable KPI tile — used on dashboard, finance, admin, dataentry. */
.kpi-tile.is-clickable {
  cursor: pointer;
  transition: box-shadow 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.kpi-tile.is-clickable:hover {
  box-shadow: var(--shadow-sm);
  border-color: var(--border-strong);
}
.kpi-tile.is-clickable:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.kpi-tile.is-clickable:active {
  transform: translateY(1px);
}

/* ──────────────────────────────────────────────────────────────────
   TEAM-LEADER — headline score, my-team card, rank line
   ────────────────────────────────────────────────────────────────── */
.tl-headline {
  display: grid;
  /* Gauge needs at least 380px to render legibly — squishing it below that
     causes the gauge tick labels to overlap the value annotation. */
  grid-template-columns: minmax(260px, 1fr) minmax(380px, 1fr);
  gap: 18px;
  margin-bottom: 22px;
  align-items: stretch;
}
@media (max-width: 900px) {
  .tl-headline { grid-template-columns: 1fr; }
}
.tl-headline-score {
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 28px 22px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  box-shadow: var(--shadow-xs);
}
.tl-headline-value {
  font-family: var(--font-display);
  font-size: 64px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--text);
  margin-top: 4px;
}
.tl-headline-value.is-excellent { color: var(--accent-2); }
.tl-headline-value.is-vgood     { color: var(--brand); }
.tl-headline-value.is-good      { color: var(--info); }
.tl-headline-value.is-medium    { color: var(--warning); }
.tl-headline-value.is-weak,
.tl-headline-value.is-bad       { color: var(--danger); }
.tl-headline-rating {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 6px;
}
.tl-headline-meta {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 10px;
  line-height: 1.6;
}
.tl-headline-meta strong { color: var(--text); font-weight: 700; }
.tl-headline-gauge {
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px;
  box-shadow: var(--shadow-xs);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* My team aggregate card — Batch 5 */
.tl-team-card {
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 22px;
  margin-bottom: 22px;
  box-shadow: var(--shadow-xs);
}
.tl-team-card .card-title { margin-bottom: 14px; }
.tl-team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px;
}

/* Stat tile — refreshed pass. Icon chip (left) + body (right), accent tone
   strip at the inline-start edge, soft gradient surface and lift on hover.
   Per-stat tone variants paint the strip / icon chip / value emphasis. */
.tl-team-stat {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: center;
  padding: 14px 16px 14px 18px;
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--surface-solid) 92%, transparent) 0%,
              var(--surface-solid) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease), border-color 0.18s var(--ease);
}
.tl-team-stat::before {
  content: "";
  position: absolute;
  inset-block: 10px;
  inset-inline-start: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--brand);
  opacity: 0.85;
}
.tl-team-stat:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
  border-color: color-mix(in srgb, var(--brand) 25%, var(--border));
}
.tl-team-stat-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  color: var(--brand);
  flex-shrink: 0;
}
.tl-team-stat-icon .material-symbols-outlined { font-size: 22px; }
.tl-team-stat-body { min-width: 0; }
.tl-team-stat .val {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tl-team-stat .val.is-name {
  font-size: 16px;
  letter-spacing: -0.01em;
}
.tl-team-stat .sub {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 4px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Tone variants — only the accent strip + icon chip change so the cards
   read as a coherent set rather than five different colour blobs. */
.tl-team-stat.tone-brand::before    { background: var(--brand); }
.tl-team-stat.tone-brand .tl-team-stat-icon {
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  color: var(--brand);
}
.tl-team-stat.tone-accent::before   { background: var(--accent, #006762); }
.tl-team-stat.tone-accent .tl-team-stat-icon {
  background: color-mix(in srgb, var(--accent, #006762) 12%, transparent);
  color: var(--accent, #006762);
}
.tl-team-stat.tone-info::before     { background: #5b7de8; }
.tl-team-stat.tone-info .tl-team-stat-icon {
  background: color-mix(in srgb, #5b7de8 12%, transparent);
  color: #5b7de8;
}
.tl-team-stat.tone-warm::before     { background: var(--warning, #c47200); }
.tl-team-stat.tone-warm .tl-team-stat-icon {
  background: color-mix(in srgb, var(--warning, #c47200) 14%, transparent);
  color: var(--warning, #c47200);
}
.tl-team-stat.tone-danger::before   { background: var(--danger, #ba1a1a); }
.tl-team-stat.tone-danger .tl-team-stat-icon {
  background: color-mix(in srgb, var(--danger, #ba1a1a) 12%, transparent);
  color: var(--danger, #ba1a1a);
}

@media (max-width: 640px) {
  .tl-team-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .tl-team-stat { padding: 12px 12px 12px 14px; gap: 10px; }
  .tl-team-stat-icon { width: 32px; height: 32px; }
  .tl-team-stat-icon .material-symbols-outlined { font-size: 18px; }
  .tl-team-stat .val { font-size: 18px; }
  .tl-team-stat .val.is-name { font-size: 14px; }
}

/* TL members list — Section 04 (TL-05/TL-06) */
.tl-members-card {
  margin-bottom: 22px;
}
.tl-members-card .card-title {
  margin-bottom: 12px;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
}
.tl-members-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tl-member-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
  background: var(--tint-soft);
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease);
}
.tl-member-row:hover { background: var(--tint-soft-strong); border-color: var(--border); }
.tl-member-name { min-width: 0; }
.tl-member-name-line {
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tl-member-name-sub {
  font-size: 11px;
  margin-top: 2px;
}
.tl-member-score {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--brand);
  min-width: 56px;
  text-align: end;
}
.tl-member-score.is-empty { color: var(--text-dim); font-weight: 500; }
@media (max-width: 720px) {
  .tl-member-row {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "avatar name"
      "status status"
      "rating score";
    gap: 8px 12px;
    padding: 12px;
  }
  .tl-member-row > .avatar { grid-area: avatar; }
  .tl-member-row > .tl-member-name { grid-area: name; }
  .tl-member-row > .badge:nth-of-type(1) { grid-area: status; justify-self: start; }
  .tl-member-row > .badge:nth-of-type(2) { grid-area: rating; justify-self: start; }
  .tl-member-row > .tl-member-score { grid-area: score; justify-self: end; min-width: auto; }
}

/* TL evaluation card — head row + expandable members panel */
.tl-eval-card-head {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.tl-eval-members {
  margin-top: 12px;
  border-top: 1px solid var(--outline-variant);
  padding-top: 10px;
}
.tl-eval-members > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  color: var(--brand);
  user-select: none;
  transition: background 0.15s var(--ease);
}
.tl-eval-members > summary::-webkit-details-marker { display: none; }
.tl-eval-members > summary:hover { background: rgba(124, 131, 253, 0.10); }
.tl-eval-members-chev {
  font-size: 18px;
  transition: transform 0.2s var(--ease);
}
.tl-eval-members[open] > summary .tl-eval-members-chev { transform: rotate(180deg); }
.tl-eval-members[open] > summary .tl-eval-members-label::before {
  content: attr(data-expanded);
}
.tl-eval-members:not([open]) > summary .tl-eval-members-label::before {
  content: attr(data-collapsed);
}
.tl-eval-members > summary .tl-eval-members-label {
  /* Hide the original textContent so the ::before content shows instead. */
  font-size: 0;
}
.tl-eval-members > summary .tl-eval-members-label::before {
  font-size: 13px;
}

/* Unassigned-sales card on the manager evaluation page */
.tl-eval-unassigned-card {
  border-color: rgba(196, 114, 0, 0.32);
  background: linear-gradient(180deg, rgba(255, 244, 224, 0.55), var(--surface-solid) 60%);
}
.tl-eval-unassigned-head {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.tl-eval-unassigned-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(196, 114, 0, 0.12);
  color: var(--warning);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tl-eval-unassigned-icon .material-symbols-outlined {
  font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 24;
  font-size: 22px;
}
.tl-eval-unassigned-title {
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
}
.tl-eval-unassigned-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* DATE RANGE PICKER — cross-cutting filter component */
.dr {
  display: inline-block;
  position: relative;
  font-family: inherit;
}
.dr-summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-solid);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
  box-shadow: var(--shadow-xs);
  min-height: 36px;
}
.dr-summary:hover { border-color: var(--brand); color: var(--brand); }
.dr-summary[aria-expanded="true"] {
  border-color: var(--brand);
  color: var(--brand);
  box-shadow: 0 0 0 3px rgba(71, 77, 197, 0.12);
}
.dr-summary-icon { font-size: 18px; }
.dr-summary-text { white-space: nowrap; }
.dr-summary-chev {
  font-size: 18px;
  transition: transform 0.2s var(--ease);
}
.dr-summary[aria-expanded="true"] .dr-summary-chev { transform: rotate(180deg); }

.dr-panel {
  position: absolute;
  top: calc(100% + 6px);
  inset-inline-start: 0;
  z-index: 200;
  min-width: 320px;
  max-width: 420px;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 14px;
  animation: fadeIn 0.15s var(--ease);
}

.dr-panel-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.dr-preset {
  border: 1px solid var(--outline-variant);
  background: var(--tint-soft);
  color: var(--text);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s var(--ease);
}
.dr-preset:hover {
  background: rgba(124, 131, 253, 0.10);
  border-color: var(--brand);
  color: var(--brand);
}
.dr-preset.is-active {
  background: rgba(71, 77, 197, 0.14);
  border-color: var(--brand);
  color: var(--brand);
}
.dr-preset.is-custom {
  /* Sits at the end; visually distinct from presets via the dashed border. */
  border-style: dashed;
}

.dr-panel-custom {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--outline-variant);
}
.dr-custom-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.dr-custom-field { display: flex; flex-direction: column; gap: 4px; }
.dr-custom-field label {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.dr-custom-field input {
  font-family: inherit;
  font-size: 13px;
  padding: 7px 10px;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-sm);
  background: var(--surface-solid);
  color: var(--text);
}
.dr-custom-field input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(71, 77, 197, 0.12);
}
.dr-custom-error {
  margin-top: 8px;
  font-size: 12px;
  color: var(--danger);
  background: var(--danger-soft);
  padding: 7px 10px;
  border-radius: var(--radius-sm);
}
.dr-custom-actions {
  margin-top: 10px;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.dr-panel-footnote {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--outline-variant);
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Contextual range warning — sits under the picker on pages where the
   selected range may mislead (sub-month on monthly-grain data, multi-month
   on single-month detail view). Reactive: hidden via [hidden] when the
   selected range is well-suited; aria-live="polite" on the host announces
   appearance. min-height keeps the layout from jumping. Warning tone
   reuses --warning / --warning-soft tokens — no new colors. */
.dr-context-warning-host {
  /* Reserve space whether visible or not — eliminates layout shift when
     toggling between This Month and Last 7 Days. */
  min-height: 48px;
  margin: 10px 0 16px;
}
.dr-context-warning {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 14px;
  background: var(--warning-soft);
  border: 1px solid rgba(196, 114, 0, 0.30);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
}
/* `display: flex` above tied with the UA's `[hidden] { display: none }` at
   the same specificity, and author rules win — so the banner stayed
   visible even with the hidden attribute set, showing just the icon and
   no text on month-aligned ranges. Higher-specificity attribute selector
   restores the expected hide behavior. */
.dr-context-warning[hidden] { display: none; }
.dr-context-warning .material-symbols-outlined {
  color: var(--warning);
  font-size: 20px;
  font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
  flex-shrink: 0;
  margin-top: 1px;
}
.dr-context-warning-text { min-width: 0; }
.dr-context-warning-text strong { color: var(--warning); font-weight: 700; }

/* Info banner — used by team_leader page when a multi-month range collapses
   to "showing latest month". Reusable for similar advisories elsewhere. */
.dr-info-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin: 10px 0 16px;
  background: rgba(0, 103, 98, 0.08);   /* accent teal soft */
  border: 1px solid rgba(0, 103, 98, 0.22);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 13px;
}
.dr-info-banner .material-symbols-outlined {
  color: var(--accent);
  font-size: 18px;
}
.dr-info-banner[hidden] { display: none; }

@media (max-width: 720px) {
  .dr-panel {
    position: fixed;
    inset: auto 0 0 0;
    top: auto;
    width: 100%;
    max-width: none;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: 18px 16px 22px;
    animation: slideUp 0.2s var(--ease);
  }
  .dr-custom-row { grid-template-columns: 1fr; }
}
@keyframes slideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

/* ──────────────────────────────────────────────────────────────────
   Marketing Section 05 — 12-section dashboard primitives (.mkt-*)
   ────────────────────────────────────────────────────────────────── */
.mkt-section {
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  margin-bottom: 22px;
  box-shadow: var(--shadow-xs);
}
.mkt-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}
.mkt-section-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--grad-brand);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  font-family: var(--font-display);
  flex-shrink: 0;
}
.mkt-section-cta { margin-inline-start: auto; }

/* 1. Overview tiles — compact label/value pairs in a grid */
.mkt-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px;
}
.mkt-overview-tile {
  background: var(--tint-soft);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}
.mkt-overview-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.mkt-overview-value {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
  word-break: break-word;
}

/* 2. Scenario row — 3 cards side-by-side, recommended one highlighted */
.mkt-scenarios-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}
.mkt-scenario-card {
  background: var(--surface-solid);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.mkt-scenario-card.is-recommended {
  border-color: var(--brand);
  background: rgba(124, 131, 253, 0.06);
  box-shadow: 0 0 0 3px rgba(71, 77, 197, 0.10);
}
.mkt-scenario-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.mkt-scenario-title {
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
}
.mkt-scenario-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
  margin: 0;
}
.mkt-scenario-stats > div {
  min-width: 0;
}
.mkt-scenario-stats dt {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 2px;
}
.mkt-scenario-stats dd {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  word-break: break-word;
}
.mkt-recommended {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--accent-soft, rgba(0, 103, 98, 0.10));
  border: 1px solid rgba(0, 103, 98, 0.22);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--text);
}
.mkt-recommended .material-symbols-outlined {
  color: var(--accent);
  font-size: 18px;
}

/* 4 + 5 + 8 — Headline cards row (small stat tiles inline above tables) */
.mkt-headline-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.mkt-headline-card {
  background: var(--tint-soft);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
  padding: 12px 14px;
}
.mkt-headline-card .mkt-headline-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.mkt-headline-card .mkt-headline-value {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}
.mkt-empty-hint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--tint-soft);
  border: 1px dashed var(--outline-variant);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 13px;
}
.mkt-empty-hint .material-symbols-outlined {
  font-size: 18px;
  color: var(--text-muted);
}

/* 9. Insights — bulleted, compact */
.mkt-insights {
  margin: 0;
  padding-inline-start: 22px;
  list-style: disc;
}
.mkt-insights li {
  font-size: 13px;
  line-height: 1.7;
  color: var(--text);
  margin-bottom: 4px;
}

/* 10. Action plan — 5 cards on a grid */
.mkt-actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}
.mkt-action-card {
  background: var(--tint-soft);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}
.mkt-action-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-weight: 700;
  font-size: 13px;
  color: var(--brand);
}
.mkt-action-head .material-symbols-outlined {
  font-size: 18px;
  font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}
.mkt-action-card ol {
  margin: 0;
  padding-inline-start: 22px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text);
}
.mkt-action-card ol li { margin-bottom: 4px; }

/* 11+12. Collapsible sections (Templates, Formulas) */
.mkt-collapsible[open] .mkt-chev { transform: rotate(180deg); }
.mkt-collapsible > summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
}
.mkt-collapsible > summary::-webkit-details-marker { display: none; }
.mkt-chev {
  margin-inline-start: auto;
  font-size: 22px;
  transition: transform 0.2s var(--ease);
  color: var(--text-muted);
}
.mkt-formulas {
  margin: 0;
  padding-inline-start: 22px;
  list-style: disc;
}
.mkt-formulas li {
  font-size: 13px;
  line-height: 1.7;
  color: var(--text);
  margin-bottom: 4px;
}

/* RTL polish — keep ordered-list numerals + section number circle aligned */
[dir="rtl"] .mkt-action-card ol,
[dir="rtl"] .mkt-insights,
[dir="rtl"] .mkt-formulas {
  padding-inline-start: 22px;
}

@media (max-width: 720px) {
  .mkt-section { padding: 18px 16px; }
  .mkt-overview-grid,
  .mkt-headline-row,
  .mkt-scenarios-row,
  .mkt-actions-grid {
    grid-template-columns: 1fr;
  }
  .mkt-section-cta { margin-inline-start: 0; margin-top: 8px; }
}

/* Per-KPI drill-down modal — Batch 6 */
.kpi-drill-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 24px;
  margin: 0;
}
.kpi-drill-item dd {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}
.kpi-drill-pct.is-excellent { color: var(--accent-2); }
.kpi-drill-pct.is-vgood     { color: var(--brand); }
.kpi-drill-pct.is-good      { color: var(--info); }
.kpi-drill-pct.is-medium    { color: var(--warning); }
.kpi-drill-pct.is-weak,
.kpi-drill-pct.is-bad       { color: var(--danger); }
.kpi-drill-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 14px;
  line-height: 1.6;
}

/* Chart-card header — lets a chart-card place a control row (e.g. a
   Top-N selector for the treemap) on the trailing side of the title.
   Wraps gracefully on narrow viewports so the control drops below the
   title instead of overflowing the card. */
.chart-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.chart-card-head h3 { margin: 0; }
.chart-card-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}
.chart-card-control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.chart-card-control select {
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 26px 4px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--outline-variant);
  background: var(--surface-solid);
  color: var(--text);
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
}
.chart-card-control select:hover { border-color: var(--brand); }
.chart-card-control select:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}

/* Inline hint next to chart-card titles */
.chart-card-hint {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-dim);
  text-transform: none;
  letter-spacing: 0;
  margin-inline-start: 8px;
}

/* Pending-eval card-level callout — Batch 5 */
.tl-pending-callout {
  background: var(--warning-soft);
  border: 1px solid rgba(196, 114, 0, 0.22);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 16px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.tl-pending-callout .material-symbols-outlined {
  font-size: 24px;
  color: var(--warning);
  flex-shrink: 0;
  margin-top: 2px;
}
.tl-pending-callout[hidden] { display: none; }
.tl-pending-callout-title {
  font-weight: 700;
  font-size: 14px;
  color: var(--warning);
  margin-bottom: 2px;
}
.tl-pending-callout-body {
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
}

/* ──────────────────────────────────────────────────────────────────
   MARKETING — campaign tracking page (planning + actuals)
   Was previously a page-local <style> block in marketing.html with
   off-brand hardcoded colors. Tokens swapped during Batch 1.
   ────────────────────────────────────────────────────────────────── */
.tab-bar {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--border);
  margin-bottom: 24px;
}
.tab-btn {
  padding: 10px 24px;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  transition: color 0.2s, border-color 0.2s;
  font-family: inherit;
}
.tab-btn.active {
  color: var(--brand);
  border-bottom-color: var(--brand);
}
.tab-btn:hover:not(.active) { color: var(--text); }
.tab-pane { display: none; }
.tab-pane.active { display: block; }

.mkt-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.mkt-kpi-card {
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  transition: box-shadow 0.2s var(--ease);
}
.mkt-kpi-card:hover { box-shadow: var(--shadow-sm); }
.mkt-kpi-card .lbl { font-size: 11px; color: var(--text-muted); margin-bottom: 4px; }
.mkt-kpi-card .val {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  font-family: var(--font-display);
}
.mkt-kpi-card .sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* Scenario color-coded badges */
.mk-scen-badge {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 10px;
  border: 1px solid currentColor;
  display: inline-block;
}
.mk-scen-cons { color: var(--accent-2); }
.mk-scen-bal  { color: var(--brand); }
.mk-scen-agg  { color: var(--warning); }

/* Overview tile — used by Phase 1 ovGrid */
.ov-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.ov-item {
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 16px;
}
.ov-item .lbl { font-size: 11px; color: var(--text-muted); }
.ov-item .val {
  font-size: 15px;
  font-weight: 600;
  margin-top: 2px;
  font-family: var(--font-display);
}

/* Phase 2 insights + actions */
.insight-item {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  transition: background 0.15s;
  border-radius: var(--radius-sm);
}
.insight-item:last-child { border-bottom: none; }
.insight-icon {
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 1px;
  font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 20;
}
.insight-item.is-ok   .insight-icon { color: var(--accent-2); }
.insight-item.is-warn .insight-icon { color: var(--warning); }
.insight-item.is-bad  .insight-icon { color: var(--danger); }
.insight-item.is-pend .insight-icon { color: var(--text-dim); }
/* Tint the whole row so problems stand out — clean rows fade into the background */
.insight-item.is-warn { background: var(--warning-soft); }
.insight-item.is-bad  { background: var(--danger-soft); }
.insight-item.is-ok,
.insight-item.is-pend { background: transparent; }

.action-item {
  padding: 8px 14px;
  background: var(--surface-2);
  border-radius: 6px;
  font-size: 13px;
  margin-bottom: 6px;
}

/* Recommended-scenario callout */
.rec-box {
  background: var(--accent-soft);
  border: 1px solid rgba(0, 131, 124, 0.30);
  border-radius: 12px;
  padding: 20px;
  margin-top: 16px;
}
.rec-title {
  font-weight: 700;
  font-size: 15px;
  color: var(--accent-2);
  margin-bottom: 12px;
}
.rec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}
.rec-item .lbl { font-size: 11px; color: var(--text-muted); }
.rec-item .val {
  font-weight: 700;
  font-size: 16px;
  font-family: var(--font-display);
}

/* 2×2 mini grid for the live actuals display row in Phase 2 */
.mk-actuals-display {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}

/* ──────────────────────────────────────────────────────────────────
   PASSWORD INPUT — input wrap with visibility toggle button
   ────────────────────────────────────────────────────────────────── */
.pw-input-wrap {
  position: relative;
  display: flex;
  align-items: stretch;
}
.pw-input-wrap input {
  padding-inline-end: 44px;
}
.pw-toggle {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.15s, color 0.15s;
}
/* Pin to the trailing edge of the input with explicit physical sides.
   Sibling `.auth-input-icon` had to switch to `[dir]`-keyed positioning
   because Material Symbols spans carry `direction: ltr` (see comment
   above .auth-input-icon). The button itself doesn't have that issue,
   but we mirror the pattern here so the lock-and-eye pair always reads
   as a clean opposites-attract layout in both AR and EN. */
html[dir="ltr"] .pw-toggle { right: 4px; left: auto; }
html[dir="rtl"] .pw-toggle { left: 4px; right: auto; }
.pw-toggle:hover { background: var(--surface-recessed); color: var(--text); }
.pw-toggle .material-symbols-outlined {
  font-size: 20px;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
@media (hover: none), (pointer: coarse) {
  .pw-toggle { width: 44px; height: 44px; }
  .pw-input-wrap input { padding-inline-end: 52px; }
}

/* Inline mini-score — small per-card variant of .score-display, sits in the
   card header next to status pills. Colors mirror the rating bands. */
.entry-score-mini {
  background: var(--surface-recessed);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius);
  padding: 10px 16px;
  text-align: center;
  min-width: 110px;
}
.entry-score-mini .num {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--text);
}
.entry-score-mini .num.excellent { color: var(--accent-2); }
.entry-score-mini .num.vgood     { color: var(--brand); }
.entry-score-mini .num.good      { color: var(--info); }
.entry-score-mini .num.medium    { color: var(--warning); }
.entry-score-mini .num.weak,
.entry-score-mini .num.bad       { color: var(--danger); }
.entry-score-mini .label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-top: 4px;
}

/* Admin · Mailer-not-configured persistent banner. */
.mailer-warning {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  margin-bottom: 16px;
  border-radius: 12px;
  background: rgba(214, 153, 0, 0.08);
  border: 1px solid rgba(214, 153, 0, 0.32);
  color: var(--warning, #d69900);
}
.mailer-warning .material-symbols-outlined { font-size: 22px; flex-shrink: 0; }
.mailer-warning-title { font-weight: 700; font-size: 14px; margin-bottom: 2px; }
.mailer-warning-body { font-size: 12px; opacity: 0.85; line-height: 1.5; }

/* Admin · Pending sign-up requests list */
.pending-card { padding: 16px; }
.pending-summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
}
.pending-summary::-webkit-details-marker { display: none; }
.pending-title { flex: 1; }
.pending-chev {
  transition: transform 0.2s ease;
  color: var(--text-muted);
}
.pending-card[open] .pending-chev { transform: rotate(180deg); }
.pending-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 8px;
  background: var(--surface, transparent);
}
.pending-row:last-child { margin-bottom: 0; }
.pending-row-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.pending-role-select {
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  min-width: 140px;
}

/* Data-entry card layout — extracted from inline styles in renderCard */
.de-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
  cursor: pointer;
  user-select: none;
  padding: 4px;
  margin: -4px -4px 8px -4px;
  border-radius: 8px;
  transition: background-color 0.15s ease;
}
.de-card-head:hover { background: var(--surface-2, rgba(255,255,255,0.03)); }
.de-card-head:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.de-card-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  color: var(--text-muted);
  transition: transform 0.2s ease, color 0.15s ease;
  flex-shrink: 0;
}
.de-card.is-expanded .de-card-toggle { transform: rotate(180deg); color: var(--brand); }
.de-card-body { display: none; }
.de-card.is-expanded .de-card-body { display: block; animation: deExpand 0.2s ease; }
@keyframes deExpand {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.de-card-name {
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
}
.de-card-username {
  color: var(--text-muted);
  font-size: 11px;
}
.de-card-status {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.de-section-title { margin-top: 14px; }
.de-field-grid { margin-bottom: 12px; }
.de-field-grid:last-of-type { margin-bottom: 14px; }

/* Data-entry card action row + live score preview pill */
.de-card-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.de-preview {
  margin-inline-end: auto;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
}
.de-preview-label { font-weight: 600; }
.de-preview-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
  color: var(--text);
}
.de-preview-num.is-excellent { color: var(--accent-2); }
.de-preview-num.is-vgood     { color: var(--brand); }
.de-preview-num.is-good      { color: var(--info); }
.de-preview-num.is-medium    { color: var(--warning); }
.de-preview-num.is-weak,
.de-preview-num.is-bad       { color: var(--danger); }
.de-preview-rating {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

/* Per-field soft-bound warning sits under the input */
.field-soft-warn {
  font-size: 11px;
  color: var(--warning);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.field-soft-warn[hidden] { display: none; }

/* Character counter for the notes textarea */
.notes-field textarea {
  resize: vertical;
  min-height: 56px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.5;
}
.char-count {
  font-size: 11px;
  color: var(--text-dim);
  text-align: end;
  margin-top: 2px;
}

/* Keyboard-shortcut hint in page subtitles */
.kbd-hint {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-inline-start: 8px;
  color: var(--text-dim);
  font-size: 12px;
}
kbd {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 2px 6px;
  background: var(--surface-recessed);
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  border-radius: 4px;
  color: var(--text);
}

/* Inline warn strip — used in dataentry cards in place of native confirm() */
.de-warn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin-bottom: 12px;
  background: var(--warning-soft);
  border: 1px solid rgba(196, 114, 0, 0.22);
  border-radius: var(--radius-sm);
  color: var(--warning);
  font-size: 12px;
  font-weight: 500;
}
.de-warn .material-symbols-outlined {
  font-size: 18px;
  font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 20;
}
.de-warn-confirm {
  margin-inline-start: auto;
  background: var(--warning);
  color: #fff;
  border: none;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
}
.de-warn-confirm:hover { filter: brightness(0.95); }

/* Pass/Fail segmented control — used in TL evaluation behavioral fields.
   One tap per field instead of two-click <select>. Pair with a hidden input
   to feed the existing form-submit handler. */
.passfail-toggle {
  display: inline-flex;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-recessed);
  padding: 3px;
  gap: 2px;
  width: 100%;
}
.passfail-toggle button {
  flex: 1;
  background: transparent;
  border: none;
  padding: 8px 14px;
  border-radius: 6px;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  min-height: 36px;
}
.passfail-toggle button:hover:not(.is-active) { color: var(--text); }
.passfail-toggle button.is-active {
  background: var(--surface-solid);
  color: var(--brand);
  box-shadow: var(--shadow-xs);
}
.passfail-toggle button[data-pf-value="0"].is-active { color: var(--danger); }
@media (hover: none), (pointer: coarse) {
  .passfail-toggle button { min-height: 44px; }
}

/* Live password rule checklist */
.pw-rules {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pw-rules li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-dim);
  transition: color 0.15s;
}
.pw-rules li .material-symbols-outlined {
  font-size: 16px;
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 20;
}
.pw-rules li.passed { color: var(--accent-2); }

/* ════════════════════════════════════════════════════════════════════
   PROFILE PAGE
   Hero card + quick stats + editable info + change-password.
   ════════════════════════════════════════════════════════════════════ */

/* ── Hero card ───────────────────────────────────────────────────── */
.profile-hero {
  position: relative;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 30px 32px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  isolation: isolate;
}
.profile-hero-bg {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: -1;
}
.profile-hero-blob {
  position: absolute;
  top: -120px; inset-inline-end: -100px;
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(124, 131, 253, 0.18) 0%, transparent 70%);
  border-radius: 50%;
  filter: blur(40px);
}
[data-theme="dark"] .profile-hero-blob {
  background: radial-gradient(circle, rgba(124, 131, 253, 0.22) 0%, transparent 70%);
}

.profile-hero-body {
  display: flex;
  align-items: center;
  gap: 28px;
}

/* Avatar container — circle with hover affordance + camera button overlay */
.profile-avatar-wrap {
  position: relative;
  flex-shrink: 0;
  width: 110px; height: 110px;
}
.profile-avatar {
  width: 100%; height: 100%;
  border-radius: 50%;
  background: var(--grad-brand);
  color: #ffffff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 42px;
  letter-spacing: -0.02em;
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(71, 77, 197, 0.28),
              inset 0 0 0 4px rgba(255, 255, 255, 0.18);
}
.profile-avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.profile-avatar-fallback { user-select: none; }

.profile-avatar-btn,
.profile-avatar-remove {
  position: absolute;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 2px solid var(--surface-solid);
  background: var(--brand);
  color: #ffffff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
  box-shadow: 0 4px 12px rgba(71, 77, 197, 0.28);
}
.profile-avatar-btn { bottom: 0; inset-inline-end: 0; }
.profile-avatar-btn:hover { transform: scale(1.06); background: var(--brand-2); }
.profile-avatar-btn .material-symbols-outlined { font-size: 18px; }

.profile-avatar-remove {
  top: 0; inset-inline-end: 0;
  background: var(--danger);
  width: 28px; height: 28px;
}
.profile-avatar-remove:hover { transform: scale(1.06); }
.profile-avatar-remove .material-symbols-outlined { font-size: 14px; }

.profile-hero-meta { flex: 1; min-width: 0; }
.profile-hero-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 8px;
  text-wrap: balance;
}
.profile-hero-sub {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.profile-hero-username {
  font-size: 13px;
  color: var(--text-muted);
  font-family: var(--font-en);
}
.profile-hero-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  font-size: 13px;
  color: var(--text-muted);
}
.profile-hero-contact span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.profile-hero-contact .material-symbols-outlined {
  font-size: 16px;
  color: var(--brand);
  font-variation-settings: 'FILL' 1, 'wght' 500;
}

@media (max-width: 600px) {
  .profile-hero { padding: 22px 18px; }
  .profile-hero-body { flex-direction: column; align-items: center; text-align: center; gap: 18px; }
  .profile-avatar-wrap { width: 96px; height: 96px; }
  .profile-avatar { font-size: 38px; }
  .profile-hero-name { font-size: 22px; }
  .profile-hero-contact { justify-content: center; }
}

/* ── Quick stats row ─────────────────────────────────────────────── */
.profile-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}
.profile-stat {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow-xs);
}
.profile-stat-icon {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--brand-soft);
  color: var(--brand);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.profile-stat-icon .material-symbols-outlined {
  font-size: 22px;
  font-variation-settings: 'FILL' 1, 'wght' 500;
}
.profile-stat-body { min-width: 0; }
.profile-stat-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.profile-stat-value {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  word-break: break-word;
}

@media (max-width: 720px) {
  .profile-stats { grid-template-columns: 1fr; }
}

/* ── Editable personal info card ─────────────────────────────────── */
.profile-card-title {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px;
}
.profile-card-title .btn-sm { font-size: 12px; padding: 6px 12px; }

.profile-info-actions {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}

/* ── Avatar crop modal ──────────────────────────────────────────── */
.avatar-crop-stage {
  position: relative;
  width: 280px; height: 280px;
  margin: 0 auto 16px;
  background: var(--surface-recessed);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.avatar-crop-stage.is-dragging { cursor: grabbing; }
.avatar-crop-stage img {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  max-width: none;
  max-height: none;
  pointer-events: none;
  user-select: none;
}
/* Circular preview overlay — darkens everything outside the circle and
   draws a thin contrast border to mark the crop boundary. */
.avatar-crop-frame {
  position: absolute;
  top: 8px; inset-inline-start: 8px;
  width: calc(100% - 16px);
  height: calc(100% - 16px);
  border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45);
  border: 2px solid rgba(255, 255, 255, 0.65);
}
[data-theme="dark"] .avatar-crop-frame {
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.65);
}

.avatar-crop-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 auto 8px;
  max-width: 280px;
}
.avatar-crop-controls input[type="range"] {
  flex: 1;
  accent-color: var(--brand);
  height: 4px;
}
.avatar-crop-icon-btn {
  width: 34px; height: 34px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface-solid);
  color: var(--brand);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.avatar-crop-icon-btn:hover {
  background: var(--brand);
  color: #ffffff;
  border-color: transparent;
}
.avatar-crop-icon-btn .material-symbols-outlined { font-size: 18px; }

.avatar-crop-hint {
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
}

.profile-contact-hint {
  display: block;
  margin-top: 12px;
  font-size: 12px;
  color: var(--text-muted);
}

/* ════════════════════════════════════════════════════════════════════
   AUTH PAGES — split-shell, brand-led
   Two-column layout on desktop: brand storytelling on the left, form on
   the right. Brand panel collapses on mobile and is replaced by a thin
   mini-brand strip in the form header.
   ════════════════════════════════════════════════════════════════════ */
body:has(.auth-shell) { overflow-x: hidden; }
.auth-main {
  padding: 0 !important;
  max-width: none !important;
  margin: 0 !important;
}

.auth-shell {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  min-height: 100vh;
  background: var(--bg);
}
@media (min-width: 961px) {
  body:has(.auth-shell) { overflow: hidden; }
  /* Lock the shell to the viewport height so the form panel's
     overflow-y:auto actually creates an internal scrollbar. With min-height
     alone the grid grew to content height and the body's overflow:hidden
     simply clipped the bottom — tall forms (signup with all errors visible)
     became unreachable below the fold. */
  .auth-shell { height: 100vh; min-height: 0; }
}
/* Mobile shell: stack vertically. Brand becomes a compact hero strip on
   top, form panel scoops up over it via a rounded top edge. Hides the
   heavy storytelling content (features, full trust pill) so the form
   sits above the fold without scrolling. */
@media (max-width: 960px) {
  .auth-shell {
    display: block;
    min-height: 100vh;
    overflow: visible;
  }
}

/* ── Brand panel (left) ─────────────────────────────────────────── */
.auth-brand {
  position: relative;
  /* Static panel — no scroll. The brand content (logo, headline, ~3
     feature bullets, trust pill) is tuned to fit any reasonable desktop
     height, and a stray scrollbar in the middle of the split view
     looks like a layout bug. If the content ever grows past the
     viewport we'd rather clip than show the bar. */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #2c1f6e 0%, #474dc5 55%, #6067df 100%);
  color: #fff;
  isolation: isolate;
}
[data-theme="dark"] .auth-brand {
  background: linear-gradient(135deg, #14163a 0%, #2c2f7a 55%, #474dc5 100%);
}

.auth-brand-bg { position: absolute; inset: 0; pointer-events: none; z-index: -1; }
.auth-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.55;
  animation: authBlobFloat 18s var(--ease) infinite;
}
.auth-blob-1 {
  width: 480px; height: 480px;
  background: radial-gradient(circle, #7c83fd 0%, transparent 70%);
  top: -120px; left: -120px;
}
.auth-blob-2 {
  width: 540px; height: 540px;
  background: radial-gradient(circle, #00837c 0%, transparent 70%);
  bottom: -180px; right: -160px;
  animation-delay: -9s;
  animation-duration: 22s;
}
@keyframes authBlobFloat {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(40px, -30px, 0) scale(1.08); }
}
.auth-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
}

.auth-brand-content {
  position: relative;
  z-index: 1;
  max-width: 460px;
  padding: 60px 56px;
  width: 100%;
}

.auth-brand-logo {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 56px;
}
.auth-brand-mark {
  width: 56px; height: 56px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25);
}
.auth-brand-mark svg { width: 70%; height: 70%; color: #ffffff; }
.auth-brand-wordmark { display: flex; flex-direction: column; line-height: 1; gap: 6px; }
.auth-brand-name {
  font-family: var(--font-en);
  font-weight: 800;
  font-size: 30px;
  letter-spacing: 0.02em;
  color: #ffffff;
}
.auth-brand-tagline {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.30em;
  color: rgba(255, 255, 255, 0.78);
  text-transform: uppercase;
}

.auth-brand-headline {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 36px;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin-bottom: 16px;
  text-wrap: balance;
}
.auth-brand-sub {
  color: rgba(255, 255, 255, 0.78);
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 36px;
  max-width: 380px;
}

.auth-brand-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 48px;
}
.auth-brand-features li {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.92);
  font-weight: 500;
}
.auth-brand-features li .material-symbols-outlined {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.20);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  color: #ffffff;
  flex-shrink: 0;
}

.auth-brand-trust {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: 0.02em;
}
.auth-brand-trust .material-symbols-outlined {
  font-size: 16px;
  color: #4ed6ce;
}

/* ── Form panel (right) ─────────────────────────────────────────── */
.auth-form-panel {
  display: flex;
  flex-direction: column;
  padding: 32px 40px;
  background: var(--bg);
  position: relative;
  overflow-y: auto;
}

.auth-form-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.auth-form-mini-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
}
@media (min-width: 961px) {
  /* On desktop the brand panel carries the wordmark — hide the mini one. */
  .auth-form-mini-brand { visibility: hidden; }
}
.auth-form-mini-mark {
  width: 32px; height: 32px;
  border-radius: 9px;
  background: var(--grad-brand);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(71, 77, 197, 0.28);
}
.auth-form-mini-mark svg { width: 70%; height: 70%; color: #ffffff; }
.auth-form-mini-name {
  font-family: var(--font-en);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--text);
}
.auth-form-mini-name span {
  font-weight: 600;
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.18em;
  margin-inline-start: 6px;
}

.auth-form-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.auth-form-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  /* `safe center` keeps the form vertically centered when it fits, but
     falls back to flex-start once content would overflow — without the
     `safe` keyword, `center` pushes the top of a tall form (e.g. signup
     with errors visible) above the panel's top edge and there's no way
     to scroll up to it (the body itself is overflow:hidden on desktop). */
  justify-content: safe center;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding: 24px 0;
}
@media (max-width: 960px) {
  .auth-form-card { padding-top: 8px; padding-bottom: 24px; }
}

.auth-form-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 8px;
}
.auth-form-sub {
  color: var(--text-muted);
  font-size: 14px;
  margin-bottom: 28px;
}

/* Input pill with leading icon. Built to feel premium without losing
   the design system's input baseline (focus ring, validation states).

   ── A note on RTL ────────────────────────────────────────────────
   We use explicit `[dir]`-keyed physical positioning rather than
   `inset-inline-*` for the icons. Google's Material Symbols CSS sets
   `direction: ltr` on `.material-symbols-outlined` (so the ligature
   names render correctly). Logical inset properties resolve against
   the element's OWN writing direction, not its parent's — so an
   `inset-inline-start` on a Material icon stayed pinned to the left
   even on RTL pages, leaving the lock and the eye stacked together
   on the left edge of the password input. The `[dir]` rules below
   bypass that and pin each icon to the correct physical edge. */
.auth-input-wrap {
  position: relative;
}
.auth-input-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  color: var(--text-dim);
  pointer-events: none;
  transition: color 0.15s;
}
html[dir="ltr"] .auth-input-icon { left: 14px; right: auto; }
html[dir="rtl"] .auth-input-icon { right: 14px; left: auto; }
.auth-input-wrap input {
  padding-inline-start: 44px;
  padding-inline-end: 14px;
  height: 48px;
  font-size: 14px;
}
/* When a visibility toggle is present, reserve space for it so the typed
   text never slides under the eye icon (was 14px — too tight; in RTL the
   placeholder visibly overlapped the toggle). */
.auth-input-wrap:has(.pw-toggle) input {
  padding-inline-end: 48px;
}
.auth-input-wrap:focus-within .auth-input-icon {
  color: var(--brand);
}
.pw-toggle.pw-toggle-flush {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
html[dir="ltr"] .pw-toggle.pw-toggle-flush { right: 4px; left: auto; }
html[dir="rtl"] .pw-toggle.pw-toggle-flush { left: 4px; right: auto; }
@media (hover: none), (pointer: coarse) {
  .auth-input-wrap:has(.pw-toggle) input { padding-inline-end: 56px; }
}

.auth-submit {
  height: 50px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin-top: 8px;
}

.auth-switch {
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 20px;
}
.auth-switch a {
  color: var(--brand);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.15s;
}
.auth-switch a:hover { color: var(--brand-2); text-decoration: underline; }
.auth-switch-sep { margin: 0 8px; color: var(--text-dim); }
.auth-switch a + a, .auth-switch a + span { margin-inline-start: 4px; }

/* Sign-up success state — replaces the form once the request is queued. */
.auth-success {
  text-align: center;
  padding: 24px 8px 8px;
}
.auth-success-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(69,241,187,0.15), rgba(198,191,255,0.15));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.auth-success-icon .material-symbols-outlined {
  font-size: 32px;
  color: var(--brand);
}
.auth-success-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 10px;
}
.auth-success-body {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}

.auth-form-footer {
  text-align: center;
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.04em;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--outline-variant);
}

/* ── Mobile auth (≤960px) — single-column hero + scoop-card form ───── */
@media (max-width: 960px) {
  /* Brand becomes a compact storytelling hero strip on top. Keeps the
     gradient + blobs so the page feels rich, drops features/heavy text
     to keep the form above the fold. */
  .auth-brand {
    display: flex;
    min-height: 320px;
    padding: 24px 22px 64px;
    align-items: stretch;
    justify-content: flex-start;
    border-radius: 0;
  }
  .auth-brand-content {
    padding: 8px 0 0;
    max-width: none;
    width: 100%;
    text-align: center;
  }
  .auth-brand-logo {
    margin-bottom: 22px;
    justify-content: center;
  }
  .auth-brand-mark { width: 52px; height: 52px; border-radius: 14px; }
  .auth-brand-name { font-size: 26px; }
  .auth-brand-tagline { font-size: 10px; letter-spacing: 0.28em; }
  .auth-brand-headline {
    font-size: 22px;
    line-height: 1.25;
    margin-bottom: 8px;
    text-wrap: balance;
  }
  .auth-brand-sub {
    font-size: 13px;
    line-height: 1.55;
    margin: 0 auto 18px;
    max-width: 320px;
  }
  /* Drop the feature list on mobile — the hero's job is brand setup,
     not selling. Trust badge stays as a centered chip. */
  .auth-brand-features { display: none; }
  .auth-brand-trust {
    margin: 0 auto;
    font-size: 11px;
    padding: 6px 12px;
  }

  /* Form panel "scoops" up over the bottom of the hero — modern app feel,
     keeps the focal point on the form once the user has scrolled
     ~250px in (or just sees it directly on tall phones). */
  .auth-form-panel {
    margin-top: -36px;
    background: var(--surface-solid);
    border: 1px solid var(--border);
    border-radius: 28px 28px 0 0;
    padding: 22px 22px 28px;
    position: relative;
    z-index: 2;
    box-shadow: 0 -12px 30px rgba(20, 24, 40, 0.08);
    min-height: auto;
  }
  [data-theme="dark"] .auth-form-panel {
    box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.40);
  }

  /* Header on mobile: hide the redundant mini-brand (hero shows it),
     anchor the toggles to the right so they float on the rounded edge. */
  .auth-form-mini-brand { display: none; }
  .auth-form-header {
    margin-bottom: 4px;
    justify-content: flex-end;
  }
  .auth-form-actions { gap: 8px; }
  .auth-form-actions .theme-toggle,
  .auth-form-actions .lang-toggle { width: 40px; height: 40px; }

  .auth-form-card {
    padding: 12px 0 16px;
    max-width: 100%;
  }
  .auth-form-title { font-size: 24px; }
  .auth-form-sub { font-size: 13px; margin-bottom: 22px; }

  .auth-form-footer {
    margin-top: 22px;
    font-size: 10px;
    padding-top: 14px;
  }
}

/* Tightest phones — pull the hero in further so the form reaches the
   fold even at 360×640. */
@media (max-width: 480px) {
  .auth-brand { min-height: 280px; padding: 20px 18px 56px; }
  .auth-brand-headline { font-size: 20px; }
  .auth-brand-sub { font-size: 12px; max-width: 280px; }
  .auth-form-panel { padding: 18px 18px 24px; }
  .auth-form-title { font-size: 22px; margin-bottom: 6px; }
  .auth-form-sub { margin-bottom: 18px; }
}

.error-msg {
  background: var(--danger-soft);
  border: 1px solid rgba(186, 26, 26, 0.25);
  color: var(--danger);
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  margin-bottom: 16px;
  display: none;
  animation: slideUp 0.3s var(--ease);
}
.error-msg.show { display: block; }

.success-msg {
  background: rgba(0, 131, 124, 0.08);
  border: 1px solid rgba(0, 131, 124, 0.32);
  color: var(--accent-2);
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  margin-bottom: 16px;
  display: none;
  animation: slideUp 0.35s var(--ease-bounce);
}
.success-msg.show { display: block; }

/* ──────────────────────────────────────────────────────────────────
   MODAL — glass
   ────────────────────────────────────────────────────────────────── */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 24, 40, 0.50);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 500;
  padding: 20px;
  animation: fadeIn 0.2s var(--ease);
}

.modal-backdrop.open { display: flex; }

.modal {
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  animation: fadeIn 0.2s var(--ease);
}

.modal-header {
  padding: 18px 22px;
  background: var(--tint-soft-strong);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--outline-variant);
}

.modal-title { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; color: var(--brand); }
.modal-close {
  background: transparent; border: none;
  color: var(--text-muted); cursor: pointer;
  font-size: 22px; padding: 4px 10px;
  font-family: inherit;
  transition: all 0.15s;
  border-radius: var(--radius-sm);
}
.modal-close:hover { color: var(--danger); background: var(--danger-soft); }
.modal-body { padding: 22px; }
.modal-footer {
  padding: 16px 22px;
  background: var(--tint-soft);
  display: flex;
  gap: 10px;
  justify-content: flex-start;
  border-top: 1px solid var(--outline-variant);
}

/* ──────────────────────────────────────────────────────────────────
   KPI CELLS
   ────────────────────────────────────────────────────────────────── */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px;
}

.kpi-cell {
  border-radius: var(--radius);
  padding: 16px;
  transition: box-shadow 0.2s var(--ease);
}

.kpi-cell:hover {
  box-shadow: var(--shadow-sm);
}

.kpi-cell-label {
  font-size: 10px; color: var(--text-muted);
  margin-bottom: 6px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.kpi-cell-value {
  font-size: 22px;
  font-weight: 700;
  font-family: var(--font-display);
  letter-spacing: -0.02em;
  color: var(--text);
}
.kpi-cell-detail {
  font-size: 10px;
  color: var(--text-dim);
  margin-top: 4px;
  line-height: 1.5;
  font-weight: 500;
}
.kpi-cell-bar { margin-top: 10px; }

.clickable { cursor: pointer; }

/* ──────────────────────────────────────────────────────────────────
   CONTROLS
   ────────────────────────────────────────────────────────────────── */
.controls {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
  align-items: flex-end;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
}

.controls .field { margin-bottom: 0; flex: 0 0 auto; min-width: 140px; }
.controls .spacer { flex: 1; }

/* Sticky filter bar — opt-in via .controls-sticky. Pages that have a
   tall headline (charts, summary cards) before the actual list use this
   so search/filter inputs remain visible while the user scrolls through
   results. The bar lifts onto a glass surface with a subtle shadow when
   pinned, and CRITICALLY shrinks when stuck so it doesn't eat half the
   viewport on mobile. The .is-stuck class is toggled by an
   IntersectionObserver in common.js once the bar pins to the top. */
.controls-sticky {
  position: sticky;
  top: 6px;
  z-index: 30;
  background: var(--surface-solid, var(--surface));
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  transition: padding 0.18s var(--ease), gap 0.18s var(--ease),
              box-shadow 0.18s var(--ease), border-radius 0.18s var(--ease);
}
.controls-sticky.is-stuck {
  box-shadow: var(--shadow-sm);
  padding: 8px 12px;
  gap: 8px;
}
/* When stuck, drop the field labels — they're permanent decoration that
   doubles the bar's height for no information gain once the user knows
   what each input does. The placeholder text on the search input still
   carries the hint. */
.controls-sticky.is-stuck label {
  display: none;
}
.controls-sticky.is-stuck .field {
  margin-bottom: 0;
  gap: 0;
}
.controls-sticky.is-stuck .field input,
.controls-sticky.is-stuck .field select,
.controls-sticky.is-stuck .field button {
  padding: 6px 10px;
  font-size: 13px;
  min-height: 34px;
}
.controls-sticky.is-stuck #progress {
  font-size: 11px !important;
}

@media (max-width: 720px) {
  /* On mobile the controls always wrap to multi-line; once stuck we
     switch to a horizontal scroller so all inputs sit on one row and
     the bar stays one-line tall regardless of how many filters there
     are. The user swipes horizontally to reach the right-most filter. */
  .controls-sticky.is-stuck {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 6px 8px;
    gap: 6px;
  }
  .controls-sticky.is-stuck .field {
    flex: 0 0 auto;
    min-width: 0;
    width: auto;
  }
  .controls-sticky.is-stuck #progress,
  .controls-sticky.is-stuck .spacer {
    display: none;
  }
  /* Search field gets priority width so the user can actually type. */
  .controls-sticky.is-stuck #searchBox { width: 180px; }
  .controls-sticky.is-stuck select { width: 110px; }
}

/* ──────────────────────────────────────────────────────────────────
   EVALUATION PAGE TABS
   ────────────────────────────────────────────────────────────────── */
.eval-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--border);
  margin-bottom: 20px;
}
.eval-tab {
  padding: 10px 24px;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  color: var(--text-muted);
  transition: color 0.15s var(--ease), border-color 0.15s var(--ease);
  font-family: inherit;
}
.eval-tab.is-active { color: var(--brand); border-bottom-color: var(--brand); }
.eval-tab:hover:not(.is-active) { color: var(--text); }

/* ──────────────────────────────────────────────────────────────────
   CHART CARDS
   ────────────────────────────────────────────────────────────────── */
.chart-card {
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  margin-bottom: 20px;
  animation: fadeIn 0.6s var(--ease) both;
}

.chart-card h3 {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 16px;
}

.plotly-container { min-height: 320px; }
.plotly-container.short { min-height: 260px; }
.plotly-container.tall { min-height: 380px; }

/* ──────────────────────────────────────────────────────────────────
   CUSTOM TREEMAP — replaces Plotly's treemap on the finance page
   so we get a guaranteed-no-gaps layout. The .ct-treemap class is
   added by Charts.drawTreemap() to whatever element it renders into.
   ────────────────────────────────────────────────────────────────── */
.ct-treemap {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: inherit;
  overflow: hidden;
  border-radius: var(--radius);
}
.ct-tile {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  /* Subtle inset shadow on hover replaces Plotly's drill-down zoom —
     the user gets visual feedback without the layout shifting. */
  transition: filter 0.18s var(--ease), transform 0.18s var(--ease);
  cursor: default;
  /* Anti-aliased corners — small radius keeps the mosaic feel without
     making tiles look like badges. */
  border-radius: 4px;
  overflow: hidden;
}
.ct-tile:hover {
  filter: brightness(1.08);
  z-index: 2;
}
/* Clickable tiles get a pointer cursor and a slightly stronger hover lift
   so they feel actionable. Keyboard users see the standard focus ring. */
.ct-tile.is-clickable { cursor: pointer; }
.ct-tile.is-clickable:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
}
.ct-tile.is-clickable:focus-visible {
  outline: 2px solid var(--brand, #474dc5);
  outline-offset: 2px;
  z-index: 3;
}
.ct-tile-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px 8px;
  line-height: 1.25;
  max-width: 100%;
  max-height: 100%;
}
.ct-tile-label {
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.ct-tile-value {
  font-weight: 500;
  margin-top: 2px;
  opacity: 0.92;
  white-space: nowrap;
}

/* ──────────────────────────────────────────────────────────────────
   LOADING / EMPTY
   ────────────────────────────────────────────────────────────────── */
.loading {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--outline-variant);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.empty-state {
  text-align: center;
  padding: 80px 20px;
  color: var(--text-muted);
}

.empty-state-icon {
  width: 72px; height: 72px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand);
  display: flex; align-items: center; justify-content: center;
  font-size: 30px;
}
.empty-state-icon .material-symbols-outlined {
  font-size: 36px;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 40;
}

/* Team-perf card "top performer" line */
.team-perf-top {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
}
.team-perf-top .material-symbols-outlined {
  font-size: 14px;
  color: var(--warning);
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 20;
}

/* ──────────────────────────────────────────────────────────────────
   FORM SECTIONS
   ────────────────────────────────────────────────────────────────── */
.form-section {
  border-radius: var(--radius-lg);
  padding: 26px;
  margin-bottom: 20px;
  animation: slideUp 0.5s var(--ease) both;
}

.form-section-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 18px;
}

/* ──────────────────────────────────────────────────────────────────
   RANK
   ────────────────────────────────────────────────────────────────── */
.rank {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  font-family: var(--font-display);
  background: var(--surface-3);
  color: var(--text-muted);
  border: 1px solid var(--outline-variant);
}

.rank.r1 { background: linear-gradient(135deg, #ffd166, #ff9b1f); color: #fff; box-shadow: 0 4px 14px rgba(255, 155, 31, 0.35); border-color: transparent; }
.rank.r2 { background: linear-gradient(135deg, #e2e8f0, #94a3b8); color: #1f2937; border-color: transparent; }
.rank.r3 { background: linear-gradient(135deg, #b45309, #92400e); color: #fff; border-color: transparent; }

/* ──────────────────────────────────────────────────────────────────
   NUMERIC / MONEY
   ────────────────────────────────────────────────────────────────── */
.money {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* ──────────────────────────────────────────────────────────────────
   TL eval / Team-leader score helpers (kpi rows)
   ────────────────────────────────────────────────────────────────── */
.kpi-row {
  display: grid;
  grid-template-columns: 1fr 2fr 1.4fr;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  border-radius: var(--radius);
  margin-bottom: 8px;
  background: var(--tint-clear);
  border: 1px solid var(--border);
  transition: background 0.2s;
}
.kpi-row:hover { background: var(--tint-clear-strong); }
.kpi-row .kpi-label { font-size: 13px; font-weight: 600; color: var(--text); }
.kpi-row .kpi-bar-wrap { height: 8px; background: var(--surface-3); border-radius: 9999px; overflow: hidden; }
.kpi-row .kpi-bar { height: 100%; border-radius: 9999px; transition: width 0.6s var(--ease); }
.kpi-row .kpi-nums { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11px; color: var(--text-muted); }
.kpi-row .kpi-nums .actual  { font-weight: 700; color: var(--text); font-family: var(--font-display); }
.kpi-row .kpi-nums .target  { color: var(--text-dim); font-family: var(--font-display); }
.kpi-row .kpi-nums .pct     { font-weight: 700; color: var(--brand); padding: 2px 8px; background: rgba(124, 131, 253, 0.08); border-radius: 9999px; font-family: var(--font-display); }
.kpi-row .kpi-nums .weight  { color: var(--text-dim); font-size: 10px; font-family: var(--font-display); }
.kpi-row .kpi-nums .sep     { color: var(--text-dim); }

@media (max-width: 768px) {
  .kpi-row { grid-template-columns: 1fr; gap: 8px; }
}

/* ──────────────────────────────────────────────────────────────────
   PROPFINDER UI
   ────────────────────────────────────────────────────────────────── */
.view-toggle {
  display: inline-flex;
  background: var(--surface-recessed);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  padding: 3px;
  gap: 2px;
}
.view-toggle button {
  background: transparent;
  border: none;
  color: var(--text-muted);
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.2s var(--ease);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.view-toggle button.active {
  background: var(--grad-brand);
  color: #fff;
  box-shadow: 0 4px 14px rgba(71, 77, 197, 0.30);
}
.view-toggle button:hover:not(.active) { color: var(--brand); }

.pf-filter-bar {
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-bottom: 22px;
}
.pf-filter-bar .pf-filter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.pf-filter-bar .pf-filter-head .pf-title-row {
  font-size: 12px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.pf-filter-head-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

/* Always-visible search field with leading icon + trailing clear button */
.pf-search-field { margin-bottom: 14px; }
@media (max-width: 768px) {
  /* Sticky on mobile so reps mid-scroll can keep refining the search */
  .pf-search-field {
    position: sticky;
    top: 64px;
    background: var(--surface-solid);
    margin-inline: -14px;
    padding: 10px 14px;
    z-index: 10;
    border-bottom: 1px solid var(--border);
    margin-bottom: 14px;
  }
}
.pf-search-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.pf-search-input-wrap input {
  padding-inline-start: 40px;
  padding-inline-end: 40px;
}
.pf-search-icon {
  position: absolute;
  font-size: 18px;
  color: var(--text-dim);
  pointer-events: none;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}
/* Pin to the leading edge with explicit physical sides — Material Symbols
   spans carry `direction: ltr`, which makes `inset-inline-start` resolve
   to `left` even on RTL pages (search icon would stay stuck on the wrong
   edge in Arabic). Same pattern as `.auth-input-icon`. */
html[dir="ltr"] .pf-search-icon { left: 12px; right: auto; }
html[dir="rtl"] .pf-search-icon { right: 12px; left: auto; }
.pf-search-clear {
  position: absolute;
  inset-inline-end: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.15s, color 0.15s;
}
.pf-search-clear:hover { background: var(--surface-recessed); color: var(--text); }
.pf-search-clear .material-symbols-outlined {
  font-size: 18px;
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 20;
}
.pf-search-clear[hidden] { display: none; }

/* Collapsible advanced filter group */
.pf-filters-details { margin-bottom: 0; }
.pf-filters-summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface-solid);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  margin-bottom: 14px;
  transition: color 0.15s, border-color 0.15s;
  min-height: 36px;
}
.pf-filters-summary::-webkit-details-marker { display: none; }
.pf-filters-summary:hover { color: var(--brand); border-color: var(--brand); }
.pf-filters-summary .material-symbols-outlined {
  font-size: 16px;
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 20;
}
.pf-filters-summary .pf-filters-chevron {
  margin-inline-start: auto;
  transition: transform 0.2s var(--ease);
}
.pf-filters-details[open] .pf-filters-summary .pf-filters-chevron {
  transform: rotate(180deg);
}

.pf-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}
.pf-filter-grid .field { margin-bottom: 0; }

.range-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.range-row input { padding: 9px 10px; font-size: 12px; }

.pf-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 12px;
  min-height: 0;
}
.pf-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px 5px 14px;
  background: var(--brand-soft);
  border: 1px solid rgba(71, 77, 197, 0.20);
  color: var(--brand);
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 600;
}
.pf-chip button {
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  opacity: 0.75;
  transition: opacity 0.15s, background 0.15s;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  padding: 0;
}
.pf-chip button:hover { opacity: 1; background: rgba(71, 77, 197, 0.10); }
@media (hover: none), (pointer: coarse) {
  .pf-chip button { width: 28px; height: 28px; }
  .pf-chip { padding-block: 6px; }
}

.pf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 16px;
}
.pf-card {
  border-radius: var(--radius-lg);
  padding: 18px;
  cursor: pointer;
  transition: box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pf-card:hover {
  box-shadow: var(--shadow-sm);
  border-color: var(--border-strong);
}

.pf-card-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 10px;
  position: relative;
  z-index: 1;
}
.pf-card-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--text);
}
.pf-card-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}
.pf-card-status { flex-shrink: 0; }

.pf-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  position: relative; z-index: 1;
}
.pf-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: var(--surface-recessed);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-pill);
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
}
.pf-pill .pf-pill-icon { font-size: 14px; opacity: 0.85; }
.pf-pill .material-symbols-outlined.pf-pill-icon {
  font-size: 14px;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}
.pf-detail-hero .pf-hero-sub .material-symbols-outlined {
  font-size: 14px;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
  vertical-align: -2px;
}
.view-toggle .material-symbols-outlined {
  font-size: 16px;
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 20;
}
.pf-pill.brand   { background: var(--brand-soft);     color: var(--brand);     border-color: rgba(71, 77, 197, 0.25); }
.pf-pill.accent  { background: var(--accent-soft);    color: var(--accent-2);  border-color: rgba(0, 131, 124, 0.22); }
.pf-pill.warn    { background: rgba(255, 184, 77, 0.16); color: var(--warning);       border-color: rgba(255, 184, 77, 0.30); }
.pf-pill.discount { background: var(--warning-soft); color: var(--warning); border-color: rgba(196, 114, 0, 0.30); font-weight: 700; }
/* Multi-plan indicator: signals to the user (before opening the detail
   modal) that the unit has more than one payment plan to choose from. */
.pf-pill.plans { background: rgba(71, 77, 197, 0.10); color: var(--brand); border-color: rgba(71, 77, 197, 0.30); font-weight: 700; }

.pf-card-price {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: auto;
  position: relative; z-index: 1;
}
.pf-card-price .label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}
.pf-card-price .value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 19px;
  color: var(--text);
  letter-spacing: -0.02em;
}
.pf-card-price .cash {
  font-size: 11px;
  color: var(--accent-2);
  font-weight: 600;
  margin-top: 2px;
}
.pf-empty {
  background: var(--surface-solid);
  border: 1px dashed var(--outline-variant);
  border-radius: var(--radius-lg);
  padding: 60px 20px;
  text-align: center;
  color: var(--text-muted);
}

/* Banner shown when /api/units result was truncated to the LIMIT cap. */
.pf-truncation-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0;
  padding: 10px 14px;
  background: color-mix(in oklch, var(--warning) 12%, var(--surface-solid));
  border: 1px solid color-mix(in oklch, var(--warning) 35%, var(--border));
  border-radius: var(--radius-md);
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
}
.pf-truncation-notice .material-symbols-outlined {
  font-size: 20px;
  color: var(--warning);
  flex-shrink: 0;
}

/* Non-interactive card surface — same shape as .pf-card but no hover/cursor */
.surface-card {
  border-radius: var(--radius-lg);
  padding: 18px;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Chart-card skeleton — sits inside .plotly-container until Plotly mounts.
   _drawChart() in charts.js purges Plotly state and wipes innerHTML before
   each Plotly.newPlot call, removing the skeleton + any leftover empty-state. */
.chart-skel {
  width: 100%;
  height: 100%;
  min-height: 240px;
  border-radius: var(--radius);
  background: var(--surface-3);
}
@media (prefers-reduced-motion: no-preference) {
  .chart-skel {
    background: linear-gradient(90deg, var(--surface-3) 0%, var(--surface-2) 50%, var(--surface-3) 100%);
    background-size: 200% 100%;
    animation: skelShimmer 1.6s linear infinite;
  }
}

/* Skeleton placeholder cards while /api/units is loading */
.pf-skel {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface-solid);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 180px;
}
.pf-skel-head, .pf-skel-meta, .pf-skel-price {
  background: var(--surface-3);
  border-radius: var(--radius-sm);
}
.pf-skel-head  { height: 22px; width: 70%; }
.pf-skel-meta  { height: 18px; width: 90%; }
.pf-skel-price { height: 28px; width: 50%; margin-top: auto; }
@media (prefers-reduced-motion: no-preference) {
  .pf-skel-head, .pf-skel-meta, .pf-skel-price {
    background: linear-gradient(90deg, var(--surface-3) 0%, var(--surface-2) 50%, var(--surface-3) 100%);
    background-size: 200% 100%;
    animation: skelShimmer 1.6s linear infinite;
  }
  @keyframes skelShimmer { to { background-position: -200% 0; } }
}

/* Sales-only freshness indicator on the units count card */
.pf-freshness {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent-2);
  background: var(--accent-soft);
  border: 1px solid rgba(0, 131, 124, 0.22);
  border-radius: var(--radius-pill);
  padding: 3px 10px;
  margin-inline-start: auto;
  text-transform: none;
  letter-spacing: 0;
}
.pf-freshness.is-stale {
  color: var(--warning);
  background: var(--warning-soft);
  border-color: rgba(196, 114, 0, 0.22);
}

.modal.modal-wide { max-width: 800px; }

.pf-detail-hero {
  background: var(--surface-2);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  padding: 22px;
  margin-bottom: 18px;
}
.pf-detail-hero .pf-hero-name {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
  color: var(--text);
}
.pf-detail-hero .pf-hero-sub {
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-weight: 500;
}
.pf-detail-hero .pf-hero-sub span { display: inline-flex; align-items: center; gap: 4px; }

.pf-detail-price {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 18px;
}
.pf-price-card {
  background: var(--surface-solid);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius);
  padding: 16px;
}
.pf-price-card .label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  margin-bottom: 6px;
}
.pf-price-card .value {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
}
.pf-price-card.cash .value {
  color: var(--accent-2);
}
.pf-price-card .sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}

.pf-section { margin-bottom: 18px; }
.pf-section-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
}

.pf-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px 18px;
}
.pf-detail-item {
  background: var(--surface-recessed);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  border: 1px solid var(--outline-variant);
}
.pf-detail-item .k {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  margin-bottom: 4px;
}
.pf-detail-item .v {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  word-break: break-word;
}

/* Detail-item that needs to span both columns of pf-detail-grid — used by
   the payment-plans dropdown so the <select> doesn't get a cramped width. */
.pf-detail-item-wide { grid-column: 1 / -1; }

/* Payment-plans dropdown inside the unit detail modal. We hide the
   native chevron (which renders inconsistently across mobile browsers)
   and paint our own brand-tinted chevron via a CSS background-image so
   the user immediately sees this is a picker, not a static cell. */
.pf-plan-select-wrap {
  position: relative;
  display: block;
  margin-top: 2px;
}
.pf-plan-select-wrap::after {
  content: "";
  position: absolute;
  top: 50%;
  inset-inline-end: 14px;
  width: 10px; height: 10px;
  border-right: 2px solid var(--brand);
  border-bottom: 2px solid var(--brand);
  transform: translateY(-65%) rotate(45deg);
  pointer-events: none;
}
.pf-plan-select {
  width: 100%;
  padding: 10px 38px 10px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  background: var(--surface-solid);
  border: 1px solid var(--brand);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: inherit;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-shadow: 0 0 0 3px rgba(71, 77, 197, 0.08);
}
html[dir="rtl"] .pf-plan-select { padding: 10px 14px 10px 38px; }
.pf-plan-select:focus {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.pf-plan-select-hint {
  font-size: 11px;
  color: var(--brand);
  font-weight: 700;
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.pf-plan-select-hint .material-symbols-outlined {
  font-size: 14px;
  font-variation-settings: 'FILL' 1, 'wght' 500;
}

.pf-table-wrap { overflow-x: auto; }

/* ──────────────────────────────────────────────────────────────────
   RTL / LTR
   ────────────────────────────────────────────────────────────────── */
html[dir="rtl"] { text-align: right; }
html[dir="ltr"] { text-align: left; }

/* ──────────────────────────────────────────────────────────────────
   PRINT
   ────────────────────────────────────────────────────────────────── */
@media print {
  body { background: white; color: black; }
  .topnav, .btn, .controls, .modal-backdrop, .toast { display: none !important; }
  .card, .chart-card, .stat, .form-section, .table-wrap {
    background: white; color: black;
    border: 1px solid #ccc;
    box-shadow: none;
  }
  .page-title { color: black !important; }
}

/* ──────────────────────────────────────────────────────────────────
   MICRO-INTERACTIONS
   ────────────────────────────────────────────────────────────────── */
.lang-toggle.spin-once { animation: spinOnce 0.45s var(--ease); }

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  will-change: opacity, transform;
}
.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ──────────────────────────────────────────────────────────────────
   KPI TILES + BENTO LAYOUT
   ────────────────────────────────────────────────────────────────── */
.kpi-tile {
  position: relative;
  padding: 22px;
  border-radius: var(--radius-lg);
  background: var(--surface-solid);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.kpi-tile:hover { box-shadow: var(--shadow-sm); }
/* tile-brand / tile-accent / tile-warm / tile-coral / tile-violet variants now
   carry state via the icon color/background only — body stays flat surface. */

.kpi-tile-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px;
}
.kpi-tile-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--brand-soft);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  color: var(--brand);
}
.kpi-tile-icon .material-symbols-outlined {
  font-size: 22px;
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}
.tile-accent  .kpi-tile-icon { background: var(--accent-soft);    color: var(--accent-2); }
.tile-warm    .kpi-tile-icon { background: var(--warning-soft);   color: var(--warning); }
.tile-coral   .kpi-tile-icon { background: var(--secondary-soft); color: var(--secondary); }
.tile-violet  .kpi-tile-icon { background: var(--brand-soft); color: var(--brand); }

.kpi-tile-value {
  font-family: var(--font-display);
  font-size: 32px; font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1;
}
.kpi-tile-value.is-name {
  font-size: 18px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kpi-tile-value.money-compact { font-size: 26px; }

.kpi-tile-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 6px;
  font-weight: 500;
}

/* Bento blocks grid (for dashboard rich layout) */
.bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 18px;
  margin-bottom: 22px;
}
.bento > * { min-width: 0; }
.bento .span-3 { grid-column: span 3; }
.bento .span-4 { grid-column: span 4; }
.bento .span-5 { grid-column: span 5; }
.bento .span-6 { grid-column: span 6; }
.bento .span-7 { grid-column: span 7; }
.bento .span-8  { grid-column: span 8; }
.bento .span-9  { grid-column: span 9; }
.bento .span-10 { grid-column: span 10; }
.bento .span-11 { grid-column: span 11; }
.bento .span-12 { grid-column: 1 / -1; }

/* Tablet — keep small tiles 2-col so a 4-up row of stat tiles doesn't
   become a 4-tall stack, which dwarfs the rest of the layout. Bigger
   spans (5+) collapse to full width because at this viewport they're
   genuinely chart-sized and benefit from horizontal room. */
@media (min-width: 720px) and (max-width: 1100px) {
  .bento .span-3, .bento .span-4 { grid-column: span 6; }
  .bento .span-5, .bento .span-6, .bento .span-7, .bento .span-8 {
    grid-column: span 12;
  }
}

@media (max-width: 720px) {
  .bento .span-3, .bento .span-4, .bento .span-5,
  .bento .span-6, .bento .span-7, .bento .span-8 {
    grid-column: span 12;
  }
}

/* ──────────────────────────────────────────────────────────────────
   RESPONSIVE
   ────────────────────────────────────────────────────────────────── */
/* Below 1025px the sidebar becomes a drawer that slides in from the burger. */
@media (max-width: 1024px) {
  .app-shell.has-sidebar .main { padding: 24px 22px 80px; }
  .app-shell.has-sidebar .topnav { padding-left: 18px; padding-right: 18px; }
  .topnav-burger { display: flex; }

  .sidebar {
    transform: translateX(-110%);
  }
  html[dir="rtl"] .sidebar { transform: translateX(110%); }
  .sidebar.open { transform: translateX(0) !important; }

  /* topnav-links is hidden on mobile — sidebar replaces it */
  .topnav-links { display: none; }
}

@media (max-width: 768px) {
  .main { padding: 16px 14px 80px; }
  .page-header { margin-bottom: 22px; gap: 10px; }
  .page-title { font-size: 22px; }
  .page-subtitle { font-size: 12px; }

  .topnav { padding: 10px 14px; gap: 8px; min-height: 56px; }
  .topnav-brand span { display: none; }

  .user-info { display: none; }
  .topnav-user { padding: 4px; }

  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 22px; }
  .stat { padding: 16px 18px; }
  .stat-value { font-size: 22px; }

  .field-row, .field-row.four, .field-row.five { grid-template-columns: 1fr; }

  .card, .form-section, .chart-card {
    padding: 18px;
    margin-bottom: 14px;
    border-radius: var(--radius);
  }
  .controls { padding: 14px; gap: 10px; margin-bottom: 18px; }
  .controls .field { min-width: 0; width: 100%; }

  .btn { padding: 11px 16px; font-size: 13px; }
  .btn-sm { padding: 8px 12px; font-size: 12px; }

  /* Tables get horizontal scroll on mobile so the action column (edit /
     activate / delete) doesn't get clipped. The wrapper switches from
     overflow:hidden → overflow-x:auto, and a min-width on the table forces
     it to keep its column structure instead of cramming. */
  .table-wrap {
    border-radius: var(--radius);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .table-wrap table { min-width: 720px; }
  th, td { padding: 12px 10px; font-size: 12px; }

  .modal-backdrop { padding: 0; align-items: flex-end; }
  .modal {
    max-width: 100%;
    max-height: 92vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    animation: slideUp 0.35s var(--ease-bounce);
  }
  .modal-header, .modal-footer { padding: 14px 16px; }
  .modal-body { padding: 16px; }
  .modal-footer { flex-wrap: wrap; }
  .modal-footer .btn { flex: 1 1 auto; }

  /* Mobile chart sizing — taller defaults so legends + axis ticks don't
     squeeze the plot area into a sliver. The treemap especially needs
     extra height because each rep gets a tile and a 240px square only
     fits 4-5 readable cells. The bento grid already collapses to one
     column < 1100px so charts get the full viewport width. */
  .chart-card { padding: 14px 14px 12px; margin-bottom: 12px; }
  .chart-card h3 { font-size: 12px; margin-bottom: 12px; }
  .chart-card-hint { font-size: 10px; }
  .plotly-container { min-height: 280px; }
  .plotly-container.short { min-height: 220px; }
  .plotly-container.tall { min-height: 360px; }

  /* Headline (avg-KPI score) — on mobile the score card carries the full
     story and the gauge card just adds an awkward, mostly-empty card.
     Hide the gauge entirely below 768px and tighten the score card so
     the headline matches the visual scale of the stat tiles below it. */
  .tl-headline { gap: 12px; margin-bottom: 14px; grid-template-columns: 1fr; }
  .tl-headline-gauge { display: none; }
  .tl-headline-score { padding: 18px 18px 16px; }
  .tl-headline-value { font-size: 42px; margin-top: 2px; }
  .tl-headline-rating { font-size: 12px; margin-top: 4px; }
  .tl-headline-meta { font-size: 12px; margin-top: 8px; }

  .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .kpi-cell { padding: 12px; }
  .kpi-cell-value { font-size: 17px; }

  .toast { font-size: 12px; padding: 10px 16px; max-width: calc(100vw - 32px); }

  .kpi-tile { padding: 18px; }
  .kpi-tile-value { font-size: 24px; }
  .pf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .pf-detail-price { grid-template-columns: 1fr; }
  .pf-detail-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .pf-filter-bar { padding: 14px; }
  .pf-filters-summary { display: flex; width: 100%; min-height: 44px; }
  .pf-card { padding: 14px; }
  .pf-card-price .value { font-size: 17px; }
  .pf-detail-hero { padding: 16px; }
  .pf-detail-hero .pf-hero-name { font-size: 17px; }
  .pf-price-card .value { font-size: 19px; }
}

@media (max-width: 460px) {
  .stats-grid { grid-template-columns: 1fr; }
  .stat-value { font-size: 24px; }
  .topnav-brand-icon { width: 32px; height: 32px; }
  .pf-detail-grid { grid-template-columns: 1fr; }
  /* On the smallest phones drop back to 1-col so the price stays readable */
  .pf-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  body::before, body::after { display: none; }
}