/* ============================================================
   Airlock design system
   Layered on top of Bootstrap 5 + legacy style.css.
   Loaded last so these rules win without editing legacy CSS.
   ============================================================ */

:root {
  /* Brand — anchored on the established indigo (#1f256c) */
  --hd-brand:        #1f256c;
  --hd-brand-700:    #181d57;
  --hd-brand-900:    #0e1352;
  --hd-brand-300:    #4954a8;
  --hd-brand-tint:   #eef0fb;
  --hd-accent:       #2bb6a3;   /* "secure" teal, used sparingly */
  --hd-accent-tint:  #e6f6f3;

  /* Neutrals */
  --hd-ink:          #1b1f2a;
  --hd-muted:        #6b7280;
  --hd-line:         #e6e8ef;
  --hd-surface:      #ffffff;
  --hd-canvas:       #f4f5f9;

  /* Semantic */
  --hd-success:      #198754;
  --hd-danger:       #d6455d;
  --hd-warning:      #c9821a;

  --hd-radius:       14px;
  --hd-radius-sm:    10px;
  --hd-shadow:       0 1px 2px rgba(16,19,40,.04), 0 8px 28px rgba(16,19,40,.08);
  --hd-shadow-sm:    0 1px 2px rgba(16,19,40,.06), 0 2px 8px rgba(16,19,40,.05);

  --hd-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Re-point Bootstrap's primary at the brand so btn/links inherit it */
  --bs-primary: #1f256c;
  --bs-primary-rgb: 31,37,108;
  --bs-link-color: #1f256c;
  --bs-link-hover-color: #0e1352;
  --bs-body-color: #1b1f2a;
  --bs-body-font-family: var(--hd-font);
}

body {
  font-family: var(--hd-font);
  color: var(--hd-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Brand helpers ---------- */
.bg-pulsar { background-color: var(--hd-brand) !important; }
.hd-brand-text { color: var(--hd-brand) !important; }

.hd-gradient {
  background: linear-gradient(135deg, var(--hd-brand) 0%, var(--hd-brand-300) 100%);
}

/* Lock/shield brandmark used on auth + error pages */
.hd-mark {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--hd-brand) 0%, var(--hd-brand-300) 100%);
  color: #fff;
  font-size: 24px;
  box-shadow: 0 2px 6px rgba(31,37,108,.14);
}

.hd-wordmark {
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--hd-ink);
  font-size: 1.35rem;
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  --bs-btn-font-weight: 600;
  border-radius: 10px;
  padding-top: .5rem;
  padding-bottom: .5rem;
  transition: background-color .15s ease, box-shadow .15s ease, transform .05s ease;
}
.btn-sm { padding-top: .35rem; padding-bottom: .35rem; border-radius: 8px; }
.btn:active { transform: translateY(1px); }

.btn-primary,
input[type="submit"].btn-primary {
  --bs-btn-bg: var(--hd-brand);
  --bs-btn-border-color: var(--hd-brand);
  --bs-btn-hover-bg: var(--hd-brand-900);
  --bs-btn-hover-border-color: var(--hd-brand-900);
  --bs-btn-active-bg: var(--hd-brand-900);
  --bs-btn-active-border-color: var(--hd-brand-900);
  --bs-btn-disabled-bg: var(--hd-brand-300);
  --bs-btn-disabled-border-color: var(--hd-brand-300);
}

.btn-danger {
  --bs-btn-bg: var(--hd-danger);
  --bs-btn-border-color: var(--hd-danger);
  --bs-btn-hover-bg: #bb3850;
  --bs-btn-hover-border-color: #bb3850;
}

/* Bare <input type=submit> in the offcanvas forms — make it look like a button */
.offcanvas-form input[type="submit"],
form input[type="submit"]:not(.btn) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--hd-brand);
  color: #fff;
  border: 0;
  border-radius: 10px;
  font-weight: 600;
  padding: .55rem 1.25rem;
  transition: background-color .15s ease;
}
.offcanvas-form input[type="submit"]:hover,
form input[type="submit"]:not(.btn):hover { background: var(--hd-brand-900); }

/* ============================================================
   Cards / surfaces
   ============================================================ */
.card {
  border: 1px solid var(--hd-line);
  border-radius: var(--hd-radius);
  box-shadow: var(--hd-shadow-sm);
}
.card .card-body { padding: 1.25rem 1.35rem; }

.hd-card {
  background: var(--hd-surface);
  border: 1px solid var(--hd-line);
  border-radius: var(--hd-radius);
  box-shadow: var(--hd-shadow);
}

/* Section heading used on dashboard cards */
.hd-section-title {
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--hd-muted);
  margin: 0;
}

/* ============================================================
   Forms
   ============================================================ */
.form-label, .offcanvas-form label, label {
  font-weight: 600;
  font-size: .82rem;
  color: var(--hd-ink);
}
.form-control, .form-select {
  border-radius: 10px;
  border-color: var(--hd-line);
  padding: .5rem .75rem;
}
.form-control:focus, .form-select:focus {
  border-color: var(--hd-brand-300);
  box-shadow: 0 0 0 .2rem rgba(31,37,108,.15);
}
.form-text { color: var(--hd-muted); }

/* ============================================================
   Tables
   ============================================================ */
.table {
  --bs-table-border-color: var(--hd-line);
  margin-bottom: 0;
}
.table > thead th {
  font-size: .72rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--hd-muted);
  font-weight: 700;
  border-bottom: 1px solid var(--hd-line);
  padding-top: .6rem;
  padding-bottom: .6rem;
  background: #fafbfd;
}
.table > tbody td { vertical-align: middle; padding-top: .6rem; padding-bottom: .6rem; }
.table-hover > tbody > tr:hover > * { background-color: var(--hd-brand-tint); }

/* Chip used for recipient emails */
.hd-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: var(--hd-brand-tint);
  color: var(--hd-brand);
  border-radius: 999px;
  padding: .15rem .6rem;
  font-size: .78rem;
  font-weight: 600;
  margin: .1rem .15rem;
  white-space: nowrap;
}

.hd-type-icon {
  width: 30px; height: 30px;
  border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--hd-accent-tint);
  color: var(--hd-accent);
  flex: 0 0 auto;
}
.hd-type-icon.is-text { background: var(--hd-brand-tint); color: var(--hd-brand); }

/* Empty states */
.hd-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--hd-muted);
}
.hd-empty .hd-empty-icon {
  font-size: 2rem;
  color: var(--hd-brand-300);
  margin-bottom: .75rem;
}

/* ============================================================
   Auth / access pages
   ============================================================ */
.hd-auth-page {
  min-height: 100vh;
  background:
    radial-gradient(1200px 600px at 50% -10%, var(--hd-brand-tint) 0%, transparent 60%),
    var(--hd-canvas);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}
.hd-auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--hd-surface);
  border: 1px solid var(--hd-line);
  border-radius: 18px;
  box-shadow: var(--hd-shadow);
  padding: 2rem 2rem 1.75rem;
}
.hd-auth-head { text-align: center; margin-bottom: 1.5rem; }
.hd-auth-head .hd-mark { margin-bottom: 1rem; }
.hd-auth-title { font-size: 1.3rem; font-weight: 700; color: var(--hd-ink); margin: 0; }
.hd-auth-sub { font-size: .9rem; color: var(--hd-muted); margin-top: .35rem; }

.hd-auth-foot {
  margin-top: 1.5rem;
  text-align: center;
  font-size: .78rem;
  color: var(--hd-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
}
.hd-auth-foot i { color: var(--hd-accent); }

/* Microsoft sign-in button refinement */
.ms-sign-in-btn {
  border-radius: 10px !important;
  padding: .65rem 1rem !important;
  font-weight: 600;
}

/* ============================================================
   Toasts (notifications)
   ============================================================ */
.toast {
  border: 1px solid var(--hd-line);
  border-radius: 12px;
  box-shadow: var(--hd-shadow);
  overflow: hidden;
}
.toast .toast-header.bg-pulsar { background: var(--hd-brand) !important; }
.toast .toast-header strong { text-transform: capitalize; letter-spacing: .01em; }

/* ============================================================
   Topbar polish (authenticated shell)
   ============================================================ */
.topbar {
  background: var(--hd-surface);
  height: 64px;
  box-shadow: 0 1px 0 var(--hd-line);
  border-bottom: none !important;
}
.main { background: var(--hd-canvas); }

.dropdown-menu {
  border: 1px solid var(--hd-line);
  border-radius: 12px;
  box-shadow: var(--hd-shadow);
  padding: .35rem;
}
.dropdown-item { border-radius: 8px; padding: .4rem .6rem; }
.dropdown-item:active, .dropdown-item.active { background: var(--hd-brand); }

/* Offcanvas forms */
.offcanvas-form .offcanvas-title { font-weight: 700; color: var(--hd-ink); }

/* Secret-password inputs: masked via CSS rather than type="password" so
   browsers and password managers never offer to save or autofill them. */
.secret-password-mask { -webkit-text-security: disc; }

/* ============================================================
   Dark mode
   Activated by data-bs-theme="dark" on <html> (toggled in base.html).
   Bootstrap 5.3 themes its own components off that attribute; here we
   re-point the design-system tokens so the rest of the shell — which is
   built on these variables — follows along. A few targeted overrides
   cover spots that hardcode light colors.
   ============================================================ */
[data-bs-theme="dark"] {
  /* Brand accents lightened so they read against dark surfaces */
  --hd-brand:        #6671cf;
  --hd-brand-700:    #5560bd;
  --hd-brand-900:    #4b56b0;
  --hd-brand-300:    #818bdc;
  --hd-brand-tint:   #242b50;
  --hd-accent:       #34c4b1;
  --hd-accent-tint:  #123b37;

  /* Neutrals */
  --hd-ink:          #e7e9f2;
  --hd-muted:        #99a1b6;
  --hd-line:         #2b3146;
  --hd-surface:      #161a28;
  --hd-canvas:       #0e111b;

  --hd-shadow:       0 1px 2px rgba(0,0,0,.45), 0 8px 28px rgba(0,0,0,.55);
  --hd-shadow-sm:    0 1px 2px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.45);

  /* Keep Bootstrap's tokens in step with the brand re-point */
  --bs-primary: #6671cf;
  --bs-primary-rgb: 102,113,207;
  --bs-link-color: #9aa6f0;
  --bs-link-hover-color: #b7c0f5;
  --bs-body-color: #e7e9f2;
  --bs-body-bg: #0e111b;
}

/* Table headers hardcode a light tint in the base sheet */
[data-bs-theme="dark"] .table > thead th { background: #1b2030; }

/* Notification text is forced black inline/utility — flip it for contrast */
[data-bs-theme="dark"] .text-black { color: var(--hd-ink) !important; }

/* Session-expired modal body hardcodes a near-white background */
[data-bs-theme="dark"] #session_inactive_modal .modal-body { background: var(--hd-surface) !important; }

/* Brand logo swaps with the theme (light shows blue, dark shows the dark mark) */
.brand-logo-dark { display: none; }
[data-bs-theme="dark"] .brand-logo-light { display: none; }
[data-bs-theme="dark"] .brand-logo-dark { display: inline; }