/* styles.css - Your external CSS file */

/* Clickable status bar styling */
.clickable-status {
    background: $surface;
    color: $text;
    text-style: none;
}

.clickable-status:hover {
    background: $surface-lighten-1;
    text-style: bold;
    color: $accent;
}

.clickable-status:focus {
    background: $surface-lighten-2;
    border: solid $primary;
}

/* General dialog styling */
.dialog {
    background: $background;
    border: tall $primary;
    padding: 1 2;
    /* Removed width/height auto - let #dialog_container handle sizing */
}

/* Nested dataclass sections - same background as dialog */
Collapsible {
    background: $background;
    border: none;
    padding: 0;
    margin: 0;
}

/* Collapsible title bar - same background */
Collapsible > .collapsible--title {
    background: $background;
}

/* Collapsible content area - same background */
Collapsible > .collapsible--contents {
    background: $background;
    padding: 0;
}

/* SelectionList styling - remove circles, keep highlighting, ultra-compact */
SelectionList > .selection-list--option {
    padding-left: 0;  /* Reduce left padding to minimize space between checkbox and content */
    text-style: none;
    margin: 0;
    padding-right: 0;
}

SelectionList > .selection-list--option-highlighted {
    background: $accent;
    color: $text;
}

/* Ultra-compact SelectionList - remove all internal spacing */
SelectionList {
    padding: 0;
    margin: 0;
    overflow-x: auto;  /* Enable horizontal scrolling for long text */
    overflow-y: auto;  /* Keep vertical scrolling */
}

/* Reduce spacing in ButtonListWidget specifically */
ButtonListWidget SelectionList > .selection-list--option {
    padding-left: 0;  /* No left padding */
    padding-right: 0; /* No right padding */
    margin: 0;
}

/* Button rows wrapping in ButtonListWidget */
ButtonListWidget .button-rows {
    height: auto;  /* Allow height to grow with wrapped buttons */
    layout: vertical;  /* Stack rows vertically */
}

/* Button rows - horizontal layout with auto-sized buttons */
ButtonListWidget .button-rows Horizontal {
    height: auto;
    width: 100%;
    layout: horizontal;
}

/* Buttons in rows - size to content with small margins */
ButtonListWidget .button-rows Button {
    width: auto;  /* Size to content */
    margin: 0 1;  /* Small horizontal spacing */
}



/* MenuBar */
MenuBar {
    height: 3;
    border: solid white;
}

/* All buttons - uniform height and styling with darker tone */
Button {
    height: 1;
    min-height: 1;
    padding: 0;
    background: $surface-darken-1;
    color: $text;
}

Button:hover {
    background: $surface;
}

Button:focus {
    background: $surface-lighten-1;
}

/* MenuBar buttons - content-based width */
MenuBar Button {
    margin: 0 1;
    width: auto;
}

/* MenuBar title - properly centered */
MenuBar Static {
    text-align: center;
    content-align: center middle;
    width: 1fr;
    text-style: bold;
}

/* Function list header buttons - compact styling */
/* Compact spacing between main top buttons */
#function_list_header Horizontal Button {
    margin: 0;  /* Remove margin for compact layout */
    padding: 0;  /* Remove padding for ultra-compact buttons */
    width: auto !important;  /* Size to content */
    min-width: 0 !important;  /* Override default 16 column min-width */
}

/* Flex spacers for both main and function pane buttons */
#function_list_header Static,
FunctionPaneWidget Horizontal Static {
    width: 1fr;
}

/* Button groups size to content */
#function_list_header Horizontal,
FunctionPaneWidget Horizontal Horizontal {
    width: auto;
}

/* Main content containers with proper borders and responsive sizing */
#plate_manager_container {
    border: solid white;
    width: 1fr;
    min-width: 0;
}

#pipeline_editor_container {
    border: solid white;
    width: 1fr;
    min-width: 0;
}

/* StatusBar - simplified styling */
StatusBar {
    height: 1;
    background: $background;
    color: $text;
}

/* StatusBar log display - simple and readable */
StatusBar #log_display {
    text-align: left;
    background: $background;
    color: $text;
}

/* Button containers - full width */
#plate_manager_container Horizontal,
#pipeline_editor_container Horizontal {
    width: 100%;
}

/* Content area buttons - responsive width distribution with compact padding */
#plate_manager_container Button,
#pipeline_editor_container Button {
    width: 1fr;
    margin: 0;  /* Remove horizontal margin for compact layout */
    padding: 0;  /* Remove padding for ultra-compact buttons */
    min-width: 0;
}

/* ButtonListWidget - ultra-compact layout */
ButtonListWidget Vertical {
    padding: 0;
    margin: 0;
}

ButtonListWidget Horizontal {
    padding: 0;
    margin: 0;
    margin-bottom: 0;  /* Ensure no bottom margin on button row */
}

/* Exception: Function pane buttons should size to content with compact padding */
#plate_manager_container FunctionPaneWidget Button,
#pipeline_editor_container FunctionPaneWidget Button,
FunctionPaneWidget Button {
    width: auto !important;
    min-width: 0 !important;  /* Override default 16 column min-width */
    margin: 0;  /* Remove horizontal margin for compact layout */
    padding: 0;  /* Remove padding for ultra-compact buttons */
}

/* App fills terminal height properly with slightly darker background */
OpenHCSTUIApp {
    height: 100vh;
}

/* Main content layout fills remaining space and is responsive */
MainContent {
    height: 1fr;
    width: 100%;
}

/* Main horizontal layout is responsive */
MainContent > Horizontal {
    width: 100%;
    height: 100%;
}

/* Content areas adapt to available space */
ScrollableContainer {
    height: 1fr;
}

/* Static content styling */
Static {
    text-align: center;
}

/* Exception: Help windows should be left-aligned */
DocstringHelpWindow Static,
ParameterHelpWindow Static {
    text-align: left;
}

/* === COMPACT ADDITIONS === */

/* All Input widgets - compact by default with underlined text */
Input {
    height: 1;
    border: none;
    padding: 0;
    margin: 0;
    text-style: underline;
}

/* Checkbox widgets - compact */
Checkbox {
    height: 1;
    padding: 0;
    margin: 0;
}

/* Container widgets - remove default padding/margins */
Container {
    padding: 0;
    margin: 0;
}

/* Horizontal containers - minimal height */
Horizontal {
    height: auto;
    padding: 0;
    margin: 0;
}

/* Vertical containers */
Vertical {
    padding: 0;
    margin: 0;
}

/* Parameter rows in function panes - ultra compact */
ParameterField {
    height: 1;
    padding: 0;
    margin: 0;
}

ParameterField Horizontal {
    height: 1;
}

/* Parameter labels - consistent width and compact */
.param-label {
    height: 1;
    padding: 0;
    margin: 0;
    text-align: left;
}

/* Reset buttons in parameter fields */
ParameterField Button {
    height: 1;
    width: auto;
    padding: 0 1;
    margin: 0;
}

/* Function pane widgets */
FunctionPaneWidget {
    padding: 0;
    margin: 0 0 1 0;
}

/* Select widgets - with underlined text and no borders */
Select {
    height: auto;  /* CHANGED: was 1, now auto to test dropdown expansion */
    padding: 0;
    margin: 0;
    text-style: underline;
    border: none;
}

/* Global compact class for any widget */
.compact {
    height: 1;
    padding: 0;
    margin: 0;
    border: none;
}

/* Ultra-compact class for maximum density */
.ultra-compact {
    height: 1;
    min-height: 1;
    max-height: 1;
    padding: 0;
    margin: 0;
    border: none;
}

/* The action group is naturally centered between the flex spacers */
FunctionPaneWidget Horizontal Static {
    width: 1fr;  /* Flex spacers take equal space */
}

FunctionPaneWidget Horizontal Horizontal {
    width: auto;  /* Action group sizes to content */
}

/* Spacing between action buttons */
FunctionPaneWidget Horizontal Horizontal Button {
    margin: 0 1;  /* Same spacing as main top buttons */
    width: auto;  /* Size buttons to content, not equal width */
}

/* Make Select dropdowns show full list */
SelectOverlay {
    max-height: 15;     /* Allow multiple lines but not too many */
    height: auto;       /* Allow natural height expansion */
    width: auto;
    overlay: screen;    /* Enable overlay behavior globally */
    constrain: none inside;  /* Remove container constraints globally */
}

/* RadioSet and RadioButton alignment - always left aligned */
RadioSet {
    text-align: left;
    content-align: left top;
}

RadioButton {
    text-align: left;
    content-align: left top;
}

/* AUTOMATIC BUTTON ALIGNMENT - No manual classes needed! */

/* Target all Horizontal containers in windows that contain buttons */
BaseOpenHCSWindow Horizontal,
Window Horizontal {
    height: auto;
    align: center middle;  /* Auto-center all button containers */
    width: 100%;
    text-align: center;
}

/* Style all buttons in window containers */
BaseOpenHCSWindow Button,
Window Button {
    width: auto;
    margin: 0 1;  /* Horizontal spacing between buttons */
    min-width: 8; /* Standard button width (like GroupBy selector) */
}

/* Exception: Don't center main content button containers (plate manager, etc.) */
#plate_manager_container Horizontal,
#pipeline_editor_container Horizontal {
    align: left top;  /* Override for main content areas */
    text-align: left;
}

#plate_manager_container Button,
#pipeline_editor_container Button {
    width: 1fr;      /* Override: main content buttons fill width */
    margin: 0;       /* Override: no spacing for compact layout */
    min-width: 0;    /* Override: no minimum width */
}

/* Legacy dialog-buttons class for explicit control */
.dialog-buttons {
    height: auto;
    align: center middle;
    width: 100%;
    text-align: center;
}

.dialog-buttons Button {
    width: auto;
    margin: 0 1;
    min-width: 8;
}



/* DIFFERENT VALUES STYLING - Text inputs and universal widgets */

/* No special styling - looks like normal input */
.different-values-input {
    /* No special styling - just normal input appearance */
}

/* Simple different values widgets - minimal disabled appearance */
DifferentValuesCheckbox {
    /* Compact 1x1 button appearance, looks disabled */
    width: 3;
    height: 1;
    opacity: 0.6;
    color: $text-muted;
}

DifferentValuesRadioSet {
    /* Looks disabled until clicked */
    opacity: 0.6;
    color: $text-muted;
}

/* Universal styling for non-text widgets */
.different-values-widget {
    border: dashed $warning !important;
    color: $warning !important;
    background: $surface !important;
    opacity: 0.7;
}

.different-values-widget:hover {
    border: solid $warning !important;
    background: $warning 20% !important;
    opacity: 1.0;
}

/* Simple disabled appearance for different values widgets */
.different-values-disabled {
    color: $text-muted !important;
}

/* Modified from different state */
.modified-from-different {
    border: solid $success !important;
    color: $text !important;
    background: $success 10% !important;
}

/* User modified state */
.user-modified {
    border: solid $primary !important;
    color: $text !important;
    background: $primary 10% !important;
}

/* Start Menu Widget */
StartMenuWidget {
    height: auto;
    width: auto;
}

/* WindowBar customization removed - show both buttons */

/* === TABBED CONTENT ALIGNMENT === */

/* Spacer tab takes remaining space to push action buttons to the right */
.spacer-tab {
    width: 1fr;
    background: transparent;
    border: none;
}


