/* ===========================================================================
   DEN-ALIGNED THEME  —  candidate house style for all three companies
   (Synergy Safety Group · Driver Education Network · Ultralus)

   Sampled from the LIVE drivereducationnetwork.com stylesheet, not eyeballed.
   DEN ships Tailwind/shadcn HSL tokens; these are the exact hex conversions:
     teal #0D7EA5 · gold #F9C006 · text #14181F · gray text #67707E
     (canonical values given by Jon 2026-09-23; they supersede the hex I
      converted off DEN's HSL tokens, which were 1 digit out on teal/gray)
     border #DAE3E7 · radius .75rem = 12px
     type: Plus Jakarta Sans (headings) + Inter (body)

   OVERRIDE LAYER ONLY. Loaded AFTER styles.css so it wins on specificity.
   It sets VALUES, never names — partners.js still co-brands by writing
   --accent / --navy / --sb-* at runtime, so CRS keeps working untouched.
   =========================================================================== */

:root{
  /* --- DEN source tokens ------------------------------------------------ */
  --den-sky:        #0d7ea5;
  --den-sky-hover:  #0a6584;
  --den-sky-deep:   #095670;
  --den-sky-tint:   #ecf5f8;
  --den-gold:       #f9c006;
  --den-gold-deep:  #d6a505;
  --den-ink:        #14181f;
  --den-muted:      #67707e;
  --den-line:       #dae3e7;
  --den-surface:    #f0f3f4;

  /* --- shared ssg.css tokens, repointed -------------------------------- */
  --ssg-ink:        var(--den-ink);
  --ssg-amber:      var(--den-gold);
  --ssg-amber-hi:   #ffcf3d;
  --ssg-amber-deep: var(--den-gold-deep);
  --surface-page:   #ffffff;
  --surface-card:   #ffffff;
  --surface-sunken: var(--den-surface);
  --surface-inverse:#0f1b2d;
  --ink-primary:    var(--den-ink);
  --ink-secondary:  #3d4551;
  --ink-muted:      var(--den-muted);
  --line:           var(--den-line);
  --line-strong:    #c3d1d7;

  /* --- portal tokens ---------------------------------------------------- */
  /* Primary action moves from ink to DEN sky. Gold stays a brand accent and
     never a button fill, same rule as before: it collides with warning. */
  --accent:         var(--den-sky);
  --accent-hover:   var(--den-sky-hover);
  --accent-tint:    var(--den-sky-tint);
  --accent-2:       var(--den-gold);
  --navy:           #0f1b2d;
  --navy-2:         #16263f;

  --bg:             #ffffff;
  --surface:        #ffffff;
  --surface-2:      var(--den-surface);
  --surface-3:      var(--den-sky-tint);
  --border:         var(--den-line);
  --border-strong:  #c3d1d7;
  --text:           var(--den-ink);
  --text-2:         #3d4551;
  --text-3:         var(--den-muted);

  --radius:         12px;
  --radius-sm:      9px;

  /* --- shell: DEN runs a LIGHT chrome (sidebar-background 0 0% 100%) ----- */
  --sb-bg:          #ffffff;
  --sb-text:        var(--den-ink);
  --sb-text-strong: var(--den-ink);
  --sb-item:        #46505f;
  --sb-muted:       #8b95a3;
  --sb-dim:         var(--den-muted);
  --sb-line:        var(--den-line);
  --sb-hover:       var(--den-sky-tint);
  --sb-active:      rgba(13,126,165,.12);
  --sb-logo-filter: none;

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-display: "Plus Jakarta Sans", var(--font);
}

/* --- Typography: DEN leads with Plus Jakarta Sans, heavy and tight ------- */
h1,h2,h3,h4,
.brand,.cname,.stat b,.page-head h1,.card h3,.svc-name{
  font-family:var(--font-display);
  font-weight:800;
  letter-spacing:-.025em;
}
h1,.page-head h1{font-size:34px;line-height:1.12}
h2{font-size:24px}
h3,.card h3{font-size:18px}
.kicker,.eyebrow,.nav-label{
  font-family:var(--font-display);font-weight:800;font-size:12.5px;
  letter-spacing:1.4px;text-transform:uppercase;color:var(--den-sky-deep);
}

/* --- Sidebar on a light shell needs a real edge, not a shadow ----------- */
.sidebar{border-right:1px solid var(--border)}
.nav-item.active{
  background:var(--sb-active);
  color:var(--den-sky-deep);
  font-weight:600;
  box-shadow:inset 3px 0 0 var(--den-sky);
}

/* --- Buttons: DEN's primary is a solid sky fill, gold is the marketing CTA */
.btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn.gold{background:var(--den-gold);color:#111;border-color:var(--den-gold);font-weight:800}
.btn.gold:hover{background:var(--den-gold-deep)}

/* --- Cards: DEN uses soft-tinted fills + 12px radius, light borders ------ */
.card,.svc-card{border-radius:var(--radius);border:1px solid var(--border)}
.card:hover,.svc-card:hover{border-color:var(--den-sky);box-shadow:0 10px 30px -12px rgba(13,126,165,.28)}

/* ===========================================================================
   SIGN-IN PAGE  —  split layout, teal panel bleeding to gold
   Matches the reference: brand lockup top-left, headline anchored bottom-left,
   one fine-print line at the foot; white form column on the right.
   AUTH FLOW IS UNCHANGED. It stays two-step email -> 6-digit code. The portal
   has no passwords on purpose (corporate filters ate the magic links), so the
   reference's password field is deliberately not reproduced.
   =========================================================================== */

.split{grid-template-columns:1fr 1fr}

.split .brandside{
  /* Teal base with the gold bloom pulled into the bottom-right corner, which
     is how the reference reads: mostly sky, gold only as the far corner. */
  background:
    radial-gradient(ellipse 120% 102% at 110% 114%, #f9c006 0%, rgba(249,192,6,.62) 32%, rgba(249,192,6,0) 73%),
    linear-gradient(158deg, #063c4f 0%, #0b6e90 46%, #0d7ea5 100%);
  padding:44px 56px;position:relative;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
}
.split .brandside::after{display:none}   /* drop the old corner orb */
.split .bs-feats{display:none}           /* reference has no feature list */

/* Brand stack, centred in the panel: our mark, then the product name as the
   headline, then the three operating companies on one rule-separated row.
   Order is Ultralus / Synergy-Solutions / DEN. Sized OPTICALLY, not to a common
   box — Ultralus is a near-square badge and the other two are wide wordmarks,
   so equal heights would make the badge shout. */
.bs-lockup{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:0;position:relative;z-index:1;margin:0;width:100%;
}
/* styles.css pins .brandside img with align-self:flex-start (it was a
   top-left lockup before). In a centred column that shoves the mark to the
   left edge while the text below it centres — undo it explicitly. */
.split .brandside .bs-lockup #bsLogo{
  height:auto;width:63%;max-width:400px;align-self:center;
}
.split .brandside .bs-family img{align-self:center;height:auto}

.bs-title{display:flex;flex-direction:column;align-items:center;margin-top:44px}
.bs-badge{
  display:block;font-family:var(--font-display);font-weight:800;
  font-size:42px;line-height:1.1;letter-spacing:-.03em;color:#fff;
}
.bs-tag{
  display:block;font-size:18px;line-height:1.5;color:rgba(255,255,255,.90);
  margin-top:10px;
}

.bs-family{
  display:flex;align-items:center;justify-content:center;gap:56px;
  margin-top:46px;padding-top:44px;
  border-top:1px solid rgba(255,255,255,.26);
  width:86%;max-width:560px;
}
.bs-family img{width:auto;opacity:.95}
.bs-family .bs-ult{height:58px !important}
.bs-family .bs-syn{height:40px !important}
/* Stacked DEN lockup (DRIVER / EDUCATION / NETWORK + chevron bar), the mark
   from Jon's reference. Taller and narrower than the horizontal wordmark,
   so it takes more height and less width in the row. */
.bs-family .bs-den{height:56px !important}

/* The reference drops the marketing headline and the panel footnote; the
   product name and .bs-tag carry the message now. */
.split .bs-copy{display:none}
.bs-foot{display:none}

/* --- form column -------------------------------------------------------- */
.split .formside{background:#fff;padding:40px 48px}
.auth{max-width:344px}
.auth-back{
  display:none;font-size:13.5px;color:var(--text-2);text-decoration:none;
  margin-bottom:22px;font-weight:500;
}
.auth-back:hover{color:var(--accent)}
.auth h2{font-family:var(--font-display);font-weight:800;font-size:27px;letter-spacing:-.03em;margin-bottom:6px}
.auth label{font-size:13px;font-weight:700;color:var(--text);margin-bottom:7px}
.auth .field{border:1px solid #cfd9de;border-radius:8px;padding:11px 13px;background:#fff}
.auth .field:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(13,126,165,.16)}
.auth .btn.lg{border-radius:8px;font-weight:700;box-shadow:none;padding:12px 22px}
.auth .sec-note{margin-top:26px;font-size:11.5px;line-height:1.45}

@media (max-width:900px){
  .split .brandside{display:none}
  .split .formside{padding:32px 24px}
}

/* ===========================================================================
   ADMIN CONTROLS  —  toggles and round check buttons, DEN palette
   These restyle the EXISTING native <input type="checkbox"> elements via
   appearance:none. No markup and no JS changes, so checked state, change
   events and every admin action keep working exactly as they do today.
     .tact           -> sliding toggle   (on/off state: "Active")
     everything else -> round check      (membership: licenses, grants)
   =========================================================================== */

.chk,.acx,.ppx,.tvis,.tcon,#nt-sso{
  appearance:none;-webkit-appearance:none;margin:0;vertical-align:middle;
  width:22px;height:22px;border-radius:50%;
  border:2px solid #c3d1d7;background:#fff;
  cursor:pointer;position:relative;flex:0 0 auto;
  transition:background .13s ease,border-color .13s ease;
}
.chk:hover,.acx:hover,.ppx:hover,.tvis:hover,.tcon:hover,#nt-sso:hover{border-color:var(--den-sky)}
.chk:checked,.acx:checked,.ppx:checked,.tvis:checked,.tcon:checked,#nt-sso:checked{
  background:var(--den-sky);border-color:var(--den-sky);
}
/* the tick: a rotated open corner, so it scales cleanly and needs no icon font */
.chk:checked::after,.acx:checked::after,.ppx:checked::after,
.tvis:checked::after,.tcon:checked::after,#nt-sso:checked::after{
  content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);
}
.chk:focus-visible,.acx:focus-visible,.ppx:focus-visible,
.tvis:focus-visible,.tcon:focus-visible,#nt-sso:focus-visible{
  outline:none;box-shadow:0 0 0 3px rgba(13,126,165,.22);
}
.chk:disabled,.acx:disabled,.ppx:disabled{opacity:.45;cursor:not-allowed}

.tact{
  appearance:none;-webkit-appearance:none;margin:0;vertical-align:middle;
  width:42px;height:24px;border-radius:999px;background:#c3d1d7;
  cursor:pointer;position:relative;flex:0 0 auto;transition:background .16s ease;
}
.tact::after{
  content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(9,22,28,.28);transition:transform .16s ease;
}
.tact:checked{background:var(--den-sky)}
.tact:checked::after{transform:translateX(18px)}
.tact:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(13,126,165,.22)}

/* --- admin chrome ------------------------------------------------------- */
.tabs{display:flex;gap:6px;border-bottom:1px solid var(--border);margin-bottom:22px;flex-wrap:wrap}
.tab{
  font-family:var(--font-display);font-weight:700;font-size:14px;
  padding:10px 16px;border-radius:10px 10px 0 0;color:var(--text-2);cursor:pointer;
  border:1px solid transparent;border-bottom:none;margin-bottom:-1px;
}
.tab:hover{color:var(--den-sky)}
.tab.active{
  color:var(--den-sky-deep);background:#fff;
  border-color:var(--border);border-bottom:1px solid #fff;
}