refactor: apply responsive CSS grid layout across all portals

admin.css

@@ -10,15 +10,20 @@
 body.admin-body {
     background: var(--admin-bg);
     font-family: 'Inter', sans-serif;
+    display: grid;
+    grid-template-columns: var(--sidebar-width) 1fr;
+    min-height: 100vh;
 }
 
 .admin-sidebar {
-    width: var(--sidebar-width);
     background: var(--admin-primary);
+    position: sticky;
+    top: 0;
     height: 100vh;
-    position: fixed;
     padding: 2rem;
-    color: white;
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
 }
 
 .admin-sidebar .logo,
@@ -72,7 +77,6 @@ body.admin-body {
 }
 
 .admin-main {
-    margin-left: var(--sidebar-width);
     padding: 3rem;
 }
 
@@ -239,20 +243,15 @@ body.admin-body {
 }
 
 @media (max-width: 768px) {
+    body.admin-body {
+        grid-template-columns: 1fr;
+    }
+    
     .admin-main {
-        margin-left: 0;
         padding: 1.5rem;
         padding-top: 2rem;
     }
 
     .admin-sidebar {
-        position: relative;
-        width: 100%;
-        height: auto;
-    }
-
-    .admin-sidebar .user-profile {
-        position: static;
-        margin-top: 2rem;
     }
 }

dashboard.css

@@ -5,23 +5,25 @@
 
 /* Layout Foundation */
 .dashboard-body {
-    display: flex;
+    display: grid;
+    grid-template-columns: var(--sidebar-width) 1fr;
     min-height: 100vh;
 }
 
 .sidebar {
-    width: var(--sidebar-width);
     background: var(--sidebar-bg);
     color: white;
     padding: 2.5rem 1.5rem;
     display: flex;
     flex-direction: column;
-    position: fixed;
+    position: sticky;
+    top: 0;
     height: 100vh;
     border-right: 1px solid rgba(255, 255, 255, 0.05);
     box-shadow: 10px 0 30px rgba(0, 0, 0, 0.2);
     z-index: 100;
-    overflow: hidden;
+    overflow-y: auto;
+    overflow-x: hidden;
 }
 
 .sidebar-footer {
@@ -49,10 +51,9 @@
 }
 
 .dashboard-main {
-    margin-left: var(--sidebar-width);
-    flex: 1;
     padding: 2.5rem 3rem;
     min-height: 100vh;
+    overflow-x: hidden;
 }
 
 .logo {
@@ -1652,52 +1653,38 @@
         display: none !important;
     }
 
-    .sidebar {
-        transform: translateX(0) !important;
-    }
-
     .sidebar-backdrop {
         display: none !important;
     }
 }
 
 @media (max-width: 768px) {
+    .dashboard-body {
+        grid-template-columns: 1fr;
+    }
+    
     .sidebar-mobile-toggle {
         display: block;
     }
 
     .sidebar {
-        transform: translateX(-100%);
+        position: fixed;
-        transition: transform 0.3s ease;
+        left: 0;
+        top: 0;
+        bottom: 0;
         z-index: 1050;
+        transform: translateX(-100%);
+        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        width: 280px !important;
+        border-right: none;
+        box-shadow: 20px 0 50px rgba(0,0,0,0.5);
     }
 
     .sidebar.open {
         transform: translateX(0);
     }
 
-    .sidebar.compact-rail {
-        width: var(--sidebar-width);
-        padding: 2.5rem 1.5rem;
-        align-items: stretch;
-    }
-
-    .sidebar.compact-rail .logo-text,
-    .sidebar.compact-rail .user-profile .info,
-    .sidebar.compact-rail .nav-text {
-        display: block !important;
-    }
-
-    .sidebar.compact-rail .side-nav a {
-        width: auto;
-        height: auto;
-        padding: 0.75rem 1rem;
-        justify-content: flex-start;
-    }
-
-    .sidebar.compact-rail + .dashboard-main,
     .dashboard-main {
-        margin-left: 0;
         padding: 1.25rem;
         padding-top: 4.5rem;
     }
@@ -1760,8 +1747,11 @@ body.zen-mode-active .dash-header {
 }
 
 /* Compact Sidebar Rail */
+.dashboard-body:has(.sidebar.compact-rail) {
+    grid-template-columns: 70px 1fr;
+}
+
 .sidebar.compact-rail {
-    width: 70px;
     padding: 2.5rem 0.5rem;
     align-items: center;
     overflow-x: hidden;
@@ -1811,9 +1801,6 @@ body.zen-mode-active .dash-header {
     font-size: 1.25rem;
     margin: 0;
 }
-.sidebar.compact-rail + .dashboard-main {
-    margin-left: 70px;
-}
 
 @media (min-width: 769px) {
     body.zen-mode-active {

super-admin.html

@@ -14,11 +14,11 @@
     <script src="tenantLoader.js"></script>
     <style>
         :root { --sidebar-w: 230px; }
-        body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text-main); display: flex; min-height: 100vh; }
+        body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text-main); display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; }
 
-        /* ── Sidebar ── */
+        /* 🟦 Sidebar 🟦 */
-        .sa-sidebar { width: var(--sidebar-w); background: var(--primary); color: white; display: flex; flex-direction: column;
+        .sa-sidebar { background: var(--primary); color: white; display: flex; flex-direction: column;
-                      position: fixed; top: 0; left: 0; height: 100vh; z-index: 100; }
+                      position: sticky; top: 0; height: 100vh; overflow-y: auto; }
         .sa-logo { padding: 1.5rem 1.25rem; display: flex; align-items: center; gap: 0.75rem;
                    border-bottom: 1px solid rgba(255,255,255,0.1); }
         .sa-logo-icon { width: 36px; height: 36px; background: rgba(255,255,255,0.15); border-radius: 10px;
@@ -45,8 +45,8 @@
                      text-decoration: none; font-size: 0.8rem; padding: 0.4rem 0; transition: color 0.2s; }
         .sa-logout:hover { color: white; }
 
-        /* ── Main area ── */
+        /* 🟦 Main area 🟦 */
-        .sa-main { margin-left: var(--sidebar-w); flex: 1; display: flex; flex-direction: column; min-height: 100vh; }
+        .sa-main { display: flex; flex-direction: column; min-height: 100vh; overflow-x: hidden; }
         .sa-header { background: white; border-bottom: 1px solid var(--border); padding: 1rem 2rem;
                      display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 50; }
         .sa-header h1 { font-family: 'Outfit', sans-serif; font-size: 1.25rem; font-weight: 700; }