/* BuBu Clinic - Custom Styles */

body { 
    -webkit-tap-highlight-color: transparent; 
}

/* Scrollbar - Global */
::-webkit-scrollbar { 
    width: 8px; 
    height: 8px; 
}

::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb { 
    background: #cbd5e1; 
    border-radius: 10px;
    border: 2px solid #f1f5f9;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.dark ::-webkit-scrollbar-track {
    background: #1e293b;
}

.dark ::-webkit-scrollbar-thumb { 
    background: #475569;
    border: 2px solid #1e293b;
}

.dark ::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 #f1f5f9;
}

.dark * {
    scrollbar-color: #475569 #1e293b;
}

/* Scrollbar thin class - ensures scrollbar is always visible */
.scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 #f1f5f9;
}

.dark .scrollbar-thin {
    scrollbar-color: #475569 #1e293b;
}

.scrollbar-thin::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.scrollbar-thin::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 10px;
}

.scrollbar-thin::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
    border: 2px solid #f1f5f9;
}

.scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.dark .scrollbar-thin::-webkit-scrollbar-track {
    background: #1e293b;
}

.dark .scrollbar-thin::-webkit-scrollbar-thumb {
    background: #475569;
    border: 2px solid #1e293b;
}

.dark .scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

/* Glass effect */
.glass { 
    background: rgba(255, 255, 255, 0.7); 
    backdrop-filter: blur(12px); 
    border: 1px solid rgba(255, 255, 255, 0.5); 
}

.dark .glass { 
    background: rgba(30, 41, 59, 0.7); 
    border: 1px solid rgba(255, 255, 255, 0.05); 
}

/* Form inputs */
.form-input { 
    width: 100%; 
    padding: 0.75rem; 
    border-radius: 0.75rem; 
    border: 1px solid #e2e8f0; 
    background-color: white; 
    transition: all 0.2s; 
    font-size: 0.95rem; 
}

.dark .form-input { 
    background-color: #1e293b; 
    border-color: #334155; 
    color: white; 
}

.form-input:focus { 
    outline: none; 
    border-color: #ec4899; 
    box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.1); 
}

/* Form labels */
.form-label { 
    font-size: 0.75rem; 
    font-weight: 700; 
    text-transform: uppercase; 
    color: #64748b; 
    margin-bottom: 0.3rem; 
    display: block; 
    letter-spacing: 0.05em; 
}

.dark .form-label { 
    color: #94a3b8; 
}

/* Mobile input fix */
@media (max-width: 768px) { 
    .form-input { 
        font-size: 16px; 
    } 
}

/* Mobile scroll fix */
@media (max-width: 768px) {
    html {
        height: 100%;
        height: -webkit-fill-available;
    }
    
    body {
        min-height: 100%;
        min-height: -webkit-fill-available;
        position: fixed;
        width: 100%;
        overflow: hidden;
    }
    
    #root {
        height: 100%;
        height: -webkit-fill-available;
        overflow: hidden;
    }
    
    /* Ensure smooth scrolling on iOS */
    * {
        -webkit-overflow-scrolling: touch;
    }
    
    /* Fix for mobile browsers with dynamic viewport */
    @supports (height: 100dvh) {
        html, body, #root {
            height: 100dvh;
        }
    }
}

/* iPad and Tablet fixes - All tablet sizes (640px - 1024px) */
@media (min-width: 640px) and (max-width: 1024px) {
    body {
        padding: 0;
        overflow-x: hidden;
    }
    
    /* Ensure content doesn't overflow */
    .glass, .rounded-3xl, .rounded-2xl {
        max-width: 100%;
        overflow-x: hidden;
    }
    
    /* Fix buttons and inputs on tablet/iPad */
    button, input, select, textarea {
        min-height: 44px; /* Apple's recommended touch target size */
    }
    
    /* Ensure modals are properly sized */
    .fixed.inset-0 {
        padding: 1rem;
    }
    
    /* Fix for content being cut off */
    .max-w-7xl, .max-w-6xl, .max-w-5xl, .max-w-4xl {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    /* ===== SIDEBAR FIX - SIMPLE & CLEAN ===== */
    
    /* Base sidebar setup for tablet/iPad */
    aside {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 18rem !important;
        height: 100vh !important;
        height: 100dvh !important;
        display: flex !important;
        flex-direction: column !important;
        z-index: 40 !important;
        overflow-x: hidden !important;
    }
    
    /* Override overflow-hidden from className */
    aside.overflow-hidden {
        overflow-x: hidden !important;
    }
    
    /* Header - fixed, no shrink */
    aside > div:first-child {
        flex-shrink: 0 !important;
    }
    
    /* Nav - flexible, scrollable */
    aside nav {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* User profile - fixed, always at bottom, separated */
    aside > div:last-child {
        flex-shrink: 0 !important;
        margin-top: auto !important;
        min-height: fit-content !important;
        position: relative !important;
        z-index: 10 !important;
    }
    
    /* Main content - add margin for sidebar */
    main {
        margin-left: 18rem !important;
        width: calc(100% - 18rem) !important;
    }
    
    /* Portrait tablet/iPad - extra padding for content */
    @media (orientation: portrait) and (min-width: 640px) and (max-width: 1024px) {
        main > div {
            padding-bottom: 4rem !important;
        }
    }
}