/* ============================================================
   depth-overhaul.css  v4
   Visual depth enhancements.
   All rules scoped under html.depth-effects so the settings
   toggle can turn them on/off by adding/removing that class.
   Delete this file + its <link> in index.html to revert.
   ============================================================ */


/* ─── 2. CARD ELEVATION: 3-D SLAB EFFECT ───────────────────── */

/* ---- Tier 1: Primary cards (bg-2 panels) ---- */
html.depth-effects .client-card,
html.depth-effects .chart-card,
html.depth-effects .fc-card,
html.depth-effects .ta-card,
html.depth-effects .sched-col,
html.depth-effects .client-col,
html.depth-effects .fc-scenario-card,
html.depth-effects .perf-assessment-card,
html.depth-effects .ar-section-card,
html.depth-effects .ar-section,
html.depth-effects .ar-kpi,
html.depth-effects .admin-kpi-card,
html.depth-effects .admin-location-card,
html.depth-effects .admin-region-card,
html.depth-effects .settings-section,
html.depth-effects .funnel-section-block,
html.depth-effects .cp-panel,
html.depth-effects .wb-main,
html.depth-effects .wb-sidebar,
html.depth-effects .sched-cal-cell,
html.depth-effects .welcome-card,
html.depth-effects .note-composer {
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.06),
    inset 0 -1px 0 rgba(0,0,0,0.18),
    0 1px  2px rgba(0,0,0,0.45),
    0 4px 12px rgba(0,0,0,0.25),
    0 12px 40px rgba(0,0,0,0.20) !important;
  transition: box-shadow 0.28s ease, transform 0.28s ease, border-color 0.2s ease !important;
}

/* ---- Tier 2: Secondary surfaces (bg-3 insets) ---- */
html.depth-effects .fin-item,
html.depth-effects .col-client-btn,
html.depth-effects .radio-label,
html.depth-effects .stype-btn,
html.depth-effects .smart-start-fields,
html.depth-effects .note-entry,
html.depth-effects .sched-slot,
html.depth-effects .day-slot-item,
html.depth-effects .fcd-billing-card,
html.depth-effects .fin-breakdown-card,
html.depth-effects .fcd-note-preview-entry,
html.depth-effects .ar-session-kpi-item,
html.depth-effects .perf-metric-chip,
html.depth-effects .sched-status-change-section,
html.depth-effects .wb-saved-item,
html.depth-effects .wb-suggestion-item {
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.045),
    inset 0 -1px 0 rgba(0,0,0,0.15),
    0 1px  3px rgba(0,0,0,0.38),
    0 4px 10px rgba(0,0,0,0.14) !important;
  transition: box-shadow 0.24s ease, transform 0.24s ease, border-color 0.2s ease !important;
}

/* ---- Hover: lift + deepen shadow (Tier 1) ---- */
html.depth-effects .client-card:hover,
html.depth-effects .chart-card:hover,
html.depth-effects .fc-card:hover,
html.depth-effects .ta-card:hover,
html.depth-effects .sched-col:hover,
html.depth-effects .client-col:hover,
html.depth-effects .fc-scenario-card:hover,
html.depth-effects .admin-kpi-card:hover,
html.depth-effects .admin-location-card:hover,
html.depth-effects .admin-region-card:hover,
html.depth-effects .settings-section:hover,
html.depth-effects .ar-section:hover,
html.depth-effects .funnel-section-block:hover {
  transform: translateY(-2px) !important;
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.08),
    inset 0 -1px 0 rgba(0,0,0,0.22),
    0 2px  4px rgba(0,0,0,0.50),
    0 8px 20px rgba(0,0,0,0.30),
    0 20px 60px rgba(0,0,0,0.25) !important;
}

/* ---- Hover: lift (Tier 2) ---- */
html.depth-effects .col-client-btn:hover,
html.depth-effects .note-entry:hover,
html.depth-effects .sched-slot:hover,
html.depth-effects .day-slot-item:hover,
html.depth-effects .fin-item:hover,
html.depth-effects .fcd-billing-card:hover,
html.depth-effects .fin-breakdown-card:hover,
html.depth-effects .perf-metric-chip:hover,
html.depth-effects .wb-saved-item:hover {
  transform: translateY(-1px) !important;
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.06),
    inset 0 -1px 0 rgba(0,0,0,0.18),
    0 2px  6px rgba(0,0,0,0.42),
    0 8px 18px rgba(0,0,0,0.18) !important;
}

/* ---- Modal: dramatic floating slab ---- */
html.depth-effects .modal {
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.08),
    inset 0 -1px 0 rgba(0,0,0,0.25),
    0 4px  8px rgba(0,0,0,0.55),
    0 16px 48px rgba(0,0,0,0.45),
    0 40px 120px rgba(0,0,0,0.50) !important;
  position: relative;
}

/* ---- Welcome card: hero slab ---- */
html.depth-effects .welcome-card {
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.10),
    inset 0 -1px 0 rgba(0,0,0,0.20),
    0 4px  8px rgba(0,0,0,0.50),
    0 20px 60px rgba(0,0,0,0.50),
    0 40px 120px rgba(0,0,0,0.40),
    0 0 0 1px rgba(126,232,162,0.08) !important;
}

/* ---- Stat chips: slight slab ---- */
html.depth-effects .stat-chip {
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.04),
    inset 0 -1px 0 rgba(0,0,0,0.12) !important;
  transition: box-shadow 0.2s ease, background 0.2s ease !important;
}
html.depth-effects .stat-chip:hover {
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.06),
    inset 0 -1px 0 rgba(0,0,0,0.15),
    0 2px 8px rgba(0,0,0,0.2) !important;
}


/* ─── 3. GLASSMORPHISM HEADER & FILTER BARS ────────────────── */

html.depth-effects .summary-bar {
  background: rgba(15, 15, 17, 0.65) !important;
  backdrop-filter: blur(28px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.6) !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
}

html.depth-effects .filter-bar {
  background: rgba(22, 22, 26, 0.60) !important;
  backdrop-filter: blur(24px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.4) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}

html.depth-effects .summary-bar::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 5%;
  right: 5%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(126,232,162,0.20) 25%,
    rgba(126,232,162,0.32) 50%,
    rgba(126,232,162,0.20) 75%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
}

html.depth-effects .modal-overlay {
  backdrop-filter: blur(22px) !important;
  -webkit-backdrop-filter: blur(22px) !important;
  background: rgba(0, 0, 0, 0.82) !important;
}


/* ─── 4. GRADIENT TOP-EDGE ACCENT (overhead lighting) ──────── */

html.depth-effects .client-card,
html.depth-effects .chart-card,
html.depth-effects .fc-card,
html.depth-effects .ta-card,
html.depth-effects .client-col,
html.depth-effects .sched-col,
html.depth-effects .fc-scenario-card,
html.depth-effects .perf-assessment-card,
html.depth-effects .ar-section-card,
html.depth-effects .ar-section,
html.depth-effects .admin-kpi-card,
html.depth-effects .admin-location-card,
html.depth-effects .admin-region-card,
html.depth-effects .settings-section,
html.depth-effects .funnel-section-block,
html.depth-effects .fcd-billing-card,
html.depth-effects .fin-breakdown-card {
  position: relative;
  overflow: hidden;
  border-top-color: rgba(126,232,162,0.13) !important;
}

html.depth-effects .client-card::after,
html.depth-effects .chart-card::after,
html.depth-effects .fc-card::after,
html.depth-effects .ta-card::after,
html.depth-effects .client-col::after,
html.depth-effects .fc-scenario-card::after,
html.depth-effects .perf-assessment-card::after,
html.depth-effects .ar-section-card::after,
html.depth-effects .ar-section::after,
html.depth-effects .admin-kpi-card::after,
html.depth-effects .admin-location-card::after,
html.depth-effects .admin-region-card::after,
html.depth-effects .settings-section::after,
html.depth-effects .funnel-section-block::after,
html.depth-effects .fcd-billing-card::after,
html.depth-effects .fin-breakdown-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 6%;
  right: 6%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(126,232,162,0.22) 18%,
    rgba(126,232,162,0.42) 50%,
    rgba(126,232,162,0.22) 82%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 2;
}

html.depth-effects .client-card:hover::after,
html.depth-effects .chart-card:hover::after,
html.depth-effects .fc-card:hover::after,
html.depth-effects .ta-card:hover::after,
html.depth-effects .client-col:hover::after,
html.depth-effects .fc-scenario-card:hover::after,
html.depth-effects .admin-kpi-card:hover::after,
html.depth-effects .settings-section:hover::after,
html.depth-effects .ar-section:hover::after {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(126,232,162,0.32) 18%,
    rgba(126,232,162,0.58) 50%,
    rgba(126,232,162,0.32) 82%,
    transparent 100%
  );
}

html.depth-effects .sched-col::after {
  content: '';
  position: absolute;
  top: 0;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(126,232,162,0.22) 25%,
    rgba(126,232,162,0.32) 50%,
    rgba(126,232,162,0.22) 75%,
    transparent
  );
  pointer-events: none;
  z-index: 2;
}

html.depth-effects .sched-today-col::after {
  left: 4% !important;
  right: 4% !important;
  height: 2px !important;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(126,232,162,0.40) 18%,
    rgba(126,232,162,0.68) 50%,
    rgba(126,232,162,0.40) 82%,
    transparent
  ) !important;
}

html.depth-effects .modal::after {
  content: '';
  position: absolute;
  top: 0;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(126,232,162,0.24) 25%,
    rgba(126,232,162,0.40) 50%,
    rgba(126,232,162,0.24) 75%,
    transparent
  );
  pointer-events: none;
  z-index: 2;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}


/* ─── 5. ELEVATED BUTTONS WITH SOFT GLOW ───────────────────── */

html.depth-effects .btn-primary,
html.depth-effects .btn-add-client,
html.depth-effects .welcome-btn-primary {
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.18),
    inset 0 -1px 0 rgba(0,0,0,0.12),
    0 4px 18px rgba(126,232,162,0.35) !important;
  transition: box-shadow 0.22s ease, transform 0.22s ease, opacity 0.22s ease !important;
}

html.depth-effects .btn-primary:hover,
html.depth-effects .btn-add-client:hover,
html.depth-effects .welcome-btn-primary:hover {
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.22),
    inset 0 -1px 0 rgba(0,0,0,0.15),
    0 6px 28px rgba(126,232,162,0.50) !important;
  transform: translateY(-2px) scale(1.02) !important;
}

html.depth-effects .btn-primary:active,
html.depth-effects .btn-add-client:active,
html.depth-effects .welcome-btn-primary:active {
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.10),
    inset 0 -1px 0 rgba(0,0,0,0.08),
    0 2px 10px rgba(126,232,162,0.22) !important;
  transform: translateY(0) scale(0.98) !important;
}

html.depth-effects .btn-danger {
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.10),
    inset 0 -1px 0 rgba(0,0,0,0.10),
    0 4px 16px rgba(255,107,107,0.28) !important;
  transition: box-shadow 0.22s ease, transform 0.22s ease, background 0.22s ease !important;
}

html.depth-effects .btn-danger:hover {
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.14),
    inset 0 -1px 0 rgba(0,0,0,0.14),
    0 6px 24px rgba(255,107,107,0.42) !important;
  transform: translateY(-2px) scale(1.02) !important;
}

html.depth-effects .btn-danger:active {
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.06),
    0 2px 8px rgba(255,107,107,0.18) !important;
  transform: translateY(0) scale(0.98) !important;
}

html.depth-effects .btn-ghost {
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.04),
    inset 0 -1px 0 rgba(0,0,0,0.10) !important;
  transition: box-shadow 0.22s ease, transform 0.22s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
}
html.depth-effects .btn-ghost:hover {
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.06),
    inset 0 -1px 0 rgba(0,0,0,0.12),
    0 3px 14px rgba(0,0,0,0.30) !important;
  transform: translateY(-1px) !important;
}

html.depth-effects .btn-icon {
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.03),
    inset 0 -1px 0 rgba(0,0,0,0.08) !important;
}
html.depth-effects .btn-icon.primary:hover {
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.06),
    0 3px 14px rgba(126,232,162,0.22) !important;
}
html.depth-effects .btn-icon.danger:hover {
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.06),
    0 3px 14px rgba(255,107,107,0.20) !important;
}

html.depth-effects .brand-mark {
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.08),
    0 0 24px rgba(126,232,162,0.18),
    0 0 6px rgba(126,232,162,0.10) !important;
}

html.depth-effects .status-badge.active   { box-shadow: 0 0 12px rgba(126,232,162,0.16) !important; }
html.depth-effects .status-badge.at-risk  { box-shadow: 0 0 12px rgba(255,201,92,0.16) !important; }
html.depth-effects .balance-funded        { box-shadow: 0 0 10px rgba(126,232,162,0.13) !important; }
html.depth-effects .balance-low           { box-shadow: 0 0 10px rgba(255,201,92,0.13) !important; }
html.depth-effects .balance-empty         { box-shadow: 0 0 10px rgba(255,107,107,0.13) !important; }

html.depth-effects .badge-stype,
html.depth-effects .badge-sm {
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.06),
    0 1px 2px rgba(0,0,0,0.22) !important;
}


/* ─── 6. RECESSED INPUT FIELDS ─────────────────────────────── */

html.depth-effects .form-input,
html.depth-effects .filter-input,
html.depth-effects .filter-select,
html.depth-effects .search-input,
html.depth-effects .note-composer-input,
html.depth-effects .schedule-row select,
html.depth-effects .schedule-row input,
html.depth-effects .sched-row-type,
html.depth-effects textarea.form-input,
html.depth-effects select.form-input {
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,0.40),
    inset 0 1px 2px rgba(0,0,0,0.25) !important;
  transition: box-shadow 0.2s ease, border-color 0.2s ease !important;
}

html.depth-effects .form-input:focus,
html.depth-effects .filter-input:focus,
html.depth-effects .filter-select:focus,
html.depth-effects .search-input:focus,
html.depth-effects .note-composer-input:focus,
html.depth-effects .schedule-row select:focus,
html.depth-effects .schedule-row input:focus,
html.depth-effects textarea.form-input:focus,
html.depth-effects select.form-input:focus {
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,0.35),
    inset 0 1px 2px rgba(0,0,0,0.20),
    0 0 0 3px rgba(126,232,162,0.16) !important;
  border-color: var(--accent) !important;
}


/* ─── BOTTOM-EDGE DARKENING (thick slab illusion) ──────────── */

html.depth-effects .client-card,
html.depth-effects .chart-card,
html.depth-effects .fc-card,
html.depth-effects .ta-card,
html.depth-effects .settings-section,
html.depth-effects .ar-section,
html.depth-effects .admin-kpi-card,
html.depth-effects .admin-location-card,
html.depth-effects .admin-region-card,
html.depth-effects .funnel-section-block {
  border-bottom-color: rgba(0,0,0,0.35) !important;
}


/* ─── COLUMN/SECTION HEADER RECESS ─────────────────────────── */

html.depth-effects .sched-col-header,
html.depth-effects .client-col-header {
  box-shadow: inset 0 -1px 4px rgba(0,0,0,0.18) !important;
}


/* ─── CHART CANVAS DEPTH ──────────────────────────────────── */

html.depth-effects .chart-wrap {
  border-radius: 10px;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.08) 0%,
    rgba(0,0,0,0.18) 100%
  );
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.30);
  padding: 4px;
}

html.depth-effects .chart-wrap canvas {
  border-radius: 8px;
}


/* ─── SCHEDULE PAGE DEPTH ENHANCEMENTS ─────────────────────── */

/* -- Time grid outer container: recessed panel look -- */
html.depth-effects .sched-tg {
  box-shadow:
    inset 0 2px 8px rgba(0,0,0,0.30),
    inset 0 1px 2px rgba(0,0,0,0.20),
    0 2px 4px rgba(0,0,0,0.25) !important;
  border-color: rgba(255,255,255,0.05) !important;
}

/* -- Time grid sticky header: glassmorphism bar -- */
html.depth-effects .sched-tg-head {
  background: rgba(30, 30, 36, 0.75) !important;
  backdrop-filter: blur(12px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.3) !important;
  border-bottom: 2px solid rgba(255,255,255,0.06) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
}

html.depth-effects .sched-tg-corner {
  background: rgba(30, 30, 36, 0.80) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* -- Time grid slots: slab elevation -- */
html.depth-effects .sched-tg-slot {
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.06),
    inset 0 -1px 0 rgba(0,0,0,0.12),
    0 2px  6px rgba(0,0,0,0.35),
    0 4px 12px rgba(0,0,0,0.15) !important;
  transition: box-shadow 0.2s ease, filter 0.15s ease !important;
}

html.depth-effects .sched-tg-slot:hover {
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.08),
    inset 0 -1px 0 rgba(0,0,0,0.15),
    0 4px 10px rgba(0,0,0,0.45),
    0 8px 20px rgba(0,0,0,0.20) !important;
}

/* -- Week/biweek slot cards: enhanced slab -- */
html.depth-effects .sched-slot {
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.05),
    inset 0 -1px 0 rgba(0,0,0,0.12),
    0 1px  3px rgba(0,0,0,0.38),
    0 3px  8px rgba(0,0,0,0.14) !important;
  transition: box-shadow 0.2s ease, transform 0.2s ease, filter 0.15s ease !important;
}

html.depth-effects .sched-slot:hover {
  transform: translateY(-1px) !important;
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.07),
    inset 0 -1px 0 rgba(0,0,0,0.15),
    0 3px  8px rgba(0,0,0,0.45),
    0 6px 16px rgba(0,0,0,0.20) !important;
}

/* -- Status-colored left border glow on slots -- */
html.depth-effects .sched-slot.sched-slot--completed {
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.05),
    inset 0 -1px 0 rgba(0,0,0,0.12),
    -2px 0 10px rgba(74, 222, 128, 0.12),
    0 1px  3px rgba(0,0,0,0.38),
    0 3px  8px rgba(0,0,0,0.14) !important;
}

html.depth-effects .sched-slot.sched-slot--cancelled {
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.05),
    inset 0 -1px 0 rgba(0,0,0,0.12),
    -2px 0 10px rgba(251, 146, 60, 0.12),
    0 1px  3px rgba(0,0,0,0.38),
    0 3px  8px rgba(0,0,0,0.14) !important;
}

html.depth-effects .sched-slot.sched-slot--noshow {
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.05),
    inset 0 -1px 0 rgba(0,0,0,0.12),
    -2px 0 10px rgba(248, 113, 113, 0.12),
    0 1px  3px rgba(0,0,0,0.38),
    0 3px  8px rgba(0,0,0,0.14) !important;
}

html.depth-effects .sched-slot.sched-slot--unlogged {
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.04),
    inset 0 -1px 0 rgba(0,0,0,0.10),
    -2px 0 10px rgba(91, 150, 235, 0.10),
    0 1px  3px rgba(0,0,0,0.30) !important;
}

/* -- Column header: deeper recess + gradient bottom edge -- */
html.depth-effects .sched-col-header {
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.04),
    inset 0 -2px 6px rgba(0,0,0,0.22) !important;
  border-bottom-color: rgba(0,0,0,0.25) !important;
}

/* -- Today column: accent glow around the entire column -- */
html.depth-effects .sched-today-col {
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.06),
    inset 0 -1px 0 rgba(0,0,0,0.18),
    0 0 18px rgba(126, 232, 162, 0.08),
    0 1px  2px rgba(0,0,0,0.45),
    0 4px 12px rgba(0,0,0,0.25),
    0 12px 40px rgba(0,0,0,0.20) !important;
}

/* -- Column totals bar: subtle inset -- */
html.depth-effects .sched-col-total {
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.15) !important;
  border-top-color: rgba(0,0,0,0.25) !important;
}

/* -- Workload mini bar chart: 3D bars -- */
html.depth-effects .sched-bar-track {
  box-shadow: inset 0 1px 4px rgba(0,0,0,0.30) !important;
}

html.depth-effects .sched-bar-fill {
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.15),
    0 -1px 4px rgba(91, 196, 255, 0.15) !important;
}

html.depth-effects .sched-bar-today {
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.15),
    0 -1px 4px rgba(126, 232, 162, 0.18) !important;
}

/* -- Time grid bottom bar: glass effect -- */
html.depth-effects .sched-tg-bar-sticky {
  background: rgba(30, 30, 36, 0.75) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.3) !important;
  border-top-color: rgba(255,255,255,0.06) !important;
}

html.depth-effects .sched-tg-bar-gutter {
  background: rgba(30, 30, 36, 0.80) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

/* -- Calendar month cells: elevation + today glow -- */
html.depth-effects .sched-cal-cell {
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.04),
    inset 0 -1px 0 rgba(0,0,0,0.12),
    0 1px 3px rgba(0,0,0,0.25) !important;
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease, background 0.2s ease !important;
}

html.depth-effects .sched-cal-has-sessions:hover {
  transform: translateY(-1px) !important;
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.06),
    inset 0 -1px 0 rgba(0,0,0,0.15),
    0 2px 6px rgba(0,0,0,0.35),
    0 6px 16px rgba(0,0,0,0.18) !important;
}

html.depth-effects .sched-cal-cell.sched-today {
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.06),
    inset 0 -1px 0 rgba(0,0,0,0.15),
    0 0 14px rgba(126, 232, 162, 0.10),
    0 1px 3px rgba(0,0,0,0.30) !important;
}

/* -- Calendar dots: subtle glow matching status color -- */
html.depth-effects .sched-dot {
  box-shadow: 0 0 5px currentColor !important;
}

/* -- Tooltip: floating slab with glow -- */
html.depth-effects .sched-tooltip {
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.06),
    0 4px 12px rgba(0,0,0,0.55),
    0 16px 48px rgba(0,0,0,0.40) !important;
  border-color: rgba(255,255,255,0.08) !important;
  background: rgba(26, 26, 34, 0.92) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

/* -- Day detail modal slot items: deeper slab -- */
html.depth-effects .day-slot-item {
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.05),
    inset 0 -1px 0 rgba(0,0,0,0.12),
    0 2px 6px rgba(0,0,0,0.35),
    0 4px 14px rgba(0,0,0,0.15) !important;
  transition: box-shadow 0.2s ease, transform 0.2s ease !important;
}

html.depth-effects .day-slot-item:hover {
  transform: translateY(-1px) !important;
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.07),
    inset 0 -1px 0 rgba(0,0,0,0.15),
    0 4px 10px rgba(0,0,0,0.42),
    0 8px 22px rgba(0,0,0,0.20) !important;
}

/* -- Day slot note callout: recessed look -- */
html.depth-effects .day-slot-note {
  box-shadow: inset 0 1px 4px rgba(0,0,0,0.20) !important;
}

/* -- Now line: glow effect on the current time indicator -- */
html.depth-effects .sched-tg-now-line {
  box-shadow: 0 0 8px rgba(126, 232, 162, 0.35) !important;
}

html.depth-effects .sched-tg-now-dot {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent),
              0 0 12px rgba(126, 232, 162, 0.30) !important;
}

/* -- Schedule period label and nav buttons: subtle depth -- */
html.depth-effects .sched-nav-btn {
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.04),
    inset 0 -1px 0 rgba(0,0,0,0.10) !important;
}

html.depth-effects .sched-nav-btn:hover {
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.06),
    inset 0 -1px 0 rgba(0,0,0,0.12),
    0 2px 8px rgba(0,0,0,0.25) !important;
}

/* -- Legend items: slight pill depth -- */
html.depth-effects .sched-legend-item:hover {
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.04),
    0 1px 4px rgba(0,0,0,0.20) !important;
}

/* -- Time grid gutter: subtle inner edge -- */
html.depth-effects .sched-tg-gutter {
  box-shadow: inset -2px 0 6px rgba(0,0,0,0.15) !important;
}

/* -- Paid/unpaid badges on slots: tiny slab -- */
html.depth-effects .sched-slot-paid-badge {
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.08),
    0 1px 2px rgba(0,0,0,0.25) !important;
}

/* -- Schedule type badges: match badge depth system -- */
html.depth-effects .sched-type-badge {
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.06),
    0 1px 2px rgba(0,0,0,0.20) !important;
}


/* ============================================================
   FINAL SWEEP - Complete coverage + stunning polish
   ============================================================ */


/* ─── GLOBAL: AMBIENT BACKGROUND VIGNETTE ──────────────────── */

html.depth-effects body {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(126,232,162,0.025) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 100%, rgba(91,196,255,0.015) 0%, transparent 50%),
    radial-gradient(ellipse at 20% 80%, rgba(255,201,92,0.01) 0%, transparent 45%),
    var(--bg) !important;
}


/* ─── MISSING TIER-1 PANELS ───────────────────────────────── */

html.depth-effects .perf-stat-box,
html.depth-effects .ar-sched-kpi,
html.depth-effects .ar-health-stat,
html.depth-effects .fin-metric-box,
html.depth-effects .ar-insight,
html.depth-effects .ar-alert-box,
html.depth-effects .fc-metric {
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.045),
    inset 0 -1px 0 rgba(0,0,0,0.14),
    0 1px 3px rgba(0,0,0,0.35),
    0 3px 10px rgba(0,0,0,0.14) !important;
  transition: box-shadow 0.24s ease, transform 0.24s ease !important;
}

html.depth-effects .perf-stat-box:hover,
html.depth-effects .ar-sched-kpi:hover,
html.depth-effects .ar-health-stat:hover,
html.depth-effects .fin-metric-box:hover,
html.depth-effects .fc-metric:hover {
  transform: translateY(-1px) !important;
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.06),
    inset 0 -1px 0 rgba(0,0,0,0.16),
    0 2px 6px rgba(0,0,0,0.40),
    0 6px 16px rgba(0,0,0,0.18) !important;
}

/* Top accent lines on these panels */
html.depth-effects .perf-stat-box,
html.depth-effects .ar-sched-kpi,
html.depth-effects .fin-metric-box {
  position: relative;
  overflow: hidden;
}

html.depth-effects .perf-stat-box::after,
html.depth-effects .ar-sched-kpi::after,
html.depth-effects .fin-metric-box::after {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(126,232,162,0.18) 20%,
    rgba(126,232,162,0.32) 50%,
    rgba(126,232,162,0.18) 80%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 2;
}


/* ─── MISSING LIST/ROW SURFACES ────────────────────────────── */

html.depth-effects .ta-list-row,
html.depth-effects .fcd-session-row {
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.04),
    inset 0 -1px 0 rgba(0,0,0,0.10),
    0 1px 2px rgba(0,0,0,0.25) !important;
  transition: box-shadow 0.2s ease, transform 0.2s ease !important;
}

html.depth-effects .ta-list-row:hover,
html.depth-effects .fcd-session-row:hover {
  transform: translateY(-1px) !important;
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.06),
    inset 0 -1px 0 rgba(0,0,0,0.12),
    0 2px 6px rgba(0,0,0,0.30) !important;
}


/* ─── MISSING FLOATING PANELS ─────────────────────────────── */

/* Tutorial popover card */
html.depth-effects .tut-card {
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.08),
    inset 0 -1px 0 rgba(0,0,0,0.20),
    0 4px 12px rgba(0,0,0,0.50),
    0 20px 60px rgba(0,0,0,0.50),
    0 0 30px rgba(126,232,162,0.06) !important;
}

/* Page nav dropdown menu - effects only when open to avoid blocking clicks */
html.depth-effects .page-nav-dropdown.open {
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.06),
    0 4px 12px rgba(0,0,0,0.50),
    0 20px 60px rgba(0,0,0,0.45) !important;
  backdrop-filter: blur(16px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.3) !important;
  background: rgba(30, 30, 36, 0.88) !important;
  border-color: rgba(255,255,255,0.08) !important;
}

html.depth-effects .page-nav-dropdown.open .page-nav-option:hover {
  box-shadow: inset 0 0 20px rgba(126,232,162,0.04) !important;
}

/* Clock/calendar picker panels */
html.depth-effects .cp-panel {
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.08),
    inset 0 -1px 0 rgba(0,0,0,0.20),
    0 4px 12px rgba(0,0,0,0.55),
    0 24px 80px rgba(0,0,0,0.50),
    0 0 0 1px rgba(126,232,162,0.06) !important;
}

html.depth-effects .cp-overlay {
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}


/* ─── PROGRESS BAR TRACKS: RECESSED INSET ──────────────────── */

html.depth-effects .ar-progress,
html.depth-effects .ta-hbar-track,
html.depth-effects .funnel-risk-bar-wrap,
html.depth-effects .ar-rev-bar-wrap,
html.depth-effects .util-bar-wrap,
html.depth-effects .admin-region-bar-wrap {
  box-shadow: inset 0 1px 4px rgba(0,0,0,0.40) !important;
}


/* ─── PROGRESS BAR FILLS: TOP HIGHLIGHT + COLOR GLOW ──────── */

html.depth-effects .ar-progress-fill,
html.depth-effects .ta-hbar-fill,
html.depth-effects .funnel-risk-bar,
html.depth-effects .ar-rev-bar,
html.depth-effects .util-bar,
html.depth-effects .admin-region-bar {
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.20),
    0 0 6px currentColor !important;
  opacity: 0.85;
}

/* Peak/accent fills get brighter glow */
html.depth-effects .ta-hbar-fill.ta-bar--peak {
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.25),
    0 0 8px rgba(126,232,162,0.30) !important;
}

html.depth-effects .ta-hbar-fill.ta-bar--low {
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.20),
    0 0 8px rgba(255,107,107,0.25) !important;
}


/* ─── MISSING INTERACTIVE ELEMENTS ─────────────────────────── */

html.depth-effects .toggle-btn {
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.04),
    inset 0 -1px 0 rgba(0,0,0,0.10),
    0 1px 3px rgba(0,0,0,0.25) !important;
  transition: box-shadow 0.2s ease, transform 0.2s ease, background 0.2s ease !important;
}

html.depth-effects .toggle-btn:hover {
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.06),
    inset 0 -1px 0 rgba(0,0,0,0.12),
    0 2px 6px rgba(0,0,0,0.30) !important;
  transform: translateY(-1px) !important;
}

html.depth-effects .mode-switch-btn,
html.depth-effects .mode-switch-toggle {
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.04),
    inset 0 -1px 0 rgba(0,0,0,0.10) !important;
  transition: box-shadow 0.2s ease, transform 0.2s ease, background 0.2s ease, color 0.2s ease !important;
}

html.depth-effects .mode-switch-btn:hover,
html.depth-effects .mode-switch-toggle:hover {
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.06),
    inset 0 -1px 0 rgba(0,0,0,0.12),
    0 2px 8px rgba(0,0,0,0.25) !important;
}

/* Toggle track switches: 3D slab feel */
html.depth-effects .toggle-track,
html.depth-effects .settings-toggle-track {
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.35) !important;
}

html.depth-effects input:checked + .toggle-track,
html.depth-effects input:checked + .settings-toggle-track {
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.20),
    0 0 10px rgba(126,232,162,0.15) !important;
}

/* Toggle thumbs: little raised pill */
html.depth-effects .toggle-thumb,
html.depth-effects .settings-toggle-thumb {
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.25),
    0 1px 4px rgba(0,0,0,0.40) !important;
}


/* ─── MISSING TABLE SURFACES ──────────────────────────────── */

html.depth-effects .ar-table-wrap,
html.depth-effects .fc-client-table-wrap {
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,0.25),
    0 1px 3px rgba(0,0,0,0.20) !important;
}

html.depth-effects .ar-table thead tr,
html.depth-effects .wb-table th,
html.depth-effects .wb-lib-table th,
html.depth-effects .history-table th {
  box-shadow: inset 0 -1px 3px rgba(0,0,0,0.12) !important;
}

html.depth-effects .ar-table tbody tr:hover,
html.depth-effects .wb-table tbody tr:hover,
html.depth-effects .wb-lib-table tbody tr:hover,
html.depth-effects .history-table tbody tr:hover {
  box-shadow: inset 0 0 20px rgba(126,232,162,0.03) !important;
}

/* Admin heatmap cells: subtle inner glow when colored */
html.depth-effects .admin-heatmap-cell {
  box-shadow: inset 0 0 6px rgba(0,0,0,0.15) !important;
  transition: filter 0.1s, box-shadow 0.15s !important;
}

html.depth-effects .admin-heatmap-cell:hover {
  box-shadow:
    inset 0 0 6px rgba(0,0,0,0.10),
    0 0 8px rgba(255,255,255,0.05) !important;
}


/* ─── ENHANCED ACCENT CHIP GLOW ────────────────────────────── */

html.depth-effects .stat-chip.highlight {
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.06),
    inset 0 -1px 0 rgba(0,0,0,0.10),
    0 0 16px rgba(126,232,162,0.12) !important;
}

/* Today dot in schedule: soft pulse glow */
html.depth-effects .sched-today-dot {
  text-shadow: 0 0 8px rgba(126,232,162,0.6) !important;
}


/* ─── COLOR-SPECIFIC CARD ACCENTS ──────────────────────────── */

/* At-risk client cards get amber top edge */
html.depth-effects .client-card:has(.status-badge.at-risk)::after {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,201,92,0.20) 18%,
    rgba(255,201,92,0.38) 50%,
    rgba(255,201,92,0.20) 82%,
    transparent 100%
  ) !important;
}

/* Inactive client cards get muted top edge */
html.depth-effects .client-card:has(.status-badge.inactive)::after {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(150,150,170,0.12) 18%,
    rgba(150,150,170,0.22) 50%,
    rgba(150,150,170,0.12) 82%,
    transparent 100%
  ) !important;
}

/* Amber alert boxes: warm glow */
html.depth-effects .ar-alert-box {
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.05),
    inset 0 -1px 0 rgba(0,0,0,0.10),
    0 0 14px rgba(255,201,92,0.06),
    0 1px 3px rgba(0,0,0,0.30) !important;
}

/* Insights: status-colored left glow */
html.depth-effects .ar-insight-positive {
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.04),
    -2px 0 10px rgba(126,232,162,0.08),
    0 1px 3px rgba(0,0,0,0.30) !important;
}

html.depth-effects .ar-insight-negative {
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.04),
    -2px 0 10px rgba(255,107,107,0.08),
    0 1px 3px rgba(0,0,0,0.30) !important;
}

html.depth-effects .ar-insight-neutral {
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.04),
    -2px 0 10px rgba(91,196,255,0.06),
    0 1px 3px rgba(0,0,0,0.30) !important;
}


/* ─── AR KPI HERO CARDS: DRAMATIC GLOW ─────────────────────── */

html.depth-effects .ar-kpi-hero {
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.07),
    inset 0 -1px 0 rgba(0,0,0,0.20),
    0 2px 4px rgba(0,0,0,0.45),
    0 8px 28px rgba(0,0,0,0.25),
    0 16px 48px rgba(0,0,0,0.18) !important;
}

html.depth-effects .ar-kpi-hero:hover {
  transform: translateY(-2px) !important;
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.09),
    inset 0 -1px 0 rgba(0,0,0,0.22),
    0 4px 8px rgba(0,0,0,0.50),
    0 12px 36px rgba(0,0,0,0.30),
    0 24px 64px rgba(0,0,0,0.22) !important;
}


/* ─── FORECAST SCENARIO CARDS: STATUS GLOW ─────────────────── */

html.depth-effects .fc-scenario-card {
  position: relative;
  overflow: hidden;
}

/* Scenario card top accent uses blue */
html.depth-effects .fc-scenario-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(91,196,255,0.22) 18%,
    rgba(91,196,255,0.38) 50%,
    rgba(91,196,255,0.22) 82%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 2;
}


/* ─── TAKEAWAY CARDS: STATUS-COLORED GLOW ──────────────────── */

/* Takeaway cards with colored borders get matching ambient glow */
html.depth-effects .ta-card {
  transition: box-shadow 0.35s ease, transform 0.35s ease, opacity 0.35s ease, border-color 0.2s !important;
}

html.depth-effects .ta-card:hover {
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.07),
    inset 0 -1px 0 rgba(0,0,0,0.20),
    0 0 20px var(--ta-glow, rgba(126,232,162,0.06)),
    0 4px 8px rgba(0,0,0,0.50),
    0 14px 42px rgba(0,0,0,0.28) !important;
}


/* ─── BADGE PILLS: POLISHED DEPTH ──────────────────────────── */

html.depth-effects .badge-completed,
html.depth-effects .badge-cancelled,
html.depth-effects .badge-no-show,
html.depth-effects .badge-paid,
html.depth-effects .badge-unpaid,
html.depth-effects .badge-scheduled,
html.depth-effects .badge-type {
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.08),
    0 1px 3px rgba(0,0,0,0.25) !important;
}

/* Note tag pills */
html.depth-effects .note-tag-badge {
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.06),
    0 1px 2px rgba(0,0,0,0.20) !important;
}

html.depth-effects .note-tag-option {
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.03),
    inset 0 -1px 0 rgba(0,0,0,0.08) !important;
  transition: box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease !important;
}

html.depth-effects .note-tag-option:hover {
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.05),
    0 1px 4px rgba(0,0,0,0.20) !important;
}

/* Session type toggle buttons */
html.depth-effects .stype-btn {
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.04),
    inset 0 -1px 0 rgba(0,0,0,0.10) !important;
  transition: box-shadow 0.2s ease, transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease !important;
}

html.depth-effects .stype-btn--active {
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.08),
    inset 0 -1px 0 rgba(0,0,0,0.10),
    0 0 10px currentColor !important;
  filter: saturate(1.1);
}


/* ─── WELCOME CARD FEATURES: PILL DEPTH ────────────────────── */

html.depth-effects .welcome-feat {
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.04),
    inset 0 -1px 0 rgba(0,0,0,0.10),
    0 1px 3px rgba(0,0,0,0.20) !important;
}


/* ─── FILTER BAR CONTROLS: SUBTLE SLAB ─────────────────────── */

html.depth-effects .filter-quick-btn,
html.depth-effects .analytics-period-btn,
html.depth-effects .chart-peaks-btn,
html.depth-effects .ar-export-btn-sm {
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.03),
    inset 0 -1px 0 rgba(0,0,0,0.08) !important;
  transition: box-shadow 0.2s ease, transform 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease !important;
}

html.depth-effects .filter-quick-btn:hover,
html.depth-effects .analytics-period-btn:hover,
html.depth-effects .chart-peaks-btn:hover,
html.depth-effects .ar-export-btn-sm:hover {
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.05),
    inset 0 -1px 0 rgba(0,0,0,0.10),
    0 2px 8px rgba(0,0,0,0.22) !important;
  transform: translateY(-1px) !important;
}

html.depth-effects .filter-quick-btn.active,
html.depth-effects .analytics-period-btn.active,
html.depth-effects .chart-peaks-btn.active {
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.06),
    inset 0 -1px 0 rgba(0,0,0,0.08),
    0 0 12px rgba(126,232,162,0.12) !important;
}


/* ─── BACKUP/RESTORE STATUS: CONTEXTUAL GLOW ──────────────── */

html.depth-effects .restore-status-ok {
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.04),
    0 0 10px rgba(126,232,162,0.08),
    0 1px 3px rgba(0,0,0,0.20) !important;
}

html.depth-effects .restore-status-error {
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.04),
    0 0 10px rgba(255,107,107,0.08),
    0 1px 3px rgba(0,0,0,0.20) !important;
}


/* ─── SESSION BALANCE BADGES: ENHANCED GLOW ────────────────── */

html.depth-effects .session-balance-badge {
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.08),
    0 1px 3px rgba(0,0,0,0.22) !important;
}

html.depth-effects .balance-funded {
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.08),
    0 0 12px rgba(126,232,162,0.14),
    0 1px 3px rgba(0,0,0,0.22) !important;
}

html.depth-effects .balance-low {
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.08),
    0 0 12px rgba(255,201,92,0.14),
    0 1px 3px rgba(0,0,0,0.22) !important;
}

html.depth-effects .balance-empty {
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.08),
    0 0 12px rgba(255,107,107,0.14),
    0 1px 3px rgba(0,0,0,0.22) !important;
}


/* ─── EMPTY STATES: SUBTLE DEPTH ───────────────────────────── */

html.depth-effects .empty-state .empty-icon svg {
  filter: drop-shadow(0 2px 8px rgba(126,232,162,0.08));
}


/* ─── ADMIN KPI SPARKLINES: GLOW ───────────────────────────── */

html.depth-effects .ar-kpi-spark canvas {
  filter: drop-shadow(0 0 4px rgba(126,232,162,0.15));
}