/* Admin shell layout — dark sidebar + light content area.
Variables exposed here are the contract every /plotex/* page consumes. */
/* Smooth cross-document navigation: for the routes _spa.js doesn't handle (login,
sub-pages), opt into the View Transitions API so supporting browsers crossfade
instead of white-flashing, and keep the sidebar visually stable across pages.
Progressive enhancement — unsupported browsers just navigate normally. */
@view-transition { navigation: auto; }
.sidebar { view-transition-name: admin-sidebar; }
:root {
--bg-dark: #1a1f2e;
--bg-dark-2: #232838;
--bg-light: #f4f6f9;
--card-bg: #ffffff;
--text-light: #f5f7fb;
--text-dim: #8a93a6;
--text-body: #2a2f3a;
--text-muted: #6b7280;
--accent-green: #4CAF50;
--accent-green-dim: rgba(76, 175, 80, 0.14);
--accent-green-dark: #3d9140;
--accent-red: #ff4444;
--accent-red-dim: rgba(255, 68, 68, 0.12);
--accent-blue: #2f7df0;
--accent-blue-dim: rgba(47, 125, 240, 0.12);
--accent-yellow: #f3e795;
--accent-purple: #8b5cf6;
--border: #e3e7ee;
--border-dark: #2a3145;
--status-available: #4CAF50;
--status-sold: #ff4444;
--status-booked: #f3e795;
--status-builder: #bababa;
--shadow-card: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
--shadow-elev: 0 8px 24px rgba(15, 23, 42, 0.12);
--sidebar-w: 220px;
--header-h: 64px;
--radius: 10px;
--radius-sm: 6px;
--font-stack: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* The canvas behind any overscroll/rubber-band is the background — left
unset it paints WHITE, which flashes against the dark sidebar/top bar when
scrolling (worst on small screens). Paint it dark to match the chrome and stop
the bounce where the platform allows. */
html {
background: var(--bg-dark);
overscroll-behavior-y: none;
}
body { overscroll-behavior-y: none; }
body.admin {
font-family: var(--font-stack);
background: var(--bg-light);
color: var(--text-body);
min-height: 100vh;
font-size: 14px;
line-height: 1.45;
-webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
/* ── Sidebar ─────────────────────────────────────────────── */
.admin-shell {
display: grid;
grid-template-columns: var(--sidebar-w) 1fr;
min-height: 100vh;
}
.sidebar {
background: var(--bg-dark);
color: var(--text-light);
display: flex;
flex-direction: column;
position: sticky;
top: 0;
height: 100vh;
height: 100dvh; /* dynamic viewport: stays correct while the mobile URL bar collapses */
border-right: 1px solid var(--border-dark);
}
.sidebar-brand {
padding: 18px 16px 14px;
border-bottom: 1px solid var(--border-dark);
}
.sidebar-brand-row {
display: flex;
align-items: center;
gap: 10px;
}
.sidebar-brand-row img {
width: 28px; height: 28px;
border-radius: 6px;
background: #fff;
padding: 3px;
object-fit: contain;
}
.sidebar-brand-name {
font-weight: 700;
letter-spacing: 1px;
font-size: 14px;
color: var(--accent-green);
}
.sidebar-project {
margin-top: 10px;
font-size: 13px;
color: var(--text-light);
font-weight: 600;
}
.sidebar-admin-pill {
display: inline-block;
margin-top: 6px;
background: var(--accent-green);
color: #08130a;
font-size: 10px;
font-weight: 700;
letter-spacing: 1px;
padding: 3px 8px;
border-radius: 4px;
}
/* Pages wrap the menu as . The