From 1c5fe37bf8c9b021fada2223e38d7114430a85c6 Mon Sep 17 00:00:00 2001
From: rafael <rafaelminaya20@hotmail.com>
Date: Thu, 27 Nov 2025 18:59:28 -0400
Subject: [PATCH] Add responsive styles for mobile and tablet views in
 `components.css`

---
 src/styles/components.css | 109 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 109 insertions(+)

diff --git a/src/styles/components.css b/src/styles/components.css
index 52c7298..ed150da 100644
--- a/src/styles/components.css
+++ b/src/styles/components.css
@@ -986,3 +986,112 @@ 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;
+  }
+}