:root {
  --sb-bg: #fff;
  --sb-card-bg: #f8f9fa;
  --sb-text: #222;
  --sb-muted: #666;
  --sb-border: #e0e0e0;
  --sb-accent: var(--vtc-primary, #c80020);
  --sb-accent-hover: var(--vtc-primary-dark, #a00018);
  --sb-btn-text: #fff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --sb-bg: #1a202c;
    --sb-card-bg: #2d3748;
    --sb-text: #e2e8f0;
    --sb-muted: #a0aec0;
    --sb-border: #495057;
    --sb-accent: var(--vtc-primary, #63b3ed);
    --sb-accent-hover: var(--vtc-primary-dark, #4299e1);
    --sb-btn-text: #1a202c;
  }
}
body {
  background: var(--sb-bg) !important;
  color: var(--sb-text) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0.2px;
}
.card, .template-container, .timestamp-info {
  background: var(--sb-card-bg) !important;
  color: var(--sb-text) !important;
  border: 1px solid var(--sb-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}
.card-header {
  background: var(--sb-card-bg) !important;
  color: var(--sb-text) !important;
  border-bottom: 1px solid var(--sb-border) !important;
  font-weight: 600;
}
.btn-primary, .btn-info, .btn-danger, .btn-success, .btn-warning {
  background: var(--sb-accent) !important;
  border-color: var(--sb-accent) !important;
  color: var(--sb-btn-text) !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 16px rgba(0,0,0,0.08);
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease, border-color .12s ease;
}
.btn-primary:hover, .btn-info:hover, .btn-danger:hover, .btn-success:hover, .btn-warning:hover {
  background: var(--sb-accent-hover) !important;
  border-color: var(--sb-accent-hover) !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.12);
}
.btn:active {
  transform: translateY(0) scale(.99);
  box-shadow: 0 6px 16px rgba(0,0,0,0.10);
}
.btn-secondary {
  background: var(--sb-border) !important;
  color: var(--sb-text) !important;
  border-color: var(--sb-border) !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 16px rgba(0,0,0,0.08);
}
.btn-secondary:hover {
  background: var(--sb-muted) !important;
  color: var(--sb-bg) !important;
}
.text-muted, .small.text-muted {
  color: var(--sb-muted) !important;
}
.list-group-item {
  background: var(--sb-card-bg) !important;
  color: var(--sb-text) !important;
  border-color: var(--sb-border) !important;
  border-radius: 10px !important;
}
.alert-incomplete, .alert-danger, .bg-danger, .border-danger {
  background: #ffebee;
  color: var(--vtc-accent, #e53935) !important;
  border-color: var(--vtc-accent, #e53935) !important;
}
.bg-danger, .btn-danger {
  background: var(--sb-accent) !important;
  color: #fff !important;
}
::-webkit-scrollbar-thumb {
  background: var(--sb-accent);
}
::-webkit-scrollbar {
  background: var(--sb-bg);
} 
/* --- Dark mode table and form styling --- */
.table, .table-bordered, .table-hover, .table-responsive, .table thead th, .table tbody tr, .table td, .table th {
  background: var(--sb-card-bg) !important;
  color: var(--sb-text) !important;
  border-color: var(--sb-border) !important;
}
.table thead th {
  background: var(--sb-bg) !important;
  color: var(--sb-text) !important;
  border-bottom: 2px solid var(--sb-border) !important;
  font-weight: 700;
}
.table-hover tbody tr:hover {
  background: rgba(99, 179, 237, 0.12) !important; /* subtle blue highlight */
}
.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: rgba(0, 0, 0, 0.04) !important;
}

.form-control, .form-select {
  background: var(--sb-card-bg) !important;
  color: var(--sb-text) !important;
  border: 1px solid var(--sb-border) !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05) inset;
}
.form-control:focus, .form-select:focus {
  background: var(--sb-card-bg) !important;
  color: var(--sb-text) !important;
  border-color: var(--sb-accent) !important;
  box-shadow: 0 0 0 .2rem color-mix(in oklab, var(--sb-accent) 25%, transparent), 0 2px 8px rgba(0,0,0,0.08) inset !important;
} 

/* --- Navbar link color override for all pages --- */
.navbar .nav-link, .navbar a {
  color: var(--sb-accent) !important;
  font-weight: 600;
}
.navbar .nav-link:hover, .navbar a:hover, .navbar .nav-link:focus, .navbar a:focus {
  color: var(--sb-accent-hover) !important;
} 
/* Subtle elevated navbar background without changing layout */
.navbar {
  backdrop-filter: saturate(140%) blur(4px);
  -webkit-backdrop-filter: saturate(140%) blur(4px);
}

/* --- Slot selection grid improvements --- */
#slot-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  max-height: 420px;
  overflow-y: auto;
  background: var(--sb-card-bg);
  border-radius: 8px;
  padding: 0.5rem 0.5rem 0.25rem 0.5rem;
  margin-bottom: 0.5rem;
}
#slot-grid .slot-btn {
  min-width: 110px;
  min-height: 54px;
  font-size: 1rem;
  font-weight: 500;
  border-radius: 8px;
  border: 2px solid var(--sb-border);
  background: var(--sb-bg);
  color: var(--sb-text);
  transition: all 0.15s;
  box-shadow: none;
  margin-bottom: 0.25rem;
  white-space: normal;
  word-break: break-word;
  backdrop-filter: saturate(120%);
}
#slot-grid .slot-btn.active, #slot-grid .slot-btn.selected {
  background: var(--sb-accent);
  color: var(--sb-btn-text);
  border-color: var(--sb-accent-hover);
  box-shadow: 0 2px 8px rgba(200,0,32,0.08);
}
#slot-grid .slot-btn:hover:not(:disabled) {
  background: var(--sb-accent-hover);
  color: var(--sb-btn-text);
  border-color: var(--sb-accent);
  transform: translateY(-1px);
}
#slot-grid .slot-btn:disabled, #slot-grid .slot-btn.disabled {
  background: #4a5568 !important;
  color: #a0aec0 !important;
  border-color: #495057 !important;
  cursor: not-allowed;
  opacity: 0.7;
}
/* Alert polish */
.alert {
  border-radius: 12px !important;
  border-width: 1px !important;
  box-shadow: 0 8px 22px rgba(0,0,0,0.08);
}
.alert-success { border-color: color-mix(in oklab, #48bb78 40%, #0000) !important; }
.alert-info { border-color: color-mix(in oklab, #63b3ed 40%, #0000) !important; }
.alert-warning { border-color: color-mix(in oklab, #ed8936 40%, #0000) !important; }
.alert-danger { border-color: color-mix(in oklab, #e53935 40%, #0000) !important; }

/* Badge and pill aesthetics */
.badge, .btn .badge {
  border-radius: 999px !important;
  padding: .4rem .65rem !important;
  font-weight: 600 !important;
}

/* Pagination look without layout change */
.pagination .page-link {
  border-radius: 10px !important;
  border-color: var(--sb-border) !important;
  color: var(--sb-text) !important;
}
.pagination .page-item.active .page-link {
  background: var(--sb-accent) !important;
  border-color: var(--sb-accent) !important;
  color: var(--sb-btn-text) !important;
}

/* Table density tweak for readability */
.table td, .table th {
  vertical-align: middle !important;
}

/* Subtle divider polish */
hr {
  border-top: 1px solid var(--sb-border) !important;
  opacity: 1 !important;
}

/* Improve small text readability */
small, .small, .form-text {
  letter-spacing: .15px;
}
@media (max-width: 900px) {
  #slot-grid .slot-btn { min-width: 90px; font-size: 0.95rem; }
}
@media (max-width: 600px) {
  #slot-grid { max-height: 260px; }
  #slot-grid .slot-btn { min-width: 80px; font-size: 0.92rem; }
}