/* Navbar styling for Light/Dark mode */
.navbar{
  background-color: rgba(255,255,255,.95) !important;
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
}
@media(prefers-color-scheme:dark){
  .navbar{
    background-color: rgba(20,30,50,.85) !important;
    backdrop-filter: blur(30px) saturate(160%);
    -webkit-backdrop-filter: blur(30px) saturate(160%);
  }
}
.btn{
  border-radius:12px;
  font-weight:700;
  letter-spacing:.2px;
  color: #fff !important;
  padding: 10px 18px;
  transition:transform .12s ease,box-shadow .12s ease,background-color .12s ease;
  box-shadow: 0 6px 18px rgba(8,22,34,.10);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(8,22,34,.14)}
.btn-primary{background-color:var(--accent-teal);color:#042926!important}
.btn-primary:hover{background-color:color-mix(in srgb, var(--accent-teal) 80%, black 20%)}
.btn-secondary{background-color:var(--accent-blue);color:#04243b!important}
.btn-secondary:hover{background-color:color-mix(in srgb, var(--accent-blue) 80%, black 20%)}

/* Dark mode: ensure high contrast buttons */
@media(prefers-color-scheme:dark){
  .btn{border-color: rgba(255,255,255,.06);box-shadow:none}
  .btn-primary{background: linear-gradient(135deg,#0aa49f 0%,#078f8d 100%);color:#fff!important;border-color:rgba(0,0,0,.35)}
  .btn-primary:hover{background: linear-gradient(135deg,#12bfb9 0%,#089d99 100%)}
  .btn-secondary{background: linear-gradient(135deg,#2a86d9 0%,#1564b8 100%);color:#fff!important;border-color:rgba(0,0,0,.35)}
  .btn-secondary:hover{background: linear-gradient(135deg,#3b98ef 0%,#1c76d0 100%)}
  /* Ensure ghost buttons keep readable border/text */
  .btn-ghost{background:transparent;color:var(--text)!important;border-color:rgba(255,255,255,.08)}
  /* Cards: use theme text colors for readability */
  .card, .glass{color:var(--text)}
  .card .card-title, .card h2, .card h3{color:var(--text-strong)}
}

/* Nav pills: compact, colorized, responsive */
.nav-pill{
  display:inline-block;
  padding:.35rem .75rem;
  border-radius:999px;
  font-size:0.95rem;
  color:var(--text);
  background:transparent;
  transition:background .15s ease,color .15s ease,transform .08s ease;
  border:1px solid transparent;
}
.nav-pill:hover{transform:translateY(-2px)}
.nav-pill.active, .nav-pill:active{background:linear-gradient(180deg,var(--ws-accent-teal),var(--ws-accent-blue));color:#fff;border-color:rgba(0,0,0,.12)}

/* Reduce navbar spacing and toggler size */
.navbar-brand img{height:36px}
.navbar-toggler{padding:.25rem .5rem}

/* Hero sizing tweaks for better Bootstrap flow */
.hero{padding:2.25rem 0}

/* Compact glass padding */
.glass{padding:1.25rem}

/* Make card padding consistent with Bootstrap */
.card{padding:1rem}

/* Cards and glass surfaces: prefer project's glass look when using Bootstrap components */
.card{
  background: linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.05));
  border:1px solid var(--ws-border);
  border-radius:12px;
  box-shadow: 0 6px 20px rgba(16,33,54,.16);
}
.glass{ /* ensure Bootstrap utilities don't fight glass */
  background: linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.06));
  border:1px solid var(--ws-border);
  border-radius:18px;
  backdrop-filter: blur(16px) saturate(120%);
}

/* Navbar: keep transparent background but use utility spacing */
.nav-main.navbar{padding-left:0;padding-right:0}

/* Metrics responsive: convert grid to flex for Bootstrap flow */
.metrics{display:flex;gap:14px;flex-wrap:wrap}
.metric{flex:1 1 30%;min-width:160px}

/* Small helpers to preserve original spacing where needed */
.wrap.container{max-width:1200px}

/* Keep slider visuals consistent */
.slider{border-radius:16px}