/*
* glass.css — AydenAI Glassmorphism Design System v2
*
* Refined from production use in Schedule Builder.
* Supports dark mode (default) and light mode via [data-theme="light"] on .
*
* ── QUICK START ──────────────────────────────────────────────────────────────
*
* 1. In your app's main CSS:
* @import '../../shared/glass.css';
*
* 2. In your HTML, add the animated background before #root:
*
*
* 3. Apply surface classes to your elements (see cheat sheet below).
*
* ── CHEAT SHEET ──────────────────────────────────────────────────────────────
*
* Background canvas (add to HTML, before #root):
* .bg-canvas + .bg-blob-1..4 Animated blob background
*
* App chrome:
* .glass-header Top nav bar (position:sticky top)
* .glass-sidebar Left/right sidebar panel
* .glass-right Main content area (no backdrop-filter —
* keeps position:fixed children working)
*
* Surfaces (nest inside chrome above):
* .glass-card Standard card / section panel
* .glass-card--opaque Card where full opacity is needed
* (e.g. sticky footers, tooltips)
* .glass-modal-backdrop Full-screen modal overlay
* .glass-modal Modal dialog (59% glass)
* .glass-popover Small floating popover / dropdown
*
* Form elements (inside .glass-sidebar or .glass-card):
* .glass-input text / number / date input
* .glass-select select element
* .glass-textarea textarea
* .glass-input-opaque Input inside an opaque sticky section
* .glass-link-btn Text-only secondary action (login card)
*
* Tables:
* .glass-table-wrap Wraps a — rounded glass card
* .glass-table The itself — borderless rows
* .glass-table-header-bar Toggle/filter bar above the table
*
* Misc utilities:
* .glass-divider
separator inside a card
* .glass-text-dim Muted secondary text
* .glass-badge Small inline chip/badge
*
* ── MOBILE ───────────────────────────────────────────────────────────────────
*
* A @media (max-width: 768px) block at the end of this file handles:
* · Reduced blur (GPU performance on mobile)
* · Sidebar stacks above main content
* · .glass-modal becomes a bottom-sheet (rounded top, full-width)
* · 44px touch targets on inputs/buttons
* · Tables get horizontal scroll
* · Smaller blobs with less blur
*
* ── CUSTOMISING ───────────────────────────────────────────────────────────────
*
* Override CSS variables in your app's own stylesheet after the @import:
*
* :root {
* --glass-blur: 40px; // stronger frosting
* --glass-accent: #e85d04; // your brand color
* --glass-blob-1: rgba(200, 80, 30, 0.6); // warm blobs
* }
*/
/* ═══════════════════════════════════════════════════════════════════════════
DESIGN TOKENS
═══════════════════════════════════════════════════════════════════════════ */
:root {
/* Blur amount */
--glass-blur: 28px;
--glass-blur-heavy: 32px;
--glass-blur-light: 12px;
/* Dark mode surfaces */
--glass-bg-dark: rgba(18, 18, 30, 0.42);
--glass-bg-dark-card: rgba(255, 255, 255, 0.06);
--glass-bg-dark-modal: rgba(18, 18, 30, 0.59);
--glass-bg-dark-popover: rgba(18, 18, 30, 0.88);
--glass-bg-dark-sticky: rgba(38, 32, 72, 0.48);
--glass-bg-dark-header: rgba(12, 12, 22, 0.72);
--glass-border-dark: rgba(255, 255, 255, 0.14);
--glass-border-dark-hi: rgba(255, 255, 255, 0.22);
--glass-inset-dark: rgba(255, 255, 255, 0.08);
--glass-shadow-dark: 0 8px 40px rgba(0, 0, 0, 0.4);
--glass-shadow-dark-sm: 0 4px 24px rgba(0, 0, 0, 0.25);
--glass-shadow-dark-lg: 0 32px 72px rgba(0, 0, 0, 0.5);
--glass-text-dark: #e4e4e7;
--glass-text-dim-dark: rgba(255, 255, 255, 0.55);
--glass-text-faint-dark: rgba(255, 255, 255, 0.38);
/* Light mode surfaces */
--glass-bg-light: rgba(255, 255, 255, 0.20);
--glass-bg-light-card: rgba(255, 255, 255, 0.16);
--glass-bg-light-modal: rgba(255, 255, 255, 0.59);
--glass-bg-light-popover: rgba(255, 255, 255, 0.90);
--glass-bg-light-sticky: rgba(242, 242, 252, 0.97);
--glass-bg-light-header: rgba(248, 248, 255, 0.82);
--glass-border-light: rgba(255, 255, 255, 0.45);
--glass-border-light-hi: rgba(255, 255, 255, 0.65);
--glass-inset-light: rgba(255, 255, 255, 0.55);
--glass-shadow-light: 0 8px 40px rgba(80, 40, 180, 0.1);
--glass-shadow-light-sm: 0 4px 24px rgba(80, 40, 180, 0.08);
--glass-shadow-light-lg: 0 32px 72px rgba(0, 0, 0, 0.18);
--glass-text-light: #111111;
--glass-text-dim-light: #27272a;
--glass-text-faint-light: #3f3f46;
/* Blob palette — mango (AydenAI default). theme.css re-declares these as the
brand layer; these values are the fallback for anything importing glass.css
alone, so they must stay in step with it. See docs/BRAND.md.
Dark and light are tuned independently — alpha does not compare across
them (mango emits on navy, stains on cream), so light's values being the
higher pair is deliberate, not a typo. */
--glass-blob-1: rgba(251, 146, 60, 0.25);
--glass-blob-2: rgba(251, 191, 36, 0.22);
--glass-blob-3: rgba(234, 88, 12, 0.22);
--glass-blob-4: rgba(251, 113, 133, 0.20);
--glass-blob-base: #07071a;
--glass-blob-1-light: rgba(251, 146, 60, 0.24);
--glass-blob-2-light: rgba(252, 211, 77, 0.22);
--glass-blob-3-light: rgba(249, 115, 22, 0.16);
--glass-blob-4-light: rgba(253, 164, 175, 0.20);
--glass-blob-base-light: #e6d5bd;
/* Accent — action only, never the backdrop */
--glass-accent: #5b5bd6;
}
/* ═══════════════════════════════════════════════════════════════════════════
ANIMATED BACKGROUND CANVAS
Add to HTML before #root:
═══════════════════════════════════════════════════════════════════════════ */
.bg-canvas {
position: fixed;
inset: 0;
z-index: -1;
overflow: hidden;
background: var(--glass-blob-base);
transition: background 0.4s;
}
[data-theme="light"] .bg-canvas {
background: var(--glass-blob-base-light);
}
.bg-blob {
position: absolute;
border-radius: 50%;
filter: blur(60px);
}
/* Static, deliberately — matches mobile AppBackground.tsx, and keeps animated
blur(60px) layers off the compositor during scroll. */
.bg-blob-1 {
width: 55vw; height: 55vw;
background: var(--glass-blob-1);
top: -18%; left: -12%;
}
.bg-blob-2 {
width: 45vw; height: 45vw;
background: var(--glass-blob-2);
bottom: -12%; right: -8%;
}
.bg-blob-3 {
width: 38vw; height: 38vw;
background: var(--glass-blob-3);
top: 35%; right: 18%;
}
.bg-blob-4 {
width: 32vw; height: 32vw;
background: var(--glass-blob-4);
bottom: 18%; left: 12%;
}
[data-theme="light"] .bg-blob-1 { background: var(--glass-blob-1-light); }
[data-theme="light"] .bg-blob-2 { background: var(--glass-blob-2-light); }
[data-theme="light"] .bg-blob-3 { background: var(--glass-blob-3-light); }
[data-theme="light"] .bg-blob-4 { background: var(--glass-blob-4-light); }
/* ═══════════════════════════════════════════════════════════════════════════
APP CHROME
═══════════════════════════════════════════════════════════════════════════ */
/*
* .glass-header — frosted header for the dashboard (position: sticky)
* .glass-app-nav — fixed nav for React suite apps (payroll, schedule, etc.)
* position: fixed so content scrolls behind it visibly.
* Each app's main content area needs padding-top ~50px to
* prevent initial content from being hidden behind the nav.
*/
.glass-header {
position: sticky;
top: 0;
z-index: 40;
background: rgba(11, 11, 22, 0.82);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border-bottom: 1px solid rgba(255, 255, 255, 0.14);
box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06), 0 1px 16px rgba(0, 0, 0, 0.15);
color: var(--glass-text-dark);
}
.glass-app-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 40;
background: rgba(11, 11, 22, 0.82);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border-bottom: 1px solid rgba(255, 255, 255, 0.14);
box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06), 0 1px 16px rgba(0, 0, 0, 0.15);
color: var(--glass-text-dark);
}
[data-theme="light"] .glass-header,
[data-theme="light"] .glass-app-nav {
background: rgba(248, 249, 253, 0.86);
border-bottom: 1px solid rgba(120, 130, 170, 0.28);
box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.45), 0 1px 16px rgba(80, 40, 180, 0.04);
color: var(--glass-text-light);
}
/* ── Suite nav components (shared across all apps) ─────────────────────────
Use these class names directly in each app's HTML/JSX.
The active colour is mango, suite-wide, and belongs to shared/theme.css.
Do NOT add per-app .suite-nav-link.active colours: three apps used to carry
their own (yellow/green/amber) and the nav never matched itself.
─────────────────────────────────────────────────────────────────────────── */
.suite-nav { display: flex; align-items: center; gap: 2px; }
/* App-switcher drawer. The trigger and the inline nav are mutually exclusive:
desktop shows .suite-nav, the mobile block below swaps to .suite-nav-trigger.
Nine suite apps never fit inline on a phone, so there they move into a
drawer instead of being crushed into an unreadable scroll strip. */
.suite-nav-trigger {
display: none; /* mobile block turns this on */
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
flex-shrink: 0;
padding: 0;
cursor: pointer;
border-radius: 9px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.05);
color: var(--glass-text-faint-dark, rgba(255, 255, 255, 0.7));
}
.suite-nav-trigger:active { transform: scale(0.94); }
[data-theme="light"] .suite-nav-trigger {
border-color: rgba(30, 41, 59, 0.15);
background: rgba(30, 41, 59, 0.04);
color: rgba(30, 41, 59, 0.7);
}
.suite-drawer-backdrop {
position: fixed;
inset: 0;
z-index: 200; /* above .glass-app-nav (40) and its menus (50) */
background: rgba(6, 6, 14, 0.55);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
animation: suite-drawer-fade 0.16s ease-out;
}
.suite-drawer {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: min(272px, 82vw);
padding: 14px 12px;
overflow-y: auto;
background: #14141f;
border-right: 1px solid rgba(255, 255, 255, 0.08);
animation: suite-drawer-in 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-theme="light"] .suite-drawer {
background: #fbf6ee;
border-right-color: rgba(30, 41, 59, 0.1);
}
.suite-drawer-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.suite-drawer-title {
font-family: 'Manrope', sans-serif;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--glass-text-faint-dark, rgba(255, 255, 255, 0.6));
}
.suite-drawer-close {
border: 0;
background: none;
cursor: pointer;
font-size: 22px;
line-height: 1;
padding: 0 4px;
color: var(--glass-text-faint-dark, rgba(255, 255, 255, 0.6));
}
.suite-drawer-link {
display: block;
padding: 11px 12px; /* ≥44px touch target with the font below */
margin-bottom: 2px;
border-radius: 9px;
font-family: 'Nunito', sans-serif;
font-size: 14px;
text-decoration: none;
color: var(--glass-text-dark, rgba(255, 255, 255, 0.86));
}
.suite-drawer-link.active {
background: rgba(255, 255, 255, 0.09);
font-weight: 700;
box-shadow: inset 2px 0 0 var(--glass-accent, #f59e0b);
}
[data-theme="light"] .suite-drawer-link { color: rgba(30, 41, 59, 0.88); }
[data-theme="light"] .suite-drawer-link.active { background: rgba(30, 41, 59, 0.07); }
/* Header overflow ("⋯"). Mirrors the drawer: inline on desktop, sheet on mobile.
display:contents keeps the inline items as direct flex children of the header
so desktop layout is byte-for-byte what it was before the wrapper existed. */
.header-inline-actions { display: contents; }
.header-overflow-trigger {
display: none; /* mobile block turns this on */
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
flex-shrink: 0;
padding: 0;
cursor: pointer;
border-radius: 9px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.05);
color: var(--glass-text-faint-dark, rgba(255, 255, 255, 0.7));
}
.header-overflow-trigger:active { transform: scale(0.94); }
[data-theme="light"] .header-overflow-trigger {
border-color: rgba(30, 41, 59, 0.15);
background: rgba(30, 41, 59, 0.04);
color: rgba(30, 41, 59, 0.7);
}
.header-overflow-status {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 4px;
font-family: 'Nunito', sans-serif;
font-size: 13px;
color: var(--glass-text-faint-dark, rgba(255, 255, 255, 0.6));
}
.header-overflow-status strong {
font-weight: 700;
color: var(--glass-text-dark, rgba(255, 255, 255, 0.9));
}
.header-overflow-item {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 13px 4px; /* ≥44px touch target */
border: 0;
background: none;
cursor: pointer;
text-align: left;
font-family: 'Nunito', sans-serif;
font-size: 15px;
color: var(--glass-text-dark, rgba(255, 255, 255, 0.88));
}
/* Separate read-only status from the tappable actions below it. */
.header-overflow-status + .header-overflow-item {
border-top: 1px solid rgba(255, 255, 255, 0.09);
margin-top: 2px;
padding-top: 15px;
}
[data-theme="light"] .header-overflow-status + .header-overflow-item {
border-top-color: rgba(30, 41, 59, 0.1);
}
.header-overflow-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
flex-shrink: 0;
}
[data-theme="light"] .header-overflow-status { color: rgba(30, 41, 59, 0.6); }
[data-theme="light"] .header-overflow-status strong,
[data-theme="light"] .header-overflow-item { color: rgba(30, 41, 59, 0.88); }
@keyframes suite-drawer-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes suite-drawer-in { from { transform: translateX(-100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
.suite-drawer-backdrop, .suite-drawer { animation: none; }
}
.suite-nav-link {
font-size: 12px;
font-family: 'Nunito', sans-serif;
color: var(--glass-text-faint-dark);
text-decoration: none;
padding: 5px 10px;
border-radius: 6px;
border: 1px solid transparent;
line-height: 1.4;
white-space: nowrap;
transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.suite-nav-link:hover {
color: var(--glass-text-dark);
border-color: var(--glass-border-dark);
background: rgba(255, 255, 255, 0.07);
}
/* Mirrors shared/theme.css — fallback for anything importing glass.css alone. */
.suite-nav-link.active {
color: #fb923c;
border-color: rgba(251, 146, 60, 0.32);
background: rgba(251, 146, 60, 0.10);
}
[data-theme="light"] .suite-nav-link { color: var(--glass-text-dim-light); }
[data-theme="light"] .suite-nav-link:hover {
color: var(--glass-text-light);
border-color: rgba(0, 0, 0, 0.12);
background: rgba(255, 255, 255, 0.50);
}
[data-theme="light"] .suite-nav-link.active {
color: #c2410c;
border-color: rgba(194, 65, 12, 0.30);
background: rgba(251, 146, 60, 0.12);
}
/* Icon button (⚙ settings, etc.) — 30×30 square glass pill */
/* Header icon buttons (settings, sign-out) + theme toggle share one look. */
.btn-icon-header,
.theme-toggle-btn {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
border-radius: 9px;
flex-shrink: 0;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.14);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 1px 2px rgba(0, 0, 0, 0.22);
color: var(--glass-text-dim-dark);
font-size: 15px;
line-height: 1;
cursor: pointer;
transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s, box-shadow 0.15s;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.btn-icon-header:hover,
.theme-toggle-btn:hover {
background: rgba(255, 255, 255, 0.13);
border-color: rgba(255, 255, 255, 0.26);
color: var(--glass-text-dark);
transform: translateY(-1px);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 4px 12px rgba(0, 0, 0, 0.30);
opacity: 1;
}
.btn-icon-header:active,
.theme-toggle-btn:active {
transform: translateY(0);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.28);
}
[data-theme="light"] .btn-icon-header,
[data-theme="light"] .theme-toggle-btn {
background: rgba(255, 255, 255, 0.55);
border-color: rgba(255, 255, 255, 0.75);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.70), 0 1px 2px rgba(40, 55, 80, 0.12);
color: var(--glass-text-dim-light);
}
[data-theme="light"] .btn-icon-header:hover,
[data-theme="light"] .theme-toggle-btn:hover {
background: rgba(255, 255, 255, 0.85);
border-color: rgba(255, 255, 255, 0.95);
color: var(--glass-text-light);
transform: translateY(-1px);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.80), 0 4px 12px rgba(40, 55, 80, 0.16);
}
/* Tab switcher pill (e.g. Calculator | CPA Export) */
.header-tabs {
display: flex;
gap: 2px;
background: rgba(255, 255, 255, 0.07);
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 8px;
padding: 3px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
[data-theme="light"] .header-tabs {
background: rgba(255, 255, 255, 0.45);
border-color: rgba(255, 255, 255, 0.70);
}
.tab-btn {
background: transparent;
border: none;
color: var(--glass-text-dim-dark);
font-size: 12px;
font-weight: 500;
padding: 5px 14px;
border-radius: 5px;
cursor: pointer;
white-space: nowrap;
transition: background 0.12s, color 0.12s;
}
.tab-btn:hover { color: var(--glass-text-dark); opacity: 1; }
.tab-btn.active {
background: rgba(255, 255, 255, 0.14);
color: var(--glass-text-dark);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
[data-theme="light"] .tab-btn { color: var(--glass-text-dim-light); }
[data-theme="light"] .tab-btn:hover { color: var(--glass-text-light); }
[data-theme="light"] .tab-btn.active {
background: rgba(255, 255, 255, 0.70);
color: var(--glass-text-light);
}
/* ─────────────────────────────────────────────────────────────────────────── */
/* Left / right sidebar */
.glass-sidebar {
background: var(--glass-bg-dark);
backdrop-filter: blur(var(--glass-blur-heavy));
-webkit-backdrop-filter: blur(var(--glass-blur-heavy));
border-right: 1px solid var(--glass-border-dark);
box-shadow: inset -1px 0 0 var(--glass-inset-dark);
color: var(--glass-text-dark);
}
[data-theme="light"] .glass-sidebar {
background: var(--glass-bg-light);
border-right: 1px solid var(--glass-border-light);
box-shadow: inset -1px 0 0 var(--glass-inset-light);
color: var(--glass-text-light);
}
/*
* Main content / right panel.
* IMPORTANT: intentionally has NO backdrop-filter.
* backdrop-filter creates a CSS stacking context that traps position:fixed
* children (modals, popovers) inside the panel — they appear at wrong
* coordinates. Omitting it here keeps fixed children viewport-relative.
* The blobs are already blurred at the source (filter:blur on .bg-blob).
*/
.glass-right {
background: rgba(10, 10, 18, 0.28);
color: var(--glass-text-dark);
}
[data-theme="light"] .glass-right {
background: rgba(255, 255, 255, 0.18);
color: var(--glass-text-light);
}
/* ═══════════════════════════════════════════════════════════════════════════
SURFACE CARDS
═══════════════════════════════════════════════════════════════════════════ */
/* Standard card — semi-transparent, use inside sidebars or right panels */
.glass-card {
background: var(--glass-bg-dark-card);
border: 1px solid var(--glass-border-dark);
border-radius: 10px;
box-shadow: var(--glass-shadow-dark-sm), inset 0 1px 0 var(--glass-inset-dark);
backdrop-filter: blur(var(--glass-blur-light));
-webkit-backdrop-filter: blur(var(--glass-blur-light));
color: var(--glass-text-dark);
}
[data-theme="light"] .glass-card {
background: var(--glass-bg-light-card);
border: 1px solid var(--glass-border-light);
box-shadow: var(--glass-shadow-light-sm), inset 0 1px 0 var(--glass-inset-light);
color: var(--glass-text-light);
}
/*
* Opaque card — for sticky footers, overlapping elements, or any surface
* where background content would bleed through a semi-transparent card.
* Uses a deep indigo tint to stay on-brand while blocking bleed-through.
*/
.glass-card--opaque {
background: var(--glass-bg-dark-sticky);
border: 1px solid var(--glass-border-dark-hi);
border-radius: 10px;
box-shadow: var(--glass-shadow-dark), inset 0 1px 0 rgba(255, 255, 255, 0.12);
backdrop-filter: blur(var(--glass-blur-heavy));
-webkit-backdrop-filter: blur(var(--glass-blur-heavy));
color: var(--glass-text-dark);
}
[data-theme="light"] .glass-card--opaque {
background: var(--glass-bg-light-sticky);
border: 1px solid var(--glass-border-light-hi);
box-shadow: var(--glass-shadow-light), inset 0 1px 0 rgba(255, 255, 255, 0.9);
color: var(--glass-text-light);
}
/* ═══════════════════════════════════════════════════════════════════════════
MODALS & POPOVERS
═══════════════════════════════════════════════════════════════════════════ */
/* Full-screen modal backdrop */
.glass-modal-backdrop {
position: fixed;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 100;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
background:
radial-gradient(ellipse at 20% 30%, var(--glass-blob-1) 0%, transparent 55%),
radial-gradient(ellipse at 80% 70%, var(--glass-blob-2) 0%, transparent 50%),
radial-gradient(ellipse at 60% 15%, var(--glass-blob-3) 0%, transparent 45%),
rgba(0, 0, 0, 0.72);
}
[data-theme="light"] .glass-modal-backdrop {
background:
radial-gradient(ellipse at 20% 30%, var(--glass-blob-1-light) 0%, transparent 55%),
radial-gradient(ellipse at 80% 70%, var(--glass-blob-2-light) 0%, transparent 50%),
radial-gradient(ellipse at 60% 15%, var(--glass-blob-3-light) 0%, transparent 45%),
rgba(200, 200, 220, 0.35);
}
/* Modal dialog box — flex column so header/footer stay fixed and the body
(.glass-modal-body) scrolls; overflow:hidden clips children to the
rounded corners instead of requiring each section to match the radius. */
.glass-modal {
background: var(--glass-bg-dark-modal);
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
border: 1px solid var(--glass-border-dark-hi);
border-radius: 14px;
box-shadow: var(--glass-shadow-dark-lg), inset 0 1px 0 rgba(255, 255, 255, 0.14);
color: var(--glass-text-dark);
display: flex;
flex-direction: column;
overflow: hidden;
}
[data-theme="light"] .glass-modal {
background: var(--glass-bg-light-modal);
border: 1px solid var(--glass-border-light-hi);
box-shadow: var(--glass-shadow-light-lg), inset 0 1px 0 var(--glass-inset-light);
color: var(--glass-text-light);
}
/* Modal header / footer — fixed bars with dividers */
.glass-modal-header,
.glass-modal-footer {
display: flex;
align-items: center;
gap: 10px;
padding: 16px 20px;
flex-shrink: 0;
border-color: var(--glass-border-dark);
background: rgba(255, 255, 255, 0.03);
}
.glass-modal-header { justify-content: space-between; border-bottom: 1px solid var(--glass-border-dark); font-weight: 700; font-size: 15px; }
.glass-modal-footer { justify-content: flex-end; border-top: 1px solid var(--glass-border-dark); }
[data-theme="light"] .glass-modal-header,
[data-theme="light"] .glass-modal-footer {
border-color: rgba(0, 0, 0, 0.08);
background: rgba(255, 255, 255, 0.35);
}
/* Scrollable body between header/footer */
.glass-modal-body {
padding: 18px 20px;
overflow-y: auto;
}
/* Small floating popover / dropdown */
.glass-popover {
background: var(--glass-bg-dark-popover);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid var(--glass-border-dark-hi);
border-radius: 8px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.10);
color: var(--glass-text-dark);
}
[data-theme="light"] .glass-popover {
background: var(--glass-bg-light-popover);
border: 1px solid var(--glass-border-light-hi);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
color: var(--glass-text-light);
}
/* ═══════════════════════════════════════════════════════════════════════════
FORM ELEMENTS
Apply inside .glass-sidebar or .glass-card for correct contrast.
═══════════════════════════════════════════════════════════════════════════ */
.glass-input,
.glass-select,
.glass-textarea {
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 6px;
color: var(--glass-text-dark);
font-family: inherit;
font-size: 13px;
padding: 6px 10px;
outline: none;
width: 100%;
transition: border-color 0.12s, background 0.12s;
}
.glass-input:focus,
.glass-select:focus,
.glass-textarea:focus {
border-color: rgba(91, 91, 214, 0.6);
background: rgba(255, 255, 255, 0.12);
}
[data-theme="light"] .glass-input,
[data-theme="light"] .glass-select,
[data-theme="light"] .glass-textarea {
background: rgba(0, 0, 0, 0.04);
border: 1px solid rgba(0, 0, 0, 0.14);
color: var(--glass-text-light);
}
[data-theme="light"] .glass-input:focus,
[data-theme="light"] .glass-select:focus,
[data-theme="light"] .glass-textarea:focus {
border-color: rgba(91, 91, 214, 0.5);
background: rgba(0, 0, 0, 0.02);
}
[data-theme="light"] .glass-input::placeholder,
[data-theme="light"] .glass-select::placeholder,
[data-theme="light"] .glass-textarea::placeholder {
color: rgba(24, 24, 27, 0.38);
}
/*
* Opaque input — use inside .glass-card--opaque (e.g. sticky footer textarea).
* The parent is already semi-transparent, so a glass input would let
* underlying content bleed through. This gives a solid-enough background.
*/
.glass-input-opaque {
background: rgba(255, 255, 255, 0.07);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 6px;
color: var(--glass-text-dark);
font-family: inherit;
font-size: 13px;
padding: 6px 10px;
outline: none;
width: 100%;
}
.glass-input-opaque:focus {
border-color: rgba(91, 91, 214, 0.6);
}
[data-theme="light"] .glass-input-opaque {
background: rgba(0, 0, 0, 0.04);
border: 1px solid rgba(0, 0, 0, 0.14);
color: var(--glass-text-light);
}
/* ═══════════════════════════════════════════════════════════════════════════
BUTTONS
═══════════════════════════════════════════════════════════════════════════ */
/* Ghost glass button */
.glass-btn {
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 6px;
color: var(--glass-text-dark);
cursor: pointer;
font-family: inherit;
font-size: 13px;
padding: 6px 12px;
transition: background 0.15s, border-color 0.15s;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.glass-btn:hover {
background: rgba(255, 255, 255, 0.14);
border-color: rgba(255, 255, 255, 0.28);
}
[data-theme="light"] .glass-btn {
background: rgba(255, 255, 255, 0.55);
border: 1px solid rgba(255, 255, 255, 0.75);
color: var(--glass-text-light);
}
[data-theme="light"] .glass-btn:hover {
background: rgba(255, 255, 255, 0.80);
border-color: rgba(255, 255, 255, 0.90);
}
/* Primary accent button */
.glass-btn-primary {
background: var(--glass-accent);
border: none;
border-radius: 8px;
color: #fff;
cursor: pointer;
font-family: inherit;
font-size: 14px;
font-weight: 600;
padding: 11px 16px;
width: 100%;
transition: filter 0.15s;
}
.glass-btn-primary:hover { filter: brightness(1.12); }
.glass-btn-primary:active { filter: brightness(0.92); }
.glass-btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }
/* Text-only affordance for the secondary paths on the login card — "Forgot
password?", "Send a new code", "Back". These are alternatives to the primary
action, not competing buttons: giving them any chrome would put three equal
controls on a card whose whole job is to have one. */
.glass-link-btn {
background: none;
border: none;
padding: 0;
color: var(--glass-text-dim-dark);
cursor: pointer;
font-family: inherit;
font-size: 11.5px;
font-weight: 600;
text-decoration: underline;
text-underline-offset: 3px;
transition: color 0.15s;
}
[data-theme="light"] .glass-link-btn { color: var(--glass-text-dim-light); }
.glass-link-btn:hover:not(:disabled) { color: var(--glass-accent, #5b5bd6); }
.glass-link-btn:disabled { opacity: 0.4; cursor: not-allowed; }
/* ═══════════════════════════════════════════════════════════════════════════
TABLES
Borderless row-separator design — no grid-prison.
═══════════════════════════════════════════════════════════════════════════ */
/* Outer wrapper — glass card with overflow:hidden for rounded corners */
.glass-table-wrap {
overflow: hidden;
border-radius: 10px;
border: 1px solid var(--glass-border-dark);
box-shadow: var(--glass-shadow-dark-sm), inset 0 1px 0 var(--glass-inset-dark);
}
[data-theme="light"] .glass-table-wrap {
border: 1px solid var(--glass-border-light);
box-shadow: var(--glass-shadow-light-sm), inset 0 1px 0 var(--glass-inset-light);
}
/* Toggle / filter bar — flat header strip, no nested box */
.glass-table-header-bar {
display: flex;
align-items: center;
gap: 14px;
padding: 8px 14px;
background: rgba(255, 255, 255, 0.05);
border-bottom: 1px solid rgba(255, 255, 255, 0.10);
font-size: 11px;
color: rgba(255, 255, 255, 0.62);
}
[data-theme="light"] .glass-table-header-bar {
background: rgba(255, 255, 255, 0.30);
border-bottom: 1px solid rgba(0, 0, 0, 0.07);
color: rgba(24, 24, 27, 0.60);
}
/* The table itself */
.glass-table {
width: 100%;
border-collapse: collapse;
font-size: 12px;
}
/* Row separators only — no vertical grid lines */
.glass-table th,
.glass-table td {
border: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
padding: 8px 10px;
vertical-align: top;
}
[data-theme="light"] .glass-table th,
[data-theme="light"] .glass-table td {
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
/* Stronger header separator */
.glass-table thead tr {
border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
[data-theme="light"] .glass-table thead tr {
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
/* Header cells */
.glass-table th {
background: rgba(255, 255, 255, 0.05);
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.07em;
color: rgba(255, 255, 255, 0.50);
}
[data-theme="light"] .glass-table th {
background: rgba(255, 255, 255, 0.28);
color: rgba(24, 24, 27, 0.50);
}
/* Alternating row tint (replaces grid lines) */
.glass-table tbody tr:nth-child(odd) td {
background-color: rgba(255, 255, 255, 0.025);
}
[data-theme="light"] .glass-table tbody tr:nth-child(odd) td {
background-color: rgba(255, 255, 255, 0.15);
}
/* Footer totals row */
.glass-table tfoot td {
background: rgba(255, 255, 255, 0.06);
font-weight: 600;
border-top: 1px solid rgba(255, 255, 255, 0.18) !important;
}
[data-theme="light"] .glass-table tfoot td {
background: rgba(255, 255, 255, 0.28);
border-top: 1px solid rgba(0, 0, 0, 0.10) !important;
}
/* Footer legend strip (e.g. "* 30-min break deducted") */
.glass-table-legend {
padding: 8px 14px;
font-size: 10.5px;
color: rgba(255, 255, 255, 0.42);
border-top: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.03);
}
[data-theme="light"] .glass-table-legend {
color: rgba(24, 24, 27, 0.48);
border-top: 1px solid rgba(0, 0, 0, 0.06);
background: rgba(255, 255, 255, 0.20);
}
/* ═══════════════════════════════════════════════════════════════════════════
UTILITIES
═══════════════════════════════════════════════════════════════════════════ */
.glass-divider {
border: none;
border-top: 1px solid rgba(255, 255, 255, 0.10);
background: transparent;
}
[data-theme="light"] .glass-divider {
border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.glass-text-dim {
color: var(--glass-text-dim-dark);
}
[data-theme="light"] .glass-text-dim {
color: var(--glass-text-dim-light);
}
.glass-text-faint {
color: var(--glass-text-faint-dark);
}
[data-theme="light"] .glass-text-faint {
color: var(--glass-text-faint-light);
}
/* Small inline badge / chip */
.glass-badge {
display: inline-flex;
align-items: center;
padding: 2px 7px;
border-radius: 20px;
font-size: 10px;
font-weight: 600;
background: rgba(255, 255, 255, 0.10);
border: 1px solid rgba(255, 255, 255, 0.18);
color: var(--glass-text-dark);
}
[data-theme="light"] .glass-badge {
background: rgba(255, 255, 255, 0.55);
border: 1px solid rgba(255, 255, 255, 0.70);
color: var(--glass-text-light);
}
/* Toggle row — a labeled switch row used for on/off settings throughout the
suite (e.g. schedule-builder's constraint toggles). Apps provide --text/
--text-dim/--accent (all already standard per-app tokens). */
.toggle-row {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 11px;
border-radius: 10px;
cursor: pointer;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.1);
user-select: none;
transition: background 0.12s, border-color 0.12s;
}
.toggle-row:hover { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.18); }
.toggle-row--on { background: rgba(91, 91, 214, 0.1); border-color: rgba(91, 91, 214, 0.32); }
.toggle-row-label {
flex: 1;
font-size: 12px;
line-height: 1.4;
color: var(--text-dim);
}
.toggle-row--on .toggle-row-label { color: var(--text); }
[data-theme="light"] .toggle-row { background: rgba(255, 255, 255, 0.4); border-color: rgba(255, 255, 255, 0.6); }
[data-theme="light"] .toggle-row:hover { background: rgba(255, 255, 255, 0.62); }
/* The switch itself — a styled checkbox. Selectors use `input[type='checkbox'].switch`
(element + attribute + class) so they reliably outrank the global
`input[type='checkbox']` rule (which forces 13×13) regardless of stylesheet order. */
input[type='checkbox'].switch {
appearance: none;
-webkit-appearance: none;
flex-shrink: 0;
width: 34px;
height: 20px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.14);
border: 1px solid rgba(255, 255, 255, 0.16);
position: relative;
cursor: pointer;
transition: background 0.15s, border-color 0.15s;
margin: 0;
padding: 0;
}
input[type='checkbox'].switch::after {
content: '';
position: absolute;
top: 50%;
left: 2px;
transform: translateY(-50%);
width: 14px;
height: 14px;
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
transition: left 0.15s;
}
input[type='checkbox'].switch:checked {
background: var(--accent);
border-color: var(--accent);
}
input[type='checkbox'].switch:checked::after { left: 16px; }
[data-theme="light"] input[type='checkbox'].switch { background: rgba(40, 55, 80, 0.18); border-color: rgba(40, 55, 80, 0.12); }
/* View toggle pill (e.g. Timeline / Table switcher) */
.glass-toggle-group {
display: flex;
background: rgba(255, 255, 255, 0.07);
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 8px;
padding: 3px;
width: fit-content;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
[data-theme="light"] .glass-toggle-group {
background: rgba(255, 255, 255, 0.45);
border: 1px solid rgba(255, 255, 255, 0.70);
}
.glass-toggle-btn {
background: transparent;
border: none;
color: var(--glass-text-dim-dark);
font-size: 12px;
font-weight: 500;
padding: 5px 16px;
border-radius: 5px;
cursor: pointer;
transition: background 0.12s, color 0.12s;
}
.glass-toggle-btn:hover { color: var(--glass-text-dark); }
.glass-toggle-btn.active {
background: rgba(255, 255, 255, 0.14);
color: var(--glass-text-dark);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
[data-theme="light"] .glass-toggle-btn { color: var(--glass-text-dim-light); }
[data-theme="light"] .glass-toggle-btn:hover { color: var(--glass-text-light); }
[data-theme="light"] .glass-toggle-btn.active {
background: rgba(255, 255, 255, 0.70);
color: var(--glass-text-light);
}
/* ═══════════════════════════════════════════════════════════════════════════
MOBILE RESPONSIVE (≤ 768px)
═══════════════════════════════════════════════════════════════════════════
Design decisions:
· Reduce blur values — backdrop-filter is expensive on mobile GPUs
· Stack sidebar above main content (column layout)
· Full-bleed cards (no side gaps on very small screens)
· Bottom-sheet style for modals
· 44px minimum touch targets
· Tables get horizontal scroll instead of being crushed
· Blobs are smaller / fewer to stay performant
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
/* ── Tokens: lighter blur on mobile ── */
:root {
--glass-blur: 16px;
--glass-blur-heavy: 20px;
--glass-blur-light: 8px;
}
/* ── Suite nav (single source of truth for ALL apps) ──────────────────────
Stop the cross-app nav from forcing page-level horizontal overflow:
the header becomes one horizontally-scrollable row, links shrink.
Header element class differs per app — apps use .app-header, the admin
panel uses .admin-header. */
html { overflow-x: hidden; }
body { overflow-x: hidden; }
/* The header must never become a scroll container: overflow-x:auto forces
overflow-y to compute to auto as well, so it would clip the account
dropdown that hangs below it. It must also stay ONE row — .glass-app-nav is
position:fixed and each app hardcodes a ~50px content offset to clear it
(payroll, break-compliance), so a wrapped second row would silently cover
the top of the page. Room is freed by moving the nav out, not by wrapping. */
.app-header,
.admin-header {
flex-wrap: nowrap;
}
.app-header > *,
.admin-header > * { flex-shrink: 0; }
/* Nine app links can't fit inline — swap the row for the drawer trigger.
This is what buys back the width the app's own controls were losing. */
.suite-nav { display: none; }
.suite-nav-trigger { display: inline-flex; }
.header-sep { display: none; }
/* App's own controls collapse into the ⋯ sheet. */
.header-inline-actions { display: none; }
.header-overflow-trigger { display: inline-flex; }
/* The overflow sheet is a real bottom sheet, not the account dropdown, so it
keeps glass.css's mobile .glass-modal treatment rather than opting out.
.glass-modal carries no horizontal padding of its own (its usual children
bring their own), so the sheet must supply it or rows sit flush against the
screen edges. */
.header-overflow-sheet {
padding-left: 18px;
padding-right: 18px;
padding-bottom: max(16px, env(safe-area-inset-bottom));
}
/* App-specific switchers may still be wider than what's left; let them scroll
within themselves rather than push the account chip off-screen. */
.app-header > .glass-toggle-group,
.app-header > .header-tabs,
.app-header > .page-tabs,
.app-header > .inv-switches,
.admin-header > .admin-tabs-bar {
flex-shrink: 1;
min-width: 0;
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.app-header > .glass-toggle-group::-webkit-scrollbar,
.app-header > .header-tabs::-webkit-scrollbar,
.app-header > .page-tabs::-webkit-scrollbar,
.app-header > .inv-switches::-webkit-scrollbar,
.admin-header > .admin-tabs-bar::-webkit-scrollbar { display: none; }
.app-wordmark { font-size: 13px; }
.suite-nav-link { font-size: 11px; padding: 3px 7px; white-space: nowrap; }
/* ── Animated background ── */
.bg-blob {
filter: blur(60px); /* was 90px — GPU relief */
}
.bg-blob-1 { width: 320px; height: 320px; top: -80px; left: -80px; }
.bg-blob-2 { width: 280px; height: 280px; top: 30%; right: -60px; }
.bg-blob-3 { width: 240px; height: 240px; bottom: 10%; left: 10%; }
.bg-blob-4 { width: 200px; height: 200px; bottom: -60px; right: 20%; }
/* ── App chrome: stack sidebar + content ── */
.glass-header {
padding: 0 16px;
height: 52px;
}
.glass-sidebar {
width: 100%;
max-width: 100%;
border-right: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.10);
border-radius: 0;
/* Lighter blur for performance */
backdrop-filter: blur(var(--glass-blur-light));
-webkit-backdrop-filter: blur(var(--glass-blur-light));
}
/* Main content: no backdrop-filter (same reason as desktop .glass-right) */
.glass-right {
width: 100%;
padding: 12px;
}
/* ── Cards: full-bleed on small screens ── */
.glass-card,
.glass-card--opaque {
border-radius: 12px;
margin: 0 0 12px;
/* Reduced blur */
backdrop-filter: blur(var(--glass-blur-light));
-webkit-backdrop-filter: blur(var(--glass-blur-light));
}
/* ── Modals: bottom-sheet ── */
.glass-modal-backdrop {
align-items: flex-end; /* pin to bottom */
}
.glass-modal {
width: 100%;
max-width: 100%;
max-height: 90dvh;
border-radius: 20px 20px 0 0; /* rounded top, flat bottom */
/* Drag handle hint */
padding-top: 20px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
/* Slightly heavier background so bottom-sheet reads clearly */
background: rgba(20, 18, 40, 0.88);
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
}
[data-theme="light"] .glass-modal {
background: rgba(248, 248, 255, 0.96);
}
/* Optional drag handle bar */
.glass-modal::before {
content: '';
display: block;
width: 40px;
height: 4px;
border-radius: 2px;
background: rgba(255, 255, 255, 0.25);
margin: -12px auto 16px;
}
[data-theme="light"] .glass-modal::before {
background: rgba(0, 0, 0, 0.15);
}
/* ── Popovers: full-width on mobile ── */
.glass-popover {
position: fixed;
left: 12px !important;
right: 12px !important;
width: auto !important;
max-width: none;
top: auto !important;
bottom: 80px; /* above any bottom nav */
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
}
/* ── Form elements: 44px touch targets ── */
.glass-input,
.glass-select,
.glass-textarea,
.glass-input-opaque {
min-height: 44px;
font-size: 16px; /* prevents iOS zoom-on-focus */
padding: 10px 12px;
}
/* ── Buttons: full-width + 44px height ── */
.glass-btn,
.glass-btn-primary {
min-height: 44px;
font-size: 15px;
padding: 10px 18px;
width: 100%;
}
/* ── Tables: horizontal scroll ── */
.glass-table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border-radius: 10px;
}
.glass-table {
min-width: 540px; /* enforce a minimum so columns don't crush */
}
.glass-table th,
.glass-table td {
padding: 8px 10px;
font-size: 12px;
white-space: nowrap;
}
.glass-table-header-bar {
padding: 8px 10px;
flex-wrap: wrap;
gap: 6px;
}
.glass-table-legend {
padding: 6px 10px;
font-size: 11px;
}
/* ── Toggle group: wrap on mobile ── */
.glass-toggle-group {
flex-wrap: wrap;
gap: 4px;
}
.glass-toggle-btn {
flex: 1 1 auto;
min-height: 36px;
text-align: center;
}
/* ── Badge: slightly larger for readability ── */
.glass-badge {
font-size: 11px;
padding: 3px 8px;
}
}
/* ── Cloud sync loading gate ── */
.cloud-loading-gate {
position: fixed;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
background: var(--glass-bg-page, #0a0a12);
z-index: 9999;
}
[data-theme="light"] .cloud-loading-gate {
background: #f4f3ff;
}
.cloud-loading-spinner {
width: 28px;
height: 28px;
border: 2.5px solid rgba(91, 91, 214, 0.2);
border-top-color: #818cf8;
border-radius: 50%;
animation: cloud-spin 0.7s linear infinite;
}
@keyframes cloud-spin {
to { transform: rotate(360deg); }
}
.cloud-loading-text {
font-size: 13px;
font-weight: 500;
color: rgba(139, 139, 179, 0.7);
letter-spacing: 0.04em;
}
/* ═══════════════════════════════════════════════════════════════════════════
PERFORMANCE GUARDS (theme swap + mobile + reduced motion)
═══════════════════════════════════════════════════════════════════════════ */
/* While shared/theme.js swaps data-theme it sets data-theme-switching for one
frame: with hundreds of themed surfaces (many blurred), transitioning every
color var makes the toggle visibly lag on laptops and phones. */
[data-theme-switching] *,
[data-theme-switching] *::before,
[data-theme-switching] *::after {
transition: none !important;
}
/* The four drifting blobs are large blurred elements — animating them forces
continuous re-composites of everything blurred above them. On phones the
static gradient look is indistinguishable and scrolling/toggling stops
stuttering. */
@media (max-width: 768px) {
.bg-blob { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
.bg-blob { animation: none; }
* { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}
/* ── Idle-logout warning ──────────────────────────────────────────────────────
Last minute before an inactivity sign-out. Fixed and high z-index because it
has to be readable over whatever app is mounted beneath it, and none of the
nine agree on a layout. Any pointer/key/wheel/scroll event dismisses it — the
button is only for someone reading the screen without touching anything. */
.idle-warning {
position: fixed;
top: 12px;
left: 50%;
transform: translateX(-50%);
z-index: 9999;
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
border-radius: 10px;
font-size: 13px;
color: #fff;
background: rgba(180, 83, 9, 0.92);
border: 1px solid rgba(255, 255, 255, 0.22);
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.32);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
max-width: calc(100vw - 24px);
}
.idle-warning button {
padding: 5px 12px;
border-radius: 7px;
font-size: 12px;
font-weight: 600;
color: #fff;
cursor: pointer;
background: rgba(255, 255, 255, 0.18);
border: 1px solid rgba(255, 255, 255, 0.35);
}
.idle-warning button:hover { background: rgba(255, 255, 255, 0.28); }