/* ===========================================================================
   SpamShield Hub — brand theme
   Navy (#0b2545) → Blue (#1f6feb) palette from the Spam Shield logo.
   =========================================================================== */
:root {
  --ss-navy:     #0b2545;
  --ss-navy-700: #13315c;
  --ss-navy-900: #061627;
  --ss-blue:     #1f6feb;
  --ss-blue-600: #195fd0;
  --ss-blue-100: #e7f0fe;
  --ss-sky:      #3f92ff;

  --ss-bg:       #eef2f8;
  --ss-surface:  #ffffff;
  --ss-border:   #e3e9f3;
  --ss-text:     #1c2740;
  --ss-muted:    #6b7a99;

  --ss-grad-brand: linear-gradient(135deg, var(--ss-blue) 0%, var(--ss-navy) 100%);
  --ss-grad-nav:   linear-gradient(90deg, var(--ss-navy) 0%, var(--ss-navy-700) 100%);
  --ss-shadow-sm:  0 1px 2px rgba(11,37,69,.06), 0 2px 8px rgba(11,37,69,.06);
  --ss-shadow-md:  0 6px 24px rgba(11,37,69,.10);

  --bs-primary: var(--ss-blue);
  --bs-primary-rgb: 31,111,235;
  --bs-link-color: var(--ss-blue-600);
  --bs-link-hover-color: var(--ss-navy);
  --bs-body-color: var(--ss-text);
}

html { font-size: 15px; position: relative; min-height: 100%; }
@media (min-width: 768px) { html { font-size: 16px; } }

body {
  font-family: "Segoe UI", Roboto, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  background: var(--ss-bg);
  color: var(--ss-text);
}

h1,h2,h3,h4,h5,h6 { color: var(--ss-navy); font-weight: 700; }

a { text-decoration: none; }

.btn:focus, .btn:active:focus, .form-control:focus, .form-select:focus, .form-check-input:focus {
  box-shadow: 0 0 0 .2rem rgba(31,111,235,.25);
}

/* ---- Top navbar ---------------------------------------------------------- */
.navbar-ss {
  background: var(--ss-grad-nav);
  box-shadow: 0 2px 12px rgba(11,37,69,.18);
  min-height: 60px;
}
.navbar-ss .navbar-brand { display: flex; align-items: center; gap: .6rem; }
.ss-logo-chip {
  display: inline-flex; align-items: center;
  background: #fff; border-radius: 10px; padding: 6px 13px;
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
}
.navbar-ss .ss-logo { height: 26px; width: auto; display: block; }

/* ---- Sidebar ------------------------------------------------------------- */
.ss-side {
  background: var(--ss-surface);
  border-right: 1px solid var(--ss-border);
  min-height: calc(100vh - 60px);
  box-shadow: var(--ss-shadow-sm);
}
.ss-side .nav-link {
  color: var(--ss-navy-700);
  font-weight: 600;
  border-radius: .6rem;
  margin: .15rem .55rem;
  padding: .55rem .85rem;
  display: flex; align-items: center; gap: .6rem;
  transition: background .15s ease, color .15s ease;
}
.ss-side .nav-link:hover { background: var(--ss-blue-100); color: var(--ss-navy); }
.ss-side .nav-link.active {
  background: var(--ss-grad-brand);
  color: #fff;
  box-shadow: 0 4px 12px rgba(31,111,235,.35);
}
.ss-side .section-label {
  font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ss-muted); font-weight: 700; padding: .9rem 1.1rem .3rem;
}

/* ---- Cards --------------------------------------------------------------- */
.card {
  border: 1px solid var(--ss-border);
  border-radius: 14px;
  box-shadow: var(--ss-shadow-sm);
}
.card-header {
  background: #fff;
  border-bottom: 1px solid var(--ss-border);
  font-weight: 700; color: var(--ss-navy);
  border-radius: 14px 14px 0 0 !important;
  padding: .85rem 1.1rem;
}
.shadow-sm { box-shadow: var(--ss-shadow-sm) !important; }

/* Stat cards on the dashboard */
.ss-stat { position: relative; overflow: hidden; }
.ss-stat .ss-stat-label { color: var(--ss-muted); font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.ss-stat .ss-stat-value { font-size: 2rem; font-weight: 800; color: var(--ss-navy); line-height: 1.1; }
.ss-stat::after {
  content:""; position:absolute; right:-24px; top:-24px; width:90px; height:90px;
  border-radius:50%; background: var(--ss-blue-100); opacity:.6;
}
.ss-stat.ss-stat-danger .ss-stat-value { color:#d9333f; }
.ss-stat.ss-stat-danger::after { background:#fdecee; }
.ss-stat.ss-stat-open { border-color:#f5c884; box-shadow:0 0 0 1px #f5c884 inset; }
.ss-stat.ss-stat-open .ss-stat-value { color:#b45309; }
.ss-stat.ss-stat-open::after { background:#fff3e0; }
a:hover .ss-stat.ss-stat-open { background:#fffaf3; }

/* ---- Buttons ------------------------------------------------------------- */
.btn { border-radius: .55rem; font-weight: 600; }
.btn-primary {
  background: var(--ss-grad-brand); border: none;
  box-shadow: 0 4px 12px rgba(31,111,235,.28);
}
.btn-primary:hover, .btn-primary:focus { background: linear-gradient(135deg, var(--ss-blue-600), var(--ss-navy)); }
.btn-outline-primary { color: var(--ss-blue-600); border-color: var(--ss-blue); }
.btn-outline-primary:hover { background: var(--ss-blue); border-color: var(--ss-blue); }
.btn-sm { border-radius: .45rem; }

/* ---- Tables -------------------------------------------------------------- */
.table { color: var(--ss-text); }
.table > thead th {
  background: #f6f8fc; color: var(--ss-muted);
  text-transform: uppercase; font-size: .74rem; letter-spacing: .04em;
  border-bottom: 1px solid var(--ss-border); font-weight: 700;
}
.table > tbody > tr:hover { background: #f7faff; }
.table td, .table th { border-color: var(--ss-border); vertical-align: middle; }

/* ---- Threat badges ------------------------------------------------------- */
.badge { font-weight: 600; letter-spacing: .02em; }
.badge-threat-high   { background:#d9333f; color:#fff; }
.badge-threat-medium { background:#f2803a; color:#fff; }
.badge-threat-low    { background:#f3b13b; color:#3a2a00; }
.badge-threat-none   { background:#9aa7bd; color:#fff; }

/* ---- Forms --------------------------------------------------------------- */
.form-control, .form-select { border-color: var(--ss-border); border-radius: .55rem; }
.form-label { font-weight: 600; color: var(--ss-navy-700); }
.font-monospace { font-family: "Cascadia Code", "Consolas", ui-monospace, monospace; }

/* ---- Alerts -------------------------------------------------------------- */
.alert { border: none; border-radius: 12px; }
.alert-success { background:#e6f6ec; color:#1a6b39; }
.alert-danger  { background:#fdecee; color:#b02531; }
.alert-warning { background:#fff6e5; color:#8a5a00; }

/* ---- Auth screen --------------------------------------------------------- */
.ss-auth {
  min-height: 100vh; display: flex; align-items: center;
  background: radial-gradient(1200px 600px at 15% -10%, #1f4f9c 0%, transparent 55%),
              radial-gradient(900px 500px at 100% 120%, #1f6feb 0%, transparent 45%),
              linear-gradient(160deg, var(--ss-navy-900) 0%, var(--ss-navy) 60%, var(--ss-navy-700) 100%);
}
.ss-auth-card {
  max-width: 410px; margin: auto; border: none; border-radius: 20px;
  box-shadow: 0 24px 60px rgba(0,0,0,.4);
}
.ss-auth-logo { width: 280px; max-width: 82%; height: auto; }