html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

:root {
  --bg: #ffffff;
  --text: #212529;
  --muted: #6c757d;
  --card: #f8f9fa;
  --primary: #0d6efd;
  --accent: #198754;
}

.theme-dark {
  --bg: #0f1222;
  --text: #e2e6ea;
  --muted: #a3a7ad;
  --card: #171a2b;
  --primary: #4ea8de;
  --accent: #7bd389;
}

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

.navbar {
  background: var(--card) !important;
}

.navbar .nav-link,
.navbar .navbar-brand {
  color: var(--text) !important;
}

.navbar .nav-link.active,
.navbar .nav-link:hover {
  color: var(--primary) !important;
}

.card, .box-shadow {
  background: var(--card);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}

.table { color: var(--text); }
.table thead { background: var(--card); }

.btn-primary { background-color: var(--primary); border-color: var(--primary); }
.btn-success { background-color: var(--accent); border-color: var(--accent); }

.form-control, .form-select {
  background: var(--bg);
  color: var(--text);
  border-color: rgba(0,0,0,.15);
}

.form-control:focus, .form-select:focus, .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem var(--bg), 0 0 0 0.25rem var(--primary);
}

.footer { background: var(--card); }

/* Utility spacing for forms */
form .form-group { margin-bottom: 1rem; }

/* DataTables override (if used) */
.dataTable thead th { color: var(--text); }
.dataTable tbody tr.selected { outline: 2px solid var(--primary); }