/* ============================================================
   CSB Heap Design — Patch 1
   ------------------------------------------------------------
   Fixes:
   - White page background showing past content edges
   - Sidebar opacity (was nearly invisible)
   - Records list white rows
   - Trends/stats white blocks
   - Lingering emojis in sidebar and elsewhere
   - Light-theme inputs and buttons that didn't take overrides
   ============================================================ */

/* ---------- Force black page background when on a dashboarded screen ---------- */
body:has(#dashboard-screen:not(.hidden)),
body:has(#manager-screen:not(.hidden)),
body:has(#admin-screen:not(.hidden)) {
  background: #000000 !important;
  color: #fafafa !important;
}

/* Kill the 600px max-width constraint on dash-body / mgr-body so content fills the screen */
#dashboard-screen .dash-body,
#manager-screen .dash-body,
#manager-screen #mgr-body {
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #000000 !important;
}

/* ============================================================
   SIDEBAR — fix opacity issue
   ============================================================ */
body:has(#dashboard-screen:not(.hidden)) .sidebar-overlay,
body:has(#manager-screen:not(.hidden)) .sidebar-overlay,
body:has(#admin-screen:not(.hidden)) .sidebar-overlay {
  background: rgba(0, 0, 0, 0.85) !important; /* darker dim so sidebar pops */
}

body:has(#dashboard-screen:not(.hidden)) .sidebar,
body:has(#manager-screen:not(.hidden)) .sidebar,
body:has(#admin-screen:not(.hidden)) .sidebar {
  background: #0a0a0a !important;
  border-right: 1px solid #1a1a1a !important;
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.6) !important;
  opacity: 1 !important;
}

body:has(#dashboard-screen:not(.hidden)) .sidebar-header,
body:has(#manager-screen:not(.hidden)) .sidebar-header,
body:has(#admin-screen:not(.hidden)) .sidebar-header {
  background: #0a0a0a !important;
  border-bottom: 1px solid #1a1a1a !important;
  padding: 20px !important;
}
body:has(#dashboard-screen:not(.hidden)) .sidebar-header-title,
body:has(#manager-screen:not(.hidden)) .sidebar-header-title,
body:has(#admin-screen:not(.hidden)) .sidebar-header-title {
  font-family: ui-serif, Georgia, serif !important;
  color: #fafafa !important;
  font-size: 18px !important;
  font-weight: 400 !important;
}
body:has(#dashboard-screen:not(.hidden)) .sidebar-header-sub,
body:has(#manager-screen:not(.hidden)) .sidebar-header-sub,
body:has(#admin-screen:not(.hidden)) .sidebar-header-sub {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace !important;
  font-size: 10px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: #737373 !important;
  margin-top: 4px !important;
}

body:has(#dashboard-screen:not(.hidden)) .sidebar-nav,
body:has(#manager-screen:not(.hidden)) .sidebar-nav,
body:has(#admin-screen:not(.hidden)) .sidebar-nav {
  background: #0a0a0a !important;
  padding: 8px 0 !important;
}

body:has(#dashboard-screen:not(.hidden)) .sidebar-link,
body:has(#manager-screen:not(.hidden)) .sidebar-link,
body:has(#admin-screen:not(.hidden)) .sidebar-link {
  background: transparent !important;
  color: #e5e5e5 !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  text-decoration: none !important;
  padding: 12px 20px !important;
}
body:has(#dashboard-screen:not(.hidden)) .sidebar-link:hover,
body:has(#manager-screen:not(.hidden)) .sidebar-link:hover,
body:has(#admin-screen:not(.hidden)) .sidebar-link:hover {
  background: rgba(62, 207, 142, 0.08) !important;
  color: #ffffff !important;
}

/* HIDE all sidebar emojis */
body:has(#dashboard-screen:not(.hidden)) .sidebar-link-icon,
body:has(#manager-screen:not(.hidden)) .sidebar-link-icon,
body:has(#admin-screen:not(.hidden)) .sidebar-link-icon {
  display: none !important;
}

body:has(#dashboard-screen:not(.hidden)) .sidebar-footer,
body:has(#manager-screen:not(.hidden)) .sidebar-footer,
body:has(#admin-screen:not(.hidden)) .sidebar-footer {
  background: #0a0a0a !important;
  border-top: 1px solid #1a1a1a !important;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace !important;
  font-size: 9px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: #525252 !important;
  padding: 14px 20px !important;
}

/* Sidebar dividers */
body:has(#dashboard-screen:not(.hidden)) .sidebar-nav > div[style*="height:1px"],
body:has(#manager-screen:not(.hidden)) .sidebar-nav > div[style*="height:1px"],
body:has(#admin-screen:not(.hidden)) .sidebar-nav > div[style*="height:1px"] {
  background: #1a1a1a !important;
  margin: 8px 20px !important;
}

/* ============================================================
   AGENT TAB CONTENTS — Records, Trends, History
   ============================================================ */

/* Search bar */
#dashboard-screen .search-bar {
  background: #0a0a0a !important;
  border: 1px solid #1a1a1a !important;
  border-radius: 4px !important;
  margin: 16px 22px !important;
  padding: 10px 14px !important;
}
#dashboard-screen .search-bar:focus-within {
  border-color: #3ecf8e !important;
}
#dashboard-screen .search-bar input {
  color: #fafafa !important;
  background: transparent !important;
  font-family: -apple-system, 'Inter', sans-serif !important;
  font-size: 13px !important;
}
#dashboard-screen .search-bar input::placeholder {
  color: #525252 !important;
}
#dashboard-screen .search-bar > span:first-child {
  display: none !important; /* drop the magnifying glass emoji */
}
#dashboard-screen .search-clear {
  color: #737373 !important;
}

/* Filter row */
#dashboard-screen .filter-row {
  padding: 0 22px 12px !important;
  margin: 0 !important;
  border-bottom: 1px solid #1a1a1a !important;
  gap: 6px !important;
}

/* Sort row */
#dashboard-screen .sort-row {
  padding: 14px 22px !important;
  margin: 0 !important;
}
#dashboard-screen .sort-select {
  background: #0a0a0a !important;
  border: 1px solid #1a1a1a !important;
  color: #fafafa !important;
  font-family: -apple-system, 'Inter', sans-serif !important;
  border-radius: 4px !important;
  padding: 7px 12px !important;
}

/* Records container & list */
#dashboard-screen #records-container,
#dashboard-screen .record-list {
  background: #000000 !important;
  padding: 0 !important;
  margin: 0 !important;
}
#dashboard-screen .record-item {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid #1a1a1a !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 12px 22px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}
#dashboard-screen .record-item:hover {
  background: rgba(62, 207, 142, 0.03) !important;
}
#dashboard-screen .record-status-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}
#dashboard-screen .record-info {
  flex: 1 !important;
  min-width: 0 !important;
}
#dashboard-screen .record-name {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  color: #fafafa !important;
}
#dashboard-screen .record-meta {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace !important;
  font-size: 11px !important;
  color: #737373 !important;
  margin-top: 2px !important;
}
#dashboard-screen .record-badge {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace !important;
  font-size: 9px !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  border-radius: 2px !important;
  padding: 3px 8px !important;
}

/* No results */
#dashboard-screen .no-results {
  background: transparent !important;
  color: #737373 !important;
  font-family: ui-serif, Georgia, serif !important;
  font-style: italic !important;
  text-align: center !important;
  padding: 60px 22px !important;
}

/* ============================================================
   TRENDS TAB — kill the white blocks
   ============================================================ */
/* The trends tab uses inline-styled containers with white backgrounds. Hit them all. */
#dashboard-screen [class*="stats"] {
  background: transparent !important;
}

/* Kill any white background on direct children of dash-body */
#dashboard-screen #dash-body > div[style*="background:#fff"],
#dashboard-screen #dash-body > div[style*="background:white"],
#dashboard-screen #dash-body > div[style*="background:var(--surface)"],
#dashboard-screen #dash-body div[style*="background:#fff"],
#dashboard-screen #dash-body div[style*="background:white"],
#dashboard-screen #dash-body div[style*="background:var(--surface)"] {
  background: transparent !important;
  border: 1px solid #1a1a1a !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  color: #fafafa !important;
}

/* Trends tab inline-styled stat cards */
#dashboard-screen #dash-body div[style*="font-size:48px"],
#dashboard-screen #dash-body div[style*="font-size:36px"],
#dashboard-screen #dash-body div[style*="font-size:32px"] {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace !important;
  font-weight: 500 !important;
  letter-spacing: -1px !important;
  color: #fafafa !important;
}

/* The big 92% percentage on Trends */
#dashboard-screen #dash-body div[style*="color:var(--green)"][style*="font-size"] {
  color: #22c55e !important;
}
#dashboard-screen #dash-body div[style*="color:var(--red)"][style*="font-size"] {
  color: #ef4444 !important;
}
#dashboard-screen #dash-body div[style*="color:var(--blue)"][style*="font-size"] {
  color: #5b9eff !important;
}
#dashboard-screen #dash-body div[style*="color:var(--accent)"][style*="font-size"] {
  color: #3ecf8e !important;
}

/* Generic catch-all for any .stats-card / .stat-card not yet hit */
#dashboard-screen .stats-card,
#dashboard-screen .stat-card,
#manager-screen .stats-card,
#manager-screen .stat-card {
  background: transparent !important;
  border: 1px solid #1a1a1a !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  color: #fafafa !important;
}

/* History tab "No activity yet" empty state */
#dashboard-screen #dash-body > div[style*="text-align:center"],
#dashboard-screen .history-empty,
#manager-screen #mgr-body > div[style*="text-align:center"] {
  color: #737373 !important;
  font-family: ui-serif, Georgia, serif !important;
  font-style: italic !important;
}

/* History items */
#dashboard-screen .history-item,
#dashboard-screen .history-section {
  background: transparent !important;
  border-bottom: 1px solid #1a1a1a !important;
  color: #e5e5e5 !important;
}
#dashboard-screen .history-icon {
  display: none !important; /* drop emoji */
}
#dashboard-screen .history-time {
  color: #525252 !important;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace !important;
}

/* AGING tab "No aging records" */
/* Kill the green check emoji block — replace with a clean mono header */
#dashboard-screen #dash-body div[style*="font-size:60px"],
#dashboard-screen #dash-body div[style*="font-size:80px"] {
  display: none !important;
}

/* ============================================================
   GLOBAL EMOJI STRIP (within dashboarded screens)
   ============================================================ */
/* Hide emoji-only spans. Many existing buttons/cards stuff emoji into a span.
   We target spans whose text content is just an emoji-sized icon. */
#dashboard-screen .card-icon,
#manager-screen .card-icon,
#admin-screen .card-icon,
#dashboard-screen .status-btn-icon,
#dashboard-screen .drop-zone-icon,
#admin-screen .drop-zone-icon,
#dashboard-screen .sidebar-link-icon,
#manager-screen .sidebar-link-icon,
#admin-screen .sidebar-link-icon,
#dashboard-screen .bell {
  display: none !important;
}

/* Strip the leading emojis from admin section titles like "🛡️ SEP Compliance Review Queue" */
#admin-screen .admin-section-title,
#admin-screen .cp-step-title {
  /* the emojis are inline text, not icons — visually they remain.
     Use letter-spacing trick to compress, then we'll handle individual ones below. */
}

/* ============================================================
   AGENT BODY — make sure container fills viewport
   ============================================================ */
#dashboard-screen,
#manager-screen,
#admin-screen {
  min-height: 100vh !important;
  min-height: 100dvh !important;
}

/* The "Synced" toast in the corner — make it less neon */
.toast {
  background: #0a0a0a !important;
  color: #3ecf8e !important;
  border: 1px solid #1a1a1a !important;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace !important;
  font-size: 11px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  border-radius: 4px !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.6) !important;
}