/* RadiolinkPdsch5G/radiolinkpdsch5g.css */
/* 5G NR PDSCH Radio-Link Simulator — scoped styles (rlp5g- prefix) */

#rlp5g-root {
    font-family: 'Courier New', Courier, monospace;
    background: #111111;
    color: #ffffff;
    padding: 10px;
    max-width: 780px;
    box-sizing: border-box;
}

/* ── Controls ───────────────────────────────────────────── */
.rlp5g-controls {
    background: #1a1a1a;
    border: 1px solid #333333;
    border-radius: 4px;
    padding: 8px 10px;
    margin-bottom: 8px;
}

.rlp5g-tab-bar-ctrl {
    display: flex;
    gap: 3px;
    margin-bottom: 6px;
}

.rlp5g-ctrl-tab {
    background: #222222;
    color: #ffffff;
    border: 1px solid #333333;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    padding: 4px 10px;
    cursor: pointer;
    font-family: 'Courier New', Courier, monospace;
    font-size: 11px;
    transition: background 0.15s, color 0.15s;
}

.rlp5g-ctrl-tab:hover { background: #2a2a2a; color: #cccccc; }
.rlp5g-ctrl-tab.active { background: #1a1a1a; color: #00ccff; border-color: #444444; }

.rlp5g-ctrl-panel {
    border: 1px solid #333333;
    border-radius: 0 4px 4px 4px;
    padding: 6px 8px;
    background: #1a1a1a;
}

.rlp5g-ctrl-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin-bottom: 5px;
    font-size: 12px;
}

.rlp5g-ctrl-row label {
    color: #ffffff;
    white-space: nowrap;
}

.rlp5g-ctrl-row select,
.rlp5g-ctrl-row input[type="number"],
.rlp5g-ctrl-row input[type="text"] {
    background: #222222;
    color: #eeeeee;
    border: 1px solid #444444;
    font-family: 'Courier New', Courier, monospace;
    font-size: 12px;
    padding: 2px 4px;
    border-radius: 3px;
}

.rlp5g-ctrl-row input[type="range"] {
    width: 100px;
    vertical-align: middle;
    accent-color: #3498db;
}

.rlp5g-ctrl-row input[type="checkbox"] {
    accent-color: #3498db;
    width: 14px; height: 14px;
    cursor: pointer;
}

.rlp5g-val {
    color: #3498db;
    min-width: 30px;
    display: inline-block;
    text-align: right;
}

.rlp5g-section-hdr {
    color: #ffffff;
    font-size: 11px;
    border-bottom: 1px solid #333333;
    padding-bottom: 2px;
    margin: 5px 0 4px 0;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.rlp5g-run-btn {
    background: #1a472a;
    color: #4ade80;
    border: 1px solid #2e7d32;
    border-radius: 4px;
    padding: 5px 18px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 12px;
    cursor: pointer;
    margin-top: 4px;
    transition: background 0.15s;
}
.rlp5g-run-btn:hover { background: #1e5734; }

/* ── Stats bar ────────────────────────────────────────────── */
#rlp5g-stats {
    font-size: 11px;
    color: #ffffff;
    background: #181818;
    border: 1px solid #2a2a2a;
    border-radius: 3px;
    padding: 5px 8px;
    margin-bottom: 6px;
    line-height: 1.7;
}
#rlp5g-stats b { color: #00ccff; }

/* ── TDL tap table ───────────────────────────────────────── */
#rlp5g-tdl-table-wrap {
    overflow-y: auto;
    max-height: 180px;
    margin-top: 4px;
    border: 1px solid #2a2a2a;
    border-radius: 3px;
}

#rlp5g-tdl-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}

#rlp5g-tdl-table th {
    background: #222222;
    color: #ffffff;
    padding: 3px 6px;
    text-align: center;
    position: sticky;
    top: 0;
}

#rlp5g-tdl-table td {
    padding: 2px 6px;
    text-align: center;
    color: #ffffff;
    border-bottom: 1px solid #1e1e1e;
}

#rlp5g-tdl-table tr.selected td { background: #1a2a1a; color: #4ade80; }
#rlp5g-tdl-table tr:hover td { background: #1e2e1e; cursor: pointer; }

/* ── Visualization tabs ──────────────────────────────────── */
.rlp5g-viz-tab-bar {
    display: flex;
    gap: 3px;
    margin-bottom: 0;
    flex-wrap: wrap;
}

.rlp5g-viz-tab {
    background: #222222;
    color: #ffffff;
    border: 1px solid #333333;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    padding: 5px 10px;
    cursor: pointer;
    font-family: 'Courier New', Courier, monospace;
    font-size: 11px;
    transition: background 0.15s, color 0.15s;
}

.rlp5g-viz-tab:hover { background: #2a2a2a; color: #cccccc; }
.rlp5g-viz-tab.active { background: #1a1a1a; color: #00ccff; border-color: #444444; }

.rlp5g-viz-panel {
    border: 1px solid #444444;
    border-radius: 0 4px 4px 4px;
    background: #111111;
    padding: 6px;
    box-sizing: border-box;
}

.rlp5g-viz-panel canvas { display: block; }

/* ── Sub-tabs for Constellations ─────────────────────────── */
.rlp5g-sub-tab-bar {
    display: flex;
    gap: 2px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}

.rlp5g-sub-tab {
    background: #1e1e1e;
    color: #ffffff;
    border: 1px solid #2a2a2a;
    border-radius: 3px;
    padding: 3px 8px;
    cursor: pointer;
    font-family: 'Courier New', Courier, monospace;
    font-size: 10px;
    transition: background 0.15s;
}
.rlp5g-sub-tab:hover { background: #282828; color: #ffffff; }
.rlp5g-sub-tab.active { background: #1a1a2a; color: #88aaff; border-color: #3355aa; }

/* ── Legend ──────────────────────────────────────────────── */
.rlp5g-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-bottom: 6px;
    font-size: 11px;
}
.rlp5g-legend-item { display: flex; align-items: center; gap: 4px; }
.rlp5g-swatch {
    width: 14px; height: 14px;
    display: inline-block;
    border-radius: 2px;
    border: 1px solid #555555;
    flex-shrink: 0;
}

/* ── Busy overlay ───────────────────────────────────────── */
#rlp5g-busy {
    display: none;
    font-size: 12px;
    color: #ffaa00;
    padding: 4px 0;
}