/*
 * Backbay unified on-screen component layer, stored with all portal CSS.
 *
 * This file is injected after each page's local styles. Page files may retain
 * layout rules required by their forms and reports, but shared navigation,
 * colour, typography, controls, cards, tables, and status components are
 * governed here.
 */

@media screen {
  body.backbay-branded-page {
    --maroon: var(--brand-purple);
    --maroon-dark: var(--brand-purple-dark);
    --primary: var(--brand-purple);
    --primary-dark: var(--brand-purple-dark);
    --accent: var(--brand-yellow);
    --gold: var(--brand-yellow);
    --cream: var(--brand-cream);
    --paper: var(--brand-surface);
    --text: var(--brand-ink);
    --ink: var(--brand-ink);
    --muted: var(--brand-muted);
    --line: var(--brand-border);
    color: var(--brand-ink) !important;
    background-color: var(--brand-cream) !important;
    font-family: Exo2, "Segoe UI", Arial, sans-serif !important;
  }

  body.backbay-branded-page :is(h1, h2, h3, h4, h5, h6) {
    color: var(--brand-purple-dark);
    font-family: Exo2, "Segoe UI", Arial, sans-serif !important;
    font-weight: 850;
  }

  body.backbay-branded-page :is(p, li, label, td, th, a, button, input, select, textarea, summary) {
    font-family: Exo2, "Segoe UI", Arial, sans-serif !important;
  }

  /*
   * The shared shell is the sole application navigation. These selectors are
   * deliberately scoped to pages on which the shell is active, so anonymous
   * public forms retain their public navigation.
   */
  body.backbay-global-shell > nav:not(#backbayPortalShell *),
  body.backbay-global-shell > aside:not(#backbayPortalShell *),
  body.backbay-global-shell :is(
    aside.sidebar,
    nav.sidebar-nav,
    nav.navbar,
    nav.side-nav,
    nav.side-menu,
    nav.navigation,
    nav.top-nav,
    nav.nav,
    nav.o_main_nav,
    header.top-bar,
    header.topbar,
    header#top,
    .backbay-legacy-navigation-hidden
  ):not(#backbayPortalShell *) {
    display: none !important;
  }

  body.backbay-global-shell :is(.menu-toggle, .sidebar-overlay):not(#backbayPortalShell *) {
    display: none !important;
  }

  body.backbay-global-shell :is(
    .main,
    .main-wrapper,
    .main-content,
    .main-area,
    .main-panel,
    .content-wrapper,
    .dashboard-main,
    .page-wrapper,
    .workspace,
    .app-main
  ) {
    width: auto !important;
    max-width: none;
    margin-left: 0 !important;
  }

  body.backbay-global-shell :is(.app-container, .shell):not(#backbayPortalShell) {
    display: block !important;
    width: auto !important;
    min-height: 100vh;
    margin: 0 !important;
  }

  body.backbay-global-shell.brand-portal main {
    width: auto !important;
    margin-left: 0 !important;
  }

  body.backbay-global-shell :is(
    .backbay-legacy-page-title-hidden,
    .backbay-legacy-page-heading-hidden
  ) {
    display: none !important;
  }

  body.backbay-branded-page :is(
    button,
    .btn,
    .button,
    input[type="button"],
    input[type="submit"],
    input[type="reset"]
  ) {
    min-height: 42px;
    border-radius: var(--brand-radius-sm) !important;
    font-size: max(.9rem, 14px);
    font-weight: 850 !important;
    line-height: 1.2;
    box-shadow: 0 6px 15px rgba(86, 36, 64, .12);
    transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease;
  }

  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: 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(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 9px 20px rgba(86, 36, 64, .18);
  }

  body.backbay-branded-page :is(
    button,
    .btn,
    .button,
    input[type="button"],
    input[type="submit"],
    input[type="reset"]
  ):disabled {
    opacity: .52;
    cursor: not-allowed;
    box-shadow: none;
  }

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

  body.backbay-branded-page :is(.danger, .btn-danger, button.delete, button.remove, .button.danger) {
    border-color: var(--brand-danger) !important;
    color: #fff !important;
    background: var(--brand-danger) !important;
  }

  body.backbay-branded-page :is(.success, .btn-success, .button.success) {
    border-color: var(--brand-success) !important;
    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) !important;
    border-radius: var(--brand-radius-sm) !important;
    color: var(--brand-ink) !important;
    background: #fff !important;
    font-size: max(.92rem, 14px);
  }

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

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

  body.backbay-branded-page :is(
    .card,
    .panel,
    .box,
    .widget,
    .stat-card,
    .dashboard-card,
    .content-card,
    .form-card,
    .table-card,
    .section-card
  ) {
    border-color: var(--brand-border) !important;
    border-radius: var(--brand-radius) !important;
    background-color: var(--brand-surface) !important;
    box-shadow: var(--brand-shadow-sm) !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
  ) {
    border-radius: 12px !important;
    color: var(--brand-purple-dark) !important;
    background: var(--brand-yellow) !important;
  }

  body.backbay-branded-page :is(.badge, .pill, .chip, .tag, .status) {
    border-color: rgba(124, 59, 98, .18) !important;
    border-radius: 999px !important;
    font-weight: 850 !important;
  }

  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) !important;
    background: #fff;
  }

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

  body.backbay-branded-page table tbody tr:nth-child(even) {
    background: #fcf8fa;
  }

  body.backbay-branded-page table tbody tr:hover {
    background: #fff9d9;
  }

  body.backbay-branded-page :is(a:not(.btn):not(.button), .link):not(#backbayPortalShell *):not(nav *):not(aside *) {
    color: var(--brand-purple);
  }
}

@media screen and (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 *,
  body.backbay-branded-page *::before,
  body.backbay-branded-page *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Text on a computed dark-maroon surface is tagged by the shared contrast
   helper. Tag only the text element, not its whole panel, so nested white
   cards, inputs, and yellow badges retain their own readable colours. */
@media screen {
  body.backbay-branded-page .bb-maroon-contrast {
    color: #fff !important;
  }

  body.backbay-branded-page :is(input, textarea).bb-maroon-contrast::placeholder {
    color: #fff !important;
    opacity: .82;
  }
}

/* Match maroon page headers to the shared navigation background. The marker
   is applied only when the header's own background is maroon. */
@media screen, print {
  body.backbay-branded-page .bb-nav-header-theme.bb-nav-header-theme {
    color: #fff !important;
    background:
      linear-gradient(165deg, rgba(124, 59, 98, .97), rgba(86, 36, 64, .99)),
      var(--brand-ripple) !important;
    background-size: auto, 760px auto !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  body.backbay-branded-page .bb-nav-header-theme .bb-maroon-contrast {
    color: #fff !important;
  }
}