:root {
  --bg-page: #f3f7ff;
  --card-bg: rgba(255,255,255,0.92);
  --text-primary: #0f2147;
  --text-secondary: #5f6d85;
  --accent: #4f46e5;
  --accent-soft: rgba(79,70,229,0.12);
}
body {
  background: linear-gradient(180deg, #eef4ff 0%, #f8fbff 100%);
  color: var(--text-primary);
}
body.dark-mode {
  background: linear-gradient(180deg, #0f172a 0%, #111827 100%);
  color: var(--text-primary);
}

body.dark-mode {
  --bg-page: #121821;
  --card-bg: rgba(22, 28, 40, 0.95);
  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;
  --accent: #60a5fa;
  --accent-soft: rgba(96,165,250,0.16);
}
.dashboard-hero {
  background: linear-gradient(135deg, rgba(79,70,229,0.95), rgba(59,130,246,0.9));
}
.theme-card {
  background: var(--card-bg);
}
.theme-icon {
  font-size: 2.1rem;
}
.icon-cyan {
  color: #0ea5e9;
}
.icon-orange {
  color: #f97316;
}
.icon-green {
  color: #22c55e;
}
.icon-red {
  color: #ef4444;
}
.card {
  border-radius: 1rem;
}
.table {
  border-radius: 0.85rem;
}
.table thead tr th {
  border-top: none;
}
.table tbody tr:hover {
  background-color: rgba(79,70,229,0.05);
}
.btn-primary {
  background-color: #4f46e5;
  border-color: #4f46e5;
}
.btn-primary:hover {
  background-color: #4338ca;
  border-color: #4338ca;
}
.navbar {
  background: linear-gradient(90deg, #272d62 0%, #1f2560 100%);
}
.navbar-brand {
  letter-spacing: 0.03em;
}
.alert {
  border-radius: 0.85rem;
}
.card-header {
  background: transparent;
  border-bottom: 1px solid rgba(15, 33, 71, 0.08);
  font-weight: 600;
}
input.form-control, select.form-select {
  border-radius: 0.85rem;
}

@media print {
  body {
    background: white !important;
    color: black !important;
  }
  .navbar, .btn, .alert, .theme-icon, .btn-group, .d-flex .btn {
    display: none !important;
  }
  .print-page {
    margin: 0;
    padding: 0;
  }
  .card {
    box-shadow: none !important;
    border: 1px solid #ddd !important;
  }
}

/* --- Added for the Azure SWA rebuild --- */
.auth-shell { max-width: 420px; margin: 15vh auto; text-align: center; }
.topbar { display: flex; justify-content: space-between; align-items: center; padding: 12px 24px; background: var(--card-bg); }
.topbar nav a { margin-left: 16px; color: var(--text-primary); text-decoration: none; }
.stats-grid { display: flex; gap: 16px; margin-top: 16px; }
.stat-card { background: var(--card-bg); border-radius: 12px; padding: 20px 28px; text-align: center; }
table { width: 100%; border-collapse: collapse; margin-top: 16px; }
th, td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--accent-soft); }
form input { margin-right: 8px; padding: 6px 10px; }