/**
 * ╔═══════════════════════════════════════════════════════════════════════════╗
 * ║  NEOMORPH ORANGE PRO - Professional RTL-First CSS Framework               ║
 * ║  Version: 2.2.0                                                           ║
 * ║  Build Date: 2024                                                         ║
 * ║  License: MIT                                                             ║
 * ╚═══════════════════════════════════════════════════════════════════════════╝
 *
 * A professional, RTL-first, neomorphic CSS framework with orange theme.
 * Optimized for Persian (Farsi) web pages.
 *
 * ═══════════════════════════════════════════════════════════════════════════
 * CHANGELOG v2.2.0 (from v2.1.0):
 * ═══════════════════════════════════════════════════════════════════════════
 * 
 * MIGRATION: Header/Navigation System
 * • REMOVED: Old .nav, .nav-*, .nav__* navigation classes (Section 10 legacy)
 * • ADDED: New .neo-header__navbar system replacing .neo-header__search position
 * • ADDED: .neo-header__dropdown--hover for CSS-only hover dropdowns
 * • ADDED: .neo-header__dropdown--click for click-based dropdowns (details/summary)
 * • ADDED: .neo-header__hamburger responsive hamburger button
 * • ADDED: .neo-header__offcanvas off-canvas sidebar for mobile
 * • ENHANCED: Better responsive breakpoints and RTL support
 * • ENHANCED: Improved accessibility with focus states and ARIA support
 * 
 * BACKWARDS COMPATIBILITY:
 * • Old .nav* classes removed - migrate to .neo-header__* equivalents
 * • Existing .neo-header, .neo-header__brand, .neo-header__actions preserved
 * • All other site CSS unchanged
 *
 * ═══════════════════════════════════════════════════════════════════════════
 */


/* ==========================================================================
   SECTION 1: DESIGN TOKENS (CSS Custom Properties)
   ========================================================================== */

:root {
    /* ─────────────────────────────────────────────────────────────────────────
     COLOR TOKENS
     ───────────────────────────────────────────────────────────────────────── */

    /* Primary Orange Palette */
    --color-primary: #F97316;
    --color-primary-50: #FFF7ED;
    --color-primary-100: #FFEDD5;
    --color-primary-200: #FED7AA;
    --color-primary-300: #FDBA74;
    --color-primary-400: #FB923C;
    --color-primary-500: #F97316;
    --color-primary-600: #EA580C;
    --color-primary-700: #C2410C;
    --color-primary-800: #9A3412;
    --color-primary-900: #7C2D12;
    --color-primary-glow: rgba(249, 115, 22, 0.35);
    --color-primary-subtle: rgba(249, 115, 22, 0.12);

    /* Semantic Colors - Light Theme */
    --color-success: #10B981;
    --color-success-light: #D1FAE5;
    --color-success-dark: #059669;
    --color-success-text: #065F46;

    --color-danger: #EF4444;
    --color-danger-gradiant-light: #F73C40;
    --color-danger-gradiant-dark: #EF4444;
    --color-danger-glow: rgba(249, 48, 22, 0.35);
    --color-danger-light: #FEE2E2;
    --color-danger-dark: #DC2626;
    --color-danger-text: #991B1B;

    --color-warning: #F59E0B;
    --color-warning-light: #FEF3C7;
    --color-warning-dark: #D97706;
    --color-warning-text: #92400E;

    --color-info: #3B82F6;
    --color-info-light: #DBEAFE;
    --color-info-dark: #2563EB;
    --color-info-text: #1E40AF;

    /* Neutral Palette */
    --neutral-50: #F9FAFB;
    --neutral-100: #F3F4F6;
    --neutral-200: #E5E7EB;
    --neutral-300: #D1D5DB;
    --neutral-400: #9CA3AF;
    --neutral-500: #6B7280;
    --neutral-600: #4B5563;
    --neutral-700: #374151;
    --neutral-800: #1F2937;
    --neutral-900: #111827;

    /* ─────────────────────────────────────────────────────────────────────────
     SURFACE & BACKGROUND TOKENS (Light Theme)
     ───────────────────────────────────────────────────────────────────────── */
    --bg: #E8EAEC;
    --bg-alt: #DEE2E6;
    --surface-1: #F6F8FA;
    --surface-2: #E8EAEC;
    --surface-3: #D1D5DB;

    /* Text Colors */
    --text: #374151;
    --text-heading: #1F2937;
    --text-muted: #6B7280;
    --text-subtle: #9CA3AF;
    --text-inverse: #FFFFFF;

    /* icons color */
    --icon-color: #9A3412;

    /* ─────────────────────────────────────────────────────────────────────────
     ALERT COLOR TOKENS (Light Theme)
     ───────────────────────────────────────────────────────────────────────── */
    --alert-info-bg: #DBEAFE;
    --alert-info-border: #3B82F6;
    --alert-info-text: #1E40AF;
    --alert-info-icon-bg: #3B82F6;
    --alert-info-glow: rgba(59, 130, 246, 0.15);

    --alert-success-bg: #D1FAE5;
    --alert-success-border: #10B981;
    --alert-success-text: #065F46;
    --alert-success-icon-bg: #10B981;
    --alert-success-glow: rgba(16, 185, 129, 0.15);

    --alert-warning-bg: #FEF3C7;
    --alert-warning-border: #F59E0B;
    --alert-warning-text: #92400E;
    --alert-warning-icon-bg: #F59E0B;
    --alert-warning-glow: rgba(245, 158, 11, 0.15);

    --alert-danger-bg: #FEE2E2;
    --alert-danger-border: #EF4444;
    --alert-danger-text: #991B1B;
    --alert-danger-icon-bg: #EF4444;
    --alert-danger-glow: rgba(239, 68, 68, 0.15);

    /* ─────────────────────────────────────────────────────────────────────────
     PRESENCE INDICATOR COLORS (Light Theme)
     ───────────────────────────────────────────────────────────────────────── */
    --presence-online: #22C55E;
    --presence-away: #F59E0B;
    --presence-busy: #EF4444;
    --presence-offline: #9CA3AF;

    /* ─────────────────────────────────────────────────────────────────────────
     TAG/CHIP COLORS (Light Theme)
     ───────────────────────────────────────────────────────────────────────── */
    --tag-info-bg: linear-gradient(135deg, #DBEAFE 0%, #BFDBFE 100%);
    --tag-info-text: #1E40AF;
    --tag-success-bg: linear-gradient(135deg, #D1FAE5 0%, #A7F3D0 100%);
    --tag-success-text: #065F46;
    --tag-danger-bg: linear-gradient(135deg, #FEE2E2 0%, #FECACA 100%);
    --tag-danger-text: #991B1B;
    --tag-muted-bg: linear-gradient(135deg, #F3F4F6 0%, #E5E7EB 100%);
    --tag-muted-text: #4B5563;

    /* ─────────────────────────────────────────────────────────────────────────
     NEOMORPHIC SHADOW TOKENS (Light Theme)
     ───────────────────────────────────────────────────────────────────────── */

    /* Outer shadows (raised elements) */
    --shadow-soft:
        6px 6px 12px rgba(166, 180, 200, 0.4),
        -6px -6px 12px rgba(255, 255, 255, 0.9);

    --shadow-medium:
        10px 10px 20px rgba(166, 180, 200, 0.45),
        -10px -10px 20px rgba(255, 255, 255, 0.92);

    --shadow-strong:
        16px 16px 32px rgba(166, 180, 200, 0.5),
        -16px -16px 32px rgba(255, 255, 255, 0.95);

    /* Inset shadows (pressed/concave elements) */
    --shadow-inset:
        inset 4px 4px 8px rgba(166, 180, 200, 0.35),
        inset -4px -4px 8px rgba(255, 255, 255, 0.85);

    --shadow-inset-deep:
        inset 6px 6px 14px rgba(166, 180, 200, 0.45),
        inset -6px -6px 14px rgba(255, 255, 255, 0.9);

    /* Focus shadow */
    --shadow-focus: 0 0 0 4px var(--color-primary-subtle);
    --neo-alert-focus: 0 0 0 4px var(--color-primary-subtle);

    /* Glow effects */
    --shadow-glow-primary: 0 8px 32px var(--color-primary-glow);

    /* ─────────────────────────────────────────────────────────────────────────
     HEADER-SPECIFIC TOKENS (New in v2.2.0)
     ───────────────────────────────────────────────────────────────────────── */
    --neo-header-height: 72px;
    --neo-header-mobile-height: 64px;
    --neo-header-dropdown-min-width: 200px;
    --neo-header-offcanvas-width: 300px;
    --neo-header-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --neo-header-dropdown-offset: var(--space-2);

    /* ─────────────────────────────────────────────────────────────────────────
     SPACING SCALE
     ───────────────────────────────────────────────────────────────────────── */
    --space-0: 0;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 2.5rem;
    --space-8: 3rem;
    --space-9: 4rem;
    --space-10: 5rem;

    /* ─────────────────────────────────────────────────────────────────────────
     BORDER RADIUS TOKENS
     ───────────────────────────────────────────────────────────────────────── */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-2xl: 32px;
    --radius-pill: 9999px;
    --radius-circle: 50%;

    /* ─────────────────────────────────────────────────────────────────────────
     TYPOGRAPHY SCALE
     ───────────────────────────────────────────────────────────────────────── */
    --fs-xs: 0.75rem;
    --fs-sm: 0.875rem;
    --fs-base: 1rem;
    --fs-lg: 1.125rem;
    --fs-xl: 1.25rem;
    --fs-2xl: 1.5rem;
    --fs-3xl: 1.875rem;
    --fs-4xl: 2.25rem;
    --fs-5xl: 3rem;

    /* Line Heights */
    --lh-tight: 1.25;
    --lh-snug: 1.375;
    --lh-normal: 1.5;
    --lh-relaxed: 1.625;
    --lh-loose: 1.8;

    /* Font Weights */
    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extrabold: 800;
    --fw-black: 900;

    /* Font Family */
    --font-family: 'Peyda', 'Noto Naskh Arabic', 'Tahoma', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-family-mono: 'Peyda', ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace;

    /* ─────────────────────────────────────────────────────────────────────────
     LAYOUT TOKENS
     ───────────────────────────────────────────────────────────────────────── */
    --container-sm: 540px;
    --container-md: 720px;
    --container-lg: 960px;
    --container-xl: 1140px;
    --container-2xl: 1320px;

    /* ─────────────────────────────────────────────────────────────────────────
     TRANSITION TOKENS
     ───────────────────────────────────────────────────────────────────────── */
    --transition-fast: 0.15s ease;
    --transition-base: 0.25s ease;
    --transition-slow: 0.4s ease;
    --transition-bounce: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /* ─────────────────────────────────────────────────────────────────────────
     Z-INDEX SCALE
     ───────────────────────────────────────────────────────────────────────── */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-tooltip: 1060;
    --z-notification: 1070;
    --z-offcanvas: 1080;
}


/* ==========================================================================
   SECTION 2: DARK THEME TOKENS
   ========================================================================== */

/* Auto dark mode based on system preference */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #1a1d21;
        --bg-alt: #22262b;
        --surface-1: #282c33;
        --surface-2: #32373f;
        --surface-3: #3d434d;

        --text: #E5E7EB;
        --text-heading: #F9FAFB;
        --text-muted: #9CA3AF;
        --text-subtle: #6B7280;

        /* icons color */
        /* --icon-color: #FB923C; */
        --icon-color: #F97316;
        /* --icon-color: #FDBA74; */

        /* Dark neomorphic shadows */
        --shadow-soft:
            6px 6px 12px rgba(0, 0, 0, 0.5),
            -6px -6px 12px rgba(60, 65, 75, 0.25);

        --shadow-medium:
            10px 10px 20px rgba(0, 0, 0, 0.55),
            -10px -10px 20px rgba(60, 65, 75, 0.28);

        --shadow-strong:
            16px 16px 32px rgba(0, 0, 0, 0.6),
            -16px -16px 32px rgba(60, 65, 75, 0.3);

        --shadow-inset:
            inset 4px 4px 8px rgba(0, 0, 0, 0.4),
            inset -4px -4px 8px rgba(60, 65, 75, 0.2);

        --shadow-inset-deep:
            inset 6px 6px 14px rgba(0, 0, 0, 0.5),
            inset -6px -6px 14px rgba(60, 65, 75, 0.25);

        --color-primary-subtle: rgba(249, 115, 22, 0.2);

        /* Dark mode alert colors */
        --alert-info-bg: rgba(59, 130, 246, 0.15);
        --alert-info-border: #60A5FA;
        --alert-info-text: #93C5FD;
        --alert-info-glow: rgba(59, 130, 246, 0.25);

        --alert-success-bg: rgba(16, 185, 129, 0.15);
        --alert-success-border: #34D399;
        --alert-success-text: #6EE7B7;
        --alert-success-glow: rgba(16, 185, 129, 0.25);

        --alert-warning-bg: rgba(245, 158, 11, 0.15);
        --alert-warning-border: #FBBF24;
        --alert-warning-text: #FCD34D;
        --alert-warning-glow: rgba(245, 158, 11, 0.25);

        --alert-danger-bg: rgba(239, 68, 68, 0.15);
        --alert-danger-border: #F87171;
        --alert-danger-text: #FCA5A5;
        --alert-danger-glow: rgba(239, 68, 68, 0.25);

        /* Dark mode presence colors */
        --presence-online: #4ADE80;
        --presence-away: #FBBF24;
        --presence-busy: #F87171;
        --presence-offline: #6B7280;

        /* Dark mode tag colors */
        --tag-info-bg: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(37, 99, 235, 0.2) 100%);
        --tag-info-text: #93C5FD;
        --tag-success-bg: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(5, 150, 105, 0.2) 100%);
        --tag-success-text: #6EE7B7;
        --tag-danger-bg: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(220, 38, 38, 0.2) 100%);
        --tag-danger-text: #FCA5A5;
        --tag-muted-bg: linear-gradient(135deg, rgba(75, 85, 99, 0.3) 0%, rgba(55, 65, 81, 0.3) 100%);
        --tag-muted-text: #D1D5DB;
    }
}

/* Manual dark theme override */
:root[data-theme="dark"],
.theme-dark {
    --bg: #1a1d21;
    --bg-alt: #22262b;
    --surface-1: #282c33;
    --surface-2: #32373f;
    --surface-3: #3d434d;

    --text: #E5E7EB;
    --text-heading: #F9FAFB;
    --text-muted: #9CA3AF;
    --text-subtle: #6B7280;

    --shadow-soft:
        6px 6px 12px rgba(0, 0, 0, 0.5),
        -6px -6px 12px rgba(60, 65, 75, 0.25);

    --shadow-medium:
        10px 10px 20px rgba(0, 0, 0, 0.55),
        -10px -10px 20px rgba(60, 65, 75, 0.28);

    --shadow-strong:
        16px 16px 32px rgba(0, 0, 0, 0.6),
        -16px -16px 32px rgba(60, 65, 75, 0.3);

    --shadow-inset:
        inset 4px 4px 8px rgba(0, 0, 0, 0.4),
        inset -4px -4px 8px rgba(60, 65, 75, 0.2);

    --shadow-inset-deep:
        inset 6px 6px 14px rgba(0, 0, 0, 0.5),
        inset -6px -6px 14px rgba(60, 65, 75, 0.25);

    --color-primary-subtle: rgba(249, 115, 22, 0.2);

    /* Dark mode alert colors */
    --alert-info-bg: rgba(59, 130, 246, 0.15);
    --alert-info-border: #60A5FA;
    --alert-info-text: #93C5FD;
    --alert-info-glow: rgba(59, 130, 246, 0.25);

    --alert-success-bg: rgba(16, 185, 129, 0.15);
    --alert-success-border: #34D399;
    --alert-success-text: #6EE7B7;
    --alert-success-glow: rgba(16, 185, 129, 0.25);

    --alert-warning-bg: rgba(245, 158, 11, 0.15);
    --alert-warning-border: #FBBF24;
    --alert-warning-text: #FCD34D;
    --alert-warning-glow: rgba(245, 158, 11, 0.25);

    --alert-danger-bg: rgba(239, 68, 68, 0.15);
    --alert-danger-border: #F87171;
    --alert-danger-text: #FCA5A5;
    --alert-danger-glow: rgba(239, 68, 68, 0.25);

    --presence-online: #4ADE80;
    --presence-away: #FBBF24;
    --presence-busy: #F87171;
    --presence-offline: #6B7280;

    --tag-info-bg: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(37, 99, 235, 0.2) 100%);
    --tag-info-text: #93C5FD;
    --tag-success-bg: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(5, 150, 105, 0.2) 100%);
    --tag-success-text: #6EE7B7;
    --tag-danger-bg: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(220, 38, 38, 0.2) 100%);
    --tag-danger-text: #FCA5A5;
    --tag-muted-bg: linear-gradient(135deg, rgba(75, 85, 99, 0.3) 0%, rgba(55, 65, 81, 0.3) 100%);
    --tag-muted-text: #D1D5DB;
}


/* ==========================================================================
   SECTION 3: HIGH CONTRAST MODE
   ========================================================================== */

@media (prefers-contrast: more) {
    :root {
        --text: #000000;
        --text-heading: #000000;
        --bg: #FFFFFF;
        --surface-1: #FFFFFF;
        --color-primary: #C2410C;
        --shadow-soft: 0 0 0 2px var(--text);
        --shadow-medium: 0 0 0 2px var(--text);
    }
}

:root[data-contrast="high"] {
    --text: #000000;
    --text-heading: #000000;
    --bg: #FFFFFF;
    --surface-1: #FFFFFF;
    --color-primary: #C2410C;
    --shadow-soft: 0 0 0 2px var(--text);
    --shadow-medium: 0 0 0 2px var(--text);
}

:root[data-theme="dark"][data-contrast="high"] {
    --text: #FFFFFF;
    --text-heading: #FFFFFF;
    --bg: #000000;
    --surface-1: #111111;
}


/* ==========================================================================
   SECTION 4: CSS RESET & BASE STYLES
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    font-family: var(--font-family);
    font-size: var(--fs-base);
    line-height: var(--lh-loose);
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    direction: rtl;
    text-align: right;
}

[dir="ltr"] body,
.ltr {
    direction: ltr;
    text-align: left;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--text-heading);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    text-wrap: balance;
}

h1 {
    font-size: var(--fs-4xl);
}

h2 {
    font-size: var(--fs-3xl);
}

h3 {
    font-size: var(--fs-2xl);
}

h4 {
    font-size: var(--fs-xl);
}

h5 {
    font-size: var(--fs-lg);
}

h6 {
    font-size: var(--fs-base);
}

ul[role="list"],
ol[role="list"] {
    list-style: none;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-primary);
}

.btn a:hover {
    color: inherit;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

input,
button,
textarea,
select {
    font: inherit;
    color: inherit;
}

textarea {
    resize: vertical;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
}

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

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* ==========================================================================
   SECTION 5: ACCESSIBILITY UTILITIES
   ========================================================================== */

.skip-link {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    padding: var(--space-3) var(--space-5);
    background: var(--color-primary);
    color: var(--text-inverse);
    font-weight: var(--fw-bold);
    border-radius: var(--radius-md);
    z-index: 9999;
    transition: top var(--transition-fast);
}

.skip-link:focus {
    top: var(--space-4);
    outline: 3px solid var(--text-inverse);
    outline-offset: 2px;
}

.sr-only,
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.sr-only-focusable:focus,
.sr-only-focusable:active {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

:focus {
    outline: none;
}

:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
    box-shadow: var(--shadow-focus);
}


/* ==========================================================================
   SECTION 6: LAYOUT SYSTEM
   ========================================================================== */

.container {
    width: 100%;
    max-width: var(--container-2xl);
    margin-inline: auto;
    padding-inline: var(--space-4);
}

.container-md {
    width: 100%;
    max-width: var(--container-md);
    margin-inline: auto;
    padding-inline: var(--space-4);
}

@media (min-width: 576px) {
    .container {
        max-width: var(--container-sm);
    }

    .container-md {
        max-width: var(--container-sm);
    }
}

@media (min-width: 768px) {
    .container {
        max-width: var(--container-md);
    }

    .container-md {
        max-width: var(--container-md);
    }
}

@media (min-width: 992px) {
    .container {
        max-width: var(--container-lg);
    }

    .container-md {
        max-width: var(--container-md);
    }
}

@media (min-width: 1200px) {
    .container {
        max-width: var(--container-xl);
    }

    .container-md {
        max-width: var(--container-md);
    }
}

@media (min-width: 1400px) {
    .container {
        max-width: var(--container-2xl);
    }

    .container-md {
        max-width: var(--container-md);
    }
}

.container--fluid {
    max-width: 100%;
}

.grid {
    display: grid;
}

.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

.grid-auto {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.gap-1 {
    gap: var(--space-1);
}

.gap-2 {
    gap: var(--space-2);
}

.gap-3 {
    gap: var(--space-3);
}

.gap-4 {
    gap: var(--space-4);
}

.gap-5 {
    gap: var(--space-5);
}

.gap-6 {
    gap: var(--space-6);
}

@media (max-width: 991px) {

    .grid-cols-3,
    .grid-cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {

    .grid-cols-2,
    .grid-cols-3,
    .grid-cols-4 {
        grid-template-columns: 1fr;
    }
}

.d-flex {
    display: flex;
}

.d-inline-flex {
    display: inline-flex;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-nowrap {
    flex-wrap: nowrap;
}

.flex-column {
    flex-direction: column;
}

.flex-row {
    flex-direction: row;
}

.justify-start {
    justify-content: flex-start;
}

.justify-end {
    justify-content: flex-end;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.justify-around {
    justify-content: space-around;
}

.justify-evenly {
    justify-content: space-evenly;
}

.items-start {
    align-items: flex-start;
}

.items-end {
    align-items: flex-end;
}

.items-center {
    align-items: center;
}

.items-baseline {
    align-items: baseline;
}

.items-stretch {
    align-items: stretch;
}

.flex-1 {
    flex: 1 1 0%;
}

.flex-auto {
    flex: 1 1 auto;
}

.flex-none {
    flex: none;
}

.stack {
    display: flex;
    flex-direction: column;
}

.row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
}

.col {
    flex: 1;
    min-width: 0;
}


/* ==========================================================================
   SECTION 7: BUTTONS
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    line-height: 1;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    border: none;
    border-radius: var(--radius-md);
    background: var(--surface-1);
    color: var(--text);
    box-shadow: var(--shadow-soft);
    min-height: 44px;
    min-width: 44px;
    transition:
        transform var(--transition-fast),
        box-shadow var(--transition-fast),
        background var(--transition-fast),
        color var(--transition-fast);
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
}

.btn:active {
    transform: translateY(0);
    box-shadow: var(--shadow-inset);
}

.btn:disabled,
.btn.is-disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

.btn--primary {
    background: linear-gradient(135deg, var(--color-primary-400), var(--color-primary-600));
    color: var(--text-inverse);
    box-shadow:
        var(--shadow-soft),
        0 4px 16px var(--color-primary-glow);
}

.btn--primary:hover {
    background: linear-gradient(135deg, var(--color-primary-500), var(--color-primary-700));
    box-shadow:
        var(--shadow-medium),
        0 8px 24px var(--color-primary-glow);
}

.btn--primary:active {
    box-shadow: var(--shadow-inset);
}

.btn--danger {
    background: linear-gradient(135deg, var(--color-danger-gradiant-light), var(--color-danger-gradiant-dark));
    color: var(--text-inverse);
    box-shadow:
        var(--shadow-soft),
        0 4px 16px var(--color-danger-glow);
}

.btn--danger:hover {
    background: linear-gradient(135deg, var(--color-danger-gradiant-light), var(--color-danger-gradiant-dark));
    color: var(--text-inverse);
    box-shadow:
        var(--shadow-soft),
        0 4px 16px var(--color-danger-glow);
}

.btn--danger:active {
    box-shadow: var(--shadow-inset);
}

.btn--secondary {
    background: var(--surface-2);
    color: var(--text);
}

.btn--ghost {
    background: var(--surface-1);
    color: var(--text);
    box-shadow: var(--shadow-soft);
}

.btn--ghost:hover {
    color: var(--color-primary);
}

.btn--outline {
    background: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
    box-shadow: none;
}

.btn--outline:hover {
    background: var(--color-primary-subtle);
    box-shadow: var(--shadow-soft);
}

.btn--link {
    background: transparent;
    color: var(--color-primary);
    box-shadow: none;
    padding: var(--space-2);
    min-height: auto;
}

.btn--link:hover {
    text-decoration: underline;
    transform: none;
    box-shadow: none;
}

.btn--sm {
    padding: var(--space-2) var(--space-3);
    font-size: var(--fs-sm);
    border-radius: var(--radius-sm);
    min-height: 36px;
}

.btn--lg {
    padding: var(--space-4) var(--space-6);
    font-size: var(--fs-lg);
    border-radius: var(--radius-lg);
    min-height: 52px;
}

.btn--icon {
    padding: var(--space-3);
    aspect-ratio: 1;
}

.btn--icon.btn--sm {
    padding: var(--space-2);
}

.btn--icon.btn--lg {
    padding: var(--space-4);
}

.btn--block {
    display: flex;
    width: 100%;
}

.btn-group {
    display: inline-flex;
}

.btn-group .btn {
    border-radius: 0;
}

.btn-group .btn:first-child {
    border-start-start-radius: var(--radius-md);
    border-end-start-radius: var(--radius-md);
}

.btn-group .btn:last-child {
    border-start-end-radius: var(--radius-md);
    border-end-end-radius: var(--radius-md);
}


/* ==========================================================================
   SECTION 8: FORMS & INPUTS
   ========================================================================== */

.form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.form-row {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.form-row>* {
    flex: 1;
    min-width: 200px;
}

.form-label {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--text);
    display: flex;
    /* justify-items: center; */
    align-items: center;
}

.form-label--required::after {
    content: " *";
    color: var(--color-danger);
}

.form-help {
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

.form-error {
    font-size: var(--fs-xs);
    color: var(--color-danger);
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.form-error::before {
    content: "⚠";
}

.input,
.textarea,
.select {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    font-size: var(--fs-base);
    color: var(--text);
    background: var(--bg);
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-inset);
    min-height: 44px;
    transition:
        box-shadow var(--transition-fast),
        border-color var(--transition-fast);
}

.input::placeholder,
.textarea::placeholder {
    color: var(--text-subtle);
}

.input:focus,
.textarea:focus,
.select:focus {
    border-color: var(--color-primary);
    box-shadow:
        var(--shadow-inset-deep),
        0 0 0 3px var(--color-primary-subtle);
    outline: none;
}

.input.is-valid,
.textarea.is-valid {
    border-color: var(--color-success);
}

.input.is-valid:focus,
.textarea.is-valid:focus {
    box-shadow:
        var(--shadow-inset-deep),
        0 0 0 3px rgba(16, 185, 129, 0.2);
}

.input.is-invalid,
.textarea.is-invalid {
    border-color: var(--color-danger);
}

.input.is-invalid:focus,
.textarea.is-invalid:focus {
    box-shadow:
        var(--shadow-inset-deep),
        0 0 0 3px rgba(239, 68, 68, 0.2);
}

.input:disabled,
.textarea:disabled,
.select:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background: var(--surface-3);
}

.textarea {
    min-height: 100px;
    resize: vertical;
}

.select-wrapper {
    position: relative;
}

.select-wrapper::after {
    content: "▼";
    position: absolute;
    top: 50%;
    inset-inline-end: var(--space-4);
    transform: translateY(-50%);
    font-size: var(--fs-xs);
    color: var(--text-muted);
    pointer-events: none;
}

.select {
    appearance: none;
    padding-inline-end: var(--space-8);
    cursor: pointer;
}

.checkbox {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    cursor: pointer;
    user-select: none;
}

.checkbox input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.checkbox__box {
    width: 22px;
    height: 22px;
    border-radius: var(--radius-sm);
    background: var(--bg);
    box-shadow: var(--shadow-inset);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.checkbox__box::after {
    content: "✓";
    font-size: var(--fs-sm);
    color: var(--text-inverse);
    opacity: 0;
    transform: scale(0.5);
    transition: all var(--transition-fast);
}

.checkbox input:checked+.checkbox__box {
    background: linear-gradient(135deg, var(--color-primary-400), var(--color-primary-600));
    box-shadow: var(--shadow-soft);
}

.checkbox input:checked+.checkbox__box::after {
    opacity: 1;
    transform: scale(1);
}

.checkbox input:focus-visible+.checkbox__box {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

.checkbox__label {
    font-size: var(--fs-base);
    color: var(--text);
}

.radio-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.radio {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    cursor: pointer;
    user-select: none;
}

.radio input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.radio__box {
    width: 22px;
    height: 22px;
    border-radius: var(--radius-circle);
    background: var(--bg);
    box-shadow: var(--shadow-inset);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.radio__box::after {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: var(--radius-circle);
    background: var(--color-primary);
    opacity: 0;
    transform: scale(0);
    transition: all var(--transition-fast);
}

.radio input:checked+.radio__box::after {
    opacity: 1;
    transform: scale(1);
}

.radio input:focus-visible+.radio__box {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

.radio__label {
    font-size: var(--fs-base);
    color: var(--text);
}

.switch {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    cursor: pointer;
    user-select: none;
}

.switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.switch__slider {
    position: relative;
    width: 48px;
    height: 26px;
    border-radius: var(--radius-pill);
    background: var(--surface-3);
    box-shadow: var(--shadow-inset);
    transition: all var(--transition-base);
    flex-shrink: 0;
}

.switch__slider::after {
    content: "";
    position: absolute;
    top: 3px;
    inset-inline-start: 3px;
    width: 20px;
    height: 20px;
    border-radius: var(--radius-circle);
    background: var(--surface-1);
    box-shadow: var(--shadow-soft);
    transition: all var(--transition-base);
}

.switch input:checked+.switch__slider {
    background: linear-gradient(135deg, var(--color-primary-400), var(--color-primary-600));
}

.switch input:checked+.switch__slider::after {
    inset-inline-start: calc(100% - 23px);
}

.switch input:focus-visible+.switch__slider {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

.switch__label {
    font-size: var(--fs-base);
    color: var(--text);
}

.search-box {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--bg);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-inset);
    transition: box-shadow var(--transition-fast);
}

.search-box:focus-within {
    box-shadow:
        var(--shadow-inset-deep),
        0 0 0 3px var(--color-primary-subtle);
}

.search-box__icon {
    color: var(--text-muted);
}

.search-box__input {
    flex: 1;
    border: none;
    background: transparent;
    padding: var(--space-2);
    outline: none;
    min-height: 36px;
}


/* ==========================================================================
   SECTION 9: CARDS & SURFACES
   ========================================================================== */

.card {
    background: var(--surface-1);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
    transition:
        transform var(--transition-base),
        box-shadow var(--transition-base);
}

.card__header {
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--surface-3);
}

.card__header h3,
.card__header h4 {
    margin: 0;
    font-size: var(--fs-lg);
}

.card__body {
    padding: var(--space-5);
}

.card__footer {
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--surface-3);
    display: flex;
    gap: var(--space-3);
    justify-content: center;
}

.card--elevated {
    box-shadow: var(--shadow-medium);
}

.card--elevated:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-strong);
}

.card--flat {
    box-shadow: var(--shadow-soft);
}

.card--flat:hover {
    box-shadow: var(--shadow-medium);
}

.card--inset {
    background: var(--bg);
    box-shadow: var(--shadow-inset);
}

.card--accent {
    border-inline-start: 4px solid var(--color-primary);
}

.neo-card {
    background: var(--surface-1);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    box-shadow: var(--shadow-medium);
}


/* ==========================================================================
   SECTION 10: NEO-HEADER SYSTEM (v2.2.0 - Complete Rewrite)
   ═══════════════════════════════════════════════════════════════════════════
   
   MIGRATION NOTE:
   This section replaces the old .nav, .nav-*, .nav__* classes.
   All header/navigation styling now uses .neo-header__* prefix.
   
   Structure:
   - .neo-header (container)
     - .neo-header__inner (layout wrapper)
       - .neo-header__brand (logo + title, right side in RTL)
       - .neo-header__navbar (center navigation)
       - .neo-header__actions (left side in RTL: icons, user menu, hamburger)
   
   Dropdown Types:
   - .neo-header__dropdown--hover (CSS-only, opens on hover)
   - .neo-header__dropdown--click (CSS-only with details/summary)
   
   Mobile:
   - .neo-header__hamburger (toggle button, visible on mobile)
   - .neo-header__offcanvas (sidebar menu, slides from left for RTL)
   
   ========================================================================== */

/* ─────────────────────────────────────────────────────────────────────────
   10.1: Base Header Container
   ───────────────────────────────────────────────────────────────────────── */

.neo-header {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    background: var(--surface-1);
    box-shadow: var(--shadow-soft);
    padding: var(--space-3) 0;
    min-height: var(--neo-header-height);
    display: flex;
    align-items: center;
}

.neo-header__inner {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    width: 100%;
}

/* ─────────────────────────────────────────────────────────────────────────
   10.2: Brand (Right side in RTL)
   ───────────────────────────────────────────────────────────────────────── */

.neo-header__brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    text-decoration: none;
    flex-shrink: 0;
}

.neo-header__brand:hover {
    color: inherit;
}

.neo-header__logo {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-primary-400), var(--color-primary-600));
    color: var(--text-inverse);
    font-weight: var(--fw-bold);
    font-size: var(--fs-lg);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.neo-header__brand:hover .neo-header__logo {
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
}

.neo-header__title {
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    color: var(--text-heading);
    white-space: nowrap;
}

/* ─────────────────────────────────────────────────────────────────────────
   10.3: Navbar (Center - Main Navigation)
   This replaces the old .neo-header__search position
   ───────────────────────────────────────────────────────────────────────── */

.neo-header__navbar {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.neo-header__navbar-list {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    list-style: none;
    margin: 0;
    padding: 0;
}

.neo-header__navbar-item {
    position: relative;
}

/* Basic navbar link styling */
.neo-header__navbar-link,
.neo-header__dropdown-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    font-weight: var(--fw-medium);
    font-size: var(--fs-base);
    color: var(--text);
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    min-height: 44px;
    white-space: nowrap;
    cursor: pointer;
    background: transparent;
    border: none;
}

.neo-header__navbar-link:hover,
.neo-header__dropdown-toggle:hover {
    color: var(--color-primary);
    background: var(--color-primary-subtle);
}

/* Active state for current page */
.neo-header__navbar-item--active>.neo-header__navbar-link,
.neo-header__navbar-item--active>.neo-header__dropdown-toggle {
    color: var(--color-primary);
    background: var(--color-primary-subtle);
}

/* Dropdown arrow indicator */
.neo-header__dropdown-arrow {
    font-size: var(--fs-xs);
    transition: transform var(--transition-fast);
    margin-inline-start: var(--space-1);
}

/* ─────────────────────────────────────────────────────────────────────────
   10.4: Dropdown Menus - Base Styles
   ───────────────────────────────────────────────────────────────────────── */

.neo-header__dropdown-menu {
    position: absolute;
    top: 100%;
    inset-inline-start: 0;
    min-width: var(--neo-header-dropdown-min-width);
    margin-top: var(--neo-header-dropdown-offset);
    padding: var(--space-2);
    background: var(--surface-1);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-strong);
    z-index: var(--z-dropdown);
    list-style: none;

    /* Hidden by default */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition:
        opacity var(--neo-header-transition),
        visibility var(--neo-header-transition),
        transform var(--neo-header-transition);

    /* Prevent pointer events when hidden */
    pointer-events: none;
}

/* Dropdown item styling */
.neo-header__dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    color: var(--text);
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    min-height: 44px;
    white-space: nowrap;
}

.neo-header__dropdown-item:hover {
    background: var(--color-primary-subtle);
    color: var(--color-primary);
}

/* Dropdown divider */
.neo-header__dropdown-divider {
    height: 1px;
    background: var(--surface-3);
    margin: var(--space-2) 0;
    list-style: none;
}

/* ─────────────────────────────────────────────────────────────────────────
   10.5: Hover Dropdown (CSS-Only)
   Opens on :hover and :focus-within - no JavaScript required
   ───────────────────────────────────────────────────────────────────────── */

.neo-header__dropdown--hover:hover>.neo-header__dropdown-menu,
.neo-header__dropdown--hover:focus-within>.neo-header__dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.neo-header__dropdown--hover:hover>.neo-header__dropdown-toggle .neo-header__dropdown-arrow,
.neo-header__dropdown--hover:focus-within>.neo-header__dropdown-toggle .neo-header__dropdown-arrow {
    transform: rotate(180deg);
}

/* Keep menu open when hovering over it */
.neo-header__dropdown--hover .neo-header__dropdown-menu:hover {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

/* ─────────────────────────────────────────────────────────────────────────
   10.6: Click Dropdown (CSS-Only with details/summary)
   Uses native HTML5 details/summary for toggle behavior
   ───────────────────────────────────────────────────────────────────────── */

.neo-header__details {
    position: relative;
}

/* Remove default marker from summary */
.neo-header__details>summary {
    list-style: none;
}

.neo-header__details>summary::-webkit-details-marker {
    display: none;
}

.neo-header__details>summary::marker {
    display: none;
    content: '';
}

/* Position dropdown menu inside details */
.neo-header__dropdown--click .neo-header__dropdown-menu {
    /* Reset position for details context */
    position: absolute;
    top: 100%;
    inset-inline-start: 0;
}

/* Show dropdown when details is open */
.neo-header__details[open]>.neo-header__dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

/* Rotate arrow when open */
.neo-header__details[open]>summary .neo-header__dropdown-arrow {
    transform: rotate(180deg);
}

/* Highlight toggle when open */
.neo-header__details[open]>summary {
    color: var(--color-primary);
    background: var(--color-primary-subtle);
}

/* ─────────────────────────────────────────────────────────────────────────
   10.7: Search Inside Navbar (Optional)
   Can be placed as a navbar item
   ───────────────────────────────────────────────────────────────────────── */

.neo-header__navbar-search {
    margin-inline-start: var(--space-2);
}

.neo-header__search-form {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--bg);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-inset);
    transition: box-shadow var(--transition-fast);
    min-width: 180px;
}

.neo-header__search-form:focus-within {
    box-shadow:
        var(--shadow-inset-deep),
        0 0 0 3px var(--color-primary-subtle);
}

.neo-header__search-icon {
    color: var(--text-muted);
    font-size: var(--fs-sm);
    flex-shrink: 0;
}

.neo-header__search-input {
    flex: 1;
    border: none;
    background: transparent;
    padding: var(--space-1) var(--space-2);
    font-size: var(--fs-sm);
    color: var(--text);
    outline: none;
    min-height: 32px;
    min-width: 100px;
}

.neo-header__search-input::placeholder {
    color: var(--text-subtle);
}

/* ─────────────────────────────────────────────────────────────────────────
   10.8: Actions Area (Left side in RTL)
   Contains icons, notifications, user menu, hamburger
   ───────────────────────────────────────────────────────────────────────── */

.neo-header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-inline-start: auto;
    flex-shrink: 0;
}

/* Icon buttons in header */
.neo-header__icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-lg);
    background: var(--surface-1);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    transition: all var(--transition-fast);
    cursor: pointer;
    border: none;
    color: var(--text);
    position: relative;
}

.neo-header__icon:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
    color: var(--color-primary);
}

.neo-header__icon:active {
    transform: translateY(0);
    box-shadow: var(--shadow-inset);
}

/* Theme toggle icons */
.neo-header__theme-toggle {
    overflow: hidden;
}

.neo-header__theme-icon--light,
.neo-header__theme-icon--dark {
    position: absolute;
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}

/* Light theme: show sun, hide moon */
:root:not([data-theme="dark"]) .neo-header__theme-icon--light {
    opacity: 1;
    transform: scale(1);
}

:root:not([data-theme="dark"]) .neo-header__theme-icon--dark {
    opacity: 0;
    transform: scale(0.5);
}

/* Dark theme: show moon, hide sun */
:root[data-theme="dark"] .neo-header__theme-icon--light {
    opacity: 0;
    transform: scale(0.5);
}

:root[data-theme="dark"] .neo-header__theme-icon--dark {
    opacity: 1;
    transform: scale(1);
}

/* ─────────────────────────────────────────────────────────────────────────
   10.9: Notifications Dropdown
   ───────────────────────────────────────────────────────────────────────── */

.neo-header__notifications {
    position: relative;
}

.neo-header__notifications>summary {
    list-style: none;
}

.neo-header__notifications>summary::-webkit-details-marker {
    display: none;
}

.neo-header__notifications-menu {
    position: absolute;
    top: calc(100% + var(--space-2));
    inset-inline-end: 0;
    width: 340px;
    max-height: 480px;
    overflow: hidden;
    background: var(--surface-1);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-strong);
    z-index: var(--z-dropdown);

    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.95);
    transition: all var(--neo-header-transition);
}

.neo-header__notifications[open]>.neo-header__notifications-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.neo-header__notifications-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4);
    border-bottom: 1px solid var(--surface-3);
}

.neo-header__notifications-header strong {
    font-size: var(--fs-lg);
    color: var(--text-heading);
}

.neo-header__notifications-mark {
    font-size: var(--fs-sm);
    color: var(--color-primary);
}

.neo-header__notifications-list {
    max-height: 320px;
    overflow-y: auto;
    padding: var(--space-2);
}

.neo-header__notifications-item {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    color: var(--text);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.neo-header__notifications-item:hover {
    background: var(--color-primary-subtle);
}

.neo-header__notifications-item--unread {
    background: var(--color-primary-subtle);
    border-inline-start: 3px solid var(--color-primary);
}

.neo-header__notifications-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-2);
    border-radius: var(--radius-md);
    font-size: var(--fs-lg);
    flex-shrink: 0;
}

.neo-header__notifications-content {
    flex: 1;
    min-width: 0;
}

.neo-header__notifications-content strong {
    display: block;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--text-heading);
    margin-bottom: var(--space-1);
}

.neo-header__notifications-content p {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    margin: 0;
    line-height: var(--lh-normal);
    display: -webkit-box;
    line-clamp: 2;
    box-orient: vertical;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.neo-header__notifications-content time {
    font-size: var(--fs-xs);
    color: var(--text-subtle);
}

.neo-header__notifications-footer {
    padding: var(--space-3);
    border-top: 1px solid var(--surface-3);
    text-align: center;
}

.neo-header__notifications-footer a {
    font-size: var(--fs-sm);
    color: var(--color-primary);
    font-weight: var(--fw-medium);
}

/* ─────────────────────────────────────────────────────────────────────────
   10.10: User Menu Dropdown
   ───────────────────────────────────────────────────────────────────────── */

.neo-header__user-menu {
    position: relative;
}

.neo-header__user-menu>summary {
    list-style: none;
}

.neo-header__user-menu>summary::-webkit-details-marker {
    display: none;
}

.neo-header__user-trigger {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--surface-1);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    cursor: pointer;
    transition: all var(--transition-fast);
    min-height: 44px;
}

.neo-header__user-trigger:hover {
    box-shadow: var(--shadow-medium);
    transform: translateY(-1px);
}

.neo-header__user-name {
    font-weight: var(--fw-semibold);
    color: var(--text);
    white-space: nowrap;
}

.neo-header__user-dropdown {
    position: absolute;
    top: calc(100% + var(--space-2));
    inset-inline-end: 0;
    min-width: 240px;
    padding: var(--space-2);
    background: var(--surface-1);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-strong);
    z-index: var(--z-dropdown);

    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.95);
    transition: all var(--neo-header-transition);
}

.neo-header__user-menu[open]>.neo-header__user-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.neo-header__user-menu[open] .neo-header__dropdown-arrow {
    transform: rotate(180deg);
}

.neo-header__user-info {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
}

.neo-header__user-info>div {
    /* flex: 1; */
    min-width: 0;
}

.neo-header__user-info strong {
    display: block;
    font-size: var(--fs-base);
    color: var(--text-heading);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.neo-header__user-info span {
    display: block;
    font-size: var(--fs-sm);
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.neo-header__user-divider {
    height: 1px;
    background: var(--surface-3);
    margin: var(--space-2) 0;
}

.neo-header__user-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    color: var(--text);
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    min-height: 44px;
}

.neo-header__user-item:hover {
    background: var(--color-primary-subtle);
    color: var(--color-primary);
}

.neo-header__user-item--danger:hover {
    background: var(--color-danger-light);
    color: var(--color-danger);
}

/* ─────────────────────────────────────────────────────────────────────────
   10.11: Hamburger Button (Mobile Only)
   ───────────────────────────────────────────────────────────────────────── */

.neo-header__hamburger {
    display: none;
    /* Hidden on desktop */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: var(--space-2);
    background: var(--surface-1);
    border: none;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    cursor: pointer;
    transition: all var(--transition-fast);
    z-index: calc(var(--z-offcanvas) + 1);
}

.neo-header__hamburger:hover {
    box-shadow: var(--shadow-medium);
    transform: translateY(-2px);
}

.neo-header__hamburger:active {
    transform: translateY(0);
    box-shadow: var(--shadow-inset);
}

.neo-header__hamburger-line {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--text);
    border-radius: var(--radius-pill);
    transition: all var(--transition-base);
    transform-origin: center;
}

/* Animated hamburger when open */
.neo-header__hamburger[aria-expanded="true"] .neo-header__hamburger-line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.neo-header__hamburger[aria-expanded="true"] .neo-header__hamburger-line:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.neo-header__hamburger[aria-expanded="true"] .neo-header__hamburger-line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ─────────────────────────────────────────────────────────────────────────
   10.12: Off-Canvas Sidebar (Mobile Menu)
   Slides in from LEFT for RTL layout (content-side alignment)
   ───────────────────────────────────────────────────────────────────────── */

.neo-header__offcanvas {
    position: fixed;
    inset: 0;
    z-index: var(--z-offcanvas);

    /* Hidden by default */
    visibility: hidden;
    pointer-events: none;
}

.neo-header__offcanvas[aria-hidden="false"] {
    visibility: visible;
    pointer-events: auto;
}

/* Backdrop */
.neo-header__offcanvas-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity var(--neo-header-transition);
}

.neo-header__offcanvas[aria-hidden="false"] .neo-header__offcanvas-backdrop {
    opacity: 1;
}

/* Dark mode backdrop */
:root[data-theme="dark"] .neo-header__offcanvas-backdrop {
    background: rgba(0, 0, 0, 0.7);
}

/* Sidebar content - slides from LEFT for RTL */
.neo-header__offcanvas-content {
    position: absolute;
    top: 0;
    bottom: 0;
    inset-inline-start: 0;
    /* Left in RTL */
    width: var(--neo-header-offcanvas-width);
    max-width: 85vw;
    background: var(--surface-1);
    box-shadow: var(--shadow-strong);
    display: flex;
    flex-direction: column;
    overflow-y: auto;

    /* Slide animation */
    transform: translateX(calc(-100% * var(--rtl-multiplier, 1)));
    transition: transform var(--neo-header-transition);
}

/* RTL direction multiplier */
[dir="rtl"] .neo-header__offcanvas-content {
    --rtl-multiplier: -1;
}

[dir="ltr"] .neo-header__offcanvas-content {
    --rtl-multiplier: 1;
}

.neo-header__offcanvas[aria-hidden="false"] .neo-header__offcanvas-content {
    transform: translateX(0);
}

/* Close button - positioned top-right of sidebar */
.neo-header__offcanvas-close {
    position: absolute;
    top: var(--space-3);
    inset-inline-end: var(--space-3);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-2xl);
    color: var(--text-muted);
    background: var(--surface-2);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    z-index: 1;
}

.neo-header__offcanvas-close:hover {
    background: var(--color-danger-light);
    color: var(--color-danger);
}

/* Brand in sidebar */
.neo-header__offcanvas-brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-5);
    padding-top: var(--space-6);
    border-bottom: 1px solid var(--surface-3);
}

/* Search in sidebar */
.neo-header__offcanvas-search {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: var(--space-4);
    padding: var(--space-3);
    background: var(--bg);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-inset);
}

.neo-header__offcanvas-search input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: var(--fs-base);
    color: var(--text);
    outline: none;
    min-height: 36px;
}

.neo-header__offcanvas-search input::placeholder {
    color: var(--text-subtle);
}

/* Navigation in sidebar */
.neo-header__offcanvas-nav {
    flex: 1;
    padding: var(--space-4);
}

.neo-header__offcanvas-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.neo-header__offcanvas-item {
    margin-bottom: var(--space-1);
}

.neo-header__offcanvas-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    font-weight: var(--fw-medium);
    color: var(--text);
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    min-height: 48px;
    cursor: pointer;
    background: transparent;
    border: none;
    width: 100%;
    text-align: inherit;
}

.neo-header__offcanvas-link:hover {
    background: var(--color-primary-subtle);
    color: var(--color-primary);
}

/* Expandable items in sidebar */
.neo-header__offcanvas-details {
    width: 100%;
}

.neo-header__offcanvas-details>summary {
    list-style: none;
}

.neo-header__offcanvas-details>summary::-webkit-details-marker {
    display: none;
}

.neo-header__offcanvas-arrow {
    font-size: var(--fs-sm);
    transition: transform var(--transition-fast);
}

.neo-header__offcanvas-details[open] .neo-header__offcanvas-arrow {
    transform: rotate(180deg);
}

.neo-header__offcanvas-details[open]>summary {
    color: var(--color-primary);
    background: var(--color-primary-subtle);
}

/* Submenu in sidebar */
.neo-header__offcanvas-submenu {
    list-style: none;
    margin: 0;
    padding: var(--space-2) 0;
    padding-inline-start: var(--space-4);
    animation: slideDown var(--transition-fast);
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.neo-header__offcanvas-submenu li {
    margin-bottom: var(--space-1);
}

.neo-header__offcanvas-submenu a {
    display: block;
    padding: var(--space-2) var(--space-4);
    color: var(--text-muted);
    text-decoration: none;
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    transition: all var(--transition-fast);
    min-height: 40px;
    display: flex;
    align-items: center;
}

.neo-header__offcanvas-submenu a:hover {
    background: var(--color-primary-subtle);
    color: var(--color-primary);
}

/* Footer in sidebar */
.neo-header__offcanvas-footer {
    padding: var(--space-4);
    border-top: 1px solid var(--surface-3);
    margin-top: auto;
}

/* ─────────────────────────────────────────────────────────────────────────
   10.13: Responsive Behavior
   ───────────────────────────────────────────────────────────────────────── */

/* Tablet breakpoint (768-991px) */
@media (max-width: 991px) {
    .neo-header__navbar-search {
        display: none;
    }

    .neo-header__search-form {
        min-width: 150px;
    }
}

/* Mobile breakpoint (<768px) */
@media (max-width: 767px) {
    .neo-header {
        min-height: var(--neo-header-mobile-height);
        padding: var(--space-2) 0;
    }

    /* Hide navbar on mobile */
    .neo-header__navbar {
        display: none;
    }

    /* Hide title on mobile */
    .neo-header__title {
        display: none;
    }

    /* Hide user name on mobile */
    .neo-header__user-name {
        display: none;
    }

    /* Show hamburger on mobile */
    .neo-header__hamburger {
        display: flex;
    }

    /* Adjust notifications dropdown width on mobile */
    .neo-header__notifications-menu {
        width: calc(100vw - var(--space-8));
        inset-inline-end: calc(-1 * var(--space-2));
    }

    /* Adjust user dropdown on mobile */
    .neo-header__user-dropdown {
        min-width: 200px;
    }

    /* Smaller gaps on mobile */
    .neo-header__actions {
        gap: var(--space-1);
    }
}

/* Very small screens (<400px) */
@media (max-width: 400px) {
    .neo-header__icon {
        width: 40px;
        height: 40px;
    }

    .neo-header__hamburger {
        width: 40px;
        height: 40px;
    }

    .neo-header__user-trigger {
        padding: var(--space-1) var(--space-2);
    }
}


/* ==========================================================================
   SECTION 11: ACCORDION & TABS (CSS-Only)
   ========================================================================== */

.accordion {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.accordion__item {
    background: var(--bg);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
}

.accordion__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4);
    font-weight: var(--fw-semibold);
    color: var(--text);
    cursor: pointer;
    list-style: none;
    transition: background var(--transition-fast);
    min-height: 44px;
}

.accordion__header::-webkit-details-marker {
    display: none;
}

.accordion__header::after {
    content: "+";
    font-size: var(--fs-xl);
    font-weight: var(--fw-normal);
    color: var(--color-primary);
    transition: transform var(--transition-fast);
}

.accordion__item[open] .accordion__header::after {
    content: "−";
}

.accordion__header:hover {
    background: var(--surface-1);
}

.accordion__content {
    padding: 0 var(--space-4) var(--space-4);
    color: var(--text-muted);
    animation: accordionOpen var(--transition-fast);
}

@keyframes accordionOpen {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tabs {
    background: var(--surface-1);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
}

.tabs__input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.tabs__nav {
    display: flex;
    background: var(--bg);
    padding: var(--space-2);
    gap: var(--space-2);
}

.tabs__tab {
    flex: 1;
    padding: var(--space-3) var(--space-4);
    text-align: center;
    font-weight: var(--fw-medium);
    color: var(--text-muted);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tabs__tab:hover {
    color: var(--color-primary);
    background: var(--surface-1);
}

.tabs__panels {
    padding: var(--space-5);
}

.tabs__panel {
    display: none;
    animation: tabFadeIn var(--transition-fast);
}

@keyframes tabFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.tabs__input:nth-of-type(1):checked~.tabs__nav .tabs__tab:nth-of-type(1),
.tabs__input:nth-of-type(2):checked~.tabs__nav .tabs__tab:nth-of-type(2),
.tabs__input:nth-of-type(3):checked~.tabs__nav .tabs__tab:nth-of-type(3),
.tabs__input:nth-of-type(4):checked~.tabs__nav .tabs__tab:nth-of-type(4),
.tabs__input:nth-of-type(5):checked~.tabs__nav .tabs__tab:nth-of-type(5) {
    color: var(--color-primary);
    background: var(--surface-1);
    box-shadow: var(--shadow-soft);
}

.tabs__input:nth-of-type(1):checked~.tabs__panels .tabs__panel:nth-of-type(1),
.tabs__input:nth-of-type(2):checked~.tabs__panels .tabs__panel:nth-of-type(2),
.tabs__input:nth-of-type(3):checked~.tabs__panels .tabs__panel:nth-of-type(3),
.tabs__input:nth-of-type(4):checked~.tabs__panels .tabs__panel:nth-of-type(4),
.tabs__input:nth-of-type(5):checked~.tabs__panels .tabs__panel:nth-of-type(5) {
    display: block;
}


/* ==========================================================================
   SECTION 12: MODAL (CSS-Only using :target)
   ========================================================================== */

.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-modal);
    visibility: hidden;
    opacity: 0;
}

.is_loaded .modal {
    transition:
        visibility 0s var(--transition-base),
        opacity var(--transition-base);
}

.modal:target {
    visibility: visible;
    opacity: 1;
}

.is_loaded .modal:target {
    transition:
        visibility 0s,
        opacity var(--transition-base);
}

.modal__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
}

.modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 0;
}

/* Dark mode modal backdrop */
:root[data-theme="dark"] .modal__backdrop,
.theme-dark .modal__backdrop {
    background: rgba(0, 0, 0, 0.7);
}

.modal__container {
    position: relative;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--surface-1);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-strong);
    z-index: 1;
    transform: translateY(-20px);
}

.is_loaded .modal__container {
    transition: transform var(--transition-base);
}

.modal:target .modal__container {
    transform: translateY(0);
}

.modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--surface-3);
}

.modal__header h3 {
    margin: 0;
    font-size: var(--fs-xl);
}

.modal__close {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-2xl);
    color: var(--text-muted);
    border-radius: var(--radius-circle);
}

.is_loaded .modal__close {
    transition: all var(--transition-fast);
}

.modal__close:hover {
    background: var(--color-danger-light);
    color: var(--color-danger);
}

.modal__body {
    padding: var(--space-5);
}

.modal__footer {
    display: flex;
    gap: var(--space-3);
    justify-content: flex-end;
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--surface-3);
}

.modal--lg .modal__container {
    max-width: 800px;
}

.modal--sm .modal__container {
    max-width: 350px;
}

.modal--fullscreen .modal__container {
    max-width: 100%;
    max-height: 100%;
    border-radius: 0;
}


/* ==========================================================================
   SECTION 13: TABLES
   ========================================================================== */

.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table {
    width: 100%;
    border-collapse: collapse;
    text-align: inherit;
}

.table th,
.table td {
    padding: var(--space-3) var(--space-4);
    vertical-align: middle;
}

.table thead {
    background: var(--bg);
}

.table th {
    font-weight: var(--fw-semibold);
    color: var(--text-muted);
    text-align: inherit;
    border-bottom: 2px solid var(--surface-3);
}

.table tbody tr {
    border-bottom: 1px solid var(--surface-3);
    transition: background var(--transition-fast);
}

.table tbody tr:hover {
    background: var(--color-primary-subtle);
}

.table tbody tr:last-child {
    border-bottom: none;
}

.table--striped tbody tr:nth-child(odd) {
    background: var(--bg);
}

.table--bordered {
    border: 1px solid var(--surface-3);
}

.table--bordered th,
.table--bordered td {
    border: 1px solid var(--surface-3);
}


/* ==========================================================================
   SECTION 14: BADGES & TAGS
   ========================================================================== */

.badge {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-3);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    line-height: 1.5;
    border-radius: var(--radius-pill);
    background: var(--surface-2);
    color: var(--text);
}

.badge--primary {
    background: var(--color-primary-subtle);
    color: var(--color-primary-700);
}

.badge--secondary {
    background: var(--surface-3);
    color: var(--text);
}

.badge--success {
    background: var(--color-success-light);
    color: var(--color-success-dark);
}

.badge--danger {
    background: var(--color-danger-light);
    color: var(--color-danger-dark);
}

.badge--warning {
    background: var(--color-warning-light);
    color: var(--color-warning-dark);
}

.badge--info {
    background: var(--color-info-light);
    color: var(--color-info-dark);
}

.badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* Neo-Tag Component */
.neo-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    line-height: 1.4;
    border-radius: var(--radius-md);
    background: var(--tag-muted-bg);
    color: var(--tag-muted-text);
    box-shadow: var(--shadow-soft);
    transition: all var(--transition-fast);
}

.neo-tag:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-medium);
}

.neo-tag__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-xs);
}

/* Tag variants */
.neo-tag--info {
    background: var(--tag-info-bg);
    color: var(--tag-info-text);
}

.neo-tag--success {
    background: var(--tag-success-bg);
    color: var(--tag-success-text);
}

.neo-tag--danger {
    background: var(--tag-danger-bg);
    color: var(--tag-danger-text);
}

.neo-tag--muted {
    background: var(--tag-muted-bg);
    color: var(--tag-muted-text);
}

.neo-tag--primary {
    background: linear-gradient(135deg, var(--color-primary-100) 0%, var(--color-primary-200) 100%);
    color: var(--color-primary-800);
}

/* Ghost tag */
.neo-tag--ghost {
    background: transparent;
    color: var(--text);
    box-shadow: none;
    border: 1px solid var(--surface-3);
}

.neo-tag--ghost:hover {
    background: var(--surface-1);
    box-shadow: var(--shadow-soft);
}

/* Outline tag */
.neo-tag--outline {
    background: transparent;
    color: var(--color-primary);
    box-shadow: none;
    border: 2px solid var(--color-primary);
}

.neo-tag--outline:hover {
    background: var(--color-primary-subtle);
}

/* Tag sizes */
.neo-tag--sm {
    padding: var(--space-1) var(--space-2);
    font-size: var(--fs-xs);
    border-radius: var(--radius-sm);
}

.neo-tag--lg {
    padding: var(--space-3) var(--space-5);
    font-size: var(--fs-base);
    border-radius: var(--radius-lg);
}

/* Badge Count */
.neo-badge-wrapper {
    position: relative;
}

.neo-badge--count {
    position: absolute;
    top: -4px;
    inset-inline-end: -4px;
    min-width: 20px;
    height: 20px;
    padding: 0 var(--space-1);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    line-height: 20px;
    text-align: center;
    color: var(--text-inverse);
    background: linear-gradient(135deg, var(--color-danger), var(--color-danger-dark));
    border-radius: var(--radius-pill);
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
}


/* ==========================================================================
   SECTION 15: ALERTS
   ========================================================================== */

.neo-alert,
.alert {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    background: var(--surface-1);
    box-shadow: var(--shadow-soft);
    border-inline-start: 4px solid var(--surface-3);
    transition: all var(--transition-fast);
}

.neo-alert__icon,
.alert__icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-circle);
    font-size: var(--fs-sm);
    background: var(--surface-2);
    color: var(--text);
}

.neo-alert__content,
.alert__content {
    flex: 1;
    min-width: 0;
}

.neo-alert__content strong {
    font-weight: var(--fw-bold);
}

.neo-alert__actions {
    display: flex;
    gap: var(--space-2);
    margin-inline-start: var(--space-3);
    flex-shrink: 0;
}

.neo-alert__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    font-size: var(--fs-xl);
    color: var(--text-muted);
    border-radius: var(--radius-circle);
    transition: all var(--transition-fast);
    margin-inline-start: auto;
    flex-shrink: 0;
}

.neo-alert__close:hover {
    background: var(--surface-3);
    color: var(--text);
}

/* Info Alert */
.neo-alert--info,
.alert--info {
    background: var(--alert-info-bg);
    border-color: var(--alert-info-border);
    color: var(--alert-info-text);
}

.neo-alert--info .neo-alert__icon,
.alert--info .alert__icon {
    background: var(--alert-info-icon-bg);
    color: var(--text-inverse);
    box-shadow: 0 4px 12px var(--alert-info-glow);
}

/* Success Alert */
.neo-alert--success,
.alert--success {
    background: var(--alert-success-bg);
    border-color: var(--alert-success-border);
    color: var(--alert-success-text);
}

.neo-alert--success .neo-alert__icon,
.alert--success .alert__icon {
    background: var(--alert-success-icon-bg);
    color: var(--text-inverse);
    box-shadow: 0 4px 12px var(--alert-success-glow);
}

/* Warning Alert */
.neo-alert--warning,
.alert--warning {
    background: var(--alert-warning-bg);
    border-color: var(--alert-warning-border);
    color: var(--alert-warning-text);
}

.neo-alert--warning .neo-alert__icon,
.alert--warning .alert__icon {
    background: var(--alert-warning-icon-bg);
    color: var(--text-inverse);
    box-shadow: 0 4px 12px var(--alert-warning-glow);
}

/* Danger Alert */
.neo-alert--danger,
.alert--danger {
    background: var(--alert-danger-bg);
    border-color: var(--alert-danger-border);
    color: var(--alert-danger-text);
}

.neo-alert--danger .neo-alert__icon,
.alert--danger .alert__icon {
    background: var(--alert-danger-icon-bg);
    color: var(--text-inverse);
    box-shadow: 0 4px 12px var(--alert-danger-glow);
}

/* Alert Sizes */
.neo-alert--sm {
    padding: var(--space-2) var(--space-3);
    font-size: var(--fs-sm);
    gap: var(--space-2);
}

.neo-alert--sm .neo-alert__icon {
    width: 22px;
    height: 22px;
    font-size: var(--fs-xs);
}

.neo-alert--lg {
    padding: var(--space-5) var(--space-6);
    font-size: var(--fs-lg);
    gap: var(--space-4);
}

.neo-alert--lg .neo-alert__icon {
    width: 36px;
    height: 36px;
    font-size: var(--fs-lg);
}

/* Focus ring for interactive alerts */
.neo-alert:focus-within {
    box-shadow: var(--neo-alert-focus), var(--shadow-soft);
}


/* ==========================================================================
   SECTION 16: AVATARS
   ========================================================================== */

.neo-avatar {
    position: relative;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-circle);
    background: var(--bg);
    box-shadow: var(--shadow-soft);
    font-weight: var(--fw-bold);
    font-size: var(--fs-lg);
    color: var(--color-primary);
    flex-shrink: 0;
}

/* Initials styling */
.neo-avatar--initials {
    text-transform: uppercase;
    letter-spacing: -0.02em;
    font-variant: normal;
}

/* Two-letter initials */
.neo-avatar--initials.neo-avatar--two {
    font-size: calc(var(--fs-base) * 0.95);
    letter-spacing: 0.05em;
}

/* Image avatar */
.neo-avatar--img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

/* Fallback gradient */
.neo-avatar--fallback {
    background: linear-gradient(135deg, var(--color-primary-300), var(--color-primary-500));
}

.neo-avatar__fallback-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-inverse);
    font-weight: var(--fw-bold);
}

/* Avatar sizes */
.neo-avatar--xs {
    width: 24px;
    height: 24px;
    font-size: var(--fs-xs);
}

.neo-avatar--sm {
    width: 32px;
    height: 32px;
    font-size: var(--fs-sm);
}

.neo-avatar--lg {
    width: 64px;
    height: 64px;
    font-size: var(--fs-xl);
}

.neo-avatar--xl {
    width: 96px;
    height: 96px;
    font-size: var(--fs-3xl);
}

/* Two-letter font adjustments per size */
.neo-avatar--xs.neo-avatar--two {
    font-size: 0.55rem;
}

.neo-avatar--sm.neo-avatar--two {
    font-size: 0.7rem;
}

.neo-avatar--lg.neo-avatar--two {
    font-size: var(--fs-lg);
}

.neo-avatar--xl.neo-avatar--two {
    font-size: var(--fs-2xl);
}

/* Color variants */
.neo-avatar--primary {
    background: linear-gradient(135deg, var(--color-primary-400), var(--color-primary-600));
    color: var(--text-inverse);
}

.neo-avatar--gradient {
    background: linear-gradient(135deg, var(--color-primary-400), var(--color-primary-600));
    color: var(--text-inverse);
}

.neo-avatar--success {
    background: linear-gradient(135deg, var(--color-success), var(--color-success-dark));
    color: var(--text-inverse);
}

.neo-avatar--danger {
    background: linear-gradient(135deg, var(--color-danger), var(--color-danger-dark));
    color: var(--text-inverse);
}

.neo-avatar--info {
    background: linear-gradient(135deg, var(--color-info), var(--color-info-dark));
    color: var(--text-inverse);
}


/* ==========================================================================
   SECTION 17: PRESENCE INDICATORS
   ========================================================================== */

.neo-presence {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: var(--radius-circle);
    background: var(--presence-offline);
    border: 2px solid var(--surface-1);
    text-shadow: 0px 0px 4px #00000090;
    z-index: 1;
    transition: all var(--transition-fast);
}

/* Default position: bottom-right */
.neo-presence {
    bottom: 0;
    inset-inline-end: 0;
}

/* Status colors */
.neo-presence--online {
    background: var(--presence-online);
    box-shadow: 0 0 8px var(--presence-online);
}

.neo-presence--away {
    background: var(--presence-away);
    box-shadow: 0 0 8px var(--presence-away);
}

.neo-presence--busy {
    background: var(--presence-busy);
    box-shadow: 0 0 8px var(--presence-busy);
}

.neo-presence--offline {
    background: var(--presence-offline);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* Position variants */
.neo-presence--top-right {
    top: 0;
    bottom: auto;
    inset-inline-end: 0;
    inset-inline-start: auto;
}

.neo-presence--top-left {
    top: 0;
    bottom: auto;
    inset-inline-start: 0;
    inset-inline-end: auto;
}

.neo-presence--bottom-left {
    bottom: 0;
    top: auto;
    inset-inline-start: 0;
    inset-inline-end: auto;
}

.neo-presence--bottom-right {
    bottom: 0;
    top: auto;
    inset-inline-end: 0;
    inset-inline-start: auto;
}

/* Emoji presence */
.neo-presence--emoji {
    bottom: -4px;
    left: -3px;
    border-style: hidden;
    width: auto;
    height: auto;
    min-width: 18px;
    min-height: 18px;
    padding: 0px;
    background-color: transparent;
    font-size: calc(var(--fs-xs) + 2px);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* When emoji is empty, show as regular dot */
.neo-presence--emoji:empty {
    width: 12px;
    height: 12px;
    min-width: 12px;
    min-height: 12px;
    padding: 0;
    background: var(--presence-offline);
}

/* Hidden presence (toggle visibility) */
.neo-presence--hidden {
    opacity: 0;
    transform: scale(0.5);
    pointer-events: none;
}

.neo-presence--visible,
.neo-avatar:hover .neo-presence--hidden {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

/* Presence sizes for different avatar sizes */
.neo-avatar--xs .neo-presence {
    width: 8px;
    height: 8px;
    border-width: 1px;
}

.neo-avatar--sm .neo-presence {
    width: 10px;
    height: 10px;
    border-width: 2px;
}

.neo-avatar--lg .neo-presence {
    width: 14px;
    height: 14px;
    border-width: 3px;
}

.neo-avatar--xl .neo-presence {
    width: 18px;
    height: 18px;
    border-width: 3px;
}


/* ==========================================================================
   SECTION 18: PAGINATION
   ========================================================================== */

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-4) 0;
}

.pagination__btn {
    min-width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--fw-semibold);
    color: var(--text);
    background: var(--surface-1);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    transition: all var(--transition-fast);
}

.pagination__btn:hover {
    color: var(--color-primary);
    transform: translateY(-2px);
}

.pagination__btn--active {
    background: linear-gradient(135deg, var(--color-primary-400), var(--color-primary-600));
    color: var(--text-inverse);
    box-shadow: var(--shadow-glow-primary);
}

.pagination__btn--active:hover {
    color: var(--text-inverse);
}

.pagination__ellipsis {
    padding: 0 var(--space-2);
    color: var(--text-muted);
}


/* ==========================================================================
   SECTION 19: USER CARDS & PROFILES
   ========================================================================== */

.users-grid {
    display: grid;
    gap: var(--space-5);
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.user-card {
    padding: var(--space-5);
    background: var(--surface-1);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-medium);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.user-card::before {
    content: "";
    position: absolute;
    inset-inline-start: -60px;
    bottom: -60px;
    width: 160px;
    height: 160px;
    border-radius: var(--radius-circle);
    background: radial-gradient(circle, var(--color-primary-glow), transparent 70%);
    opacity: 0;
    transition: opacity var(--transition-base);
    pointer-events: none;
}

.user-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-strong);
}

.user-card:hover::before {
    opacity: 0.3;
}

.user-card__header {
    display: flex;
    gap: var(--space-4);
    align-items: flex-start;
}

.user-card__info {
    flex: 1;
    min-width: 0;
}

.user-card__name {
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    color: var(--text-heading);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-card__username {
    display: block;
    font-family: var(--font-family-mono);
    font-size: var(--fs-sm);
    color: var(--text-muted);
    direction: ltr;
    text-align: inherit;
}

.user-card__email {
    display: block;
    font-size: var(--fs-sm);
    color: var(--text-subtle);
    direction: ltr;
    text-align: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-card__meta {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--bg);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-inset);
}

.meta-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.meta-item__label {
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

.meta-item__value {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--text);
}

.user-card__actions {
    display: flex;
    gap: var(--space-2);
    margin-top: auto;
}


/* ==========================================================================
   SECTION 20: STATS & METRICS
   ========================================================================== */

.stats {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.stat {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5);
    background: var(--surface-1);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-inset);
}

.stat__icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-xl);
    background: var(--surface-1);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    flex-shrink: 0;
}

.stat__icon--primary {
    background: linear-gradient(135deg, var(--color-primary-400), var(--color-primary-600));
    color: var(--text-inverse);
}

.stat__icon--success {
    background: linear-gradient(135deg, var(--color-success), var(--color-success-dark));
    color: var(--text-inverse);
}

.stat__icon--warning {
    background: linear-gradient(135deg, var(--color-warning), var(--color-warning-dark));
    color: var(--text-inverse);
}

.stat__icon--info {
    background: linear-gradient(135deg, var(--color-info), var(--color-info-dark));
    color: var(--text-inverse);
}

.stat__content {
    flex: 1;
    min-width: 0;
}

.stat__value {
    font-size: var(--fs-2xl);
    font-weight: var(--fw-black);
    color: var(--text-heading);
    line-height: 1;
}

.stat__label {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    margin-top: var(--space-1);
}


/* ==========================================================================
   SECTION 21: SECTION TITLES & HEADINGS
   ========================================================================== */

.section {
    padding: var(--space-8) 0;
}

.section--alt {
    background: var(--bg-alt);
}

.section--hero {
    padding: var(--space-10) 0;
}

.section-title {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
    padding: var(--space-4) var(--space-5);
    background: var(--surface-1);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    position: relative;
    overflow: hidden;
}

.section-title::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--color-primary), var(--color-primary-600));
}

.section-title__icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-xl);
    background: linear-gradient(135deg, var(--color-primary-400), var(--color-primary-600));
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    flex-shrink: 0;
}

.section-title__text h2 {
    font-size: var(--fs-xl);
    margin: 0;
}

.section-title__text p {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    margin: var(--space-1) 0 0;
}


/* ==========================================================================
   SECTION 22: HERO SECTION
   ========================================================================== */

.hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
    align-items: center;
}

@media (max-width: 991px) {
    .hero {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero__visual {
        order: -1;
    }
}

.hero__content {
    max-width: 600px;
}

.hero__title {
    font-size: var(--fs-5xl);
    font-weight: var(--fw-black);
    line-height: 1.1;
    margin-bottom: var(--space-4);
}

.hero__subtitle {
    font-size: var(--fs-lg);
    color: var(--text-muted);
    line-height: var(--lh-relaxed);
    margin-bottom: var(--space-6);
}

.hero__actions {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

@media (max-width: 991px) {
    .hero__actions {
        justify-content: center;
    }
}


/* ==========================================================================
   SECTION 23: FOOTER
   ========================================================================== */

.footer {
    margin-top: auto;
    padding: var(--space-8) 0;
    background: var(--surface-1);
    box-shadow: var(--shadow-inset);
}

.footer__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-5);
    text-align: center;
}

.footer__brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.footer__logo {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-primary-400), var(--color-primary-600));
    color: var(--text-inverse);
    font-weight: var(--fw-bold);
    font-size: var(--fs-lg);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
}

.footer__text h4 {
    margin: 0;
    font-size: var(--fs-lg);
}

.footer__links {
    display: flex;
    gap: var(--space-5);
    flex-wrap: wrap;
    justify-content: center;
}

.footer__links a {
    color: var(--text-muted);
    transition: color var(--transition-fast);
}

.footer__links a:hover {
    color: var(--color-primary);
}

.footer__copyright {
    font-size: var(--fs-sm);
}

/* Footer icon helper (matching header) */
.neo-footer__icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-lg);
    background: var(--surface-1);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    transition: all var(--transition-fast);
    cursor: pointer;
}

.neo-footer__icon:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
    color: var(--color-primary);
}


/* ==========================================================================
   SECTION 24: UTILITY CLASSES
   ========================================================================== */

/* Margin */
.m-0 {
    margin: 0;
}

.m-1 {
    margin: var(--space-1);
}

.m-2 {
    margin: var(--space-2);
}

.m-3 {
    margin: var(--space-3);
}

.m-4 {
    margin: var(--space-4);
}

.m-5 {
    margin: var(--space-5);
}

.m-6 {
    margin: var(--space-6);
}

.mt-0 {
    margin-top: 0;
}

.mt-1 {
    margin-top: var(--space-1);
}

.mt-2 {
    margin-top: var(--space-2);
}

.mt-3 {
    margin-top: var(--space-3);
}

.mt-4 {
    margin-top: var(--space-4);
}

.mt-5 {
    margin-top: var(--space-5);
}

.mt-6 {
    margin-top: var(--space-6);
}

.mb-0 {
    margin-bottom: 0;
}

.mb-1 {
    margin-bottom: var(--space-1);
}

.mb-2 {
    margin-bottom: var(--space-2);
}

.mb-3 {
    margin-bottom: var(--space-3);
}

.mb-4 {
    margin-bottom: var(--space-4);
}

.mb-5 {
    margin-bottom: var(--space-5);
}

.mb-6 {
    margin-bottom: var(--space-6);
}

.ml-2 {
    margin-left: var(--space-2);
}

.mx-auto {
    margin-inline: auto;
}

/* Padding */
.p-0 {
    padding: 0;
}

.p-1 {
    padding: var(--space-1);
}

.p-2 {
    padding: var(--space-2);
}

.p-3 {
    padding: var(--space-3);
}

.p-4 {
    padding: var(--space-4);
}

.p-5 {
    padding: var(--space-5);
}

.p-6 {
    padding: var(--space-6);
}

.pt-0 {
    padding-top: 0;
}

.pt-1 {
    padding-top: var(--space-1);
}

.pt-2 {
    padding-top: var(--space-2);
}

.pt-3 {
    padding-top: var(--space-3);
}

.pt-4 {
    padding-top: var(--space-4);
}

.pb-0 {
    padding-bottom: 0;
}

.pb-1 {
    padding-bottom: var(--space-1);
}

.pb-2 {
    padding-bottom: var(--space-2);
}

.pb-3 {
    padding-bottom: var(--space-3);
}

.pb-4 {
    padding-bottom: var(--space-4);
}

/* Text */
.text-start {
    text-align: start;
}

.text-center {
    text-align: center;
}

.text-end {
    text-align: end;
}

.text-muted {
    color: var(--text-muted);
}

.text-subtle {
    color: var(--text-subtle);
}

.text-primary {
    color: var(--color-primary);
}

.text-success {
    color: var(--color-success);
}

.text-danger {
    color: var(--color-danger);
}

.text-warning {
    color: var(--color-warning);
}

.text-info {
    color: var(--color-info);
}

.text-sm {
    font-size: var(--fs-sm);
}

.text-lg {
    font-size: var(--fs-lg);
}

.text-xl {
    font-size: var(--fs-xl);
}

.font-normal {
    font-weight: var(--fw-normal);
}

.font-medium {
    font-weight: var(--fw-medium);
}

.font-semibold {
    font-weight: var(--fw-semibold);
}

.font-bold {
    font-weight: var(--fw-bold);
}

.text-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.text-break {
    word-break: break-word;
    overflow-wrap: break-word;
}

/* Display */
.d-none {
    display: none;
}

.d-block {
    display: block;
}

.d-inline {
    display: inline;
}

.d-inline-block {
    display: inline-block;
}

/* Width & Height */
.w-full {
    width: 100%;
}

.w-auto {
    width: auto;
}

.h-full {
    height: 100%;
}

.min-h-screen {
    min-height: 100vh;
}

/* Persian Digits */
.fa-digits {
    font-feature-settings: "ss01" 1;
}

/* Direction */
.rtl {
    direction: rtl;
    text-align: right;
}

.ltr {
    direction: ltr;
    text-align: left;
}

/* Visibility */
.visible {
    visibility: visible;
}

.invisible {
    visibility: hidden;
}

/* Shadow */
.shadow-none {
    box-shadow: none;
}

.shadow-sm {
    box-shadow: var(--shadow-soft);
}

.shadow {
    box-shadow: var(--shadow-medium);
}

.shadow-lg {
    box-shadow: var(--shadow-strong);
}

.shadow-inset {
    box-shadow: var(--shadow-inset);
}

/* Border Radius */
.rounded-none {
    border-radius: 0;
}

.rounded-sm {
    border-radius: var(--radius-sm);
}

.rounded {
    border-radius: var(--radius-md);
}

.rounded-lg {
    border-radius: var(--radius-lg);
}

.rounded-full {
    border-radius: var(--radius-circle);
}

.rounded-pill {
    border-radius: var(--radius-pill);
}


/* ==========================================================================
   SECTION 25: RESPONSIVE UTILITIES
   ========================================================================== */

@media (max-width: 575px) {
    .hide-xs {
        display: none !important;
    }
}

@media (min-width: 576px) and (max-width: 767px) {
    .hide-sm {
        display: none !important;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .hide-md {
        display: none !important;
    }
}

@media (min-width: 992px) {
    .hide-lg {
        display: none !important;
    }
}

@media (min-width: 576px) {
    .show-xs-only {
        display: none !important;
    }
}

@media (max-width: 767px) {
    .show-md-up {
        display: none !important;
    }
}

@media (max-width: 991px) {
    .show-lg-up {
        display: none !important;
    }
}


/* ==========================================================================
   SECTION 26: PRINT STYLES
   ========================================================================== */

@media print {

    *,
    *::before,
    *::after {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    body {
        font-size: 12pt;
        line-height: 1.5;
    }

    /* Hide interactive/navigation elements */
    .neo-header,
    .neo-header__offcanvas,
    .footer,
    .btn,
    .pagination,
    .modal,
    .neo-header__dropdown-menu,
    .neo-header__hamburger,
    .neo-header__notifications,
    .neo-header__user-menu,
    .neo-presence {
        display: none !important;
    }

    .card,
    .neo-alert {
        border: 1px solid #ccc;
        page-break-inside: avoid;
    }

    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
    }

    a[href^="#"]::after,
    a[href^="javascript:"]::after {
        content: "";
    }

    table {
        border-collapse: collapse;
        width: 100%;
    }

    th,
    td {
        border: 1px solid #ddd;
        padding: 8px;
        text-align: inherit;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        page-break-after: avoid;
    }

    img {
        max-width: 100% !important;
        page-break-inside: avoid;
    }

    @page {
        margin: 2cm;
    }
}


/* ==========================================================================
   SECTION 27: LEGACY ALIASES & BACKWARDS COMPATIBILITY
   ========================================================================== */

.neo {
    background: var(--bg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-medium);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.neo:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-strong);
}

.neo--flat {
    box-shadow: var(--shadow-soft);
}

.neo--inset {
    box-shadow: var(--shadow-inset);
}

.neo-glass {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.35));
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: var(--shadow-soft);
    border-radius: var(--radius-lg);
}

.neo-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    font-weight: var(--fw-semibold);
    border: none;
    border-radius: var(--radius-md);
    background: var(--surface-1);
    box-shadow: var(--shadow-soft);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.neo-container {
    max-width: var(--container-2xl);
    margin-inline: auto;
    padding-inline: var(--space-4);
}

.neo-select {
    position: relative;
    border-radius: var(--radius-md);
    background: var(--bg);
    box-shadow: var(--shadow-inset);
}

.neo-select select {
    appearance: none;
    border: 0;
    background: transparent;
    padding: var(--space-3) var(--space-4);
    padding-inline-end: var(--space-8);
    font-size: var(--fs-base);
    color: var(--text);
    width: 100%;
    cursor: pointer;
}

.neo-select::after {
    content: '▾';
    position: absolute;
    inset-inline-start: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-primary);
    pointer-events: none;
}

.flex {
    display: flex;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.hidden {
    display: none;
}

.muted {
    color: var(--text-muted);
}

.text-orange {
    color: var(--color-primary);
}

.accent-ring {
    box-shadow: 0 0 0 3px var(--color-primary-subtle);
}

.glow {
    box-shadow: var(--shadow-glow-primary);
}


/* ==========================================================================
   SECTION 28: @SUPPORTS PROGRESSIVE ENHANCEMENT
   ========================================================================== */

@supports (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)) {
    .modal__backdrop {
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

    .neo-glass {
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    .neo-header__offcanvas-backdrop {
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }
}

@supports (container-type: inline-size) {
    .card {
        container-type: inline-size;
    }
}

/* ==========================================================================
   SECTION 29: ICONS
   ========================================================================== */
/* TODO: complete the neo-icon classes */
.neo-icon {
    height: 30px;
}

.neo-icon__svg {
    /* fill: var(--text); */
    display: inline-block;
    color: var(--icon-color);
    width: 25px;
    height: 25px;
}

.neo-icon__primary {
    fill: var(--text-inverse);
}

.neo-icon__pritmary {
    color: var(--text-inverse);
}

.neo-icon__svg-lg {
    width: 40px;
    height: 40px;
}

.neo-icon__svg-md {
    width: 30px;
    height: 30px;
}


/* ==========================================================================
   END OF NEOMORPH ORANGE PRO CSS FRAMEWORK
   Version 2.2.0 | RTL-First | Header Migration Complete
   ========================================================================== */