/* Custom CSS for Zillow Property Scraper */

:root {
    /* Color palette provided by user */
    --color-toad-king: #3D6C54;    /* Toad King */
    --color-floral-white: #FFFAF0; /* Floral White */
    --color-black-soap: #19443C;   /* Black Soap */
    --color-brimstone: #FFBD2B;    /* Brimstone */
    --color-black-emerald: #12221D;/* Black Emerald */
    --color-mikan-orange: #F08300; /* Mikan Orange */
    --color-cerulean: #2563EB;     /* Cerulean (used for Demographics - Asian) */

    /* Derived translucent variants */
    --color-toad-king-10: rgba(61,108,84,0.1);
    --color-floral-white-10: rgba(255,250,240,0.1);

    /* Semantic roles (keeps Tailwind and custom CSS aligned) */
    --color-primary: var(--color-mikan-orange);
    --color-secondary: var(--color-toad-king);
    --color-accent: var(--color-brimstone);
    --color-background: var(--color-floral-white);
    --color-surface: var(--color-black-emerald);
    --color-muted: var(--color-black-soap);
    --color-text-base: var(--color-black-emerald);
    /* Contrast tokens for UI elements */
    --color-primary-contrast: var(--color-black-emerald);
    --color-secondary-contrast: var(--color-floral-white);
    --color-accent-contrast: var(--color-black-emerald);
    --color-surface-contrast: var(--color-floral-white);
    /* Route planning nav link tokens */
    --color-route-link: var(--color-mikan-orange);
    --color-route-link-hover: var(--color-accent);
}

/* Centralized route/exiting action token (used for Exit Route Planning Mode and other confirmations) */
:root {
    --color-route-action: var(--color-mikan-orange);
    --color-route-action-contrast: var(--color-primary-contrast);
    --color-route-action-50: rgba(240,131,0,0.1);
}

/* Utility classes for confirm buttons and modal icons to keep color centralized */
.btn-route-action {
    background-color: var(--color-route-action) !important;
    color: var(--color-route-action-contrast) !important;
    border-color: transparent !important;
}

.btn-route-action:hover {
    background-color: #d86c00 !important; /* slightly darker fallback */
}

.modal-icon-route {
    background-color: var(--color-route-action-50) !important;
}

.modal-icon-route svg {
    color: var(--color-route-action) !important;
}

/* Additional animations */
.fade-in {
    animation: fadeIn 0.3s ease-in-out;
}

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

/* Route Planning nav link: brighter when inactive, distinct hover */
/* Only apply when not in route mode (route mode adds .bg-background class) */
#routePlanningToggle:not(.bg-background) {
    color: var(--color-route-link);
    transition: color 0.12s ease;
}

#routePlanningToggle:not(.bg-background):hover {
    color: var(--color-route-link-hover);
}

/* Loading spinner enhancement */
.spinner {
    border: 2px solid var(--color-background);
    border-top: 2px solid var(--color-primary);
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Form field focus states */
.form-input:focus {
    outline: none;
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 3px var(--color-toad-king-10);
}

/* Button hover effects */
.btn-primary {
    transition: all 0.2s ease-in-out;
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(17, 34, 29, 0.18);
}

/* Primary button visual (uses Mikan Orange) */
.btn-primary {
    background-color: var(--color-primary);
    color: var(--color-primary-contrast);
    border: 1px solid rgba(0,0,0,0.06);
}

/* Card hover effects for properties */
.property-card {
    transition: all 0.2s ease-in-out;
}

.property-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Score badge styling */
.score-badge-high {
    background-color: var(--color-accent);
    color: var(--color-accent-contrast);
}

.score-badge-medium {
    background-color: var(--color-primary);
    color: var(--color-primary-contrast);
}

.score-badge-low {
    background-color: var(--color-muted);
    color: var(--color-surface-contrast);
}

.score-badge-rejected {
    background-color: var(--color-surface);
    color: var(--color-surface-contrast);
}

/* Mobile responsiveness improvements */
@media (max-width: 640px) {
    .mobile-padding {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .mobile-text-sm {
        font-size: 0.875rem;
    }
}

/* Print styles for property details */
@media print {
    .no-print {
        display: none !important;
    }

    .print-break {
        page-break-after: always;
    }
}

/* Toast notifications */
.toast {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 50;
    min-width: 300px;
    border-radius: 0.5rem;
    padding: 1rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    animation: slideInRight 0.3s ease-out;
}

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

.toast-success {
    background-color: var(--color-secondary);
    border: 1px solid var(--color-surface);
    color: var(--color-secondary-contrast);
}

.toast-error {
    background-color: var(--color-primary);
    border: 1px solid var(--color-accent);
    color: var(--color-primary-contrast);
}

.toast-info {
    background-color: var(--color-muted);
    border: 1px solid var(--color-surface);
    color: var(--color-surface-contrast);
}

/* Navigation active state */
.nav-link-active {
    color: var(--color-background);
    background-color: var(--color-surface);
}

/* Image gallery styles */
.image-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

.image-thumbnail {
    aspect-ratio: 16/9;
    object-fit: cover;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: transform 0.2s ease-in-out;
}

.image-thumbnail:hover {
    transform: scale(1.05);
}

/* Map container */
.map-container {
    height: 400px;
    border-radius: 0.5rem;
    overflow: hidden;
}

@media (min-width: 768px) {
    .map-container {
        height: 500px;
    }
}

/* Progress bar for property processing */
.progress-bar {
    width: 100%;
    height: 8px;
    background-color: var(--color-floral-white);
    border-radius: 4px;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    background-color: var(--color-secondary);
    transition: width 0.3s ease-in-out;
}

/* Custom scrollbar */
.custom-scrollbar::-webkit-scrollbar {
    width: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: var(--color-floral-white);
    border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: var(--color-toad-king);
    border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: var(--color-mikan-orange);
}

/* Demographics chart container constraints */
.demographics-chart-container {
    max-width: 400px;
    margin: 0 auto;
}

#demographics-chart {
    max-width: 100% !important;
    height: auto !important;
}

@media (max-width: 1024px) {
    .demographics-chart-container {
        max-width: 100%;
    }
}

@media (max-width: 640px) {
    #demographics-chart {
        max-width: 280px !important;
    }
}