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

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

/* === Resets === */

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

/* === Headers === */

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

/* === Buttons === */

Button {
    background: #1f1f1f;
    color: #ed7d3a;
    border: solid #ed7d3a;
    padding: 1 2;
    margin: 1;
    content-align: center middle;
    text-style: bold;
}

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

Button:focus {
    background: #2a2a2a;
    border: solid #ed7d3a;
}

/* === Inputs === */

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

Input:focus {
    background: #2a2a2a;
    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: #1f1f1f;
    color: #f0f0f0;
    padding: 1 2;
    text-style: bold;
    content-align: center middle;
}

/* === Game Layout === */

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

.rom_rows_container {
    layout: vertical;
    align-horizontal: center;
}

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


.game_card {
    width: auto;
    height: auto;
    max-width: 60;
    margin: 1;
    padding: 1;
    background: #1f1f1f;
    color: #ed7d3a;
    border: solid #3a9bed;
    content-align: center middle;
    text-style: bold;
    text-align: center;

}

.game_card:hover {
    background: #2a2a2a;
    color: #ed7d3a;
}

.game_card:focus {
    background: #2a2a2a;
    border: solid #ed7d3a;
}

.game_card:disabled {
    background: #1f1f1f;
    color: #3a9bed;
}

.game_card_clicked {
    background: #ed7d3a;
    color: #0e0e0e;
}


.offset_card {
    width: 11;
    height: auto;
    visibility: hidden;
}

/* ✅ Keep this for consistent row layout */
.rom_row {
    layout: horizontal;
    align-horizontal: center;
    padding: 1 1;
}

.rom_row {
    layout: horizontal;
    align-horizontal: center;
    padding: 1 2;  /* maybe increase vertical padding */
}


.info_confirm_row {
    layout: horizontal;
    width: 100%;
    height: auto;
    padding: 1 2;
    align-vertical: top;
}


#confirm_button {
    width: 20%;
    height: auto;
    content-align: center middle;
}

.confirm_button:hover {
    background: #ed7d3a;
    color: #0e0e0e;
}

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

#game_info_box {
    width: 80%;
}