:root{
  --serna-blue:#2db7d8;
  --serna-green:#a6c61f;
  --serna-dark:#0f141a;
  --serna-dark-2:#151c24;
  --serna-border:rgba(255,255,255,.08);
}

body{
  background:#f6f7f9;
}

/* Navbar */
.navbar.serna-nav{
  background:linear-gradient(90deg,var(--serna-dark),var(--serna-dark-2));
  border-bottom:2px solid rgba(166,198,31,.55);
}

.navbar.serna-nav .navbar-brand{
  display:flex;
  align-items:center;
  gap:.6rem;
  font-weight:700;
  letter-spacing:.2px;
}

.navbar.serna-nav .brand-logo{
  width:30px;
  height:30px;
  object-fit:contain;
  border-radius:6px;
}

.navbar.serna-nav .navbar-brand span{
  color:#eaf2fb;
}

.navbar.serna-nav .nav-link{
  color:rgba(255,255,255,.80) !important;
}

.navbar.serna-nav .nav-link:hover,
.navbar.serna-nav .nav-link:focus{
  color:#fff !important;
}

.navbar.serna-nav .nav-link.active{
  color:#fff !important;
  position:relative;
}

.navbar.serna-nav .nav-link.active::after{
  content:"";
  position:absolute;
  left:.4rem;
  right:.4rem;
  bottom:.15rem;
  height:2px;
  background:linear-gradient(90deg,var(--serna-blue),var(--serna-green));
  border-radius:2px;
}

/* Links */
a{ color:var(--serna-blue); }
a:hover{ color:#189abb; }

/* Buttons (Bootstrap override) */
.btn-primary{
  background:var(--serna-blue);
  border-color:var(--serna-blue);
}
.btn-primary:hover{ background:#1ea5c7; border-color:#1ea5c7; }

.btn-success{
  background:var(--serna-green);
  border-color:var(--serna-green);
}
.btn-success:hover{ background:#8fb010; border-color:#8fb010; }

/* Cards / tables */
.card, .table{
  border-color:rgba(0,0,0,.07);
}

.table thead th{
  background:#fbfbfc;
}

/* Weather widget */
.weather-pill{
  display:flex;
  align-items:center;
  gap:.5rem;
  padding:.2rem .6rem;
  border:1px solid var(--serna-border);
  border-radius:999px;
  color:rgba(255,255,255,.86);
  background:rgba(255,255,255,.06);
  font-size:.9rem;
}
.weather-pill strong{ color:#fff; }

/* Navbar logo */
.serna-logo{height:100px;width:auto;display:block;}

/* Mini weather in navbar */
.serna-weather-mini select{max-width:160px;}
.serna-weather-mini .serna-weather-text{white-space:nowrap;}