/* =====================================================
   calendar.css
   Styles for the monthly calendar grid on the
   Calendar page and the toast + modal overlays.
   ===================================================== */

/* ════════════════════════════════════════
   CALENDAR GRID
════════════════════════════════════════ */
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

/* Day-of-week header labels */
.cal-dn {
  font-size: 11px;
  font-weight: 600;
  color: var(--gray-400);
  text-align: center;
  padding: 6px 0;
  letter-spacing: 0.05em;
}

/* Individual day cell */
.cal-cell {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s;
  position: relative;
  color: var(--gray-700);
}

.cal-cell:hover         { background: var(--gray-100); }
.cal-cell.empty         { cursor: default; }
.cal-cell.other-month   { color: var(--gray-300); }

/* Today highlighted in blue */
.cal-cell.today {
  background: var(--blue);
  color: #fff;
  font-weight: 700;
}

/* Small dot = has appointment *(Removed for new badge style)*/
/* .cal-cell.has-event::after {
  content: '';
  position: absolute;
  bottom: 4px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--blue);
} */

.cal-date-num {
  font-weight: 600;
  margin-bottom: 4px;
  margin-top: -6px;
}

.cal-badge {
  font-size: 10px;
  font-weight: 700;
  color: var(--blue);
  background: var(--blue-light);
  padding: 2px 6px;
  border-radius: 12px;
  pointer-events: none;
}

.cal-cell.today .cal-badge {
  color: #fff;
  background: rgba(255, 255, 255, 0.2);
}

.cal-cell.today::after { background: #fff; }

/* Month title + prev/next nav row */
.cal-nav-btn {
  background: var(--gray-100);
  border: none;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13px;
  color: var(--gray-600);
  transition: all 0.15s;
}

.cal-nav-btn:hover { background: var(--gray-200); }


/* ════════════════════════════════════════
   TOAST NOTIFICATION
════════════════════════════════════════ */
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 999;
  background: var(--gray-900);
  color: #fff;
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  box-shadow: var(--shadow-lg);
  transform: translateY(80px);
  opacity: 0;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.toast.show {
  transform: translateY(0);
  opacity: 1;
}


/* ════════════════════════════════════════
   MODAL
════════════════════════════════════════ */
.modal-bg {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
}

.modal-bg.open { display: flex; }

.modal-box {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 32px;
  width: 100%;
  max-width: 460px;
}

.modal-title {
  font-size: 18px;
  font-weight: 700;
  font-family: var(--font-d);
  margin-bottom: 6px;
}

.modal-sub {
  font-size: 13px;
  color: var(--gray-500);
  margin-bottom: 24px;
}

/* ── Mobile responsive ── */
@media (max-width: 768px) {
  .cal-grid {
    gap: 2px;
  }

  .cal-cell {
    font-size: 12px;
    min-height: 40px;
  }

  .cal-dn {
    font-size: 10px;
    padding: 4px 0;
  }
}