/* style.css */

/* Ensure body takes full height for centering */
html, body {
    min-height: 100%;
    margin: 0;
    padding: 0;
}

/* Style for invalid input fields */
input.invalid, select.invalid {
    border-color: #f87171; /* Red-400 */
    box-shadow: 0 0 0 2px #fecaca; /* Red-200 focus ring */
}

/* Add some breathing room to list items in the plan */
#plan-output ul li {
    margin-bottom: 0.75rem; /* Equivalent to mb-3 in Tailwind */
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e5e7eb; /* gray-200 */
}
#plan-output ul li:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

/* Style for the step date */
.step-date {
    font-weight: 600; /* semibold */
    color: #0891b2; /* cyan-600 */
}

/* Basic animation for plan appearance */
@keyframes fadeInPlan {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.plan-container-visible {
    animation: fadeInPlan 0.5s ease-out forwards;
}

/* Style for notes textarea */
.notes-textarea {
    min-height: 60px; /* Ensure a minimum height */
    resize: vertical; /* Allow vertical resizing */
}