/**
 * Dark-mode glass polish (Clasy-inspired)
 * Warm charcoal canvas, translucent glass cards, soft rim light.
 * Applies to field officer + agency admin + super admin glass roles.
 */

/* ——— Shared dark tokens (override base glass vars) ——— */
html[data-theme="dark"] body.role-field-worker,
html[data-theme="dark"] body.role-agency-admin {
  --glass-ink: #f6f7f5;
  --glass-ink-soft: #d0d6d2;
  --glass-ink-mute: #9aa59e;
  --glass-label: #b8f0d0;
  --glass-rim: rgba(255, 255, 255, 0.11);
  --glass-rim-strong: rgba(255, 255, 255, 0.2);
  --glass-warm: #e8b48a;
  --glass-warm-soft: #f0c9a8;
  --glass-mint: #8fd9b0;
  --glass-panel: linear-gradient(
    160deg,
    rgba(55, 58, 56, 0.72) 0%,
    rgba(28, 31, 29, 0.78) 42%,
    rgba(18, 20, 19, 0.82) 100%
  );
  --glass-panel-lift: linear-gradient(
    165deg,
    rgba(255, 255, 255, 0.12) 0%,
    rgba(255, 255, 255, 0.04) 38%,
    rgba(255, 255, 255, 0.02) 100%
  );
  color: var(--glass-ink);
  background:
    radial-gradient(ellipse 75% 55% at 8% -5%, rgba(232, 180, 138, 0.22), transparent 58%),
    radial-gradient(ellipse 60% 50% at 95% 5%, rgba(111, 191, 147, 0.14), transparent 52%),
    radial-gradient(ellipse 50% 40% at 70% 100%, rgba(80, 110, 95, 0.16), transparent 55%),
    radial-gradient(ellipse 40% 35% at 40% 60%, rgba(232, 180, 138, 0.06), transparent 60%),
    linear-gradient(180deg, #090b0a 0%, #0e100f 45%, #0c0e0d 100%);
  background-attachment: fixed;
}

/* Super Admin dark tokens — steel/mint blooms (not warm peach canvas) */
html[data-theme="dark"] body.role-super-admin {
  --glass-ink: #f6f7f5;
  --glass-ink-soft: #d0d6d2;
  --glass-ink-mute: #9aa59e;
  --glass-label: #9fe0bc;
  --glass-rim: rgba(255, 255, 255, 0.12);
  --glass-rim-strong: rgba(255, 255, 255, 0.2);
  --glass-warm: #e8b48a;
  --glass-warm-soft: #f0c9a8;
  --glass-mint: #8fd9b0;
  --glass-steel: #7eb8c9;
  --glass-panel: linear-gradient(
    160deg,
    rgba(52, 58, 60, 0.75) 0%,
    rgba(26, 30, 31, 0.8) 45%,
    rgba(16, 18, 19, 0.86) 100%
  );
  --glass-panel-lift: linear-gradient(
    165deg,
    rgba(255, 255, 255, 0.12) 0%,
    rgba(255, 255, 255, 0.04) 38%,
    rgba(255, 255, 255, 0.02) 100%
  );
  color: var(--glass-ink);
  background:
    radial-gradient(ellipse 70% 55% at 10% 0%, rgba(126, 184, 201, 0.16), transparent 55%),
    radial-gradient(ellipse 60% 50% at 95% 8%, rgba(111, 191, 147, 0.14), transparent 50%),
    radial-gradient(ellipse 50% 40% at 60% 100%, rgba(80, 110, 100, 0.14), transparent 55%),
    linear-gradient(180deg, #090b0a 0%, #0e1010 45%, #0c0e0d 100%);
  background-attachment: fixed;
}

/* ——— Glass surfaces: translucent + rim + top sheen ——— */
html[data-theme="dark"] body.role-field-worker .dash-kpi:not(.dash-kpi-featured),
html[data-theme="dark"] body.role-field-worker .dash-card,
html[data-theme="dark"] body.role-field-worker .dash-workload,
html[data-theme="dark"] body.role-field-worker .stat-card,
html[data-theme="dark"] body.role-field-worker .officer-case-card,
html[data-theme="dark"] body.role-field-worker .officer-next-row,
html[data-theme="dark"] body.role-field-worker .table-wrap,
html[data-theme="dark"] body.role-field-worker .reports-filters,
html[data-theme="dark"] body.role-field-worker .map-toolbar,
html[data-theme="dark"] body.role-field-worker .map-legend-panel,
html[data-theme="dark"] body.role-field-worker .notif-card,
html[data-theme="dark"] body.role-agency-admin .dash-kpi:not(.dash-kpi-featured),
html[data-theme="dark"] body.role-agency-admin .dash-card,
html[data-theme="dark"] body.role-agency-admin .dash-workload,
html[data-theme="dark"] body.role-agency-admin .stat-card,
html[data-theme="dark"] body.role-agency-admin .agency-incidents-card,
html[data-theme="dark"] body.role-agency-admin .table-wrap,
html[data-theme="dark"] body.role-agency-admin .chart-card,
html[data-theme="dark"] body.role-agency-admin .inline-form,
html[data-theme="dark"] body.role-agency-admin #dash-ops-queues .dash-card,
html[data-theme="dark"] body.role-super-admin .dash-kpi:not(.dash-kpi-featured),
html[data-theme="dark"] body.role-super-admin .dash-card,
html[data-theme="dark"] body.role-super-admin .dash-workload,
html[data-theme="dark"] body.role-super-admin .stat-card,
html[data-theme="dark"] body.role-super-admin .table-wrap,
html[data-theme="dark"] body.role-super-admin .chart-card,
html[data-theme="dark"] body.role-super-admin .inline-form:not(.platform-settings-body),
html[data-theme="dark"] body.role-super-admin .reports-filters,
html[data-theme="dark"] body.role-super-admin .map-toolbar,
html[data-theme="dark"] body.role-super-admin .map-legend-panel,
html[data-theme="dark"] body.role-super-admin .notif-card,
html[data-theme="dark"] body.role-super-admin .audit-list,
html[data-theme="dark"] body.role-super-admin .routing-rule-card,
html[data-theme="dark"] body.role-super-admin .platform-system-card,
html[data-theme="dark"] body.role-super-admin #dash-ops-queues .dash-card {
  background: var(--glass-panel) !important;
  border: 1px solid var(--glass-rim) !important;
  backdrop-filter: blur(22px) saturate(1.35) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.35) !important;
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.42),
    0 1px 0 rgba(255, 255, 255, 0.14) inset,
    0 -1px 0 rgba(0, 0, 0, 0.35) inset !important;
}

html[data-theme="dark"] body.role-field-worker .dash-kpi:not(.dash-kpi-featured):hover,
html[data-theme="dark"] body.role-field-worker .officer-case-card:hover,
html[data-theme="dark"] body.role-agency-admin .dash-kpi:not(.dash-kpi-featured):hover {
  border-color: var(--glass-rim-strong) !important;
  box-shadow:
    0 22px 56px rgba(0, 0, 0, 0.5),
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 0 0 1px rgba(232, 180, 138, 0.08) !important;
}

html[data-theme="dark"] body.role-super-admin .dash-kpi:not(.dash-kpi-featured):hover {
  border-color: var(--glass-rim-strong) !important;
  box-shadow:
    0 22px 56px rgba(0, 0, 0, 0.5),
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 0 0 1px rgba(126, 184, 201, 0.12) !important;
}

/* Featured KPI — forest green (#0D4832) — field + agency */
html[data-theme="dark"] body.role-field-worker .dash-kpi-featured,
html[data-theme="dark"] body.role-agency-admin .dash-kpi-featured {
  background: linear-gradient(160deg, #0d4832 0%, #166b4a 100%) !important;
  border: 1px solid rgba(184, 224, 200, 0.28) !important;
  color: #fff !important;
  box-shadow:
    0 18px 44px rgba(13, 72, 50, 0.45),
    0 1px 0 rgba(255, 255, 255, 0.18) inset !important;
}

html[data-theme="dark"] body.role-field-worker .dash-kpi-featured .dash-kpi-label,
html[data-theme="dark"] body.role-field-worker .dash-kpi-featured .dash-kpi-value,
html[data-theme="dark"] body.role-field-worker .dash-kpi-featured .dash-kpi-value.tone-info,
html[data-theme="dark"] body.role-field-worker .dash-kpi-featured .dash-kpi-value.tone-danger,
html[data-theme="dark"] body.role-field-worker .dash-kpi-featured .dash-kpi-value.tone-warning,
html[data-theme="dark"] body.role-agency-admin .dash-kpi-featured .dash-kpi-label,
html[data-theme="dark"] body.role-agency-admin .dash-kpi-featured .dash-kpi-value,
html[data-theme="dark"] body.role-agency-admin .dash-kpi-featured .dash-kpi-value.tone-info,
html[data-theme="dark"] body.role-agency-admin .dash-kpi-featured .dash-kpi-value.tone-danger,
html[data-theme="dark"] body.role-agency-admin .dash-kpi-featured .dash-kpi-value.tone-warning {
  color: #fff !important;
}

/* Active nav — warm peach for field/agency; super keeps mint in styles.super-glass.css */
html[data-theme="dark"] body.role-field-worker .sidebar-nav .tab.active,
html[data-theme="dark"] body.role-agency-admin .sidebar-nav .tab.active {
  background: linear-gradient(135deg, rgba(240, 201, 168, 0.96), rgba(220, 150, 100, 0.9)) !important;
  border-color: rgba(255, 210, 170, 0.45) !important;
  color: #1a1410 !important;
  box-shadow: 0 10px 28px rgba(232, 180, 138, 0.28) !important;
}

html[data-theme="dark"] body.role-field-worker .sidebar-nav .tab.active::before,
html[data-theme="dark"] body.role-agency-admin .sidebar-nav .tab.active::before {
  display: none;
}

/* Sidebar glass */
html[data-theme="dark"] body.role-field-worker .app-sidebar,
html[data-theme="dark"] body.role-field-worker .sidebar-field,
html[data-theme="dark"] body.role-agency-admin .app-sidebar,
html[data-theme="dark"] body.role-agency-admin .sidebar-desk,
html[data-theme="dark"] body.role-super-admin .app-sidebar,
html[data-theme="dark"] body.role-super-admin .sidebar-platform {
  background: linear-gradient(180deg, rgba(36, 40, 38, 0.78), rgba(16, 18, 17, 0.88)) !important;
  border-right: 1px solid var(--glass-rim) !important;
  backdrop-filter: blur(24px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.3) !important;
  box-shadow:
    8px 0 40px rgba(0, 0, 0, 0.45),
    1px 0 0 rgba(255, 255, 255, 0.06) inset !important;
}

/* ——— Case workbench modal (field + agency) ——— */
html[data-theme="dark"] .case-drawer-root.case-drawer-field .case-drawer-backdrop {
  background:
    radial-gradient(ellipse 80% 60% at 12% 0%, rgba(232, 180, 138, 0.28), transparent 55%),
    radial-gradient(ellipse 70% 55% at 90% 90%, rgba(111, 191, 147, 0.18), transparent 50%),
    rgba(5, 6, 5, 0.72) !important;
  backdrop-filter: blur(14px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.2) !important;
}

html[data-theme="dark"] .case-drawer-root.case-drawer-field .case-drawer {
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  background:
    linear-gradient(
      165deg,
      rgba(58, 62, 60, 0.78) 0%,
      rgba(32, 36, 34, 0.82) 45%,
      rgba(20, 22, 21, 0.88) 100%
    ) !important;
  backdrop-filter: blur(32px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(32px) saturate(1.4) !important;
  box-shadow:
    0 40px 100px rgba(0, 0, 0, 0.6),
    0 1px 0 rgba(255, 255, 255, 0.16) inset,
    0 -1px 0 rgba(0, 0, 0, 0.45) inset,
    0 0 80px rgba(232, 180, 138, 0.08) !important;
  color: var(--glass-ink);
}

html[data-theme="dark"] .case-drawer-root.case-drawer-field .case-drawer-body {
  background: transparent !important;
}

html[data-theme="dark"] .case-drawer-root.case-drawer-field .wb-card {
  background:
    linear-gradient(
      160deg,
      rgba(255, 255, 255, 0.1) 0%,
      rgba(255, 255, 255, 0.04) 40%,
      rgba(255, 255, 255, 0.03) 100%
    ) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(16px) saturate(1.25) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.25) !important;
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.28),
    0 1px 0 rgba(255, 255, 255, 0.12) inset !important;
  border-radius: 20px !important;
}

html[data-theme="dark"] .case-drawer-root.case-drawer-field .wb-card-title {
  color: var(--glass-label) !important;
  letter-spacing: 0.04em;
}

html[data-theme="dark"] .case-drawer-root.case-drawer-field .wb-card-body,
html[data-theme="dark"] .case-drawer-root.case-drawer-field .wb-card-meta,
html[data-theme="dark"] .case-drawer-root.case-drawer-field .case-drawer-token {
  color: var(--glass-ink) !important;
}

html[data-theme="dark"] .case-drawer-root.case-drawer-field .wb-card-meta,
html[data-theme="dark"] .case-drawer-root.case-drawer-field .meta {
  color: var(--glass-ink-mute) !important;
}

html[data-theme="dark"] .case-drawer-root.case-drawer-field .case-drawer-kicker {
  color: var(--glass-warm-soft) !important;
}

/* Suggested next step — forest glass with mint CTA (Clasy contrast) */
html[data-theme="dark"] .case-drawer-root.case-drawer-field .wb-next {
  background:
    linear-gradient(155deg, rgba(36, 110, 78, 0.88) 0%, rgba(18, 72, 50, 0.9) 55%, rgba(12, 48, 34, 0.94) 100%) !important;
  border: 1px solid rgba(184, 224, 200, 0.28) !important;
  box-shadow:
    0 20px 48px rgba(0, 0, 0, 0.45),
    0 1px 0 rgba(184, 224, 200, 0.28) inset,
    0 0 40px rgba(111, 191, 147, 0.12) !important;
}

html[data-theme="dark"] .case-drawer-root.case-drawer-field .wb-next .case-next-btn {
  background: linear-gradient(180deg, #d8f5e6 0%, #a8e6c6 100%) !important;
  color: #0a2e20 !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.25),
    0 1px 0 rgba(255, 255, 255, 0.5) inset !important;
  font-weight: 800 !important;
}

html[data-theme="dark"] .case-drawer-root.case-drawer-field .wb-next .case-next-btn:hover:not(:disabled) {
  background: linear-gradient(180deg, #e8fff4 0%, #b6efd2 100%) !important;
}

/* Checklist rows as mini glass bars */
html[data-theme="dark"] .case-drawer-root.case-drawer-field .visit-check-label {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 14px !important;
  padding: 12px 14px !important;
}

html[data-theme="dark"] .case-drawer-root.case-drawer-field #case-drawer-pills .chip {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: var(--glass-ink-soft) !important;
  backdrop-filter: blur(10px);
}

html[data-theme="dark"] .case-drawer-root.case-drawer-field #case-drawer-pills .chip-sev-high,
html[data-theme="dark"] .case-drawer-root.case-drawer-field #case-drawer-pills .chip-sev-critical {
  background: rgba(185, 28, 28, 0.28) !important;
  border-color: rgba(255, 120, 120, 0.35) !important;
  color: #ffb4b4 !important;
}

html[data-theme="dark"] .case-drawer-root.case-drawer-field #case-drawer-pills .chip-assigned {
  background: rgba(232, 180, 138, 0.22) !important;
  border-color: rgba(232, 180, 138, 0.4) !important;
  color: var(--glass-warm-soft) !important;
}

html[data-theme="dark"] .case-drawer-root.case-drawer-field #case-drawer-close,
html[data-theme="dark"] .case-drawer-root.case-drawer-field .case-back-btn {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: var(--glass-ink) !important;
  backdrop-filter: blur(12px);
}

html[data-theme="dark"] .case-drawer-root.case-drawer-field .wb-nav-actions .btn-officer-nav,
html[data-theme="dark"] .case-drawer-root.case-drawer-field .case-notes-actions .btn-officer-nav {
  background: rgba(143, 217, 176, 0.16) !important;
  border: 1px solid rgba(143, 217, 176, 0.35) !important;
  color: #c8f5dc !important;
}

html[data-theme="dark"] .case-drawer-root.case-drawer-field .wb-nav-actions .secondary,
html[data-theme="dark"] .case-drawer-root.case-drawer-field .case-notes-actions .secondary,
html[data-theme="dark"] .case-drawer-root.case-drawer-field .case-photo-btn {
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  color: var(--glass-ink) !important;
}

/* Agency desk decision panel — keep forest hero, soften for dark glass page */
html[data-theme="dark"] .agency-desk-panel {
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.5),
    0 0 40px rgba(111, 191, 147, 0.1) !important;
}

html[data-theme="dark"] .agency-desk-panel-head {
  background: linear-gradient(125deg, #0d4832 0%, #1a6b4a 55%, #245c40 100%) !important;
}

html[data-theme="dark"] .agency-desk-panel-body {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.04) 100%) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .agency-desk-primary,
html[data-theme="dark"] body.role-agency-admin .agency-desk-primary.status-advance-btn {
  background: linear-gradient(180deg, #d8f5e6 0%, #a8e6c6 100%) !important;
  color: #0a2e20 !important;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3);
}

html[data-theme="dark"] .agency-desk-select,
html[data-theme="dark"] body.role-agency-admin .agency-desk-select.assign-select {
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: var(--glass-ink) !important;
}

html[data-theme="dark"] .agency-desk-field-label,
html[data-theme="dark"] .agency-desk-field-hint,
html[data-theme="dark"] .agency-desk-link {
  color: var(--glass-ink-mute) !important;
}

html[data-theme="dark"] .agency-desk-officer-name,
html[data-theme="dark"] .agency-desk-link-danger {
  color: var(--glass-ink) !important;
}

html[data-theme="dark"] .agency-desk-link-danger {
  color: #ff8a80 !important;
}

/* Chips on incidents / agency */
html[data-theme="dark"] body.role-agency-admin .agency-desk-chips .officer-chip {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: var(--glass-ink-soft) !important;
}

html[data-theme="dark"] body.role-agency-admin .agency-desk-chips .officer-chip.active {
  background: linear-gradient(135deg, rgba(240, 201, 168, 0.95), rgba(220, 150, 100, 0.9)) !important;
  border-color: rgba(255, 210, 170, 0.4) !important;
  color: #1a1410 !important;
}

html[data-theme="dark"] body.role-agency-admin .agency-incidents-table thead th {
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--glass-label) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}