/* ─── Palette & Tokens ─────────────────────────────────────────────────────── */
:root {
  --omgha-bg:        #111318;
  --omgha-surface:   #1c1f2a;
  --omgha-surface-2: #252836;
  --omgha-border:    #2e3147;
  --omgha-text:      #d4d8e8;
  --omgha-muted:     #737899;
  --omgha-red:       #d63031;
  --omgha-red-dim:   #a02020;
  --omgha-red-glow:  rgba(214, 48, 49, 0.22);
  --omgha-dark:      #0d0f15;
}

/* ─── Bootstrap Dark Theme Overrides ──────────────────────────────────────── */
[data-bs-theme="dark"] {
  --bs-body-bg:             var(--omgha-bg);
  --bs-body-color:          var(--omgha-text);
  --bs-card-bg:             var(--omgha-surface);
  --bs-card-border-color:   var(--omgha-border);
  --bs-border-color:        var(--omgha-border);
  --bs-secondary-bg:        var(--omgha-surface-2);
  --bs-tertiary-bg:         var(--omgha-surface);
  --bs-table-bg:            transparent;
  --bs-table-border-color:  var(--omgha-border);
  --bs-table-hover-bg:      rgba(255,255,255,.03);
  --bs-input-bg:            var(--omgha-surface-2);
  --bs-input-border-color:  var(--omgha-border);
  --bs-form-control-bg:     var(--omgha-surface-2);
}

/* ─── Base Typography ──────────────────────────────────────────────────────── */
body {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 15px;
  color: var(--omgha-text);
  background-color: var(--omgha-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .navbar-brand {
  font-family: 'Titillium Web', sans-serif;
  color: var(--omgha-text);
  letter-spacing: -0.01em;
}

.text-muted { color: var(--omgha-muted) !important; }

/* ─── Navbar (glassmorphism) ───────────────────────────────────────────────── */
.navbar.bg-omgha {
  background-color: rgba(13, 15, 21, 0.82) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--omgha-border);
  box-shadow: 0 1px 0 rgba(255,255,255,.04);
}

.navbar-brand {
  font-weight: 700;
  letter-spacing: .04em;
  color: #fff !important;
  font-size: 1.05rem;
}
.navbar-brand:hover { color: #ccc !important; }

.navbar-nav .nav-link {
  color: rgba(212, 216, 232, 0.75) !important;
  font-size: 0.88rem;
  font-weight: 500;
  transition: color 0.15s ease;
  padding-left: 0.65rem;
  padding-right: 0.65rem;
}
.navbar-nav .nav-link:hover { color: #fff !important; }
.navbar-nav .nav-link.text-danger { color: rgba(214, 100, 100, 0.8) !important; }
.navbar-nav .nav-link.text-danger:hover { color: #ff7070 !important; }

/* ─── Bootstrap primary → crimson ─────────────────────────────────────────── */
.btn-primary {
  background-color: var(--omgha-red);
  border-color: var(--omgha-red);
  color: #fff;
  font-weight: 600;
  position: relative;
  overflow: hidden;
  transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}
.btn-primary::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -75%;
  width: 50%;
  height: 200%;
  background: rgba(255,255,255,.15);
  transform: skewX(-20deg);
  transition: left 0.35s ease;
}
.btn-primary:hover::after { left: 125%; }
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--omgha-red-dim);
  border-color: var(--omgha-red-dim);
  color: #fff;
  box-shadow: 0 0 0 3px var(--omgha-red-glow);
}
.btn-primary:active { transform: scale(0.98); }

.btn-outline-primary {
  color: var(--omgha-red);
  border-color: var(--omgha-red);
  font-weight: 500;
  transition: all 0.15s ease;
}
.btn-outline-primary:hover {
  background-color: var(--omgha-red);
  border-color: var(--omgha-red);
  color: #fff;
  box-shadow: 0 0 0 3px var(--omgha-red-glow);
}

.text-primary { color: var(--omgha-red) !important; }
a { color: var(--omgha-red); }
a:hover { color: var(--omgha-red-dim); }

/* ─── Page / Section Titles ────────────────────────────────────────────────── */
.page-title {
  font-family: 'Titillium Web', sans-serif;
  font-size: 1.65rem;
  font-weight: 700;
  color: var(--omgha-text);
  letter-spacing: -0.02em;
}

.section-title {
  font-family: 'Titillium Web', sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--omgha-text);
}

/* ─── Balance Numbers ──────────────────────────────────────────────────────── */
.balance-num {
  font-family: 'Titillium Web', sans-serif;
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1.1;
  margin-top: 0.5rem;
  color: var(--omgha-red);
  text-shadow: 0 0 24px var(--omgha-red-glow), 0 0 6px var(--omgha-red-glow);
  font-variant-numeric: tabular-nums;
}
.balance-num.text-dark { color: var(--omgha-text); text-shadow: none; }

/* ─── Cards ─────────────────────────────────────────────────────────────────── */
.card {
  border: 1px solid var(--omgha-border) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.05) inset;
  border-radius: 12px;
  background-color: var(--omgha-surface) !important;
  transition: box-shadow 0.2s ease;
}
.card:hover {
  box-shadow: 0 6px 28px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.06) inset;
}

/* ─── Tables ────────────────────────────────────────────────────────────────── */
.table thead th {
  background-color: var(--omgha-surface-2);
  color: var(--omgha-muted);
  font-family: 'Titillium Web', sans-serif;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 1px solid var(--omgha-border);
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
}

.table { --bs-table-border-color: var(--omgha-border); }
.table tbody td { padding-top: 0.85rem; padding-bottom: 0.85rem; }

/* Hover accent bar on table rows */
.table-hover > tbody > tr {
  position: relative;
  transition: background-color 0.12s ease;
}
.table-hover > tbody > tr:hover td:first-child {
  box-shadow: inset 3px 0 0 var(--omgha-red);
}
.table-hover > tbody > tr:hover {
  --bs-table-accent-bg: rgba(214,48,49,.06);
}

/* Tabular numerals for currency columns */
.table td { font-variant-numeric: tabular-nums; }

/* ─── Role / Status Badges ──────────────────────────────────────────────────── */
.badge-admin     { background-color: var(--omgha-red) !important; }
.badge-submitter { background-color: #4a4f6a !important; }
.badge-viewer    { background-color: #3a3f58 !important; color: var(--omgha-muted) !important; }

/* ─── Alerts ─────────────────────────────────────────────────────────────────── */
.alert {
  border-left: 3px solid currentColor;
  border-radius: 8px;
  background-color: var(--omgha-surface-2);
}
.alert-success { border-left-color: #2ecc71; }
.alert-danger  { border-left-color: var(--omgha-red); }
.alert-warning { border-left-color: #f39c12; }
.alert-info    { border-left-color: #3498db; }

/* ─── Form Controls ──────────────────────────────────────────────────────────── */
.form-control,
.form-select {
  background-color: var(--omgha-surface-2);
  border-color: var(--omgha-border);
  color: var(--omgha-text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-control:focus,
.form-select:focus {
  background-color: var(--omgha-surface-2);
  border-color: var(--omgha-red);
  color: var(--omgha-text);
  box-shadow: 0 0 0 3px var(--omgha-red-glow);
}
.form-control::placeholder { color: var(--omgha-muted); }
.form-label { color: var(--omgha-text); font-weight: 500; font-size: 0.9rem; }

/* ─── Footer ────────────────────────────────────────────────────────────────── */
footer {
  background-color: var(--omgha-dark);
  color: var(--omgha-muted);
  border-top: 1px solid var(--omgha-border);
  padding: 1.25rem 0;
  font-size: .82rem;
  text-align: center;
  letter-spacing: 0.03em;
}

/* ─── Misc ───────────────────────────────────────────────────────────────────── */
.btn { transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; }
.btn-outline-secondary { border-color: var(--omgha-border); color: var(--omgha-muted); }
.btn-outline-secondary:hover { background-color: var(--omgha-surface-2); color: var(--omgha-text); border-color: var(--omgha-border); }
.btn-success { transition: box-shadow 0.15s ease; }
.btn-success:hover { box-shadow: 0 0 0 3px rgba(46,204,113,.25); }

details > summary { color: var(--omgha-muted); }
details > summary:hover { color: var(--omgha-text); }