/**
 * Custom Scrollbar - Edirectz Design System
 * Matches the app's color scheme for consistent UI across all pages and modals
 * Includes iOS/iPhone specific considerations for optimal mobile experience
 */

/* ============================================
   iOS/IPHONE SPECIFIC STYLING
   ============================================ */

/* Enable smooth momentum scrolling on iOS */
* {
    -webkit-overflow-scrolling: touch;
}

/* Prevent bounce scrolling on specific elements if needed */
.no-bounce {
    -webkit-overflow-scrolling: auto;
}

/* iOS doesn't support custom scrollbar styling via webkit pseudo-elements,
   but we can optimize the scrolling experience */

/* Ensure scrollable areas have proper touch targets on iOS */
.modal-body,
.ai-chat-messages,
.dropdown-menu,
.portfolio-cards-container,
.gallery-grid {
    min-height: 44px; /* iOS recommended minimum touch target */
}

/* ============================================
   WEBKIT SCROLLBAR (Chrome, Safari Desktop, Edge)
   ============================================ */
/* Note: iOS ignores these webkit scrollbar styles and uses native scrollbars */

/* Light Mode Scrollbar */
:root,
[data-theme="light"] {
    /* Scrollbar Track */
    --scrollbar-track-bg: #f7f9fc;
    --scrollbar-track-hover: #f0f4f8;
    
    /* Scrollbar Thumb */
    --scrollbar-thumb-bg: #cbd5e1;
    --scrollbar-thumb-hover: #94a3b8;
    --scrollbar-thumb-active: #64748b;
    
    /* Scrollbar Corner */
    --scrollbar-corner-bg: #f7f9fc;
}

/* Dark Mode Scrollbar */
[data-theme="dark"] {
    /* Scrollbar Track */
    --scrollbar-track-bg: #1e293b;
    --scrollbar-track-hover: #334155;
    
    /* Scrollbar Thumb */
    --scrollbar-thumb-bg: #475569;
    --scrollbar-thumb-hover: #64748b;
    --scrollbar-thumb-active: #94a3b8;
    
    /* Scrollbar Corner */
    --scrollbar-corner-bg: #1e293b;
}

/* ============================================
   WEBKIT SCROLLBAR STYLING
   ============================================ */

/* Main Scrollbar - Vertical */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-track-bg);
    border-radius: 0;
}

::-webkit-scrollbar-track:hover {
    background: var(--scrollbar-track-hover);
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb-bg);
    border-radius: 5px;
    border: 2px solid transparent;
    background-clip: padding-box;
    transition: background 0.2s ease, border-color 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
    border-color: var(--scrollbar-track-bg);
}

::-webkit-scrollbar-thumb:active {
    background: var(--scrollbar-thumb-active);
    border-color: var(--scrollbar-track-bg);
}

/* Scrollbar Corner (where horizontal and vertical meet) */
::-webkit-scrollbar-corner {
    background: var(--scrollbar-corner-bg);
}

/* ============================================
   FIREFOX SCROLLBAR
   ============================================ */

/* Firefox uses a different approach with scrollbar-width and scrollbar-color */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb-bg) var(--scrollbar-track-bg);
}

/* ============================================
   SMOOTH SCROLLING
   ============================================ */

html {
    scroll-behavior: smooth;
}

/* Disable smooth scroll for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}