agent_m/agentm/theme/styles.base.tcss

/* === Global App Styles === */

Screen {
    background: {{BACKGROUND}};
    color: {{FOREGROUND}};
}

/* === Resets === */

* {
    padding: 0 1;
    border: none;
}

/* === Headers === */

# .header {
#     dock: top;
#     height: 3;
#     content-align: center middle;
#     background: {{SURFACE_10}};
#     color: {{ACCENT}};
#     text-style: bold;
#     padding: 1 2;
#     border: solid {{BORDER}};
# }

/* === Buttons === */

Button {
    background: {{SURFACE_10}};
    color: {{ACCENT}};
    border: solid {{ACCENT}};
    padding: 1;
    margin: 0;
    content-align: center middle;
    text-style: bold;
    width: 100%;
    min-height: 3;
    text-align: center;
}

Button:hover {
    background: {{ACCENT}};
    color: {{BACKGROUND}};
}

Button:focus {
    background: {{SURFACE_20}};
    border: solid {{ACCENT}};
}

Button:disabled {
    background: {{DISABLED_BG}};
    color: {{DISABLED}};
    border: solid {{DISABLED_BORDER}};
    text-style: dim;
}

/* === Grid Layout === */

.rom_grid {
    grid-size: 5;
    grid-gutter: 1;
    padding: 0 1;  /* Was: 1 2 */
    margin: 0;
    width: 100%;
    align-horizontal: center;
    align-vertical: middle;
    height: auto;  /* Ensure it can grow */
}

#rom_grid_scroll {
    max-height: 30vh;         /* was: height: 40vh */
    overflow-y: auto;
    scrollbar-gutter: stable;
    padding: 0;
    margin: 0;
    border-bottom: solid {{BORDER}};
}

/* Optionally ensure the parent container scrolls properly */
#game_content_layout {
    height: auto;
    width: 100%;
    padding: 1 2;
}

/* === Inputs === */

Input {
    background: {{SURFACE_10}};
    color: {{FOREGROUND}};
    border: solid {{BORDER}};
}

Input:focus {
    background: {{SURFACE_20}};
    border: solid {{ACCENT}};
}

/* === Alerts === */

.success {
    color: {{SUCCESS}};
}

.warning {
    color: {{ACCENT}};
}

.error {
    color: {{ERROR}};
}

/* === Login Form === */

#login_form {
    layout: vertical;
    align-horizontal: center;
    align-vertical: middle;
    width: 60%;
    height: auto;
    padding: 2 4;
    border: solid {{BORDER}};
}

#status_message {
    color: {{ACCENT}};
    padding: 1;
}

#pw_row {
    layout: horizontal;
    padding: 0;
}

#pw_row > * {
    margin-right: 1;
}

#pw_row > *:last-child {
    margin-right: 0;
}

/* === Loading Overlay === */

#loading_overlay {
    dock: top;
    background: {{SURFACE_10}};
    color: {{FOREGROUND}};
    padding: 1 2;
    text-style: bold;
    content-align: center middle;
}

/* === Layout === */

.centered_layout {
    layout: vertical;
    align-horizontal: center;
    align-vertical: middle;
    padding: 2;
    width: 100%;
}

Static {
    text-align: center;
}

Horizontal {
    content-align: center middle;
}

.info_confirm_row {
    height: auto;
    padding: 0 0;
    margin: 0;
}

#confirm_button {
    width: 100%;         /* Take full width of its container */
    min-width: 20;       /* Increase minimum width if needed */
    max-width: 100%;     /* Optional: avoid oversizing */
}

.confirm_button:hover {
    background: {{ACCENT}};
    color: {{BACKGROUND}};
}

.game_info {
    padding: 0 1;
    margin: 0;
    width: 100%;
    color: {{ACCENT}};
}

#game_info_box {
    width: 80%;
    height: auto;
    max-height: 50vh; /* Adjusted for better visibility */
    padding: 1;
    overflow-y: auto;
}

Button.game_button {
    min-height: 3;
}

#confirm_button_container {
    width: 20%;
    min-width: 20;
    align-vertical: middle;
    align-horizontal: center;
    height: 100%;
    padding-left: 1;
}