/* ===========================================================================
   SpamShield (email app) — brand theme
   Navy (#0b2545) → Blue (#1f6feb) palette from the Spam Shield logo.
   Shared across the mailbox, the admin area, and the sign-in screen.
   =========================================================================== */
: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);

  --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 + logo --------------------------------------------------- */
.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; }

/* ---- Mailbox sidebar (white) --------------------------------------------- */
.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: .12rem .5rem; padding: .5rem .8rem;
  display: flex; justify-content: space-between; align-items: center;
  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 .badge { font-size: .7rem; }
.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; }
.ss-compose {
  margin: .6rem .6rem .3rem; border: none;
  background: var(--ss-grad-brand); box-shadow: 0 4px 12px rgba(31,111,235,.3);
  border-radius: .6rem; font-weight: 600;
}

/* ---- Admin sidebar (navy) ------------------------------------------------ */
.ss-sidebar {
  background: var(--ss-navy);
  min-height: calc(100vh - 60px);
}
.ss-sidebar .nav-link {
  color: #c9d6e5; border-radius: .6rem; margin: .15rem .55rem; padding: .55rem .85rem; font-weight: 600;
}
.ss-sidebar .nav-link:hover { background: rgba(255,255,255,.09); color: #fff; }
.ss-sidebar .nav-link.active { background: var(--ss-grad-brand); color: #fff; box-shadow: 0 4px 12px rgba(31,111,235,.35); }

/* ---- Message rows -------------------------------------------------------- */
.msg-row { cursor: pointer; }
.msg-row.unread { font-weight: 600; background: #fbfdff; }
.msg-row:hover { background: #f2f6fd; }

/* ---- 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; }

/* Dashboard stat tiles */
.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; }

/* ---- 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); }

/* ---- 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; }

/* ---- Badges / alerts / forms --------------------------------------------- */
.badge { font-weight: 600; letter-spacing: .02em; }
.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; }
.alert { border: none; border-radius: 12px; }
.alert-success { background:#e6f6ec; color:#1a6b39; }
.alert-danger  { background:#fdecee; color:#b02531; }
.alert-warning { background:#fff6e5; color:#8a5a00; }

/* ---- Impersonation bar --------------------------------------------------- */
.ss-impersonation-bar {
  display:flex; align-items:center; justify-content:center; gap:1rem; flex-wrap:wrap;
  background: linear-gradient(90deg, #b45309, #d97706);
  color:#fff; font-weight:600; padding:.5rem 1rem; font-size:.9rem;
}
.ss-impersonation-bar .btn-light { font-weight:600; }

/* ---- Public shell (home / privacy / error) ------------------------------- */
.ss-footer { border-top: 1px solid var(--ss-border); background:#fff; color: var(--ss-muted); padding: 1rem 0; margin-top: 3rem; }
.ss-footer a { color: var(--ss-blue-600); }
.ss-hero { padding: 3.5rem 1rem; text-align: center; }
.ss-hero .ss-hero-icon { height: 116px; width:auto; filter: drop-shadow(0 10px 24px rgba(11,37,69,.22)); }
.ss-hero .accent { color: var(--ss-blue); }

/* ---- 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; }