:root {
  --zooloc-navy: #060e1a;
  --zooloc-surface: #0a1728;
  --zooloc-card: #101f33;
  --zooloc-blue: #005d92;
  --zooloc-blue-light: #1684bd;
  --zooloc-amber: #df8637;
  --zooloc-amber-light: #f39d52;
  --zooloc-text: #f3f4f6;
  --zooloc-muted: #9ba8ba;
  --zooloc-border: rgba(255, 255, 255, 0.1);
  --bs-body-bg: var(--zooloc-navy);
  --bs-body-color: var(--zooloc-text);
  --bs-border-color: var(--zooloc-border);
  --bs-primary: var(--zooloc-blue);
  --bs-primary-rgb: 0, 93, 146;
  --bs-link-color: #f3a35e;
  --bs-link-hover-color: #fff;
  --bs-border-radius: 0.8rem;
  --bs-border-radius-lg: 1rem;
  --bs-border-radius-xl: 1.25rem;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { min-width: 320px; }

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(ellipse at 0% 0%, rgba(0, 93, 146, 0.18), transparent 38rem),
    radial-gradient(ellipse at 100% 100%, rgba(223, 134, 55, 0.1), transparent 34rem),
    var(--zooloc-navy);
  color: var(--zooloc-text);
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  line-height: 1.55;
}

h1, h2, h3, h4, h5, h6, .navbar-brand { font-family: Outfit, "Plus Jakarta Sans", sans-serif; }
a { text-decoration: none; }
.text-amber { color: var(--zooloc-amber-light) !important; }
.text-muted { color: var(--zooloc-muted) !important; }

.app-navbar {
  background: rgba(8, 21, 36, 0.96);
  border-bottom: 1px solid var(--zooloc-border);
  box-shadow: 0 0.4rem 1.5rem rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(14px);
}

.navbar-brand { color: #fff; }
.brand-logo-img {
  width: 2.65rem;
  height: 2.65rem;
  border-radius: 0.7rem;
  object-fit: cover;
  box-shadow: 0 0 1rem rgba(223, 134, 55, 0.22);
}
.brand-name { font-size: 1.25rem; font-weight: 800; letter-spacing: 0.01em; }
.brand-name > span { color: var(--zooloc-amber); }
.brand-sub { color: var(--zooloc-muted); font-family: "Plus Jakarta Sans", system-ui, sans-serif; font-size: 0.68rem; font-weight: 500; }
.app-navbar .navbar-toggler { border-color: rgba(255, 255, 255, 0.24); padding: 0.4rem 0.6rem; }
.app-navbar .navbar-toggler:focus { box-shadow: 0 0 0 0.2rem rgba(223, 134, 55, 0.22); }
.app-navbar .nav-link { color: #c2ccd8; padding: 0.65rem 0.8rem; border-radius: 0.65rem; font-size: 0.9rem; font-weight: 600; }
.app-navbar .nav-link:hover, .app-navbar .nav-link.active { color: #fff; background: rgba(0, 93, 146, 0.32); }
.app-navbar .nav-link.active { box-shadow: inset 0 0 0 1px rgba(22, 132, 189, 0.4); }

.btn-amber {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--zooloc-amber);
  --bs-btn-border-color: var(--zooloc-amber);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #c77227;
  --bs-btn-hover-border-color: #c77227;
  --bs-btn-active-bg: #b86621;
  --bs-btn-active-border-color: #b86621;
  --bs-btn-font-weight: 700;
  box-shadow: 0 0.35rem 1.1rem rgba(223, 134, 55, 0.2);
}

.page-heading { margin-bottom: 1.35rem; }
.page-heading h1 { margin: 0; color: #fff; font-size: clamp(1.45rem, 3vw, 2.05rem); font-weight: 700; letter-spacing: -0.025em; }
.page-heading p { max-width: 60rem; margin: 0.45rem 0 0; color: var(--zooloc-muted); font-size: 0.94rem; }
.section-eyebrow { color: var(--zooloc-amber-light); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }

.app-card, .metric-card {
  height: 100%;
  color: var(--zooloc-text);
  background: linear-gradient(145deg, rgba(17, 34, 54, 0.98), rgba(11, 25, 42, 0.98));
  border: 1px solid var(--zooloc-border);
  box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.12);
}
.app-card .card-header { color: #fff; background: transparent; border-bottom-color: var(--zooloc-border); }
.card-title { color: #fff; font-size: 1rem; font-weight: 700; }
.metric-card { overflow: hidden; position: relative; }
.metric-card::after { position: absolute; right: -1.2rem; bottom: -2.8rem; width: 7rem; height: 7rem; border-radius: 50%; background: var(--metric-glow, rgba(0,93,146,.13)); content: ""; }
.metric-label { color: var(--zooloc-muted); font-size: 0.73rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.metric-value { color: #fff; font-family: Outfit, sans-serif; font-size: clamp(1.45rem, 4vw, 2rem); font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.metric-icon { display: grid; width: 2.75rem; height: 2.75rem; flex: 0 0 2.75rem; place-items: center; border: 1px solid var(--metric-border, rgba(22,132,189,.35)); border-radius: 0.8rem; background: var(--metric-bg, rgba(0,93,146,.22)); color: var(--metric-color, #55b8ee); font-size: 1.1rem; }
.metric-blue { --metric-color: #55b8ee; --metric-bg: rgba(0,93,146,.24); --metric-border: rgba(0,93,146,.46); --metric-glow: rgba(0,93,146,.16); }
.metric-amber { --metric-color: #f3a35e; --metric-bg: rgba(223,134,55,.18); --metric-border: rgba(223,134,55,.36); --metric-glow: rgba(223,134,55,.12); }
.metric-rose { --metric-color: #fb7185; --metric-bg: rgba(244,63,94,.16); --metric-border: rgba(244,63,94,.34); --metric-glow: rgba(244,63,94,.12); }
.metric-green { --metric-color: #34d399; --metric-bg: rgba(16,185,129,.16); --metric-border: rgba(16,185,129,.34); --metric-glow: rgba(16,185,129,.12); }
.metric-purple { --metric-color: #a78bfa; --metric-bg: rgba(139,92,246,.16); --metric-border: rgba(139,92,246,.34); --metric-glow: rgba(139,92,246,.12); }

.map-container { min-height: 20rem; width: 100%; overflow: hidden; border: 1px solid var(--zooloc-border); border-radius: 0.8rem; background: #dce7ec; }
.map-container-tall { min-height: 24rem; }
.chart-wrapper { position: relative; width: 100%; height: 17rem; }
.chart-wrapper-sm { height: 14rem; }
.chart-note { color: var(--zooloc-muted); font-size: 0.84rem; }

.table { --bs-table-color: var(--zooloc-text); --bs-table-bg: transparent; --bs-table-border-color: var(--zooloc-border); --bs-table-hover-color: #fff; --bs-table-hover-bg: rgba(0, 93, 146, 0.16); margin-bottom: 0; vertical-align: middle; }
.table > :not(caption) > * > * { padding: 0.8rem 0.75rem; }
.table thead th { color: var(--zooloc-muted); background: rgba(6, 14, 26, 0.48); font-size: 0.7rem; letter-spacing: 0.07em; text-transform: uppercase; white-space: nowrap; }
.table-responsive { border-radius: 0.6rem; }
.badge-soft { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.65rem; border: 1px solid transparent; border-radius: 999px; font-size: 0.74rem; font-weight: 700; white-space: nowrap; }
.badge-suspicion { color: #f5b66f; background: rgba(223,134,55,.14); border-color: rgba(223,134,55,.32); }
.badge-confirmation { color: #fb7185; background: rgba(244,63,94,.14); border-color: rgba(244,63,94,.32); }
.badge-normal { color: #34d399; background: rgba(16,185,129,.14); border-color: rgba(16,185,129,.32); }
.symptom-tag, .location-tag { display: inline-block; margin: 0.12rem 0.12rem 0.12rem 0; padding: 0.22rem 0.5rem; border: 1px solid rgba(0, 93, 146, 0.42); border-radius: 0.4rem; background: rgba(0, 93, 146, 0.18); color: #83d3ff; font-size: 0.75rem; white-space: nowrap; }
.location-tag { border-color: rgba(16,185,129,.25); background: rgba(16,185,129,.1); color: #75e2b7; }

.form-label { color: #dce4ec; font-size: 0.88rem; font-weight: 650; }
.form-control, .form-select, .input-group-text { color: #f3f4f6; border-color: rgba(255,255,255,.15); background-color: #091625; }
.form-control::placeholder { color: #78889d; }
.form-control:focus, .form-select:focus { color: #fff; border-color: var(--zooloc-amber); background-color: #091625; box-shadow: 0 0 0 0.22rem rgba(223,134,55,.18); }
.form-select option { color: #f3f4f6; background: #091625; }
.form-check-input { border-color: rgba(255,255,255,.35); background-color: #091625; }
.form-check-input:checked { border-color: var(--zooloc-blue); background-color: var(--zooloc-blue); }
.form-check-input:focus { border-color: var(--zooloc-amber); box-shadow: 0 0 0 .2rem rgba(223,134,55,.18); }
.choice-card { height: 100%; padding: 0.7rem 0.8rem; border: 1px solid var(--zooloc-border); border-radius: 0.7rem; background: rgba(6,14,26,.42); }
.choice-card:hover { border-color: rgba(223,134,55,.55); }
.form-help { color: var(--zooloc-muted); font-size: 0.8rem; }

.alert-success { color: #8be3be; border-color: rgba(16,185,129,.35); background: rgba(16,185,129,.12); }
.alert-danger { color: #ff9aaa; border-color: rgba(244,63,94,.35); background: rgba(244,63,94,.12); }
.alert-warning { color: #ffd29f; border-color: rgba(223,134,55,.35); background: rgba(223,134,55,.12); }
.app-footer { border-top: 1px solid var(--zooloc-border); background: rgba(10,23,40,.82); color: var(--zooloc-muted); }
.app-footer a { color: #c6d5df; }
.app-footer a:hover { color: var(--zooloc-amber-light); }
.code-block { margin: 0; padding: 1rem; overflow: auto; border: 1px solid var(--zooloc-border); border-radius: 0.75rem; background: #071321; color: #b6d8eb; font: 0.78rem/1.65 ui-monospace, SFMono-Regular, Menlo, monospace; }
.risk-banner { background: linear-gradient(120deg, rgba(0,93,146,.35), rgba(16,31,51,.96) 55%, rgba(223,134,55,.12)); }
.rank-item { padding: 0.9rem; border: 1px solid var(--zooloc-border); border-radius: 0.75rem; background: rgba(6,14,26,.42); }
.progress { height: 0.45rem; background: rgba(255,255,255,.08); }
.progress-bar { background: linear-gradient(90deg, var(--zooloc-blue-light), var(--zooloc-amber)); }
.detail-label { display: block; margin-bottom: 0.25rem; color: var(--zooloc-muted); font-size: 0.71rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; }
.detail-value { color: #fff; font-weight: 650; overflow-wrap: anywhere; }
.occurrence-photo { max-height: 26rem; object-fit: contain; background: #071321; }
.occurrence-photo-trigger { display: block; width: 100%; padding: 0; border: 0; border-radius: 0.75rem; background: transparent; cursor: zoom-in; }
.occurrence-photo-trigger:focus-visible { outline: 3px solid var(--zooloc-amber); outline-offset: 4px; }
.occurrence-photo-modal { width: 90vw; max-width: 90vw; height: 90dvh; max-height: 90dvh; margin: auto; padding: 0; border: 1px solid var(--zooloc-border); border-radius: var(--bs-border-radius-lg); background: #071321; color: #fff; overflow: hidden; }
.occurrence-photo-modal::backdrop { background: rgba(0, 0, 0, 0.8); }
.occurrence-photo-content { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.occurrence-photo-header { display: flex; flex: 0 0 auto; align-items: center; gap: 0.75rem; padding: 1rem; border-bottom: 1px solid var(--zooloc-border); }
.occurrence-photo-title { min-width: 0; margin: 0; font-size: 1rem; overflow-wrap: anywhere; }
.occurrence-photo-close { flex: 0 0 auto; min-height: 44px; min-width: 44px; margin-left: auto; }
.occurrence-photo-body { display: flex; flex: 1 1 auto; min-height: 0; align-items: center; justify-content: center; padding: 1rem; overflow: hidden; }
.occurrence-photo-full { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; }
.id-code { color: #8bc9eb; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.82rem; overflow-wrap: anywhere; }

@media (max-width: 767.98px) {
  .occurrence-photo-modal { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border: 0; border-radius: 0; }
  .occurrence-photo-body { padding: 0; }
}

@media (max-width: 575.98px) {
  .map-container { min-height: 18rem; }
  .map-container-tall { min-height: 20rem; }
  .chart-wrapper { height: 15rem; }
  .chart-wrapper-sm { height: 13rem; }
  .table > :not(caption) > * > * { padding: 0.68rem 0.6rem; }
}