/* =========================================================
Moonglade Web — internal operations dashboard
v2 · Reskin · May 2026
Editorial design system applied as a refinement of the
existing class names. Drop-in replacement for static/style.css.
========================================================= */
/* --- Fonts (Inter + Cormorant Garamond) load via non-render-blocking
in base.html and login.html — not @import here. --- */
:root {
/* === Primary === */
--moon-dark: #1a3a52;
--moon-darker: #142e42;
--moon-gold: #c9a961;
--moon-gold-soft: #d8be7d;
--moon-teal: #2c5f7c;
/* === Surfaces === */
--moon-cream: #f5f1e8;
--moon-cream-soft: #faf8f2;
--moon-bg: #f5f1e8; /* cream replaces grey */
--moon-surface: #ffffff;
/* === Lines & text === */
--moon-divider: #d8d2c4; /* Stone-300 */
--moon-grey-light: #ece6d5;
--moon-text: #0d1f2d;
--moon-text-soft: #4a4438;
--moon-grey: #8a8170;
/* === Semantic === */
--moon-green: #2d6a4f;
--moon-amber: #b08442;
--moon-red: #8b2e2e;
/* === Status (unit availability) — SOLID high-contrast fills, FIXED in light + dark ===
These encode real-world unit state, not chrome, so they must NOT invert with the theme
(kept out of the [data-theme="dark"] block deliberately). Consumed by BOTH /block-availability
(.block-cell--*) and the /inventory Availability Matrix (.matrix-cell.status-*) so a colour
means the same thing on both surfaces. Tuned to survive WhatsApp/JPEG compression on a phone;
Available is the loud saturated state, everything else recedes. All hex — html2canvas 1.4.1
cannot parse oklch()/modern colour functions, and the share PNG capture inherits these. */
--st-avail-bg: #1B8A5A; --st-avail-fg: #FFFFFF; /* Available */
--st-booked-bg: #D9D4CA; --st-booked-fg: #5A554D; /* Booked — fg darkened from spec #7A756D (3.1:1) to clear 4.5:1 (5.0:1) */
--st-blocked-bg: #C9A961; --st-blocked-fg: #4A3B13; /* Blocked (brand gold) */
--st-cancel-bg: #C0392B; --st-cancel-fg: #FFFFFF; /* Cancelled */
--st-refuge-bg: #1A3A52; --st-refuge-fg: #FFFFFF; /* Refuge (brand navy) */
/* === Type === */
--serif: "Cormorant Garamond", "Playfair Display", Georgia, serif; /* @kind font */
--sans: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif; /* @kind font */
/* === Shadows === */
--shadow-card: 0 2px 16px rgba(26,58,82,0.06);
--shadow-elevated: 0 12px 48px rgba(26,58,82,0.10);
/* Measured height of the sticky .page-header (set by JS in base.html).
0px default → in-content sticky stack behaves exactly as pre-app-shell. */
--header-h: 0px;
}
* { box-sizing: border-box; }
html, body {
margin: 0; padding: 0;
font-family: var(--sans);
font-size: 14px;
line-height: 1.55;
color: var(--moon-text);
background: var(--moon-bg);
-webkit-font-smoothing: antialiased;
font-feature-settings: "cv11";
}
a { color: var(--moon-dark); text-decoration: none; }
a:hover { color: var(--moon-gold); }
/* =========================================================
APP SHELL
========================================================= */
/* Full-viewport shell: the window no longer scrolls — only the content region
(.content-scroll) does. Sidebar + slim footer bar stay constant. */
.app-shell { display: flex; height: 100vh; overflow: hidden; }
.sidebar {
width: 240px;
background: var(--moon-darker);
color: rgba(245,241,232,0.92);
padding: 28px 0 0;
flex-shrink: 0;
display: flex; flex-direction: column;
position: relative;
overflow: hidden; /* internal scroll is owned by