/* ───────────────────────────────────────────────────────────────
   InSight™ Brand Kit v2.0 · JenEd Tech
   Web App Theme · August 2026
   Reference: InSight_Brand_Kit.pdf (V1 · August 2026)

   Palette direction: deep navy ground + a single magenta pop, on
   cream/warm paper. Navy carries structure and authority; magenta is
   reserved for the ™, focal CTAs, and the brand wordmark accent.

   This file is the single source of truth for the brand palette.
   It loads LAST in index.html so it wins the cascade for legacy
   Bootstrap / Material / theme rules.
   ─────────────────────────────────────────────────────────────── */

:root {
  /* ─ Brand core (per kit) ─ */
  --navy:           #12385A;   /* Primary. Ground, headers, authority. */
  --navy-deep:      #0F2C48;   /* Depth, dark panels, contrast. */
  --navy-2:         #1F5C9E;   /* Secondary blue, links, data. */
  --magenta:        #D1206C;   /* Accent. The ®/™, focal CTAs, the pop. */
  --pink-band:      #FBEAF1;   /* Soft magenta wash, callout bands. */

  /* Accent scale — magenta is the only "pop" in the system */
  --accent:         #D1206C;
  --accent-dk:      #A81655;
  --accent-lt:      #FBEAF1;

  /* Backgrounds — cream / warm paper */
  --cream:          #FAF8F4;
  --cream-dark:     #F6EEE1;
  --cream-deeper:   #E7DCC9;
  --white:          #FFFFFF;

  /* Text — cool ink so it sits with navy rather than fighting it */
  --charcoal:       #24303B;
  --charcoal-mid:   #4A5A68;
  --charcoal-lt:    #677480;
  --muted:          #657482;

  /* Rules — kept warm to match the paper ground */
  --rule:           #E4DCD0;

  /* Legacy brand tokens.
     `--brand-orange*` is retained ONLY as an alias so the ~150 existing
     references keep resolving. It now points at navy (structure), NOT at
     the accent. Use --navy / --accent in new code. */
  --brand-orange:   #12385A;
  --brand-orange-lt:#E8EEF5;
  --brand-orange-dk:#0F2C48;

  /* Semantic — Green / Amber / Red */
  --green:          #2F6B4F;
  --green-lt:       #E9F2ED;
  --green-dk:       #1F4C37;
  --amber:          #B07820;
  --amber-lt:       #FAF0E0;
  --amber-dk:       #7A5210;
  --red:            #A02828;
  --red-lt:         #F7E8E8;
  --red-dk:         #701818;
  --indigo:         #1F5C9E;
  --indigo-lt:      #E8EEF5;

  /* Role colors (v1.1) */
  --purple:         #6B4D8F;
  --purple-lt:      #F2EEF7;
  --purple-dk:      #4D3468;
  --teal:           #2C7A7A;
  --teal-lt:        #E8F4F4;
  --teal-dk:        #1E5252;

  /* Typography — both families are system fonts, no webfont required */
  --serif:          Georgia, Cambria, 'Times New Roman', serif;
  --sans:           'Gill Sans', 'Gill Sans MT', 'Trebuchet MS', Calibri, sans-serif;

  /* Override legacy theme tokens (Bootstrap / MaterialPro / interior-page) */
  --primary:        #12385A;
  --primary-hover:  #0F2C48;
  --primary-light:  #E8EEF5;
  --primary-light2: #E8EEF5;
  --primary-color:  #12385A;
  --secondary-color:#0F2C48;
  --ternary-color:  #D1206C;

  /* Bootstrap variable overrides */
  --bs-primary:     #12385A;
  --bs-primary-rgb: 18, 56, 90;
  --bs-link-color:  #1F5C9E;
  --bs-link-hover-color: #12385A;
  --bs-body-bg:     #FAF8F4;
  --bs-body-color:  #24303B;
  --bs-body-font-family: 'Gill Sans', 'Gill Sans MT', 'Trebuchet MS', Calibri, sans-serif;
}

/* ─── 2. Global body ──────────────────────────────────────────── */
html, body {
  background-color: var(--cream) !important;
  font-family: var(--sans);
  color: var(--charcoal);
  font-size: 13px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

body {
  margin: 0;
}

/* Page-level wrappers used by the dashboard shell — full-viewport cream so
   nothing shows through below the content. Only the OUTERMOST wrappers get
   min-height; nested .container-fluid elements would otherwise stack 100vh
   each and push content way down (eg. af-inbox nests .container-fluid). */
app-root,
.body-wrapper,
.page-wrapper,
#main-wrapper {
  background-color: var(--cream) !important;
  min-height: 100vh;
}

.container-fluid {
  background-color: var(--cream) !important;
}

/* The empty FooterComponent (template body is commented out) leaves a
   blank gray strip on some pages; hide it. The mobile bottom-nav stays
   hidden on desktop via Bootstrap's d-md-none. */
app-footer {
  display: none !important;
}

/* Replace any Poppins inheritance */
button, input, select, textarea, .form-control {
  font-family: var(--sans);
}

/* ─── 3. Sidebar / left-nav ───────────────────────────────────── */
/* NOTE: in the shipped sidebar layout these rules are overridden —
   insight.css sets `.left-sidebar.sidebar { background: #fff !important }`
   at higher specificity, and the rendered nav items use the .sb-* classes,
   not .sidebar-link. What follows is the dark-panel treatment for the
   legacy markup: Navy Deep ground, Navy 2 active state (the only value with
   enough separation from the panel), magenta left to the CTAs. */
.left-sidebar {
  background: var(--navy-deep) !important;
  border-right: none !important;
  color: #FFFFFF !important;
}

.left-sidebar .brand-logo {
  background: var(--navy-deep);
}

.sidebar-nav {
  background: var(--navy-deep) !important;
}

.sidebar-nav ul .sidebar-item > .sidebar-link {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 9px 16px;
  border-radius: 6px;
  margin: 1px 8px;
  color: rgba(255, 255, 255, 0.55) !important;
  transition: background 0.15s, color 0.15s;
}

.sidebar-nav ul .sidebar-item > .sidebar-link i,
.sidebar-nav ul .sidebar-item > .sidebar-link svg {
  color: rgba(255, 255, 255, 0.55) !important;
  fill: rgba(255, 255, 255, 0.55) !important;
}

.sidebar-nav ul .sidebar-item > .sidebar-link:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #FFFFFF !important;
}

.sidebar-nav ul .sidebar-item > .sidebar-link:hover i,
.sidebar-nav ul .sidebar-item > .sidebar-link:hover svg {
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
}

.sidebar-nav ul .sidebar-item > .sidebar-link.active,
.sidebar-nav ul .sidebar-item > .sidebar-link.active.btn-primary {
  background: var(--navy-2) !important;
  color: #FFFFFF !important;
  border-color: var(--navy-2) !important;
}

.sidebar-nav ul .sidebar-item > .sidebar-link.active i,
.sidebar-nav ul .sidebar-item > .sidebar-link.active svg {
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
}

/* Second-level menu */
.sidebar-nav ul .sidebar-item .first-level .sidebar-item > .sidebar-link {
  color: rgba(255, 255, 255, 0.45) !important;
}

.sidebar-nav ul .sidebar-item .first-level .sidebar-item > .sidebar-link:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #FFFFFF !important;
  border-radius: 6px !important;
}

.sidebar-nav ul .sidebar-item .first-level .sidebar-item > .sidebar-link.active,
.sidebar-nav ul .sidebar-item .first-level .sidebar-item > .sidebar-link.active.btn-secondary {
  background: var(--navy-2) !important;
  color: #FFFFFF !important;
  border-radius: 6px !important;
}

/* Mobile bottom nav */
.bottom-nav-wrapper {
  background: var(--navy-deep) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.bottom-nav .bottom-link {
  color: rgba(255, 255, 255, 0.55) !important;
}

/* Text-only indicator on a dark panel — full white, not a mid-tone */
.bottom-nav .bottom-link.active {
  color: #FFFFFF !important;
}

/* ─── 4. Top header / toolbar ─────────────────────────────────── */
/* Sidebar-layout header (and any other ".app-header" without .topbar-header) is white */
.app-header:not(.topbar-header),
.dashboard-header,
mat-toolbar,
.app-header:not(.topbar-header) .navbar.navbar-light {
  background: var(--white) !important;
  border-bottom: 1px solid var(--rule) !important;
  color: var(--charcoal) !important;
  box-shadow: none !important;
}

/* Topbar-layout header is NAVY DEEP — also override the inner Bootstrap
   .navbar.navbar-light that would otherwise paint a white strip on top. */
.app-header.topbar-header,
.app-header.topbar-header .navbar,
.app-header.topbar-header .navbar.navbar-light,
.app-header.topbar-header .navbar.navbar-expand-lg {
  background: var(--navy-deep) !important;
  border-bottom: none !important;
  box-shadow: none !important;
  color: #FFFFFF !important;
}

.app-header .page-title,
.page-title {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--charcoal);
  letter-spacing: -0.01em;
}

/* Page title color flips to white when sitting in the charcoal topbar */
.app-header.topbar-header .page-title {
  color: #FFFFFF;
}

/* Topbar nav links — charcoal-bg hover */
.tb-link:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #FFFFFF !important;
}
.tb-link:hover i,
.tb-link:hover mat-icon,
.tb-link:hover svg {
  color: #FFFFFF !important;
}

.tb-link.active,
.tb-link.active:hover {
  background: var(--navy-2) !important;             /* separation from navy-deep bar */
  color: #FFFFFF !important;
  box-shadow: none !important;
  border-radius: 6px !important;
}
.tb-link.active i,
.tb-link.active mat-icon,
.tb-link.active svg,
.tb-link.active span {
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
}

/* ─── 5. Cards ────────────────────────────────────────────────── */
.card,
mat-card,
.mat-mdc-card {
  background: var(--white) !important;
  border: 0.5px solid var(--rule) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

.card .card-label,
.card .card-kicker,
.card-label,
.card-kicker {
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-orange);
  font-weight: 600;
  margin-bottom: 3px;
}

.card .card-title,
mat-card-title,
.mat-mdc-card-title {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  color: var(--charcoal);
  line-height: 1.3;
}

.card.card-accent {
  border-top: 3px solid var(--brand-orange) !important;
  border-radius: 0 0 10px 10px !important;
}

/* ─── 6. Metric / stat cards ──────────────────────────────────── */
.metric-card,
.stat-card {
  background: var(--white);
  border: 0.5px solid var(--rule);
  border-radius: 10px;
  padding: 14px;
}

.metric-card .metric-label,
.stat-card .metric-label,
.metric-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin-bottom: 5px;
}

.metric-card .metric-value,
.stat-card .metric-value,
.metric-value {
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--charcoal);
  margin-bottom: 3px;
}

.metric-card .metric-sub,
.stat-card .metric-sub,
.metric-sub {
  font-size: 10px;
  color: var(--muted);
}

/* ─── 7. Buttons ──────────────────────────────────────────────── */
/* The primary button IS the focal CTA, so it carries the magenta pop.
   Everything structural around it stays navy. */
.btn-primary,
button.btn-primary,
.btn.btn-primary,
button[color="primary"],
.mat-mdc-raised-button.mat-primary,
.mat-mdc-flat-button.mat-primary,
.mat-mdc-unelevated-button.mat-primary {
  background: var(--accent) !important;
  background-color: var(--accent) !important;
  color: #FFFFFF !important;
  border: none !important;
  border-color: var(--accent) !important;
  border-radius: 4px !important;
  font-family: var(--sans) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  --bs-btn-bg: var(--accent);
  --bs-btn-border-color: var(--accent);
  --bs-btn-hover-bg: var(--accent-dk);
  --bs-btn-hover-border-color: var(--accent-dk);
  --bs-btn-active-bg: var(--accent-dk);
  --bs-btn-active-border-color: var(--accent-dk);
  --bs-btn-disabled-bg: var(--accent);
  --bs-btn-disabled-border-color: var(--accent);
}

.btn-primary:hover,
button.btn-primary:hover,
.btn.btn-primary:hover,
button[color="primary"]:hover {
  background: var(--accent-dk) !important;
  background-color: var(--accent-dk) !important;
  border-color: var(--accent-dk) !important;
}

/* Solid non-focal actions — navy, so magenta stays scarce */
.btn-sec,
.btn-ternary {
  background-color: var(--navy) !important;
  border-color: var(--navy) !important;
  color: #FFFFFF !important;
}

.btn-sec:hover,
.btn-ternary:hover {
  background-color: var(--navy-deep) !important;
  border-color: var(--navy-deep) !important;
}

.btn-secondary,
.btn-outline,
.btn-outline-primary {
  background: transparent !important;
  color: var(--charcoal-mid) !important;
  border: 0.5px solid var(--rule) !important;
  border-radius: 4px !important;
  font-size: 12px;
  font-weight: 500;
}

.btn-secondary:hover,
.btn-outline:hover,
.btn-outline-primary:hover {
  background: var(--cream) !important;
  color: var(--charcoal) !important;
  border-color: var(--charcoal-lt) !important;
}

/* Material Icon button + FAB tints */
.mat-mdc-icon-button.mat-primary,
.mat-mdc-mini-fab.mat-primary,
.mat-mdc-fab.mat-primary {
  --mdc-icon-button-icon-color: var(--brand-orange);
  color: var(--brand-orange) !important;
}

/* ─── 8. Badges / pills ───────────────────────────────────────── */
.badge-critical, .status-critical,
.badge.bg-danger, .badge.badge-danger {
  background: var(--red-lt) !important;
  color: var(--red) !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 2px 8px !important;
  border-radius: 3px !important;
}

.badge-watch, .status-warning,
.badge.bg-warning, .badge.badge-warning {
  background: var(--amber-lt) !important;
  color: var(--amber) !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 2px 8px !important;
  border-radius: 3px !important;
}

.badge-ok, .status-success, .status-scheduled,
.badge.bg-success, .badge.badge-success {
  background: var(--green-lt) !important;
  color: var(--green) !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 2px 8px !important;
  border-radius: 3px !important;
}

.badge-info, .status-active,
.badge.bg-info, .badge.badge-info,
.badge.bg-primary, .badge.badge-primary {
  background: var(--brand-orange-lt) !important;
  color: var(--brand-orange-dk) !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 2px 8px !important;
  border-radius: 3px !important;
}

/* Material chips */
.mat-mdc-chip.mat-primary,
.mat-mdc-standard-chip.mdc-evolution-chip--selected {
  --mdc-chip-elevated-container-color: var(--brand-orange-lt);
  --mdc-chip-label-text-color: var(--brand-orange-dk);
  background: var(--brand-orange-lt) !important;
  color: var(--brand-orange-dk) !important;
}

/* ─── 9. Tables ───────────────────────────────────────────────── */
table.table,
.mat-table,
.mat-mdc-table {
  background: var(--white);
  border-collapse: collapse;
}

table.table > thead > tr > th,
.mat-mdc-table .mat-mdc-header-cell,
.mat-table .mat-header-cell {
  font-size: 9px !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted) !important;
  font-weight: 600;
  border-bottom: 1px solid var(--rule) !important;
  background: transparent !important;
}

table.table > tbody > tr > td,
.mat-mdc-table .mat-mdc-cell,
.mat-table .mat-cell {
  font-size: 12px !important;
  color: var(--charcoal) !important;
  border-bottom: 0.5px solid var(--rule) !important;
}

table.table > tbody > tr:hover > td {
  background: var(--cream) !important;
}

/* ─── 10. Form inputs ─────────────────────────────────────────── */
.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
textarea,
select {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--charcoal);
  background: var(--white);
  border: 0.5px solid var(--rule);
  border-radius: 4px;
}

.form-control:focus,
.form-select:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: var(--brand-orange) !important;
  outline: 2px solid var(--brand-orange) !important;
  outline-offset: 1px !important;
  box-shadow: none !important;
}

/* Angular Material outlined form field */
.mat-mdc-form-field {
  --mdc-outlined-text-field-outline-color: var(--rule) !important;
  --mdc-outlined-text-field-focus-outline-color: var(--brand-orange) !important;
  --mdc-outlined-text-field-caret-color: var(--brand-orange) !important;
  --mdc-outlined-text-field-focus-label-text-color: var(--brand-orange) !important;
  --mdc-filled-text-field-active-indicator-color: var(--rule) !important;
  --mdc-filled-text-field-focus-active-indicator-color: var(--brand-orange) !important;
  --mdc-filled-text-field-caret-color: var(--brand-orange) !important;
  --mdc-filled-text-field-focus-label-text-color: var(--brand-orange) !important;
  --mat-form-field-focus-select-arrow-color: var(--brand-orange) !important;
}

.mat-mdc-form-field.mat-focused .mdc-notched-outline > * {
  border-color: var(--brand-orange) !important;
}

.mat-mdc-option.mat-mdc-selected,
.mat-option.mat-selected {
  color: var(--brand-orange) !important;
}

.mat-mdc-checkbox.mat-mdc-checkbox-checked .mdc-checkbox__background,
.mat-mdc-radio-button.mat-mdc-radio-checked .mdc-radio__background .mdc-radio__outer-circle {
  border-color: var(--brand-orange) !important;
  background-color: var(--brand-orange) !important;
}

.mat-mdc-radio-button.mat-mdc-radio-checked .mdc-radio__background .mdc-radio__inner-circle {
  border-color: var(--brand-orange) !important;
  background-color: var(--brand-orange) !important;
}

.mat-mdc-slide-toggle.mat-mdc-slide-toggle-checked .mdc-switch__track {
  background-color: var(--brand-orange-lt) !important;
}

/* ─── 11. Section labels & titles ─────────────────────────────── */
.section-label {
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brand-orange);
  font-weight: 600;
  margin-bottom: 4px;
}

.section-title {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--charcoal);
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
}

/* ─── 12. Dividers ────────────────────────────────────────────── */
hr,
.divider,
mat-divider,
.mat-divider {
  border: none !important;
  border-top: 0.5px solid var(--rule) !important;
  background: transparent !important;
  margin: 10px 0;
}

/* ─── 13. Material theme global overrides (no SCSS — runtime CSS vars) ── */
:root {
  /* MDC primary palette mapped to brand navy */
  --mdc-theme-primary: #12385A;
  --mdc-theme-on-primary: #FFFFFF;
  --mdc-theme-secondary: #D1206C;
  --mdc-theme-on-secondary: #FFFFFF;
  --mdc-theme-error: #A02828;

  /* Material 3 (mat-mdc) tokens.
     Filled/protected buttons are focal CTAs → magenta.
     Text/outlined buttons are low-emphasis → navy. */
  --mat-mdc-button-persistent-ripple-color: rgba(18, 56, 90, 0.2);
  --mdc-protected-button-container-color: #D1206C;
  --mdc-filled-button-container-color: #D1206C;
  --mdc-text-button-label-text-color: #12385A;
  --mdc-outlined-button-label-text-color: #12385A;
}

/* Material progress / spinner accents */
.mat-mdc-progress-spinner,
.mat-mdc-progress-bar {
  --mdc-circular-progress-active-indicator-color: var(--brand-orange);
  --mdc-linear-progress-active-indicator-color: var(--brand-orange);
}

/* Material tabs */
.mat-mdc-tab-group,
.mat-mdc-tab-nav-bar {
  --mat-tab-header-active-label-text-color: var(--brand-orange);
  --mat-tab-header-active-ripple-color: var(--brand-orange);
  --mat-tab-header-inactive-ripple-color: var(--cream-dark);
  --mat-tab-header-active-focus-label-text-color: var(--brand-orange);
  --mat-tab-header-active-hover-label-text-color: var(--brand-orange);
  --mat-tab-header-active-focus-indicator-color: var(--brand-orange);
  --mat-tab-header-active-hover-indicator-color: var(--brand-orange);
}

.mdc-tab--active .mdc-tab-indicator__content--underline {
  border-color: var(--brand-orange) !important;
}

/* ─── 14. Dialog / Modal ──────────────────────────────────────── */
mat-dialog-container,
.mat-mdc-dialog-container,
.modal-content,
.modal-container {
  background: var(--white) !important;
  border-radius: 12px !important;
  border: 0.5px solid var(--rule) !important;
  box-shadow: 0 8px 32px rgba(44, 42, 39, 0.12) !important;
}

mat-dialog-title,
.mat-mdc-dialog-title,
.modal-title {
  font-family: var(--serif) !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  color: var(--charcoal) !important;
  letter-spacing: -0.01em;
}

mat-dialog-actions,
.mat-mdc-dialog-actions,
.modal-actions,
.modal-footer {
  border-top: 0.5px solid var(--rule) !important;
}

.modal-header {
  border-bottom: 0.5px solid var(--rule) !important;
}

/* Toast colors mapped to semantic palette */
.toast-success { background-color: var(--green) !important; }
.toast-error   { background-color: var(--red) !important; }
.toast-info    { background-color: var(--brand-orange) !important; }
.toast-warning { background-color: var(--amber) !important; }

/* ─── 16. Typography ──────────────────────────────────────────── */
h1, .h1 {
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 700;
  color: var(--charcoal);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

h2, .h2 {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 600;
  color: var(--charcoal);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

h3, .h3 {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--charcoal);
  line-height: 1.3;
}

h4, h5, h6 {
  font-family: var(--serif);
  color: var(--charcoal);
}

/* FIX 5 — Page / module / section / dashboard / card titles get Georgia.
   Many pages use a styled <h5 class="page-heading"> instead of semantic
   <h1>/<h2>, so we explicitly target the brand-kit title classes. */
.page-heading,
.page-title,
.module-title,
.section-title,
.dashboard-title,
.header-title,
.welcome-text,
.hero-title,
mat-card-title,
.mat-mdc-card-title,
.card-title,
.modal-title,
.dialog-title,
.mat-mdc-dialog-title {
  font-family: var(--serif) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
  color: var(--charcoal);
  line-height: 1.2;
}

/* Page-level title (the large title on Students/Teachers/Documents/etc) */
.page-heading,
.page-title,
.module-title,
.dashboard-title {
  font-size: 22px;
  font-weight: 600 !important;
}

/* Card/section titles */
.card-title,
mat-card-title,
.mat-mdc-card-title,
.section-title {
  font-size: 17px;
}

/* Dashboard hero / Welcome banner — also serif */
.welcome-text,
.welcome-back,
.hero-title,
.sb-hero-title {
  font-family: var(--serif) !important;
  font-size: 28px;
  font-weight: 600 !important;
  color: var(--charcoal);
  letter-spacing: -0.01em;
}

p, .body-text {
  font-family: var(--sans);
  color: var(--charcoal);
  line-height: 1.6;
}

.small, .caption {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.5;
}

.label-caps {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}

/* InSight™ wordmark utility — "In" + magenta "Sight" + magenta ™.
   Lives on the dark navy panel, so "In" renders white there. The
   .on-light modifier flips it to navy for cream/white grounds. */
.insight-wordmark {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.02em;
  display: flex;
  flex-direction: column;        /* keeps "by JenEd®" below on its own line */
  line-height: 1;
}

/* The "InSight™" line — In + Sight + ™ side-by-side */
.insight-wordmark .wordmark-text {
  display: inline-flex;
  flex-direction: row;
  align-items: baseline;
  white-space: nowrap;           /* never wrap mid-word */
}

/* Default = the dark-ground lockup. This is what the kit's applied example
   shows on the navy card: the whole wordmark in white. Magenta is NOT used
   for "Sight" here — magenta on navy-deep is only 2.8:1, well under AA. */
.insight-wordmark .wm-in {
  display: inline !important;    /* belt-and-suspenders against block override */
  color: #FFFFFF !important;
  font-family: var(--serif);
  font-weight: 700;
}

.insight-wordmark .wm-sight {
  display: inline !important;
  color: #FFFFFF !important;
  font-family: var(--serif);
  font-weight: 700;
}

.insight-wordmark sup,
.insight-wordmark .tm {
  display: inline !important;
  font-size: 0.5em;              /* ~12px when parent is 24px */
  color: #FFFFFF !important;
  vertical-align: super;
  margin-left: 1px;
  font-weight: 700;
}

/* Light-ground lockup — the split-colour version from the kit's cover:
   navy "In", magenta "Sight", magenta ™. Both clear AA on cream/white. */
.insight-wordmark.on-light .wm-in    { color: var(--navy) !important; }
.insight-wordmark.on-light .wm-sight { color: var(--magenta) !important; }
.insight-wordmark.on-light sup,
.insight-wordmark.on-light .tm       { color: var(--magenta) !important; }
.insight-wordmark.on-light .bylined  { color: var(--muted); }

.insight-wordmark .bylined {
  display: block;                /* "by JenEd®" stays on its own line below */
  font-size: 9px;
  color: rgba(255, 255, 255, 0.55);   /* 5.34:1 on navy-deep; 0.30 was 2.59:1 */
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 2px;
  font-family: var(--sans);
  font-weight: 400;
}

/* Footer wordmark stays default (handled by .page-footer rules below) */

/* ─── 17. Page footer ─────────────────────────────────────────── */
.page-footer {
  background: var(--charcoal);
  padding: 16px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: rgba(255, 255, 255, 0.55);
}

.page-footer .footer-wordmark {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 700;
}
.page-footer .footer-wordmark .ally { color: var(--white); }
.page-footer .footer-wordmark .up   { color: var(--brand-orange); }

.page-footer .footer-note {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ─── Layout / spacing ────────────────────────────────────────── */
.page-content {
  padding: 28px 32px;
}

/* ─── Misc legacy overrides ───────────────────────────────────── */
/* Defeat MaterialPro template's blue-tinted card border */
.card {
  border: 0.5px solid var(--rule) !important;
  box-shadow: none !important;
}

/* Toast-info shouldn't be raw "blue" anymore */
.toast-info { background-color: var(--brand-orange) !important; }

/* Bootstrap link tints */
a { color: var(--brand-orange); }
a:hover { color: var(--brand-orange-dk); }

/* Active-route helpers */
.active.btn-primary { background: var(--brand-orange) !important; }

/* Scrollbar tint */
::-webkit-scrollbar-thumb {
  background-color: rgba(18, 56, 90, 0.25) !important;
}
* {
  scrollbar-color: rgba(18, 56, 90, 0.25) transparent !important;
}

/* ═══════════════════════════════════════════════════════════════
   ELEVATION / POLISH PASS — May 2026
   Tasteful refinements on top of the brand palette.
   No new colors — just rhythm, motion, and detail.
   ═══════════════════════════════════════════════════════════════ */

/* ── Branded text selection ─────────────────────────────────── */
::selection {
  background: rgba(18, 56, 90, 0.18);
  color: var(--charcoal);
}

/* ── Slimmer scrollbar ──────────────────────────────────────── */
::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
}
::-webkit-scrollbar-thumb {
  border-radius: 999px !important;
  border: 2px solid transparent !important;
  background-clip: padding-box !important;
  transition: background-color 0.15s ease;
}
::-webkit-scrollbar-thumb:hover {
  background-color: rgba(18, 56, 90, 0.45) !important;
}
::-webkit-scrollbar-track {
  background: transparent !important;
}

/* ── Global keyboard focus — soft glow over hard outline ────── */
*:focus-visible {
  outline: 2px solid var(--brand-orange) !important;
  outline-offset: 2px !important;
  border-radius: 4px;
}
button:focus-visible,
a:focus-visible,
.btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(18, 56, 90, 0.18) !important;
  outline: none !important;
}
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.form-control:focus,
.form-select:focus {
  outline: none !important;
  border-color: var(--brand-orange) !important;
  box-shadow: 0 0 0 3px rgba(18, 56, 90, 0.14) !important;
}

/* ── Page heading rhythm ────────────────────────────────────── */
.page-heading {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--serif) !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
  color: var(--charcoal);
  line-height: 1.25;
  margin: 0;
}
.page-heading > i,
.page-heading > .fa,
.page-heading > [class*="fa-"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--brand-orange-lt);
  color: var(--brand-orange);
  font-size: 14px;
  flex-shrink: 0;
}
/* Inline info-button next to page-heading should not get the icon-pill treatment */
.page-heading .info-btn,
.page-heading button {
  width: auto;
  height: auto;
  background: transparent;
}

/* ── Breadcrumb refinement ──────────────────────────────────── */
.breadcrumb {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.breadcrumb .breadcrumb-item {
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.breadcrumb .breadcrumb-item a {
  color: var(--muted);
  text-decoration: none;
  transition: color 0.15s ease;
}
.breadcrumb .breadcrumb-item a:hover {
  color: var(--brand-orange);
}
.breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  content: "›";
  color: var(--muted);
  margin: 0 4px;
  font-size: 12px;
  opacity: 0.6;
}
.breadcrumb .breadcrumb-item.active,
.breadcrumb .breadcrumb-item.active a {
  color: var(--charcoal);
  font-weight: 500;
}

/* ── Buttons — consistent height + tactile feedback ─────────── */
.btn,
button.btn {
  height: 36px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  border-radius: 6px;
  border: 0.5px solid transparent;
  white-space: nowrap;
  transition: background 0.18s ease, border-color 0.18s ease,
              color 0.18s ease, transform 0.12s ease,
              box-shadow 0.18s ease;
  cursor: pointer;
}
.btn:active,
button.btn:active {
  transform: translateY(1px);
}
.btn:disabled,
button.btn:disabled,
.btn.disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}
/* Reset tiny buttons that explicitly opt-out */
.btn.btn-sm { height: 28px; padding: 0 10px; font-size: 11px; }
.btn.btn-lg { height: 44px; padding: 0 22px; font-size: 13px; }

/* Primary lift on hover — magenta elevation, matches the CTA fill */
.btn-primary:hover,
button.btn-primary:hover {
  box-shadow: 0 4px 14px rgba(209, 32, 108, 0.22);
}

/* Outline buttons — refined */
.btn-outline,
.btn-outline-secondary,
.btn-outline-primary {
  background: transparent !important;
  color: var(--charcoal-mid) !important;
  border: 0.5px solid var(--rule) !important;
}
.btn-outline:hover,
.btn-outline-secondary:hover,
.btn-outline-primary:hover {
  background: var(--brand-orange-lt) !important;
  color: var(--brand-orange-dk) !important;
  border-color: rgba(18, 56, 90, 0.4) !important;
}

/* Icon-only round buttons */
.btn-icon,
.action-button {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 6px;
}

/* ── Cards — subtle hover lift (opt-in) ─────────────────────── */
.card,
mat-card,
.mat-mdc-card {
  transition: transform 0.18s ease, box-shadow 0.18s ease,
              border-color 0.18s ease;
}
.card.card-hover:hover,
.card.is-hover:hover,
.hovered {
  transform: translateY(-1px);
  box-shadow: 0 4px 18px rgba(44, 42, 39, 0.06) !important;
  border-color: rgba(18, 56, 90, 0.18) !important;
}

/* Card body padding rhythm */
.card > .card-body { padding: 18px 20px; }
.card > .card-header {
  background: transparent !important;
  border-bottom: 0.5px solid var(--rule) !important;
  padding: 14px 20px !important;
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 600;
  color: var(--charcoal);
}
.card > .card-footer {
  background: transparent !important;
  border-top: 0.5px solid var(--rule) !important;
  padding: 12px 20px !important;
}

/* ── Form controls — consistent height + label hierarchy ────── */
.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="time"],
select {
  height: 38px;
  padding: 0 12px;
  font-size: 13px;
  border-radius: 6px;
  border: 0.5px solid var(--rule);
  background: var(--white);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
textarea.form-control,
textarea {
  height: auto;
  min-height: 88px;
  padding: 10px 12px;
  line-height: 1.5;
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--muted);
  opacity: 1;
}

.form-label,
label.form-label,
label.col-form-label {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 6px;
}

/* Material outlined form-field — softer focus */
.mat-mdc-form-field.mat-focused .mdc-notched-outline > * {
  border-width: 1px !important;
}
.mat-mdc-form-field {
  --mdc-outlined-text-field-focus-outline-width: 1px !important;
}

/* ── Tables — refined cells + zebra hover ───────────────────── */
table.table,
.mat-table,
.mat-mdc-table {
  border: 0.5px solid var(--rule);
  border-radius: 8px;
  overflow: hidden;
  background: var(--white);
}
table.table > thead > tr > th,
.mat-mdc-table .mat-mdc-header-cell,
.mat-table .mat-header-cell {
  padding: 10px 14px !important;
  background: var(--cream) !important;
  position: sticky;
  top: 0;
  z-index: 1;
}
table.table > tbody > tr > td,
.mat-mdc-table .mat-mdc-cell,
.mat-table .mat-cell {
  padding: 12px 14px !important;
  vertical-align: middle;
}
table.table > tbody > tr {
  transition: background 0.12s ease;
}
table.table > tbody > tr:hover > td {
  background: rgba(18, 56, 90, 0.04) !important;
}

/* ── Badges — consistent height + softer borders ────────────── */
.badge,
.badge-critical, .status-critical,
.badge-watch, .status-warning,
.badge-ok, .status-success, .status-scheduled,
.badge-info, .status-active {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  padding: 0 8px !important;
  font-size: 9px !important;
  letter-spacing: 0.06em;
  border-radius: 4px !important;
  border: 0.5px solid transparent;
  line-height: 1;
}

/* Pill variant */
.badge.rounded-pill,
.pill {
  border-radius: 999px !important;
  height: 22px;
  padding: 0 10px !important;
}

/* ── Modal / Dialog — softer elevation ──────────────────────── */
.modal-content,
mat-dialog-container,
.mat-mdc-dialog-container {
  box-shadow:
    0 1px 2px rgba(44, 42, 39, 0.06),
    0 12px 36px rgba(44, 42, 39, 0.18) !important;
}
.modal-header {
  padding: 16px 22px !important;
  border-bottom: 0.5px solid var(--rule) !important;
}
.modal-body { padding: 20px 22px !important; }
.modal-footer {
  padding: 14px 22px !important;
  gap: 8px;
}
.modal-title,
.mat-mdc-dialog-title,
mat-dialog-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px !important;
  letter-spacing: -0.01em;
}
.modal .btn-close,
.modal-content .btn-close {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  opacity: 0.55;
  transition: background 0.15s ease, opacity 0.15s ease;
}
.modal .btn-close:hover,
.modal-content .btn-close:hover {
  opacity: 1;
  background: var(--cream);
}

/* Backdrop dim */
.modal-backdrop.show,
.cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
  background: rgba(44, 42, 39, 0.45) !important;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* ── Tabs (Bootstrap nav-underline + Material) ──────────────── */
.nav-underline .nav-link {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--muted);
  padding: 10px 14px;
  border: none;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.nav-underline .nav-link:hover {
  color: var(--charcoal-mid);
}
.nav-underline .nav-link.active {
  color: var(--brand-orange) !important;
  border-bottom-color: var(--brand-orange) !important;
  background: transparent !important;
}

/* ── Skeleton loaders — cream tone instead of cool grey ─────── */
ngx-skeleton-loader .loader,
.skeleton-line,
.placeholder-glow .placeholder {
  background-color: var(--cream-dark) !important;
  background-image: linear-gradient(
    90deg,
    var(--cream-dark) 0%,
    var(--cream) 50%,
    var(--cream-dark) 100%
  ) !important;
}

/* ── Empty state utility ───────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--muted);
}
.empty-state .empty-state__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--cream);
  color: var(--muted);
  font-size: 22px;
  margin-bottom: 14px;
}
.empty-state .empty-state__title {
  font-family: var(--serif);
  font-size: 16px;
  color: var(--charcoal);
  margin-bottom: 4px;
}
.empty-state .empty-state__sub {
  font-size: 12px;
  color: var(--muted);
}

/* ── Tooltip refinement (Bootstrap + Material) ─────────────── */
.tooltip-inner,
.mat-mdc-tooltip,
.mdc-tooltip {
  background: var(--charcoal) !important;
  color: #FFFFFF !important;
  font-size: 11px !important;
  font-family: var(--sans) !important;
  letter-spacing: 0.02em;
  padding: 6px 10px !important;
  border-radius: 6px !important;
  box-shadow: 0 4px 12px rgba(44, 42, 39, 0.18) !important;
}

/* ── Avatar / chip refinement ──────────────────────────────── */
.avatar,
.user-avatar,
.tb-avatar-img,
.tb-avatar-initials,
img.rounded-circle {
  border: 1.5px solid var(--white);
  box-shadow: 0 0 0 1px var(--rule);
}

/* ── Subtle motion on links ────────────────────────────────── */
a {
  transition: color 0.15s ease;
}

/* ── Section dividers used between dashboard rows ──────────── */
.section-divider {
  height: 0.5px;
  background: var(--rule);
  margin: 24px 0;
}

/* ── Reduced motion — respect user preference ──────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   DESIGN SYSTEM v1.1 — Topbar + Modifier Classes
   ═══════════════════════════════════════════════════════════════ */

/* ── Topbar (STEP 6) ────────────────────────────────────── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  height: 56px;
}

.topbar-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── KPI unit (STEP 7) ─────────────────────────────────── */
.kpi-unit {
  font-size: 16px;
  font-weight: 400;
  color: var(--muted);
  margin-left: 2px;
}

/* ── Card body modifiers (STEP 7) ──────────────────────── */
.card-body--flush    { padding: 0 !important; }
.card-body--timeline { padding: 16px 8px 16px 24px !important; }

/* ── Insight modifier (STEP 7) ─────────────────────────── */
.insight--hero {
  background: var(--white);
  border-left-color: var(--brand-orange);
  padding: 24px 28px;
  margin-bottom: 24px;
}

/* ── Callout modifiers (STEP 7) ────────────────────────── */
.callout--brand {
  background: var(--brand-orange-lt);
  border-color: var(--brand-orange);
  border-style: solid;
  border-width: 1px;
}
.callout--centered {
  text-align: center;
  padding: 28px 24px;
  margin-top: 24px;
}

/* ── Ledger row modifier (STEP 7) ──────────────────────── */
.ledger-row--icon {
  grid-template-columns: auto 1fr auto;
}

/* ── dt-stat value modifier (STEP 7) ───────────────────── */
.v--alert {
  color: var(--red);
}