/* Imperial CRT Theme - Textual CSS */
/* Uses theme variables for dynamic theming */

/* === Base Screen === */
Screen {
    background: $background;
}

/* === Panel Styling === */
.panel {
    border: heavy $border;
    border-title-color: $primary;
    background: $surface;
    padding: 1;
    height: auto;
    margin-bottom: 1;
}

.panel:focus-within {
    border: heavy $primary;
}

.panel-title {
    color: $primary;
    text-style: bold;
    margin-bottom: 1;
}

/* === Layout Helpers === */
.row {
    height: auto;
    margin-bottom: 1;
}

.color-swatch {
    width: 12;
    height: 1;
    margin-right: 1;
}

.input-label {
    margin-bottom: 0;
    color: $panel;
}

/* === Scrollable Content === */
#main-scroll {
    padding: 1 2;
}

/* === Status Indicators === */
/* Status uses symbol + text-style differentiation for theme-independence */
/* Symbols are prepended in Python: ● online, ○ offline, ◐ pending, ◓ scanning */
#status-row {
    height: auto;
}

#status-row > Static {
    width: auto;
    margin-right: 2;
}

.status-online {
    color: $success;
    text-style: bold;  /* Filled circle ● + bold = active/strong */
}

.status-offline {
    color: $error;
    text-style: italic strike;  /* Hollow circle ○ + strikethrough = inactive/dead */
}

.status-pending {
    color: $warning;
    text-style: bold italic;  /* Half circle ◐ + bold italic = transitioning */
}

.status-scanning {
    color: $primary;  /* Uses theme color, not fixed cyan */
    text-style: underline;  /* Quarter circle ◓ + underline = processing */
}

.status-info {
    color: $primary;  /* Uses theme color */
}

/* === Selection Controls === */
Switch {
    margin-right: 2;
    background: transparent;
}

Switch > .switch--slider {
    background: $surface;
    color: $border;
}

Switch.-on > .switch--slider {
    color: $primary;
}

Checkbox {
    margin-right: 2;
    background: transparent;
}

Checkbox > .toggle--button {
    background: $surface;
    color: $border;
}

Checkbox.-on > .toggle--button {
    color: $primary;
}

RadioSet {
    width: auto;
    height: auto;
    background: transparent;
}

RadioButton {
    background: transparent;
}

RadioButton > .toggle--button {
    background: $surface;
    color: $border;
}

RadioButton.-on > .toggle--button {
    color: $primary;
}

Select {
    width: 30;
    background: $surface;
    border: solid $border;
}

Select:focus {
    border: solid $primary;
}

Select > SelectCurrent {
    background: transparent;
    color: $primary;
}

Select > SelectOverlay {
    background: $surface;
    border: solid $border;
}

SelectOverlay > .option-list--option {
    background: transparent;
    color: $primary;
}

SelectOverlay > .option-list--option-highlighted {
    background: $background;
    color: $primary;
    text-style: bold;
}

Rule {
    color: $border;
    margin: 1 0;
}

/* === Phosphor Shades === */
/* These use theme colors for dynamic theming */
.bright {
    color: $accent;
}

.medium {
    color: $primary;
}

.dim {
    color: $panel;
}

.dark {
    color: $secondary;
}

/* === Text Semantic Classes === */
/* For widget content - use these instead of Rich markup */
.text-accent {
    color: $accent;
    text-style: bold;
}

.text-primary {
    color: $primary;
}

.text-muted {
    color: $panel;
}

.text-success {
    color: $success;
}

.text-warning {
    color: $warning;
}

.text-error {
    color: $error;
}

/* === Border Colors for HighlightedPanel === */
.border-accent {
    color: $accent;
}

.border-dim {
    color: $panel;
}

/* === Data Tables === */
DataTable {
    background: transparent;
    height: 8;
}

DataTable > .datatable--header {
    background: $surface;
    color: $primary;
    text-style: bold;
}

DataTable > .datatable--cursor {
    background: $background;
    color: $primary;
}

DataTable > .datatable--hover {
    background: transparent;
}

DataTable > .datatable--even-row {
    background: transparent;
}

DataTable > .datatable--odd-row {
    background: transparent;
}

/* === Progress Bars === */
ProgressBar {
    margin-bottom: 1;
}

ProgressBar > .bar--bar {
    color: $border;
}

ProgressBar > .bar--complete {
    color: $primary;
}

/* === Input Fields === */
Input {
    background: $background;
    border: solid $border;
    color: $primary;
    margin-bottom: 1;
}

Input:focus {
    border: solid $primary;
}

Input.-valid {
    border: solid $border;
}

Input.-invalid {
    border: solid $error;
}

/* === Buttons === */
Button {
    background: $surface;
    border: solid $border;
    color: $primary;
    text-style: none;
    margin-right: 1;
    height: 3;
}

Button > .button--label {
    background: transparent;
}

Button:hover {
    background: $background;
    border: solid $primary;
    color: $primary;
    text-style: bold;
}

Button:focus {
    border: solid $primary;
}

Button:focus > .button--label {
    background: transparent;
}

Button.-primary {
    background: $background;
    border: solid $primary;
    color: $primary;
    text-style: bold;
}

/* Semantic buttons use text-style differentiation for theme-independence */
/* Each variant has distinct: border color + text style + shade pattern */

Button.-danger {
    border: solid $error;
    color: $error;
    text-style: reverse;  /* Inverted - most alarming */
}

Button.-danger:hover {
    background: $surface;
}

Button.-warning {
    border: solid $warning;
    color: $warning;
    text-style: bold italic;  /* Attention-grabbing but not alarming */
}

Button.-success {
    border: solid $success;
    color: $success;
    text-style: bold underline;  /* Confident affirmation */
}

/* === Footer === */
Footer {
    background: $surface;
}

Footer > .footer--key {
    color: $accent;
    background: transparent;
    text-style: none;
}

Footer > .footer--description {
    color: $panel;
}

/* === Header === */
Header {
    background: $background;
    color: $primary;
}

/* === Log Entries === */
.log-timestamp {
    color: $panel;
}

.log-info {
    color: $primary;
}

.log-success {
    color: $success;
}

.log-warning {
    color: $warning;
}

.log-error {
    color: $error;
}

/* === Utility Classes === */
.hidden {
    display: none;
}

/* === HighlightedPanel Widget === */
/* Base styles defined in widget DEFAULT_CSS, only overrides here */

/* === Dashboard Layout === */
#dashboard-container {
    height: 1fr;
}

#top-panels {
    height: auto;
    max-height: 8;
}

#top-panels > .panel {
    width: 1fr;
    margin-right: 1;
}

#top-panels > .panel:last-child {
    margin-right: 0;
}

#top-panels > HighlightedPanel {
    width: 1fr;
    margin-right: 1;
}

#top-panels > HighlightedPanel:last-child {
    margin-right: 0;
}

#hardware-info-panel {
    height: auto;
    max-height: 6;
}

#devices-panel {
    height: 1fr;
    min-height: 8;
}

#activity-panel {
    height: auto;
    max-height: 5;
}

/* === Settings Screen === */
#settings-container {
    height: auto;
    overflow-y: auto;
    padding: 1 2;
}

.settings-section {
    height: auto;
    margin-bottom: 2;
    border: solid $border;
    padding: 1;
}

.section-title {
    color: $primary;
    text-style: bold;
    margin-bottom: 1;
}

.setting-row {
    height: auto;
    min-height: 3;
    margin-bottom: 1;
}

.setting-label {
    width: auto;
    min-width: 20;
    max-width: 30;
    padding-right: 2;
    color: $primary;
}

.setting-input {
    width: 1fr;
    min-width: 20;
}

.setting-description {
    width: 100%;
    padding: 1 2;
    color: $secondary;
}

#settings-actions {
    height: 3;
    margin-top: 1;
    margin-bottom: 1;
    align: center middle;
}

#settings-actions > Button {
    margin-left: 1;
    margin-right: 1;
}

#status-message {
    height: 2;
    text-align: center;
    margin-top: 1;
}

/* === First-Run Wizard === */
.wizard-title {
    text-align: center;
    color: $primary;
    text-style: bold;
    padding: 1 0;
}

#wizard-content {
    width: 80;
    height: auto;
    margin: 2 0;
    border: solid $border;
    background: $surface;
    padding: 2;
    align: center top;
}

#wizard-step-indicator {
    text-align: center;
    color: $panel;
    margin-bottom: 2;
}

.wizard-step {
    height: auto;
}

.wizard-step.hidden {
    display: none;
}

.wizard-text {
    color: $primary;
    margin-bottom: 1;
}

.wizard-help {
    color: $panel;
    margin-left: 2;
}

#wizard-status {
    height: 2;
    text-align: center;
    margin-top: 1;
}

#interface-selection {
    margin: 1 0;
}

#interface-selection RadioButton {
    margin-bottom: 0;
}

FirstRunWizardScreen Button {
    margin-left: 1;
    margin-right: 1;
}
