/* Date indicators */
        .date-upcoming {
            color: #7D9171;
        }

        .date-completed {
            color: #6B7268;
        }

        /* Validation States - Clean Design */
        .is-valid {
            border-color: #059669;
            background-color: #FFFFFF;
            box-shadow: 0 0 0 2px rgba(5, 150, 105, 0.1);
        }

        .is-invalid {
            border-color: #DC2626;
            background-color: #FEF2F2;
            box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.15);
        }

        .is-invalid:focus {
            border-color: #B91C1C;
            box-shadow: 0 0 0 2px rgba(185, 28, 28, 0.2);
        }

        .is-valid:focus {
            border-color: #047857;
            box-shadow: 0 0 0 2px rgba(4, 120, 87, 0.15);
        }

        /* Structured Field Error Messages */
        .field-error {
            padding: 12px;
            border-left: 4px solid #DC2626;
            background: #FEF2F2;
            border-radius: 0 8px 8px 0;
            margin-bottom: 16px;
            animation: fadeIn 0.3s ease-in;
        }

        .field-error-header {
            font-weight: 600;
            color: #B91C1C;
            margin-bottom: 4px;
        }

        .field-error-message {
            color: #991B1B;
            font-size: 14px;
            line-height: 1.4;
        }

        .field-error-hint {
            margin-top: 8px;
            padding-top: 8px;
            border-top: 1px solid #FCA5A5;
            color: #7F1D1D;
            font-size: 13px;
        }

        .field-error-hint code {
            background: #F3F4F6;
            padding: 1px 4px;
            border-radius: 2px;
            font-family: 'Monaco', 'Menlo', monospace;
            font-size: 12px;
        }

        .error-hint {
            background: #F9FAFB;
            padding: 8px 12px;
            border-radius: 4px;
            border-left: 3px solid #6B7280;
            margin-top: 8px;
        }

        .error-hint code {
            background: #E5E7EB;
            padding: 1px 4px;
            border-radius: 2px;
            font-family: 'Courier New', monospace;
            font-size: 11px;
        }

        /* Enhanced Error Display */
        .enhanced-error-display {
            margin-bottom: 20px;
        }

        /* Submit Button States - Clean Design */
        .btn-primary:disabled {
            background-color: #9CA3AF;
            border-color: #9CA3AF;
            color: #FFFFFF;
            cursor: not-allowed;
            opacity: 1;
            position: relative;
            transition: all 0.2s ease;
        }

        .btn-primary:disabled:hover {
            background-color: #6B7280;
            border-color: #6B7280;
            transform: translateY(-1px);
        }

        .btn-primary:not(:disabled) {
            background-color: #059669;
            border-color: #059669;
            color: #FFFFFF;
            transition: all 0.2s ease;
        }

        .btn-primary:not(:disabled):hover {
            background-color: #047857;
            border-color: #047857;
            transform: translateY(-1px);
        }

        /* Error count tooltip for disabled button */
        .btn-primary:disabled:hover::before {
            content: attr(data-error-count);
            position: absolute;
            bottom: calc(100% + 8px);
            left: 50%;
            transform: translateX(-50%);
            background: #374151;
            color: #FFFFFF;
            padding: 6px 12px;
            border-radius: 6px;
            font-size: 12px;
            font-weight: 500;
            white-space: nowrap;
            z-index: 50;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            opacity: 1;
            animation: fadeIn 0.3s ease-in;
        }

        .btn-primary:disabled:hover::after {
            content: '';
            position: absolute;
            bottom: calc(100% + 2px);
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 0;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-top: 6px solid #374151;
            z-index: 50;
        }

        @keyframes checkPop {
            0% { transform: scale(0); opacity: 0; }
            50% { transform: scale(1.2); }
            100% { transform: scale(1); opacity: 1; }
        }

        /* Field Validation Layout - Mobile First */
        .field-wrapper {
            position: relative;
            margin-bottom: 1rem;
        }

        @media (min-width: 640px) {
            .field-wrapper {
                margin-bottom: 1.25rem;
            }
        }

        /* Mobile-friendly error containers */
        .field-error-container {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            margin-top: 0.5rem;
            padding: 0.75rem;
            background: #FEF2F2;
            border-radius: 8px;
            border-left: 3px solid #DC2626;
        }

        @media (min-width: 640px) {
            .field-error-container {
                flex-direction: row;
                align-items: flex-start;
                gap: 0.5rem;
                padding: 0.75rem 1rem;
            }
        }

        .field-error-container svg {
            flex-shrink: 0;
            width: 1.25rem;
            height: 1.25rem;
        }

        .field-error-container p {
            margin: 0;
            font-size: 0.8125rem;
            line-height: 1.5;
        }

        @media (min-width: 640px) {
            .field-error-container p {
                font-size: 0.875rem;
            }
        }

        /* Touch-friendly error close buttons */
        .error-close-btn {
            min-width: 44px;
            min-height: 44px;
            padding: 0.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            background: transparent;
            border: none;
            border-radius: 6px;
            color: #9CA3AF;
            cursor: pointer;
            transition: all 0.2s ease;
            margin-left: auto;
        }

        .error-close-btn:hover,
        .error-close-btn:focus {
            color: #6B7280;
            background: rgba(0, 0, 0, 0.05);
        }

        .error-close-btn:focus-visible {
            outline: 2px solid #7D9171;
            outline-offset: 2px;
        }

        /* Shake animation for errors - more subtle */
        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            10%, 30%, 50%, 70%, 90% { transform: translateX(-2px); }
            20%, 40%, 60%, 80% { transform: translateX(2px); }
        }

        .shake {
            animation: shake 0.4s ease-in-out;
        }

        /* Mobile-optimized validation states */
        @media (max-width: 639px) {
            .is-valid,
            .is-invalid {
                background-position: right 12px center;
                background-size: 20px;
            }
        }

        /* HTMX Loading States */
        .htmx-request {
            opacity: 0.7;
            transition: opacity 0.2s ease;
        }

        .htmx-indicator {
            display: none;
        }

        .htmx-request .htmx-indicator {
            display: inline-block;
        }

        /* Submit Button Loading State */
        .btn-loading {
            position: relative;
            color: transparent !important;
            pointer-events: none;
        }

        .btn-loading::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 16px;
            height: 16px;
            margin: -8px 0 0 -8px;
            border: 2px solid transparent;
            border-top-color: currentColor;
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
        }

        .btn-loading.btn-primary::before {
            border-top-color: white;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        /* Toast Notifications - Mobile First */
        .toast-container {
            position: fixed;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            right: auto;
            top: auto;
            z-index: 1000;
            pointer-events: none;
            width: calc(100% - 32px);
            max-width: 400px;
        }

        @media (min-width: 640px) {
            .toast-container {
                top: 20px;
                right: 20px;
                left: auto;
                bottom: auto;
                transform: none;
                width: auto;
            }
        }

        .toast {
            background: white;
            border-radius: 12px;
            padding: 14px 16px;
            margin-bottom: 12px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.1);
            border-left: 4px solid #7D9171;
            min-width: unset;
            max-width: 100%;
            width: 100%;
            pointer-events: auto;
            animation: slideInUp 0.3s ease-out;
            touch-action: pan-y;
            position: relative;
            overflow: hidden;
        }

        @media (min-width: 640px) {
            .toast {
                border-radius: 8px;
                padding: 16px;
                min-width: 300px;
                max-width: 400px;
                animation: slideInRight 0.3s ease-out;
            }
        }

        .toast::before {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, transparent, rgba(125, 145, 113, 0.3), transparent);
            animation: progressBar 5s linear forwards;
        }

        .toast-success::before {
            background: linear-gradient(90deg, transparent, rgba(5, 150, 105, 0.3), transparent);
        }

        .toast-error::before {
            background: linear-gradient(90deg, transparent, rgba(220, 38, 38, 0.3), transparent);
        }

        @keyframes progressBar {
            from { transform: scaleX(1); }
            to { transform: scaleX(0); }
        }

        .toast-success {
            border-left-color: #059669;
        }

        .toast-error {
            border-left-color: #DC2626;
        }

        .toast-header {
            display: flex;
            align-items: center;
            gap: 8px;
            font-weight: 600;
            margin-bottom: 4px;
            font-size: 14px;
        }

        @media (min-width: 640px) {
            .toast-header {
                font-size: 15px;
            }
        }

        .toast-success .toast-header {
            color: #059669;
        }

        .toast-error .toast-header {
            color: #DC2626;
        }

        .toast-message {
            color: #6B7268;
            font-size: 13px;
            line-height: 1.5;
        }

        @media (min-width: 640px) {
            .toast-message {
                font-size: 14px;
            }
        }

        .toast-close {
            margin-left: auto;
            background: none;
            border: none;
            color: #9CA3AF;
            cursor: pointer;
            padding: 4px;
            font-size: 20px;
            line-height: 1;
            min-width: 32px;
            min-height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 6px;
            transition: all 0.2s ease;
            flex-shrink: 0;
        }

        .toast-close:hover,
        .toast-close:focus {
            color: #6B7268;
            background: #f3f4f6;
        }

        .toast-close:focus-visible {
            outline: 2px solid #7D9171;
            outline-offset: 2px;
        }

        /* Swipe to dismiss indicator on mobile */
        .toast::after {
            content: '';
            position: absolute;
            bottom: 4px;
            left: 50%;
            transform: translateX(-50%);
            width: 36px;
            height: 4px;
            background: rgba(0, 0, 0, 0.1);
            border-radius: 2px;
        }

        @media (min-width: 640px) {
            .toast::after {
                display: none;
            }
        }

        @keyframes slideInUp {
            from {
                transform: translateY(100%);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        @keyframes slideInRight {
            from {
                transform: translateX(100%);
                opacity: 0;
            }
            to {
                transform: translateX(0);
                opacity: 1;
            }
        }

        @keyframes slideOutDown {
            from {
                transform: translateY(0);
                opacity: 1;
            }
            to {
                transform: translateY(100%);
                opacity: 0;
            }
        }

        @keyframes slideOutRight {
            from {
                transform: translateX(0);
                opacity: 1;
            }
            to {
                transform: translateX(100%);
                opacity: 0;
            }
        }

        .toast.removing {
            animation: slideOutDown 0.3s ease-out;
        }

        @media (min-width: 640px) {
            .toast.removing {
                animation: slideOutRight 0.3s ease-out;
            }
        }

        /* Smooth Transitions */
        .fade-in {
            animation: fadeIn 0.3s ease-in;
        }

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

        .slide-in {
            animation: slideIn 0.3s ease-out;
        }

        @keyframes slideIn {
            from { transform: translateX(-20px); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }

        /* Loading Skeleton */
        .skeleton {
            background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
            background-size: 200% 100%;
            animation: loading 1.5s infinite;
        }

        @keyframes loading {
            0% { background-position: 200% 0; }
            100% { background-position: -200% 0; }
        }