/* ==========================================================================
   base.css — Global resets, typography, base <button>/<table> styles, warning box.
   Gotcha (see ARCHITECTURE.md): the global button { padding; margin: 10px }
   here is inherited by every button in the app.
   Split from main.css (F4); rule order preserved — these files load in
   sequence (see index.html) and must stay in that order.
   Colors come from the token palette in css/tokens.css.
   ========================================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Include padding and borders in the element's total width and height */
    font-family: 'Poppins', sans-serif;
}

html {
    font-size: 16px; /* Base font size */
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--surface-page);
    text-align: center;
    margin: 0;
    padding: 5px;
    margin: 0;
    padding: 5px;
}

header, footer {
    background-color: var(--gray-chrome);
    color: var(--white);
    padding: 10px 0;
    text-align: center;
}

h2, h3, h4 {
    color: var(--text-primary);
    margin: 10px 0;
    padding: 10px 0;
    text-align: center;
    font-weight: 500;
}


button {
    padding: 10px 15px;
    margin: 10px;
    background-color: var(--gray-dark);
    color: var(--white);
    border: none;
    border-radius: 5px; /* Rounded corners */
    cursor: pointer;
    font-size: 1rem; /* Larger font size for readability */
    font-weight: 500;
    transition: all 0.2s ease;
}

button.warning {
    background-color: var(--color-danger); /* Bootstrap's button color for warning */
}

/* Selected button style */
button.selected {
    background-color: var(--color-primary); /* A blue color to indicate selection, adjust as needed */
    color: var(--white);
}

/* Inactive button style */
button.inactive {
    background-color: var(--border-default); /* A gray color to indicate inactivity */
    color: var(--text-muted);
    cursor: not-allowed; /* Change cursor to indicate the button is inactive */
    pointer-events: none; /* Prevent clicking on the button */
}

.warning-box {
    border: 1px solid var(--color-danger); /* Bootstrap's warning color */
    background-color: var(--color-danger-surface);
    color: var(--color-danger-text);
    padding: 10px;
    margin-bottom: 10px;
    text-align: center;
    border-radius: 5px;
}

.player-buttons {
    display: flex;
    flex-direction: column;
}

.player-button {
    display: block; /* Each button takes up the full width */
    width: 100%; /* Ensures the button stretches to the full width of its container */
    margin-bottom: 2vw; /* Adds a small margin between buttons */
}


table {
    border: 1px solid grey;
    margin-left: auto; 
    margin-right: auto;
    border-collapse: collapse;
    width: auto; /* Only as wide as needed */
}

th, td {
    border: 1px solid var(--border-light);
    padding: 8px;
    text-align: left;
}


/* Utility classes for JS-generated markup (replaces inline style="" colors) */
.icon-danger {
    color: var(--color-danger);
}

.text-hint {
    font-size: 0.9em;
    color: var(--text-muted);
}