/* =============================================================================
ניהול עמדות — Workstation Reservation
app.aurora.css — Alternative Production Design System (DROP-IN SWAP)
-----------------------------------------------------------------------------
Design language: "Aurora"
Light-first, airy, modern-premium (Linear / Stripe grade). A soft paper
canvas, crisp white cards with gentle elevation, generous whitespace and a
fresh indigo -> violet gradient accent. Rounded geometry, tasteful soft
shadows, subtle frosted-glass chrome. A fully polished deep slate/indigo
night theme mirrors every token — never pure black.
Mobile-first, RTL-native (logical properties everywhere), WCAG AA in both
themes, 44px touch targets, prefers-reduced-motion aware.
This file is a self-contained, drop-in replacement for app.css. It defines
the SAME semantic token names the composition layer (app.extra.css) expects
with fallbacks: --accent, --bg-elevated, --text-muted, --border-hair,
--radius-lg, --radius-pill, --space-4 (+ a full scale beyond these).
No external fonts, CDNs, @imports or remote URLs — safe fully offline.
Token layering:
1. PRIMITIVE tokens — raw palette + scales (theme-agnostic)
2. SEMANTIC tokens — meaning-based, re-themed per color scheme
3. COMPONENT usage — components consume semantic tokens only
Table of contents:
[01] Primitive tokens
[02] Semantic tokens — LIGHT (default)
[03] Semantic tokens — DARK (via prefers-color-scheme)
[04] Explicit theme overrides (data-theme always wins)
[05] Base / reset
[06] Utility layer
[07] Layout & chrome (app, container, topbar, bottomnav, avatar)
[08] Buttons & controls (btn, switch)
[09] Surfaces (card, section-title, hairline)
[10] Forms (field, input, select, textarea, checkbox)
[11] Feedback (flash, badge, empty, spinner)
[12] Booking week UI (week-switch, day, stations, slot)
[13] Tables, modal, tag / kbd / chip, subnav
[14] Auth screen (auth, btn-google)
[15] Prose (rules page)
[16] Motion & accessibility preferences
========================================================================== */
/* =============================================================================
[01] PRIMITIVE TOKENS — raw values, never consumed directly by components
========================================================================== */
:root {
/* --- Neutral ramp (cool slate: paper white -> deep indigo-night) --- */
--c-slate-50: #f8fafc;
--c-slate-100: #f1f4fb;
--c-slate-150: #eaeef8;
--c-slate-200: #e3e8f2;
--c-slate-300: #cdd5e5;
--c-slate-400: #9aa4bd;
--c-slate-500: #6b768f;
--c-slate-600: #4e5a75;
--c-slate-700: #354061;
--c-slate-800: #1e2745;
--c-slate-850: #171e39;
--c-slate-900: #101731;
--c-slate-950: #0a0f22;
--c-slate-1000:#070b1a;
--c-white: #ffffff;
/* --- Accent: indigo -> violet aurora --- */
--c-indigo-300: #a5b4fc;
--c-indigo-400: #818cf8;
--c-indigo-500: #6366f1;
--c-indigo-600: #4f46e5;
--c-indigo-700: #4338ca;
--c-violet-300: #c4b5fd;
--c-violet-400: #a78bfa;
--c-violet-500: #8b5cf6;
--c-violet-600: #7c3aed;
/* --- Success (emerald) --- */
--c-emerald-600: #059669;
--c-emerald-500: #10b981;
--c-emerald-400: #34d399;
--c-emerald-300: #6ee7b7;
/* --- Danger (rose) --- */
--c-rose-600: #e11d48;
--c-rose-500: #f43f5e;
--c-rose-400: #fb7185;
--c-rose-300: #fda4af;
/* --- Info (blue) --- */
--c-blue-600: #2563eb;
--c-blue-500: #3b82f6;
--c-blue-400: #60a5fa;
/* --- Warning (amber) --- */
--c-amber-700: #b45309;
--c-amber-600: #d97706;
--c-amber-500: #f59e0b;
--c-amber-400: #fbbf24;
/* --- Signature colors as RGB channels (comma-separated for rgba()) --- */
--rgb-accent: 99, 102, 241; /* indigo-500 */
--rgb-violet: 139, 92, 246; /* violet-500 */
--rgb-success: 16, 185, 129; /* emerald-500 */
--rgb-danger: 244, 63, 94; /* rose-500 */
--rgb-info: 59, 130, 246; /* blue-500 */
--rgb-warning: 245, 158, 11; /* amber-500 */
--rgb-slate: 15, 23, 42; /* slate-900-ish, for light shadows */
/* --- Spacing scale (4px base) --- */
--space-0: 0;
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-5: 1.25rem; /* 20px */
--space-6: 1.5rem; /* 24px */
--space-8: 2rem; /* 32px */
--space-10: 2.5rem; /* 40px */
--space-12: 3rem; /* 48px */
--space-16: 4rem; /* 64px */
/* --- Radius scale (Aurora is generously rounded) --- */
--radius-xs: 8px;
--radius-sm: 11px;
--radius-md: 14px;
--radius-lg: 18px;
--radius-xl: 24px;
--radius-2xl: 30px;
--radius-pill: 999px;
/* --- Typography --- */
--font-sans: "Segoe UI", "Heebo", "Rubik", "Assistant", system-ui,
-apple-system, "Noto Sans Hebrew", Arial, sans-serif;
--font-mono: "SFMono-Regular", "Cascadia Code", "Consolas", ui-monospace,
"Menlo", monospace;
--text-2xs: 0.6875rem; /* 11px */
--text-xs: 0.75rem; /* 12px */
--text-sm: 0.8125rem; /* 13px */
--text-base:0.9375rem; /* 15px */
--text-md: 1rem; /* 16px */
--text-lg: 1.125rem; /* 18px */
--text-xl: 1.375rem; /* 22px */
--text-2xl: 1.75rem; /* 28px */
--text-3xl: 2.25rem; /* 36px */
--leading-tight: 1.2;
--leading-normal: 1.5;
--leading-relaxed:1.65;
--weight-regular: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;
--weight-black: 800;
--tracking-tight: -0.01em;
--tracking-wide: 0.04em;
/* --- Z-index scale --- */
--z-base: 0;
--z-raised: 10;
--z-sticky: 100;
--z-bottomnav: 200;
--z-overlay: 900;
--z-modal: 1000;
--z-toast: 1100;
/* --- Motion --- */
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
--dur-fast: 150ms;
--dur-base: 200ms;
--dur-slow: 260ms;
--transition: var(--dur-base) var(--ease-out);
/* --- Touch & layout --- */
--touch: 44px;
--container-max: 1024px;
}
/* =============================================================================
[02] SEMANTIC TOKENS — LIGHT (the Aurora default)
Applied on :root so light is the baseline regardless of OS preference,
then upgraded to dark via [03] when the OS prefers dark.
========================================================================== */
:root {
color-scheme: light;
/* Surfaces */
--bg-canvas: #f5f7fc;
--bg-canvas-2: #eef1fa;
--bg-elevated: #ffffff; /* crisp card surface */
--bg-elevated-2: #ffffff;
--bg-input: #ffffff;
--bg-hover: rgba(var(--rgb-accent), 0.055);
--bg-active: rgba(var(--rgb-accent), 0.10);
--bg-scrim: rgba(17, 23, 49, 0.42);
--glass-bg: linear-gradient(160deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 255, 0.74));
--glass-blur: 14px;
/* Text */
--text-strong: #10162b;
--text-body: #263049;
--text-muted: #56617c; /* AA on white (~4.9:1) */
--text-faint: #79839c;
--text-on-accent:#ffffff;
--text-inverse: #ffffff;
/* Borders / hairlines */
--border-soft: rgba(var(--rgb-slate), 0.06);
--border-hair: rgba(var(--rgb-slate), 0.10);
--border-strong: rgba(var(--rgb-slate), 0.16);
/* Accent (indigo -> violet) — text tone must read on light */
--accent: var(--c-indigo-600);
--accent-strong: var(--c-indigo-700);
--accent-quiet: rgba(var(--rgb-accent), 0.10);
--accent-line: rgba(var(--rgb-accent), 0.34);
--accent-glow: rgba(var(--rgb-accent), 0.28);
--on-accent: #ffffff;
--accent-grad: linear-gradient(135deg, var(--c-indigo-500), var(--c-violet-500));
--accent-grad-strong: linear-gradient(135deg, var(--c-indigo-600), var(--c-violet-600));
/* Status */
--success: var(--c-emerald-600);
--success-quiet: rgba(var(--rgb-success), 0.12);
--success-line: rgba(var(--rgb-success), 0.40);
--danger: var(--c-rose-600);
--danger-quiet: rgba(var(--rgb-danger), 0.11);
--danger-line: rgba(var(--rgb-danger), 0.42);
--info: var(--c-blue-600);
--info-quiet: rgba(var(--rgb-info), 0.11);
--info-line: rgba(var(--rgb-info), 0.42);
--warning: var(--c-amber-700);
--warning-quiet: rgba(var(--rgb-warning), 0.14);
--warning-line: rgba(var(--rgb-warning), 0.45);
/* Focus */
--focus-ring: rgba(var(--rgb-accent), 0.55);
--focus-halo: rgba(var(--rgb-accent), 0.18);
/* Elevation (soft, low-contrast for airy light UI) */
--shadow-xs: 0 1px 2px rgba(var(--rgb-slate), 0.06);
--shadow-sm: 0 2px 8px rgba(var(--rgb-slate), 0.07);
--shadow-md: 0 10px 28px rgba(var(--rgb-slate), 0.10), 0 2px 6px rgba(var(--rgb-slate), 0.06);
--shadow-lg: 0 30px 60px rgba(var(--rgb-slate), 0.16), 0 8px 20px rgba(var(--rgb-slate), 0.08);
--shadow-glow: 0 8px 26px var(--accent-glow);
--shadow-inset-hi: inset 0 1px 0 rgba(255, 255, 255, 0.85);
/* Page backdrop — soft aurora bloom over paper */
--page-bg:
radial-gradient(1100px 600px at 88% -12%, rgba(var(--rgb-accent), 0.13), transparent 60%),
radial-gradient(920px 560px at -6% 4%, rgba(var(--rgb-violet), 0.11), transparent 55%),
var(--bg-canvas);
}
/* =============================================================================
[03] SEMANTIC TOKENS — DARK via OS preference (deep slate/indigo night)
Overridden explicitly in [04] when data-theme is set.
========================================================================== */
@media (prefers-color-scheme: dark) {
:root {
color-scheme: dark;
--bg-canvas: #0a0f22;
--bg-canvas-2: #0d1329;
--bg-elevated: rgba(24, 31, 56, 0.72);
--bg-elevated-2: #1b2340;
--bg-input: rgba(13, 19, 41, 0.62);
--bg-hover: rgba(255, 255, 255, 0.05);
--bg-active: rgba(255, 255, 255, 0.085);
--bg-scrim: rgba(4, 7, 18, 0.66);
--glass-bg: linear-gradient(160deg, rgba(32, 40, 70, 0.74), rgba(15, 21, 43, 0.6));
--glass-blur: 16px;
--text-strong: #f2f5fd;
--text-body: #d6ddef;
--text-muted: #9aa4c1;
--text-faint: #717c9d;
--text-on-accent:#ffffff;
--text-inverse: #0f172a;
--border-soft: rgba(255, 255, 255, 0.07);
--border-hair: rgba(255, 255, 255, 0.10);
--border-strong: rgba(255, 255, 255, 0.16);
--accent: var(--c-indigo-300); /* bright for AA text on night */
--accent-strong: var(--c-violet-300);
--accent-quiet: rgba(var(--rgb-accent), 0.18);
--accent-line: rgba(129, 140, 248, 0.42);
--accent-glow: rgba(var(--rgb-accent), 0.42);
--on-accent: #ffffff;
--accent-grad: linear-gradient(135deg, var(--c-indigo-500), var(--c-violet-500));
--accent-grad-strong: linear-gradient(135deg, var(--c-indigo-400), var(--c-violet-400));
--success: var(--c-emerald-400);
--success-quiet: rgba(var(--rgb-success), 0.16);
--success-line: rgba(var(--rgb-success), 0.42);
--danger: var(--c-rose-400);
--danger-quiet: rgba(var(--rgb-danger), 0.16);
--danger-line: rgba(var(--rgb-danger), 0.42);
--info: var(--c-blue-400);
--info-quiet: rgba(var(--rgb-info), 0.16);
--info-line: rgba(var(--rgb-info), 0.42);
--warning: var(--c-amber-400);
--warning-quiet: rgba(var(--rgb-warning), 0.16);
--warning-line: rgba(var(--rgb-warning), 0.44);
--focus-ring: rgba(129, 140, 248, 0.60);
--focus-halo: rgba(129, 140, 248, 0.22);
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.5);
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.5);
--shadow-md: 0 10px 30px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.4);
--shadow-lg: 0 30px 70px rgba(0, 0, 0, 0.62), 0 8px 24px rgba(0, 0, 0, 0.5);
--shadow-glow: 0 10px 34px var(--accent-glow);
--shadow-inset-hi: inset 0 1px 0 rgba(255, 255, 255, 0.06);
--page-bg:
radial-gradient(1200px 640px at 84% -10%, rgba(var(--rgb-accent), 0.22), transparent 60%),
radial-gradient(1000px 620px at -8% 2%, rgba(var(--rgb-violet), 0.18), transparent 55%),
var(--bg-canvas);
}
}
/* =============================================================================
[04] EXPLICIT THEME OVERRIDES — data-theme attribute always wins
(attribute selector out-specifies the bare :root in [02]/[03])
========================================================================== */
/* Force LIGHT regardless of OS preference */
:root[data-theme="light"] {
color-scheme: light;
--bg-canvas: #f5f7fc;
--bg-canvas-2: #eef1fa;
--bg-elevated: #ffffff;
--bg-elevated-2: #ffffff;
--bg-input: #ffffff;
--bg-hover: rgba(var(--rgb-accent), 0.055);
--bg-active: rgba(var(--rgb-accent), 0.10);
--bg-scrim: rgba(17, 23, 49, 0.42);
--glass-bg: linear-gradient(160deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 255, 0.74));
--glass-blur: 14px;
--text-strong: #10162b;
--text-body: #263049;
--text-muted: #56617c;
--text-faint: #79839c;
--text-on-accent:#ffffff;
--text-inverse: #ffffff;
--border-soft: rgba(var(--rgb-slate), 0.06);
--border-hair: rgba(var(--rgb-slate), 0.10);
--border-strong: rgba(var(--rgb-slate), 0.16);
--accent: var(--c-indigo-600);
--accent-strong: var(--c-indigo-700);
--accent-quiet: rgba(var(--rgb-accent), 0.10);
--accent-line: rgba(var(--rgb-accent), 0.34);
--accent-glow: rgba(var(--rgb-accent), 0.28);
--on-accent: #ffffff;
--accent-grad: linear-gradient(135deg, var(--c-indigo-500), var(--c-violet-500));
--accent-grad-strong: linear-gradient(135deg, var(--c-indigo-600), var(--c-violet-600));
--success: var(--c-emerald-600);
--success-quiet: rgba(var(--rgb-success), 0.12);
--success-line: rgba(var(--rgb-success), 0.40);
--danger: var(--c-rose-600);
--danger-quiet: rgba(var(--rgb-danger), 0.11);
--danger-line: rgba(var(--rgb-danger), 0.42);
--info: var(--c-blue-600);
--info-quiet: rgba(var(--rgb-info), 0.11);
--info-line: rgba(var(--rgb-info), 0.42);
--warning: var(--c-amber-700);
--warning-quiet: rgba(var(--rgb-warning), 0.14);
--warning-line: rgba(var(--rgb-warning), 0.45);
--focus-ring: rgba(var(--rgb-accent), 0.55);
--focus-halo: rgba(var(--rgb-accent), 0.18);
--shadow-xs: 0 1px 2px rgba(var(--rgb-slate), 0.06);
--shadow-sm: 0 2px 8px rgba(var(--rgb-slate), 0.07);
--shadow-md: 0 10px 28px rgba(var(--rgb-slate), 0.10), 0 2px 6px rgba(var(--rgb-slate), 0.06);
--shadow-lg: 0 30px 60px rgba(var(--rgb-slate), 0.16), 0 8px 20px rgba(var(--rgb-slate), 0.08);
--shadow-glow: 0 8px 26px var(--accent-glow);
--shadow-inset-hi: inset 0 1px 0 rgba(255, 255, 255, 0.85);
--page-bg:
radial-gradient(1100px 600px at 88% -12%, rgba(var(--rgb-accent), 0.13), transparent 60%),
radial-gradient(920px 560px at -6% 4%, rgba(var(--rgb-violet), 0.11), transparent 55%),
var(--bg-canvas);
}
/* Force DARK regardless of OS preference */
:root[data-theme="dark"] {
color-scheme: dark;
--bg-canvas: #0a0f22;
--bg-canvas-2: #0d1329;
--bg-elevated: rgba(24, 31, 56, 0.72);
--bg-elevated-2: #1b2340;
--bg-input: rgba(13, 19, 41, 0.62);
--bg-hover: rgba(255, 255, 255, 0.05);
--bg-active: rgba(255, 255, 255, 0.085);
--bg-scrim: rgba(4, 7, 18, 0.66);
--glass-bg: linear-gradient(160deg, rgba(32, 40, 70, 0.74), rgba(15, 21, 43, 0.6));
--glass-blur: 16px;
--text-strong: #f2f5fd;
--text-body: #d6ddef;
--text-muted: #9aa4c1;
--text-faint: #717c9d;
--text-on-accent:#ffffff;
--text-inverse: #0f172a;
--border-soft: rgba(255, 255, 255, 0.07);
--border-hair: rgba(255, 255, 255, 0.10);
--border-strong: rgba(255, 255, 255, 0.16);
--accent: var(--c-indigo-300);
--accent-strong: var(--c-violet-300);
--accent-quiet: rgba(var(--rgb-accent), 0.18);
--accent-line: rgba(129, 140, 248, 0.42);
--accent-glow: rgba(var(--rgb-accent), 0.42);
--on-accent: #ffffff;
--accent-grad: linear-gradient(135deg, var(--c-indigo-500), var(--c-violet-500));
--accent-grad-strong: linear-gradient(135deg, var(--c-indigo-400), var(--c-violet-400));
--success: var(--c-emerald-400);
--success-quiet: rgba(var(--rgb-success), 0.16);
--success-line: rgba(var(--rgb-success), 0.42);
--danger: var(--c-rose-400);
--danger-quiet: rgba(var(--rgb-danger), 0.16);
--danger-line: rgba(var(--rgb-danger), 0.42);
--info: var(--c-blue-400);
--info-quiet: rgba(var(--rgb-info), 0.16);
--info-line: rgba(var(--rgb-info), 0.42);
--warning: var(--c-amber-400);
--warning-quiet: rgba(var(--rgb-warning), 0.16);
--warning-line: rgba(var(--rgb-warning), 0.44);
--focus-ring: rgba(129, 140, 248, 0.60);
--focus-halo: rgba(129, 140, 248, 0.22);
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.5);
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.5);
--shadow-md: 0 10px 30px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.4);
--shadow-lg: 0 30px 70px rgba(0, 0, 0, 0.62), 0 8px 24px rgba(0, 0, 0, 0.5);
--shadow-glow: 0 10px 34px var(--accent-glow);
--shadow-inset-hi: inset 0 1px 0 rgba(255, 255, 255, 0.06);
--page-bg:
radial-gradient(1200px 640px at 84% -10%, rgba(var(--rgb-accent), 0.22), transparent 60%),
radial-gradient(1000px 620px at -8% 2%, rgba(var(--rgb-violet), 0.18), transparent 55%),
var(--bg-canvas);
}
/* =============================================================================
[05] BASE / RESET
========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }
* { margin: 0; }
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent;
scroll-behavior: smooth;
}
body {
min-block-size: 100vh;
min-block-size: 100dvh;
font-family: var(--font-sans);
font-size: var(--text-base);
line-height: var(--leading-normal);
color: var(--text-body);
background: var(--page-bg);
background-attachment: fixed;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-feature-settings: "ss01", "cv01";
overflow-x: hidden;
}
img, svg, video, canvas { display: block; max-inline-size: 100%; }
svg { fill: none; }
a { color: var(--accent); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--accent-strong); }
button, input, select, textarea {
font: inherit;
color: inherit;
}
button { cursor: pointer; background: none; border: none; }
button[disabled] { cursor: not-allowed; }
h1, h2, h3, h4 {
color: var(--text-strong);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
font-weight: var(--weight-bold);
}
/* Universal accessible focus ring */
:focus-visible {
outline: none;
box-shadow: 0 0 0 2px var(--bg-canvas), 0 0 0 4px var(--focus-ring);
border-radius: var(--radius-xs);
}
::selection {
background: var(--accent-quiet);
color: var(--text-strong);
}
/* Refined scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { inline-size: 10px; block-size: 10px; }
*::-webkit-scrollbar-thumb {
background: var(--border-strong);
border-radius: var(--radius-pill);
border: 2px solid transparent;
background-clip: padding-box;
}
/* The HTML [hidden] attribute must win over any component display rule. */
[hidden] { display: none !important; }
/* =============================================================================
[06] UTILITY LAYER
========================================================================== */
.u-flex { display: flex; }
.u-inline-flex { display: inline-flex; }
.u-center { display: flex; align-items: center; justify-content: center; }
.u-grow { flex: 1 1 auto; min-inline-size: 0; }
.u-wrap { flex-wrap: wrap; }
.u-col { flex-direction: column; }
.u-items-center { align-items: center; }
.u-between { justify-content: space-between; }
.u-gap-1 { gap: var(--space-1); }
.u-gap-2 { gap: var(--space-2); }
.u-gap-3 { gap: var(--space-3); }
.u-gap-4 { gap: var(--space-4); }
.u-gap-6 { gap: var(--space-6); }
.u-mt-1 { margin-block-start: var(--space-1); }
.u-mt-2 { margin-block-start: var(--space-2); }
.u-mt-3 { margin-block-start: var(--space-3); }
.u-mt-4 { margin-block-start: var(--space-4); }
.u-mt-6 { margin-block-start: var(--space-6); }
.u-mt-8 { margin-block-start: var(--space-8); }
.u-text-muted,
.subtle { color: var(--text-muted); }
.u-text-faint { color: var(--text-faint); }
.u-text-strong { color: var(--text-strong); }
.u-text-center { text-align: center; }
.u-text-sm { font-size: var(--text-sm); }
.u-text-xs { font-size: var(--text-xs); }
.u-hidden { display: none !important; }
.u-full { inline-size: 100%; }
/* Visually hidden but available to screen readers */
.sr-only {
position: absolute;
inline-size: 1px; block-size: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* =============================================================================
[07] LAYOUT & CHROME
========================================================================== */
.app {
display: flex;
flex-direction: column;
min-block-size: 100vh;
min-block-size: 100dvh;
/* room for the fixed bottom nav on phones */
padding-block-end: calc(var(--touch) + var(--space-8) + env(safe-area-inset-bottom, 0px));
}
.container {
inline-size: 100%;
max-inline-size: var(--container-max);
margin-inline: auto;
padding-inline: var(--space-4);
padding-block: var(--space-5);
}
@media (min-width: 720px) {
.container { padding-inline: var(--space-6); padding-block: var(--space-6); }
}
/* ---- Topbar ---- */
.topbar {
position: sticky;
inset-block-start: 0;
z-index: var(--z-sticky);
display: flex;
align-items: center;
gap: var(--space-3);
inline-size: 100%;
max-inline-size: var(--container-max);
margin-inline: auto;
padding-inline: var(--space-4);
padding-block: var(--space-3);
background: color-mix(in srgb, var(--bg-canvas) 72%, transparent);
-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
backdrop-filter: blur(var(--glass-blur)) saturate(150%);
border-block-end: 1px solid var(--border-soft);
}
@media (min-width: 720px) {
.topbar { padding-inline: var(--space-6); }
}
.topbar .brand {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-lg);
font-weight: var(--weight-bold);
letter-spacing: var(--tracking-tight);
color: var(--text-strong);
}
/* Logo mark — soft aurora squircle when no ![]()
logo is supplied */
.topbar .brand::before {
content: "";
inline-size: 1.85rem;
block-size: 1.85rem;
border-radius: var(--radius-sm);
background: var(--accent-grad);
box-shadow: 0 4px 14px var(--accent-glow), var(--shadow-inset-hi);
flex: 0 0 auto;
}
/* An actual ![]()
logo replaces the mark: cap at ~140x40 and sit cleanly */
.topbar .brand img {
block-size: auto;
inline-size: auto;
}
.topbar .brand__text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-inline-size: 46vw; }
.topbar .brand:has(img)::before { display: none; }
.topbar__spacer { flex: 1 1 auto; }
.topbar .nav {
display: flex;
align-items: center;
gap: var(--space-1);
}
.nav a {
display: inline-flex;
align-items: center;
gap: var(--space-2);
min-block-size: 2.25rem;
padding-inline: var(--space-3);
padding-block: var(--space-2);
border-radius: var(--radius-pill);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--text-muted);
transition: background var(--transition), color var(--transition);
}
.nav a:hover { background: var(--bg-hover); color: var(--text-body); }
.nav a.is-active {
color: var(--accent);
background: var(--accent-quiet);
box-shadow: inset 0 0 0 1px var(--accent-line);
}
/* ---- Avatar ---- */
.avatar {
inline-size: 2.25rem;
block-size: 2.25rem;
border-radius: var(--radius-pill);
display: inline-flex;
align-items: center;
justify-content: center;
overflow: hidden;
flex: 0 0 auto;
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
color: var(--on-accent);
background: var(--accent-grad);
box-shadow: var(--shadow-sm), inset 0 0 0 1px rgba(255, 255, 255, 0.18);
-webkit-user-select: none;
user-select: none;
}
.avatar img { inline-size: 100%; block-size: 100%; object-fit: cover; }
/* ---- Theme toggle (icon button) ---- */
.theme-toggle {
inline-size: var(--touch);
block-size: var(--touch);
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-pill);
color: var(--text-muted);
background: var(--bg-hover);
border: 1px solid var(--border-soft);
transition: transform var(--dur-fast) var(--ease-out),
color var(--transition), background var(--transition),
border-color var(--transition);
}
.theme-toggle:hover {
color: var(--accent);
border-color: var(--accent-line);
background: var(--accent-quiet);
}
.theme-toggle:active { transform: scale(0.94); }
.theme-toggle svg { inline-size: 1.25rem; block-size: 1.25rem; }
/* ---- Bottom navigation (mobile tab bar) ---- */
.bottomnav {
position: fixed;
inset-inline: 0;
inset-block-end: 0;
z-index: var(--z-bottomnav);
display: flex;
justify-content: space-around;
align-items: stretch;
gap: var(--space-1);
padding-inline: var(--space-2);
padding-block-start: var(--space-2);
padding-block-end: calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
background: color-mix(in srgb, var(--bg-canvas) 80%, transparent);
-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
backdrop-filter: blur(var(--glass-blur)) saturate(150%);
border-block-start: 1px solid var(--border-soft);
box-shadow: 0 -8px 30px rgba(var(--rgb-slate), 0.10);
}
.bottomnav a {
flex: 1 1 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
min-block-size: var(--touch);
padding-block: var(--space-1);
border-radius: var(--radius-md);
font-size: var(--text-2xs);
font-weight: var(--weight-medium);
color: var(--text-muted);
transition: color var(--transition), background var(--transition);
}
.bottomnav a svg { inline-size: 1.375rem; block-size: 1.375rem; }
.bottomnav a:hover { color: var(--text-body); background: var(--bg-hover); }
.bottomnav a.is-active {
color: var(--accent);
background: var(--accent-quiet);
}
.bottomnav a.is-active svg {
filter: drop-shadow(0 2px 8px var(--accent-glow));
}
/* Responsive chrome swap: top nav >=720px, bottom nav on phones */
.topbar .nav { display: none; }
@media (min-width: 720px) {
.topbar .nav { display: flex; }
.bottomnav { display: none; }
.app { padding-block-end: var(--space-8); }
}
/* =============================================================================
[08] BUTTONS & CONTROLS
========================================================================== */
.btn {
--btn-bg: var(--bg-elevated-2);
--btn-fg: var(--text-strong);
--btn-bd: var(--border-strong);
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
min-block-size: var(--touch);
padding-inline: var(--space-5);
padding-block: var(--space-3);
border-radius: var(--radius-md);
font-size: var(--text-base);
font-weight: var(--weight-semibold);
line-height: 1;
letter-spacing: 0.01em;
color: var(--btn-fg);
background: var(--btn-bg);
border: 1px solid var(--btn-bd);
box-shadow: var(--shadow-sm);
transition: transform var(--dur-fast) var(--ease-out),
box-shadow var(--transition), background var(--transition),
border-color var(--transition), color var(--transition),
filter var(--transition), opacity var(--transition);
-webkit-user-select: none;
user-select: none;
white-space: nowrap;
}
.btn svg { inline-size: 1.15em; block-size: 1.15em; }
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0) scale(0.99); box-shadow: var(--shadow-xs); }
.btn-primary {
--btn-fg: var(--on-accent);
--btn-bd: transparent;
background: var(--accent-grad);
box-shadow: 0 8px 22px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.btn-primary:hover {
filter: brightness(1.04) saturate(1.05);
box-shadow: 0 12px 30px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.btn-ghost {
--btn-bg: transparent;
--btn-fg: var(--text-body);
--btn-bd: var(--border-strong);
box-shadow: none;
}
.btn-ghost:hover {
background: var(--bg-hover);
border-color: var(--accent-line);
color: var(--accent);
box-shadow: none;
}
.btn-danger {
--btn-fg: #ffffff;
--btn-bd: transparent;
background: linear-gradient(135deg, var(--c-rose-500), var(--c-rose-600));
box-shadow: 0 8px 22px rgba(var(--rgb-danger), 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.btn-danger:hover { filter: brightness(1.04); }
.btn-sm {
min-block-size: 2.25rem;
padding-inline: var(--space-3);
padding-block: var(--space-2);
font-size: var(--text-sm);
border-radius: var(--radius-sm);
}
.btn-block { display: flex; inline-size: 100%; }
.btn[disabled],
.btn:disabled {
opacity: 0.5;
filter: grayscale(0.2);
transform: none !important;
box-shadow: none;
pointer-events: none;
}
/* ---- Switch (pill toggle) ---- */
.switch {
--sw-w: 3rem;
--sw-h: 1.75rem;
appearance: none;
-webkit-appearance: none;
position: relative;
flex: 0 0 auto;
inline-size: var(--sw-w);
block-size: var(--sw-h);
border-radius: var(--radius-pill);
background: var(--bg-active);
border: 1px solid var(--border-strong);
box-shadow: inset 0 1px 3px rgba(var(--rgb-slate), 0.14);
cursor: pointer;
transition: background var(--transition), border-color var(--transition);
vertical-align: middle;
}
.switch::after {
content: "";
position: absolute;
inset-block-start: 50%;
inset-inline-start: 3px;
inline-size: calc(var(--sw-h) - 8px);
block-size: calc(var(--sw-h) - 8px);
border-radius: var(--radius-pill);
background: #ffffff;
box-shadow: var(--shadow-sm);
transform: translateY(-50%);
transition: inset-inline-start var(--dur-base) var(--ease-out),
background var(--transition);
}
.switch:checked {
background: var(--accent-grad);
border-color: transparent;
}
.switch:checked::after {
/* logical: slide toward the end (RTL-safe) */
inset-inline-start: calc(var(--sw-w) - (var(--sw-h) - 8px) - 3px);
}
.switch:focus-visible {
box-shadow: 0 0 0 2px var(--bg-canvas), 0 0 0 4px var(--focus-ring);
}
/* =============================================================================
[09] SURFACES
========================================================================== */
.card {
position: relative;
border-radius: var(--radius-lg);
background: var(--bg-elevated);
border: 1px solid var(--border-hair);
box-shadow: var(--shadow-md);
overflow: clip;
animation: card-enter var(--dur-slow) var(--ease-out) both;
}
/* Subtle frosted variant kicks in on dark (where bg-elevated has alpha) */
@media (prefers-color-scheme: dark) {
.card {
background: var(--glass-bg);
background-color: var(--bg-elevated);
-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(130%);
backdrop-filter: blur(var(--glass-blur)) saturate(130%);
}
}
:root[data-theme="dark"] .card {
background: var(--glass-bg);
background-color: var(--bg-elevated);
-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(130%);
backdrop-filter: blur(var(--glass-blur)) saturate(130%);
}
.card + .card { margin-block-start: var(--space-4); }
.card__header {
display: flex;
align-items: center;
gap: var(--space-3);
padding-inline: var(--space-5);
padding-block: var(--space-4);
border-block-end: 1px solid var(--border-soft);
}
.card__title {
font-size: var(--text-lg);
font-weight: var(--weight-semibold);
color: var(--text-strong);
}
.card__body {
padding-inline: var(--space-5);
padding-block: var(--space-5);
}
.card__footer {
display: flex;
align-items: center;
gap: var(--space-3);
justify-content: flex-end;
padding-inline: var(--space-5);
padding-block: var(--space-4);
border-block-start: 1px solid var(--border-soft);
background: var(--bg-hover);
}
.section-title {
display: flex;
align-items: center;
gap: var(--space-2);
margin-block: var(--space-6) var(--space-3);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
color: var(--text-faint);
}
.section-title::after {
content: "";
flex: 1 1 auto;
block-size: 1px;
background: linear-gradient(to left, transparent, var(--border-soft));
}
.hairline {
block-size: 1px;
inline-size: 100%;
border: 0;
margin-block: var(--space-4);
background: var(--border-soft);
}
/* =============================================================================
[10] FORMS
========================================================================== */
.field { display: flex; flex-direction: column; gap: var(--space-2); margin-block-end: var(--space-4); }
.label {
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
color: var(--text-body);
}
.input, .select, .textarea {
inline-size: 100%;
min-block-size: var(--touch);
padding-inline: var(--space-4);
padding-block: var(--space-3);
font-size: var(--text-base);
color: var(--text-strong);
background: var(--bg-input);
border: 1px solid var(--border-strong);
border-radius: var(--radius-md);
box-shadow: inset 0 1px 2px rgba(var(--rgb-slate), 0.05);
transition: border-color var(--transition), box-shadow var(--transition),
background var(--transition);
}
.textarea { min-block-size: 6rem; resize: vertical; line-height: var(--leading-normal); }
.input::placeholder, .textarea::placeholder { color: var(--text-faint); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--accent-line); }
.input:focus, .select:focus, .textarea:focus {
outline: none;
border-color: var(--accent);
background: color-mix(in srgb, var(--bg-input) 92%, var(--accent-quiet));
box-shadow: 0 0 0 3px var(--focus-halo);
}
/* Native select caret (logical positioning for RTL) */
.select {
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237c8598' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-position: left var(--space-4) center;
background-size: 15px 15px;
background-repeat: no-repeat;
padding-inline-start: var(--space-8);
}
/* Custom checkbox row */
.checkbox {
display: inline-flex;
align-items: center;
gap: var(--space-3);
min-block-size: var(--touch);
cursor: pointer;
-webkit-user-select: none;
user-select: none;
color: var(--text-body);
font-size: var(--text-base);
}
.checkbox input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
flex: 0 0 auto;
inline-size: 1.375rem;
block-size: 1.375rem;
border-radius: var(--radius-xs);
background: var(--bg-input);
border: 1px solid var(--border-strong);
box-shadow: inset 0 1px 2px rgba(var(--rgb-slate), 0.08);
cursor: pointer;
display: grid;
place-content: center;
transition: background var(--transition), border-color var(--transition);
}
.checkbox input[type="checkbox"]::after {
content: "";
inline-size: 0.4rem;
block-size: 0.75rem;
border: solid var(--on-accent);
border-width: 0 2px 2px 0;
transform: rotate(45deg) scale(0);
transition: transform var(--dur-fast) var(--ease-out);
margin-block-end: 2px;
}
.checkbox input[type="checkbox"]:checked {
background: var(--accent-grad);
border-color: transparent;
}
.checkbox input[type="checkbox"]:checked::after { transform: rotate(45deg) scale(1); }
.checkbox input[type="checkbox"]:focus-visible {
box-shadow: 0 0 0 2px var(--bg-canvas), 0 0 0 4px var(--focus-ring);
}
.field__error {
font-size: var(--text-sm);
color: var(--danger);
font-weight: var(--weight-medium);
display: flex;
align-items: center;
gap: var(--space-1);
}
.help {
font-size: var(--text-sm);
color: var(--text-muted);
}
/* Invalid field state */
.field .input[aria-invalid="true"],
.field .select[aria-invalid="true"],
.field .textarea[aria-invalid="true"] {
border-color: var(--danger-line);
box-shadow: 0 0 0 3px var(--danger-quiet);
}
/* =============================================================================
[11] FEEDBACK
========================================================================== */
.flash {
--flash-c: var(--info);
--flash-quiet: var(--info-quiet);
--flash-line: var(--info-line);
display: flex;
align-items: flex-start;
gap: var(--space-3);
padding-inline: var(--space-4);
padding-block: var(--space-3);
border-radius: var(--radius-md);
background: var(--flash-quiet);
border: 1px solid var(--flash-line);
color: var(--text-body);
box-shadow: var(--shadow-sm);
animation: card-enter var(--dur-base) var(--ease-out) both;
}
.flash::before {
content: "";
flex: 0 0 auto;
inline-size: 4px;
align-self: stretch;
border-radius: var(--radius-pill);
background: var(--flash-c);
margin-inline-end: var(--space-1);
}
.flash strong { color: var(--text-strong); }
.flash .flash__close,
.flash button {
margin-inline-start: auto;
color: var(--text-muted);
padding: var(--space-1);
border-radius: var(--radius-sm);
transition: color var(--transition), background var(--transition);
}
.flash button:hover { color: var(--text-strong); background: var(--bg-hover); }
.flash--success { --flash-c: var(--success); --flash-quiet: var(--success-quiet); --flash-line: var(--success-line); }
.flash--error { --flash-c: var(--danger); --flash-quiet: var(--danger-quiet); --flash-line: var(--danger-line); }
.flash--info { --flash-c: var(--info); --flash-quiet: var(--info-quiet); --flash-line: var(--info-line); }
.flash--warning { --flash-c: var(--warning); --flash-quiet: var(--warning-quiet); --flash-line: var(--warning-line); }
/* ---- Badge ---- */
.badge {
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding-inline: var(--space-2);
padding-block: 0.2rem;
border-radius: var(--radius-pill);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
line-height: 1.4;
letter-spacing: 0.01em;
color: var(--accent);
background: var(--accent-quiet);
border: 1px solid var(--accent-line);
white-space: nowrap;
}
.badge--success { color: var(--success); background: var(--success-quiet); border-color: var(--success-line); }
.badge--danger { color: var(--danger); background: var(--danger-quiet); border-color: var(--danger-line); }
.badge--muted { color: var(--text-muted); background: var(--bg-active); border-color: var(--border-soft); }
.badge--admin {
color: var(--on-accent);
background: var(--accent-grad);
border-color: transparent;
box-shadow: 0 3px 10px var(--accent-glow);
}
/* ---- Empty state ---- */
.empty {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--space-2);
padding-inline: var(--space-6);
padding-block: var(--space-12);
color: var(--text-muted);
}
.empty svg,
.empty .empty__icon {
inline-size: 3.25rem;
block-size: 3.25rem;
display: grid;
place-content: center;
border-radius: var(--radius-lg);
color: var(--accent);
background: var(--accent-quiet);
border: 1px solid var(--accent-line);
margin-block-end: var(--space-2);
}
.empty__title,
.empty h3 {
font-size: var(--text-lg);
color: var(--text-strong);
font-weight: var(--weight-semibold);
}
.empty__subtitle,
.empty p { font-size: var(--text-base); color: var(--text-muted); max-inline-size: 34ch; }
/* ---- Spinner ---- */
.spinner {
display: inline-block;
inline-size: 1.25rem;
block-size: 1.25rem;
border-radius: var(--radius-pill);
border: 2px solid var(--border-strong);
border-block-start-color: var(--accent);
animation: spin 0.7s linear infinite;
vertical-align: middle;
}
/* =============================================================================
[12] BOOKING WEEK UI — the flagship screen
========================================================================== */
.week-switch {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
padding-inline: var(--space-2);
padding-block: var(--space-2);
margin-block-end: var(--space-4);
border-radius: var(--radius-pill);
background: var(--bg-elevated);
border: 1px solid var(--border-hair);
box-shadow: var(--shadow-sm);
}
.week-switch button,
.week-switch a {
min-block-size: var(--touch);
padding-inline: var(--space-4);
display: inline-flex;
align-items: center;
justify-content: center;
gap: .2rem;
flex: 0 0 auto;
white-space: nowrap;
font-size: var(--text-sm);
font-weight: var(--weight-medium);
border-radius: var(--radius-pill);
color: var(--text-body);
background: var(--bg-hover);
border: 1px solid var(--border-soft);
transition: transform var(--dur-fast) var(--ease-out),
color var(--transition), background var(--transition),
border-color var(--transition);
}
.week-switch button:hover,
.week-switch a:hover {
color: var(--accent);
border-color: var(--accent-line);
background: var(--accent-quiet);
}
.week-switch button:active { transform: scale(0.92); }
.week-switch button svg { inline-size: 1.25rem; block-size: 1.25rem; }
.week-switch__label {
flex: 1 1 auto;
text-align: center;
font-size: var(--text-base);
font-weight: var(--weight-semibold);
color: var(--text-strong);
letter-spacing: var(--tracking-tight);
}
/* ---- Day block ---- */
.day {
border-radius: var(--radius-lg);
background: var(--bg-elevated);
border: 1px solid var(--border-hair);
box-shadow: var(--shadow-md);
overflow: clip;
animation: card-enter var(--dur-slow) var(--ease-out) both;
}
@media (prefers-color-scheme: dark) {
.day {
background: var(--glass-bg);
background-color: var(--bg-elevated);
-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(130%);
backdrop-filter: blur(var(--glass-blur)) saturate(130%);
}
}
:root[data-theme="dark"] .day {
background: var(--glass-bg);
background-color: var(--bg-elevated);
-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(130%);
backdrop-filter: blur(var(--glass-blur)) saturate(130%);
}
.day + .day { margin-block-start: var(--space-4); }
.day__head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--space-3);
padding-inline: var(--space-4);
padding-block: var(--space-3);
border-block-end: 1px solid var(--border-soft);
background: var(--bg-hover);
}
.day__weekday,
.day__head > span:first-child {
font-size: var(--text-md);
font-weight: var(--weight-bold);
color: var(--text-strong);
}
.day__date {
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--text-muted);
font-variant-numeric: tabular-nums;
}
/* Today: accent rail + soft aurora glow */
.day.is-today {
border-color: var(--accent-line);
box-shadow: var(--shadow-md), 0 0 0 1px var(--accent-line), 0 10px 30px var(--accent-glow);
}
.day.is-today .day__head {
background: linear-gradient(to bottom, var(--accent-quiet), transparent);
}
.day.is-today .day__weekday::after,
.day.is-today .day__head > span:first-child::after {
content: "היום";
margin-inline-start: var(--space-2);
padding-inline: var(--space-2);
padding-block: 0.1rem;
border-radius: var(--radius-pill);
font-size: var(--text-2xs);
font-weight: var(--weight-semibold);
color: var(--on-accent);
background: var(--accent-grad);
vertical-align: middle;
}
/* Weekend: gently de-emphasized */
.day.is-weekend { opacity: 0.85; }
.day.is-weekend .day__head {
background: repeating-linear-gradient(
135deg, var(--bg-hover), var(--bg-hover) 8px, transparent 8px, transparent 16px);
}
/* ---- Stations list ---- */
.stations {
display: flex;
flex-direction: column;
gap: var(--space-2);
padding-inline: var(--space-3);
padding-block: var(--space-3);
}
@media (min-width: 520px) {
.stations {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
}
/* ---- Slot (one station) ---- */
.slot {
--slot-c: var(--text-muted);
--slot-quiet: var(--bg-active);
--slot-line: var(--border-soft);
display: flex;
align-items: center;
gap: var(--space-3);
min-block-size: 3.25rem;
padding-inline: var(--space-3);
padding-block: var(--space-3);
border-radius: var(--radius-md);
background: var(--slot-quiet);
border: 1px solid var(--slot-line);
transition: transform var(--dur-fast) var(--ease-out),
border-color var(--transition), background var(--transition),
box-shadow var(--transition);
}
/* Leading status dot */
.slot::before {
content: "";
flex: 0 0 auto;
inline-size: 0.6rem;
block-size: 0.6rem;
border-radius: var(--radius-pill);
background: var(--slot-c);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--slot-c) 22%, transparent);
}
.slot__name {
font-size: var(--text-base);
font-weight: var(--weight-semibold);
color: var(--text-strong);
min-inline-size: 0;
}
.slot__state {
font-size: var(--text-sm);
color: var(--slot-c);
font-weight: var(--weight-medium);
}
.slot__by {
display: block;
font-size: var(--text-xs);
color: var(--text-faint);
font-weight: var(--weight-regular);
}
.slot__action { margin-inline-start: auto; flex: 0 0 auto; }
/* -- FREE: inviting, tappable -- */
.slot--free {
--slot-c: var(--success);
--slot-quiet: var(--success-quiet);
--slot-line: var(--success-line);
cursor: pointer;
}
.slot--free:hover {
transform: translateY(-1px);
border-color: var(--success);
box-shadow: var(--shadow-md), 0 0 0 1px var(--success-line);
}
.slot--free:active { transform: translateY(0) scale(0.995); }
/* -- MINE: clearly yours (accent tint + check badge) -- */
.slot--mine {
--slot-c: var(--accent);
--slot-quiet: var(--accent-quiet);
--slot-line: var(--accent-line);
box-shadow: inset 0 0 0 1px var(--accent-line), 0 8px 22px var(--accent-glow);
}
.slot--mine .slot__name { color: var(--accent); }
.slot--mine::after {
content: "";
flex: 0 0 auto;
order: 5;
margin-inline-start: var(--space-1);
inline-size: 1.35rem;
block-size: 1.35rem;
border-radius: var(--radius-pill);
box-shadow: 0 3px 10px var(--accent-glow);
/* embedded checkmark drawn with two crossing gradients */
background-color: var(--c-indigo-500);
background-image:
linear-gradient(45deg, transparent 44%, var(--on-accent) 44%, var(--on-accent) 56%, transparent 56%),
linear-gradient(-45deg, transparent 44%, var(--on-accent) 44%, var(--on-accent) 56%, transparent 56%);
background-size: 0.42rem 0.42rem, 0.42rem 0.42rem;
background-position: 32% 62%, 60% 62%;
background-repeat: no-repeat;
}
/* -- TAKEN: unavailable, muted, with a caption -- */
.slot--taken {
--slot-c: var(--text-faint);
--slot-quiet: var(--bg-hover);
--slot-line: var(--border-soft);
opacity: 0.92;
}
.slot--taken .slot__name { color: var(--text-muted); }
/* -- DISABLED: not selectable -- */
.slot--disabled {
--slot-c: var(--text-faint);
--slot-quiet: transparent;
--slot-line: var(--border-soft);
opacity: 0.5;
pointer-events: none;
filter: grayscale(0.3);
}
/* =============================================================================
[13] TABLES, MODAL, TAG / KBD / CHIP, SUBNAV
========================================================================== */
.table-wrap {
inline-size: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border-radius: var(--radius-lg);
border: 1px solid var(--border-hair);
box-shadow: var(--shadow-sm);
}
.table {
inline-size: 100%;
border-collapse: collapse;
font-size: var(--text-sm);
background: var(--bg-elevated);
min-inline-size: 520px;
}
.table th, .table td {
padding-inline: var(--space-4);
padding-block: var(--space-3);
text-align: start;
border-block-end: 1px solid var(--border-soft);
white-space: nowrap;
}
.table th {
position: sticky;
inset-block-start: 0;
font-weight: var(--weight-semibold);
font-size: var(--text-xs);
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
color: var(--text-faint);
background: var(--bg-canvas-2);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
.table td { color: var(--text-body); }
.table tbody tr { transition: background var(--transition); }
.table tr:hover { background: var(--bg-hover); }
.table tbody tr:last-child td { border-block-end: 0; }
/* ---- Modal ---- */
.modal {
position: fixed;
inset: 0;
z-index: var(--z-modal);
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-4);
background: var(--bg-scrim);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
opacity: 0;
visibility: hidden;
transition: opacity var(--dur-base) var(--ease-out), visibility var(--dur-base);
}
.modal.is-open { opacity: 1; visibility: visible; }
.modal__card {
inline-size: 100%;
max-inline-size: 30rem;
max-block-size: calc(100dvh - var(--space-8));
display: flex;
flex-direction: column;
border-radius: var(--radius-xl);
background: var(--bg-elevated-2);
border: 1px solid var(--border-hair);
box-shadow: var(--shadow-lg);
overflow: clip;
transform: translateY(12px) scale(0.98);
transition: transform var(--dur-slow) var(--ease-out);
}
@media (prefers-color-scheme: dark) {
.modal__card {
background: var(--glass-bg);
background-color: var(--bg-elevated-2);
-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
backdrop-filter: blur(var(--glass-blur)) saturate(140%);
}
}
:root[data-theme="dark"] .modal__card {
background: var(--glass-bg);
background-color: var(--bg-elevated-2);
-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
backdrop-filter: blur(var(--glass-blur)) saturate(140%);
}
.modal.is-open .modal__card { transform: translateY(0) scale(1); }
.modal__head {
display: flex;
align-items: center;
gap: var(--space-3);
padding-inline: var(--space-5);
padding-block: var(--space-4);
border-block-end: 1px solid var(--border-soft);
}
.modal__title,
.modal__head h2, .modal__head h3 {
font-size: var(--text-lg);
font-weight: var(--weight-bold);
color: var(--text-strong);
}
.modal__body {
padding-inline: var(--space-5);
padding-block: var(--space-5);
overflow-y: auto;
color: var(--text-body);
}
.modal__foot {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--space-3);
padding-inline: var(--space-5);
padding-block: var(--space-4);
border-block-start: 1px solid var(--border-soft);
background: var(--bg-hover);
}
/* ---- Tag / kbd / chip ---- */
.tag {
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding-inline: var(--space-2);
padding-block: 0.15rem;
border-radius: var(--radius-xs);
font-size: var(--text-xs);
font-weight: var(--weight-medium);
color: var(--text-muted);
background: var(--bg-active);
border: 1px solid var(--border-soft);
}
.kbd {
display: inline-flex;
align-items: center;
justify-content: center;
min-inline-size: 1.5rem;
padding-inline: var(--space-2);
padding-block: 0.1rem;
border-radius: var(--radius-xs);
font-family: var(--font-mono);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
color: var(--text-body);
background: var(--bg-canvas-2);
border: 1px solid var(--border-strong);
border-block-end-width: 2px;
box-shadow: var(--shadow-xs);
}
.chip {
display: inline-flex;
align-items: center;
gap: var(--space-2);
min-block-size: 2rem;
padding-inline: var(--space-3);
padding-block: var(--space-1);
border-radius: var(--radius-pill);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--text-body);
background: var(--bg-active);
border: 1px solid var(--border-soft);
transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.chip:hover { border-color: var(--accent-line); color: var(--accent); }
.chip[aria-pressed="true"],
.chip.is-active {
color: var(--accent);
background: var(--accent-quiet);
border-color: var(--accent-line);
}
/* ---- Admin sub-nav (also composed in app.extra.css; kept token-consistent) ---- */
.subnav {
display: flex;
gap: var(--space-1);
margin-block: var(--space-1) var(--space-5);
overflow-x: auto;
padding-block-end: var(--space-1);
-webkit-overflow-scrolling: touch;
}
.subnav__link {
flex: 0 0 auto;
padding-inline: var(--space-4);
padding-block: var(--space-2);
border-radius: var(--radius-pill);
color: var(--text-muted);
text-decoration: none;
font-weight: var(--weight-semibold);
font-size: var(--text-sm);
border: 1px solid var(--border-hair);
white-space: nowrap;
transition: color var(--transition), background var(--transition), border-color var(--transition);
}
.subnav__link:hover {
color: var(--accent);
border-color: var(--accent-line);
background: var(--bg-hover);
}
.subnav__link.is-active {
color: var(--on-accent);
background: var(--accent-grad);
border-color: transparent;
box-shadow: 0 4px 12px var(--accent-glow);
}
/* =============================================================================
[14] AUTH SCREEN — centered premium hero
========================================================================== */
.auth {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-block-size: 100vh;
min-block-size: 100dvh;
padding: var(--space-6);
text-align: center;
}
.auth__logo {
inline-size: 4.25rem;
block-size: 4.25rem;
display: grid;
place-content: center;
margin-block-end: var(--space-5);
border-radius: var(--radius-xl);
background: var(--accent-grad);
box-shadow: 0 12px 34px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.25);
color: var(--on-accent);
font-size: var(--text-2xl);
font-weight: var(--weight-bold);
}
.auth__logo img { inline-size: 2.4rem; block-size: 2.4rem; object-fit: contain; }
.auth__card {
inline-size: 100%;
max-inline-size: 24rem;
display: flex;
flex-direction: column;
gap: var(--space-4);
padding-inline: var(--space-6);
padding-block: var(--space-8);
border-radius: var(--radius-2xl);
background: var(--bg-elevated);
border: 1px solid var(--border-hair);
box-shadow: var(--shadow-lg);
animation: card-enter var(--dur-slow) var(--ease-out) both;
}
@media (prefers-color-scheme: dark) {
.auth__card {
background: var(--glass-bg);
background-color: var(--bg-elevated);
-webkit-backdrop-filter: blur(calc(var(--glass-blur) + 6px)) saturate(140%);
backdrop-filter: blur(calc(var(--glass-blur) + 6px)) saturate(140%);
}
}
:root[data-theme="dark"] .auth__card {
background: var(--glass-bg);
background-color: var(--bg-elevated);
-webkit-backdrop-filter: blur(calc(var(--glass-blur) + 6px)) saturate(140%);
backdrop-filter: blur(calc(var(--glass-blur) + 6px)) saturate(140%);
}
.auth__title,
.auth__card h1 {
font-size: var(--text-2xl);
font-weight: var(--weight-black);
color: var(--text-strong);
}
.auth__card p { color: var(--text-muted); }
/* Google sign-in — polished, brand-faithful, works in both themes */
.btn-google {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-3);
inline-size: 100%;
min-block-size: var(--touch);
padding-inline: var(--space-5);
padding-block: var(--space-3);
border-radius: var(--radius-md);
font-size: var(--text-base);
font-weight: var(--weight-semibold);
color: #1f2430;
background: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.12);
box-shadow: var(--shadow-sm);
transition: transform var(--dur-fast) var(--ease-out),
box-shadow var(--transition), background var(--transition);
}
.btn-google:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); background: #f7f9fc; }
.btn-google:active { transform: translateY(0) scale(0.99); }
/* 18px icon slot (place an