/* ───────────────────────────────────────────────────────────────
   AllyUp™ Brand Kit v1.0 · by JenEd®
   Web App Theme · April 2026
   Reference: AllyUp_BrandKit.html · MotherBoard_Dashboard_v2.html
   This file is the single source of truth for the new brand palette.
   It loads LAST in index.html so it wins the cascade for legacy
   Bootstrap / Material / theme rules.
   ─────────────────────────────────────────────────────────────── */

:root {
  /* Backgrounds */
  --cream:          #EEE9DF;
  --cream-dark:     #E3DDD2;
  --cream-deeper:   #D4CEC3;
  --white:          #FFFFFF;

  /* Text */
  --charcoal:       #2C2A27;
  --charcoal-mid:   #4A4440;
  --charcoal-lt:    #6B6560;
  --muted:          #9C9690;

  /* Rules */
  --rule:           #DDD8CE;

  /* Brand — Orange (primary) */
  --brand-orange:   #C4562A;
  --brand-orange-lt:#F7EDE8;
  --brand-orange-dk:#8C3A1A;

  /* Semantic — Green / Amber / Red */
  --green:          #3A6E1A;
  --green-lt:       #EEF4E8;
  --green-dk:       #2A5010;
  --amber:          #B07820;
  --amber-lt:       #FAF0E0;
  --amber-dk:       #7A5210;
  --red:            #A02828;
  --red-lt:         #F7E8E8;
  --red-dk:         #701818;

  /* Typography */
  --serif:          'EB Garamond', Georgia, serif;
  --sans:           'DM Sans', system-ui, sans-serif;

  /* Override legacy theme tokens (Bootstrap / MaterialPro / interior-page) */
  --primary:        #C4562A;
  --primary-hover:  #8C3A1A;
  --primary-light:  #F7EDE8;
  --primary-light2: #F7EDE8;
  --primary-color:  #C4562A;
  --secondary-color:#8C3A1A;
  --ternary-color:  #C4562A;

  /* Bootstrap variable overrides */
  --bs-primary:     #C4562A;
  --bs-primary-rgb: 196, 86, 42;
  --bs-link-color:  #C4562A;
  --bs-link-hover-color: #8C3A1A;
  --bs-body-bg:     #EEE9DF;
  --bs-body-color:  #2C2A27;
  --bs-body-font-family: 'DM Sans', system-ui, 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 ───────────────────────────────────── */
.left-sidebar {
  background: var(--charcoal) !important;
  border-right: none !important;
  color: #FFFFFF !important;
}

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

.sidebar-nav {
  background: var(--charcoal) !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(--brand-orange) !important;
  color: #FFFFFF !important;
  border-color: var(--brand-orange) !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(--brand-orange) !important;
  color: #FFFFFF !important;
  border-radius: 6px !important;
}

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

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

.bottom-nav .bottom-link.active {
  color: var(--brand-orange) !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 CHARCOAL — 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(--charcoal) !important;          /* #2C2A27 */
  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(--brand-orange) !important;       /* solid #C4562A */
  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 ──────────────────────────────────────────────── */
.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(--brand-orange) !important;
  background-color: var(--brand-orange) !important;
  color: #FFFFFF !important;
  border: none !important;
  border-color: var(--brand-orange) !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(--brand-orange);
  --bs-btn-border-color: var(--brand-orange);
  --bs-btn-hover-bg: var(--brand-orange-dk);
  --bs-btn-hover-border-color: var(--brand-orange-dk);
  --bs-btn-active-bg: var(--brand-orange-dk);
  --bs-btn-active-border-color: var(--brand-orange-dk);
  --bs-btn-disabled-bg: var(--brand-orange);
  --bs-btn-disabled-border-color: var(--brand-orange);
}

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

.btn-sec,
.btn-ternary {
  background-color: var(--brand-orange-dk) !important;
  border-color: var(--brand-orange-dk) !important;
  color: #FFFFFF !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 orange */
  --mdc-theme-primary: #C4562A;
  --mdc-theme-on-primary: #FFFFFF;
  --mdc-theme-secondary: #3A6E1A;
  --mdc-theme-on-secondary: #FFFFFF;
  --mdc-theme-error: #A02828;

  /* Material 3 (mat-mdc) tokens */
  --mat-mdc-button-persistent-ripple-color: rgba(196, 86, 42, 0.2);
  --mdc-protected-button-container-color: #C4562A;
  --mdc-filled-button-container-color: #C4562A;
  --mdc-text-button-label-text-color: #C4562A;
  --mdc-outlined-button-label-text-color: #C4562A;
}

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

/* AllyUp wordmark utility — always white "Ally" + orange "Up" on charcoal */
.allyup-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 "AllyUp™" line — Ally + Up + ™ side-by-side */
.allyup-wordmark .wordmark-text {
  display: inline-flex;
  flex-direction: row;
  align-items: baseline;
  white-space: nowrap;           /* never wrap mid-word */
}

.allyup-wordmark .ally {
  display: inline !important;    /* belt-and-suspenders against block override */
  color: #FFFFFF !important;     /* always white — wordmark sits on charcoal */
  font-family: var(--serif);
  font-weight: 700;
}

.allyup-wordmark .up {
  display: inline !important;
  color: var(--brand-orange) !important;  /* #C4562A */
  font-family: var(--serif);
  font-weight: 700;
}

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

.allyup-wordmark .bylined {
  display: block;                /* "by JenEd®" stays on its own line below */
  font-size: 9px;
  color: rgba(255, 255, 255, 0.30);
  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(196, 86, 42, 0.25) !important;
}
* {
  scrollbar-color: rgba(196, 86, 42, 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(196, 86, 42, 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(196, 86, 42, 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(196, 86, 42, 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(196, 86, 42, 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 — brand-orange elevation */
.btn-primary:hover,
button.btn-primary:hover {
  box-shadow: 0 4px 14px rgba(196, 86, 42, 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(196, 86, 42, 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(196, 86, 42, 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(196, 86, 42, 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;
  }
}