/* ============================================================ app.css — custom styles on top of Tailwind ============================================================ */ body { font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } /* Subtle scrollbar */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: #f3f4f6; } ::-webkit-scrollbar-thumb { background: #9ca3af; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #6b7280; } /* Modal overlay */ .modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 1rem; } .modal-card { background: white; border-radius: 0.5rem; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); width: 100%; max-width: 640px; max-height: 90vh; overflow-y: auto; } /* Table polish */ table.data-table { width: 100%; border-collapse: collapse; } table.data-table th { background: #f9fafb; text-align: left; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: #6b7280; padding: 0.75rem 1rem; border-bottom: 1px solid #e5e7eb; } table.data-table td { padding: 0.75rem 1rem; border-bottom: 1px solid #f3f4f6; font-size: 0.875rem; } table.data-table tr:hover { background: #f9fafb; } /* Form polish */ .form-input, .form-select, .form-textarea { width: 100%; border: 1px solid #d1d5db; border-radius: 0.375rem; padding: 0.5rem 0.75rem; font-size: 0.875rem; background: white; } .form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); } /* Card */ .stat-card { background: white; border-radius: 0.5rem; padding: 1.25rem; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); border: 1px solid #f3f4f6; } /* ============================================================ Dark mode — toggled by `.dark` class on ============================================================ */ html.dark body { background: #0f172a; color: #e2e8f0; } html.dark .text-gray-900 { color: #f1f5f9; } html.dark .text-gray-800 { color: #e2e8f0; } html.dark .text-gray-700 { color: #cbd5e1; } html.dark .text-gray-600 { color: #94a3b8; } html.dark .text-gray-500 { color: #64748b; } html.dark .stat-card { background: #1e293b; border-color: #334155; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); } html.dark .modal-card { background: #1e293b; color: #e2e8f0; } html.dark .modal-overlay { background: rgba(0, 0, 0, 0.7); } html.dark table.data-table th { background: #1e293b; color: #94a3b8; border-color: #334155; } html.dark table.data-table td { border-color: #334155; color: #e2e8f0; } html.dark table.data-table tr:hover { background: #334155; } html.dark .form-input, html.dark .form-select, html.dark .form-textarea { background: #0f172a; border-color: #475569; color: #e2e8f0; } html.dark .form-input:focus, html.dark .form-select:focus, html.dark .form-textarea:focus { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2); } html.dark .form-input::placeholder, html.dark .form-textarea::placeholder { color: #64748b; } html.dark .border-gray-300 { border-color: #475569; } html.dark .border-gray-200 { border-color: #334155; } html.dark .border { border-color: #334155; } html.dark .hover\:bg-gray-50:hover { background: #334155; } html.dark .hover\:bg-gray-100:hover { background: #334155; } html.dark .bg-gray-100 { background: #0f172a; } html.dark .bg-gray-50 { background: #1e293b; } html.dark .bg-gray-200 { background: #334155; } html.dark .bg-blue-600 { background: #2563eb; } html.dark .bg-blue-700 { background: #1d4ed8; } html.dark .hover\:bg-blue-700:hover { background: #1d4ed8; } html.dark .text-blue-600 { color: #60a5fa; } html.dark .text-blue-700 { color: #93c5fd; } html.dark .text-red-600 { color: #f87171; } html.dark .text-red-700 { color: #fca5a5; } html.dark .text-green-600 { color: #4ade80; } html.dark .text-green-800 { color: #86efac; } html.dark .text-orange-600 { color: #fb923c; } html.dark .text-purple-600 { color: #c084fc; } html.dark .text-yellow-800 { color: #fde68a; } html.dark .text-yellow-400 { color: #facc15; } html.dark .bg-green-100 { background: #064e3b; } html.dark .bg-yellow-100 { background: #713f12; } html.dark .bg-purple-100 { background: #581c87; } html.dark .bg-blue-100 { background: #1e3a8a; } html.dark .bg-gray-100 { background: #334155; } html.dark .bg-gray-200 { background: #475569; } html.dark .text-green-800 { color: #86efac; } html.dark .text-yellow-800 { color: #fde68a; } html.dark .text-purple-800 { color: #d8b4fe; } html.dark .text-blue-800 { color: #93c5fd; } html.dark .text-gray-800 { color: #e2e8f0; } html.dark ::-webkit-scrollbar-track { background: #1e293b; } html.dark ::-webkit-scrollbar-thumb { background: #475569; } html.dark ::-webkit-scrollbar-thumb:hover { background: #64748b; } /* Login page (no sidebar) */ html.dark .bg-white { background: #1e293b; } /* ============================================================ Mobile responsive — sidebar becomes a fullscreen overlay (no transform: iOS Safari has a known bug where transform on a fixed ancestor can swallow click events on child tags) ============================================================ */ /* Hamburger — hidden on desktop, shown on mobile */ .mobile-menu-btn { display: none; } .mobile-menu-overlay { display: none; } @media (max-width: 767px) { .mobile-menu-btn { display: inline-flex; } /* Content uses full width on mobile */ body > main { margin-left: 0 !important; padding: 1rem !important; } /* Sidebar is hidden by default, becomes a full-screen overlay when .open */ body > aside { display: none !important; position: fixed !important; inset: 0 !important; width: 100% !important; height: 100% !important; z-index: 60 !important; background: #111827; /* gray-900 */ padding: 1rem !important; overflow-y: auto; } body > aside.open { display: flex !important; flex-direction: column; } /* The aside's inner close button should be visible on mobile */ .mobile-menu-btn-inside { display: inline-flex !important; } /* Tighten headings and stat cards on small screens */ h1.text-3xl { font-size: 1.5rem !important; } .stat-card { padding: 0.85rem !important; } /* Grids collapse to single column below md */ .grid.grid-cols-1.md\\:grid-cols-2, .grid.grid-cols-1.md\\:grid-cols-3, .grid.grid-cols-1.md\\:grid-cols-4, .grid.grid-cols-1.md\\:grid-cols-5 { grid-template-columns: 1fr !important; } /* Tables scroll horizontally inside their card */ table.data-table { font-size: 0.8rem; } table.data-table th, table.data-table td { padding: 0.5rem 0.6rem; } /* Nav links need a bigger tap target on touch screens */ aside.open .nav-link { padding: 0.85rem 1rem; font-size: 1rem; } } @media (max-width: 767px) { .grid.grid-cols-1.md\\:grid-cols-2.lg\\:grid-cols-5 { grid-template-columns: 1fr 1fr !important; } .grid.grid-cols-1.lg\\:grid-cols-2 { grid-template-columns: 1fr !important; } } @media (max-width: 480px) { .grid.grid-cols-1.md\\:grid-cols-2.lg\\:grid-cols-5 { grid-template-columns: 1fr !important; } }