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

/* === Base Screen === */
Screen {
    background: $background;
    scrollbar-background: $surface;
    scrollbar-background-hover: $surface;
    scrollbar-background-active: $surface;
    scrollbar-color: $border;
    scrollbar-color-hover: $panel;
    scrollbar-color-active: $primary;
    scrollbar-corner-color: $surface;
    scrollbar-size-vertical: 1;
    scrollbar-size-horizontal: 1;
}

/* === 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 === */
/* Global scrollbar inheritance for all scrollable containers */
VerticalScroll, ScrollableContainer, RichLog, Log, TextArea {
    scrollbar-background: transparent;
    scrollbar-background-hover: transparent;
    scrollbar-background-active: transparent;
    scrollbar-color: $border;
    scrollbar-color-hover: $panel;
    scrollbar-color-active: $primary;
    scrollbar-corner-color: transparent;
    scrollbar-size-vertical: 1;
    scrollbar-size-horizontal: 1;
}

/* RichLog/Log widgets — ensure background inherits from parent */
RichLog, Log {
    background: transparent;
}

#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: $background;
    border: none;
    height: 1;
}

Switch:focus {
    background: $surface;
}

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

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

Switch:hover > .switch--slider {
    color: $panel;
}

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

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: 1fr;
    min-height: 5;
}

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;
    overflow-y: auto;
    background: $background;
}

/* Node info: compact two-column layout */
#node-info-panel {
    height: auto;
    max-height: 28;
}

/* Mesh devices tree: takes majority of remaining space */
#mesh-devices-panel {
    height: 2fr;
    min-height: 6;
}

#mesh-devices-panel > .hp-content {
    height: 1fr;
}

/* Activity feed: smaller portion, grows with content */
#activity-feed-panel {
    height: 1fr;
    min-height: 4;
    max-height: 16;
}

#activity-feed-panel > .hp-content {
    height: 1fr;
}

/* === Local Dashboard Layout === */
#dashboard-local-container {
    height: 1fr;
    padding: 0 1;
    overflow-y: auto;
}

#dashboard-local-container > HighlightedPanel {
    margin-bottom: 1;
}

/* === Settings Screen === */
#settings-outer {
    height: 1fr;
}

#settings-tabs {
    height: 1fr;
}

#settings-tabs TabPane {
    padding: 0;
}

.settings-tab-scroll {
    height: 1fr;
    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;
    align: left middle;
}

.setting-label {
    width: 22;
    min-width: 22;
    content-align-horizontal: right;
    padding-right: 1;
    color: $primary;
}

/* Full-width text inputs (paths, hostnames, names) */
.setting-input {
    width: 1fr;
    min-width: 20;
}

/* Narrow inputs (ports, channels, numeric values) */
.setting-input-narrow {
    width: 16;
    min-width: 12;
    max-width: 20;
}

/* Select dropdowns — don't need full width */
.setting-select {
    width: 40;
    min-width: 30;
    max-width: 50;
}

/* Switch toggles — compact, no stretch */
/* Switch toggles in settings — compact sizing, keep track visible */
.setting-checkbox {
    width: auto;
    min-width: 0;
    padding: 0;
}

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

.peer-header-row {
    height: 1;
    margin-bottom: 0;
}

.peer-header {
    color: $text-muted;
    padding: 0 1;
}

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

.peer-name-input {
    width: 2fr;
}

.peer-host-input {
    width: 2fr;
}

.peer-port-input {
    width: 1fr;
    max-width: 14;
}

.peer-enabled-col {
    width: 4;
    min-width: 4;
    max-width: 4;
    content-align: center middle;
    padding: 0;
}

.peer-enabled-toggle {
    width: 4;
    min-width: 4;
    max-width: 4;
}

.peer-remove-btn {
    width: 5;
    min-width: 5;
}

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

/* === TabbedContent === */
TabbedContent {
    height: 1fr;
}

Tabs {
    background: $surface;
    dock: top;
}

Tab {
    background: $surface;
    color: $panel;
    padding: 0 2;
}

Tab:hover {
    color: $primary;
}

Tab.-active {
    background: $background;
    color: $primary;
    text-style: bold;
}

Tab:focus {
    text-style: bold;
}

TabPane {
    background: $background;
    padding: 1;
}

/* === Mesh Device Tree === */
MeshDeviceTree {
    background: transparent;
}

MeshDeviceTree > .tree--cursor {
    background: $background;
    color: $primary;
    text-style: bold;
}

MeshDeviceTree > .tree--highlight {
    background: transparent;
}

MeshDeviceTree > .tree--guides {
    color: $border;
}

MeshDeviceTree > .tree--guides-hover {
    color: $panel;
}

/* === Device Detail Layout === */
#mesh-device-detail-container {
    height: 1fr;
}

#mesh-info-panel {
    height: auto;
    max-height: 16;
}

#device-tabs {
    height: 1fr;
}

/* === ChatWidget Layout === */
ChatWidget {
    height: 1fr;
}

ChatWidget #chat-message-container {
    height: 1fr;
    overflow-y: scroll;
}

ChatWidget #chat-input-bar {
    height: 2;
    dock: bottom;
    border-top: wide $border;
}

ChatWidget #chat-input-bar #chat-input {
    border: none !important;
    background: transparent;
    height: 1;
    padding: 0 1;
}

ChatWidget #chat-input-bar #chat-input:focus {
    border: none !important;
    background: transparent;
}

ChatWidget .chat-no-bridge {
    color: $warning;
    text-style: bold italic;
    padding: 1;
}

ChatWidget .chat-no-messages {
    color: $panel;
    padding: 1;
}

ChatWidget .chat-date-separator {
    text-align: center;
    color: $panel;
    padding: 0 2;
    margin: 0 0;
    height: 1;
}

/* === MessageBubble Styles === */
.message-bubble {
    padding: 0 1 0 2;
    margin: 0;
    height: auto;
    width: 100%;
}

.message-bubble.--outgoing {
    padding: 0 2 0 8;
    color: $primary;
}

.message-bubble.--incoming {
    padding: 0 8 0 2;
}

.message-bubble.--selected {
    background: $surface;
}

.message-bubble.--failed {
    color: $error;
    text-style: italic;
}

/* === Chat Search Bar === */
ChatWidget #chat-search-bar {
    height: auto;
    max-height: 3;
    padding: 0 1;
    background: $surface;
}

ChatWidget #chat-reply-bar {
    height: 1;
    padding: 0 1;
    background: $surface;
    color: $primary;
}

/* === Exploration Screen === */
ExplorationScreen #explore-search-bar {
    height: auto;
    max-height: 3;
    padding: 0 1;
    background: $surface;
}

ExplorationScreen #explore-count {
    height: 1;
    padding: 0 1;
    color: $panel;
}

ExplorationScreen #explore-tabs {
    height: 1fr;
}

ExplorationScreen .explore-tab-table {
    height: 1fr;
}

ExplorationScreen #pages-pane-content {
    height: 1fr;
}

ExplorationScreen #pages-table-section {
    height: 2fr;
    min-height: 5;
}

ExplorationScreen #pages-browser-section {
    height: 3fr;
}

ExplorationScreen #pages-browser-placeholder {
    height: 3;
    padding: 1;
    color: $panel;
    text-style: italic;
}

ExplorationScreen .explore-inline-browser {
    height: 1fr;
    border-top: solid $border;
}

/* === Inbox Search Bar === */
InboxScreen #inbox-search-bar {
    height: auto;
    max-height: 3;
    padding: 0 1;
    background: $surface;
}

/* === PageBrowserWidget === */
PageBrowserWidget #page-url-bar {
    height: 1;
    background: $surface;
    padding: 0 1;
    color: $primary;
}

PageBrowserWidget #page-content {
    height: 1fr;
    overflow-y: scroll;
    padding: 0 1;
}

PageBrowserWidget #page-status {
    height: 1;
    padding: 0 1;
    color: $panel;
    dock: bottom;
}

.micron-heading-1 {
    text-style: bold;
    padding: 1 0 0 0;
}

.micron-heading-2 {
    text-style: bold;
    padding: 1 0 0 0;
}

.micron-heading-3 {
    text-style: bold italic;
}

.micron-literal {
    background: $surface;
    padding: 0 1;
}

.micron-link {
    color: $primary;
    text-style: underline;
}

.micron-divider {
    color: $panel;
}

.placeholder-text {
    color: $panel;
    text-style: italic;
    padding: 1;
}

/* === CommandWidget Layout === */
CommandWidget {
    height: 1fr;
}

CommandWidget #cmd-toolbar {
    height: 3;
    padding: 0 1;
}

CommandWidget .cmd-status-text {
    width: 1fr;
    padding: 1 1;
    color: $panel;
}

CommandWidget #cmd-available {
    height: auto;
    max-height: 2;
    padding: 0 1;
    color: $primary;
}

CommandWidget #cmd-presets {
    height: auto;
    max-height: 3;
    padding: 0 1;
}

CommandWidget .cmd-preset-btn {
    height: 3;
    min-width: 8;
    margin-right: 1;
}

CommandWidget #cmd-session-log {
    height: 1fr;
    min-height: 4;
    padding: 0 1;
}

CommandWidget .cmd-log-content {
    width: 100%;
}

/* === DeviceStatusWidget Layout === */
.status-updated-ts {
    height: 1;
    padding: 0 1;
    color: $panel;
    text-align: right;
}

.status-section-header {
    height: 1;
    padding: 0 1;
    color: $primary;
    margin-top: 1;
}

/* === TerminalWidget Layout === */
TerminalWidget {
    height: 1fr;
}

TerminalWidget #terminal-chrome {
    height: 1fr;
}

TerminalWidget #terminal-status {
    height: 1;
    padding: 0 1;
    color: $primary;
    background: $surface;
    dock: top;
}

TerminalWidget #terminal-display {
    height: 1fr;
    overflow-y: scroll;
    padding: 0;
    background: $background;
}

TerminalWidget #terminal-connect-btn {
    dock: bottom;
    width: auto;
    margin: 0 1;
}
