body { font-family: 'Inter', sans-serif; }
    
    /* Custom scrollbar styling */
    ::-webkit-scrollbar { width: 5px; height: 5px; }
    ::-webkit-scrollbar-track { background: #f1f5f9; }
    ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
    ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

    /* ===== Dark mode overrides ===== */
    .dark body { background-color: #0F172A; color: #F1F5F9; }
    .dark .bg-\[\#F8FAFC\] { background-color: #0F172A !important; }
    .dark .bg-white { background-color: #1E293B !important; }
    .dark .border-slate-200\/80, .dark .border-slate-200 { border-color: #334155 !important; }
    .dark .text-slate-800 { color: #F8FAFC !important; }
    .dark .text-slate-700 { color: #CBD5E1 !important; }
    .dark .text-slate-500 { color: #CBD5E1 !important; }
    /* #64748B on the #1E293B card background was 2.85:1, well under the
       4.5:1 needed for small text. These keep the slate-400 dimmer than
       slate-500 ordering while both passing. */
    .dark .text-slate-400 { color: #B6C2D4 !important; }
    .dark .bg-slate-50 { background-color: #0F172A !important; }
    .dark .bg-slate-100 { background-color: #334155 !important; }

    /* Calendar badge styling */
    .cal-badge {
      display: flex;
      flex-direction: column;
      gap: 2px;
      padding: 4px 6px;
      border-radius: 6px;
      /* Was 11px, below the 12px legibility floor. */
      font-size: 12px;
      text-align: left;
      border-left-width: 3px;
      transition: transform 0.15s ease, box-shadow 0.15s ease;
      cursor: pointer;
      width: 100%;
      /* Grid and flex children default to min-width:auto and refuse to shrink
         below their content, which is what stopped the 7-column calendar from
         compressing on narrow viewports. */
      min-width: 0;
      overflow: hidden;
    }
    .cal-badge:hover { transform: translateY(-1px); box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.05); }
    
    .cal-badge--work { background-color: #eff6ff; border-color: #3b82f6; color: #1e3a8a; }
    .cal-badge--learn { background-color: #f0fdf4; border-color: #22c55e; color: #14532d; }
    .cal-badge--sport { background-color: #fff7ed; border-color: #f97316; color: #7c2d12; }
    .cal-badge--personal { background-color: #fdf2f8; border-color: #ec4899; color: #831843; }
    .cal-badge--high { border-color: #ef4444; }
    .cal-badge--done { opacity: 0.5; text-decoration: line-through; }

    /* Day Cell Hover Effect & Plus Button */
    .day-cell {
      position: relative;
      transition: background-color 0.15s ease;
      cursor: pointer;
      min-height: 90px;
      min-width: 0;
      overflow: hidden;
    }
    .day-cell:hover {
      background-color: rgba(239, 246, 255, 0.6);
    }
    .day-cell__plus {
      width: 40px;
      height: 40px;
      border-radius: 8px;
      opacity: 0;
      transition: opacity 0.15s ease, transform 0.15s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      line-height: 1;
    }
    .day-cell:hover .day-cell__plus {
      opacity: 1;
      transform: scale(1.05);
    }

    /* There is no hover on touch devices, so a hover-only affordance is never
       revealed. Keep the plus button visible where the primary pointer is
       coarse. */
    @media (hover: none), (pointer: coarse) {
      .day-cell__plus { opacity: 1; }
    }

    /* Calendar grid responsive adjustments */
    @media (max-width: 767px) {
      .cal-badge { font-size: 12px; padding: 3px 5px; }
      .day-cell { min-height: 70px; }
      #calendarHeader > div { padding: 4px 2px; }
      /* Was 9px. */
      #calendarHeader > div span { font-size: 11px; }
      .day-cell__plus {
        opacity: 1;
        width: 40px;
        height: 40px;
      }
    }

    .calendar-viewport {
      width: 100%;
      overflow-x: auto;
      overscroll-behavior-x: contain;
      -webkit-overflow-scrolling: touch;
    }

    .calendar-viewport[data-view="week"] #calendarHeader,
    .calendar-viewport[data-view="week"] #calendar {
      min-width: 840px;
    }

    .calendar-viewport[data-view="month"] #calendarHeader,
    .calendar-viewport[data-view="month"] #calendar {
      min-width: 700px;
    }