/* Medicine Invoice System - Essential Styles */

/* Theme Color Variables (for CSS variable usage if needed) */
:root {
    --color-primary-50: #f9fafb;
    --color-primary-100: #f3f4f6;
    --color-primary-200: #e5e7eb;
    --color-primary-300: #d1d5db;
    --color-primary-400: #9ca3af;
    --color-primary-500: #6b7280;
    --color-primary-600: #4b5563;
    --color-primary-700: #374151;
    --color-primary-800: #1f2937;
    --color-primary-900: #111827;
}

/* Base Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
}

/* Scrollbar Hide Utility */
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

/* Sidebar Scrollbar Styling */
nav::-webkit-scrollbar {
    width: 6px;
}

nav::-webkit-scrollbar-track {
    background: #f1f1f1;
}

nav::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

nav::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Mobile Menu Styles */
#sidebar {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 767px) {
    #sidebar {
        top: 4rem;
        height: calc(100vh - 4rem);
    }
}

#mobile-menu-overlay {
    backdrop-filter: blur(2px);
    z-index: 40;
}

body.menu-open {
    overflow: hidden !important;
    position: fixed;
    width: 100%;
}

@media (min-width: 768px) {
    #sidebar {
        position: static;
        transform: translateX(0) !important;
        top: 0;
        height: 100vh;
    }
}

/* Mobile Scrolling Fixes */
@media (max-width: 767px) {
    body {
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        position: relative;
    }
    
    #sidebar {
        touch-action: pan-y;
        will-change: transform;
    }
    
    main {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        position: relative;
        height: auto;
        max-height: 100vh;
    }
    
    main > div.overflow-y-auto {
        min-height: 0;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        max-height: calc(100vh - 80px);
    }
    
    button, a.button, .btn {
        min-height: 44px;
        min-width: 44px;
    }
    
    input, select, textarea {
        font-size: 16px;
    }
}

/* Print Styles */
@media print {
    .no-print {
        display: none !important;
    }
    
    body {
        background: white !important;
    }
}