/* ============================================================
   Bloomington HIPAA - Portal (client) stylesheet
   ------------------------------------------------------------
   LAYER 1  Foundations lifted verbatim from the marketing site
            (bloomington-hipaa-site/styles.css) so the portal and
            the public site are literally the same design language.
   LAYER 2  Application components the marketing template does not
            have (panels, badges, tabs, notices, progress, ...),
            built strictly from the Layer 1 tokens.

   Legacy assets/style.css is untouched and still serves the admin
   area during the migration.
   ============================================================ */

/* ===================== LAYER 1: FOUNDATIONS ================= */

:root {
  --navy: #1E3A5F;
  --blue: #2563EB;
  --blue-600: #2563EB;
  --gold: #FFD700;
  --gold-hover: #facc15;
  --black: #000;
  --white: #fff;
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Status colours - added for the app, absent from the template. */
  --green: #166534;
  --green-soft: #dcfce7;
  --red: #b91c1c;
  --red-soft: #fee2e2;
  --amber: #a16207;
  --amber-soft: #fef3c7;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 4rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--gray-50);
  color: var(--black);
  font-family: var(--font-body);
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
.icon { width: 1.5rem; height: 1.5rem; flex-shrink: 0; }
[hidden] { display: none !important; }

/* ---------- Containers ---------- */
.container     { max-width: 72rem; margin-inline: auto; padding-inline: 1.5rem; width: 100%; }
.container-5xl { max-width: 64rem; margin-inline: auto; padding-inline: 1.5rem; width: 100%; }
.container-3xl { max-width: 48rem; margin-inline: auto; padding-inline: 1.5rem; width: 100%; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  border-radius: 0.5rem;
  font-weight: 700;
  font-size: 1rem;
  font-family: inherit;
  padding: 0.75rem 1.5rem;
  text-align: center;
  line-height: 1.2;
  transition: background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.btn-sm { font-size: 0.875rem; padding: 0.5rem 1rem; border-radius: 0.375rem; }
.btn-gold { background: var(--gold); color: var(--black); }
.btn-gold:hover { background: var(--gold-hover); }
.btn:disabled { opacity: 0.6; cursor: default; }

/* ---------- Section titles ---------- */
.section-title { font-size: 1.875rem; line-height: 2.25rem; font-weight: 700; color: var(--navy); margin-bottom: 0.75rem; }
.section-title.center { text-align: center; }
.section-sub { color: var(--gray-500); text-align: center; max-width: 36rem; margin: 0 auto 3rem; }
.block-title { font-size: 1.5rem; line-height: 2rem; font-weight: 700; color: var(--navy); }

/* ---------- Navbar ---------- */
.navbar { background: var(--white); border-bottom: 1px solid var(--gray-100); position: sticky; top: 0; z-index: 50; }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 4rem; }
.brand { display: flex; align-items: center; gap: 0.5rem; }
.brand-logo { height: 2.25rem; width: auto; display: block; flex-shrink: 0; }
.brand-text { display: flex; flex-direction: column; }
.brand-eyebrow { font-size: 0.75rem; color: var(--gray-500); line-height: 1; }
.brand-title { font-size: 0.875rem; font-weight: 600; color: var(--navy); line-height: 1.25; }
.nav-links { display: none; align-items: center; gap: 1.5rem; }
.nav-user-name { font-size: 0.875rem; font-weight: 700; color: var(--navy); }
.nav-mobile-user { font-size: 0.875rem; font-weight: 700; color: var(--navy); }
.nav-link { font-size: 0.875rem; color: var(--gray-600); transition: color 0.15s ease; }
.nav-link:hover { color: var(--blue); }
.nav-link.is-active { color: var(--navy); font-weight: 700; }
.nav-toggle { display: inline-flex; align-items: center; justify-content: center; padding: 0.5rem; background: none; border: none; cursor: pointer; color: var(--black); }
.nav-toggle .icon { width: 1.25rem; height: 1.25rem; }
.nav-mobile { border-top: 1px solid var(--gray-100); background: var(--white); padding: 1rem 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.nav-mobile-link { font-size: 0.875rem; color: var(--gray-700); }
.nav-mobile-cta { width: 100%; }
.nav-logout { display: inline; margin: 0; }

@media (min-width: 768px) {
  .nav-links { display: flex; }
  .nav-toggle { display: none; }
  .nav-mobile { display: none !important; }
}

/* ---------- Form fields ---------- */
.field {
  border: 1px solid var(--gray-200);
  border-radius: 0.25rem;
  padding: 0.625rem 0.75rem;
  font-size: 0.875rem;
  color: var(--gray-700);
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s ease;
  width: 100%;
  background: var(--white);
}
.field:focus { border-color: var(--blue); }
.field-textarea { resize: vertical; }
.field::placeholder { color: var(--gray-400); }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--gray-100); padding: 2rem 1.5rem; background: var(--white); }
.footer-inner { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 1rem; font-size: 0.875rem; color: var(--gray-500); }
.footer-brand { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; color: var(--navy); }
.footer-logo { height: 1.25rem; width: auto; display: block; flex-shrink: 0; }
.footer-contacts { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.footer-contacts a { transition: color 0.15s ease; }
.footer-contacts a:hover { color: var(--blue); }

@media (min-width: 640px) { .footer-contacts { flex-direction: row; } }
@media (min-width: 768px) { .footer-inner { flex-direction: row; } }


/* ===================== LAYER 2: APP COMPONENTS ============== */

/* ---------- Page shell ---------- */
.app-main { padding: 2.5rem 0 4rem; }
.page-head { margin-bottom: 1.5rem; }
.page-title { font-size: 1.75rem; font-weight: 800; color: var(--navy); letter-spacing: -0.02em; }
.page-sub { color: var(--gray-500); margin-top: 0.25rem; font-size: 0.9375rem; }

/* ---------- Panel ---------- */
.panel { background: var(--white); border: 1px solid var(--gray-200); border-radius: 0.75rem; padding: 1.5rem; }
.panel + .panel { margin-top: 1.25rem; }
.panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.panel-title { font-size: 1.125rem; font-weight: 700; color: var(--navy); }
.panel-sub { color: var(--gray-500); font-size: 0.875rem; margin-top: 0.25rem; }

/* ---------- Secondary buttons (template only ships the gold CTA) ---------- */
.btn-outline { background: var(--white); border: 1px solid var(--gray-200); color: var(--navy); }
.btn-outline:hover { border-color: var(--navy); }
.btn-soft { background: var(--gray-100); color: var(--navy); }
.btn-soft:hover { background: var(--gray-200); }
.btn-navy { background: var(--navy); color: var(--white); }
.btn-navy:hover { opacity: 0.9; }

/* ---------- Status badges ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.25rem 0.625rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.45;
  white-space: nowrap;
}
.badge-green { background: var(--green-soft); color: var(--green); }
.badge-red   { background: var(--red-soft);   color: var(--red); }
.badge-amber { background: var(--amber-soft); color: var(--amber); }
.badge-gray  { background: var(--gray-100);   color: var(--gray-600); }
.badge-blue  { background: #eff6ff;           color: var(--blue); }

/* ---------- Notices ---------- */
.notice { border-radius: 0.5rem; padding: 0.875rem 1rem; font-size: 0.9375rem; border: 1px solid var(--gray-200); background: var(--gray-50); color: var(--gray-700); }
.notice a { color: var(--blue); font-weight: 600; text-decoration: underline; }
.notice-success { background: #f0fdf4; border-color: #bbf7d0; color: var(--green); }
.notice-error   { background: #fef2f2; border-color: #fecaca; color: var(--red); }

/* ---------- Tabs ---------- */
.tabs { display: flex; gap: 0.25rem; flex-wrap: wrap; border-bottom: 1px solid var(--gray-200); }
.tab { padding: 0.625rem 1rem; font-size: 0.875rem; font-weight: 600; color: var(--gray-500); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color 0.15s ease, border-color 0.15s ease; }
.tab:hover { color: var(--navy); }
.tab.is-active { color: var(--navy); border-bottom-color: var(--gold); }

/* ---------- Progress ---------- */
.progress { height: 0.5rem; background: var(--gray-200); border-radius: 999px; overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--navy); border-radius: 999px; }

/* ---------- Form rows ---------- */
.form-row { display: flex; flex-direction: column; gap: 0.375rem; margin-bottom: 1rem; }
.form-row label { font-size: 0.875rem; font-weight: 600; color: var(--navy); }
.form-hint { font-size: 0.8125rem; color: var(--gray-500); }

/* ---------- Layout helpers ---------- */
.row { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.row-between { justify-content: space-between; }
.row-top { align-items: flex-start; }
.stack { display: flex; flex-direction: column; gap: 1rem; }

/* ---------- List item (gold rule borrowed from .service-item) ---------- */
.item {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-left: 4px solid var(--gold);
  border-radius: 0 0.75rem 0.75rem 0;
  padding: 1.125rem 1.25rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.item + .item { margin-top: 0.875rem; }
.item.is-done { border-left-color: #86efac; }
.item-body { flex: 1; min-width: 15rem; }
.item-title { font-size: 1.125rem; font-weight: 700; color: var(--navy); }
.item-desc { color: var(--gray-500); font-size: 0.875rem; line-height: 1.625; margin-top: 0.375rem; }
.item-meta { color: var(--gray-400); font-size: 0.8125rem; margin-top: 0.5rem; }
.item-actions { display: flex; gap: 0.625rem; align-items: center; flex-wrap: wrap; }

/* ---------- Checkmark feature list (e.g. checkout order summary) ---------- */
.check-list { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.check-list li { display: flex; align-items: flex-start; gap: 0.625rem; color: var(--gray-500); font-size: 0.9375rem; }
.check-list .check { color: var(--gold-hover); font-weight: 700; flex-shrink: 0; }

/* ---------- Quiz options ---------- */
.quiz-option {
  display: block;
  border: 1px solid var(--gray-200);
  border-radius: 0.5rem;
  padding: 0.875rem 1rem;
  margin-top: 0.625rem;
  cursor: pointer;
  background: var(--white);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.quiz-option:hover { border-color: var(--navy); }
.quiz-option.is-locked { cursor: default; }
.quiz-option.is-selected { border-color: var(--navy); background: var(--gray-50); }
.quiz-option.is-correct { border-color: #86efac; background: var(--green-soft); }
.quiz-option.is-wrong { border-color: #fca5a5; background: var(--red-soft); }
.quiz-option-input { margin-right: 0.625rem; accent-color: var(--navy); }
.quiz-option-copy { display: inline-flex; align-items: center; justify-content: space-between; gap: 0.75rem; width: calc(100% - 1.75rem); vertical-align: middle; }
.quiz-option-text { color: var(--gray-700); }
.quiz-option-icon { font-weight: 700; flex-shrink: 0; }
.quiz-option-icon.is-check { color: var(--green); }
.quiz-option-icon.is-x { color: var(--red); }

/* Legacy progress markup still uses a div child. */
.progress > div { height: 100%; background: var(--navy); border-radius: 999px; }

@media (max-width: 767px) {
  .quiz-option-text { font-size: 1rem; }
}

/* ---------- Training material ---------- */
.training-point { font-size: 1.5rem; font-weight: 800; color: var(--navy); letter-spacing: -0.02em; margin-top: 0.5rem; }
.training-block { background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: 0.5rem; padding: 1.25rem; margin-top: 1.25rem; }
.training-block-do { border-left: 4px solid var(--gold); }
.training-block-title { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gray-500); margin-bottom: 0.5rem; }
.training-block p { color: var(--gray-700); line-height: 1.7; }

.got-it { display: inline-flex; align-items: center; gap: 0.625rem; margin-top: 1.25rem; padding: 0.75rem 1rem; background: var(--white); border: 1px solid var(--gray-200); border-radius: 0.5rem; cursor: pointer; font-weight: 700; color: var(--navy); }
.got-it:hover { border-color: var(--navy); }
.got-it input { width: 1.125rem; height: 1.125rem; accent-color: var(--navy); cursor: pointer; }

@media (max-width: 767px) {
  .training-point { font-size: 1.3125rem; }
  .training-block p { font-size: 1rem; }
  .got-it { width: 100%; justify-content: center; }
}

/* ---------- Next step hero ---------- */
.next-step {
  background: var(--navy);
  color: #fff;
  border-radius: 0.75rem;
  padding: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.next-step-eyebrow { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); }
.next-step-title { font-size: 1.5rem; font-weight: 800; color: #fff; margin-top: 0.5rem; letter-spacing: -0.02em; }
.next-step-meta { color: #cbd5e1; font-size: 0.875rem; margin-top: 0.5rem; }

@media (max-width: 767px) {
  .next-step { padding: 1.375rem; }
  .next-step-title { font-size: 1.25rem; }
  .next-step-meta { font-size: 1rem; }
  .next-step > a.btn { width: 100%; }
}

/* ---------- Stats ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.stat { background: var(--white); border: 1px solid var(--gray-200); border-radius: 0.75rem; padding: 1.25rem; }
.stat-value { font-size: 1.875rem; font-weight: 800; color: var(--navy); line-height: 1.1; }
.stat-label { color: var(--gray-500); font-size: 0.8125rem; margin-top: 0.375rem; }

/* ---------- Empty state ---------- */
.empty { text-align: center; padding: 2.5rem 1.25rem; color: var(--gray-500); }
.empty strong { display: block; color: var(--navy); font-size: 1rem; margin-bottom: 0.25rem; }

/* ---------- Service item (gold rule) - from the marketing template ---------- */
.service-item { border-left: 4px solid var(--gold); padding-left: 1.25rem; }
.service-name { font-weight: 600; color: var(--navy); font-size: 1.125rem; }
.service-desc { color: var(--gray-500); margin-top: 0.25rem; font-size: 0.875rem; line-height: 1.625; }

/* ---------- Maintenance (standalone dark page) ---------- */
body.maintenance { background: var(--navy); color: #fff; display: flex; align-items: center; min-height: 100vh; }
.maintenance-wrap { padding-block: 3rem; }
.maintenance-title { font-size: 2rem; line-height: 1.15; font-weight: 900; color: #fff; letter-spacing: -0.02em; margin-top: 1.5rem; }
.maintenance-lead { color: #cbd5e1; font-size: 1.0625rem; margin-top: 1rem; max-width: 34rem; }
.maintenance-note { color: #94a3b8; font-size: 0.875rem; margin-top: 2rem; }
.maintenance-alt { background: transparent; border-color: #475569; color: #fff; }
.maintenance-alt:hover { border-color: #fff; color: #fff; }

@media (min-width: 768px) { .maintenance-title { font-size: 2.5rem; } }

/* ---------- Auth / login ---------- */
.hero-eyebrow { font-size: 1rem; font-weight: 500; color: var(--black); margin-bottom: 1rem; }
.auth-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: start; }
.auth-headline { font-size: 2.25rem; line-height: 1.1; letter-spacing: -0.02em; font-weight: 900; color: var(--black); }
.auth-lead { color: var(--gray-500); font-size: 1.0625rem; margin-top: 1rem; max-width: 34rem; }
.auth-points { display: flex; flex-direction: column; gap: 1.25rem; margin-top: 2rem; }
.auth-card { position: sticky; top: 5rem; }

@media (min-width: 900px) {
  .auth-grid { grid-template-columns: minmax(0, 1.1fr) minmax(21rem, 0.9fr); gap: 3rem; }
  .auth-headline { font-size: 3rem; }
}
@media (max-width: 899px) {
  .auth-card { position: static; }
}

/* ---------- Mobile: larger, readable body text ---------- */
@media (max-width: 767px) {
  .item-desc, .item-meta, .notice, .form-hint, .panel-sub { font-size: 1rem; }
  .item-title { font-size: 1.1875rem; }
  .field { font-size: 1rem; } /* 16px also stops iOS zooming on focus */
  .nav-mobile-link { font-size: 1rem; }
  .stat-grid { grid-template-columns: 1fr; }
  .item-actions { width: 100%; }
  .item-actions > .btn { flex: 1; }
  .page-title { font-size: 1.5rem; }
}

/* ---------- Certificate ---------- */
.cert-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
  border: 1px solid var(--gray-200);
  background: #fff;
}

/* Print only the certificate itself: the old page had no print rules, so
   printing captured the whole app chrome. */
@media print {
  .navbar,
  .footer,
  .cert-actions { display: none !important; }

  body { background: #fff; }
  .app-main { padding: 0; }
  .cert-sheet { border: none; padding: 0 !important; }
  .cert-image { border: none; border-radius: 0; }

  @page { size: landscape; margin: 10mm; }
}

/* ---------- Assessment components ----------
   Ported from the legacy stylesheet: the marketing template has no
   equivalent for tooltips, risk grids, collapses or choice options.
   They still reference the old token names, so those are aliased onto
   the new palette just above rather than rewriting 25 rules by hand.
   ---------------------------------------------------------------- */
:root {
  /* Compatibility aliases for the ported rules below. */
  --text: #0f172a;
  --muted: var(--gray-500);
  --line: var(--gray-200);
  --card: var(--white);
  --blue-soft: #eff6ff;
}

.assessment-risk-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px
}

.choice-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: nowrap
}

.choice-option-input {
    flex: 0 0 auto;
    margin-top: 4px
}

.choice-option-copy {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.45
}

.assessment-response-option {
    position: relative
}

.assessment-response-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    width: 100%
}

.assessment-response-text {
    flex: 1 1 auto;
    min-width: 0
}

.assessment-response-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end
}

.assessment-response-tools {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap
}

.assessment-tooltip-wrap {
    position: relative;
    display: inline-flex
}

.assessment-tooltip-trigger {
    border: 1px solid #c7defb;
    background: var(--blue-soft);
    color: var(--blue);
    border-radius: 999px;
    padding: 4px 10px;
    min-height: 30px;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer
}

.assessment-tooltip-panel {
    position: absolute;
    left: 0;
    top: calc(100% + 8px);
    width: min(320px, 70vw);
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 16px 32px rgba(15, 23, 42, .12);
    color: var(--text);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
    z-index: 20
}

.assessment-tooltip-panel strong {
    display: block;
    margin-bottom: 6px;
    font-size: 13px
}

.assessment-tooltip-panel span {
    display: block;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45
}

.assessment-tooltip-wrap:hover .assessment-tooltip-panel,
.assessment-tooltip-trigger:focus + .assessment-tooltip-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0)
}

.assessment-collapse {
    padding: 20px 24px
}

.assessment-collapse-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    cursor: pointer;
    list-style: none
}

.assessment-collapse-summary::-webkit-details-marker {
    display: none
}

.assessment-collapse-summary::after {
    content: '+';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: var(--blue-soft);
    border: 1px solid #c7defb;
    color: var(--blue);
    font-size: 22px;
    line-height: 1;
    font-weight: 600;
    flex: 0 0 auto
}

.assessment-collapse[open] .assessment-collapse-summary::after {
    content: '-'
}

.assessment-collapse-subtitle {
    display: block;
    margin-top: 6px;
    color: var(--muted);
    font-size: 14px;
    font-weight: 400
}

.assessment-collapse-content {
    margin-top: 14px
}

.assessment-step-summary {
    position: sticky;
    top: 96px;
    z-index: 8
}

.assessment-review-badge.is-hidden {
    display: none
}

.choice-option-number {
    font-weight: 700;
    margin-right: 8px
}


/* ---------- Admin shell ----------
   The marketing template has no admin patterns at all, so the sidebar,
   layout and data table below are designed from its tokens. Class names
   match the legacy markup so admin pages can migrate one at a time.
   -------------------------------------------------------------------- */
.admin-layout { display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: start; }

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 0.75rem;
  padding: 0.625rem;
}
.sidebar a {
  padding: 0.625rem 0.875rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--gray-600);
  border-left: 3px solid transparent;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.sidebar a:hover { background: var(--gray-50); color: var(--navy); }
.sidebar a.active { background: var(--gray-50); color: var(--navy); border-left-color: var(--gold); }

@media (min-width: 900px) {
  .admin-layout { grid-template-columns: 15rem minmax(0, 1fr); gap: 2rem; }
  .sidebar { position: sticky; top: 5rem; }
}

/* ---------- Data table ---------- */
.table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.table th,
.table td { text-align: left; padding: 0.75rem 0.875rem; border-bottom: 1px solid var(--gray-200); vertical-align: middle; }
.table th {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-500);
  background: var(--gray-50);
  white-space: nowrap;
}
.table tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: var(--gray-50); }
.table-wrap { overflow-x: auto; border: 1px solid var(--gray-200); border-radius: 0.75rem; background: var(--white); }
.table-wrap .table th:first-child,
.table-wrap .table td:first-child { padding-left: 1.25rem; }

/* ---------- Admin tiles ---------- */
.admin-tile { background: var(--white); border: 1px solid var(--gray-200); border-radius: 0.75rem; padding: 1.25rem; }
.admin-stat-value { font-size: 1.75rem; font-weight: 800; color: var(--navy); line-height: 1.1; }
.admin-stat-label { color: var(--gray-500); font-size: 0.8125rem; margin-top: 0.375rem; }
.stat-grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1rem; }

@media (max-width: 767px) {
  .table th, .table td { padding: 0.625rem 0.75rem; }
}

/* ---------- Ported legacy components ----------
   Classes still used by migrated pages that the template has no answer
   for. Media queries are stripped from the source first: the previous
   pass matched innermost braces and so lifted mobile overrides out of
   their @media, forcing every grid to one column at all widths.
   ---------------------------------------------------------------- */
.btn-compact {
    min-width: 110px;
    min-height: 40px;
    padding: 8px 14px;
    border-radius: 14px;
    font-size: 15px
}
.action-dropdown {
    position: relative
}
.action-dropdown summary {
    list-style: none
}
.action-dropdown summary::-webkit-details-marker {
    display: none
}
.action-dropdown-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    min-width: 180px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 20px 48px rgba(15, 23, 42, .12);
    padding: 8px;
    display: grid;
    gap: 4px;
    z-index: 20
}
.action-dropdown-menu a {
    display: block;
    padding: 10px 12px;
    border-radius: 12px
}
.action-dropdown-menu a:hover {
    background: var(--blue-soft);
    color: var(--blue)
}
.hero-grid,
.grid-2,
.grid-portal,
.dashboard-top,
.maintenance-wrap,
.admin-layout {
    display: grid;
    gap: 24px
}
.grid-2 {
    grid-template-columns: 1.05fr .95fr
}
.grid-portal {
    grid-template-columns: 1fr .9fr
}
.kicker {
    display: inline-block;
    background: var(--blue-soft);
    border: 1px solid #c7defb;
    color: var(--blue);
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase
}
.cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px
}
.cards.cards-2 {
    grid-template-columns: repeat(2, 1fr)
}
.card,
.panel,
.due-card,
.training-item,
.admin-tile,
.sidebar {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 28px;
    padding: 24px
}
.report-filter-tile {
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease
}
.report-filter-tile.is-active {
    background: linear-gradient(180deg, #f6fbff, #edf6ff);
    border-color: #b7d5f7;
    box-shadow: 0 16px 34px rgba(32, 100, 175, .10)
}
.report-filter-tile-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px
}
.report-filter-caption {
    margin-top: 10px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 600
}
.report-toggle {
    display: inline-flex;
    align-items: center;
    cursor: pointer
}
.report-toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none
}
.report-toggle-track {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 50px;
    height: 30px;
    padding: 3px;
    border-radius: 999px;
    background: #dbe5f1;
    transition: background .18s ease
}
.report-toggle-thumb {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .18);
    transition: transform .18s ease
}
.report-toggle input:checked + .report-toggle-track {
    background: var(--blue)
}
.report-toggle input:checked + .report-toggle-track .report-toggle-thumb {
    transform: translateX(20px)
}
.form-inline-status {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
    color: var(--muted);
    min-height: 50px;
    transition: border-color .2s ease, background-color .2s ease, color .2s ease
}
.form-inline-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #94a3b8;
    flex: 0 0 auto
}
.form-inline-status-text {
    min-width: 0;
    font-size: 14px;
    line-height: 1.4
}
.form-inline-status.is-saving {
    border-color: #c7defb;
    background: var(--blue-soft);
    color: var(--blue)
}
.form-inline-status.is-saving .form-inline-status-dot {
    background: var(--blue)
}
.form-inline-status.is-success {
    border-color: #bbf7d0;
    background: #ecfdf3;
    color: #166534
}
.form-inline-status.is-success .form-inline-status-dot {
    background: #16a34a
}
.form-inline-status.is-error {
    border-color: #fecdd3;
    background: #fff1f2;
    color: #be123c
}
.form-inline-status.is-error .form-inline-status-dot {
    background: #e11d48
}
.training-item+.training-item {
    margin-top: 16px
}
.training-head,
.row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap
}
.training-head,
.row.space {
    justify-content: space-between;
    align-items: flex-start
}
.quill-editor-shell {
    border: 1px solid var(--line);
    border-radius: 20px;
    overflow: hidden;
    background: #fff
}
.quill-editor-shell .ql-toolbar.ql-snow {
    border: 0;
    border-bottom: 1px solid var(--line);
    background: #f8fbff
}
.quill-editor-shell .ql-container.ql-snow {
    border: 0;
    font-family: inherit
}
.quill-editor-shell .ql-editor {
    min-height: 420px;
    font-size: 16px;
    line-height: 1.7
}
.rich-content {
    line-height: 1.7
}
.rich-content p,
.rich-content ul,
.rich-content ol,
.rich-content blockquote,
.rich-content pre,
.rich-content h1,
.rich-content h2,
.rich-content h3 {
    margin: 0 0 14px
}
.rich-content ul,
.rich-content ol {
    padding-left: 24px
}
.rich-content blockquote {
    border-left: 4px solid var(--line);
    padding-left: 14px;
    color: var(--muted)
}
.rich-content pre {
    white-space: pre-wrap;
    background: #f8fbff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 12px 14px
}

/* ---------- Public home page ----------
   Values taken from the marketing template (hero benefits, services list,
   how-we-help grid) so the PHP home page matches the static site.
   -------------------------------------------------------------------- */
.home-hero-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: start; padding-top: 1rem; }
.home-section { margin-top: 4rem; }

.hero-benefits { display: flex; flex-direction: column; gap: 1rem; margin-top: 2rem; }
.hero-benefits li { display: flex; align-items: flex-start; gap: 0.75rem; }
.hero-benefits span { font-size: 1rem; color: var(--black); line-height: 1.45; }
.hero-benefits strong { font-weight: 700; }
.hero-check { width: 1.25rem; height: 1.25rem; color: var(--black); margin-top: 0.125rem; flex-shrink: 0; }
.hero-tags { font-size: 0.875rem; font-weight: 700; color: var(--black); margin-top: 1.75rem; }

.services-list { display: flex; flex-direction: column; gap: 1.5rem; }

.how-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
.how-num { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; color: var(--gold); margin-bottom: 0.5rem; }
.how-label { font-weight: 700; color: var(--navy); font-size: 1.125rem; margin-bottom: 0.5rem; }
.how-desc { color: var(--gray-500); font-size: 0.875rem; line-height: 1.625; }

.home-faq-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: start; }
.home-faq-item { padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--gray-200); }
.home-faq-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.home-faq-item strong { display: block; color: var(--navy); font-weight: 600; }
.home-faq-item p { color: var(--gray-500); font-size: 0.875rem; line-height: 1.625; margin-top: 0.375rem; }

@media (min-width: 640px) { .how-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) {
  .home-hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(21rem, 0.85fr); gap: 3rem; }
  .home-faq-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .hero-benefits span, .how-desc, .home-faq-item p { font-size: 1.0625rem; }
  .home-section { margin-top: 3rem; }
}

/* ---------- Legacy form markup ----------
   Admin pages use bare <input>/<select>/<textarea> inside .form-row rather
   than the template's .field class, so style them here instead of touching
   24 pages.
   ------------------------------------------------------------------- */
.form-row input:not([type="checkbox"]):not([type="radio"]),
.form-row select,
.form-row textarea {
  border: 1px solid var(--gray-200);
  border-radius: 0.375rem;
  padding: 0.625rem 0.75rem;
  font-size: 0.875rem;
  font-family: inherit;
  color: var(--gray-700);
  background: var(--white);
  outline: none;
  width: 100%;
  transition: border-color 0.15s ease;
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus { border-color: var(--blue); }
.form-row textarea { resize: vertical; min-height: 5rem; }
.form-row input::placeholder,
.form-row textarea::placeholder { color: var(--gray-400); }
.form-row input[readonly] { background: var(--gray-50); color: var(--gray-600); }

@media (max-width: 767px) {
  .form-row input:not([type="checkbox"]):not([type="radio"]),
  .form-row select,
  .form-row textarea { font-size: 1rem; }
}

/* ---------- Legacy button + table markup ----------
   Admin pages use class="btn-outline btn-compact" without the .btn base, and
   put <table class="table"> straight into a .panel with no scroll wrapper.
   Handled here rather than editing 13 pages.
   ---------------------------------------------------------------------- */

/* Make the variants self-sufficient: they carry the base button styling
   themselves, so they work with or without .btn alongside. */
.btn-outline,
.btn-soft,
.btn-gold,
.btn-navy,
.btn-compact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  font-family: inherit;
  font-weight: 700;
  font-size: 1rem;
  padding: 0.75rem 1.5rem;
  text-align: center;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;          /* stop "Edit Email" breaking mid-label */
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn { white-space: nowrap; }

.btn-compact,
.btn-sm {
  font-size: 0.8125rem;
  padding: 0.4375rem 0.75rem;
  border-radius: 0.375rem;
}

/* A table dropped straight into a panel must be able to scroll sideways
   rather than spilling past the panel edge. :has keeps this off panels that
   hold absolutely-positioned dropdowns, which overflow would clip. */
.panel:has(> .table),
.panel:has(> form > .table) { overflow-x: auto; }

.table { min-width: 44rem; }
.table td { vertical-align: middle; }

/* Keep the actions column tidy: buttons sit in a row and stay on one line. */
.table td:last-child { white-space: nowrap; }
.table td:last-child .btn-outline,
.table td:last-child .btn-compact,
.table td:last-child .btn { margin-right: 0.375rem; }
.table td:last-child .btn-outline:last-child,
.table td:last-child .btn-compact:last-child { margin-right: 0; }