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

Screen {
    background: #0e0e0e;
    color: #f0f0f0;
}

/* === Resets === */

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

/* === Headers === */

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

/* === Buttons === */

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

Button:hover {
    background: #ed7d3a;
    color: #0e0e0e;
}

Button:focus {
    background: #3f3f3f;
    border: solid #ed7d3a;
}

Button:disabled {
    background: #444444;
    color: #999999;
    border: solid #666666;
    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 #3a9bed;
}

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

/* === Inputs === */

Input {
    background: #282828;
    color: #f0f0f0;
    border: solid #3a9bed;
}

Input:focus {
    background: #3f3f3f;
    border: solid #ed7d3a;
}

/* === Alerts === */

.success {
    color: #4cd964;
}

.warning {
    color: #ed7d3a;
}

.error {
    color: red;
}

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

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

#status_message {
    color: #ed7d3a;
    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: #282828;
    color: #f0f0f0;
    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: #ed7d3a;
    color: #0e0e0e;
}

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

#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;
}