/* filepath: static/css/components.css */

/*
FineRide Components Stylesheet

This stylesheet contains reusable component styles for the FineRide PWA application.
These components provide consistent UI elements across different pages and features.

Key features:
- Main content area layout with responsive spacing
- Back-to-top button with smooth animations and accessibility features
- Preview notice component for informational messages
- Utility classes for common display patterns
- Progress bar component for loading states and progress indication

Architecture notes:
- Uses CSS custom properties (variables) for theming and consistency
- Implements smooth transitions and hover effects for better UX
- Includes accessibility features like focus indicators and proper contrast
- Mobile-responsive design with flexible layouts

Dependencies:
- style.css (base styles, CSS custom properties, typography)
- mobile.css (responsive breakpoints and mobile-specific adjustments)

Browser Support:
- Modern browsers (Chrome 70+, Firefox 65+, Safari 12+, Edge 79+)
- Progressive enhancement for older browsers

Last Updated: 2025-12-25
Author: HowToolHelp/Intelligent
*/

/* Main Content Area */
.main-content {
    padding-top: var(--space-lg); /* Add padding to avoid content hiding behind fixed navbar */
    padding-bottom: var(--space-2xl); /* Space for footer */
    min-height: calc(100vh - 180px); /* Adjust based on header and footer height */
}

/* Back to top button styling */
.back-to-top-button {
    position: fixed;
    bottom: var(--space-xl);
    right: var(--space-xl);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--medium-light-blue), var(--medium-dark-blue));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-base);
    box-shadow: var(--shadow);
    border: none;
    z-index: 1000;
}

.back-to-top-button i {
    font-size: 1.2rem;
    transition: transform var(--transition-fast);
}

.back-to-top-button.visible {
    opacity: 1;
    visibility: visible;
}

.back-to-top-button:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: var(--shadow-hover);
    background: linear-gradient(135deg, var(--medium-dark-blue), var(--secondary-color));
}

.back-to-top-button:hover i {
    transform: scale(1.1);
}

.back-to-top-button:focus {
    outline: 3px solid var(--medium-light-blue);
    outline-offset: 2px;
    box-shadow: var(--shadow-hover);
}

/* Preview Notice Styles */
.preview-notice {
    background-color: #fffbea; 
    border: 1px solid #fceec4; 
    border-radius: var(--border-radius-sm);
    padding: var(--space-md);
    margin-top: var(--space-lg); 
    margin-bottom: var(--space-lg); 
}

.preview-notice p {
    display: flex;
    align-items: center; 
    margin: 0; 
    gap: var(--space-sm); 
}

.preview-notice p .fas.fa-lightbulb {
    color: #f59e0b; 
    font-size: 1.3rem; 
    flex-shrink: 0; 
}

.preview-notice p span {
    flex-grow: 1; 
    line-height: 1.6; 
    font-size: 0.95rem; 
    color: #575757; 
}

.preview-notice p span strong {
    color: #333; 
}

.preview-notice p .btn.primary {
    flex-shrink: 0; 
}

/* 
Card Header Variants
------------------------------------ */

/* 
Section Title Styling
Used for titles within cards or content sections.
Used in: event_detail.html
*/
.detail-section-title {
    color: var(--dark-text) !important;
    font-weight: 700 !important;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--card-border);
    display: flex;
    align-items: center;
}

.detail-section-title i {
    color: var(--medium-light-blue);
}

/* Utility classes */
.hidden {
    display: none !important;
}

/* Progress Bar (can be used on various pages) */
.progress-bar-container {
    width: 100%;
    background-color: var(--light-gray);
    border-radius: var(--border-radius-sm);
    margin-bottom: var(--space-md); /* Space below the progress bar */
    height: 20px; /* Define a height */
    overflow: hidden; /* Ensure inner bar doesn't overflow rounded corners */
}

.progress-bar {
    height: 100%; /* Fill container height */
    width: 0%; /* Initial width */
    background-color: var(--primary-color);
    border-radius: var(--border-radius-sm); /* Match container's border radius */
    transition: width var(--transition-slow);
    text-align: center; /* Center text if any */
    color: white; /* Text color for progress percentage */
    line-height: 20px; /* Vertically center text */
    font-size: var(--font-size-sm);
}

/* Location Badge Highlighting */
#current-city {
    cursor: pointer;
    transition: all var(--transition-fast);
    border: 2px solid transparent;
    position: relative;
}

#current-city.location-prompt {
    background: linear-gradient(135deg, #ff6b6b, #ee5a52) !important;
    background-color: #ff6b6b !important;
    color: white !important;
    animation: pulse-red 2s infinite !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
}

#current-city:hover {
    background-color: var(--medium-dark-blue) !important;
    background-image: none !important;
    border-color: var(--secondary-color);
    transform: scale(1.05);
    box-shadow: var(--shadow);
}

@keyframes pulse-red {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 107, 107, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(255, 107, 107, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 107, 107, 0);
    }
}

/* Skeleton Loading Screens */
.skeleton-card {
    border: none;
    box-shadow: var(--shadow);
    background-color: var(--white);
}

.skeleton {
    background: #e1e9ee;
    background: linear-gradient(
        to right,
        #eeeeee 8%,
        #dddddd 18%,
        #eeeeee 33%
    );
    background-size: 800px 104px;
    position: relative;
    border-radius: var(--border-radius-sm);
    animation: skeleton-shimmer 1.5s linear infinite;
}

@keyframes skeleton-shimmer {
    0% {
        background-position: -468px 0;
    }
    100% {
        background-position: 468px 0;
    }
}

/*------------------------------------*\
  #CARD-HEADER-VARIANTS
\*------------------------------------*/

/* Card Header - Detail Variant
   ------------------------------------ */
.card .card-header--detail {
    /* Visual Overrides - Resetting base style.css gradients */
    background-color: var(--white) !important;
    background-image: linear-gradient(
        to right, 
        rgba(0, 168, 204, 0.08), 
        rgba(10, 147, 150, 0.02)
    ) !important;
    
    /* 🔧 FIX: 強制容器本身的文字顏色，防止子元素繼承 style.css 的 white */
    color: var(--dark-text) !important;
    
    border-bottom: 3px solid var(--accent-color) !important;
    padding: var(--space-lg) var(--space-xl);
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all var(--transition-base);
}

/* Detail Header Typography - Title Elements
   明確覆蓋所有標題元素，確保在淺色模式下顯示黑色文字
   ------------------------------------ */
.card .card-header--detail h1,
.card .card-header--detail h2,
.card .card-header--detail h3,
.card .card-header--detail h4,
.card .card-header--detail h5,
.card .card-header--detail h6 {
    color: var(--dark-text) !important;
    font-weight: 700 !important;
    margin-bottom: 0 !important;
    display: flex;
    align-items: center;
    font-size: var(--font-size-lg);
    letter-spacing: -0.015em;
}

/* Detail Header Text Spans */
.card .card-header--detail span {
    color: var(--dark-text) !important;
}

/* Detail Header Icons
   圖示使用品牌色作為視覺重點
   ------------------------------------ */
.card .card-header--detail i {
    color: var(--accent-color) !important;
    margin-right: var(--space-sm) !important;
    font-size: 1.25rem;
    width: 1.5rem;
    text-align: center;
    opacity: 0.9;
}

/* Responsive Adjustments
   Mobile-specific overrides to ensure proper rendering on all devices
   ------------------------------------ */
@media (max-width: 768px) {
    .card .card-header--detail {
        padding: var(--space-md) var(--space-lg) !important;
    }
    
    /* 🔧 CRITICAL FIX: 強制行動裝置淺色模式下使用黑色文字
       修復 iOS Safari 和 Android Chrome 在淺色模式下文字變白的問題 */
    .card .card-header--detail h1,
    .card .card-header--detail h2,
    .card .card-header--detail h3,
    .card .card-header--detail h4,
    .card .card-header--detail h5,
    .card .card-header--detail h6,
    .card .card-header--detail span {
        color: var(--dark-text) !important;
    }
    
    .card .card-header--detail i {
        color: var(--accent-color) !important;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .card .card-header--detail {
        background-color: var(--white) !important; /* #121212 in dark mode */
        background-image: linear-gradient(
            to right, 
            rgba(0, 168, 204, 0.15), 
            rgba(10, 147, 150, 0.05)
        ) !important;
        border-bottom-color: var(--primary-color) !important;
    }
    
    /* 深色模式下標題文字應該變成淺色（--dark-text 在深色模式下 = #e1e7e8） */
    .card .card-header--detail h1,
    .card .card-header--detail h2,
    .card .card-header--detail h3,
    .card .card-header--detail h4,
    .card .card-header--detail h5,
    .card .card-header--detail h6,
    .card .card-header--detail span {
        color: var(--dark-text) !important;
    }
    
    /* 深色模式下圖示保持品牌色 */
    .card .card-header--detail i {
        color: var(--primary-color) !important;
        opacity: 1;
    }
}

/* Hover effect for desktop interactivity */
@media (min-width: 992px) {
    .card:hover .card-header--detail {
        background-color: rgba(10, 147, 150, 0.04) !important;
        border-bottom-color: var(--primary-color) !important;
    }
}