/* =============================================
   pages/calendar.css — calendar page
   ============================================= */

/* Calendar fills the available vertical space — no scrolling */
#pageCalendar {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 80px); /* 100vh minus .main top+bottom padding */
  box-sizing: border-box;
}

#pageCalendar .page-header {
  flex-shrink: 0;
}

.cal-grid-wrap {
  flex: 1 1 0;
  min-height: 0;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column;
}

.cal-day-headers {
  display: grid; grid-template-columns: repeat(7, 1fr);
  background: var(--bg); border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.cal-day-headers span {
  padding: 8px 0; text-align: center; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-xmuted);
}

.cal-grid {
  flex: 1 1 0;
  min-height: 0;
  display: grid; grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: 1fr;
}

.cal-cell {
  padding: 8px;
  border-right: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  cursor: pointer; transition: background 0.1s;
  overflow: hidden; box-sizing: border-box;
  min-height: 0;
}
.cal-cell:nth-child(7n) { border-right: none; }
.cal-cell:hover { background: var(--bg); }
.cal-cell-muted { background: #fafafa; }
.cal-cell-muted .cal-day-num { color: var(--text-xmuted); }

.cal-cell-today .cal-day-num {
  background: var(--accent); color: #fff; border-radius: 50%;
  width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
}

.cal-day-num {
  font-size: 12.5px; font-weight: 500; color: var(--text-muted); margin-bottom: 4px;
  width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
}

.cal-task-chip {
  font-size: 11.5px; font-weight: 500; padding: 2px 7px; border-radius: 4px;
  margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: pointer; transition: opacity 0.1s;
}
.cal-task-chip:hover { opacity: 0.75; }

.cal-task-chip.status-todo       { background: #f1f5f9; color: #475569; }
.cal-task-chip.status-planned    { background: #ede9fe; color: #6d28d9; }
.cal-task-chip.status-inprogress { background: #e0e7ff; color: #4338ca; }
.cal-task-chip.status-updatereq  { background: #fef3c7; color: #b45309; }
.cal-task-chip.status-onhold     { background: #fff7ed; color: #c2410c; }
.cal-task-chip.status-complete   { background: #dcfce7; color: #15803d; }
.cal-task-chip.status-canceled   { background: #f3f4f6; color: #9ca3af; }

.cal-task-chip.overdue { border-left: 3px solid #ef4444; padding-left: 5px; opacity: 0.85; }
.cal-task-chip.recur::after { content: '↻'; font-size: 9px; margin-left: 4px; opacity: 0.6; }

.cal-task-more { font-size: 11px; color: var(--text-xmuted); padding: 1px 4px; cursor: pointer; }
.cal-task-more:hover { color: var(--accent); }

.cal-nav {
  display: flex; align-items: center; gap: 4px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px; padding: 3px 6px;
}
[data-theme="dark"] .cal-nav { border-color: #2e2e3e; }

.cal-nav-btn {
  background: none; border: none; cursor: pointer;
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); transition: background 0.1s;
}
.cal-nav-btn:hover { background: var(--bg); }
.cal-nav-btn svg { width: 14px; height: 14px; }

.cal-today-btn {
  background: none; border: none; cursor: pointer;
  font-size: 12.5px; font-weight: 500; font-family: 'Poppins', sans-serif;
  color: var(--text-muted); padding: 4px 10px; border-radius: 999px;
  transition: background 0.1s, color 0.1s;
}
.cal-today-btn:hover { background: var(--bg); color: var(--text); }

/* Dark mode */
[data-theme="dark"] .cal-day-headers { background: #16161f; }
[data-theme="dark"] .cal-grid-wrap { border-color: #2e2e3e; }
[data-theme="dark"] .cal-cell { border-color: #252535; }
[data-theme="dark"] .cal-cell:hover { background: #1e1e28; }
[data-theme="dark"] .cal-cell-muted { background: #141420; }
[data-theme="dark"] .cal-cell-today .cal-day-num { background: var(--accent); }

[data-theme="dark"] .cal-task-chip.status-todo       { background: #1e2433; color: #8ea0bc; }
[data-theme="dark"] .cal-task-chip.status-planned    { background: #1e1e3a; color: #a78bfa; }
[data-theme="dark"] .cal-task-chip.status-inprogress { background: #1e1e3a; color: #818cf8; }
[data-theme="dark"] .cal-task-chip.status-updatereq  { background: #2a1f0e; color: #fbbf24; }
[data-theme="dark"] .cal-task-chip.status-onhold     { background: #2a1608; color: #fb923c; }
[data-theme="dark"] .cal-task-chip.status-complete   { background: #0d2318; color: #4ade80; }
[data-theme="dark"] .cal-task-chip.status-canceled   { background: #1e1e26; color: #6b7280; }

@media (max-width: 768px) {
  .cal-cell { padding: 5px; }
  .cal-task-chip { font-size: 10px; padding: 1px 5px; }
  .cal-day-num { font-size: 11px; }
}