/* Scheduler screen — "Glass HUD Command Center" visual system, matching
   the dashboard/jobs screens (see dashboard.css for the canonical token
   definitions). Scoped entirely to #screen-scheduler.scheduler-hud so no
   other screen is affected. Token values are mirrored 1:1 from jobs.css.

   This screen is a live calendar/resource-grid (day/week/month/agenda/list
   toggle, date strip, resource grid, business-hours toggle, unscheduled-jobs
   tray) rather than a record-list-with-table, so this is a pure CSS reskin
   of the existing chrome — no hero-panel/table/stage-breakdown pattern is
   forced onto it. All ids/classes/markup are untouched; base functional
   rules for .sched-* live in styles.css and already reference the app's
   generic --border/--bg-card/--accent/--text tokens, so most of the reskin
   here happens for free once the tokens below are redefined in this scope —
   only glass surfaces (blur/shadow), pill active-states, and a few
   HUD-specific refinements need explicit rules. */

#screen-scheduler.scheduler-hud {
  --dash-bg: #05070B;
  --dash-surface: rgba(18, 24, 34, 0.55);
  --dash-border: rgba(130, 200, 255, 0.10);
  --dash-border-strong: rgba(130, 200, 255, 0.28);
  --dash-cyan: #22D3EE;
  --dash-amber: #FBBF24;
  --dash-red: #FF4757;
  --dash-teal: #34D399;
  --dash-text: #E7EDF5;
  --dash-text-muted: #8B99AC;
  --dash-font-display: 'Chakra Petch', sans-serif;
  --dash-font-mono: 'JetBrains Mono', monospace;
  --dash-font-body: 'Manrope', sans-serif;

  --bg-card: var(--dash-surface);
  --bg-input: rgba(255, 255, 255, 0.05);
  --border: var(--dash-border);
  --border-light: var(--dash-border-strong);
  --text: var(--dash-text);
  --text-muted: var(--dash-text-muted);
  --accent: var(--dash-cyan);
  --accent-light: #67e2f5;
  --accent-dark: #0bb8d9;
  --success: var(--dash-teal);
  --warning: var(--dash-amber);
  --danger: var(--dash-red);
  --info: var(--dash-cyan);
  --primary-dark: #05070B;
  --radius: 14px;
  --shadow: 0 8px 32px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(255, 255, 255, 0.03) inset;

  position: relative;
  isolation: isolate;
  font-family: var(--dash-font-body);
  color: var(--dash-text);
  background-color: var(--dash-bg);
  background-image:
    radial-gradient(ellipse 900px 520px at 12% -12%, rgba(34, 211, 238, 0.10), transparent 60%),
    radial-gradient(ellipse 700px 480px at 105% 0%, rgba(251, 191, 36, 0.06), transparent 55%),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.018) 0px, rgba(255, 255, 255, 0.018) 1px, transparent 1px, transparent 3px);
  background-size: auto, auto, 100% 3px;
  background-repeat: no-repeat, no-repeat, repeat;
  border-radius: 18px;
  padding: 20px;
}

[data-theme="light"] #screen-scheduler.scheduler-hud {
  --dash-bg: #F4F7FB;
  --dash-surface: rgba(255, 255, 255, 0.72);
  --dash-border: rgba(15, 23, 42, 0.10);
  --dash-border-strong: rgba(15, 23, 42, 0.22);
  --dash-cyan: #0E7490;
  --dash-amber: #B45309;
  --dash-red: #B91C1C;
  --dash-teal: #047857;
  --dash-text: #0F172A;
  --dash-text-muted: #475569;

  --bg-card: var(--dash-surface);
  --bg-input: rgba(15, 23, 42, 0.035);
  --border: var(--dash-border);
  --border-light: var(--dash-border-strong);
  --text: var(--dash-text);
  --text-muted: var(--dash-text-muted);
  --accent: var(--dash-cyan);
  --accent-light: #38BDF8;
  --accent-dark: #075E6D;
  --success: var(--dash-teal);
  --warning: var(--dash-amber);
  --danger: var(--dash-red);
  --info: var(--dash-cyan);
  --primary-dark: #ffffff;
  --radius: 14px;
  --shadow: 0 8px 28px rgba(15, 23, 42, 0.10), 0 1px 0 rgba(255, 255, 255, 0.6) inset;

  color: var(--dash-text);
  background-color: var(--dash-bg);
  background-image:
    radial-gradient(ellipse 900px 520px at 12% -12%, rgba(14, 116, 144, 0.07), transparent 60%),
    radial-gradient(ellipse 700px 480px at 105% 0%, rgba(180, 83, 9, 0.045), transparent 55%),
    repeating-linear-gradient(180deg, rgba(15, 23, 42, 0.012) 0px, rgba(15, 23, 42, 0.012) 1px, transparent 1px, transparent 3px);
}

@media (prefers-reduced-motion: no-preference) {
  #screen-scheduler.scheduler-hud {
    animation: dashMeshDrift 24s ease-in-out infinite alternate;
  }
}

/* ── Typography ── */
#screen-scheduler.scheduler-hud h3,
#screen-scheduler.scheduler-hud .dash-heading {
  font-family: var(--dash-font-display);
  letter-spacing: 0.01em;
}

#screen-scheduler.scheduler-hud .dash-figure {
  font-family: var(--dash-font-mono);
  font-variant-numeric: tabular-nums;
}

/* ── Glass panels — Unscheduled Jobs card inherits this automatically ── */
#screen-scheduler.scheduler-hud .card {
  background: var(--bg-card);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  color: var(--text);
  position: relative;
}

/* ── Load-in sequence — reuses dashRise (defined in dashboard.css). A
   single staggered fade across the existing chrome rather than the
   card-stagger pattern used on record-list screens: this screen is one
   continuous toolbar + grid, not a set of discrete panels. ── */
@media (prefers-reduced-motion: no-preference) {
  #screen-scheduler.scheduler-hud .sched-toolbar,
  #screen-scheduler.scheduler-hud #schedStripWrapper,
  #screen-scheduler.scheduler-hud #schedulerResourceOuter,
  #screen-scheduler.scheduler-hud .sched-biz-footer,
  #screen-scheduler.scheduler-hud > .card {
    animation: dashRise 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  #screen-scheduler.scheduler-hud .sched-toolbar { animation-delay: 0ms; }
  #screen-scheduler.scheduler-hud #schedStripWrapper { animation-delay: 60ms; }
  #screen-scheduler.scheduler-hud #schedulerResourceOuter { animation-delay: 120ms; }
  #screen-scheduler.scheduler-hud .sched-biz-footer { animation-delay: 160ms; }
  #screen-scheduler.scheduler-hud > .card { animation-delay: 190ms; }
}

@media (prefers-reduced-motion: reduce) {
  #screen-scheduler.scheduler-hud .sched-toolbar,
  #screen-scheduler.scheduler-hud #schedStripWrapper,
  #screen-scheduler.scheduler-hud #schedulerResourceOuter,
  #screen-scheduler.scheduler-hud .sched-biz-footer,
  #screen-scheduler.scheduler-hud > .card {
    animation: none !important;
  }
}

/* ── Toolbar: glass bar (lighter than a full .card — no heavy shadow,
   it's chrome not content) ── */
#screen-scheduler.scheduler-hud .sched-toolbar {
  background: var(--bg-card);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 16px;
  margin-bottom: 12px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.22);
}

[data-theme="light"] #screen-scheduler.scheduler-hud .sched-toolbar {
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
}

/* ── Pill buttons: today / prev / next / team / filters ── */
#screen-scheduler.scheduler-hud .sched-today-btn,
#screen-scheduler.scheduler-hud .sched-nav-btn,
#screen-scheduler.scheduler-hud .sched-filter-btn,
#screen-scheduler.scheduler-hud .sched-biz-btn {
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 999px;
  font-weight: 600;
  font-family: var(--dash-font-body);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

#screen-scheduler.scheduler-hud .sched-today-btn:hover,
#screen-scheduler.scheduler-hud .sched-nav-btn:hover,
#screen-scheduler.scheduler-hud .sched-filter-btn:hover,
#screen-scheduler.scheduler-hud .sched-biz-btn:hover {
  border-color: var(--dash-border-strong);
  color: var(--text);
  background: var(--bg-input);
}

#screen-scheduler.scheduler-hud .sched-today-btn:focus-visible,
#screen-scheduler.scheduler-hud .sched-nav-btn:focus-visible,
#screen-scheduler.scheduler-hud .sched-filter-btn:focus-visible,
#screen-scheduler.scheduler-hud .sched-biz-btn:focus-visible,
#screen-scheduler.scheduler-hud .sched-view-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.22);
  border-color: var(--dash-cyan);
}

/* ── Date pill: cyan-accented, reads like a live readout ── */
#screen-scheduler.scheduler-hud .sched-date-pill {
  color: var(--dash-cyan);
  font-family: var(--dash-font-display);
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* ── View group: glass pill-tab tray, active state in cyan (mirrors
   jobs.css .tabs .tab.active) ── */
#screen-scheduler.scheduler-hud .sched-view-group {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px;
}

#screen-scheduler.scheduler-hud .sched-view-btn {
  color: var(--text-muted);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--dash-font-body);
  transition: background 0.15s ease, color 0.15s ease;
}

#screen-scheduler.scheduler-hud .sched-view-btn:hover { color: var(--text); }

#screen-scheduler.scheduler-hud .sched-view-btn.active {
  background: rgba(34, 211, 238, 0.14);
  color: var(--dash-cyan);
  font-weight: 700;
}

/* ── Team / Filters dropdowns — glass panel matching .card. Background,
   border and radius are set inline by scheduler.js (they already resolve
   against the tokens above), so only the blur/shadow needs adding. ── */
#screen-scheduler.scheduler-hud #teamDropdown,
#screen-scheduler.scheduler-hud #schedulerFiltersDropdown {
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow: var(--shadow) !important;
}

#screen-scheduler.scheduler-hud .sched-dropdown-item {
  color: var(--text);
  font-family: var(--dash-font-body);
}

#screen-scheduler.scheduler-hud .sched-dropdown-item:hover {
  background: rgba(34, 211, 238, 0.08);
}

#screen-scheduler.scheduler-hud .sched-dropdown-item.active {
  color: var(--dash-cyan);
}

/* ── Avatars: solid cyan chip, dark text guaranteed regardless of
   --primary-dark resolution elsewhere in the app ── */
#screen-scheduler.scheduler-hud .sched-avatar {
  background: var(--dash-cyan);
  color: #05070B;
  font-family: var(--dash-font-mono);
}

/* ── Date strip: subtle glass rail, current-day + selected in cyan ── */
#screen-scheduler.scheduler-hud .sched-strip-wrapper {
  background: var(--bg-card);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 10px;
  margin-bottom: 12px;
}

#screen-scheduler.scheduler-hud .sched-day-pill {
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text-muted);
  transition: background 0.15s ease, border-color 0.15s ease;
}

#screen-scheduler.scheduler-hud .sched-day-pill:hover {
  border-color: var(--dash-border-strong);
}

#screen-scheduler.scheduler-hud .sched-day-pill .dnum { color: var(--text); }

#screen-scheduler.scheduler-hud .sched-day-pill.today {
  border-color: var(--dash-cyan);
  box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.18) inset;
}

#screen-scheduler.scheduler-hud .sched-day-pill.selected {
  background: rgba(34, 211, 238, 0.14);
  border-color: var(--dash-cyan);
  color: var(--dash-cyan);
}

#screen-scheduler.scheduler-hud .sched-day-pill.selected .dnum {
  color: var(--dash-cyan);
}

/* ── Resource / calendar grid: glass panel wrapping the JS-rendered grid.
   Internal cell/column dividers are drawn inline by scheduler.js with
   var(--border), so they pick up the token above automatically. ── */
#screen-scheduler.scheduler-hud .sched-resource-outer {
  background: var(--bg-card);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* Job blocks rendered by scheduler.js (renderJobBlock) — background/
   border-left colour and most spacing is set inline per-job; these rules
   add HUD polish (type, depth) without touching layout-critical props. */
#screen-scheduler.scheduler-hud .scheduler-job-block {
  font-family: var(--dash-font-body);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}

[data-theme="light"] #screen-scheduler.scheduler-hud .scheduler-job-block {
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

#screen-scheduler.scheduler-hud .scheduler-job-block.outside-hours {
  opacity: 0.5;
}

/* ── Business hours footer ── */
#screen-scheduler.scheduler-hud .sched-biz-footer {
  margin-top: 12px;
}

#screen-scheduler.scheduler-hud .sched-biz-btn.active {
  background: rgba(34, 211, 238, 0.14);
  border-color: var(--dash-cyan);
  color: var(--dash-cyan);
}

/* ── Unscheduled Jobs panel heading ── */
#screen-scheduler.scheduler-hud #unscheduledCount {
  color: var(--text-muted);
  font-family: var(--dash-font-mono);
}

/* ── Badges: same semantic remap as dashboard/jobs —
   cyan=live/in-progress, amber=pending, red=overdue, teal=completed ── */
#screen-scheduler.scheduler-hud .badge {
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
}

#screen-scheduler.scheduler-hud .badge-cyan,
#screen-scheduler.scheduler-hud .badge-blue {
  background: rgba(34, 211, 238, 0.12);
  color: var(--dash-cyan);
  border-color: rgba(34, 211, 238, 0.30);
}

#screen-scheduler.scheduler-hud .badge-orange {
  background: rgba(251, 191, 36, 0.12);
  color: var(--dash-amber);
  border-color: rgba(251, 191, 36, 0.30);
}

#screen-scheduler.scheduler-hud .badge-red {
  background: rgba(255, 71, 87, 0.12);
  color: var(--dash-red);
  border-color: rgba(255, 71, 87, 0.30);
}

#screen-scheduler.scheduler-hud .badge-green {
  background: rgba(52, 211, 153, 0.12);
  color: var(--dash-teal);
  border-color: rgba(52, 211, 153, 0.30);
}

#screen-scheduler.scheduler-hud .badge-grey {
  background: rgba(139, 153, 172, 0.10);
  color: var(--dash-text-muted);
  border-color: rgba(139, 153, 172, 0.22);
}

[data-theme="light"] #screen-scheduler.scheduler-hud .badge-cyan,
[data-theme="light"] #screen-scheduler.scheduler-hud .badge-blue {
  background: rgba(14, 116, 144, 0.10);
  border-color: rgba(14, 116, 144, 0.28);
}

[data-theme="light"] #screen-scheduler.scheduler-hud .badge-orange {
  background: rgba(180, 83, 9, 0.10);
  border-color: rgba(180, 83, 9, 0.28);
}

[data-theme="light"] #screen-scheduler.scheduler-hud .badge-red {
  background: rgba(185, 28, 28, 0.10);
  border-color: rgba(185, 28, 28, 0.28);
}

[data-theme="light"] #screen-scheduler.scheduler-hud .badge-green {
  background: rgba(4, 120, 87, 0.10);
  border-color: rgba(4, 120, 87, 0.28);
}

[data-theme="light"] #screen-scheduler.scheduler-hud .badge-grey {
  background: rgba(71, 85, 105, 0.08);
  border-color: rgba(71, 85, 105, 0.20);
}

/* ── Buttons inside the HUD scope pick up the accent family (Assign
   buttons on the Unscheduled Jobs tray) ── */
#screen-scheduler.scheduler-hud .btn-primary {
  background: var(--dash-cyan);
  border-color: var(--dash-cyan);
  color: #05070B;
}

[data-theme="light"] #screen-scheduler.scheduler-hud .btn-primary {
  color: #ffffff;
}

#screen-scheduler.scheduler-hud .btn-secondary {
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text);
}