:root {
  /* TDX (tdx.media / Think Digital X) brand palette */
  --brand-gold:     #FCBB07;  /* Brand Amber   — CTAs, financial emphasis */
  --brand-cyan:     #43E0CF;  /* Brand Teal    — links, active states, data focus */
  --brand-blue:     #612D9C;  /* Brand Purple  — secondary brand accent */
  --brand-charcoal: #0d0d0d;  /* Near-black     — dashboard background */

  /* Signature spectrum — used sparingly for accents (gradient bars, stat borders) */
  --spec-amber:     #FCBB07;
  --spec-orange:    #F37116;
  --spec-red:       #EA2726;
  --spec-pink:      #D32268;
  --spec-magenta:   #BC25B2;
  --spec-purple:    #9528C1;
  --spec-deep:      #612D9C;
  --spec-teal:      #43E0CF;
  --spec-green:     #8ADD80;
  --spec-lime:      #D2D932;

  /* UI tokens */
  --md-primary:     #121212;  /* sidebar */
  --md-primary-2:   #0d0d0d;  /* deeper near-black for inset areas */
  --md-accent:      #43E0CF;  /* Brand Teal – links, active states */
  --md-gold:        #FCBB07;  /* Brand Amber – buttons, CTAs */
  --md-bg:          #0d0d0d;  /* page background (near-black) */
  --md-surface:     #161616;  /* card / panel background */
  --md-surface-2:   #1f1f1f;  /* slightly elevated surface */
  --md-on-surface:  #ededed;  /* primary text on dark */
  --muted:          #9a9a9a;  /* secondary text */
  --danger:         #ef5350;
  --warn:           #ffa726;
  --line:           #2a2a2a;  /* borders on near-black */
  --panel-soft:     #1a1a1a;  /* subtle panel fill */
  --header-height:  60px;     /* shared height for logo strip and page header */
}

/* ── Typography ─────────────────────────────────────── */

body,
.sidenav,
.btn, .btn-large, .btn-small,
input, textarea, select, button,
h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* ── Global dark base ──────────────────────────────── */

body {
  background: var(--md-bg);
  color: var(--md-on-surface);
}

/* ── Sidenav overrides ─────────────────────────────── */

.sidenav {
  background: var(--md-primary) !important;
  width: 260px !important;
}

.sidenav-brand-li {
  background: var(--md-primary);
  height: var(--header-height);
  display: flex;
  align-items: center;
}

.sidenav-brand {
  padding: 0 20px;
}

.sidenav-brand a {
  display: block;
  text-decoration: none;
  line-height: 0;
}

.sidenav-brand img {
  width: 150px;
  height: auto;
}

.sidenav li > a {
  color: #cfcfcf !important;
  font-weight: 500;
}

.sidenav li > a i.material-icons {
  color: #8a8a8a !important;
}

.sidenav li > a:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
}

.sidenav li.active > a {
  background: rgba(67, 224, 207, 0.16) !important;
  color: #fff !important;
  border-left: 3px solid var(--md-accent);
  font-weight: 700;
}

.sidenav li.active > a i.material-icons {
  color: var(--md-accent) !important;
}

.sidenav .subheader {
  color: var(--md-accent) !important;
  opacity: 0.85;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  padding: 16px 16px 4px !important;
  height: auto !important;
  line-height: 1 !important;
  pointer-events: none;
  cursor: default;
}

.sidenav-footer-li {
  position: absolute;
  bottom: 0;
  width: 100%;
}

.sidenav-footer {
  background: var(--md-primary-2);
  padding: 12px 16px;
  border-top: 1px solid var(--line);
}

.sidenav-footer p {
  margin: 0 0 8px;
  color: #b8b8b8;
  font-size: 0.88rem;
}

/* Mobile trigger button */
.mobile-trigger {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 999;
  color: var(--md-on-surface) !important;
  background: var(--md-surface);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

/* ── Main content area ─────────────────────────────── */

.main-content {
  margin-left: 260px;
  min-height: 100vh;
  background: var(--md-bg);
  padding-top: var(--header-height);
}

@media (max-width: 992px) {
  .main-content {
    margin-left: 0;
    padding-top: calc(50px + var(--header-height));
  }
}

/* ── Page header ───────────────────────────────────── */

.page-header {
  background: var(--md-primary);
  color: #fff;
  padding: 12px 24px;
  min-height: var(--header-height);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  position: fixed;
  top: 0;
  left: 260px;
  right: 0;
  z-index: 100;
  box-sizing: border-box;
  border-bottom: 1px solid var(--line);
}

/* Signature tdx.media spectrum accent bar along the header's bottom edge */
.page-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--spec-amber),
    var(--spec-orange),
    var(--spec-red),
    var(--spec-pink),
    var(--spec-purple),
    var(--spec-deep),
    var(--spec-teal),
    var(--spec-green)
  );
}

@media (max-width: 992px) {
  .page-header {
    left: 0;
    top: 50px;
  }
}

.page-header h5 {
  margin: 0;
  color: #fff;
  font-weight: 700;
}

.page-header p {
  margin: 4px 0 0;
  color: #b8b8b8;
  font-size: 0.9rem;
}

.page-header-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.page-header-actions a {
  color: #111;
  text-decoration: none;
  background: var(--brand-cyan);
  padding: 6px 14px;
  border-radius: 2px;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transition: background 0.2s;
}

.page-header-actions a:hover {
  background: #6cebdd;
  color: #111;
}

.content-wrap {
  padding: 20px 24px;
}

/* ── Materialize dark overrides ────────────────────── */

/* Cards */
.card, .card-panel {
  background: var(--md-surface) !important;
  color: var(--md-on-surface) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4) !important;
}

.card .card-content,
.card-content {
  color: var(--md-on-surface) !important;
}

.card .card-title,
.card-title {
  color: var(--md-on-surface) !important;
}

/* Tables */
table {
  background: var(--md-surface);
  color: var(--md-on-surface);
}

table thead {
  background: var(--md-surface-2);
}

table thead tr {
  border-bottom: 2px solid var(--line) !important;
}

table thead th {
  color: var(--md-accent) !important;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

table tbody tr {
  border-bottom: 1px solid var(--line) !important;
}

table tbody tr:hover {
  background: var(--md-surface-2) !important;
}

table tbody td {
  color: var(--md-on-surface);
}

/* Links */
a {
  color: var(--md-accent);
}

a:hover {
  color: #6cebdd;
}

/* Inputs & selects */
.input-field input,
.input-field textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="search"],
textarea,
select {
  background: var(--md-surface-2) !important;
  color: var(--md-on-surface) !important;
  border-bottom-color: var(--line) !important;
  border-radius: 2px;
}

.input-field input:focus,
.input-field textarea:focus {
  border-bottom-color: var(--md-accent) !important;
  box-shadow: 0 1px 0 0 var(--md-accent) !important;
}

.input-field label {
  color: var(--muted) !important;
}

.input-field label.active {
  color: var(--md-accent) !important;
}

/* Materialize select dropdown */
.select-wrapper input.select-dropdown {
  color: var(--md-on-surface) !important;
}

.dropdown-content {
  background: var(--md-surface-2) !important;
}

.dropdown-content li > a,
.dropdown-content li > span {
  color: var(--md-on-surface) !important;
}

.dropdown-content li:hover,
.dropdown-content li.selected {
  background: rgba(67, 224, 207, 0.15) !important;
}

/* Buttons */
.btn, .btn-large, .btn-small {
  background: var(--brand-cyan) !important;
  color: #111 !important;
  font-weight: 700 !important;
}

.btn:hover, .btn-large:hover, .btn-small:hover {
  background: #6cebdd !important;
}

.btn-flat {
  color: var(--md-accent) !important;
}

/* Collection lists */
.collection {
  border-color: var(--line) !important;
  background: var(--md-surface) !important;
}

.collection .collection-item {
  background: var(--md-surface) !important;
  color: var(--md-on-surface) !important;
  border-bottom-color: var(--line) !important;
}

.collection .collection-item:hover {
  background: var(--md-surface-2) !important;
}

.collection a.collection-item {
  color: var(--md-accent) !important;
}

/* Chips */
.chip {
  background: var(--md-surface-2) !important;
  color: var(--md-on-surface) !important;
}

/* Breadcrumbs / helper text */
.helper-text {
  color: var(--muted) !important;
}

/* ── Stat cards ────────────────────────────────────── */

/* Equal-width responsive grid for a row of stat cards. Beats flex:1 here —
   every card is the same width (so the auto-sized value font is consistent
   card to card) and a short last row stays left-aligned instead of stretching
   its few cards to full width. Collapses 4 → 3 → 2 → 1 columns as it narrows. */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
  margin: 8px 0 16px;
}

/* Column-count caps for card counts that don't divide evenly by the default 4
   (which would leave a lone trailing card). The max(min-width, fraction-of-row)
   floor pins the column count on wide screens yet still collapses to fewer
   columns as the row narrows. 12px = the grid gap. */
.stat-grid--3 { grid-template-columns: repeat(auto-fit, minmax(max(230px, (100% - 24px) / 3), 1fr)); }
.stat-grid--4 { grid-template-columns: repeat(auto-fit, minmax(max(200px, (100% - 36px) / 4), 1fr)); }
.stat-grid--5 { grid-template-columns: repeat(auto-fit, minmax(max(180px, (100% - 48px) / 5), 1fr)); }

.stat-card {
  background: var(--md-surface);
  border-left: 4px solid var(--spec-teal);
  border-radius: 4px;
  padding: 16px 20px 18px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  /* Size the value font to each card's own width (see .stat-card__value). */
  container-type: inline-size;
  /* container-type makes each card its own stacking context, so the help
     popover (z-index:20) can only ever rise above content within the SAME
     card. Raise the whole card above its siblings while the popover is open
     so it isn't painted over by the card in the row below. position:relative
     is needed because order-detail cards sit inside a Materialize .col. */
  position: relative;
}

.stat-card:hover,
.stat-card:focus-within {
  z-index: 30;
}

/* Cycle the signature spectrum across consecutive stat cards.
   Covers both layouts: direct flex siblings (.stat-card) and
   column-wrapped cards (.col > .stat-card). */
.stat-card:nth-of-type(8n+1),
.col:nth-of-type(8n+1) > .stat-card { border-left-color: var(--spec-teal); }
.stat-card:nth-of-type(8n+2),
.col:nth-of-type(8n+2) > .stat-card { border-left-color: var(--spec-amber); }
.stat-card:nth-of-type(8n+3),
.col:nth-of-type(8n+3) > .stat-card { border-left-color: var(--spec-pink); }
.stat-card:nth-of-type(8n+4),
.col:nth-of-type(8n+4) > .stat-card { border-left-color: var(--spec-purple); }
.stat-card:nth-of-type(8n+5),
.col:nth-of-type(8n+5) > .stat-card { border-left-color: var(--spec-green); }
.stat-card:nth-of-type(8n+6),
.col:nth-of-type(8n+6) > .stat-card { border-left-color: var(--spec-orange); }
.stat-card:nth-of-type(8n+7),
.col:nth-of-type(8n+7) > .stat-card { border-left-color: var(--spec-magenta); }
.stat-card:nth-of-type(8n+8),
.col:nth-of-type(8n+8) > .stat-card { border-left-color: var(--spec-lime); }

.stat-card__label {
  margin: 0 0 8px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.stat-card__value {
  margin: 0;
  /* Numbers use spaces as thousands separators (e.g. "R 60 339.30"), so keep
     them on one line and scale the size to the card width — a narrow card
     shrinks the number instead of wrapping it mid-value. Falls back to the
     fixed 1.8rem in browsers without container-query support. */
  font-size: 1.8rem;
  font-size: clamp(1rem, 10cqi, 1.8rem);
  font-weight: 700;
  color: var(--md-on-surface);
  line-height: 1.05;
  white-space: nowrap;
}

/* Calculation help on stat cards. The icon lives in the label row; the panel is
   revealed on hover or keyboard focus — no JS. .stat-card__help is the
   positioning context, so the panel does not depend on the card's
   container-type: inline-size. */
.stat-card__help {
  position: relative;
  display: inline-flex;
  align-items: center;
  /* Prevent a long label in a narrow column from squashing the icon. */
  flex: 0 0 auto;
  color: var(--muted);
  cursor: help;
}

.stat-card__help:hover,
.stat-card__help:focus {
  color: var(--md-on-surface);
}

.stat-card__help:focus-visible {
  outline: 2px solid var(--spec-teal);
  outline-offset: 2px;
  border-radius: 2px;
}

.stat-card__help .material-icons {
  font-size: 1rem;
  line-height: 1;
}

.stat-help-pop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 20;
  width: max-content;
  max-width: min(280px, 80vw);
  padding: 10px 12px;
  background: var(--md-surface);
  border: 1px solid #3d3d3d;
  border-left: 3px solid var(--spec-teal);
  border-radius: 4px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.45);
  /* The label is uppercase + tracked out; the popover is prose. */
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  /* Fade in immediately; on the way out, keep the panel visible (and
     hoverable/focusable) for the full fade so it doesn't snap away. */
  transition: opacity 120ms ease, visibility 0s linear 120ms;
  pointer-events: none;
}

.stat-card__help:hover .stat-help-pop,
.stat-card__help:focus .stat-help-pop,
.stat-card__help:focus-within .stat-help-pop {
  opacity: 1;
  visibility: visible;
  transition: opacity 120ms ease, visibility 0s;
}

.stat-help-pop__formula {
  display: block;
  margin-bottom: 6px;
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.8rem;
  color: var(--spec-teal);
}

.stat-help-pop__text {
  display: block;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--md-on-surface);
}

/* ── Misc utilities ────────────────────────────────── */

.muted { color: var(--muted); }

.message {
  border-radius: 4px;
  padding: 10px 12px;
  margin-bottom: 10px;
  font-size: 0.95rem;
}

.message.error {
  background: rgba(239, 83, 80, 0.12);
  color: var(--danger);
  border: 1px solid rgba(239, 83, 80, 0.3);
}

.message.warning {
  background: rgba(255, 167, 38, 0.12);
  color: var(--warn);
  border: 1px solid rgba(255, 167, 38, 0.3);
}

.errorlist {
  color: var(--danger);
  margin: 0 0 10px;
  padding-left: 18px;
}

.helptext {
  color: var(--muted);
  font-size: 0.9rem;
}

/* ── Targeting page ────────────────────────────────── */

.level-toggles [type="checkbox"],
.targeting-table [type="checkbox"] {
  position: static !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  width: auto !important;
  height: auto !important;
  display: inline-block !important;
}

.targeting-form h2,
.card-content .targeting-form h2 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--md-on-surface);
  margin: 12px 0 4px;
  line-height: 1.3;
}

.meta-list {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
}

.meta-list strong { color: var(--md-on-surface); }

.targeting-form {
  display: grid;
  gap: 14px;
}

.level-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  padding: 10px 0 0;
}

.level-toggles label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-soft);
  color: var(--md-on-surface);
  font-size: 0.92rem;
  cursor: pointer;
}

.level-toggles input {
  width: auto;
  max-width: none;
  margin: 0;
}

.targeting-fieldset {
  border: 1px solid var(--line);
  background: var(--panel-soft);
  border-radius: 4px;
  padding: 10px 12px 12px;
  margin: 0;
}

.targeting-fieldset legend {
  padding: 0 6px;
  font-weight: 700;
  color: var(--md-on-surface);
  font-size: 0.93rem;
}

.targeting-fieldset select {
  width: 100%;
  max-width: none;
  min-height: 140px;
  border-radius: 4px;
  border: 1px solid var(--line);
  padding: 8px;
  background: var(--md-surface-2);
  color: var(--md-on-surface);
  display: block;
  height: auto;
}

.field-errors {
  margin: 0 0 6px;
  color: var(--danger);
  font-size: 0.86rem;
}

/* ── Marvin targeting checkboxes ───────────────────── */

.level-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 4px;
}

.level-btn {
  border: 1px solid var(--line) !important;
  border-radius: 999px !important;
  padding: 6px 16px !important;
  font-size: 0.88rem !important;
  color: var(--md-on-surface) !important;
  background: var(--panel-soft) !important;
  line-height: 1.6 !important;
  height: auto !important;
}

.level-btn.active {
  background: var(--accent) !important;
  color: var(--md-surface) !important;
  border-color: var(--accent) !important;
}

.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 2px 12px;
  padding-top: 8px;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 2px;
  cursor: pointer;
  font-size: 0.92rem;
  color: var(--md-on-surface);
  line-height: 1.4;
}

.checkbox-label [type="checkbox"] {
  position: static !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  width: 16px !important;
  height: 16px !important;
  display: inline-block !important;
  flex-shrink: 0;
  margin: 0 !important;
}

.checkbox-label span {
  display: inline;
}

.targeting-cascade {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 4px;
}

@media (max-width: 900px) {
  .targeting-cascade {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 540px) {
  .targeting-cascade {
    grid-template-columns: 1fr;
  }
}

.cascade-level {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.cascade-label {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--md-on-surface);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Materialize select wrappers inside cascade levels fill full width */
.cascade-level .select-wrapper,
.cascade-level .select-wrapper input.select-dropdown {
  width: 100% !important;
}

.targeting-fieldset .badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: normal;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 7px;
  margin-left: 4px;
  vertical-align: middle;
  color: var(--muted);
}

.filter-hint {
  font-size: 0.75rem;
  font-weight: normal;
  color: var(--accent);
  margin-left: 8px;
  vertical-align: middle;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

label.inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.92rem;
  color: var(--md-on-surface);
}

label.inline input,
label.inline select {
  min-width: 260px;
  max-width: 320px;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  padding-top: 4px;
}

.table-wrap {
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: auto;
  background: var(--md-surface);
  max-height: 62vh;
}

.targeting-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  min-width: 920px;
  color: var(--md-on-surface);
}

.targeting-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  white-space: nowrap;
  background: var(--md-surface-2);
  color: var(--md-accent);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 8px 9px;
}

.targeting-table tbody td {
  padding: 7px 9px;
  border-bottom: 1px solid var(--line);
}

.targeting-table tbody tr:hover { background: var(--md-surface-2); }

.table-search-input {
  display: inline-block;
  width: 220px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--md-surface-1);
  color: var(--text);
  font-size: 0.9rem;
  height: 32px;
  box-sizing: border-box;
  margin-right: 8px;
  vertical-align: middle;
}

.pagination {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-size: 0.92rem;
}

.pagination a {
  text-decoration: none;
  color: var(--md-accent);
  font-weight: 700;
}

.pagination a:hover { text-decoration: underline; }

/* ── Login page ────────────────────────────────────── */

body.login-page {
  display: grid;
  place-items: center;
  padding: 20px;
  min-height: 100vh;
  background: var(--md-bg);
  margin: 0;
}

.login-layout {
  width: min(980px, 100%);
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  border: 1px solid var(--line);
  background: var(--md-surface);
}

.login-side {
  background: var(--md-primary);
  color: #b8b8b8;
  padding: 24px 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.login-logo {
  width: 200px;
  height: auto;
  margin-bottom: 20px;
}

.login-side p {
  margin: 0;
  color: #b8b8b8;
}

.login-panel {
  padding: 28px 24px;
  background: var(--md-surface);
}

.login-panel h4 {
  margin: 0 0 20px;
  color: var(--md-on-surface);
}

/* ── Responsive ────────────────────────────────────── */

@media (max-width: 780px) {
  .login-layout { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  label.inline input,
  label.inline select {
    min-width: 0;
    width: 100%;
    max-width: none;
  }
  .toolbar,
  .actions {
    flex-direction: column;
    align-items: stretch;
  }
  .level-toggles label { width: 100%; }
}

@media (max-width: 600px) {
  .page-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ── Page transition spinner ───────────────────────── */

#page-spinner {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 9999;
  align-items: center;
  justify-content: center;
}

#page-spinner.active {
  display: flex;
}

.page-spinner__ring {
  width: 52px;
  height: 52px;
  border: 4px solid rgba(255, 255, 255, 0.15);
  border-top-color: var(--brand-cyan);
  border-radius: 50%;
  animation: page-spin 0.7s linear infinite;
}

@keyframes page-spin {
  to { transform: rotate(360deg); }
}

/* ── Skeleton loader ───────────────────────────────── */

.skeleton-block {
  background: linear-gradient(90deg, var(--md-surface) 25%, var(--md-surface-2) 50%, var(--md-surface) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: 4px;
  margin-bottom: 8px;
}

@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Flatpickr overrides ───────────────────────────── */

.flatpickr-calendar {
  background: var(--md-surface-2) !important;
  border: 1px solid var(--line) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.5) !important;
  z-index: 9999 !important;
}
.flatpickr-month,
.flatpickr-weekdays,
.flatpickr-weekday {
  background: var(--md-surface) !important;
  color: var(--md-on-surface) !important;
  fill: var(--md-on-surface) !important;
}
.flatpickr-day {
  color: var(--md-on-surface) !important;
}
.flatpickr-day:hover,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover {
  background: var(--md-surface) !important;
  border-color: var(--md-accent) !important;
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover {
  background: var(--md-accent) !important;
  border-color: var(--md-accent) !important;
  color: #000 !important;
}
.flatpickr-day.today {
  border-color: var(--md-accent) !important;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: var(--muted) !important;
}
.numInputWrapper span.arrowUp:after,
.numInputWrapper span.arrowDown:after {
  border-bottom-color: var(--md-on-surface) !important;
  border-top-color: var(--md-on-surface) !important;
}
.flatpickr-current-month input.cur-year,
.flatpickr-current-month .flatpickr-monthDropdown-months {
  color: var(--md-on-surface) !important;
}

/* ── Creative upload select ────────────────────────── */

.creative-type-select {
  background: var(--md-surface-2);
  color: var(--md-on-surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0 10px;
  height: 36px;
  font-size: 0.9rem;
  flex: 0 0 130px;
  cursor: pointer;
  outline: none;
}
.creative-type-select:focus {
  border-color: var(--md-accent);
}

/* ── Creative type badges ──────────────────────────── */

.creative-type-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.creative-type-badge--display { background: #1a3a5c; color: #64b5f6; }
.creative-type-badge--video   { background: #3a1a4a; color: #ce93d8; }

/* ── Flash messages ────────────────────────────────── */

.flash-message {
  padding: 10px 16px;
  border-radius: 4px;
  margin-bottom: 16px;
  font-size: 0.9rem;
}
.flash-message--success { background: #1b5e20; color: #c8e6c9; }
.flash-message--error   { background: #7f0000; color: #ffcdd2; }
.flash-message--warning { background: #e65100; color: #ffe0b2; }
.flash-message--info    { background: #01579b; color: #b3e5fc; }

/* ── GAM sync status badges ────────────────────────── */
.gam-status-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
  margin-left: 8px;
}
.gam-status-not-in-gam { background: #37474f; color: #90a4ae; }
.gam-status-pending    { background: #4a3000; color: #ffb74d; }
.gam-status-synced     { background: #1b3a1f; color: #81c784; }

/* ── Creative size warning ─────────────────────────── */
.creative-size-invalid { color: #ffb74d; margin-left: 4px; cursor: default; }