feat: split seatmap admin and readonly flows

frontend/public/styles.css

@@ -1,3 +1,19 @@
+.dashboard-shell,
+.dashboard-main,
+.main-stage,
+.seatmap-layout,
+.seatmap-content,
+.seatmap-board-panel,
+.seatmap-sidebar {
+  min-height: 0;
+}
+
+html,
+body {
+  height: 100%;
+  overflow: hidden;
+}
+
 .hidden {
   display: none !important;
 }
@@ -143,9 +159,10 @@
 }
 
 .dashboard-shell {
-  min-height: 100vh;
+  height: 100dvh;
   display: flex;
   flex-direction: column;
+  overflow: hidden;
 }
 
 .dashboard-header {
@@ -371,14 +388,16 @@
 
 .dashboard-main {
   flex: 1;
-  min-height: calc(100vh - 68px);
+  height: calc(100dvh - 68px);
   padding: 0;
+  overflow: hidden;
 }
 
 .main-stage {
-  height: calc(100vh - 68px);
+  height: calc(100dvh - 68px);
   display: flex;
   flex-direction: column;
+  overflow: hidden;
 }
 
 .stage-frame {
@@ -407,18 +426,45 @@
   flex-direction: column;
   gap: 12px;
   padding: 18px;
+  overflow: hidden;
   background:
     linear-gradient(180deg, rgba(248, 250, 252, 0.94), rgba(241, 245, 249, 0.92)),
     radial-gradient(circle at top left, rgba(14, 165, 233, 0.1), transparent 32%);
 }
 
 .seatmap-topbar {
-  display: flex;
-  align-items: flex-end;
-  justify-content: space-between;
+  display: grid;
+  grid-template-columns: minmax(180px, 1fr) auto minmax(180px, 1fr);
+  align-items: end;
   gap: 16px;
 }
 
+.seatmap-office-tabs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  justify-content: center;
+  grid-column: 2;
+}
+
+.seatmap-office-tab {
+  min-height: 38px;
+  padding: 0 14px;
+  border-radius: 999px;
+  border: 1px solid rgba(148, 163, 184, 0.26);
+  background: rgba(255, 255, 255, 0.92);
+  color: #475569;
+  font-size: 12px;
+  font-weight: 800;
+  cursor: pointer;
+}
+
+.seatmap-office-tab.active {
+  border-color: rgba(15, 118, 110, 0.22);
+  background: rgba(15, 118, 110, 0.1);
+  color: #0f766e;
+}
+
 .seatmap-topbar h3,
 .seatmap-panel-head h4 {
   margin: 0;
@@ -432,6 +478,12 @@
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
+  justify-content: flex-end;
+  grid-column: 3;
+}
+
+.seatmap-actions[hidden] {
+  display: none !important;
 }
 
 .seatmap-status {
@@ -456,6 +508,7 @@
   display: grid;
   grid-template-columns: minmax(0, 1fr) 320px;
   gap: 16px;
+  overflow: hidden;
 }
 
 .seatmap-board-panel,
@@ -468,6 +521,7 @@
 
 .seatmap-board-panel {
   min-height: 0;
+  height: 100%;
   overflow: hidden;
   padding: 0;
 }
@@ -475,7 +529,7 @@
 .seatmap-board-wrap {
   width: 100%;
   height: 100%;
-  overflow: auto;
+  overflow: hidden;
   border-radius: 24px;
   background: #ffffff;
   padding: 0;
@@ -490,6 +544,7 @@
 .seatmap-board {
   min-width: 100%;
   height: 100%;
+  overflow: hidden;
 }
 
 .seatmap-dxf-canvas {
@@ -506,15 +561,16 @@
 .seatmap-dxf-frame-shell {
   width: 100%;
   height: 100%;
-  min-height: 720px;
+  min-height: 0;
   background: #ffffff;
+  overflow: hidden;
 }
 
 .seatmap-dxf-frame {
   display: block;
   width: 100%;
   height: 100%;
-  min-height: 720px;
+  min-height: 0;
   border: 0;
   background: #ffffff;
 }
@@ -924,11 +980,78 @@
   padding-right: 4px;
 }
 
+.seatmap-member-section {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.seatmap-member-section + .seatmap-member-section {
+  margin-top: 6px;
+}
+
+.seatmap-member-section-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.seatmap-member-section-head strong {
+  font-size: 12px;
+  font-weight: 900;
+  color: #0f172a;
+}
+
+.seatmap-member-section-head span {
+  color: #64748b;
+  font-size: 11px;
+  font-weight: 800;
+}
+
+.seatmap-member-section-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
 .seatmap-member-list .seatmap-member-card {
   position: relative;
   inset: auto;
 }
 
+.seatmap-member-search-card {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 12px 14px;
+  border: 1px solid rgba(226, 232, 240, 0.9);
+  border-radius: 16px;
+  background: #fff;
+  cursor: pointer;
+  text-align: left;
+}
+
+.seatmap-member-badge {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  min-height: 28px;
+  padding: 0 10px;
+  border-radius: 999px;
+  background: #e2e8f0;
+  color: #475569;
+  font-size: 11px;
+  font-weight: 900;
+}
+
+.seatmap-member-badge.occupied {
+  background: rgba(220, 38, 38, 0.12);
+  color: #b91c1c;
+}
+
 .seatmap-member-card-compact {
   position: relative;
   inset: auto;
@@ -1005,6 +1128,11 @@
   margin-bottom: 8px;
 }
 
+.seatmap-list-empty-inline {
+  min-height: 64px;
+  padding: 12px;
+}
+
 @media (max-width: 1180px) {
   .dashboard-header {
     flex-wrap: wrap;
@@ -1062,8 +1190,13 @@
   }
 
   .seatmap-topbar {
+    grid-template-columns: 1fr;
     align-items: flex-start;
-    flex-direction: column;
+  }
+
+  .seatmap-office-tabs {
+    grid-column: 1;
+    justify-content: center;
   }
 
   .seatmap-dxf-canvas {
@@ -1076,7 +1209,7 @@
 
   .seatmap-dxf-frame-shell,
   .seatmap-dxf-frame {
-    min-height: 620px;
+    min-height: 0;
   }
 }