/*kacubo styles*/
@import "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css";
@import "https://www.kacubo.cz/banik/css.css";
@import "https://www.kacubo.cz/css/style.css";
@import "https://www.kacubo.cz/banik/animate.css";

@import "https://fonts.googleapis.com/css?family=Lato";
@import "https://fonts.googleapis.com/css?family=Montserrat";
@import "./components.css";

/*variables*/
:root{
    --primary-kacubo: #a20d0d;
    --primary-kacubo-focus: #a20d0d;
    --primary-kacubo-hover: #8c0b0b;

    --primary-background-color: #f7f7f7;

    --event-card-bg: white;

    --navbar-margin: 55px;
    --gap-size: 30px;
    --radius-card: 12px;
    --joined-color: #198754;
    --lock-color:#555;

    /*===RESPONSIVITY===*/
    --mobile-width: 600px;
}

/*===COMPONENTS===*/
span .required{
    content: "*";
    color: red;
    font-size: 1rem;
}

.delete-ref{
    content: none;
    width: auto;
    height: 100%;
    max-width: 10%;
    img{
        padding: 5px;
        width: 100%;
        height: 100%;
    }
}

.link-as-btn{
    padding: 6px 15px;
    background-color: var(--primary-kacubo);
    color: white;
    font-size: 1.1rem;
}
.link-as-btn.rounded{
    border-radius: 5px;
}
.link-as-btn:hover{
    color: white;
    text-decoration: none;
    background-color: var(--primary-kacubo-hover);
}
.link-as-btn:focus{
    color: white;
    text-decoration: none;
}

/*===PAGINATION===*/
.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: auto;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap;
}

.pagination-wrap {
    margin-right: 1em;
    padding-bottom: 1em;
    padding-top: 0.5em;
    font: 1.2em sans-serif;

    display: flex;
    margin-top: auto;
    justify-content: right;
}

.pagination {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.pagination li {
    margin: 0 1px;
}

.pagination a {
    display: block;
    padding: 0.5em 1em;
    border: 1px solid #999999;
    border-radius: 0.2em;
    text-decoration: none;
    color: var(--primary-kacubo) !important; ;
}

.pagination a[aria-current="page"] {
    background-color: var(--primary-kacubo);
    color: white !important;
}
.pagination a[aria-current="page"]:hover {
    background-color: var(--primary-kacubo-hover);
    color: white !important;
}
/*template*/
body {
    /*width: 100vw;*/
    /*min-height: 100vh;*/
    font-family: Arial, sans-serif;
    background-color:var(--primary-background-color);
    color:#333;
    /*line-height:1.5;*/

    header{
        height: 0;
    }
    h2{
        overflow: auto;
    }

    .kacubo-ref{
        color: var(--primary-kacubo);
    }

    @media only screen and (max-width: 600px) {
        header{
            padding: 0;
        }
    }
}

.line-div{
    height: 2px;
    width: 100%;
    background-color: grey;
}

#page-content{
    padding: 50px 0 0 0;
}


/*LOGIN - page*/
login-bg-imagage1{

}

#login-body{
    width: 100%;
    height: 100%;
    /*KACUBO background image*/
    background: url('https://www.kacubo.cz/header/143.jpg') center/cover no-repeat;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;

    .login-page {
        display:flex;
        justify-content:center;
        align-items:center;
        padding:40px 20px;
        min-height:calc(100vh - 120px);
        width: 100%;
        /*background:url('https://www.kacubo.cz/header/143.jpg') center/cover no-repeat; /* můžeš dát vlastní */
    }

    .login-page > .login-container {
        padding:30px 40px;
        border-radius:8px;
        width: 100%;
        display: flex;
        justify-content: center;

        h2{
            margin-bottom:20px;
            color:var(--primary-kacubo);
            text-align:center;
            overflow: hidden;
        }

        label{
            display:block;
            margin-bottom:5px;
            font-weight:bold;
        }

        input{
            width:100%;
            padding:10px;
            margin-bottom:15px;
            border:1px solid #ccc;
            border-radius:4px;
        }

        input:focus{
            border-color:var(--primary-kacubo-focus);
            outline:none;
        }

        button{
            width:100%;
            padding:12px;
            background-color:var(--primary-kacubo);
            color:white;
            border:none;
            border-radius:4px;
            font-size:1rem;
            cursor:pointer;
        }
    }

    .login-page > .login-container > #login-form{
        background-color:rgba(255,255,255,0.95);
        padding:30px 40px;
        border-radius:8px;
        box-shadow:0 4px 12px rgba(0,0,0,0.1);
        width:100%;
        max-width: 600px;

        h2{
            overflow: hidden;
        }

        * > .chckbox-wrapper{
            display: flex;
            flex-direction: row;

            input[type="checkbox"]{
                cursor: pointer;
                flex: 1;
                align-items: flex-start;
            }

            label{
                flex: 9;
                align-items: center;
            }
        }
    }

    .login-container button:hover {background-color:#800000;}
    .login-footer-text {
        margin-top:15px;
        text-align:center;
        font-size:0.9rem;
    }
    .login-footer-text a {
        color:#a20d0d;
        text-decoration:none;
    }
    .login-footer-text a:hover{text-decoration:underline;}
    .error {
        color:red;
        margin-bottom:10px;
        text-align:center;
    }
}

/*Index*/

/*Event - page*/
#event-body{
    overflow-x: hidden;
    h2 {
        overflow-wrap: break-word;

        :before{

        }

        :after{

        }
    }
    #event-container{
        /*height: 100%;*/

        display: flex;
        /*align-items: center;*/
        justify-content: center;
        margin: 50px 0 0 0;

        .event-div{
            width: 50%;
            background-color: var(--event-card-bg);
            border-radius: 20px;
            margin: 0 0 50px 0;

            .dates-wrapper{
                display: flex;
                flex-direction: row;
                .date-div{
                    flex: 1;
                }
                .price-div{
                    flex: 1;
                }
            }

            .date-div, .price-div{
                p{
                    color: grey;
                }
            }

            .description-wrapper{
                padding: 30px;
                min-height: 100px;
            }
        }

        * > .map-wrapper{
            position: relative;
            width: 100%;
            padding-bottom: 56.25%; /* poměr 16:9 — uprav podle potřeby */
            height: 0;
            overflow: hidden;

            margin: 5px 0 5px 0;

            iframe{
                position: absolute;
                top:0; left:0;
                width:100%;
                height:100%;
                border:0;
            }
        }

        /*Mobile*/
        @media only screen and (max-width: 600px) {
            .event-div{
                width: 100%;
            }
        }
    }

    .event-button{
        color: white;
        width: 100%;
        height: 50px;
        background-color: var(--primary-kacubo);
    }

    .event-button-registered{

    }
}

/*Admin - page*/

/*Admin - index*/
#admin-index-body{
    padding-top: var(--navbar-margin);
}
#admin-index-body > #page-content {
    background-color: var(--primary-background-color);
    width: 100vw;
    padding-top: 0;
    #links-div{
        padding: 0 33% 0 33%;
        background: var(--primary-background-color);
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;

        .button-link{
            display: flex;
            justify-content: center;
            margin-bottom: 10px;
            width: 100%;
            font-size: large;
        }
    }

    @media only screen and (max-width: 600px) {
        padding: 50px 0 0 0 ;
    }
}

/*Admin - users*/
#admin-users-body > #page-content{
    padding: 60px 10px 0 10px ;
    .expand-btn{
        width: 100%;
    }

    div.breadcrumb-container{
        padding: 0;
    }

    #add-user-form{
        .form-wrapper{
            width: 100%;
        }

        #names-wrapper{
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            gap: 10px;

            div{
                flex: 40%;
                min-width: 400px;
            }
        }

        * > input{
          width: 100%;
            max-width: none;
        }

        button{
            width: 100%;
        }
    }

    .table-wrap{
        overflow-x: auto;

        td,th{
            white-space: nowrap;
        }

        .lname-col{
            display: none;
        }

        .bdate-col{
            white-space: nowrap
        }

        thead{
            position: sticky;
            top: 0px;
        }

        .download-link{
            width: 30px;
            height: 30px;
            display: inline-block;
            img{
                width: 100%;
                height: 100%;
            }
        }
    }

    * > .filter-username{
        width: 100%;
        max-width: 600px;
    }

    .filter-username-wrap{
        display: flex;
        flex-direction: column;
    }
}

#admin-user-body > #page-content {
    padding: 60px 10px 0 10px;

    div.breadcrumb-container{
        padding: 0;
    }

    .expand-btn {
        width: 100%;
    }
}

/* Styly pro chybové hlášky */
.form-input-error {
    color: #a20d0d; /* Červená barva, ladí s webem */
    font-size: 0.875rem;
    display: block;
    margin-top: 4px;
}

.form-error-summary {
    color: #a20d0d;
    background-color: #fdd;
    border: 1px solid #a20d0d;
    padding: 10px 15px;
    border-radius: 4px;
    margin-bottom: 15px;
}

/* Zvýraznění inputu s chybou */
input.input-error {
    border-color: #a20d0d;
    background-color: #fffafa;
}

input.input-error:focus {
    border-color: #a20d0d;
    box-shadow: 0 0 0 2px rgba(162, 13, 13, 0.2);
    outline: none;
}

/* Styl pro zprávy o individuální validaci */
.validation-error {
    color: red;
    font-size: 1.5rem;
    display: block;
    margin-top: -10px;
    margin-bottom: 10px;
    height: 0;
    overflow: hidden;
    transition: all 0.2s ease-in-out;
}

.validation-error.active {
    height: auto;
    margin-top: 5px;
}

/*USER FORM*/
#add-user-form {
    display: block;
    margin: 0;
    width: auto;

    * > *:disabled{
        background: #b8bcbf;
        pointer-events: none;
    }

    input{
        max-width: none;
    }

    button{
        width: 100%;
    }
}
.novisible{
    display: none !important;
}

/*UPDATE EVENT*/
#admin-update-event-body{
    div.breadcrumb-container{
        margin-top: var(--navbar-margin);
    }
}
#admin-update-event-body > #page-content{
    padding-top: 0;
    display: flex;
    flex-direction: row;
    form{display: block}
    div{
        /*height: 600px;*/
    }

    #update-user-div{
        flex: 2;
        padding-left: 15px;
    }

    #registrations-div{
        height: fit-content;
        flex: 1;
        padding: 5px 15px;
        margin: 5px 15px;
        padding-top: 0;
        margin-top: 0;
        /*border: solid var(--primary-kacubo) 2px;*/
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        max-width: 400px;

        > form{
            display: flex;
            flex-direction: row;
            margin: 0;

            input{
                flex: 1;
            }
            button{
                background-color: var(--primary-kacubo);
                color: white;
                border: none;
                width: 40px;
            }
            button:hover{
                background-color: var(--primary-kacubo-hover);
            }
        }

        .registration-wrap{
            display: flex;
            flex-direction: row;
            width: 100%;
            margin-bottom: 10px;
            p{
                margin: 0;
                flex-shrink: 1;
                flex: 1            }
            a{
                flex-shrink: 0;
                min-width: 30px;
            }
            >form{
                border: none;
                height: auto;
                padding: 0;
                margin: 0;
                button{
                    color: white;
                    padding: 6px 10px;
                    background-color: var(--primary-kacubo);
                }
                button:hover{
                    background-color: var(--primary-kacubo-hover);
                }
                button:focus{
                    background-color: var(--primary-kacubo-focus);
                }
            }
        }
    }

    @media (max-width: 900px) {
        flex-direction: column;
        padding-left: 0;
        > #update-user-div{
            padding: 0 15px;
        }
        > #registrations-div{
            width: 100%;
            max-width: none;
            margin: 0;
        }

    }
}

/*===EVENT===*/
#event-body > #event-detail-content {
    max-width: 1200px;
    margin: var(--navbar-margin) auto;
    padding: 0 20px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;

    .status-badge { display: inline-block; padding: 8px 12px; border-radius: 6px; font-size: 0.95rem; font-weight: bold; text-align: center; width: 100%; }
    .badge-registered { background-color: #d1e7dd; color: #0f5132; border: 1px solid #badbcc; }
    .badge-registered::before { content: "✓ "; }
    .badge-open { background-color: #cfe2ff; color: #084298; border: 1px solid #b6d4fe; }
    .badge-closed { background-color: #f8d7da; color: #842029; border: 1px solid #f5c2c7; }
    .status-badge-mobile{
        visibility: hidden;
        display: none;
    }

    div.breadcrumb-container{
        padding: 0;
    }

    .event-wrap{
        display: flex;
        flex-wrap: wrap;
        gap: var(--gap-size);
        align-items: flex-start;
        flex-direction: row;
        .event-main{
            background: white; border-radius: var(--radius-card);
            overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.08);
            flex: 2 1 600px; min-width: 0;

            .event-hero-image {
                width: 100%;
                object-fit: cover;
                display: block;
                height: 300px;
            }
            .event-content-wrapper { padding: 40px; }
            .event-title { font-family: 'Montserrat', sans-serif; font-size: 2.2rem; color: var(--primary-kacubo); margin: 20px 0 20px; line-height: 1.2; }
            .event-description { font-size: 1.1rem; line-height: 1.8; color: #444; margin-bottom: 40px; white-space: pre-line; }

            .event-content-wrapper{
                .countdown-box{
                    background-color: #f9f9f9;
                    border: 1px solid #e0e0e0;
                    border-radius: 8px;
                    padding: 15px;
                    text-align: center;
                    .countdown-label { font-size: 0.8rem; text-transform: uppercase; color: #666; font-weight: bold; margin-bottom: 5px; }
                    .countdown-timer { font-family: 'Montserrat', sans-serif; font-size: 1.4rem; font-weight: bold; color: var(--primary-kacubo); letter-spacing: 1px; }
                }
            }
        }
        form.event-sidebar {
            background: white; border-radius: var(--radius-card);
            padding: 30px; box-shadow: 0 4px 20px rgba(0,0,0,0.08);
            border-top: 5px solid var(--primary-kacubo);
            display: flex; flex-direction: column; gap: 20px;
            flex: 1 1 300px;


            .info-row {
                border-bottom: 1px solid #f0f0f0;
                padding-bottom: 15px;
                .info-row:last-child { border-bottom: none; }
                .info-label { font-size: 0.85rem; text-transform: uppercase; color: #888; font-weight: bold; margin-bottom: 5px; display: block; }
                .info-value { font-size: 1.1rem; color: #222; font-weight: 500; display: block; }
                .info-value.past-deadline-active{
                    color: var(--primary-kacubo);
                }
                .info-value.past-deadline-inactive{
                    color: inherit;
                }
                .info-value.highlight { color: var(--primary-kacubo); font-weight: bold; }
                .info-value.price {font-size: 1.3rem; font-weight: bold; color: var(--primary-kacubo); }
                .capacity-bar-wrapper { width: 100%; height: 8px; background-color: #e9ecef; border-radius: 4px; margin-top: 8px; overflow: hidden; }
                .capacity-bar-fill { height: 100%; background-color: var(--primary-kacubo); border-radius: 4px; }
                .percent-status{font-size: 0.8rem; color: #666; margin-top: 4px; text-align: right;}
            }

            .btn-action {
                display: block; width: 100%; text-align: center; padding: 15px;
                border-radius: 6px; font-size: 1.1rem; font-weight: bold;
                border: none; cursor: pointer; transition: all 0.2s ease;
                text-decoration: none; margin-top: 10px; color: white;
            }
            .btn-register { background-color: var(--primary-kacubo); }
            .btn-register:hover { background-color: #8c0b0b; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(162, 13, 13, 0.3); }

            .btn-cancel { background-color: #dc3545; }
            .btn-locked {
                background-color: #6b7280;
                cursor: auto;
            }
            .btn-cancel:hover { background-color: #bb2d3b; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(220, 53, 69, 0.3); }

            .btn-disabled { background-color: #6c757d; cursor: not-allowed; opacity: 0.7; pointer-events: none; }
        }
        @media (max-width: 900px) {
            gap: 0 !important;
            padding: 0 5px !important;

            * {
                .status-badge:not(.status-badge-mobile){
                    visibility: hidden !important;
                    display: none !important;
                }
                .status-badge.status-badge-mobile{
                    visibility: visible; !important;
                    display: block !important;
                    margin-top: 5px;
                }
                .event-content-wrapper{
                    padding: 5px 0 !important;
                }
                .event-title{

                }
                .event-description{

                }
            }

            .event-main{
                border-bottom-left-radius: 0;
                border-bottom-right-radius: 0;
                background-color: white !important;
                box-shadow: 0 0 0 !important;
                padding: 0 10px !important;
            }
            .event-sidebar{
                border-top-left-radius: 0 !important;
                border-top-right-radius: 0 !important;
                border-top: 0 !important;
                background-color: white !important;
                box-shadow: 0 0 0 !important;
                border: 0;
                padding: 0 10px !important;
            }



            .event-main, form.event-sidebar { flex-basis: 100%; }
            form.event-sidebar { position: static ; }


        }
    }
}