birdcage/tui/src/birdcage_tui/theme.tcss

/* Birdcage TUI — Dark RF Theme
 * Teal accent on deep blue-black. No purple.
 * Signal gradient: blue > cyan > green > yellow > red
 *
 * Layout: Header / StatusStrip / TabBar / ContentSwitcher / Footer
 */

/* ── Global ────────────────────────────────────────── */

Screen {
    background: #0a0a12;
    color: #c8d0d8;
}

Header {
    background: #0e1420;
    color: #00d4aa;
    text-style: bold;
    dock: top;
    height: 1;
}

Footer {
    background: #0e1420;
    color: #506878;
    dock: bottom;
    height: 1;
}

/* ── Status Strip ─────────────────────────────────── */

#status-strip {
    dock: top;
    height: 1;
    background: #0e1420;
    color: #c8d0d8;
    border-bottom: solid #1a2a3a;
    padding: 0 1;
}

/* ── Tab Bar ──────────────────────────────────────── */

#tab-bar {
    dock: top;
    height: 3;
    background: #0a0a12;
    padding: 0 1;
    layout: horizontal;
}

.tab-btn {
    min-width: 16;
    height: 3;
    margin: 0 0 0 0;
    background: #121c2a;
    color: #7090a8;
    text-style: bold;
    border: round #1a3050;
    text-align: center;
}

.tab-btn:hover {
    background: #1a2a40;
    color: #00d4aa;
    border: round #00d4aa;
}

.tab-btn.active {
    background: #0a2a3a;
    color: #00d4aa;
    border: round #00d4aa;
    text-style: bold;
}

/* ── Mode Bar (within-screen sub-mode toggle) ─────── */

.mode-bar {
    height: 3;
    background: #0a0a12;
    padding: 0 1;
    layout: horizontal;
    dock: top;
}

.mode-btn {
    min-width: 14;
    height: 3;
    margin: 0 0 0 0;
    background: #0e1420;
    color: #506878;
    text-style: bold;
    border: round #1a2a3a;
    text-align: center;
}

.mode-btn:hover {
    background: #1a2a40;
    color: #00d4aa;
    border: round #00d4aa;
}

.mode-btn.active {
    background: #0a2a3a;
    color: #00d4aa;
    border: round #00d4aa;
    text-style: bold;
}

/* ── Content Area ─────────────────────────────────── */

#content-area {
    width: 1fr;
    height: 1fr;
}

ContentSwitcher {
    width: 1fr;
    height: 1fr;
}

/* ── Console Overlay (ModalScreen) ────────────────── */

ConsoleOverlay {
    background: rgba(10, 10, 18, 0.6);
}

#console-overlay {
    dock: bottom;
    height: 50%;
    width: 100%;
    background: #0a0a12;
    border-top: double #00d4aa;
    padding: 0;
}

#console-overlay #serial-log {
    height: 1fr;
}

/* ── Panel / Card ──────────────────────────────────── */

.panel {
    background: #0e1420;
    border: round #1a2a3a;
    padding: 1 2;
    margin: 0 1 1 1;
}

.panel-title {
    color: #00d4aa;
    text-style: bold;
    margin-bottom: 1;
}

/* ── Data Display ──────────────────────────────────── */

.value-large {
    color: #00d4aa;
    text-style: bold;
}

.value-normal {
    color: #c8d0d8;
}

.label {
    color: #506878;
}

.label-dim {
    color: #384858;
}

/* ── Status Indicators ─────────────────────────────── */

.status-ok {
    color: #00e060;
}

.status-warn {
    color: #e8a020;
}

.status-error {
    color: #e04040;
}

.status-demo {
    color: #e8a020;
    text-style: italic;
}

/* ── Input Controls ────────────────────────────────── */

Input {
    background: #121c2a;
    border: round #1a3050;
    color: #c8d0d8;
    padding: 0 1;
}

Input:focus {
    border: round #00d4aa;
}

Button {
    background: #1a2a40;
    color: #00d4aa;
    border: round #1a3050;
    min-width: 10;
    height: 3;
}

Button:hover {
    background: #00d4aa;
    color: #0a0a12;
    border: round #00d4aa;
}

Button:focus {
    border: round #00d4aa;
    text-style: bold;
}

Button.-active {
    background: #0a3a3a;
}

/* ── Checkbox ──────────────────────────────────────── */

Checkbox {
    background: transparent;
    color: #c8d0d8;
    padding: 0 1;
}

Checkbox:focus {
    color: #00d4aa;
}

/* ── DataTable ─────────────────────────────────────── */

DataTable {
    background: #0a0a12;
    color: #c8d0d8;
    height: 1fr;
}

DataTable > .datatable--header {
    background: #0e1420;
    color: #00d4aa;
    text-style: bold;
}

DataTable > .datatable--cursor {
    background: #142030;
    color: #c8d0d8;
}

DataTable > .datatable--even-row {
    background: #0a0a12;
}

DataTable > .datatable--odd-row {
    background: #0c0e18;
}

/* ── RichLog ───────────────────────────────────────── */

RichLog {
    background: #0a0a12;
    color: #c8d0d8;
    border: round #1a2a3a;
    scrollbar-color: #1a2a38;
    scrollbar-color-active: #00d4aa;
    scrollbar-color-hover: #2a4a58;
    height: 1fr;
}

/* ── Progress Bar ──────────────────────────────────── */

ProgressBar {
    padding: 0 1;
}

ProgressBar Bar {
    color: #00d4aa;
    background: #1a2a38;
}

ProgressBar PercentageStatus {
    color: #506878;
    text-style: bold;
}

/* ── Sparkline ─────────────────────────────────────── */

.sparkline {
    height: 2;
    padding: 0 1;
    color: #00d4aa;
    background: #0e1420;
}

.sparkline-label {
    color: #506878;
    width: 14;
}

/* ── Compass Rose ──────────────────────────────────── */

#compass-container {
    height: auto;
    min-height: 14;
    padding: 1;
}

.compass-readout {
    color: #00d4aa;
    text-style: bold;
}

/* ── Signal Gauge ──────────────────────────────────── */

.gauge-container {
    height: 3;
    padding: 0 1;
}

.gauge-bar {
    height: 1;
}

.gauge-label {
    color: #506878;
    width: 8;
}

.gauge-value {
    color: #c8d0d8;
    width: 8;
    text-align: right;
}

/* ── Signal Colors (gradient: blue > cyan > green > yellow > red) ── */

.signal-cold {
    color: #2080d0;
}

.signal-cool {
    color: #00b8c8;
}

.signal-mid {
    color: #00e060;
}

.signal-warm {
    color: #e8c020;
}

.signal-hot {
    color: #e04040;
}

/* ── Sky Heatmap ───────────────────────────────────── */

.heatmap-container {
    height: 1fr;
    padding: 0;
}

.heatmap-cell {
    width: 2;
    height: 1;
}

/* ── Motor Status ──────────────────────────────────── */

.motor-panel {
    height: auto;
    padding: 1 2;
    background: #0e1420;
    border: round #1a2a3a;
}

.motor-row {
    layout: horizontal;
    height: 1;
}

.motor-label {
    color: #506878;
    width: 14;
}

.motor-value {
    color: #c8d0d8;
}

/* ── Console Input Area ───────────────────────────── */

.console-input-area {
    dock: bottom;
    height: auto;
    width: 100%;
    layout: horizontal;
    padding: 0 1;
    background: #0e1420;
    border-top: solid #1a2a38;
}

.console-input-area .label {
    width: auto;
}

#console-input {
    width: 1fr;
}

.console-input-area Button {
    width: 10;
    margin-left: 1;
}

.console-context {
    dock: bottom;
    height: 1;
    padding: 0 1;
    background: #0e1420;
    color: #506878;
}

/* ── Prompt Colors (by submenu) ────────────────────── */

.prompt-trk {
    color: #00d4aa;
}

.prompt-mot {
    color: #00e060;
}

.prompt-dvb {
    color: #2080d0;
}

.prompt-nvs {
    color: #e8a020;
}

.prompt-a3981 {
    color: #00b8c8;
}

.prompt-step {
    color: #40c0a0;
}

.prompt-os {
    color: #8090a0;
}

.prompt-other {
    color: #506878;
}

/* ── Quick Actions (Dashboard) ────────────────────── */

.quick-actions {
    height: auto;
    layout: horizontal;
    padding: 0 1;
}

.quick-action-btn {
    min-width: 16;
    height: 3;
    margin: 0 1 0 0;
    background: #1a2a40;
    color: #00d4aa;
    border: round #1a3050;
    text-style: bold;
}

.quick-action-btn:hover {
    background: #00d4aa;
    color: #0a0a12;
    border: round #00d4aa;
}

/* ── System Health (Dashboard) ────────────────────── */

.system-health {
    height: auto;
    padding: 1 2;
    background: #0e1420;
    border: round #1a2a3a;
    margin: 0 1;
}

/* ── Preset List ──────────────────────────────────── */

.preset-controls {
    height: auto;
    layout: horizontal;
    padding: 0 1;
    dock: bottom;
}

.preset-controls Button {
    margin-right: 1;
}

/* ── Tracking Panel ───────────────────────────────── */

.tracking-panel {
    height: auto;
    padding: 1 2;
    background: #0e1420;
    border: round #1a2a3a;
}

.tracking-status {
    color: #506878;
}

/* ── Receiver Info ────────────────────────────────── */

.receiver-info {
    height: auto;
    padding: 1 2;
    background: #0e1420;
    border: round #1a2a3a;
}

/* ── Sweep Plot ───────────────────────────────────── */

.sweep-plot {
    height: auto;
    min-height: 8;
    padding: 1 2;
    background: #0e1420;
    border: round #1a2a3a;
}

/* ── NVS Filter ───────────────────────────────────── */

.nvs-filter {
    height: auto;
    layout: horizontal;
    padding: 0 1;
    dock: top;
    background: #0e1420;
    border-bottom: solid #1a2a3a;
}

.nvs-filter Input {
    width: 1fr;
    margin-right: 1;
}

/* ── Motor Tuning (PID editor) ────────────────────── */

.motor-tuning {
    height: auto;
    padding: 1 2;
    background: #0e1420;
    border: round #1a2a3a;
}

.pid-row {
    layout: horizontal;
    height: 3;
}

.pid-row .label {
    width: 4;
}

.pid-row Input {
    width: 8;
    margin-right: 1;
}

/* ── Scan Controls ────────────────────────────────── */

.scan-controls {
    dock: bottom;
    height: auto;
    padding: 1;
    background: #0e1420;
    border-top: solid #1a2a38;
}

.scan-status {
    height: 2;
    padding: 0 1;
    color: #506878;
}

/* ── Screen-Level Layouts ──────────────────────────── */

.screen-container {
    layout: vertical;
    height: 100%;
    width: 100%;
}

.top-row {
    layout: horizontal;
    height: 1fr;
}

.bottom-controls {
    dock: bottom;
    height: auto;
    padding: 1;
    background: #0e1420;
    border-top: solid #1a2a38;
    layout: horizontal;
}

.control-group {
    layout: horizontal;
    height: 3;
    width: 1fr;
}

.control-group Input {
    width: 8;
    margin-right: 1;
}

.control-group Button {
    margin-right: 1;
}

/* ── NVS Table Highlight ───────────────────────────── */

.nvs-modified {
    color: #e8a020;
    text-style: bold;
}

/* ── Scrollbar Styling ─────────────────────────────── */

* {
    scrollbar-color: #1a2a38;
    scrollbar-color-active: #00d4aa;
    scrollbar-color-hover: #2a4a58;
    scrollbar-background: #0a0a12;
}