/*
 * Optional staff-only Retro presentation.
 *
 * This deliberately targets the existing Manage component classes. It does
 * not import V2 Bootstrap, reset browser elements, or style mobile/public
 * pages. The staff header loads this asset only for the Retro preference.
 */
body.staff-page.theme-retro {
  --wash-ink: #35271e;
  --wash-muted: #766456;
  --wash-line: #d8c4a9;
  --wash-paper: #fff8e8;
  --wash-field: #f5e7ce;
  --wash-shell: #ead9b9;
  --wash-teal: #9c3f2b;
  --wash-teal-dark: #743020;
  --wash-amber: #b8771f;
  --wash-red: #a2342a;
  --wash-green: #556b3d;
  background:
    radial-gradient(circle at 15% 0%, rgb(255 248 232 / 80%), transparent 34rem),
    var(--wash-shell);
  color: var(--wash-ink);
}

body.staff-page.theme-retro .staff-navbar {
  border-color: #6f3427;
  background: #3e2923;
  box-shadow: inset 0 -4px 0 #c28a36, 0 3px 0 rgb(72 42 29 / 16%);
}

body.staff-page.theme-retro .staff-brand,
body.staff-page.theme-retro .staff-brand:hover,
body.staff-page.theme-retro .staff-nav-link,
body.staff-page.theme-retro .staff-nav-link:hover,
body.staff-page.theme-retro .staff-nav-link.active,
body.staff-page.theme-retro .staff-user-strip .btn {
  color: #fff4d8;
}

body.staff-page.theme-retro .staff-brand {
  font-family: Georgia, 'Times New Roman', serif;
  letter-spacing: .025em;
}

body.staff-page.theme-retro .staff-nav-link:hover,
body.staff-page.theme-retro .staff-nav-link.active {
  background: #9c3f2b;
}

body.staff-page.theme-retro .staff-brand__logo {
  border-radius: 50%;
  box-shadow: 0 0 0 2px #d9ad61;
}

body.staff-page.theme-retro .staff-theme-control,
body.staff-page.theme-retro .staff-font-controls,
body.staff-page.theme-retro .staff-identity-pill {
  border-color: #d9ad61;
  background: #f8e8c7;
  color: #472c24;
  box-shadow: 2px 2px 0 rgb(27 17 13 / 22%);
}

body.staff-page.theme-retro .staff-theme-select,
body.staff-page.theme-retro .staff-theme-control__label {
  color: #472c24;
}

body.staff-page.theme-retro .staff-font-button {
  background: #f8e8c7;
  color: #472c24;
}

body.staff-page.theme-retro .staff-font-button:hover,
body.staff-page.theme-retro .staff-font-button.is-active {
  background: #9c3f2b;
  color: #fff4d8;
}

body.staff-page.theme-retro .notice-strip {
  border-color: #c28a36;
  background: #f6dfaa;
  color: #573928;
}

body.staff-page.theme-retro .app-hero,
body.staff-page.theme-retro .staff-context-bar,
body.staff-page.theme-retro .admin-tile,
body.staff-page.theme-retro .app-card,
body.staff-page.theme-retro .bill-box,
body.staff-page.theme-retro .feature-tile,
body.staff-page.theme-retro .metric-panel,
body.staff-page.theme-retro .quick-action-tile,
body.staff-page.theme-retro .summary-card,
body.staff-page.theme-retro main[style] {
  border-color: var(--wash-line);
  background: var(--wash-paper);
  border-radius: .875rem .25rem .875rem .25rem;
  box-shadow: 4px 4px 0 rgb(104 69 42 / 14%);
}

body.staff-page.theme-retro .app-eyebrow,
body.staff-page.theme-retro .context-label,
body.staff-page.theme-retro .metric-label,
body.staff-page.theme-retro .summary-card .label,
body.staff-page.theme-retro .hero-primary__label,
body.staff-page.theme-retro .bill-context-label {
  color: #9c3f2b;
  font-weight: 700;
  letter-spacing: .14em;
}

body.staff-page.theme-retro .hero-stat,
body.staff-page.theme-retro .bill-context-item {
  border-color: #d8c4a9;
  background: #f5e7ce;
}

body.staff-page.theme-retro .hero-stat__icon {
  border: 1px solid #d8c4a9;
  background: #fff8e8;
  color: #9c3f2b;
}

body.staff-page.theme-retro .bill-context-item--primary {
  border-color: #c28a36;
  background: #f9e5b2;
}

body.staff-page.theme-retro .bill-context-item--due {
  border-color: #b8771f;
  background: #fff0c9;
}

body.staff-page.theme-retro .btn-primary,
body.staff-page.theme-retro .button-primary,
body.staff-page.theme-retro input[type='submit'].btn-primary {
  border-color: #743020;
  background: #9c3f2b;
  color: #fff8e8;
}

body.staff-page.theme-retro .btn-primary:hover,
body.staff-page.theme-retro .button-primary:hover {
  border-color: #573928;
  background: #743020;
  color: #fff8e8;
}

body.staff-page.theme-retro .form-control:focus,
body.staff-page.theme-retro .form-select:focus,
body.staff-page.theme-retro input:focus,
body.staff-page.theme-retro select:focus,
body.staff-page.theme-retro textarea:focus {
  border-color: #9c3f2b;
  box-shadow: 0 0 0 .2rem rgb(156 63 43 / 20%);
}

@media (max-width: 1023px) {
  body.staff-page.theme-retro .staff-nav-panel {
    border-color: #6f3427;
    background: #3e2923;
  }
}