/**
 * Styly pro tlačítka
 * Plugin: Pracovní evidence
 */

/* ========================================
   ZÁKLADNÍ STYLY TLAČÍTEK
   ======================================== */

/* Společné styly pro všechna barevná tlačítka */
.pracovni-evidence-tlacitko-zelene,
.pracovni-evidence-tlacitko-modre,
.pracovni-evidence-tlacitko-svetle-modre,
.pracovni-evidence-tlacitko-fialove,
.pracovni-evidence-tlacitko-oranzove,
.pracovni-evidence-tlacitko-sede,
.pracovni-evidence-tlacitko-cerne,
.pracovni-evidence-tlacitko-cervene,
.pracovni-evidence-tlacitko-bilo-modre {
    /* Layout */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 90px;
    padding: 6px 10px;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    text-align: center;
    text-decoration: none !important;
    color: white !important;
    cursor: pointer;
    transition: background-color 0.3s ease;
    box-sizing: border-box;
    vertical-align: middle;
}

/* ========================================
   BAREVNÉ VARIANTY TLAČÍTEK
   ======================================== */

/* Zelené - potvrzovací akce */
.pracovni-evidence-tlacitko-zelene {
    background: #00ba11;
}
.pracovni-evidence-tlacitko-zelene:hover {
    background: #039c11;
}

/* Modré - primární akce */
.pracovni-evidence-tlacitko-modre {
    background: #00a4ff;
}
.pracovni-evidence-tlacitko-modre:hover {
    background: #0066ff;
}

/* Světle modré - sekundární akce */
.pracovni-evidence-tlacitko-svetle-modre {
    background: #f0f9ff;
    color: #575757 !important;
    border: 1px solid #3ec3ff;
}
.pracovni-evidence-tlacitko-svetle-modre:hover {
    background: #D1F2FF;
    color: #000 !important;
}

/* Fialové - vyúčtování */
.pracovni-evidence-tlacitko-fialove {
    background: #de75ff;
}
.pracovni-evidence-tlacitko-fialove:hover {
    background: #c200ff;
}

/* Oranžové - upozornění */
.pracovni-evidence-tlacitko-oranzove {
    background: #eb8c00;
}
.pracovni-evidence-tlacitko-oranzove:hover {
    background: #c76f01;
}

/* Šedé - neutrální akce */
.pracovni-evidence-tlacitko-sede {
    background: #929292;
}
.pracovni-evidence-tlacitko-sede:hover {
    background: #767676;
}

/* Červené - odmítnutí */
.pracovni-evidence-tlacitko-cervene {
    background: #dc3545;
}
.pracovni-evidence-tlacitko-cervene:hover {
    background: #bd0000;
}

/* Černé - odstranění */
.pracovni-evidence-tlacitko-cerne {
    background: #000;
}
.pracovni-evidence-tlacitko-cerne:hover {
    background: #bd0000;
}

/* Bílo-modré - outline styl */
.pracovni-evidence-tlacitko-bilo-modre {
    background: #ffffff;
    color: #252424 !important;
    border: 1px solid #00a4ff;
    padding: 6px 8px;
}
.pracovni-evidence-tlacitko-bilo-modre:hover {
    background: #00a4ff;
    color: #fff !important;
}

/* ========================================
   STAV ODESÍLÁNÍ FORMULÁŘE
   ======================================== */

/* Disabled stav tlačítka při odesílání */
.pracovni-evidence-tlacitko-odesilam {
    opacity: 0.7;
    cursor: wait !important;
    pointer-events: none;
}

/* Spinner ikona */
.pracovni-evidence-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: pe-spin 0.6s linear infinite;
    vertical-align: middle;
    margin-right: 5px;
}

@keyframes pe-spin {
    to { transform: rotate(360deg); }
}

/* ========================================
   RESPONZIVNÍ DESIGN
   ======================================== */
@media (max-width: 768px) {
    [class*="pracovni-evidence-tlacitko-"] {
        width: auto;
        min-width: 80px;
    }
}