/* ===== Theme tokens (Dark + Light) ===== */
body{
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  /* Background is rendered by #app-bg (fixed layer) to avoid scroll/repeat artifacts */
  background: transparent;
}

/* ===== Fixed Background Layer (stable across scroll + themes) ===== */
#app-bg{
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;

  background: var(--bg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

body[data-mode="dark"]{
  --focus-ring: rgba(46,230,255,0.55);
  --text: #ffffff;
  --muted: rgba(255,255,255,.72);
  /* Default dark background (all roles). */
  --bg:
    radial-gradient(1200px 700px at 20% 10%, rgba(0,170,255,.25), transparent 55%),
    radial-gradient(900px 650px at 85% 35%, rgba(255,0,135,.16), transparent 55%),
    linear-gradient(135deg, #0b1220, #0a1f3d);
  --card: rgba(20,20,20,.60);
  --card-border: rgba(255,255,255,.10);

--card-shadow: 0 14px 40px rgba(0,0,0,.38);
--card-shadow-soft: 0 10px 30px rgba(0,0,0,.30);
--input-bg: rgba(255,255,255,.06);
--input-border: rgba(255,255,255,.10);
--ring: rgba(255,255,255,.10);
  /* Header should be visually transparent; blur comes from backdrop-filter */
  --header-bg: rgba(0, 0, 0, 0);
  --header-border: rgba(255,255,255,0.10);
  --header-shadow: 0 14px 40px rgba(0,0,0,.26);
  --pill-bg: rgba(255,255,255,0.08);
  --pill-border: rgba(255,255,255,0.14);
  --pill-text: #ffffff;

  /* ===== Accent palette (Step 32) ===== */
  --bg-0: #070A12;
  --bg-1: #0B1020;

  --accent-cyan: #2EE6FF;
  --accent-purple: #7C4DFF;
  --accent-pink: #FF4FD8;
  --accent-lime: #A6FF4D;
  --accent-orange: #FFB84D;

  /* Primary accent used by some components */
  --accent: var(--accent-cyan);

  --good: #43F07A;
  --warn: #FFC857;
  --bad:  #FF4D6D;
  --info: #4DA3FF;

  --btn-grad: linear-gradient(135deg, rgba(124,77,255,1), rgba(46,230,255,1));
  /* App lifecycle (install/activate) — blue gradient */
  --install-grad: linear-gradient(90deg,
    rgba(46,230,255,1),
    rgba(77,163,255,1),
    rgba(37,99,235,1)
  );
  --glow: 0 0 24px rgba(46,230,255,0.22);

  /* ===== Charts (theme-safe tokens) ===== */
  --chart-grid: rgba(255,255,255,0.12);
  --chart-axis: rgba(255,255,255,0.22);
  --chart-label: rgba(255,255,255,0.74);
  --chart-label-soft: rgba(255,255,255,0.58);
  --chart-crosshair: rgba(255,255,255,0.20);
  --chart-tooltip-bg: rgba(10,10,14,0.86);
  --chart-tooltip-border: rgba(255,255,255,0.14);
  --chart-tooltip-shadow: 0 14px 28px rgba(0,0,0,0.45);
  --chart-line-shadow: drop-shadow(0 6px 12px rgba(0,0,0,0.35));

  --blur-strong: 18px;
  --blur-card: 12px;
}

/* Admin + share-link background (dark mode only) */
body[data-mode="dark"][data-bg="admin"]{
  --bg:
    /* Admin + public share links: deepen the 55% stop to black (per design) */
    radial-gradient(1200px 700px at 20% 10%, rgba(0,170,255,.25), #000000c4 55%),
    /* Keep the right-side pink glow visible before it fades to black at 55% */
    radial-gradient(900px 650px at 85% 35%, rgba(255, 0, 230, 0.661) 0%, rgba(255,0,135,.16) 35%, #000000 55%),
    linear-gradient(135deg, #0b1220, #0a1f3d);
}

body[data-mode="light"]{
  --focus-ring: rgba(232, 37, 235, 0.55);
  --bg: radial-gradient(1200px 900px at 20% -10%, rgba(68, 88, 168, 0.233), rgba(255, 255, 255, 0.304)),
        radial-gradient(900px 700px at 85% 10%, rgba(177, 31, 133, 0.124), rgba(193, 204, 225, 0.159)),
        radial-gradient(1200px 900px at 50% 120%, rgba(42, 81, 114, 0.257), rgba(97, 101, 62, 0.25));
  --text: #0b1324;
  --muted: rgba(11,19,36,0.65);

  /* Glass cards (light) */
  --card: rgba(255,255,255,0.36);
  --card-border: rgba(15,23,42,0.10);
  --card-shadow: 0 14px 34px rgba(15, 23, 42, 0.12);
  --card-shadow-soft: 0 10px 26px rgba(15, 23, 42, 0.10);
  --glass-shadow-light: 0 14px 34px rgba(15, 23, 42, 0.12);

  --input-bg: rgba(255,255,255,0.40);
  --input-border: rgba(15,23,42,0.12);
  --ring: rgba(15,23,42,0.18);

  /* Header should be visually transparent; blur comes from backdrop-filter */
  --header-bg: rgba(255,255,255,0);
  --header-border: rgba(15,23,42,0.12);
  --header-shadow: 0 10px 28px rgba(15, 23, 42, 0.10);

  --pill-bg: rgba(255,255,255,0.34);
  --pill-border: rgba(15,23,42,0.12);
  --pill-text: #0b1324;

  --accent: #2563eb;

  /* Keep accent palette available in light mode too (used by charts and pills) */
  --accent-cyan: #2563eb;
  --accent-purple: #7c3aed;
  --accent-pink: #db2777;
  --accent-lime: #16a34a;
  --accent-orange: #f59e0b;
  /* App lifecycle (install/activate) — blue gradient */
  --install-grad: linear-gradient(90deg,
    rgba(96,165,250,1),
    rgba(37,99,235,1),
    rgba(29,78,216,1)
  );
  --danger: #dc2626;
  --success: #16a34a;

  /* ===== Charts (theme-safe tokens) ===== */
  --chart-grid: rgba(15,23,42,0.10);
  --chart-axis: rgba(15,23,42,0.18);
  --chart-label: rgba(11,19,36,0.74);
  --chart-label-soft: rgba(11,19,36,0.60);
  --chart-crosshair: rgba(15,23,42,0.24);
  --chart-tooltip-bg: rgba(255,255,255,0.92);
  --chart-tooltip-border: rgba(15,23,42,0.12);
  --chart-tooltip-shadow: 0 12px 30px rgba(15,23,42,0.14);
  --chart-line-shadow: drop-shadow(0 8px 14px rgba(15,23,42,0.10));

  --good: #16a34a;
  --warn: #d97706;
  --bad:  #dc2626;
  --info: #2563eb;

  --badge-bg: rgba(15,23,42,0.10);
  --badge-text: #0b1324;
}

/* Optional: better selection contrast */
::selection{ background: rgba(0,170,255,.25); }

/* styles/core.css
   Empire OS — FILTERED / CLEAN BASE
   Global UI tokens + role backgrounds + shared components
*/

/* ===== Base reset ===== */
* { box-sizing: border-box; }

/* ===== Accessibility: visible focus for keyboard users ===== */
:where(a, button, input, select, textarea, [role="button"], .icon-btn, .btn, .pill):focus-visible{
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}


/* Runtime layout tokens (set by app.js) */
:root{
  --appHeaderH: 72px;
  --blur-strong: 18px;
  --blur-card: 12px;
}

/* ===== Glass utilities (Light + Dark parity) =====
   Many older page styles hard-coded dark RGBA values, which made Light mode
   look flat/grey and inconsistent. Use these helpers + token-based colors.
*/
.glass{
  background: var(--card);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow-soft);
  backdrop-filter: blur(var(--blur-card)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--blur-card)) saturate(160%);
}

.glass-strong{
  background: var(--card);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
  backdrop-filter: blur(var(--blur-strong)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--blur-strong)) saturate(160%);
}

.glass-pill{
  background: var(--pill-bg);
  border: 1px solid var(--pill-border);
  color: var(--pill-text);
  backdrop-filter: blur(var(--blur-card)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--blur-card)) saturate(160%);
}

/* ===== Default background (fallback) ===== */
/* ===== Role overlays (do NOT override theme bg) =====
   Theme background comes only from data-mode tokens (--bg).
   Role adds a subtle overlay only.
*/
body{ --role-overlay: none; }

body[data-role="agent"], body[data-role="crm"]{
  --role-overlay:
    radial-gradient(1100px 650px at 15% 18%, rgba(0,140,255,.22), transparent 60%),
    radial-gradient(900px 600px at 85% 30%, rgba(0,255,200,.10), transparent 55%);
}
body[data-role="supervisor"]{
  --role-overlay:
    radial-gradient(1100px 650px at 15% 14%, rgba(56,104,255,.18), transparent 60%),
    radial-gradient(900px 600px at 88% 30%, rgba(160, 90,255,.10), transparent 60%);
}
body[data-role="hr"]{
  --role-overlay:
    radial-gradient(1100px 650px at 18% 16%, rgba(170, 90,255,.18), transparent 60%),
    radial-gradient(900px 600px at 85% 30%, rgba(255,  0,128,.08), transparent 55%);
}
body[data-role="acm"]{
  --role-overlay:
    radial-gradient(1100px 650px at 18% 16%, rgba(  0,255,200,.14), transparent 60%),
    radial-gradient(900px 600px at 85% 30%, rgba(  0,140,255,.12), transparent 55%);
}
body[data-role="admin"]{
  --role-overlay:
    radial-gradient(1100px 650px at 18% 15%, rgba(255,200,  0,.10), transparent 60%),
    radial-gradient(900px 600px at 88% 30%, rgba(  0,140,255,.14), transparent 60%);
}

/* ===== Gender overlay (subtle) ===== */
/* FIX: keep it BEHIND content but ABOVE background */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
}
body[data-theme="male"]::before{
  opacity: .22;
  background: radial-gradient(900px 700px at 20% 15%, rgba(0,120,255,.45), transparent 60%);
}
body[data-theme="female"]::before{
  opacity: .22;
  background: radial-gradient(900px 700px at 20% 15%, rgba(255,0,160,.42), transparent 60%);
}

/* Role overlay sits above gender overlay but behind app content */
body::after{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .22;
  background: var(--role-overlay);
}


/* Ensure app content always above overlay */
/* NOTE: keep the whole app above any accidental body-level overlays */
.app-wrapper{ position: relative; z-index: 2000; min-height: 100vh; min-height: 100svh; display:flex; flex-direction:column; isolation: isolate; }

/*
  IMPORTANT LAYOUT FIX
  Let the main app root take the remaining height under the sticky header.
  This enables internal page panels (like chat message lists) to scroll
  instead of growing the whole document.
*/
#app{
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* ===== Header / Nav ===== */
/*
 * The main application header sticks to the top of the viewport and uses a
 * translucent backdrop so the colorful radial backgrounds bleed through
 * slightly. Increasing the blur and lowering the background opacity gives
 * it a premium “glass” feel inspired by modern macOS and iOS interfaces.
 */
.app-header{
  /* anchor the header to the top of the page */
  position: sticky;
  top: 0;
  z-index: 50;
  /* generous horizontal padding for breathing room */
  padding: 14px 32px;
  /* Keep brand on the left; center vertically */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  /* frosted glass effect */
  backdrop-filter: blur(var(--blur-strong));
  background: var(--header-bg);
  border-bottom: 1px solid var(--header-border);
  box-shadow: var(--header-shadow);
}

.header-left{
  display: flex;
  align-items: center;
}


/*
 * Layout for the right side of the global header. By default the header
 * displays its children in a row; however the items inserted here
 * (search bar, notification button, user pill) need their own
 * consistent spacing and vertical alignment.
 */
.header-right{
  display: flex;
  align-items: center;
  gap: 12px;
}

.main-nav{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
  overflow: visible;
}
.main-nav.hidden{ display:none; }

/*
 * Navigation links use very light glass backgrounds and soft borders. The
 * hover state doubles the opacity to provide clear feedback without
 * introducing harsh color changes.
 */
.nav-link{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 0;
  background: var(--pill-bg);
  border: 1px solid var(--pill-border);
  color: var(--pill-text);
  padding: 10px 14px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 800;
  position: relative;
  transition: background .2s ease;
}
.nav-link:hover{
  background: color-mix(in srgb, var(--pill-bg) 70%, white 30%);
}

.actions{ margin-left: 10px; display:flex; gap: 8px; }

/* ===== Badges ===== */
.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 1000;
  margin-left: 8px;
  background: rgba(255, 64, 129, .95);
  color: #fff;
}
.badge.hidden{ display:none; }

/* ===== Shared UI ===== */
.btn{
  appearance: none;
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  color: var(--text);
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform .12s ease, opacity .2s ease, background .2s ease;
}
.btn.small{ padding: 7px 10px; font-size: 13px; border-radius: 12px; }
.btn.tiny{ padding: 6px 9px; font-size: 12px; border-radius: 12px; }
.btn:active{ transform: translateY(1px); }

/* Variants used across pages */
.btn-ghost{
  background: transparent;
  border-color: color-mix(in srgb, var(--input-border) 80%, transparent 20%);
}
.btn-ghost:hover{ background: color-mix(in srgb, var(--input-bg) 70%, white 6%); }

.btn.primary{
  border-color: rgba(0,170,255,.35);
  background: linear-gradient(135deg, rgba(0,170,255,.70), rgba(37,99,235,.70));
  color: #fff;
}
.btn.danger{
  border-color: rgba(255, 77, 79, .35);
  background: rgba(255, 77, 79, .14);
}

/* Small buttons (used in Shopify stores + integrations) */
.btn-sm{
  appearance: none;
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  color: var(--text);
  border-radius: 12px;
  padding: 8px 12px;
  font-weight: 850;
  margin: 2px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform .12s ease, opacity .2s ease, background .2s ease, border-color .2s ease;
}
.btn-sm:hover{ background: color-mix(in srgb, var(--input-bg) 70%, white 8%); }
.btn-sm:active{ transform: translateY(1px); }
.btn-sm.primary{
  border-color: rgba(0,170,255,.38);
  background: linear-gradient(135deg, rgba(0,170,255,.75), rgba(37,99,235,.75));
  color:#fff;
}
.btn-sm.danger{
  border-color: rgba(255, 77, 79, .40);
  background: rgba(255, 77, 79, .16);
  color: #fff;
}

/* Extra breathing room for header action buttons */
.panel-head .btn-sm,
.panel-head .btn{
  margin-top: 4px;
  margin-bottom: 4px;
}

/* Consistent select styling */
.select{
  width: 100%;
  height: 34px;
  padding: 0 14px;
  border-radius: 30px;
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  color: var(--text);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,.75) 50%),
    linear-gradient(135deg, rgba(255,255,255,.75) 50%, transparent 50%);
  background-position:
    calc(100% - 16px) 50%,
    calc(100% - 10px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 34px;
}
.select:hover{
  border-color: rgba(255,255,255,.22);
  background: color-mix(in srgb, var(--input-bg) 70%, white 6%);
}
.select:focus{ box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 70%, transparent 30%); }


.input{
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  outline: none;
  color: var(--text);
}

/* Legacy: some pages use <select class="input">. Make it behave like a proper select */
select.input{
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,.85) 50%),
    linear-gradient(135deg, rgba(255,255,255,.85) 50%, transparent 50%);
  background-position:
    calc(100% - 16px) 50%,
    calc(100% - 11px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 36px;
  border-radius: 14px;
}
body[data-mode="light"] select.input{
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(15,23,42,.72) 50%),
    linear-gradient(135deg, rgba(15,23,42,.72) 50%, transparent 50%);
}


.field span{
  display:block;
  font-size: 12px;
  opacity: .75;
  margin-bottom: 6px;
}

.hint{
  margin-top: 8px;
  font-size: 12px;
  opacity: .75;
}

.hidden{ display:none; }

/* ===== Pills (general) ===== */
.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.60);
  color: var(--text);
}
.pill i{ margin-right: 6px; line-height: 1; }

/* Priority/Status variants (keep color in both light/dark) */
.pill-success{ background: rgba(71,200,120,.18); border-color: rgba(71,200,120,.26); color: var(--success) !important; }
.pill-warning{ background: rgba(255,193, 7,.18); border-color: rgba(255,193, 7,.30); color: var(--warn) !important; }
.pill-danger { background: rgba(255,  0, 0,.14); border-color: rgba(255,  0, 0,.22); color: var(--danger) !important; }
.pill-info   { background: rgba(  0,123,255,.16); border-color: rgba(  0,123,255,.24); color: var(--info) !important; }

.pill-priority{ text-transform: capitalize; }

/* ===== Status badges used in mainDashboard ===== */
.status-in_operation{
  background: rgba(71, 200, 120, .16);
  border: 1px solid rgba(71, 200, 120, .28);
  color: #43b56e;
}
.status-break{
  background: rgba(255, 193, 7, .16);
  border: 1px solid rgba(255, 193, 7, .30);
  color: #c9a454;
}
.status-meeting{
  background: rgba(0, 123, 255, .16);
  border: 1px solid rgba(0, 123, 255, .28);
  color: #6aa2e7;
}
.status-offline{
  background: rgba(255, 0, 0, .12);
  border: 1px solid rgba(255, 0, 0, .20);
  color: #eb7676;
}

/* ===== Widget base card ===== */
/*
 * Base widget card styling. Uses a subtle translucency with a heavy blur and
 * soft shadow to create a floating glass panel. The border radius and
 * padding provide breathing room. The border is intentionally faint so
 * widgets blend naturally into the dashboard grid.
 */

.widget-card{
  border: 1px solid var(--card-border);
  border-radius: 18px;
  padding: 20px;
  backdrop-filter: blur(22px);
  box-shadow: var(--card-shadow);
}
.widget-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.widget-title{ font-weight: 900; opacity: .95; }
.widget-right{ display:flex; align-items:center; gap:10px; }
.widget-big{ font-size: 28px; font-weight: 900; line-height: 1.1; }
.widget-sub{ margin-top: 6px; font-size: 13px; opacity: .85; }
.widget-body{ margin-top: 10px; }

/* ===== Role Console widget ===== */
.role-console-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 12px;
}
@media (min-width: 760px){
  .role-console-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1180px){
  .role-console-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.role-console-card{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  border-radius: 14px;
  padding: 12px 12px;
  text-align: left;
  cursor: pointer;
  transition: transform .14s ease, background .14s ease, border-color .14s ease;
}

.role-console-card:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.08);
  border-color: rgba(0,170,255,.22);
}

body[data-mode="light"] .role-console-card{
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.55);
}
body[data-mode="light"] .role-console-card:hover{
  background: rgba(255,255,255,.78);
  border-color: rgba(0,170,255,.26);
}

.role-console-card .rc-top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
}

.role-console-card .rc-top .bi{
  opacity: .9;
}

.role-console-card .rc-ico{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(0,170,255,.10);
  border: 1px solid rgba(0,170,255,.18);
}
body[data-mode="light"] .role-console-card .rc-ico{
  background: rgba(0,170,255,.08);
  border: 1px solid rgba(0,170,255,.22);
}
.role-console-card .rc-top .bi{
  font-size: 16px;
}
.role-console-card .rc-k{
  font-weight: 950;
  opacity: .95;
  line-height: 1.1;
}
.role-console-card .rc-v{
  margin-top: 8px;
  font-size: 12px;
  opacity: .82;
  line-height: 1.35;
}

.role-console-card .rc-k{
  font-weight: 950;
  opacity: .95;
}

.role-console-card .rc-v{
  margin-top: 8px;
  font-size: 12px;
  opacity: .8;
}

/* ===== Revenue Target (Admin gauge) ===== */
.rev-target-card{
  min-height: 260px;
}

.rev-target .rev-empty{
  padding: 10px 2px;
}

.rev-empty-title{
  font-weight: 1000;
  font-size: 18px;
}
.rev-empty-sub{
  margin-top: 6px;
  opacity: .85;
  font-size: 13px;
  line-height: 1.4;
}
.rev-empty .btn{
  margin-top: 10px;
}

.rev-topline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.rev-range{
  opacity: .85;
  font-weight: 850;
}
.rev-progress{
  font-weight: 1000;
  letter-spacing: .2px;
}

.rev-grid{
  display:grid;
  grid-template-columns: 160px 1fr;
  gap: 14px;
  align-items:center;
}

.rev-gauge{
  position: relative;
  width: 160px;
  height: 110px;
  display:grid;
  place-items:center;
}
.rev-gauge-svg{
  width: 160px;
  height: 110px;
}
.rev-gauge-track{
  fill: none;
  stroke: rgba(255,255,255,.10);
  stroke-width: 14;
}
.rev-gauge-meter{
  fill: none;
  stroke: url(#revGrad);
  stroke-width: 14;
  stroke-linecap: round;
  stroke-dasharray: 0 999;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.22));
}
.rev-gauge-center{
  position:absolute;
  left: 0;
  right: 0;
  top: 18px;
  height: 72px;
  display:grid;
  place-items:center;
  text-align:center;
  pointer-events:none;
}
.rev-gauge-pct{
  font-size: 22px;
  font-weight: 1000;
}
.rev-gauge-sub{
  margin-top: -6px;
  font-size: 12px;
  opacity: .75;
}

.rev-metrics{
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.rev-metric{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--card-border);
  border-radius: 16px;
  background: rgba(255,255,255,.03);
}
.rev-metric .k{
  opacity: .8;
  font-weight: 850;
}
.rev-metric .v{
  font-weight: 1000;
}

.rev-breakdown{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
}

.rev-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  border: 1px solid var(--card-border);
  background: rgba(255,255,255,.03);
}
.rev-pill-blue{
  border-color: rgba(0,170,255,.22);
  background: rgba(0,170,255,.10);
}

.rt-form .rt-row{ margin-bottom: 14px; }
.rt-form .rt-label{ display:block; font-weight: 900; margin-bottom: 6px; opacity: .9; }
.rt-form .rt-split{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rt-form .rt-checks{ display:flex; flex-wrap:wrap; gap: 12px; }
.rt-form .rt-check{ display:flex; align-items:center; gap: 8px; font-weight: 850; opacity: .92; }
.rt-form .rt-actions{ display:flex; justify-content:flex-end; gap: 10px; margin-top: 6px; }

@media (max-width: 980px){
  .rev-grid{ grid-template-columns: 1fr; }
  .rev-gauge{ width: 100%; justify-self:center; }
  .rev-gauge-svg{ width: 190px; height: 130px; }
}

/* ===== Best Agent (points card) ===== */
.best-agent-card{
  /* Match the visual weight of Team Overview card on the opposite column */
  min-height: 420px;
  display: flex;
  flex-direction: column;
}

.best-agent-card .widget-body{
  flex: 1;
  display: flex;
  flex-direction: column;
}

.best-hero{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 14px;
  padding: 14px 14px;
  border: 1px solid var(--card-border);
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(14px);
}

.best-hero-title{
  font-size: 22px;
  font-weight: 900;
  letter-spacing: .2px;
}

.best-hero-score{
  min-width: 92px;
  text-align: right;
}

.best-score-num{
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
}

.best-list{
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.best-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--card-border);
  border-radius: 16px;
  background: rgba(255,255,255,.03);
}

.best-left{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 0;
}

.best-idx{
  width: 24px;
  height: 24px;
  border-radius: 10px;
  display:grid;
  place-items:center;
  font-weight: 900;
  border: 1px solid var(--card-border);
  background: rgba(255,255,255,.05);
}

.best-meta{ min-width:0; }
.best-label{ font-weight: 900; }
.best-sub{ font-size: 12px; opacity: .8; margin-top: 2px; }

.best-right{
  display:flex;
  align-items:center;
  gap: 10px;
}

.best-winner{ font-weight: 900; white-space: nowrap; }

.best-foot{
  margin-top: auto;
  padding-top: 10px;
  font-size: 12px;
  opacity: .75;
}

.best-select{
  width: 150px;
  height: 30px;
  font-size: 12px;
  padding: 0 12px;
  padding-right: 32px;
}

.best-focus{
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--card-border);
  border-radius: 16px;
  background: rgba(255,255,255,.03);
}

.best-focus-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.best-focus-title{ font-weight: 900; }

.best-focus-list{
  display:flex;
  flex-direction:column;
  gap: 8px;
  max-height: 240px;
  overflow:auto;
  padding-right: 4px;
}

.best-focus-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 10px 10px;
  border: 1px solid var(--card-border);
  border-radius: 14px;
  background: rgba(255,255,255,.02);
}

.best-focus-left{ display:flex; align-items:center; gap: 10px; min-width:0; }
.best-focus-right{ display:flex; align-items:center; gap: 8px; }

/* ===== Promotion (eligible) ===== */
.promo-card .widget-body{ display:flex; flex-direction:column; gap: 12px; }
.promo-rule{ font-size: 12px; opacity: .8; }
.promo-section{
  border: 1px solid var(--card-border);
  border-radius: 16px;
  padding: 12px;
  background: rgba(255,255,255,.03);
}
.promo-head{ display:flex; align-items:center; justify-content:space-between; gap: 10px; margin-bottom: 8px; }
.promo-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  padding: 10px 10px;
  border: 1px solid var(--card-border);
  border-radius: 14px;
  background: rgba(255,255,255,.02);
  margin-top: 8px;
}
.promo-right{ text-align:right; display:flex; flex-direction:column; gap: 6px; align-items:flex-end; }
.promo-months{ display:flex; gap: 6px; flex-wrap:wrap; justify-content:flex-end; }

/* ===== Modal ===== */
.ts-modal-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index: 30000;
}
.ts-modal{
  width: min(520px, 92vw);
  background: var(--card);
  border: 1px solid var(--card-border);
  color: var(--text);
  border-radius: 18px;
  box-shadow: var(--card-shadow);
  overflow: hidden;
  backdrop-filter: blur(var(--blur-strong));
  max-height: 86vh;
  display:flex;
  flex-direction:column;
}
.ts-modal-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--card-border);
}
.ts-modal-title{ font-weight: 900; }
.ts-modal-close{
  border:0;
  background: transparent;
  font-size: 18px;
  cursor: pointer;
  opacity:.7;
  color: var(--text);
}
.ts-modal-body{ padding: 16px; flex: 1; overflow: auto; }

/* Overdue (timeline alert) glass treatment */
.ts-modal-overlay.wo-overdue-overlay{
  background: rgba(0,0,0,.36);
  backdrop-filter: blur(2px);
}
body[data-mode="light"] .ts-modal-overlay.wo-overdue-overlay{
  background: rgba(15,23,42,.22);
}

.ts-modal.wo-overdue{
  position: relative;
  background: rgba(13,18,35,.48);
  border-color: rgba(255,255,255,.10);
  box-shadow: 0 28px 90px rgba(0,0,0,.55);
  backdrop-filter: blur(var(--blur-strong)) saturate(1.25);
}
.ts-modal.wo-overdue::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 50% -20%, rgba(220,38,38,.18), transparent 58%),
    radial-gradient(circle at 90% 10%, rgba(99,102,241,.14), transparent 60%),
    radial-gradient(circle at 10% 80%, rgba(168,85,247,.10), transparent 60%);
  pointer-events: none;
}
.ts-modal.wo-overdue > *{
  position: relative;
  z-index: 1;
}
.ts-modal.wo-overdue .ts-modal-top{
  position: relative;
  background: rgba(255,255,255,.02);
  border-bottom-color: rgba(255,255,255,.10);
}
.ts-modal.wo-overdue .ts-modal-top::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(220,38,38,.35), rgba(168,85,247,.20), rgba(220,38,38,.35));
  pointer-events: none;
}
.ts-modal.wo-overdue .ts-modal-title{
  color: var(--text);
}

body[data-mode="light"] .ts-modal.wo-overdue{
  background: rgba(255,255,255,.68);
  border-color: rgba(15,23,42,.10);
  box-shadow: 0 26px 80px rgba(15,23,42,.20);
}
body[data-mode="light"] .ts-modal.wo-overdue::before{
  background:
    radial-gradient(circle at 50% -20%, rgba(220,38,38,.10), transparent 60%),
    radial-gradient(circle at 90% 10%, rgba(99,102,241,.10), transparent 62%),
    radial-gradient(circle at 10% 80%, rgba(168,85,247,.08), transparent 62%);
}
body[data-mode="light"] .ts-modal.wo-overdue .ts-modal-top{
  background: rgba(255,255,255,.55);
  border-bottom-color: rgba(15,23,42,.10);
}

/* ===== Drawer (Details panel) ===== */

.ts-drawer-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.48);
  display:flex;
  align-items:stretch;
  justify-content:flex-end;
  z-index: 30000;
}
body[data-mode="light"] .ts-drawer-overlay{ background: rgba(15,23,42,.28); }

.ts-drawer{
  width: min(440px, 92vw);
  height: 100%;
  background: var(--card);
  border-left: 1px solid var(--card-border);
  color: var(--text);
  box-shadow: var(--card-shadow);
  backdrop-filter: blur(var(--blur-strong));
  -webkit-backdrop-filter: blur(var(--blur-strong));
  display:flex;
  flex-direction:column;
  transform: translateX(18px);
  opacity: 0;
  animation: tsDrawerIn .16s ease-out forwards;
}

.ts-drawer-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--card-border);
}
.ts-drawer-title{ font-weight: 950; letter-spacing: -0.2px; }
.ts-drawer-close{
  border:0;
  background: transparent;
  font-size: 18px;
  cursor: pointer;
  opacity:.7;
  color: var(--text);
}
.ts-drawer-close:hover{ opacity: 1; }
.ts-drawer-body{ padding: 16px; flex: 1; overflow: auto; }

@keyframes tsDrawerIn{
  from{ transform: translateX(18px); opacity: 0; }
  to{ transform: translateX(0px); opacity: 1; }
}

/* ===== Clickable row helper ===== */
.ui-clickable{
  cursor: pointer;
  user-select: none;
}
.ui-clickable:hover{
  background: color-mix(in srgb, var(--input-bg) 75%, white 10%);
}

/* ===== App Store lifecycle overlays (Install / Activate) ===== */
.ts-lifecycle-overlay{
  position: fixed;
  inset: 0;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index: 35000;
  /* transparent but blurry (same glass feeling as dropdowns) */
  background: rgba(0,0,0,.18);
  backdrop-filter: blur(22px) saturate(1.2);
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
}
body[data-mode="light"] .ts-lifecycle-overlay{
  background: rgba(255,255,255,.08);
}

.ts-lifecycle-card{
  width: min(520px, 92vw);
  border-radius: 20px;
  padding: 18px 18px 16px;
  color: var(--text);
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(20, 20, 28, .34);
  box-shadow: var(--card-shadow);
  backdrop-filter: blur(24px) saturate(1.25);
  -webkit-backdrop-filter: blur(24px) saturate(1.25);
}
body[data-mode="light"] .ts-lifecycle-card{
  background: rgba(255,255,255,.28);
  border-color: rgba(0,0,0,.10);
  box-shadow: var(--glass-shadow-light, var(--card-shadow));
}

.ts-lifecycle-top{ display:flex; flex-direction:column; gap: 6px; }
.ts-lifecycle-title{ font-weight: 950; letter-spacing: -0.2px; }
.ts-lifecycle-app{ font-weight: 950; }
.ts-lifecycle-sub{ font-size: 13px; opacity: .82; }

.ts-lifecycle-progress{ margin-top: 14px; }
.ts-lifecycle-bar{
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.12);
}
body[data-mode="light"] .ts-lifecycle-bar{
  background: rgba(15,23,42,.08);
  border-color: rgba(15,23,42,.10);
}
.ts-lifecycle-fill{
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: var(--install-grad);
  box-shadow: 0 0 22px rgba(77,163,255,.28);
  transition: width .08s linear;
}

.ts-lifecycle-row{
  margin-top: 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}
.ts-lifecycle-percent{ font-weight: 950; }
.ts-lifecycle-hint{ font-size: 13px; opacity: .82; }

.ts-lifecycle-spinner-wrap{
  margin-top: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 12px 0 2px;
}
.ts-lifecycle-spinner{
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 3px solid rgba(255,255,255,.18);
  border-top-color: rgba(77,163,255,1);
  animation: tsSpin .9s linear infinite;
  box-shadow: 0 0 20px rgba(77,163,255,.22);
}
body[data-mode="light"] .ts-lifecycle-spinner{
  border-color: rgba(15,23,42,.14);
  border-top-color: rgba(37,99,235,1);
}

@keyframes tsSpin { to { transform: rotate(360deg); } }

/* ===== Meetings UI (kept here because you were using home.css before) ===== */
.meetings-header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 14px;
  margin-bottom: 14px;
}
.meetings-actions{ display:flex; gap:10px; }
.meetings-filters{ display:flex; gap: 10px; margin-bottom: 12px; }
.meetings-list{ display:flex; flex-direction:column; gap: 10px; }
.meeting-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(0,0,0,.06);
  color:#111;
}
.meeting-info .sub{
  margin-top: 4px;
  opacity: .7;
  font-weight: 800;
  font-size: 12px;
}
.meeting-meta{ display:flex; align-items:center; gap: 10px; }
.meeting-box{
  background: rgba(0,0,0,.04);
  border-radius: 14px;
  padding: 14px;
}
.meeting-box .row{
  display:flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--card-border);
}
.meeting-box .row:last-child{ border-bottom: 0; }
.meeting-box .k{ opacity:.7; font-weight:800; }
.meeting-box .v{ font-weight:900; }
.copied{ margin-top: 10px; font-weight: 900; color: #0b5b2a; }

/* ===== Responsive ===== */
@media (max-width: 900px) {
  .app-header { gap: 10px; flex-wrap: wrap; }
  .main-nav { width: 100%; }
}

/* Bootstrap Icons in nav */
.nav-link .bi{ font-size: 16px; opacity: .95; }


/* Apple Glass – Light mode shadow tuning */



/* ===== Inputs (global) ===== */
input, select, textarea{
  font: inherit;
  color: var(--text);
}

/*
  Global form controls
  Goal: all native inputs/selects/textareas across ALL pages look like EmpireOS glass.
  - Uses :where() to keep specificity low so page-specific styles can still override.
  - Excludes checkbox/radio/range/file etc.
*/
:where(.app-wrapper, .ts-modal) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
:where(.app-wrapper, .ts-modal) select,
:where(.app-wrapper, .ts-modal) textarea{
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 14px;
  padding: 10px 12px;
  color: var(--text);
  outline: none;
  backdrop-filter: blur(var(--blur-strong));
  -webkit-backdrop-filter: blur(var(--blur-strong));
  box-shadow: 0 8px 18px rgba(0,0,0,.12);
}

/* Modals often contain inline styles; ensure EmpireOS glass overrides win */
.ts-modal input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
.ts-modal select,
.ts-modal textarea{
  background: var(--input-bg) !important;
  border: 1px solid var(--input-border) !important;
  border-radius: 14px !important;
  padding: 10px 12px !important;
  color: var(--text) !important;
  backdrop-filter: blur(var(--blur-strong)) !important;
  -webkit-backdrop-filter: blur(var(--blur-strong)) !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.12) !important;
}

/* Focus ring (works for both light & dark) */
:where(.app-wrapper, .ts-modal) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):focus,
:where(.app-wrapper, .ts-modal) select:focus,
:where(.app-wrapper, .ts-modal) textarea:focus{
  border-color: color-mix(in srgb, var(--ring) 60%, var(--input-border) 40%);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--ring) 55%, transparent 45%),
    0 10px 22px rgba(0,0,0,.14);
}

/* Native select caret — consistent across browsers (and avoids Safari "X" artifacts on tall selects) */
:where(.app-wrapper, .ts-modal) select{
  appearance: none;
  -webkit-appearance: none;
  /* keep glass bg but let light mode be a bit more transparent */
  background-color: var(--input-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 14px 14px;
  padding-right: 40px;
}
body[data-mode="light"] :where(.app-wrapper, .ts-modal) select{
  /* more transparent than inputs in light mode */
  background-color: rgba(255,255,255,0.22);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230b1324' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* Multi-select should keep native affordance */
:where(.app-wrapper, .ts-modal) select[multiple]{
  background-image: none;
  padding-right: 12px;
}

/* Disabled */
:where(.app-wrapper, .ts-modal) input:disabled,
:where(.app-wrapper, .ts-modal) select:disabled,
:where(.app-wrapper, .ts-modal) textarea:disabled{
  opacity: .6;
  cursor: not-allowed;
}


/* Modal form controls must override inline styles coming from older templates */
.ts-modal input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
.ts-modal select,
.ts-modal textarea{
  background: var(--input-bg) !important;
  border: 1px solid var(--input-border) !important;
  border-radius: 14px !important;
  padding: 10px 12px !important;
  color: var(--text) !important;
  outline: none !important;
  backdrop-filter: blur(var(--blur-strong)) !important;
  -webkit-backdrop-filter: blur(var(--blur-strong)) !important;
}
.ts-modal select{
  appearance: none !important;
  -webkit-appearance: none !important;
  background-color: var(--input-bg) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 14px 14px !important;
  padding-right: 40px !important;
}
body[data-mode="light"] .ts-modal select{
  background-color: rgba(255,255,255,0.22) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230b1324' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
}
/* Placeholder tint */
:where(.app-wrapper, .ts-modal) input::placeholder,
:where(.app-wrapper, .ts-modal) textarea::placeholder{
  color: color-mix(in srgb, var(--text) 45%, transparent 55%);
}

.glassy-input, .ts-input, .input, .field input, .field select, .field textarea{
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 14px;
  padding: 10px 12px;
  backdrop-filter: blur(var(--blur-strong));
  box-shadow: 0 8px 18px rgba(0,0,0,.12);
}
body[data-mode="light"] .glassy-input,
body[data-mode="light"] .ts-input,
body[data-mode="light"] .input,
body[data-mode="light"] .field input,
body[data-mode="light"] .field select,
body[data-mode="light"] .field textarea{
  box-shadow: 0 10px 22px rgba(12,18,32,.10);
}

/*
  Some pages use legacy selectors like `.field select` / `.input` that can override the low-specificity
  :where() select styling above. Ensure light-mode selects remain glassy/transparent everywhere.
*/
body[data-mode="light"] .app-wrapper select:not([multiple]),
body[data-mode="light"] .app-wrapper select.input:not([multiple]),
body[data-mode="light"] .app-wrapper .field select:not([multiple]){
  background-color: rgba(255,255,255,0.22) !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230b1324' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 14px 14px !important;
  padding-right: 40px !important;
}

/*
  Dark-mode counterpart: some legacy selectors (e.g. `.input`) use the `background:` shorthand
  which resets `background-image`, causing the dropdown caret to disappear.
*/
body[data-mode="dark"] .app-wrapper select:not([multiple]),
body[data-mode="dark"] .app-wrapper select.input:not([multiple]),
body[data-mode="dark"] .app-wrapper .field select:not([multiple]){
  background-color: var(--input-bg) !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 14px 14px !important;
  padding-right: 40px !important;
}

/* Mode text-color enforcement (prevents hardcoded colors from breaking light/dark) */
body[data-mode="dark"],
body[data-mode="dark"] .app-wrapper{
  color: var(--text);
}
body[data-mode="dark"] .btn,
body[data-mode="dark"] .btn * ,
body[data-mode="dark"] .input,
body[data-mode="dark"] select,
body[data-mode="dark"] textarea,
body[data-mode="dark"] .meeting-row,
body[data-mode="dark"] .ts-modal,
body[data-mode="dark"] .meetings-card,
body[data-mode="dark"] .payroll-card *,
body[data-mode="dark"] .hr-card *{
  color: var(--text) !important;
}
body[data-mode="dark"] .toast-host *{
  color: var(--text) !important;
  background-color: rgb(28, 28, 28);
}


body[data-mode="light"],
body[data-mode="light"] .app-wrapper{
  color: var(--text);
}
body[data-mode="light"] .btn,
body[data-mode="light"] .btn * ,
body[data-mode="light"] .input,
body[data-mode="light"] select,
body[data-mode="light"] textarea,
body[data-mode="light"] .card-right,
body[data-mode="light"] .meeting-row,
body[data-mode="light"] .ts-modal,
body[data-mode="light"] .card{
  color: var(--text);
}
body[data-mode="light"] .toast-host *{
  color: var(--text) !important;
  background-color: rgb(255, 255, 255);
}

/* ===== Notifications hover popover ===== */
.notif-popover{
  position: fixed;
  z-index: 9999;
  border-radius: 14px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(var(--blur-strong));
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
  padding: 10px;
  color: var(--text);
}
body[data-mode="light"] .notif-popover{
  background: rgba(255,255,255,.72);
  border-color: rgba(0,0,0,.08);
}
.notif-popover.hidden{ display:none; }
.notif-pop-title{ font-weight: 900; margin-bottom: 8px; }
.notif-item{ padding: 8px 8px; border-radius: 12px; background: rgba(0,0,0,.10); margin-bottom: 8px; }
body[data-mode="light"] .notif-item{ background: rgba(0,0,0,.05); }
.notif-item:last-child{ margin-bottom:0; }
.notif-t{ font-weight: 900; font-size: 13px; }
.notif-s{ opacity: .8; font-size: 12px; margin-top:2px; }



/* ===== Notifications hover popover ===== */
.notif-popover{
  position: fixed;
  z-index: 9999;
  border-radius: 14px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(var(--blur-strong));
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
  padding: 10px;
  color: var(--text);
}
body[data-mode="light"] .notif-popover{
  background: rgba(255,255,255,.72);
  border-color: rgba(0,0,0,.08);
  color: #111;
}
.notif-popover .notif-pop-title{
  font-weight: 900;
  margin-bottom: 8px;
}
.notif-popover .notif-item{
  padding: 8px 8px;
  border-radius: 12px;
  background: rgba(0,0,0,.10);
  border: 1px solid rgba(255,255,255,.08);
  margin-bottom: 8px;
}
body[data-mode="light"] .notif-popover .notif-item{
  background: rgba(0,0,0,.04);
  border-color: rgba(0,0,0,.06);
}
.notif-popover .notif-item:last-child{ margin-bottom: 0; }
.notif-popover .notif-t{ font-weight: 900; font-size: 13px; }
.notif-popover .notif-s{ font-size: 12px; opacity: .85; margin-top: 2px; }
.notif-popover.hidden{ display:none; }


.notif-pop-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
.notif-pop-actions{ display:flex; gap:6px; }
.mini-btn{ border:1px solid rgba(255,255,255,.18); background: rgba(0,0,0,.12); color: inherit; padding: 4px 8px; border-radius:10px; font-size:11px; cursor:pointer; }
body[data-mode="light"] .mini-btn{ border-color: rgba(0,0,0,.10); background: rgba(0,0,0,.04); }
.notif-popover .notif-item{ display:flex; align-items:flex-start; gap:8px; }
.notif-popover .notif-ic{ width:20px; flex:0 0 20px; display:flex; align-items:center; justify-content:center; }
.notif-popover .notif-ic i{ font-size: 16px; line-height: 20px; }
.notif-popover .notif-ic img,
.notif-popover .notif-ic svg{
  width:16px;
  height:16px;
  display:block;
}

.notif-popover .notif-ic.ic-ok{ color: var(--good); }
.notif-popover .notif-ic.ic-warn{ color: var(--warn); }
.notif-popover .notif-ic.ic-bad{ color: var(--bad); }
.notif-popover .notif-ic.ic-info{ color: var(--info); }
.notif-popover .notif-main{ flex:1; min-width:0; }
.notif-popover .notif-at{ opacity:.65; font-size:11px; white-space:nowrap; margin-left:6px; }
.notif-popover .notif-repeat{
  display: inline-block;
  margin-right: 6px;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  opacity: .85;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.18);
}
body[data-mode="light"] .notif-popover .notif-repeat{
  border-color: rgba(0,0,0,.12);
  background: rgba(0,0,0,.05);
}


/* Grouped dropdown (source + badge count) */
.notif-popover .notif-pop-body{ padding: 2px 2px 4px; }
.notif-popover .notif-group{ cursor: pointer; user-select: none; }
.notif-popover .notif-ic-wrap{
  position: relative;
  width: 28px;
  flex: 0 0 28px;
  text-align: center;
}
.notif-popover .notif-count{
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 16px;
  height: 16px;
  padding: 0 5px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 900;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.22);
}
body[data-mode="light"] .notif-popover .notif-count{
  background: rgba(0,0,0,.06);
  border-color: rgba(0,0,0,.12);
}

/* ===== iOS-like dropdown: glass + stacked cards + inline expand ===== */
.notif-popover{
  /* more transparent + more blur */
  background: rgba(20, 20, 28, .34);
  border-color: rgba(255,255,255,.14);
  backdrop-filter: blur(24px) saturate(1.25);
  -webkit-backdrop-filter: blur(24px) saturate(1.25);
}
body[data-mode="light"] .notif-popover{
  background: rgba(255,255,255,.28);
  border-color: rgba(0,0,0,.08);
}

/* internal scroll for long lists */
.notif-popover .notif-pop-body{
  max-height: 420px;
  overflow-y: auto;
  padding-right: 2px;
}

/* group wrapper spacing */
.notif-popover .notif-group-wrap{ margin-bottom: 10px; }
.notif-popover .notif-group-wrap:last-child{ margin-bottom: 0; }

/* stacked preview layers (max 3) */
.notif-popover .notif-stack{ position: relative; }
.notif-popover .notif-layer{
  position: absolute;
  left: 10px;
  right: 10px;
  height: 100%;
  border-radius: 16px;
  background: rgba(20,20,28,.18);
  border: 1px solid rgba(255,255,255,.10);
  /* Glassy layer so stacked cards don't show harsh lines underneath */
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  pointer-events: none;
}
body[data-mode="light"] .notif-popover .notif-layer{
  background: rgba(255,255,255,.36);
  border-color: rgba(0,0,0,.08);
}
.notif-popover .notif-layer.l2{ top: 7px; opacity: .55; }
.notif-popover .notif-layer.l3{ top: 14px; opacity: .30; }

/* front card inside the stack */
.notif-popover .notif-stack .notif-item{ position: relative; z-index: 2; margin-bottom: 0; border-radius: 16px; }

/* Glassy cards (individual notifications) */
.notif-popover .notif-item{
  background: rgba(20,20,28,.26);
  border-color: rgba(255,255,255,.12);
  backdrop-filter: blur(16px) saturate(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
}
body[data-mode="light"] .notif-popover .notif-item{
  background: rgba(255,255,255,.62);
  border-color: rgba(0,0,0,.08);
}

/* expanded group header (Show less + X) */
.notif-popover .notif-group-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 6px 10px;
}
.notif-popover .notif-group-title{
  font-weight: 900;
  font-size: 18px;
  letter-spacing: .2px;
}
.notif-popover .notif-group-actions{ display:flex; align-items:center; gap: 10px; }
.notif-popover .mini-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.16);
}
body[data-mode="light"] .notif-popover .mini-pill{
  background: rgba(0,0,0,.06);
  border-color: rgba(0,0,0,.10);
}
.notif-popover .mini-icon{
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.16);
}
body[data-mode="light"] .notif-popover .mini-icon{
  background: rgba(0,0,0,.06);
  border-color: rgba(0,0,0,.10);
}

/* expanded list cards */
.notif-popover .notif-group-list .notif-item{
  padding: 12px 12px;
  border-radius: 18px;
  background: rgba(20,20,28,.28);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  margin-bottom: 10px;
}
body[data-mode="light"] .notif-popover .notif-group-list .notif-item{
  background: rgba(255,255,255,.66);
  border-color: rgba(0,0,0,.08);
}
.notif-popover .notif-group-list .notif-item:last-child{ margin-bottom: 0; }

/* Watcher / severity chips + inline actions (Phase 1) */
.notif-sev{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-left: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .2px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
}
.notif-sev.info{ background: rgba(46,230,255,.14); border-color: rgba(46,230,255,.24); }
.notif-sev.warn{ background: rgba(250,210,74,.14); border-color: rgba(250,210,74,.28); }
.notif-sev.crit{ background: rgba(255,79,216,.14); border-color: rgba(255,79,216,.28); }
body[data-mode="light"] .notif-sev{ background: rgba(0,0,0,.06); border-color: rgba(0,0,0,.10); }

.notif-actions{ margin-top: 8px; display:flex; gap:8px; flex-wrap:wrap; }


/* ===== Notification Center overlay (iOS-like) ===== */
.notif-center{ position: fixed; inset: 0; z-index: 10000; }
.notif-center.hidden{ display:none; }
.notif-center-backdrop{
  position: absolute; inset:0;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(14px);
}
body[data-mode="light"] .notif-center-backdrop{ background: rgba(0,0,0,.18); }

.notif-center-panel{
  position: absolute;
  left: 50%;
  top: 32px;
  transform: translateX(-50%);
  width: min(560px, calc(100vw - 24px));
  max-height: calc(100vh - 64px);
  border-radius: 28px;
  padding: 18px;
  background: rgba(20,20,28,.42);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 28px 70px rgba(0,0,0,.45);
  backdrop-filter: blur(22px);
  overflow: hidden;
}
body[data-mode="light"] .notif-center-panel{
  background: rgba(255,255,255,.78);
  border-color: rgba(0,0,0,.10);
  box-shadow: 0 20px 60px rgba(0,0,0,.18);
}

.nc-top{ display:flex; align-items:center; justify-content:space-between; gap: 10px; }
.nc-heading{ font-size: 28px; font-weight: 900; letter-spacing: .2px; }
.nc-actions{ display:flex; align-items:center; gap:8px; }
.nc-iconbtn, .nc-navbtn{
  width: 36px; height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.18);
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
body[data-mode="light"] .nc-iconbtn, body[data-mode="light"] .nc-navbtn{
  border-color: rgba(0,0,0,.12);
  background: rgba(0,0,0,.04);
}
.nc-iconbtn.hidden, .nc-navbtn.hidden{ display:none; }

.nc-body{
  margin-top: 14px;
  overflow: auto;
  max-height: calc(100vh - 150px);
  padding-right: 4px;
}

.nc-group{ margin-bottom: 12px; }
.nc-card{
  display:flex;
  gap: 12px;
  align-items: center;
  border-radius: 22px;
  padding: 14px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 16px 34px rgba(0,0,0,.18);
  cursor: pointer;
}
body[data-mode="light"] .nc-card{
  background: rgba(255,255,255,.72);
  border-color: rgba(0,0,0,.08);
  box-shadow: 0 14px 30px rgba(0,0,0,.10);
}
.nc-card.nc-card-expanded{ cursor: default; }

.nc-app{ position: relative; width: 44px; height: 44px; flex: 0 0 44px; display:flex; align-items:center; justify-content:center; }
.nc-app-ic{
  width: 42px; height: 42px;
  border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(0,0,0,.16);
  border: 1px solid rgba(255,255,255,.18);
  font-size: 18px;
}
body[data-mode="light"] .nc-app-ic{
  background: rgba(0,0,0,.04);
  border-color: rgba(0,0,0,.08);
}
.nc-badge{
  position:absolute;
  top: -6px;
  left: -6px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 12px;
  font-weight: 900;
  background: rgba(255,255,255,.92);
  color: #111;
  border: 1px solid rgba(0,0,0,.10);
}

.nc-content{ flex:1; min-width:0; }
.nc-line1{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.nc-source{ font-weight: 900; font-size: 15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nc-time{ opacity: .75; font-size: 13px; white-space: nowrap; }
.nc-line2{ opacity: .9; font-size: 14px; margin-top: 2px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient: vertical; }

/* When a group is expanded, show full text */
.nc-card-expanded .nc-line2{ -webkit-line-clamp: 6; }

/* Prevent background scroll when overlay open */
body.nc-open{ overflow: hidden; }


/* Royal Mail icon (demo) */
.rm-icon {
  width: 30px;
  height: 100%;
}

/* AI Assistant icon

/* Monochrome app icons (match Royal Mail behaviour)
   - For raster icons (img): invert in dark mode.
   - For font icons (i/svg): rely on currentColor (no invert) to avoid black-on-dark. */
img.mono-app-icon{
  filter: invert(0);
}
body[data-mode="dark"] img.mono-app-icon{
  filter: invert(1) brightness(1.2);
}

i.mono-app-icon, svg.mono-app-icon{
  filter: none;
  color: currentColor;
}
body[data-mode="dark"] i.mono-app-icon,
body[data-mode="dark"] svg.mono-app-icon{
  filter: none;
  color: currentColor;
}

/* Meta icon sizing */
.meta-icon{ width: 26px; height: 26px; display:block; }
.meta-mini-icon{ width: 14px; height: 14px; display:inline-block; vertical-align: -2px; }

/* Gmail icon sizing */
.gmail-icon{ width: 26px; height: 26px; display:block; }
.gm-icon{ width: 36px; height: 36px; display:block; }

/* Wix monogram icon sizing */
.wix-icon{ width: 26px; height: 26px; display:block; }

 /*(colourful, no inversion) */
.ai-icon{
  width: 30px;
  height: 30px;
  vertical-align: middle;
}

body[data-mode="dark"] .rm-icon {
  filter: invert(1);
}

body[data-mode="light"] .rm-icon {
  filter: invert(0);
}
img .rm-icon {
  width: 50px;
}

/* =========================
   Nav folders (macOS-like stack)
========================= */
.side-link.side-folder.open{
  outline: 2px solid rgba(255,255,255,0.15);
  border-radius: 12px;
}

.nav-folder-panel{
  position: fixed;
  z-index: 9999;
  min-width: 260px;
  max-width: 320px;
  max-height: 70vh;
  overflow: auto;
  background: rgba(20, 22, 26, 0.96);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  box-shadow: 0 18px 60px rgba(0,0,0,0.45);
  padding: 10px;
  backdrop-filter: blur(10px);
}

.nav-folder-title{
  font-weight: 600;
  font-size: 13px;
  opacity: 0.9;
  padding: 6px 8px 8px;
}

.nav-folder-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: grab;
  user-select: none;
}

.nav-folder-panel.dragging .nav-folder-head{
  cursor: grabbing;
}

.nav-folder-actions-btn{
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: inherit;
  cursor: pointer;
}

.nav-folder-actions-btn:hover{
  background: rgba(255,255,255,0.08);
}

.nav-folder-menu{
  position: absolute;
  right: 10px;
  top: 42px;
  z-index: 10001;
  min-width: 170px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  border-radius: 12px;
  background: rgba(20, 22, 26, 0.98);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 12px 40px rgba(0,0,0,0.45);
}

.nav-folder-menu.hidden{ display: none; }

.nav-folder-menu-item{
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  color: inherit;
  cursor: pointer;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-folder-menu-item:hover{
  background: rgba(255,255,255,0.08);
}

.nav-folder-menu-item.danger{
  border-color: rgba(255,0,0,0.18);
}

.nav-folder-list{
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px;
}

.nav-folder-empty{
  padding: 14px 10px;
  font-size: 12px;
  opacity: 0.7;
  border: 1px dashed rgba(255,255,255,0.12);
  border-radius: 12px;
}

.nav-folder-item{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 12px;
  cursor: pointer;
  user-select: none;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
}

.nav-folder-item:hover{
  background: rgba(255,255,255,0.08);
}

.nav-folder-item-icon{
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(255,255,255,0.06);
}

.nav-folder-item-icon i{
  font-size: 18px;
}

.nav-folder-item-label{
  font-size: 13px;
  opacity: 0.95;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-folder-name-input{
  position: fixed;
  z-index: 10000;
  height: 34px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(20, 22, 26, 0.96);
  color: #fff;
  outline: none;
  box-shadow: 0 18px 60px rgba(0,0,0,0.45);
}

.side-link.in-folder{
  display: none !important;
}


/* ===== Mode badge (DEMO/LIVE) ===== */
.mode-badge-wrap{ display:flex; align-items:center; }
.mode-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .4px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(var(--blur-card));
}
.mode-badge .dot{
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--info);
  box-shadow: 0 0 14px rgba(77,163,255,.35);
}
.mode-badge.demo{
  border-color: rgba(255,184,77,.35);
  background: rgba(255,184,77,.12);
}
.mode-badge.demo .dot{ background: var(--accent-orange); box-shadow: 0 0 14px rgba(255,184,77,.35); }
.mode-badge.live{
  border-color: rgba(67,240,122,.35);
  background: rgba(67,240,122,.10);
}
.mode-badge.live .dot{ background: var(--good); box-shadow: 0 0 14px rgba(67,240,122,.35); }

/* ===== Buttons ===== */
.btn.primary{
  background: var(--btn-grad) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.28), var(--glow);
}
.btn.primary:hover{ filter: brightness(1.08); }
.btn.secondary{
  background: rgba(255,255,255,.04) !important;
  border: 1px solid var(--card-border) !important;
}
.btn.secondary:hover{ background: rgba(255,255,255,.07) !important; }
.btn.danger{
  background: rgba(255,77,109,.20) !important;
  border: 1px solid rgba(255,77,109,.45) !important;
}

/* ===== Status chips ===== */
.chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .2px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
}
.chip.good{ color: var(--good); border-color: rgba(67,240,122,.40); background: rgba(67,240,122,.14); }
.chip.warn{ color: var(--warn); border-color: rgba(255,200,87,.45); background: rgba(255,200,87,.14); }
.chip.bad{  color: var(--bad);  border-color: rgba(255,77,109,.45); background: rgba(255,77,109,.14); }
.chip.info{ color: var(--info); border-color: rgba(77,163,255,.45); background: rgba(77,163,255,.14); }

/* ===== Low graphics mode ===== */
body.lowgfx .app-header{ backdrop-filter: blur(10px); }
body.lowgfx .mode-badge{ backdrop-filter: none; }
body.lowgfx .card, body.lowgfx .widget-card{ backdrop-filter: none !important; }
@media (max-width: 780px){
  .app-header{ backdrop-filter: blur(10px); padding: 12px 16px; }
}


/* ===== Nav "More" drawer (grid + search) ===== */
.nav-more-overlay{
  position: fixed;
  inset: 0;
  /* Softer glass overlay (avoid harsh black sheet) */
  background: rgba(0,0,0,.28);
  backdrop-filter: blur(6px);
  z-index: 26000;
  display: none;
}
.nav-more-overlay.show{ display: block; }

.nav-more-panel{
  position: absolute;
  top: calc(var(--header-h, 72px) + 10px);
  left: 78px; /* just to the right of the 64px dock */
  width: min(420px, calc(100vw - 96px));
  max-height: calc(100vh - var(--header-h, 72px) - 20px);
  overflow: auto;
  border-radius: 18px;
  /* Transparent + blur (match the rest of the UI glass) */
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
  backdrop-filter: blur(18px);
  padding: 12px;
}

body[data-mode="light"] .nav-more-panel{
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 18px 60px rgba(0,0,0,.18);
}

.nav-more-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 4px 4px 10px 4px;
}
.nav-more-title{
  font-weight: 900;
  letter-spacing: .2px;
}
.nav-more-close{
  border: 0;
  background: transparent;
  color: inherit;
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  cursor: pointer;
  opacity: .9;
}
.nav-more-close:hover{
  background: rgba(255,255,255,.06);
}

.nav-more-search{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  margin-bottom: 12px;
}
.nav-more-search input{
  width: 100%;
  border: 0;
  outline: none;
  background: transparent;
  color: inherit;
  font-weight: 800;
}
.nav-more-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding-bottom: 6px;
}
.nav-more-item{
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  border-radius: 18px;
  padding: 12px 10px;
  color: inherit;
  cursor: pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 10px;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.nav-more-item:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.22);
}
.nav-more-icon{
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  /* Remove dark/black icon tiles. Use subtle glass instead. */
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(14px);
}
.nav-more-item:hover .nav-more-icon{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.18);
}
body[data-mode="light"] .nav-more-icon{
  background: rgba(15,23,42,.05);
  border: 1px solid rgba(0,0,0,.08);
}
.nav-more-icon i{ font-size: 20px; }
.nav-more-icon img{ width: 26px; height: 26px; display:block; }

.nav-more-label{
  font-size: 12px;
  font-weight: 900;
  opacity: .92;
  text-align:center;
  line-height: 1.1;
}

/* Small screens: make it a centered sheet */
@media (max-width: 780px){
  .nav-more-panel{
    left: 12px;
    right: 12px;
    width: auto;
  }
}

body.nav-more-open{ overflow: hidden; }

/* ------------------------------------------------------------
   Desktop-only gate (phones denied)
   ------------------------------------------------------------ */

.device-block{
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(900px 600px at 30% 10%, rgba(120,80,255,.22), transparent 55%),
    radial-gradient(900px 600px at 70% 80%, rgba(0,200,255,.18), transparent 55%),
    rgba(8,10,16,.92);
  backdrop-filter: blur(10px);
}

body.device-blocked .device-block{ display:flex; }
body.device-blocked .app-wrapper{ display:none; }

.device-block-card{
  width: min(520px, 100%);
  border-radius: 22px;
  padding: 24px 22px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 18px 48px rgba(0,0,0,.45);
  text-align: center;
}

.device-block-brand{
  width: 54px;
  height: 54px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  margin: 0 auto 14px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
}
.device-block-brand i{ font-size: 22px; opacity: .92; }

.device-block-title{
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: .2px;
}

.device-block-text{
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.5;
  opacity: .90;
}

.device-block-hint{
  font-size: 12px;
  opacity: .70;
  line-height: 1.4;
}

/* If CSS detects a phone-like environment, block immediately (prevents flicker). */
@media (max-width: 900px) and (pointer: coarse){
  /* Allow specific public pages (repair tracking + booking) on phones.
     We toggle html.mobile-exception early based on the URL hash.
     NOTE: body.device-blocked still overrides this for non-allowed routes.
  */
  html:not(.mobile-exception) .device-block{ display:flex; }
  html:not(.mobile-exception) .app-wrapper{ display:none; }
}

/* ==================================
   Cursor policy (STRICT)
   ==================================
   Mo's rule: cursor pointer should ONLY appear on buttons.
   We intentionally do NOT apply pointer to generic clickable containers,
   links, or data-attribute targets.
*/

/* Native buttons (and inputs that behave like buttons) */
button,
input[type="button"],
input[type="submit"],
input[type="reset"]{
  cursor: pointer;
}

/* Links: keep default cursor unless the link is styled as a button */
.app-wrapper a{ cursor: default; }
.app-wrapper a.btn,
.app-wrapper a.btn-sm,
.app-wrapper a.file-pill{
  cursor: pointer;
}

/*
 * Cursor enforcement (final):
 * - Default everywhere (prevents "pointer everywhere")
 * - Text cursor inside inputs/textarea
 * - Pointer ONLY for explicit controls
 */
:where(.app-wrapper, .ts-modal) *{ cursor: default !important; }
:where(.app-wrapper, .ts-modal) input:not([type="button"]):not([type="submit"]):not([type="reset"]),
:where(.app-wrapper, .ts-modal) textarea{
  cursor: text !important;
}

:where(.app-wrapper, .ts-modal) button,
:where(.app-wrapper, .ts-modal) input[type="button"],
:where(.app-wrapper, .ts-modal) input[type="submit"],
:where(.app-wrapper, .ts-modal) input[type="reset"],
:where(.app-wrapper, .ts-modal) .btn,
:where(.app-wrapper, .ts-modal) .btn-sm,
:where(.app-wrapper, .ts-modal) .nav-link,
:where(.app-wrapper, .ts-modal) .icon-btn,
:where(.app-wrapper, .ts-modal) .mini-btn,
:where(.app-wrapper, .ts-modal) .tool-btn,
:where(.app-wrapper, .ts-modal) .drop-item,
:where(.app-wrapper, .ts-modal) .user-pill,
:where(.app-wrapper, .ts-modal) .store-dropdown-btn,
:where(.app-wrapper, .ts-modal) .store-dd-item,
:where(.app-wrapper, .ts-modal) .alert-chip,
:where(.app-wrapper, .ts-modal) .db-go,
:where(.app-wrapper, .ts-modal) .side-link,
:where(.app-wrapper, .ts-modal) .nav-remove-btn,
:where(.app-wrapper, .ts-modal) .ts-modal-close,
:where(.app-wrapper, .ts-modal) .ts-toast-x,
:where(.app-wrapper, .ts-modal) a.btn,
:where(.app-wrapper, .ts-modal) a.btn-sm,
:where(.app-wrapper, .ts-modal) a.file-pill{
  cursor: pointer !important;
}

:where(.app-wrapper, .ts-modal) button:disabled,
:where(.app-wrapper, .ts-modal) input[type="button"]:disabled,
:where(.app-wrapper, .ts-modal) input[type="submit"]:disabled,
:where(.app-wrapper, .ts-modal) input[type="reset"]:disabled,
:where(.app-wrapper, .ts-modal) [aria-disabled="true"]{
  cursor: not-allowed !important;
}

button:disabled,
input[type="button"]:disabled,
input[type="submit"]:disabled,
input[type="reset"]:disabled{
  cursor: not-allowed;
}

/* =========================
   Local Shop suite sub-nav
   Used across: Local Store / POS / Work Orders
========================= */
.lsuite-subnav{
  display:flex;
  gap:10px;
  align-items:center;
  /* UX: transparent top bar across Local Shop suite pages */
  padding:0;
  border-radius:14px;
  border:none;
  background: transparent;
  box-shadow: none;
  margin-bottom: 14px;
  
}

.lsuite-subnav .lsuite-label{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:12px;
  color: var(--text-muted);
  font-size: 12px;
  letter-spacing: .2px;
  border:1px solid transparent;
}

.lsuite-subnav .lsuite-tabs{ display:flex; gap:8px; flex-wrap:wrap; }

.lsuite-tab{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:12px;
  border:1px solid var(--card-border);
  background: rgba(255,255,255,0.03);
  color: var(--text);
  font-weight: 700;
  font-size: 13px;
}

body[data-mode="light"] .lsuite-tab{ background: rgba(0,0,0,0.03); }

.lsuite-tab:hover{ filter: brightness(1.03); }

.lsuite-tab.active{
  border-color: rgba(120,160,255,0.55);
  background: rgba(120,160,255,0.12);
}

body[data-mode="light"] .lsuite-tab.active{
  border-color: rgba(80,120,255,0.45);
  background: rgba(80,120,255,0.10);
}

.lsuite-subnav .lsuite-spacer{ flex:1; }

.lsuite-subnav .lsuite-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--card-border);
  color: var(--text-muted);
  font-size:12px;
}

/* ===== Drawer form controls (select caret + glass consistency) ===== */
.ts-drawer select:not([multiple]){
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--input-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 14px 14px;
  padding-right: 40px;
}
body[data-mode="light"] .ts-drawer select:not([multiple]){
  background-color: rgba(255,255,255,0.22);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230b1324' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}