@tailwind base; @tailwind components; @tailwind utilities; @font-face { font-family: "Metal Mania"; src: url("../font/MetalMania.ttf") format("truetype"); } body { scrollbar-width: thin; scrollbar-color: #94a3b8 #e2e8f0; } .metal-mania { font-family: "Metal Mania", sans-serif; font-weight: 400; } /* Custom styles for modern UX */ .sidebar { transition: all 0.3s ease-in-out; } .sidebar.collapsed { width: 80px; } .sidebar.collapsed .sidebar-text, .sidebar.collapsed .logo-text, .sidebar.collapsed .user-info .font-medium, .sidebar.collapsed .user-info .text-xs, .sidebar.collapsed .nav-section-title { display: none; } .sidebar.collapsed .menu-item { justify-content: center; } .main-wrapper { transition: margin-left 0.3s ease-in-out; } .main-wrapper.expanded { margin-left: 80px; } /* ============================================================================ GLOBAL MODAL SYSTEM ============================================================================ This modal system ensures all modals appear above the sidebar and navigation. Z-INDEX HIERARCHY: - Modals: 9999 (highest) - Sidebar: 1000 - Top Navigation: 30 - Main Content: 10 USAGE: 1. Add class="modal" to your modal container 2. The modal will automatically be moved to on page load (see site.js) 3. This escapes any stacking context issues from parent elements EXAMPLE: JAVASCRIPT (handled automatically in site.js): - All elements with .modal, .modal-backdrop, or id containing "Modal"/"modal" - Are automatically moved to document.body on DOMContentLoaded - This ensures proper z-index stacking regardless of where they're defined ============================================================================ */ .modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); backdrop-filter: blur(4px); justify-content: center; align-items: center; z-index: 9999; display: none; padding: 1rem; } .modal-backdrop { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); z-index: 9999; justify-content: center; align-items: center; backdrop-filter: blur(4px); } .modal-backdrop.flex { display: flex; } /* Mobile responsiveness */ @media (max-width: 768px) { .sidebar { position: fixed; z-index: 1000; left: -256px; /* w-64 */ height: 100%; } .sidebar.open { left: 0; } .main-wrapper { margin-left: 0 !important; } .main-wrapper.expanded { margin-left: 0 !important; } .mobile-menu-btn { display: block; } .sidebar-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 999; } .sidebar.open + .sidebar-overlay { display: block; } .dropdown-menu-offset { z-index: 50; pointer-events: auto; } .svg-path { stroke: #323232; transition: stroke 0.3s; } .group:hover .svg-path { stroke: #2563eb; /* Tailwind's blue-600 */ } .eye-icon { transition: fill 0.3s ease; } .eye-icon.eye-open { fill: #171e54; } }