diff --git a/src/styles/components.css b/src/styles/components.css index ed150da..52c7298 100644 --- a/src/styles/components.css +++ b/src/styles/components.css @@ -986,112 +986,3 @@ textarea { padding-top: 110px; } } - - -/* ===== Responsive Enhancements (Mobile-first additions) ===== */ - -/* Layout helpers used by App.js */ -.content-wrapper { - margin-top: 10px; -} - -.content-grid { - display: grid; - grid-template-columns: 1.2fr 1fr; /* form + table */ - gap: 20px; -} - -/* Mobile menu toggle button (shown only on small screens) */ -.menu-toggle { - position: fixed; - top: 16px; - left: 16px; - width: 42px; - height: 42px; - border-radius: 10px; - border: 1px solid rgba(0,0,0,0.08); - background: #ffffff; - color: var(--secondary); - display: none; /* hidden by default, visible on mobile */ - align-items: center; - justify-content: center; - box-shadow: var(--shadow); - z-index: 110; /* above header (90) and below modal (1000) */ -} - -.menu-toggle i { font-size: 1.1rem; } - -/* Tables: allow horizontal scrolling on small screens */ -.table-container { - overflow-x: auto; /* enable horizontal scroll when needed */ -} - -/* Reduce table cell padding on narrow screens for density */ -@media (max-width: 768px) { - th, td { padding: 12px 14px; } -} - -/* On very small screens, keep table readable by allowing min width */ -@media (max-width: 576px) { - table { min-width: 640px; } -} - -/* Forms: stack fields on small screens */ -@media (max-width: 768px) { - .form-row { flex-direction: column; } - .form-row .form-group { width: 100%; } - .btn { width: 100%; } /* make primary actions easier to tap */ -} - -/* Cards and content grid responsive behavior */ -@media (max-width: 992px) { - .content-grid { grid-template-columns: 1fr; } -} - -/* Sidebar: off-canvas behavior for mobile; content spacing */ -@media (max-width: 1200px) { - /* when sidebar collapses to icons, reduce main-content margin */ - .main-content { margin-left: 80px; } -} - -@media (max-width: 576px) { - /* show menu toggle */ - .menu-toggle { display: inline-flex; } - - /* make sidebar slide in/out from the left */ - .sidebar { - left: 0; - transform: translateX(-100%); - width: var(--sidebar-width); /* keep full width when opened */ - box-shadow: none; /* avoid shadow when hidden */ - } - .sidebar.active { - transform: translateX(0); - box-shadow: var(--shadow-lg); - } - - /* main area should use full width on mobile */ - .main-content { - margin-left: 0; - padding-left: 16px; - padding-right: 16px; - } - - /* Header already set to left:0 in existing rules; ensure compact spacing */ - .header { padding: 14px 16px; } - - /* Cards spacing */ - .card { padding: 16px; } - - /* Tighten section title */ - .section-title { font-size: 1.2rem; } -} - -/* Modal: full width feel on small devices */ -@media (max-width: 576px) { - .modal { - max-width: 100%; - width: 100%; - border-radius: 10px; - } -}