/* ---------- Basic layout & reset ------------------------------------- */
* { box-sizing:border-box; margin:0; padding:0; }
html, body{ height:100%; font-family:sans-serif; background:#f4f4f4;}
header{
  background:#333;
  color:white;
  padding:10px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
#main-container{
  display:flex;
  height:calc(100vh - 60px); /* header is ~60px */
}

/* ---------- Calendar --------------------------------------------------- */
#calendar{
  flex:1;
  padding:20px;
  background:white;
  overflow:auto;
}

.year-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
.month{
  border:1px solid #ccc;
  background:#fff;
  box-shadow:0 2px 4px rgba(0,0,0,.05);
  padding:10px;
}
.month h3{ margin-top:0; cursor:pointer; }
.day-grid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:1px;
}
.weekday{
  background:#eaeaea;
  font-weight:bold;
  text-align:center;
  padding:5px;
}
.day{
  padding:8px;
  border-bottom:1px solid #ddd;
  border-right:1px solid #ddd;
  cursor:pointer;
  position:relative;
}
.day:hover{background:#f0f8ff;}
.has-event{background:#fff3cd;} /* light yellow highlight */
.has‑event::after{
  content:"•";
  color:#ffc107;          /* amber dot */
  font-size:1.2em;
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
}
.empty{visibility:hidden;}

.back-btn{
  margin-bottom:10px;
}

/* ---------- Side panel ------------------------------------------------- */
aside#side-panel{
  width:250px;
  background:#fafafa;
  border-left:1px solid #ddd;
  overflow:auto;
  transition:width .3s, opacity .3s;
}
aside.hidden{display:none;}
#upcoming-events-list{
  list-style:none;
  padding-left:0;
}
#upcoming-events-list li{
  padding:4px 0;
  border-bottom:1px solid #ddd;
}

/* ---------- Button styling -------------------------------------------- */
button{
  cursor:pointer;
  background:#007bff;
  color:white;
  border:none;
  padding:6px 12px;
  border-radius:3px;
}
button:hover{background:#0056b3;}

/* ---------- Modal ----------------------------------------------------- */
.modal {
  position:fixed;
  top:0; left:0;
  width:100%; height:100%;
  background:rgba(0,0,0,.5);
  display:flex;
  justify-content:center;
  align-items:center;
}
.modal.hidden{display:none;}
.modal-content{
  background:white;
  padding:20px;
  border-radius:4px;
  width:90%;
  max-width:400px;
  box-shadow:0 2px 8px rgba(0,0,0,.3);
}
.modal-content h3{margin-top:0;}
.modal-content form{
  display:flex;
  flex-direction:column;
}
.modal-content input[type="text"]{
  padding:6px; margin-bottom:10px; font-size:1em;
}
#cancel-add-event{
  background:#aaa;color:white;margin-left:5px;
}