:root{
  --primary:#6366F1;
  --primary-light:#EEF2FF;
  --primary-dark:#4338CA;
  --accent:#8B5CF6;
  --bg:#F8FAFC;
  --surface:#FFFFFF;
  --surface2:#F1F5F9;
  --border:#E2E8F0;
  --border-light:#F1F5F9;
  --text:#1E293B;
  --text-muted:#64748B;
  --text-light:#94A3B8;
  --success:#10B981;
  --error:#EF4444;
  --warning:#F59E0B;
  --radius:10px;
  --shadow:0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.05);
  --shadow-md:0 4px 6px -1px rgba(0,0,0,.07),0 2px 4px -1px rgba(0,0,0,.04);
  --shadow-lg:0 10px 25px -5px rgba(0,0,0,.08),0 4px 10px -3px rgba(0,0,0,.05);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Sarabun',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;display:flex;flex-direction:column;}

/* ===== SIDEBAR ===== */
.sidebar{
  position:fixed;top:0;left:0;width:230px;height:100vh;
  background:var(--surface);border-right:1px solid var(--border);
  display:flex;flex-direction:column;z-index:100;
  transition:transform .25s, width .25s;
}
/* Desktop: sidebar ซ่อนได้ด้วย class .closed */
.sidebar.closed{
  transform:translateX(-100%);
}
.sidebar-logo{padding:18px 16px;border-bottom:1px solid var(--border-light);display:flex;align-items:center;gap:10px;}
.logo-icon{
  width:36px;height:36px;border-radius:9px;flex-shrink:0;
  background:linear-gradient(135deg,var(--primary),var(--accent));
  display:flex;align-items:center;justify-content:center;font-size:16px;
  box-shadow:0 2px 8px rgba(99,102,241,.3);
}
.logo-text h2{font-size:.82rem;font-weight:700;color:var(--text);line-height:1.3;}
.logo-text p{font-size:.68rem;color:var(--text-muted);}
.sidebar-nav{flex:1;padding:12px 8px;overflow-y:auto;}
.nav-section{
  font-size:.62rem;font-weight:700;color:var(--text-light);
  letter-spacing:.08em;text-transform:uppercase;
  padding:10px 10px 4px;
}
.nav-item{
  display:flex;align-items:center;gap:9px;padding:8px 10px;
  border-radius:8px;font-size:.84rem;font-weight:500;
  color:var(--text-muted);transition:all .15s;
  text-decoration:none;margin-bottom:1px;cursor:pointer;
}
.nav-item:hover{background:var(--surface2);color:var(--text);}
.nav-item.active{background:var(--primary-light);color:var(--primary);font-weight:700;}
.nav-item .icon{width:20px;text-align:center;font-size:.95rem;}
.sidebar-user{padding:12px 14px;border-top:1px solid var(--border);}
.user-badge{display:flex;align-items:center;gap:9px;}
.user-avatar{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--primary),var(--accent));
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;color:#fff;
}
.user-info h4{font-size:.78rem;font-weight:600;color:var(--text);}
.user-info p{font-size:.68rem;color:var(--text-muted);}
.btn-logout{
  margin-top:8px;width:100%;padding:6px;
  background:transparent;border:1px solid var(--border);
  border-radius:7px;color:var(--text-muted);
  font-family:'Sarabun',sans-serif;font-size:.78rem;
  cursor:pointer;transition:all .15s;
}
.btn-logout:hover{background:#FEF2F2;border-color:#FCA5A5;color:var(--error);}

/* Cat dot in sidebar */
.cat-dot{display:inline-block;width:9px;height:9px;border-radius:50%;flex-shrink:0;}
.sidebar-close-btn{
  background:var(--surface2);border:none;width:26px;height:26px;
  border-radius:50%;color:var(--text-muted);font-size:.9rem;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;transition:all .15s;margin-left:auto;
}
.sidebar-close-btn:hover{background:#FEF2F2;color:var(--error);}

/* ===== MAIN LAYOUT ===== */
/* เมื่อ sidebar ปิด (desktop) ให้ main ขยายเต็ม */
.main{margin-left:230px;flex:1;display:flex;flex-direction:column;min-height:100vh;background:var(--bg);transition:margin-left .25s;}
.sidebar.closed ~ .main,
body.sidebar-closed .main{margin-left:0;}

/* ===== TOPBAR ===== */
.topbar{
  padding:12px 20px;display:flex;align-items:center;justify-content:space-between;
  background:var(--surface);border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:50;
  box-shadow:var(--shadow);
}
.topbar-left{display:flex;align-items:center;gap:10px;}
.btn-menu{display:block;background:none;border:none;color:var(--text-muted);font-size:1.2rem;cursor:pointer;padding:4px 8px;border-radius:6px;transition:all .15s;}
.btn-menu:hover{background:var(--surface2);color:var(--text);}
.topbar h1{font-size:1rem;font-weight:700;color:var(--text);}
.topbar-right{display:flex;align-items:center;gap:8px;}
.btn-view{
  padding:5px 12px;border-radius:6px;
  font-family:'Sarabun',sans-serif;font-size:.78rem;font-weight:600;
  cursor:pointer;transition:all .15s;
  border:1px solid var(--border);background:transparent;color:var(--text-muted);
}
.btn-view.active,.btn-view:hover{background:var(--primary);border-color:var(--primary);color:#fff;}
.btn-primary{
  padding:7px 16px;
  background:var(--primary);border:none;border-radius:8px;
  color:#fff;font-family:'Sarabun',sans-serif;font-size:.84rem;font-weight:700;
  cursor:pointer;box-shadow:0 2px 8px rgba(99,102,241,.25);transition:all .15s;
}
.btn-primary:hover{background:var(--primary-dark);box-shadow:0 4px 14px rgba(99,102,241,.35);}
.btn-outline{
  padding:7px 14px;background:transparent;
  border:1px solid var(--border);border-radius:8px;
  color:var(--text-muted);font-family:'Sarabun',sans-serif;
  font-size:.84rem;font-weight:600;cursor:pointer;transition:all .15s;
  text-decoration:none;display:inline-flex;align-items:center;gap:5px;
}
.btn-outline:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-light);}

/* ===== CALENDAR ===== */
.calendar-container{flex:1;padding:18px 20px;}
#calendar{height:calc(100vh - 110px);}

/* FullCalendar light overrides */
.fc{font-family:'Sarabun',sans-serif !important;}
.fc .fc-toolbar-title{font-size:1rem !important;font-weight:700 !important;color:var(--text) !important;}
.fc .fc-button{
  background:var(--surface) !important;border:1px solid var(--border) !important;
  color:var(--text-muted) !important;font-family:'Sarabun',sans-serif !important;
  font-size:.78rem !important;border-radius:7px !important;
  padding:5px 10px !important;transition:all .15s !important;
  box-shadow:var(--shadow) !important;
}
.fc .fc-button:hover,.fc .fc-button-active{
  background:var(--primary) !important;border-color:var(--primary) !important;color:#fff !important;
  box-shadow:0 2px 8px rgba(99,102,241,.25) !important;
}
.fc .fc-button:focus{box-shadow:0 0 0 3px rgba(99,102,241,.15) !important;}
.fc .fc-daygrid-day{background:transparent !important;}
.fc .fc-daygrid-day:hover{background:var(--primary-light) !important;}
.fc .fc-col-header-cell{
  background:var(--surface2) !important;color:var(--text-muted) !important;
  font-size:.75rem !important;font-weight:700 !important;
}
.fc .fc-daygrid-day-number{color:var(--text-muted) !important;font-size:.8rem !important;padding:5px 7px !important;}
.fc .fc-day-today .fc-daygrid-day-number{
  background:var(--primary) !important;color:#fff !important;
  border-radius:50% !important;width:24px !important;height:24px !important;
  display:inline-flex !important;align-items:center;justify-content:center;
}
.fc .fc-day-today{background:var(--primary-light) !important;}
.fc .fc-scrollgrid{border:1px solid var(--border) !important;border-radius:var(--radius) !important;overflow:hidden !important;box-shadow:var(--shadow) !important;}
.fc .fc-scrollgrid td,.fc .fc-scrollgrid th{border-color:var(--border) !important;}
.fc .fc-event{border-radius:4px !important;font-size:.73rem !important;font-weight:600 !important;padding:1px 5px !important;cursor:pointer !important;border:none !important;}
.fc .fc-list-day-cushion{background:var(--surface2) !important;color:var(--text) !important;}
.fc .fc-list-event:hover td{background:var(--primary-light) !important;cursor:pointer !important;}
.fc .fc-list-event-title{color:var(--text) !important;}
.fc .fc-popover{background:var(--surface) !important;border:1px solid var(--border) !important;border-radius:var(--radius) !important;box-shadow:var(--shadow-lg) !important;}
.fc .fc-popover-header{background:var(--surface2) !important;color:var(--text) !important;}
.fc .fc-more-popover .fc-popover-body{background:var(--surface) !important;}
.fc .fc-timegrid-slot{height:38px !important;}

/* ===== MODAL ===== */
.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.35);
  backdrop-filter:blur(3px);z-index:200;
  display:flex;align-items:center;justify-content:center;padding:16px;
  opacity:0;visibility:hidden;transition:all .2s;
}
.modal-overlay.show{opacity:1;visibility:visible;}
.modal-box{
  background:var(--surface);border:1px solid var(--border);border-radius:16px;
  width:100%;max-width:540px;max-height:90vh;overflow-y:auto;
  transform:translateY(12px) scale(.98);transition:transform .2s;
  box-shadow:var(--shadow-lg);
}
.modal-overlay.show .modal-box{transform:translateY(0) scale(1);}
.modal-header{
  padding:20px 22px 0;display:flex;
  justify-content:space-between;align-items:flex-start;
}
.modal-header h2{font-size:1.05rem;font-weight:700;color:var(--text);flex:1;padding-right:12px;}
.modal-close{
  background:var(--surface2);border:none;width:28px;height:28px;border-radius:50%;
  color:var(--text-muted);font-size:1rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:all .15s;flex-shrink:0;
}
.modal-close:hover{background:#FEF2F2;color:var(--error);}
.modal-body{padding:16px 22px 22px;}
.event-badge{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 10px;border-radius:20px;font-size:.72rem;font-weight:700;margin-bottom:14px;
}
.event-meta{display:flex;flex-direction:column;gap:7px;margin-bottom:14px;}
.meta-row{display:flex;align-items:flex-start;gap:9px;font-size:.84rem;color:var(--text-muted);}
.meta-row .meta-icon{flex-shrink:0;width:18px;text-align:center;}
.meta-row span{color:var(--text);}
.event-desc{
  background:var(--surface2);border-radius:8px;padding:12px;
  font-size:.86rem;line-height:1.7;margin-bottom:14px;color:var(--text-muted);
  border-left:3px solid var(--primary);
}
.event-img{width:100%;border-radius:9px;margin-bottom:14px;max-height:200px;object-fit:cover;}
.btn-link{
  display:inline-flex;align-items:center;gap:6px;padding:7px 14px;
  background:var(--primary-light);border:1px solid rgba(99,102,241,.3);
  border-radius:7px;color:var(--primary);font-size:.82rem;text-decoration:none;transition:all .15s;
}
.btn-link:hover{background:var(--primary);color:#fff;}
.modal-actions{display:flex;gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid var(--border);}
.btn-edit{
  flex:1;padding:8px;background:var(--primary-light);
  border:1px solid rgba(99,102,241,.3);border-radius:7px;
  color:var(--primary);font-family:'Sarabun',sans-serif;font-size:.82rem;font-weight:700;cursor:pointer;transition:all .15s;
}
.btn-edit:hover{background:var(--primary);color:#fff;}
.btn-del{
  padding:8px 14px;background:#FEF2F2;border:1px solid #FECACA;
  border-radius:7px;color:var(--error);font-family:'Sarabun',sans-serif;
  font-size:.82rem;font-weight:700;cursor:pointer;transition:all .15s;
}
.btn-del:hover{background:var(--error);color:#fff;}

/* ===== NOTIFICATION POPUP ===== */
.notify-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.25);backdrop-filter:blur(3px);
  z-index:300;display:flex;align-items:center;justify-content:center;padding:16px;
}
.notify-box{
  background:var(--surface);border:1px solid var(--border);
  border-radius:16px;width:100%;max-width:460px;overflow:hidden;
  box-shadow:var(--shadow-lg);
  animation:popIn .3s cubic-bezier(.34,1.56,.64,1);
}
@keyframes popIn{from{opacity:0;transform:scale(.85) translateY(16px);}to{opacity:1;transform:scale(1) translateY(0);}}
.notify-header{
  background:linear-gradient(135deg,var(--primary),var(--accent));
  padding:16px 18px;display:flex;align-items:center;gap:11px;
}
.notify-header .bell{font-size:1.3rem;animation:ring .5s ease .4s;}
@keyframes ring{0%,100%{transform:rotate(0);}25%{transform:rotate(-12deg);}75%{transform:rotate(12deg);}}
.notify-header h3{font-size:.95rem;font-weight:700;flex:1;color:#fff;}
.notify-header p{font-size:.72rem;color:rgba(255,255,255,.8);}
.notify-close{
  background:rgba(255,255,255,.2);border:none;width:26px;height:26px;
  border-radius:50%;color:#fff;cursor:pointer;font-size:.95rem;
  display:flex;align-items:center;justify-content:center;transition:all .15s;
}
.notify-close:hover{background:rgba(255,255,255,.35);}
.notify-list{max-height:260px;overflow-y:auto;padding:10px 12px;}
.notify-item{
  display:flex;align-items:flex-start;gap:10px;padding:9px 11px;
  border-radius:8px;margin-bottom:5px;
  border:1px solid var(--border);transition:all .15s;
}
.notify-item:hover{background:var(--primary-light);border-color:rgba(99,102,241,.2);}
.notify-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;margin-top:4px;}
.notify-item-info h4{font-size:.81rem;font-weight:600;margin-bottom:2px;color:var(--text);}
.notify-item-info p{font-size:.7rem;color:var(--text-muted);}
.notify-footer{padding:11px 14px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;}
.btn-close-notify{
  padding:7px 18px;background:var(--primary);border:none;border-radius:7px;
  color:#fff;font-family:'Sarabun',sans-serif;font-size:.83rem;font-weight:700;
  cursor:pointer;box-shadow:0 2px 8px rgba(99,102,241,.25);transition:all .15s;
}
.btn-close-notify:hover{background:var(--primary-dark);}

/* ===== FORM ELEMENTS ===== */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px;}
.form-grid .full{grid-column:1/-1;}
.form-group{display:flex;flex-direction:column;gap:5px;}
.form-group label{font-size:.77rem;font-weight:700;color:var(--text-muted);}
.form-group input,
.form-group select,
.form-group textarea{
  background:var(--surface);border:1.5px solid var(--border);
  border-radius:8px;padding:8px 11px;color:var(--text);
  font-family:'Sarabun',sans-serif;font-size:.87rem;outline:none;
  transition:border-color .15s,box-shadow .15s;width:100%;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(99,102,241,.1);}
.form-group select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748B' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;-webkit-appearance:none;appearance:none;}
.form-group textarea{resize:vertical;min-height:80px;}
.checkbox-row{display:flex;align-items:center;gap:7px;cursor:pointer;font-size:.84rem;}
.checkbox-row input[type=checkbox]{width:15px;height:15px;accent-color:var(--primary);}
.upload-area{
  border:2px dashed var(--border);border-radius:9px;padding:18px;
  text-align:center;cursor:pointer;transition:all .15s;background:var(--surface2);
}
.upload-area:hover{border-color:var(--primary);background:var(--primary-light);}
.upload-area p{font-size:.78rem;color:var(--text-muted);}
.upload-preview{max-width:100%;max-height:150px;border-radius:8px;margin-top:8px;}
.roles-grid{display:flex;flex-wrap:wrap;gap:6px;}
.role-chip{
  display:flex;align-items:center;gap:4px;padding:4px 10px;border-radius:20px;
  font-size:.73rem;cursor:pointer;border:1.5px solid var(--border);
  background:var(--surface);color:var(--text-muted);transition:all .15s;user-select:none;
}
.role-chip.selected{background:var(--primary-light);border-color:var(--primary);color:var(--primary);}
.form-modal-footer{
  display:flex;gap:9px;justify-content:flex-end;
  margin-top:18px;padding-top:14px;border-top:1px solid var(--border);
}
.btn-cancel{
  padding:8px 18px;background:transparent;border:1px solid var(--border);
  border-radius:7px;color:var(--text-muted);font-family:'Sarabun',sans-serif;
  font-size:.84rem;cursor:pointer;transition:all .15s;
}
.btn-cancel:hover{border-color:var(--text-muted);color:var(--text);}
.btn-save{
  padding:8px 22px;background:var(--primary);border:none;border-radius:7px;
  color:#fff;font-family:'Sarabun',sans-serif;font-size:.84rem;font-weight:700;
  cursor:pointer;box-shadow:0 2px 8px rgba(99,102,241,.25);transition:all .15s;
}
.btn-save:hover{background:var(--primary-dark);}

/* ===== ADMIN PAGES ===== */
.page-wrapper{max-width:1080px;margin:0 auto;padding:20px;}
.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;}
.page-header h1{font-size:1.2rem;font-weight:700;color:var(--text);}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;}
.table-wrap{overflow-x:auto;}
table{width:100%;border-collapse:collapse;}
thead tr{background:var(--surface2);}
th{padding:11px 14px;font-size:.75rem;font-weight:700;color:var(--text-muted);text-align:left;white-space:nowrap;}
td{padding:11px 14px;font-size:.84rem;border-top:1px solid var(--border-light);vertical-align:middle;color:var(--text);}
tr:hover td{background:var(--surface2);}
.form-input{
  background:var(--surface);border:1.5px solid var(--border);border-radius:8px;
  padding:8px 11px;color:var(--text);font-family:'Sarabun',sans-serif;
  font-size:.84rem;outline:none;transition:border-color .15s,box-shadow .15s;
}
.form-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(99,102,241,.1);}
.badge-role{display:inline-block;padding:2px 9px;border-radius:20px;font-size:.7rem;font-weight:700;}
.badge-admin{background:#EEF2FF;color:#4338CA;}
.badge-academic{background:#F0FDF4;color:#15803D;}
.badge-manager{background:#FFFBEB;color:#B45309;}
.badge-teacher{background:#F0F9FF;color:#0369A1;}
.badge-student{background:#FDF4FF;color:#7E22CE;}
.badge-parent{background:#FFF1F2;color:#BE123C;}
.btn-sm{
  padding:4px 10px;border-radius:6px;font-family:'Sarabun',sans-serif;
  font-size:.72rem;font-weight:700;cursor:pointer;transition:all .15s;
}
.btn-warning{background:#FFFBEB;color:#B45309;border:1px solid #FDE68A;}
.btn-warning:hover{background:#F59E0B;color:#fff;border-color:#F59E0B;}
.btn-danger{background:#FEF2F2;color:var(--error);border:1px solid #FECACA;}
.btn-danger:hover{background:var(--error);color:#fff;border-color:var(--error);}
.btn-success{background:#F0FDF4;color:#15803D;border:1px solid #BBF7D0;}
.btn-success:hover{background:#10B981;color:#fff;border-color:#10B981;}
.color-swatch{display:inline-block;width:14px;height:14px;border-radius:4px;vertical-align:middle;margin-right:5px;border:1px solid rgba(0,0,0,.08);}
.alert{padding:11px 15px;border-radius:8px;margin-bottom:14px;font-size:.86rem;font-weight:500;}
.alert-success{background:#F0FDF4;border:1px solid #BBF7D0;color:#15803D;}
.alert-error{background:#FEF2F2;border:1px solid #FECACA;color:var(--error);}

/* ===== TOAST ===== */
.toast{
  position:fixed;bottom:20px;right:20px;padding:11px 18px;
  border-radius:9px;font-size:.84rem;font-weight:600;z-index:999;
  box-shadow:var(--shadow-lg);transform:translateY(16px);
  opacity:0;transition:all .25s;
}
.toast.show{transform:translateY(0);opacity:1;}
.toast.success{background:var(--success);color:#fff;}
.toast.error{background:var(--error);color:#fff;}

/* ===== PUBLIC TOPBAR (no-login view) ===== */
.public-topbar{
  padding:10px 20px;background:var(--surface);border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  box-shadow:var(--shadow);position:sticky;top:0;z-index:50;
}
.public-brand{display:flex;align-items:center;gap:10px;}
.public-brand .logo-icon{width:32px;height:32px;border-radius:8px;font-size:14px;}
.public-brand h1{font-size:.95rem;font-weight:700;color:var(--text);}
.public-brand p{font-size:.68rem;color:var(--text-muted);}

/* ===== RESPONSIVE ===== */
@media(max-width:768px){
  .sidebar{transform:translateX(-100%);}
  .sidebar.open{transform:translateX(0);box-shadow:var(--shadow-lg);}
  .sidebar.closed{transform:translateX(-100%);}
  .main{margin-left:0 !important;}
  .form-grid{grid-template-columns:1fr;}
  #calendar{height:calc(100vh - 100px);}
  .topbar-right .btn-view{display:none;}
}
@media(max-width:480px){
  .calendar-container{padding:10px;}
  .topbar{padding:10px 12px;}
}

/* ===== FOOTER ===== */
.site-footer{
  margin-left:230px;
  background:var(--surface);
  border-top:1px solid var(--border);
  padding:14px 24px;
  box-shadow:0 -1px 4px rgba(0,0,0,.04);
}
.footer-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;
}
.footer-logo{
  font-size:.78rem;font-weight:700;color:var(--primary);
  display:flex;align-items:center;gap:6px;
}
.footer-credit p{
  font-size:.72rem;color:var(--text-muted);line-height:1.7;
}
.footer-credit strong{color:var(--text);font-weight:700;}
.footer-credit a{color:var(--primary);text-decoration:none;}
.footer-credit a:hover{text-decoration:underline;}
@media(max-width:768px){
  .site-footer{margin-left:0;}
  .footer-inner{flex-direction:column;align-items:flex-start;gap:6px;}
}

/* ===== NOTIFY EXTRAS ===== */
.notify-today{
  background:var(--primary-light);
  border-color:rgba(99,102,241,.3) !important;
}
.today-badge{
  display:inline-block;padding:1px 7px;border-radius:20px;
  background:var(--primary);color:#fff;
  font-size:.62rem;font-weight:700;margin-bottom:3px;vertical-align:middle;
}
.notify-empty{
  text-align:center;padding:28px 16px;color:var(--text-muted);
}
.notify-empty p{font-size:.84rem;}
.notify-cat{
  display:inline-block;padding:1px 7px;border-radius:20px;
  background:var(--surface2);color:var(--text-muted);
  font-size:.66rem;font-style:normal;
}

/* ===== SIDEBAR OVERLAY (mobile close) ===== */
.sidebar-overlay{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);
  z-index:99;
}
.sidebar-overlay.active{display:block;}

/* ===== MONTHLY LIST ===== */
.monthly-list-section{
  margin:0 20px 24px;
  border-radius:14px;overflow:hidden;
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  background:var(--surface);
}
.monthly-list-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;
  background:var(--surface);
  border-bottom:1px solid var(--border);
  gap:10px;
}
.monthly-nav{
  display:flex;align-items:center;gap:10px;
}
.monthly-nav h2{
  font-size:1rem;font-weight:700;color:var(--text);
  min-width:160px;text-align:center;
}
.btn-nav{
  width:32px;height:32px;border-radius:8px;
  border:1px solid var(--border);background:var(--surface);
  color:var(--text-muted);font-size:1.2rem;line-height:1;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all .15s;
}
.btn-nav:hover{background:var(--primary);border-color:var(--primary);color:#fff;}
.monthly-list-body{padding:8px 14px 14px;}

/* Date group */
.ml-date-group{margin-bottom:4px;}
.ml-date-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 6px 4px;
  border-bottom:1px solid var(--border-light);
  margin-bottom:6px;
}
.ml-date-row.ml-today{
  background:var(--primary-light);
  border-radius:8px;padding:6px 10px;
  border-bottom:none;margin-bottom:4px;
}
.ml-date-label{
  font-size:.85rem;font-weight:700;color:var(--text);
}
.ml-day-label{
  font-size:.75rem;color:var(--text-muted);
  display:flex;align-items:center;gap:5px;
}
.today-tag{
  background:var(--primary);color:#fff;
  padding:1px 7px;border-radius:20px;
  font-size:.65rem;font-weight:700;font-style:normal;
}

/* Event card */
.ml-event-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:10px;padding:10px 13px;
  margin-bottom:8px;cursor:pointer;
  transition:all .15s;
  display:flex;flex-direction:column;gap:6px;
}
.ml-event-card:hover{
  background:var(--primary-light);border-color:rgba(99,102,241,.25);
  transform:translateY(-1px);box-shadow:var(--shadow-md);
}
.ml-event-main{display:flex;align-items:flex-start;gap:10px;}
.ml-event-dot{
  width:10px;height:10px;border-radius:50%;
  flex-shrink:0;margin-top:4px;
}
.ml-event-info{flex:1;min-width:0;}
.ml-event-title{
  font-size:.87rem;font-weight:700;color:var(--text);
  margin-bottom:4px;line-height:1.4;
}
.ml-cat{
  display:inline-block;padding:1px 8px;border-radius:20px;
  background:var(--primary-light);color:var(--primary);
  font-size:.68rem;font-weight:700;margin-right:6px;
}
.ml-time{
  font-size:.72rem;color:var(--text-muted);
}
.ml-desc{
  font-size:.77rem;color:var(--text-muted);line-height:1.6;
  margin-top:5px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.ml-thumb{
  width:70px;height:60px;object-fit:cover;border-radius:8px;
  flex-shrink:0;border:1px solid var(--border);cursor:zoom-in;
  transition:transform .15s;
}
.ml-thumb:hover{transform:scale(1.05);}
.ml-link{
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 12px;border-radius:7px;
  background:var(--primary-light);border:1px solid rgba(99,102,241,.25);
  color:var(--primary);font-size:.75rem;text-decoration:none;
  transition:all .15s;align-self:flex-start;
}
.ml-link:hover{background:var(--primary);color:#fff;}
.ml-loading,.ml-empty{
  text-align:center;padding:32px 20px;color:var(--text-muted);font-size:.84rem;
}
.ml-empty{font-size:2rem;}
.ml-empty p{font-size:.84rem;margin-top:6px;}

@media(max-width:768px){
  .monthly-list-section{margin:0 10px 16px;}
  .monthly-list-header{padding:10px 12px;}
  .monthly-nav h2{min-width:120px;font-size:.88rem;}
  .ml-thumb{width:55px;height:50px;}
}