latest

resources/css/app.scss

@@ -74,11 +74,17 @@ body {
     background-color: var(--app-bg);
 }
 
-// ─── App Layout (Sidebar + Main) ──────────────────────────────────────────────
+// ─── App Layout (Topbar top, then sidebar + content row below) ───────────────
 .app-layout {
     display: flex;
+    flex-direction: column;
     min-height: 100vh;
-    // In RTL flex-direction:row, the first child (sidebar) appears on the RIGHT
+}
+
+.app-inner {
+    display: flex;
+    flex: 1;
+    min-height: 0;
 }
 
 // ─── Sidebar ──────────────────────────────────────────────────────────────────
@@ -88,9 +94,9 @@ body {
     background: var(--sidebar-bg);
     display: flex;
     flex-direction: column;
-    height: 100vh;
+    height: calc(100vh - var(--topbar-height));
     position: sticky;
-    top: 0;
+    top: var(--topbar-height);
     overflow-y: auto;
     scrollbar-width: none;
     transition: transform .3s ease;
@@ -222,11 +228,12 @@ body {
     flex-direction: column;
 }
 
-// ─── Topbar ───────────────────────────────────────────────────────────────────
+// ─── Topbar (unified — used on all pages) ─────────────────────────────────────
 .app-topbar {
     height: var(--topbar-height);
-    background: var(--topbar-bg);
-    border-bottom: 1px solid var(--border-color);
+    background: var(--sidebar-bg);
+    border-bottom: 1px solid rgba(255,255,255,.06);
+    box-shadow: 0 2px 12px rgba(0,0,0,.15);
     padding: 0 1.5rem;
     display: flex;
     align-items: center;
@@ -234,12 +241,12 @@ body {
     gap: 1rem;
     position: sticky;
     top: 0;
-    z-index: 100;
+    z-index: 200;
 
     .topbar-title {
         font-size: 1rem;
         font-weight: 700;
-        color: var(--text-primary);
+        color: #f8fafc;
         margin: 0;
     }
 
@@ -255,13 +262,13 @@ body {
     background: none;
     border: none;
     padding: .375rem .5rem;
-    color: var(--text-muted);
+    color: rgba(255,255,255,.65);
     border-radius: .375rem;
     cursor: pointer;
     display: none;
     font-size: 1.25rem;
 
-    &:hover { background: #f1f5f9; color: var(--text-primary); }
+    &:hover { background: rgba(255,255,255,.08); color: #fff; }
 }
 
 .sidebar-overlay {
@@ -283,13 +290,10 @@ body {
 @media (max-width: 991.98px) {
     .app-sidebar {
         position: fixed;
-        top: 0;
-        inset-inline-end: 0;   // right in RTL
-        height: 100%;
-        transform: translateX(calc(-1 * var(--sidebar-width)));
-        // In RTL, translateX negative moves LEFT (off screen)
-        // We need to hide it to the right side
-        transform: translateX(100%);
+        top: var(--topbar-height);
+        inset-inline-start: 0;  // anchors right edge to viewport right in RTL
+        height: calc(100% - var(--topbar-height));
+        transform: translateX(100%);  // hides off-screen to the right in RTL
 
         &.is-open {
             transform: translateX(0);
@@ -553,14 +557,6 @@ body {
 }
 
 // ─── Public (Index) Page ──────────────────────────────────────────────────────
-.public-header {
-    background: var(--sidebar-bg);
-    padding: 1.25rem 0;
-    position: sticky;
-    top: 0;
-    z-index: 200;
-    box-shadow: 0 2px 12px rgba(0,0,0,.15);
-}
 
 .parking-card {
     transition: all .18s ease;
@@ -605,11 +601,6 @@ body {
 }
 
 @media (min-width: 768px) {
-    .app-topbar {
-        backdrop-filter: blur(8px);
-        background: rgba(255,255,255,.96);
-    }
-
     .stat-card:hover {
         transform: translateY(-3px);
         box-shadow: 0 8px 28px rgba(0,0,0,.09) !important;
@@ -690,6 +681,8 @@ body {
     /* ── Admin / Operator layout ────────────────────────────────────────── */
     .sidebar-toggle { display: none !important; }
     .app-layout     { display: block; }
+    .app-inner      { display: block; }
+    .app-sidebar    { display: none !important; }
 
     .app-body {
         padding-bottom: var(--mobile-nav-h);
@@ -699,8 +692,6 @@ body {
     .app-topbar {
         height: 54px;
         padding: 0 1rem;
-        backdrop-filter: none;
-        background: #ffffff;
 
         .topbar-title { font-size: .9rem; }
     }
@@ -714,7 +705,7 @@ body {
     }
 
     /* ── Public page ────────────────────────────────────────────────────── */
-    .public-header  { padding: .625rem 0; }
+    .app-topbar     { padding: .625rem 1rem; }
     .mob-hero-compact { padding: .875rem 0 1rem !important; }
 
     /* Section switching — hide inactive section */