/* Tuned for the actual conditions: a phone, held one-handed, after 10 p.m.
   Dark by default so the screen is not a torch in the user's face.

   Palette taken from the Community Policing of Guyana, Regional Division 4B
   badge: deep navy, silver, near-black, with red used only as a rare accent. */

:root {
  --cpg-tap-min: 44px;

  --cpg-navy: #16306e;        /* the badge ring */
  --cpg-navy-mid: #10245a;
  --cpg-navy-deep: #0b1836;
  --cpg-bg: #080d1c;          /* near-black navy backdrop */
  --cpg-surface: #101a33;     /* cards, navbar */
  --cpg-surface-2: #0c1530;
  --cpg-silver: #c9ced6;      /* text / rings */
  --cpg-silver-bright: #e7eaef;
  --cpg-silver-dim: #8790a0;
  --cpg-red: #c8102e;         /* crown band — accents only */
}

/* Bootstrap dark theme, retinted navy/silver. */
[data-bs-theme="dark"] {
  --bs-body-bg: var(--cpg-bg);
  --bs-body-color: #dfe3ea;
  --bs-emphasis-color: var(--cpg-silver-bright);
  --bs-secondary-color: var(--cpg-silver-dim);

  --bs-primary: #2c4f97;
  --bs-primary-rgb: 44, 79, 151;

  --bs-border-color: #26355c;
  --bs-border-color-translucent: rgba(201, 206, 214, 0.14);

  --bs-tertiary-bg: var(--cpg-surface);
  --bs-secondary-bg: var(--cpg-surface-2);

  --bs-link-color: #7ea2e0;
  --bs-link-color-rgb: 126, 162, 224;
  --bs-link-hover-color: #a9c3ef;
}

body {
  /* A faint navy vignette so the dark background reads as deliberate, not flat. */
  background-image:
    radial-gradient(120% 80% at 50% 0%, rgba(22, 48, 110, 0.38) 0%, transparent 55%);
  background-attachment: fixed;
}

/* Navbar carries the badge colours and a silver hairline. */
.navbar {
  background: linear-gradient(180deg, var(--cpg-navy-mid), var(--cpg-navy-deep)) !important;
  border-bottom: 1px solid rgba(201, 206, 214, 0.22) !important;
}
.navbar .navbar-brand,
.navbar .nav-link {
  color: var(--cpg-silver-bright) !important;
}
.navbar .nav-link:hover {
  color: #fff !important;
}

.brand-logo {
  height: 30px;
  width: 30px;
  border-radius: 50%;
  border: 1px solid rgba(201, 206, 214, 0.5);
  object-fit: cover;
}

/* The brand shows the full CPG name; keep it readable without pushing the
   toggler off-screen on a narrow phone. */
.brand-name {
  font-size: 0.95rem;
  line-height: 1.1;
  max-width: 62vw;
}
@media (min-width: 992px) {
  .brand-name { max-width: none; }
}

/* Cards get a subtle silver edge, the way the badge has a metallic rim. */
.card {
  border-color: var(--bs-border-color);
}
.card.bg-body-tertiary {
  background-color: var(--cpg-surface) !important;
}

/* Primary buttons in the badge navy rather than Bootstrap's default blue. */
.btn-primary {
  --bs-btn-bg: var(--cpg-navy);
  --bs-btn-border-color: #2c4f97;
  --bs-btn-hover-bg: #1d3f86;
  --bs-btn-hover-border-color: #3a5da8;
  --bs-btn-active-bg: #10245a;
}

body {
  -webkit-text-size-adjust: 100%;
}

/* Comfortable tap targets on the controls used in the field. */
.btn-lg,
.form-control-lg,
.form-select-lg {
  min-height: var(--cpg-tap-min);
}

/* Keeps iOS Safari from zooming when a field takes focus. */
input,
select,
textarea {
  font-size: 16px;
}

.font-monospace {
  font-variant-ligatures: none;
}

/* Wide tables scroll inside their own container rather than pushing the page
   sideways — matters on a narrow screen. */
.table-responsive {
  -webkit-overflow-scrolling: touch;
}

/* Recording indicator for the voice screen. */
@keyframes cpg-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

.recording-dot {
  animation: cpg-pulse 1.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .recording-dot { animation: none; }
}

/* The live transcript pane: readable, scrollable, never jumps the layout. */
.transcript-pane {
  min-height: 8rem;
  max-height: 40vh;
  overflow-y: auto;
  white-space: pre-wrap;
  line-height: 1.6;
}

.transcript-pane .interim {
  opacity: 0.55;
  font-style: italic;
}