/*
 * HAZINA Platform — Brand Theme v1.0
 * Drop-in replacement for the existing purple/indigo CRYPTEX theme
 *
 * HOW TO USE:
 * 1. Add this file: <link rel="stylesheet" href="/hazina-theme.css">
 *    (place AFTER your main stylesheet so it overrides)
 * 2. Replace favicon.svg with the new Hazina favicon.svg
 * 3. Replace logo HTML with logo-dark.svg in your nav
 * 4. Change platform name text from "CRYPTEX" to "HAZINA" in index.html
 * 5. Change token ticker from "CTX" to "HZN" in your JS/HTML
 */

/* ── ROOT VARIABLES ──────────────────────────────────────────────────────── */
:root {
  /* Brand */
  --hz-navy:       #0D1F2D;  /* primary dark background */
  --hz-navy-mid:   #1A3A4A;  /* sidebar, cards */
  --hz-navy-light: #224455;  /* hover states */
  --hz-emerald:    #0F9B77;  /* primary brand / CTAs */
  --hz-emerald-lt: #12B589;  /* hover emerald */
  --hz-emerald-dk: #0A7A5E;  /* active emerald */
  --hz-emerald-bg: rgba(15,155,119,0.12); /* tinted backgrounds */
  --hz-gold:       #F0A500;  /* accent / wins / highlights */
  --hz-gold-lt:    #F7BC35;  /* hover gold */
  --hz-gold-dk:    #C88A00;  /* active gold */
  --hz-gold-bg:    rgba(240,165,0,0.12);  /* tinted backgrounds */
  --hz-red:        #E8443A;  /* losses / danger */
  --hz-red-bg:     rgba(232,68,58,0.10);
  --hz-text:       #E8F0EC;  /* primary text on dark */
  --hz-text-muted: #7FB8A8;  /* secondary text */
  --hz-text-dim:   #4A7A6A;  /* tertiary / hints */
  --hz-border:     rgba(15,155,119,0.18); /* subtle borders */
  --hz-border-mid: rgba(15,155,119,0.30); /* visible borders */
}

/* ── GLOBAL OVERRIDES ────────────────────────────────────────────────────── */

/* Body & page background */
body,
.page-bg,
#app,
.main-container {
  background-color: var(--hz-navy) !important;
  color: var(--hz-text) !important;
}

/* ── SIDEBAR ─────────────────────────────────────────────────────────────── */
.sidebar,
.side-nav,
nav.left-nav,
.left-sidebar {
  background-color: var(--hz-navy-mid) !important;
  border-right: 1px solid var(--hz-border) !important;
}

/* Sidebar logo area */
.sidebar .logo-area,
.sidebar .brand,
.nav-brand {
  border-bottom: 1px solid var(--hz-border) !important;
  padding-bottom: 16px !important;
  margin-bottom: 8px !important;
}

/* Nav items */
.nav-item,
.sidebar-link,
.sidebar li {
  color: var(--hz-text-muted) !important;
  border-radius: 8px !important;
  transition: background .15s, color .15s !important;
}

.nav-item:hover,
.sidebar-link:hover {
  background: var(--hz-emerald-bg) !important;
  color: var(--hz-text) !important;
}

.nav-item.active,
.sidebar-link.active,
.nav-item[class*="active"] {
  background: var(--hz-emerald-bg) !important;
  color: var(--hz-emerald) !important;
  border-left: 3px solid var(--hz-emerald) !important;
  border-radius: 0 8px 8px 0 !important;
}

/* ── TOP BAR ─────────────────────────────────────────────────────────────── */
.topbar,
.header,
.top-nav,
.dashboard-header {
  background-color: var(--hz-navy-mid) !important;
  border-bottom: 1px solid var(--hz-border) !important;
}

/* Balance badge in topbar */
.balance-badge,
.token-balance,
.ctx-balance,
.hz-balance {
  background: var(--hz-emerald-bg) !important;
  color: var(--hz-emerald) !important;
  border: 1px solid rgba(15,155,119,0.3) !important;
  border-radius: 8px !important;
  padding: 4px 12px !important;
  font-weight: 700 !important;
}

/* ── CARDS & PANELS ──────────────────────────────────────────────────────── */
.card,
.panel,
.game-panel,
.game-controls,
.game-display,
.stat-card,
[class*="card"],
[class*="panel"] {
  background-color: var(--hz-navy-mid) !important;
  border: 1px solid var(--hz-border) !important;
  border-radius: 14px !important;
}

/* Metric/stat chips */
.stat-chip,
.stat-box,
.metric-card {
  background: rgba(13,31,45,0.6) !important;
  border: 1px solid var(--hz-border) !important;
  border-radius: 10px !important;
}

.stat-chip .sc-val,
.sc-val,
.metric-value {
  color: var(--hz-emerald) !important;
}

/* ── PRIMARY BRAND COLOR REPLACEMENTS ────────────────────────────────────── */

/* Replace all purple/indigo #6366ff → emerald */
[style*="#6366ff"],
[style*="6366ff"] {
  color: var(--hz-emerald) !important;
}

/* Primary gradient buttons → emerald */
.bet-btn,
.primary-btn,
button[class*="primary"],
.btn-primary {
  background: linear-gradient(135deg, var(--hz-emerald), var(--hz-emerald-dk)) !important;
  border: none !important;
  color: #fff !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  transition: opacity .2s !important;
}

.bet-btn:hover,
.primary-btn:hover,
button[class*="primary"]:hover {
  opacity: 0.88 !important;
}

.bet-btn:disabled,
.primary-btn:disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
}

/* Cashout / win buttons → gold */
.cashout-btn,
.btn-cashout,
.btn-gold {
  background: linear-gradient(135deg, var(--hz-gold), var(--hz-gold-dk)) !important;
  color: #0D1F2D !important;
  font-weight: 800 !important;
}

/* Secondary / outline buttons */
.dir-btn,
.int-btn,
.outline-btn,
button[class*="secondary"] {
  background: var(--hz-emerald-bg) !important;
  border: 1px solid var(--hz-border-mid) !important;
  color: var(--hz-text-muted) !important;
  border-radius: 8px !important;
}

.dir-btn.active,
.int-btn.active,
.outline-btn.active {
  background: var(--hz-emerald-bg) !important;
  border-color: var(--hz-emerald) !important;
  color: var(--hz-emerald) !important;
}

/* Moon/up direction button → gold */
.dir-btn.moon.active,
.btn-up.active,
[data-dir="up"].active {
  background: var(--hz-gold-bg) !important;
  border-color: var(--hz-gold) !important;
  color: var(--hz-gold) !important;
}

/* ── FORM INPUTS ─────────────────────────────────────────────────────────── */
input[type="number"],
input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select {
  background: rgba(13,31,45,0.8) !important;
  border: 1px solid var(--hz-border-mid) !important;
  color: var(--hz-text) !important;
  border-radius: 8px !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--hz-emerald) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(15,155,119,0.15) !important;
}

/* Range sliders */
input[type="range"] {
  accent-color: var(--hz-emerald) !important;
}

/* ── GAME TABS (game selector row) ───────────────────────────────────────── */
.game-tab {
  background: var(--hz-emerald-bg) !important;
  border: 1px solid var(--hz-border) !important;
  color: var(--hz-text-muted) !important;
}

.game-tab:hover {
  background: rgba(15,155,119,0.2) !important;
  color: var(--hz-text) !important;
}

.game-tab.active {
  background: rgba(15,155,119,0.25) !important;
  border-color: var(--hz-emerald) !important;
  color: var(--hz-emerald-lt) !important;
}

.gt-tag {
  background: var(--hz-emerald-bg) !important;
  color: var(--hz-emerald) !important;
}

.gt-tag.live {
  background: rgba(240,165,0,0.15) !important;
  color: var(--hz-gold) !important;
}

/* ── WIN / LOSS COLORS ───────────────────────────────────────────────────── */
.win, [class*="win"], .result-win {
  color: var(--hz-emerald) !important;
}

.loss, [class*="loss"], .result-loss {
  color: var(--hz-red) !important;
}

.game-msg.win {
  color: var(--hz-emerald) !important;
  background: var(--hz-emerald-bg) !important;
  border: 1px solid rgba(15,155,119,0.3) !important;
  border-radius: 8px !important;
}

.game-msg.loss {
  color: var(--hz-red) !important;
  background: var(--hz-red-bg) !important;
  border: 1px solid rgba(232,68,58,0.3) !important;
  border-radius: 8px !important;
}

/* Bet feed rows */
.bet-row.win  { border-left-color: var(--hz-emerald) !important; }
.bet-row.loss { border-left-color: var(--hz-red) !important; }

/* ── LIVE FEED & CHAT ────────────────────────────────────────────────────── */
.bet-feed .bet-row,
.live-bet-row,
.chat-message {
  background: rgba(26,58,74,0.5) !important;
  border-radius: 8px !important;
}

/* ── WALLET / BALANCE DISPLAYS ───────────────────────────────────────────── */
.balance-amount,
.usdt-amount,
.ctx-amount,
.big-balance {
  color: var(--hz-gold) !important;
  font-weight: 700 !important;
}

/* ── NOTIFICATIONS BADGE ─────────────────────────────────────────────────── */
.notif-badge,
.badge-count,
.unread-count {
  background: var(--hz-emerald) !important;
  color: #fff !important;
}

/* ── RANK TIERS ──────────────────────────────────────────────────────────── */
.rank-newcomer, [data-rank="Newcomer"]  { color: #B4B2A9 !important; }
.rank-silver,   [data-rank="Silver"],
                [data-rank="Fedha"]     { color: #97C459 !important; }
.rank-gold,     [data-rank="Gold"],
                [data-rank="Dhahabu"]   { color: var(--hz-gold) !important; }
.rank-diamond,  [data-rank="Diamond"],
                [data-rank="Almasi"]    { color: #85B7EB !important; }
.rank-legend,   [data-rank="Legend"],
                [data-rank="Hazina"]    { color: var(--hz-emerald) !important; }

/* ── ADMIN PANEL ─────────────────────────────────────────────────────────── */
.admin-panel,
.admin-sidebar {
  background: var(--hz-navy) !important;
  border-color: var(--hz-border) !important;
}

/* ── MODALS & OVERLAYS ───────────────────────────────────────────────────── */
.modal,
.dialog,
.overlay-content {
  background: var(--hz-navy-mid) !important;
  border: 1px solid var(--hz-border-mid) !important;
  border-radius: 16px !important;
}

/* ── SCROLLBAR ───────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--hz-navy); }
::-webkit-scrollbar-thumb {
  background: var(--hz-emerald-dk);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: var(--hz-emerald); }

/* ── SELECTION HIGHLIGHT ─────────────────────────────────────────────────── */
::selection {
  background: rgba(15,155,119,0.3);
  color: #fff;
}

/* ── LINKS ───────────────────────────────────────────────────────────────── */
a { color: var(--hz-emerald) !important; }
a:hover { color: var(--hz-emerald-lt) !important; }

/* ── TYPOGRAPHY HELPERS ──────────────────────────────────────────────────── */
.text-brand   { color: var(--hz-emerald) !important; }
.text-gold    { color: var(--hz-gold) !important; }
.text-muted   { color: var(--hz-text-muted) !important; }
.text-dim     { color: var(--hz-text-dim) !important; }
.text-win     { color: var(--hz-emerald) !important; }
.text-loss    { color: var(--hz-red) !important; }
.bg-brand     { background: var(--hz-emerald-bg) !important; }
.bg-gold      { background: var(--hz-gold-bg) !important; }
.border-brand { border-color: var(--hz-emerald) !important; }

/* ── PLATFORM NAME INLINE STYLE OVERRIDES ────────────────────────────────── */
/* These catch any inline color styles left from the old theme */
[style*="color: #6366ff"],
[style*="color:#6366ff"] { color: var(--hz-emerald) !important; }

[style*="color: #bf5af2"],
[style*="color:#bf5af2"] { color: var(--hz-emerald) !important; }

[style*="background: #6366ff"],
[style*="background:#6366ff"],
[style*="background-color: #6366ff"],
[style*="background-color:#6366ff"] {
  background: var(--hz-emerald) !important;
}

[style*="border-color: #6366ff"],
[style*="border-color:#6366ff"] {
  border-color: var(--hz-emerald) !important;
}

/* accent-color for range sliders set via inline style */
[style*="accent-color"] {
  accent-color: var(--hz-emerald) !important;
}

/* ── CRASH MULTIPLIER DISPLAY ────────────────────────────────────────────── */
.crash-mult,
#crash-mult-display {
  color: var(--hz-emerald) !important;
}

/* ── PLINKO BUCKETS ──────────────────────────────────────────────────────── */
.plinko-bucket,
.plinko-mult-badge { color: var(--hz-emerald) !important; }
.plinko-mult-badge.hot { color: var(--hz-gold) !important; }

/* ── DICE BAR ────────────────────────────────────────────────────────────── */
.dice-bar-fill {
  background: linear-gradient(90deg, var(--hz-emerald), var(--hz-gold)) !important;
}
.dice-bar-marker {
  border-color: var(--hz-emerald) !important;
}
.big-number { color: var(--hz-emerald) !important; }

/* ── LIMBO ───────────────────────────────────────────────────────────────── */
.limbo-result { color: var(--hz-emerald) !important; }

/* ── MINES TILES ─────────────────────────────────────────────────────────── */
.mine-tile {
  background: var(--hz-emerald-bg) !important;
  border-color: var(--hz-border-mid) !important;
}
.mine-tile:hover:not(.revealed):not(.disabled) {
  background: rgba(15,155,119,0.25) !important;
}
.mine-tile.safe {
  background: rgba(15,155,119,0.2) !important;
  border-color: var(--hz-emerald) !important;
}

/* ── LEADERBOARD ─────────────────────────────────────────────────────────── */
.leaderboard-rank-1 { color: var(--hz-gold) !important; }
.leaderboard-rank-2 { color: #C0C0C0 !important; }
.leaderboard-rank-3 { color: #CD7F32 !important; }

/* ── TOURNAMENT CARDS ────────────────────────────────────────────────────── */
.tournament-card {
  border-left: 3px solid var(--hz-emerald) !important;
}
.tournament-prize {
  color: var(--hz-gold) !important;
  font-weight: 700 !important;
}

/* ── SECTION TITLES ──────────────────────────────────────────────────────── */
.section-title,
.page-title,
h1, h2, h3 {
  color: var(--hz-text) !important;
}

/* Highlighted section titles (e.g. "FEATURED GAMES") */
.section-title span,
.title-accent {
  color: var(--hz-emerald) !important;
}

/* ── FOOTER ──────────────────────────────────────────────────────────────── */
footer,
.platform-footer {
  background: var(--hz-navy) !important;
  border-top: 1px solid var(--hz-border) !important;
  color: var(--hz-text-muted) !important;
}