/* ============================================================ BAMBI — app.css Design tokens, shared styles, layout, components. Arctic Ink aesthetic — monochromatic chrome, semantic status colour. Fonts: Fraunces (display) + IBM Plex Sans (UI/numeric). ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=IBM+Plex+Sans:wght@300;400;500;600;700&display=swap'); /* ── Tokens ────────────────────────────────────────────────── */ :root { /* Neutrals — light mode (Arctic Ink) */ --col-bg: #f5f5f5; --col-surface: #ffffff; --col-surface-alt: #efefef; --col-border: #e8e8e8; --col-border-strong:#d0d0d0; /* Nav — near-white sidebar sharing page surface */ --col-nav-bg: #ffffff; --col-nav-text: #0a0a0a; --col-nav-muted: #aaaaaa; --col-nav-active: #0a0a0a; --col-nav-accent: #0a0a0a; /* Text */ --col-text: #0a0a0a; --col-text-muted: #555555; --col-text-faint: #aaaaaa; /* Accent — monochrome */ --col-accent: #0a0a0a; --col-accent-hover: #333333; --col-accent-light: #f0f0f0; /* Semantic — sole colour carriers, unchanged across themes */ --col-success: #2d9e6b; --col-success-light:#e6f5ee; --col-warning: #e8a838; --col-warning-light:#fef7e6; --col-danger: #d94f4f; --col-danger-light: #fdeaea; --col-neutral: #7a7a8c; --col-neutral-light:#f0f0f3; /* Session status */ --col-confirmed: #2d9e6b; --col-proposed: #e8a838; --col-cancelled: #d94f4f; --col-held: #7a7a8c; /* Timeline grid (schedule canvas) — opacity-aware overlays so the grid reads cleanly on both the light canvas and the dark canvas. */ --col-grid-hour: rgba(0,0,0,0.30); --col-grid-half: rgba(0,0,0,0.18); --col-grid-quarter: rgba(0,0,0,0.08); --col-grid-gap: rgba(0,0,0,0.40); --col-header-sep: rgba(0,0,0,0.08); --col-header-sep-strong: rgba(0,0,0,0.18); --col-header-venue: rgba(10,10,10,0.55); --col-today-tint: rgba(0,147,209,0.12); /* Typography --font-display → Fraunces (headings, page titles only) --font-ui → IBM Plex Sans (everything else) --font-numeric → IBM Plex Sans w/ tabular-nums (stats, tables, times) --font-mono → alias to --font-ui (tabular nums applied via .mono) */ --font-display: 'Fraunces', Georgia, serif; --font-ui: 'IBM Plex Sans', system-ui, sans-serif; --font-mono: 'IBM Plex Sans', system-ui, sans-serif; --font-numeric: 'IBM Plex Sans', system-ui, sans-serif; /* Type scale */ --text-xs: 0.72rem; /* 11.5px */ --text-sm: 0.825rem; /* 13.2px */ --text-base: 0.9375rem; /* 15px */ --text-md: 1.0625rem; /* 17px */ --text-lg: 1.25rem; /* 20px */ --text-xl: 1.5rem; /* 24px */ --text-2xl: 1.875rem; /* 30px */ /* Spacing */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem; /* Layout */ --nav-width: 220px; --detail-width: 420px; --content-max: 1280px; --header-height: 52px; /* Radius */ --r-sm: 3px; --r-md: 6px; --r-lg: 10px; --r-pill: 999px; /* Shadows */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04); --shadow-md: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.05); --shadow-lg: 0 12px 32px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.06); /* Transitions */ --t-fast: 120ms ease; --t-base: 200ms ease; --t-slow: 350ms ease; } /* ── Dark mode (Arctic Ink) ────────────────────────────────── Applied via [data-theme="dark"] on . All non-semantic tokens swap; semantic status colours (success/warning/danger/neutral) stay identical and must hold WCAG AA contrast on both surfaces in both modes. Shadows soften in dark mode to avoid hard edges against dark surfaces. */ [data-theme="dark"] { --col-bg: #111111; --col-surface: #181818; --col-surface-alt: #1a1a1a; --col-border: #242424; --col-border-strong:#333333; --col-nav-bg: #0c0c0c; --col-nav-text: #f0f0f0; --col-nav-muted: #444444; --col-nav-active: #f0f0f0; --col-nav-accent: #f0f0f0; --col-text: #f0f0f0; --col-text-muted: #888888; --col-text-faint: #444444; --col-accent: #f0f0f0; --col-accent-hover: #cccccc; --col-accent-light: #1f1f1f; --shadow-sm: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3); --shadow-md: 0 4px 12px rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.35); --shadow-lg: 0 12px 32px rgba(0,0,0,0.6),0 4px 8px rgba(0,0,0,0.4); /* Timeline grid — inverted for dark canvas */ --col-grid-hour: rgba(255,255,255,0.22); --col-grid-half: rgba(255,255,255,0.14); --col-grid-quarter: rgba(255,255,255,0.06); --col-grid-gap: rgba(255,255,255,0.35); --col-header-sep: rgba(255,255,255,0.08); --col-header-sep-strong: rgba(255,255,255,0.20); --col-header-venue: rgba(240,240,240,0.55); --col-today-tint: rgba(0,147,209,0.18); } /* ── Reset ──────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { font-size: 16px; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-ui); font-size: var(--text-base); color: var(--col-text); background: var(--col-bg); line-height: 1.55; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--sp-3); font-family: var(--font-display); font-weight: 500; line-height: 1.2; letter-spacing: -0.015em; } h1 { font-size: var(--text-2xl); } h2 { font-size: var(--text-xl); } h3 { font-size: var(--text-lg); font-weight: 600; } h4 { font-size: var(--text-md); font-weight: 600; } p { margin: 0 0 var(--sp-4); } a { color: var(--col-accent); text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; display: block; } /* ── App shell ──────────────────────────────────────────────── */ .app-shell { display: flex; min-height: 100vh; } /* ── Sidebar nav ────────────────────────────────────────────── */ .app-nav { width: var(--nav-width); flex-shrink: 0; background: var(--col-nav-bg); color: var(--col-nav-text); display: flex; flex-direction: column; position: fixed; top: 0; left: 0; height: 100vh; overflow-y: auto; z-index: 100; border-right: 0.5px solid var(--col-border); } .nav-logo { padding: var(--sp-5) var(--sp-5) var(--sp-4); border-bottom: 0.5px solid var(--col-border); } .nav-logo-wordmark { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; color: var(--col-nav-active); letter-spacing: -0.01em; } .nav-logo-sub { font-size: var(--text-xs); color: var(--col-nav-muted); margin-top: 2px; } .nav-section { padding: var(--sp-4) 0 var(--sp-2); } .nav-section-label { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--col-text-faint); padding: 0 var(--sp-5) var(--sp-2); } .nav-item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-5); font-size: var(--text-sm); color: var(--col-nav-text); text-decoration: none; border-left: 2px solid transparent; transition: background var(--t-fast), color var(--t-fast); cursor: pointer; } .nav-item:hover { background: color-mix(in srgb, var(--col-nav-accent) 4%, transparent); color: var(--col-nav-active); text-decoration: none; } .nav-item.active { color: var(--col-nav-active); border-left-color: var(--col-nav-accent); background: color-mix(in srgb, var(--col-nav-accent) 5%, transparent); } .nav-item-icon { width: 16px; text-align: center; flex-shrink: 0; opacity: 0.7; } .nav-item.active .nav-item-icon { opacity: 1; } .nav-bottom { margin-top: auto; padding: var(--sp-4) var(--sp-5); border-top: 0.5px solid var(--col-border); display: flex; flex-direction: column; gap: var(--sp-3); } /* ── Theme toggle (in nav bottom) ──────────────────────────── Sun/moon button. Inline-flex so it sits beside the context switcher without stretching full-width. Token-driven so it tracks the theme. */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); width: 100%; background: transparent; color: var(--col-nav-muted); border: 0.5px solid var(--col-border); border-radius: var(--r-sm); padding: var(--sp-2) var(--sp-3); font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast); } .theme-toggle:hover { color: var(--col-nav-text); border-color: var(--col-border-strong); background: var(--col-surface-alt); } .theme-toggle-icon { font-size: 14px; line-height: 1; } /* ── Context switcher (in nav bottom) ───────────────────────── */ .context-switcher { display: flex; flex-direction: column; gap: var(--sp-2); } .context-switcher label { font-size: var(--text-xs); color: var(--col-text-faint); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; } .context-switcher select { width: 100%; background: var(--col-surface-alt); border: 0.5px solid var(--col-border); color: var(--col-nav-text); border-radius: var(--r-sm); padding: var(--sp-2) var(--sp-3); font-family: var(--font-ui); font-size: var(--text-sm); cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: var(--sp-8); } .context-switcher select:focus { outline: none; border-color: var(--col-nav-accent); } .context-switcher select option { background: var(--col-surface); color: var(--col-text); } /* Multi-location checkbox list */ .ctx-location-list { display: flex; flex-direction: column; gap: 2px; max-height: 160px; overflow-y: auto; padding: var(--sp-1) 0; } .ctx-location-list:empty::before { content: 'No locations'; font-size: var(--text-xs); color: var(--col-nav-muted); padding: var(--sp-1) var(--sp-2); } .ctx-loc-item { display: flex; align-items: center; gap: var(--sp-2); padding: 3px var(--sp-2); border-radius: var(--r-sm); cursor: pointer; font-size: var(--text-sm); color: var(--col-nav-text); transition: background 0.12s; user-select: none; } .ctx-loc-item:hover { background: rgba(255,255,255,0.08); } .ctx-loc-item input[type="checkbox"] { accent-color: var(--col-nav-accent); width: 13px; height: 13px; flex-shrink: 0; cursor: pointer; } .ctx-loc-item.all-locs { color: var(--col-nav-muted); font-style: italic; border-bottom: 1px solid rgba(255,255,255,0.08); margin-bottom: 2px; padding-bottom: 5px; } /* ── Main content area ──────────────────────────────────────── */ .app-main { margin-left: var(--nav-width); flex: 1; display: flex; flex-direction: column; min-width: 0; } /* ── Page header ─────────────────────────────────────────────── */ .page-header { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-5) var(--sp-8); border-bottom: 1px solid var(--col-border); background: var(--col-surface); gap: var(--sp-4); flex-wrap: wrap; } .page-title { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 500; margin: 0; letter-spacing: -0.015em; } .page-subtitle { font-size: var(--text-sm); color: var(--col-text-muted); margin: 2px 0 0; } .page-actions { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; } /* ── Page body ───────────────────────────────────────────────── */ .page-body { padding: var(--sp-6) var(--sp-8); flex: 1; } /* ── Offline banner ──────────────────────────────────────────── */ .offline-banner { display: none; background: var(--col-warning); color: #1a1400; font-size: var(--text-sm); font-weight: 500; padding: var(--sp-2) var(--sp-6); text-align: center; } .offline-banner.visible { display: block; } /* ── Buttons ─────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-4); font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 500; border-radius: var(--r-md); border: 1px solid transparent; cursor: pointer; transition: background var(--t-fast), box-shadow var(--t-fast), opacity var(--t-fast); text-decoration: none; white-space: nowrap; } .btn:disabled { opacity: 0.45; cursor: not-allowed; } .btn-primary { background: var(--col-accent); color: #fff; border-color: var(--col-accent); } .btn-primary:hover:not(:disabled) { background: var(--col-accent-hover); border-color: var(--col-accent-hover); } .btn-secondary { background: var(--col-surface); color: var(--col-text); border-color: var(--col-border-strong); } .btn-secondary:hover:not(:disabled) { background: var(--col-surface-alt); } .btn-ghost { background: transparent; color: var(--col-text-muted); border-color: transparent; } .btn-ghost:hover:not(:disabled) { background: var(--col-surface-alt); color: var(--col-text); } .btn-danger { background: var(--col-danger-light); color: var(--col-danger); border-color: var(--col-danger); } .btn-danger:hover:not(:disabled) { background: var(--col-danger); color: #fff; } .btn-sm { padding: var(--sp-1) var(--sp-3); font-size: var(--text-xs); } .btn-lg { padding: var(--sp-3) var(--sp-6); font-size: var(--text-base); } /* ── Forms ───────────────────────────────────────────────────── */ .form-group { display: flex; flex-direction: column; gap: var(--sp-1); margin-bottom: var(--sp-5); } .form-label { font-size: var(--text-sm); font-weight: 500; color: var(--col-text); } .form-label.required::after { content: ' *'; color: var(--col-danger); } .form-hint { font-size: var(--text-xs); color: var(--col-text-muted); margin-top: var(--sp-1); } input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="date"], input[type="time"], select, textarea { width: 100%; padding: var(--sp-2) var(--sp-3); font-family: var(--font-ui); font-size: var(--text-base); color: var(--col-text); background: var(--col-surface); border: 1px solid var(--col-border); border-radius: var(--r-md); transition: border-color var(--t-fast), box-shadow var(--t-fast); appearance: none; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--col-accent); box-shadow: 0 0 0 3px var(--col-accent-light); } input.error, select.error, textarea.error { border-color: var(--col-danger); } input.unsaved, select.unsaved, textarea.unsaved { border-color: var(--col-warning); background: var(--col-warning-light); } textarea { resize: vertical; min-height: 80px; } /* Number inputs — mono font for readability */ input[type="number"] { font-family: var(--font-mono); } /* ── Grid / table ────────────────────────────────────────────── */ .data-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); } .data-table th { text-align: left; font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--col-text-muted); padding: var(--sp-3) var(--sp-4); border-bottom: 2px solid var(--col-border); white-space: nowrap; background: var(--col-surface); position: sticky; top: 0; z-index: 1; } .data-table td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--col-border); vertical-align: middle; } .data-table tr:last-child td { border-bottom: none; } .data-table tbody tr:hover td { background: var(--col-accent-light); } .data-table tr.deleted td { opacity: 0.45; text-decoration: line-through; } /* Numeric columns — right-aligned, mono */ .col-num { text-align: right; font-family: var(--font-mono); font-size: var(--text-sm); } /* ── Pills / status badges ───────────────────────────────────── */ .pill { display: inline-flex; align-items: center; padding: 2px var(--sp-2); border-radius: var(--r-pill); font-size: var(--text-xs); font-weight: 500; white-space: nowrap; } .status-confirmed { background: var(--col-success-light); color: var(--col-success); } .status-proposed { background: var(--col-warning-light); color: #8a5c00; } .status-cancelled { background: var(--col-danger-light); color: var(--col-danger); } .status-held { background: var(--col-neutral-light); color: var(--col-neutral); } .status-signed { background: var(--col-success-light); color: var(--col-success); } .status-unsigned { background: var(--col-neutral-light); color: var(--col-neutral); } .status-sent { background: #e8f0fd; color: #2d55b4; } .status-void { background: var(--col-danger-light); color: var(--col-danger); } /* ── Cards ───────────────────────────────────────────────────── */ .card { background: var(--col-surface); border: 1px solid var(--col-border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); } .card-header { padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--col-border); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); } .card-title { font-family: var(--font-ui); font-size: var(--text-base); font-weight: 600; letter-spacing: 0; margin: 0; } .card-body { padding: var(--sp-5); } .card-footer { padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--col-border); background: var(--col-surface-alt); border-radius: 0 0 var(--r-lg) var(--r-lg); } /* ── Detail panel (slides in from right) ─────────────────────── */ .detail-panel { position: fixed; top: 0; right: 0; width: var(--detail-width); height: 100vh; background: var(--col-surface); border-left: 1px solid var(--col-border); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; z-index: 200; transform: translateX(100%); transition: transform var(--t-slow); overflow: hidden; } .detail-panel.open { transform: translateX(0); } .detail-panel-header { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--col-border); gap: var(--sp-4); flex-shrink: 0; } .detail-panel-title { font-family: var(--font-ui); font-size: var(--text-md); font-weight: 600; letter-spacing: 0; margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .detail-panel-body { flex: 1; overflow-y: auto; padding: var(--sp-5); } .detail-panel-footer { padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--col-border); display: flex; gap: var(--sp-3); flex-shrink: 0; } /* Tabs within detail panel */ .detail-tabs { display: flex; border-bottom: 1px solid var(--col-border); margin: calc(-1 * var(--sp-5)) calc(-1 * var(--sp-5)) var(--sp-5); padding: 0 var(--sp-5); overflow-x: auto; } .detail-tab { padding: var(--sp-3) var(--sp-4); font-size: var(--text-sm); font-weight: 500; color: var(--col-text-muted); border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; transition: color var(--t-fast), border-color var(--t-fast); } .detail-tab:hover { color: var(--col-text); } .detail-tab.active { color: var(--col-accent); border-bottom-color: var(--col-accent); } /* ── Relation pills ──────────────────────────────────────────── */ .relation-pills { display: flex; flex-wrap: wrap; gap: var(--sp-2); } .relation-pill { display: inline-flex; align-items: center; gap: var(--sp-1); padding: var(--sp-1) var(--sp-3); background: var(--col-accent-light); color: var(--col-accent); border-radius: var(--r-pill); font-size: var(--text-xs); font-weight: 500; cursor: pointer; transition: background var(--t-fast); } .relation-pill:hover { background: #d0dffa; } /* ── Empty states ────────────────────────────────────────────── */ .empty-state { text-align: center; padding: var(--sp-12) var(--sp-8); color: var(--col-text-muted); } .empty-state-icon { font-size: 2.5rem; margin-bottom: var(--sp-4); opacity: 0.4; } .empty-state-title { font-size: var(--text-md); font-weight: 600; color: var(--col-text); margin-bottom: var(--sp-2); } .empty-state-desc { font-size: var(--text-sm); max-width: 360px; margin: 0 auto var(--sp-5); line-height: 1.6; } /* ── Variance colours ────────────────────────────────────────── */ .variance-positive { color: var(--col-success); font-family: var(--font-ui); font-variant-numeric: tabular-nums lining-nums; } .variance-negative { color: var(--col-danger); font-family: var(--font-ui); font-variant-numeric: tabular-nums lining-nums; } .variance-neutral { color: var(--col-text-muted); font-family: var(--font-ui); font-variant-numeric: tabular-nums lining-nums; } /* ── Numeric / tabular data ──────────────────────────────────── */ .mono { font-family: var(--font-ui); font-variant-numeric: tabular-nums lining-nums; } /* ── Toast notifications ─────────────────────────────────────── */ .toast { position: fixed; bottom: var(--sp-6); right: var(--sp-6); z-index: 9999; padding: var(--sp-3) var(--sp-5); border-radius: var(--r-md); font-size: var(--text-sm); font-weight: 500; box-shadow: var(--shadow-md); opacity: 0; transform: translateY(8px); transition: opacity var(--t-base), transform var(--t-base); pointer-events: none; max-width: 340px; } .toast-visible { opacity: 1; transform: translateY(0); } .toast-info { background: var(--col-nav-bg); color: var(--col-nav-text); } .toast-success { background: var(--col-success); color: #fff; } .toast-warning { background: var(--col-warning); color: #1a1400; } .toast-error { background: var(--col-danger); color: #fff; } /* ── Loading states ──────────────────────────────────────────── */ [aria-busy="true"] { position: relative; pointer-events: none; } [aria-busy="true"]::after { content: ''; position: absolute; inset: 0; background: rgba(255,255,255,0.6); border-radius: inherit; } /* ── Saved flash ─────────────────────────────────────────────── */ .saved { animation: flash-saved 1.8s ease forwards; } @keyframes flash-saved { 0% { background: var(--col-success-light); } 60% { background: var(--col-success-light); } 100% { background: transparent; } } /* ── Confirm dialog overlay ──────────────────────────────────── */ .dialog-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 300; display: flex; align-items: center; justify-content: center; padding: var(--sp-6); } .dialog { background: var(--col-surface); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); width: 100%; max-width: 440px; padding: var(--sp-6); } .dialog-title { font-size: var(--text-md); font-weight: 600; margin-bottom: var(--sp-3); } .dialog-body { font-size: var(--text-base); color: var(--col-text-muted); margin-bottom: var(--sp-5); line-height: 1.6; } .dialog-actions { display: flex; justify-content: flex-end; gap: var(--sp-3); } /* ── Section headers ─────────────────────────────────────────── */ .section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-4); gap: var(--sp-4); } .section-title { font-size: var(--text-base); font-weight: 600; margin: 0; color: var(--col-text); } /* ── Search / filter bar ─────────────────────────────────────── */ .filter-bar { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-5); } .search-input { flex: 1; min-width: 200px; max-width: 360px; } /* ── Dividers ────────────────────────────────────────────────── */ .divider { height: 1px; background: var(--col-border); margin: var(--sp-5) 0; } /* ── Utility ─────────────────────────────────────────────────── */ .text-muted { color: var(--col-text-muted); } .text-faint { color: var(--col-text-faint); } .text-success { color: var(--col-success); } .text-danger { color: var(--col-danger); } .text-warning { color: #8a5c00; } .text-sm { font-size: var(--text-sm); } .text-xs { font-size: var(--text-xs); } .text-right { text-align: right; } .text-center { text-align: center; } .fw-600 { font-weight: 600; } .fw-500 { font-weight: 500; } .flex { display: flex; } .flex-center { display: flex; align-items: center; } .flex-between { display: flex; align-items: center; justify-content: space-between; } .gap-2 { gap: var(--sp-2); } .gap-3 { gap: var(--sp-3); } .gap-4 { gap: var(--sp-4); } .mt-2 { margin-top: var(--sp-2); } .mt-4 { margin-top: var(--sp-4); } .mt-6 { margin-top: var(--sp-6); } .mb-2 { margin-bottom: var(--sp-2); } .mb-4 { margin-bottom: var(--sp-4); } .mb-6 { margin-bottom: var(--sp-6); } [hidden] { display: none !important; } /* ── Scrollbars ──────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--col-border-strong); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--col-text-faint); } /* ── Responsive ──────────────────────────────────────────────── */ @media (max-width: 900px) { :root { --nav-width: 180px; } .page-body { padding: var(--sp-5); } .page-header { padding: var(--sp-4) var(--sp-5); } } @media (max-width: 640px) { .app-nav { display: none; } /* Mobile: collapse nav — not a v1 priority */ .app-main { margin-left: 0; } } /* ============================================================ SCHEDULE PAGE — schedule-specific components ============================================================ */ /* ── Stats bar ───────────────────────────────────────────── */ #statsBar { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-2) var(--sp-4); background: var(--col-surface); border: 1px solid var(--col-border); border-radius: var(--r-md); font-size: var(--text-sm); flex-wrap: wrap; } .stat-item { display: flex; align-items: center; gap: var(--sp-1); } .stat-value { font-weight: 600; font-family: var(--font-ui); font-variant-numeric: tabular-nums; } .stat-clashes { color: var(--col-danger); font-weight: 600; } /* ── Schedule toolbar ────────────────────────────────────── */ .schedule-toolbar { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; } .schedule-toolbar select { width: auto; min-width: 120px; font-size: var(--text-sm); padding: var(--sp-1) var(--sp-3); } /* ── View toggle ─────────────────────────────────────────── */ .view-toggle { display: flex; border: 1px solid var(--col-border-strong); border-radius: var(--r-md); overflow: hidden; flex-shrink: 0; } .view-toggle-btn { padding: var(--sp-1) var(--sp-4); font-size: var(--text-sm); font-weight: 500; font-family: var(--font-ui); background: var(--col-surface); color: var(--col-text-muted); border: none; border-right: 1px solid var(--col-border); cursor: pointer; transition: background var(--t-fast), color var(--t-fast); } .view-toggle-btn:last-child { border-right: none; } .view-toggle-btn:hover { background: var(--col-surface-alt); color: var(--col-text); } .view-toggle-btn.active { background: var(--col-accent-light); color: var(--col-text); font-weight: 600; } /* ── Day nav ─────────────────────────────────────────────── */ .day-nav { display: flex; gap: var(--sp-1); flex-wrap: wrap; } .day-pill { padding: var(--sp-1) var(--sp-3); font-size: var(--text-xs); font-weight: 500; font-family: var(--font-ui); background: var(--col-surface); border: 1px solid var(--col-border); border-radius: var(--r-pill); cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast); white-space: nowrap; color: var(--col-text-muted); } .day-pill:hover { background: var(--col-surface-alt); color: var(--col-text); } .day-pill.active { background: transparent; border-color: var(--col-accent); color: var(--col-text); font-weight: 600; } /* ── Schedule legend ─────────────────────────────────────── */ .schedule-legend { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; font-size: var(--text-xs); color: var(--col-text-muted); min-height: 22px; } .legend-item { display: inline-flex; align-items: center; gap: var(--sp-1); white-space: nowrap; } .legend-swatch { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; } /* ── Clash banner ────────────────────────────────────────── */ #clashBanner { display: none; padding: var(--sp-2) var(--sp-4); background: var(--col-danger-light); border: 1px solid var(--col-danger); border-radius: var(--r-md); font-size: var(--text-sm); color: var(--col-danger); font-weight: 500; } #clashBanner.visible { display: block; } /* ── Daily grid ──────────────────────────────────────────── */ .daily-zoom-bar { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) 0; font-size: var(--text-sm); color: var(--col-text-muted); flex-shrink: 0; } .daily-zoom-bar input[type="range"] { width: 120px; padding: 0; border: none; background: none; box-shadow: none; } .daily-outer { display: flex; flex-direction: column; flex: 1; overflow: hidden; border: 1px solid var(--col-border); border-radius: var(--r-md); background: var(--col-surface); } .daily-header-outer { display: flex; flex-shrink: 0; border-bottom: 2px solid var(--col-border); background: var(--col-surface); position: sticky; top: 0; z-index: 10; } .daily-time-spacer { width: 52px; flex-shrink: 0; border-right: 1px solid var(--col-border); } .daily-header-scroll { flex: 1; overflow: hidden; } .daily-header-row { display: flex; min-width: max-content; } .daily-venue-hdr { flex: 0 0 140px; width: 140px; padding: var(--sp-2) var(--sp-3); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--col-text-muted); border-right: 1px solid var(--col-border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; } .daily-city-group { display: flex; flex-direction: column; border-right: 2px solid var(--col-border-strong); } .daily-city-label { padding: 2px var(--sp-3); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--col-text-faint); background: var(--col-surface-alt); text-align: center; border-bottom: 1px solid var(--col-border); } .daily-city-venues { display: flex; flex: 1; } .daily-hscroll-bar { overflow-x: scroll; overflow-y: hidden; height: 12px; flex-shrink: 0; border-bottom: 1px solid var(--col-border); } .daily-hscroll-inner { height: 1px; } .daily-body-row { display: flex; flex: 1; overflow: hidden; } .daily-time-col { width: 52px; flex-shrink: 0; overflow: hidden; border-right: 1px solid var(--col-border); background: var(--col-surface-alt); } .daily-time-inner { position: relative; } .time-label-cell { position: absolute; left: 0; width: 100%; display: flex; align-items: flex-start; justify-content: flex-end; padding-right: var(--sp-2); box-sizing: border-box; } .daily-venue-scroll { flex: 1; overflow: auto; } .daily-grid-body { position: relative; display: flex; } .daily-venue-track { flex: 0 0 140px; width: 140px; position: relative; border-right: 1px solid var(--col-border); } .daily-slot-row { position: relative; border-top: 1px solid rgba(0,0,0,0.10); } .daily-slot-row.hour-line { border-top-color: rgba(0,0,0,0.30); border-top-width: 3px; border-top-style: solid; } .daily-slot-row.half-line { border-top-color: rgba(0,0,0,0.18); border-top-width: 2px; border-top-style: dashed; } /* ── Session blocks (daily grid) ─────────────────────────── */ .session-block { position: absolute; left: 2px; right: 2px; border-left: 3px solid; border-radius: var(--r-sm); padding: 2px 4px; cursor: pointer; overflow: hidden; z-index: 5; transition: box-shadow var(--t-fast), opacity var(--t-fast); font-size: 11px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .session-block:hover { box-shadow: var(--shadow-md); z-index: 8; } .session-block.dragging { opacity: 0.75; z-index: 20; cursor: grabbing; box-shadow: var(--shadow-lg); } .session-block.clash { outline: 2px solid var(--col-danger); outline-offset: -1px; } /* Venue track highlighted as a cross-venue drag target */ .daily-venue-track.drag-target { background: rgba(45, 107, 228, 0.07); outline: 2px dashed var(--col-accent); outline-offset: -2px; } .block-title { font-weight: 700; line-height: 1.2; overflow: hidden; white-space: normal; word-break: break-word; } .block-time { font-size: 10px; font-weight: 600; opacity: 0.8; font-family: var(--font-ui); font-variant-numeric: tabular-nums; white-space: nowrap; } .block-artist { font-size: 10px; opacity: 0.75; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .block-actions { position: absolute; top: 2px; right: 2px; display: none; gap: 2px; } .session-block:hover .block-actions { display: flex; } .block-btn { width: 16px; height: 16px; border: none; border-radius: 2px; background: rgba(0,0,0,0.15); color: inherit; font-size: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; line-height: 1; transition: background var(--t-fast); } .block-btn:hover { background: rgba(0,0,0,0.3); } .block-btn.del:hover { background: var(--col-danger); color: #fff; } .block-nonperf { font-style: italic; } .gap-pill { position: absolute; left: 0; right: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-ui); font-variant-numeric: tabular-nums; font-size: 9px; font-weight: 600; letter-spacing: 0.03em; color: var(--col-text-muted); background: repeating-linear-gradient( -45deg, rgba(0,0,0,0.028) 0px, rgba(0,0,0,0.028) 3px, transparent 3px, transparent 8px ); border-top: 1px solid var(--col-border-strong); border-bottom: 1px solid var(--col-border-strong); pointer-events: none; z-index: 6; overflow: hidden; white-space: nowrap; } .gap-pill span { background: var(--col-surface-alt); border: 1px solid var(--col-border-strong); border-radius: 10px; padding: 1px 6px; line-height: 1.4; } /* ── Multi-day timeline (weekly / overall) ───────────────── */ .mdt-zoom-bar { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) 0; font-size: var(--text-sm); color: var(--col-text-muted); flex-shrink: 0; } .mdt-zoom-bar input[type="range"] { width: 120px; padding: 0; border: none; background: none; box-shadow: none; } .mdt-header-strip { flex-shrink: 0; overflow: hidden; background: var(--col-nav-bg); } .mdt-header-strip-inner { display: flex; min-width: max-content; } .mdt-body { display: flex; flex: 1; overflow: hidden; border: 1px solid var(--col-border); border-top: none; border-radius: 0 0 var(--r-md) var(--r-md); background: var(--col-surface); } .mdt-time-col { width: 44px; flex-shrink: 0; overflow: hidden; border-right: 1px solid var(--col-border); background: var(--col-surface-alt); } .mdt-time-inner { position: relative; } .mdt-canvas-wrap { flex: 1; overflow: auto; } .mdt-canvas { position: relative; } .mdt-session-block { position: absolute; border-left: 3px solid; border-radius: 2px; overflow: hidden; cursor: pointer; z-index: 5; padding: 1px 2px; transition: box-shadow var(--t-fast); } .mdt-session-block:hover { box-shadow: var(--shadow-md); z-index: 8; } .mdt-session-block.clash { outline: 2px solid var(--col-danger); outline-offset: -1px; } /* ── List view ───────────────────────────────────────────── */ .list-header-row { display: grid; grid-template-columns: 110px 1fr 140px 90px 90px 40px; gap: var(--sp-3); padding: var(--sp-2) var(--sp-4); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--col-text-muted); border-bottom: 2px solid var(--col-border); background: var(--col-surface); position: sticky; top: 0; z-index: 5; } .list-day { margin-bottom: var(--sp-2); } .list-day-header { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-2) var(--sp-4); background: var(--col-surface-alt); border-top: 1px solid var(--col-border); border-bottom: 1px solid var(--col-border); font-size: var(--text-xs); color: var(--col-text-muted); } .list-day-date { font-weight: 700; color: var(--col-text); } .list-session-row { display: grid; grid-template-columns: 110px 1fr 140px 90px 90px 40px; gap: var(--sp-3); align-items: center; padding: var(--sp-2) var(--sp-4); border-left: 3px solid transparent; border-bottom: 1px solid var(--col-border); cursor: pointer; font-size: var(--text-sm); transition: background var(--t-fast); } .list-session-row:hover { background: var(--col-accent-light); } .list-session-row.nonperf { font-style: italic; color: var(--col-text-muted); } .list-session-row:last-child { border-bottom: none; } .list-time { font-family: var(--font-ui); font-variant-numeric: tabular-nums; font-size: var(--text-xs); color: var(--col-text-muted); white-space: nowrap; } .list-show { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .list-venue { font-size: var(--text-xs); color: var(--col-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ── List sub-tabs ───────────────────────────────────────── */ .list-subtab-bar { display: flex; gap: 0; flex-shrink: 0; border-bottom: 2px solid var(--col-border); background: var(--col-surface); padding: 0 var(--sp-4); } .list-subtab-btn { padding: var(--sp-2) var(--sp-4); font-size: var(--text-sm); font-weight: 600; font-family: var(--font-ui); background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -2px; color: var(--col-text-muted); cursor: pointer; transition: color var(--t-fast), border-color var(--t-fast); } .list-subtab-btn:hover { color: var(--col-text); } .list-subtab-btn.active { color: var(--col-accent); border-bottom-color: var(--col-accent); } /* ── Artist / Show list rows ─────────────────────────────── */ .list-header-artist { grid-template-columns: 1fr 1fr 60px 160px; } .list-header-show { grid-template-columns: 1fr 1fr 120px 60px; } .list-artist-row { display: grid; grid-template-columns: 1fr 1fr 60px 160px; gap: var(--sp-3); align-items: center; padding: var(--sp-3) var(--sp-4); background: var(--col-surface-alt); border-top: 2px solid var(--col-border); border-bottom: 1px solid var(--col-border); font-size: var(--text-sm); } .list-show-row { display: grid; grid-template-columns: 1fr 1fr 120px 60px; gap: var(--sp-3); align-items: center; padding: var(--sp-3) var(--sp-4); background: var(--col-surface-alt); border-top: 2px solid var(--col-border); border-bottom: 1px solid var(--col-border); border-left: 3px solid transparent; font-size: var(--text-sm); } .list-session-sub { padding-left: calc(var(--sp-4) + var(--sp-4)); background: var(--col-surface); } /* Sub-rows under a show group use a 4-col grid matching .list-show-row */ .list-show-row ~ .list-session-sub { grid-template-columns: 1fr 1fr 120px 60px; } /* Sub-rows under an artist group use a 4-col grid matching .list-artist-row */ .list-artist-row ~ .list-session-sub { grid-template-columns: 1fr 1fr 60px 160px; } .session-type-badge { display: inline-block; padding: 1px var(--sp-2); background: var(--col-neutral-light); color: var(--col-neutral); border-radius: var(--r-pill); font-size: var(--text-xs); font-weight: 500; text-transform: capitalize; } /* ── Session detail panel ────────────────────────────────── */ .session-status-banner { padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); margin-bottom: var(--sp-4); display: flex; align-items: center; justify-content: space-between; font-weight: 600; font-size: var(--text-sm); } .banner-confirmed { background: var(--col-success-light); color: var(--col-success); } .banner-proposed { background: var(--col-warning-light); color: #8a5c00; } .banner-cancelled { background: var(--col-danger-light); color: var(--col-danger); } .banner-held { background: var(--col-neutral-light); color: var(--col-neutral); } .nonperf-banner { background: var(--col-surface-alt); color: var(--col-text-muted); } .status-quick-select { width: auto; padding: 2px var(--sp-3); font-size: var(--text-xs); border-radius: var(--r-sm); font-weight: 500; } .detail-field-group { margin-bottom: var(--sp-4); } .detail-field-label { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--col-text-muted); margin-bottom: var(--sp-1); } /* ── Export dropdown ─────────────────────────────────────── */ .export-dropdown { position: relative; } .export-menu { display: none; position: absolute; top: calc(100% + 4px); right: 0; background: var(--col-surface); border: 1px solid var(--col-border); border-radius: var(--r-md); box-shadow: var(--shadow-md); min-width: 200px; z-index: 50; padding: var(--sp-2) 0; } .export-menu.open { display: block; } .export-menu-label { padding: var(--sp-2) var(--sp-4) var(--sp-1); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--col-text-faint); } .export-menu-item { display: block; width: 100%; text-align: left; padding: var(--sp-2) var(--sp-4); font-size: var(--text-sm); font-family: var(--font-ui); background: none; border: none; cursor: pointer; color: var(--col-text); transition: background var(--t-fast); } .export-menu-item:hover { background: var(--col-accent-light); } /* ── Modal ───────────────────────────────────────────────── */ .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 400; align-items: center; justify-content: center; padding: var(--sp-6); overflow-y: auto; } .modal-overlay.open { display: flex; } .modal-box { background: var(--col-surface); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); width: 100%; max-width: 560px; padding: var(--sp-6); margin: auto; } .modal-title { font-size: var(--text-lg); font-weight: 600; margin-bottom: var(--sp-5); letter-spacing: -0.01em; } .modal-kind-toggle { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-5); } .modal-kind-btn { flex: 1; padding: var(--sp-2) var(--sp-3); font-size: var(--text-sm); font-weight: 500; font-family: var(--font-ui); background: var(--col-surface-alt); color: var(--col-text-muted); border: 1px solid var(--col-border); border-radius: var(--r-md); cursor: pointer; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast); text-align: center; } .modal-kind-btn:hover { background: var(--col-surface); color: var(--col-text); } .modal-kind-btn.active { background: transparent; color: var(--col-text); border-color: var(--col-accent); font-weight: 600; } .modal-actions { display: flex; justify-content: flex-end; gap: var(--sp-3); margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--col-border); } .modal-hint { font-size: var(--text-xs); color: var(--col-text-muted); margin-top: var(--sp-1); } .form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); } /* ── Artist multi-select ─────────────────────────────────── */ .multi-artist-wrap { position: relative; } .artist-tag-input-wrap { display: flex; flex-wrap: wrap; gap: var(--sp-1); padding: var(--sp-1) var(--sp-2); border: 1px solid var(--col-border); border-radius: var(--r-md); background: var(--col-surface); cursor: text; min-height: 38px; align-items: center; transition: border-color var(--t-fast), box-shadow var(--t-fast); } .artist-tag-input-wrap:focus-within { border-color: var(--col-accent); box-shadow: 0 0 0 3px var(--col-accent-light); } .artist-tag-input-wrap input { border: none; padding: 2px var(--sp-1); font-size: var(--text-sm); background: none; width: 140px; min-width: 60px; box-shadow: none; } .artist-tag { display: inline-flex; align-items: center; gap: var(--sp-1); padding: 2px var(--sp-2); background: var(--col-accent-light); color: var(--col-accent); border-radius: var(--r-pill); font-size: var(--text-xs); font-weight: 500; white-space: nowrap; } .artist-tag-remove { border: none; background: none; color: inherit; cursor: pointer; padding: 0; font-size: 12px; line-height: 1; opacity: 0.7; } .artist-tag-remove:hover { opacity: 1; } .artist-dropdown { position: absolute; top: 100%; left: 0; right: 0; background: var(--col-surface); border: 1px solid var(--col-border); border-radius: var(--r-md); box-shadow: var(--shadow-md); z-index: 60; max-height: 200px; overflow-y: auto; } .artist-dropdown-item { padding: var(--sp-2) var(--sp-3); font-size: var(--text-sm); cursor: pointer; transition: background var(--t-fast); } .artist-dropdown-item:hover { background: var(--col-accent-light); } /* ── Export picker modal ─────────────────────────────────── */ .picker-search { display: block; width: 100%; margin-bottom: var(--sp-2); } .picker-select-all { font-size: var(--text-xs); color: var(--col-accent); cursor: pointer; display: block; margin-bottom: var(--sp-2); } .picker-select-all:hover { text-decoration: underline; } .picker-list { max-height: 320px; overflow-y: auto; border: 1px solid var(--col-border); border-radius: var(--r-md); margin-bottom: var(--sp-4); } .picker-item { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--col-border); cursor: pointer; font-size: var(--text-sm); transition: background var(--t-fast); } .picker-item:last-child { border-bottom: none; } .picker-item:hover { background: var(--col-accent-light); } .picker-item-label { font-weight: 500; } .picker-item-sub { font-size: var(--text-xs); color: var(--col-text-muted); } /* ── Nav bottom ──────────────────────────────────────────── */ .sync-row { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--text-xs); color: var(--col-nav-muted); margin-bottom: var(--sp-3); } .sync-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--col-text-faint); } .sync-dot.online { background: var(--col-success); box-shadow: 0 0 0 2px rgba(45,158,107,0.25); } .sync-dot.offline { background: var(--col-danger); } .nav-backup-btn { width: 100%; justify-content: center; margin-bottom: var(--sp-2); background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.15); color: var(--col-nav-text); } .nav-backup-btn:hover:not(:disabled) { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.25); } .last-backup-time { font-size: var(--text-xs); color: var(--col-nav-muted); text-align: center; }