/* Public/css/main.css */

/**
 * FourthSpace Web UI - Main Stylesheet
 *
 * This file orchestrates all CSS imports using @layer for cascade control.
 * Layer order (lowest to highest specificity):
 *   1. reset    - Browser normalization
 *   2. base     - Variables and base element styles
 *   3. layout   - Page structure and grid system
 *   4. components - UI components (buttons, cards, forms, etc.)
 *   5. utilities - Single-purpose utility classes (highest specificity)
 *
 * Mobile-first approach: Base styles target 320px+, responsive overrides at breakpoints.
 * Dark mode: All colors use CSS variables that adapt to prefers-color-scheme.
 *
 * @see https://developer.mozilla.org/en-US/docs/Web/CSS/@layer
 */

/* ========== Layer Order Declaration ========== */
/* Declare layer order explicitly to ensure proper cascade */
@layer reset, base, layout, components, utilities;

/* ========== Reset Layer ========== */
/* Browser normalization - removes default styles for consistent baseline */
@import url('reset.css');

/* ========== Base Layer ========== */
/* Design system variables and base element styling */
@import url('variables.css');
@import url('base.css');

/* ========== Layout Layer ========== */
/* Page structure, grid system, navigation */
@import url('layout.css');

/* ========== Components Layer ========== */
/* UI components in alphabetical order */
@import url('components/buttons.css');
@import url('components/cards.css');
@import url('components/forms.css');
@import url('components/indicators.css'); /* badges, alerts, status */
@import url('components/member-avatar.css');
@import url('components/mobile-app-banner.css');
@import url('components/overlays.css'); /* modals, dropdowns, popovers */
@import url('components/pagination.css');
@import url('components/profile.css');
@import url('components/tables.css');
@import url('components/timezone-picker.css');
@import url('components/user-avatar.css');

/* ========== Utilities Layer ========== */
/* Single-purpose utility classes - highest specificity */
@import url('utilities.css');

/* ========== View Transitions API ========== */
/* Global configuration for smooth page transitions */
/* Requires JavaScript opt-in: document.startViewTransition() */
@view-transition {
    navigation: auto; /* Enable view transitions for same-origin navigations */
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    /* Disable all animations and transitions for users who prefer reduced motion */
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* Disable view transitions */
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
        animation: none !important;
    }
}

/* ========== Print Styles ========== */
/* Print-specific overrides */
@media print {
    @page {
        margin: 1cm;
    }

    /* Hide interactive elements when printing */
    .nav,
    .btn,
    .modal-backdrop,
    .dropdown-menu,
    .toast-container {
        display: none !important;
    }

    /* Ensure content is visible */
    body {
        color: black;
        background: white;
    }

    /* Expand collapsed content */
    details {
        open: true;
    }

    /* Show links in print */
    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }

    /* Prevent page breaks inside elements */
    .card,
    .list-group-item,
    pre {
        page-break-inside: avoid;
    }
}