/**
 * GetifyHR Events Calendar
 * Frontend Styles
 */

/* ======================================
   Year Calendar
====================================== */

.gec-year-calendar{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
    margin:30px 0;
}

/* ======================================
   Month
====================================== */

.gec-month-calendar{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 2px 8px rgba(0,0,0,.05);
}

.gec-month-title{
    padding:15px;
    font-size:13px;
    font-weight:600;
    text-align:center;
    background:#2271b1;
    color:#fff;
}

.gec-month-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:15px;
    background:#2271b1;
    color:#fff;
}

.gec-month-header .gec-month-title{
    padding:0;
    background:transparent;
    flex:1;
    text-align:left;
}

.gec-add-event-btn{
    display:inline-block;
    padding:2px 4px;
    background:#fff;
    color:#2271b1;
    border-radius:6px;
    font-weight:600;
    font-size:10px;
    text-decoration:none;
    cursor:pointer;
    transition:.2s ease;
}

.gec-add-event-btn:hover{
    background:#f3f4f6;
}

/* ======================================
   Week Days
====================================== */

.gec-weekdays{
    display:grid;
    grid-template-columns:repeat(7,1fr);
    text-align:center;
    font-weight:600;
    padding:10px;
    background:#f8fafc;
    border-bottom:1px solid #e5e7eb;
}

.gec-weekdays span{
    padding:6px;
    font-size:13px;
}

/* ======================================
   Days
====================================== */

.gec-days{
    display:grid;
    grid-template-columns:repeat(7,1fr);
    gap:1px;
    padding:0;
}

.gec-day,
.gec-empty-day{
    aspect-ratio:1;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:6px;
    font-size:14px;
}

.gec-day{
    cursor:pointer;
    transition:.2s ease;
}

.gec-day:hover{
    background:#f3f4f6;
}

.gec-empty-day{
    visibility:hidden;
}

/* ======================================
   Event Day
====================================== */

.gec-has-event{
    background:#2271b1;
    color:#fff;
    font-weight:600;
}

.gec-has-event:hover{
    background:#135e96;
}

/* ======================================
   Upcoming Events
====================================== */

.gec-upcoming-events{
    margin:30px 0;
}

.gec-event-item{
    display:flex;
    gap:20px;
    padding:15px;
    margin-bottom:15px;
    border:1px solid #e5e7eb;
    border-radius:10px;
    background:#fff;
}

.gec-event-date{
    min-width:140px;
    font-weight:600;
}

.gec-event-content h4{
    margin:0 0 10px;
}

.gec-event-type{
    font-size:13px;
    color:#2271b1;
    margin-bottom:10px;
}

/* ======================================
   Event Modal
====================================== */

.gec-modal{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.6);
    z-index:99999;
    display:none;
    align-items:center;
    justify-content:center;
    padding:20px;
}

.gec-modal.gec-active{
    display:flex;
}

.gec-modal-content{
    background:#fff;
    width:100%;
    max-width:600px;
    border-radius:12px;
    padding:25px;
    position:relative;
}

.gec-modal-close{
    position:absolute;
    top:10px;
    right:15px;
    cursor:pointer;
    font-size:22px;
    line-height:1;
}

.gec-modal-title{
    margin-bottom:15px;
    font-size:20px;
    font-weight:600;
    color:#333;
}

.gec-modal-events{
    max-height:400px;
    overflow:auto;
}

.gec-popup-event{
    padding:15px;
    margin-bottom:15px;
    background:#f9fafb;
    border-radius:6px;
    border-left:4px solid #2271b1;
}

.gec-popup-event h4{
    margin:0 0 10px;
    color:#333;
}

.gec-popup-event div{
    margin-bottom:8px;
    font-size:14px;
    color:#555;
}

.gec-popup-event p{
    margin:10px 0 0;
    font-size:14px;
    color:#666;
}

/* ======================================
   Event Submission Form
====================================== */

.gec-submission-form-wrapper{
    margin:40px 0;
}

.gec-success-message{
    padding:15px;
    background:#d4edda;
    border:1px solid #c3e6cb;
    border-radius:6px;
    color:#155724;
    margin-bottom:20px;
}

.gec-submission-form{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:12px;
    padding:25px;
    max-width:600px;
}

.gec-submission-form p{
    margin-bottom:20px;
}

.gec-submission-form label{
    display:block;
    font-weight:600;
    margin-bottom:8px;
    color:#333;
}

.gec-submission-form input[type="text"],
.gec-submission-form input[type="email"],
.gec-submission-form input[type="date"],
.gec-submission-form select,
.gec-submission-form textarea{
    width:100%;
    padding:10px;
    border:1px solid #d1d5db;
    border-radius:6px;
    font-size:14px;
    font-family:inherit;
}

.gec-submission-form textarea{
    resize:vertical;
    min-height:120px;
}

.gec-submission-form button{
    background:#2271b1;
    color:#fff;
    padding:10px 25px;
    border:none;
    border-radius:6px;
    cursor:pointer;
    font-weight:600;
    font-size:14px;
    transition:.2s ease;
}

.gec-submission-form button:hover{
    background:#135e96;
}

/* ======================================
   Responsive
====================================== */

@media (max-width:1200px){

    .gec-year-calendar{
        grid-template-columns:repeat(3,1fr);
    }

}

@media (max-width:991px){

    .gec-year-calendar{
        grid-template-columns:repeat(2,1fr);
    }

}

@media (max-width:767px){

    .gec-year-calendar{
        grid-template-columns:1fr;
    }

    .gec-month-header{
        flex-direction:column;
        gap:10px;
    }

    .gec-month-header .gec-month-title{
        text-align:center;
    }

    .gec-add-event-btn{
        width:100%;
        text-align:center;
    }

    .gec-event-item{
        flex-direction:column;
        gap:10px;
    }

    .gec-event-date{
        min-width:100%;
    }

}