/* ============================================================
   Royal Gym — Binance-inspired DARK theme
   Reference: DESIGN-binance.md
   Deep near-black canvas + single yellow accent (#FCD535),
   trading green/red semantics, flat color-block surfaces.
   ============================================================ */

:root {
    /* --- Binance design tokens --- */
    --rg-canvas:            #0b0e11; /* page floor            */
    --rg-surface:           #1e2329; /* cards, sidebar        */
    --rg-elevated:          #2b3139; /* hover / nested / hairline */
    --rg-hairline:          #2b3139; /* 1px borders on dark   */
    --rg-primary:           #fcd535; /* Binance yellow        */
    --rg-primary-active:    #f0b90b; /* pressed yellow        */
    --rg-primary-disabled:  #3a3a1f;
    --rg-on-primary:        #181a20; /* black text on yellow  */
    --rg-body:              #eaecef; /* body text on dark     */
    --rg-on-dark:           #ffffff; /* high-contrast headings*/
    --rg-muted:             #707a8a;
    --rg-muted-strong:      #929aa5;
    --rg-up:                #0ecb81; /* trading green         */
    --rg-down:              #f6465d; /* trading red           */
    --rg-info:              #3b82f6;
}

/* ---- Bootstrap variable remap (applies in dark) ---- */
:root,
[data-bs-theme="dark"] {
    --bs-body-bg:            var(--rg-canvas);
    --bs-body-color:         var(--rg-body);
    --bs-body-color-rgb:     234, 236, 239;
    --bs-body-bg-rgb:        11, 14, 17;

    --bs-primary:            var(--rg-primary);
    --bs-primary-rgb:        252, 213, 53;
    --bs-secondary:          var(--rg-muted);
    --bs-secondary-rgb:      112, 122, 138;
    --bs-success:            var(--rg-up);
    --bs-success-rgb:        14, 203, 129;
    --bs-danger:             var(--rg-down);
    --bs-danger-rgb:         246, 70, 93;
    --bs-warning:            var(--rg-primary);
    --bs-warning-rgb:        252, 213, 53;
    --bs-info:               var(--rg-info);
    --bs-info-rgb:           59, 130, 246;

    --bs-border-color:       var(--rg-hairline);
    --bs-border-color-translucent: rgba(255, 255, 255, .08);

    --bs-emphasis-color:     var(--rg-on-dark);
    --bs-secondary-color:    var(--rg-muted-strong);
    --bs-secondary-bg:       var(--rg-elevated);
    --bs-tertiary-bg:        var(--rg-surface);
    --bs-tertiary-color:     var(--rg-muted);

    --bs-link-color:         var(--rg-primary);
    --bs-link-color-rgb:     252, 213, 53;
    --bs-link-hover-color:   var(--rg-primary-active);
    --bs-link-hover-color-rgb: 240, 185, 11;

    --bs-heading-color:      var(--rg-on-dark);
    --bs-code-color:         var(--rg-primary);

    --bs-font-sans-serif: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ============================================================
   Base canvas
   ============================================================ */
html,
body {
    background-color: var(--rg-canvas) !important;
    color: var(--rg-body);
}

#app { background-color: var(--rg-canvas); }

#main {
    background-color: var(--rg-canvas) !important;
}

/* Numbers / prices feel tabular — BinancePlex substitute */
.stats-icon + div h4,
.card .fw-bold,
td.text-end,
.number,
h4.mb-0 {
    font-feature-settings: "tnum" 1;
}

/* ============================================================
   Sidebar
   ============================================================ */
#sidebar .sidebar-wrapper {
    background: var(--rg-surface) !important;
    border-right: 1px solid var(--rg-hairline);
}

.sidebar-header .logo span,
.sidebar-header .text-primary {
    color: var(--rg-primary) !important;
}

#sidebar .sidebar-item .sidebar-link {
    color: var(--rg-muted-strong);
    border-radius: 8px;
    transition: background-color .15s ease, color .15s ease;
}

#sidebar .sidebar-item .sidebar-link .bi,
#sidebar .sidebar-item .sidebar-link i {
    color: var(--rg-muted);
}

#sidebar .sidebar-item .sidebar-link:hover {
    background-color: var(--rg-elevated);
    color: var(--rg-on-dark);
}

#sidebar .sidebar-item .sidebar-link:hover .bi,
#sidebar .sidebar-item .sidebar-link:hover i {
    color: var(--rg-on-dark);
}

#sidebar .sidebar-item.active .sidebar-link {
    background-color: rgba(252, 213, 53, .12);
    color: var(--rg-primary);
    font-weight: 600;
}

#sidebar .sidebar-item.active .sidebar-link .bi,
#sidebar .sidebar-item.active .sidebar-link i {
    color: var(--rg-primary);
}

/* left accent bar on active item */
#sidebar .sidebar-item.active {
    position: relative;
}
#sidebar .sidebar-item.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--rg-primary);
}

/* ============================================================
   Header / navbar
   ============================================================ */
#main header .navbar,
.navbar-light {
    background-color: transparent !important;
}

#main header h4,
.page-heading h3 {
    color: var(--rg-on-dark);
}

.burger-btn .bi { color: var(--rg-body); }

/* ============================================================
   Cards & containers  (flat surface, hairline separation)
   ============================================================ */
.card {
    background-color: var(--rg-surface);
    border: 1px solid var(--rg-hairline);
    border-radius: 12px;
    box-shadow: none;
    color: var(--rg-body);
}

.card .card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--rg-hairline);
}

.card .card-header .card-title,
.card-title {
    color: var(--rg-on-dark);
    font-weight: 600;
}

.card .card-footer {
    background-color: transparent;
    border-top: 1px solid var(--rg-hairline);
}

/* Mazer stats-icon tinted squares */
.stats-icon {
    border-radius: 10px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bg-light-primary { background-color: rgba(252, 213, 53, .14) !important; }
.bg-light-success { background-color: rgba(14, 203, 129, .14) !important; }
.bg-light-danger  { background-color: rgba(246, 70, 93, .14)  !important; }
.bg-light-warning { background-color: rgba(252, 213, 53, .14) !important; }
.bg-light-info    { background-color: rgba(59, 130, 246, .14) !important; }
.bg-light-secondary { background-color: rgba(112, 122, 138, .16) !important; }

/* ============================================================
   Text helpers
   ============================================================ */
.text-muted { color: var(--rg-muted) !important; }
.text-primary { color: var(--rg-primary) !important; }
.text-success { color: var(--rg-up) !important; }
.text-danger  { color: var(--rg-down) !important; }
.text-warning { color: var(--rg-primary) !important; }
.text-dark    { color: var(--rg-body) !important; }
small, .small { color: var(--rg-muted); }
h1, h2, h3, h4, h5, h6 { color: var(--rg-on-dark); }
a { color: var(--rg-primary); }
a:hover { color: var(--rg-primary-active); }

/* ============================================================
   Buttons  — signature: yellow bg + black text
   ============================================================ */
.btn-primary {
    --bs-btn-bg: var(--rg-primary);
    --bs-btn-border-color: var(--rg-primary);
    --bs-btn-color: var(--rg-on-primary);
    --bs-btn-hover-bg: var(--rg-primary-active);
    --bs-btn-hover-border-color: var(--rg-primary-active);
    --bs-btn-hover-color: var(--rg-on-primary);
    --bs-btn-active-bg: var(--rg-primary-active);
    --bs-btn-active-border-color: var(--rg-primary-active);
    --bs-btn-active-color: var(--rg-on-primary);
    --bs-btn-disabled-bg: var(--rg-primary-disabled);
    --bs-btn-disabled-border-color: var(--rg-primary-disabled);
    --bs-btn-disabled-color: var(--rg-muted);
    font-weight: 600;
}

/* Yellow CTAs ALWAYS carry black text (Binance signature: black on yellow).
   Forced with !important + icon coverage so no Mazer/theme rule can flip it
   back to white. */
.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:disabled,
.btn-warning,
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active {
    color: var(--rg-on-primary) !important;
}
.btn-primary i,
.btn-primary .bi,
.btn-warning i,
.btn-warning .bi {
    color: var(--rg-on-primary) !important;
}

/* Yellow "warning" buttons share the primary treatment */
.btn-warning {
    --bs-btn-bg: var(--rg-primary);
    --bs-btn-border-color: var(--rg-primary);
    --bs-btn-hover-bg: var(--rg-primary-active);
    --bs-btn-hover-border-color: var(--rg-primary-active);
    --bs-btn-active-bg: var(--rg-primary-active);
    font-weight: 600;
}

.btn-success {
    --bs-btn-bg: var(--rg-up);
    --bs-btn-border-color: var(--rg-up);
    --bs-btn-color: #ffffff;
    --bs-btn-hover-bg: #0bb673;
    --bs-btn-hover-border-color: #0bb673;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-active-bg: #0bb673;
    --bs-btn-active-border-color: #0bb673;
}

.btn-danger {
    --bs-btn-bg: var(--rg-down);
    --bs-btn-border-color: var(--rg-down);
    --bs-btn-color: #ffffff;
    --bs-btn-hover-bg: #e23c52;
    --bs-btn-hover-border-color: #e23c52;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-active-bg: #e23c52;
    --bs-btn-active-border-color: #e23c52;
}

.btn-secondary {
    --bs-btn-bg: var(--rg-elevated);
    --bs-btn-border-color: var(--rg-elevated);
    --bs-btn-color: var(--rg-body);
    --bs-btn-hover-bg: #363d47;
    --bs-btn-hover-border-color: #363d47;
    --bs-btn-hover-color: var(--rg-on-dark);
    --bs-btn-active-bg: #363d47;
}

.btn-outline-primary {
    --bs-btn-color: var(--rg-primary);
    --bs-btn-border-color: var(--rg-primary);
    --bs-btn-hover-bg: var(--rg-primary);
    --bs-btn-hover-border-color: var(--rg-primary);
    --bs-btn-hover-color: var(--rg-on-primary);
    --bs-btn-active-bg: var(--rg-primary);
    --bs-btn-active-color: var(--rg-on-primary);
}

.btn-outline-danger {
    --bs-btn-color: var(--rg-down);
    --bs-btn-border-color: var(--rg-down);
    --bs-btn-hover-bg: var(--rg-down);
    --bs-btn-hover-border-color: var(--rg-down);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-active-bg: var(--rg-down);
}

.btn-outline-secondary {
    --bs-btn-color: var(--rg-muted-strong);
    --bs-btn-border-color: var(--rg-hairline);
    --bs-btn-hover-bg: var(--rg-elevated);
    --bs-btn-hover-border-color: var(--rg-elevated);
    --bs-btn-hover-color: var(--rg-on-dark);
}

.btn-light {
    --bs-btn-bg: var(--rg-elevated);
    --bs-btn-border-color: var(--rg-hairline);
    --bs-btn-color: var(--rg-body);
    --bs-btn-hover-bg: #363d47;
    --bs-btn-hover-color: var(--rg-on-dark);
}

/* ============================================================
   Badges
   ============================================================ */
.badge.bg-primary   { background-color: var(--rg-primary) !important; color: var(--rg-on-primary) !important; }
.badge.bg-success   { background-color: rgba(14, 203, 129, .16) !important; color: var(--rg-up) !important; }
.badge.bg-danger    { background-color: rgba(246, 70, 93, .16) !important; color: var(--rg-down) !important; }
.badge.bg-warning   { background-color: rgba(252, 213, 53, .16) !important; color: var(--rg-primary) !important; }
.badge.bg-secondary { background-color: rgba(112, 122, 138, .18) !important; color: var(--rg-muted-strong) !important; }
.badge.bg-info      { background-color: rgba(59, 130, 246, .16) !important; color: var(--rg-info) !important; }

/* ============================================================
   Tables
   ============================================================ */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--rg-body);
    --bs-table-border-color: var(--rg-hairline);
    --bs-table-striped-bg: rgba(255, 255, 255, .02);
    --bs-table-striped-color: var(--rg-body);
    --bs-table-hover-bg: rgba(252, 213, 53, .06);
    --bs-table-hover-color: var(--rg-on-dark);
    color: var(--rg-body);
    border-color: var(--rg-hairline);
}

.table > :not(caption) > * > * {
    background-color: transparent;
    color: var(--rg-body);
    border-bottom-color: var(--rg-hairline);
}

.table thead th,
.table > thead {
    color: var(--rg-muted);
    text-transform: none;
    border-bottom: 1px solid var(--rg-hairline);
}

.table-light,
.table .table-light,
.table > :not(caption) > tr.table-light > *,
thead.table-light th,
tfoot.table-light td {
    --bs-table-bg: var(--rg-elevated);
    background-color: var(--rg-elevated) !important;
    color: var(--rg-muted-strong) !important;
    border-color: var(--rg-hairline) !important;
}

/* ============================================================
   Forms & inputs
   ============================================================ */
.form-control,
.form-select {
    background-color: var(--rg-canvas);
    border: 1px solid var(--rg-hairline);
    color: var(--rg-body);
    border-radius: 8px;
}

.form-control:focus,
.form-select:focus {
    background-color: var(--rg-canvas);
    border-color: var(--rg-primary);
    color: var(--rg-body);
    box-shadow: 0 0 0 2px rgba(252, 213, 53, .25);
}

.form-control::placeholder { color: var(--rg-muted); }

.form-control:disabled,
.form-select:disabled {
    background-color: var(--rg-surface);
    color: var(--rg-muted);
}

.form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23929aa5' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.form-label { color: var(--rg-body); }
.form-check-input {
    background-color: var(--rg-canvas);
    border-color: var(--rg-hairline);
}
.form-check-input:checked {
    background-color: var(--rg-primary);
    border-color: var(--rg-primary);
}
.form-check-input:focus {
    border-color: var(--rg-primary);
    box-shadow: 0 0 0 2px rgba(252, 213, 53, .25);
}

.input-group-text {
    background-color: var(--rg-elevated);
    border-color: var(--rg-hairline);
    color: var(--rg-muted-strong);
}

/* ============================================================
   Dropdowns / modals / offcanvas / popovers
   ============================================================ */
.dropdown-menu {
    --bs-dropdown-bg: var(--rg-surface);
    --bs-dropdown-color: var(--rg-body);
    --bs-dropdown-border-color: var(--rg-hairline);
    --bs-dropdown-link-color: var(--rg-body);
    --bs-dropdown-link-hover-bg: var(--rg-elevated);
    --bs-dropdown-link-hover-color: var(--rg-on-dark);
    --bs-dropdown-link-active-bg: rgba(252, 213, 53, .14);
    --bs-dropdown-link-active-color: var(--rg-primary);
}

.modal-content,
.offcanvas {
    background-color: var(--rg-surface);
    color: var(--rg-body);
    border: 1px solid var(--rg-hairline);
}
.modal-header,
.modal-footer { border-color: var(--rg-hairline); }
.modal-backdrop.show { opacity: .7; }

/* ============================================================
   Alerts  (tinted, hairline)
   ============================================================ */
.alert {
    border-width: 1px;
    border-style: solid;
    border-radius: 8px;
}
.alert-success {
    background-color: rgba(14, 203, 129, .10);
    border-color: rgba(14, 203, 129, .35);
    color: var(--rg-up);
}
.alert-danger {
    background-color: rgba(246, 70, 93, .10);
    border-color: rgba(246, 70, 93, .35);
    color: var(--rg-down);
}
.alert-warning {
    background-color: rgba(252, 213, 53, .10);
    border-color: rgba(252, 213, 53, .35);
    color: var(--rg-primary);
}
.alert-info {
    background-color: rgba(59, 130, 246, .10);
    border-color: rgba(59, 130, 246, .35);
    color: var(--rg-info);
}
.alert-primary {
    background-color: rgba(252, 213, 53, .10);
    border-color: rgba(252, 213, 53, .35);
    color: var(--rg-primary);
}
.btn-close {
    filter: invert(1) grayscale(1) brightness(1.4);
}

/* ============================================================
   Pagination, list-group, misc
   ============================================================ */
.pagination {
    --bs-pagination-bg: var(--rg-surface);
    --bs-pagination-color: var(--rg-body);
    --bs-pagination-border-color: var(--rg-hairline);
    --bs-pagination-hover-bg: var(--rg-elevated);
    --bs-pagination-hover-color: var(--rg-on-dark);
    --bs-pagination-hover-border-color: var(--rg-hairline);
    --bs-pagination-active-bg: var(--rg-primary);
    --bs-pagination-active-border-color: var(--rg-primary);
    --bs-pagination-active-color: var(--rg-on-primary);
    --bs-pagination-disabled-bg: var(--rg-surface);
    --bs-pagination-disabled-color: var(--rg-muted);
    --bs-pagination-disabled-border-color: var(--rg-hairline);
}

.list-group {
    --bs-list-group-bg: var(--rg-surface);
    --bs-list-group-color: var(--rg-body);
    --bs-list-group-border-color: var(--rg-hairline);
    --bs-list-group-action-hover-bg: var(--rg-elevated);
    --bs-list-group-action-hover-color: var(--rg-on-dark);
}

hr { border-color: var(--rg-hairline); color: var(--rg-hairline); opacity: 1; }

.border,
.border-top,
.border-bottom,
.border-start,
.border-end { border-color: var(--rg-hairline) !important; }

.bg-white,
.bg-light { background-color: var(--rg-surface) !important; color: var(--rg-body) !important; }

/* Perfect-scrollbar thumbs on dark */
.ps__thumb-x, .ps__thumb-y { background-color: var(--rg-elevated); }

/* Progress bars */
.progress {
    background-color: var(--rg-elevated);
}
.progress-bar { background-color: var(--rg-primary); }