/* MiniMax CLI Theme CSS for Textual Applications */

/* CSS Variables - These will be populated by the theme system */
:root {
    /* Primary colors */
    --color-primary: #3B82F6;
    --color-primary-hover: #2563EB;
    --color-primary-active: #1D4ED8;
    
    /* Accent colors */
    --color-accent: #8B5CF6;
    --color-accent-hover: #7C3AED;
    --color-accent-active: #6D28D9;
    
    /* Surface colors */
    --color-surface: #1F2937;
    --color-surface-variant: #374151;
    --color-surface-container: #4B5563;
    --color-surface-container-high: #6B7280;
    
    /* Background colors */
    --color-background: #111827;
    --color-background-variant: #1F2937;
    
    /* Text colors */
    --color-text-primary: #F9FAFB;
    --color-text-secondary: #E5E7EB;
    --color-text-tertiary: #9CA3AF;
    --color-text-disabled: #6B7280;
    
    /* Status colors */
    --color-success: #10B981;
    --color-warning: #F59E0B;
    --color-error: #EF4444;
    --color-info: #3B82F6;
    
    /* Border colors */
    --color-border: #374151;
    --color-border-variant: #4B5563;
    --color-border-focus: #3B82F6;
    
    /* Special colors */
    --color-shadow: rgba(0, 0, 0, 0.5);
    --color-overlay: rgba(0, 0, 0, 0.6);
    
    /* Typography */
    --font-mono: Menlo, Monaco, 'Courier New', monospace;
    --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    
    /* Font sizes */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    
    /* Border radius */
    --border-radius-sm: 2px;
    --border-radius: 4px;
    --border-radius-lg: 8px;
    --border-radius-xl: 12px;
    --border-width: 1px;
    --border-width-thick: 2px;
    
    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    
    /* Animation durations */
    --duration-fast: 150ms;
    --duration-normal: 300ms;
    --duration-slow: 500ms;
    
    /* Z-index layers */
    --z-dropdown: 1000;
    --z-sticky: 1010;
    --z-fixed: 1020;
    --z-modal-backdrop: 1030;
    --z-modal: 1040;
    --z-popover: 1050;
    --z-tooltip: 1060;
}

/* App-wide styling */
App {
    background: $background;
    color: $text-primary;
}

/* Header styling */
#header-container {
    background: $surface;
    color: $text-primary;
    border-bottom: solid $border;
    height: 3;
    dock: top;
    padding: 0 1;
}

#logo {
    dock: left;
    width: auto;
    content-align: center middle;
    text-style: bold;
}

#status {
    dock: right;
    width: auto;
    content-align: center middle;
}

#breadcrumb {
    content-align: center middle;
    text-style: bold;
}

/* Main content area */
#main-content {
    background: $background;
    color: $text-primary;
    padding: 1;
}

/* Welcome screen styling */
#welcome-container {
    align: center middle;
    width: 100%;
    height: 100%;
}

#welcome-text {
    width: 80;
    height: auto;
    content-align: center middle;
    margin: 2;
}

#action-buttons {
    layout: horizontal;
    align: center middle;
    height: auto;
    width: auto;
}

#action-buttons Button {
    margin: 1;
    min-width: 12;
    background: $primary;
    color: $text-primary;
    border: solid $primary;
}

#action-buttons Button:hover {
    background: $primary-hover;
    border: solid $primary-hover;
}

#action-buttons Button:focus {
    background: $primary-active;
    border: solid $border-focus;
}

/* Command palette styling */
#command-palette {
    align: center middle;
    width: 80;
    height: 60%;
    background: $surface;
    border: solid $border;
    border-radius: $border-radius-lg;
    padding: 1;
}

#palette-title {
    dock: top;
    height: 1;
    text-style: bold;
    color: $text-primary;
    text-align: center;
    margin-bottom: 1;
}

#command-input {
    dock: top;
    height: 3;
    margin-bottom: 1;
    background: $surface-variant;
    border: solid $border;
    border-radius: $border-radius;
}

#command-input:focus {
    border: solid $border-focus;
}

#command-list {
    background: $surface-container;
    border: solid $border-variant;
    border-radius: $border-radius;
}

/* Chat screen styling */
#main_tabs {
    border: solid $border;
    background: $surface;
}

#main_tabs Tab {
    background: $surface-variant;
    color: $text-secondary;
    border-bottom: solid $border;
}

#main_tabs Tab:hover {
    background: $surface-container;
    color: $text-primary;
}

#main_tabs Tab.-active {
    background: $primary;
    color: $text-primary;
    border-bottom: solid $primary;
    text-style: bold;
}

#conversation_log {
    background: $background-variant;
    border: solid $border;
    scrollbar-background: $surface-variant;
    scrollbar-color: $accent;
    scrollbar-corner-color: $surface;
}

#context_table {
    background: $surface;
    border: solid $border;
    scrollbar-background: $surface-variant;
    scrollbar-color: $accent;
}

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

#context_table > .datatable--cursor {
    background: $accent 50%;
}

#context_table > .datatable--hover {
    background: $surface-container;
}

#settings_container {
    background: $surface;
    padding: 1;
}

.settings-section {
    border: solid $border;
    border-radius: $border-radius;
    margin: 1;
    padding: 1;
    background: $surface-variant;
}

.settings-label {
    text-style: bold;
    color: $text-primary;
    margin-bottom: 1;
}

#chat_input {
    dock: bottom;
    height: 3;
    background: $surface;
    border: solid $border;
    border-radius: $border-radius;
    margin: 1;
}

#chat_input:focus {
    border: solid $border-focus;
}

#send_button {
    dock: right;
    width: 8;
    height: 3;
    background: $primary;
    color: $text-primary;
    border: solid $primary;
    border-radius: $border-radius;
    margin: 1;
}

#send_button:hover {
    background: $primary-hover;
}

#send_button:focus {
    background: $primary-active;
    border: solid $border-focus;
}

/* Progress and loading indicators */
ProgressBar {
    background: $surface-variant;
    color: $primary;
    border: solid $border;
    border-radius: $border-radius;
}

ProgressBar > .bar--bar {
    background: $primary;
}

ProgressBar > .bar--percentage {
    color: $text-primary;
    text-style: bold;
}

LoadingIndicator {
    color: $accent;
}

/* Modal dialogs */
ModalScreen {
    background: $overlay;
}

.modal-dialog {
    background: $surface;
    border: solid $border;
    border-radius: $border-radius-lg;
    padding: 2;
    color: $text-primary;
}

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

/* Buttons */
Button {
    background: $surface-container;
    color: $text-primary;
    border: solid $border;
    border-radius: $border-radius;
    padding: 0 2;
    text-style: none;
}

Button:hover {
    background: $surface-container-high;
    border: solid $border-variant;
}

Button:focus {
    border: solid $border-focus;
}

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

Button.-primary:hover {
    background: $primary-hover;
    border: solid $primary-hover;
}

Button.-primary:focus {
    background: $primary-active;
    border: solid $border-focus;
}

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

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

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

/* Input fields */
Input {
    background: $surface-variant;
    color: $text-primary;
    border: solid $border;
    border-radius: $border-radius;
    padding: 0 1;
}

Input:focus {
    border: solid $border-focus;
}

Input > .input--placeholder {
    color: $text-tertiary;
    text-style: italic;
}

/* Labels and static text */
Label {
    color: $text-primary;
}

Static {
    color: $text-primary;
}

/* Data tables */
DataTable {
    background: $surface;
    border: solid $border;
    scrollbar-background: $surface-variant;
    scrollbar-color: $accent;
}

DataTable > .datatable--header {
    background: $surface-container;
    color: $text-primary;
    text-style: bold;
    border-bottom: solid $border-variant;
}

DataTable > .datatable--header-hover {
    background: $surface-container-high;
}

DataTable > .datatable--cursor {
    background: $accent 30%;
}

DataTable > .datatable--hover {
    background: $surface-variant;
}

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

DataTable > .datatable--even-row {
    background: $surface-variant;
}

/* Trees */
Tree {
    background: $surface;
    color: $text-primary;
    border: solid $border;
    scrollbar-background: $surface-variant;
    scrollbar-color: $accent;
}

Tree > .tree--guides {
    color: $text-tertiary;
}

Tree > .tree--guides-hover {
    color: $text-secondary;
}

Tree > .tree--cursor {
    background: $accent 30%;
}

Tree > .tree--hover {
    background: $surface-variant;
}

Tree > .tree--selected {
    background: $accent 50%;
    color: $text-primary;
    text-style: bold;
}

/* Option lists */
OptionList {
    background: $surface;
    border: solid $border;
    scrollbar-background: $surface-variant;
    scrollbar-color: $accent;
}

OptionList > .option-list--option {
    color: $text-primary;
    padding: 0 1;
}

OptionList > .option-list--option-hover {
    background: $surface-variant;
}

OptionList > .option-list--option-hover-highlighted {
    background: $accent 30%;
}

OptionList > .option-list--option-selected {
    background: $accent 50%;
    color: $text-primary;
    text-style: bold;
}

/* Scrollbars */
Scrollbar {
    background: $surface-variant;
    color: $accent;
}

Scrollbar:hover {
    background: $surface-container;
}

/* Notifications */
.notification {
    background: $surface-container;
    border: solid $border;
    border-radius: $border-radius;
    color: $text-primary;
    padding: 1;
    margin: 1;
}

.notification-info {
    border-left: thick $info;
}

.notification-success {
    border-left: thick $success;
}

.notification-warning {
    border-left: thick $warning;
}

.notification-error {
    border-left: thick $error;
}

/* Footer */
Footer {
    background: $surface;
    color: $text-secondary;
    border-top: solid $border;
}

Footer > .footer--highlight {
    color: $accent;
    text-style: bold;
}

Footer > .footer--highlight-key {
    color: $primary;
    text-style: bold;
}

/* Container layouts */
Container {
    background: transparent;
}

Horizontal {
    background: transparent;
}

Vertical {
    background: transparent;
}

ScrollableContainer {
    background: transparent;
    scrollbar-background: $surface-variant;
    scrollbar-color: $accent;
}

/* Special utility classes */
.text-primary {
    color: $text-primary;
}

.text-secondary {
    color: $text-secondary;
}

.text-tertiary {
    color: $text-tertiary;
}

.text-disabled {
    color: $text-disabled;
}

.text-success {
    color: $success;
}

.text-warning {
    color: $warning;
}

.text-error {
    color: $error;
}

.text-info {
    color: $info;
}

.bg-surface {
    background: $surface;
}

.bg-surface-variant {
    background: $surface-variant;
}

.bg-primary {
    background: $primary;
}

.bg-accent {
    background: $accent;
}

.border-primary {
    border: solid $primary;
}

.border-accent {
    border: solid $accent;
}

.border-success {
    border: solid $success;
}

.border-warning {
    border: solid $warning;
}

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

/* Animation classes */
.fade-in {
    opacity: 0%;
    transition: opacity var(--duration-normal);
}

.fade-in:focus {
    opacity: 100%;
}

.slide-in {
    offset-x: -100%;
    transition: offset-x var(--duration-normal);
}

.slide-in:focus {
    offset-x: 0;
}

/* Responsive design helpers */
@media (max-width: 80) {
    #welcome-text {
        width: 95%;
    }
    
    #action-buttons {
        layout: vertical;
    }
    
    #command-palette {
        width: 95%;
    }
}

@media (max-height: 24) {
    #command-palette {
        height: 80%;
    }
}