/* ==========================================================================
   pro-theme.css — premium visual layer for the trading UI
   ==========================================================================
   Additive overrides on top of main.css / custom.css. Uses the site's own
   HSL design tokens (--base, --success, --danger, --white, --section-bg,
   --border-color, ...) defined in css/color.php + main.css so it stays in
   sync with the admin-configurable brand color instead of hardcoding one.
   Scoped to avoid fighting the base template: mostly new component classes
   (trading-chart-pro, tc-*) plus light-touch refinements of existing trading
   components (order book rows, ticker header, buttons, scrollbar).
   ========================================================================== */

/* ---- Token fallback: --section-bg is referenced throughout this file (hero,
   sidebar, bottom nav) but is only ever DEFINED in css/main.css (loaded by
   layouts/app.blade.php, the public/trading layout) — layouts/master.blade.php
   (the actual dashboard/wallet/sessions layout, loaded via dashboard/css/main.css
   instead) never defines it. An undefined custom property inside var() makes
   the WHOLE declaration invalid at computed-value time, not just that one
   value — so every rule below that used var(--section-bg) was silently
   rendering with NO background at all on every dashboard-area page (the
   highest-traffic ones: dashboard, wallet, sessions, orders...). Re-declaring
   it here — after both possible main.css files, so this wins the cascade on
   both layouts — fixes it everywhere in one place instead of patching each
   call site. ---- */
:root {
    --section-bg: 206 13% 11%;
    --body-background: 220 20% 6%;
}

/* ---- Global refinements (safe, low risk across all pages) ---- */

* {
    scrollbar-width: thin;
    scrollbar-color: hsl(var(--white) / 0.18) transparent;
}

*::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

*::-webkit-scrollbar-thumb {
    background: hsl(var(--white) / 0.18);
    border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover {
    background: hsl(var(--white) / 0.3);
}

.btn--base {
    background: hsl(var(--base));
    transition: filter 0.15s ease, transform 0.1s ease;
}

.btn--base:hover {
    filter: brightness(1.08);
}

.btn--base:active {
    transform: scale(0.98);
}

/* ---- Trading terminal: ticker header ---- */

.trading-header {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid hsl(var(--white) / 0.06);
}

/* ---- Trading terminal: order book depth rows ---- */

.trading-left__list {
    transition: background-color 0.2s ease;
    border-radius: 4px;
}

.trading-left__list:hover {
    background-color: hsl(var(--white) / 0.06) !important;
}

.trading-left__list.has-my-order {
    outline: 1px dashed hsl(var(--base) / 0.6);
    outline-offset: -1px;
}

/* ---- Trading terminal: candlestick chart (self-hosted, replaces the old
   external TradingView widget iframe) ---- */

.trading-chart-pro {
    margin-top: 15px;
    border-radius: 8px;
    overflow: hidden;
    background-color: #0b0e11;
    border: 1px solid hsl(var(--white) / 0.06);
}

@media screen and (max-width: 1199px) {
    .trading-chart-pro {
        margin-top: 0;
    }
}

.trading-chart-pro__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.trading-chart-pro__intervals {
    display: flex;
    align-items: center;
    gap: 2px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 8px;
    padding: 3px;
}

.tc-interval {
    appearance: none;
    border: 0;
    background: transparent;
    color: #848e9c;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    padding: 7px 11px;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.tc-interval:hover {
    color: #eaecef;
}

.tc-interval.active {
    background: hsl(var(--base));
    color: #fff;
}

.trading-chart-pro__ohlc {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 12px;
    color: #848e9c;
    flex-wrap: wrap;
}

.tc-ohlc-item b {
    color: #eaecef;
    font-weight: 600;
    margin-left: 3px;
}

.tc-change {
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.04);
}

.tc-change.up {
    color: #0ecb81;
}

.tc-change.down {
    color: #f6465d;
}

.trading-chart-pro__body {
    position: relative;
    height: 480px;
}

@media screen and (max-width: 767px) {
    .trading-chart-pro__body {
        height: 340px;
    }
}

.tc-canvas {
    position: absolute;
    inset: 0;
}

.tc-loading,
.tc-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    color: #5e6673;
    background: #0b0e11;
    text-align: center;
    padding: 20px;
}

.tc-empty i {
    font-size: 26px;
    opacity: 0.6;
}

.tc-empty p {
    max-width: 320px;
    font-size: 13px;
    margin: 0;
}

.tc-spinner {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.12);
    border-top-color: hsl(var(--base));
    animation: tc-spin 0.8s linear infinite;
}

@keyframes tc-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ==========================================================================
   Dashboard area (layouts/master.blade.php — dashboard, wallet, orders,
   transactions, KYC, P2P, referrals, tickets, settings, ...). One include
   here reaches every logged-in page, so this is the highest-leverage spot
   for a sitewide visual upgrade beyond the trading terminal.
   ========================================================================== */

/* ---- Sidebar navigation (glass panel, glow active pill) ---- */

.dashboard-fluid .sidebar-menu {
    background: linear-gradient(180deg, hsl(var(--section-bg) / 0.92), hsl(var(--section-bg) / 0.98));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-right: 1px solid hsl(var(--white) / 0.06);
}

.dashboard-fluid .sidebar-logo {
    padding-bottom: 14px;
    margin-bottom: 8px;
    border-bottom: 1px solid hsl(var(--white) / 0.06);
}

.dashboard-fluid .sidebar-menu-list__link {
    border-radius: 8px;
    transition: background-color 0.18s ease, color 0.18s ease, padding-left 0.18s ease, transform 0.18s ease;
}

.dashboard-fluid .sidebar-menu-list__link:hover {
    background: hsl(var(--white) / 0.05);
    transform: translateX(2px);
}

.dashboard-fluid .sidebar-menu-list__item.active > a {
    background: linear-gradient(90deg, hsl(var(--base) / 0.18), hsl(var(--base) / 0.03));
    position: relative;
    box-shadow: 0 0 0 1px hsl(var(--base) / 0.12) inset;
}

.dashboard-fluid .sidebar-menu-list__item.active > a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: hsl(var(--base));
    box-shadow: 0 0 10px hsl(var(--base) / 0.7);
}

/* ---- Live market ticker marquee (dashboard, top) ---- */

.pro-ticker {
    overflow: hidden;
    border-radius: 10px;
    margin-bottom: 16px;
    background: hsl(var(--white) / 0.03);
    border: 1px solid hsl(var(--white) / 0.06);
    mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}

.pro-ticker__track {
    display: flex;
    width: max-content;
    animation: pro-ticker-scroll 32s linear infinite;
}

.pro-ticker:hover .pro-ticker__track {
    animation-play-state: paused;
}

.pro-ticker__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    font-size: 12px;
    font-weight: 600;
    color: hsl(var(--white) / 0.75);
    white-space: nowrap;
    border-right: 1px solid hsl(var(--white) / 0.06);
}

.pro-ticker__at {
    color: hsl(var(--white) / 0.4);
    font-weight: 400;
}

@keyframes pro-ticker-scroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

/* ---- Hero balance card (dashboard) ---- */

.pro-hero {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    padding: 32px 28px;
    margin-bottom: 24px;
    background: linear-gradient(155deg, hsl(var(--section-bg) / 0.9), hsl(var(--base) / 0.08) 120%);
    border: 1px solid hsl(var(--white) / 0.07);
}

.pro-hero__glow {
    position: absolute;
    top: -60%;
    right: -10%;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, hsl(var(--base) / 0.28), transparent 70%);
    pointer-events: none;
}

.pro-hero__body {
    position: relative;
    z-index: 1;
}

.pro-hero__label {
    display: block;
    font-size: 13px;
    color: hsl(var(--white) / 0.6);
    margin-bottom: 6px;
}

.pro-hero__amount {
    font-size: 2.4rem;
    font-weight: 700;
    margin: 0 0 20px;
    letter-spacing: -0.5px;
}

.pro-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.pro-hero__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 8px;
    border: 1px solid hsl(var(--white) / 0.12);
    background: hsl(var(--white) / 0.04);
    color: hsl(var(--white) / 0.9);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.pro-hero__btn:hover {
    transform: translateY(-2px);
    border-color: hsl(var(--base) / 0.5);
    color: hsl(var(--white) / 1);
}

.pro-hero__btn--primary {
    background: hsl(var(--base));
    border-color: transparent;
    color: #fff;
}

.pro-hero__btn--primary:hover {
    filter: brightness(1.08);
    color: #fff;
}

/* ---- Hero stat-pill row (Open/Completed/Canceled Orders + Total Trades,
   absorbed into the hero card instead of a separate boxy grid) ---- */

.pro-hero__stats {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid hsl(var(--white) / 0.08);
}

.pro-hero__stat {
    flex: 1 1 120px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 16px;
    border-radius: 10px;
    background: hsl(var(--white) / 0.03);
    border: 1px solid hsl(var(--white) / 0.06);
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.pro-hero__stat:hover {
    background: hsl(var(--white) / 0.06);
    border-color: hsl(var(--base) / 0.3);
    transform: translateY(-2px);
}

.pro-hero__stat-label {
    font-size: 11px;
    color: hsl(var(--white) / 0.55);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.pro-hero__stat-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: hsl(var(--white) / 0.95);
}

/* ---- Stat cards (dashboard) — 3D hover lift ---- */

.dashboard-fluid .dashboard-body .dashboard-card {
    border: 1px solid hsl(var(--white) / 0.06);
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.dashboard-fluid .dashboard-body .dashboard-card:hover {
    border-color: hsl(var(--base) / 0.35);
    transform: translateY(-4px);
    box-shadow: 0 12px 24px -12px hsl(var(--base) / 0.35);
}

.dashboard-fluid .dashboard-body .dashboard-card__icon {
    background: hsl(var(--white) / 0.06);
}

/* ---- Wallet overview / deposit / withdraw widgets (right sidebar) ---- */

.right-sidebar {
    border: 1px solid hsl(var(--white) / 0.06);
}

.right-sidebar__number {
    color: hsl(var(--base));
    font-size: 1.6rem;
    font-weight: 600;
}

.right-sidebar__item {
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.right-sidebar__item:hover {
    border-color: hsl(var(--base) / 0.35);
    background-color: hsl(var(--white) / 0.03);
}

/* ---- Recent order / transaction lists ---- */

.transection {
    border: 1px solid hsl(var(--white) / 0.06);
}

.transection__item {
    padding: 6px 8px;
    border-radius: 6px;
    transition: background-color 0.15s ease;
}

.transection__item:hover {
    background-color: hsl(var(--white) / 0.03);
}

/* Icon avatar prefixing each history row (order side / +/- transaction) */
.pro-avatar {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    margin-right: 10px;
}

.pro-avatar--success {
    background: hsl(var(--success) / 0.12);
    color: hsl(var(--success));
}

.pro-avatar--danger {
    background: hsl(var(--danger) / 0.12);
    color: hsl(var(--danger));
}

/* ---- Data tables (orders, transactions, wallet list, tickets, ...) ---- */

.table-wrapper {
    border: 1px solid hsl(var(--white) / 0.06);
}

.table thead tr th {
    border-bottom: 1px solid hsl(var(--white) / 0.08);
    letter-spacing: 0.3px;
    text-transform: uppercase;
    font-size: 11px;
}

.table tbody tr {
    transition: background-color 0.15s ease;
}

.table tbody tr:hover td {
    background-color: hsl(var(--white) / 0.03);
}

.customer__thumb img {
    border-radius: 50%;
    border: 1px solid hsl(var(--white) / 0.14);
}

/* ---- Tab menus (Spot/Funding wallet switch, order status tabs, ...) ---- */

.dashboard-header-menu__link,
.table-header-menu__link {
    transition: color 0.15s ease;
}

.dashboard-header-menu__link.active,
.table-header-menu__link.active {
    position: relative;
}

/* ---- Alerts (KYC notices, 2FA reminder) ---- */

.alert--danger {
    border-left: 3px solid hsl(var(--danger));
}

.alert--warning {
    border-left: 3px solid hsl(var(--warning));
}

/* ---- Badges (order status, transaction +/-) ---- */

.badge--success,
.badge--danger,
.badge--warning {
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: 0.2px;
}

/* ---- Generic content cards (KYC form, settings, ticket view, ...) ---- */

.custom--card {
    border: 1px solid hsl(var(--white) / 0.06);
    box-shadow: none;
}

.custom--card .card-header {
    border-bottom: 1px solid hsl(var(--white) / 0.08);
}

/* ---- Public markets table (market_list.blade.php / sections/coin_pair_list) ---- */

.table-header-menu__link.active {
    background: hsl(var(--base) / 0.12);
    border-radius: 6px 6px 0 0;
}

/* ---- Trading terminal: order book price colors + glass panel ---- */

.trading-left,
.trading-right,
.trading-middle,
.order-form-wrapper {
    border: 1px solid hsl(var(--white) / 0.06);
}

.sell-side-order-list .price__item {
    color: hsl(var(--danger));
}

.buy-side-order-list .price__item {
    color: hsl(var(--success));
}

/* ==========================================================================
   Mobile responsive — off-canvas sidebar drawer + stacked hero/cards.
   The base template already toggles `.active`/`.show` on the sidebar and a
   `.sidebar-overlay` scrim via dashboard/js/main.js on
   `.dashboard-sidebar-filter__button` clicks; this layer only restyles that
   existing behavior to match the glass drawer look, it does not change JS.
   ========================================================================== */

@media screen and (max-width: 1199px) {
    .dashboard-fluid .sidebar-menu {
        backdrop-filter: blur(28px);
        -webkit-backdrop-filter: blur(28px);
        box-shadow: 8px 0 32px rgba(0, 0, 0, 0.4);
    }

    .sidebar-overlay.show,
    .sidebar-overlay.active {
        backdrop-filter: blur(2px);
        background: rgba(0, 0, 0, 0.55);
    }
}

@media screen and (max-width: 767px) {
    .pro-hero {
        padding: 22px 18px;
        border-radius: 12px;
    }

    .pro-hero__amount {
        font-size: 1.8rem;
    }

    .pro-hero__btn {
        flex: 1 1 auto;
        justify-content: center;
    }

    .pro-hero__stat {
        flex: 1 1 40%;
    }

    .dashboard-fluid .dashboard-body .dashboard-card:hover {
        transform: none;
    }
}

/* ---- Mobile bottom tab bar (new — replaces nothing, adds quick-access nav
   that didn't exist before; fixed, only below the xl breakpoint like the
   rest of the site's existing mobile sidebar toggle) ---- */

.pro-bottomnav {
    display: none;
}

@media screen and (max-width: 1199px) {
    .pro-bottomnav {
        display: flex;
        align-items: center;
        justify-content: space-around;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 999;
        padding: 8px 6px calc(8px + env(safe-area-inset-bottom, 0px));
        background: hsl(var(--section-bg) / 0.92);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-top: 1px solid hsl(var(--white) / 0.08);
    }

    .dashboard-fluid .dashboard-body {
        padding-bottom: 76px;
    }
}

.pro-bottomnav__item {
    appearance: none;
    background: transparent;
    border: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 6px 10px;
    font-size: 10px;
    font-weight: 600;
    color: hsl(var(--white) / 0.55);
    text-transform: uppercase;
    letter-spacing: 0.2px;
}

.pro-bottomnav__item i {
    font-size: 19px;
}

.pro-bottomnav__item.active {
    color: hsl(var(--base));
}

.pro-bottomnav__item--fab {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: hsl(var(--base));
    color: #fff;
    justify-content: center;
    margin-top: -22px;
    box-shadow: 0 6px 16px -4px hsl(var(--base) / 0.6);
}

.pro-bottomnav__item--fab i {
    font-size: 20px;
}

/* ==========================================================================
   Security & Sessions page (user.sessions) — device/session cards matching
   the DeviceService/SessionService/LoginHistoryService backend.
   ========================================================================== */

.sesscard-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sesscard {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 16px 18px;
    border-radius: 12px;
    border: 1px solid hsl(var(--white) / 0.07);
    background: hsl(var(--white) / 0.02);
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.sesscard:hover {
    border-color: hsl(var(--base) / 0.3);
    background: hsl(var(--white) / 0.035);
}

.sesscard.current {
    border-color: hsl(var(--success) / 0.4);
    background: hsl(var(--success) / 0.05);
}

.sesscard__left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.sesscard__icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: hsl(var(--white) / 0.06);
    font-size: 18px;
    color: hsl(var(--base));
    flex-shrink: 0;
}

.sesscard__title {
    font-weight: 600;
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sesscard__meta {
    font-size: 12px;
    color: hsl(var(--white) / 0.55);
}

.sesscard__badge {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.sesscard__badge--current {
    background: hsl(var(--success) / 0.15);
    color: hsl(var(--success));
}

.sesscard__badge--unknown {
    background: hsl(var(--warning) / 0.15);
    color: hsl(var(--warning));
}

.sesscard__revoke {
    border: 1px solid hsl(var(--danger) / 0.35);
    background: transparent;
    color: hsl(var(--danger));
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.sesscard__revoke:hover {
    background: hsl(var(--danger) / 0.12);
}

.security-tab-nav {
    display: flex;
    gap: 4px;
    padding: 4px;
    border-radius: 10px;
    background: hsl(var(--white) / 0.03);
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.security-tab-nav .nav-link {
    border-radius: 7px;
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 600;
    color: hsl(var(--white) / 0.6);
}

.security-tab-nav .nav-link.active {
    background: hsl(var(--base));
    color: #fff;
}

/* ==========================================================================
   Admin — Design & Branding settings page (admin.setting.design)
   ========================================================================== */

.design-swatch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 10px;
    border: 1px solid hsl(var(--white) / 0.07);
    margin-bottom: 10px;
}

.design-swatch {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid hsl(var(--white) / 0.15);
    cursor: pointer;
    flex-shrink: 0;
}

.design-swatch.active {
    box-shadow: 0 0 0 2px hsl(var(--base));
}

.design-preview-card {
    position: sticky;
    top: 20px;
    border-radius: 14px;
    padding: 24px;
    border: 1px solid hsl(var(--white) / 0.08);
    background: hsl(var(--section-bg) / 0.85);
}

.design-preview-card .pro-hero {
    margin-bottom: 0;
    padding: 20px;
}

/* ==========================================================================
   Theme toggles — driven by the `theme_settings` table via the
   themeSettings() helper, set as body classes in layouts/app.blade.php and
   layouts/master.blade.php. Admin-editable at admin.design.index.
   ========================================================================== */

body.theme-no-glow .pro-hero__glow,
body.theme-no-glow .dashboard-fluid .sidebar-menu-list__item.active > a::before {
    box-shadow: none;
    display: none;
}

body.theme-no-glow .dashboard-fluid .dashboard-body .dashboard-card:hover,
body.theme-no-glow .pro-hero__btn:hover {
    box-shadow: none;
}

body.theme-no-lift .dashboard-fluid .dashboard-body .dashboard-card:hover,
body.theme-no-lift .pro-hero__btn:hover,
body.theme-no-lift .dashboard-fluid .sidebar-menu-list__link:hover {
    transform: none !important;
}

body.theme-reduced-motion,
body.theme-reduced-motion * {
    transition-duration: 0s !important;
    animation-duration: 0s !important;
}

body.theme-surface-slate .dashboard-fluid .sidebar-menu {
    background: hsl(220deg 18% 12% / 0.96);
}

body.theme-surface-flat .pro-hero,
body.theme-surface-flat .dashboard-fluid .dashboard-body .dashboard-card,
body.theme-surface-flat .right-sidebar {
    background: hsl(var(--section-bg));
    backdrop-filter: none;
}