/* ==========================
   GLOBAL
========================== */

body {
    margin: 0;
    font-family: Inter, sans-serif;
    background: #F6F8FC;
    color: #1E293B;
}

.container {
    width: 95%;
    margin: 32px auto;
}

.hero{

    background:#FFFFFF;

    border:1px solid #E7ECF5;

    border-radius:20px;

    padding:28px;

    margin-bottom:28px;

    box-shadow:0 2px 10px rgba(15,23,42,.05);

}

.hero-top{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    margin-bottom:24px;

}

.hero h1{

    margin:0;

    font-size:34px;

    font-weight:700;

}

.hero p{

    margin-top:8px;

    color:#64748B;

    font-size:15px;

}

.hero-year{

    text-align:right;

}

.hero-year label{

    display:block;

    margin-bottom:8px;

    font-size:13px;

    color:#64748B;

}

.hero-year select{

    padding:10px 14px;

    border:1px solid #D6DCE8;

    border-radius:10px;

    background:white;

    font-size:14px;

}

.hero-summary{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:18px;

    margin-bottom:24px;

}

.summary-card{

    background:#F8FAFC;

    border-radius:14px;

    padding:18px;

}

.summary-card small{

    color:#64748B;

    display:block;

}

.summary-card strong{

    display:block;

    margin-top:8px;

    font-size:30px;

    color:#1E3A8A;

}

.hero-toolbar{

    display:flex;

    gap:12px;

    flex-wrap:wrap;

}

.btn{

    padding:11px 18px;

    border-radius:10px;

    border:1px solid #D9E2EC;

    background:white;

    cursor:pointer;

    transition:.2s;

}

.btn:hover{

    background:#F3F6FB;

}

.btn-primary{

    background:#2563EB;

    color:white;

    border:none;

}

.btn-primary:hover{

    background:#1D4ED8;

}

/* ==========================
   GRID
========================== */

#calendarGrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

@media (max-width:1200px){

    #calendarGrid{

        grid-template-columns:repeat(3,1fr);

    }

}

@media (max-width:900px){

    #calendarGrid{

        grid-template-columns:repeat(2,1fr);

    }

}

@media (max-width:600px){

    #calendarGrid{

        grid-template-columns:1fr;

    }

    .container{

        padding:16px;

    }

}

/* ==========================
   MONTH CARD
========================== */

.month-card {
    background: #fff;
    border: 1px solid #E7ECF5;
    border-radius: 18px;
    overflow: hidden;
    transition: .25s;
    box-shadow: 0 2px 8px rgba(15,23,42,.04);
}

.month-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(15,23,42,.08);
}

/* ==========================
   HEADER
========================== */

.month-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 16px 18px;

    background: #F8FAFD;
    border-bottom: 1px solid #EDF2F7;
}

.month-title h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
}

.month-title small {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    color: #94A3B8;
}

.month-summary {
    text-align: right;
}

.month-summary strong {
    display: block;
    font-size: 22px;
    color: #2563EB;
}

.month-summary span {
    font-size: 12px;
    color: #64748B;
}

/* ==========================
   TABLE
========================== */

.month-card table {
    width: 100%;
    border-collapse: collapse;
}

.month-card th {
    height: 34px;
    font-size: 12px;
    font-weight: 600;
    color: #94A3B8;
    background: #FAFBFD;
}

.month-card td {
    width: 14.28%;
    height: 40px;
    position: relative;
    vertical-align: top;
    text-align: left;
}

/* ==========================
   DAY CELL
========================== */

.day {
    cursor: pointer;
    transition: .2s;
    position:relative;

    height:58px;

    text-align:center;

    vertical-align:middle;

    padding:0;
}

/*.day:hover {
    background: #EEF4FF;
}*/

.day-number{

    width:34px;

    height:34px;

    margin:auto;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    font-size:15px;

    font-weight:600;

    transition:.2s;

}

.day:hover .day-number {
    background: #F5F5F5;
}

/* ==========================
   WEEKEND
========================== */

.saturday-header,
.sunday-header{

    color:#E8597F !important;

}

.saturday .day-number,
.sunday .day-number {
    color: #E8597F;
    font-weight: 700;
}

.national-holiday .day-number{

    color:#E8597F;
    font-weight:700;

    //background:#FEE2E2;

}

.highlight-date .day-number{
    background:#E3ECFC;
}

/* ==========================
   EVENT DOT
========================== */

.event-container{

    position:absolute;

    left:50%;

    bottom:6px;

    transform:translateX(-50%);

    display:flex;

    gap:3px;

}

.event-dot{

    width:6px;

    height:6px;

    border-radius:50%;

}

.more-dot{
    font-size:10px;
    font-weight:600;
    color:#64748B;
    line-height:6px;
}

.event-dot.school {
    background: #22C55E;
}

.event-dot.exam {
    background: #8B5CF6;
}

.event-dot.holiday {
    background: #F97316;
}

.event-dot.national {
    background: #EF4444;
}

/* ==========================
   TOOLTIP
========================== */

.tooltip {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;

    transform: translateX(-50%);

    min-width: 180px;

    padding: 10px 12px;

    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 10px;

    box-shadow: 0 10px 30px rgba(0,0,0,.12);

    opacity: 0;
    visibility: hidden;

    transition: .2s;

    z-index: 999;
}

.day:hover .tooltip {
    opacity: 1;
    visibility: visible;
}

.has-event{
    cursor:pointer;
}

.day:not(.has-event){
    cursor:default;
}

.has-event:hover .tooltip{

    opacity:1;
    visibility:visible;

}

/* ==========================
   FOOTER
========================== */

.month-footer{

    padding:16px;

    border-top:1px solid #EEF2F7;

    background:#FCFDFE;

}

.footer-title{

    font-size:13px;

    font-weight:700;

    margin-bottom:12px;

    color:#334155;

}

.footer-item{

    display:flex;

    align-items:center;

    gap:8px;

    margin-bottom:8px;

    font-size:12px;

}

.footer-dot{

    width:6px;

    height:6px;

    border-radius:50%;

    flex-shrink:0;

}

.footer-dot.school{

    background:#22C55E;

}

.footer-dot.exam{

    background:#8B5CF6;

}

.footer-dot.national{

    background:#EF4444;

}

.footer-dot.holiday{

    background:#F97316;

}

.footer-dot.student{

    background:#3B82F6;

}

.footer-dot.project{

    background:#14B8A6;

}

.footer-dot.meeting{

    background:#6366F1;

}

.footer-date{

    width:40px;

    font-weight:700;

    color:#64748B;

}

.footer-name{

    overflow:hidden;

    //text-overflow:ellipsis;

    //white-space:nowrap;

    flex:1;

}

.footer-more{

    margin-top:8px;

    font-size:12px;

    color:#2563EB;

    font-weight:600;

}

.footer-empty{

    font-size:12px;

    color:#94A3B8;

    font-style:italic;

}