Updatweb

website/admin/css/admin-style.css

@@ -378,32 +378,178 @@ body {
 }
 
 /* Responsive Design */
+
+/* Mobile First - Base Styles */
 @media (max-width: 768px) {
+  :root {
+    --sidebar-width: 0px;
+  }
+
   .sidebar {
     transform: translateX(-100%);
+    width: 280px;
+    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
   }
 
   .sidebar.active {
     transform: translateX(0);
   }
 
+  /* Backdrop for mobile menu */
+  .sidebar.active::before {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 280px;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: -1;
+  }
+
   .main-content {
     margin-left: 0;
+    padding: 15px;
+  }
+
+  /* Mobile Menu Toggle Button */
+  .mobile-menu-toggle {
+    display: block;
+    position: fixed;
+    top: 15px;
+    left: 15px;
+    z-index: 1001;
+    background: var(--primary-gradient);
+    color: white;
+    border: none;
+    border-radius: 8px;
+    width: 44px;
+    height: 44px;
+    cursor: pointer;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+  }
+
+  .mobile-menu-toggle:focus-visible {
+    outline: 2px solid white;
+    outline-offset: 2px;
   }
 
   .top-bar {
     flex-direction: column;
     gap: 15px;
+    margin-top: 50px;
+    padding: 15px;
+  }
+
+  .top-bar h1 {
+    font-size: 1.5rem;
   }
 
   .actions-bar {
     flex-direction: column;
     align-items: stretch;
+    gap: 10px;
   }
 
   .search-box {
     max-width: 100%;
   }
+
+  /* Table Responsive */
+  .table-responsive {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  table {
+    min-width: 600px;
+  }
+
+  /* Cards Stack on Mobile */
+  .stats-grid {
+    grid-template-columns: 1fr !important;
+  }
+
+  /* Modal Adjustments */
+  .modal-dialog {
+    margin: 10px;
+  }
+
+  .modal-content {
+    max-height: calc(100vh - 20px);
+    overflow-y: auto;
+  }
+
+  /* Form Elements Full Width */
+  .form-control,
+  .btn {
+    font-size: 16px; /* Prevent iOS zoom */
+  }
+
+  /* Hide certain columns on mobile */
+  .hide-mobile {
+    display: none !important;
+  }
+}
+
+/* Tablet Styles */
+@media (min-width: 769px) and (max-width: 1024px) {
+  :root {
+    --sidebar-width: 220px;
+  }
+
+  .sidebar {
+    width: 220px;
+    padding: 15px;
+  }
+
+  .sidebar-brand {
+    font-size: 1.3rem;
+  }
+
+  .sidebar-menu a {
+    padding: 10px 12px;
+    font-size: 0.9rem;
+  }
+
+  .main-content {
+    padding: 20px;
+  }
+
+  .stats-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .mobile-menu-toggle {
+    display: none;
+  }
+}
+
+/* Desktop Styles */
+@media (min-width: 1025px) {
+  .mobile-menu-toggle {
+    display: none;
+  }
+
+  .sidebar {
+    width: var(--sidebar-width);
+  }
+
+  /* Larger cards grid */
+  .stats-grid {
+    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  }
+}
+
+/* Large Desktop */
+@media (min-width: 1400px) {
+  :root {
+    --sidebar-width: 280px;
+  }
+
+  .container-large {
+    max-width: 1320px;
+  }
 }
 
 /* Utility Classes */