:root {
  --brand-navy: #0b2545;
  --brand-blue: #13315c;
  --brand-accent: #1e6091;
  --brand-gold: #c9a227;
}

* { font-family: 'Sarabun', sans-serif; }

body {
  background-color: #f4f6f9;
}

/* ---------- Navbar ---------- */
.app-navbar {
  background: linear-gradient(90deg, var(--brand-navy), var(--brand-blue));
  padding: .6rem 0;
}
.app-navbar .navbar-brand,
.app-navbar .nav-link {
  color: #ffffff !important;
  font-weight: 500;
}
.app-navbar .nav-link:hover {
  color: var(--brand-gold) !important;
}
.app-navbar .brand-text {
  font-weight: 700;
  font-size: 1.05rem;
}
.user-chip {
  background: rgba(255,255,255,.08);
  padding: .3rem .7rem;
  border-radius: 999px;
}

/* ---------- Stat cards ---------- */
.stat-card { border-radius: .9rem; }
.stat-icon {
  width: 52px;
  height: 52px;
  border-radius: .75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
}

/* ---------- Cards / tables ---------- */
.card { border-radius: .9rem; }
.table thead th { font-weight: 600; color: #445; border-bottom-width: 1px; }

/* ---------- Station list ---------- */
.station-item.active {
  background-color: var(--brand-accent);
  border-color: var(--brand-accent);
}
.station-item.active .badge {
  background-color: #fff !important;
  color: var(--brand-accent) !important;
}
.station-list::-webkit-scrollbar { width: 6px; }
.station-list::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 6px; }

/* ---------- Login page ---------- */
.login-body {
  min-height: 100vh;
  background: radial-gradient(circle at top left, #13315c, #0b2545 60%);
}
.login-card {
  width: 100%;
  max-width: 420px;
  border-radius: 1rem;
}

/* ---------- Pagination ---------- */
.pagination .page-link { color: var(--brand-accent); }
.pagination .page-item.active .page-link {
  background-color: var(--brand-accent);
  border-color: var(--brand-accent);
}

@media (max-width: 767px) {
  .app-navbar .brand-text { font-size: .85rem; }
}