/* ==========================================================================
   1. GLOBÁLNÍ STYLY
   ========================================================================== */
body { font-family: sans-serif; background: #f4f4f9; padding: 50px; }
.container { width: 80%; margin: 0 auto; background: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }


/* ==========================================================================
   2. STYLY PRO SPRAVA.PHP (Systémové nastavení)
   ========================================================================== */
/* Dedikované styly pouze pro sprava.php */
/* Obalení třídou .admin-page zajistí izolaci stylů */
.admin-page .form-container form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
    background: #f4f4f4;
    padding: 15px;
    border-radius: 5px;
}

.admin-page .vs-table {
    width: 100%;
    table-layout: fixed; /* Nutné pro sjednocení šířky inputů s hlavičkou */
    border-collapse: collapse;
    margin-top: 10px;
}

.admin-page .vs-table th, 
.admin-page .vs-table td {
    padding: 8px;
    border: 1px solid #ddd;
    text-align: left;
    overflow: hidden;
}

.admin-page .vs-table input, 
.admin-page .vs-table select {
    width: 100%;
    box-sizing: border-box; /* Zajišťuje, že input nepřeteče hranice buňky */
    padding: 6px;
    border: 1px solid #ccc;
    border-radius: 3px;
}

.admin-page .btn-group-cell {
    white-space: nowrap; /* Tlačítka zůstanou v jednom řádku */
    text-align: center;
}

/* Barevná tlačítka */
.admin-page .btn-add { background-color: #28a745; color: white; border: none; padding: 8px 12px; cursor: pointer; border-radius: 3px; }
.admin-page .btn-save { background-color: #fd7e14; color: white; border: none; padding: 8px 12px; cursor: pointer; border-radius: 3px; }
.admin-page .btn-del { background-color: #dc3545; color: white; border: none; padding: 8px 12px; cursor: pointer; border-radius: 3px; }

.admin-page .help-text { font-size: 0.85em; color: #555; margin-bottom: 10px; font-style: italic; }
.admin-page .admin-block { margin-bottom: 40px; }

.admin-page .form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}

.admin-page .break-row {
    flex-basis: 100%; /* Vynutí zlom na nový řádek */
    display: flex;
    gap: 10px;
}

/* ==========================================================================
   4. STYLY PRO VYSLEDKY.PHP
   ========================================================================== */

/* Sjednocení tabulky výsledků s tabulkou účastníků */
#vysledkyTable {
    table-layout: fixed;
    width: 100%;
    margin-top: 20px;
    border-collapse: collapse;
}

/* Nastavení šířek sloupců pro výsledky */
#vysledkyTable th:nth-child(1), #vysledkyTable td:nth-child(1) { width: 30%; } /* Jméno */
#vysledkyTable th:nth-child(2), #vysledkyTable td:nth-child(2) { width: 30%; } /* Disciplína */
#vysledkyTable th:nth-child(3), #vysledkyTable td:nth-child(3) { width: 40%; } /* Výkon */

/* Inputy a selecty v tabulce výsledků - stejné jako u účastníků */
#vysledkyTable td input[type="number"], 
#vysledkyTable td input[type="text"] {
    width: 100%;
    box-sizing: border-box;
    padding: 6px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 0.95em;
}

/* Vizuální oddělení editačního pole od textového popisu */
#vysledkyTable td .display-val {
    display: block;
    margin-top: 5px;
    font-size: 0.85em;
    color: #666;
    font-style: italic;
}

    /* Styly pouze pro vysledky.php */
    
    /* Formulář v sekci pro přidávání */
    .add-form select, 
    .add-form input {
        display: block;
        width: 300px; /* Nastavte požadovanou šířku pro formulář */
        margin-bottom: 10px;
        padding: 8px;
        box-sizing: border-box;
    }
    
    .add-form button {
        display: block;
        width: 300px;
        padding: 10px;
    }

    /* Inputy přímo v tabulce */
    .edit-input {
        display: block;
        width: 150px; /* Užší pole pro zadávání výsledku v řádku */
        margin-top: 5px;
        padding: 5px;
        box-sizing: border-box;
    }

    .display-val {
        display: block;
        font-weight: bold;
        margin-bottom: 2px;
    }
/* --- Sekce pro vkládání výsledků --- */
.add-section { 
    background: #f9f9f9; 
    padding: 20px; 
    border-radius: 8px; 
    border: 1px solid #ddd; 
    margin-bottom: 30px; 
}

/* Zajišťuje, že všechny prvky formuláře jsou blokové a konzistentně široké */
.add-form select, 
.add-form input, 
.add-form button { 
    display: block; 
    width: 100%; 
    max-width: 500px; 
    margin-bottom: 15px; 
    padding: 10px; 
    box-sizing: border-box; /* Zabrání přetečení šířky kvůli paddingu */
}

/* --- Tabulka výsledků --- */
.tbl-sprava { 
    width: 100%; 
    border-collapse: collapse; 
    margin-top: 10px;
}

.tbl-sprava th, 
.tbl-sprava td { 
    padding: 12px; 
    border-bottom: 1px solid #eee; 
    text-align: left; 
}

/* Fixní šířka prvního sloupce pro tlačítko smazat, aby bylo vždy vlevo */
.tbl-sprava td:first-child { 
    width: 80px; 
    vertical-align: middle; 
}

/* --- Interaktivní prvky --- */
.btn-delete { 
    background: #ff4d4d; 
    color: white; 
    border: none; 
    padding: 6px 12px; 
    cursor: pointer; 
    border-radius: 4px; 
    font-size: 12px; 
    transition: background 0.2s;
}

.btn-delete:hover { 
    background: #cc0000; 
}

.display-val { 
    font-weight: bold; 
    display: block; 
}


.form-vertical .form-group {
    margin-bottom: 15px; /* Mezera mezi řádky */
}

.form-vertical .form-control {
/*    width: 100%;       /* Roztáhne prvky na celou šířku */
    display: block;    /* Vynutí zalomení řádku */
    box-sizing: border-box; /* Zabrání přetečení kvůli paddingu */
}
/* Skrytí možností v selectu při filtrování kategorií */
#ucastnikSelect option[style*="display: none"] { 
    display: none; 
}

/* --- Kontejner stránky --- */
.vysledky-page { max-width: 800px; margin: 0 auto; }

/* --- Formulář a zalamování --- */
.vs-add-section { background: #f4f4f4; padding: 20px; border-radius: 8px; }

/* Klíčové zalamování: každý div s třídou vs-form-group bude na novém řádku */
.vs-form-group { 
    display: block !important; 
    width: 100% !important; 
    margin-bottom: 15px !important; 
}

/* Vzhled inputů a selectů */
.vs-form select, .vs-form input { 
    display: block; 
    width: 100%; 
    max-width: 400px; 
    padding: 10px; 
    margin-top: 5px; 
    box-sizing: border-box; 
}

/* --- Tlačítka --- */
.vs-btn-save { 
    background: #28a745 !important; /* Zelená barva */
    color: #fff !important; 
    border: none; 
    padding: 10px 20px; 
    cursor: pointer; 
}

.vs-btn-delete { 
    background: #dc3545; 
    color: #fff; 
    border: none; 
    padding: 5px 10px; 
    cursor: pointer; 
}

/* --- Tabulka --- */
.vs-table { width: 100%; border-collapse: collapse; margin-top: 20px; }
.vs-table th, .vs-table td { padding: 30px; border-bottom: 1px solid #ddd; }

/* Vynucení zelené barvy pomocí vyšší specifičnosti */
body .vysledky-page .vs-btn-save {
    background-color: #28a745 !important;
    color: #ffffff !important;
    border: none !important;
    opacity: 1 !important; /* Pokud by bylo tlačítko "disabled" */

.alert { padding: 15px; margin-bottom: 20px; border-radius: 4px; font-weight: bold; }
.alert-danger { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
.alert-success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; }

/* Jednoduchý modální pop-up */
.modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); }
.modal-content { background: #fff; margin: 15% auto; padding: 20px; width: 300px; border-radius: 5px; text-align: center; }
}

    /* Specifičtější cesta zajistí, že pravidlo přebije výchozí styly tabulky */
    .card-body .table th, 
    .card-body .table td { 
        padding: 10px 20px !important; 
        vertical-align: bottom !important; /* Zlepší svislé zarovnání textu */
    }