/**
 * Main CSS Entry Point
 * @description Centralized CSS import system for MWPLU webapp
 * @version 2.0.0
 * @author GreyPanda
 * 
 * @architecture
 * 1. Design Tokens (variables, colors, spacing)
 * 2. Base Styles (resets, typography, containers)
 * 3. Layout Components (header, footer, grid)
 * 4. UI Components (buttons, forms, tabs, rating, etc.)
 * 5. Page-Specific Styles
 * 6. Utilities (helpers, modern utilities)
 * 7. Animations & Interactions
 */

/* === 1. DESIGN TOKENS === */
/* Must be first to provide CSS variables for all other files */
@import url('./base/tokens.css');

/* === 2. BASE STYLES === */
@import url('./base/base.css');

/* === 3. LAYOUT COMPONENTS === */
@import url('./layout/grid.css');
@import url('./layout/header.css');
@import url('./layout/footer.css');

/* === 4. UI COMPONENTS === */
/* Core Components */
@import url('./components/buttons.css');
@import url('./components/forms.css');
@import url('./components/messages.css');
@import url('./components/spinner.css');
@import url('./components/logo.css');

/* Enhanced Components */
@import url('./components/skeleton.css');
@import url('./components/tabs.css');
@import url('./components/rating.css');

/* === 5. PAGE-SPECIFIC STYLES === */
@import url('./pages/home.css');
@import url('./pages/auth.css');
@import url('./pages/profile.css');
@import url('./pages/policies.css');
@import url('./pages/error.css');
@import url('./pages/plu-summary.css');
@import url('./pages/documentation.css');

/* === 6. UTILITIES === */
/* Legacy utilities first for backward compatibility */
@import url('./utils/utilities.css');
/* Modern utilities for enhanced functionality */
@import url('./utils/modern-utilities.css');

/* === 7. ANIMATIONS & INTERACTIONS === */
@import url('./utils/animations.css');

/* === CRITICAL CSS INLINING === */
/* 
 * For production, consider inlining critical CSS above the fold:
 * - Design tokens
 * - Base typography
 * - Layout grid
 * - Core button and form styles
 * - Header styles
 */

/* === PERFORMANCE OPTIMIZATIONS === */
/* 
 * Future considerations:
 * 1. CSS containment for component isolation
 * 2. Layer cascade for better specificity management
 * 3. View transitions API support
 * 4. Color scheme preference handling
 */

/* === CSS LAYERS (Future Enhancement) === */
/*
@layer reset, base, layout, components, pages, utilities, interactions;

@layer reset {
  @import url('./base/tokens.css');
  @import url('./base/base.css');
}

@layer layout {
  @import url('./layout/grid.css');
  @import url('./layout/header.css');
  @import url('./layout/footer.css');
}

@layer components {
  @import url('./components/buttons.css');
  @import url('./components/forms.css');
  @import url('./components/tabs.css');
  @import url('./components/rating.css');
}

@layer utilities {
  @import url('./utils/utilities.css');
  @import url('./utils/modern-utilities.css');
}
*/

/* === LEGACY COMPATIBILITY === */
/* Ensure existing selectors continue to work */

/* Form enhancements for backward compatibility */
select:not(.no-style),
input:not(.no-style) {
    transition: var(--transition-colors);
}

/* Button enhancements */
button:not(.no-style) {
    transition: var(--transition-colors);
}

/* Loading state improvements */
.loading,
.skeleton {
    pointer-events: none;
    user-select: none;
}

/* Enhanced focus management */
.js-focus-visible :focus:not(.focus-visible) {
    outline: none;
}

/* === PROGRESSIVE ENHANCEMENT === */
/* Enhanced features for modern browsers */

/* Container queries support */
@supports (container-type: inline-size) {
    .adaptive-container {
        container-type: inline-size;
    }
}

/* Subgrid support */
@supports (grid-template-columns: subgrid) {
    .enhanced-grid {
        display: grid;
        grid-template-columns: subgrid;
    }
}

/* View transitions API */
@supports (view-transition-name: main) {

    ::view-transition-old(main),
    ::view-transition-new(main) {
        animation-duration: var(--transition-slow);
    }
}

/* === PRINT OPTIMIZATIONS === */
@media print {

    /* Hide interactive elements */
    .no-print,
    .tab-btn,
    .user-rating,
    nav,
    .spinner {
        display: none !important;
    }

    /* Ensure text is readable */
    * {
        color: #000000 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    /* Optimize layout for print */
    .tab-content {
        box-shadow: none !important;
        border: 1px solid #cccccc !important;
    }

    /* Page breaks */
    .page-break {
        page-break-before: always;
        @import url('./components/logo.css');

        /* Enhanced Components */
        @import url('./components/skeleton.css');
        @import url('./components/tabs.css');
        @import url('./components/rating.css');

        /* === 5. PAGE-SPECIFIC STYLES === */
        @import url('./pages/home.css');
        @import url('./pages/auth.css');
        @import url('./pages/profile.css');
        @import url('./pages/policies.css');
        @import url('./pages/error.css');
        @import url('./pages/plu-summary.css');
        @import url('./pages/documentation.css');

        /* === 6. UTILITIES === */
        /* Legacy utilities first for backward compatibility */
        @import url('./utils/utilities.css');
        /* Modern utilities for enhanced functionality */
        @import url('./utils/modern-utilities.css');

        /* === 7. ANIMATIONS & INTERACTIONS === */
        @import url('./utils/animations.css');
        page-break-inside: avoid;
    }
}

/* === ACCESSIBILITY ENHANCEMENTS === */
/* High contrast mode improvements */
@media (prefers-contrast: high) {
    :root {
        --color-border-primary: #000000;
        --color-border-secondary: #000000;
    }

    .tab-btn.active::after {
        height: 3px;
    }

    .rating-star,
    .star-btn.active {
        filter: contrast(2);
    }
}

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

    .skeleton::before {
        animation: none;
    }
}

/* === DARK MODE SYSTEM === */
/* Automatic dark mode based on system preference */
@media (prefers-color-scheme: dark) {

    /* Additional dark mode specific adjustments */
    img:not([src*=".svg"]) {
        filter: brightness(0.8) contrast(1.2);
    }

    /* Ensure form controls are visible */
    select,
    input,
    textarea {
        color-scheme: dark;
    }
}

/* Manual dark mode toggle support (future enhancement) */
[data-theme="dark"] {
    color-scheme: dark;
}

[data-theme="light"] {
    color-scheme: light;
}

/* === BROWSER SPECIFIC FIXES === */
/* Safari specific fixes */
@supports (-webkit-appearance: none) {

    /* Safari form control styling */
    select,
    input {
        -webkit-appearance: none;
    }
}

/* Firefox specific fixes */
@-moz-document url-prefix() {

    /* Firefox specific styles */
    .tabs {
        scrollbar-width: thin;
    }
}

/* === DEVELOPMENT HELPERS === */
/* Enable in development for debugging */
/*
.debug * {
  outline: 1px solid red;
}

.debug-grid {
  background-image: 
    linear-gradient(to right, rgba(255, 0, 0, 0.1) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 0, 0, 0.1) 1px, transparent 1px);
  background-size: 20px 20px;
}
*/

/* Enhanced UI Components */
.enhanced-select-wrapper {
    position: relative;
}

.select-wrapper {
    position: relative;
}

.field-error {
    color: var(--danger-color);
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

.field-error.hidden {
    display: none;
}

/* Toast Notifications */
.toast-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1000;
}

.toast {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
    border-radius: 0.375rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    min-width: 300px;
    max-width: 400px;
}

.toast--show {
    transform: translateX(0);
}

.toast--info {
    background-color: var(--info-bg);
    color: var(--primary-black);
}

.toast--success {
    background-color: #d4edda;
    color: #155724;
}

.toast--warning {
    background-color: var(--warning-bg);
    color: var(--warning-color);
}

.toast--error {
    background-color: var(--danger-bg);
    color: var(--danger-color);
}

.toast__icon {
    margin-right: 0.5rem;
    font-weight: bold;
}

.toast__close {
    margin-left: auto;
    background: none;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    opacity: 0.7;
}

.toast__close:hover {
    opacity: 1;
}

/* Progress Bar */
.progress-wrapper {
    margin-bottom: 1rem;
}

.progress-label {
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.progress-container {
    background-color: var(--accent-gray);
    border-radius: 0.25rem;
    overflow: hidden;
}

.progress-bar {
    height: 0.5rem;
    background-color: var(--accent-gray);
    position: relative;
}

.progress-fill {
    height: 100%;
    background-color: var(--primary-black);
    transition: width 0.3s ease;
}

.progress-bar--animated .progress-fill {
    background-image: linear-gradient(45deg,
            rgba(255, 255, 255, 0.15) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255, 255, 255, 0.15) 50%,
            rgba(255, 255, 255, 0.15) 75%,
            transparent 75%,
            transparent);
    background-size: 1rem 1rem;
    animation: progress-bar-stripes 1s linear infinite;
}

@keyframes progress-bar-stripes {
    0% {
        background-position: 1rem 0;
    }

    100% {
        background-position: 0 0;
    }
}

.progress-percentage {
    font-size: 0.875rem;
    margin-top: 0.25rem;
    display: block;
}

/* Modal */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal-overlay--show {
    opacity: 1;
    visibility: visible;
}

.modal {
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    transform: scale(0.95);
    transition: transform 0.3s ease;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-overlay--show .modal {
    transform: scale(1);
}

.modal--small {
    width: 90%;
    max-width: 400px;
}

.modal--medium {
    width: 90%;
    max-width: 600px;
}

.modal--large {
    width: 90%;
    max-width: 800px;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-gray);
}

.modal-title {
    margin: 0;
    font-size: 1.25rem;
}

.modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.25rem;
    line-height: 1;
}

.modal-body {
    padding: 1.5rem;
}

.modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-gray);
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.modal-open {
    overflow: hidden;
}

/* Responsive Design */
@media (max-width: 768px) {
    .toast-container {
        top: 0.5rem;
        right: 0.5rem;
        left: 0.5rem;
    }

    .toast {
        min-width: auto;
        max-width: none;
    }

    .modal--small,
    .modal--medium,
    .modal--large {
        width: 95%;
        margin: 1rem;
    }
}