/* --- 1. CORE VARIABLES --- */
:root {
    --bg-main: #0a0a0a;          /* Deep Black */
    --panel-bg: #141414;        /* Dark Charcoal */
    --input-bg: #1f1f1f;        /* Input Fields */
    --accent: #FF4C24;          /* Orange */
    --text-main: #ffffff;
    --text-dim: #94a3b8;
    --border: #262626;          /* Subtle Borders */
    --buy: #00c076;
    --sell: #ff3358;
}

body {
    background-color: var(--bg-main);
    color: var(--text-main);
    font-family: 'Inter', sans-serif;
    margin: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

/* --- 2. NAVBAR (Fixed the "Top Part") --- */
.navbar {
    height: 60px;
    background: var(--bg-main);
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px;
    flex-shrink: 0;
}

.nav-left { display: flex; align-items: center; gap: 40px; }
.nav-logo { font-weight: 800; font-size: 1.1rem; letter-spacing: -0.5px; }

.nav-links { display: flex; gap: 25px; }
.nav-item {
    font-size: 0.9rem; color: var(--text-dim); cursor: pointer;
    position: relative; padding: 20px 0;
}
.nav-item.active { color: var(--text-main); }
.nav-underline {
    position: absolute; bottom: 0; left: 0; right: 0;
    height: 3px; background: var(--accent);
}

.sign-out-btn {
    background: none; border: 1px solid var(--border);
    color: var(--text-dim); padding: 6px 16px; border-radius: 6px;
    cursor: pointer; font-size: 0.8rem;
}

/* --- 3. MAIN GRID LAYOUT --- */
.main-layout {
    display: flex;
    flex: 1;
    padding: 20px;
    gap: 20px;
    overflow: hidden; /* Prevents full page scroll */
}

/* LEFT COLUMN (Chart + Bottom Panel) */
.left-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
    min-width: 0;
}

/* Chart Area */
.chart-container {
    flex: 2; /* Takes 2/3rds of height */
    background: var(--panel-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px;
    display: flex;
    flex-direction: column;
}

.chart-header-tabs { display: flex; gap: 15px; padding: 0 10px 10px 10px; }
.chart-tab {
    background: none; border: none; color: var(--text-dim);
    font-weight: 600; cursor: pointer; font-size: 0.9rem;
}
.chart-tab.active { color: var(--accent); }

.tv-chart-box {
    flex: 1;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
}

/* Bottom Trade Panel */
.bottom-panel {
    flex: 1; /* Takes 1/3rd of height */
    background: var(--panel-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    min-height: 200px;
}

.panel-header {
    display: flex; gap: 20px; padding: 10px 20px;
    border-bottom: 1px solid var(--border);
}
.panel-tab {
    background: none; border: none; color: var(--text-dim);
    font-weight: 600; cursor: pointer; padding-bottom: 5px;
}
.panel-tab.active { color: var(--text-main); border-bottom: 2px solid var(--accent); }

.table-wrapper { padding: 0; overflow-y: auto; }
.trade-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.trade-table th { text-align: left; padding: 12px 20px; color: var(--text-dim); font-weight: 500; }
.trade-table td { padding: 12px 20px; border-top: 1px solid var(--border); }
.empty-row td { text-align: center; padding: 40px; color: var(--text-dim); }

/* RIGHT SIDEBAR (Fixed Width) */
.right-sidebar {
    width: 340px;
    background: var(--panel-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.sidebar-content { display: flex; flex-direction: column; gap: 18px; }

.input-group label {
    display: block; color: var(--text-dim); font-size: 0.75rem;
    font-weight: 700; text-transform: uppercase; margin-bottom: 6px;
}

.balance-display {
    color: var(--text-main); font-weight: 600; font-size: 0.95rem;
}

input, select {
    width: 100%; background: var(--input-bg); border: 1px solid var(--border);
    color: white; padding: 12px; border-radius: 8px; font-size: 0.9rem;
    box-sizing: border-box;
}
input:focus { border-color: var(--accent); outline: none; }

.trade-actions { display: flex; gap: 10px; margin-top: 10px; }
#long_button, #short_button {
    flex: 1; height: 45px; border: none; border-radius: 8px;
    font-weight: 700; cursor: pointer; color: white; transition: 0.2s;
}
#long_button { background: var(--buy); }
#short_button { background: var(--sell); }
#long_button:hover, #short_button:hover { filter: brightness(1.1); }