/* ── Theme variables ── */
:root {
  --mb-bg:          #080d14;
  --mb-surface:     #0d1b2e;
  --mb-surface-2:   #091525;
  --mb-border:      #162740;
  --mb-accent:      #1565c0;
  --mb-accent-hov:  #1976d2;
  --mb-text:        #c9d6e3;
  --mb-text-muted:  #5a7a9a;
}

/* ── Base ── */
html, body { height: 100%; }
body { background: var(--mb-bg) !important; color: var(--mb-text) !important; }

/* ── Navbar ── */
.navbar { background: #060a12 !important; border-bottom: 1px solid var(--mb-border); }
.navbar-brand, .nav-link { color: var(--mb-text) !important; }
.nav-link:hover, .nav-link.active { color: #fff !important; }

/* ── Cards ── */
.card { background: var(--mb-surface) !important; border-color: var(--mb-border) !important; color: var(--mb-text); }
.card-header { background: var(--mb-surface-2) !important; border-color: var(--mb-border) !important; color: var(--mb-text) !important; }
.card-footer { background: var(--mb-surface-2) !important; border-color: var(--mb-border) !important; }

/* ── Tables ── */
.table { color: var(--mb-text) !important; }
.table td, .table th { border-color: var(--mb-border) !important; }
.table-light { --bs-table-bg: #0a1525; color: var(--mb-text-muted) !important; }
.table-hover tbody tr:hover td { background: #0f2035 !important; color: var(--mb-text) !important; }
.table-responsive { background: var(--mb-surface); }

/* ── Forms ── */
.form-control, .form-select, textarea.form-control {
  background-color: var(--mb-surface-2) !important;
  border-color: var(--mb-border) !important;
  color: var(--mb-text) !important;
}
.form-control:focus, .form-select:focus {
  background-color: var(--mb-surface-2) !important;
  border-color: var(--mb-accent) !important;
  color: var(--mb-text) !important;
  box-shadow: 0 0 0 .2rem rgba(21,101,192,.3) !important;
}
.form-control::placeholder, textarea::placeholder { color: var(--mb-text-muted) !important; opacity: 1; }
.form-label { color: var(--mb-text); }
.form-check-input { background-color: var(--mb-surface-2); border-color: var(--mb-border); }
.form-check-input:checked { background-color: var(--mb-accent); border-color: var(--mb-accent); }
.form-check-label { color: var(--mb-text); }
.input-group-text { background: #0a1525 !important; border-color: var(--mb-border) !important; color: var(--mb-text-muted) !important; }

/* ── Buttons ── */
.btn-primary { background: var(--mb-accent) !important; border-color: var(--mb-accent) !important; color: #fff !important; }
.btn-primary:hover { background: var(--mb-accent-hov) !important; border-color: var(--mb-accent-hov) !important; }
.btn-outline-primary { color: #5b9cf6 !important; border-color: #5b9cf6 !important; }
.btn-outline-primary:hover, .btn-outline-primary.active { background: var(--mb-accent) !important; border-color: var(--mb-accent) !important; color: #fff !important; }
.btn-outline-secondary { color: var(--mb-text-muted) !important; border-color: var(--mb-border) !important; }
.btn-outline-secondary:hover, .btn-outline-secondary.active { background: var(--mb-surface-2) !important; border-color: var(--mb-accent) !important; color: var(--mb-text) !important; }
.btn-secondary { background: #1a3050 !important; border-color: #1a3050 !important; color: var(--mb-text) !important; }
.btn-secondary:hover { background: #1e3a5f !important; border-color: #1e3a5f !important; }
.btn-danger { background: #7f1d1d !important; border-color: #7f1d1d !important; }
.btn-danger:hover { background: #991b1b !important; border-color: #991b1b !important; }
.btn-outline-danger { color: #f87171 !important; border-color: #7f1d1d !important; }
.btn-outline-danger:hover { background: #7f1d1d !important; border-color: #7f1d1d !important; color: #fff !important; }
.btn-close { filter: invert(1) brightness(0.6); }

/* ── Modals ── */
.modal-content { background: var(--mb-surface) !important; border-color: var(--mb-border) !important; color: var(--mb-text); }
.modal-header { border-color: var(--mb-border) !important; }
.modal-footer { border-color: var(--mb-border) !important; }
.modal-title { color: var(--mb-text); }
.modal-backdrop { background-color: #000; }

/* ── Alerts ── */
.alert-danger  { background: rgba(220,53,69,.15)  !important; border-color: rgba(220,53,69,.4)  !important; color: #f87171 !important; }
.alert-success { background: rgba(25,135,84,.15)  !important; border-color: rgba(25,135,84,.4)  !important; color: #4ade80 !important; }
.alert-warning { background: rgba(255,193,7,.12)  !important; border-color: rgba(255,193,7,.3)   !important; color: #fbbf24 !important; }
.alert-info    { background: rgba(13,202,240,.12) !important; border-color: rgba(13,202,240,.3)  !important; color: #7dd3fc !important; }

/* ── Badges ── */
.badge.bg-success   { background: #166534 !important; }
.badge.bg-danger    { background: #7f1d1d !important; }
.badge.bg-secondary { background: #1e3a5f !important; color: var(--mb-text) !important; }
.badge.bg-primary   { background: var(--mb-accent) !important; }
.badge.bg-warning   { background: #78350f !important; color: #fbbf24 !important; }

/* ── Headings / text ── */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 { color: var(--mb-text); }
.text-muted { color: var(--mb-text-muted) !important; }
.text-primary { color: #5b9cf6 !important; }
a { color: #5b9cf6; }
a:hover { color: #90bfff; }

/* ── Dropdown ── */
.dropdown-menu { background: var(--mb-surface-2) !important; border-color: var(--mb-border) !important; }
.dropdown-item { color: var(--mb-text) !important; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--mb-accent) !important; color: #fff !important; }
.dropdown-divider { border-color: var(--mb-border) !important; }

/* ── Scrollbars (Chromium) ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--mb-surface-2); }
::-webkit-scrollbar-thumb { background: #1e3a5f; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--mb-accent); }
* { scrollbar-width: thin; scrollbar-color: #1e3a5f var(--mb-surface-2); }

/* ── Signage (standalone – keep its own palette) ── */
.signage-root {
  height: 100vh;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  color: #fff;
}
.signage-overlay {
  height: 100%;
  background: rgba(0,0,0,0.55);
}
.signage-clock { font-variant-numeric: tabular-nums; }
.signage-card {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(6px);
}