Made page more responsive

frontend/assets/css/dashboard.css

@@ -13,7 +13,6 @@ h1 {
     margin-bottom: 2rem;
 }
 
-/* Navigation Header */
 header {
     width: 100%;
     border-bottom: 1px solid var(--border);
@@ -74,7 +73,6 @@ nav a:hover, nav a.active {
     border-color: var(--accent);
 }
 
-/* Profile Dropdown Component */
 .profile-dropdown {
     position: relative;
     display: inline-block;
@@ -133,7 +131,6 @@ nav a:hover, nav a.active {
     z-index: 100;
 }
 
-/* Show menu on hover OR when active via click class */
 .profile-dropdown:hover .dropdown-menu,
 .dropdown-menu.show {
     display: flex;
@@ -174,7 +171,6 @@ nav a:hover, nav a.active {
     color: #f87171;
 }
 
-/* Stats Cards Grid */
 .stats-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
@@ -207,7 +203,6 @@ nav a:hover, nav a.active {
     letter-spacing: 0.05em;
 }
 
-/* Controls & Search */
 .action-bar {
     display: flex;
     justify-content: space-between;
@@ -220,7 +215,6 @@ nav a:hover, nav a.active {
     max-width: 320px;
 }
 
-/* Data Tables */
 .table-container {
     width: 100%;
     background: var(--card);
@@ -262,41 +256,52 @@ tr:hover td {
     background: rgba(255, 255, 255, 0.01);
 }
 
-/* Modals & Placeholders */
 #modal {
     position: fixed;
     z-index: 100;
 }
 
+.dropdown-menu {
+    position: absolute;
+    top: 100%;
+    right: 0;
+    width: 200px;
+    background: #1f2937;
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
+    display: none;
+    flex-direction: column;
+    z-index: 1000;
+}
+
+.dropdown-menu.show {
+    display: flex !important;
+}
+
+#main-nav {
+    z-index: 900;
+}
+
 @media (max-width: 768px) {
-    .nav-container {
+    .menu-trigger { display: block; background: none; border: 1px solid var(--border); color: var(--text); padding: 0.4rem 0.8rem; border-radius: 6px; }
+
+    #main-nav {
+        display: none;
         flex-direction: column;
-        height: auto;
+        position: absolute;
+        top: 4rem;
+        left: 0;
+        width: 100%;
+        background: #111827;
         padding: 1rem;
-        gap: 1rem;
-    }
-    .nav-left {
-        flex-direction: column;
-        gap: 1rem;
-    }
-    nav {
-        gap: 1rem;
-    }
-    .profile-dropdown {
-        width: 100%;
-        justify-content: center;
-    }
-    .dropdown-menu {
-        position: static;
-        width: 100%;
-        box-shadow: none;
-        margin-top: 0.5rem;
-    }
-    .action-bar {
-        flex-direction: column;
-        align-items: stretch;
-    }
-    .search-input {
-        max-width: 100%;
+        z-index: 100;
+        border-bottom: 1px solid var(--border);
     }
+
+    #main-nav.show { display: flex; }
+}
+
+@media (min-width: 769px) {
+    .menu-trigger { display: none; }
 }