fix: mobile responsive admin panel

frontend/admin/admin.css

@@ -356,27 +356,118 @@ tbody tr:hover {
     background: rgba(248, 113, 113, 0.2);
 }
 
+/* ===== Mobile Menu Toggle ===== */
+.menu-toggle {
+    display: none;
+    padding: 0.4rem;
+    background: none;
+    border: none;
+    color: var(--text-primary);
+    cursor: pointer;
+    border-radius: var(--radius-sm);
+    transition: background var(--transition);
+}
+
+.menu-toggle:hover {
+    background: var(--bg-hover);
+}
+
+/* ===== Sidebar Overlay ===== */
+.sidebar-overlay {
+    display: none;
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 9;
+    backdrop-filter: blur(2px);
+}
+
 /* ===== Responsive ===== */
 @media (max-width: 768px) {
     .sidebar {
-        width: 60px;
+        width: 240px;
+        transform: translateX(-100%);
+        transition: transform 0.3s ease;
+        z-index: 20;
     }
 
-    .sidebar-header span,
-    .nav-item span,
-    .btn-logout span {
-        display: none;
+    .sidebar.open {
+        transform: translateX(0);
+    }
+
+    .sidebar-overlay.open {
+        display: block;
+    }
+
+    .menu-toggle {
+        display: flex;
     }
 
     .main {
-        margin-left: 60px;
+        margin-left: 0;
+    }
+
+    .topbar {
+        padding: 1rem;
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+    }
+
+    .topbar h1 {
+        font-size: 1.1rem;
     }
 
     .content {
         padding: 1rem;
     }
 
+    .card {
+        padding: 1rem;
+    }
+
     .form-row {
         flex-direction: column;
+        align-items: stretch;
+    }
+
+    .form-row .form-group {
+        min-width: 0;
+    }
+
+    .btn-create {
+        width: 100%;
+        text-align: center;
+    }
+
+    tbody td {
+        padding: 0.5rem 0.6rem;
+        font-size: 0.82rem;
+    }
+
+    thead th {
+        padding: 0.5rem 0.6rem;
+        font-size: 0.72rem;
+    }
+
+    .table-wrap {
+        margin: 0 -1rem;
+        padding: 0 1rem;
+    }
+}
+
+@media (max-width: 480px) {
+    .topbar h1 {
+        font-size: 0.95rem;
+    }
+
+    .badge {
+        font-size: 0.65rem;
+        padding: 0.15rem 0.45rem;
+    }
+
+    .btn-delete {
+        padding: 0.25rem 0.5rem;
+        font-size: 0.72rem;
     }
 }