.calendar-hero{
background:linear-gradient(125deg,var(--navy),var(--navy2));
color:#fff;
border-radius:20px;
padding:24px 26px;
margin-bottom:18px;
display:flex;
justify-content:space-between;
align-items:center;
gap:16px;
box-shadow:var(--shadow)
}
.calendar-hero span{
font-size:10px;
letter-spacing:1.4px;
color:#f0cf8b;
font-weight:900
}
.calendar-hero h2{margin:6px 0 4px;font-size:27px}
.calendar-hero p{margin:0;color:#dce6ef;font-size:13px}

.calendar-nav{
display:flex;
align-items:center;
gap:8px
}
.calendar-nav a{
width:38px;
height:38px;
display:grid;
place-items:center;
border-radius:10px;
background:rgba(255,255,255,.12);
color:#fff;
font-weight:900
}
.calendar-nav .calendar-today{
width:auto;
padding:0 13px;
font-size:12px
}

.calendar-layout{
display:grid;
grid-template-columns:minmax(0,1fr) 320px;
gap:16px
}
.calendar-box{
background:#fff;
border:1px solid var(--line);
border-radius:17px;
box-shadow:var(--shadow);
overflow:hidden
}
.calendar-weekdays{
display:grid;
grid-template-columns:repeat(7,1fr);
border-bottom:1px solid var(--line);
background:#fafbfd
}
.calendar-weekdays span{
padding:11px 6px;
text-align:center;
font-size:10px;
font-weight:900;
color:var(--muted)
}
.calendar-grid{
display:grid;
grid-template-columns:repeat(7,1fr)
}
.calendar-day{
position:relative;
min-height:105px;
padding:10px;
border-right:1px solid var(--line);
border-bottom:1px solid var(--line);
color:var(--text);
background:#fff
}
.calendar-day:nth-child(7n){border-right:0}
.calendar-day:hover{background:#f9fbfd}
.calendar-day.empty-day{background:#fafbfd}
.calendar-day-number{
width:28px;
height:28px;
display:grid;
place-items:center;
border-radius:50%;
font-size:12px;
font-weight:900
}
.calendar-day.today .calendar-day-number{
background:var(--navy);
color:#fff
}
.calendar-day.selected{
box-shadow:inset 0 0 0 2px var(--navy)
}
.calendar-day.has-events{
background:#fcfdff
}
.calendar-event-count{
font-size:10px;
font-weight:800;
color:var(--muted);
margin-top:8px
}
.calendar-event-dots{
display:flex;
gap:4px;
margin-top:8px
}
.calendar-event-dots i{
width:7px;
height:7px;
border-radius:50%
}

.calendar-selected-panel{
background:#fff;
border:1px solid var(--line);
border-radius:17px;
box-shadow:var(--shadow);
overflow:hidden;
align-self:start
}
.calendar-selected-head{
padding:16px 18px;
border-bottom:1px solid var(--line)
}
.calendar-selected-head span{
font-size:10px;
font-weight:900;
letter-spacing:1px;
color:var(--muted)
}
.calendar-selected-head h3{margin:4px 0 0}
.calendar-selected-empty{
padding:28px 18px;
color:var(--muted);
font-size:13px
}
.calendar-selected-list{
display:grid
}
.calendar-selected-event{
display:grid;
grid-template-columns:52px 1fr;
gap:10px;
padding:14px 16px;
border-bottom:1px solid var(--line)
}
.calendar-selected-event:last-child{border-bottom:0}
.calendar-selected-time{
font-weight:900;
color:var(--navy)
}
.calendar-selected-event strong,
.calendar-selected-event small,
.calendar-selected-event a{
display:block
}
.calendar-selected-event strong{
margin:4px 0 5px;
font-size:13px
}
.calendar-selected-event small{
font-size:11px;
color:var(--muted);
margin-top:3px
}
.calendar-selected-event a{
font-size:11px;
font-weight:800;
color:var(--navy);
margin-top:7px
}
.calendar-selected-category{
display:flex;
align-items:center;
gap:5px;
font-size:10px;
font-weight:800;
color:var(--muted)
}
.calendar-selected-category i{
width:7px;
height:7px;
border-radius:50%
}

@media(max-width:980px){
.calendar-layout{
grid-template-columns:1fr
}
.calendar-selected-panel{
order:-1
}
}

@media(max-width:760px){
.calendar-hero{
display:block
}
.calendar-nav{
margin-top:14px
}
.calendar-nav a{
flex:1
}
.calendar-grid{
min-width:700px
}
.calendar-weekdays{
min-width:700px
}
.calendar-box{
overflow:auto
}
.calendar-day{
min-height:88px
}
}

.calendar-selected-head{
display:flex;
justify-content:space-between;
align-items:center;
gap:10px
}
.calendar-selected-head>a{
font-size:11px;
font-weight:800;
color:var(--navy);
white-space:nowrap
}
.calendar-day.has-events:hover{
box-shadow:inset 0 0 0 1px rgba(23,58,94,.16)
}
@media(max-width:760px){
.calendar-selected-head{
align-items:flex-start
}
}