/* SERBUNIB - Unified Frontend Surface V14
   Decorative-only CSS. Chart colors, menu structure, component order and business logic unchanged.
   Light theme: medium blue, not washed out and not dark.
*/
:root {
  --serbunib-page-top: #9dc7e8;
  --serbunib-page-mid: #b4d9f0;
  --serbunib-page-bottom: #cfdef2;
  --serbunib-navy-ink: #143a61;
  --serbunib-glass-border: rgba(39, 112, 173, .23);
}

/* Scoped to frontend: not intended for /auth/login, backend or admin views. */
html:not([data-bs-theme="dark"]) body:not(.dark-mode):not(.dark):not(.auth-page) {
  background-color: var(--serbunib-page-mid) !important;
  background-image:
    radial-gradient(circle at 7% 13%, rgba(54, 126, 203, .24) 0, rgba(54, 126, 203, .14) 13%, transparent 32%),
    radial-gradient(circle at 92% 22%, rgba(35, 172, 203, .19) 0, rgba(35, 172, 203, .09) 15%, transparent 34%),
    radial-gradient(circle at 75% 85%, rgba(74, 104, 191, .16) 0, transparent 35%),
    linear-gradient(145deg, var(--serbunib-page-top) 0%, var(--serbunib-page-mid) 49%, var(--serbunib-page-bottom) 100%) !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
  min-height: 100vh;
}

/* Allow the common content wrapper to show the gradient underneath. */
html:not([data-bs-theme="dark"]) body:not(.dark-mode):not(.dark):not(.auth-page) > main,
html:not([data-bs-theme="dark"]) body:not(.dark-mode):not(.dark):not(.auth-page) .main-content {
  background-color: transparent;
}

/* Main navigation is readable over the stronger blue background. */
html:not([data-bs-theme="dark"]) body:not(.dark-mode):not(.dark):not(.auth-page) nav.navbar {
  background-color: rgba(226, 242, 252, .90) !important;
  border-bottom: 1px solid rgba(24, 91, 150, .15);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
html:not([data-bs-theme="dark"]) body:not(.dark-mode):not(.dark):not(.auth-page) nav.navbar .navbar-brand {
  color: var(--serbunib-navy-ink) !important;
  text-shadow: none;
}

/* Light surfaces, readable text and restrained depth; no chart canvas overrides. */
html:not([data-bs-theme="dark"]) body:not(.dark-mode):not(.dark):not(.auth-page) .card:not(.bg-primary):not(.bg-dark),
html:not([data-bs-theme="dark"]) body:not(.dark-mode):not(.dark):not(.auth-page) .stats-card:not(.bg-primary):not(.bg-dark) {
  border-color: var(--serbunib-glass-border);
  box-shadow: 0 8px 25px rgba(18, 70, 121, .10);
}
html:not([data-bs-theme="dark"]) body:not(.dark-mode):not(.dark):not(.auth-page) .card,
html:not([data-bs-theme="dark"]) body:not(.dark-mode):not(.dark):not(.auth-page) .stats-card {
  transition: box-shadow .22s ease;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  html:not([data-bs-theme="dark"]) body:not(.dark-mode):not(.dark):not(.auth-page) .card:hover,
  html:not([data-bs-theme="dark"]) body:not(.dark-mode):not(.dark):not(.auth-page) .stats-card:hover {
    box-shadow: 0 12px 30px rgba(18, 70, 121, .15);
  }
}

/* Keep filter controls easy to distinguish from the medium blue surface. */
html:not([data-bs-theme="dark"]) body:not(.dark-mode):not(.dark):not(.auth-page) .form-select,
html:not([data-bs-theme="dark"]) body:not(.dark-mode):not(.dark):not(.auth-page) .form-control {
  border-color: rgba(37, 105, 171, .32);
}

/* Respect existing dark-mode implementations. */
html[data-bs-theme="dark"] body,
body.dark-mode,
body.dark {
  background-image: none;
}
@media (max-width: 767.98px) {
  html:not([data-bs-theme="dark"]) body:not(.dark-mode):not(.dark):not(.auth-page) {
    background-attachment: scroll !important;
  }
  html:not([data-bs-theme="dark"]) body:not(.dark-mode):not(.dark):not(.auth-page) nav.navbar {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-bs-theme="dark"]) body:not(.dark-mode):not(.dark):not(.auth-page) .card,
  html:not([data-bs-theme="dark"]) body:not(.dark-mode):not(.dark):not(.auth-page) .stats-card {
    transition: none !important;
  }
}