/* =========================================================================
   HYIPLAB — DARK / GOLD DASHBOARD THEME
   Drop-in override loaded AFTER hyiplab_public.css / hyiplab_3d.css.
   Re-tunes the design-token variables the whole front-end already runs
   on (--base, --white, --light, --border, --heading, --body) so every
   page that extends views/user/layouts/master.php inherits the same
   dark background + gold accent look shown in the reference dashboard,
   plus explicit fixes for components that don't use those tokens.
   ========================================================================= */

:root {
    /* ----- surfaces ----- */
    --page-bg: 0 0% 6%;          /* app background            #0f0f0f */
    --surface: 0 0% 9%;          /* cards / sidebar            #171717 */
    --surface-2: 0 0% 12%;       /* table head, inputs, hover  #1e1e1e */
    --surface-3: 0 0% 15%;       /* raised / active rows       #262626 */

    /* ----- gold accent (drives --base everywhere) ----- */
    --base-h: 42;
    --base-s: 78%;
    --base-l: 52%;
    --gradient-base: linear-gradient(270deg, hsl(var(--base-400)) 0%, hsl(var(--base-600)) 100%);

    /* ----- text ----- */
    --heading: 0 0% 96%;         /* titles / balances -> near white */
    --body: 0 0% 66%;            /* paragraph text -> light grey */

    /* ----- surfaces the stylesheet already keys off of ----- */
    --white: var(--surface);     /* every hsl(var(--white)) card/header bg */
    --border: 42 20% 20%;        /* subtle warm-dark border */
    --dark: 0 0% 96%;            /* text on "dark" utility -> stays legible */

    --light-h: 42;
    --light-s: 12%;
    --light-l: 13%;
    --light-50: 0 0% 6%;
    --light-100: 0 0% 8%;
    --light-200: 0 0% 10%;
    --light-300: 0 0% 12%;
    --light-400: 0 0% 14%;
    --light-600: 42 10% 18%;
    --light-700: 42 10% 22%;
    --light-800: 0 0% 80%;
    --light-900: 0 0% 92%;
}

/* ---------------------------------------------------------------------
   Base page + typography
   --------------------------------------------------------------------- */
body.vl-public {
    background-color: hsl(var(--page-bg)) !important;
}

.vl-public,
.vl-public p,
.vl-public span,
.vl-public li,
.vl-public label {
    color: hsl(var(--body));
}

.vl-public h1, .vl-public h2, .vl-public h3, .vl-public h4,
.vl-public h5, .vl-public h6,
.vl-public .title, .vl-public .text--title {
    color: hsl(var(--heading)) !important;
}

.vl-public a { color: hsl(var(--base-300)); }
.vl-public a:hover { color: hsl(var(--base)); }
.vl-public .link-color { color: hsl(var(--base)) !important; }

/* ---------------------------------------------------------------------
   Sidebar
   --------------------------------------------------------------------- */
.vl-public .dashboard-sidebar {
    background-color: #0b0b0b;
    border-right: 1px solid hsl(var(--border));
}

.vl-public .dashboard-sidebar .bg--lights {
    background: linear-gradient(180deg, hsl(var(--base) / 18%) 0%, transparent 100%);
    border-bottom: 1px solid hsl(var(--border));
}

.vl-public .dashboard-sidebar .profile-info .usd-balance,
.vl-public .dashboard-sidebar .profile-info .btc-balance {
    color: hsl(var(--heading));
}

.vl-public .sidebar-menu li a {
    color: hsl(var(--body));
    border-radius: 6px;
}

.vl-public .sidebar-menu li a:hover,
.vl-public .sidebar-menu li a.active {
    background-color: hsl(var(--base) / 12%);
    color: hsl(var(--base-200)) !important;
    box-shadow: inset 3px 0 0 hsl(var(--base));
}

.vl-public .sidebar-menu li a img {
    filter: grayscale(1) brightness(1.6);
    opacity: .8;
}

.vl-public .sidebar-menu li a:hover img,
.vl-public .sidebar-menu li a.active img {
    filter: none;
    opacity: 1;
}

/* ---------------------------------------------------------------------
   Cards / panels
   --------------------------------------------------------------------- */
.vl-public .card,
.vl-public .custom--card {
    background-color: hsl(var(--surface));
    border: 1px solid hsl(var(--border));
    box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}

.vl-public .custom--card .card-header,
.vl-public .custom--card .card-footer {
    background-color: hsl(var(--surface));
    border-color: hsl(var(--border));
}

.vl-public .custom--card .card-body {
    background-color: hsl(var(--surface));
}

/* generic light-surface utility classes used across widget blocks */
.vl-public .bg--white { background-color: hsl(var(--surface)) !important; }
.vl-public .bg--light { background-color: hsl(var(--surface-2)) !important; }
.vl-public .border,
.vl-public .border--light { border-color: hsl(var(--border)) !important; }

/* ---------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------- */
.vl-public .btn--base {
    background: var(--gradient-base);
    border-color: hsl(var(--base));
    color: #171208 !important;
    font-weight: 600;
}

.vl-public .btn--base:hover {
    filter: brightness(1.08);
    color: #171208 !important;
}

.vl-public .btn--secondary {
    background-color: transparent;
    border: 1px solid hsl(var(--border));
    color: hsl(var(--heading));
}

.vl-public .btn--secondary:hover {
    background-color: hsl(var(--surface-2));
    border-color: hsl(var(--base));
    color: hsl(var(--base-200));
}

/* ---------------------------------------------------------------------
   Tables
   --------------------------------------------------------------------- */
.vl-public .table {
    background-color: hsl(var(--surface));
    color: hsl(var(--body));
}

.vl-public .table thead tr {
    background-color: hsl(var(--surface-2));
}

.vl-public .table thead tr th {
    color: hsl(var(--heading));
    border-color: hsl(var(--border));
}

.vl-public .table tbody tr td {
    border-color: hsl(var(--border));
    color: hsl(var(--body));
}

.vl-public .table tbody tr:nth-child(even) {
    background-color: hsl(var(--surface-2) / 60%);
}

.vl-public .table tbody tr:hover {
    background-color: hsl(var(--base) / 8%);
}

/* ---------------------------------------------------------------------
   Alerts / badges / statuses
   --------------------------------------------------------------------- */
.vl-public .alert {
    background-color: hsl(var(--surface));
    border-color: hsl(var(--border));
}

.vl-public .alert__message,
.vl-public .alert__message small { color: hsl(var(--body)); }

.vl-public .badge {
    background-color: hsl(var(--surface-2));
}

.vl-public .badge--base { background-color: hsl(var(--base) / 15%); color: hsl(var(--base-200)); }
.vl-public .badge--dark { background-color: hsl(var(--surface-3)); color: hsl(var(--heading)); }
.vl-public .badge--light { background-color: hsl(var(--surface-2)); color: hsl(var(--body)); }

/* ---------------------------------------------------------------------
   Forms
   --------------------------------------------------------------------- */
.vl-public input.form--control,
.vl-public select.form--control,
.vl-public textarea.form--control,
.vl-public .form-control,
.vl-public .form-select {
    background-color: hsl(var(--surface-2)) !important;
    border: 1px solid hsl(var(--border)) !important;
    color: hsl(var(--heading)) !important;
}

.vl-public input.form--control::placeholder,
.vl-public textarea.form--control::placeholder {
    color: hsl(var(--body) / 70%);
}

.vl-public input.form--control:focus,
.vl-public select.form--control:focus,
.vl-public .form-control:focus {
    border-color: hsl(var(--base)) !important;
    box-shadow: 0 0 0 .15rem hsl(var(--base) / 20%) !important;
}

.vl-public label { color: hsl(var(--heading)); }

/* ---------------------------------------------------------------------
   Modals / dropdowns / pagination
   --------------------------------------------------------------------- */
.vl-public .modal-content,
.vl-public .custom--modal .modal-content {
    background-color: hsl(var(--surface));
    border: 1px solid hsl(var(--border));
}

.vl-public .nav-header-link .dropdown-wrapper {
    background-color: hsl(var(--surface));
    border: 1px solid hsl(var(--border));
}

.vl-public .pagination .page-item a,
.vl-public .pagination .page-item span {
    background-color: hsl(var(--surface));
    border-color: hsl(var(--border));
    color: hsl(var(--body));
}

.vl-public .pagination .page-item.active a,
.vl-public .pagination .page-item.active span {
    background: var(--gradient-base);
    color: #171208;
    border-color: hsl(var(--base));
}

/* ---------------------------------------------------------------------
   Charts (ApexCharts tooltip/grid text tends to render dark-on-dark)
   --------------------------------------------------------------------- */
.vl-public .apexcharts-text,
.vl-public .apexcharts-legend-text {
    fill: hsl(var(--body)) !important;
    color: hsl(var(--body)) !important;
}

.vl-public .apexcharts-gridline {
    stroke: hsl(var(--border));
}

.vl-public .apexcharts-tooltip {
    background: hsl(var(--surface-3)) !important;
    color: hsl(var(--heading)) !important;
    border-color: hsl(var(--border)) !important;
}

/* ---------------------------------------------------------------------
   Scrollbar accent (webkit)
   --------------------------------------------------------------------- */
.vl-public ::-webkit-scrollbar { width: 8px; height: 8px; }
.vl-public ::-webkit-scrollbar-track { background: hsl(var(--surface)); }
.vl-public ::-webkit-scrollbar-thumb { background: hsl(var(--base) / 60%); border-radius: 8px; }