/*
Trader dashboard styles.

Layout is desktop-first in component inline styles (sidebar + dashboard
side by side). This stylesheet only overrides layout at two
breakpoints — tablet and mobile — and targets stable CSS classes
(klass=) set on the components themselves rather than ids, so the
selectors keep working even if a component's id changes.
*/

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700;800&display=swap');

*, *::before, *::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    background: #09090b;
    color: #f9fafb;
    font-family: system-ui, -apple-system, sans-serif;
    height: 100vh;
    overflow: hidden;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
}

input, select, button {
    font-family: inherit;
}

select option {
    background: #18181b;
    color: #f9fafb;
}

::-webkit-scrollbar {
    width: 4px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #2d2d30;
    border-radius: 2px;
}

/* ── Collapsible section consistency ── */
.collapsible-section-toggle {
    transition: background 0.1s ease;
}

.collapsible-section-toggle:hover {
    background: #111114;
}

/* ── Notification toasts ── */
.notification-card {
    animation: toast-in 0.2s ease;
}

@keyframes toast-in {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Tablet and below: sidebar and dashboard stack vertically ── */
@media (max-width: 1024px) {
    body {
        height: auto;
        overflow-y: auto;
    }

    .trader-root {
        height: auto;
        overflow: visible;
    }

    .trader-body {
        flex-direction: column;
        overflow: visible;
    }

    .config-sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #1a1a1a;
        max-height: none;
        overflow-y: visible;
    }

    .trader-dashboard {
        overflow: visible;
    }

    .data-panels {
        flex-direction: column;
        overflow: visible;
    }

    .data-panel-column {
        min-height: 280px;
        max-height: 400px;
    }

    .stats-bar {
        flex-wrap: wrap;
        gap: 16px;
    }

    .stat-card {
        flex: 1 1 30%;
        min-width: 100px;
    }

    #notification-center {
        max-width: calc(100vw - 32px);
    }
}

/* ── Mobile: tighter spacing, stacked controls, smaller type ── */
@media (max-width: 640px) {
    .trader-header {
        padding: 12px 16px;
        flex-wrap: wrap;
        gap: 10px;
    }

    .stats-bar {
        padding: 12px 16px;
    }

    .stat-card {
        flex: 1 1 45%;
    }

    .stat-card-value {
        font-size: 17px;
    }

    .control-bar {
        padding: 10px 16px;
        flex-wrap: wrap;
    }

    .control-bar-badges {
        margin-left: 0;
        width: 100%;
        flex-wrap: wrap;
    }

    .action-button {
        min-width: 0;
        flex: 1 1 auto;
    }

    .trader-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        padding: 10px 16px;
    }

    .trader-footer-losses {
        margin-left: 0;
    }

    #notification-center {
        left: 16px;
        right: 16px;
        top: 12px;
    }

    .notification-card {
        min-width: 0;
        max-width: none;
        width: 100%;
    }
}