/* ==========================================
   SKINSPIRE HEALTHCARE APPLICATION STYLES
   File: static/css/app.css
   Master CSS file importing all components
   ========================================== */

/* ==========================================
   CORE TAILWIND UTILITIES
   Keep all Tailwind base styles and utilities
   ========================================== */
@import url('./tailwind.css');

/* ==========================================
   HEALTHCARE COMPONENT LIBRARY
   Custom components for consistent UI
   ========================================== */

/* Icon handling and FontAwesome fixes */
@import url('./components/icons.css');

/* Button components with color coding */
@import url('./components/buttons.css');

/* Layout components (cards, headers, footers) */
@import url('./components/layout.css');

/* Form components - Complete form system */
@import url('./components/forms.css');

/* Table components - Data tables and responsive design */
@import url('./components/tables.css');

/* Status and badge components - Alerts, badges, progress */
@import url('./components/status.css');

/* Card components - All card variants */
@import url('./components/cards.css');

/* Filter components - Filter cards and controls */
@import url('./components/filters.css');

/* Invoice components - Invoice-specific styles */
@import url('./components/invoice.css');

/* Supplier components - Cleaned supplier-specific styles */
@import url('./components/supplier.css');

/* ==========================================
   UNIVERSAL ENGINE COMPONENTS
   ========================================== */

/* Universal View components - View layouts and field rendering */
@import url('./components/universal_view.css');

/* Universal Document components - Print and document generation */
@import url('./components/universal_document.css');

/* Universal CRUD form components - Create, Edit and delete generation */
@import url('./components/universal_form.css');

/* ==========================================
   MODULE-SPECIFIC STYLES (OPTIONAL)
   Use sparingly - prefer component-based styles
   ========================================== */

/* Patient module specific styles (when created) */
/* @import url('./modules/patient.css'); */

/* Pharmacy module specific styles (when created) */
/* @import url('./modules/pharmacy.css'); */

/* Finance module specific styles (when created) */
/* @import url('./modules/finance.css'); */

/* Laboratory module specific styles (when created) */
/* @import url('./modules/laboratory.css'); */

/* ==========================================
   GLOBAL OVERRIDES
   Any global customizations that don't fit in components
   ========================================== */

/* Healthcare application specific global styles */
:root {
    --healthcare-primary: rgb(59 130 246); /* blue-500 */
    --healthcare-secondary: rgb(99 102 241); /* indigo-500 */
    --healthcare-success: rgb(34 197 94); /* green-500 */
    --healthcare-warning: rgb(245 158 11); /* amber-500 */
    --healthcare-danger: rgb(239 68 68); /* red-500 */
    --healthcare-info: rgb(59 130 246); /* blue-500 */
    --healthcare-gray: rgb(107 114 128); /* gray-500 */
}

/* Dark mode CSS variables */
:root.dark {
    --healthcare-primary: rgb(96 165 250); /* blue-400 */
    --healthcare-secondary: rgb(129 140 248); /* indigo-400 */
    --healthcare-success: rgb(74 222 128); /* green-400 */
    --healthcare-warning: rgb(251 191 36); /* amber-400 */
    --healthcare-danger: rgb(248 113 113); /* red-400 */
    --healthcare-info: rgb(96 165 250); /* blue-400 */
    --healthcare-gray: rgb(156 163 175); /* gray-400 */
}

/* Ensure consistent scrollbar styling across the application */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: rgb(243 244 246); /* gray-100 */
}

::-webkit-scrollbar-thumb {
    background: rgb(156 163 175); /* gray-400 */
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgb(107 114 128); /* gray-500 */
}

.dark ::-webkit-scrollbar-track {
    background: rgb(55 65 81); /* gray-700 */
}

.dark ::-webkit-scrollbar-thumb {
    background: rgb(75 85 99); /* gray-600 */
}

.dark ::-webkit-scrollbar-thumb:hover {
    background: rgb(107 114 128); /* gray-500 */
}

/* Focus styles for accessibility */
*:focus {
    outline: 2px solid var(--healthcare-primary);
    outline-offset: 2px;
}

/* Skip to content link for accessibility */
.skip-to-content {
    position: absolute;
    top: -40px;
    left: 6px;
    background: var(--healthcare-primary);
    color: white;
    padding: 8px;
    text-decoration: none;
    border-radius: 4px;
    z-index: 1000;
    transition: top 0.3s;
}

.skip-to-content:focus {
    top: 6px;
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}