/* Branding overrides loaded last to ensure brand colors win */
:root {
  --brand-primary: #9CAC94;
  --brand-secondary: #B8836E;
  --brand-highlight: #B08068;
}

/* App background */
html, body, .content-page, .page-content, .content, #app, .app, main.base-layout__body {
  /* Very light orange background */
  background: #FFF4E6 !important;
  background-color: #FFF4E6 !important;
}

/* Topbar & footer */
.app-topbar, .app-topbar .topbar-menu, .footer, .sticky-footer, footer.footer {
  background: #9CAC94 !important;
  background-color: #9CAC94 !important;
  color: #ffffff !important;
}

footer.footer {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  z-index: 1030 !important;
  margin: 0 !important;
  padding-bottom: env(safe-area-inset-bottom) !important;
}

.app-topbar .topbar-menu .topbar-item .topbar-link,
.app-topbar .topbar-menu .topbar-item .topbar-link *,
.footer .footer-menu .topbar-icon-button,
.footer .footer-menu .topbar-icon-button * {
  background: transparent !important;
  color: #ffffff !important;
}

/* Dropdowns */
.app-topbar .dropdown-menu, .dropdown-menu, #notification-dropdown-alert .dropdown-menu {
  background: #9CAC94 !important;
  background-color: #9CAC94 !important;
  color: #ffffff !important;
}
.dropdown-menu .dropdown-item, .dropdown-menu .dropdown-header {
  color: #ffffff !important;
  background: transparent !important;
}

/* Make card containers blend with background by default */
.rz-card, .card, .board-admin-card__card, .rz-card .card-body {
    background: transparent !important;
    background-color: #fff !important;
    border-color: transparent !important;
    box-shadow: none !important;
    
}

/* Text colors to ensure readability */
h1,h2,h3,h4,h5,h6, .board-admin-card__title, .board-admin-card__subtitle,
.board-admin-card__meta, .board-admin-card__players, .rz-tabview .rz-tabview-title {
  color: #000 !important;
}

/* Buttons: secondary brand */
.btn, .btn-primary {
  background-color: #B8836E !important;
  border-color: #8E6352 !important;
  color: #ffffff !important;
}
.btn:hover, .btn-primary:hover {
  background-color: #A36F5F !important;
  border-color: #7e5847 !important;
}

/* Badges and small UI items */
.topbar-badge, .badge-brand, .badge-highlight {
  background: #B08068 !important;
  color: #ffffff !important;
  border: none !important;
}

/* Force avatar backgrounds transparent so they don't carry gray boxes */
.avatar-title, .avatar-md, img.rounded-circle {
  background: transparent !important;
}

/* Specific Syncfusion / Radzen overrides if needed */
.e-dropdownbase .e-popup, .e-popup, .e-control .e-popup {
  background: #9CAC94 !important;
  color: #ffffff !important;
}

/* Removed broad inline background neutralization so component-provided team colors (home/away) are preserved.
   Specific problem elements are still neutralized above (cards, avatars) to avoid unwanted theme artifacts. */

/* Allow components to control their own inline background colors (home/away team colors and square states). */

/* Ensure the board surface itself stays white so team colors and square states render on a neutral canvas */
.football-squares-board,
.football-squares-board-main,
.football-squares-board-grid,
.football-squares-board .football-squares-board-header-row,
.football-squares-board .football-squares-board-header-grid {
  background: #ffffff !important;
  background-color: #ffffff !important;
}

/* Tabs: ensure tab titles/descriptions are black for readability */
.rz-tabview .rz-tabview-title,
.rz-tabview .rz-tabview-nav .rz-tabview-selected .rz-tabview-title {
  color: #000000 !important;
}

/* Admin layout: keep footer pinned independent from admin page content */
.admin-layout .admin-layout__footer,
html .admin-layout .admin-layout__footer {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  z-index: 2140 !important;
}

.admin-layout .admin-layout__footer footer.footer,
html .admin-layout .admin-layout__footer footer.footer {
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: 100% !important;
  margin: 0 !important;
  z-index: 2140 !important;
  transform: none !important;
}

/* Notification overlays: keep Radzen and bootstrap toasts above tab panels and other overlays */
.rz-notification-container,
.toast-container {
  position: fixed !important;
  z-index: 2147483647 !important;
}

.rz-notification,
.rz-notification-message {
  z-index: 2147483647 !important;
}

@media (max-width: 992px) {
  html[data-sidenav-size=condensed] .content-page,
  html[data-sidenav-size=compact] .content-page,
  html[data-sidenav-size=on-hover] .content-page,
  html[data-sidenav-size=offcanvas] .content-page {
    min-height: auto !important;
    height: auto !important;
  }
}