/**
 * Main Stylesheet - LimitedView Portal
 * Imports all CSS modules in correct order
 * British English Standards
 * Version: 1.0.0
 */

/* ============================================
   CSS MODULES IMPORT ORDER
   ============================================ */

/* 1. Design Tokens - Variables first */
@import url('variables.css');

/* 2. CSS Reset - Normalize browser defaults */
@import url('reset.css');

/* 3. Base Styles - Element defaults */
@import url('base.css');

/* 4. Layout System - Grid & Flexbox */
@import url('layout.css');

/* 5. Components - UI components */
@import url('components.css');

/* 5.5. Dashboard - Minimalist dashboard styles */
@import url('dashboard.css');

/* 6. Utilities - Helper classes */
@import url('utilities.css');

/* ============================================
   GLOBAL OVERRIDES
   ============================================ */

/* Flash Messages (Server-Side) - Enhanced version */
.flash-messages-container {
    position: fixed;
    top: var(--spacing-6);
    right: var(--spacing-6);
    z-index: var(--z-notification);
    max-width: 400px;
}

.flash-message {
    padding: var(--spacing-4) var(--spacing-5);
    margin-bottom: var(--spacing-3);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    animation: slideInRight 0.3s ease-out;
}

.flash-success {
    background-color: var(--colour-success);
    color: var(--colour-text-inverse);
}

.flash-error {
    background-color: var(--colour-error);
    color: var(--colour-text-inverse);
}

.flash-warning {
    background-color: var(--colour-warning);
    color: var(--colour-text-inverse);
}

.flash-info {
    background-color: var(--colour-info);
    color: var(--colour-text-inverse);
}

.flash-close {
    background: none;
    border: none;
    color: var(--colour-text-inverse);
    font-size: var(--font-size-xl);
    cursor: pointer;
    padding: 0;
    margin-left: var(--spacing-4);
    opacity: 0.8;
    transition: opacity var(--transition-fast);
}

.flash-close:hover {
    opacity: 1;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* ============================================
   RESPONSIVE OVERRIDES
   ============================================ */

@media (max-width: 767px) {
    .flash-messages-container {
        left: var(--spacing-4);
        right: var(--spacing-4);
        max-width: none;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    /* Hide navigation and non-essential elements */
    .navbar,
    .sidebar,
    .flash-messages-container,
    .btn,
    .no-print {
        display: none !important;
    }

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

    /* Remove shadows and borders for print */
    .card,
    .table {
        box-shadow: none;
        border: 1px solid #ccc;
    }

    /* Page breaks */
    .page-break {
        page-break-after: always;
    }

    .avoid-break {
        page-break-inside: avoid;
    }
}

/* ============================================
   ACCESSIBILITY ENHANCEMENTS
   ============================================ */

/* Focus visible for keyboard navigation */
*:focus-visible {
    outline: 2px solid var(--colour-primary);
    outline-offset: 2px;
}

/* Skip to main content link */
.skip-to-main {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--colour-primary);
    color: var(--colour-text-inverse);
    padding: var(--spacing-2) var(--spacing-4);
    text-decoration: none;
    z-index: var(--z-tooltip);
}

.skip-to-main:focus {
    top: 0;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    :root {
        --colour-border: #000000;
        --colour-border-dark: #000000;
    }

    .btn {
        border: 2px solid currentColor;
    }
}

/* Reduced motion support */
@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;
    }
}

/* ============================================
   CUSTOM SCROLLBAR (Webkit browsers)
   ============================================ */

::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: var(--colour-bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--colour-border-dark);
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--colour-border-darker);
}

/* ============================================
   SELECTION HIGHLIGHT
   ============================================ */

::selection {
    background-color: var(--colour-primary-lighter);
    color: var(--colour-text-primary);
}

::-moz-selection {
    background-color: var(--colour-primary-lighter);
    color: var(--colour-text-primary);
}

/* ============================================
   SMOOTH SCROLL
   ============================================ */

html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* ============================================
   CONTENT WIDTH CONSTRAINTS
   ============================================ */

.prose {
    max-width: 65ch;
    line-height: var(--line-height-relaxed);
}

.prose p {
    margin-bottom: var(--spacing-5);
}

.prose h2 {
    margin-top: var(--spacing-10);
    margin-bottom: var(--spacing-4);
}

.prose h3 {
    margin-top: var(--spacing-8);
    margin-bottom: var(--spacing-3);
}

.prose ul,
.prose ol {
    margin-bottom: var(--spacing-5);
    padding-left: var(--spacing-6);
}

.prose li {
    margin-bottom: var(--spacing-2);
}