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

.calendar-panel{ margin-top:36px; }

.calendar-shell{
  display:grid;
  grid-template-columns: 1.3fr 1fr;
  gap:20px;
}
@media (max-width:900px){ .calendar-shell{ grid-template-columns:1fr; } }

.calendar-box, .calendar-list-box{
  background:var(--bg-1); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:18px;
  box-shadow:var(--shadow-1);
}

.calendar-nav{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:14px;
}
.calendar-nav h3{ font-size:15px; font-weight:700; }
.calendar-nav-btns{ display:flex; gap:6px; }
.calendar-nav-btns button{
  width:32px; height:32px; border-radius:8px;
  border:1px solid var(--border); background:var(--bg-2);
  color:var(--text-2); cursor:pointer; transition:all var(--transition-fast);
}
.calendar-nav-btns button:hover{ color:var(--accent-gold); border-color:var(--accent-gold); }
.calendar-today-btn{ font-size:11px !important; width:auto !important; padding:0 10px; }

.calendar-grid{
  display:grid; grid-template-columns:repeat(7, 1fr); gap:4px;
}
.cal-weekday{
  text-align:center; font-size:10.5px; color:var(--text-3);
  font-weight:600; padding-bottom:6px; text-transform:uppercase;
}
.cal-day{
  aspect-ratio:1; border-radius:8px; border:1px solid transparent;
  background:var(--bg-2); cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; transition:all var(--transition-fast);
  font-family:var(--font-mono); color:var(--text-1);
}
.cal-day:hover{ border-color:var(--accent-gold); }
.cal-day.is-today{ background:rgba(232,176,84,.14); color:var(--accent-gold); font-weight:700; }
.cal-day.is-selected{ border-color:var(--accent-gold); box-shadow:0 0 0 1px var(--accent-gold); }
.cal-day-num{ font-size:12.5px; }
.cal-dots{ display:flex; gap:2px; height:6px; }
.dot{ width:5px; height:5px; border-radius:50%; }
.dot-done{ background:var(--accent-teal); }
.dot-missed{ background:var(--accent-rose); }
.dot-upcoming{ background:var(--accent-gold); }

.calendar-list-box h4{ font-size:13.5px; margin-bottom:12px; color:var(--text-1); }
.cal-task-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; max-height:340px; overflow-y:auto; }
.cal-task{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  background:var(--bg-2); border:1px solid var(--border);
  padding:9px 12px; border-radius:8px; font-size:12.5px;
}
.cal-task-color{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.cal-task-title{ font-weight:600; color:var(--text-1); }
.cal-task-time{ font-family:var(--font-mono); font-size:11px; color:var(--text-3); margin-left:auto; }
.cal-task-badge{
  font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.4px;
  padding:2px 7px; border-radius:999px;
}
.cal-task-badge.repeating{ background:rgba(125,107,174,.15); color:var(--accent-violet); display:flex; align-items:center; gap:4px; }
.cal-task-badge.status{ background:var(--bg-3); color:var(--text-2); }
.cal-task-completed .cal-task-badge.status{ background:rgba(79,209,197,.14); color:var(--accent-teal); }
.cal-task-missed .cal-task-badge.status{ background:rgba(232,99,111,.14); color:var(--accent-rose); }
.cal-task-upcoming .cal-task-badge.status, .cal-task-pending .cal-task-badge.status{ background:rgba(232,176,84,.14); color:var(--accent-gold); }

.cal-empty{ text-align:center; color:var(--text-3); padding:24px 0; font-size:12.5px; list-style:none; }