body {
    font-family: 'Inter', sans-serif;
    /* (Plan 4.2) Set default body colors, Tailwind will override */
    background-color: #f3f4f6; /* Tailwind gray-100 */
    color: #111827; /* Tailwind gray-900 */
}

/* (Plan 4.2) Dark mode body defaults */
.dark body {
    background-color: #111827; /* Tailwind gray-900 */
    color: #f9fafb; /* Tailwind gray-50 */
}

/* (Plan 4.1) REVERTED: Simple style for active top-nav link 
   This is now handled by @layer components in index.html
*/
/* .nav-link.active { ... } */


/* Page transition (simple fade) */
.page {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* (Plan 2.1 / Fix 4) Removed `break-inside` as we are now using CSS Grid for the journal, not masonry columns. */
/*
.card {
    break-inside: avoid-column;
}
*/

/* (Plan 4.2) Skeleton Loading Animation */
.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: .5;
  }
}

/* (Plan 4.2) Basic styles for Tailwind's `prose` class in dark mode */
.dark .prose-invert {
    color: #d1d5db; /* gray-300 */
}

.dark .prose-invert p,
.dark .prose-invert ul {
    color: #d1d5db; /* gray-300 */
}

/* --- CALENDAR STYLES --- */
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.5rem;
}

.calendar-header {
    text-align: center;
    font-weight: bold;
    color: #6b7280; /* gray-500 */
    font-size: 0.875rem;
}

.calendar-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px; /* rounded-full */
    cursor: pointer;
    font-size: 0.875rem;
    transition: all 0.2s;
    position: relative;
}

.calendar-day:hover {
    background-color: #e5e7eb; /* gray-200 */
}
.dark .calendar-day:hover {
    background-color: #374151; /* gray-700 */
}

.calendar-day.active {
    background-color: #4f46e5; /* indigo-600 */
    color: white;
}

.calendar-day.today {
    border: 1px solid #4f46e5; /* indigo-600 */
}

.calendar-day.has-task::after {
    content: '';
    position: absolute;
    bottom: 4px;
    width: 4px;
    height: 4px;
    background-color: #10b981; /* green-500 */
    border-radius: 50%;
}

/* --- URGENT DOT ANIMATION --- */
.urgent-dot {
    width: 8px;
    height: 8px;
    background-color: #ef4444; /* red-500 */
    border-radius: 50%;
    display: inline-block;
    animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes ping {
    75%, 100% {
        transform: scale(2);
        opacity: 0;
    }
}

/* --- SUBTASK LIST --- */
.subtask-list {
    margin-top: 0.5rem;
    padding-left: 1rem;
    border-left: 2px solid #e5e7eb; /* gray-200 */
}
.dark .subtask-list {
    border-left-color: #374151; /* gray-700 */
}