/* ==========================================================================
   NAMO MATKA — ULTRA PREMIUM DARK GAMING UI
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&display=swap');

/* ─── DESIGN TOKENS ─────────────────────────────────────────────────────── */
:root {
  --bg-base:        #0b1120;
  --bg-card:        #131d30;
  --bg-card-2:      #1a2540;
  --primary:        #00d4aa;
  --primary-dark:   #00a884;
  --primary-glow:   rgba(0,212,170,.25);
  --secondary:      #7c3aed;
  --secondary-glow: rgba(124,58,237,.2);
  --gold:           #f59e0b;
  --gold-glow:      rgba(245,158,11,.2);
  --danger:         #ef4444;
  --danger-glow:    rgba(239,68,68,.2);
  --success:        #22c55e;
  --success-glow:   rgba(34,197,94,.2);
  --text-primary:   #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted:     #64748b;
  --border:         rgba(255,255,255,.07);
  --border-bright:  rgba(0,212,170,.3);
  --radius-sm:      10px;
  --radius-md:      18px;
  --radius-lg:      26px;
  --radius-xl:      36px;
  --font:           'Outfit', sans-serif;
  --shadow-card:    0 4px 24px rgba(0,0,0,.45);
  --shadow-glow:    0 0 20px rgba(0,212,170,.2);
  --transition:     all .25s cubic-bezier(.4,0,.2,1);
}

/* ─── BASE ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font) !important;
  background-color: var(--bg-base) !important;
  color: var(--text-primary) !important;
  min-height: 100vh;
  letter-spacing: -.01em;
  -webkit-font-smoothing: antialiased;
}

/* ─── SCROLLBAR ──────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--bg-base); }
::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 99px; }

/* ─── TYPOGRAPHY ─────────────────────────────────────────────────────────── */
h1,h2,h3,h4,h5,h6 { font-family: var(--font) !important; color: var(--text-primary) !important; }
p, span, label, small { font-family: var(--font) !important; }
.text-muted { color: var(--text-muted) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-primary { color: var(--primary) !important; }
.text-success { color: var(--success) !important; }
.text-danger { color: var(--danger) !important; }
.text-warning { color: var(--gold) !important; }
.text-white { color: #fff !important; }

/* ─── UTILITY CLASSES ────────────────────────────────────────────────────── */
.hover-scale { transition: var(--transition) !important; }
.hover-scale:hover { transform: translateY(-3px) !important; }
.cursor-pointer { cursor: pointer; }
.font-monospace { font-family: 'Courier New', monospace !important; }

/* ─── GLASS CARD ─────────────────────────────────────────────────────────── */
.glass-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  transition: var(--transition);
}
.glass-card:hover {
  border-color: var(--border-bright);
  box-shadow: var(--shadow-glow);
  transform: translateY(-2px);
}

/* Bootstrap .card override */
.card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-card) !important;
  color: var(--text-primary) !important;
  transition: var(--transition) !important;
}
.card:hover {
  border-color: var(--border-bright) !important;
  transform: translateY(-2px);
}
.card.no-hover:hover { transform: none !important; }

/* ─── PAGE HEADER BAR ────────────────────────────────────────────────────── */
.page-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(135deg, #0e1a30 0%, #0b1120 100%);
  border-bottom: 1px solid var(--border-bright);
  position: sticky;
  top: 0;
  z-index: 1020;
  box-shadow: 0 4px 20px rgba(0,0,0,.5);
}
.page-header .back-btn {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,212,170,.12);
  border: 1px solid rgba(0,212,170,.25);
  border-radius: 50%;
  color: var(--primary);
  text-decoration: none;
  transition: var(--transition);
  flex-shrink: 0;
}
.page-header .back-btn:hover {
  background: rgba(0,212,170,.25);
  transform: translateX(-2px);
}
.page-header h5 {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #fff !important;
  margin: 0 !important;
  letter-spacing: .02em;
}

/* ─── SITE HEADER (TOP NAV) ──────────────────────────────────────────────── */
header {
  background: linear-gradient(135deg, #0e1a2e 0%, #0b1120 100%) !important;
  border-bottom: 1px solid var(--border-bright) !important;
  padding: 10px 0 !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.5) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1020 !important;
}

/* ─── BOTTOM NAV ─────────────────────────────────────────────────────────── */
.footer-bar {
  background: rgba(11,17,32,.96) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-top: 1px solid var(--border-bright) !important;
  box-shadow: 0 -8px 30px rgba(0,0,0,.5) !important;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
  padding: 8px 0 !important;
}
.footer-bar ul { background: transparent !important; border: none !important; }
.footer-bar li a {
  font-family: var(--font) !important;
  font-weight: 600 !important;
  color: var(--text-muted) !important;
  transition: var(--transition) !important;
  font-size: 10px !important;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.footer-bar li a.active, .footer-bar li a:hover {
  color: var(--primary) !important;
  transform: translateY(-2px);
}
.footer-bar li a svg { transition: var(--transition); }
.footer-bar li a.active svg, .footer-bar li a:hover svg {
  filter: drop-shadow(0 0 6px var(--primary));
}
.footer-bar .middHome a {
  width: 52px !important; height: 52px !important;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%) !important;
  border-radius: 50% !important;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 24px rgba(0,212,170,.5) !important;
  transform: translateY(-14px) !important;
  border: 3px solid var(--bg-base) !important;
  transition: var(--transition) !important;
}
.footer-bar .middHome a:hover {
  box-shadow: 0 0 32px rgba(0,212,170,.7) !important;
  transform: translateY(-18px) scale(1.05) !important;
}

/* ─── OFFCANVAS / SIDEBAR ────────────────────────────────────────────────── */
.offcanvas {
  background: #0d1726 !important;
  border-right: 1px solid var(--border-bright) !important;
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0 !important;
}
.offcanvas-header {
  background: linear-gradient(135deg, #0e1f38, #0b1120) !important;
  border-bottom: 1px solid var(--border-bright) !important;
  padding: 20px 16px !important;
}
.offcanvas-body { padding: 16px !important; }
.offcanvas-body ul li a {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px !important;
  background: var(--bg-card) !important;
  border-radius: var(--radius-sm) !important;
  margin-bottom: 8px !important;
  border: 1px solid var(--border) !important;
  color: var(--text-secondary) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  transition: var(--transition);
  text-decoration: none;
}
.offcanvas-body ul li a:hover {
  background: rgba(0,212,170,.1) !important;
  color: var(--primary) !important;
  border-color: var(--border-bright) !important;
  transform: translateX(4px);
}
.offcanvas-body ul li a .nav-icon {
  width: 34px; height: 34px;
  background: rgba(0,212,170,.12);
  border: 1px solid rgba(0,212,170,.2);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* ─── PREMIUM BUTTONS ────────────────────────────────────────────────────── */
.btn {
  font-family: var(--font) !important;
  font-weight: 600 !important;
  border-radius: 99px !important;
  font-size: 13px !important;
  transition: var(--transition) !important;
  border: none !important;
  letter-spacing: .02em;
}
.btn:hover { transform: translateY(-1px) !important; }
.btn:active { transform: translateY(0) !important; }

.btn-primary, .btn.primary {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%) !important;
  color: #000 !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px var(--primary-glow) !important;
}
.btn-primary:hover { box-shadow: 0 6px 20px rgba(0,212,170,.4) !important; color: #000 !important; }

.btn-secondary {
  background: linear-gradient(135deg, #1e2d47, #0e1a2e) !important;
  color: var(--primary) !important;
  border: 1px solid var(--border-bright) !important;
  box-shadow: none !important;
}

.btn-danger {
  background: linear-gradient(135deg, var(--danger), #dc2626) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px var(--danger-glow) !important;
}

.btn-success {
  background: linear-gradient(135deg, var(--success), #16a34a) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px var(--success-glow) !important;
}

.btn-light {
  background: var(--bg-card-2) !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border) !important;
}

/* ─── FORMS & INPUTS ─────────────────────────────────────────────────────── */
.form-control, .form-select {
  font-family: var(--font) !important;
  border-radius: var(--radius-sm) !important;
  border: 1px solid var(--border) !important;
  padding: 12px 14px !important;
  font-size: 14px !important;
  background-color: var(--bg-card) !important;
  color: var(--text-primary) !important;
  box-shadow: none !important;
  transition: var(--transition) !important;
}
.form-control:focus, .form-select:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px var(--primary-glow) !important;
  outline: none !important;
  background-color: var(--bg-card) !important;
}
.form-control::placeholder { color: var(--text-muted) !important; }

.form-check-input {
  background-color: var(--bg-card-2) !important;
  border-color: var(--border) !important;
  cursor: pointer;
}
.form-check-input:checked {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}
.form-check-input:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px var(--primary-glow) !important;
}


label, .form-label {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--text-muted) !important;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 6px !important;
}

.input-group-text {
  background: var(--bg-card-2) !important;
  border: 1px solid var(--border) !important;
  color: var(--primary) !important;
}

/* ─── GAME CARD (cardgame) ───────────────────────────────────────────────── */
.cardgame {
  background: var(--bg-card) !important;
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-card) !important;
  transition: var(--transition) !important;
  position: relative;
  overflow: hidden;
}
.cardgame::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 100%;
  background: var(--text-muted);
}
.cardgame.openmarket::before { background: linear-gradient(180deg, var(--primary), var(--success)); }
.cardgame.closemarket::before { background: linear-gradient(180deg, var(--danger), #991b1b); }
.cardgame.pandingmarket::before { background: linear-gradient(180deg, var(--gold), #d97706); }
.cardgame:hover {
  border-color: var(--border-bright) !important;
  box-shadow: var(--shadow-glow) !important;
  transform: translateY(-2px);
}
.cardgame h4 {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: var(--text-primary) !important;
  letter-spacing: .02em;
}
.cardgame h5 {
  font-size: 17px !important;
  font-weight: 800 !important;
  color: var(--primary) !important;
  letter-spacing: .08em;
  text-shadow: 0 0 12px var(--primary-glow);
}
.cardgame .linee {
  border-top: 1px solid var(--border) !important;
  margin-top: 10px !important;
  padding-top: 8px !important;
}
.cardgame .linee p { font-size: 11px !important; color: var(--text-muted) !important; }
.cardgame .linee p strong { color: var(--text-secondary) !important; }

/* ─── STATUS BADGES ──────────────────────────────────────────────────────── */
.badge {
  font-family: var(--font) !important;
  font-weight: 700 !important;
  letter-spacing: .04em;
}
.badge.bg-success-subtle { background: rgba(34,197,94,.15) !important; color: var(--success) !important; }
.badge.bg-danger-subtle { background: rgba(239,68,68,.15) !important; color: var(--danger) !important; }
.badge.bg-warning-subtle { background: rgba(245,158,11,.15) !important; color: var(--gold) !important; }
.badge.bg-light { background: var(--bg-card-2) !important; color: var(--text-secondary) !important; }

/* ─── TABLES ─────────────────────────────────────────────────────────────── */
.table-responsive {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border) !important;
  background: var(--bg-card);
  margin-bottom: 20px;
  box-shadow: var(--shadow-card);
}
.table { margin-bottom: 0 !important; font-size: 13px; }
.table th {
  background: linear-gradient(135deg, #0d1f38, #0b1526) !important;
  color: var(--primary) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em;
  padding: 13px 14px !important;
  font-size: 11px !important;
  border: none !important;
  border-bottom: 1px solid var(--border-bright) !important;
}
.table td {
  padding: 12px 14px !important;
  vertical-align: middle;
  color: var(--text-secondary) !important;
  border-bottom: 1px solid var(--border) !important;
  background: transparent !important;
}
.table tbody tr:last-child td { border-bottom: none !important; }
.table tbody tr { transition: background-color .2s ease; }
.table tbody tr:hover td { background: rgba(0,212,170,.05) !important; }

/* ─── PAGINATION ─────────────────────────────────────────────────────────── */
.pagination { display: flex; justify-content: center; gap: 5px; margin-top: 16px; }
.pagination li a, .pagination li span {
  width: 34px; height: 34px;
  border-radius: 50% !important;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 12px;
  color: var(--text-secondary) !important;
  background: var(--bg-card);
  border: 1px solid var(--border) !important;
  transition: var(--transition);
}
.pagination li.active span, .pagination li a:hover {
  background: var(--primary) !important;
  color: #000 !important;
  border-color: var(--primary) !important;
  box-shadow: 0 0 12px var(--primary-glow);
}

/* ─── MODAL ──────────────────────────────────────────────────────────────── */
.modal-content {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-bright) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.7) !important;
}
.modal-header { border-bottom: 1px solid var(--border) !important; }
.modal-footer { border-top: 1px solid var(--border) !important; }
.modal-title { color: var(--text-primary) !important; }
.modal-backdrop { background-color: rgba(0,0,0,.8) !important; }

/* ─── ICON CIRCLE HELPERS ─────────────────────────────────────────────────── */
.icon-circle {
  width: 48px; height: 48px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.icon-circle.primary { background: rgba(0,212,170,.15); border: 1px solid rgba(0,212,170,.25); }
.icon-circle.danger  { background: rgba(239,68,68,.15);  border: 1px solid rgba(239,68,68,.25); }
.icon-circle.gold    { background: rgba(245,158,11,.15); border: 1px solid rgba(245,158,11,.25); }
.icon-circle.purple  { background: rgba(124,58,237,.15); border: 1px solid rgba(124,58,237,.25); }
.icon-circle.success { background: rgba(34,197,94,.15);  border: 1px solid rgba(34,197,94,.25); }

/* ─── CHART SPECIFIC ─────────────────────────────────────────────────────── */
.dtm_box {
  background: var(--bg-card) !important;
  border-radius: 8px !important;
  padding: 8px 4px !important;
  border: 1px solid var(--border) !important;
  margin-bottom: 8px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.3) !important;
  transition: var(--transition);
}
.dtm_box:hover {
  border-color: var(--border-bright) !important;
  transform: translateY(-2px);
}
.dtm_title {
  font-weight: 800 !important;
  font-size: 10px !important;
  text-transform: uppercase;
  color: var(--primary) !important;
  margin-bottom: 2px !important;
  letter-spacing: .04em;
}
.dtm_date {
  font-size: 9px !important;
  color: var(--text-muted) !important;
  margin-bottom: 5px !important;
  border-bottom: 1px solid var(--border) !important;
  padding-bottom: 3px !important;
}
.dtm_box_inner {
  background: var(--bg-card-2) !important;
  border-radius: 4px;
  padding: 5px 2px;
  width: 100%;
  text-align: center;
}
.dtm_box_mid { background: rgba(0,212,170,.1) !important; border: 1px solid rgba(0,212,170,.2) !important; }
.dtm_box_mid h4 {
  color: var(--primary) !important;
  font-weight: 900 !important;
  font-size: 13px !important;
  margin: 0;
  text-shadow: 0 0 8px var(--primary-glow);
}
.dtm_box_inner font {
  font-size: 10px !important;
  font-weight: 700 !important;
  color: var(--text-secondary) !important;
}

/* ─── CHART BODY ─────────────────────────────────────────────────────────── */
.chartbody { background-color: var(--bg-base) !important; }

/* ─── PLAY/OPEN-CLOSE BUTTONS ────────────────────────────────────────────── */
.openclose {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
  border-radius: 8px !important;
  padding: 6px 10px !important;
  display: flex; align-items: center; justify-content: center;
  transition: var(--transition);
  border: none !important;
  box-shadow: 0 4px 12px var(--primary-glow);
}
.openclose:hover { box-shadow: 0 6px 18px rgba(0,212,170,.4) !important; transform: scale(1.02); }
.openclose span.play_text { font-size: 11px !important; font-weight: 800 !important; color: #000 !important; }

/* ─── QUICK ACTION BUTTONS ───────────────────────────────────────────────── */
.btnrs {
  cursor: pointer;
  transition: var(--transition);
  border-radius: 10px !important;
  border: 1px solid var(--border) !important;
  background: var(--bg-card-2) !important;
  color: var(--text-secondary) !important;
  text-align: center;
}
.btnrs:hover {
  background: var(--primary) !important;
  color: #000 !important;
  border-color: var(--primary) !important;
  box-shadow: 0 4px 12px var(--primary-glow);
}

/* ─── BG UTILITIES ───────────────────────────────────────────────────────── */
.bg-primary-light { background: rgba(0,212,170,.12) !important; }
.bg-danger-subtle { background: rgba(239,68,68,.12) !important; }
.bg-success-subtle { background: rgba(34,197,94,.12) !important; }
.bg-warning-subtle { background: rgba(245,158,11,.12) !important; }
.bg-secondary-subtle { background: rgba(124,58,237,.12) !important; }
.bg-light { background: var(--bg-card-2) !important; }
.bg-white { background: var(--bg-card) !important; }

/* ─── BORDER UTILITIES ───────────────────────────────────────────────────── */
.border { border-color: var(--border) !important; }
.border-light { border-color: var(--border) !important; }

/* ─── MARQUEE SECTION ────────────────────────────────────────────────────── */
.notice-bar {
  background: rgba(0,212,170,.08);
  border: 1px solid rgba(0,212,170,.2);
  border-radius: 99px;
  overflow: hidden;
  padding: 6px 14px;
}
.notice-bar marquee { color: var(--text-secondary) !important; font-size: 13px; font-weight: 500; }

/* ─── SECTION HEADING ────────────────────────────────────────────────────── */
.section-heading {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted) !important;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.section-heading::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ─── STATUS PILL ────────────────────────────────────────────────────────── */
.status-open {
  background: rgba(34,197,94,.15);
  color: var(--success);
  border: 1px solid rgba(34,197,94,.3);
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.status-closed {
  background: rgba(239,68,68,.15);
  color: var(--danger);
  border: 1px solid rgba(239,68,68,.3);
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.status-pending {
  background: rgba(245,158,11,.15);
  color: var(--gold);
  border: 1px solid rgba(245,158,11,.3);
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ─── RESULT NUMBER ──────────────────────────────────────────────────────── */
.result-number {
  font-family: 'Courier New', monospace !important;
  font-weight: 900 !important;
  color: var(--primary) !important;
  letter-spacing: .1em;
  font-size: 17px;
  text-shadow: 0 0 14px var(--primary-glow);
}

/* ─── SUPPORT BUTTONS ────────────────────────────────────────────────────── */
.btn-whatsapp {
  background: linear-gradient(135deg, #25d366, #1da851) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(37,211,102,.3) !important;
}
.btn-call {
  background: linear-gradient(135deg, #7c3aed, #5b21b6) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(124,58,237,.3) !important;
}

/* ─── ANIMATIONS ─────────────────────────────────────────────────────────── */
@keyframes pulse-dot {
  0%,100% { opacity:1; transform: scale(1); }
  50% { opacity:.6; transform: scale(.85); }
}
.pulse-dot { animation: pulse-dot 1.8s ease-in-out infinite; }

@keyframes shimmer {
  from { opacity:.6; } to { opacity:1; }
}
.shimmer { animation: shimmer 1.5s ease-in-out infinite alternate; }

/* ─── FORM SWITCH ────────────────────────────────────────────────────────── */
.form-check-input:checked {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}

/* ─── RESPONSIVE ─────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .dtm_box { padding: 5px 3px !important; }
  .dtm_title { font-size: 8px !important; }
  .dtm_date { font-size: 7px !important; }
  .dtm_box_inner font { font-size: 8px !important; }
  .dtm_box_mid h4 { font-size: 10px !important; }
  .col-md-2s.col-2s { width: 14.28% !important; flex: auto !important; padding: 3px !important; }
}

/* ─── DARK FORM CONTROLS (bid forms, etc.) ──────────────────────────────── */
.form-control,
.form-select {
  background-color: rgba(255,255,255,.05) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: #f1f5f9 !important;
  border-radius: 10px !important;
}
.form-control:focus,
.form-select:focus {
  background-color: rgba(0,212,170,.07) !important;
  border-color: rgba(0,212,170,.4) !important;
  box-shadow: 0 0 0 3px rgba(0,212,170,.12) !important;
  color: #f1f5f9 !important;
  outline: none !important;
}
.form-control::placeholder { color: #475569 !important; }
.form-select option {
  background-color: #131d30 !important;
  color: #f1f5f9 !important;
}
.input-group-text {
  background-color: rgba(0,212,170,.08) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: #00d4aa !important;
}
.form-label { color: #94a3b8 !important; }

/* ─── CHART PAGES — HORIZONTAL SCROLL ───────────────────────────────────── */
.chart-scroll-wrap,
.table-responsive {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* Chart result tables */
.dtm_box_inner,
.dtm_box {
  background: #131d30 !important;
  border-color: rgba(255,255,255,.08) !important;
  color: #f1f5f9 !important;
}
.dtm_box_mid h4,
.dtm_title { color: #00d4aa !important; }
.dtm_date { color: #64748b !important; }

/* ─── DARK PAGINATION ────────────────────────────────────────────────────── */
.pagination .page-link {
  background-color: #131d30 !important;
  border-color: rgba(255,255,255,.1) !important;
  color: #94a3b8 !important;
  border-radius: 8px !important;
  margin: 0 2px;
}
.pagination .page-link:hover {
  background-color: rgba(0,212,170,.12) !important;
  color: #00d4aa !important;
  border-color: rgba(0,212,170,.3) !important;
}
.pagination .page-item.active .page-link {
  background-color: #00d4aa !important;
  border-color: #00d4aa !important;
  color: #000 !important;
  font-weight: 800 !important;
}
.pagination .page-item.disabled .page-link {
  background-color: rgba(255,255,255,.03) !important;
  color: #475569 !important;
}

/* ─── OFFCANVAS DARK ──────────────────────────────────────────────────────── */
.offcanvas { background: #0d1726 !important; }
.offcanvas-backdrop { background-color: rgba(0,0,0,.7) !important; }

/* Sidebar — layout + scroll fix */
#sideMenu {
  width: 78% !important;
  background: #0d1726 !important;
  max-width: 320px;
}
/* When sidebar is OPEN: make it flex-column so nav area scrolls */
#sideMenu.show {
  display: flex !important;
  flex-direction: column !important;
}
#sideMenu > div:first-child {
  flex-shrink: 0;
}
#sideMenuBody {
  flex: 1 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
}


/* ─── BADGE DARK OVERRIDES ───────────────────────────────────────────────── */
.badge.bg-success-subtle { background: rgba(34,197,94,.15) !important; }
.badge.bg-danger-subtle  { background: rgba(239,68,68,.15) !important; }
.badge.bg-secondary-subtle { background: rgba(255,255,255,.08) !important; }
.badge.text-success { color: #22c55e !important; }
.badge.text-danger  { color: #ef4444 !important; }
.badge.text-secondary { color: #94a3b8 !important; }

/* ─── TABLE DARK ─────────────────────────────────────────────────────────── */
.table {
  --bs-table-bg: transparent !important;
  --bs-table-striped-bg: rgba(255,255,255,.03) !important;
  --bs-table-border-color: rgba(255,255,255,.07) !important;
  color: #94a3b8 !important;
}
.table thead th { color: #64748b !important; font-size: 10px !important; text-transform: uppercase; letter-spacing: .05em; }
.table tbody tr { border-color: rgba(255,255,255,.05) !important; }

/* ─── ALERT DARK ─────────────────────────────────────────────────────────── */
.alert-success {
  background: rgba(34,197,94,.1) !important;
  border-color: rgba(34,197,94,.25) !important;
  color: #22c55e !important;
}
.alert-danger {
  background: rgba(239,68,68,.1) !important;
  border-color: rgba(239,68,68,.25) !important;
  color: #ef4444 !important;
}