alnn_rewrite/style.tcss

Screen { align: center middle; }
#main_container { width: 95%; height: 95%; border: solid green; padding: 1 2; }

/* =========================================
   Top Section: Configuration
   ========================================= */
#config_section {
    height: 35%;          /* Constrains height so it doesn't take over */
    margin-bottom: 1;
    border: round gray;
    padding: 1;
}

#config_left_col {
    width: 1fr;
    padding-right: 2;
    height: 100%;
}

#config_right_col {
    width: 2fr;
    height: 100%;
}

/* Ensure buttons take up consistent space and stack cleanly */
#load_btn, #reload_btn {
    width: 100%;
    margin-top: 1;
    margin-bottom: 0;
}

#config_display {
    height: 1fr;
    border: round $primary-muted;
    background: $surface;
}


/* =========================================
   Bottom Section: Columns
   ========================================= */
#bottom_area { height: 1fr; margin-top: 0; }
#control_panel { width: 6fr; padding-right: 1; }
#log_panel { width: 5fr; height: 1fr; border: solid white; }

/* Controls, Dropdowns, and Status */
#status_row {
    height: 3;
    margin-bottom: 1;
}

#log_header_row {
    height: auto;
    margin-bottom: 0;
}

#log_status_row {
    height: auto;
    margin-bottom: 1;
}

#scenario_select {
    width: 1fr;
    margin-right: 1;
}

#pipeline_status_label {
    width: 1fr;
    height: 3;
    content-align: center middle;
    background: $boost;
    border: round $primary;
    text-style: bold;
}

Button { margin-top: 0; margin-bottom: 0; width: 100%; }
#active_controls { height: auto; }
#active_controls Button { width: 1fr; margin-right: 1; }
#btn_start { margin-bottom: 1; }
RichLog { height: 1fr; }

/* =========================================
   Progress Bars Setup
   ========================================= */
#progress_area { height: auto; margin-top: 0; margin-bottom: 0; }

.progress_row {
    height: 4;
    layout: horizontal;
    display: none;
    border: round $primary-muted;
    background: $surface;
    padding: 0 1;
    margin-bottom: 0;
}

.progress_title {
    width: 16;
    height: auto;
    content-align: left middle;
    padding-right: 1;
    margin-right: 1;
    text-style: bold;
    border-right: solid $primary-muted;
}

.progress_bar { width: 1fr; height: 2; margin-top: 0; }
ProgressBar ETAStatus { width: auto; }

.progress_stats {
    width: 8;
    height: auto;
    content-align: right middle;
    padding-left: 1;
    margin-left: 1;
    border-left: solid $primary-muted;
}

#progress_bar_1 .bar--complete { background: $secondary; }
#progress_bar_2 .bar--complete { background: $warning; }
#progress_bar_3 .bar--complete { background: $error; }
#progress_bar_4 .bar--complete { background: $accent; }

/* =========================================
   Modal Screen CSS
   ========================================= */
OverwriteConfirmScreen { background: $background 80%; }
#warning_label { width: 100%; height: auto; }
#dialog { padding: 1 2; border: thick $error; width: 60; height: auto; background: $surface; }
#dialog_buttons { margin-top: 2; align: right middle; height: auto; }
#dialog_buttons Button { width: auto; margin-left: 2; margin-top: 0; margin-bottom: 0; }