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
 */

/* ── 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;
}

/* ── Layout Containers ─────────────────────────────── */

#main-area {
    layout: horizontal;
    height: 1fr;
}

#sidebar {
    width: 26;
    background: #0e1420;
    border-right: solid #1a2a3a;
    padding: 1 1;
}

.sidebar-title {
    color: #00d4aa;
    text-style: bold;
    text-align: center;
    width: 100%;
}

.sidebar-subtitle {
    color: #506878;
    text-align: center;
    width: 100%;
    margin: 0 0 1 0;
}

#content-area {
    width: 1fr;
}

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

/* ── Sidebar Buttons ───────────────────────────────── */

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

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

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

/* ── 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;
}

/* ── 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;
}

/* ── Device Status Bar (sidebar bottom) ────────────── */

#device-status {
    dock: bottom;
    height: auto;
    padding: 1;
    background: #0e1420;
    border-top: solid #1a2a38;
}

.device-status-label {
    color: #506878;
}

.device-status-value {
    color: #c8d0d8;
}

.device-connected {
    color: #00e060;
}

.device-demo {
    color: #e8a020;
}

/* ── Console Screen ────────────────────────────────── */

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

.console-input-area 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;
}

/* ── Scan Screen ───────────────────────────────────── */

.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: 1fr;
    width: 1fr;
}

.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;
}