/* ========================================================================== Admin App — base styles + tokens (extends BMRK design system) ========================================================================== */ @import "./design-system/colors_and_type.css"; :root { /* App shell sizing */ --sidebar-w: 248px; --sidebar-w-collapsed: 64px; --topbar-h: 60px; --bulk-bar-h: 56px; /* Density */ --row-h: 48px; --cell-pad-x: 16px; } [data-density="compact"] { --row-h: 38px; --cell-pad-x: 12px; } html, body { height: 100%; } body { background: var(--md-sys-color-background); color: var(--md-sys-color-on-background); font-family: var(--md-sys-typescale-plain); overflow: hidden; } button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } input, select, textarea { font-family: inherit; } /* ========================================================================== MASTERS TOURNAMENT THEME (Augusta National) Activated by data-accent="masters" on . Overrides M3 color tokens. Palette references: Augusta green (#1A4D2E deep, #006747 mid), pimento red (#A93A2C), butter yellow (#F2C24A), magnolia cream (#F5EFE0). ========================================================================== */ :root[data-accent="masters"] { /* Brand palette — pulled directly from BookATeeTime STYLE_GUIDE.md */ /* Primary — Augusta green (#006747) */ --md-sys-color-primary: #006747; --md-sys-color-on-primary: #FDF6E3; --md-sys-color-primary-container: #0A8F5F; --md-sys-color-on-primary-container: #FDF6E3; /* Secondary — gold #C9A96E (CTAs, interactive accent) */ --md-sys-color-secondary: #C9A96E; --md-sys-color-on-secondary: #040D07; --md-sys-color-secondary-container: #D4BC8A; --md-sys-color-on-secondary-container: #2A1F0A; /* Tertiary — warning amber #B7791F */ --md-sys-color-tertiary: #B7791F; --md-sys-color-on-tertiary: #FDF6E3; --md-sys-color-tertiary-container: rgba(183, 121, 31, 0.18); --md-sys-color-on-tertiary-container: #5C3D0F; /* Error #C53030 */ --md-sys-color-error: #C53030; --md-sys-color-on-error: #FDF6E3; --md-sys-color-error-container: rgba(197, 48, 48, 0.18); --md-sys-color-on-error-container: #6B1212; /* Surfaces — TRUE NEUTRAL charcoal. Forest green stays in the sidebar only. The page canvas should not carry brand chroma; body text reads against gray. */ --md-sys-color-background: #14181A; --md-sys-color-on-background: #F5EEDD; /* body text — ~15:1 vs bg */ --md-sys-color-surface: #14181A; --md-sys-color-on-surface: #F5EEDD; --md-sys-color-surface-variant: #232729; --md-sys-color-on-surface-variant: #C8C5BE; /* secondary text */ --md-sys-color-surface-dim: #0F1213; --md-sys-color-surface-bright: #2B2F31; --md-sys-color-surface-container-lowest: #0B0D0E; --md-sys-color-surface-container-low: #1A1E20; --md-sys-color-surface-container: #1F2326; --md-sys-color-surface-container-high: #262A2D; --md-sys-color-surface-container-highest: #2E3235; --md-sys-color-outline: #8A867E; --md-sys-color-outline-variant: rgba(245, 238, 221, 0.14); --md-sys-color-inverse-surface: #FDF6E3; --md-sys-color-inverse-on-surface: #040D07; --md-sys-color-inverse-primary: #C9A96E; --md-sys-color-scrim: #000000; --md-sys-color-shadow: #000000; } /* Text tiers — M3 contrast targets: primary text ≥7:1 (cream) secondary ≥4.5:1 (warm light) tertiary/UI ≥3:1 (muted warm) Brand color used ONLY for state, accents, and CTAs — never long-form text. */ :root[data-accent="masters"] body { color: #F5EEDD; } :root[data-accent="masters"] h1, :root[data-accent="masters"] h2, :root[data-accent="masters"] h3, :root[data-accent="masters"] h4 { color: #FDF6E3; } :root[data-accent="masters"] .muted { color: #B5B0A2; } :root[data-accent="masters"] .text-xs.muted, :root[data-accent="masters"] .text-sm.muted { color: #B5B0A2; } :root[data-accent="masters"] .sidebar { background: #050B08; border-right: 1px solid rgba(245, 238, 221, 0.08); } :root[data-accent="masters"] .sidebar-brand-logo { background: linear-gradient(135deg, #006747, #0A8F5F); color: #FDF6E3; font-family: 'Playfair Display', Georgia, serif; } :root[data-accent="masters"] .sidebar-brand-name strong { color: #FDF6E3; } :root[data-accent="masters"] .sidebar-brand-name span { color: #C9A96E; letter-spacing: 0.14em; } :root[data-accent="masters"] .sidebar-section { color: #B5AC97; font-weight: 600; } :root[data-accent="masters"] .sidebar-nav-item { color: #D5CCB8; } /* 9.5:1 — reads as primary */ :root[data-accent="masters"] .sidebar-nav-item:hover { background: rgba(245, 238, 221, 0.06); color: #FDF6E3; } :root[data-accent="masters"] .sidebar-nav-item.active { background: rgba(201, 169, 110, 0.18); color: #FDF6E3; /* cream, not gold — gold remains in the indicator only */ position: relative; } :root[data-accent="masters"] .sidebar-nav-item.active .material-symbols-rounded { color: #C9A96E; } :root[data-accent="masters"] .sidebar-nav-item.active::before { content: ''; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; background: #C9A96E; border-radius: 0 2px 2px 0; } :root[data-accent="masters"] .sidebar-nav-badge { background: #E45656; color: #FDF6E3; } :root[data-accent="masters"] .sidebar-avatar { background: rgba(201, 169, 110, 0.18); color: #FDF6E3; } :root[data-accent="masters"] .sidebar-user-info strong { color: #FDF6E3; } :root[data-accent="masters"] .sidebar-user-info span { color: #B5AC97; } /* Topbar — solid neutral charcoal */ :root[data-accent="masters"] .topbar { background: #1A1E20; border-bottom: 1px solid rgba(245, 238, 221, 0.08); } :root[data-accent="masters"] .topbar-breadcrumb { color: #B5B0A2; } :root[data-accent="masters"] .topbar-breadcrumb strong { color: #FDF6E3; } /* Buttons — gold filled */ :root[data-accent="masters"] .btn-filled { background: #C9A96E; color: #040D07; font-weight: 700; letter-spacing: 0.02em; } :root[data-accent="masters"] .btn-filled:hover:not(:disabled) { background: #D4BC8A; } :root[data-accent="masters"] .btn-outlined { border-color: rgba(201, 169, 110, 0.4); color: #C9A96E; } :root[data-accent="masters"] .btn-outlined:hover:not(:disabled) { background: rgba(201, 169, 110, 0.08); } :root[data-accent="masters"] .btn-text { color: #C9A96E; } /* Cards — neutral charcoal */ :root[data-accent="masters"] .card { background: #1F2326; border: 1px solid rgba(245, 238, 221, 0.08); } :root[data-accent="masters"] .card-outlined { background: #1F2326; border: 1px solid rgba(245, 238, 221, 0.10); } :root[data-accent="masters"] .card-header { border-bottom: 1px solid rgba(245, 238, 221, 0.08); } /* Inputs */ :root[data-accent="masters"] .input, :root[data-accent="masters"] .search-input { background: #1A1E20; border-color: rgba(245, 238, 221, 0.16); color: #F5EEDD; } :root[data-accent="masters"] .input::placeholder, :root[data-accent="masters"] .search-input input::placeholder { color: #8A867E; } :root[data-accent="masters"] .input:focus, :root[data-accent="masters"] .search-input:focus-within { border-color: #C9A96E; background: #1F2326; box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.12); } /* Tables — strict neutral, brand reserved for state */ :root[data-accent="masters"] .table thead th { color: #B5B0A2; border-bottom: 1px solid rgba(245, 238, 221, 0.12); background: #262A2D; text-transform: uppercase; letter-spacing: 0.06em; font-size: 11px; font-weight: 600; } :root[data-accent="masters"] .table tbody tr { border-bottom: 1px solid rgba(245, 238, 221, 0.06); } :root[data-accent="masters"] .table tbody tr:hover { background: rgba(245, 238, 221, 0.04); } :root[data-accent="masters"] .table tbody tr.selected { background: rgba(201, 169, 110, 0.10); } :root[data-accent="masters"] .table tbody td { color: #F5EEDD; } :root[data-accent="masters"] .table .cell-name strong { color: #FDF6E3; font-weight: 600; } :root[data-accent="masters"] .table .cell-name span { color: #B5B0A2; } /* Chips — neutral resting state, gold for active selection only */ :root[data-accent="masters"] .chip { background: transparent; border-color: rgba(245, 238, 221, 0.18); color: #D5CCB8; } :root[data-accent="masters"] .chip:hover { background: rgba(245, 238, 221, 0.06); color: #FDF6E3; border-color: rgba(245, 238, 221, 0.3); } :root[data-accent="masters"] .chip.active { background: #FDF6E3; border-color: #FDF6E3; color: #0A1410; font-weight: 600; } /* Badges — semantic colors only. Foreground colors are brightened to AA on dark. Success → fairway green. Warning → gold. Danger → coral. Info → muted cream. */ :root[data-accent="masters"] .badge.success { background: rgba(34, 197, 94, 0.16); color: #6EE7A0; } :root[data-accent="masters"] .badge.warning { background: rgba(201, 169, 110, 0.16); color: #E8C98C; } :root[data-accent="masters"] .badge.danger { background: rgba(248, 113, 113, 0.16); color: #FCA5A5; } :root[data-accent="masters"] .badge.info { background: rgba(245, 238, 221, 0.10); color: #F5EEDD; } :root[data-accent="masters"] .badge.neutral { background: rgba(245, 238, 221, 0.08); color: #C8C0AE; } :root[data-accent="masters"] .badge-mono { color: #E8C98C; letter-spacing: 0.04em; } /* Avatars — high-contrast initials so they don't fight the table */ :root[data-accent="masters"] .avatar.primary { background: rgba(0, 103, 71, 0.35); color: #FDF6E3; } :root[data-accent="masters"] .avatar.secondary { background: rgba(201, 169, 110, 0.22); color: #FDF6E3; } :root[data-accent="masters"] .avatar.tertiary { background: rgba(110, 231, 160, 0.16); color: #FDF6E3; } /* Stats — neutral cards, brand reserved for accents */ :root[data-accent="masters"] .stat { background: #1F2326; border: 1px solid rgba(245, 238, 221, 0.08); } :root[data-accent="masters"] .stat-value { color: #FDF6E3; font-family: 'Playfair Display', Georgia, serif; } :root[data-accent="masters"] .stat-label { color: #B5B0A2; letter-spacing: 0.08em; font-weight: 600; } :root[data-accent="masters"] .stat-meta { color: #C8C5BE; } :root[data-accent="masters"] .stat-trend.up { color: #6EE7A0; } :root[data-accent="masters"] .stat.accent { border-color: rgba(201, 169, 110, 0.4); background: linear-gradient(160deg, #262A2D 0%, rgba(201, 169, 110, 0.08) 100%); } :root[data-accent="masters"] .stat.accent .stat-value { color: #E8C98C; } :root[data-accent="masters"] .stat.warning { border-left: 3px solid #C9A96E; } :root[data-accent="masters"] .stat.danger { border-left: 3px solid #F87171; } /* Page header gets a Playfair-style display feel */ :root[data-accent="masters"] .page-header h1 { font-family: 'Playfair Display', Georgia, serif; color: #FDF6E3; letter-spacing: -0.02em; } :root[data-accent="masters"] .page-header p { color: #A89F8E; } /* Bulk-action bar — cream, the only place we invert to demand attention */ :root[data-accent="masters"] .bulk-bar { background: #FDF6E3; color: #14181A; } :root[data-accent="masters"] .bulk-bar-count { color: #14181A; } :root[data-accent="masters"] .bulk-bar .btn { background: rgba(20, 24, 26, 0.06); color: #14181A; } :root[data-accent="masters"] .bulk-bar .btn:hover { background: rgba(20, 24, 26, 0.1); } :root[data-accent="masters"] .bulk-bar .btn.danger { background: rgba(197, 48, 48, 0.12); color: #8B1F1F; } :root[data-accent="masters"] .bulk-bar-close { color: #14181A !important; } :root[data-accent="masters"] .subtab { color: #B5B0A2; } :root[data-accent="masters"] .subtab:hover { color: #FDF6E3; } :root[data-accent="masters"] .subtab.active { color: #FDF6E3; border-bottom-color: #C9A96E; } /* Drawer / modal */ :root[data-accent="masters"] .drawer, :root[data-accent="masters"] .modal { background: #1F2326; border: 1px solid rgba(245, 238, 221, 0.12); color: #F5EEDD; } :root[data-accent="masters"] .drawer-header, :root[data-accent="masters"] .modal-header { border-bottom: 1px solid rgba(245, 238, 221, 0.08); } :root[data-accent="masters"] .drawer-footer, :root[data-accent="masters"] .modal-footer { border-top: 1px solid rgba(245, 238, 221, 0.08); } :root[data-accent="masters"] .scrim { background: rgba(0, 0, 0, 0.65); } /* Detail rows */ :root[data-accent="masters"] .detail-label { color: #B5B0A2; } :root[data-accent="masters"] .detail-value { color: #F5EEDD; } :root[data-accent="masters"] .detail-row { border-color: rgba(245, 238, 221, 0.08); } /* Topbar search */ :root[data-accent="masters"] .topbar-search { background: #262A2D; } :root[data-accent="masters"] .topbar-search input { color: #F5EEDD; } :root[data-accent="masters"] .topbar-search input::placeholder { color: #8A867E; } :root[data-accent="masters"] .topbar-search kbd { background: rgba(245, 238, 221, 0.1); color: #C8C5BE; } /* Toast — cream surface for max contrast */ :root[data-accent="masters"] .toast { background: #FDF6E3; color: #14181A; } :root[data-accent="masters"] .toast .material-symbols-rounded { color: #006747; } /* Icon buttons */ :root[data-accent="masters"] .btn-icon { color: #B5B0A2; } :root[data-accent="masters"] .btn-icon:hover { background: rgba(245, 238, 221, 0.08); color: #FDF6E3; } /* Notification dot */ :root[data-accent="masters"] .notification-dot { background: #E45656; } /* ========================================================================== MASTERS LIGHT THEME — magnolia cream canvas, forest-green ink, gold accents. This is the right pairing for a read-heavy ops dashboard: • Cream main canvas → all-day legibility • Forest-green text → brand lives in the type, not the paint • Dark forest sidebar → still anchors the brand • Gold accents → highlights and decorative use only ========================================================================== */ :root[data-accent="masters-light"] { /* Primary — Augusta green stays the brand color, but now used as INK */ --md-sys-color-primary: #006747; --md-sys-color-on-primary: #FDF6E3; --md-sys-color-primary-container: #D6E8DD; --md-sys-color-on-primary-container: #002818; /* Secondary — gold, decorative */ --md-sys-color-secondary: #B58427; --md-sys-color-on-secondary: #FDF6E3; --md-sys-color-secondary-container: #F0DCAE; --md-sys-color-on-secondary-container: #3A2700; --md-sys-color-tertiary: #8B5A1F; --md-sys-color-on-tertiary: #FDF6E3; --md-sys-color-tertiary-container: #F4E2C7; --md-sys-color-on-tertiary-container: #3A2700; --md-sys-color-error: #B91C1C; --md-sys-color-on-error: #FDF6E3; --md-sys-color-error-container: #FBE4E4; --md-sys-color-on-error-container: #5C0000; /* LIGHT surfaces — magnolia cream */ --md-sys-color-background: #FAF6EC; --md-sys-color-on-background: #1A2620; /* near-black with green undertone, ~16:1 */ --md-sys-color-surface: #FAF6EC; --md-sys-color-on-surface: #1A2620; --md-sys-color-surface-variant: #EDE7D4; --md-sys-color-on-surface-variant: #4A5A52; /* slate-green secondary, ~7:1 */ --md-sys-color-surface-dim: #E8E1CE; --md-sys-color-surface-bright: #FFFFFF; --md-sys-color-surface-container-lowest: #FFFFFF; --md-sys-color-surface-container-low: #F5EFE0; --md-sys-color-surface-container: #EFE8D4; --md-sys-color-surface-container-high: #E9E1C8; --md-sys-color-surface-container-highest: #E2D9BC; --md-sys-color-outline: #8A8B7E; --md-sys-color-outline-variant: rgba(26, 38, 32, 0.12); --md-sys-color-inverse-surface: #0A1F14; --md-sys-color-inverse-on-surface: #FDF6E3; --md-sys-color-inverse-primary: #8FCFA8; --md-sys-color-scrim: rgba(10, 31, 20, 0.6); --md-sys-color-shadow: #0A1F14; } :root[data-accent="masters-light"] body { color: #1A2620; } :root[data-accent="masters-light"] h1, :root[data-accent="masters-light"] h2, :root[data-accent="masters-light"] h3, :root[data-accent="masters-light"] h4 { color: #0A1F14; font-family: 'Playfair Display', Georgia, serif; letter-spacing: -0.01em; } :root[data-accent="masters-light"] .muted { color: #4A5A52; } :root[data-accent="masters-light"] .text-xs.muted, :root[data-accent="masters-light"] .text-sm.muted { color: #4A5A52; } /* Sidebar — keep it dark forest. The dark rail anchors the brand against the cream canvas. */ :root[data-accent="masters-light"] .sidebar { background: #0A1F14; border-right: 1px solid rgba(253, 246, 227, 0.08); } :root[data-accent="masters-light"] .sidebar-brand-logo { background: #C9A96E; color: #0A1F14; font-family: 'Playfair Display', Georgia, serif; font-weight: 700; } :root[data-accent="masters-light"] .sidebar-brand-name strong { color: #FDF6E3; } :root[data-accent="masters-light"] .sidebar-brand-name span { color: #C9A96E; letter-spacing: 0.14em; } :root[data-accent="masters-light"] .sidebar-section { color: #8FA89A; font-weight: 600; } :root[data-accent="masters-light"] .sidebar-nav-item { color: #D5CCB8; } :root[data-accent="masters-light"] .sidebar-nav-item:hover { background: rgba(253, 246, 227, 0.06); color: #FDF6E3; } :root[data-accent="masters-light"] .sidebar-nav-item.active { background: rgba(201, 169, 110, 0.18); color: #FDF6E3; position: relative; } :root[data-accent="masters-light"] .sidebar-nav-item.active .material-symbols-rounded { color: #C9A96E; } :root[data-accent="masters-light"] .sidebar-nav-item.active::before { content: ''; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; background: #C9A96E; border-radius: 0 2px 2px 0; } :root[data-accent="masters-light"] .sidebar-nav-badge { background: #B91C1C; color: #FDF6E3; } :root[data-accent="masters-light"] .sidebar-avatar { background: rgba(201, 169, 110, 0.18); color: #FDF6E3; } :root[data-accent="masters-light"] .sidebar-user-info strong { color: #FDF6E3; } :root[data-accent="masters-light"] .sidebar-user-info span { color: #8FA89A; } :root[data-accent="masters-light"] .sidebar-footer .btn-icon { color: #8FA89A; } :root[data-accent="masters-light"] .sidebar-footer .btn-icon:hover { background: rgba(253, 246, 227, 0.08); color: #FDF6E3; } :root[data-accent="masters-light"] .sidebar-brand { border-bottom: 1px solid rgba(253, 246, 227, 0.08); } :root[data-accent="masters-light"] .sidebar-footer { border-top: 1px solid rgba(253, 246, 227, 0.08); } /* Topbar — white surface */ :root[data-accent="masters-light"] .topbar { background: #FFFFFF; border-bottom: 1px solid rgba(26, 38, 32, 0.10); } :root[data-accent="masters-light"] .topbar-breadcrumb { color: #4A5A52; } :root[data-accent="masters-light"] .topbar-breadcrumb strong { color: #0A1F14; } :root[data-accent="masters-light"] .topbar-search { background: #FFFFFF; border: 1px solid rgba(26, 38, 32, 0.14); } :root[data-accent="masters-light"] .topbar-search:focus-within { background: #FFFFFF; border-color: #006747; box-shadow: 0 0 0 3px rgba(0, 103, 71, 0.10); } :root[data-accent="masters-light"] .topbar-search input { color: #1A2620; } :root[data-accent="masters-light"] .topbar-search input::placeholder { color: #8A8B7E; } :root[data-accent="masters-light"] .topbar-search kbd { background: rgba(26, 38, 32, 0.06); color: #4A5A52; } /* Buttons — green primary CTA */ :root[data-accent="masters-light"] .btn-filled { background: #006747; color: #FDF6E3; font-weight: 600; letter-spacing: 0.01em; } :root[data-accent="masters-light"] .btn-filled:hover:not(:disabled) { background: #005538; } :root[data-accent="masters-light"] .btn-outlined { border-color: rgba(0, 103, 71, 0.35); color: #006747; } :root[data-accent="masters-light"] .btn-outlined:hover:not(:disabled) { background: rgba(0, 103, 71, 0.06); } :root[data-accent="masters-light"] .btn-text { color: #006747; } /* Cards — warm cream surface (matches table-wrap) so the cream canvas reads as one system. Pure white is reserved for the topbar and form inputs where surface contrast matters. */ :root[data-accent="masters-light"] .card { background: #F5EFE0; border: 1px solid rgba(26, 38, 32, 0.08); box-shadow: none; } :root[data-accent="masters-light"] .card-outlined { background: #F5EFE0; border: 1px solid rgba(26, 38, 32, 0.10); box-shadow: none; } :root[data-accent="masters-light"] .card-header { border-bottom: 1px solid rgba(26, 38, 32, 0.08); } /* Inputs — cream-white field on cream surface, distinguishable but warm */ :root[data-accent="masters-light"] .input, :root[data-accent="masters-light"] .search-input { background: #FFFEF7; border-color: rgba(26, 38, 32, 0.18); color: #1A2620; } :root[data-accent="masters-light"] .input::placeholder, :root[data-accent="masters-light"] .search-input input::placeholder { color: #8A8B7E; } :root[data-accent="masters-light"] .input:focus, :root[data-accent="masters-light"] .search-input:focus-within { border-color: #006747; box-shadow: 0 0 0 3px rgba(0, 103, 71, 0.12); } /* Tables — cream header to match the card surface */ :root[data-accent="masters-light"] .table thead th { color: #4A5A52; border-bottom: 1px solid rgba(26, 38, 32, 0.12); background: #EDE7D0; text-transform: uppercase; letter-spacing: 0.06em; font-size: 11px; font-weight: 700; } :root[data-accent="masters-light"] .table tbody { background: transparent; } :root[data-accent="masters-light"] .table tbody tr { border-bottom: 1px solid rgba(26, 38, 32, 0.06); background: transparent; } :root[data-accent="masters-light"] .table tbody tr:hover { background: rgba(0, 103, 71, 0.04); } :root[data-accent="masters-light"] .table tbody tr.selected { background: rgba(201, 169, 110, 0.14); } :root[data-accent="masters-light"] .table tbody td { color: #1A2620; } :root[data-accent="masters-light"] .table .cell-name strong { color: #0A1F14; font-weight: 600; } :root[data-accent="masters-light"] .table .cell-name span { color: #4A5A52; } /* Chips — cream surface to match cards */ :root[data-accent="masters-light"] .chip { background: #FBF7EC; border-color: rgba(26, 38, 32, 0.15); color: #1A2620; } :root[data-accent="masters-light"] .chip:hover { background: #EDE7D0; border-color: rgba(26, 38, 32, 0.25); } :root[data-accent="masters-light"] .chip.active { background: #0A1F14; border-color: #0A1F14; color: #FDF6E3; font-weight: 600; } /* Badges */ :root[data-accent="masters-light"] .badge.success { background: rgba(0, 103, 71, 0.12); color: #005538; } :root[data-accent="masters-light"] .badge.warning { background: rgba(181, 132, 39, 0.16); color: #6B4A12; } :root[data-accent="masters-light"] .badge.danger { background: rgba(185, 28, 28, 0.10); color: #8B1414; } :root[data-accent="masters-light"] .badge.info { background: rgba(26, 38, 32, 0.06); color: #1A2620; } :root[data-accent="masters-light"] .badge.neutral { background: rgba(26, 38, 32, 0.06); color: #4A5A52; } :root[data-accent="masters-light"] .badge-mono { color: #6B4A12; letter-spacing: 0.04em; } /* Avatars */ :root[data-accent="masters-light"] .avatar.primary { background: rgba(0, 103, 71, 0.14); color: #006747; } :root[data-accent="masters-light"] .avatar.secondary { background: rgba(181, 132, 39, 0.16); color: #6B4A12; } :root[data-accent="masters-light"] .avatar.tertiary { background: rgba(10, 31, 20, 0.10); color: #0A1F14; } /* Stats — cream like cards, decorative shadow only on accent */ :root[data-accent="masters-light"] .stat { background: #F5EFE0; border: 1px solid rgba(26, 38, 32, 0.08); box-shadow: none; } :root[data-accent="masters-light"] .stat-value { color: #0A1F14; font-family: 'Playfair Display', Georgia, serif; } :root[data-accent="masters-light"] .stat-label { color: #4A5A52; letter-spacing: 0.08em; font-weight: 700; } :root[data-accent="masters-light"] .stat-meta { color: #4A5A52; } :root[data-accent="masters-light"] .stat-trend.up { color: #006747; } :root[data-accent="masters-light"] .stat.accent { border-color: rgba(0, 103, 71, 0.3); background: linear-gradient(160deg, #F5EFE0 0%, rgba(0, 103, 71, 0.08) 100%); } :root[data-accent="masters-light"] .stat.accent .stat-value { color: #006747; } :root[data-accent="masters-light"] .stat.warning { border-left: 3px solid #B58427; } :root[data-accent="masters-light"] .stat.danger { border-left: 3px solid #B91C1C; } /* Page header — Playfair display title */ :root[data-accent="masters-light"] .page-header h1 { font-family: 'Playfair Display', Georgia, serif; color: #0A1F14; letter-spacing: -0.02em; } :root[data-accent="masters-light"] .page-header p { color: #4A5A52; } /* Bulk-action bar — dark forest, the inverted moment */ :root[data-accent="masters-light"] .bulk-bar { background: #0A1F14; color: #FDF6E3; } :root[data-accent="masters-light"] .bulk-bar-count { color: #FDF6E3; } :root[data-accent="masters-light"] .bulk-bar .btn { background: rgba(253, 246, 227, 0.12); color: #FDF6E3; } :root[data-accent="masters-light"] .bulk-bar .btn:hover { background: rgba(253, 246, 227, 0.18); } :root[data-accent="masters-light"] .bulk-bar-close { color: #FDF6E3 !important; } :root[data-accent="masters-light"] .subtab { color: #4A5A52; } :root[data-accent="masters-light"] .subtab:hover { color: #0A1F14; } :root[data-accent="masters-light"] .subtab.active { color: #006747; border-bottom-color: #006747; font-weight: 600; } /* Drawer / modal — elevated surfaces (above the canvas) stay cream-white for clarity */ :root[data-accent="masters-light"] .drawer, :root[data-accent="masters-light"] .modal { background: #FBF7EC; border: 1px solid rgba(26, 38, 32, 0.10); color: #1A2620; } :root[data-accent="masters-light"] .drawer-header, :root[data-accent="masters-light"] .modal-header { border-bottom: 1px solid rgba(26, 38, 32, 0.08); } :root[data-accent="masters-light"] .drawer-footer, :root[data-accent="masters-light"] .modal-footer { border-top: 1px solid rgba(26, 38, 32, 0.08); } :root[data-accent="masters-light"] .scrim { background: rgba(10, 31, 20, 0.5); } :root[data-accent="masters-light"] .detail-label { color: #4A5A52; } :root[data-accent="masters-light"] .detail-value { color: #1A2620; } :root[data-accent="masters-light"] .detail-row { border-color: rgba(26, 38, 32, 0.08); } /* Toast — dark forest with cream text, mirrors the brand inversion */ :root[data-accent="masters-light"] .toast { background: #0A1F14; color: #FDF6E3; } :root[data-accent="masters-light"] .toast .material-symbols-rounded { color: #C9A96E; } /* Icon buttons */ :root[data-accent="masters-light"] .btn-icon { color: #4A5A52; } :root[data-accent="masters-light"] .btn-icon:hover { background: rgba(26, 38, 32, 0.06); color: #0A1F14; } :root[data-accent="masters-light"] .notification-dot { background: #B91C1C; } /* ========================================================================== APP SHELL ========================================================================== */ .app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; grid-template-rows: var(--topbar-h) 1fr; grid-template-areas: "sidebar topbar" "sidebar main"; height: 100vh; transition: grid-template-columns 240ms var(--md-sys-motion-easing-emphasized); } .app[data-collapsed="true"] { grid-template-columns: var(--sidebar-w-collapsed) 1fr; } /* Sidebar */ .sidebar { grid-area: sidebar; background: var(--md-sys-color-surface-container-low); border-right: 1px solid var(--md-sys-color-outline-variant); display: flex; flex-direction: column; overflow: hidden; } .sidebar-brand { display: flex; align-items: center; gap: 12px; padding: 16px 20px; height: var(--topbar-h); border-bottom: 1px solid var(--md-sys-color-outline-variant); flex-shrink: 0; } .sidebar-brand-logo { width: 32px; height: 32px; background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); border-radius: 8px; display: grid; place-items: center; font-weight: 700; font-size: 13px; flex-shrink: 0; } .sidebar-brand-name { display: flex; flex-direction: column; gap: 2px; overflow: hidden; white-space: nowrap; } .sidebar-brand-name strong { font: 600 14px/1.2 var(--md-sys-typescale-plain); letter-spacing: 0.01em; color: var(--md-sys-color-on-surface); } .sidebar-brand-name span { font: 500 10px/1 var(--md-sys-typescale-plain); letter-spacing: 0.12em; text-transform: uppercase; color: var(--md-sys-color-on-surface-variant); } .sidebar-section { padding: 16px 12px 4px; font: 500 10px/1 var(--md-sys-typescale-plain); letter-spacing: 0.12em; text-transform: uppercase; color: var(--md-sys-color-on-surface-variant); } .app[data-collapsed="true"] .sidebar-section, .app[data-collapsed="true"] .sidebar-brand-name { display: none; } .sidebar-nav { padding: 4px 12px; display: flex; flex-direction: column; gap: 2px; flex: 1; overflow-y: auto; } .sidebar-nav-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 999px; font: 500 14px/1.2 var(--md-sys-typescale-plain); letter-spacing: 0.01em; color: var(--md-sys-color-on-surface-variant); cursor: pointer; transition: background 100ms, color 100ms; position: relative; white-space: nowrap; } .sidebar-nav-item:hover { background: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent); color: var(--md-sys-color-on-surface); } .sidebar-nav-item.active { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); } .sidebar-nav-item .material-symbols-rounded { font-size: 22px; flex-shrink: 0; } .sidebar-nav-item-label { flex: 1; overflow: hidden; text-overflow: ellipsis; } .sidebar-nav-badge { background: var(--md-sys-color-error); color: var(--md-sys-color-on-error); font: 700 10px/1 var(--md-sys-typescale-plain); padding: 3px 7px; border-radius: 999px; min-width: 18px; text-align: center; } .app[data-collapsed="true"] .sidebar-nav-item-label, .app[data-collapsed="true"] .sidebar-nav-badge { display: none; } .app[data-collapsed="true"] .sidebar-nav-item { justify-content: center; padding: 12px; } .sidebar-footer { border-top: 1px solid var(--md-sys-color-outline-variant); padding: 12px; display: flex; align-items: center; gap: 12px; } .sidebar-avatar { width: 36px; height: 36px; border-radius: 999px; background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); display: grid; place-items: center; font-weight: 600; font-size: 13px; flex-shrink: 0; } .sidebar-user-info { flex: 1; overflow: hidden; min-width: 0; } .sidebar-user-info strong { display: block; font: 500 13px/1.3 var(--md-sys-typescale-plain); color: var(--md-sys-color-on-surface); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sidebar-user-info span { display: block; font: 400 11px/1.3 var(--md-sys-typescale-plain); color: var(--md-sys-color-on-surface-variant); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .app[data-collapsed="true"] .sidebar-user-info, .app[data-collapsed="true"] .sidebar-collapse-btn { display: none; } /* Topbar */ .topbar { grid-area: topbar; display: flex; align-items: center; gap: 16px; padding: 0 24px; background: var(--md-sys-color-surface); border-bottom: 1px solid var(--md-sys-color-outline-variant); height: var(--topbar-h); } .topbar-title { font: 500 20px/1.2 var(--md-sys-typescale-brand); color: var(--md-sys-color-on-surface); flex-shrink: 0; } .topbar-subtitle { font: 400 13px/1.4 var(--md-sys-typescale-plain); color: var(--md-sys-color-on-surface-variant); } .topbar-spacer { flex: 1; } .search-input { display: flex; align-items: center; gap: 8px; background: var(--md-sys-color-surface-container); border: 1px solid transparent; border-radius: 999px; padding: 0 16px; height: 40px; width: 320px; transition: border-color 100ms, background 100ms; } .search-input:focus-within { border-color: var(--md-sys-color-primary); background: var(--md-sys-color-surface-container-high); } .search-input .material-symbols-rounded { color: var(--md-sys-color-on-surface-variant); font-size: 20px; } .search-input input { background: none; border: none; outline: none; color: var(--md-sys-color-on-surface); font: 400 14px/1.2 var(--md-sys-typescale-plain); flex: 1; width: 100%; } .search-input kbd { font: 500 11px/1 var(--md-sys-typescale-mono); background: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface-variant); padding: 3px 6px; border-radius: 4px; } /* Main */ .main { grid-area: main; overflow: auto; background: var(--md-sys-color-background); position: relative; } .page { padding: 24px 32px 48px; max-width: 1480px; margin: 0 auto; } /* ========================================================================== COMPONENTS — Buttons, chips, cards, tables, badges ========================================================================== */ /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 24px; border-radius: 999px; font: 500 14px/1 var(--md-sys-typescale-plain); letter-spacing: 0.1px; cursor: pointer; transition: background 100ms var(--md-sys-motion-easing-standard), box-shadow 100ms; white-space: nowrap; user-select: none; } .btn:disabled { opacity: 0.38; cursor: not-allowed; } .btn .material-symbols-rounded { font-size: 18px; } .btn-filled { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); } .btn-filled:hover:not(:disabled) { box-shadow: var(--md-sys-elevation-level-1); background: color-mix(in srgb, var(--md-sys-color-primary) 92%, var(--md-sys-color-on-primary)); } .btn-tonal { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); } .btn-tonal:hover:not(:disabled) { background: color-mix(in srgb, var(--md-sys-color-secondary-container) 88%, var(--md-sys-color-on-secondary-container)); } .btn-outlined { border: 1px solid var(--md-sys-color-outline); color: var(--md-sys-color-primary); background: transparent; } .btn-outlined:hover:not(:disabled) { background: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent); } .btn-text { color: var(--md-sys-color-primary); padding: 0 12px; } .btn-text:hover:not(:disabled) { background: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent); } .btn-error { background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); } .btn-error:hover:not(:disabled) { background: color-mix(in srgb, var(--md-sys-color-error-container) 88%, var(--md-sys-color-on-error-container)); } .btn-sm { height: 32px; padding: 0 16px; font-size: 13px; } .btn-icon { width: 40px; height: 40px; padding: 0; border-radius: 999px; display: grid; place-items: center; color: var(--md-sys-color-on-surface-variant); } .btn-icon:hover { background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); color: var(--md-sys-color-on-surface); } .btn-icon.btn-sm { width: 32px; height: 32px; } .btn-icon .material-symbols-rounded { font-size: 22px; } /* FAB-style add button */ .btn-fab { position: fixed; right: 32px; bottom: 32px; width: 56px; height: 56px; border-radius: 16px; background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); box-shadow: var(--md-sys-elevation-level-3); display: grid; place-items: center; z-index: 50; transition: box-shadow 200ms, transform 100ms; } .btn-fab:hover { box-shadow: var(--md-sys-elevation-level-4); } .btn-fab .material-symbols-rounded { font-size: 24px; } /* Chips */ .chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--md-sys-color-outline-variant); background: transparent; color: var(--md-sys-color-on-surface-variant); font: 500 13px/1 var(--md-sys-typescale-plain); cursor: pointer; transition: background 100ms, border-color 100ms, color 100ms; white-space: nowrap; } .chip:hover { background: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent); } .chip.active { background: var(--md-sys-color-secondary-container); border-color: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); } .chip .material-symbols-rounded { font-size: 16px; } /* Cards */ .card { background: var(--md-sys-color-surface-container-low); border-radius: var(--md-sys-shape-corner-medium); overflow: hidden; } .card-elevated { box-shadow: var(--md-sys-elevation-level-1); } .card-outlined { border: 1px solid var(--md-sys-color-outline-variant); background: var(--md-sys-color-surface); } .card-header { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--md-sys-color-outline-variant); } .card-header h3 { flex: 1; font: 500 16px/1.2 var(--md-sys-typescale-plain); letter-spacing: 0.15px; color: var(--md-sys-color-on-surface); } .card-header-eyebrow { font: 500 11px/1 var(--md-sys-typescale-plain); letter-spacing: 0.12em; text-transform: uppercase; color: var(--md-sys-color-on-surface-variant); margin-bottom: 4px; } .card-body { padding: 20px; } /* Stat cards */ .stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; } .stat { background: var(--md-sys-color-surface-container-low); border-radius: var(--md-sys-shape-corner-medium); padding: 16px 20px; display: flex; flex-direction: column; gap: 4px; position: relative; overflow: hidden; } .stat-label { font: 500 11px/1 var(--md-sys-typescale-plain); letter-spacing: 0.1em; text-transform: uppercase; color: var(--md-sys-color-on-surface-variant); } .stat-value { font: 500 32px/1.1 var(--md-sys-typescale-brand); letter-spacing: -0.02em; color: var(--md-sys-color-on-surface); font-variant-numeric: tabular-nums; } .stat-meta { font: 400 12px/1.3 var(--md-sys-typescale-plain); color: var(--md-sys-color-on-surface-variant); display: flex; align-items: center; gap: 4px; } .stat-trend.up { color: var(--md-sys-color-secondary); } .stat-trend.down { color: var(--md-sys-color-error); } .stat-icon { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface-variant); } .stat-icon .material-symbols-rounded { font-size: 18px; } .stat.accent { background: linear-gradient(135deg, var(--md-sys-color-secondary-container), var(--md-sys-color-surface-container)); } .stat.accent .stat-value { color: var(--md-sys-color-on-secondary-container); } .stat.warning .stat-icon { background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); } .stat.danger .stat-icon { background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); } /* Tables */ .table-wrap { background: var(--md-sys-color-surface-container-low); border-radius: var(--md-sys-shape-corner-medium); overflow: hidden; } .table { width: 100%; border-collapse: collapse; } .table thead th { text-align: left; padding: 0 var(--cell-pad-x); height: 44px; font: 500 12px/1 var(--md-sys-typescale-plain); letter-spacing: 0.05em; text-transform: uppercase; color: var(--md-sys-color-on-surface-variant); background: var(--md-sys-color-surface-container); border-bottom: 1px solid var(--md-sys-color-outline-variant); white-space: nowrap; position: sticky; top: 0; z-index: 1; } .table thead th.sortable { cursor: pointer; user-select: none; } .table thead th.sortable:hover { color: var(--md-sys-color-on-surface); } .table thead th .sort-arrow { display: inline-block; margin-left: 4px; opacity: 0.6; font-size: 14px; vertical-align: middle; } .table tbody td { padding: 0 var(--cell-pad-x); height: var(--row-h); font: 400 14px/1.3 var(--md-sys-typescale-plain); letter-spacing: 0.15px; color: var(--md-sys-color-on-surface); border-bottom: 1px solid var(--md-sys-color-outline-variant); vertical-align: middle; } .table tbody tr { transition: background 80ms; cursor: pointer; } .table tbody tr:hover { background: color-mix(in srgb, var(--md-sys-color-primary) 6%, transparent); } .table tbody tr.selected { background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); } .table tbody tr.selected:hover { background: color-mix(in srgb, var(--md-sys-color-primary) 16%, transparent); } .table tbody tr:last-child td { border-bottom: none; } .cell-checkbox { width: 44px; padding-left: 16px !important; padding-right: 8px !important; } .cell-actions { width: 1%; white-space: nowrap; text-align: right; } .cell-name { display: flex; align-items: center; gap: 12px; } .avatar { width: 32px; height: 32px; border-radius: 999px; background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); display: grid; place-items: center; font: 600 12px/1 var(--md-sys-typescale-plain); flex-shrink: 0; } .avatar.tertiary { background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); } .avatar.secondary { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); } .cell-name-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .cell-name-text strong { font: 500 14px/1.2 var(--md-sys-typescale-plain); color: var(--md-sys-color-on-surface); } .cell-name-text span { font: 400 12px/1.2 var(--md-sys-typescale-plain); color: var(--md-sys-color-on-surface-variant); } /* Status badges (M3 style — tonal containers) */ .badge { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 8px; font: 500 12px/1 var(--md-sys-typescale-plain); letter-spacing: 0.05em; white-space: nowrap; } .badge::before { content: ''; width: 6px; height: 6px; border-radius: 999px; background: currentColor; flex-shrink: 0; } .badge.dot-only::before { display: none; } .badge.success { background: #C8E6D2; color: #002818; } .badge.warning { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); } .badge.danger { background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); } .badge.info { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); } .badge.neutral { background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface-variant); } .badge-mono { font-family: var(--md-sys-typescale-mono); font-size: 11px; letter-spacing: 0; } .badge-mono::before { display: none; } /* Checkbox */ .checkbox { width: 18px; height: 18px; border: 2px solid var(--md-sys-color-on-surface-variant); border-radius: 4px; display: grid; place-items: center; cursor: pointer; flex-shrink: 0; transition: background 100ms, border-color 100ms; background: transparent; } .checkbox:hover { border-color: var(--md-sys-color-on-surface); } .checkbox.checked, .checkbox.indeterminate { background: var(--md-sys-color-primary); border-color: var(--md-sys-color-primary); } .checkbox.checked::after { content: 'check'; font-family: 'Material Symbols Rounded'; color: var(--md-sys-color-on-primary); font-size: 16px; font-weight: 700; } .checkbox.indeterminate::after { content: ''; width: 10px; height: 2px; background: var(--md-sys-color-on-primary); } /* Form fields */ .field { display: flex; flex-direction: column; gap: 6px; } .field label { font: 500 12px/1 var(--md-sys-typescale-plain); letter-spacing: 0.05em; color: var(--md-sys-color-on-surface-variant); text-transform: uppercase; } .input { background: var(--md-sys-color-surface-container); border: 1px solid transparent; border-radius: 8px; padding: 0 14px; height: 40px; font: 400 14px/1.2 var(--md-sys-typescale-plain); color: var(--md-sys-color-on-surface); outline: none; transition: border-color 100ms, background 100ms; width: 100%; } .input:hover { background: var(--md-sys-color-surface-container-high); } .input:focus { border-color: var(--md-sys-color-primary); background: var(--md-sys-color-surface-container-high); } .input.compact { height: 32px; font-size: 13px; padding: 0 10px; } textarea.input { padding: 10px 14px; height: auto; min-height: 80px; resize: vertical; line-height: 1.5; } select.input { padding-right: 32px; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%238E9099'%3E%3Cpath d='M5 7l5 5 5-5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; background-size: 16px; } /* Toolbar (above tables) */ .toolbar { display: flex; align-items: center; gap: 10px; padding: 12px 0; flex-wrap: wrap; } .toolbar .toolbar-spacer { flex: 1; } .toolbar .filter-chips { display: flex; gap: 8px; flex-wrap: wrap; } /* Bulk action bar */ .bulk-bar { position: sticky; top: 0; z-index: 5; background: var(--md-sys-color-inverse-surface); color: var(--md-sys-color-inverse-on-surface); border-radius: var(--md-sys-shape-corner-medium); padding: 0 16px 0 20px; height: var(--bulk-bar-h); display: flex; align-items: center; gap: 16px; box-shadow: var(--md-sys-elevation-level-3); margin-bottom: 12px; animation: slideDown 200ms var(--md-sys-motion-easing-emphasized-decelerate); } @keyframes slideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } .bulk-bar-count { font: 500 14px/1 var(--md-sys-typescale-plain); letter-spacing: 0.1px; } .bulk-bar-count strong { font-weight: 600; background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); padding: 4px 10px; border-radius: 999px; margin-right: 6px; font-variant-numeric: tabular-nums; } .bulk-bar-actions { display: flex; gap: 8px; flex: 1; flex-wrap: wrap; } .bulk-bar-actions .btn { background: transparent; color: var(--md-sys-color-inverse-on-surface); border: 1px solid color-mix(in srgb, var(--md-sys-color-inverse-on-surface) 30%, transparent); height: 36px; padding: 0 14px; } .bulk-bar-actions .btn:hover { background: color-mix(in srgb, var(--md-sys-color-inverse-on-surface) 12%, transparent); } .bulk-bar-actions .btn.danger { color: var(--md-sys-color-error); border-color: color-mix(in srgb, var(--md-sys-color-error) 50%, transparent); } .bulk-bar-close { margin-left: auto; } /* Empty states */ .empty-state { padding: 56px 24px; text-align: center; color: var(--md-sys-color-on-surface-variant); } .empty-state .material-symbols-rounded { font-size: 48px; opacity: 0.4; margin-bottom: 12px; } .empty-state h4 { color: var(--md-sys-color-on-surface); font: 500 16px/1.3 var(--md-sys-typescale-plain); margin-bottom: 4px; } .empty-state p { font: 400 14px/1.5 var(--md-sys-typescale-plain); } /* Modal */ .scrim { position: fixed; inset: 0; background: rgba(0,0,0,0.56); z-index: 100; animation: fade 200ms var(--md-sys-motion-easing-standard); } @keyframes fade { from { opacity: 0; } to { opacity: 1; } } .modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--md-sys-color-surface-container-high); border-radius: var(--md-sys-shape-corner-extra-large); width: 560px; max-width: calc(100vw - 32px); max-height: calc(100vh - 64px); overflow: auto; z-index: 101; box-shadow: var(--md-sys-elevation-level-5); animation: modalIn 300ms var(--md-sys-motion-easing-emphasized-decelerate); } @keyframes modalIn { from { opacity: 0; transform: translate(-50%, -45%); } to { opacity: 1; transform: translate(-50%, -50%); } } .modal-header { padding: 24px 24px 12px; } .modal-header h2 { font: 500 22px/1.3 var(--md-sys-typescale-brand); color: var(--md-sys-color-on-surface); } .modal-header p { font: 400 14px/1.4 var(--md-sys-typescale-plain); color: var(--md-sys-color-on-surface-variant); margin-top: 4px; } .modal-body { padding: 12px 24px; display: flex; flex-direction: column; gap: 16px; } .modal-footer { padding: 16px 24px 24px; display: flex; justify-content: flex-end; gap: 8px; } /* Drawer (right-side detail panel) */ .drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 480px; max-width: 100vw; background: var(--md-sys-color-surface-container); border-left: 1px solid var(--md-sys-color-outline-variant); z-index: 101; display: flex; flex-direction: column; box-shadow: -4px 0 16px rgba(0,0,0,0.3); animation: drawerIn 280ms var(--md-sys-motion-easing-emphasized-decelerate); } @keyframes drawerIn { from { transform: translateX(100%); } to { transform: none; } } .drawer-header { padding: 20px 24px; border-bottom: 1px solid var(--md-sys-color-outline-variant); display: flex; align-items: flex-start; gap: 12px; } .drawer-header h3 { flex: 1; font: 500 18px/1.3 var(--md-sys-typescale-brand); color: var(--md-sys-color-on-surface); } .drawer-body { flex: 1; overflow-y: auto; padding: 24px; } .drawer-footer { padding: 16px 24px; border-top: 1px solid var(--md-sys-color-outline-variant); display: flex; justify-content: flex-end; gap: 8px; } /* Detail panel rows */ .detail-row { display: grid; grid-template-columns: 130px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--md-sys-color-outline-variant); } .detail-row:last-child { border-bottom: none; } .detail-label { font: 500 12px/1.4 var(--md-sys-typescale-plain); letter-spacing: 0.05em; text-transform: uppercase; color: var(--md-sys-color-on-surface-variant); } .detail-value { font: 400 14px/1.4 var(--md-sys-typescale-plain); color: var(--md-sys-color-on-surface); } /* Page header */ .page-header { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; } .page-header h1 { font: 500 28px/1.2 var(--md-sys-typescale-brand); letter-spacing: -0.01em; color: var(--md-sys-color-on-surface); } .page-header p { font: 400 14px/1.4 var(--md-sys-typescale-plain); color: var(--md-sys-color-on-surface-variant); margin-top: 4px; max-width: 640px; } .page-header-text { flex: 1; min-width: 280px; } .page-header-actions { display: flex; gap: 8px; flex-wrap: wrap; } /* Tab bar (sub-tabs inside a page) */ .subtabs { display: flex; gap: 0; border-bottom: 1px solid var(--md-sys-color-outline-variant); margin-bottom: 20px; } .subtab { padding: 12px 20px; font: 500 14px/1 var(--md-sys-typescale-plain); letter-spacing: 0.1px; color: var(--md-sys-color-on-surface-variant); border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; transition: color 100ms; display: flex; align-items: center; gap: 8px; } .subtab .material-symbols-rounded { font-size: 18px; } .subtab:hover { color: var(--md-sys-color-on-surface); } .subtab.active { color: var(--md-sys-color-primary); border-bottom-color: var(--md-sys-color-primary); } /* Toast */ .toast-stack { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column-reverse; gap: 8px; pointer-events: none; } .toast { background: var(--md-sys-color-inverse-surface); color: var(--md-sys-color-inverse-on-surface); border-radius: var(--md-sys-shape-corner-extra-small); padding: 14px 16px; font: 400 14px/1.4 var(--md-sys-typescale-plain); box-shadow: var(--md-sys-elevation-level-3); display: flex; align-items: center; gap: 12px; min-width: 320px; pointer-events: auto; animation: toastIn 300ms var(--md-sys-motion-easing-emphasized-decelerate); } @keyframes toastIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } } .toast .material-symbols-rounded { color: var(--md-sys-color-inverse-primary); font-size: 20px; flex-shrink: 0; } .toast button { margin-left: auto; color: var(--md-sys-color-inverse-primary); font: 500 13px/1 var(--md-sys-typescale-plain); letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 8px; } /* Misc */ .mono { font-family: var(--md-sys-typescale-mono); } .muted { color: var(--md-sys-color-on-surface-variant); } .text-sm { font-size: 13px; } .text-xs { font-size: 12px; } .row { display: flex; align-items: center; gap: 8px; } .col { display: flex; flex-direction: column; gap: 8px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-6 { gap: 24px; } .flex-1 { flex: 1; } .spacer { flex: 1; } /* Scrollbar */ .main::-webkit-scrollbar, .drawer-body::-webkit-scrollbar, .sidebar-nav::-webkit-scrollbar { width: 8px; height: 8px; } .main::-webkit-scrollbar-thumb, .drawer-body::-webkit-scrollbar-thumb, .sidebar-nav::-webkit-scrollbar-thumb { background: var(--md-sys-color-surface-container-highest); border-radius: 999px; } .main::-webkit-scrollbar-thumb:hover { background: var(--md-sys-color-outline); } /* ===== Auth Gate (P1 — pre-React) ===== */ #auth-gate { display:flex; align-items:center; justify-content:center; min-height:100vh; background:var(--md-sys-color-background); } #auth-gate .auth-card { background:var(--md-sys-color-surface); border:1px solid var(--md-sys-color-outline-variant); border-radius:16px; padding:48px 56px; max-width:420px; width:100%; box-shadow:0 8px 32px rgba(0,0,0,0.08); } #auth-gate h1 { font-family:'Playfair Display',serif; font-weight:700; font-size:28px; margin-bottom:24px; text-align:center; } #auth-gate button { width:100%; padding:12px 20px; border-radius:8px; border:1px solid var(--md-sys-color-primary); background:var(--md-sys-color-primary); color:var(--md-sys-color-on-primary); font-size:14px; font-weight:600; cursor:pointer; margin-bottom:12px; } #auth-gate input { width:100%; padding:10px 14px; border-radius:8px; border:1px solid var(--md-sys-color-outline); background:var(--md-sys-color-surface-variant); margin-bottom:12px; } #auth-gate .divider { text-align:center; color:var(--md-sys-color-on-surface-variant); margin:16px 0; font-size:13px; }