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

/* ── Global ──────────────────────────────── */
* { box-sizing: border-box; }
body {
    background-color: #080c14 !important;
    color: #e2e8f0 !important;
    font-family: 'IBM Plex Mono', monospace !important;
    overflow: hidden !important;
    height: 100vh !important;
}

/* ── Main layout ─────────────────────────── */
#right-panel {
    overflow-y: auto !important;
    height: 100vh !important;
}

/* ── Tab content scrolling ───────────────── */
.tab-content {
    overflow-y: auto !important;
    height: calc(100vh - 200px) !important;
}
.tab-pane.active {
    overflow-y: auto !important;
    height: calc(100vh - 200px) !important;
}

/* ── Dropdowns ───────────────────────────── */
.Select-control {
    background-color: #0f1724 !important;
    border: 1px solid #1e2d45 !important;
    border-radius: 6px !important;
    color: #e2e8f0 !important;
    min-height: 38px !important;
}
.Select-control:hover { border-color: #00d4ff !important; }
.is-open > .Select-control { border-color: #00d4ff !important; }
.Select--single > .Select-control .Select-value,
.Select-placeholder {
    color: #e2e8f0 !important;
    line-height: 38px !important;
    font-family: 'IBM Plex Mono', monospace !important;
    font-size: 12px !important;
}
.Select-input > input { color: #e2e8f0 !important; }
.Select-arrow-zone .Select-arrow { border-top-color: #8892a4 !important; }
.Select-menu-outer {
    background-color: #0f1724 !important;
    border: 1px solid #00d4ff !important;
    border-radius: 0 0 6px 6px !important;
    z-index: 9999 !important;
}
.Select-option {
    background-color: #0f1724 !important;
    color: #e2e8f0 !important;
    font-family: 'IBM Plex Mono', monospace !important;
    font-size: 12px !important;
    padding: 8px 12px !important;
}
.Select-option:hover,
.Select-option.is-focused {
    background-color: #1e2d45 !important;
    color: #00d4ff !important;
}
.Select-option.is-selected {
    background-color: #1e2d45 !important;
    color: #00d4ff !important;
}

/* ── Inputs ──────────────────────────────── */
input[type=number] {
    background-color: #0f1724 !important;
    border: 1px solid #1e2d45 !important;
    color: #e2e8f0 !important;
    font-family: 'IBM Plex Mono', monospace !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    border-radius: 4px !important;
    text-align: center !important;
}
input[type=number]:focus {
    border-color: #00d4ff !important;
    outline: none !important;
}

/* ── Tabs ────────────────────────────────── */
.nav-tabs { border-bottom: 1px solid #1e2d45 !important; }
.nav-link {
    color: #8892a4 !important;
    font-family: 'IBM Plex Mono', monospace !important;
    font-size: 11px !important;
    letter-spacing: 1px !important;
    border: none !important;
    padding: 10px 16px !important;
    background: transparent !important;
}
.nav-link:hover { color: #e2e8f0 !important; }
.nav-link.active {
    color: #00e676 !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid #00e676 !important;
}

/* ── Buttons ─────────────────────────────── */
.btn {
    font-family: 'IBM Plex Mono', monospace !important;
    font-size: 11px !important;
    letter-spacing: 1px !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
}

/* ── Checkboxes & Radio ──────────────────── */
input[type=checkbox] { accent-color: #00d4ff !important; }
input[type=radio] { accent-color: #00d4ff !important; }

/* ── Slider ──────────────────────────────── */
.rc-slider-track { background-color: #00d4ff !important; }
.rc-slider-handle {
    border-color: #00d4ff !important;
    background-color: #00d4ff !important;
}
.rc-slider-rail { background-color: #1e2d45 !important; }

/* ── Scrollbars ──────────────────────────── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: #080c14; }
::-webkit-scrollbar-thumb { background: #1e2d45; border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: #00d4ff; }

/* ── Mobile ──────────────────────────────── */
@media (max-width: 768px) {
    .nav-link { font-size: 9px !important; padding: 8px 10px !important; }
    .tab-content { height: calc(100vh - 160px) !important; }
}

/* ── Monitor Tab Fix ────────────────────── */
#tab-monitor > div {
    overflow-y: auto !important;
    max-height: calc(100vh - 180px) !important;
    padding-bottom: 60px !important;
}
.tab-content .active {
    overflow-y: auto !important;
    max-height: calc(100vh - 180px) !important;
}