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

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

/* === Resets === */

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

/* === 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;
}

/* === Danger Button Variant === */
.danger_button {
    background: {{SURFACE_10}};
    color: {{LIGHT}};
    border: solid {{ERROR}};
}

.danger_button:hover {
    background: {{SURFACE_20}};
    color: {{ERROR}};
    border: solid {{ERROR}};
}

/* === 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;
}

/* === Agent Select View === */

#agent_select_layout {
    layout: vertical;
    width: 100%;
    height: auto;
    padding: 2;
}

#agent_scroll {
    max-height: 35vh;
    overflow-y: auto;
    padding: 0 1;
    border: solid {{BORDER}};
    scrollbar-gutter: stable;
}

.agent_card {
    background: {{SURFACE_10}};
    border-bottom: dashed {{BORDER}};
    padding: 1 2;
    text-align: left;
    color: {{FOREGROUND}};
}

.agent_card:last-child {
    border-bottom: none;
}

.agent_card:hover {
    background: {{SURFACE_20}};
    color: {{ACCENT}};
}

#agent_scroll > .agent_card {
    margin-bottom: 1;
}

/* Message displayed when no agents exist (mounted manually in Python) */
#agent_scroll > Static {
    color: {{DISABLED}};
    text-style: italic;
    padding: 1;
}

#create_agent_btn {
    width: 100%;
    max-width: 30%;
    margin-top: 1;
    align: center middle;
}

#create_agent_layout {
    layout: vertical;
    width: 100%;
    height: auto;
    padding: 2;
}

#agent_name_input {
    width: 100%;
    max-width: 40%;
    align: center middle;
    margin: 1 0;
}

#agent_info_panel {
    layout: horizontal;
    width: 100%;
    height: auto;
    max-height: 150vh;
    padding: 0 1;
    border: solid {{BORDER}};
    align-vertical: top;
    content-align: center middle;
}

.agent_info_box {
    width: 70%;
    height: auto;
}

.agent_card {
    max-height: 20;
}

.agent_action_box {
    width: 30%;
    height: auto;
    layout: vertical;
    align-vertical: top;
    align-horizontal: right;
}

#create_button_container {
    align-horizontal: center;
    padding-top: 1;
}

/* === Agent Home View === */
#agent_home_menu Button {
    max-width: 40%;
    min-height: 3;
    margin: 1 0;
    align: center middle;
}

#config_scroll_container {
    height: 60vh;
    width: 100%;              /* Ensures full width container */
    overflow-y: auto;
    padding: 1;
    border-top: solid {{BORDER}};
}

.top_aligned_layout {
    layout: vertical;
    align-horizontal: left;
    width: 100%;
    padding: 0 2;
}

.form_column {
    layout: vertical;
    width: 100%;
    padding: 2;
    height: auto;
}

Input, Select {
    width: auto;
    min-width: 40;
}

.section_label {
    text-style: bold;
    padding-top: 1;
    padding-bottom: 0;
}

.input_row {
    layout: horizontal;
    align-vertical: middle;
    padding: 0 1;
    width: 100%;
    height: auto;
}

.input_row > * {
    width: 1fr;
    padding-right: 1;
}

.input_row > *:last-child {
    padding-right: 0;
}

#filter_grid {
    grid-size: 4;
    grid-gutter: 1;
    align-horizontal: left;
    width: 100%;
    padding: 1 2;
}