/* Light branding pass matching hiwave.com.au's palette/heading font — self-hosted
   (not Google Fonts CDN) so it survives being served pre-auth on the captive portal. */

@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/vendor/fonts/nunito-latin.woff2") format("woff2");
}

:root {
  --brand-heading-font: "Nunito", sans-serif;
  --brand-heading-color: #4a3f2f;
  --brand-accent: #e8b830;
  --brand-contrast: #2b2314;
}

h1, h2, h3 {
  font-family: var(--brand-heading-font);
  color: var(--brand-heading-color);
}

/* navbar-brand sits on .bg-dark, where --brand-heading-color (a dark brown) is nearly
   unreadable — use the gold accent instead, which was designed to pop on dark backgrounds. */
.navbar-brand {
  font-family: var(--brand-heading-font);
  color: var(--brand-accent) !important;
}
.navbar-brand:hover {
  color: #fff !important;
}

.brand-wordmark {
  font-family: var(--brand-heading-font);
  font-weight: 800;
  color: var(--brand-heading-color);
  text-align: center;
  padding: 0.5rem 0;
}

/* Shared page-width patterns, replacing one-off inline max-width styles per view. */
.page-narrow {
  max-width: 420px;
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.page-article {
  max-width: 760px;
  margin-bottom: 4rem;
}

.card-narrow {
  max-width: 500px;
}

/* Cards using shadow-sm keep a light border — on a white page background the shadow alone
   doesn't delineate adjacent boxes well, so pair it with a subtle outline. */
.card.shadow-sm {
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.stat-card .display-6 {
  color: var(--brand-heading-color);
  font-weight: 700;
}
.stat-card {
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
a:hover > .stat-card {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
  transform: translateY(-2px);
}
.table > thead th {
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--bs-gray-600);
  border-bottom-width: 2px;
}
.row-link {
  cursor: pointer;
}

.nav-link.active {
  font-weight: 600;
  color: #fff !important;
}

/* Branded social sign-in buttons — icon badge + label, one variant per OAuth provider. */
.btn-social {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-radius: 50rem;
  padding: 0.55rem 1.1rem;
  font-weight: 600;
  border: 1px solid transparent;
}

.btn-social .badge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  font-size: 0.8rem;
  font-weight: 800;
  flex: none;
}

.btn-social-google {
  background: #fff;
  color: #3c4043;
  border-color: #dadce0;
}
.btn-social-google:hover { background: #f8f9fa; color: #3c4043; }
.btn-social-google .badge-icon { background: #fff; color: #4285f4; border: 1px solid #dadce0; }

.btn-social-facebook { background: #1877f2; color: #fff; }
.btn-social-facebook:hover { background: #166fe0; color: #fff; }
.btn-social-facebook .badge-icon { background: #fff; color: #1877f2; }

.btn-social-instagram { background: #c1327a; color: #fff; }
.btn-social-instagram:hover { background: #a92a6a; color: #fff; }
.btn-social-instagram .badge-icon { background: #fff; color: #c1327a; }

.btn-social-tiktok { background: #010101; color: #fff; }
.btn-social-tiktok:hover { background: #1a1a1a; color: #fff; }
.btn-social-tiktok .badge-icon { background: #fff; color: #010101; }

.btn-social-phone { background: #495057; color: #fff; }
.btn-social-phone:hover { background: #343a40; color: #fff; }
.btn-social-phone .badge-icon { background: #fff; color: #495057; }

/* OTP entry screen — boxed digits + circular badge, brand-colored rather than copying a
   reference design's blue verbatim, to stay visually consistent with the rest of the portal. */
.otp-badge {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  border: 3px solid var(--brand-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.otp-badge::before {
  content: '';
  position: absolute;
  inset: 8px;
  border: 3px solid var(--brand-accent);
  border-radius: 50%;
}
.otp-badge span {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--brand-accent);
  z-index: 1;
}

.otp-boxes {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}
.otp-box {
  width: 2.75rem;
  height: 3.25rem;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 700;
  border: 2px solid var(--brand-accent);
  border-radius: 0.5rem;
  color: var(--brand-heading-color);
}
.otp-box:focus {
  outline: none;
  border-color: var(--brand-contrast);
  box-shadow: 0 0 0 3px rgba(232, 184, 48, 0.25);
}

.btn-primary {
  --bs-btn-bg: var(--brand-accent);
  --bs-btn-border-color: var(--brand-accent);
  --bs-btn-color: var(--brand-contrast);
  --bs-btn-hover-bg: #d1a52a;
  --bs-btn-hover-border-color: #d1a52a;
  --bs-btn-hover-color: var(--brand-contrast);
  --bs-btn-active-bg: #d1a52a;
  --bs-btn-active-color: var(--brand-contrast);
}

/* Filter-pill bar (admin NAT Log): a <details> per filter gives the open/close popover behavior
   natively, no JS needed for that part. */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.filter-pill {
  position: relative;
}
.filter-pill > summary {
  list-style: none;
  cursor: pointer;
  border: 1px solid #ced4da;
  border-radius: 50rem;
  padding: 0.3rem 0.9rem;
  font-size: 0.875rem;
  background: #fff;
  white-space: nowrap;
}
.filter-pill > summary::-webkit-details-marker {
  display: none;
}
.filter-pill > summary:hover {
  border-color: #6f42c1;
}
.filter-pill[open] > summary {
  border-color: #6f42c1;
  color: #6f42c1;
  font-weight: 600;
}
.filter-pill .pill-popover {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  z-index: 20;
  background: #fff;
  border: 1px solid #ced4da;
  border-radius: 0.5rem;
  padding: 1rem;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15);
  min-width: 240px;
}
.filter-pill .pill-checklist {
  max-height: 220px;
  overflow-y: auto;
}
/* For a trigger sitting at the right edge of its row (e.g. Admin > Grants' "Manual grant"
   button) — right-aligns the popover to the trigger instead of overflowing past it. */
.filter-pill .pill-popover-end {
  left: auto;
  right: 0;
}

/* Card headers were bg-white on a white card body — no visual line between "this is the
   header" and "this is the content". Give every .card-header a solid brand-colored bar
   instead so headers read as headers in every admin view. */
.card-header {
  background: var(--brand-heading-color) !important;
  border-bottom: none;
}
.card-header, .card-header * {
  color: #fff;
}

/* .form-select's own bg-body (white) stays put against the dark header, so the color: #fff
   above left it white-on-white — give it a matching dark background instead of pure white. */
.card-header .form-select {
  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-color: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}
.card-header .form-select:focus {
  border-color: #fff;
  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
}

/* Collapsible card-header summary (admin Person detail): chevron flips via the native [open]
   state, no JS needed. */
.collapsible-card > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.collapsible-card > summary::-webkit-details-marker {
  display: none;
}
.collapsible-card > summary::after {
  content: '\25B8';
  color: #fff;
  transition: transform 0.15s ease;
}
.collapsible-card[open] > summary::after {
  transform: rotate(90deg);
}
.collapsible-card > summary:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* Dashboard line charts (NAT translations / active grants over time) — see _lineChart.ejs. */
.linechart-wrap {
  width: 100%;
}
.linechart-svg {
  width: 100%;
  height: auto;
  overflow: visible;
}
.linechart-grid {
  stroke: #e9ecef;
  stroke-width: 1;
}
.linechart-tick {
  fill: var(--bs-gray-600);
  font-size: 10px;
}
.linechart-endlabel {
  fill: var(--brand-heading-color);
  font-size: 12px;
  font-weight: 700;
}
.linechart-crosshair {
  stroke: #adb5bd;
  stroke-width: 1;
  pointer-events: none;
  transition: opacity 0.1s ease;
}
.linechart-tooltip {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  background: var(--brand-contrast);
  color: #fff;
  padding: 0.35rem 0.6rem;
  border-radius: 0.375rem;
  font-size: 0.8rem;
  white-space: nowrap;
  transform: translate(-50%, -100%);
  z-index: 10;
}
.linechart-tooltip strong {
  font-size: 0.9rem;
}

/* --brand-heading-color is a dark brown tuned for light backgrounds — unreadable as text
   on dark mode's dark body. Swap to the gold accent (already proven readable on dark
   surfaces, see .navbar-brand) wherever the brand color is used as foreground text. Card
   headers aren't included: they use it as a background with white text, which stays fine
   in both themes. */
[data-bs-theme="dark"] h1,
[data-bs-theme="dark"] h2,
[data-bs-theme="dark"] h3,
[data-bs-theme="dark"] .brand-wordmark,
[data-bs-theme="dark"] .stat-card .display-6,
[data-bs-theme="dark"] .otp-box {
  color: var(--brand-accent);
}
[data-bs-theme="dark"] .linechart-endlabel {
  fill: var(--brand-accent);
}

[data-bs-theme="dark"] .table > thead th {
  color: var(--bs-secondary-color);
}

[data-bs-theme="dark"] .filter-pill > summary,
[data-bs-theme="dark"] .filter-pill .pill-popover {
  background: var(--bs-body-bg);
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
}

[data-bs-theme="dark"] .linechart-grid {
  stroke: var(--bs-border-color);
}
[data-bs-theme="dark"] .linechart-tick {
  fill: var(--bs-secondary-color);
}

/* Cards default to --bs-card-bg: var(--bs-body-bg), so in dark mode every card matched the
   page exactly — step cards up to the next surface color so they read as distinct panels.
   Bootstrap's .card rule sets --bs-card-bg on the .card element itself, which shadows any
   inherited override, so set background-color directly instead of the custom property. */
[data-bs-theme="dark"] .card {
  background-color: var(--bs-secondary-bg);
}

/* .navbar-dark.bg-dark and dark mode's --bs-body-bg land on nearly the same near-black, so
   the nav bar disappeared into the page. Pin it to the brand color instead (already used for
   card headers), which stays visibly distinct from the page background in dark mode. */
[data-bs-theme="dark"] .navbar.bg-dark {
  background-color: var(--brand-heading-color) !important;
}