:root {
  --brand:#1e88e5;
  --brand-dark:#1565c0;
  --ink:#0d1b2a;
  --muted:#6c757d;
  --bg:#f8fafc;
}

html, body { height: 100%; }
body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, 'Helvetica Neue', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
  color: var(--ink);
  background: var(--bg);
}

.navbar-brand img { height: 36px; width:auto; }
.hero {
  background: radial-gradient(1200px 600px at 70% -20%, rgba(30,136,229,.12), transparent 60%), linear-gradient(180deg, #ffffff, #eef6ff);
  border-bottom: 1px solid #e9ecef;
}
.hero h1 { font-weight: 800; letter-spacing: -.02em; }
.section-title { font-weight: 700; letter-spacing: -.01em; }
.card {
  border: 1px solid #e9ecef;
  border-radius: 1rem;
}
.card .badge { font-size: .75rem; }
iframe.windy {
  width: 100%;
  min-height: 420px;
  border: 0;
  border-radius: 1rem;
}
.footer {
  border-top: 1px solid #e9ecef;
  color: var(--muted);
}
a { text-decoration: none; }
a:hover { text-decoration: underline; }


/* ==== Dashboard theme extras ==== */
:root{
  --brand:#2563eb;
  --brand-2:#22c55e;
  --brand-3:#f59e0b;
  --brand-4:#a855f7;
  --card:#ffffff;
  --ring: rgba(37,99,235,.15);
}
.hero {
  background: radial-gradient(1200px 600px at 80% -20%, rgba(168,85,247,.10), transparent 55%),
              radial-gradient(900px 500px at -10% -10%, rgba(34,197,94,.10), transparent 50%),
              linear-gradient(180deg, #ffffff, #f5f7ff);
}
.kpis .card {
  box-shadow: 0 10px 25px -10px rgba(0,0,0,.15);
}
.kpi {
  display:flex; align-items:center; gap:.75rem;
}
.kpi .icon {
  width: 40px; height:40px; border-radius:.75rem; display:grid; place-items:center;
  background: var(--ring);
}
.kpi .num { font-weight: 800; font-size: 1.375rem; letter-spacing: -.02em; }
.nav-pills .nav-link.active{
  background-image: linear-gradient(135deg, var(--brand), var(--brand-4));
  color:#fff;
}
.badge-soft{
  background: #f1f5f9;
  color: #0f172a;
  border:1px solid #e2e8f0;
}
.card-gradient-blue{ background: linear-gradient(135deg,#eff6ff,#f0f9ff); }
.card-gradient-amber{ background: linear-gradient(135deg,#fff7ed,#fffbeb); }
.card-gradient-green{ background: linear-gradient(135deg,#f0fdf4,#ecfeff); }
.card-bleed{
  border:1px solid #e9ecef; border-radius:1rem; overflow:hidden;
}
.card-bleed .card-header{
  background: linear-gradient(135deg, rgba(37,99,235,.08), rgba(168,85,247,.08));
}
.list-cards .list-group-item{
  border:0; padding:.6rem .75rem; border-radius:.75rem; margin-bottom:.35rem;
  background:#f8fafc;
}
.list-cards .list-group-item:hover{ background:#f1f5f9; }


/* Dashboard accents */
.card.border-0 { box-shadow: 0 6px 20px rgba(13,110,253,.08); }
#kpi-cards .card-body { background: linear-gradient(180deg, #ffffff, #f7faff); }
#kpi-cards [data-kpi] { letter-spacing: -0.02em; }
.nav-pills .nav-link { border-radius: 999px; }
.nav-pills .nav-link.active { background: var(--brand-dark); }
.badge.gradient { background: linear-gradient(90deg, #e3f2fd, #f1f8ff); color:#0d47a1; }

/* Link cards for Neverin */
.link-card { transition: transform .15s ease, box-shadow .15s ease; }
.link-card:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,.08); }
.navbar .nav-link { font-weight: 500; }
.navbar .nav-link .bi { font-size: 1rem; opacity:.9; }


/* Live bar */
.livebar { background: linear-gradient(90deg, #e3f2fd, #f1f8ff); border-bottom: 1px solid #e5eef9; }
[data-bs-theme="dark"] .livebar { background: linear-gradient(90deg, #0b1b2a, #0e2236); border-bottom-color: #1f3446; }

/* Dark mode base */
:root, [data-bs-theme="light"] { --surface: #ffffff; }
[data-bs-theme="dark"] { --bg:#0b1620; --ink:#e9eef5; --surface:#0f1e2d; }
[data-bs-theme="dark"] body { background: var(--bg); color: var(--ink); }
[data-bs-theme="dark"] .card { background: var(--surface); border-color: #254361; }
[data-bs-theme="dark"] .footer { border-top-color: #254361; }

/* KPI chips */
#kpi-chips .badge {
  font-weight: 600;
  padding: .5rem .75rem;
  border-color: rgba(0,0,0,.08) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.05);
}

/* Colorful KPI cards */
#kpi-cards .col-6:nth-child(1) .card-body{ background: linear-gradient(180deg,#ffffff,#e8f1ff); }
#kpi-cards .col-6:nth-child(2) .card-body{ background: linear-gradient(180deg,#ffffff,#e9fff1); }
#kpi-cards .col-6:nth-child(3) .card-body{ background: linear-gradient(180deg,#ffffff,#fff2e4); }
#kpi-cards .col-6:nth-child(4) .card-body{ background: linear-gradient(180deg,#ffffff,#f5e9ff); }
#kpi-cards .col-6:nth-child(5) .card-body{ background: linear-gradient(180deg,#ffffff,#fffbe6); } /* UV */
#kpi-cards .col-6:nth-child(6) .card-body{ background: linear-gradient(180deg,#ffffff,#e6fbff); } /* More */

/* KPI specific styles for UV and Sea */
.kpi-card { border-radius: 1rem; }
.kpi-uv { }
.kpi-sea { background: linear-gradient(180deg, #e0f7fa, #f0fbff); }
.kpi-uv-green .card-body { background: linear-gradient(180deg, #e8f5e9, #f7fff8); }   /* 0-2 */
.kpi-uv-yellow .card-body { background: linear-gradient(180deg, #fff9c4, #fffde7); }  /* 3-5 */
.kpi-uv-orange .card-body { background: linear-gradient(180deg, #ffe0b2, #fff3e0); }  /* 6-7 */
.kpi-uv-red .card-body { background: linear-gradient(180deg, #ffcdd2, #ffe5e7); }     /* 8-10 */
.kpi-uv-purple .card-body { background: linear-gradient(180deg, #e1bee7, #f3e5f5); }  /* 11+ */

/* Slight color accents for base KPI cards */
#kpi-cards .card.h-100.border-0.shadow-sm .card-body { background: linear-gradient(180deg, #fbfcff, #f4f8ff); }
#kpi-cards .card.shadow-sm.h-100.border-0 .card-body { background: linear-gradient(180deg, #fbfcff, #f6f7fb); }

/* Icon tones per card (optional subtle) */
.kpi-uv-yellow i, .kpi-uv-orange i, .kpi-uv-red i, .kpi-uv-purple i, .kpi-uv-green i { color: #555; }
.kpi-sea i { color: #007f8c; }


/* UV categories */
.card.uv-low .card-body { background: linear-gradient(180deg, #f1fff1, #e6ffe6); }
.card.uv-moderate .card-body { background: linear-gradient(180deg, #fffbe6, #fff5cc); }
.card.uv-high .card-body { background: linear-gradient(180deg, #fff3e6, #ffe0bf); }
.card.uv-very-high .card-body { background: linear-gradient(180deg, #ffe6e6, #ffc7c7); }
.card.uv-extreme .card-body { background: linear-gradient(180deg, #f6e6ff, #e7d0ff); }

.badge-uv-low { background:#2e7d32 !important; }
.badge-uv-moderate { background:#fbc02d !important; color:#000 !important; }
.badge-uv-high { background:#fb8c00 !important; }
.badge-uv-very-high { background:#e53935 !important; }
.badge-uv-extreme { background:#8e24aa !important; }

/* Sea temperature categories */
.badge-sea-cold { background:#0277bd !important; }
.badge-sea-pleasant { background:#00acc1 !important; }
.badge-sea-warm { background:#26a69a !important; }

/* Slightly more colorful KPI cards */
.kpi-col .card { border-radius: 1rem; }
.kpi-col .card-body { background: linear-gradient(180deg, #ffffff, #f6f9ff); }


/* KPI value coloring */
.kpi-val { transition: color .25s ease; }
.kpi-green { color: #2e7d32; }    /* ok */
.kpi-yellow { color: #f9a825; }   /* caution */
.kpi-orange { color: #ef6c00; }   /* warning */
.kpi-red { color: #c62828; }      /* alert */
.kpi-blue { color: #1976d2; }     /* cold / water */
.kpi-teal { color: #00897b; }     /* sea pleasant */
.kpi-purple { color: #6a1b9a; }   /* uv extreme / pressure note */
.kpi-gray { color: #546e7a; }     /* neutral */


/* === KPI unified sizing & colors === */
.kpi-card .card-body{ min-height: 160px; display:flex; flex-direction:column; justify-content:space-between; }
.kpi-value{ font-variation-settings: 'wght' 700; }
.kpi-green{ color:#1B5E20; }
.kpi-yellow{ color:#8D6E00; }
.kpi-orange{ color:#BF360C; }
.kpi-red{ color:#B71C1C; }
.kpi-purple{ color:#6A1B9A; }
.kpi-blue{ color:#0D47A1; }
.kpi-teal{ color:#00695C; }
.kpi-neutral{ color:#0d1b2a; }
/* lighten icon color */
.kpi-card i{ opacity:.6; }