html {
  font-size: 14px;
}

:root {
  --brand-primary: #8da7ff;
  --brand-accent: #2a3451;
  --brand-navbar: #060a12;
}

/* Footer renders directly on the body background (outside any panel), so its colour
   must follow the active theme. Bootstrap's default `.text-muted` is a fixed mid-grey
   that becomes nearly invisible on the dark radial gradient — override it here for
   both themes. The branding stylesheet (BrandingViewDataFilter) can further override
   this via the optional BodyTextColor branding setting. */
.footer {
  color: #cbd5e1;
}

.footer .text-muted,
.footer.text-muted {
  color: inherit !important;
}

body[data-theme="light"] .footer {
  color: #475569;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

body {
  min-height: 100vh;
  color: #f2f5f9;
  background: radial-gradient(circle at 20% 10%, #2a3451, #080c14 45%, #030507 100%);
  font-family: "Inter", "Segoe UI", sans-serif;
}

.navbar {
  background: rgba(6, 10, 18, 0.92);
  backdrop-filter: blur(12px);
}

.navbar-brand,
.nav-link,
.navbar .btn-link {
  color: #f2f5f9 !important;
}

.brand-logo {
  max-height: 2rem;
  max-width: 10rem;
  object-fit: contain;
  display: none;
}

body[data-theme="light"] .brand-logo-light,
body[data-theme="dark"] .brand-logo-dark {
  display: inline-block;
}

.hero-surface,
.panel {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1rem;
  background: linear-gradient(130deg, rgba(17, 24, 39, 0.96), rgba(10, 15, 24, 0.96));
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12rem;
  font-size: 0.75rem;
  color: #8da7ff;
}

.text-secondary {
  color: #b4bfd6 !important;
}

.table code,
code {
  color: #9ec5ff;
}

.btn-outline-light {
  border-color: rgba(255, 255, 255, 0.35);
}

.form-control,
.form-select {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.2);
  color: #f2f5f9;
}

/* Bootstrap's default placeholder colour (a near-black with reduced opacity)
   becomes invisible on the dark theme's translucent inputs. Pin a theme-aware
   placeholder colour so input affordances remain readable in either theme. */
.form-control::placeholder,
.form-select::placeholder {
  color: rgba(242, 245, 249, 0.55);
  opacity: 1;
}

/* The mobile navbar toggler ships as a fixed white SVG icon inside `.navbar-dark`.
   When branding paints the navbar with a light colour the white icon disappears,
   even though the menu link text auto-flips to a dark colour via
   `--brand-navbar-fg`. Rebuild the icon as a CSS mask so its fill always
   matches the computed navbar foreground, guaranteeing the hamburger is visible
   regardless of the branded background. The variable falls back to the dark
   theme's foreground if branding has not yet emitted its inline stylesheet. */
.navbar .navbar-toggler {
  border-color: var(--brand-navbar-fg, rgba(255, 255, 255, 0.35));
}

.navbar .navbar-toggler:focus {
  box-shadow: 0 0 0 0.2rem rgba(141, 167, 255, 0.25);
}

.navbar .navbar-toggler-icon {
  background-image: none;
  background-color: var(--brand-navbar-fg, #f2f5f9);
  -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.form-control:focus,
.form-select:focus {
  border-color: #8da7ff;
  box-shadow: 0 0 0 0.2rem rgba(141, 167, 255, 0.2);
}

.alert {
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.report-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: flex-end;
}

body[data-theme="light"] {
  color: #1f2937;
  background: radial-gradient(circle at 20% 10%, #e2e8f0, #f8fafc 45%, #f5f7fb 100%);
}

body[data-theme="light"] .navbar {
  background: var(--brand-navbar);
}

/* Navbar foreground colour is computed server-side based on the navbar background
   luminance and applied through the inline branding stylesheet (see
   BrandingViewDataFilter). The fallback below ensures readable contrast on the
   default dark navbar before the branding stylesheet is parsed. */
body[data-theme="light"] .text-secondary {
  color: #475569 !important;
}

body[data-theme="light"] .hero-surface,
body[data-theme="light"] .panel {
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: linear-gradient(130deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.96));
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.12);
}

body[data-theme="light"] .form-control,
body[data-theme="light"] .form-select {
  background-color: #ffffff;
  border-color: #cbd5e1;
  color: #111827;
}

body[data-theme="light"] .table {
  color: #111827;
}

/* The dashboard / activity lists use Bootstrap's `.text-light` utility on list-group
   items so they read against the dark theme. In light mode that turns the text white
   on a white panel, making it invisible — flip to a dark colour when the light theme
   is active. */
body[data-theme="light"] .text-light {
  color: #1f2937 !important;
}

/* Inline `<code>` snippets (RDL paths, connection strings) use a soft blue
   tuned for the dark gradient. On white panels that same blue washes out to
   the point of being unreadable — switch to a darker blue in light mode while
   preserving the brand cue. */
body[data-theme="light"] .table code,
body[data-theme="light"] code {
  color: #1d4ed8;
}

/* Bootstrap's `.btn-light` resolves to a near-white surface with a faint border.
   On the dark theme that reads as the primary call-to-action, but on the light
   theme the same button becomes white-on-white and the user can't tell where to
   click. Promote it to a high-contrast slate button in light mode so primary
   actions remain discoverable even when branding has overridden the palette. */
body[data-theme="light"] .btn-light {
  background-color: #1f2937;
  border-color: #1f2937;
  color: #f8fafc;
}

body[data-theme="light"] .btn-light:hover,
body[data-theme="light"] .btn-light:focus,
body[data-theme="light"] .btn-light:active,
body[data-theme="light"] .btn-light.active {
  background-color: #111827;
  border-color: #111827;
  color: #ffffff;
}

/* `.btn-outline-light` is a translucent white border with white text, which
   disappears entirely on the light theme's white panels. Re-derive a slate
   outline so secondary actions (Cancel, Back, Load, Pause/Resume, …) remain
   visible across every page. */
body[data-theme="light"] .btn-outline-light {
  border-color: rgba(15, 23, 42, 0.4);
  color: #1f2937;
}

body[data-theme="light"] .btn-outline-light:hover,
body[data-theme="light"] .btn-outline-light:focus,
body[data-theme="light"] .btn-outline-light:active,
body[data-theme="light"] .btn-outline-light.active {
  background-color: rgba(15, 23, 42, 0.08);
  border-color: rgba(15, 23, 42, 0.6);
  color: #0f172a;
}

/* Form-control placeholders need a dark-on-light variant in the light theme;
   the dark-theme rule above otherwise leaks a near-white placeholder onto the
   solid white inputs. */
body[data-theme="light"] .form-control::placeholder,
body[data-theme="light"] .form-select::placeholder {
  color: rgba(31, 41, 55, 0.55);
}

/* Bootstrap's default alert border is a translucent white that vanishes on
   light panels; tighten it so warning/error/success surfaces still feel
   contained. The Bootstrap palette already provides readable foreground
   colours, so we only adjust the border. */
body[data-theme="light"] .alert {
  border-color: rgba(15, 23, 42, 0.15);
}

/* Every list/table view uses `.table-dark` so it blends with the dark gradient
   panels. In light mode that leaves a hard, dark-grey rectangle inside an
   otherwise white panel — the data is technically readable, but striped rows
   and column headers lose contrast and the visual seam looks broken. Re-skin
   `.table-dark` in light mode using Bootstrap's table custom-properties so the
   table inherits the panel's surface and the foreground stays high-contrast. */
body[data-theme="light"] .table-dark {
  --bs-table-color: #1f2937;
  --bs-table-bg: transparent;
  --bs-table-border-color: rgba(15, 23, 42, 0.12);
  --bs-table-striped-color: #1f2937;
  --bs-table-striped-bg: rgba(15, 23, 42, 0.04);
  --bs-table-active-color: #1f2937;
  --bs-table-active-bg: rgba(15, 23, 42, 0.08);
  --bs-table-hover-color: #0f172a;
  --bs-table-hover-bg: rgba(15, 23, 42, 0.06);
  color: #1f2937;
  border-color: rgba(15, 23, 42, 0.12);
}

body[data-theme="light"] .table-dark > :not(caption) > * > * {
  border-bottom-color: rgba(15, 23, 42, 0.08);
}

body[data-theme="light"] .table-dark > thead {
  border-bottom: 2px solid rgba(15, 23, 42, 0.18);
}

@media (max-width: 767.98px) {
  .report-actions {
    justify-content: flex-start;
  }

  .navbar-collapse {
    padding-top: 0.5rem;
  }

  .navbar-nav .nav-link {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }
}