/* Basic Reset & Body */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; line-height: 1.6; background-color: #f0f2f5; color: #1c1e21; padding: 20px; }
.container { max-width: 900px; margin: 20px auto; background-color: #ffffff; padding: 25px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.1); }
/* Sections */
section { display: none; padding: 20px; border-bottom: 1px solid #e0e0e0; margin-bottom: 20px; }
section:last-child { border-bottom: none; margin-bottom: 0; }
.active-section { display: block; }
/* Headings and Text */
h1, h2, h3 { color: #1c1e21; margin-bottom: 15px; text-align: center; }
h1 { font-size: 1.8em; }
h2 { font-size: 1.4em; color: #333; }
h3 { font-size: 1.2em; color: #555; margin-top: 20px; }

/* === Forms & Inputs (Ogólne style) === */
input[type="text"],
input[type="number"] { /* Mimo zmiany typu, zostawiamy number dla ewentualnej przyszłości */
    /* Ustawienia wspólne */
    width: 100%;
    padding: 12px 15px;
    margin-bottom: 15px;
    border: 1px solid #ccd0d5;
    border-radius: 6px;
    font-size: 16px;
    background-color: #f5f6f7;
    line-height: normal;
    box-sizing: border-box;
}
input:focus { outline: none; border-color: #1877f2; box-shadow: 0 0 0 2px rgba(24, 119, 242, 0.2); }
.form-group { display: flex; gap: 10px; margin-bottom: 15px; }
/* Zmieniamy selektor, bo input jest teraz text, ale nadal chcemy go krótszego */
.form-group input#playerNumberInput[type="text"] { flex-basis: 100px; flex-grow: 0; }
.form-group input#playerSurnameInput[type="text"] { flex-grow: 1; } /* Uściślamy selektor dla nazwiska */

/* --- USUNIĘTO/ZAKOMENTOWANO REGULY DLA SPINNERÓW --- */
/*
#playerNumberInput::-webkit-outer-spin-button,
#playerNumberInput::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
#playerNumberInput {
  -moz-appearance: textfield;
}
*/
/* --- KONIEC USUNIĘTYCH REGUL --- */

/* === Koniec Forms & Inputs === */

/* General Buttons */
button { background-color: #1877f2; color: #ffffff; border: none; padding: 12px 20px; border-radius: 6px; font-size: 16px; font-weight: bold; cursor: pointer; transition: background-color 0.2s ease; display: block; width: 100%; margin-top: 10px; }
button:hover { background-color: #166fe5; }
button:active { background-color: #1461c8; }
.button-group { display: flex; gap: 10px; margin-top: 15px; margin-bottom: 20px; }
.button-group button { flex: 1; margin-top: 0; }
button#addPlayerBtn { background-color: #e4e6eb; color: #1c1e21; }
button#addPlayerBtn:hover { background-color: #dcdfe4; }

/* Player Lists */
ul { list-style: none; padding: 0; margin-top: 15px; max-height: 200px; overflow-y: auto; border: 1px solid #ddd; border-radius: 5px; background-color: #f9f9f9; }
ul li { padding: 10px 15px; border-bottom: 1px solid #eee; }
ul li:last-child { border-bottom: none; }
/* Match Section Specifics */
.player-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; justify-content: center; }
.player-buttons button { background-color: #f0f2f5; color: #1c1e21; width: auto; flex-grow: 1; min-width: 100px; }
.player-buttons button.selected { background-color: #1877f2; color: white; font-weight: bold; }
.actions-panel { background-color: #eaf3ff; padding: 15px; border-radius: 8px; margin-top: 15px; border: 1px solid #cfe2ff; }
/* Action Buttons Styles */
.action-buttons { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 10px; width: 100%; }
.action-buttons button { background-color: #e4e6eb; color: #050505; border: 1px solid #ccc; border-radius: 5px; width: 100%; min-height: 60px; padding: 5px; margin-top: 0; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; line-height: 1.2; font-size: 14px; font-weight: normal; }
.action-buttons button:hover { background-color: #dcdfe4; }
.action-buttons button:active { background-color: #c9ced4; }
.action-buttons button.last-action { background-color: #d4edda; border-color: #b1dfbb; }
.icon-wrapper { display: block; font-size: 1.4em; font-weight: bold; margin-bottom: 3px; line-height: 1; width: 100%; text-align: center; }
.icon-digit { margin-right: 3px; }
.icon-status { /* Base style */ }
.icon-success { color: #28a745; }
.icon-fail { color: #dc3545; }
.button-text { display: block; font-size: 0.8em; line-height: 1.1; width: 100%; text-align: center; }
/* Summary Table */
#summaryTableContainer { overflow-x: auto; margin-top: 20px; }
#summaryTable { width: 100%; border-collapse: collapse; font-size: 13px; white-space: nowrap; }
#summaryTable th, #summaryTable td { border: 1px solid #ddd; padding: 8px 5px; text-align: center; }
#summaryTable th { background-color: #f2f2f2; font-weight: bold; }
#summaryTable tbody tr:nth-child(even) { background-color: #f9f9f9; }
#summaryTable td:first-child { text-align: left; padding-left: 8px; }
/* Status Messages */
#uploadStatus { margin-top: 15px; font-weight: bold; text-align: center; }
#uploadStatus.success { color: green; }
#uploadStatus.error { color: red; }

/* === Responsive Design === */
@media (max-width: 600px) {
    body { padding: 10px; }
    .container { padding: 15px; }
    h1 { font-size: 1.5em; }
    h2 { font-size: 1.2em; }

    /* Poprawione style dla inputów na Mobile */
    input[type="text"],
    input[type="number"] { /* Zostawiamy selektor dla obu, na wypadek przyszłych zmian */
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        font-size: 16px;
        padding: 10px 12px;
        line-height: 1.4;
        height: 44px;
        box-sizing: border-box;
        margin-bottom: 10px;
        vertical-align: middle;
    }

    /* Usunięto specyficzne resety dla type="number" na mobile, bo nie są już potrzebne */

    button { font-size: 15px; padding: 10px 12px; }
    .form-group { flex-direction: column; gap: 0; }
    /* Upewniamy się, że styl flexbox dla inputów jest resetowany lub dostosowany do kolumny */
    .form-group input#playerNumberInput[type="text"],
    .form-group input#playerSurnameInput[type="text"] {
        flex-basis: auto; /* Reset flex-basis */
        flex-grow: 1; /* Pozwól obu rosnąć, jeśli trzeba */
    }

    .button-group { flex-direction: column; }
    .action-buttons button { min-height: 55px; padding: 4px; }
    .icon-wrapper { font-size: 1.2em; margin-bottom: 2px; }
    .button-text { font-size: 0.75em; }
    #summaryTable { font-size: 11px; }
    #summaryTable th, #summaryTable td { padding: 6px 3px; }
}

@media (max-width: 380px) {
    /* Style dla bardzo małych ekranów */
    .action-buttons button { min-height: 50px; }
    .icon-wrapper { font-size: 1.1em; }
}

/* --- Style dla Connection Status & Offline Banner (bez zmian) --- */
.status-indicator { position: fixed; top: 10px; left: 10px; padding: 5px 12px; border-radius: 15px; border: 1px solid rgba(0,0,0,0.2); display: flex; align-items: center; font-size: 12px; font-weight: bold; z-index: 1000; box-shadow: 0 1px 3px rgba(0,0,0,0.2); transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; color: white; }
.status-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; background-color: #ffc107; border: 1px solid rgba(0,0,0,0.3); transition: background-color 0.3s ease; }
.status-indicator.online { background-color: #28a745; border-color: #1f8a38; }
.status-indicator.online .status-dot { background-color: #ffffff; border-color: #1f8a38; }
.status-indicator.offline { background-color: #dc3545; border-color: #b02a37; }
.status-indicator.offline .status-dot { background-color: #ffffff; border-color: #b02a37; }
.status-text { line-height: 1; }
#offline-message-banner { position: fixed; bottom: 0; left: 0; width: 100%; background-color: #dc3545; color: white; text-align: center; padding: 8px 15px; font-size: 0.85em; z-index: 999; box-shadow: 0 -1px 4px rgba(0,0,0,0.15); }

/* --- Style dla Secondary Button & Modal (bez zmian) --- */
.secondary-action-button { background-color: #6c757d; margin-top: 15px; }
.secondary-action-button:hover { background-color: #5a6268; }
.secondary-action-button:active { background-color: #545b62; }
#confirmModalOverlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); display: flex; justify-content: center; align-items: center; z-index: 1001; }
#confirmModal { background-color: #fff; padding: 25px 30px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); max-width: 400px; width: 90%; text-align: center; }
#confirmModal p { margin-bottom: 20px; font-size: 1.1em; color: #333; line-height: 1.5; }
#confirmModal .modal-buttons { display: flex; justify-content: space-around; gap: 15px; }
#confirmModal .modal-buttons button { flex: 1; padding: 10px 15px; font-size: 1em; margin-top: 0; width: auto; }
#confirmNewMatchYesBtn { background-color: #28a745; color: white; }
#confirmNewMatchYesBtn:hover { background-color: #218838; }
#confirmNewMatchNoBtn { background-color: #dc3545; color: white; }
#confirmNewMatchNoBtn:hover { background-color: #c82333; }

/* --- Media Queries dla Modala i Statusu (rozdzielone) --- */
@media (max-width: 600px) {
    /* Responsywność dla modala */
    #confirmModal { padding: 20px 25px; }
    #confirmModal p { font-size: 1em; }
    #confirmModal .modal-buttons { flex-direction: column; }

    /* Responsywność dla statusu */
    .status-indicator { font-size: 11px; padding: 4px 10px; top: 5px; left: 5px; }
    .status-dot { width: 8px; height: 8px; margin-right: 6px; }
}