:root{
  --primary:#0b5ed7;
  --primary-600:#0a58ca;
  --muted:#6c757d;
  --surface:#ffffff;
  --bg:#f6f7f9;
  --text:#212529;
  --sidebar-bg: linear-gradient(180deg,#ffffff 0%, #f8fbff 100%);
}

html { font-size:14px; font-family:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; position:relative; min-height:100%; }
@media (min-width:768px){ html { font-size:16px; } }

body { margin-bottom:60px; background-color:var(--bg); color:var(--text); }

/* Topbar */
.topbar {
  background: linear-gradient(90deg, var(--primary), var(--primary-600));
  color: #fff;
  padding: .5rem 1rem;
}
.topbar .navbar-brand { color:#fff; text-decoration:none; }
.topbar .brand-logo { font-weight:700; font-size:1.05rem; color:#fff; }
.topbar .brand-name { opacity:.95; margin-left:.25rem; color:#fff; font-weight:600; }
.topbar .btn-outline-light { color:#fff; border-color: rgba(255,255,255,0.2); }
.topbar .me-3.text-white { color: rgba(255,255,255,0.9) !important; }

/* Sidebar styling (stronger specificity to override Bootstrap) */
aside.sidebar.custom-sidebar {
  width: 240px;
  min-height: calc(100vh - 112px);
  background: var(--sidebar-bg);
  border-right: 1px solid rgba(16,24,40,0.06);
  transition: transform .18s ease, box-shadow .18s ease;
  box-shadow: 0 1px 0 rgba(11,78,135,0.02);
}
aside.sidebar.custom-sidebar.collapsed { transform: translateX(-100%); }

/* Sidebar inner */
.sidebar-inner { padding: 1rem; }

/* Nav links */
.sidebar .nav-link {
  color: #2c3e50;
  padding: .6rem .6rem;
  border-radius: .45rem;
  display:flex;
  align-items:center;
  gap:.6rem;
  transition: background-color .12s ease, color .12s ease, transform .06s ease;
  font-weight:500;
}
.sidebar .nav-link i { color: var(--primary); font-size:1.05rem; }

/* Hover & focus */
.sidebar .nav-link:hover,
.sidebar .nav-link:focus {
  background: rgba(13,110,253,0.06);
  color: var(--primary);
  transform: translateX(2px);
  text-decoration:none;
}

/* Active */
.sidebar .nav-link.active {
  background: linear-gradient(90deg, rgba(11,94,215,0.08), rgba(11,94,215,0.02));
  color: var(--primary);
  font-weight:700;
  box-shadow: inset 4px 0 0 0 var(--primary);
}

/* Content card */
.content-card { background: var(--surface); border-radius: .5rem; }
.content-card h3, .content-card h1, .content-card h2 { font-weight:700; color: #111827; }

/* Form controls and tables */
.form-control { border-radius: .35rem; box-shadow:none; }
.form-control:focus { box-shadow: 0 0 0 0.18rem rgba(13,110,253,0.12); border-color: var(--primary-600); }

/* Tables */
.table { background: var(--surface); border-radius: .25rem; overflow:hidden; }
.table th { background: #fbfdff; font-weight:700; }

/* Buttons */
.btn { border-radius: .45rem; font-weight:600; }
.btn-info { background-color: #0dcaf0; border-color: #0dcaf0; color: #04323a; }
.btn-success { background-color: #198754; border-color: #198754; color: #fff; }

/* Badges */
.badge.bg-warning { background-color:#ffc107; color:#212529; font-weight:700; }

/* Action buttons styling (View / Update) */
.action-btns .btn {
  min-width: 92px;
  padding: .45rem .75rem;
  border-radius: .5rem;
  box-shadow: 0 4px 12px rgba(16,24,40,0.06);
  font-weight: 700;
  transition: transform .08s ease, box-shadow .12s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* individual colours */
.btn-view {
  background: linear-gradient(180deg,#17c3d3,#0dcaf0);
  color: #04282b;
  border: none;
}
.btn-view:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(16,24,40,0.08); }

.btn-update {
  background: linear-gradient(180deg,#1e7e5b,#198754);
  color: #fff;
  border: none;
}
.btn-update:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(16,24,40,0.08); }

/* Responsive: show buttons inline on very small screens */
@media (max-width:575.98px) {
  .action-btns { flex-direction: row !important; gap: .5rem !important; }
  .action-btns .btn { min-width: 72px; padding: .4rem .6rem; }
}

/* keep table action cell vertically centered */
.table td.align-middle { vertical-align: middle; }