/* Civic Platform theme — agency branding over Bootstrap 5.3 (self-hosted). */
:root {
  --civic-teal: #0f5c63;
  --civic-teal-dark: #0a4247;
  --civic-yellow: #f2c14e;
  --civic-ink: #10242b;
  /* Secondary text on white was #6c757d (4.68:1, right on the line); darken it so muted labels,
     grid headers and form help text stay legible in light mode. */
  --bs-secondary-color: #56676d;
}
body { color: var(--civic-ink); }
.navbar .nav-link { color: #234; border-bottom: 3px solid transparent; padding: .55rem .7rem; }
.navbar .nav-link:hover { color: var(--civic-teal); }
.navbar .nav-link.active { color: var(--civic-teal); border-bottom-color: var(--civic-yellow); }
.btn-primary { --bs-btn-bg: var(--civic-teal); --bs-btn-border-color: var(--civic-teal); --bs-btn-hover-bg: var(--civic-teal-dark); --bs-btn-hover-border-color: var(--civic-teal-dark); --bs-btn-active-bg: var(--civic-teal-dark); }
.btn-outline-primary { --bs-btn-color: var(--civic-teal); --bs-btn-border-color: var(--civic-teal); --bs-btn-hover-bg: var(--civic-teal); }
a { color: var(--civic-teal); }
.hero { background: linear-gradient(135deg, var(--civic-teal) 0%, #123f52 55%, #1b2f45 100%); }
.tile { transition: transform .12s ease, box-shadow .12s ease; }
.tile:hover { transform: translateY(-2px); box-shadow: 0 .5rem 1.25rem rgba(16, 36, 43, .12); }
.card { border-color: #dfe6e8; }
.table > :not(caption) > * > * { padding: .6rem .75rem; }
.badge.text-bg-light { background: #f4f7f8 !important; }
.announcement { border-bottom: 1px solid #e3e8ea; }
.page > h1:first-child, .page > .d-flex:first-child h1 { letter-spacing: -.02em; }
dl.row dt { color: #5a6b70; font-weight: 500; }
@media (max-width: 575.98px) { .display-6 { font-size: 2rem; } }

/* Top-fixed black navigation bar. One pinned row on every page: brand, the four dropdowns, the
   compact search box and the initials avatar. The staff section bar rides underneath it. */
.civic-nav-sticky { position: sticky; top: 0; z-index: 1030; }
.civic-topbar { background: #0b0f11; border-bottom: 1px solid #23282b; padding: .35rem 0; }
.civic-topbar .navbar-brand { color: #fff; font-weight: 600; letter-spacing: -.01em; margin-right: 1rem; }
.civic-topbar .navbar-brand:hover, .civic-topbar .navbar-brand:focus { color: #fff; }
.civic-brand-text { font-size: 1rem; line-height: 1.1; }
.civic-topbar .nav-link { color: rgba(255, 255, 255, .78); border-bottom: 3px solid transparent; padding: .55rem .8rem; }
.civic-topbar .nav-link:hover, .civic-topbar .nav-link:focus { color: #fff; }
.civic-topbar .nav-link.show, .civic-topbar .nav-link.active { color: #fff; border-bottom-color: var(--civic-yellow); }
.civic-topbar .navbar-toggler { border-color: rgba(255, 255, 255, .3); }
.civic-topsearch { flex: 1 1 12rem; max-width: 22rem; }
.civic-topsearch input { background: #161c1f; border-color: #2b3438; color: #fff; }
.civic-topsearch input::placeholder { color: #8b9aa0; }
.civic-topsearch input:focus { background: #161c1f; color: #fff; border-color: var(--civic-teal); box-shadow: none; }
.civic-subnav { background: #12181b; border-top: 1px solid #23282b; }
.civic-subnav .nav-link { color: #9fb0b6; }
.civic-subnav .nav-link:hover { color: #fff; }
.civic-subnav .nav-link.active { color: #fff; font-weight: 600; }
.civic-profile-toggle { border-radius: 999px; padding: .25rem; }
.civic-nav-actions { flex: 0 0 auto; }
.civic-brand-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.civic-topbar .navbar-toggler:focus { box-shadow: none; }
.civic-profile-toggle::after { color: rgba(255, 255, 255, .7); margin-left: .15rem; }
.civic-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--civic-teal); color: #fff;
  font-size: .78rem; font-weight: 600; letter-spacing: .03em; line-height: 1;
}
.dropdown-menu .dropdown-item.active, .dropdown-menu .dropdown-item:active { background: var(--civic-teal); color: #fff; }
.civic-profile-menu { min-width: 16rem; }
.civic-footer { background: #0b0f11; color: #8b9aa0; }
.civic-footer strong { color: #fff; }
.civic-footer a { color: #9fb0b6; text-decoration: none; }
.civic-footer a:hover { color: #fff; }

/* Account Manager (My Account). The tab strip and section headers mirror the reference portal:
   a light header band per section, a right-aligned action button, dense data grids. */
.civic-account-tabs { border-bottom-color: #cfd9dc; }
.civic-account-tabs .nav-link {
  color: #3b4d53; border-radius: 0; padding: .55rem 1rem;
  border-bottom: 3px solid transparent;
}
.civic-account-tabs .nav-link:hover { border-bottom-color: #d7e2e4; }
.civic-account-tabs .nav-link.active {
  color: var(--civic-teal); font-weight: 600;
  background: #fff; border-bottom-color: var(--civic-teal);
}
.civic-panel { background: #f7fafa; border-color: #d7e2e4; }
.civic-section .civic-section-head {
  background: #eef4f5; border-bottom: 1px solid #d7e2e4;
  padding: .6rem 1rem;
}
.civic-section .civic-section-head h2, .civic-section .civic-section-head h1 { color: #24444a; }
.civic-grid { margin: 0; }
.civic-grid > thead > tr > th {
  background: #f7fafa; color: #4a6167; font-weight: 600;
  font-size: .8rem; text-transform: none; border-bottom-width: 1px;
}
.civic-grid > tbody > tr > td { font-size: .9rem; }

/* Dark theme. Bootstrap 5.3 flips its own components from data-bs-theme; the portal's custom
   surfaces (section bands, panels, grid headers, footer) need their own dark values. */
[data-bs-theme="dark"] body { color: var(--bs-body-color); }
/* Keep the light-mode secondary colour from leaking into dark mode: on a dark surface #56676d
   is 2.6:1. */
[data-bs-theme="dark"] { --bs-secondary-color: #a9bcc2; --bs-tertiary-color: #93a7ad; }

/* Links and outline buttons: the brand teal (#0f5c63) is unreadable on a dark page (1.6:1), so
   dark mode lightens it to the same hue at a contrast-safe luminance. Scoped to the page body so
   the black bar's own link colours stay as designed. */
[data-bs-theme="dark"] main a:not(.btn):not(.dropdown-item):not(.nav-link),
[data-bs-theme="dark"] .civic-footer a { color: #79cdd5; }
[data-bs-theme="dark"] main a:not(.btn):not(.dropdown-item):not(.nav-link):hover,
[data-bs-theme="dark"] .civic-footer a:hover { color: #a6e2e7; }
[data-bs-theme="dark"] .btn-outline-primary { --bs-btn-color: #79cdd5; --bs-btn-border-color: #3f7f86; --bs-btn-hover-bg: #0f5c63; --bs-btn-hover-border-color: #0f5c63; --bs-btn-hover-color: #fff; --bs-btn-active-bg: #0f5c63; }
[data-bs-theme="dark"] .btn-outline-secondary { --bs-btn-color: #c3ced2; --bs-btn-border-color: #55656b; --bs-btn-hover-bg: #2b3438; --bs-btn-hover-border-color: #55656b; --bs-btn-hover-color: #fff; }
[data-bs-theme="dark"] .btn-outline-danger { --bs-btn-color: #f08a8a; --bs-btn-border-color: #7a3a3a; --bs-btn-hover-bg: #5c2323; --bs-btn-hover-color: #fff; }
[data-bs-theme="dark"] .btn-link { color: #79cdd5; }
/* `bg-white` / `bg-light` are used as card-header surfaces across the templates. Left literal,
   they stay white while the text turns light — invisible. Map them onto the dark surfaces. */
[data-bs-theme="dark"] .bg-white { background-color: var(--bs-body-bg) !important; }
[data-bs-theme="dark"] .bg-light { background-color: #182125 !important; }
[data-bs-theme="dark"] .badge.text-bg-light { color: #d7e2e4 !important; }
[data-bs-theme="dark"] .text-body-secondary { color: #a9bcc2; }
[data-bs-theme="dark"] .civic-panel { background: #151d21; border-color: #26343a; }
[data-bs-theme="dark"] .civic-section .civic-section-head { background: #182125; border-color: #26343a; }
[data-bs-theme="dark"] .civic-section .civic-section-head h1,
[data-bs-theme="dark"] .civic-section .civic-section-head h2 { color: #dfe9eb; }
[data-bs-theme="dark"] .civic-grid > thead > tr > th { background: #151d21; color: #a9bcc2; }
[data-bs-theme="dark"] dl.row dt { color: #93a7ad; }
[data-bs-theme="dark"] .card { border-color: #26343a; }
[data-bs-theme="dark"] .civic-account-tabs .nav-link { color: #a9bcc2; }
[data-bs-theme="dark"] .civic-account-tabs .nav-link.active { background: transparent; color: #fff; }
[data-bs-theme="dark"] .civic-account-tabs { border-bottom-color: #26343a; }
[data-bs-theme="dark"] .badge.text-bg-light { background: #1e2a2f !important; color: #d7e2e4; }
[data-bs-theme="dark"] .hero { background: linear-gradient(135deg, #0b3b40 0%, #10222c 55%, #0d1a24 100%); }
[data-bs-theme="dark"] .dropdown-menu { --bs-dropdown-bg: #151d21; --bs-dropdown-border-color: #26343a; }
[data-bs-theme="dark"] .civic-topsearch input { background: #0f1417; }