/**
 * COMPONENTS.CSS
 * Finální CSS vzhledy pro komponenty webu
 * 
 * Tento soubor obsahuje finální, schválené CSS styly pro komponenty,
 * které se používají napříč celým webem a budou zachovány do budoucna.
 * 
 * Datum vytvoření: 2025-01-XX
 * Verze: 1.0.0
 * 
 * POUŽITÍ:
 * - Přidejte tento soubor do header.php: <link rel="stylesheet" href="<?php echo BASE_URL; ?>assets/css/components.css">
 * - Používejte třídy podle dokumentace níže
 * 
 * KOMPONENTY:
 * - Buttons (Tesla-inspired design)
 * - [Další komponenty budou přidány postupně]
 */

/* ============================================
   BUTTONS - Tesla-inspired Design
   ============================================ */

/**
 * Základní button styl inspirovaný Tesla landing page
 * 
 * POUŽITÍ:
 * <button class="btn-tesla">Text tlačítka</button>
 * <a href="#" class="btn-tesla">Text odkazu</a>
 * 
 * VLASTNOSTI:
 * - Červený hover efekt (barva klubu: #c41e3a)
 * - Animovaný border s glow efektem
 * - Smooth transitions
 * - Responzivní velikosti
 */

.btn-tesla,
button.btn-tesla,
a.btn-tesla,
.btn.btn-tesla {
    position: relative;
    height: 55px;
    min-width: 180px;
    padding: 0 30px;
    background: none;
    color: #fff;
    font-size: 1.4rem;
    font-weight: 300;
    font-family: 'Roboto Condensed', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    text-align: center;
    text-decoration: none;
    border: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 1;
}

@media only screen and (min-width: 992px) {
    .btn-tesla,
    button.btn-tesla,
    a.btn-tesla,
    .btn.btn-tesla {
        font-size: 1.8rem;
        min-width: 210px;
    }
}

.btn-tesla:focus,
button.btn-tesla:focus,
a.btn-tesla:focus {
    outline: none;
}

/* Hover efekt - červené pozadí */
.btn-tesla:hover:before,
button.btn-tesla:hover:before,
a.btn-tesla:hover:before {
    height: 100%;
    opacity: 1;
}

.btn-tesla:before,
button.btn-tesla:before,
a.btn-tesla:before {
    position: absolute;
    content: "";
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0;
    opacity: 0;
    background-color: #c41e3a; /* Červená barva klubu */
    transition: all 0.3s ease;
    z-index: -1;
}

/* Border s glow efektem */
.btn-tesla__border {
    position: absolute;
    top: 0;
    left: 0;
    height: 55px;
    width: 100%;
    border: 1px solid #c41e3a;
    transition: all 0.6s ease-in-out;
    pointer-events: none;
}

.btn-tesla__border:after {
    position: absolute;
    content: "";
    left: 50%;
    top: 50%;
    width: 150%;
    height: 220%;
    opacity: 0.3;
    transform: translate(-50%, -50%);
    background: radial-gradient(ellipse at center, #c41e3a 1%, transparent 80%);
    z-index: -1;
    transition: opacity 0.6s ease-in-out, background 0.6s linear 0.5s;
}

@media only screen and (min-width: 992px) {
    .btn-tesla__border {
        min-width: 210px;
    }
}

/* Aplikace na všechny Bootstrap buttony - FINÁLNÍ STYL */
.btn,
button.btn,
a.btn {
    position: relative;
    min-height: 55px;
    padding: 12px 30px;
    font-size: 1.4rem;
    font-weight: 300;
    font-family: 'Roboto Condensed', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    text-align: center;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 1;
    background: none;
    color: #fff;
    overflow: hidden; /* DŮLEŽITÉ - pro správné zobrazení ::before efektu */
    pointer-events: auto; /* DŮLEŽITÉ - pro klikatelnost */
}

@media only screen and (min-width: 992px) {
    .btn:not(.btn-tesla),
    button.btn:not(.btn-tesla),
    a.btn:not(.btn-tesla) {
        font-size: 1.8rem;
        min-width: 210px;
    }
}

/* Hover efekt pro všechny buttony */
.btn:not(.btn-tesla):hover:before,
button.btn:not(.btn-tesla):hover:before,
a.btn:not(.btn-tesla):hover:before {
    height: 100%;
    opacity: 1;
}

/* Before pseudo-element pro hover efekt - FINÁLNÍ STYL */
.btn:not(.btn-tesla):before,
button.btn:not(.btn-tesla):before,
a.btn:not(.btn-tesla):before {
    position: absolute !important;
    content: "" !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 0 !important;
    opacity: 0 !important;
    background-color: #c41e3a !important; /* Červená barva klubu */
    transition: all 0.3s ease !important;
    z-index: -1 !important; /* DŮLEŽITÉ - za textem, před pozadím */
}

/* Border wrapper pro všechny buttony */
.btn:not(.btn-tesla):not(.btn-link) {
    border: 1px solid #c41e3a !important;
    transition: all 0.6s ease-in-out;
}

/* DŮLEŽITÉ: Zajištění správné z-index hierarchie a pointer-events */
.btn:not(.btn-tesla):not(.btn-link) {
    position: relative !important;
    z-index: 1 !important; /* Button musí být nad border elementem */
}

/* Glow efekt na border při hover */
.btn:not(.btn-tesla):not(.btn-link):hover {
    box-shadow: 0 0 20px rgba(196, 30, 58, 0.5);
    border-color: #c41e3a !important;
}

/* Glow efekt pomocí ::after - FINÁLNÍ STYL */
.btn:not(.btn-tesla):not(.btn-link)::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 150%;
    height: 220%;
    opacity: 0.3;
    transform: translate(-50%, -50%);
    background: radial-gradient(ellipse at center, #c41e3a 1%, transparent 80%);
    z-index: -1; /* DŮLEŽITÉ - změněno z -2 na -1 pro správnou hierarchii */
    transition: opacity 0.6s ease-in-out, background 0.6s linear 0.5s;
    pointer-events: none !important; /* DŮLEŽITÉ - nesmí blokovat klikání */
}

.btn:not(.btn-tesla):not(.btn-link):hover::after {
    opacity: 0.5;
}

/* Specifické barvy pro různé typy buttonů */
.btn-primary:not(.btn-tesla):not(.btn-link),
.btn-klub-primary:not(.btn-tesla):not(.btn-link) {
    border-color: #c41e3a !important;
}

.btn-primary:not(.btn-tesla):not(.btn-link):before,
.btn-klub-primary:not(.btn-tesla):not(.btn-link):before {
    background-color: #c41e3a;
}

.btn-primary:not(.btn-tesla):not(.btn-link)::after,
.btn-klub-primary:not(.btn-tesla):not(.btn-link)::after {
    background: radial-gradient(ellipse at center, #c41e3a 1%, transparent 80%);
}

.btn-secondary:not(.btn-tesla):not(.btn-link) {
    border-color: #064a3c !important; /* Zelená barva klubu */
}

.btn-secondary:not(.btn-tesla):not(.btn-link):before {
    background-color: #064a3c;
}

.btn-secondary:not(.btn-tesla):not(.btn-link)::after {
    background: radial-gradient(ellipse at center, #064a3c 1%, transparent 80%);
}

.btn-outline-danger:not(.btn-tesla):not(.btn-link) {
    border-color: #c41e3a !important;
    color: #c41e3a;
}

.btn-outline-danger:not(.btn-tesla):not(.btn-link):before {
    background-color: #c41e3a;
}

.btn-outline-danger:not(.btn-tesla):not(.btn-link):hover {
    color: #fff !important;
}

.btn-outline-danger:not(.btn-tesla):not(.btn-link)::after {
    background: radial-gradient(ellipse at center, #c41e3a 1%, transparent 80%);
}

.btn-warning:not(.btn-tesla):not(.btn-link) {
    border-color: #ffc107 !important;
}

.btn-warning:not(.btn-tesla):not(.btn-link):before {
    background-color: #ffc107;
}

.btn-warning:not(.btn-tesla):not(.btn-link)::after {
    background: radial-gradient(ellipse at center, #ffc107 1%, transparent 80%);
}

.btn-warning:not(.btn-tesla):not(.btn-link):hover {
    color: #000 !important;
}

/* Small buttony */
.btn-sm,
button.btn-sm {
    min-height: 40px;
    padding: 8px 20px;
    font-size: 1.2rem;
    min-width: 120px;
}

.btn-sm::after {
    border-width: 1px;
}

/* Large buttony */
.btn-lg,
button.btn-lg {
    min-height: 65px;
    padding: 16px 40px;
    font-size: 2rem;
    min-width: 250px;
}

/* Focus state */
.btn:focus,
button.btn:focus,
a.btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(196, 30, 58, 0.3);
}

/* Active state */
.btn:active,
button.btn:active,
a.btn:active {
    transform: translateY(1px);
}

/* Disabled state */
.btn:disabled,
button.btn:disabled,
a.btn:disabled,
.btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.btn:disabled:before,
button.btn:disabled:before,
a.btn:disabled:before {
    display: none;
}

.btn:disabled::after,
button.btn:disabled::after,
a.btn:disabled::after {
    opacity: 0.3;
}

/* ============================================
   ADMIN LOGIN BUTTON
   ============================================ */

/**
 * Tlačítko pro přihlášení do administrace
 * 
 * POUŽITÍ:
 * <a href="#" class="btn btn-danger btn-sm btn-admin-login">Přihlásit do administrace</a>
 * 
 * VLASTNOSTI:
 * - Bílá barva textu
 * - Velikost fontu: 0.875rem
 * - Bez ikony
 */

.btn-admin-login,
a.btn-admin-login {
    color: #fff !important;
    font-size: 0.875rem !important;
    font-weight: 400;
}

.btn-admin-login i,
a.btn-admin-login i {
    display: none !important;
}

/* ============================================
   REMOVAL OF BLUE BUTTON COLORS
   ============================================ */

/**
 * Odstranění modrých barev z buttonů
 * Modrá barva (#0d6efd, #3b82f6) se nepoužívá na žádných buttonech
 * Místo toho se používá červená (#c41e3a) nebo zelená (#064a3c)
 */

/* Přepis Bootstrap primary buttonu - místo modré použijeme červenou */
.btn-primary:not(.btn-tesla):not(.btn-link):not(.btn-admin-login) {
    border-color: #c41e3a !important;
    color: #fff !important;
}

.btn-primary:not(.btn-tesla):not(.btn-link):not(.btn-admin-login):before {
    background-color: #c41e3a !important;
}

.btn-primary:not(.btn-tesla):not(.btn-link):not(.btn-admin-login)::after {
    background: radial-gradient(ellipse at center, #c41e3a 1%, transparent 80%) !important;
}

/* Odstranění modré barvy z info buttonů */
.btn-info:not(.btn-tesla):not(.btn-link) {
    border-color: #064a3c !important; /* Zelená místo modré */
    color: #fff !important;
}

.btn-info:not(.btn-tesla):not(.btn-link):before {
    background-color: #064a3c !important;
}

.btn-info:not(.btn-tesla):not(.btn-link)::after {
    background: radial-gradient(ellipse at center, #064a3c 1%, transparent 80%) !important;
}

/* Odstranění modré barvy z link buttonů */
.btn-link:not(.btn-tesla) {
    color: #c41e3a !important; /* Červená místo modré */
    text-decoration: underline;
}

.btn-link:not(.btn-tesla):hover {
    color: #8b1429 !important; /* Tmavší červená */
}

/* ============================================
   PŘEPIS SPECIÁLNÍCH BUTTONŮ - FINÁLNÍ STYL PRO VŠECHNY
   ============================================ */

/**
 * Přepis všech speciálních buttonů, aby používaly finální Tesla button styl
 * Tato pravidla mají vysokou specificitu, aby přepsala vlastní styly v custom.css
 */

/* btn-klub-primary - finální styl */
.btn.btn-klub-primary,
a.btn.btn-klub-primary,
button.btn.btn-klub-primary {
    position: relative !important;
    background: none !important;
    background-color: transparent !important;
    border: 1px solid transparent !important;
    overflow: hidden !important;
    z-index: 1 !important;
    pointer-events: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

.btn.btn-klub-primary:before,
a.btn.btn-klub-primary:before,
button.btn.btn-klub-primary:before {
    position: absolute !important;
    content: "" !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 0 !important;
    opacity: 0 !important;
    background-color: #c41e3a !important;
    transition: all 0.3s ease !important;
    z-index: -1 !important;
}

.btn.btn-klub-primary:hover:before,
a.btn.btn-klub-primary:hover:before,
button.btn.btn-klub-primary:hover:before {
    height: 100% !important;
    opacity: 1 !important;
}

.btn.btn-klub-primary::after,
a.btn.btn-klub-primary::after,
button.btn.btn-klub-primary::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 150% !important;
    height: 220% !important;
    opacity: 0.3 !important;
    transform: translate(-50%, -50%) !important;
    background: radial-gradient(ellipse at center, #c41e3a 1%, transparent 80%) !important;
    z-index: -1 !important;
    transition: opacity 0.6s ease-in-out, background 0.6s linear 0.5s !important;
    pointer-events: none !important;
}

.btn.btn-klub-primary {
    border: 1px solid #c41e3a !important;
}

.btn.btn-klub-primary:hover {
    box-shadow: 0 0 20px rgba(196, 30, 58, 0.5) !important;
    transform: none !important; /* Odstranění translateY */
}

/* team-tab buttons - finální styl */
.team-tab,
button.team-tab {
    position: relative !important;
    background: none !important;
    background-color: transparent !important;
    border: 1px solid transparent !important;
    overflow: hidden !important;
    z-index: 1 !important;
    pointer-events: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

.team-tab:before,
button.team-tab:before {
    position: absolute !important;
    content: "" !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 0 !important;
    opacity: 0 !important;
    background-color: #c41e3a !important;
    transition: all 0.3s ease !important;
    z-index: -1 !important;
}

.team-tab:hover:before,
button.team-tab:hover:before {
    height: 100% !important;
    opacity: 1 !important;
}

.team-tab::after,
button.team-tab::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 150% !important;
    height: 220% !important;
    opacity: 0.3 !important;
    transform: translate(-50%, -50%) !important;
    background: radial-gradient(ellipse at center, #c41e3a 1%, transparent 80%) !important;
    z-index: -1 !important;
    transition: opacity 0.6s ease-in-out, background 0.6s linear 0.5s !important;
    pointer-events: none !important;
}

.team-tab {
    border: 1px solid #c41e3a !important;
}

.team-tab:hover {
    box-shadow: 0 0 20px rgba(196, 30, 58, 0.5) !important;
    transform: none !important;
}

/* Aktivní záložka — stejná výplň jako hover (čiší tabulka podle výběru) */
.team-tab.active,
button.team-tab.active {
    color: #fff !important;
    border-color: #c41e3a !important;
}

.team-tab.active:before,
button.team-tab.active:before {
    height: 100% !important;
    opacity: 1 !important;
}

.team-tab.active:hover:before,
button.team-tab.active:hover:before {
    height: 100% !important;
    opacity: 1 !important;
}

.team-tab.active::after,
button.team-tab.active::after {
    opacity: 0 !important;
}

/* btn-warning v dotace sekci - finální styl */
.section-dotace .btn.btn-warning,
.section-dotace a.btn.btn-warning,
.section-dotace button.btn.btn-warning {
    position: relative !important;
    background: none !important;
    background-color: transparent !important;
    border: 1px solid transparent !important;
    overflow: hidden !important;
    z-index: 1 !important;
    pointer-events: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    box-shadow: none !important;
}

.section-dotace .btn.btn-warning:before,
.section-dotace a.btn.btn-warning:before,
.section-dotace button.btn.btn-warning:before {
    position: absolute !important;
    content: "" !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 0 !important;
    opacity: 0 !important;
    background-color: #ffc107 !important;
    transition: all 0.3s ease !important;
    z-index: -1 !important;
}

.section-dotace .btn.btn-warning:hover:before,
.section-dotace a.btn.btn-warning:hover:before,
.section-dotace button.btn.btn-warning:hover:before {
    height: 100% !important;
    opacity: 1 !important;
}

.section-dotace .btn.btn-warning::after,
.section-dotace a.btn.btn-warning::after,
.section-dotace button.btn.btn-warning::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 150% !important;
    height: 220% !important;
    opacity: 0.3 !important;
    transform: translate(-50%, -50%) !important;
    background: radial-gradient(ellipse at center, #ffc107 1%, transparent 80%) !important;
    z-index: -1 !important;
    transition: opacity 0.6s ease-in-out, background 0.6s linear 0.5s !important;
    pointer-events: none !important;
}

.section-dotace .btn.btn-warning {
    border: 1px solid #ffc107 !important;
}

.section-dotace .btn.btn-warning:hover {
    box-shadow: 0 0 20px rgba(255, 193, 7, 0.5) !important;
    transform: none !important;
    color: #000 !important;
}

/* teams-hero-buttons - finální styl pro btn-teams-primary a btn-teams-secondary */
.teams-hero-buttons .btn-teams-primary,
.teams-hero-buttons a.btn-teams-primary,
.teams-hero-buttons button.btn-teams-primary,
.teams-hero-buttons .btn-teams-secondary,
.teams-hero-buttons a.btn-teams-secondary,
.teams-hero-buttons button.btn-teams-secondary {
    position: relative !important;
    background: none !important;
    background-color: transparent !important;
    border: 1px solid transparent !important;
    overflow: hidden !important;
    z-index: 1 !important;
    pointer-events: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

.teams-hero-buttons .btn-teams-primary:before,
.teams-hero-buttons a.btn-teams-primary:before,
.teams-hero-buttons button.btn-teams-primary:before {
    position: absolute !important;
    content: "" !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 0 !important;
    opacity: 0 !important;
    background-color: #c41e3a !important;
    transition: all 0.3s ease !important;
    z-index: -1 !important;
}

.teams-hero-buttons .btn-teams-primary:hover:before,
.teams-hero-buttons a.btn-teams-primary:hover:before,
.teams-hero-buttons button.btn-teams-primary:hover:before {
    height: 100% !important;
    opacity: 1 !important;
}

.teams-hero-buttons .btn-teams-primary::after,
.teams-hero-buttons a.btn-teams-primary::after,
.teams-hero-buttons button.btn-teams-primary::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 150% !important;
    height: 220% !important;
    opacity: 0.3 !important;
    transform: translate(-50%, -50%) !important;
    background: radial-gradient(ellipse at center, #c41e3a 1%, transparent 80%) !important;
    z-index: -1 !important;
    transition: opacity 0.6s ease-in-out, background 0.6s linear 0.5s !important;
    pointer-events: none !important;
}

.teams-hero-buttons .btn-teams-primary {
    border: 1px solid #c41e3a !important;
}

.teams-hero-buttons .btn-teams-primary:hover {
    box-shadow: 0 0 20px rgba(196, 30, 58, 0.5) !important;
    transform: none !important;
    color: #fff !important;
}

.teams-hero-buttons .btn-teams-secondary:before,
.teams-hero-buttons a.btn-teams-secondary:before,
.teams-hero-buttons button.btn-teams-secondary:before {
    position: absolute !important;
    content: "" !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 0 !important;
    opacity: 0 !important;
    background-color: #064a3c !important;
    transition: all 0.3s ease !important;
    z-index: -1 !important;
}

.teams-hero-buttons .btn-teams-secondary:hover:before,
.teams-hero-buttons a.btn-teams-secondary:hover:before,
.teams-hero-buttons button.btn-teams-secondary:hover:before {
    height: 100% !important;
    opacity: 1 !important;
}

.teams-hero-buttons .btn-teams-secondary::after,
.teams-hero-buttons a.btn-teams-secondary::after,
.teams-hero-buttons button.btn-teams-secondary::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 150% !important;
    height: 220% !important;
    opacity: 0.3 !important;
    transform: translate(-50%, -50%) !important;
    background: radial-gradient(ellipse at center, #064a3c 1%, transparent 80%) !important;
    z-index: -1 !important;
    transition: opacity 0.6s ease-in-out, background 0.6s linear 0.5s !important;
    pointer-events: none !important;
}

.teams-hero-buttons .btn-teams-secondary {
    border: 1px solid #064a3c !important;
}

.teams-hero-buttons .btn-teams-secondary:hover {
    box-shadow: 0 0 20px rgba(6, 74, 60, 0.5) !important;
    transform: none !important;
    color: #fff !important;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 767px) {
    .btn,
    button.btn,
    a.btn {
        font-size: 1.2rem;
        min-width: 150px;
        padding: 10px 20px;
        min-height: 45px;
    }
    
    .btn-sm,
    button.btn-sm {
        font-size: 1rem;
        min-width: 100px;
        padding: 6px 15px;
        min-height: 35px;
    }
    
    .btn-lg,
    button.btn-lg {
        font-size: 1.6rem;
        min-width: 200px;
        padding: 14px 30px;
        min-height: 55px;
    }
}