/*
 * STAKE.COM INSPIRED THEME
 * Overrides default colors with Stake.com color palette
 *
 * Background:   #0f212e (dark navy)
 * Card Dark:    #1a2c38
 * Card Medium:  #213743
 * Card Light:   #2d4a5a
 * Accent:       #00d384 (stake green)
 * Text muted:   #b1bad3
 */

/* ── Root variable overrides ─────────────────────────────── */
:root {
    /* Primary → Stake Green */
    --primary-50:  157 100% 95%;
    --primary-100: 157 100% 85%;
    --primary-200: 157 100% 74%;
    --primary-300: 157 100% 63%;
    --primary-400: 157 100% 52%;
    --primary-500: 157 100% 41.4%;
    --primary-600: 157 100% 33%;
    --primary-700: 157 100% 24%;
    --primary-800: 157 100% 15%;
    --primary-900: 157 100% 7%;

    /* Background gradient → flat dark navy */
    --bg-gradient-from: 205 58% 12%;
    --bg-gradient-via:  204 36% 16%;
    --bg-gradient-to:   205 58% 12%;

    /* Header/footer */
    --header-color: 204 55% 9%;
    --footer-color: 204 50% 8%;

    /* Text */
    --text-color: 0 0% 100%;
}

/* ── Body & page background ──────────────────────────────── */
body,
.bg-gradient-theme {
    background: #0f212e !important;
    background-image: none !important;
}

/* ── Murky colour scale → Stake navy tones ───────────────── */
.bg-murky-200  { background-color: #4a6a7e !important; }
.bg-murky-300  { background-color: #3a5568 !important; }
.bg-murky-500  { background-color: #2d4a5a !important; }
.bg-murky-500\/75 { background-color: rgba(45, 74, 90, 0.75) !important; }
.bg-murky-600  { background-color: #213743 !important; }
.bg-murky-700  { background-color: #1a2c38 !important; }
.\!bg-murky-700 { background-color: #1a2c38 !important; }
.bg-murky-800  { background-color: #152532 !important; }
.bg-murky-900  { background-color: #0f212e !important; }
.bg-murky-9000 { background-color: #0a1820 !important; }

/* ── Murky borders ───────────────────────────────────────── */
.border-murky-400 { border-color: #3a5568 !important; }
.border-murky-500 { border-color: #2d4a5a !important; }
.border-murky-600 { border-color: #2d4a5a !important; }
.border-murky-700 { border-color: #213743 !important; }
.border-murky-800 { border-color: #152532 !important; }

/* ── Murky rings ─────────────────────────────────────────── */
.ring-murky-600 { --tw-ring-color: #2d4a5a !important; }

/* ── Murky text ──────────────────────────────────────────── */
.text-murky-200 { color: #b1bad3 !important; }
.text-murky-300 { color: #8fa3b1 !important; }
.text-murky-400 { color: #6e8ca0 !important; }
.text-murky-600 { color: #4a6a7e !important; }
.text-murky-700 { color: #2d4a5a !important; }
.text-murky-800 { color: #213743 !important; }

/* ── From/to gradient overrides (sidebar active state) ───── */
.from-murky-700 { --tw-gradient-from: #1a2c38 !important; }
.from-murky-800 { --tw-gradient-from: #152532 !important; }
.hover\:from-murky-700:hover { --tw-gradient-from: #213743 !important; }
.to-murky-800   { --tw-gradient-to:   #152532 !important; }

/* ── Primary accent → Stake green ───────────────────────── */
.text-primary-400  { color: #00e896 !important; }
.text-primary-500  { color: #00d384 !important; }
.text-primary-600  { color: #00b368 !important; }
.\!text-primary-500 { color: #00d384 !important; }

.bg-primary-500    { background-color: #00d384 !important; }
.bg-primary-400    { background-color: #00e896 !important; }
.bg-primary-400\/10 { background-color: rgba(0, 211, 132, 0.10) !important; }

.from-primary-500  { --tw-gradient-from: #00d384 !important; }
.from-primary-400  { --tw-gradient-from: #00e896 !important; }
.to-primary-600    { --tw-gradient-to:   #00b368 !important; }

.border-primary-500 { border-color: #00d384 !important; }
.ring-primary-500   { --tw-ring-color: #00d384 !important; }
.ring-primary-400\/20 { --tw-ring-color: rgba(0, 211, 132, 0.20) !important; }

.hover\:bg-primary-400:hover { background-color: #00e896 !important; }
.hover\:bg-primary-500:hover { background-color: #00d384 !important; }

.accent-primary-500 { accent-color: #00d384 !important; }
.decoration-primary-500 { text-decoration-color: #00d384 !important; }

/* ── Progress bars & range inputs ───────────────────────── */
.h-2.rounded-full.bg-primary-500 { background-color: #00d384 !important; }
.ring-primary-500 { --tw-ring-color: #00d384 !important; }
.bg-primary-500 .h-1\.5.w-1\.5 { background-color: #00d384 !important; }

/* ── Navbar & header ─────────────────────────────────────── */
header,
nav,
.navbar,
[class*="header"],
.sticky.top-0 {
    background-color: #0f212e !important;
    border-bottom-color: #2d4a5a !important;
}

/* ── Sidebar & aside ─────────────────────────────────────── */
aside {
    background-color: transparent;
}

/* ── Cards & panels ──────────────────────────────────────── */
.rounded-lg.border,
.card,
[class*="bg-murky"] {
    border-color: #2d4a5a;
}

/* ── Tables ──────────────────────────────────────────────── */
.divide-murky-500 > :not([hidden]) ~ :not([hidden]),
.divide-murky-600 > :not([hidden]) ~ :not([hidden]) {
    border-color: #2d4a5a !important;
}

table {
    border-color: #2d4a5a;
}

/* ── Dialog / modal ──────────────────────────────────────── */
.bg-murky-700.bg-opacity-80,
[class*="murky-700.bg-opacity"] {
    background-color: rgba(26, 44, 56, 0.90) !important;
}

/* ── Input & form elements ───────────────────────────────── */
input, select, textarea {
    background-color: #1a2c38;
    border-color: #2d4a5a;
    color: #ffffff;
}

input:focus, select:focus, textarea:focus {
    border-color: #00d384;
    outline-color: #00d384;
}

/* ── Scrollbar ───────────────────────────────────────────── */
::-webkit-scrollbar               { width: 6px; height: 6px; }
::-webkit-scrollbar-track         { background: #0f212e; }
::-webkit-scrollbar-thumb         { background: #2d4a5a; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover   { background: #00d384; }

/* ── Badge / pill colors matching Stake palette ──────────── */
.bg-blue-400\/10   { background-color: rgba(0, 211, 132, 0.12) !important; }
.text-blue-400     { color: #00d384 !important; }
.ring-blue-400\/30 { --tw-ring-color: rgba(0, 211, 132, 0.30) !important; }

/* ── Popular / product header backgrounds ─────────────────── */
:root {
    --popular-bg:     204 36% 16%;
    --popular-text:   204 26% 65%;
    --proudct-header-bg: 205 58% 8%;
    --payment-bg:     204 36% 18%;
}

/* ── Swiper scrollbar ────────────────────────────────────── */
:root {
    --swiper-scrollbar-drag-bg-color: #00d384;
}

/* ── Search modal backdrop ───────────────────────────────── */
.bg-murky-700.bg-opacity-80 {
    background-color: rgba(15, 33, 46, 0.92) !important;
}

/* ── Toastr notifications ────────────────────────────────── */
.toast-success { background-color: #00d384 !important; }
.toast-error   { background-color: #f44336 !important; }
.toast-info    { background-color: #213743 !important; }
.toast-warning { background-color: #ff9800 !important; }

/* ── Footer ──────────────────────────────────────────────── */
footer {
    background-color: #071824 !important;
    border-top-color: #2d4a5a !important;
}

/* ── SweetAlert dark override ────────────────────────────── */
.swal2-popup {
    background: #1a2c38 !important;
    color: #ffffff !important;
    border: 1px solid #2d4a5a !important;
}
.swal2-title, .swal2-content, .swal2-html-container { color: #ffffff !important; }
.swal2-confirm { background-color: #00d384 !important; color: #000 !important; }
.swal2-cancel  { background-color: #213743 !important; color: #fff !important; }

/* ── Placeholder loading (skeleton) ─────────────────────── */
.ph-item { background-color: #213743 !important; }
.ph-item::before { background: linear-gradient(to right, transparent 0%, #2d4a5a 50%, transparent 100%) !important; }

/* ── Invoice & misc pages ────────────────────────────────── */
.bg-white { background-color: #1a2c38 !important; }
.text-gray-900, .text-gray-800, .text-gray-700 { color: #ffffff !important; }
.text-gray-500, .text-gray-400 { color: #b1bad3 !important; }
.border-gray-200, .divide-gray-200 > * { border-color: #2d4a5a !important; }

/* ── Ensure text stays readable ──────────────────────────── */
.text-white { color: #ffffff !important; }
.text-white\/50 { color: rgba(255,255,255,0.5) !important; }
.text-white\/70 { color: rgba(255,255,255,0.7) !important; }

/* ── Highlighted active nav link ─────────────────────────── */
.from-primary-500 {
    --tw-gradient-from: rgba(0, 211, 132, 0.15) !important;
}