@font-face {
  font-family: Exo2;
  src: url("../brand/fonts/Exo2-VariableFont_wght.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: Exo2;
  src: url("../brand/fonts/Exo2-Italic-VariableFont_wght.ttf") format("truetype");
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --brand-purple: #7c3b62;
  --brand-purple-dark: #562440;
  --brand-purple-soft: #a56b8e;
  --brand-cream: #fffef0;
  --brand-yellow: #fbcb0b;
  --brand-slate: #7d8ea7;
  --brand-ink: #191919;
  --brand-ripple: url("../brand/patterns/water-ripple.svg");
  --brand-surface: #ffffff;
  --brand-surface-soft: #f8f2f6;
  --brand-border: #eadde5;
  --brand-muted: #6f6870;
  --brand-success: #16835b;
  --brand-warning: #bd7712;
  --brand-danger: #b42318;
  --brand-info: #5e718d;
  --brand-radius-sm: 10px;
  --brand-radius: 14px;
  --brand-radius-lg: 20px;
  --brand-shadow-sm: 0 5px 16px rgba(86, 36, 64, .08);
  --brand-shadow: 0 12px 32px rgba(86, 36, 64, .1);

  /* Common aliases used throughout the existing Backbay interfaces. */
  --maroon: var(--brand-purple);
  --maroon-dark: var(--brand-purple-dark);
  --gold: var(--brand-yellow);
  --cream: var(--brand-cream);
  --dark: var(--brand-purple-dark);
  --paper: #fff;
  --ink: var(--brand-ink);
  --muted: #6f6870;
  --line: #eadde5;
  --primary: var(--brand-purple);
  --primary-dark: var(--brand-purple-dark);
  --accent: var(--brand-yellow);
  --border: var(--brand-border);
  --danger: var(--brand-danger);
  --success: var(--brand-success);
  --warning: var(--brand-warning);
  --info: var(--brand-info);
}

html,
body,
button,
input,
select,
textarea {
  font-family: Exo2, "Segoe UI", Arial, sans-serif;
  font-weight: 650;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: Exo2, "Segoe UI", Arial, sans-serif;
  font-weight: 850;
}

body.brand-login {
  background-color: var(--brand-cream);
  background-image: linear-gradient(rgba(255, 254, 240, .94), rgba(255, 254, 240, .94)), var(--brand-ripple);
  background-size: auto, 680px auto;
}

body.brand-login .portal-header,
body.brand-permissions .top {
  background-color: var(--brand-purple);
  background-image: linear-gradient(135deg, rgba(86, 36, 64, .2), rgba(124, 59, 98, .06)), var(--brand-ripple);
  background-size: auto, 760px auto;
}

body.brand-login .school-logo {
  width: 150px;
  height: 150px;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

body.brand-login .school-logo img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 460px;
  height: 460px;
  max-width: none;
  max-height: none;
  padding: 0;
  transform: translate(-50%, -50%);
}

body.brand-login .portal-header h2 {
  letter-spacing: .015em;
}

body.brand-login::before,
body.brand-login::after {
  background: radial-gradient(circle, rgba(124, 59, 98, .07) 0%, transparent 70%);
}

body.brand-login .portal-container {
  box-shadow: 0 30px 50px rgba(86, 36, 64, .14), 0 10px 25px rgba(0, 0, 0, .05);
}

body.brand-login .role-tabs,
body.brand-login .input-field {
  background: var(--brand-cream);
}

body.brand-login .role-tabs {
  border-bottom-color: rgba(124, 59, 98, .12);
}

body.brand-login .role-tab i,
body.brand-login .input-field i,
body.brand-login .password-toggle,
body.brand-login .forgot-link {
  color: var(--brand-purple);
}

body.brand-login .role-tab:hover {
  background: #f5eaf0;
  border-color: rgba(124, 59, 98, .26);
}

body.brand-login .role-tab.active,
body.brand-login .login-btn,
body.brand-login button[type="submit"] {
  background: linear-gradient(105deg, var(--brand-purple), var(--brand-purple-dark));
  border-color: var(--brand-purple);
  box-shadow: 0 10px 18px -8px rgba(86, 36, 64, .45);
}

body.brand-login .login-btn:hover,
body.brand-login button[type="submit"]:hover {
  background: linear-gradient(105deg, #6f3458, var(--brand-purple-dark));
}

body.brand-login .input-field {
  border-color: #e3d4dc;
}

body.brand-login .input-field:focus-within {
  border-color: var(--brand-purple);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(124, 59, 98, .11);
}

body.brand-login .password-toggle:focus-visible {
  outline-color: var(--brand-purple);
}

body.brand-login .feedback-message:not(.feedback-success):not(.feedback-error):not(.feedback-info) {
  background: #f7edf2;
  border-left-color: var(--brand-purple);
}

body.brand-login .footer-note {
  border-top-color: #eadde5;
}

body.brand-portal .sidebar {
  isolation: isolate;
  background: linear-gradient(165deg, var(--brand-purple), var(--brand-purple-dark));
}

body.brand-portal .sidebar::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--brand-ripple) center 7% / 720px auto repeat-y;
  opacity: .12;
  pointer-events: none;
}

body.brand-portal .brand-mark {
  width: 104px;
  height: 88px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.brand-portal .brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

body.brand-portal .hero {
  background-color: var(--brand-cream);
  background-image: linear-gradient(90deg, rgba(255, 254, 240, .96), rgba(255, 254, 240, .88)), var(--brand-ripple);
  background-position: center;
  background-size: auto, 900px auto;
}

body.brand-permissions {
  background-color: var(--brand-cream);
}

body.brand-permissions .top p {
  color: #f6e9f0;
}

body.brand-permissions .notice {
  border-color: #ead48b;
  background: #fff8d8;
}

.brand-logo {
  display: block;
  object-fit: contain;
}

#backbayPrintBrand {
  display: none;
}

#backbayPrintBrand[hidden] {
  display: none !important;
}

/*
 * Shared application theme. The route gateway adds backbay-branded-page to
 * authenticated screens, so legacy modules inherit the approved Backbay
 * palette without requiring a separate redesign in every file.
 */
body.backbay-branded-page {
  --maroon: var(--brand-purple);
  --maroon-950: #351428;
  --maroon-900: var(--brand-purple-dark);
  --maroon-800: #66304f;
  --maroon-700: var(--brand-purple);
  --gold: var(--brand-yellow);
  --gold-500: var(--brand-yellow);
  --gold-400: #ffdc4f;
  --cream: var(--brand-cream);
  --cream-50: var(--brand-cream);
  --cream-100: #f8f0e6;
  --primary: var(--brand-purple);
  --primary-dark: var(--brand-purple-dark);
  --accent: var(--brand-yellow);
  --ink: var(--brand-ink);
  --text: var(--brand-ink);
  --line: #e7d8e1;
  color: var(--brand-ink);
  background-color: var(--brand-cream) !important;
  background-image:
    linear-gradient(rgba(255, 254, 240, .96), rgba(255, 254, 240, .96)),
    var(--brand-ripple) !important;
  background-size: auto, 820px auto !important;
  font-size: 16px;
  font-weight: 650;
  line-height: 1.5;
}

body.backbay-branded-page :is(p, li, label, td, th, a, button, input, select, textarea, summary) {
  font-weight: 650;
}

body.backbay-branded-page :is(input, select, textarea, button, .btn, .button) {
  font-size: max(.92rem, 14px);
}

body.backbay-branded-page :is(small, .small, .muted, .help, .hint) {
  font-size: max(.82rem, 12px);
  font-weight: 650;
}

body.backbay-branded-page h1,
body.backbay-branded-page h2,
body.backbay-branded-page h3,
body.backbay-branded-page h4 {
  color: var(--brand-purple-dark);
  font-weight: 850;
}

body.backbay-branded-page :is(
  .dashboard-header,
  .page-header,
  .portal-header,
  .hero-header,
  .main-header,
  .app-header,
  .top
) {
  color: #fff !important;
  background-color: var(--brand-purple) !important;
  background-image:
    linear-gradient(135deg, rgba(86, 36, 64, .2), rgba(124, 59, 98, .05)),
    var(--brand-ripple) !important;
  background-size: auto, 760px auto !important;
}

body.backbay-branded-page :is(
  .dashboard-header,
  .page-header,
  .portal-header,
  .hero-header,
  .main-header,
  .app-header,
  .top
) :is(h1, h2, h3, h4, p, span) {
  color: inherit !important;
}

body.backbay-branded-page :is(.card, .panel, .box, .widget, .stat-card, .dashboard-card) {
  border-color: #e7d8e1;
  box-shadow: 0 10px 30px rgba(86, 36, 64, .08);
}

body.backbay-branded-page :is(button, .btn, .button, input[type="button"], input[type="submit"]):not(
  .danger,
  .btn-danger,
  .delete,
  .remove,
  .success,
  .btn-success,
  .secondary,
  .ghost,
  .line,
  .outline,
  .btn-outline
) {
  border-color: var(--brand-purple) !important;
  color: #fff !important;
  background-color: var(--brand-purple) !important;
  background-image: linear-gradient(105deg, var(--brand-purple), var(--brand-purple-dark)) !important;
}

body.backbay-branded-page :is(button, .btn, .button, input[type="button"], input[type="submit"]):not(
  .danger,
  .btn-danger,
  .delete,
  .remove,
  .success,
  .btn-success,
  .secondary,
  .ghost,
  .line,
  .outline,
  .btn-outline
):hover {
  background-color: var(--brand-purple-dark) !important;
  background-image: linear-gradient(105deg, #713554, var(--brand-purple-dark)) !important;
}

body.backbay-branded-page :is(.secondary, .ghost, .line, .outline, .btn-outline) {
  border-color: var(--brand-purple) !important;
  color: var(--brand-purple-dark) !important;
  background: #fff !important;
}

body.backbay-branded-page :is(input, select, textarea):focus {
  border-color: var(--brand-purple) !important;
  outline: 0 !important;
  box-shadow: 0 0 0 3px rgba(124, 59, 98, .13) !important;
}

body.backbay-branded-page table thead :is(th, td) {
  border-color: rgba(255, 255, 255, .12) !important;
  color: #fff !important;
  background: var(--brand-purple-dark) !important;
}

body.backbay-branded-page :is(a:not(.btn):not(.button), .link):not(#backbayPortalShell *):not(nav *):not(aside *) {
  text-decoration-color: rgba(124, 59, 98, .35);
}

body.backbay-branded-page :is(.active, [aria-current="page"]):not(
  body,
  input,
  option,
  .badge,
  .status
) {
  border-color: var(--brand-purple);
}

/*
 * Legacy component normalisation. These rules intentionally load after each
 * routed page's own stylesheet so old modules share one visual language while
 * retaining their page-specific layout and workflow behaviour.
 */
body.backbay-branded-page :is(
  button,
  .btn,
  .button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"]
) {
  min-height: 40px;
  padding: .62rem .95rem;
  border-width: 1px;
  border-style: solid;
  border-radius: var(--brand-radius-sm) !important;
  box-shadow: 0 4px 12px rgba(86, 36, 64, .1);
  font-weight: 800;
  line-height: 1.2;
  transition:
    transform .16s ease,
    box-shadow .16s ease,
    border-color .16s ease,
    background-color .16s ease;
}

body.backbay-branded-page :is(
  button,
  .btn,
  .button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"]
):not(:disabled):hover {
  box-shadow: 0 7px 18px rgba(86, 36, 64, .16);
  transform: translateY(-1px);
}

body.backbay-branded-page :is(
  button,
  .btn,
  .button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"]
):disabled {
  cursor: not-allowed;
  filter: saturate(.4);
  opacity: .58;
}

body.backbay-branded-page :is(
  button,
  .btn,
  .button,
  .icon-button,
  .icon-btn,
  .menu-button,
  .menu-toggle,
  .menu-toggle-btn
) :is(i, svg) {
  width: 1.15em;
  color: currentColor !important;
  text-align: center;
}

body.backbay-branded-page :is(
  .icon-button,
  .icon-btn,
  .menu-button,
  .menu-toggle,
  .menu-toggle-btn
) {
  display: inline-grid;
  min-width: 40px;
  place-items: center;
}

body.backbay-branded-page :is(
  .danger,
  .btn-danger,
  .delete,
  .remove,
  [data-variant="danger"]
) {
  border-color: var(--brand-danger) !important;
}

body.backbay-branded-page :is(
  button.danger,
  .btn-danger,
  .button.danger,
  button.delete,
  button.remove,
  [data-variant="danger"]
) {
  color: #fff !important;
  background: var(--brand-danger) !important;
}

body.backbay-branded-page :is(
  .success,
  .btn-success,
  [data-variant="success"]
) {
  border-color: var(--brand-success) !important;
}

body.backbay-branded-page :is(
  button.success,
  .btn-success,
  .button.success,
  [data-variant="success"]
) {
  color: #fff !important;
  background: var(--brand-success) !important;
}

body.backbay-branded-page :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
  select,
  textarea
) {
  min-height: 42px;
  border: 1px solid var(--brand-border);
  border-radius: var(--brand-radius-sm);
  color: var(--brand-ink);
  background: #fff;
}

body.backbay-branded-page :is(input[type="checkbox"], input[type="radio"]) {
  accent-color: var(--brand-purple);
}

body.backbay-branded-page :is(
  a,
  button,
  input,
  select,
  textarea,
  summary,
  [tabindex]
):focus-visible {
  outline: 3px solid rgba(251, 203, 11, .75) !important;
  outline-offset: 2px !important;
}

body.backbay-branded-page :is(
  .card,
  .panel,
  .box,
  .widget,
  .stat-card,
  .dashboard-card,
  .content-card,
  .form-card,
  .table-card,
  .section-card,
  .modal-content
) {
  border: 1px solid var(--brand-border);
  border-radius: var(--brand-radius) !important;
  background-color: var(--brand-surface);
  box-shadow: var(--brand-shadow-sm);
}

body.backbay-branded-page :is(
  .stat-icon,
  .card-icon,
  .feature-icon,
  .action-icon,
  .dashboard-icon,
  .icon-box,
  .quick-action-icon,
  .menu-icon,
  .nav-icon
) {
  display: inline-grid;
  place-items: center;
  border: 1px solid #e8d4df;
  border-radius: var(--brand-radius-sm) !important;
  color: var(--brand-purple-dark) !important;
  background: #f5eaf0 !important;
}

body.backbay-branded-page :is(
  .stat-icon,
  .card-icon,
  .feature-icon,
  .action-icon,
  .dashboard-icon,
  .icon-box,
  .quick-action-icon,
  .menu-icon,
  .nav-icon
) :is(i, svg) {
  color: currentColor !important;
}

body.backbay-branded-page :is(.badge, .pill, .chip, .tag, .status) {
  border: 1px solid #e5cfdb;
  border-radius: 999px;
  color: var(--brand-purple-dark);
  background: #f6eaf1;
  font-weight: 800;
}

body.backbay-branded-page :is(.alert, .notice, .message) {
  border-radius: var(--brand-radius-sm);
}

body.backbay-branded-page :is(.table-wrap, .table-wrapper, .responsive-table) {
  overflow-x: auto;
  border: 1px solid var(--brand-border);
  border-radius: var(--brand-radius);
  background: #fff;
}

body.backbay-branded-page table {
  border-color: var(--brand-border);
  background: #fff;
}

body.backbay-branded-page table tbody tr:nth-child(even) {
  background: rgba(124, 59, 98, .025);
}

body.backbay-branded-page table tbody tr:hover {
  background: rgba(124, 59, 98, .055);
}

body.backbay-branded-page :is(hr, .divider) {
  border-color: var(--brand-border);
}

@media (max-width: 720px) {
  body.backbay-branded-page :is(
    button,
    .btn,
    .button,
    input[type="button"],
    input[type="submit"],
    input[type="reset"]
  ) {
    min-height: 44px;
  }

  body.backbay-branded-page :is(.table-wrap, .table-wrapper, .responsive-table) {
    -webkit-overflow-scrolling: touch;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.backbay-branded-page *,
  #backbayPortalShell * {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media print {
  body {
    font-family: Exo2, Arial, sans-serif;
  }

  body.backbay-branded-page {
    background: #fff !important;
  }

  #backbayPrintBrand {
    display: flex !important;
    position: relative !important;
    z-index: 2147483647 !important;
    align-items: center !important;
    gap: 14px !important;
    margin: 0 0 16px !important;
    padding: 0 0 11px !important;
    border-bottom: 3px solid #7c3b62 !important;
    color: #562440 !important;
    background: #fff !important;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }

  #backbayPrintBrand[hidden] {
    display: flex !important;
  }

  #backbayPrintBrand img {
    display: block !important;
    width: 190px !important;
    max-height: 64px !important;
    object-fit: contain !important;
  }

  #backbayPrintBrand strong,
  #backbayPrintBrand span {
    display: block !important;
    color: #562440 !important;
    font-weight: 850 !important;
  }

  #backbayPrintBrand strong {
    font-size: 15pt !important;
  }

  #backbayPrintBrand span {
    margin-top: 2px !important;
    font-size: 9pt !important;
  }
}