/* Approved dashboard palette; login keeps its existing styles and behavior. */
#dashboardScreen {
  color-scheme: light;
  --bg: #071a30;
  --panel: #ffffff;
  --panel2: #f4f6fc;
  --text: #172033;
  --muted: #58667e;
  --line: #e1e6f0;
  --purple: #6548ef;
  --purpleSoft: #eeeaff;
  --green: #087f5b;
  --red: #c7354b;
  --shadow: 0 10px 30px rgba(0, 12, 35, .16);
  background: transparent;
}

#dashboardScreen .main {
  background: linear-gradient(180deg, rgba(6, 28, 53, .25), rgba(5, 20, 40, .78));
}

#dashboardScreen .sidebar {
  --panel: #10182b;
  --panel2: #1a243a;
  --text: #f3f5ff;
  --muted: #b0bdd3;
  --line: #2d3852;
  --purple: #b5a5ff;
  --purpleSoft: #302551;
  color: var(--text);
  background: var(--panel);
}

#dashboardScreen .sidebar .nav button.active {
  box-shadow: inset 3px 0 #a48aff;
}

#dashboardScreen .topbar {
  background: #101c32;
  border-color: #2d3852;
}

#dashboardScreen .crumb { color: #b0bdd3; }
#dashboardScreen .crumb b { color: #f3f5ff; }

#dashboardScreen .heading {
  min-height: 230px;
  padding: 28px;
  border: 1px solid #416a91;
  border-radius: 18px;
  background: linear-gradient(90deg, rgba(5, 19, 42, .94), rgba(5, 24, 48, .72) 48%, rgba(5, 24, 48, .08)),
    url('/static/security-background.png') center right / cover no-repeat;
  box-shadow: var(--shadow);
  flex-wrap: wrap;
  align-content: space-between;
}

#dashboardScreen .heading h1 { color: #ffffff; }
#dashboardScreen .heading p { color: #e0eafb; max-width: 390px; }
#dashboardScreen .eyebrow { color: #c4b7ff; }
#dashboardScreen .heading-actions { flex-wrap: wrap; align-self: flex-end; }
#dashboardScreen .filters > .filter-note,
#dashboardScreen .footer-note { color: #e0eafb; }
#dashboardScreen .filter-note {
  padding: 8px 12px;
  border-radius: 10px;
  background: #10213b;
}

#dashboardScreen button:focus-visible,
#dashboardScreen a:focus-visible,
#dashboardScreen select:focus-visible,
#dashboardScreen input:focus-visible {
  outline: 3px solid #987cff;
  outline-offset: 3px;
}

@media (max-width: 720px) {
  #dashboardScreen .heading {
    min-height: 280px;
    padding: 20px;
    background-position: center, 65% center;
  }
  #dashboardScreen .heading-actions { gap: 10px; }
  #dashboardScreen .heading-actions .select-wrap { min-width: 100%; }
  #dashboardScreen .heading-actions .primary-btn { width: 100%; }
}