/* Responsive Design - Media Queries */ /* Mobile First (default styles above) */ /* Tablet: 480px and up */ @media (min-width: 480px) { .container { padding: 0 var(--space-md); } .btn-group { display: flex; gap: var(--space-md); } .grid-2 { grid-template-columns: repeat(2, 1fr); } .toast-container { max-width: 500px; } } /* Tablet: 768px and up */ @media (min-width: 768px) { .container { padding: 0 var(--space-lg); } .navbar-toggle { display: none; } .navbar-nav { display: flex !important; flex-direction: row; position: static; background-color: transparent; padding: 0; border: none; } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } .form-row-2 { grid-template-columns: repeat(2, 1fr); } .modal { max-width: 600px; } .toast-container { bottom: var(--space-xl); right: var(--space-xl); } } /* Desktop: 1024px and up */ @media (min-width: 1024px) { .layout-main { gap: 0; } .sidebar { display: block; } .grid-3 { grid-template-columns: repeat(3, 1fr); } .form-row-3 { grid-template-columns: repeat(3, 1fr); } .modal { max-width: 700px; } .text-lg-right { text-align: right; } } /* Large Desktop: 1280px and up */ @media (min-width: 1280px) { .container { max-width: 1200px; } .modal { max-width: 800px; } } /* Landscape mobile */ @media (max-height: 500px) and (orientation: landscape) { .navbar { padding: var(--space-sm); } h1 { font-size: var(--font-size-2xl); margin-bottom: var(--space-md); } .btn { padding: var(--space-xs) var(--space-sm); } } /* High DPI screens */ @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { img { image-rendering: -webkit-optimize-contrast; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .spinner { animation: none; border-top-color: var(--color-border); } } /* Dark mode — driven by [data-theme="dark"] on . Theme is initialized from localStorage by an inline script in index.html (falls back to OS preference on first visit). User can override via the navbar toggle. */ [data-theme="dark"] { --color-text: #E6E6E6; --color-text-secondary: #CCCCCC; --color-bg: #1A1A1A; --color-bg-secondary: #252525; --color-bg-tertiary: #333333; --color-border: #404040; --color-border-light: #353535; --color-primary-light: rgba(0, 102, 204, 0.2); --color-success-light: rgba(0, 170, 0, 0.15); --color-danger-light: rgba(204, 0, 0, 0.15); --color-warning-light: rgba(255, 153, 0, 0.15); --color-info-light: rgba(0, 153, 255, 0.15); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4); } [data-theme="dark"] .issue-drawer-content, [data-theme="dark"] .report-modal-content, [data-theme="dark"] .signature-modal-content { background-color: var(--color-bg-secondary); color: var(--color-text); } [data-theme="dark"] .form-control { background-color: var(--color-bg-tertiary); color: var(--color-text); } /* Print styles */ @media print { .navbar, .sidebar, .footer, .btn, .modal-backdrop { display: none !important; } body { background-color: white; } .card { page-break-inside: avoid; } }