/* ============================================================ CODAXIOM PLATFORM COCKPIT : PROPRIETARY & CONFIDENTIAL (c) 2026 Codaxiom Platform. All Rights Reserved. Unauthorized reproduction or redistribution is strictly prohibited. ============================================================ CODAXIOM UNIVERSAL DASHBOARD : DESIGN SYSTEM Theme = complete CSS custom-property palette swap via [data-theme="light|dark"] on . Default: dark. One fixed brand accent: Codaxiom teal (#0E9AA7). ============================================================ */ /* ---------- TOKENS: OKLCH DARK THEME (default) ---------- */ :root, :root[data-theme="dark"] { color-scheme: dark; /* Brand Accent: Codaxiom Teal in OKLCH */ --accent: oklch(0.62 0.14 210); --accent-strong: oklch(0.68 0.16 210); --accent-soft: oklch(0.62 0.14 210 / 0.14); --accent-soft-2: oklch(0.62 0.14 210 / 0.08); --accent-border: oklch(0.62 0.14 210 / 0.38); --accent-text: oklch(0.99 0.00 0); --accent-ink: oklch(0.25 0.04 210); /* Sovereign Teal Primary Action Button Tokens (Dark Theme) */ --btn-accent-bg: oklch(0.52 0.14 205); --btn-accent-text: #ffffff; --btn-accent-border: oklch(0.62 0.15 205 / 0.50); --btn-accent-shadow: 0 2px 10px oklch(0.52 0.14 205 / 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.22); --btn-accent-hover-bg: oklch(0.58 0.15 205); --btn-accent-hover-shadow: 0 4px 16px oklch(0.52 0.14 205 / 0.50), inset 0 1px 0 rgba(255, 255, 255, 0.30); /* Glassmorphic & Solid Elevated Surfaces */ --bg-body: oklch(0.12 0.02 240); --bg-sidebar: oklch(0.14 0.02 240 / 0.85); --bg-topbar: oklch(0.12 0.02 240 / 0.80); --bg-card: oklch(0.16 0.02 240 / 0.75); --bg-card-hover: oklch(0.20 0.03 240 / 0.85); --bg-card-sub: oklch(0.18 0.02 240 / 0.60); --bg-modal: oklch(0.18 0.02 240); --bg-panel-secondary: oklch(0.14 0.02 240); --bg-input: oklch(0.14 0.02 240 / 0.90); --bg-hover: oklch(0.22 0.03 240); --bg-overlay: oklch(0.08 0.02 240 / 0.65); --glass-blur: blur(12px); /* Text Contrast (WCAG AA Compliant) */ --text-main: oklch(0.95 0.01 240); --text-secondary: oklch(0.72 0.03 240); --text-muted: oklch(0.58 0.03 240); /* Borders & Glass Shadows */ --border-color: oklch(0.95 0.01 240 / 0.08); --border-subtle: oklch(0.95 0.01 240 / 0.08); --border-strong: oklch(0.95 0.01 240 / 0.16); --shadow-card: 0 4px 20px oklch(0.05 0.02 240 / 0.40); --shadow-pop: 0 16px 48px oklch(0.05 0.02 240 / 0.60); --shadow-accent: 0 4px 18px oklch(0.62 0.14 210 / 0.28); /* Status Colors (OKLCH) */ --status-green: oklch(0.78 0.17 160); --status-green-bg: oklch(0.78 0.17 160 / 0.13); --status-green-border: oklch(0.78 0.17 160 / 0.30); --status-amber: oklch(0.82 0.16 85); --status-amber-bg: oklch(0.82 0.16 85 / 0.13); --status-amber-border: oklch(0.82 0.16 85 / 0.30); --status-yellow: oklch(0.82 0.16 85); --status-yellow-bg: oklch(0.82 0.16 85 / 0.13); --status-yellow-border: oklch(0.82 0.16 85 / 0.30); --status-red: oklch(0.68 0.20 25); --status-red-bg: oklch(0.68 0.20 25 / 0.13); --status-red-border: oklch(0.68 0.20 25 / 0.30); --status-blue: oklch(0.72 0.15 250); --status-blue-bg: oklch(0.72 0.15 250 / 0.13); --status-blue-border: oklch(0.72 0.15 250 / 0.30); --status-purple: oklch(0.72 0.03 240); --status-purple-bg: oklch(0.72 0.03 240 / 0.13); --status-purple-border: oklch(0.72 0.03 240 / 0.30); /* Semantic Badge & Telemetry Contrast Tokens (Dark Theme) */ --badge-telemetry-bg: oklch(0.78 0.17 160 / 0.15); --badge-telemetry-text: oklch(0.78 0.17 160); --badge-telemetry-border: oklch(0.78 0.17 160 / 0.35); --badge-owner-bg: oklch(0.82 0.16 85 / 0.15); --badge-owner-text: oklch(0.82 0.16 85); --badge-owner-border: oklch(0.82 0.16 85 / 0.35); --badge-manager-bg: oklch(0.72 0.03 240 / 0.15); --badge-manager-text: oklch(0.72 0.03 240); --badge-manager-border: oklch(0.72 0.03 240 / 0.35); --badge-staff-bg: oklch(0.72 0.15 250 / 0.15); --badge-staff-text: oklch(0.72 0.15 250); --badge-staff-border: oklch(0.72 0.15 250 / 0.35); --badge-paid-bg: oklch(0.78 0.17 160 / 0.15); --badge-paid-text: oklch(0.78 0.17 160); --badge-paid-border: oklch(0.78 0.17 160 / 0.35); --badge-expired-bg: oklch(0.68 0.20 25 / 0.15); --badge-expired-text: oklch(0.68 0.20 25); --badge-expired-border: oklch(0.68 0.20 25 / 0.35); /* Chat & Elements */ --bubble-in: oklch(0.18 0.03 240); --bubble-in-border: oklch(0.95 0.01 240 / 0.08); /* Charts */ --chart-grid: oklch(0.95 0.01 240 / 0.05); /* Overview KPI Theme-Calibrated Tokens (Dark Theme: Luminescent against Dark Slate) */ --ov-teal: oklch(0.68 0.15 210); --ov-teal-soft: oklch(0.68 0.15 210 / 0.14); --ov-gold: oklch(0.80 0.16 80); --ov-gold-soft: oklch(0.80 0.16 80 / 0.14); --ov-green: oklch(0.74 0.18 155); --ov-green-soft: oklch(0.74 0.18 155 / 0.14); --ov-purple: oklch(0.72 0.18 290); --ov-purple-soft: oklch(0.72 0.18 290 / 0.14); } /* ---------- TOKENS: OKLCH LIGHT THEME ---------- */ :root[data-theme="light"], body.light-theme, html.light-theme { color-scheme: light; --accent: oklch(0.62 0.14 210); --accent-strong: oklch(0.48 0.16 210); --accent-soft: oklch(0.62 0.14 210 / 0.10); --accent-soft-2: oklch(0.62 0.14 210 / 0.05); --accent-border: oklch(0.62 0.14 210 / 0.35); --accent-text: oklch(0.99 0.00 0); --accent-ink: oklch(0.25 0.04 210); /* Sovereign Teal Primary Action Button Tokens (Light Theme) */ --btn-accent-bg: oklch(0.42 0.12 205); --btn-accent-text: #ffffff; --btn-accent-border: oklch(0.36 0.11 205); --btn-accent-shadow: 0 1px 2px oklch(0.40 0.11 205 / 0.22), 0 2px 6px oklch(0.40 0.11 205 / 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.20); --btn-accent-hover-bg: oklch(0.38 0.11 205); --btn-accent-hover-shadow: 0 3px 10px oklch(0.40 0.11 205 / 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.25); --bg-body: oklch(0.97 0.01 240); --bg-sidebar: oklch(1.00 0.00 0 / 0.90); --bg-topbar: oklch(0.97 0.01 240 / 0.82); --bg-card: oklch(1.00 0.00 0 / 0.85); --bg-card-hover: oklch(0.98 0.01 240 / 0.95); --bg-card-sub: oklch(0.965 0.008 240); --bg-modal: oklch(1.00 0.00 0); --bg-panel-secondary: oklch(0.96 0.01 240); --bg-input: oklch(0.95 0.01 240 / 0.90); --bg-hover: oklch(0.88 0.01 240); --bg-overlay: oklch(0.18 0.03 240 / 0.40); --text-main: oklch(0.18 0.03 240); --text-secondary: oklch(0.40 0.04 240); --text-muted: oklch(0.42 0.03 240); --border-color: oklch(0.18 0.03 240 / 0.09); --border-subtle: oklch(0.18 0.03 240 / 0.09); --border-strong: oklch(0.18 0.03 240 / 0.16); --shadow-card: 0 2px 10px oklch(0.18 0.03 240 / 0.06); --shadow-pop: 0 16px 48px oklch(0.18 0.03 240 / 0.15); --shadow-accent: 0 4px 14px oklch(0.62 0.14 210 / 0.30); --status-green: oklch(0.35 0.17 160); --status-green-bg: oklch(0.94 0.05 160); --status-green-border: oklch(0.62 0.17 160 / 0.40); --status-amber: oklch(0.38 0.16 85); --status-amber-bg: oklch(0.93 0.06 85); --status-amber-border: oklch(0.65 0.16 85 / 0.40); --status-yellow: oklch(0.38 0.16 85); --status-yellow-bg: oklch(0.93 0.06 85); --status-yellow-border: oklch(0.65 0.16 85 / 0.40); --status-red: oklch(0.38 0.20 25); --status-red-bg: oklch(0.94 0.05 25); --status-red-border: oklch(0.58 0.20 25 / 0.40); --status-blue: oklch(0.35 0.15 250); --status-blue-bg: oklch(0.93 0.05 250); --status-blue-border: oklch(0.58 0.15 250 / 0.40); --status-purple: oklch(0.40 0.04 240); --status-purple-bg: oklch(0.93 0.02 240); --status-purple-border: oklch(0.60 0.04 240 / 0.40); /* Semantic Badge & Telemetry Contrast Tokens (Light Theme — WCAG AA >= 4.5:1) */ --badge-telemetry-bg: oklch(0.94 0.05 160); --badge-telemetry-text: oklch(0.35 0.17 160); --badge-telemetry-border: oklch(0.62 0.17 160 / 0.40); --badge-owner-bg: oklch(0.93 0.06 85); --badge-owner-text: oklch(0.38 0.16 85); --badge-owner-border: oklch(0.65 0.16 85 / 0.40); --badge-manager-bg: oklch(0.93 0.02 240); --badge-manager-text: oklch(0.40 0.04 240); --badge-manager-border: oklch(0.60 0.04 240 / 0.40); --badge-staff-bg: oklch(0.93 0.05 250); --badge-staff-text: oklch(0.35 0.15 250); --badge-staff-border: oklch(0.58 0.15 250 / 0.40); --badge-paid-bg: oklch(0.94 0.05 160); --badge-paid-text: oklch(0.35 0.17 160); --badge-paid-border: oklch(0.62 0.17 160 / 0.40); --badge-expired-bg: oklch(0.94 0.05 25); --badge-expired-text: oklch(0.38 0.20 25); --badge-expired-border: oklch(0.58 0.20 25 / 0.40); --bubble-in: oklch(0.95 0.01 240); --bubble-in-border: oklch(0.18 0.03 240 / 0.08); --chart-grid: oklch(0.18 0.03 240 / 0.05); --chart-tick: oklch(0.40 0.04 240); --funnel-bar-text: oklch(0.18 0.03 240); /* Overview KPI Theme-Calibrated Tokens (Light Theme: Deep Architectural Ink Tones >= 5:1 Contrast) */ --ov-teal: oklch(0.38 0.12 215); --ov-teal-soft: oklch(0.38 0.12 215 / 0.10); --ov-gold: oklch(0.44 0.14 65); --ov-gold-soft: oklch(0.44 0.14 65 / 0.10); --ov-green: oklch(0.38 0.14 150); --ov-green-soft: oklch(0.38 0.14 150 / 0.10); --ov-purple: oklch(0.40 0.16 285); --ov-purple-soft: oklch(0.40 0.16 285 / 0.10); } /* Light Theme Cards, Danger Zone, and Selling Modes Contrast Polish */ :root[data-theme="light"] .dash-card, [data-theme="light"] .dash-card, body.light-theme .dash-card, html.light-theme .dash-card { background: #ffffff; border-color: oklch(0.62 0.14 210 / 0.20); box-shadow: 0 4px 16px oklch(0.18 0.03 240 / 0.04); } :root[data-theme="light"] .dash-card:hover, [data-theme="light"] .dash-card:hover, body.light-theme .dash-card:hover, html.light-theme .dash-card:hover { border-color: oklch(0.62 0.14 210 / 0.40); } /* Semantic Overview Color Utility Classes (Theme-Calibrated) */ .text-teal { color: var(--ov-teal) !important; } .text-gold { color: var(--ov-gold) !important; } .text-green { color: var(--ov-green) !important; } .text-purple { color: var(--ov-purple) !important; } .bg-teal-soft { background: var(--ov-teal-soft) !important; } .bg-gold-soft { background: var(--ov-gold-soft) !important; } .bg-green-soft { background: var(--ov-green-soft) !important; } .bg-purple-soft { background: var(--ov-purple-soft) !important; } :root[data-theme="light"] .danger-zone, [data-theme="light"] .danger-zone, body.light-theme .danger-zone, html.light-theme .danger-zone { background: oklch(0.98 0.02 25 / 0.6); border: 1px solid oklch(0.58 0.20 25 / 0.35); border-radius: var(--radius-md); } :root[data-theme="light"] .danger-zone .dash-card-title, [data-theme="light"] .danger-zone .dash-card-title, body.light-theme .danger-zone .dash-card-title, html.light-theme .danger-zone .dash-card-title { color: oklch(0.40 0.22 25); } /* Light Theme Status Pills & Badges Contrast Hardening */ :root[data-theme="light"] .badge-pill.badge-pill-neutral, :root[data-theme="light"] .pill.pill-neutral, :root[data-theme="light"] .pill-neutral, :root[data-theme="light"] .dash-tag, [data-theme="light"] .badge-pill.badge-pill-neutral, [data-theme="light"] .pill.pill-neutral, [data-theme="light"] .pill-neutral, [data-theme="light"] .dash-tag, body.light-theme .badge-pill.badge-pill-neutral, body.light-theme .dash-tag, html.light-theme .badge-pill.badge-pill-neutral, html.light-theme .dash-tag { background: oklch(0.965 0.008 240); border-color: oklch(0.18 0.03 240 / 0.14); color: oklch(0.22 0.03 240); } :root[data-theme="light"] .badge-pill.badge-pill-neutral i, :root[data-theme="light"] .pill.pill-neutral i, :root[data-theme="light"] .pill-neutral i, :root[data-theme="light"] .dash-tag i, [data-theme="light"] .badge-pill.badge-pill-neutral i, [data-theme="light"] .pill.pill-neutral i, [data-theme="light"] .pill-neutral i, [data-theme="light"] .dash-tag i, body.light-theme .badge-pill.badge-pill-neutral i, body.light-theme .dash-tag i, html.light-theme .badge-pill.badge-pill-neutral i, html.light-theme .dash-tag i { color: oklch(0.38 0.04 240); } /* Glassmorphism & Gating Utility Classes */ .mode-hidden { display: none !important; } .glass-panel, .dash-card, .kpi-card, .modal-card { backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); } /* ---------- SHARED TOKENS ---------- */ :root { --sidebar-width: 264px; --topbar-height: 64px; --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-full: 6px; --radius-round: 50%; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --font-heading: 'Albert Sans', 'Inter Display', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Monaco, Consolas, monospace; --font-brand: 'Fraunces', Georgia, serif; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-bento: cubic-bezier(0.16, 1, 0.3, 1); --t-fast: 0.14s; --t-med: 0.24s; } /* ============================================================ RESET & BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); background: var(--bg-body); color: var(--text-main); min-height: 100vh; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; transition: background var(--t-med) var(--ease-out), color var(--t-med) var(--ease-out); } a { color: inherit; text-decoration: none; } button { cursor: pointer; font-family: inherit; border: none; background: none; color: inherit; } input, select, textarea { font-family: inherit; color: inherit; } img { display: block; max-width: 100%; } ::selection { background: var(--accent-soft); } /* Scrollbars */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; border: 3px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-track { background: transparent; } /* ---------- FINE-CRAFT POLISH: TYPOGRAPHY, TABULAR NUMBERS & BENTO RHYTHM ---------- */ .tnum, .tabular-nums, [data-tabular="true"], .kpi-value, .kpi-sub, .kpi-delta, .stat-number, .metric-value, .metric-card-val, .metric-number, .metric-val, .cat-price, .cat-price-row, .catalog-bulkbar .count, .funnel-stage-count, .funnel-stage-percent, .heatmap-count, .velocity-stat-val, .nav-badge, .badge, .status-badge, .role-badge, .badge-pill, .demo-badge, .pricing-val, .order-total, .price, .amount, .total-val, .price-val, .order-price, .checkout-total, .timestamp, .time-cell, .date-cell, .ledger-time, .inquiry-time, .created-at, .updated-at, .schedule-slot-time, .voucher-code-badge, .esc-switch-btn, .pill-tab, .cockpit-tab-badge, .funnel-dropoff-badge, .pay-kpi-val, .flowchart-node-value, .flowchart-stage-count, .d3-stat-inq, .d3-stat-conv, .d3-donut-score, .chart-scrubber-tip-txt, .d3-legend-count, .dash-table td, .dash-table th, .ledger-table td, .data-table td, .table td { font-feature-settings: 'tnum' 1, 'lnum' 1; font-variant-numeric: tabular-nums; } .panel-title, .dash-card-title, .topbar-title, .empty-state-title, .modal-title, .funnel-stage-title, .schedule-slot-title, .pay-gateway-head .name, .brand-title, .section-header h2 { font-family: var(--font-heading); letter-spacing: -0.02em; } /* Sovereign Brand Anchor Lock (Fraunces Display Serif) */ .sidebar-logo-text, .login-logo-text { font-family: var(--font-brand) !important; font-weight: 700; letter-spacing: -0.02em; } .dash-card, .kpi-card, .glass-panel, .modal-card { border-radius: var(--radius-md); transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease; } .kpi-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-card); } .btn { border-radius: var(--radius-sm); transition: background-color 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease, filter 0.16s ease; } .btn:hover { filter: brightness(1.06); } .btn:active { transform: scale(0.98); } .heatmap-cell { border: 1px solid var(--border-color); border-radius: var(--radius-xs); transition: transform 0.2s var(--ease-bento), border-color 0.2s var(--ease-bento), box-shadow 0.2s var(--ease-bento); } .heatmap-cell:hover { border-color: var(--accent-border); transform: scale(1.06); z-index: 2; } .ledger-table tbody tr { transition: background-color 0.2s var(--ease-bento); } .ledger-table tbody tr:hover { background-color: var(--accent-soft-2); } /* ============================================================ SIDEBAR ============================================================ */ .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-width); background: var(--bg-sidebar); border-right: 1px solid var(--border-color); display: flex; flex-direction: column; z-index: 100; transition: transform 0.3s var(--ease-out), background var(--t-med) var(--ease-out); } .sidebar-logo { padding: 1.125rem 1.25rem; display: flex; align-items: center; gap: 0.75rem; min-height: var(--topbar-height); } .sidebar-logo-icon { width: 34px; height: 34px; background: var(--accent); border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: var(--shadow-accent); } .sidebar-logo-icon svg { width: 18px; height: 18px; color: var(--accent-ink); } .sidebar-logo-text { font-family: var(--font-brand) !important; font-weight: 700; font-size: 0.9375rem; letter-spacing: -0.02em; line-height: 1.15; } .sidebar-logo-sub { font-size: 0.625rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.10em; font-weight: 600; margin-top: 1px; } .sidebar-nav { flex: 1; padding: 0.75rem 0.75rem 1rem; overflow-y: auto; } .nav-group { display: flex; flex-direction: column; margin-bottom: 2px; } .nav-item { display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem 0.625rem; margin-bottom: 1px; border-radius: var(--radius-sm); font-size: 0.8125rem; font-weight: 500; color: var(--text-secondary); transition: transform var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out); position: relative; user-select: none; cursor: pointer; } .nav-item:hover { background: var(--accent-soft-2); color: var(--text-main); } .nav-item.active { background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; } :root[data-theme="light"] .nav-item.active, body.light-theme .nav-item.active, html.light-theme .nav-item.active { color: var(--accent-strong); } .nav-icon { width: 17px; height: 17px; opacity: 0.75; flex-shrink: 0; text-align: center; } .nav-item.active .nav-icon { opacity: 1; } .nav-badge { margin-left: auto; font-size: 0.625rem; font-weight: 700; padding: 0.125rem 0.4375rem; border-radius: var(--radius-full); background: oklch(0.55 0.22 26); color: #fff; min-width: 18px; text-align: center; } .nav-chevron { margin-left: auto; font-size: 0.625rem; color: var(--text-muted); transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), color 180ms ease; } .nav-group.expanded > .nav-item .nav-chevron { transform: rotate(90deg); color: var(--accent-strong); } /* ============================================================ SUB-NAVIGATION DISCLOSURE (HYPERFRAMES & IMPECCABLE) ============================================================ */ .nav-sub-list { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 220ms cubic-bezier(0.16, 1, 0.3, 1), opacity 180ms ease, margin 220ms cubic-bezier(0.16, 1, 0.3, 1); overflow: hidden; margin-left: 1.125rem; padding-left: 0.625rem; border-left: 1px solid var(--border-color); } .nav-group.expanded > .nav-sub-list { grid-template-rows: 1fr; opacity: 1; margin-top: 0.25rem; margin-bottom: 0.375rem; } .nav-sub-list-inner { min-height: 0; display: flex; flex-direction: column; gap: 2px; } .nav-sub-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--text-muted); border-radius: var(--radius-sm); text-decoration: none; cursor: pointer; transition: background var(--t-fast) ease, color var(--t-fast) ease; user-select: none; } .nav-sub-item:hover { color: var(--text-main); background: var(--accent-soft-2); } .nav-sub-item.active { color: var(--accent-strong); font-weight: 600; background: var(--accent-soft); } .nav-sub-dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: 0.45; flex-shrink: 0; transition: transform var(--t-fast) ease, opacity var(--t-fast) ease; } .nav-sub-item:hover .nav-sub-dot { opacity: 0.8; } .nav-sub-item.active .nav-sub-dot { opacity: 1; background: var(--accent); transform: scale(1.25); } @media (prefers-reduced-motion: reduce) { .nav-sub-list, .nav-chevron { transition: none !important; } } .sidebar-footer { padding: 0.875rem 1.25rem; border-top: 1px solid var(--border-color); display: flex; align-items: center; gap: 0.625rem; } .sidebar-avatar { width: 32px; height: 32px; border-radius: var(--radius-round, 50%); background: var(--accent-soft); border: 1.5px solid var(--accent-border); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.6875rem; color: var(--accent-strong); font-family: var(--font-heading); flex-shrink: 0; } .sidebar-user-name { font-size: 0.75rem; font-weight: 600; max-width: 130px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar-user-role { font-size: 0.625rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; } .sidebar-logout { margin-left: auto; width: 30px; height: 30px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; transition: background var(--t-fast); flex-shrink: 0; } .sidebar-logout:hover { background: var(--status-red-bg); } .sidebar-logout svg { width: 15px; height: 15px; color: var(--status-red); } .sidebar-overlay { display: none; position: fixed; inset: 0; background: var(--bg-overlay); backdrop-filter: blur(2px); z-index: 99; opacity: 0; transition: opacity var(--t-med); } .sidebar-overlay.active { display: block; opacity: 1; } /* ============================================================ MAIN / TOPBAR ============================================================ */ .main { margin-left: var(--sidebar-width); min-height: 100vh; display: flex; flex-direction: column; } .topbar { height: var(--topbar-height); border-bottom: 1px solid var(--border-color); display: flex; align-items: center; padding: 0 1.5rem; gap: 0.75rem; background: var(--bg-topbar); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 50; } .topbar-hamburger { display: none; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: var(--radius-sm); transition: background var(--t-fast); } .topbar-hamburger:hover { background: var(--accent-soft-2); } .topbar-hamburger svg { width: 20px; height: 20px; } .topbar-title { font-family: var(--font-heading); font-size: 1rem; font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .topbar-spacer { margin-left: auto; } .demo-badge { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--status-amber); background: var(--status-amber-bg); border: 1px solid transparent; padding: 0.3rem 0.625rem; border-radius: var(--radius-full); } .demo-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--status-amber); animation: pulse-dot 1.6s infinite; } @keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } .demo-cockpit-banner { background: rgba(245, 158, 11, 0.12); border-bottom: 1px solid rgba(245, 158, 11, 0.25); color: #f59e0b; padding: 0.5rem 1.25rem; font-size: 0.8125rem; font-weight: 600; display: flex; align-items: center; gap: 0.625rem; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); z-index: 99; } .demo-cockpit-banner .demo-banner-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--status-amber); animation: pulse-dot 1.6s infinite; } .icon-btn { width: 36px; height: 36px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; color: var(--text-secondary); border: 1px solid transparent; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast); flex-shrink: 0; } .icon-btn:hover { background: var(--accent-soft-2); color: var(--text-main); } .icon-btn svg { width: 18px; height: 18px; } /* Theme toggle */ .theme-toggle { position: relative; } .theme-toggle .icon-sun, .theme-toggle .icon-moon { transition: opacity var(--t-fast), transform var(--t-fast); } :root[data-theme="dark"] .theme-toggle .icon-moon, :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; } :root[data-theme="dark"] .theme-toggle .icon-sun, :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: inline-flex; } :root[data-theme="light"] .theme-toggle .icon-sun, [data-theme="light"] .theme-toggle .icon-sun, body.light-theme .theme-toggle .icon-sun, html.light-theme .theme-toggle .icon-sun { display: none; } :root[data-theme="light"] .theme-toggle .icon-moon, [data-theme="light"] .theme-toggle .icon-moon, body.light-theme .theme-toggle .icon-moon, html.light-theme .theme-toggle .icon-moon { display: inline-flex; } /* ============================================================ CONTENT & PANELS ============================================================ */ .content { flex: 1; padding: 1.75rem 1.75rem 3rem; width: 100%; max-width: 1360px; margin: 0 auto; } .panel { display: none; } .panel.active { display: block; animation: panel-in 0.15s ease-out; } @keyframes panel-in { from { opacity: 0; } to { opacity: 1; } } .panel-header { margin-bottom: 1.375rem; display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .panel-title { font-family: var(--font-heading); font-size: 1.375rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 0.25rem; } .panel-subtitle { font-size: 0.8125rem; color: var(--text-muted); max-width: 640px; line-height: 1.5; } .panel-header-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; } /* ============================================================ CARDS & KPIs ============================================================ */ .dash-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 1.25rem; margin-bottom: 1rem; box-shadow: var(--shadow-card); transition: border-color var(--t-fast) var(--ease-out), background-color var(--t-med) var(--ease-out), box-shadow var(--t-fast) var(--ease-out); } .dash-card:hover { border-color: var(--border-strong); } .dash-card-title { font-family: var(--font-heading); font-size: 0.875rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 1rem; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; } .dash-card-title .hint { font-size: 0.6875rem; font-weight: 500; color: var(--text-muted); } .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1.25rem; } /* Overview 4-KPI law (PRD 16.1): extras are a collapsed second row */ .kpi-grid .kpi-extra { display: none; } .kpi-grid.show-extras .kpi-extra { display: block; } .kpi-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 1.125rem 1.25rem; box-shadow: var(--shadow-card); transition: border-color var(--t-fast); position: relative; overflow: hidden; } .kpi-card:hover { border-color: var(--border-strong); } .kpi-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--accent), transparent 60%); opacity: 0; transition: opacity var(--t-fast); } .kpi-card:hover::after { opacity: 1; } .kpi-label { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.375rem; } .kpi-value { font-family: var(--font-body); font-feature-settings: 'tnum' 1, 'lnum' 1; font-variant-numeric: tabular-nums; font-size: 1.625rem; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; } .kpi-sub { font-size: 0.6875rem; color: var(--text-muted); margin-top: 0.375rem; line-height: 1.4; } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .grid-2 .dash-card { margin-bottom: 0; } @media (max-width: 1024px) { .grid-2 { grid-template-columns: 1fr; } .grid-2 .dash-card { margin-bottom: 1rem; } } @media (max-width: 768px) { .panel-header { flex-direction: column; align-items: flex-start; gap: 0.75rem; } .panel-header-actions { width: 100%; justify-content: space-between; } .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0.75rem; } .kpi-card { padding: 0.875rem 1rem; } .kpi-value { font-size: 1.375rem; } .quick-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; } .quick-actions .btn-dash { flex: 1 1 calc(50% - 0.5rem); justify-content: center; font-size: 0.75rem; padding: 0.5rem 0.625rem; } } @media (max-width: 480px) { .kpi-grid { grid-template-columns: 1fr !important; gap: 0.625rem; } .quick-actions .btn-dash { flex: 1 1 100%; } .panel-header-actions { flex-direction: column; align-items: stretch; gap: 0.5rem; } .overview-reception-badge { justify-content: center; } } /* ============================================================ TABLES ============================================================ */ .dash-table-wrap { overflow-x: auto; border-radius: var(--radius-sm); } .dash-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; min-width: 560px; } .dash-table th { text-align: left; padding: 0.625rem 0.875rem; font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); border-bottom: 1px solid var(--border-color); white-space: nowrap; } .dash-table td { padding: 0.75rem 0.875rem; border-bottom: 1px solid var(--border-color); vertical-align: middle; } .dash-table tbody tr { transition: background var(--t-fast); } .dash-table tbody tr:hover { background: var(--accent-soft-2); } .dash-table tbody tr:last-child td { border-bottom: none; } /* ============================================================ PILLS / BADGES / BUTTONS / FORMS ============================================================ */ .badge-pill, .pill, .dash-tag { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.6875rem; font-weight: 600; padding: 0.1875rem 0.5rem; border-radius: var(--radius-xs, 4px); letter-spacing: 0.01em; white-space: nowrap; line-height: 1.25; background: var(--bg-card-sub, rgba(255, 255, 255, 0.04)); border: 1px solid var(--border-color); color: var(--text-main); box-shadow: none; transition: background-color var(--t-fast, 0.15s) ease, border-color var(--t-fast, 0.15s) ease, color var(--t-fast, 0.15s) ease; } .badge-pill.badge-pill-blue, .pill.pill-blue, .pill-blue { background: var(--status-blue-bg); border-color: var(--status-blue-border); color: var(--status-blue); } .badge-pill.badge-pill-amber, .pill.pill-amber, .pill-amber { background: var(--status-amber-bg); border-color: var(--status-amber-border); color: var(--status-amber); } .badge-pill.badge-pill-green, .pill.pill-green, .pill-green { background: var(--status-green-bg); border-color: var(--status-green-border); color: var(--status-green); } .badge-pill.badge-pill-red, .pill.pill-red, .pill-red { background: var(--status-red-bg); border-color: var(--status-red-border); color: var(--status-red); } .badge-pill.badge-pill-purple, .pill.pill-purple, .pill-purple { background: var(--status-purple-bg); border-color: var(--status-purple-border); color: var(--text-secondary); } .badge-pill.badge-pill-neutral, .pill.pill-neutral, .pill-neutral { background: var(--bg-card-sub, rgba(255, 255, 255, 0.04)); border-color: var(--border-color); color: var(--text-secondary); } .badge-pill.badge-pill-blue i, .pill.pill-blue i, .pill-blue i { color: var(--status-blue); } .badge-pill.badge-pill-amber i, .pill.pill-amber i, .pill-amber i { color: var(--status-amber); } .badge-pill.badge-pill-green i, .pill.pill-green i, .pill-green i { color: var(--status-green); } .badge-pill.badge-pill-red i, .pill.pill-red i, .pill-red i { color: var(--status-red); } .badge-pill.badge-pill-purple i, .pill.pill-purple i, .pill-purple i { color: var(--status-purple); } .badge-pill.badge-pill-neutral i, .pill.pill-neutral i, .pill-neutral i { color: var(--text-muted); } .btn, .btn-dash { display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; padding: 0.5rem 0.9375rem; border-radius: var(--radius-sm); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; transition: background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), opacity var(--t-fast) var(--ease-out), filter var(--t-fast) var(--ease-out); border: 1px solid transparent; white-space: nowrap; user-select: none; cursor: pointer; } .btn:active, .btn-dash:active { transform: translateY(1px) scale(0.98); } .btn:focus-visible, .btn-dash:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .btn:disabled, .btn-dash:disabled { opacity: 0.55; cursor: not-allowed; transform: none !important; } /* Primary Action Button (Neo Kinpaku Sovereign Teal CTA) */ .btn-accent { background: var(--btn-accent-bg); color: var(--btn-accent-text) !important; border: 1px solid var(--btn-accent-border); box-shadow: var(--btn-accent-shadow); } .btn-accent:hover { background: var(--btn-accent-hover-bg) !important; color: var(--btn-accent-text) !important; box-shadow: var(--btn-accent-hover-shadow) !important; transform: translateY(-1px); filter: none; } .btn-accent i, .btn-accent [class*="fa-"] { color: inherit !important; } .btn-outline { background: transparent; border-color: var(--border-color); color: var(--text-secondary); } .btn-outline:hover { border-color: var(--border-strong); color: var(--text-main); background: var(--accent-soft-2); } .btn-danger-outline { background: transparent; border-color: var(--status-red-bg); color: var(--status-red); } .btn-danger-outline:hover { background: var(--status-red-bg); } .btn-danger { background: var(--status-red); border-color: var(--status-red); color: #ffffff; box-shadow: 0 1px 2px oklch(0.68 0.20 25 / 0.20); } .btn-danger:hover { filter: brightness(1.08); background: #dc2626; border-color: #dc2626; box-shadow: 0 2px 8px oklch(0.68 0.20 25 / 0.30); } .btn-danger:active { transform: translateY(1px) scale(0.98); } .btn-sm { padding: 0.3125rem 0.625rem; font-size: 0.6875rem; } .form-group { margin-bottom: 1rem; } .form-label { display: block; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 0.375rem; } .form-label .opt { text-transform: none; letter-spacing: 0; font-weight: 500; } .form-input, .form-select { width: 100%; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 0.5625rem 0.75rem; font-size: 0.8125rem; color: var(--text-main); transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-med); } .form-input:focus, .form-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); outline: none; } .form-input::placeholder { color: var(--text-muted); } .form-select { cursor: pointer; } textarea.form-input { resize: vertical; min-height: 80px; line-height: 1.55; } /* Impeccable Accessible Modern Toggle Switch */ .switch-toggle, .toggle-switch { position: relative; display: inline-flex; align-items: center; width: 42px; height: 24px; cursor: pointer; flex-shrink: 0; margin: 0; user-select: none; } .switch-toggle input[type="checkbox"], .toggle-switch input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; } .switch-slider, .toggle-slider { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--bg-hover, #cbd5e1); border: 1px solid var(--border-color, #e2e8f0); border-radius: 9999px; transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1); } .switch-slider::before, .toggle-slider::before { content: ''; position: absolute; height: 18px; width: 18px; left: 2px; top: 2px; background-color: #ffffff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.08); transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1); } .switch-toggle input:checked + .switch-slider, .toggle-switch input:checked + .toggle-slider, .switch-toggle input:checked + .toggle-slider, .toggle-switch input:checked + .switch-slider { background: var(--accent); border-color: var(--accent); } .switch-toggle input:checked + .switch-slider::before, .toggle-switch input:checked + .toggle-slider::before, .switch-toggle input:checked + .toggle-slider::before, .toggle-switch input:checked + .switch-slider::before { transform: translateX(18px); } .switch-toggle input:focus-visible + .switch-slider, .toggle-switch input:focus-visible + .toggle-slider { outline: 2px solid var(--accent); outline-offset: 2px; } /* Legacy toggle-switch without child input checkbox */ .toggle-switch:not(:has(input)) { background: var(--bg-input); border: 1px solid var(--border-strong); border-radius: 12px; transition: background var(--t-med), border-color var(--t-med); } .toggle-switch:not(:has(input)).on { background: var(--accent); border-color: var(--accent); } .toggle-switch:not(:has(input))::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; background: #fff; border-radius: 50%; transition: transform var(--t-med) var(--ease-out); box-shadow: var(--shadow-card); } .toggle-switch:not(:has(input)).on::after { transform: translateX(18px); } /* ============================================================ EMPTY STATES — honest, designed ============================================================ */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2.75rem 1.5rem; border: 1px dashed var(--border-strong); border-radius: var(--radius-md); background: var(--accent-soft-2); } .empty-state-icon { width: 52px; height: 52px; border-radius: var(--radius-full); background: var(--bg-card); border: 1px solid var(--border-color); display: flex; align-items: center; justify-content: center; margin-bottom: 0.875rem; color: var(--accent); } .empty-state-icon svg { width: 24px; height: 24px; } .empty-state-icon i { font-size: 24px; } .empty-state-title { font-family: var(--font-heading); font-weight: 700; font-size: 0.9375rem; letter-spacing: -0.02em; margin-bottom: 0.375rem; } .empty-state-desc { font-size: 0.75rem; color: var(--text-muted); max-width: 380px; line-height: 1.6; } .empty-state .btn-dash { margin-top: 0.875rem; } /* ============================================================ CHAT v2 — Live Agent Cockpit (Impeccable Zero-Scroll Law) ============================================================ */ body.panel-live-chat-active { overflow: hidden !important; height: 100vh !important; } body.panel-live-chat-active .main { height: 100vh !important; max-height: 100vh !important; overflow: hidden !important; } body.panel-live-chat-active .content { height: calc(100vh - var(--topbar-height, 56px)) !important; max-height: calc(100vh - var(--topbar-height, 56px)) !important; padding: 1rem 1.75rem 1.25rem !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; } #panel-live-chat.panel.active { display: flex !important; flex-direction: column !important; flex: 1 !important; min-height: 0 !important; height: 100% !important; overflow: hidden !important; } #panel-live-chat .panel-header { flex-shrink: 0 !important; margin-bottom: 0.75rem !important; } .chat-layout { display: grid; grid-template-columns: 340px 1fr; gap: 1rem; flex: 1; min-height: 0; height: 100%; overflow: hidden; position: relative; } /* --- COLUMN 1: INBOX PANE --- */ .chat-inbox-card { display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: hidden; padding: 1rem; margin-bottom: 0; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); box-shadow: var(--shadow-card); } .chat-inbox-header { flex-shrink: 0; margin-bottom: 0.75rem; } .chat-search-wrap { position: relative; display: flex; align-items: center; width: 100%; } .chat-search-icon { position: absolute; left: 0.75rem; color: var(--text-muted); font-size: 0.8125rem; pointer-events: none; } .chat-search-input { width: 100%; padding: 0.45rem 2.2rem 0.45rem 2.125rem !important; font-size: 0.8125rem !important; background: var(--bg-input) !important; border: 1px solid var(--border-color) !important; border-radius: var(--radius-sm) !important; color: var(--text-main) !important; transition: border-color var(--t-fast, 0.15s) ease, box-shadow var(--t-fast, 0.15s) ease; } .chat-search-input:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 2px var(--accent-soft) !important; } .chat-search-kbd { position: absolute; right: 0.65rem; font-size: 0.6875rem; color: var(--text-muted); background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 4px; padding: 0.05rem 0.35rem; pointer-events: none; line-height: 1.2; } .chat-search-clear { position: absolute; right: 0.5rem; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; background: rgba(255, 255, 255, 0.08); border: none; border-radius: 50%; color: var(--text-muted); font-size: 0.6875rem; cursor: pointer; padding: 0; transition: all 0.15s ease; } .chat-search-clear:hover { color: var(--text-main); background: rgba(255, 255, 255, 0.18); } .chat-inbox-filter-tabs { flex-shrink: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; margin-bottom: 0.75rem; padding: 3px; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-sm, 8px); overflow: hidden; /* Zero horizontal scroll */ box-sizing: border-box; } .chat-inbox-filter-tabs .pill-tab { display: inline-flex; align-items: center; justify-content: center; gap: 0.25rem; padding: 0.35rem 0.2rem; font-size: 0.6875rem; font-weight: 600; border-radius: 6px; color: var(--text-muted); border: none; background: transparent; white-space: nowrap; cursor: pointer; min-width: 0; transition: background 0.16s var(--ease-out, ease), color 0.16s var(--ease-out, ease), box-shadow 0.16s var(--ease-out, ease); line-height: 1.2; } .chat-inbox-filter-tabs .pill-tab:hover { color: var(--text-main); } .chat-inbox-filter-tabs .pill-tab.active { background: var(--bg-card); color: var(--text-main); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16); } .chat-tab-badge { display: inline-flex; align-items: center; justify-content: center; font-size: 0.5625rem; font-weight: 700; padding: 0.05rem 0.3rem; border-radius: 3px; background: var(--status-amber-bg, rgba(245, 158, 11, 0.15)); color: var(--status-amber, #f59e0b); border: 1px solid var(--status-amber-border, rgba(245, 158, 11, 0.3)); line-height: 1; min-width: 14px; height: 14px; } .chat-inbox-meta-footer { text-align: center; padding: 0.5rem 0.25rem; font-size: 0.6875rem; color: var(--text-muted); border-top: 1px dashed var(--border-color); margin-top: 0.5rem; letter-spacing: 0.01em; } .chat-inbox-more-wrap { text-align: center; padding: 0.5rem 0 0.25rem; } .chat-inbox-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 0.375rem; padding-right: 2px; } .chat-inbox-item { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.6875rem 0.75rem; border-radius: var(--radius-sm); border: 1px solid var(--border-color); background: var(--bg-input); cursor: pointer; transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1); position: relative; } .chat-inbox-item:hover { border-color: var(--border-strong); background: var(--bg-card-hover, var(--bg-input)); transform: translateY(-1px); } .chat-inbox-item.active { border-color: var(--accent); /* Impeccable ban (2026-08-31): side-stripe accents removed — selected state rides on border-color + background, never a left stripe. */ background: var(--accent-soft-2, rgba(14, 154, 167, 0.12)); } .chat-inbox-item.active .chat-inbox-avatar { background: var(--accent); color: #ffffff; border-color: var(--accent); } .chat-inbox-item.unread { font-weight: 600; } .chat-inbox-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--bg-card); border: 1px solid var(--border-color); display: flex; align-items: center; justify-content: center; font-size: 0.8125rem; color: var(--text-secondary); font-weight: 700; flex-shrink: 0; } .chat-inbox-info { flex: 1; min-width: 0; } .chat-inbox-top-row { display: flex; justify-content: space-between; align-items: center; gap: 0.375rem; margin-bottom: 0.1875rem; } .chat-inbox-name { font-weight: 600; font-size: 0.8125rem; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chat-inbox-time { font-size: 0.6875rem; color: var(--text-muted); white-space: nowrap; font-family: var(--font-mono, monospace); } .chat-inbox-preview-row { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; } .chat-inbox-preview { font-size: 0.75rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; } .chat-inbox-badge-wrap { display: flex; align-items: center; gap: 0.25rem; flex-shrink: 0; } .chat-unread-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); } /* --- COLUMN 2: ACTIVE CONVERSATION THREAD --- */ .chat-thread-card { display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: hidden; padding: 0.875rem 1.125rem; margin-bottom: 0; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); box-shadow: var(--shadow-card); } .chat-thread-header { flex-shrink: 0; display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border-color); margin-bottom: 0.625rem; } .chat-customer-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; } .chat-header-title { font-weight: 700; font-size: 0.9375rem; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.01em; } .chat-header-status { font-size: 0.75rem; color: var(--text-muted); display: flex; align-items: center; margin-top: 0.125rem; } .chat-canvas-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; background: #0b141a; /* Authentic WhatsApp dark canvas */ border-radius: var(--radius-sm); border: 1px solid var(--border-color); overflow: hidden; position: relative; } :root[data-theme="light"] .chat-canvas-wrap, body.light-theme .chat-canvas-wrap, html.light-theme .chat-canvas-wrap { background: #efeae2; /* Authentic WhatsApp light parchment canvas */ } .chat-thread-messages { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 0.75rem; padding: 1rem 1.25rem; -webkit-overflow-scrolling: touch; } /* WhatsApp Authenticity: Message Bubbles */ .chat-date-divider { align-self: center; padding: 0.25rem 0.75rem; border-radius: 999px; background: var(--bg-card); border: 1px solid var(--border-color); font-size: 0.65rem; color: var(--text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin: 0.35rem 0; box-shadow: 0 1px 3px rgba(0,0,0,0.12); } :root[data-theme="light"] .chat-date-divider, body.light-theme .chat-date-divider, html.light-theme .chat-date-divider { background: #ffffff; border-color: #e2e8f0; color: #64748b; } .chat-bubble { max-width: 72%; padding: 0.6rem 0.9rem; font-size: 0.85rem; line-height: 1.45; word-break: break-word; position: relative; box-shadow: 0 1px 2px rgba(0,0,0,0.08); } .chat-bubble.newly-arrived { animation: bubble-in 0.18s var(--ease-out); } @keyframes bubble-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } .chat-bubble-sender-pill { font-size: 0.65rem; font-weight: 700; margin-bottom: 0.25rem; display: flex; align-items: center; gap: 0.35rem; letter-spacing: 0.02em; } .chat-bubble-text { white-space: pre-wrap; color: inherit; } .chat-bubble-meta-footer { display: flex; align-items: center; justify-content: flex-end; gap: 0.3rem; font-size: 0.65rem; color: var(--text-muted); margin-top: 0.25rem; font-family: var(--font-mono, monospace); } .chat-bubble-meta-footer .fa-check-double { color: #53bdeb !important; /* Authentic WhatsApp Cyan */ } /* Inbound Customer Bubble */ .chat-bubble.in { align-self: flex-start; background: #202c33; /* Dark mode inbound */ color: #e9edef; border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 4px 14px 14px 14px; } .chat-bubble.in .chat-bubble-sender-pill { color: var(--accent); } :root[data-theme="light"] .chat-bubble.in, body.light-theme .chat-bubble.in, html.light-theme .chat-bubble.in { background: #ffffff; color: #111b21; border: 1px solid rgba(0, 0, 0, 0.06); } /* Outbound AI Receptionist (Autopilot) */ .chat-bubble.out.ai { align-self: flex-end; background: #005c4b; /* Dark mode WhatsApp green */ color: #e9edef; border: 1px solid rgba(16, 185, 129, 0.3); border-radius: 14px 4px 14px 14px; } .chat-bubble.out.ai .chat-bubble-sender-pill { color: #34d399; } .chat-bubble.out.ai .chat-bubble-meta-footer { color: rgba(233, 237, 239, 0.7); } :root[data-theme="light"] .chat-bubble.out.ai, body.light-theme .chat-bubble.out.ai, html.light-theme .chat-bubble.out.ai { background: #d9fdd3; color: #111b21; border: 1px solid rgba(16, 185, 129, 0.25); } :root[data-theme="light"] .chat-bubble.out.ai .chat-bubble-sender-pill, body.light-theme .chat-bubble.out.ai .chat-bubble-sender-pill, html.light-theme .chat-bubble.out.ai .chat-bubble-sender-pill { color: #059669; } :root[data-theme="light"] .chat-bubble.out.ai .chat-bubble-meta-footer, body.light-theme .chat-bubble.out.ai .chat-bubble-meta-footer, html.light-theme .chat-bubble.out.ai .chat-bubble-meta-footer { color: #64748b; } /* Outbound Direct Staff Assist */ .chat-bubble.out.staff { align-self: flex-end; background: #28271e; /* Dark mode staff assist warm tone */ color: #fef3c7; border: 1px solid rgba(245, 158, 11, 0.35); border-radius: 14px 4px 14px 14px; } .chat-bubble.out.staff .chat-bubble-sender-pill { color: #f59e0b; } .chat-bubble.out.staff .chat-bubble-meta-footer { color: rgba(254, 243, 199, 0.7); } :root[data-theme="light"] .chat-bubble.out.staff, body.light-theme .chat-bubble.out.staff, html.light-theme .chat-bubble.out.staff { background: #fef3c7; color: #78350f; border: 1px solid rgba(217, 119, 6, 0.25); } :root[data-theme="light"] .chat-bubble.out.staff .chat-bubble-sender-pill, body.light-theme .chat-bubble.out.staff .chat-bubble-sender-pill, html.light-theme .chat-bubble.out.staff .chat-bubble-sender-pill { color: #b45309; } :root[data-theme="light"] .chat-bubble.out.staff .chat-bubble-meta-footer, body.light-theme .chat-bubble.out.staff .chat-bubble-meta-footer, html.light-theme .chat-bubble.out.staff .chat-bubble-meta-footer { color: #92400e; } /* Audio Player Memo Component */ .chat-audio-memo { display: flex; align-items: center; gap: 0.625rem; padding: 0.375rem 0.25rem; } .chat-audio-btn { width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: var(--accent-ink, #ffffff); border: none; display: flex; align-items: center; justify-content: center; font-size: 0.8125rem; cursor: pointer; } .chat-audio-waveform { display: flex; align-items: center; gap: 2px; height: 20px; flex: 1; } .chat-audio-bar { width: 2px; background: var(--text-muted); border-radius: 1px; } .chat-audio-duration { font-size: 0.6875rem; color: var(--text-muted); font-family: var(--font-mono, monospace); } /* Quick Slash Commands Bar */ .chat-quick-actions-bar { flex-shrink: 0; padding: 0.5rem 0; border-top: 1px solid var(--border-color); margin-top: 0.5rem; } .chat-slash-pills-row { display: flex; align-items: center; gap: 0.375rem; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; -ms-overflow-style: none; } .chat-slash-pills-row::-webkit-scrollbar { display: none; } .chat-slash-pill { padding: 0.25rem 0.625rem; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 999px; font-size: 0.6875rem; font-weight: 600; color: var(--text-secondary); cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 0.25rem; transition: all 0.15s ease; } .chat-slash-pill:hover { border-color: var(--accent); color: var(--text-main); background: var(--accent-soft); transform: translateY(-1px); } .chat-canned-select { padding: 0.2rem 0.5rem !important; font-size: 0.6875rem !important; height: 26px !important; background: var(--bg-card) !important; border-radius: 999px !important; color: var(--text-secondary) !important; } /* Send Bar */ .chat-send-bar { flex-shrink: 0; margin-top: 0.375rem; } .chat-input-wrapper { display: flex; align-items: center; gap: 0.5rem; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 0.25rem 0.375rem; } .chat-attach-btn { background: none; border: none; color: var(--text-muted); font-size: 0.9375rem; padding: 0.375rem 0.5rem; cursor: pointer; border-radius: var(--radius-xs); transition: color 0.15s; } .chat-attach-btn:hover { color: var(--accent); } .chat-input-field { flex: 1; background: transparent !important; border: none !important; box-shadow: none !important; padding: 0.375rem 0.5rem !important; font-size: 0.8125rem !important; color: var(--text-main) !important; } .chat-input-field:focus { outline: none !important; box-shadow: none !important; } .chat-send-submit { padding: 0.375rem 0.875rem !important; height: 32px !important; border-radius: var(--radius-xs) !important; } /* --- COLUMN 3: CUSTOMER DOSSIER & MEMORY SIDEBAR --- */ .chat-dossier-card { display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: hidden; padding: 1rem; margin-bottom: 0; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); box-shadow: var(--shadow-card); } .chat-dossier-header { flex-shrink: 0; display: flex; justify-content: space-between; align-items: center; padding-bottom: 0.625rem; border-bottom: 1px solid var(--border-color); margin-bottom: 0.75rem; } .dossier-close-btn { display: none; background: none; border: none; color: var(--text-muted); font-size: 0.875rem; cursor: pointer; } .chat-dossier-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 0.875rem; padding-right: 2px; } .dossier-profile-box { display: flex; align-items: center; gap: 0.625rem; padding: 0.625rem 0.75rem; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-sm); } .dossier-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 1.125rem; font-weight: 700; flex-shrink: 0; } .dossier-profile-info { flex: 1; min-width: 0; } .dossier-name { font-weight: 700; font-size: 0.875rem; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dossier-phone { font-size: 0.75rem; color: var(--text-muted); } .dossier-phone-row { display: flex; align-items: center; gap: 0.375rem; margin-top: 0.125rem; } .dossier-copy-phone-btn { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; border: 1px solid var(--border-color); border-radius: var(--radius-xs); background: var(--bg-card); color: var(--text-muted); cursor: pointer; font-size: 0.6875rem; transition: all 0.15s ease; flex-shrink: 0; } .dossier-copy-phone-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); transform: scale(1.06); } .dossier-metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.375rem; } .dossier-metric-item { padding: 0.5rem 0.375rem; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-sm); text-align: center; } .dossier-metric-label { font-size: 0.625rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.125rem; } .dossier-metric-val { font-size: 0.8125rem; font-weight: 700; color: var(--text-main); } .dossier-section { display: flex; flex-direction: column; gap: 0.375rem; } .dossier-section-title { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); display: flex; align-items: center; gap: 0.375rem; } .dossier-memory-box { padding: 0.625rem; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-sm); font-size: 0.75rem; line-height: 1.45; color: var(--text-secondary); max-height: 120px; overflow-y: auto; } .dossier-history-list { display: flex; flex-direction: column; gap: 0.375rem; max-height: 140px; overflow-y: auto; } .dossier-history-item { padding: 0.45rem 0.625rem; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-xs); font-size: 0.75rem; display: flex; justify-content: space-between; align-items: center; } .dossier-notes-input { font-size: 0.75rem !important; resize: vertical; background: var(--bg-input) !important; } .btn-chat-back { display: none; } /* --- RESPONSIVE BREAKPOINTS --- */ @media (max-width: 1279px) { .chat-layout { grid-template-columns: 320px 1fr; } .chat-dossier-card { position: absolute; top: 0; right: -340px; width: 320px; height: 100%; z-index: 40; box-shadow: -4px 0 24px rgba(0, 0, 0, 0.4); transition: right 0.25s var(--ease-out); } .chat-layout.dossier-open .chat-dossier-card { right: 0; } .dossier-close-btn { display: inline-block; } } @media (max-width: 900px) { body.panel-live-chat-active { overflow: hidden !important; height: 100dvh !important; } body.panel-live-chat-active .main { height: 100dvh !important; overflow: hidden !important; } body.panel-live-chat-active .content { height: calc(100dvh - var(--topbar-height, 56px)) !important; max-height: calc(100dvh - var(--topbar-height, 56px)) !important; padding: 0.75rem !important; overflow: hidden !important; } #panel-live-chat.panel.active { height: 100% !important; flex: 1 !important; min-height: 0 !important; overflow: hidden !important; } .chat-layout { grid-template-columns: 1fr; gap: 0; } .chat-layout:not(.thread-active) .chat-thread-card { display: none !important; } .chat-layout.thread-active .chat-inbox-card { display: none !important; } .chat-layout.thread-active .chat-thread-card { display: flex !important; } .btn-chat-back { display: inline-flex !important; } .dossier-btn-label { display: none; } } /* ============================================================ WHATSAPP QR CONNECTION CARD (SQUARE & IMPECCABLE) ============================================================ */ .wa-qr-layout-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.75rem; padding: 1.75rem 1rem; max-width: 680px; margin: 0 auto; } .wa-qr-card-container { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; width: 100%; } .wa-qr-box { width: 240px; min-width: 240px; height: auto; min-height: 240px; border-radius: var(--radius-md); background: var(--bg-input); border: 2px dashed var(--border-color); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 1.25rem; box-shadow: var(--shadow-card); position: relative; overflow: hidden; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .wa-qr-box:hover { border-color: var(--accent); } .wa-qr-box.connected { border: 2px solid var(--status-green); background: rgba(16, 185, 129, 0.05); } .wa-qr-img { width: 200px; height: 200px; max-width: 200px; max-height: 200px; object-fit: contain; border-radius: var(--radius-sm); padding: 6px; background: #ffffff; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); border: 2px solid var(--accent); } .wa-qr-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 0.375rem; } .wa-qr-icon-wrap { width: 52px; height: 52px; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: 0.25rem; } .wa-qr-state-title { font-family: var(--font-heading); font-weight: 700; font-size: 0.9375rem; color: var(--text-main); } .wa-qr-state-desc { font-size: 0.75rem; color: var(--text-muted); max-width: 200px; line-height: 1.45; } .spinner { width: 38px; height: 38px; border: 3px solid rgba(255, 255, 255, 0.15); border-top-color: var(--accent); border-radius: 50%; animation: spinner-rotate 0.8s linear infinite; margin: 0.5rem auto; } @keyframes spinner-rotate { to { transform: rotate(360deg); } } .wa-qr-box.error { border-color: var(--status-red); background: rgba(239, 68, 68, 0.05); } .wa-qr-actions-row { display: flex; gap: 0.75rem; align-items: center; justify-content: center; flex-wrap: wrap; } .wa-steps-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; width: 100%; } @media (max-width: 680px) { .wa-steps-container { grid-template-columns: 1fr; } } .wa-step-card { background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 0.875rem 1rem; display: flex; align-items: flex-start; gap: 0.75rem; } .wa-step-badge { width: 24px; height: 24px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 0.75rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .wa-step-text { min-width: 0; } .wa-step-headline { font-weight: 700; font-size: 0.8125rem; color: var(--text-main); margin-bottom: 0.15rem; } .wa-step-subline { font-size: 0.6875rem; color: var(--text-muted); line-height: 1.45; } /* ============================================================ CRUD ROW LISTS (rules / media / catalog) ============================================================ */ .crud-row { display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem 0.625rem; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-sm); margin-bottom: 0.5rem; flex-wrap: wrap; } .crud-row .form-input { flex: 1; min-width: 140px; } .crud-row .form-input.wide { flex: 2; } .catalog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0.875rem; margin-bottom: 1rem; } .catalog-item { background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 0.875rem; transition: border-color var(--t-fast); } .catalog-item:hover { border-color: var(--accent-border); } /* ============================================================ MODAL ============================================================ */ .modal-overlay { display: none; position: fixed; inset: 0; background: var(--bg-overlay); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 1000; align-items: center; justify-content: center; padding: 1rem; } .modal-overlay.open { display: flex !important; animation: modal-backdrop-in 0.2s cubic-bezier(0.16, 1, 0.3, 1); } @keyframes modal-backdrop-in { from { opacity: 0; } to { opacity: 1; } } .modal-card, .modal-box { background: var(--bg-modal); border: 1px solid var(--border-color); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto; padding: 1.5rem; animation: modal-in 0.22s cubic-bezier(0.16, 1, 0.3, 1); } @keyframes modal-in { from { opacity: 0; transform: scale(0.96) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } } .modal-header { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 0.75rem !important; margin-bottom: 1.25rem !important; padding-bottom: 0.75rem !important; border-bottom: 1px solid var(--border-color) !important; } .modal-header .modal-title, .modal-title { font-family: var(--font-heading); font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 0; display: inline-flex; align-items: center; gap: 0.5rem; } .modal-close { width: 32px; height: 32px; border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid transparent; color: var(--text-muted); cursor: pointer; transition: all 0.15s ease; flex-shrink: 0; } .modal-close:hover { background: var(--bg-input); border-color: var(--border-color); color: var(--text-main); } /* ============================================================ TOAST NOTIFICATION SYSTEM (IMPECCABLE WCAG AA) ============================================================ */ .toast-container, .toast-wrap { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 99999; display: flex; flex-direction: column; gap: 0.625rem; pointer-events: none; max-width: 420px; } .toast { pointer-events: auto; min-width: 280px; max-width: 420px; background: var(--bg-card); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 0.75rem 1rem; font-size: 0.8125rem; font-weight: 500; color: var(--text-main); box-shadow: 0 10px 25px -5px oklch(0.05 0.02 240 / 0.45), 0 8px 10px -6px oklch(0.05 0.02 240 / 0.25); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); animation: toast-in 0.25s var(--ease-out); display: flex; align-items: center; gap: 0.625rem; } .toast .toast-icon { font-size: 1rem; flex-shrink: 0; } .toast .toast-msg { flex: 1; line-height: 1.4; } .toast.success { border-color: var(--status-green-border, var(--status-green)); } .toast.success .toast-icon { color: var(--status-green); } .toast.error { border-color: var(--status-red-border, var(--status-red)); } .toast.error .toast-icon { color: var(--status-red); } .toast.info { border-color: var(--status-blue-border, var(--status-blue)); } .toast.info .toast-icon { color: var(--status-blue); } .toast.amber, .toast.warning { border-color: var(--status-amber-border, var(--status-amber)); } .toast.amber .toast-icon, .toast.warning .toast-icon { color: var(--status-amber); } @keyframes toast-in { from { opacity: 0; transform: translateX(20px) scale(0.96); } to { opacity: 1; transform: translateX(0) scale(1); } } .toast.out { opacity: 0; transform: translateX(20px) scale(0.96); transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out); } /* ============================================================ MISC ============================================================ */ .status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; } .status-dot.blue { background: #0284c7; } .status-dot.amber { background: var(--status-amber); } .status-dot.green { background: var(--status-green); } .status-dot.neutral, .status-dot.slate, .status-dot.closed { background: #64748b; } .status-dot.red { background: var(--status-red); } .quick-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; } .hours-row { display: flex; align-items: center; gap: 1rem; padding: 0.625rem 0; border-bottom: 1px solid var(--border-color); } .hours-row:last-child { border-bottom: none; } .staff-avatar { width: 28px; height: 28px; border-radius: var(--radius-full); background: var(--accent-soft); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.625rem; color: var(--accent-strong); font-family: var(--font-heading); margin-right: 0.5rem; vertical-align: middle; border: 1px solid var(--accent-border); } .danger-zone { border: 1px solid var(--status-red-bg); border-radius: var(--radius-md); padding: 1.25rem; margin-top: 1rem; } .danger-zone .dash-card-title { color: var(--status-red); } .chart-container { position: relative; height: 260px; } .chart-fallback { height: 100%; display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 0.75rem; text-align: center; padding: 1rem; } .video-upload-row { display: flex; align-items: center; gap: 0.875rem; padding: 0.875rem; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-sm); margin-bottom: 0.625rem; flex-wrap: wrap; } .video-upload-row .meta { flex: 1; min-width: 160px; } .video-upload-row .name { font-size: 0.8125rem; font-weight: 600; } .video-upload-row .spec { font-size: 0.6875rem; color: var(--text-muted); margin-top: 0.125rem; } /* Section Images (Media Manager — website plans) */ .section-images-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.75rem; } .section-image-card { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.625rem; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-sm); } .section-image-card .thumb { position: relative; width: 100%; aspect-ratio: 16 / 10; border-radius: calc(var(--radius-sm) - 2px); overflow: hidden; background: var(--bg-card); border: 1px solid var(--border-color); display: flex; align-items: center; justify-content: center; } .section-image-card .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .section-image-card .thumb-fallback { align-items: center; justify-content: center; font-size: 1.375rem; color: var(--text-muted); width: 100%; height: 100%; } .section-image-card .meta { min-width: 0; } .section-image-card .name { font-size: 0.75rem; font-weight: 600; } .section-image-card .file { font-size: 0.625rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .section-image-card .btn-dash { align-self: stretch; justify-content: center; } /* Subtle plan chip near the sidebar user card (brand stays plan-neutral) */ .sidebar-plan-chip { display: inline-block; margin-top: 0.25rem; font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent-strong); background: var(--accent-soft); border: 1px solid var(--accent-border); padding: 0.125rem 0.4375rem; border-radius: var(--radius-full); max-width: 140px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .module-note { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent-strong); background: var(--accent-soft); padding: 0.25rem 0.5625rem; border-radius: var(--radius-full); vertical-align: middle; margin-left: 0.5rem; } .filter-chips { display: flex; gap: 0.375rem; flex-wrap: wrap; } .filter-chip { font-size: 0.6875rem; font-weight: 600; padding: 0.3125rem 0.75rem; border-radius: var(--radius-full); border: 1px solid var(--border-color); color: var(--text-secondary); transition: transform var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out); } .filter-chip:hover { border-color: var(--border-strong); color: var(--text-main); } .filter-chip.active { background: var(--accent-soft); border-color: var(--accent-border); color: var(--accent-strong); } /* ============================================================ CATALOG v2 — rich sellable items + payment links ============================================================ */ /* ---------- R1: SEGMENTED SUB-TABS BAR ---------- */ .cat-segmented-tabs { display: flex; align-items: center; gap: 0.375rem; padding: 0.375rem; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-full); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); overflow-x: auto; scrollbar-width: none; margin-bottom: 1.25rem; } .cat-segmented-tabs::-webkit-scrollbar { display: none; } .cat-segmented-tabs .btn-tab { display: inline-flex; align-items: center; gap: 0.5rem; height: 38px; padding: 0 1rem; border-radius: var(--radius-full); font-size: 0.8125rem; font-weight: 600; color: var(--text-secondary); background: transparent; border: 1px solid transparent; white-space: nowrap; transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; user-select: none; cursor: pointer; } .cat-segmented-tabs .btn-tab:hover { background: var(--accent-soft-2, oklch(0.62 0.14 210 / 0.08)); color: var(--text-main); } .cat-segmented-tabs .btn-tab:active { transform: scale(0.97); } .cat-segmented-tabs .btn-tab.active { background: var(--accent-soft, oklch(0.62 0.14 210 / 0.14)); color: var(--accent-strong, oklch(0.68 0.16 210)); border-color: var(--accent-border, oklch(0.62 0.14 210 / 0.38)); box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.15); } .cat-segmented-tabs .btn-tab i { font-size: 0.875rem; } /* ---------- CATALOG KPI QUICK-STATS STRIP (Data-Report) ---------- */ .cat-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.875rem; margin-bottom: 1.25rem; } @media (max-width: 900px) { .cat-kpi-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 500px) { .cat-kpi-grid { grid-template-columns: 1fr; } } .cat-kpi-card { display: flex; align-items: center; gap: 0.875rem; padding: 0.875rem 1.125rem; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md, 8px); transition: border-color 0.15s ease, transform 0.15s ease; } .cat-kpi-card:hover { border-color: var(--accent-border); transform: translateY(-1px); } .cat-kpi-icon { width: 40px; height: 40px; border-radius: var(--radius-sm, 6px); background: var(--bg-input); display: flex; align-items: center; justify-content: center; font-size: 1.125rem; flex-shrink: 0; } .cat-kpi-content { display: flex; flex-direction: column; min-width: 0; } .cat-kpi-value { font-size: 1.25rem; font-weight: 700; color: var(--text-main); line-height: 1.2; font-family: var(--font-mono, monospace); } .cat-kpi-label { font-size: 0.75rem; color: var(--text-muted); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ---------- R2: 2-TIER TOOLBAR & FILTER BAR HIERARCHY ---------- */ .catalog-toolbar-2tier, .catalog-toolbar { display: flex; flex-direction: column; gap: 0.875rem; margin-bottom: 1.25rem; } .cat-toolbar-tier1 { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; } .cat-toolbar-tier2 { display: flex; align-items: center; gap: 0.5rem; overflow-x: auto; padding-bottom: 0.25rem; } /* Zone 1: Leading Icon Search Input Wrapper */ .cat-search-wrapper { position: relative; flex: 1 1 240px; min-width: 220px; max-width: 360px; } .cat-search-icon { position: absolute; left: 0.875rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 0.8125rem; pointer-events: none; transition: color 0.15s ease; z-index: 1; } .cat-search-input, .catalog-toolbar .cat-search-input, .catalog-toolbar .form-input.cat-search-input { width: 100% !important; max-width: 100% !important; height: 38px; padding-left: 2.375rem !important; /* Optical clearance for leading icon */ padding-right: 0.875rem !important; font-size: 0.8125rem; border-radius: var(--radius-sm, 6px); background: var(--bg-input); border: 1px solid var(--border-color); color: var(--text-main); transition: border-color 0.15s ease, box-shadow 0.15s ease; } .cat-search-input:focus, .catalog-toolbar .cat-search-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); outline: none; } .cat-search-wrapper:focus-within .cat-search-icon { color: var(--accent); } /* Zone 2: Selling-Mode Filter Chips */ .cat-chips-group { display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; flex: 1 1 auto; } .cat-chips-group .filter-chip { display: inline-flex; align-items: center; gap: 0.375rem; height: 36px; padding: 0 0.875rem; border-radius: var(--radius-full); background: var(--bg-card); border: 1px solid var(--border-color); font-size: 0.8125rem; font-weight: 500; color: var(--text-muted); cursor: pointer; white-space: nowrap; transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; user-select: none; } .cat-chips-group .filter-chip:hover { border-color: var(--accent-border); color: var(--text-main); background: var(--bg-input); } .cat-chips-group .filter-chip:active { transform: scale(0.97); } .cat-chips-group .filter-chip.active { background: var(--accent-soft); border-color: var(--accent-border); color: var(--accent-strong); font-weight: 600; } .cat-chips-group .filter-chip .chip-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 0.3125rem; border-radius: 3px; background: var(--bg-input); font-size: 0.6875rem; font-weight: 600; color: var(--text-muted); margin-left: 0.25rem; transition: background 0.15s ease, color 0.15s ease; } .cat-chips-group .filter-chip.active .chip-count { background: var(--accent); color: #fff; } /* Zone 3: Right-Aligned Action Buttons */ .cat-toolbar-actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; margin-left: auto; } .cat-toolbar-btn { display: inline-flex; align-items: center; gap: 0.4375rem; height: 38px; padding: 0 1rem; font-size: 0.875rem; font-weight: 600; border-radius: var(--radius-sm, 6px); white-space: nowrap; } /* Enhanced Inset Drawer Card */ .cat-drawer-card { background: var(--bg-input); border: 1px solid var(--border-strong); border-radius: var(--radius-md); padding: 1.25rem; box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.05); } .cat-drawer-header { font-weight: 600; font-size: 0.875rem; margin-bottom: 0.875rem; color: var(--text-main); display: flex; align-items: center; gap: 0.5rem; } /* ---------- CATALOG CARDS SYSTEM (OPEN-DESIGN & IMPECCABLE OKLCH) ---------- */ .cat-card { position: relative; display: flex; flex-direction: column; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md, 12px); padding: 1rem; transition: transform var(--t-fast, 0.2s) cubic-bezier(0.16, 1, 0.3, 1), box-shadow var(--t-fast, 0.2s) cubic-bezier(0.16, 1, 0.3, 1), border-color var(--t-fast, 0.2s) ease; } .cat-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px oklch(0 0 0 / 0.35); border-color: var(--accent-border, oklch(0.62 0.14 210 / 0.4)); } .cat-card.cat-inactive { opacity: 0.62; } .cat-card.cat-dragging { opacity: 0.45; border-style: dashed; } .cat-card.cat-dragover { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); } .cat-card-top { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; } .cat-drag { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; color: var(--text-muted); cursor: grab; flex-shrink: 0; opacity: 0.7; font-size: 0.875rem; transition: color 0.15s ease; } .cat-drag:hover { color: var(--text-main); opacity: 1; } .cat-drag:active { cursor: grabbing; } .cat-card-badges-wrap { display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; flex: 1; } .cat-active-toggle { margin-left: auto; flex-shrink: 0; transform: scale(0.8); transform-origin: right center; } /* Category & Stock Micro-Badges (Linear/Stripe Grade) */ .cat-pill-badge { display: inline-flex; align-items: center; gap: 0.3rem; height: 22px; padding: 0.15rem 0.5rem; border-radius: var(--radius-xs, 4px); font-size: 0.6875rem; font-weight: 600; line-height: 1; letter-spacing: 0.01em; white-space: nowrap; box-sizing: border-box; } .cat-pill-badge i { font-size: 0.625rem; line-height: 1; color: currentColor; } /* Dark Theme (Default) */ .cat-pill-type-product { background: oklch(0.24 0.05 230 / 0.45); color: oklch(0.80 0.09 230); border: 1px solid oklch(0.45 0.10 230 / 0.40); } .cat-pill-type-booking { background: oklch(0.24 0.05 65 / 0.45); color: oklch(0.82 0.09 65); border: 1px solid oklch(0.48 0.11 65 / 0.40); } .cat-pill-type-pass { background: oklch(0.24 0.05 285 / 0.45); color: oklch(0.80 0.09 285); border: 1px solid oklch(0.45 0.10 285 / 0.40); } .cat-pill-type-package { background: oklch(0.24 0.05 320 / 0.45); color: oklch(0.80 0.10 320); border: 1px solid oklch(0.48 0.11 320 / 0.40); } .cat-pill-stock-green { background: oklch(0.24 0.05 155 / 0.45); color: oklch(0.82 0.09 155); border: 1px solid oklch(0.45 0.10 155 / 0.40); } .cat-pill-stock-amber { background: oklch(0.24 0.05 80 / 0.45); color: oklch(0.82 0.09 80); border: 1px solid oklch(0.48 0.11 80 / 0.40); } .cat-pill-stock-red { background: oklch(0.24 0.06 25 / 0.45); color: oklch(0.82 0.10 25); border: 1px solid oklch(0.48 0.12 25 / 0.40); } /* Light Theme (WCAG AAA Calibrated: Contrast >= 6.8:1) */ [data-theme="light"] .cat-pill-type-product { background: oklch(0.96 0.02 230); color: oklch(0.34 0.14 230); border: 1px solid oklch(0.60 0.12 230 / 0.35); } [data-theme="light"] .cat-pill-type-booking { background: oklch(0.965 0.025 65); color: oklch(0.38 0.14 65); border: 1px solid oklch(0.65 0.14 65 / 0.35); } [data-theme="light"] .cat-pill-type-pass { background: oklch(0.96 0.02 285); color: oklch(0.35 0.15 285); border: 1px solid oklch(0.62 0.14 285 / 0.35); } [data-theme="light"] .cat-pill-type-package { background: oklch(0.96 0.02 320); color: oklch(0.36 0.15 320); border: 1px solid oklch(0.65 0.13 320 / 0.35); } [data-theme="light"] .cat-pill-stock-green { background: oklch(0.96 0.02 155); color: oklch(0.32 0.14 155); border: 1px solid oklch(0.60 0.14 155 / 0.35); } [data-theme="light"] .cat-pill-stock-amber { background: oklch(0.965 0.025 80); color: oklch(0.38 0.14 80); border: 1px solid oklch(0.65 0.14 80 / 0.35); } [data-theme="light"] .cat-pill-stock-red { background: oklch(0.965 0.025 25); color: oklch(0.35 0.16 25); border: 1px solid oklch(0.65 0.14 25 / 0.35); } /* Catalog Stock Quick-Adjust Stepper */ .cat-stock-cell-wrap { display: inline-flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .cat-stock-cell-wrap.is-table { display: flex; align-items: center; gap: 0.5rem; } .cat-stock-cell-wrap.is-card { display: inline-flex; align-items: center; gap: 0.375rem; margin-top: 0.25rem; } .cat-stock-quick-stepper { display: inline-flex; align-items: center; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-sm, 6px); padding: 1px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); user-select: none; transition: border-color 0.15s ease; } .cat-stock-quick-stepper:hover { border-color: var(--border-color-hover, rgba(255, 255, 255, 0.2)); } .cat-stock-step-btn { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 20px; padding: 0; background: transparent; border: none; color: var(--text-secondary); font-size: 0.625rem; cursor: pointer; border-radius: 4px; transition: all 0.12s ease; } .cat-stock-step-btn:hover:not(:disabled) { background: var(--bg-hover, rgba(255, 255, 255, 0.08)); color: var(--text-main); } .cat-stock-step-btn:active:not(:disabled) { transform: scale(0.92); } .cat-stock-step-btn:disabled { opacity: 0.3; cursor: not-allowed; } .cat-stock-step-num { min-width: 24px; padding: 0 4px; height: 20px; line-height: 20px; background: transparent; border: none; color: var(--text-main); font-size: 0.6875rem; font-weight: 600; text-align: center; cursor: pointer; border-radius: 3px; transition: background 0.12s ease; } .cat-stock-step-num:hover { background: var(--bg-hover, rgba(255, 255, 255, 0.06)); color: var(--color-primary, #0df); } /* Card Thumbnail */ .cat-thumb { height: 110px; border-radius: var(--radius-sm, 6px); overflow: hidden; background: var(--bg-input); border: 1px solid var(--border-color); margin-bottom: 0.75rem; display: flex; align-items: center; justify-content: center; color: var(--text-muted); } .cat-thumb img { width: 100%; height: 100%; object-fit: cover; } .cat-thumb-empty i { font-size: 1.75rem; color: var(--text-muted); } .cat-thumb-broken { border-style: dashed; } /* Card Information */ .cat-card-body { display: flex; flex-direction: column; flex: 1; } .cat-name { font-weight: 600; font-size: 0.9375rem; color: var(--text-main); line-height: 1.35; } .cat-name-alt { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.125rem; } .cat-desc { font-size: 0.8125rem; color: var(--text-secondary); line-height: 1.4; margin-top: 0.375rem; max-width: 65ch; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Card Price Row & Footer */ .cat-price-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: auto; padding-top: 0.625rem; border-top: 1px solid var(--border-color); } .cat-price { font-family: var(--font-body); font-feature-settings: 'tnum' 1, 'lnum' 1; font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.0625rem; color: var(--accent); } .cat-hosted { font-size: 0.75rem; color: var(--accent-strong); margin-top: 0.375rem; font-weight: 600; display: flex; align-items: center; gap: 0.25rem; } .cat-actions { display: flex; align-items: center; justify-content: flex-end; gap: 0.375rem; margin-top: 0.625rem; padding-top: 0.625rem; border-top: 1px solid var(--border-color); flex-wrap: wrap; } .cat-reorder { display: inline-flex; align-items: center; gap: 0.25rem; margin-left: auto; } .icon-mini { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-xs); border: 1px solid var(--border-color); color: var(--text-secondary); font-size: 0.75rem; line-height: 1; transition: transform var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out); vertical-align: middle; background: transparent; } .icon-mini:hover:not(:disabled) { border-color: var(--border-strong); color: var(--text-main); background: var(--accent-soft-2); } .icon-mini:disabled { opacity: 0.4; cursor: not-allowed; } .icon-mini-danger { color: var(--status-red); border-color: var(--status-red-bg); } .icon-mini-danger:hover:not(:disabled) { background: var(--status-red-bg); color: var(--status-red); } /* Type pills */ .pill-type-product { background: var(--status-blue-bg); color: var(--status-blue); } .pill-type-service { background: var(--accent-soft); color: var(--accent-strong); } .pill-type-booking { background: var(--status-amber-bg); color: var(--status-amber); } .pill-type-membership { background: var(--accent-soft); color: var(--accent-strong); } /* Stock badges */ .badge-out-of-stock, .badge-depleted { background: var(--red-soft, oklch(0.65 0.22 25 / 0.16)); color: var(--status-red, oklch(0.70 0.22 25)); border: 1px solid var(--red-border, oklch(0.65 0.22 25 / 0.35)); } .badge-low-stock { background: var(--amber-soft, oklch(0.65 0.18 55 / 0.16)); color: var(--status-amber, oklch(0.75 0.18 55)); border: 1px solid var(--amber-border, oklch(0.65 0.18 55 / 0.35)); } .badge-in-stock { background: var(--green-soft, oklch(0.65 0.18 145 / 0.16)); color: var(--status-green, oklch(0.75 0.18 145)); border: 1px solid var(--green-border, oklch(0.65 0.18 145 / 0.35)); } /* Select mode + bulk bar */ .cat-check { position: relative; display: inline-flex; cursor: pointer; flex-shrink: 0; } .cat-check input { position: absolute; opacity: 0; width: 0; height: 0; } .cat-check span { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--border-strong); display: inline-flex; align-items: center; justify-content: center; transition: transform var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out); background: var(--bg-input); } .cat-check input:checked + span { background: var(--accent); border-color: var(--accent); } .cat-check input:checked + span::after { content: ''; width: 9px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translateY(-1px); } .cat-selectable { cursor: pointer; } .catalog-bulkbar { position: sticky; bottom: 1rem; display: none; align-items: center; gap: 0.75rem; background: var(--bg-card); border: 1px solid var(--accent-border); border-radius: var(--radius-md); box-shadow: var(--shadow-pop); padding: 0.625rem 0.875rem; margin-top: 1rem; z-index: 20; } .catalog-bulkbar .count { font-family: var(--font-body); font-feature-settings: 'tnum' 1, 'lnum' 1; font-variant-numeric: tabular-nums; font-weight: 700; background: var(--accent-soft); color: var(--accent-strong); border-radius: var(--radius-full); min-width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.75rem; padding: 0 0.375rem; } .unsaved-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--status-amber); align-self: center; } .btn-dash.active { border-color: var(--accent-border); color: var(--accent-strong); background: var(--accent-soft); } /* Catalog edit modal — toggle row */ .cat-edit-active-row { display: flex; align-items: center; gap: 0.625rem; } /* ============================================================ PAYMENTS — gateway card, checklist, orders table, picker ============================================================ */ .pay-gateway-card { display: flex; flex-direction: column; gap: 0.875rem; } .pay-gateway-head { display: flex; align-items: center; gap: 0.625rem; flex-wrap: wrap; } .pay-gateway-head .name { font-family: var(--font-heading); font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.02em; } .pay-gateway-sub { font-size: 0.75rem; color: var(--text-muted); line-height: 1.5; max-width: 560px; } .pay-gateway-controls { display: flex; align-items: flex-end; gap: 0.625rem; flex-wrap: wrap; } .pay-gateway-controls .form-group { margin-bottom: 0; min-width: 220px; } .pay-checklist { display: flex; flex-direction: column; gap: 0.375rem; margin-top: 0.25rem; } .pay-check { display: flex; align-items: center; gap: 0.625rem; text-align: left; font-size: 0.75rem; color: var(--text-secondary); padding: 0.5rem 0.625rem; border-radius: var(--radius-sm); border: 1px solid var(--border-color); background: var(--bg-input); transition: transform var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out); } .pay-check:hover { border-color: var(--border-strong); color: var(--text-main); } .pay-check.done { color: var(--text-main); border-color: var(--accent-border); background: var(--accent-soft-2); } .pay-check-box { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--border-strong); display: inline-flex; align-items: center; justify-content: center; font-size: 0.6875rem; color: var(--accent-strong); flex-shrink: 0; } .pay-check.done .pay-check-box { background: var(--accent); border-color: var(--accent); color: #fff; } .pay-sop-note { font-size: 0.6875rem; color: var(--text-muted); line-height: 1.6; padding: 0.375rem 0.625rem 0; } /* 6-Stage Onboarding Wizard (Pro AI PRD 18.2) */ .pay-check-head { display: flex; align-items: center; gap: 0.5rem; width: 100%; } .pay-check-num { width: 20px; height: 20px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--bg-body); border: 1px solid var(--border-strong); font-size: 0.6875rem; font-weight: 600; color: var(--text-secondary); } .pay-check-title { font-weight: 600; font-size: 0.8125rem; flex: 1; } .pay-check-state { font-size: 0.875rem; color: var(--accent-strong); } .pay-check.blocked { opacity: 0.55; } .pay-check.blocked .pay-check-state { color: var(--text-muted); } .pay-check-desc { font-size: 0.75rem; color: var(--text-secondary); line-height: 1.55; padding: 0.375rem 0 0.5rem 1.75rem; word-break: break-word; } .pay-check.done .pay-check-num { background: var(--accent); border-color: var(--accent); color: #fff; } .pay-check .btn-dash { margin-left: 1.75rem; margin-bottom: 0.25rem; } .pay-pick-item { display: flex; align-items: center; gap: 0.625rem; padding: 0.625rem 0.75rem; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--bg-input); margin-bottom: 0.5rem; transition: border-color var(--t-fast); } .pay-pick-item.selected { border-color: var(--accent-border); background: var(--accent-soft-2); } .pay-pick-main { flex: 1; min-width: 0; } .pay-pick-name { font-size: 0.8125rem; font-weight: 600; } .pay-pick-meta { font-size: 0.6875rem; color: var(--text-muted); margin-top: 0.25rem; display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; } .pay-pick-amt { max-width: 130px; flex-shrink: 0; } .pay-picker-preview { width: 100%; min-height: 160px; font-family: var(--font-body); font-size: 0.8125rem; line-height: 1.6; white-space: pre-wrap; } .pay-channel-toggle { display: flex; gap: 0.5rem; flex-wrap: wrap; } .pay-warn { display: none; font-size: 0.6875rem; color: var(--status-amber); background: var(--status-amber-bg); border-radius: var(--radius-xs); padding: 0.375rem 0.625rem; margin-top: 0.5rem; } .pay-local-note { display: flex; align-items: center; gap: 0.375rem; font-size: 0.6875rem; color: var(--text-muted); margin-top: 0.75rem; padding-top: 0.625rem; border-top: 1px solid var(--border-color); } /* Invoices & Payments Impeccable Design & Responsive Suite */ .pay-kpi-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.25rem; } .pay-kpi-card { margin: 0; padding: 1.125rem 1.25rem; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; justify-content: space-between; transition: border-color var(--t-fast), box-shadow var(--t-fast); } .pay-kpi-card:hover { border-color: var(--accent-border, var(--border-color)); box-shadow: var(--shadow-md); } .pay-kpi-label { font-size: 0.75rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.07em; display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.375rem; } .pay-kpi-val { font-family: var(--font-heading); font-size: clamp(1.25rem, 2vw, 1.625rem); font-weight: 700; color: var(--text-main); letter-spacing: -0.02em; line-height: 1.2; font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1, 'lnum' 1; } .pay-kpi-sub { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.375rem; } .pay-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.75rem; } .pay-search-box { position: relative; min-width: 200px; flex: 1; max-width: 280px; } .pay-search-box input { padding-left: 2rem; font-size: 0.8125rem; height: 34px; width: 100%; } .pay-search-box i { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 0.75rem; pointer-events: none; } @media (max-width: 960px) { .pay-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pay-kpi-grid > .pay-kpi-card:last-child { grid-column: span 2; } } @media (max-width: 640px) { .pay-kpi-grid { grid-template-columns: 1fr; gap: 0.75rem; } .pay-kpi-grid > .pay-kpi-card:last-child { grid-column: span 1; } .pay-toolbar { flex-direction: column; align-items: stretch; } .pay-search-box { max-width: 100%; width: 100%; } .pay-filter-wrap { display: flex; flex-direction: column; gap: 0.5rem; width: 100%; } .pay-filter-wrap .filter-chips { width: 100%; justify-content: flex-start; overflow-x: auto; padding-bottom: 2px; } #panel-payments .panel-header-actions, #view-payments .panel-header-actions { width: 100%; display: grid; grid-template-columns: 1fr; gap: 0.5rem; } #panel-payments .panel-header-actions .btn-dash, #view-payments .panel-header-actions .btn-dash { width: 100%; justify-content: center; } } /* ============================================================ ANALYTICS DATE RANGE BADGE & RESPONSIVE TELEMETRY ============================================================ */ .analytics-date-badge { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.85rem; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-sm); font-size: 0.75rem; font-weight: 600; color: var(--text-main); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); letter-spacing: 0.01em; white-space: nowrap; cursor: pointer; transition: all 0.15s ease; font-family: inherit; } .analytics-date-badge:hover, .analytics-date-badge.active { border-color: var(--accent); background: var(--bg-card-hover, var(--bg-card)); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } .analytics-date-badge:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Floating Date Picker Popover */ .analytics-date-popover { position: absolute; top: calc(100% + 0.5rem); left: 0; z-index: 99999; background-color: var(--bg-modal) !important; background: var(--bg-modal) !important; border: 1px solid var(--border-strong); border-radius: var(--radius-md, 8px); box-shadow: var(--shadow-pop, 0 16px 48px rgba(0, 0, 0, 0.40)); width: 500px; max-width: min(500px, calc(100vw - 2rem)); overflow: hidden; animation: calFadeIn 0.18s cubic-bezier(0.16, 1, 0.3, 1); } @keyframes calFadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .cal-popover-body { display: grid; grid-template-columns: 135px 1fr; min-height: 280px; } /* Presets Sidebar */ .cal-presets-rail { background: var(--bg-panel-secondary); border-right: 1px solid var(--border-color); padding: 0.75rem 0.5rem; display: flex; flex-direction: column; gap: 0.25rem; } .cal-presets-title { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); padding: 0.25rem 0.5rem 0.5rem; } .cal-preset-btn { background: transparent; border: none; text-align: left; padding: 0.4rem 0.5rem; border-radius: var(--radius-sm, 4px); font-size: 0.75rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; transition: all 0.12s ease; font-family: inherit; } .cal-preset-btn:hover { background: var(--bg-card-hover, rgba(255, 255, 255, 0.05)); color: var(--text-main); } .cal-preset-btn.active { background: var(--accent-subtle, rgba(20, 184, 166, 0.15)); color: var(--accent); font-weight: 600; } /* Calendar Core */ .cal-picker-core { padding: 0.875rem 1rem; display: flex; flex-direction: column; background: var(--bg-modal); } .cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; } .cal-month-title { font-family: var(--font-heading); font-size: 0.9375rem; font-weight: 700; letter-spacing: -0.02em; color: var(--text-main); } .cal-nav-btn { background: transparent; border: 1px solid var(--border-color); border-radius: var(--radius-sm, 4px); width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted); cursor: pointer; transition: all 0.12s ease; } .cal-nav-btn:hover { border-color: var(--border-strong); color: var(--text-main); background: var(--bg-card-hover); } .cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 0.6875rem; font-weight: 600; color: var(--text-muted); margin-bottom: 0.375rem; } .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px 0; flex: 1; } .cal-day-cell { height: 32px; display: flex; align-items: center; justify-content: center; font-size: 0.8125rem; color: var(--text-main); cursor: pointer; user-select: none; position: relative; transition: background 0.1s ease, color 0.1s ease; } .cal-day-cell.other-month { color: var(--text-muted); opacity: 0.45; } .cal-day-cell:not(.other-month):hover { background: var(--bg-card-hover, rgba(255, 255, 255, 0.08)); } .cal-day-cell.today { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } .cal-day-cell.range-start { background: var(--accent) !important; color: var(--accent-contrast, #ffffff) !important; font-weight: 700; border-top-left-radius: var(--radius-sm, 4px); border-bottom-left-radius: var(--radius-sm, 4px); } .cal-day-cell.range-end { background: var(--accent) !important; color: var(--accent-contrast, #ffffff) !important; font-weight: 700; border-top-right-radius: var(--radius-sm, 4px); border-bottom-right-radius: var(--radius-sm, 4px); } .cal-day-cell.range-start.range-end { border-radius: var(--radius-sm, 4px) !important; } .cal-day-cell.in-range { background: var(--accent-subtle, rgba(20, 184, 166, 0.15)); color: var(--text-main); } .cal-day-cell.disabled { pointer-events: none; opacity: 0.25; } .cal-hint-text { font-size: 0.6875rem; color: var(--text-muted); margin-top: 0.625rem; display: flex; align-items: center; gap: 0.35rem; } .cal-popover-footer { display: flex; align-items: center; justify-content: space-between; padding: 0.625rem 1rem; border-top: 1px solid var(--border-color); background: var(--bg-panel-secondary); flex-wrap: wrap; gap: 0.5rem; } @media (max-width: 768px) { #panel-analytics .panel-header-actions { width: 100%; flex-direction: column; align-items: stretch; gap: 0.625rem; } .analytics-date-badge { width: 100%; justify-content: center; } #panel-analytics .pill-toggle { width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); } #panel-analytics .pill-toggle .pill-tab { text-align: center; padding: 0.35rem 0.15rem; font-size: 0.6875rem; } .analytics-date-popover { position: fixed; top: auto; bottom: 0; left: 0; right: 0; width: 100%; max-width: 100%; border-radius: var(--radius-lg, 12px) var(--radius-lg, 12px) 0 0; } .cal-popover-body { grid-template-columns: 1fr; } .cal-presets-rail { flex-direction: row; overflow-x: auto; border-right: none; border-bottom: 1px solid var(--border-color); padding: 0.5rem; } .cal-presets-title { display: none; } .cal-preset-btn { white-space: nowrap; padding: 0.3rem 0.5rem; } } /* ============================================================ PLAN GATING + ROLE ENFORCEMENT .plan-hidden → element not available on the active plan .cap-hidden → element not available to the current role .role-hidden → element hidden by role section permission ============================================================ */ .plan-hidden, .cap-hidden, .role-hidden { display: none !important; } .grid-2.grid-2-single { grid-template-columns: 1fr; } .metric-masked { letter-spacing: 0.15em; opacity: 0.55; font-family: var(--font-mono, monospace) !important; user-select: none; } /* Read-only panels (role lacks settings_edit): every control inert. */ .panel-readonly button, .panel-readonly input, .panel-readonly select, .panel-readonly textarea, .panel-readonly .toggle-switch { pointer-events: none !important; opacity: 0.55; } /* ============================================================ NICHE MODULE LOADER STATES ============================================================ */ .module-loading { display: flex; align-items: center; justify-content: center; gap: 0.75rem; padding: 3rem 1rem; color: var(--text-muted); font-size: 0.8125rem; } .module-spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border-strong); border-top-color: var(--accent); animation: dash-spin 0.8s linear infinite; flex-shrink: 0; } @keyframes dash-spin { to { transform: rotate(360deg); } } /* ============================================================ EMPLOYEES / PERMISSION MATRIX ============================================================ */ .role-switcher-wrap { display: inline-flex; align-items: center; gap: 0.5rem; } .role-switcher-label { font-size: 0.6875rem; color: var(--text-muted); white-space: nowrap; } .role-switcher-wrap .form-select { min-width: 120px; padding: 0.3125rem 0.5rem; font-size: 0.75rem; } .perm-matrix { min-width: 540px; } .perm-matrix th.perm-role-col { text-align: center; width: 120px; vertical-align: middle; padding: 0.625rem 0.5rem; } .perm-cell { text-align: center; vertical-align: middle; padding-top: 0.625rem !important; } .perm-cap-name { font-weight: 600; font-size: 0.8125rem; color: var(--text-main); letter-spacing: -0.01em; } .perm-cap-desc { font-size: 0.725rem; color: var(--text-secondary); margin-top: 0.2rem; line-height: 1.45; opacity: 0.9; } .perm-check.locked { opacity: 0.55; cursor: not-allowed; } .perm-lock-note { font-size: 0.65rem; color: var(--text-muted); margin-top: 0.25rem; font-weight: 500; } .staff-active-toggle { margin: 0 auto; } /* Open-Design Minimalist Editorial Badges & Telemetry Pills (Zero Neon Box Fills!) */ .badge-role-owner { background: var(--bg-card); color: var(--text-main); border: 1px solid var(--border-color); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03); } .badge-role-owner i { color: #d97706; } .badge-role-manager { background: var(--bg-card); color: var(--text-main); border: 1px solid var(--border-color); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03); } .badge-role-manager i { color: oklch(0.72 0.03 240); } .badge-role-staff { background: var(--bg-card); color: var(--text-main); border: 1px solid var(--border-color); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03); } .badge-role-staff i { color: #0284c7; } .badge-role-custom { background: var(--bg-card); color: var(--text-main); border: 1px solid var(--border-color); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03); } .badge-role-custom i { color: var(--accent); } /* Dynamic Role Cards Matrix */ .role-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; } .role-tier-card { padding: 1.125rem; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-md); display: flex; flex-direction: column; justify-content: space-between; gap: 0.875rem; transition: border-color 0.15s ease, transform 0.15s ease; } .role-tier-card:hover { border-color: var(--accent); } .role-tier-card-dashed { padding: 1.5rem; background: transparent; border: 1.5px dashed var(--border-color); border-radius: var(--radius-md); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 0.5rem; cursor: pointer; min-height: 180px; color: var(--text-muted); transition: all 0.2s ease; } .role-tier-card-dashed:hover { border-color: var(--accent); color: var(--text-main); background: var(--bg-card); } .role-section-pill { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.6875rem; font-weight: 500; padding: 0.25rem 0.5rem; border-radius: var(--radius-sm); background: var(--bg-card); border: 1px solid var(--border-color); color: var(--text-secondary); } .role-chk-label { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.75rem; padding: 0.5rem; border-radius: var(--radius-sm); border: 1px solid var(--border-color); background: var(--bg-card); cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; user-select: none; } .role-chk-label:hover { border-color: var(--accent); } .role-chk-label input[type="checkbox"] { margin-top: 2px; accent-color: var(--accent); } .badge-telemetry-active { background: var(--bg-card); color: var(--text-main); border: 1px solid var(--border-color); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03); } .badge-telemetry-active i { color: #10b981; } .badge-conversion-rate { background: var(--bg-card); color: var(--text-main); border: 1px solid var(--border-color); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03); } .badge-conversion-rate i { color: var(--status-blue); } .badge-traffic-peak { background: var(--bg-card); color: var(--text-main); border: 1px solid var(--border-color); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03); } .badge-traffic-peak i { color: #d97706; } /* Extra catalog type pills (full 7-mode taxonomy) */ .pill-type-package { background: var(--status-green-bg); color: var(--status-green); } .pill-type-rental { background: var(--accent-soft-2); color: var(--text-secondary); } .pill-type-voucher { background: var(--status-red-bg); color: var(--status-red); } .role-tier-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02); transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out); } .role-tier-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06); border-color: var(--accent); } .role-tier-card ul li { position: relative; margin-bottom: 0.35rem; } .role-tier-card ul li:last-child { margin-bottom: 0; } .btn-dash.btn-link { background: transparent; border: none; color: var(--accent); cursor: pointer; font-weight: 600; display: inline-flex; align-items: center; gap: 0.25rem; } .btn-dash.btn-link:hover { text-decoration: underline; color: var(--accent-strong, var(--accent)); } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 1024px) { .grid-2 { grid-template-columns: 1fr; } } @media (max-width: 860px) { .sidebar { transform: translateX(-100%); box-shadow: var(--shadow-pop); width: min(300px, 85vw); } .sidebar.open { transform: translateX(0); } .main { margin-left: 0; } .topbar-hamburger { display: flex; } .topbar { padding: 0 1rem; } .kpi-grid { grid-template-columns: 1fr 1fr; } .content { padding: 1.25rem 1rem 3rem; } .panel-title { font-size: 1.1875rem; } .nav-sub-item { padding: 0.5rem 0.625rem; font-size: 0.8125rem; min-height: 38px; } .nav-sub-list { margin-left: 1rem; padding-left: 0.5rem; } } @media (max-width: 520px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 0.625rem; } .kpi-card { padding: 0.75rem 0.625rem; } .kpi-card .kpi-value { font-size: 1.25rem; } .kpi-card .kpi-sub { font-size: 0.6875rem; } .catalog-grid { grid-template-columns: 1fr; } .chat-bubble { max-width: 92%; } .crud-row { align-items: stretch; flex-direction: column; } .crud-row .form-input { width: 100%; } .demo-badge .label { display: none; } .catalog-toolbar .form-input { max-width: 100%; width: 100%; } .catalog-toolbar .spacer { display: none; } .pay-pick-amt { max-width: 100px; } .pay-gateway-controls .form-group { min-width: 100%; } .cat-actions .btn-dash { flex: 1; } .role-switcher-wrap { flex-wrap: wrap; } .staff-form-grid { grid-template-columns: 1fr !important; } } @media (max-width: 340px) { .kpi-grid { grid-template-columns: 1fr; } } @media (max-width: 360px) { .content { padding: 1rem 0.625rem 2.5rem; } .topbar { padding: 0 0.625rem; } .topbar-title { font-size: 1rem; } .sidebar-logo { padding: 0.875rem 1rem; } .sidebar-footer { padding: 0.75rem 1rem; } } /* Escalation Switcher & Conversational Commerce */ .escalation-switch-pill { display: inline-flex; align-items: center; background: var(--bg-input); padding: 3px; border-radius: 20px; border: 1px solid var(--border-color); } .esc-switch-btn { border: none; background: transparent; padding: 4px 10px; border-radius: 16px; font-size: 0.75rem; font-weight: 600; color: var(--text-muted); cursor: pointer; transition: transform var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out); } .esc-switch-btn.active.esc-btn-ai { background: var(--accent); color: #fff; box-shadow: var(--shadow-accent); } .esc-switch-btn.active.esc-btn-human { background: #d97706; color: #fff; box-shadow: 0 2px 8px rgba(217, 119, 6, 0.35); } .pill-tab { border: 1px solid var(--border-color); background: var(--bg-input); color: var(--text-secondary); font-size: 0.75rem; font-weight: 600; padding: 4px 10px; border-radius: var(--radius-full); cursor: pointer; transition: transform var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out); } .pill-tab:hover { background: var(--bg-card); color: var(--text-main); } .pill-tab.active { background: var(--accent-soft); color: var(--accent-strong); border-color: var(--accent); } .chat-esc-badge { font-size: 0.625rem; font-weight: 700; padding: 2px 6px; border-radius: 10px; margin-left: auto; } .chat-esc-badge.human { background: rgba(217, 119, 6, 0.12); color: #d97706; border: 1px solid rgba(217, 119, 6, 0.3); } .chat-esc-badge.ai { background: var(--accent-soft); color: var(--accent-strong); border: 1px solid var(--accent); } /* ============================================================ UNIVERSAL DYNAMIC COCKPIT STYLES & SUB-PANELS ============================================================ */ .cockpit-subpanel { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 1.25rem; box-shadow: var(--shadow-card); transition: background var(--t-normal), border-color var(--t-normal); } .cockpit-subpanel:hover { border-color: var(--border-strong); } /* Schedule Grid */ .schedule-grid-container { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.75rem; } .schedule-slot-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.75rem; background: var(--bg-body); border: 1px solid var(--border-color); border-radius: var(--radius-sm); font-size: 0.8125rem; transition: transform var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out); } .schedule-slot-row:hover { background: var(--bg-card-hover); border-color: var(--border-strong); } .schedule-slot-time { font-weight: 700; color: var(--accent); min-width: 60px; font-size: 0.75rem; font-family: var(--font-mono); } .schedule-slot-body { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .schedule-slot-title { font-weight: 600; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .schedule-slot-desc { font-size: 0.75rem; color: var(--text-muted); } .schedule-slot-badge { font-size: 0.6875rem; font-weight: 700; padding: 2px 8px; border-radius: var(--radius-full); text-transform: uppercase; letter-spacing: 0.06em; } .schedule-slot-badge.booked { background: var(--status-green-bg); color: var(--status-green); border: 1px solid var(--status-green-border); } .schedule-slot-badge.blocked { background: var(--status-red-bg); color: var(--status-red); border: 1px solid var(--status-red-border); } .schedule-slot-badge.available { background: var(--accent-soft-2); color: var(--text-muted); border: 1px solid var(--border-color); } /* Credit Validation Card */ .credit-validation-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); box-shadow: var(--shadow-card); } .credit-verify-bar .btn-dash { white-space: nowrap; } @media (max-width: 600px) { .credit-verify-bar .btn-dash { flex: 1 1 calc(50% - 0.25rem); justify-content: center; text-align: center; } } .credit-verify-res-success, .credit-verify-res-error, .credit-verify-res-warning { padding: 0.75rem 1rem; border-radius: var(--radius-sm); font-size: 0.875rem; display: flex; align-items: center; gap: 0.5rem; margin-top: 0.75rem; line-height: 1.4; } .credit-verify-res-success { background: var(--status-green-bg); color: var(--status-green); border: 1px solid var(--status-green-border); border-left: 3px solid var(--status-green); } .credit-verify-res-error { background: var(--status-red-bg); color: var(--status-red); border: 1px solid var(--status-red-border); border-left: 3px solid var(--status-red); } .credit-verify-res-warning { background: var(--status-amber-bg); color: var(--status-amber); border: 1px solid var(--status-amber-border); border-left: 3px solid var(--status-amber); } /* Passes Variety Filter Tabs & Badges */ #passes-variety-filter-tabs .filter-tab { border: 1px solid var(--border-color); background: var(--bg-card); color: var(--text-secondary); font-size: 0.75rem; font-weight: 500; padding: 4px 10px; border-radius: 999px; display: inline-flex; align-items: center; gap: 0.375rem; cursor: pointer; transition: all var(--t-fast) var(--ease-out); } #passes-variety-filter-tabs .filter-tab:hover { border-color: var(--border-strong); color: var(--text-main); } #passes-variety-filter-tabs .filter-tab.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent-strong); font-weight: 600; } .pass-code-text { font-family: var(--font-mono); font-weight: 600; color: var(--accent); white-space: nowrap; } .pass-nowrap { white-space: nowrap; } /* Passes KPI Ribbon Mobile 2x2 Ergonomics */ @media (max-width: 640px) { .passes-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0.625rem !important; } .passes-kpi-grid .kpi-card { padding: 0.625rem 0.5rem !important; } .passes-kpi-grid .kpi-card .kpi-value { font-size: 1.25rem !important; } .passes-kpi-grid .kpi-card .kpi-label { font-size: 0.6875rem !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .passes-kpi-grid .kpi-card .kpi-sub { font-size: 0.6875rem !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } @media (max-width: 340px) { .passes-kpi-grid { grid-template-columns: 1fr !important; } } /* Catalog Pass Validity Presets */ .cat-validity-presets { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-top: 0.35rem; } .cat-preset-btn { background: var(--bg-card); border: 1px solid var(--border-color); color: var(--text-secondary); font-size: 0.6875rem; font-weight: 500; padding: 2px 8px; border-radius: var(--radius-sm); cursor: pointer; transition: all var(--t-fast) var(--ease-out); } .cat-preset-btn:hover { border-color: var(--accent); color: var(--text-main); background: var(--accent-soft-2); } .cat-preset-btn.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent-strong); font-weight: 600; } /* Catalog Service Duration Unit Switcher */ .cat-dur-unit-btn { background: var(--bg-card); border: 1px solid var(--border-color); color: var(--text-secondary); font-size: 0.6875rem; font-weight: 500; padding: 2px 8px; border-radius: var(--radius-sm); cursor: pointer; transition: all var(--t-fast) var(--ease-out); } .cat-dur-unit-btn:hover { border-color: var(--accent); color: var(--text-main); background: var(--accent-soft-2); } .cat-dur-unit-btn.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent-strong); font-weight: 600; } /* Filter Tabs for Orders */ .filter-tabs .filter-tab { border: none; background: transparent; color: var(--text-muted); font-size: 0.75rem; font-weight: 600; padding: 4px 10px; border-radius: var(--radius-sm); cursor: pointer; transition: transform var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out); } .filter-tabs .filter-tab:hover { color: var(--text-main); } .filter-tabs .filter-tab.active { background: var(--accent); color: var(--accent-text); } /* Voucher Stats Card */ .voucher-stat-card { display: flex; align-items: center; justify-content: space-between; padding: 0.625rem 0.875rem; background: var(--bg-body); border: 1px solid var(--border-color); border-radius: var(--radius-sm); font-size: 0.8125rem; } .voucher-code-badge { font-family: var(--font-mono); font-weight: 700; color: var(--accent-strong); background: var(--accent-soft); padding: 2px 6px; border-radius: 4px; } /* Responsive adjustments */ @media (max-width: 768px) { .schedule-slot-row { flex-direction: column; align-items: flex-start; } .schedule-slot-body { width: 100%; flex-direction: column; align-items: flex-start; } .working-hours-bar { flex-direction: column; align-items: stretch; } .filter-tabs { flex-wrap: wrap; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* Milestone M2 Dashboard Enhancements */ .badge-teal { background: var(--accent-soft); color: var(--accent-strong); padding: 0.125rem 0.5rem; border-radius: var(--radius-sm); font-weight: 600; display: inline-flex; align-items: center; gap: 0.375rem; } .btn-pay-redispatch { border-color: var(--accent-color); color: var(--accent-color); } .btn-pay-redispatch:hover { background: var(--accent-soft); } /* ============================================================ MILESTONE 2 — COCKPIT & RECEPTIONIST REWORK STYLING BLUEPRINT ============================================================ */ /* 1. Glassmorphic Segmented Control Pill Bar */ .cockpit-tabs-bar { display: flex; align-items: center; flex-wrap: wrap; /* Studio tab law (2026-09-01): tabs WRAP — no hidden horizontal scroll */ gap: 0.375rem; padding: 0.375rem; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 1rem; backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); margin-bottom: 1.25rem; } .cockpit-tabs-bar::-webkit-scrollbar { display: none; } .cockpit-tabs-bar .btn-tab { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.875rem; border-radius: var(--radius-full); font-size: 0.75rem; font-weight: 600; color: var(--text-secondary); background: transparent; border: 1px solid transparent; white-space: nowrap; transition: transform var(--t-fast) var(--ease-out), background var(--t-fast), color var(--t-fast), border-color var(--t-fast); user-select: none; cursor: pointer; } .cockpit-tabs-bar .btn-tab:hover { background: var(--accent-soft-2, rgba(14,154,167,0.1)); color: var(--text-main); } .cockpit-tabs-bar .btn-tab:active { transform: scale(0.97); } .cockpit-tabs-bar .btn-tab.active { background: var(--accent-soft); color: var(--accent-strong); border-color: var(--accent-border); box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.15); } /* Micro-Badges inside Cockpit Tabs */ .cockpit-tab-badge { display: inline-flex; align-items: center; justify-content: center; font-size: 0.625rem; font-weight: 700; padding: 0.125rem 0.4375rem; border-radius: var(--radius-full); line-height: 1; letter-spacing: 0.02em; background: var(--accent-soft-2, rgba(14,154,167,0.1)); color: var(--text-muted); border: 1px solid var(--border-color); transition: transform var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out); } .cockpit-tabs-bar .btn-tab.active .cockpit-tab-badge { background: var(--accent); color: var(--accent-text, #ffffff); border-color: transparent; } .cockpit-tab-badge.badge-green { background: var(--status-green-bg); color: var(--status-green); border-color: var(--status-green-border); } .cockpit-tab-badge.badge-amber { background: var(--status-amber-bg); color: var(--status-amber); border-color: var(--status-amber-border); } .cockpit-tab-badge.badge-muted { background: var(--bg-input); color: var(--text-muted); border-color: var(--border-color); } /* Persona Directives Character & Token Counter Tabular Numbers */ #persona-char-token-counter { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* Tactile Tone Chips */ .preset-chips .chip-btn { transition: transform var(--t-fast) var(--ease-out), background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast); } .preset-chips .chip-btn:active { transform: scale(0.97); } /* 2. OKLCH Amber Alert Badge & Anti-Hallucination Guard */ .strict-price-guard-card { background: var(--bg-card); border: 1px solid var(--status-amber-border); border-radius: var(--radius-md); padding: 1.25rem; margin-bottom: 1.25rem; box-shadow: var(--shadow-card); transition: border-color var(--t-fast), box-shadow var(--t-fast); } .strict-price-guard-card:hover { border-color: var(--status-amber); box-shadow: var(--shadow-pop); } .amber-alert-badge { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.3125rem 0.6875rem; border-radius: var(--radius-full); background: var(--status-amber-bg); border: 1px solid var(--status-amber-border); color: var(--status-amber); font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; } /* 3. Preset Chips & Category Chips */ .preset-chips, .filter-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; } .chip-btn { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.75rem; border-radius: var(--radius-full); background: var(--bg-input); border: 1px solid var(--border-color); font-size: 0.75rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; transition: transform var(--t-fast) var(--ease-out), background var(--t-fast), color var(--t-fast), border-color var(--t-fast); user-select: none; } .chip-btn:hover { background: var(--accent-soft-2, rgba(14,154,167,0.1)); border-color: var(--accent-border); color: var(--accent-strong); } .chip-btn:active { transform: scale(0.97); } .chip-sm { font-size: 0.71875rem; padding: 0.25rem 0.5625rem; } .filter-chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.375rem 0.75rem; border-radius: var(--radius-full); background: var(--bg-card); border: 1px solid var(--border-color); font-size: 0.75rem; font-weight: 600; color: var(--text-muted); cursor: pointer; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast); user-select: none; } .filter-chip:hover { border-color: var(--accent-border); color: var(--text-main); background: var(--bg-input); } .filter-chip:active { transform: scale(0.97); } .filter-chip.active { background: var(--accent-soft); border-color: var(--accent-border); color: var(--accent-strong); font-weight: 600; } /* Segmented Pills */ .segmented-pills .pill-btn { flex: 1; padding: 0.25rem 0.5rem; border-radius: var(--radius-sm); font-size: 0.75rem; font-weight: 600; color: var(--text-muted); background: transparent; border: none; cursor: pointer; transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out); } .segmented-pills .pill-btn:hover { color: var(--text-main); } .segmented-pills .pill-btn.active { background: var(--accent); color: var(--accent-text, #ffffff); } /* 4. Visual FAQ Cards Styling */ .faq-cards-grid { display: flex; flex-direction: column; gap: 0.75rem; } .faq-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 1rem 1.125rem; backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--shadow-card); transition: border-color var(--t-fast), box-shadow var(--t-fast); } .faq-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-pop); } .btn-faq-action { width: 28px; height: 28px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; color: var(--text-muted); border: 1px solid transparent; cursor: pointer; transition: transform var(--t-fast) var(--ease-out), background var(--t-fast), color var(--t-fast), border-color var(--t-fast); } .btn-faq-action:hover { background: var(--accent-soft-2, rgba(14,154,167,0.1)); color: var(--text-main); border-color: var(--border-color); } .btn-faq-action:active { transform: scale(0.97); } .btn-faq-action.btn-faq-delete:hover { background: var(--status-red-bg); color: var(--status-red); border-color: var(--status-red-border); } /* ============================================================ MILESTONE 3: ADVANCED EDITORIAL ANALYTICS & FLOWCHART INTELLIGENCE ============================================================ */ /* Interactive KPI Grid & Focus State */ .analytics-kpi-grid .kpi-card.kpi-interactive { cursor: pointer; position: relative; transition: transform 0.2s var(--ease-out), border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out); outline: none; } .analytics-kpi-grid .kpi-card.kpi-interactive:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 4px 16px rgba(14, 154, 167, 0.15); } .analytics-kpi-grid .kpi-card.kpi-interactive.active { border-color: var(--accent); background: var(--accent-soft-2, rgba(14, 154, 167, 0.08)); box-shadow: 0 0 0 1px var(--accent), 0 4px 16px rgba(0, 0, 0, 0.2); } .kpi-badge-trend { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.7rem; font-weight: 600; margin-top: 0.5rem; padding: 0.15rem 0.45rem; border-radius: var(--radius-sm, 4px); background: var(--bg-card-hover, rgba(255, 255, 255, 0.06)); } /* Editorial NYT-Style Header */ .nyt-chart-editorial-header { display: flex; flex-direction: column; gap: 0.3rem; max-width: 600px; } .nyt-kicker { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.10em; color: var(--accent); display: flex; align-items: center; gap: 0.4rem; } .nyt-headline { font-family: var(--font-body); font-size: 0.9375rem; font-weight: 600; color: var(--text-main); line-height: 1.35; } /* Main Chart / Visualization Canvas */ .interactive-chart-container { width: 100%; border-radius: var(--radius-md); background: var(--bg-card); border: 1px solid var(--border-color); padding: 1.25rem 1rem 1rem 1rem; overflow: visible; position: relative; } .chart-mode-switcher .btn-dash.active { background: var(--accent); color: #fff; border-color: var(--accent); } /* ApexCharts Container & Integration */ .interactive-chart-container .apexcharts-canvas { margin: 0 auto; font-family: inherit !important; } .interactive-chart-container .apexcharts-tooltip { background: var(--bg-card) !important; border: 1px solid var(--border-color) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.20) !important; border-radius: var(--radius-sm, 6px) !important; color: var(--text-main) !important; backdrop-filter: blur(8px); } .interactive-chart-container .apexcharts-tooltip-title { background: var(--bg-panel-secondary) !important; border-bottom: 1px solid var(--border-color) !important; font-family: inherit !important; font-size: 0.75rem !important; font-weight: 700 !important; color: var(--text-main) !important; padding: 0.35rem 0.65rem !important; } .interactive-chart-container .apexcharts-tooltip-text { font-family: var(--font-mono, monospace) !important; font-size: 0.75rem !important; } .interactive-chart-container .apexcharts-xaxistooltip, .interactive-chart-container .apexcharts-yaxistooltip { background: var(--bg-card) !important; border: 1px solid var(--border-color) !important; color: var(--text-main) !important; font-family: var(--font-mono, monospace) !important; font-size: 0.6875rem !important; border-radius: 4px !important; } /* Zero-State Aesthetic Callout */ .analytics-chart-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3.5rem 1.5rem; text-align: center; gap: 0.75rem; } .analytics-chart-empty-state i { font-size: 2.25rem; color: var(--accent); opacity: 0.45; } .analytics-chart-empty-state-title { font-weight: 600; font-size: 0.9375rem; color: var(--text-main); letter-spacing: -0.01em; } .analytics-chart-empty-state-desc { font-size: 0.8125rem; color: var(--text-muted); max-width: 420px; line-height: 1.45; } /* Keyframe Animations */ @keyframes chart-reveal { 0% { opacity: 0; transform: translateY(6px); } 100% { opacity: 1; transform: translateY(0); } } .chart-animated-entry { animation: chart-reveal 0.35s cubic-bezier(0.16, 1, 0.3, 1) both; } /* 2-Column Analytics Breakdown */ .analytics-split-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.25rem; } .funnel-container, .distribution-breakdown-container { display: flex; flex-direction: column; gap: 0.875rem; } .distribution-empty-card { text-align: center; padding: 2.5rem 1rem; color: var(--text-muted); font-size: 0.8125rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; } .distribution-empty-card i { font-size: 1.75rem; opacity: 0.4; color: var(--accent); } .distribution-legend-list { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.75rem; } .distribution-legend-item { display: flex; align-items: center; justify-content: space-between; font-size: 0.8125rem; padding: 0.35rem 0.5rem; border-radius: var(--radius-sm, 4px); background: var(--bg-panel-secondary); border: 1px solid var(--border-subtle); transition: background 0.15s ease; } .distribution-legend-item:hover { background: var(--bg-card-hover); } .distribution-legend-left { display: flex; align-items: center; gap: 0.5rem; font-weight: 500; color: var(--text-main); } .distribution-legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .distribution-legend-val { font-family: var(--font-mono, monospace); font-size: 0.75rem; font-weight: 600; color: var(--text-secondary); } /* ========================================================================== Milestones 4, 5, 6: Promotions, PDF Catalog Manager & Catalog Analytics ========================================================================== */ /* Milestone 4: Promotions Inset Drawer & Ticket Cards */ .cat-drawer-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 1.25rem; box-shadow: var(--shadow-card); transition: border-color 0.2s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.2s cubic-bezier(0.23, 1, 0.32, 1); } /* Open-Design drawer internals (R5: inline-style consolidation) */ .cat-promo-drawer { margin-top: 1.25rem; } .cat-form-grid { gap: 0.875rem; } .cat-form-grid + .cat-form-grid { margin-top: 0.5rem; } .cat-form-group { margin-top: 0.5rem; } .cat-drawer-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1rem; } /* Open-Design card head: title + optional meta / actions (R5) */ .cat-card-head { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; flex-wrap: wrap; } .cat-card-head-title { display: flex; align-items: center; gap: 0.625rem; font-weight: 600; color: var(--text-main); } .cat-card-head-title i { font-size: 1.125rem; } .cat-card-head-meta { font-size: 0.75rem; color: var(--text-muted); } /* Promo cards ledger */ .cat-promo-list { margin-top: 1.25rem; display: flex; flex-direction: column; gap: 0.75rem; } .promo-card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.5rem; gap: 0.5rem; flex-wrap: wrap; } .promo-card-badges { display: flex; align-items: center; gap: 0.625rem; flex-wrap: wrap; } .promo-card-meta { display: flex; align-items: center; gap: 0.375rem; flex-shrink: 0; } .promo-discount-pill { font-weight: 700; font-size: 0.75rem; } .promo-delete-btn { padding: 4px 8px; font-size: 0.75rem; color: var(--status-red); } .promo-card-target { font-size: 0.75rem; color: var(--text-muted); margin-bottom: 0.375rem; display: flex; align-items: center; gap: 0.375rem; } .promo-card-target strong { color: var(--text-main); } .promo-card-rules { font-size: 0.8125rem; color: var(--text-muted); white-space: pre-wrap; margin-top: 0.5rem; padding: 0.5rem 0.75rem; background: var(--bg-input); border-radius: var(--radius-xs); border: 1px solid var(--border-color); display: flex; gap: 0.375rem; align-items: flex-start; } .promo-card-rules i { margin-top: 0.125rem; } .promo-card { position: relative; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 1rem 1.125rem; transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out); } .promo-card:hover { border-color: var(--accent); box-shadow: var(--shadow-card); } .promo-code-badge, .promo-code-btn { display: inline-flex; align-items: center; gap: 0.375rem; font-family: var(--font-mono); font-weight: 700; font-size: 0.9375rem; color: var(--text-main); background: var(--accent-soft); border: 1px solid var(--accent-border); padding: 0.25rem 0.625rem; border-radius: var(--radius-xs); letter-spacing: 0.05em; } .promo-code-btn { cursor: pointer; transition: all var(--transition-fast, 0.15s ease); } .promo-code-btn:hover { background: var(--accent); color: #000; border-color: var(--accent); } .cat-alert-banner { transition: all var(--transition-fast, 0.15s ease); } /* Impeccable Semantic Restock Attention Alert Banner */ .cat-restock-banner-box { display: flex; align-items: center; justify-content: space-between; padding: 0.875rem 1.125rem; background: rgba(245, 158, 11, 0.08); border: 1px solid rgba(245, 158, 11, 0.28); border-radius: var(--radius-md); gap: 1rem; flex-wrap: wrap; transition: border-color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out); } [data-theme="light"] .cat-restock-banner-box { background: #fffbeb; border-color: #fde68a; box-shadow: 0 1px 3px rgba(245, 158, 11, 0.08); } .cat-restock-banner-box .cat-restock-title { font-weight: 600; font-size: 0.875rem; color: var(--text-main); letter-spacing: -0.01em; } [data-theme="light"] .cat-restock-banner-box .cat-restock-title { color: #92400e; } .cat-restock-banner-box .cat-restock-desc { font-size: 0.8125rem; color: var(--text-muted); margin-top: 0.15rem; } [data-theme="light"] .cat-restock-banner-box .cat-restock-desc { color: #b45309; } @media (max-width: 768px) { .cat-restock-banner-box { flex-direction: column; align-items: flex-start; } .cat-restock-banner-box .cat-restock-actions { width: 100%; justify-content: flex-end; } } /* Milestone 5: PDF Dropzone & Document Cards */ .doc-dropzone { border: 2px dashed var(--accent-border); border-radius: var(--radius-md); padding: 1.5rem 1.25rem; text-align: center; background: var(--bg-input); cursor: pointer; transition: border-color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out); position: relative; overflow: hidden; display: block; } .doc-dropzone:hover, .doc-dropzone.dragover { border-color: var(--accent); background: var(--accent-soft); box-shadow: var(--shadow-card); transform: translateY(-2px); } .doc-dropzone:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .doc-dropzone i.fa-cloud-arrow-up { font-size: 2rem; margin-bottom: 0.5rem; display: block; transition: transform var(--t-fast) var(--ease-out); } .doc-dropzone:hover i.fa-cloud-arrow-up { transform: translateY(-3px) scale(1.08); } .doc-dropzone-title { font-weight: 600; font-size: 0.875rem; color: var(--text-main); } .doc-dropzone-sub { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.25rem; } /* Open-Design docs pane 2-column split (R5) */ .cat-doc-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem; margin-top: 1.25rem; } .cat-doc-searchbar { display: flex; gap: 0.75rem; align-items: center; margin-top: 0.875rem; margin-bottom: 0.625rem; } .cat-doc-list { max-height: 440px; overflow-y: auto; padding-right: 0.25rem; } .cat-doc-inspector-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; } .cat-doc-inspector-label { margin: 0; font-weight: 600; } .cat-doc-hint { font-size: 0.6875rem; color: var(--text-muted); margin-top: 0.375rem; line-height: 1.4; display: flex; align-items: center; gap: 0.375rem; } .doc-item-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 0.875rem 1rem; margin-bottom: 0.625rem; transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out); } .doc-item-card:hover { border-color: var(--border-strong); box-shadow: 0 4px 12px oklch(0 0 0 / 0.15); } .badge-pdf { display: inline-flex; align-items: center; gap: 0.3rem; height: 22px; padding: 0.15rem 0.5rem; border-radius: var(--radius-xs, 4px); font-size: 0.6875rem; font-weight: 700; font-family: var(--font-mono); background: oklch(0.24 0.06 25 / 0.45); color: oklch(0.82 0.10 25); border: 1px solid oklch(0.48 0.12 25 / 0.40); box-sizing: border-box; } .badge-pdf i { color: currentColor; font-size: 0.6875rem; } [data-theme="light"] .badge-pdf { background: oklch(0.965 0.025 25); color: oklch(0.35 0.16 25); border: 1px solid oklch(0.65 0.14 25 / 0.35); } .badge-txt { display: inline-flex; align-items: center; gap: 0.3rem; height: 22px; padding: 0.15rem 0.5rem; border-radius: var(--radius-xs, 4px); font-size: 0.6875rem; font-weight: 700; font-family: var(--font-mono); background: oklch(0.24 0.05 195 / 0.45); color: oklch(0.80 0.09 195); border: 1px solid oklch(0.45 0.10 195 / 0.40); box-sizing: border-box; } .badge-txt i { color: currentColor; font-size: 0.6875rem; } [data-theme="light"] .badge-txt { background: oklch(0.96 0.02 195); color: oklch(0.34 0.14 195); border: 1px solid oklch(0.60 0.12 195 / 0.35); } .doc-primary-badge { display: inline-flex; align-items: center; gap: 0.3rem; height: 22px; padding: 0.15rem 0.5rem; border-radius: var(--radius-xs, 4px); font-size: 0.6875rem; font-weight: 600; background: oklch(0.24 0.05 155 / 0.45); color: oklch(0.82 0.09 155); border: 1px solid oklch(0.45 0.10 155 / 0.40); box-sizing: border-box; white-space: nowrap; } .doc-primary-badge i { color: currentColor; font-size: 0.75rem; } [data-theme="light"] .doc-primary-badge { background: oklch(0.96 0.02 155); color: oklch(0.32 0.14 155); border: 1px solid oklch(0.60 0.14 155 / 0.35); } /* Milestone 6: Analytics Stat Cards & Rank Badges */ /* Open-Design desktop law: 4-column KPI row, collapse 2/1 (R5) */ .cat-kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; } .cat-analytics-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; margin-bottom: 1rem; } .cat-list-block { margin-top: 1rem; } .cat-stat-card .stat-label { display: flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; font-weight: 600; color: var(--text-muted); } .cat-stat-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 1.125rem 1.25rem; position: relative; overflow: hidden; transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out); } .cat-stat-card:hover { border-color: var(--accent); box-shadow: 0 4px 20px oklch(0.68 0.16 195 / 0.1); } .cat-stat-card .stat-value { font-family: var(--font-mono); font-feature-settings: "tnum" 1, "lnum" 1; font-variant-numeric: tabular-nums; font-size: 1.75rem; font-weight: 800; color: var(--text-main); line-height: 1.2; margin: 0.375rem 0 0.25rem 0; } .cat-stat-card .stat-sub { font-family: var(--font-mono); font-feature-settings: "tnum" 1, "lnum" 1; font-variant-numeric: tabular-nums; font-size: 0.78125rem; color: var(--text-muted); } .cat-rank-badge { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; font-weight: 700; font-size: 0.75rem; font-family: var(--font-mono); } .cat-rank-1 { background: rgba(234, 179, 8, 0.15); color: var(--status-amber, #eab308); border: 1px solid rgba(234, 179, 8, 0.35); } .cat-rank-2 { background: rgba(148, 163, 184, 0.15); color: var(--text-main); border: 1px solid var(--border-color); } .cat-rank-3 { background: rgba(180, 83, 9, 0.15); color: #d97706; border: 1px solid rgba(180, 83, 9, 0.35); } .cat-rank-default { background: var(--bg-input); color: var(--text-muted); border: 1px solid var(--border-color); } /* Bento Catalog Insights KPI Enhancements */ .cat-stat-kicker { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); display: flex; align-items: center; gap: 0.35rem; margin-bottom: 0.375rem; } .cat-stat-badge { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.6875rem; font-weight: 600; color: var(--text-secondary); background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-full); padding: 0.15rem 0.5rem; margin-top: 0.5rem; width: fit-content; } /* High-Volume Catalog Insights Viewport & Search Toolbar */ .cat-insight-toolbar { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.625rem; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-md); } .cat-insight-search-wrap { position: relative; width: 100%; } .cat-insight-search-wrap .search-icon { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 0.8125rem; pointer-events: none; } .cat-insight-search { width: 100%; padding: 0.45rem 2rem 0.45rem 2.25rem; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-sm); color: var(--text-main); font-size: 0.8125rem; font-family: inherit; transition: all var(--t-fast) var(--ease-out); } .cat-insight-search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-subtle); } .cat-search-clear { position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%); background: transparent; border: none; color: var(--text-muted); cursor: pointer; padding: 0.25rem; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; } .cat-search-clear:hover { color: var(--text-main); } .cat-insight-filters { display: flex; gap: 0.25rem; flex-wrap: wrap; align-items: center; } .cat-insight-filters .pill-tab { font-size: 0.6875rem; padding: 0.25rem 0.5rem; } .cat-insight-sort-wrap { display: flex; justify-content: flex-end; position: relative; } /* Custom Select Dropdown (.cat-custom-select) */ .cat-custom-select { position: relative; display: inline-block; user-select: none; } .cat-select-trigger { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.71875rem; font-weight: 600; padding: 0.3rem 0.625rem; background: var(--bg-card); color: var(--text-main); border: 1px solid var(--border-color); border-radius: var(--radius-sm); cursor: pointer; transition: all var(--t-fast) var(--ease-out); white-space: nowrap; font-family: inherit; } .cat-select-trigger:hover, .cat-custom-select.open .cat-select-trigger { border-color: var(--accent); background: var(--bg-card-hover, var(--bg-card)); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } .cat-select-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .cat-select-chevron { font-size: 0.625rem; color: var(--text-muted); transition: transform var(--t-fast) var(--ease-out); margin-left: 0.2rem; } .cat-custom-select.open .cat-select-chevron { transform: rotate(180deg); color: var(--accent); } .cat-custom-select.open { z-index: 60; } .cat-select-menu { position: absolute; top: calc(100% + 4px); right: 0; z-index: 1000; min-width: 200px; max-height: 280px; overflow-y: auto; overscroll-behavior: contain; background: #111927; background: var(--bg-modal, #111927); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.08); padding: 0.35rem; display: none; flex-direction: column; gap: 2px; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } .cat-select-menu::-webkit-scrollbar { width: 6px; } .cat-select-menu::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; } .cat-custom-select.open .cat-select-menu { display: flex; animation: catMenuFadeIn 0.15s cubic-bezier(0.16, 1, 0.3, 1); } .cat-custom-select.w-100 { display: block; width: 100%; } .cat-custom-select.w-100 .cat-select-trigger { width: 100%; justify-content: space-between; } .cat-custom-select.w-100 .cat-select-menu { left: 0; right: 0; width: 100%; } @keyframes catMenuFadeIn { from { opacity: 0; transform: translateY(-4px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .cat-select-option { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0.4rem 0.6rem; border-radius: var(--radius-xs); border: none; background: transparent; color: var(--text-secondary); font-size: 0.75rem; font-weight: 500; cursor: pointer; text-align: left; transition: all 0.12s ease; font-family: inherit; } .cat-select-option:hover, .cat-select-option:focus-visible { background: var(--bg-hover, var(--bg-input)); color: var(--text-main); outline: none; } .cat-select-option.active { background: var(--accent-soft); color: var(--accent-strong, var(--accent)); font-weight: 600; } .cat-option-label { display: inline-flex; align-items: center; gap: 0.45rem; } .cat-option-check { font-size: 0.6875rem; color: var(--accent); opacity: 0; transition: opacity var(--t-fast) ease; } .cat-select-option.active .cat-option-check { opacity: 1; } /* Search Shortcut Badge & Match Counter Pill */ .cat-search-kbd { position: absolute; right: 2rem; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 4px; font-family: var(--font-mono, monospace); font-size: 0.625rem; font-weight: 700; color: var(--text-muted); background: var(--bg-input); border: 1px solid var(--border-color); border-radius: 3px; pointer-events: none; transition: opacity 0.15s ease, transform 0.15s ease; } .cat-insight-search:focus ~ .cat-search-kbd { opacity: 0.15; transform: translateY(-50%) scale(0.85); } .cat-search-count-pill { position: absolute; right: 2rem; top: 50%; transform: translateY(-50%); font-size: 0.625rem; font-weight: 700; font-family: var(--font-mono, monospace); padding: 0.15rem 0.45rem; border-radius: var(--radius-full); background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-border); pointer-events: none; white-space: nowrap; } /* Active Filter & Sort Chips Bar */ .cat-active-filter-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem; padding: 0.375rem 0.6rem; background: var(--bg-surface-raised, rgba(255, 255, 255, 0.03)); border: 1px solid var(--border-color); border-radius: var(--radius-sm); font-size: 0.75rem; } .cat-active-chip { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.175rem 0.5rem; background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-border); border-radius: var(--radius-full); font-weight: 500; font-size: 0.6875rem; line-height: 1.2; } .cat-active-chip-title { color: var(--text-muted); font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; } .cat-active-chip-val { color: var(--text-main); font-weight: 600; } .cat-active-chip-close { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; margin-left: 2px; border-radius: 50%; background: rgba(0, 0, 0, 0.15); color: var(--text-muted); cursor: pointer; border: none; padding: 0; font-size: 0.625rem; transition: all 0.12s ease; } .cat-active-chip-close:hover { background: rgba(239, 68, 68, 0.25); color: #ef4444; } .cat-active-clear-all { display: inline-flex; align-items: center; gap: 0.3rem; background: transparent; border: none; color: var(--text-muted); font-size: 0.6875rem; font-weight: 500; cursor: pointer; margin-left: auto; padding: 0.15rem 0.4rem; border-radius: var(--radius-xs); transition: color 0.12s ease; } .cat-active-clear-all:hover { color: var(--text-main); text-decoration: underline; } /* High-Volume Scroll Viewport */ .cat-insight-scroll-viewport { max-height: 480px; overflow-y: auto; scrollbar-gutter: stable; padding-right: 0.35rem; display: flex; flex-direction: column; gap: 0.5rem; } .cat-insight-scroll-viewport::-webkit-scrollbar { width: 6px; } .cat-insight-scroll-viewport::-webkit-scrollbar-track { background: var(--bg-input); border-radius: 3px; } .cat-insight-scroll-viewport::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; } .cat-insight-scroll-viewport::-webkit-scrollbar-thumb:hover { background: var(--accent); } .cat-row-highlight { animation: catRowHighlightPulse 2s ease-out; } @keyframes catRowHighlightPulse { 0% { background: oklch(0.78 0.16 75 / 0.25); outline: 2px solid var(--accent); } 100% { background: transparent; outline: 2px solid transparent; } } /* Open-Design focus law: visible keyboard focus rings (R5) */ .cat-segmented-tabs .btn-tab:focus-visible, .cat-chips-group .filter-chip:focus-visible, .cat-toolbar-actions .btn-dash:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Open-Design responsive law: 4-col KPI -> 2-col tablet -> 1-col mobile (R5) */ @media (max-width: 1024px) { .cat-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cat-analytics-split { grid-template-columns: 1fr; } } @media (max-width: 900px) { .cat-doc-split { grid-template-columns: 1fr; } } @media (max-width: 768px) { .cat-kpi-grid { grid-template-columns: 1fr; } } /* ========================================================================== BOOKINGS & SCHEDULE COMPLETE ENGINE (own calendar) - open-design bento ========================================================================== */ .bk-top-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; align-items: stretch; } .bk-main-split { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 1rem; align-items: stretch; } .bk-cal-card { display: flex; flex-direction: column; } .bk-tl-card { display: flex; flex-direction: column; } .bk-hours-row { display: flex; align-items: center; gap: 0.5rem; } .bk-time-input { width: auto; min-width: 90px; padding: 0.25rem 0.5rem; } .bk-hint { font-size: 0.75rem; color: var(--text-muted); line-height: 1.45; } .bk-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; } .bk-cal-title { font-weight: 700; font-size: 0.9375rem; color: var(--text-main); } .bk-cal-tools { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; flex-wrap: wrap; } .bk-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; } .bk-cal-dow { font-size: 0.6875rem; color: var(--text-muted); text-align: center; font-weight: 600; padding: 0.25rem 0; } .bk-cal-cell { position: relative; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; font-size: 0.8125rem; border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; color: var(--text-secondary); transition: border-color 0.15s cubic-bezier(0.23, 1, 0.32, 1), background-color 0.15s cubic-bezier(0.23, 1, 0.32, 1); } .bk-cal-cell:hover { border-color: var(--accent-border); background: var(--bg-input); } .bk-cal-cell.out { opacity: 0.35; } .bk-cal-cell.sel { background: var(--accent-soft); border-color: var(--accent-border); color: var(--color-teal, #0d9488); font-weight: 700; } .bk-cal-cell.today { outline: 1px solid var(--accent-border); } .bk-cal-cell .bk-cell-dot { position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); display: flex; gap: 2px; } .bk-dot { width: 5px; height: 5px; border-radius: 50%; display: inline-block; } .bk-dot-appt { background: var(--color-teal, #0d9488); } .bk-dot-block { background: var(--status-red); } .bk-cal-cell.has-block { border-color: rgba(239, 68, 68, 0.35); background: rgba(239, 68, 68, 0.05); } .bk-cal-cell.has-block:hover { border-color: var(--status-red); background: rgba(239, 68, 68, 0.1); } .bk-block-calendar-card .bk-cal-cell { height: 40px; aspect-ratio: auto; } .bk-legend { display: flex; gap: 1rem; margin-top: 0.625rem; font-size: 0.75rem; color: var(--text-muted); align-items: center; } .bk-legend span { display: inline-flex; align-items: center; gap: 0.375rem; } .bk-tl-head { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.875rem; } .bk-tl-date { font-weight: 700; font-size: 1.0625rem; color: var(--text-main); letter-spacing: -0.01em; } .bk-tl-sub { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.125rem; } /* Unified Bookings Chronological Stream */ .bk-schedule-stream { display: flex; flex-direction: column; gap: 0.625rem; min-height: 220px; } .bk-stream-item { display: flex; align-items: center; gap: 1rem; padding: 0.75rem 1rem; border: 1px solid var(--border-color); border-radius: var(--radius-md, 8px); background: var(--bg-card); transition: border-color 0.15s cubic-bezier(0.23, 1, 0.32, 1), background 0.15s ease, box-shadow 0.15s ease; cursor: pointer; position: relative; } .bk-stream-item:hover { border-color: var(--accent-border, rgba(13,148,136,0.35)); background: var(--bg-card-sub, rgba(255,255,255,0.02)); box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.05)); } .bk-stream-item.bk-cancelled { opacity: 0.5; border-style: dashed; } .bk-stream-item.bk-completed { border-left: 3px solid var(--color-teal, #0d9488); } .bk-stream-item.bk-pending { border-left: 3px solid #f59e0b; } .bk-stream-item.bk-stream-blocked { background: oklch(0.5 0.18 25 / 0.04); border: 1px dashed rgba(239, 68, 68, 0.35); cursor: default; } .bk-stream-time-badge { min-width: 84px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding-right: 0.875rem; border-right: 1px solid var(--border-color); flex-shrink: 0; } .bk-stream-time { font-size: 0.875rem; font-weight: 700; color: var(--text-main); line-height: 1.2; } .bk-stream-dur { font-size: 0.6875rem; color: var(--text-muted); margin-top: 0.15rem; } .bk-stream-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; } .bk-stream-row1 { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .bk-stream-cust-name { font-size: 0.875rem; font-weight: 700; color: var(--text-main); } .bk-stream-badges { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; } .bk-stream-row2 { display: flex; align-items: center; gap: 0.75rem; font-size: 0.75rem; color: var(--text-secondary); flex-wrap: wrap; } .bk-stream-svc-name { font-weight: 600; color: var(--text-main); } .bk-stream-price { font-weight: 600; color: var(--text-main); } .bk-stream-phone { color: var(--text-muted); } .bk-stream-notes { font-size: 0.6875rem; color: var(--text-muted); font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bk-stream-actions { display: flex; align-items: center; gap: 0.35rem; flex-shrink: 0; } @media (max-width: 640px) { .bk-stream-item { flex-direction: column; align-items: flex-start; gap: 0.5rem; } .bk-stream-time-badge { border-right: none; border-bottom: 1px solid var(--border-color); padding-right: 0; padding-bottom: 0.35rem; width: 100%; flex-direction: row; justify-content: space-between; align-items: center; } .bk-stream-actions { width: 100%; justify-content: flex-end; padding-top: 0.35rem; border-top: 1px dashed var(--border-color); } } .bk-tl { position: relative; min-height: 480px; flex: 1; } .bk-tl-canvas { position: relative; height: 560px; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-card); overflow: hidden; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04); } .bk-tl-row { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--border-color); transition: background-color 0.15s ease; box-sizing: border-box; } .bk-tl-row:first-child { border-top: none; } .bk-tl-row:hover { background-color: oklch(0.65 0.14 185 / 0.08); } .bk-tl-row:hover .bk-tl-hover-hint { display: inline-flex; } .bk-tl-hover-hint { display: none; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 0.6875rem; font-weight: 600; color: var(--color-teal, #0d9488); background: var(--accent-soft); border: 1px solid var(--accent-border, rgba(13,148,136,0.2)); padding: 2px 8px; border-radius: var(--radius-sm); align-items: center; gap: 4px; pointer-events: none; z-index: 2; } .bk-tl-hour { position: absolute; left: 8px; top: 2px; font-size: 0.6875rem; color: var(--text-muted); font-family: var(--font-mono); font-weight: 600; line-height: 1; pointer-events: none; } .bk-block { position: absolute; left: 64px; right: 12px; border-radius: var(--radius-sm); padding: 0.375rem 0.5rem; overflow: hidden; border: 1px solid; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; z-index: 5; } .bk-block:hover { transform: translateY(-1px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12); z-index: 4; } .bk-appt { background: oklch(0.65 0.14 210 / 0.14); border-color: oklch(0.65 0.14 210 / 0.45); } .bk-appt.bk-completed { background: oklch(0.7 0.15 150 / 0.14); border-color: oklch(0.7 0.15 150 / 0.45); } .bk-appt.bk-pending { border-style: dashed; background: oklch(0.75 0.12 80 / 0.12); border-color: oklch(0.75 0.12 80 / 0.4); } .bk-appt.bk-cancelled { opacity: 0.45; background: var(--bg-input); border-color: var(--border-color); } .bk-blocked { background: oklch(0.5 0.18 25 / 0.12); border-color: oklch(0.5 0.18 25 / 0.4); border-style: dashed; } .bk-block-head { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; } .bk-block-name { font-weight: 700; font-size: 0.8125rem; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bk-badge-source { font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; background: var(--accent-soft); color: var(--color-teal, #0d9488); border: 1px solid var(--accent-border, rgba(13,148,136,0.2)); padding: 1px 6px; border-radius: 4px; flex-shrink: 0; } .bk-block-meta { font-size: 0.6875rem; color: var(--text-secondary); margin-top: 0.1875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bk-block-actions, .bk-blocked-actions { position: absolute; top: 0.35rem; right: 0.35rem; display: none; gap: 0.25rem; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 6px; padding: 2px; box-shadow: var(--shadow-card); } .bk-block:hover .bk-block-actions, .bk-block:hover .bk-blocked-actions { display: flex; } /* Floor Capacity Executive Ribbon (D3 / SVG Data Craft) */ /* Floor Capacity Executive Ribbon & Compact Telemetry Strip */ .bk-capacity-ribbon, .bk-telemetry-strip { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); } .bk-strip-metrics { display: flex; align-items: center; gap: 1.25rem; } @media (max-width: 900px) { .bk-telemetry-strip { flex-direction: column !important; align-items: flex-start !important; gap: 0.75rem !important; } .bk-strip-metrics { flex-wrap: wrap; gap: 0.625rem 1rem; } } .bk-ribbon-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; align-items: stretch; } .bk-ribbon-metric { padding: 0.625rem 0.75rem; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-sm); display: flex; flex-direction: column; justify-content: center; } .bk-metric-val { font-size: 1.125rem; font-weight: 700; color: var(--text-main); letter-spacing: -0.02em; line-height: 1.2; } .bk-metric-lbl { font-size: 0.6875rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 0.2rem; } .bk-heatstrip-wrapper { padding: 0.5rem 0.75rem; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-sm); display: flex; flex-direction: column; justify-content: space-between; } .bk-heatstrip-title { display: flex; justify-content: space-between; align-items: center; font-size: 0.6875rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.35rem; } .bk-heatstrip-legend { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.625rem; text-transform: none; } .bk-hs-dot { width: 8px; height: 8px; border-radius: 2px; display: inline-block; vertical-align: middle; } .bk-hs-dot.hs-empty { background: var(--border-color); } .bk-hs-dot.hs-partial { background: var(--color-teal, #0d9488); } .bk-hs-dot.hs-full { background: oklch(0.75 0.16 75); } /* Floor Agenda / Roster View */ .bk-agenda { display: flex; flex-direction: column; gap: 0.625rem; max-height: 560px; overflow-y: auto; padding-right: 0.25rem; } .bk-agenda-slot { border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--bg-card); padding: 0.625rem 0.75rem; transition: border-color 0.15s ease; } .bk-agenda-slot:hover { border-color: var(--accent-border, rgba(13,148,136,0.3)); } .bk-agenda-slot-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; } .bk-agenda-time { font-size: 0.8125rem; font-weight: 700; color: var(--text-main); font-family: var(--font-mono); display: inline-flex; align-items: center; gap: 0.4rem; } .bk-agenda-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.5rem; } .bk-agenda-card { padding: 0.5rem 0.65rem; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-sm); cursor: pointer; transition: transform 0.15s ease, border-color 0.15s ease; } .bk-agenda-card:hover { transform: translateY(-1px); border-color: var(--color-teal, #0d9488); } .bk-agenda-card-head { display: flex; justify-content: space-between; align-items: center; gap: 0.35rem; } .bk-agenda-card-name { font-size: 0.8125rem; font-weight: 700; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bk-agenda-empty-spot { border: 1px dashed var(--border-color); border-radius: var(--radius-sm); padding: 0.5rem 0.65rem; display: flex; align-items: center; justify-content: center; gap: 0.35rem; font-size: 0.75rem; color: var(--text-muted); cursor: pointer; background: transparent; transition: all 0.15s ease; } .bk-agenda-empty-spot:hover { border-color: var(--color-teal, #0d9488); color: var(--color-teal, #0d9488); background: var(--accent-soft); } /* Appointment Detail Modal */ .bk-detail-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--accent-soft); color: var(--color-teal, #0d9488); display: flex; align-items: center; justify-content: center; font-size: 1.125rem; font-weight: 800; font-family: var(--font-mono); border: 1px solid var(--accent-border, rgba(13,148,136,0.25)); flex-shrink: 0; } @media (max-width: 1180px) { .bk-top-grid { grid-template-columns: 1fr; } .bk-main-split { grid-template-columns: 1fr; } .bk-ribbon-grid { grid-template-columns: repeat(2, 1fr); } .bk-heatstrip-wrapper { grid-column: 1 / -1; } } @media (max-width: 640px) { .bk-tl-canvas { height: 480px; } .bk-block { left: 48px; right: 6px; } .bk-tl-head { flex-direction: column; align-items: stretch; gap: 0.5rem; } .bk-ribbon-grid { grid-template-columns: 1fr; } } /* Orders & Delivery KPI Ribbon */ .orders-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; } @media (max-width: 960px) { .orders-kpi-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .orders-kpi-grid { grid-template-columns: 1fr; } } /* Catalog Segmented Category Selector */ .cat-type-pills { display: flex; gap: 0.5rem; flex-wrap: wrap; padding: 0.25rem; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-sm); } .cat-type-pill { flex: 1; min-width: 110px; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.45rem 0.75rem; border-radius: calc(var(--radius-sm) - 2px); border: 1px solid transparent; background: transparent; color: var(--text-secondary); font-size: 0.8125rem; font-weight: 600; cursor: pointer; transition: all 0.15s ease; } .cat-type-pill:hover { color: var(--text-main); background: var(--bg-hover, rgba(255,255,255,0.04)); } .cat-type-pill.active { background: var(--bg-card); color: var(--accent); border-color: var(--border-color); box-shadow: 0 1px 3px rgba(0,0,0,0.1); } /* Pass Variety Micro-Selector (Neo-Kinpaku Impeccable) */ .cat-pass-flavor-pills { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.375rem; padding: 0.25rem; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-sm); } @media (max-width: 600px) { .cat-pass-flavor-pills { grid-template-columns: 1fr; } } .cat-pass-flavor-pill { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.45rem 0.625rem; border-radius: calc(var(--radius-sm) - 2px); border: 1px solid transparent; background: transparent; color: var(--text-secondary); font-size: 0.8125rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: all 0.15s ease; } .cat-pass-flavor-pill:hover { color: var(--text-main); background: var(--bg-hover, rgba(255,255,255,0.04)); } .cat-pass-flavor-pill.active { background: var(--bg-card); color: var(--accent); border-color: var(--border-color); box-shadow: 0 1px 3px rgba(0,0,0,0.1); } /* Catalog Image Dropcard */ .cat-img-dropcard { transition: border-color 0.15s ease, background-color 0.15s ease; } .cat-img-dropcard:hover { border-color: var(--accent) !important; background: var(--accent-soft) !important; } /* ============================================================ INTERACTIVE BUNDLE / PACKAGE BUILDER (Universal Combos) ============================================================ */ .bundle-builder-wrap { display: flex; flex-direction: column; gap: 0.75rem; } .bundle-builder-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .bundle-builder-title { font-size: 0.8125rem; font-weight: 700; color: var(--text-main); display: flex; align-items: center; gap: 0.375rem; } .bundle-builder-count { font-family: var(--font-mono, monospace); font-size: 0.6875rem; color: var(--accent-strong, #14b8a6); background: var(--accent-soft, rgba(13, 148, 136, 0.12)); border: 1px solid var(--accent-border, rgba(13, 148, 136, 0.3)); padding: 2px 8px; border-radius: var(--radius-xs, 4px); font-weight: 700; } .bundle-pull-row { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; } .bundle-item-select { flex: 1; min-width: 180px; height: 36px; font-size: 0.8125rem; border-radius: var(--radius-sm); background: var(--bg-card); border: 1px solid var(--border-color); color: var(--text-main); padding: 0 0.625rem; } .bundle-qty-wrap { display: flex; align-items: center; gap: 0.375rem; } .bundle-qty-input { width: 54px; height: 36px; text-align: center; font-family: var(--font-mono, monospace); font-size: 0.8125rem; font-weight: 600; border-radius: var(--radius-sm); background: var(--bg-card); border: 1px solid var(--border-color); color: var(--text-main); } .bundle-add-btn { height: 36px; padding: 0 0.875rem; display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; font-weight: 600; white-space: nowrap; } .bundle-items-list { display: flex; flex-direction: column; gap: 0.375rem; max-height: 220px; overflow-y: auto; padding-right: 2px; } .bundle-item-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.5rem 0.75rem; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-sm); font-size: 0.8125rem; transition: border-color 0.15s ease; } .bundle-item-row:hover { border-color: var(--accent-border, rgba(13, 148, 136, 0.3)); } .bundle-item-left { display: flex; align-items: center; gap: 0.5rem; flex: 1; min-width: 0; } .bundle-item-name { font-weight: 600; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bundle-item-type-badge { font-size: 0.625rem; padding: 1px 6px; border-radius: 4px; text-transform: uppercase; font-weight: 700; letter-spacing: 0.04em; background: var(--bg-input); color: var(--text-muted); border: 1px solid var(--border-color); flex-shrink: 0; } .bundle-item-right { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; font-family: var(--font-mono, monospace); font-size: 0.75rem; } .bundle-item-math { color: var(--text-secondary); } .bundle-item-total { font-weight: 700; color: var(--text-main); } .bundle-item-del-btn { color: var(--text-muted); cursor: pointer; padding: 3px 6px; border-radius: 4px; background: transparent; border: none; transition: color 0.15s ease, background 0.15s ease; } .bundle-item-del-btn:hover { color: var(--status-red, #ef4444); background: rgba(239, 68, 68, 0.1); } .bundle-telemetry-bar { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.625rem 0.875rem; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-sm); margin-top: 0.25rem; flex-wrap: wrap; } .bundle-msrp-box { font-size: 0.75rem; color: var(--text-secondary); display: flex; align-items: center; gap: 0.375rem; } .bundle-savings-badge { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; font-weight: 700; font-family: var(--font-mono, monospace); padding: 2px 8px; border-radius: var(--radius-xs, 4px); background: rgba(16, 185, 129, 0.12); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.3); } .bundle-discount-presets { display: flex; align-items: center; gap: 0.25rem; } .bundle-preset-btn { font-size: 0.6875rem; font-weight: 600; padding: 2px 7px; border-radius: 4px; background: var(--bg-input); border: 1px solid var(--border-color); color: var(--text-muted); cursor: pointer; transition: all 0.15s ease; user-select: none; } .bundle-preset-btn:hover { color: var(--accent); border-color: var(--accent-border); background: var(--accent-soft); } .bundle-empty-state { padding: 1.25rem 0.75rem; text-align: center; color: var(--text-muted); font-size: 0.75rem; background: var(--bg-card); border: 1px dashed var(--border-color); border-radius: var(--radius-sm); } .bundle-components-hint { font-size: 0.6875rem; color: var(--text-muted); display: block; margin-top: 0.25rem; line-height: 1.35; } /* Order Fulfillment Stepper */ .order-stepper { display: flex; align-items: center; justify-content: space-between; padding: 0.875rem 1rem; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-sm); } .order-step { display: flex; flex-direction: column; align-items: center; gap: 0.375rem; position: relative; z-index: 1; } .order-step .step-dot { width: 32px; height: 32px; border-radius: 50%; background: var(--bg-card); border: 2px solid var(--border-color); color: var(--text-muted); display: flex; align-items: center; justify-content: center; font-size: 0.8125rem; transition: all 0.2s ease; } .order-step .step-label { font-size: 0.6875rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; transition: color 0.2s ease; } .step-line { flex: 1; height: 2px; background: var(--border-color); margin: 0 0.5rem 1rem 0.5rem; transition: background-color 0.2s ease; } .order-step.active .step-dot { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 10px oklch(0.55 0.14 180 / 0.25); } .order-step.active .step-label { color: var(--text-main); } .order-step.completed .step-dot { border-color: var(--status-green); color: #fff; background: var(--status-green); } .order-step.completed .step-label { color: var(--status-green); } .step-line.active { background: var(--status-green); } /* Compact density preference (v3-wave PRD 16.9) */ body.dense .dash-card { padding: 0.875rem 1rem; } body.dense .dash-table th, body.dense .dash-table td { padding: 0.375rem 0.625rem; } body.dense .kpi-card { padding: 0.875rem 1rem; } body.dense .kpi-grid { gap: 0.75rem; } /* Overview KPI deltas + sparklines (PRD 16.1) */ .kpi-delta { font-size: 0.6875rem; font-weight: 700; display: inline-flex; align-items: center; gap: 0.2rem; margin-top: 0.375rem; } .kpi-delta.up { color: var(--status-green, #22c55e); } .kpi-delta.down { color: var(--status-red); } .kpi-delta.neutral { color: var(--text-muted); } .kpi-delta.flat { display: none; } .kpi-spark { width: 100%; height: 28px; margin-top: 0.5rem; color: var(--accent, #0E9AA7); } /* Website & Brand Studio (law 2026-08-16) */ .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; } .form-hint { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.375rem; line-height: 1.5; } .text-amber { color: var(--status-amber, #f59e0b); } .btn-danger-soft { color: var(--status-red); border-color: rgba(239, 68, 68, 0.35); } .btn-danger-soft:hover { background: rgba(239, 68, 68, 0.08); color: var(--status-red); } /* ============================================================ SECTION OVERVIEW REDESIGN (Impeccable Neo Kinpaku & Triage Cockpit) ============================================================ */ /* Hero Command Bar */ .ov-hero { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; padding: 1rem 1.25rem; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); box-shadow: var(--shadow-card); margin-bottom: 1.25rem; position: relative; overflow: hidden; } .ov-hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--accent, #0E9AA7) 0%, oklch(70% 0.12 188) 50%, transparent 100%); } .ov-hero-left { display: flex; align-items: center; gap: 0.875rem; flex-wrap: wrap; } .ov-live-pulse-badge { display: inline-flex; align-items: center; gap: 0.75rem; padding: 0.45rem 0.85rem; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-sm); cursor: pointer; user-select: none; transition: border-color var(--t-fast, 0.15s) ease, background-color var(--t-fast, 0.15s) ease, transform var(--t-fast, 0.15s) ease; } .ov-live-pulse-badge:hover { border-color: var(--accent); transform: translateY(-1px); } .ov-live-pulse-badge:active { transform: translateY(0); } .ov-pulse-ring-wrap { position: relative; width: 14px; height: 14px; display: flex; align-items: center; justify-content: center; } .ov-pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: #10B981; position: relative; z-index: 2; } .ov-pulse-dot.amber { background: var(--status-amber, #F59E0B); } .ov-pulse-dot.red { background: var(--status-red, #EF4444); } .ov-pulse-ring { position: absolute; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid rgba(16, 185, 129, 0.6); animation: ov-pulse-ring 2.4s cubic-bezier(0.215, 0.61, 0.355, 1) infinite; z-index: 1; } .ov-pulse-ring.amber { border-color: rgba(245, 158, 11, 0.6); } @keyframes ov-pulse-ring { 0% { transform: scale(0.6); opacity: 0.8; } 60% { transform: scale(1.5); opacity: 0.15; } 100% { transform: scale(2); opacity: 0; } } .ov-live-text-wrap { display: flex; flex-direction: column; } .ov-live-title { font-size: 0.8125rem; font-weight: 600; color: var(--text-main); line-height: 1.2; } .ov-live-phone { font-size: 0.6875rem; color: var(--text-muted); letter-spacing: 0.02em; } .ov-line-active-pill, .ov-stealth-pill { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.65rem; font-size: 0.6875rem; font-weight: 600; background: rgba(14, 154, 167, 0.08); border: 1px solid rgba(14, 154, 167, 0.22); border-radius: var(--radius-xs, 4px); color: var(--accent, #0E9AA7); } .ov-hero-right { display: flex; align-items: center; gap: 0.875rem; flex-wrap: wrap; } .ov-ai-switch-box { display: flex; align-items: center; gap: 0.875rem; padding: 0.4rem 0.85rem; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-sm); } .ov-ai-switch-info { display: flex; flex-direction: column; } .ov-ai-switch-label { font-size: 0.8125rem; font-weight: 700; color: var(--text-main); line-height: 1.2; } .ov-ai-switch-sub { font-size: 0.6875rem; color: var(--text-muted); } .ov-hero-actions { display: flex; align-items: center; gap: 0.5rem; } /* ============================================================ PANEL: OVERVIEW COMMAND COCKPIT (ZERO-SCROLL VIEWPORT LAW) ============================================================ */ /* Desktop, Laptop & Tablet Viewport Lock: exactly 100vh with zero vertical page scroll */ @media (min-width: 768px) { html:has(#panel-overview.active), body:has(#panel-overview.active), body.panel-overview-active { height: 100vh !important; max-height: 100vh !important; overflow: hidden !important; } body:has(#panel-overview.active) .main, body.panel-overview-active .main { height: 100vh !important; max-height: 100vh !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; } body:has(#panel-overview.active) .content, body.panel-overview-active .content, .content:has(#panel-overview.active), .content.overview-active { padding: 0.45rem 1rem !important; max-width: 100% !important; flex: 1 1 0% !important; min-height: 0 !important; max-height: 100% !important; height: auto !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; box-sizing: border-box !important; } #panel-overview.active { display: flex !important; flex-direction: column !important; flex: 1 1 0% !important; height: 100% !important; min-height: 0 !important; max-height: 100% !important; gap: 0.45rem !important; overflow: hidden !important; } .ov-hero { padding: 0.35rem 0.75rem !important; flex-shrink: 0 !important; } .ov-kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 0.5rem !important; flex-shrink: 0 !important; } .ov-kpi-card { min-width: 0 !important; padding: 0.4rem 0.65rem 0.35rem 0.65rem !important; min-height: 74px !important; } .ov-matrix-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) !important; flex: 1 1 0% !important; min-height: 0 !important; gap: 0.5rem !important; margin-bottom: 0 !important; } .ov-matrix-card { min-width: 0 !important; padding: 0.5rem 0.75rem !important; height: 100% !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; } .ov-recent-list, .ov-agenda-list { flex: 1 1 0% !important; min-height: 0 !important; overflow-y: auto !important; } .ov-health-strip { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 0.5rem !important; flex-shrink: 0 !important; margin-top: 0 !important; } .ov-health-card { min-width: 0 !important; padding: 0.35rem 0.65rem !important; min-height: 48px !important; } } /* Command Hero Bar */ .ov-hero { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.45rem 0.85rem; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-sm); box-shadow: var(--shadow-card); flex-shrink: 0; } .ov-hero-left { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; } .ov-live-pulse-badge { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.65rem; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-sm); cursor: pointer; transition: border-color var(--t-fast); } .ov-live-pulse-badge:hover { border-color: var(--border-strong); } .ov-pulse-ring-wrap { position: relative; width: 10px; height: 10px; display: flex; align-items: center; justify-content: center; } .ov-pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--status-green); } .ov-pulse-dot.amber { background: var(--status-amber); } .ov-pulse-ring { position: absolute; inset: -3px; border-radius: 50%; border: 1.5px solid var(--status-green); animation: pulse-ring 2s infinite cubic-bezier(0.215, 0.61, 0.355, 1); } .ov-pulse-ring.amber { border-color: var(--status-amber); } @keyframes pulse-ring { 0% { transform: scale(0.6); opacity: 0.8; } 60% { transform: scale(1.5); opacity: 0.15; } 100% { transform: scale(2); opacity: 0; } } .ov-live-text-wrap { display: flex; flex-direction: column; } .ov-live-title { font-size: 0.8125rem; font-weight: 600; color: var(--text-main); line-height: 1.2; } .ov-live-phone { font-size: 0.6875rem; color: var(--text-muted); letter-spacing: 0.02em; } .ov-line-active-pill, .ov-stealth-pill { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.3rem 0.6rem; font-size: 0.6875rem; font-weight: 600; background: rgba(14, 154, 167, 0.08); border: 1px solid rgba(14, 154, 167, 0.22); border-radius: var(--radius-xs, 4px); color: var(--accent, #0E9AA7); } .ov-hero-right { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; } .ov-ai-switch-box { display: flex; align-items: center; gap: 0.75rem; padding: 0.35rem 0.75rem; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-sm); } .ov-ai-switch-info { display: flex; flex-direction: column; } .ov-ai-switch-label { font-size: 0.75rem; font-weight: 700; color: var(--text-main); line-height: 1.2; } .ov-ai-switch-sub { font-size: 0.65rem; color: var(--text-muted); } .ov-hero-actions { display: flex; align-items: center; gap: 0.5rem; } /* 4-Pillar Executive KPI Grid */ .ov-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.625rem; margin-bottom: 0; flex-shrink: 0; } .ov-kpi-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 0.625rem 0.875rem 0.5rem 0.875rem; box-shadow: var(--shadow-card); display: flex; flex-direction: column; justify-content: space-between; min-height: 94px; cursor: pointer; transition: transform var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast); position: relative; overflow: hidden; } .ov-kpi-card:hover { transform: translateY(-2px); border-color: var(--border-strong); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25); } .ov-kpi-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--ov-teal), transparent 70%); opacity: 0; transition: opacity var(--t-fast); } .ov-kpi-card:hover::before { opacity: 1; } .ov-kpi-card:nth-child(2)::before { background: linear-gradient(90deg, var(--ov-gold), transparent 70%); } .ov-kpi-card:nth-child(3)::before { background: linear-gradient(90deg, var(--ov-green), transparent 70%); } .ov-kpi-card:nth-child(4)::before { background: linear-gradient(90deg, var(--ov-purple), transparent 70%); } /* Light Theme KPI Card Craft Polish */ :root[data-theme="light"] .ov-kpi-card, body.light-theme .ov-kpi-card { background: #ffffff; border-color: oklch(0.18 0.03 240 / 0.10); box-shadow: 0 2px 8px oklch(0.18 0.03 240 / 0.04); } :root[data-theme="light"] .ov-kpi-card:hover, body.light-theme .ov-kpi-card:hover { border-color: oklch(0.18 0.03 240 / 0.22); box-shadow: 0 6px 16px oklch(0.18 0.03 240 / 0.08); } .ov-kpi-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.25rem; min-width: 0; gap: 0.25rem; } .ov-kpi-label { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); display: flex; align-items: center; gap: 0.35rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .ov-kpi-body { display: flex; flex-direction: column; min-width: 0; } .ov-kpi-val { font-size: clamp(1.05rem, 1.15vw, 1.3rem); font-weight: 700; line-height: 1.15; color: var(--text-main); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ov-kpi-sub { font-size: 0.625rem; color: var(--text-muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ov-kpi-spark-wrap { width: 100%; height: 28px; margin-top: 0.25rem; display: flex; align-items: flex-end; overflow: hidden !important; } .ov-kpi-chart { width: 100%; height: 28px; overflow: hidden !important; } .ov-kpi-chart .apexcharts-yaxis, .ov-kpi-chart .apexcharts-xaxis, .ov-kpi-chart .apexcharts-grid, .ov-kpi-chart .apexcharts-gridlines-horizontal, .ov-kpi-chart .apexcharts-gridlines-vertical { display: none !important; } .ov-kpi-chart .apexcharts-canvas { margin: 0 auto; } /* Operational Command Matrix: 60/40 Split */ .ov-matrix-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.35fr 1fr; gap: 0.625rem; margin-bottom: 0; } .ov-matrix-card { display: flex; flex-direction: column; height: 100%; min-height: 0; padding: 0.75rem 1rem 0.625rem 1rem; } .ov-matrix-card .dash-card-title { flex-shrink: 0; margin-bottom: 0.25rem; font-size: 0.875rem; } .ov-stream-intro { font-size: 0.6875rem; color: var(--text-muted); margin-bottom: 0.5rem; line-height: 1.3; flex-shrink: 0; } .ov-recent-list, .ov-agenda-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 0.375rem; padding-right: 0.25rem; } /* Slim Custom Scrollbars for lists */ .ov-recent-list::-webkit-scrollbar, .ov-agenda-list::-webkit-scrollbar { width: 5px; } .ov-recent-list::-webkit-scrollbar-thumb, .ov-agenda-list::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; } /* Real-time Inbound Triage Stream Rows */ .ov-stream-row { display: flex; align-items: center; justify-content: space-between; gap: 0.625rem; padding: 0.5rem 0.65rem; border-radius: var(--radius-sm); background: var(--bg-input); border: 1px solid var(--border-color); transition: background var(--t-fast), border-color var(--t-fast); flex-shrink: 0; } .ov-stream-row:hover { background: var(--bg-hover, rgba(255, 255, 255, 0.04)); border-color: var(--border-strong); } .ov-stream-main { display: flex; align-items: center; gap: 0.5rem; min-width: 0; flex: 1; } .ov-stream-avatar { width: 28px; height: 28px; border-radius: 50%; background: rgba(14, 154, 167, 0.12); color: var(--accent, #0E9AA7); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; flex-shrink: 0; } .ov-stream-avatar.amber { background: rgba(245, 158, 11, 0.12); color: var(--status-amber, #F59E0B); } .ov-stream-body { min-width: 0; overflow: hidden; } .ov-stream-top { display: flex; align-items: center; gap: 0.4rem; line-height: 1.2; } .ov-stream-phone { font-size: 0.75rem; font-weight: 600; color: var(--text-main); } .ov-stream-intent { font-size: 0.5625rem; font-weight: 600; padding: 0.1rem 0.35rem; border-radius: 3px; background: rgba(255, 255, 255, 0.06); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; } .ov-stream-msg { font-size: 0.6875rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; } .ov-stream-right { display: flex; align-items: center; gap: 0.4rem; flex-shrink: 0; } .ov-stream-time { font-size: 0.625rem; color: var(--text-muted); } /* Agenda / Dispatch List Items */ .ov-agenda-item { display: flex; align-items: center; justify-content: space-between; gap: 0.625rem; padding: 0.5rem 0.65rem; border-radius: var(--radius-sm); background: var(--bg-input); border: 1px solid var(--border-color); transition: border-color var(--t-fast); flex-shrink: 0; } .ov-agenda-item:hover { border-color: var(--border-strong); } .ov-agenda-left { display: flex; align-items: center; gap: 0.5rem; min-width: 0; flex: 1; } .ov-agenda-time { font-size: 0.6875rem; font-weight: 700; font-family: var(--font-mono, 'JetBrains Mono', monospace); color: var(--accent, #0E9AA7); padding: 0.2rem 0.4rem; background: rgba(14, 154, 167, 0.1); border-radius: 4px; white-space: nowrap; } .ov-agenda-body { min-width: 0; overflow: hidden; } .ov-agenda-name { font-size: 0.75rem; font-weight: 600; color: var(--text-main); line-height: 1.2; } .ov-agenda-service { font-size: 0.65rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; } .ov-agenda-status { flex-shrink: 0; } /* System Health & Security Strip */ .ov-health-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.625rem; margin-top: 0; flex-shrink: 0; } .ov-health-card { padding: 0.45rem 0.75rem; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-sm); box-shadow: var(--shadow-card); display: flex; flex-direction: column; justify-content: center; min-height: 64px; } .ov-health-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.2rem; } .ov-health-title { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-main); display: flex; align-items: center; gap: 0.35rem; } .ov-health-desc { font-size: 0.625rem; color: var(--text-muted); line-height: 1.25; margin-bottom: 0.25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ov-health-meta { font-size: 0.625rem; color: var(--text-muted); } .ov-quick-btns-row { display: flex; gap: 0.35rem; flex-wrap: wrap; } .ov-quick-btns-row .btn-dash { padding: 0.25rem 0.5rem; font-size: 0.6875rem; } /* Mobile Viewport Responsiveness: Best-in-class touch scroll */ @media (max-width: 767px) { .content:has(#panel-overview.active), .content.overview-active { height: auto !important; overflow-y: visible !important; padding: 1rem 0.875rem 2.5rem 0.875rem !important; } #panel-overview.active { height: auto !important; overflow-y: visible !important; gap: 1rem !important; } .ov-hero { flex-direction: column !important; align-items: stretch !important; gap: 0.75rem !important; } .ov-hero-right { justify-content: space-between !important; width: 100% !important; } .ov-kpi-grid { grid-template-columns: 1fr !important; gap: 0.75rem !important; } .ov-matrix-grid { grid-template-columns: 1fr !important; gap: 1rem !important; } .ov-recent-list, .ov-agenda-list { max-height: 320px !important; min-height: 180px !important; } .ov-health-strip { grid-template-columns: 1fr !important; gap: 0.75rem !important; } } /* ============================================================ OVERVIEW METRIC ANALYTICS DRILLDOWN MODAL ============================================================ */ .ov-metric-modal-card { max-width: 720px; width: 92vw; max-height: 90vh; display: flex; flex-direction: column; background: var(--bg-card); border: 1px solid var(--border-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-pop); } .ov-metric-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border-color); gap: 1rem; } .ov-metric-modal-title-wrap { display: flex; align-items: center; gap: 0.75rem; min-width: 0; } .ov-metric-modal-icon-badge { width: 38px; height: 38px; border-radius: var(--radius-sm); background: var(--accent-soft); border: 1px solid var(--accent-border); display: flex; align-items: center; justify-content: center; font-size: 1.125rem; flex-shrink: 0; } .ov-metric-modal-title { font-family: var(--font-heading); font-size: 1rem; font-weight: 700; color: var(--text-main); line-height: 1.2; } .ov-metric-modal-meta { display: flex; align-items: center; gap: 0.5rem; margin-top: 2px; } .ov-modal-val { font-size: 1.125rem; font-weight: 700; color: var(--text-main); } .ov-modal-filters { display: flex; align-items: center; gap: 0.75rem; } .ov-time-filter-group { display: inline-flex; padding: 2px; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-sm); gap: 2px; } .ov-filter-btn { padding: 0.25rem 0.65rem; font-size: 0.6875rem; font-weight: 600; border-radius: calc(var(--radius-sm) - 2px); color: var(--text-muted); transition: background var(--t-fast), color var(--t-fast); cursor: pointer; } .ov-filter-btn:hover { color: var(--text-main); background: var(--accent-soft-2); } .ov-filter-btn.active { background: var(--accent); color: var(--accent-ink, #000); font-weight: 700; } .ov-metric-modal-body { padding: 1.25rem; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 1rem; } .ov-modal-chart-wrap { width: 100%; min-height: 260px; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 0.75rem; } .ov-modal-breakdown-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; } @media (max-width: 640px) { .ov-modal-breakdown-grid { grid-template-columns: repeat(2, 1fr); } } .ov-breakdown-chip { background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 0.625rem 0.75rem; display: flex; flex-direction: column; } .ov-breakdown-label { font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 0.25rem; } .ov-breakdown-val { font-size: 1.125rem; font-weight: 700; color: var(--text-main); font-variant-numeric: tabular-nums; } .ov-breakdown-sub { font-size: 0.625rem; color: var(--text-muted); margin-top: 2px; } .ov-metric-modal-footer { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1.25rem; border-top: 1px solid var(--border-color); gap: 1rem; flex-wrap: wrap; } .ov-modal-footer-note { font-size: 0.6875rem; color: var(--text-muted); } .ov-modal-footer-actions { display: flex; gap: 0.5rem; align-items: center; } /* Light Theme Overview Modal & Stream Craft Polish */ :root[data-theme="light"] .ov-metric-modal-card, body.light-theme .ov-metric-modal-card { background: #ffffff; border: 1px solid oklch(0.18 0.03 240 / 0.14); box-shadow: 0 20px 50px oklch(0.18 0.03 240 / 0.12); } :root[data-theme="light"] .ov-modal-chart-wrap, body.light-theme .ov-modal-chart-wrap { background: oklch(0.98 0.01 240); border-color: oklch(0.18 0.03 240 / 0.10); } :root[data-theme="light"] .ov-breakdown-chip, body.light-theme .ov-breakdown-chip { background: oklch(0.98 0.01 240); border-color: oklch(0.18 0.03 240 / 0.10); } :root[data-theme="light"] .ov-time-filter-group, body.light-theme .ov-time-filter-group { background: oklch(0.95 0.01 240); border-color: oklch(0.18 0.03 240 / 0.12); } :root[data-theme="light"] .ov-filter-btn, body.light-theme .ov-filter-btn { color: oklch(0.40 0.03 240); } :root[data-theme="light"] .ov-filter-btn.active, body.light-theme .ov-filter-btn.active { background: var(--ov-teal); color: #ffffff; } :root[data-theme="light"] .ov-stream-row, body.light-theme .ov-stream-row { background: #ffffff; border-color: oklch(0.18 0.03 240 / 0.08); } :root[data-theme="light"] .ov-stream-row:hover, body.light-theme .ov-stream-row:hover { background: oklch(0.97 0.01 240); border-color: oklch(0.18 0.03 240 / 0.18); } :root[data-theme="light"] .ov-agenda-item, body.light-theme .ov-agenda-item { background: #ffffff; border-color: oklch(0.18 0.03 240 / 0.08); } :root[data-theme="light"] .ov-agenda-item:hover, body.light-theme .ov-agenda-item:hover { background: oklch(0.97 0.01 240); border-color: oklch(0.18 0.03 240 / 0.18); } :root[data-theme="light"] .ov-health-card, body.light-theme .ov-health-card { background: #ffffff; border-color: oklch(0.18 0.03 240 / 0.10); } /* Reviews panel rows (law 2026-08-16) */ .rev-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; padding: 0.75rem 0; border-bottom: 1px solid var(--border-color); } .rev-row:last-child { border-bottom: none; } .rev-main { flex: 1; min-width: 0; } .rev-stars { color: var(--status-amber, #f59e0b); font-size: 0.75rem; letter-spacing: 2px; } .rev-stars .star-off { opacity: 0.28; } .rev-quote { font-size: 0.875rem; color: var(--text-main); margin-top: 0.25rem; line-height: 1.5; } .rev-who { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.25rem; font-weight: 600; } .rev-who span { font-weight: 400; } .rev-actions { display: flex; gap: 0.4rem; flex-shrink: 0; } .font-mono { font-family: var(--font-mono, 'JetBrains Mono', monospace); } /* ============================================================ STOREFRONT STUDIO LIVE PREVIEWS & PRICING SHOWCASE ============================================================ */ .studio-preview-card { border: 1px solid var(--border-strong, var(--border-color)); border-radius: var(--radius-md, 8px); padding: 1.25rem; background: var(--bg-card, #111418); margin-top: 1rem; } .studio-preview-header { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent, #0E9AA7); margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.5rem; } .preview-banner-pill { padding: 0.5rem 1rem; background: var(--accent, #0E9AA7); color: var(--accent-text, #ffffff); border-radius: var(--radius-sm, 6px); display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; font-size: 0.8125rem; font-weight: 500; box-shadow: 0 4px 14px oklch(0.62 0.14 210 / 0.25); } .preview-banner-pill .btn-pill { padding: 0.25rem 0.625rem; background: rgba(0, 0, 0, 0.2); border-radius: var(--radius-xs, 4px); font-size: 0.75rem; font-weight: 600; white-space: nowrap; } .preview-hero-box { padding: 1.5rem; background: radial-gradient(circle at 50% 20%, oklch(0.18 0.03 240) 0%, oklch(0.13 0.02 240) 100%); border: 1px solid var(--border-color, rgba(255,255,255,0.08)); border-radius: var(--radius-md, 8px); text-align: center; } .preview-hero-eyebrow { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent, #0E9AA7); margin-bottom: 0.5rem; } .preview-hero-headline { font-family: var(--font-heading, inherit); font-size: 1.375rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.2; color: var(--text-main, #ffffff); margin-bottom: 0.625rem; } .preview-hero-subhead { font-size: 0.875rem; color: var(--text-secondary, rgba(255,255,255,0.7)); line-height: 1.5; max-width: 50ch; margin: 0 auto 1rem; } .preview-hero-ctas { display: flex; align-items: center; justify-content: center; gap: 0.75rem; flex-wrap: wrap; } .preview-pricing-card { border: 1px solid var(--border-color, rgba(255,255,255,0.08)); border-radius: var(--radius-md, 8px); padding: 1.25rem; background: var(--bg-card-subtle, rgba(255, 255, 255, 0.02)); display: flex; flex-direction: column; position: relative; } .preview-pricing-card.featured { border-color: var(--accent, #0E9AA7); box-shadow: 0 4px 20px oklch(0.62 0.14 210 / 0.15); } .preview-pricing-badge { position: absolute; top: -10px; right: 12px; padding: 0.2rem 0.5rem; background: var(--accent, #0E9AA7); color: var(--accent-text, #ffffff); border-radius: var(--radius-xs, 4px); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; } .preview-pricing-name { font-family: var(--font-heading, inherit); font-size: 1.125rem; font-weight: 700; color: var(--text-main, #ffffff); margin-bottom: 0.25rem; } .preview-pricing-desc { font-size: 0.8125rem; color: var(--text-secondary, rgba(255,255,255,0.7)); margin-bottom: 0.75rem; min-height: 2.2em; } .preview-pricing-price { font-family: var(--font-mono, monospace); font-size: 1.375rem; font-weight: 800; color: var(--text-main, #ffffff); } .preview-pricing-period { font-size: 0.75rem; color: var(--text-muted, rgba(255,255,255,0.45)); margin-bottom: 0.875rem; } .preview-pricing-features { list-style: none; padding: 0; margin: 0 0 1rem 0; flex-grow: 1; display: flex; flex-direction: column; gap: 0.375rem; font-size: 0.8125rem; color: var(--text-secondary, rgba(255,255,255,0.7)); } .preview-pricing-features li { display: flex; align-items: center; gap: 0.5rem; } .preview-pricing-features li i { color: var(--accent, #0E9AA7); font-size: 0.75rem; } /* Responsive Preview Modes & Device Toggles */ .preview-hero-box.preview-mobile-view { max-width: 380px; margin: 0 auto; padding: 1.125rem 0.875rem; } .preview-hero-box.preview-mobile-view .preview-hero-headline { font-size: 1.125rem; } .preview-hero-box.preview-mobile-view .preview-hero-subhead { font-size: 0.8125rem; } .grid-3.preview-mobile-view { grid-template-columns: 1fr !important; max-width: 380px; margin: 0 auto; } /* Floating Unsaved Changes Action Bar */ .studio-floating-bar { position: fixed; bottom: 1.5rem; right: 2rem; z-index: 1000; display: flex; align-items: center; gap: 0.875rem; background: oklch(0.18 0.03 240 / 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--accent, #0E9AA7); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 20px oklch(0.62 0.14 210 / 0.2); border-radius: var(--radius-sm, 6px); padding: 0.5rem 0.625rem 0.5rem 1.125rem; animation: slideUpFloating 0.25s cubic-bezier(0.16, 1, 0.3, 1); } @keyframes slideUpFloating { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .studio-floating-text { font-size: 0.8125rem; font-weight: 600; color: var(--text-main, #ffffff); display: flex; align-items: center; gap: 0.5rem; } .studio-floating-text i { color: oklch(0.78 0.15 65); } /* Studio Dropzones (Drag & Drop + Click File Pickers) */ .studio-dropzone { border: 2px dashed var(--border-color, rgba(255, 255, 255, 0.15)); border-radius: var(--radius-md, 10px); padding: 2rem 1.25rem; text-align: center; background: var(--bg-card-subtle, rgba(255, 255, 255, 0.02)); cursor: pointer; transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.15s ease; } .studio-dropzone:hover, .studio-dropzone.dragover { border-color: var(--accent, #0E9AA7); background: oklch(0.62 0.14 210 / 0.06); transform: translateY(-2px); } .studio-dropzone-icon { font-size: 2.25rem; color: var(--accent, #0E9AA7); margin-bottom: 0.75rem; } .studio-dropzone-title { font-family: var(--font-heading, inherit); font-size: 1rem; font-weight: 700; color: var(--text-main, #ffffff); margin-bottom: 0.375rem; } .studio-dropzone-sub { font-size: 0.8125rem; color: var(--text-secondary, rgba(255, 255, 255, 0.7)); margin-bottom: 1rem; } .studio-dropzone-hints { display: flex; justify-content: center; align-items: center; gap: 0.75rem; flex-wrap: wrap; } .studio-dropzone-hints span { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.25rem 0.625rem; background: rgba(255, 255, 255, 0.05); border-radius: var(--radius-xs, 4px); color: var(--text-muted, rgba(255, 255, 255, 0.5)); display: inline-flex; align-items: center; gap: 0.35rem; } .studio-dropzone-hints span i { color: var(--accent, #0E9AA7); } /* Video Preview Containers */ .studio-video-preview-box { background: #000; border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1)); border-radius: var(--radius-md, 8px); overflow: hidden; position: relative; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); } .studio-video-preview-box.horizontal-16-9 { aspect-ratio: 16 / 9; width: 100%; } .studio-video-preview-box.vertical-9-16 { aspect-ratio: 9 / 16; max-width: 280px; margin: 0 auto; } .studio-video-preview-box video { width: 100%; height: 100%; object-fit: cover; display: block; } /* ========================================================================== LIVE CHAT REDESIGN (impeccable 2026-09-02) — craft polish over the existing WhatsApp-authentic shell. Backend/JS contracts untouched. ========================================================================== */ /* Filter tabs -> 4-column fitted segmented control (zero horizontal scroll) */ .chat-inbox-filter-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; padding: 3px; width: 100%; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-sm, 8px); overflow: hidden; box-sizing: border-box; } .chat-inbox-filter-tabs .pill-tab { display: inline-flex; align-items: center; justify-content: center; gap: 0.25rem; padding: 0.35rem 0.2rem; font-size: 0.6875rem; font-weight: 600; border-radius: 6px; color: var(--text-muted); border: none; background: transparent; white-space: nowrap; cursor: pointer; min-width: 0; transition: background 0.16s var(--ease-out, ease), color 0.16s var(--ease-out, ease), box-shadow 0.16s var(--ease-out, ease); line-height: 1.2; } .chat-inbox-filter-tabs .pill-tab:hover { color: var(--text-main); } .chat-inbox-filter-tabs .pill-tab.active { background: var(--bg-card); color: var(--text-main); box-shadow: 0 1px 2px rgba(0,0,0,0.16); } /* Inbox items -> borderless, accent ring on active, unread dot */ .chat-inbox-item { border: none; background: var(--bg-input); border-radius: 10px; box-shadow: none; } .chat-inbox-item:hover { background: var(--bg-card-hover, var(--bg-input)); transform: none; } .chat-inbox-item.active { background: var(--accent-soft-2, rgba(14, 154, 167, 0.12)); box-shadow: inset 0 0 0 1.5px var(--accent); } .chat-inbox-item.unread::before { content: ''; position: absolute; top: 50%; right: 0.55rem; transform: translateY(-50%); width: 7px; height: 7px; border-radius: 50%; background: #25d366; } /* Thread header avatar ring */ .chat-customer-avatar { box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 3.5px var(--accent); } /* Bubbles: softer, brand accent on AI sender pill */ .chat-bubble { box-shadow: 0 1px 1px rgba(0,0,0,0.12); } .chat-bubble.out.ai { border-radius: 14px 4px 14px 14px; } .chat-bubble.out.ai .chat-bubble-sender-pill { color: var(--accent); } .chat-bubble.in { border-radius: 4px 14px 14px 14px; } /* Slash pills: lift + border */ .chat-slash-pill { border: 1px solid var(--border-color); border-radius: 999px; transition: border-color 0.15s ease, transform 0.15s ease; } .chat-slash-pill:hover { border-color: var(--accent); transform: translateY(-1px); } /* Composer */ .chat-send-bar { padding-top: 0.625rem; } .chat-input-wrapper { border: 1px solid var(--border-color); border-radius: 12px; background: var(--bg-input); transition: border-color 0.15s ease, box-shadow 0.15s ease; } .chat-input-wrapper:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .chat-input-field { border: none !important; background: transparent !important; } /* Dossier: metric tiles + memory box tint */ .chat-dossier-card { padding: 1rem; } .dossier-metric-item { background: var(--bg-input); border: 1px solid var(--border-color); border-radius: 10px; padding: 0.55rem 0.65rem; } .dossier-memory-box { background: var(--bg-input); border: 1px solid var(--border-color); border-radius: 10px; padding: 0.65rem 0.75rem; line-height: 1.55; } /* Dossier drawer on ALL sizes (law 2026-09-02): the toggle must work on desktop too — 2 columns + slide-in dossier everywhere with always-visible close button. */ .chat-layout { grid-template-columns: 340px 1fr; position: relative; overflow: hidden; } .chat-dossier-backdrop { display: none; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); z-index: 45; opacity: 0; transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1); pointer-events: none; } .chat-layout.dossier-open .chat-dossier-backdrop { display: block; opacity: 1; pointer-events: auto; } #btn-toggle-dossier.active { background: var(--accent-soft) !important; border-color: var(--accent) !important; color: var(--accent) !important; } .chat-dossier-card { position: absolute; top: 0; right: -380px; width: 360px; max-width: 90vw; height: 100%; z-index: 50; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); box-shadow: -8px 0 32px rgba(0, 0, 0, 0.4); transition: right 0.25s cubic-bezier(0.16, 1, 0.3, 1); display: flex; flex-direction: column; padding: 1.125rem; overflow: hidden; } .chat-layout.dossier-open .chat-dossier-card { right: 0; } .dossier-close-btn { display: inline-flex !important; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--radius-xs); background: var(--bg-input); border: 1px solid var(--border-color); color: var(--text-muted); cursor: pointer; font-size: 0.875rem; transition: all 0.15s ease; flex-shrink: 0; } .dossier-close-btn:hover { background: var(--bg-card-hover); color: var(--text-main); border-color: var(--border-strong); } .dossier-memory-content { display: flex; flex-direction: column; gap: 0.375rem; font-size: 0.8125rem; line-height: 1.5; color: var(--text-secondary); } .dossier-memory-bullet { display: flex; gap: 0.375rem; padding-left: 0.25rem; } .dossier-memory-para { color: var(--text-secondary); font-size: 0.8125rem; } /* ============================================================ WAREHOUSE & CATALOG REDESIGN (IMPECCABLE & DESIGN-TASTE-FRONTEND) ============================================================ */ .cat-segmented-tabs { display: flex; align-items: center; gap: 0.25rem; padding: 0.25rem; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-sm); margin-bottom: 1.25rem; overflow-x: auto; } .cat-segmented-tabs .btn-tab { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.875rem; font-size: 0.8125rem; font-weight: 600; color: var(--text-muted); border: none; background: transparent; border-radius: var(--radius-xs); cursor: pointer; transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1); white-space: nowrap; } .cat-segmented-tabs .btn-tab:hover { color: var(--text-main); } .cat-segmented-tabs .btn-tab.active { background: var(--bg-card); color: var(--text-main); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16); } .cat-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.875rem; margin-bottom: 1.25rem; } .cat-kpi-card { display: flex; align-items: center; gap: 0.875rem; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 0.875rem 1rem; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); transition: transform 0.2s ease, border-color 0.2s ease; } .cat-kpi-card:hover { border-color: var(--border-strong); transform: translateY(-1px); } .cat-kpi-icon { width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--accent-soft); display: flex; align-items: center; justify-content: center; font-size: 1.125rem; flex-shrink: 0; } .cat-kpi-content { display: flex; flex-direction: column; min-width: 0; } .cat-kpi-value { font-family: var(--font-heading); font-weight: 700; font-size: 1.25rem; color: var(--text-main); line-height: 1.2; font-variant-numeric: tabular-nums; } .cat-kpi-label { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.125rem; white-space: nowrap; } .catalog-toolbar-2tier { display: flex; flex-direction: column; gap: 0.875rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border-color); } .cat-toolbar-tier1 { display: flex; align-items: center; justify-content: space-between; gap: 0.875rem; flex-wrap: wrap; } .cat-search-wrapper { position: relative; flex: 1; min-width: 240px; } .cat-search-icon { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 0.8125rem; pointer-events: none; } .cat-search-input { padding-left: 2.125rem !important; } .cat-toolbar-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .cat-toolbar-btn { font-size: 0.8125rem; padding: 0.45rem 0.875rem; } .cat-sort-wrapper { position: relative; display: inline-flex; align-items: center; } .cat-sort-icon { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); pointer-events: none; font-size: 0.75rem; opacity: 0.85; } .cat-toolbar-sort-select { padding: 0.45rem 0.85rem 0.45rem 2rem; font-size: 0.78125rem; font-weight: 500; border-radius: var(--radius-sm, 6px); border: 1px solid var(--border-color); background: var(--bg-card); color: var(--text-main); cursor: pointer; outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; } .cat-toolbar-sort-select:hover { border-color: var(--border-strong); background: var(--bg-hover, rgba(255, 255, 255, 0.04)); } .cat-toolbar-sort-select:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft, rgba(14, 165, 233, 0.15)); } [data-theme="light"] .cat-toolbar-sort-select { background: #ffffff; border-color: rgba(0, 0, 0, 0.12); color: var(--text-main); } [data-theme="light"] .cat-toolbar-sort-select:hover { background: #f8fafc; border-color: rgba(0, 0, 0, 0.2); } .cat-toolbar-tier2 { display: flex; align-items: center; overflow-x: auto; padding-bottom: 2px; } .cat-chips-group { display: flex; align-items: center; gap: 0.375rem; } .cat-chips-group .filter-chip { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; font-weight: 600; padding: 0.3rem 0.625rem; border-radius: var(--radius-full); border: 1px solid var(--border-color); background: var(--bg-input); color: var(--text-secondary); cursor: pointer; transition: all 0.15s ease; white-space: nowrap; } .cat-chips-group .filter-chip:hover { border-color: var(--border-strong); color: var(--text-main); } .cat-chips-group .filter-chip.active { background: var(--accent); border-color: var(--accent); color: #ffffff; } .cat-chips-group .filter-chip .chip-count { font-size: 0.6875rem; padding: 0.1rem 0.375rem; border-radius: var(--radius-full); background: rgba(0, 0, 0, 0.15); font-variant-numeric: tabular-nums; } .catalog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; margin-top: 1.25rem; margin-bottom: 1.25rem; } .cat-card { position: relative; display: flex; flex-direction: column; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md, 12px); padding: 1rem; transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); } .cat-card:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24); border-color: var(--accent-border, oklch(0.62 0.14 210 / 0.45)); } .cat-card.cat-inactive { opacity: 0.6; } .cat-card.cat-dragging { opacity: 0.45; border-style: dashed; } .cat-card.cat-dragover { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); } .cat-card-top { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; } .cat-card-badges-wrap { display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; flex: 1; } .cat-active-toggle { margin-left: auto; flex-shrink: 0; transform: scale(0.85); transform-origin: right center; } .cat-thumb { height: 130px; border-radius: var(--radius-sm, 8px); overflow: hidden; background: var(--bg-input); border: 1px solid var(--border-color); margin-bottom: 0.75rem; display: flex; align-items: center; justify-content: center; color: var(--text-muted); position: relative; } .cat-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .cat-card:hover .cat-thumb img { transform: scale(1.03); } .cat-thumb-empty i { font-size: 2.25rem; color: var(--accent); opacity: 0.55; } .cat-card-body { display: flex; flex-direction: column; flex: 1; } .cat-name { font-weight: 600; font-size: 0.9375rem; color: var(--text-main); line-height: 1.35; } .cat-name-alt { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.125rem; } .cat-desc { font-size: 0.8125rem; color: var(--text-secondary); line-height: 1.45; margin-top: 0.375rem; max-width: 65ch; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .cat-price-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: auto; padding-top: 0.75rem; border-top: 1px solid var(--border-color); } .cat-price { font-family: var(--font-heading); font-feature-settings: 'tnum' 1, 'lnum' 1; font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.125rem; color: var(--accent); letter-spacing: -0.01em; } .cat-currency-pill { font-size: 0.6875rem; font-weight: 700; color: var(--text-muted); background: var(--bg-input); border: 1px solid var(--border-color); padding: 0.15rem 0.45rem; border-radius: var(--radius-full); font-family: var(--font-mono, monospace); } .cat-actions { display: flex; align-items: center; gap: 0.375rem; margin-top: 0.625rem; padding-top: 0.625rem; border-top: 1px solid var(--border-color); flex-wrap: wrap; } .cat-actions .btn-dash { font-size: 0.75rem; padding: 0.3rem 0.625rem; } .cat-reorder { display: inline-flex; align-items: center; gap: 0.25rem; margin-left: auto; } .promo-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 1rem 1.25rem; margin-bottom: 0.75rem; transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); } .promo-card:hover { border-color: var(--border-strong); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16); } .promo-card-top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.625rem; } .promo-card-badges { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .promo-code-badge { font-family: var(--font-mono, monospace); font-weight: 700; font-size: 0.875rem; color: var(--accent); background: var(--accent-soft); border: 1px solid oklch(0.62 0.14 210 / 0.3); padding: 0.25rem 0.625rem; border-radius: var(--radius-xs); display: inline-flex; align-items: center; gap: 0.375rem; letter-spacing: 0.05em; } .promo-card-target { font-size: 0.8125rem; color: var(--text-secondary); display: flex; align-items: center; gap: 0.375rem; margin-bottom: 0.375rem; } .promo-card-rules { font-size: 0.75rem; color: var(--text-muted); background: var(--bg-input); padding: 0.375rem 0.625rem; border-radius: var(--radius-xs); border: 1px solid var(--border-color); line-height: 1.4; } .cat-doc-split { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 1rem; } @media (max-width: 900px) { .cat-doc-split { grid-template-columns: 1fr; } } .doc-dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2rem 1.5rem; background: var(--bg-input); border: 2px dashed var(--border-color); border-radius: var(--radius-md); cursor: pointer; transition: all 0.2s ease; margin-bottom: 1rem; } .doc-dropzone:hover, .doc-dropzone:focus { border-color: var(--accent); background: var(--accent-soft-2, rgba(14, 154, 167, 0.06)); } .doc-dropzone-title { font-weight: 600; font-size: 0.9375rem; color: var(--text-main); margin-bottom: 0.25rem; } .doc-dropzone-sub { font-size: 0.75rem; color: var(--text-muted); max-width: 320px; } /* ============================================================ D3 DATA VISUALIZATIONS & HYPERFRAMES MOTION (PANE 4 & CARDS) ============================================================ */ /* Hyperframes Ripple & Staggered Reveal Animation */ @keyframes catCardReveal { from { opacity: 0; transform: translateY(12px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } .catalog-grid .cat-card { animation: catCardReveal 0.35s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: calc(var(--item-idx, 0) * 35ms); } .cat-subpane { animation: catPaneFade 0.22s cubic-bezier(0.16, 1, 0.3, 1); max-width: 100%; min-width: 0; } #cat-pane-analytics { max-width: 100%; min-width: 0; overflow-x: hidden; } @keyframes catPaneFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* ============================================================ CATALOG INTELLIGENCE & INSIGHTS (ApexCharts Telemetry & High-Capacity Ledger) ============================================================ */ /* Dual ApexCharts Visual Telemetry Studio */ .cat-insights-charts-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; margin-bottom: 1rem; min-width: 0; max-width: 100%; } @media (max-width: 1024px) { .cat-insights-charts-grid { grid-template-columns: 1fr; } } .cat-chart-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 1.125rem 1.25rem; display: flex; flex-direction: column; transition: border-color var(--t-fast) var(--ease-out); min-width: 0; max-width: 100%; overflow: hidden; } .cat-chart-card:hover { border-color: var(--accent-border, var(--border-strong)); } .cat-apex-chart-wrap { width: 100%; max-width: 100%; min-width: 0; min-height: 260px; position: relative; overflow: hidden; } .cat-apex-chart-wrap .apexcharts-canvas { max-width: 100% !important; } .cat-apex-chart-wrap svg { max-width: 100% !important; } .cat-apex-chart-wrap .apexcharts-series path, .cat-apex-chart-wrap .apexcharts-pie-area, .cat-apex-chart-wrap .apexcharts-bar-area { cursor: pointer; transition: opacity var(--t-fast) ease; } .cat-apex-chart-wrap .apexcharts-datalabel, .cat-apex-chart-wrap .apexcharts-data-labels { pointer-events: none; } .cat-chart-toggle-group { display: inline-flex; gap: 0.25rem; align-items: center; background: var(--bg-input); padding: 0.2rem; border-radius: var(--radius-full); border: 1px solid var(--border-color); } .cat-chart-toggle-group .pill-tab { font-size: 0.6875rem; padding: 0.2rem 0.55rem; border-radius: var(--radius-full); border: none; background: transparent; color: var(--text-secondary); cursor: pointer; font-weight: 600; transition: all var(--t-fast) ease; } .cat-chart-toggle-group .pill-tab.active { background: var(--bg-card); color: var(--text-main); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); } .cat-chip-summary { font-size: 0.6875rem; font-weight: 600; font-family: inherit; letter-spacing: 0.01em; padding: 0.25rem 0.625rem; border-radius: var(--radius-full); background: var(--bg-input); border: 1px solid var(--border-color); color: var(--text-secondary); display: inline-flex; align-items: center; gap: 0.35rem; } /* High-Capacity Ledger Items & Rows */ .cat-ledger-item { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.625rem 0.875rem; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-sm); transition: all var(--t-fast) ease; animation: catCardReveal 0.25s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: var(--row-delay, 0ms); } .cat-ledger-item:hover { background: var(--bg-card); border-color: var(--accent-border, var(--border-strong)); transform: translateY(-1px); } .cat-ledger-meta { display: flex; align-items: center; gap: 0.5rem; min-width: 0; flex: 1; } .cat-ledger-rank { font-size: 0.6875rem; font-weight: 700; font-family: var(--font-mono, monospace); padding: 0.15rem 0.45rem; border-radius: var(--radius-xs); line-height: 1; flex-shrink: 0; background: var(--bg-card); color: var(--text-muted); border: 1px solid var(--border-color); } .cat-ledger-rank.rank-1 { background: rgba(226, 177, 60, 0.15); color: #fbbf24; border-color: rgba(226, 177, 60, 0.35); } .cat-ledger-rank.rank-2 { background: rgba(148, 163, 184, 0.15); color: var(--text-main); border-color: var(--border-color); } .cat-ledger-rank.rank-3 { background: rgba(217, 119, 6, 0.15); color: #f59e0b; border-color: rgba(217, 119, 6, 0.35); } .cat-ledger-title { font-size: 0.8125rem; font-weight: 600; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cat-ledger-stats { display: flex; align-items: center; gap: 0.625rem; flex-shrink: 0; } .cat-category-chip { font-size: 0.6875rem; padding: 0.15rem 0.45rem; border-radius: var(--radius-xs); background: var(--bg-card); color: var(--text-muted); border: 1px solid var(--border-color); white-space: nowrap; } /* Stock & Inventory Radar Badges (OKLCH Color Science) */ .cat-stock-pill { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.6875rem; font-weight: 600; padding: 0.15rem 0.45rem; border-radius: var(--radius-xs, 4px); line-height: 1.25; white-space: nowrap; } .cat-stock-pill.stock-pill-optimal { background: oklch(0.24 0.05 160 / 0.4); color: oklch(0.82 0.09 160); border: 1px solid oklch(0.45 0.10 160 / 0.35); } .cat-stock-pill.stock-pill-low { background: oklch(0.24 0.05 85 / 0.4); color: oklch(0.82 0.09 85); border: 1px solid oklch(0.45 0.10 85 / 0.35); } .cat-stock-pill.stock-pill-out { background: oklch(0.24 0.05 25 / 0.4); color: oklch(0.82 0.09 25); border: 1px solid oklch(0.45 0.10 25 / 0.35); } .cat-stock-pill.stock-pill-service { background: oklch(0.24 0.05 285 / 0.4); color: oklch(0.82 0.08 285); border: 1px solid oklch(0.45 0.10 285 / 0.35); } /* Light theme overrides for high contrast (WCAG AA >= 4.5:1) */ :root[data-theme="light"] .cat-stock-pill.stock-pill-optimal, [data-theme="light"] .cat-stock-pill.stock-pill-optimal { background: oklch(0.96 0.02 160); color: oklch(0.35 0.17 160); border-color: oklch(0.62 0.17 160 / 0.35); } :root[data-theme="light"] .cat-stock-pill.stock-pill-low, [data-theme="light"] .cat-stock-pill.stock-pill-low { background: oklch(0.96 0.02 85); color: oklch(0.38 0.16 85); border-color: oklch(0.65 0.16 85 / 0.35); } :root[data-theme="light"] .cat-stock-pill.stock-pill-out, [data-theme="light"] .cat-stock-pill.stock-pill-out { background: oklch(0.96 0.02 25); color: oklch(0.38 0.20 25); border-color: oklch(0.65 0.20 25 / 0.35); } :root[data-theme="light"] .cat-stock-pill.stock-pill-service, [data-theme="light"] .cat-stock-pill.stock-pill-service { background: oklch(0.96 0.02 285); color: oklch(0.35 0.14 285); border-color: oklch(0.40 0.12 285 / 0.25); } :root[data-theme="light"] .cat-ledger-item, [data-theme="light"] .cat-ledger-item { background: #ffffff; border-color: oklch(0.18 0.03 240 / 0.10); box-shadow: 0 1px 3px oklch(0.18 0.03 240 / 0.03); } :root[data-theme="light"] .cat-ledger-item:hover, [data-theme="light"] .cat-ledger-item:hover { background: oklch(0.98 0.01 240); border-color: var(--accent); } /* Autonomous AI Commerce Governance Bar */ .cat-auto-ecosystem-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 1.125rem 1.25rem; transition: border-color var(--t-fast) var(--ease-out); } .cat-auto-ecosystem-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.875rem; } .cat-auto-status-pill { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.6875rem; font-weight: 700; padding: 0.25rem 0.625rem; border-radius: var(--radius-full); background: rgba(16, 185, 129, 0.12); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.3); } :root[data-theme="light"] .cat-auto-status-pill, [data-theme="light"] .cat-auto-status-pill { background: #ecfdf5; color: #047857; border-color: #a7f3d0; } .cat-auto-policies-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; } @media (max-width: 1024px) { .cat-auto-policies-grid { grid-template-columns: 1fr; } } .cat-auto-policy-card { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.75rem 0.875rem; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-sm); transition: all var(--t-fast) ease; } .cat-auto-policy-card:hover { background: var(--bg-card); border-color: var(--accent-border, var(--border-strong)); } .cat-auto-policy-icon { width: 28px; height: 28px; border-radius: var(--radius-xs); background: var(--bg-card); border: 1px solid var(--border-color); display: flex; align-items: center; justify-content: center; font-size: 0.8125rem; flex-shrink: 0; } .cat-auto-policy-body { flex: 1; min-width: 0; } .cat-auto-policy-title { font-size: 0.8125rem; font-weight: 600; color: var(--text-main); line-height: 1.25; } .cat-auto-policy-sub { font-size: 0.6875rem; color: var(--text-muted); margin-top: 0.2rem; line-height: 1.35; } .cat-auto-policy-badge { font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.15rem 0.4rem; border-radius: var(--radius-xs); background: var(--bg-card); color: var(--text-secondary); border: 1px solid var(--border-color); flex-shrink: 0; align-self: flex-start; } /* Category Thresholds Modal & Table */ .cat-thresh-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.625rem 0.875rem; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-sm); transition: border-color var(--t-fast) ease; } .cat-thresh-row:hover { border-color: var(--accent); } .cat-thresh-row-meta { display: flex; align-items: center; gap: 0.5rem; flex: 1; min-width: 0; } .cat-thresh-row-title { font-size: 0.8125rem; font-weight: 600; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cat-thresh-row-count { font-size: 0.6875rem; color: var(--text-muted); font-family: var(--font-mono, monospace); padding: 0.1rem 0.4rem; background: var(--bg-input); border-radius: var(--radius-xs); } .cat-thresh-row-input-wrap { display: flex; align-items: center; gap: 0.35rem; } .cat-thresh-input { width: 65px; padding: 0.3rem 0.4rem; text-align: center; font-size: 0.8125rem; font-family: var(--font-mono, monospace); font-weight: 700; } /* Mobile & Tablet Responsiveness Hardening */ @media (max-width: 768px) { .cat-ledger-item { flex-direction: column; align-items: stretch; gap: 0.5rem; padding: 0.75rem; } .cat-ledger-meta { flex-wrap: wrap; gap: 0.375rem; } .cat-ledger-title { width: 100%; margin-bottom: 0.15rem; } .cat-ledger-stats { display: flex; align-items: center; justify-content: space-between; width: 100%; padding-top: 0.375rem; border-top: 1px solid var(--border-color); } .cat-insight-toolbar > div:first-child { flex-direction: column; align-items: stretch; } .cat-insight-search-wrap { width: 100%; min-width: 0; } .cat-custom-select { width: 100%; } .cat-select-trigger { width: 100%; justify-content: space-between; } .cat-select-menu { width: 100%; } .cat-insight-filters { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 0.25rem; } .cat-insight-filters::-webkit-scrollbar { display: none; } } /* Refined Coupon Promo Card Design */ .cat-promo-list { display: flex; flex-direction: column; gap: 0.875rem; margin-top: 1rem; } .promo-card { position: relative; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md, 12px); padding: 1.125rem 1.25rem; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; gap: 0.625rem; } .promo-card:hover { border-color: var(--accent-border, oklch(0.62 0.14 210 / 0.45)); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); } .promo-card-top { display: flex; align-items: center; justify-content: space-between; gap: 0.875rem; flex-wrap: wrap; } .promo-card-badges { display: flex; align-items: center; gap: 0.625rem; flex-wrap: wrap; } .promo-code-badge { font-family: var(--font-mono, monospace); font-weight: 700; font-size: 0.9375rem; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-border, oklch(0.62 0.14 210 / 0.3)); padding: 0.3rem 0.75rem; border-radius: var(--radius-xs); display: inline-flex; align-items: center; gap: 0.5rem; letter-spacing: 0.04em; } .promo-discount-pill { font-family: var(--font-heading); font-weight: 700; font-size: 0.875rem; padding: 0.25rem 0.625rem; border-radius: var(--radius-full); } .promo-card-meta { display: flex; align-items: center; gap: 0.625rem; margin-left: auto; } .promo-delete-btn { color: var(--text-muted); transition: color 0.15s ease, background-color 0.15s ease; } .promo-delete-btn:hover { color: var(--status-red, #ef4444); border-color: var(--status-red-border, #ef4444); } .promo-card-target { font-size: 0.8125rem; color: var(--text-secondary); display: flex; align-items: center; gap: 0.5rem; } .promo-card-rules { font-size: 0.75rem; color: var(--text-muted); background: var(--bg-input); padding: 0.5rem 0.75rem; border-radius: var(--radius-sm); border: 1px solid var(--border-color); line-height: 1.45; font-family: var(--font-mono, monospace); } /* ============================================================ LIVE FLOOR & FACILITY STATIONS (PRD Universal Units) ============================================================ */ .spaces-kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; } .spaces-kpi-card { padding: 1.125rem 1.25rem; display: flex; flex-direction: column; gap: 0.375rem; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md, 10px); } .spaces-kpi-head { display: flex; align-items: center; justify-content: space-between; font-size: 0.8125rem; color: var(--text-secondary); font-weight: 600; } .spaces-kpi-val { font-size: 1.75rem; font-weight: 800; line-height: 1.1; color: var(--text-primary); } .spaces-kpi-sub { font-size: 0.75rem; color: var(--text-muted); } @media (max-width: 960px) { .spaces-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .spaces-kpi-grid { grid-template-columns: 1fr; gap: 0.75rem; } } /* Spaces Toolbar Card & Tactical Segmented Filters */ .spaces-toolbar-card { position: relative; margin-bottom: 1.25rem; padding: 0; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md, 10px); overflow: hidden; box-shadow: var(--shadow-card, 0 1px 3px rgba(0,0,0,0.06)); } .spaces-toolbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.875rem 1.125rem; flex-wrap: wrap; } /* Precision Segmented Filter Track (Neo Kinpaku Standard) */ .station-filter-pills { display: inline-flex; align-items: center; gap: 3px; padding: 3px; background: var(--bg-track, oklch(0.13 0.015 240)); border: 1px solid var(--border-color); border-radius: var(--radius-md, 8px); flex-wrap: wrap; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25); } :root[data-theme="light"] .station-filter-pills, body.light-theme .station-filter-pills, html.light-theme .station-filter-pills { background: oklch(0.95 0.006 240); border-color: oklch(0.18 0.03 240 / 0.08); box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04); } /* Precision Segmented Chip Button */ .spaces-filter-chip { display: inline-flex; align-items: center; gap: 0.45rem; height: 32px; padding: 0 0.75rem; border-radius: calc(var(--radius-md, 8px) - 2px); background: transparent; border: 1px solid transparent; font-size: 0.78125rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; white-space: nowrap; transition: background-color var(--t-fast, 0.14s) var(--ease-out), border-color var(--t-fast, 0.14s) var(--ease-out), box-shadow var(--t-fast, 0.14s) var(--ease-out), color var(--t-fast, 0.14s) var(--ease-out); user-select: none; } .spaces-filter-chip:hover { background: var(--bg-hover, rgba(255, 255, 255, 0.05)); color: var(--text-main); } :root[data-theme="light"] .spaces-filter-chip:hover, body.light-theme .spaces-filter-chip:hover, html.light-theme .spaces-filter-chip:hover { background: rgba(15, 23, 42, 0.04); color: var(--text-main); } .spaces-filter-chip:active { transform: scale(0.98); } .spaces-filter-chip.active { background: oklch(0.20 0.02 240); border-color: oklch(0.95 0.01 240 / 0.16); color: var(--text-main); font-weight: 600; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45); } :root[data-theme="light"] .spaces-filter-chip.active, body.light-theme .spaces-filter-chip.active, html.light-theme .spaces-filter-chip.active { background: #ffffff; border-color: oklch(0.18 0.03 240 / 0.10); color: var(--text-main); box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04); } /* Semantic Status Icon Accents */ #st-filter-all i { color: var(--text-muted); transition: color 0.14s ease; } .spaces-filter-chip.active#st-filter-all i { color: var(--accent); } #st-filter-available i { color: var(--status-green) !important; } #st-filter-occupied i { color: var(--status-amber) !important; } #st-filter-paid i { color: var(--status-blue) !important; } #st-filter-reserved i { color: var(--status-purple) !important; } /* Border-Free Optical Capsule Counter Pills */ .spaces-filter-chip .chip-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 18px; padding: 0 0.45rem; border-radius: 9999px; border: none !important; font-family: var(--font-mono, monospace); font-size: 0.6875rem; font-weight: 600; background: oklch(0.95 0.01 240 / 0.08); color: oklch(0.95 0.01 240 / 0.70); margin-left: 0.15rem; transition: background-color var(--t-fast, 0.14s) ease, color var(--t-fast, 0.14s) ease; } :root[data-theme="light"] .spaces-filter-chip .chip-count, body.light-theme .spaces-filter-chip .chip-count, html.light-theme .spaces-filter-chip .chip-count { background: oklch(0.18 0.03 240 / 0.06); color: oklch(0.18 0.03 240 / 0.65); } .spaces-filter-chip.active .chip-count { background: oklch(0.52 0.14 205 / 0.25) !important; color: oklch(0.72 0.15 205) !important; border-color: transparent !important; } :root[data-theme="light"] .spaces-filter-chip.active .chip-count, body.light-theme .spaces-filter-chip.active .chip-count, html.light-theme .spaces-filter-chip.active .chip-count { background: oklch(0.42 0.12 205 / 0.12) !important; color: oklch(0.42 0.12 205) !important; } .spaces-toolbar-right { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; } .spaces-live-occupancy-pill { display: inline-flex; align-items: center; gap: 0.45rem; height: 30px; padding: 0 0.625rem; border-radius: var(--radius-sm, 6px); background: var(--bg-input, rgba(255, 255, 255, 0.03)); border: 1px solid var(--border-color); font-size: 0.75rem; color: var(--text-secondary); white-space: nowrap; } .spaces-occupancy-pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-teal, #0d9488); box-shadow: 0 0 0 0 rgba(13, 148, 136, 0.6); animation: spacesPulse 2s infinite cubic-bezier(0.4, 0, 0.6, 1); } @keyframes spacesPulse { 0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(13, 148, 136, 0.7); } 70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(13, 148, 136, 0); } 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(13, 148, 136, 0); } } .spaces-occupancy-label { font-weight: 500; font-size: 0.6875rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; } .spaces-occupancy-val { font-weight: 700; color: var(--text-main); font-size: 0.8125rem; font-family: var(--font-mono, monospace); } .spaces-search-wrapper { position: relative; min-width: 200px; max-width: 260px; flex: 1; } .spaces-search-icon { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 0.8125rem; pointer-events: none; } .spaces-search-input { height: 36px; padding: 0 0.75rem 0 2.125rem !important; border-radius: var(--radius-sm, 6px) !important; background: var(--bg-input) !important; border: 1px solid var(--border-color) !important; font-size: 0.8125rem !important; color: var(--text-main) !important; width: 100%; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .spaces-search-input:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 2px var(--accent-soft) !important; outline: none; } .spaces-card-progress-track { height: 2px; width: 100%; background: var(--border-color, rgba(255, 255, 255, 0.06)); position: absolute; bottom: 0; left: 0; overflow: hidden; } .spaces-card-progress-bar { height: 100%; width: 0%; background: var(--color-teal, #0d9488); transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.4s ease; } @media (max-width: 900px) { .spaces-toolbar-inner { flex-direction: column; align-items: stretch; gap: 0.75rem; } .spaces-toolbar-right { justify-content: space-between; width: 100%; } .spaces-search-wrapper { max-width: 100%; width: 100%; order: 3; } } .stations-grid-layout { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 310px), 1fr)); gap: 1rem; } .station-card { position: relative; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md, 10px); padding: 1rem 1.125rem; display: flex; flex-direction: column; gap: 0.75rem; transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.18s ease, box-shadow 0.18s ease; overflow: hidden; } /* Rounded top accent stripe (hugs card corner radius) */ .station-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--st-card-accent, transparent); border-top-left-radius: var(--radius-md, 10px); border-top-right-radius: var(--radius-md, 10px); pointer-events: none; } .station-card.station-status-available { --st-card-accent: var(--status-green, #10b981); } .station-card.station-status-occupied { --st-card-accent: var(--status-amber, #f59e0b); } .station-card.station-status-paid { --st-card-accent: var(--color-teal, #0d9488); } .station-card.station-status-reserved { --st-card-accent: #a855f7; } .station-card:hover { border-color: var(--border-hover, var(--brand-accent, #D4AF37)); box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.35); transform: translateY(-2px); } .station-card-header { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .station-card-unit { display: flex; align-items: baseline; gap: 0.5rem; min-width: 0; } .station-card-num { font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 1.5rem; font-weight: 800; line-height: 1; color: var(--text-primary); letter-spacing: -0.02em; flex-shrink: 0; } .station-card-name { font-size: 0.875rem; font-weight: 600; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .station-card-header-actions { display: flex; align-items: center; gap: 0.35rem; flex-shrink: 0; } /* Full-Width Meta Row and Engineered Chips */ .station-card-meta-row { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; } .st-meta-chip { display: inline-flex; align-items: center; gap: 0.28rem; font-size: 0.71875rem; color: var(--text-muted); background: var(--bg-card-sub, rgba(255, 255, 255, 0.04)); border: 1px solid var(--border-color); padding: 0.15rem 0.45rem; border-radius: var(--radius-xs, 4px); white-space: nowrap; line-height: 1.2; } .st-meta-chip i { font-size: 0.6875rem; opacity: 0.85; } [data-theme="light"] .st-meta-chip { background: #f1f5f9; border-color: rgba(0, 0, 0, 0.08); color: #475569; } .station-card-area { font-size: 0.75rem; color: var(--text-muted); display: flex; align-items: center; gap: 0.375rem; margin-top: 0.125rem; } /* Status Badges */ .station-status-badge { font-size: 0.6875rem; font-weight: 600; text-transform: none; letter-spacing: 0.01em; padding: 0.1875rem 0.5rem; border-radius: var(--radius-xs, 4px); display: inline-flex; align-items: center; gap: 0.35rem; background: var(--bg-card-sub, rgba(255, 255, 255, 0.04)); border: 1px solid var(--border-color); color: var(--text-main); transition: all var(--t-fast, 0.14s) ease; } .station-status-available { border-color: rgba(16, 185, 129, 0.3); color: var(--status-green, #10b981); } .station-status-occupied { border-color: rgba(245, 158, 11, 0.3); color: var(--status-amber, #f59e0b); } .station-status-paid { border-color: rgba(13, 148, 136, 0.3); color: var(--color-teal, #14b8a6); } .station-status-reserved { border-color: rgba(168, 85, 247, 0.3); color: var(--text-secondary); } .station-status-blocked { border-color: rgba(239, 68, 68, 0.3); color: var(--status-red, #ef4444); } .station-status-off, .station-status-maintenance { border-color: var(--border-color); color: var(--text-muted); } :root[data-theme="light"] .station-status-available, [data-theme="light"] .station-status-available { border-color: oklch(0.62 0.17 160 / 0.35); color: oklch(0.35 0.17 160); background: oklch(0.96 0.02 160); } :root[data-theme="light"] .station-status-occupied, [data-theme="light"] .station-status-occupied { border-color: oklch(0.65 0.16 85 / 0.35); color: oklch(0.38 0.16 85); background: oklch(0.96 0.02 85); } :root[data-theme="light"] .station-status-paid, [data-theme="light"] .station-status-paid { border-color: oklch(0.62 0.14 210 / 0.35); color: oklch(0.32 0.14 210); background: oklch(0.96 0.02 210); } :root[data-theme="light"] .station-status-reserved, [data-theme="light"] .station-status-reserved { border-color: oklch(0.18 0.03 240 / 0.15); color: oklch(0.25 0.03 240); background: oklch(0.96 0.01 240); } :root[data-theme="light"] .station-status-blocked, [data-theme="light"] .station-status-blocked { border-color: oklch(0.65 0.20 25 / 0.35); color: oklch(0.38 0.20 25); background: oklch(0.96 0.02 25); } /* Order preview inside card */ .station-card-order-preview { background: var(--bg-elevated, rgba(255, 255, 255, 0.03)); border: 1px solid var(--border-color); border-radius: var(--radius-sm, 6px); padding: 0.625rem 0.75rem; font-size: 0.8125rem; } .station-card-items-text { font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .station-card-price-row { display: flex; align-items: center; justify-content: space-between; margin-top: 0.375rem; font-size: 0.75rem; } .station-card-amount { font-family: var(--font-mono, monospace); font-weight: 700; color: var(--brand-accent, #D4AF37); font-size: 0.875rem; } .station-card-time { color: var(--text-muted); display: flex; align-items: center; gap: 0.25rem; } .station-card-empty-state { display: flex; align-items: center; gap: 0.625rem; color: var(--text-muted); font-size: 0.8125rem; padding: 0.625rem 0.75rem; background: var(--bg-card-sub, rgba(255, 255, 255, 0.02)); border: 1px dashed var(--border-color); border-radius: var(--radius-sm, 6px); min-height: 44px; } [data-theme="light"] .station-card-empty-state { background: #f8fafc; border-color: rgba(0, 0, 0, 0.09); color: #64748b; } .station-card-actions { display: flex; gap: 0.35rem; margin-top: auto; padding-top: 0.625rem; border-top: 1px solid var(--border-color); align-items: center; } .station-card-actions .btn-dash { flex: 1; min-width: 0; justify-content: center; font-size: 0.71875rem; font-weight: 600; height: 32px; padding: 0 0.45rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-radius: var(--radius-xs, 5px); gap: 0.3rem; } .station-card-actions .btn-dash i { font-size: 0.75rem; flex-shrink: 0; } .station-card-actions .btn-dash.st-btn-icon-only { flex: 0 0 32px; width: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; } /* ============================================================ TABLE TENT QR STAND CARD (SCREEN & 1-PAGE PRINT SUITE) ============================================================ */ /* Screen Styling (Theme Adaptive for Dark / Light Cockpit) */ .table-tent-card { text-align: center; padding: 1.75rem 1.5rem 1.25rem 1.5rem; border: 1.5px solid var(--border-color); border-radius: var(--radius-lg, 16px); background: var(--bg-card); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); max-width: 420px; margin: 0 auto; box-sizing: border-box; } .tent-cut-guide { font-size: 0.6875rem; color: var(--text-muted); border-bottom: 1px dashed var(--border-color); padding-bottom: 0.5rem; margin-bottom: 0.85rem; display: flex; align-items: center; justify-content: center; gap: 0.4rem; } .tent-biz-name { font-family: var(--font-body, 'Inter', sans-serif); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.35rem; } .tent-unit-title { font-family: var(--font-body, 'Albert Sans', 'Inter', sans-serif); font-size: 2.5rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; color: var(--text-primary); margin: 0.15rem 0 0.4rem 0; } .tent-meta-row { display: flex; align-items: center; justify-content: center; gap: 0.4rem; margin-bottom: 1rem; flex-wrap: wrap; } .tent-pill { display: inline-flex; align-items: center; gap: 0.35rem; font-family: var(--font-body, 'Inter', sans-serif); font-size: 0.75rem; font-weight: 600; color: var(--brand-teal, #0d9488); background: rgba(13, 148, 136, 0.08); border: 1px solid rgba(13, 148, 136, 0.2); padding: 0.2rem 0.65rem; border-radius: var(--radius-xs, 4px); } .tent-pill-code { color: var(--text-secondary); background: var(--bg-card-sub, rgba(255, 255, 255, 0.04)); border-color: var(--border-color); } .tent-qr-frame { display: inline-block; padding: 0.875rem; background: #ffffff; border: 1.5px solid var(--border-color); border-radius: 14px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); margin: 0 auto; box-sizing: border-box; } .tent-qr-img { width: 240px; height: 240px; display: block; margin: 0 auto; border-radius: 4px; } .tent-callout-title { font-family: var(--font-body, 'Albert Sans', 'Inter', sans-serif); font-size: 1.125rem; font-weight: 700; color: var(--text-primary); margin-top: 1rem; margin-bottom: 0.25rem; display: flex; align-items: center; justify-content: center; gap: 0.4rem; } .tent-callout-sub { font-family: var(--font-body, 'Inter', sans-serif); font-size: 0.8125rem; line-height: 1.45; color: var(--text-muted); max-width: 320px; margin: 0 auto; } .tent-badge-note { font-size: 0.75rem; font-weight: 600; color: var(--brand-teal, #0d9488); margin-top: 0.625rem; display: flex; align-items: center; justify-content: center; gap: 0.35rem; } .tent-footer-creds { font-size: 0.625rem; font-family: var(--font-mono, monospace); color: var(--text-muted); opacity: 0.65; margin-top: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; } /* ============================================================ STATIONS FLOOR MULTI-CATEGORY ZONING & SCALING SYSTEM ============================================================ */ .stations-floor-container { display: flex; flex-direction: column; gap: 1.25rem; width: 100%; } .st-floor-zone-section { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1.5rem; } .st-floor-zone-header { display: flex; align-items: center; justify-content: space-between; padding: 0.55rem 0.85rem; background: var(--bg-card-sub, rgba(255, 255, 255, 0.02)); border: 1px solid var(--border-color); border-radius: var(--radius-sm, 6px); gap: 0.75rem; flex-wrap: wrap; transition: background 0.15s ease, border-color 0.15s ease; } .st-floor-zone-header:hover { background: var(--bg-card-hover, rgba(255, 255, 255, 0.04)); border-color: var(--border-hover, rgba(20, 184, 166, 0.3)); } .st-floor-zone-title-group { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .st-floor-zone-title { font-weight: 700; font-size: 0.875rem; color: var(--text-main); display: inline-flex; align-items: center; gap: 0.35rem; } .st-floor-zone-collapse-btn { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: var(--radius-xs, 4px); background: transparent; border: 1px solid var(--border-color); color: var(--text-muted); cursor: pointer; transition: all 0.15s ease; } .st-floor-zone-collapse-btn:hover { background: var(--bg-elevated); color: var(--text-main); border-color: var(--color-teal); } #st-floor-category-bar .spaces-filter-chip { font-size: 0.75rem; padding: 0.25rem 0.65rem; white-space: nowrap; } #st-manage-category-jumper button { white-space: nowrap; } :root[data-theme="light"] .st-floor-zone-header, [data-theme="light"] .st-floor-zone-header { background: oklch(0.97 0.01 240); border-color: oklch(0.88 0.02 240); } :root[data-theme="light"] .st-floor-zone-header:hover, [data-theme="light"] .st-floor-zone-header:hover { background: oklch(0.95 0.02 240); border-color: oklch(0.75 0.05 180); } /* ── View Mode Switcher: Cards vs Matrix ── */ .spaces-view-mode-toggle { display: inline-flex; align-items: center; background: var(--bg-card-sub, rgba(255, 255, 255, 0.04)); border: 1px solid var(--border-color); border-radius: var(--radius-sm, 6px); padding: 2px; gap: 2px; } .spaces-view-btn { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.6rem; font-size: 0.75rem; font-weight: 600; color: var(--text-muted); background: transparent; border: none; border-radius: var(--radius-xs, 4px); cursor: pointer; transition: all 0.15s ease; user-select: none; } .spaces-view-btn:hover { color: var(--text-main); background: var(--bg-card-hover, rgba(255, 255, 255, 0.06)); } .spaces-view-btn.active { background: var(--bg-card, #161b22); color: var(--color-teal, #14b8a6); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); font-weight: 700; } [data-theme="light"] .spaces-view-mode-toggle { background: #f1f5f9; border-color: #cbd5e1; } [data-theme="light"] .spaces-view-btn { color: #64748b; } [data-theme="light"] .spaces-view-btn:hover { color: #0f172a; background: #e2e8f0; } [data-theme="light"] .spaces-view-btn.active { background: #ffffff; color: oklch(0.35 0.16 185); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } /* ── Compact Matrix View (High-Density Micro-Grid for 50+ Stations) ── */ .stations-matrix-dense-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 0.625rem; width: 100%; } @media (max-width: 640px) { .stations-matrix-dense-grid { grid-template-columns: repeat(auto-fill, minmax(105px, 1fr)); gap: 0.45rem; } } .st-micro-tile { position: relative; background: var(--bg-card, #161b22); border: 1px solid var(--border-color); border-radius: var(--radius-sm, 6px); padding: 0.625rem 0.5rem; display: flex; flex-direction: column; align-items: center; justify-content: space-between; min-height: 84px; cursor: pointer; transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; user-select: none; text-align: center; } .st-micro-tile:hover { transform: translateY(-2px); border-color: var(--color-teal, #14b8a6); box-shadow: 0 4px 14px -3px rgba(0, 0, 0, 0.35); } .st-micro-tile.station-status-available { border-top: 3px solid var(--status-green, #10b981); } .st-micro-tile.station-status-occupied { border-top: 3px solid var(--status-amber, #f59e0b); background: rgba(245, 158, 11, 0.03); } .st-micro-tile.station-status-paid { border-top: 3px solid var(--color-teal, #0d9488); background: rgba(13, 148, 136, 0.03); } .st-micro-tile.station-status-reserved { border-top: 3px solid #a855f7; background: rgba(168, 85, 247, 0.03); } .st-micro-tile.station-status-off, .st-micro-tile.station-status-maintenance, .st-micro-tile.station-status-closed { border-top: 3px dashed var(--text-muted, #64748b); background: rgba(100, 116, 139, 0.06); opacity: 0.85; } .st-micro-tile-head { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 0.25rem; margin-bottom: 0.25rem; } .st-micro-tile-num { font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 1.125rem; font-weight: 800; line-height: 1; color: var(--text-main); letter-spacing: -0.02em; } .st-micro-tile-pax { font-size: 0.6875rem; color: var(--text-muted); display: inline-flex; align-items: center; gap: 0.2rem; } .st-micro-tile-name { font-size: 0.6875rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; margin-bottom: 0.25rem; } .st-micro-tile-status { font-size: 0.6875rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.1rem 0.35rem; border-radius: 3px; width: 100%; justify-content: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .st-micro-tile-timer { font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 0.625rem; font-weight: 700; color: var(--status-amber, #f59e0b); margin-top: 0.15rem; white-space: nowrap; } /* Light Theme overrides for Compact Matrix */ [data-theme="light"] .st-micro-tile { background: #ffffff; border-color: #e2e8f0; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03); } [data-theme="light"] .st-micro-tile:hover { border-color: oklch(0.55 0.14 185); box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.08); } [data-theme="light"] .st-micro-tile.station-status-available { border-top-color: oklch(0.45 0.16 150); } [data-theme="light"] .st-micro-tile.station-status-occupied { border-top-color: oklch(0.55 0.16 85); background: oklch(0.99 0.01 85); } [data-theme="light"] .st-micro-tile.station-status-paid { border-top-color: oklch(0.45 0.14 210); background: oklch(0.99 0.01 210); } [data-theme="light"] .st-micro-tile.station-status-reserved { border-top-color: oklch(0.45 0.14 285); background: oklch(0.99 0.01 285); } [data-theme="light"] .st-micro-tile.station-status-off, [data-theme="light"] .st-micro-tile.station-status-maintenance, [data-theme="light"] .st-micro-tile.station-status-closed { border-top-color: #94a3b8; background: #f8fafc; } [data-theme="light"] .st-micro-tile-num { color: #0f172a; } [data-theme="light"] .st-micro-tile-name { color: #475569; } /* ── Card Quick Power Toggle ── */ .st-card-power-toggle { display: inline-flex; align-items: center; gap: 0.25rem; background: transparent; border: 1px solid var(--border-color); color: var(--text-muted); font-size: 0.6875rem; font-weight: 600; padding: 0.15rem 0.4rem; border-radius: var(--radius-xs, 4px); cursor: pointer; transition: all 0.14s ease; user-select: none; } .st-card-power-toggle:hover { background: var(--bg-card-hover, rgba(255, 255, 255, 0.06)); color: var(--text-main); border-color: var(--border-hover, rgba(20, 184, 166, 0.4)); } .st-card-power-toggle.st-power-close:hover { color: #ef4444; border-color: rgba(239, 68, 68, 0.4); } .st-card-power-toggle.st-power-reopen { color: var(--color-teal, #14b8a6); border-color: rgba(20, 184, 166, 0.35); } .st-card-power-toggle.st-power-reopen:hover { background: rgba(20, 184, 166, 0.1); border-color: var(--color-teal); } [data-theme="light"] .st-card-power-toggle { border-color: #cbd5e1; color: #64748b; } [data-theme="light"] .st-card-power-toggle:hover { background: #f1f5f9; color: #0f172a; border-color: #94a3b8; } [data-theme="light"] .st-card-power-toggle.st-power-reopen { color: oklch(0.38 0.14 185); border-color: oklch(0.65 0.14 185 / 0.4); } /* ── Category Zone Header & Pause Area Controls ── */ .st-zone-pause-btn { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.75rem; font-weight: 600; padding: 0.2rem 0.55rem; border-radius: var(--radius-xs, 4px); border: 1px solid var(--border-color); background: transparent; color: var(--text-muted); cursor: pointer; transition: all 0.14s ease; user-select: none; } .st-zone-pause-btn:hover { color: var(--text-main); background: var(--bg-card-hover, rgba(255, 255, 255, 0.05)); border-color: var(--color-teal, #14b8a6); } .st-zone-pause-btn.st-zone-paused { background: rgba(245, 158, 11, 0.12); border-color: rgba(245, 158, 11, 0.35); color: var(--status-amber, #f59e0b); } .st-zone-pause-btn.st-zone-paused:hover { background: rgba(245, 158, 11, 0.2); color: #fbbf24; } .st-zone-paused-banner { display: flex; align-items: center; justify-content: space-between; padding: 0.55rem 0.85rem; background: rgba(245, 158, 11, 0.08); border: 1px dashed rgba(245, 158, 11, 0.35); border-radius: var(--radius-sm, 6px); margin-bottom: 0.5rem; font-size: 0.75rem; color: var(--text-main); gap: 0.75rem; flex-wrap: wrap; } [data-theme="light"] .st-zone-paused-banner { background: oklch(0.97 0.03 85); border-color: oklch(0.75 0.12 85); color: oklch(0.28 0.10 85); } [data-theme="light"] .st-zone-pause-btn { border-color: #cbd5e1; color: #475569; } [data-theme="light"] .st-zone-pause-btn:hover { background: #f1f5f9; color: #0f172a; } [data-theme="light"] .st-zone-pause-btn.st-zone-paused { background: oklch(0.95 0.04 85); border-color: oklch(0.70 0.12 85); color: oklch(0.35 0.14 85); } /* ============================================================ TABLE TENT QR STAND PRINT SYSTEM (100% ISOLATED & CRAFTED) ============================================================ */ @media print { @page { size: portrait; margin: 10mm; } html, body { background: #ffffff !important; color: #000000 !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } /* 1. Universal Cockpit Shell Suppression (Zero Leakage) */ aside.sidebar, .sidebar, .sidebar-overlay, header.topbar, .topbar, main.main, .main, .content, .panel, .demo-cockpit-banner, .toast-container, .modal-backdrop, .no-print, .modal-overlay:not(#modal-station-qr):not(#modal-station-print-batch) { display: none !important; visibility: hidden !important; height: 0 !important; max-height: 0 !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; border: none !important; } /* 2. Mutual Exclusion between Single and Batch Modals */ body.is-printing-qr-single #modal-station-print-batch, #modal-station-print-batch:not(.open) { display: none !important; visibility: hidden !important; height: 0 !important; } body.is-printing-qr-batch #modal-station-qr, #modal-station-qr:not(.open) { display: none !important; visibility: hidden !important; height: 0 !important; } /* 3. Static Flow Layout for Active Printing Container */ #modal-station-qr.open, #modal-station-print-batch.open { display: block !important; position: static !important; inset: auto !important; width: 100% !important; height: auto !important; padding: 0 !important; margin: 0 auto !important; background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: none !important; box-shadow: none !important; } #modal-station-qr .modal-card, #modal-station-print-batch .modal-card { position: static !important; display: block !important; max-width: 100% !important; max-height: none !important; overflow: visible !important; padding: 0 !important; margin: 0 auto !important; border: none !important; box-shadow: none !important; background: transparent !important; } #modal-station-qr .modal-header, #modal-station-qr .modal-footer, #modal-station-print-batch .modal-header, #modal-station-print-batch .modal-footer { display: none !important; } #st-qr-printable-area, #st-batch-print-sheet { display: block !important; position: static !important; width: 100% !important; margin: 0 auto !important; padding: 0 !important; background: #ffffff !important; color: #000000 !important; visibility: visible !important; } /* 4. Single Tent Card (Luxury Physical Form Factor: 4"x6" Acrylic / Table Tent) */ .table-tent-card { display: block !important; margin: 6mm auto 0 auto !important; width: 100% !important; max-width: 380px !important; border: 2px solid #000000 !important; border-radius: 16px !important; padding: 22px 20px !important; background: #ffffff !important; color: #000000 !important; box-shadow: none !important; text-align: center !important; page-break-inside: avoid !important; break-inside: avoid !important; box-sizing: border-box !important; } .tent-cut-guide { display: block !important; font-size: 0.625rem !important; color: #6b7280 !important; border-bottom: 1px dashed #9ca3af !important; padding-bottom: 4px !important; margin-bottom: 10px !important; } .tent-biz-name { color: #4b5563 !important; font-size: 0.75rem !important; font-weight: 700 !important; letter-spacing: 0.16em !important; text-transform: uppercase !important; margin-bottom: 3px !important; } .tent-unit-title { color: #000000 !important; font-size: 2.65rem !important; font-weight: 800 !important; letter-spacing: -0.02em !important; margin: 0 0 4px 0 !important; line-height: 1.1 !important; } .tent-meta-row { display: flex !important; justify-content: center !important; gap: 4px !important; margin-bottom: 12px !important; } .tent-pill { color: #000000 !important; background: #f4f4f5 !important; border: 1px solid #d4d4d8 !important; font-size: 0.75rem !important; font-weight: 600 !important; padding: 2px 10px !important; border-radius: 4px !important; } .tent-pill * { color: #000000 !important; } .tent-qr-frame { display: inline-block !important; padding: 10px !important; background: #ffffff !important; border: 2px solid #000000 !important; border-radius: 12px !important; box-shadow: none !important; margin: 0 auto !important; } .tent-qr-img { width: 230px !important; height: 230px !important; display: block !important; margin: 0 auto !important; border-radius: 0 !important; } .tent-callout-title { color: #000000 !important; font-size: 1.1rem !important; font-weight: 700 !important; margin-top: 12px !important; margin-bottom: 2px !important; } .tent-callout-sub { color: #4b5563 !important; font-size: 0.75rem !important; line-height: 1.4 !important; max-width: 320px !important; margin: 0 auto !important; } .tent-badge-note { color: #047857 !important; font-size: 0.6875rem !important; font-weight: 600 !important; margin-top: 6px !important; } .tent-badge-note * { color: #047857 !important; } .tent-footer-creds { color: #9ca3af !important; font-size: 0.5625rem !important; font-family: monospace !important; margin-top: 8px !important; } /* 5. Batch Print Grid (2-Column Standard A4 / Letter Flow) */ #st-batch-print-sheet.batch-print-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; margin: 0 auto !important; padding: 0 !important; width: 100% !important; } .batch-tent-card { display: block !important; border: 2px dashed #000000 !important; border-radius: 12px !important; padding: 16px 14px !important; background: #ffffff !important; color: #000000 !important; box-shadow: none !important; text-align: center !important; page-break-inside: avoid !important; break-inside: avoid !important; box-sizing: border-box !important; } .batch-tent-card * { color: #000000 !important; } .batch-tent-card .tent-unit-title { font-size: 1.95rem !important; margin-bottom: 2px !important; } .batch-tent-card img { width: 160px !important; height: 160px !important; margin: 6px auto !important; } .batch-tent-card .tent-callout-title { font-size: 0.9375rem !important; margin-top: 8px !important; } .batch-tent-card .tent-callout-sub { font-size: 0.6875rem !important; line-height: 1.35 !important; } } /* Stations Telemetry & D3 Visualization */ .stations-telemetry-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } @media (max-width: 900px) { .stations-telemetry-grid { grid-template-columns: 1fr; } } /* Batch Printable Table Tent Cards Grid */ .batch-print-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } @media (max-width: 640px) { .batch-print-grid { grid-template-columns: 1fr; } } .batch-tent-card { border: 2px dashed var(--border-color); border-radius: 12px; padding: 1.25rem 1rem; background: var(--bg-card); text-align: center; position: relative; page-break-inside: avoid; } .st-manage-row { display: grid; grid-template-columns: 75px 1.5fr 90px 1.2fr 44px; gap: 0.5rem; align-items: center; padding: 0.375rem 0.25rem; border-bottom: 1px solid var(--border-color); } .st-manage-row:last-child { border-bottom: none; } /* ============================================================ AI RECEPTIONIST FULL REDESIGN (IMPECCABLE NEO KINPAKU) Subsections: Persona, About, FAQs Theme-adaptive for Dark (Urushi Lacquer) and Light (Crisp Paper) ============================================================ */ /* Subsection Section Header */ .cockpit-section-header { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--border-color); } .cockpit-section-meta { max-width: 760px; } .cockpit-section-eyebrow { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em; color: var(--accent); margin-bottom: 0.375rem; display: flex; align-items: center; gap: 0.5rem; } .cockpit-section-title { font-size: 1.25rem; font-weight: 700; color: var(--text-main); margin: 0 0 0.375rem 0; line-height: 1.25; } .cockpit-section-desc { font-size: 0.84375rem; color: var(--text-secondary); line-height: 1.55; margin: 0; } .cockpit-section-actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; } /* Conversational Persona Voice Card */ .directives-editor-frame { border-radius: var(--radius-sm); border: 1px solid var(--border-color); overflow: hidden; background: var(--bg-input); transition: border-color var(--t-fast); } .directives-editor-frame:focus-within { border-color: var(--accent); } .directives-textarea { width: 100%; border: none !important; background: transparent !important; padding: 0.875rem !important; font-family: var(--font-sans) !important; font-size: 0.84375rem !important; line-height: 1.6 !important; resize: vertical; color: var(--text-main); min-height: 96px; } .directives-textarea:focus { outline: none !important; box-shadow: none !important; } .directives-foot-hint { display: flex; align-items: center; gap: 0.5rem; font-size: 0.71875rem; color: var(--text-muted); margin-top: 0.625rem; line-height: 1.4; } .word-counter { font-size: 0.75rem; transition: color var(--t-fast); } /* About Section - Business Profile & Coordinates */ /* (uses standard .dash-card, .grid-2, .form-group, .form-label, and .form-input) */ /* FAQs Knowledge & Policies */ .faq-search-bar-wrap { margin-bottom: 1.25rem; } .faq-search-input-box { position: relative; } .faq-search-icon { position: absolute; left: 0.875rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 0.8125rem; pointer-events: none; } .faq-search-input-box .form-input { padding-left: 2.25rem; } /* FAQ Composer Card */ .faq-composer-card { background: var(--bg-card); border: 1px solid var(--accent-border); border-radius: var(--radius-md); padding: 1.25rem; margin-bottom: 1.25rem; box-shadow: var(--shadow-pop); } .faq-composer-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border-color); } .faq-composer-title { font-size: 0.9375rem; font-weight: 700; color: var(--text-main); display: flex; align-items: center; gap: 0.5rem; } .faq-composer-footer { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1rem; } .btn-icon-ghost { background: transparent; border: none; color: var(--text-muted); width: 28px; height: 28px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all var(--t-fast); } .btn-icon-ghost:hover { background: var(--bg-hover); color: var(--text-main); } .btn-icon-ghost.btn-delete:hover { background: var(--status-red-bg); color: var(--status-red); } /* FAQ Knowledge Cards */ .faq-cards-grid { display: flex; flex-direction: column; gap: 0.75rem; } .faq-bento-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 1.125rem 1.25rem; box-shadow: var(--shadow-card); transition: border-color var(--t-fast), box-shadow var(--t-fast); } .faq-bento-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-pop); } .faq-card-head { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 0.5rem; } .faq-q-badge { background: var(--accent-soft); color: var(--accent-strong); width: 22px; height: 22px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 0.6875rem; font-weight: 700; flex-shrink: 0; margin-top: 1px; } .faq-q-text { font-family: var(--font-sans); font-weight: 700; font-size: 0.9375rem; color: var(--text-main); flex: 1; line-height: 1.35; } .faq-card-actions { display: flex; gap: 0.25rem; flex-shrink: 0; } .faq-card-body { display: flex; align-items: flex-start; gap: 0.75rem; } .faq-a-badge { background: transparent; color: var(--text-muted); width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font-size: 0.6875rem; font-weight: 700; flex-shrink: 0; margin-top: 2px; } .faq-a-text { font-family: var(--font-sans); font-size: 0.84375rem; line-height: 1.6; color: var(--text-secondary); flex: 1; white-space: pre-wrap; } /* FAQ Empty State */ .faq-empty-state { padding: 3rem 1.5rem; text-align: center; background: var(--bg-card); border: 1px dashed var(--border-color); border-radius: var(--radius-md); } .faq-empty-icon { font-size: 2.25rem; margin-bottom: 0.75rem; } .faq-empty-title { font-size: 1.0625rem; font-weight: 700; color: var(--text-main); margin-bottom: 0.375rem; } .faq-empty-desc { font-size: 0.84375rem; color: var(--text-secondary); max-width: 480px; margin: 0 auto 1.25rem; line-height: 1.55; } /* ============================================================ WALMART-SCALE CATALOG ARCHITECTURE: DENSE TABLE, VIEW MODES, CUSTOM CATEGORIES & PAGINATION (Impeccable Design System) ============================================================ */ /* View Mode Switcher Toggle */ .cat-view-toggle { display: inline-flex; align-items: center; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 2px; gap: 2px; flex-shrink: 0; } .cat-view-btn { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.35rem 0.65rem; font-size: 0.78125rem; font-weight: 600; color: var(--text-muted); background: transparent; border: none; border-radius: calc(var(--radius-sm) - 2px); cursor: pointer; transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1); } .cat-view-btn:hover { color: var(--text-main); } .cat-view-btn.active { background: var(--bg-card); color: var(--text-main); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16); } /* Dedicated Custom Category Rail */ .cat-category-rail { display: flex; align-items: center; gap: 0.625rem; padding: 0.45rem 0.625rem; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-sm); margin-top: 0.625rem; width: 100%; box-sizing: border-box; } .cat-category-rail-inner { display: flex; align-items: center; gap: 0.625rem; width: 100%; min-width: 0; } .cat-category-rail-label { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.71875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; } .cat-category-strip-wrap { position: relative; display: flex; align-items: center; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .cat-category-strip-wrap::-webkit-scrollbar { display: none; } .cat-category-strip { display: inline-flex; align-items: center; gap: 0.375rem; white-space: nowrap; } .cat-cat-chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.625rem; font-size: 0.75rem; font-weight: 500; border-radius: var(--radius-sm, 6px); background: var(--bg-input); border: 1px solid var(--border-color); color: var(--text-muted); cursor: pointer; white-space: nowrap; transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1); line-height: 1.25; } .cat-cat-chip:hover { color: var(--text-main); border-color: var(--border-color-hover, rgba(255, 255, 255, 0.2)); } .cat-cat-chip.active { background: var(--accent-soft, oklch(0.62 0.14 210 / 0.14)); color: var(--accent-strong, oklch(0.68 0.16 210)); border-color: var(--accent-border, oklch(0.62 0.14 210 / 0.38)); font-weight: 600; } .cat-cat-count { font-size: 0.6875rem; opacity: 0.85; padding: 0.0625rem 0.35rem; border-radius: 3px; background: rgba(255, 255, 255, 0.08); } .cat-cat-chip.active .cat-cat-count { background: rgba(255, 255, 255, 0.18); } .cat-cat-clear-btn { display: inline-flex; align-items: center; justify-content: center; margin-left: 0.2rem; opacity: 0.75; font-size: 0.6875rem; transition: opacity 0.15s ease; } .cat-cat-clear-btn:hover { opacity: 1; color: #ef4444; } .cat-category-select-wrap { flex-shrink: 0; margin-left: auto; display: flex; align-items: center; } .cat-category-dropdown-select { height: 28px; font-size: 0.75rem; padding: 0 1.6rem 0 0.55rem; background-color: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-sm); color: var(--text-secondary); cursor: pointer; transition: border-color 0.15s ease; } .cat-category-dropdown-select:hover, .cat-category-dropdown-select:focus { border-color: var(--accent); color: var(--text-main); outline: none; } /* Custom Category Combobox & Floating Menu */ .cat-combobox-wrapper { position: relative; width: 100%; } .cat-combobox-toggle-btn:hover { color: var(--text-main) !important; background: var(--bg-hover) !important; } .cat-category-dropdown { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .cat-dropdown-header { padding: 0.375rem 0.75rem; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); background: var(--bg-input); border-bottom: 1px solid var(--border-color); display: flex; align-items: center; justify-content: space-between; } .cat-dropdown-item { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0.75rem; font-size: 0.8125rem; color: var(--text-secondary); cursor: pointer; transition: background 0.12s ease, color 0.12s ease; border-bottom: 1px solid rgba(255, 255, 255, 0.04); } .cat-dropdown-item:last-child { border-bottom: none; } .cat-dropdown-item:hover, .cat-dropdown-item.focused { background: var(--bg-hover); color: var(--text-main); } .cat-dropdown-item.selected { background: var(--accent-soft, rgba(14, 165, 233, 0.12)); color: var(--accent, #0ea5e9); font-weight: 600; } .cat-dropdown-badge { font-size: 0.6875rem; font-family: var(--font-mono); padding: 0.1rem 0.4rem; border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.08); color: var(--text-muted); } .cat-dropdown-item.selected .cat-dropdown-badge { background: var(--accent); color: #ffffff; } .cat-dropdown-new { color: var(--accent); background: rgba(14, 165, 233, 0.06); font-weight: 500; } .cat-dropdown-new:hover { background: rgba(14, 165, 233, 0.14); } .cat-dropdown-empty { padding: 0.75rem; font-size: 0.75rem; color: var(--text-muted); text-align: center; font-style: italic; } /* Quick Select Pills in Add/Edit Modal */ .cat-quick-pill { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.55rem; font-size: 0.6875rem; font-weight: 500; border-radius: var(--radius-full); background: var(--bg-input); border: 1px solid var(--border-color); color: var(--text-secondary); cursor: pointer; transition: all 0.15s ease; line-height: 1.2; } .cat-quick-pill:hover { border-color: var(--accent); color: var(--text-main); transform: translateY(-1px); } .cat-quick-pill.active { background: var(--accent-soft, rgba(14, 165, 233, 0.15)); border-color: var(--accent); color: var(--accent); font-weight: 600; } .cat-quick-cnt { font-size: 0.625rem; opacity: 0.75; background: rgba(0, 0, 0, 0.2); padding: 0.05rem 0.3rem; border-radius: var(--radius-full); font-family: var(--font-mono); } /* Custom Category Pill Badge */ .cat-pill-category { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.55rem; font-size: 0.71875rem; font-weight: 600; border-radius: var(--radius-xs); background: var(--bg-input); border: 1px solid var(--border-color); color: var(--text-secondary); white-space: nowrap; } /* Dense Table View (High-Inventory / Walmart Scale) */ .cat-table-wrap { width: 100%; border: 1px solid var(--border-color); border-radius: var(--radius-md); overflow: hidden; background: var(--bg-card); } .cat-table-responsive { width: 100%; overflow-x: auto; } .cat-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 0.8125rem; } .cat-table thead { background: var(--bg-input); position: sticky; top: 0; z-index: 2; } .cat-table th { padding: 0.65rem 0.875rem; font-size: 0.71875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); border-bottom: 1px solid var(--border-color); white-space: nowrap; } /* Interactive Table Column Headers */ .cat-th-interactive { cursor: pointer; user-select: none; transition: background 0.15s ease, color 0.15s ease; } .cat-th-interactive:hover { background: var(--bg-card-hover, rgba(255, 255, 255, 0.04)); color: var(--text-main); } .cat-th-content { display: inline-flex; align-items: center; gap: 0.4rem; width: 100%; } .cat-th-content-right { justify-content: flex-end; } .cat-th-icons { display: inline-flex; align-items: center; gap: 0.25rem; color: var(--text-muted); font-size: 0.6875rem; opacity: 0.5; transition: opacity 0.15s ease, color 0.15s ease; } .cat-th-interactive:hover .cat-th-icons { opacity: 1; color: var(--text-secondary); } .cat-th-interactive.is-sorted .cat-th-icons { opacity: 1; color: var(--accent); } .cat-th-filter-dot { width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--accent); display: inline-block; flex-shrink: 0; } .cat-th-interactive.th-popover-open { background: var(--bg-hover, rgba(255, 255, 255, 0.06)) !important; color: var(--accent) !important; box-shadow: inset 0 -2px 0 var(--accent); } [data-theme="light"] .cat-th-interactive.th-popover-open { background: rgba(14, 154, 167, 0.08) !important; color: var(--accent) !important; box-shadow: inset 0 -2px 0 var(--accent); } /* Floating Column Header Popover (Notion / Linear Grade) */ .cat-header-popover { position: absolute; z-index: 100; width: 265px; background: #0e1626; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius-sm, 6px); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.05); padding: 0.5rem; font-size: 0.75rem; color: var(--text-main); animation: catPopoverFade 0.12s cubic-bezier(0.16, 1, 0.3, 1); } [data-theme="light"] .cat-header-popover { background: #ffffff; border-color: rgba(0, 0, 0, 0.14); box-shadow: 0 16px 36px rgba(0, 0, 0, 0.14), 0 0 0 1px rgba(0, 0, 0, 0.05); } @keyframes catPopoverFade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .cat-popover-head { display: flex; align-items: center; justify-content: space-between; padding: 0.3rem 0.4rem 0.5rem 0.4rem; border-bottom: 1px solid var(--border-color); margin-bottom: 0.4rem; } .cat-popover-title { font-weight: 700; font-size: 0.71875rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); } .cat-popover-reset-btn { background: none; border: none; padding: 0; font-size: 0.6875rem; color: var(--accent); cursor: pointer; font-weight: 600; } .cat-popover-reset-btn:hover { text-decoration: underline; } .cat-popover-section-label { font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); padding: 0.3rem 0.4rem 0.2rem 0.4rem; font-weight: 700; } .cat-popover-item-btn { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0.4rem 0.5rem; border: none; background: transparent; color: var(--text-main); font-size: 0.75rem; font-family: inherit; border-radius: var(--radius-xs, 4px); cursor: pointer; text-align: left; transition: background 0.12s ease, color 0.12s ease; } .cat-popover-item-btn:hover { background: var(--bg-input); color: var(--text-main); } .cat-popover-item-btn.active { background: var(--accent-soft, rgba(14, 165, 233, 0.12)); color: var(--accent); font-weight: 600; } .cat-popover-item-left { display: inline-flex; align-items: center; gap: 0.45rem; } .cat-popover-item-cnt { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--text-muted); opacity: 0.8; } .cat-popover-check { font-size: 0.6875rem; color: var(--accent); display: none; } .cat-popover-item-btn.active .cat-popover-check { display: inline-block; } .cat-popover-divider { height: 1px; background: var(--border-color); margin: 0.4rem 0; } /* Active Filters Strip Bar */ .cat-active-filter-bar { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; padding: 0.5rem 0.25rem 0.25rem 0.25rem; } .cat-active-filter-label { font-size: 0.71875rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; display: inline-flex; align-items: center; gap: 0.3rem; } .cat-active-chip { display: inline-flex; align-items: center; gap: 0.35rem; height: 24px; padding: 0 0.55rem; border-radius: var(--radius-xs, 4px); font-size: 0.6875rem; font-weight: 500; background: var(--bg-input); border: 1px solid var(--border-color); color: var(--text-main); } .cat-active-chip-title { color: var(--text-muted); font-weight: 600; } .cat-active-chip-val { color: var(--text-main); font-weight: 600; } .cat-active-chip-close { display: inline-flex; align-items: center; justify-content: center; background: none; border: none; padding: 0; color: var(--text-muted); cursor: pointer; font-size: 0.6875rem; margin-left: 0.15rem; transition: color 0.12s ease; } .cat-active-chip-close:hover { color: var(--text-main); } .cat-active-clear-all { background: none; border: none; padding: 0.2rem 0.4rem; font-size: 0.6875rem; color: var(--accent); cursor: pointer; font-weight: 600; border-radius: var(--radius-xs); transition: background 0.12s ease; } .cat-active-clear-all:hover { text-decoration: underline; } .cat-table td { padding: 0.65rem 0.875rem; vertical-align: middle; border-bottom: 1px solid var(--border-color); color: var(--text-main); } .cat-table tr:last-child td { border-bottom: none; } .cat-table-row { transition: background 0.12s ease; } .cat-table-row:hover { background: var(--bg-card-hover, rgba(255, 255, 255, 0.025)); } .cat-table-row.cat-row-inactive { opacity: 0.6; } .cat-th-thumb { width: 46px; text-align: center; padding-right: 0 !important; } .cat-td-thumb { width: 46px; padding-right: 0 !important; } .cat-tbl-thumb { width: 36px; height: 36px; border-radius: var(--radius-xs); background: var(--bg-input); border: 1px solid var(--border-color); display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; } .cat-tbl-thumb img { width: 100%; height: 100%; object-fit: cover; } .cat-tbl-name { font-weight: 600; color: var(--text-main); line-height: 1.3; } .cat-tbl-sku { font-size: 0.6875rem; font-family: var(--font-mono); color: var(--text-muted); margin-top: 0.125rem; } .cat-tbl-desc { font-size: 0.71875rem; color: var(--text-secondary); margin-top: 0.125rem; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cat-th-price { text-align: right; } .cat-tbl-price { font-family: var(--font-mono); font-weight: 600; text-align: right; white-space: nowrap; } .cat-tbl-actions { display: flex; align-items: center; gap: 0.375rem; white-space: nowrap; } /* Pagination Controls Bar */ .cat-pagination-wrap { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; padding: 0.75rem 0.25rem; } .cat-page-info { font-size: 0.8125rem; color: var(--text-secondary); } .cat-page-controls { display: flex; align-items: center; gap: 0.25rem; } .cat-page-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; padding: 0 0.5rem; font-size: 0.78125rem; font-weight: 500; border-radius: var(--radius-xs); background: var(--bg-input); border: 1px solid var(--border-color); color: var(--text-secondary); cursor: pointer; transition: all 0.15s ease; } .cat-page-btn:hover:not(:disabled) { color: var(--text-main); border-color: var(--border-color-hover, rgba(255, 255, 255, 0.2)); } .cat-page-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 700; } .cat-page-btn:disabled { opacity: 0.35; cursor: not-allowed; } .cat-page-size-wrap { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.78125rem; color: var(--text-muted); } .cat-page-size-select { background: var(--bg-input); border: 1px solid var(--border-color); color: var(--text-main); font-size: 0.78125rem; border-radius: var(--radius-xs); padding: 0.2rem 0.4rem; cursor: pointer; } /* ========================================================================== Orders & Fulfillment Redesign: Nav Rail, Ticket Cards, Scaling Controls ========================================================================== */ .orders-nav-rail { display: flex; align-items: center; gap: 0.375rem; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 0.3125rem; overflow-x: auto; scrollbar-width: thin; margin-bottom: 0.875rem; } .orders-nav-tab { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.75rem; font-size: 0.8125rem; font-weight: 500; border-radius: var(--radius-sm); color: var(--text-secondary); background: transparent; border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: all 0.15s ease; user-select: none; } .orders-nav-tab:hover { color: var(--text-main); background: rgba(255, 255, 255, 0.04); } .orders-nav-tab.active { background: var(--bg-card); color: var(--text-main); border-color: var(--border-color); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18); font-weight: 600; } .orders-count-badge { font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 600; padding: 0.075rem 0.4rem; border-radius: 999px; font-variant-numeric: tabular-nums; background: var(--bg-input); color: var(--text-muted); border: 1px solid var(--border-color); transition: all 0.15s ease; } .orders-count-badge.has-count { background: var(--accent-soft); color: var(--color-teal); border-color: var(--accent-soft-2, rgba(20, 184, 166, 0.3)); } .orders-nav-tab.active .orders-count-badge.has-count { background: var(--accent); color: var(--text-inverse, #000); border-color: var(--accent); } .orders-count-badge.zero-count { opacity: 0.45; } /* Orders Toolbar Controls */ .orders-toolbar-wrap { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.875rem; flex-wrap: wrap; } .orders-filter-group { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .orders-select-filter { background: var(--bg-input); border: 1px solid var(--border-color); color: var(--text-main); font-size: 0.8125rem; border-radius: var(--radius-sm); padding: 0.35rem 0.65rem; cursor: pointer; height: 34px; } .orders-view-switcher { display: inline-flex; align-items: center; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 2px; gap: 2px; } .orders-view-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 28px; border-radius: var(--radius-xs); border: none; background: transparent; color: var(--text-muted); cursor: pointer; transition: all 0.15s ease; font-size: 0.8125rem; } .orders-view-btn:hover { color: var(--text-main); } .orders-view-btn.active { background: var(--bg-card); color: var(--accent); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); } /* Orders Cards Grid */ .orders-grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; margin-top: 0.5rem; } .order-ticket-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 1.125rem; display: flex; flex-direction: column; justify-content: space-between; position: relative; transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; cursor: pointer; } .order-ticket-card:hover { border-color: var(--accent); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); transform: translateY(-1px); } .order-ticket-card.urgent-prep { border-color: oklch(0.75 0.16 65 / 0.45); box-shadow: inset 0 0 0 1px oklch(0.75 0.16 65 / 0.25); } .order-ticket-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem; margin-bottom: 0.75rem; padding-bottom: 0.625rem; border-bottom: 1px solid var(--border-color); } .order-ticket-no { font-family: var(--font-mono); font-weight: 700; color: var(--accent); font-size: 0.9375rem; letter-spacing: -0.01em; } .order-ticket-time { font-size: 0.71875rem; color: var(--text-muted); display: flex; align-items: center; gap: 0.35rem; margin-top: 0.2rem; } .order-ticket-customer { margin-bottom: 0.75rem; } .order-ticket-cname { font-weight: 600; font-size: 0.875rem; color: var(--text-main); display: flex; align-items: center; justify-content: space-between; } .order-ticket-dest { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.25rem; display: flex; align-items: center; gap: 0.35rem; } .order-ticket-items-box { background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 0.625rem 0.75rem; margin-bottom: 0.875rem; font-size: 0.8125rem; } .order-ticket-item-row { display: flex; justify-content: space-between; align-items: center; padding: 0.2rem 0; } .order-ticket-item-row:not(:last-child) { border-bottom: 1px dashed var(--border-color); } .order-ticket-footer { margin-top: auto; padding-top: 0.75rem; border-top: 1px solid var(--border-color); display: flex; flex-direction: column; gap: 0.625rem; } .order-ticket-total-bar { display: flex; justify-content: space-between; align-items: center; } .order-ticket-total-lbl { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; } .order-ticket-total-val { font-family: var(--font-mono); font-weight: 700; font-size: 1rem; color: var(--accent); } .order-ticket-actions { display: flex; align-items: center; gap: 0.5rem; } .order-ticket-prog-btn { flex: 1; height: 32px; font-size: 0.8125rem; font-weight: 600; } /* Orders Pagination Bar */ .orders-pagination-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.25rem; padding-top: 0.875rem; border-top: 1px solid var(--border-color); flex-wrap: wrap; font-size: 0.8125rem; color: var(--text-muted); } .orders-pagination-actions { display: flex; align-items: center; gap: 0.375rem; } .orders-table-actions-cluster { display: inline-flex; align-items: center; gap: 0.25rem; } .order-ticket-no, .order-ticket-total-val, .orders-count-badge { font-variant-numeric: tabular-nums; } @media (max-width: 640px) { .orders-grid-cards { grid-template-columns: 1fr; gap: 0.75rem; } .orders-toolbar-wrap { flex-direction: column; align-items: stretch; } .orders-filter-group { justify-content: space-between; } } /* ========================================================================== Section Payment Redesign: Invoice Cards, Channel Pills, Date Grouping ========================================================================== */ .pay-invoice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 1rem; margin-top: 0.5rem; } .pay-invoice-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 1.125rem; display: flex; flex-direction: column; justify-content: space-between; transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; position: relative; } .pay-invoice-card:hover { border-color: var(--accent); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); transform: translateY(-1px); } .pay-invoice-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem; margin-bottom: 0.75rem; padding-bottom: 0.625rem; border-bottom: 1px solid var(--border-color); } .pay-invoice-id { font-family: var(--font-mono); font-weight: 700; color: var(--accent); font-size: 0.875rem; letter-spacing: -0.01em; } .pay-invoice-time { font-size: 0.71875rem; color: var(--text-muted); display: flex; align-items: center; gap: 0.35rem; margin-top: 0.2rem; } .pay-channel-pill { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.6875rem; font-weight: 600; padding: 0.15rem 0.5rem; border-radius: 999px; letter-spacing: 0.02em; } .pay-channel-qris { background: var(--accent-soft); color: var(--color-teal); border: 1px solid var(--accent-soft-2, rgba(20, 184, 166, 0.3)); } .pay-channel-va { background: var(--status-blue-bg); color: var(--status-blue); border: 1px solid rgba(59, 130, 246, 0.3); } .pay-channel-card { background: var(--amber-soft, oklch(0.65 0.18 55 / 0.16)); color: var(--status-amber); border: 1px solid var(--amber-border, oklch(0.65 0.18 55 / 0.35)); } .pay-channel-stripe { background: rgba(99, 91, 255, 0.16); color: #a5b4fc; border: 1px solid rgba(99, 91, 255, 0.35); } .pay-channel-pos { background: var(--status-green-bg); color: var(--status-green); border: 1px solid rgba(34, 197, 94, 0.3); } .pay-date-group-divider { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.625rem 0 0.375rem 0; margin-top: 0.5rem; border-bottom: 1px dashed var(--border-color); font-size: 0.78125rem; font-weight: 600; color: var(--text-muted); } .pay-date-group-divider:first-child { margin-top: 0; } .pay-invoice-customer-box { margin-bottom: 0.75rem; } .pay-invoice-cname { font-weight: 600; font-size: 0.875rem; color: var(--text-main); display: flex; align-items: center; justify-content: space-between; } .pay-invoice-cphone { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.2rem; display: flex; align-items: center; gap: 0.35rem; } .pay-invoice-items-box { background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 0.625rem 0.75rem; margin-bottom: 0.875rem; font-size: 0.8125rem; } .pay-invoice-footer { margin-top: auto; padding-top: 0.75rem; border-top: 1px solid var(--border-color); display: flex; flex-direction: column; gap: 0.625rem; } .pay-invoice-total-row { display: flex; justify-content: space-between; align-items: center; } .pay-invoice-total-val { font-family: var(--font-mono); font-weight: 700; font-size: 1.0625rem; color: var(--accent); } .pay-invoice-actions { display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; } /* ============================================================ DUAL-THEME CRAFT & ACCESSIBILITY (INSIGHTS & ANALYTICS) ============================================================ */ /* 1. Catalog Insights Light & Dark Theme Hardening */ :root[data-theme="light"] .cat-stat-card, [data-theme="light"] .cat-stat-card { background: #ffffff; border: 1px solid oklch(0.18 0.03 240 / 0.12); box-shadow: 0 2px 8px oklch(0.18 0.03 240 / 0.04); } :root[data-theme="light"] .cat-stat-card:hover, [data-theme="light"] .cat-stat-card:hover { border-color: var(--accent); box-shadow: 0 8px 24px oklch(0.62 0.14 210 / 0.12); } :root[data-theme="light"] .cat-stat-badge, [data-theme="light"] .cat-stat-badge { background: oklch(0.18 0.03 240 / 0.05); color: oklch(0.25 0.04 210); border: 1px solid oklch(0.18 0.03 240 / 0.12); } :root[data-theme="light"] .cat-insight-toolbar, [data-theme="light"] .cat-insight-toolbar { background: oklch(0.97 0.01 240); border-color: oklch(0.18 0.03 240 / 0.12); } :root[data-theme="light"] .cat-insight-search, [data-theme="light"] .cat-insight-search { background: #ffffff; border-color: oklch(0.18 0.03 240 / 0.14); color: oklch(0.18 0.03 240); } :root[data-theme="light"] .cat-insight-search::placeholder, [data-theme="light"] .cat-insight-search::placeholder { color: oklch(0.40 0.04 240); } :root[data-theme="dark"] .cat-insight-search::placeholder, [data-theme="dark"] .cat-insight-search::placeholder { color: rgba(255, 255, 255, 0.40); } :root[data-theme="light"] .cat-insight-filters .pill-tab, [data-theme="light"] .cat-insight-filters .pill-tab { background: #ffffff; border: 1px solid oklch(0.18 0.03 240 / 0.12); color: oklch(0.35 0.04 240); } :root[data-theme="light"] .cat-insight-filters .pill-tab:hover, [data-theme="light"] .cat-insight-filters .pill-tab:hover { background: oklch(0.97 0.01 240); color: oklch(0.18 0.03 240); } :root[data-theme="light"] .cat-insight-filters .pill-tab.active, [data-theme="light"] .cat-insight-filters .pill-tab.active { background: var(--accent); color: #ffffff; border-color: var(--accent); font-weight: 600; } :root[data-theme="light"] .cat-custom-select .cat-select-trigger, [data-theme="light"] .cat-custom-select .cat-select-trigger { background: #ffffff; border-color: oklch(0.18 0.03 240 / 0.14); color: oklch(0.18 0.03 240); } :root[data-theme="light"] .cat-select-menu, [data-theme="light"] .cat-select-menu { background: #ffffff; border-color: oklch(0.18 0.03 240 / 0.14); box-shadow: 0 12px 36px oklch(0.18 0.03 240 / 0.12); } :root[data-theme="light"] .cat-select-option, [data-theme="light"] .cat-select-option { color: oklch(0.35 0.03 240); } :root[data-theme="light"] .cat-select-option:hover, [data-theme="light"] .cat-select-option:focus-visible { background: oklch(0.18 0.03 240 / 0.05); color: oklch(0.18 0.03 240); } :root[data-theme="light"] .cat-select-option.active, [data-theme="light"] .cat-select-option.active { background: oklch(0.62 0.14 210 / 0.12); color: oklch(0.35 0.16 210); } :root[data-theme="light"] .d3-velocity-row, [data-theme="light"] .d3-velocity-row { background: #ffffff; border-color: oklch(0.18 0.03 240 / 0.10); box-shadow: 0 1px 3px oklch(0.18 0.03 240 / 0.03); } :root[data-theme="light"] .d3-velocity-row:hover, [data-theme="light"] .d3-velocity-row:hover { background: oklch(0.98 0.01 240); border-color: var(--accent); } :root[data-theme="light"] .cat-autonomous-health-box, [data-theme="light"] .cat-autonomous-health-box { background: oklch(0.98 0.01 240); border-color: oklch(0.18 0.03 240 / 0.12); } :root[data-theme="light"] #cat-restock-alert-banner, [data-theme="light"] #cat-restock-alert-banner { background: oklch(0.96 0.05 85 / 0.85); border-color: oklch(0.65 0.16 85 / 0.40); color: oklch(0.30 0.14 85); } /* 2. Section Analytics Light & Dark Theme Hardening */ :root[data-theme="light"] .analytics-kpi-grid .kpi-card.kpi-interactive, [data-theme="light"] .analytics-kpi-grid .kpi-card.kpi-interactive { background: #ffffff; border-color: oklch(0.18 0.03 240 / 0.12); box-shadow: 0 2px 8px oklch(0.18 0.03 240 / 0.04); } :root[data-theme="light"] .analytics-kpi-grid .kpi-card.kpi-interactive:hover, [data-theme="light"] .analytics-kpi-grid .kpi-card.kpi-interactive:hover { border-color: var(--accent); box-shadow: 0 6px 20px oklch(0.62 0.14 210 / 0.12); } :root[data-theme="light"] .analytics-kpi-grid .kpi-card.kpi-interactive.active, [data-theme="light"] .analytics-kpi-grid .kpi-card.kpi-interactive.active { border-color: var(--accent); background: oklch(0.62 0.14 210 / 0.06); box-shadow: 0 0 0 1.5px var(--accent), 0 4px 16px oklch(0.62 0.14 210 / 0.12); } :root[data-theme="light"] .analytics-kpi-grid .kpi-badge-trend, [data-theme="light"] .analytics-kpi-grid .kpi-badge-trend { background: oklch(0.18 0.03 240 / 0.06); border-color: oklch(0.18 0.03 240 / 0.10); color: oklch(0.25 0.04 210); } :root[data-theme="light"] .interactive-chart-container, [data-theme="light"] .interactive-chart-container { background: #ffffff; border-color: oklch(0.18 0.03 240 / 0.12); box-shadow: 0 2px 10px oklch(0.18 0.03 240 / 0.04); } :root[data-theme="light"] .distribution-legend-item, [data-theme="light"] .distribution-legend-item { background: oklch(0.97 0.01 240); border-color: oklch(0.18 0.03 240 / 0.10); } :root[data-theme="light"] .distribution-legend-item:hover, [data-theme="light"] .distribution-legend-item:hover { background: oklch(0.95 0.015 240); } :root[data-theme="light"] .distribution-legend-left, [data-theme="light"] .distribution-legend-left { color: oklch(0.20 0.03 240); } :root[data-theme="light"] .distribution-legend-val, [data-theme="light"] .distribution-legend-val { color: oklch(0.35 0.04 240); } :root[data-theme="light"] .interactive-chart-container .apexcharts-tooltip, [data-theme="light"] .interactive-chart-container .apexcharts-tooltip { background: #ffffff !important; border-color: oklch(0.18 0.03 240 / 0.15) !important; box-shadow: 0 8px 24px oklch(0.18 0.03 240 / 0.12) !important; color: oklch(0.18 0.03 240) !important; } :root[data-theme="light"] .interactive-chart-container .apexcharts-tooltip-title, [data-theme="light"] .interactive-chart-container .apexcharts-tooltip-title { background: oklch(0.97 0.01 240) !important; border-bottom-color: oklch(0.18 0.03 240 / 0.10) !important; color: oklch(0.18 0.03 240) !important; } :root[data-theme="light"] .analytics-date-popover, [data-theme="light"] .analytics-date-popover { background: #ffffff !important; border-color: oklch(0.18 0.03 240 / 0.16); box-shadow: 0 16px 48px oklch(0.18 0.03 240 / 0.15); } :root[data-theme="light"] .cal-presets-rail, [data-theme="light"] .cal-presets-rail { background: oklch(0.97 0.01 240); border-color: oklch(0.18 0.03 240 / 0.10); } :root[data-theme="light"] .cal-preset-btn, [data-theme="light"] .cal-preset-btn { color: oklch(0.35 0.04 240); } :root[data-theme="light"] .cal-preset-btn:hover, [data-theme="light"] .cal-preset-btn:hover { background: oklch(0.18 0.03 240 / 0.05); color: oklch(0.18 0.03 240); } :root[data-theme="light"] .cal-preset-btn.active, [data-theme="light"] .cal-preset-btn.active { background: oklch(0.62 0.14 210 / 0.15); color: oklch(0.35 0.16 210); } :root[data-theme="light"] .cal-picker-core, [data-theme="light"] .cal-picker-core { background: #ffffff; } :root[data-theme="light"] .cal-day-cell, [data-theme="light"] .cal-day-cell { color: oklch(0.25 0.03 240); } :root[data-theme="light"] .cal-day-cell.in-range, [data-theme="light"] .cal-day-cell.in-range { background: oklch(0.62 0.14 210 / 0.12); color: oklch(0.25 0.14 210); } :root[data-theme="light"] .cal-popover-footer, [data-theme="light"] .cal-popover-footer { background: oklch(0.98 0.01 240); border-color: oklch(0.18 0.03 240 / 0.10); } :root[data-theme="light"] .dash-table thead th, [data-theme="light"] .dash-table thead th { background: oklch(0.97 0.01 240); color: oklch(0.35 0.04 240); border-bottom: 1px solid oklch(0.18 0.03 240 / 0.12); } :root[data-theme="light"] .dash-table tbody tr:hover, [data-theme="light"] .dash-table tbody tr:hover { background: oklch(0.98 0.01 240); } /* ========================================================================== LIVE CHAT LIGHT THEME OKLCH CONTRAST HARDENING (IMPECCABLE) ========================================================================== */ :root[data-theme="light"] .chat-inbox-card, [data-theme="light"] .chat-inbox-card, body.light-theme .chat-inbox-card { background: #ffffff; border-color: oklch(0.88 0.02 240); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); } :root[data-theme="light"] .chat-search-input, [data-theme="light"] .chat-search-input, body.light-theme .chat-search-input { background: oklch(0.985 0.005 240) !important; border-color: oklch(0.86 0.02 240) !important; color: oklch(0.18 0.03 240) !important; } :root[data-theme="light"] .chat-search-input::placeholder, [data-theme="light"] .chat-search-input::placeholder, body.light-theme .chat-search-input::placeholder { color: oklch(0.48 0.03 240) !important; } :root[data-theme="light"] .chat-search-icon, [data-theme="light"] .chat-search-icon, body.light-theme .chat-search-icon { color: oklch(0.45 0.03 240); } :root[data-theme="light"] .chat-search-kbd, [data-theme="light"] .chat-search-kbd, body.light-theme .chat-search-kbd { background: #ffffff; border-color: oklch(0.84 0.02 240); color: oklch(0.40 0.03 240); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); } :root[data-theme="light"] .chat-search-clear, [data-theme="light"] .chat-search-clear, body.light-theme .chat-search-clear { background: oklch(0.92 0.015 240); color: oklch(0.38 0.03 240); } :root[data-theme="light"] .chat-search-clear:hover, [data-theme="light"] .chat-search-clear:hover, body.light-theme .chat-search-clear:hover { background: oklch(0.88 0.02 240); color: oklch(0.18 0.03 240); } :root[data-theme="light"] .chat-inbox-filter-tabs, [data-theme="light"] .chat-inbox-filter-tabs, body.light-theme .chat-inbox-filter-tabs { background: oklch(0.95 0.01 240); border-color: oklch(0.88 0.02 240); } :root[data-theme="light"] .chat-inbox-filter-tabs .pill-tab, [data-theme="light"] .chat-inbox-filter-tabs .pill-tab, body.light-theme .chat-inbox-filter-tabs .pill-tab { color: oklch(0.44 0.03 240); } :root[data-theme="light"] .chat-inbox-filter-tabs .pill-tab:hover, [data-theme="light"] .chat-inbox-filter-tabs .pill-tab:hover, body.light-theme .chat-inbox-filter-tabs .pill-tab:hover { color: oklch(0.18 0.03 240); } :root[data-theme="light"] .chat-inbox-filter-tabs .pill-tab.active, [data-theme="light"] .chat-inbox-filter-tabs .pill-tab.active, body.light-theme .chat-inbox-filter-tabs .pill-tab.active { background: #ffffff; color: oklch(0.18 0.03 240); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 1px rgba(0, 0, 0, 0.04); } :root[data-theme="light"] .chat-tab-badge, [data-theme="light"] .chat-tab-badge, body.light-theme .chat-tab-badge { background: oklch(0.95 0.05 75); border-color: oklch(0.80 0.12 75); color: oklch(0.38 0.16 75); } :root[data-theme="light"] .chat-inbox-item, [data-theme="light"] .chat-inbox-item, body.light-theme .chat-inbox-item { background: oklch(0.985 0.005 240); border: 1px solid oklch(0.90 0.015 240); } :root[data-theme="light"] .chat-inbox-item:hover, [data-theme="light"] .chat-inbox-item:hover, body.light-theme .chat-inbox-item:hover { background: oklch(0.96 0.01 240); border-color: oklch(0.82 0.03 240); } :root[data-theme="light"] .chat-inbox-item.active, [data-theme="light"] .chat-inbox-item.active, body.light-theme .chat-inbox-item.active { background: oklch(0.94 0.03 190 / 0.7); box-shadow: inset 0 0 0 1.5px var(--accent); border-color: var(--accent); } :root[data-theme="light"] .chat-inbox-name, [data-theme="light"] .chat-inbox-name, body.light-theme .chat-inbox-name { color: oklch(0.18 0.03 240); } :root[data-theme="light"] .chat-inbox-preview, [data-theme="light"] .chat-inbox-preview, body.light-theme .chat-inbox-preview { color: oklch(0.44 0.02 240); } :root[data-theme="light"] .chat-inbox-time, [data-theme="light"] .chat-inbox-time, body.light-theme .chat-inbox-time { color: oklch(0.46 0.02 240); } :root[data-theme="light"] .chat-inbox-meta-footer, [data-theme="light"] .chat-inbox-meta-footer, body.light-theme .chat-inbox-meta-footer { color: oklch(0.46 0.03 240); border-top-color: oklch(0.88 0.02 240); } /* --- Customer Dossier & Sheet Light Theme Tokens --- */ :root[data-theme="light"] .chat-dossier-card, [data-theme="light"] .chat-dossier-card, body.light-theme .chat-dossier-card { background: #ffffff; border-color: oklch(0.88 0.02 240); box-shadow: -4px 0 24px rgba(0, 0, 0, 0.08); } :root[data-theme="light"] .chat-dossier-header, [data-theme="light"] .chat-dossier-header, body.light-theme .chat-dossier-header { border-bottom-color: oklch(0.90 0.015 240); } :root[data-theme="light"] .dossier-close-btn, [data-theme="light"] .dossier-close-btn, body.light-theme .dossier-close-btn { background: oklch(0.95 0.01 240); border-color: oklch(0.86 0.02 240); color: oklch(0.42 0.03 240); } :root[data-theme="light"] .dossier-close-btn:hover, [data-theme="light"] .dossier-close-btn:hover, body.light-theme .dossier-close-btn:hover { background: oklch(0.90 0.015 240); color: oklch(0.18 0.03 240); } :root[data-theme="light"] .dossier-profile-box, [data-theme="light"] .dossier-profile-box, body.light-theme .dossier-profile-box { background: oklch(0.985 0.005 240); border-color: oklch(0.88 0.02 240); } :root[data-theme="light"] .dossier-name, [data-theme="light"] .dossier-name, body.light-theme .dossier-name { color: oklch(0.18 0.03 240); } :root[data-theme="light"] .dossier-phone, [data-theme="light"] .dossier-phone, body.light-theme .dossier-phone { color: oklch(0.45 0.03 240); } :root[data-theme="light"] .dossier-copy-phone-btn, [data-theme="light"] .dossier-copy-phone-btn, body.light-theme .dossier-copy-phone-btn { background: #ffffff; border-color: oklch(0.84 0.02 240); color: oklch(0.40 0.03 240); } :root[data-theme="light"] .dossier-copy-phone-btn:hover, [data-theme="light"] .dossier-copy-phone-btn:hover, body.light-theme .dossier-copy-phone-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); } :root[data-theme="light"] .dossier-metric-item, [data-theme="light"] .dossier-metric-item, body.light-theme .dossier-metric-item { background: oklch(0.985 0.005 240); border-color: oklch(0.88 0.02 240); } :root[data-theme="light"] .dossier-metric-label, [data-theme="light"] .dossier-metric-label, body.light-theme .dossier-metric-label { color: oklch(0.48 0.03 240); } :root[data-theme="light"] .dossier-metric-val, [data-theme="light"] .dossier-metric-val, body.light-theme .dossier-metric-val { color: oklch(0.18 0.03 240); } :root[data-theme="light"] .dossier-section-title, [data-theme="light"] .dossier-section-title, body.light-theme .dossier-section-title { color: oklch(0.44 0.03 240); } :root[data-theme="light"] .dossier-memory-box, [data-theme="light"] .dossier-memory-box, body.light-theme .dossier-memory-box { background: oklch(0.985 0.005 240); border-color: oklch(0.88 0.02 240); color: oklch(0.30 0.03 240); } :root[data-theme="light"] .dossier-history-item, [data-theme="light"] .dossier-history-item, body.light-theme .dossier-history-item { background: oklch(0.985 0.005 240); border-color: oklch(0.88 0.02 240); color: oklch(0.24 0.03 240); } :root[data-theme="light"] .dossier-notes-input, [data-theme="light"] .dossier-notes-input, body.light-theme .dossier-notes-input { background: #ffffff !important; border-color: oklch(0.86 0.02 240) !important; color: oklch(0.18 0.03 240) !important; } /* --- Quick Slash Action Pills & Send Bar Light Theme Tokens --- */ :root[data-theme="light"] .chat-quick-actions-bar, [data-theme="light"] .chat-quick-actions-bar, body.light-theme .chat-quick-actions-bar { border-top-color: oklch(0.88 0.02 240); } :root[data-theme="light"] .chat-slash-pill, [data-theme="light"] .chat-slash-pill, body.light-theme .chat-slash-pill { background: #ffffff; border-color: oklch(0.84 0.02 240); color: oklch(0.32 0.03 240); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03); } :root[data-theme="light"] .chat-slash-pill:hover, [data-theme="light"] .chat-slash-pill:hover, body.light-theme .chat-slash-pill:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); } :root[data-theme="light"] .chat-canned-select, [data-theme="light"] .chat-canned-select, body.light-theme .chat-canned-select { background: #ffffff !important; border-color: oklch(0.84 0.02 240) !important; color: oklch(0.32 0.03 240) !important; } :root[data-theme="light"] .chat-input-wrapper, [data-theme="light"] .chat-input-wrapper, body.light-theme .chat-input-wrapper { background: #ffffff; border-color: oklch(0.84 0.02 240); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); } :root[data-theme="light"] .chat-input-wrapper:focus-within, [data-theme="light"] .chat-input-wrapper:focus-within, body.light-theme .chat-input-wrapper:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } :root[data-theme="light"] .chat-input-field, [data-theme="light"] .chat-input-field, body.light-theme .chat-input-field { color: oklch(0.18 0.03 240) !important; } :root[data-theme="light"] .chat-input-field::placeholder, [data-theme="light"] .chat-input-field::placeholder, body.light-theme .chat-input-field::placeholder { color: oklch(0.48 0.03 240) !important; } :root[data-theme="light"] .chat-attach-btn, [data-theme="light"] .chat-attach-btn, body.light-theme .chat-attach-btn { color: oklch(0.44 0.03 240); } :root[data-theme="light"] .chat-attach-btn:hover, [data-theme="light"] .chat-attach-btn:hover, body.light-theme .chat-attach-btn:hover { color: var(--accent); } :root[data-theme="light"] .chat-thread-card, [data-theme="light"] .chat-thread-card, body.light-theme .chat-thread-card { background: #ffffff; border-color: oklch(0.88 0.02 240); } :root[data-theme="light"] .chat-thread-header, [data-theme="light"] .chat-thread-header, body.light-theme .chat-thread-header { border-bottom-color: oklch(0.88 0.02 240); } :root[data-theme="light"] .chat-header-title, [data-theme="light"] .chat-header-title, body.light-theme .chat-header-title { color: oklch(0.18 0.03 240); } /* ============================================================ ISSUE & DELIVER CUSTOMER PASS STUDIO (IMPECCABLE WCAG AA) ============================================================ */ .pass-source-tabs { display: flex; gap: 0.375rem; background: var(--bg-input); border: 1px solid var(--border-color); padding: 0.25rem; border-radius: var(--radius-md); } .pass-source-tab { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.5rem 0.75rem; font-family: var(--font-heading); font-size: 0.8125rem; font-weight: 600; border-radius: var(--radius-sm); background: transparent; color: var(--text-muted); border: none; cursor: pointer; transition: all 0.15s ease; } .pass-source-tab:hover { color: var(--text-main); } .pass-source-tab.active { background: var(--bg-card); color: var(--text-main); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18); border: 1px solid var(--border-color); } .pass-empty-alert { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.625rem 0.875rem; margin-top: 0.5rem; background: rgba(20, 184, 166, 0.08); border: 1px solid rgba(20, 184, 166, 0.25); border-radius: var(--radius-sm); font-size: 0.8125rem; color: var(--text-main); } .pass-variety-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; margin-top: 0.25rem; } @media (max-width: 540px) { .pass-variety-grid { grid-template-columns: repeat(2, 1fr); } } .pass-flavor-btn { display: flex; flex-direction: column; align-items: flex-start; padding: 0.625rem 0.75rem; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-sm); cursor: pointer; transition: all 0.15s ease; text-align: left; } .pass-flavor-btn i { font-size: 0.9375rem; margin-bottom: 0.375rem; color: var(--text-muted); transition: color 0.15s ease; } .pass-flavor-label { font-size: 0.8125rem; font-weight: 700; color: var(--text-main); line-height: 1.2; } .pass-flavor-sub { font-size: 0.6875rem; color: var(--text-muted); margin-top: 0.125rem; line-height: 1.2; } .pass-flavor-btn:hover { border-color: var(--border-strong); background: var(--bg-card); } .pass-flavor-btn.active { border-color: var(--accent); background: rgba(20, 184, 166, 0.08); } .pass-flavor-btn.active i { color: var(--accent); } .pass-phone-prefix { display: inline-flex; align-items: center; justify-content: center; padding: 0 0.75rem; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 600; color: var(--text-muted); } .pass-quick-presets { display: inline-flex; gap: 0.25rem; } .pass-preset-chip { background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 0.125rem 0.375rem; font-size: 0.6875rem; font-family: var(--font-mono); color: var(--text-muted); cursor: pointer; transition: all 0.15s ease; } .pass-preset-chip:hover { color: var(--text-main); border-color: var(--accent); } /* LIVE E-CARD PREVIEW */ .pass-preview-container { background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 0.75rem; } .pass-preview-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.625rem; } .pass-preview-eyebrow { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); display: inline-flex; align-items: center; gap: 0.375rem; } .pass-preview-pulse { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.6875rem; color: var(--status-green); font-weight: 600; } .pass-pulse-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--status-green); box-shadow: 0 0 8px var(--status-green); animation: pass-dot-pulse 2s infinite ease-in-out; } @keyframes pass-dot-pulse { 0%, 100% { opacity: 0.4; transform: scale(0.9); } 50% { opacity: 1; transform: scale(1.1); } } .pass-card-mock { background: oklch(0.14 0.015 95); border: 1px solid oklch(0.84 0.19 80.46 / 0.25); border-radius: var(--radius-md); padding: 1rem; color: #f8fafc; position: relative; overflow: hidden; } :root[data-theme="light"] .pass-card-mock, [data-theme="light"] .pass-card-mock, body.light-theme .pass-card-mock { background: oklch(0.16 0.02 240); border-color: oklch(0.62 0.14 210 / 0.35); } .pass-card-mock::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, oklch(0.84 0.19 80.46), oklch(0.70 0.12 188)); } .pass-card-mock-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; } .pass-card-mock-brand { font-family: var(--font-heading); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: oklch(0.84 0.19 80.46); } .pass-card-mock-badge { font-size: 0.6875rem; font-weight: 600; padding: 0.125rem 0.5rem; border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.12); color: #ffffff; display: inline-flex; align-items: center; gap: 0.35rem; } .pass-card-mock-title { font-family: var(--font-heading); font-size: 1.0625rem; font-weight: 700; color: #ffffff; line-height: 1.3; margin-bottom: 0.5rem; } .pass-card-mock-cust { margin-bottom: 0.875rem; padding-bottom: 0.625rem; border-bottom: 1px dashed rgba(255, 255, 255, 0.15); } .pass-card-mock-meta { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.625rem; } .pass-meta-label { font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(255, 255, 255, 0.55); margin-bottom: 0.125rem; } .pass-meta-val { font-size: 0.8125rem; font-weight: 600; color: #ffffff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* DELIVERY TOGGLE & PREVIEW */ .pass-delivery-box { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 0.875rem; } .pass-delivery-toggle { display: flex; align-items: center; gap: 0.625rem; cursor: pointer; user-select: none; } .pass-delivery-toggle input[type="checkbox"] { width: 1rem; height: 1rem; accent-color: var(--accent); cursor: pointer; } .pass-wa-preview-bubble { margin-top: 0.75rem; padding: 0.625rem 0.75rem; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-sm); transition: all 0.2s ease; } .pass-wa-pre { margin: 0; white-space: pre-wrap; word-break: break-word; font-size: 0.75rem; line-height: 1.5; color: var(--text-main); max-height: 140px; overflow-y: auto; } /* SUCCESS VIEW */ .pass-success-icon-wrap { width: 60px; height: 60px; border-radius: 50%; background: rgba(16, 185, 129, 0.12); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 0.5rem; } .pass-success-code-box { display: inline-flex; flex-direction: column; align-items: center; padding: 1rem 1.5rem; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-md); margin-bottom: 1.25rem; } .pass-success-code-val { font-size: 1.5rem; font-weight: 700; letter-spacing: 0.08em; color: var(--accent); margin: 0.25rem 0 0.75rem 0; } .pass-success-wa-status { background: rgba(16, 185, 129, 0.08); border: 1px solid rgba(16, 185, 129, 0.25); border-radius: var(--radius-md); padding: 1rem; max-width: 420px; margin: 0 auto; } /* Pass Studio 2-Column Responsive Layout & Pinned Sticky Footer */ .pass-studio-modal-card { max-width: 840px !important; max-height: 90vh !important; display: flex !important; flex-direction: column !important; padding: 0 !important; overflow: hidden !important; } .pass-studio-modal-card .modal-header { padding: 1.25rem 1.5rem 0.875rem 1.5rem !important; margin-bottom: 0 !important; flex-shrink: 0; border-bottom: 1px solid var(--border-color) !important; } .pass-studio-body { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 1.25rem; padding: 1.25rem 1.5rem; overflow-y: auto; max-height: calc(90vh - 135px); } @media (max-width: 768px) { .pass-studio-modal-card { max-width: 540px !important; } .pass-studio-body { grid-template-columns: 1fr; gap: 1rem; padding: 1rem; } } .pass-studio-col-left { display: flex; flex-direction: column; gap: 1rem; } .pass-studio-col-right { display: flex; flex-direction: column; gap: 1rem; } .pass-studio-sticky-footer { position: sticky; bottom: 0; background: var(--bg-modal); border-top: 1px solid var(--border-color); padding: 0.875rem 1.5rem; display: flex; justify-content: flex-end; gap: 0.75rem; z-index: 10; flex-shrink: 0; } /* ========================================================================== IMPECCABLE STATION DISPATCH & REVOLUTIONARY OPERATIONAL MATRIX (LIGHT & DARK) ========================================================================== */ .bk-dispatch-card { border: 1px solid var(--border-color); background: var(--bg-card); padding: 1.25rem; border-radius: var(--radius-sm); box-shadow: var(--shadow-card); } .bk-dispatch-container { display: flex; flex-direction: column; gap: 1.25rem; } .bk-dispatch-swimlane { background: var(--bg-card-sub, rgba(255, 255, 255, 0.02)); border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 1rem 1.125rem; } [data-theme="light"] .bk-dispatch-swimlane { background: #f8fafc; border-color: #e2e8f0; } .bk-dispatch-swimlane-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.875rem; padding-bottom: 0.625rem; border-bottom: 1px dashed var(--border-color); } [data-theme="light"] .bk-dispatch-swimlane-head { border-bottom-color: #cbd5e1; } .bk-dispatch-swimlane-title { font-size: 0.875rem; font-weight: 700; color: var(--text-main); letter-spacing: -0.01em; } .bk-dispatch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 0.75rem; } /* Dispatch Card Item */ .bk-dispatch-card-item { background: var(--bg-card); border-radius: var(--radius-sm); padding: 0.875rem 1rem; display: flex; flex-direction: column; justify-content: space-between; min-height: 120px; position: relative; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: var(--shadow-card); } .bk-dispatch-card-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-pop); } .bk-dispatch-item-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.5rem; } .bk-dispatch-item-name { font-size: 0.8125rem; font-weight: 700; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Card States: Available */ .bk-dispatch-card-item.state-available { border: 1px solid rgba(16, 185, 129, 0.35); background: rgba(16, 185, 129, 0.04); } [data-theme="light"] .bk-dispatch-card-item.state-available { border-color: #10b981; background: #ffffff; box-shadow: 0 2px 8px rgba(16, 185, 129, 0.08); } .bk-dispatch-card-item.state-available:hover { border-color: #10b981; box-shadow: 0 0 16px rgba(16, 185, 129, 0.18); } /* Card States: In Service (Occupied) */ .bk-dispatch-card-item.state-occupied { border: 1px solid rgba(245, 158, 11, 0.45); background: rgba(245, 158, 11, 0.05); } [data-theme="light"] .bk-dispatch-card-item.state-occupied { border-color: #f59e0b; background: #ffffff; box-shadow: 0 2px 8px rgba(245, 158, 11, 0.1); } .bk-dispatch-card-item.state-occupied:hover { border-color: #f59e0b; box-shadow: 0 0 16px rgba(245, 158, 11, 0.2); } /* Card States: Blocked */ .bk-dispatch-card-item.state-blocked { border: 1px solid rgba(139, 92, 246, 0.4); background: rgba(139, 92, 246, 0.04); } [data-theme="light"] .bk-dispatch-card-item.state-blocked { border-color: #8b5cf6; background: #ffffff; box-shadow: 0 2px 8px rgba(139, 92, 246, 0.08); } /* Card States: Offline */ .bk-dispatch-card-item.state-off { border: 1px dashed var(--border-color); background: var(--bg-card-sub, rgba(255, 255, 255, 0.015)); opacity: 0.7; } [data-theme="light"] .bk-dispatch-card-item.state-off { border-color: #cbd5e1; background: #f8fafc; opacity: 0.85; } /* Live Pulse Dots */ .st-live-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; position: relative; } .st-live-dot.dot-available { background: #10b981; box-shadow: 0 0 8px #10b981; } .st-live-dot.dot-available::after { content: ''; position: absolute; top: -2px; left: -2px; width: 12px; height: 12px; border-radius: 50%; border: 1px solid #10b981; animation: livePulseRing 2s cubic-bezier(0.25, 0.1, 0.25, 1) infinite; } .st-live-dot.dot-occupied { background: #f59e0b; box-shadow: 0 0 8px #f59e0b; } .st-live-dot.dot-occupied::after { content: ''; position: absolute; top: -2px; left: -2px; width: 12px; height: 12px; border-radius: 50%; border: 1px solid #f59e0b; animation: livePulseRing 1.6s cubic-bezier(0.25, 0.1, 0.25, 1) infinite; } .st-live-dot.dot-blocked { background: #8b5cf6; } .st-live-dot.dot-off { background: #64748b; } @keyframes livePulseRing { 0% { transform: scale(0.8); opacity: 0.9; } 50% { transform: scale(1.6); opacity: 0; } 100% { transform: scale(0.8); opacity: 0; } } /* Architectural Status Tag Badges (Linear/Stripe Grade) */ .pill-green { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.15rem 0.45rem; border-radius: var(--radius-xs, 4px); font-size: 0.6875rem; font-weight: 600; background: oklch(0.24 0.05 160 / 0.4); color: oklch(0.82 0.09 160); border: 1px solid oklch(0.45 0.10 160 / 0.35); } [data-theme="light"] .pill-green { background: oklch(0.96 0.02 160); color: oklch(0.35 0.17 160); border-color: oklch(0.62 0.17 160 / 0.35); } .pill-amber { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.15rem 0.45rem; border-radius: var(--radius-xs, 4px); font-size: 0.6875rem; font-weight: 600; background: oklch(0.24 0.05 85 / 0.4); color: oklch(0.82 0.09 85); border: 1px solid oklch(0.45 0.10 85 / 0.35); } [data-theme="light"] .pill-amber { background: oklch(0.96 0.02 85); color: oklch(0.38 0.16 85); border-color: oklch(0.65 0.16 85 / 0.35); } .pill-purple { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.15rem 0.45rem; border-radius: var(--radius-xs, 4px); font-size: 0.6875rem; font-weight: 600; background: oklch(0.24 0.05 285 / 0.4); color: oklch(0.82 0.08 285); border: 1px solid oklch(0.45 0.10 285 / 0.35); } [data-theme="light"] .pill-purple { background: oklch(0.96 0.02 285); color: oklch(0.35 0.14 285); border-color: oklch(0.40 0.12 285 / 0.25); } .pill-rose, .pill-red { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.15rem 0.45rem; border-radius: var(--radius-xs, 4px); font-size: 0.6875rem; font-weight: 600; background: oklch(0.24 0.05 25 / 0.4); color: oklch(0.82 0.09 25); border: 1px solid oklch(0.45 0.10 25 / 0.35); } [data-theme="light"] .pill-rose, [data-theme="light"] .pill-red { background: oklch(0.96 0.02 25); color: oklch(0.38 0.20 25); border-color: oklch(0.65 0.20 25 / 0.35); } .pill-gold { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.15rem 0.45rem; border-radius: var(--radius-xs, 4px); font-size: 0.6875rem; font-weight: 600; background: oklch(0.24 0.06 80 / 0.4); color: oklch(0.85 0.16 80); border: 1px solid oklch(0.50 0.12 80 / 0.35); } [data-theme="light"] .pill-gold { background: oklch(0.97 0.03 85); color: oklch(0.42 0.16 80); border-color: oklch(0.65 0.16 85 / 0.35); } .text-gold { color: var(--brand-accent, #D4AF37); } /* Quick Block Presets Bar in Light and Dark */ [data-theme="light"] .bk-quick-block-bar { background: #f8fafc !important; border-color: #e2e8f0 !important; } [data-theme="light"] .bk-operating-schedule-card, [data-theme="light"] .bk-ai-engine-card, [data-theme="light"] .bk-block-manager-card, [data-theme="light"] .bk-reservations-stream-card { background: #ffffff; border-color: #e2e8f0; } @media (max-width: 768px) { .bk-dispatch-grid { grid-template-columns: 1fr; } } /* ========================================================================== STATION FLOOR MATRIX STATE HARMONIZATION & LIGHT THEME HARDENING (2026-09-08) ========================================================================== */ .station-card.station-status-off, .station-card.station-status-maintenance { --st-card-accent: var(--text-muted, #64748b); opacity: 0.88; } .station-card.station-status-blocked { --st-card-accent: var(--status-red, #ef4444); } .station-status-off, .station-status-maintenance { background: rgba(100, 116, 139, 0.12); color: #94a3b8; border: 1px solid rgba(100, 116, 139, 0.3); } .station-status-blocked { background: oklch(0.24 0.05 25 / 0.4); color: oklch(0.82 0.09 25); border: 1px solid oklch(0.45 0.10 25 / 0.35); } /* Light Theme High-Contrast Overrides */ [data-theme="light"] .station-card { background: #ffffff; border-color: rgba(0, 0, 0, 0.12); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); } [data-theme="light"] .station-card.station-status-available { --st-card-accent: oklch(0.45 0.16 150); } [data-theme="light"] .station-card.station-status-occupied { --st-card-accent: oklch(0.55 0.16 85); } [data-theme="light"] .station-card.station-status-paid { --st-card-accent: oklch(0.45 0.14 210); } [data-theme="light"] .station-card.station-status-reserved { --st-card-accent: oklch(0.45 0.14 285); } [data-theme="light"] .station-card.station-status-off, [data-theme="light"] .station-card.station-status-maintenance { --st-card-accent: #94a3b8; background: #f8fafc; } [data-theme="light"] .station-card.station-status-blocked { --st-card-accent: oklch(0.50 0.18 25); background: #ffffff; } [data-theme="light"] .station-status-available { background: oklch(0.96 0.02 160); color: oklch(0.35 0.17 160); border-color: oklch(0.62 0.17 160 / 0.35); } [data-theme="light"] .station-status-occupied { background: oklch(0.96 0.02 85); color: oklch(0.38 0.16 85); border-color: oklch(0.65 0.16 85 / 0.35); } [data-theme="light"] .station-status-paid { background: oklch(0.96 0.02 210); color: oklch(0.32 0.14 210); border-color: oklch(0.62 0.14 210 / 0.35); } [data-theme="light"] .station-status-reserved { background: oklch(0.96 0.01 240); color: oklch(0.25 0.03 240); border-color: oklch(0.18 0.03 240 / 0.15); } [data-theme="light"] .station-status-off, [data-theme="light"] .station-status-maintenance { background: oklch(0.96 0.01 240); color: oklch(0.40 0.04 240); border-color: oklch(0.18 0.03 240 / 0.15); } [data-theme="light"] .station-status-blocked { background: oklch(0.96 0.02 25); color: oklch(0.38 0.20 25); border-color: oklch(0.65 0.20 25 / 0.35); } [data-theme="light"] .station-card-num { color: #0f172a; } [data-theme="light"] .station-card-name { color: #334155; } [data-theme="light"] .station-card-order-preview { background: #f8fafc; border-color: rgba(0, 0, 0, 0.08); } [data-theme="light"] .st-manage-card { background: #ffffff !important; border-color: rgba(0, 0, 0, 0.12) !important; } [data-theme="light"] #st-batch-gen-drawer { background: #f0fdfa !important; border-color: #99f6e4 !important; } /* ========================================================================== 3-TIER MODULAR STATION CARD & 24-NICHE UNIVERSAL FLEXIBILITY (2026-09-08) ========================================================================== */ .st-manage-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-sm, 8px); padding: 0.875rem; display: flex; flex-direction: column; gap: 0.75rem; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .st-manage-card:hover { border-color: rgba(20, 184, 166, 0.4); } /* Tier 1: Identity Bar */ .st-card-tier-1 { display: flex; align-items: center; justify-content: space-between; gap: 0.625rem; flex-wrap: wrap; } .st-card-identity { display: flex; align-items: center; gap: 0.375rem; flex: 1; min-width: 180px; } .st-unit-badge { font-size: 0.8125rem; font-weight: 800; color: var(--color-teal, #14b8a6); padding: 0.2rem 0.5rem; background: rgba(20, 184, 166, 0.1); border: 1px solid rgba(20, 184, 166, 0.25); border-radius: var(--radius-xs, 4px); } .st-num-input { width: 54px; height: 30px; font-weight: 700; text-align: center; } .st-name-input { flex: 1; min-width: 110px; height: 30px; font-weight: 600; } .st-card-category-wrap { display: flex; align-items: center; gap: 0.35rem; width: 140px; } .st-area-input { height: 30px; font-size: 0.75rem; width: 100%; } .st-card-pax-wrap { display: flex; align-items: center; gap: 0.25rem; } .st-cap-input { width: 60px; height: 30px; text-align: center; } .st-cap-label { font-size: 0.6875rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; } .st-card-actions { display: flex; align-items: center; gap: 0.375rem; margin-left: auto; } /* Tier 2: Operational Engine */ .st-card-tier-2 { display: flex; flex-direction: column; gap: 0.625rem; padding: 0.625rem; background: var(--bg-input, rgba(255, 255, 255, 0.02)); border: 1px solid var(--border-color); border-radius: var(--radius-xs, 6px); } .st-session-model-group { display: flex; align-items: center; gap: 0.625rem; flex-wrap: wrap; padding-bottom: 0.5rem; border-bottom: 1px dashed var(--border-color); } .st-group-label { font-size: 0.6875rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; display: inline-flex; align-items: center; gap: 0.25rem; } .st-session-pills { display: inline-flex; gap: 0.25rem; } .st-session-pills .pill-tab { padding: 0.2rem 0.55rem; font-size: 0.6875rem; border-radius: var(--radius-xs, 4px); border: 1px solid var(--border-color); background: transparent; color: var(--text-secondary); cursor: pointer; transition: all 0.15s ease; } .st-session-pills .pill-tab.active { background: rgba(20, 184, 166, 0.15); border-color: var(--color-teal, #14b8a6); color: var(--color-teal, #14b8a6); font-weight: 700; } .st-tier2-subgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.625rem; align-items: center; } .st-policy-group, .st-buffer-group, .st-amenities-group { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; } .st-policy-group select, .st-buffer-group select, .st-amenities-group input { height: 34px; font-size: 0.78125rem; } .st-amenities-group input { flex: 1; min-width: 140px; } /* Tier 3: Multi-Service Assignment Chips */ .st-card-tier-3 { padding-top: 0.25rem; } .st-services-bar { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .st-service-chips-tray { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; } .st-svc-chip { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.5rem; font-size: 0.6875rem; font-weight: 500; border-radius: var(--radius-xs, 4px); background: transparent; border: 1px solid var(--border-color); color: var(--text-secondary); cursor: pointer; transition: all 0.15s ease; } .st-svc-chip:hover { border-color: var(--text-muted); color: var(--text-main); } .st-svc-chip.active { background: rgba(20, 184, 166, 0.12); border-color: var(--color-teal, #14b8a6); color: var(--color-teal, #14b8a6); font-weight: 700; } /* Light Theme High-Contrast Overrides */ [data-theme="light"] .st-manage-card { background: #ffffff; border-color: rgba(0, 0, 0, 0.14); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04); } [data-theme="light"] .st-card-tier-2 { background: #f8fafc; border-color: rgba(0, 0, 0, 0.08); } [data-theme="light"] .st-unit-badge { background: #f0fdf4; border-color: #86efac; color: #15803d; } [data-theme="light"] .st-session-pills .pill-tab { border-color: rgba(0, 0, 0, 0.15); color: #475569; } [data-theme="light"] .st-session-pills .pill-tab.active { background: #f0fdf4; border-color: #16a34a; color: #15803d; } [data-theme="light"] .st-svc-chip { border-color: rgba(0, 0, 0, 0.15); color: #334155; } [data-theme="light"] .st-svc-chip.active { background: #f0fdfa; border-color: #0d9488; color: #0f766e; } /* ============================================================ BULLETPROOF FORM SELECT & INPUT METRICS (Anti-Clipping) ============================================================ */ select.form-select, .form-select { appearance: none; -webkit-appearance: none; -moz-appearance: none; background-color: var(--bg-input, rgba(255, 255, 255, 0.04)); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.65rem center; background-size: 11px 11px; padding-right: 1.85rem !important; cursor: pointer; line-height: 1.25 !important; box-sizing: border-box !important; } select.form-select-sm, .form-select-sm { height: 34px !important; min-height: 34px !important; padding: 0.35rem 1.85rem 0.35rem 0.625rem !important; font-size: 0.78125rem !important; line-height: 1.3 !important; box-sizing: border-box !important; } input.form-input-sm, select.form-input-sm { height: 34px !important; min-height: 34px !important; padding-top: 0.35rem !important; padding-bottom: 0.35rem !important; padding-right: 0.625rem !important; padding-left: 0.625rem; font-size: 0.78125rem !important; line-height: 1.3 !important; box-sizing: border-box !important; } textarea.form-input-sm { height: auto !important; min-height: 76px !important; line-height: 1.55 !important; padding: 0.625rem 0.75rem !important; font-size: 0.8125rem !important; box-sizing: border-box !important; resize: vertical; } /* Universal Search Input & Icon Padding Clearance Safeguard */ .spaces-search-wrapper input, .spaces-search-input, input.spaces-search-input, .cat-search-wrap input, .cat-search-input, .chat-search-wrap input, .chat-search-input, .faq-search-input-box input, .cat-insight-search-wrap input, .cat-insight-search, .input-icon-pad-left, input.input-icon-pad-left, #passes-search-input { padding-left: 2.375rem !important; } /* ============================================================ MODAL STATION MANAGE : TWO-TAB ARCHITECTURE & COMPACT ROWS ============================================================ */ .st-modal-tabs { display: flex; gap: 0.35rem; border-bottom: 1px solid var(--border-color); padding: 0.25rem 0 0.5rem 0; margin-bottom: 0.75rem; } .st-modal-tab-btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.85rem; font-size: 0.8125rem; font-weight: 600; border-radius: var(--radius-sm, 6px); border: 1px solid transparent; background: transparent; color: var(--text-secondary); cursor: pointer; transition: all 0.15s ease; } .st-modal-tab-btn:hover { color: var(--text-main); background: var(--bg-hover, rgba(255, 255, 255, 0.05)); } .st-modal-tab-btn.active { background: var(--accent-soft, rgba(20, 184, 166, 0.12)); color: var(--accent, #14b8a6); border-color: var(--accent-border, rgba(20, 184, 166, 0.3)); } /* Compact Station Rows */ .st-compact-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.65rem; background: var(--bg-card, rgba(255, 255, 255, 0.03)); border: 1px solid var(--border-color); border-radius: var(--radius-sm, 6px); transition: background var(--t-fast), border-color var(--t-fast); } .st-compact-row:hover { background: var(--bg-card-hover, rgba(255, 255, 255, 0.05)); border-color: var(--border-strong, rgba(255, 255, 255, 0.15)); } .st-compact-row.expanded { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-color: var(--accent-border, rgba(20, 184, 166, 0.35)); background: var(--bg-card-hover, rgba(255, 255, 255, 0.05)); } .st-unit-badge-compact { display: inline-flex; align-items: center; justify-content: center; font-size: 0.6875rem; font-weight: 700; font-family: var(--font-mono, monospace); color: var(--color-teal, #14b8a6); background: rgba(20, 184, 166, 0.12); border: 1px solid rgba(20, 184, 166, 0.3); border-radius: 4px; padding: 0.15rem 0.35rem; min-width: 32px; flex-shrink: 0; } .st-row-details-panel { display: none; padding: 0.75rem; background: var(--bg-card-sub, rgba(0, 0, 0, 0.2)); border: 1px solid var(--accent-border, rgba(20, 184, 166, 0.35)); border-top: none; border-bottom-left-radius: var(--radius-sm, 6px); border-bottom-right-radius: var(--radius-sm, 6px); margin-bottom: 0.35rem; animation: stSlideDown 0.15s ease-out; } @keyframes stSlideDown { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .st-row-expand-btn { background: transparent; border: 1px solid var(--border-color); color: var(--text-secondary); border-radius: 4px; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.75rem; cursor: pointer; transition: all 0.15s ease; flex-shrink: 0; } .st-row-expand-btn:hover { color: var(--text-main); border-color: var(--accent); } .st-row-expand-btn.active { background: var(--accent-soft, rgba(20, 184, 166, 0.15)); color: var(--accent, #14b8a6); border-color: var(--accent); transform: rotate(180deg); } /* Category-First Station Styles */ .st-category-card { background: var(--bg-card, rgba(255, 255, 255, 0.02)); border: 1px solid var(--border-color); border-radius: var(--radius-md, 8px); overflow: hidden; transition: border-color var(--t-fast); } .st-category-card:hover { border-color: var(--border-strong, rgba(255, 255, 255, 0.12)); } .st-cat-header { display: flex; align-items: center; justify-content: space-between; padding: 0.625rem 0.875rem; background: var(--bg-card-sub, rgba(255, 255, 255, 0.03)); border-bottom: 1px solid var(--border-color); gap: 0.75rem; flex-wrap: wrap; } .st-cat-title-group { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .st-cat-name-display { font-weight: 700; font-size: 0.9375rem; color: var(--text-main); letter-spacing: -0.01em; } .st-cat-units-badge { font-size: 0.6875rem; font-weight: 700; padding: 0.15rem 0.45rem; border-radius: 4px; background: var(--accent-soft, rgba(20, 184, 166, 0.12)); color: var(--accent, #14b8a6); border: 1px solid var(--accent-border, rgba(20, 184, 166, 0.25)); } .st-cat-settings-drawer { padding: 1rem; background: var(--bg-card-sub, rgba(0, 0, 0, 0.2)); border-bottom: 1px solid var(--border-color); animation: stSlideDown 0.15s ease-out; } .st-cat-units-list { padding: 0.5rem 0.75rem; display: flex; flex-direction: column; gap: 0.35rem; min-height: 48px; } .st-cat-empty-notice { padding: 1rem; text-align: center; font-size: 0.75rem; color: var(--text-muted); border: 1px dashed var(--border-color); border-radius: var(--radius-sm, 6px); margin: 0.25rem 0; } .st-chip-var { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.2rem 0.5rem; font-size: 0.6875rem; font-family: var(--font-mono, monospace); background: rgba(20, 184, 166, 0.08); border: 1px solid rgba(20, 184, 166, 0.25); color: var(--accent, #14b8a6); border-radius: 4px; cursor: pointer; transition: all 0.15s ease; } .st-chip-var:hover { background: rgba(20, 184, 166, 0.2); border-color: var(--accent); } .st-cat-services-badge { font-size: 0.6875rem; font-weight: 600; padding: 0.15rem 0.5rem; border-radius: 4px; background: var(--bg-card-sub, rgba(255, 255, 255, 0.04)); color: var(--text-secondary); border: 1px solid var(--border-color); display: inline-flex; align-items: center; gap: 0.25rem; } .st-cat-services-badge.custom { background: var(--bg-card-sub, rgba(255, 255, 255, 0.04)); color: var(--text-secondary); border-color: var(--border-color); } :root[data-theme="light"] .st-cat-services-badge.custom, [data-theme="light"] .st-cat-services-badge.custom { background: oklch(0.96 0.01 240); color: oklch(0.25 0.03 240); border-color: oklch(0.18 0.03 240 / 0.14); } .st-services-chip-container { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.5rem; max-height: 160px; overflow-y: auto; padding: 0.5rem; background: var(--bg-card, rgba(0, 0, 0, 0.2)); border: 1px solid var(--border-color); border-radius: var(--radius-sm, 6px); } .st-service-chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.625rem; font-size: 0.6875rem; font-weight: 500; border-radius: 4px; background: var(--bg-card-sub, rgba(255, 255, 255, 0.04)); border: 1px solid var(--border-color); color: var(--text-secondary); cursor: pointer; transition: all 0.15s ease; user-select: none; } .st-service-chip:hover { background: var(--bg-card-hover, rgba(255, 255, 255, 0.08)); border-color: var(--border-strong, rgba(255, 255, 255, 0.2)); color: var(--text-main); } .st-service-chip.selected { background: var(--accent-soft, rgba(20, 184, 166, 0.15)); border-color: var(--accent, #14b8a6); color: var(--accent, #14b8a6); font-weight: 600; } /* ========================================================================== STATION CATEGORY PERMITTED OFFERINGS REDESIGN (HIERARCHICAL TREE & TOGGLE) ========================================================================== */ /* Segmented Scope Toggle */ .st-segmented-toggle { display: inline-flex; align-items: center; background: var(--bg-input, rgba(255, 255, 255, 0.04)); border: 1px solid var(--border-color); border-radius: var(--radius-sm, 6px); padding: 2px; gap: 2px; } .st-seg-btn { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.65rem; font-size: 0.75rem; font-weight: 500; color: var(--text-muted); background: transparent; border: none; border-radius: 4px; cursor: pointer; transition: all 0.15s ease; user-select: none; white-space: nowrap; } .st-seg-btn:hover { color: var(--text-main); background: rgba(255, 255, 255, 0.04); } .st-seg-btn.active { background: var(--bg-card, #1e293b); color: var(--text-main); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); } .st-seg-btn.active .fa-layer-group, .st-seg-btn.active .fa-filter { color: var(--accent, #14b8a6) !important; } /* Single Scroll Hierarchical Tree Container */ .st-offerings-tree-scroll { max-height: 240px; overflow-y: auto; padding: 0.25rem; display: flex; flex-direction: column; gap: 0.5rem; scrollbar-width: thin; scrollbar-color: var(--border-color) transparent; } .st-offerings-tree-scroll::-webkit-scrollbar { width: 5px; } .st-offerings-tree-scroll::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; } /* Category Tree Group Block */ .st-tree-cat-group { border: 1px solid var(--border-color); border-radius: var(--radius-sm, 6px); background: var(--bg-card, rgba(255, 255, 255, 0.02)); overflow: hidden; transition: border-color 0.15s ease; } .st-tree-cat-group:hover { border-color: var(--border-strong, rgba(255, 255, 255, 0.2)); } .st-tree-cat-group.has-selected { border-color: rgba(20, 184, 166, 0.4); } /* Category Tree Group Header */ .st-tree-cat-header { display: flex; align-items: center; justify-content: space-between; padding: 0.45rem 0.65rem; background: var(--bg-card-sub, rgba(255, 255, 255, 0.03)); cursor: pointer; user-select: none; gap: 0.5rem; } .st-tree-cat-header:hover { background: var(--bg-card-hover, rgba(255, 255, 255, 0.06)); } .st-tree-cat-title-wrap { display: flex; align-items: center; gap: 0.5rem; flex: 1; min-width: 0; } .st-tree-checkbox { width: 15px; height: 15px; cursor: pointer; accent-color: var(--accent, #14b8a6); margin: 0; flex-shrink: 0; } .st-tree-cat-title { font-size: 0.75rem; font-weight: 600; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .st-tree-cat-meta { display: flex; align-items: center; gap: 0.4rem; flex-shrink: 0; } .st-tree-cat-badge { font-size: 0.625rem; padding: 1px 5px; border-radius: 10px; background: var(--bg-card-hover, rgba(255, 255, 255, 0.08)); color: var(--text-muted); } .st-tree-cat-badge.active { background: var(--accent-soft, rgba(20, 184, 166, 0.15)); color: var(--accent, #14b8a6); font-weight: 600; } .st-tree-chevron { font-size: 0.65rem; color: var(--text-muted); transition: transform 0.2s ease; } .st-tree-cat-group.open .st-tree-chevron { transform: rotate(180deg); } /* Category Items Sub-list */ .st-tree-items-list { display: none; flex-direction: column; padding: 0.25rem 0.4rem; border-top: 1px solid var(--border-color); background: var(--bg-body, rgba(0, 0, 0, 0.15)); gap: 2px; } .st-tree-cat-group.open .st-tree-items-list { display: flex; } /* Offering Item Row */ .st-tree-item-row { display: flex; align-items: center; justify-content: space-between; padding: 0.35rem 0.5rem; border-radius: 4px; cursor: pointer; transition: all 0.12s ease; user-select: none; gap: 0.5rem; margin: 0; } .st-tree-item-row:hover { background: var(--bg-card-hover, rgba(255, 255, 255, 0.05)); } .st-tree-item-row.selected { background: var(--accent-soft, rgba(20, 184, 166, 0.12)); } .st-tree-item-left { display: flex; align-items: center; gap: 0.5rem; flex: 1; min-width: 0; } .st-tree-item-name { font-size: 0.75rem; font-weight: 500; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .st-tree-item-meta { display: flex; align-items: center; gap: 0.35rem; flex-shrink: 0; } .st-tree-item-tag { font-size: 0.625rem; color: var(--text-muted); } .st-tree-item-price { font-size: 0.6875rem; font-weight: 600; color: var(--text-secondary); } .st-cat-empty-dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; padding: 1.25rem 1rem; border: 1px dashed var(--border-color); border-radius: var(--radius-sm, 6px); background: var(--bg-card-sub, rgba(255, 255, 255, 0.01)); margin: 0.35rem 0; text-align: center; } .st-cat-empty-text { font-size: 0.75rem; color: var(--text-muted); } /* Category Unit Chips */ .st-chip-btn { padding: 0.15rem 0.5rem !important; font-size: 0.6875rem !important; height: 26px !important; line-height: 1 !important; border-radius: 4px !important; border: 1px solid var(--border-color) !important; background: var(--bg-card-sub, rgba(255, 255, 255, 0.03)) !important; color: var(--text-secondary) !important; cursor: pointer; transition: all 0.15s ease; } .st-chip-btn:hover { background: var(--bg-card-hover, rgba(255, 255, 255, 0.08)) !important; color: var(--text-main) !important; border-color: var(--accent-border, rgba(20, 184, 166, 0.3)) !important; } .st-chip-btn.active { background: var(--accent-soft, rgba(20, 184, 166, 0.12)) !important; color: var(--accent, #14b8a6) !important; border-color: var(--accent, #14b8a6) !important; } /* ============================================================ IMPECCABLE CRAFT: ZONE & CATEGORY AMBIANCE STUDIO BOX Eliminates AI-slop, provides responsive auto-expanding writing, clear typographic hierarchy, and sensory inspiration chips. ============================================================ */ .st-cat-desc-studio { display: flex; flex-direction: column; gap: 0.45rem; padding: 0.75rem 0.85rem; background: var(--bg-card, rgba(255, 255, 255, 0.02)); border: 1px solid var(--border-color); border-radius: var(--radius-md, 8px); transition: border-color 0.18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.18s cubic-bezier(0.16, 1, 0.3, 1); } .st-cat-desc-studio:focus-within { border-color: var(--accent-border, rgba(20, 184, 166, 0.45)); box-shadow: 0 0 0 1px var(--accent-subtle, rgba(20, 184, 166, 0.16)), 0 2px 8px rgba(0, 0, 0, 0.12); } .st-cat-desc-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; } .st-cat-desc-label { font-size: 0.75rem; font-weight: 700; color: var(--text-main); display: flex; align-items: center; gap: 0.4rem; margin: 0; letter-spacing: -0.01em; } .st-cat-desc-meta { display: flex; align-items: center; gap: 0.5rem; } .st-ai-tag { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.15rem 0.45rem; font-size: 0.625rem; font-weight: 600; border-radius: 4px; background: var(--accent-soft, rgba(20, 184, 166, 0.1)); color: var(--accent, #14b8a6); border: 1px solid var(--accent-border, rgba(20, 184, 166, 0.25)); letter-spacing: 0.02em; } .st-char-counter { font-size: 0.6875rem; color: var(--text-muted); user-select: none; transition: color 0.15s ease; } /* Textarea Writing Canvas Override (Overrides .form-input-sm 34px bug) */ textarea.st-cat-desc-textarea, textarea.form-input.st-cat-desc-textarea { width: 100% !important; height: auto !important; min-height: 76px !important; max-height: 220px !important; padding: 0.65rem 0.8rem !important; font-size: 0.8125rem !important; line-height: 1.55 !important; color: var(--text-main) !important; background: var(--bg-input, rgba(15, 21, 19, 0.65)) !important; border: 1px solid var(--border-color) !important; border-radius: var(--radius-sm, 6px) !important; box-sizing: border-box !important; resize: vertical !important; field-sizing: content; font-family: inherit !important; transition: border-color 0.18s ease, box-shadow 0.18s ease; } textarea.st-cat-desc-textarea:focus, textarea.form-input.st-cat-desc-textarea:focus { border-color: var(--accent, #14b8a6) !important; box-shadow: 0 0 0 2px var(--accent-subtle, rgba(20, 184, 166, 0.18)) !important; outline: none !important; } /* Ambiance Inspiration Quick-Chips */ .st-ambiance-chips-row { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; padding-top: 0.15rem; } .st-ambiance-chip-lead { font-size: 0.6875rem; color: var(--text-muted); display: flex; align-items: center; gap: 0.25rem; margin-right: 0.15rem; } .st-ambiance-chip { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.5rem; font-size: 0.6875rem; font-weight: 500; border-radius: 4px; background: var(--bg-card-sub, rgba(255, 255, 255, 0.03)); border: 1px solid var(--border-color); color: var(--text-secondary); cursor: pointer; transition: all 0.15s ease; line-height: 1.2; } .st-ambiance-chip:hover { background: var(--bg-card-hover, rgba(255, 255, 255, 0.08)); color: var(--text-main); border-color: var(--accent-border, rgba(20, 184, 166, 0.35)); transform: translateY(-1px); } .st-desc-footer-hint { display: flex; align-items: flex-start; gap: 0.4rem; font-size: 0.6875rem; color: var(--text-secondary); line-height: 1.4; margin-top: 0.1rem; } .st-desc-footer-hint i { margin-top: 2px; flex-shrink: 0; font-size: 0.65rem; } /* Light Mode Calibration for Ambiance Studio */ [data-theme="light"] .st-cat-desc-studio, .light-theme .st-cat-desc-studio { background: var(--bg-card-sub, oklch(0.965 0.008 240)); border-color: var(--border-color); } [data-theme="light"] textarea.st-cat-desc-textarea, .light-theme textarea.st-cat-desc-textarea { background: #ffffff !important; color: var(--text-main) !important; border-color: var(--border-color) !important; } [data-theme="light"] .st-ambiance-chip, .light-theme .st-ambiance-chip { background: #ffffff; border-color: var(--border-color); color: var(--text-secondary); } [data-theme="light"] .st-ambiance-chip:hover, .light-theme .st-ambiance-chip:hover { background: var(--accent-soft, rgba(20, 184, 166, 0.1)); color: var(--accent, #14b8a6); border-color: var(--accent-border, rgba(20, 184, 166, 0.35)); } /* Category Operational Mode Selector */ .st-mode-selector-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.5rem; margin-bottom: 0.85rem; } .st-mode-card { position: relative; padding: 0.65rem 0.75rem; border-radius: var(--radius-sm, 6px); border: 1px solid var(--border-color); background: var(--bg-card, rgba(255, 255, 255, 0.02)); cursor: pointer; transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1); display: flex; flex-direction: column; gap: 0.3rem; text-align: left; user-select: none; } .st-mode-card:hover { border-color: var(--accent-border, rgba(20, 184, 166, 0.35)); background: var(--bg-card-hover, rgba(255, 255, 255, 0.04)); transform: translateY(-1px); } .st-mode-card.active { border-color: var(--accent, #14b8a6); background: var(--accent-soft, rgba(20, 184, 166, 0.08)); box-shadow: 0 0 0 1px var(--accent, #14b8a6); } .st-mode-card-header { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; } .st-mode-card-title { font-size: 0.75rem; font-weight: 700; color: var(--text-main); display: flex; align-items: center; gap: 0.35rem; } .st-mode-radio-dot { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--border-color); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.15s ease; } .st-mode-card.active .st-mode-radio-dot { border-color: var(--accent, #14b8a6); background: var(--accent, #14b8a6); } .st-mode-card.active .st-mode-radio-dot::after { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #ffffff; } .st-mode-card-desc { font-size: 0.6875rem; color: var(--text-muted); line-height: 1.35; } /* Station Row Status Button & Capacity Styles */ .st-status-badge { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.5rem; font-size: 0.6875rem; font-weight: 600; border-radius: 4px; cursor: pointer; transition: all 0.15s ease; user-select: none; border: 1px solid transparent; line-height: 1.2; } .st-status-open { background: rgba(16, 185, 129, 0.1); color: #34d399; border-color: rgba(16, 185, 129, 0.25); } .st-status-open:hover { background: rgba(16, 185, 129, 0.2); border-color: #34d399; } .st-status-closed { background: rgba(239, 68, 68, 0.1); color: #f87171; border-color: rgba(239, 68, 68, 0.25); } .st-status-closed:hover { background: rgba(239, 68, 68, 0.2); border-color: #f87171; } .st-compact-row.st-unit-closed { opacity: 0.6; border-style: dashed; } .st-unit-cap-box { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.15rem 0.35rem; background: var(--bg-card-sub, rgba(255, 255, 255, 0.02)); border: 1px solid var(--border-color); border-radius: 4px; } /* Stacked Child Modals Hierarchy (Impeccable Layering) */ #modal-station-manage { z-index: 1000 !important; } #modal-station-qr, #modal-station-new-category, #modal-station-batch-category, #modal-station-print-batch { z-index: 1100 !important; } #modal-station-qr .modal-card, #modal-station-new-category .modal-card, #modal-station-batch-category .modal-card, #modal-station-print-batch .modal-card { z-index: 1101 !important; } /* Light Theme Overrides */ [data-theme="light"] select.form-select, [data-theme="light"] .form-select { background-color: #ffffff !important; color: #1e293b !important; border-color: rgba(0, 0, 0, 0.18) !important; } [data-theme="light"] .st-compact-row { background: #ffffff; border-color: rgba(0, 0, 0, 0.12); } [data-theme="light"] .st-compact-row:hover { background: #f8fafc; border-color: rgba(0, 0, 0, 0.2); } [data-theme="light"] .st-row-details-panel { background: #f8fafc; border-color: rgba(20, 184, 166, 0.4); } [data-theme="light"] .st-category-card { background: #ffffff; border-color: rgba(0, 0, 0, 0.1); } [data-theme="light"] .st-cat-header { background: #f8fafc; border-bottom-color: rgba(0, 0, 0, 0.08); } [data-theme="light"] .st-cat-settings-drawer { background: #f1f5f9; border-bottom-color: rgba(0, 0, 0, 0.08); } [data-theme="light"] .st-cat-services-badge.custom { background: #f3e8ff; color: #7e22ce; border-color: #d8b4fe; } [data-theme="light"] .st-services-chip-container { background: #f8fafc; border-color: rgba(0, 0, 0, 0.1); } [data-theme="light"] .st-service-chip { background: #ffffff; border-color: rgba(0, 0, 0, 0.15); color: #475569; } [data-theme="light"] .st-service-chip:hover { background: #f1f5f9; color: #0f172a; } [data-theme="light"] .st-service-chip.selected { background: #ccfbf1; border-color: #0d9488; color: #0f766e; } [data-theme="light"] .st-segmented-toggle { background: #f1f5f9; border-color: rgba(0, 0, 0, 0.12); } [data-theme="light"] .st-seg-btn { color: #64748b; } [data-theme="light"] .st-seg-btn:hover { color: #0f172a; background: rgba(0, 0, 0, 0.04); } [data-theme="light"] .st-seg-btn.active { background: #ffffff; color: #0f172a; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } [data-theme="light"] .st-tree-cat-group { background: #ffffff; border-color: rgba(0, 0, 0, 0.1); } [data-theme="light"] .st-tree-cat-header { background: #f8fafc; } [data-theme="light"] .st-tree-cat-header:hover { background: #f1f5f9; } [data-theme="light"] .st-tree-cat-badge { background: #e2e8f0; color: #475569; } [data-theme="light"] .st-tree-cat-badge.active { background: #ccfbf1; color: #0f766e; } [data-theme="light"] .st-tree-items-list { background: #f8fafc; border-top-color: rgba(0, 0, 0, 0.08); } [data-theme="light"] .st-tree-item-row:hover { background: #f1f5f9; } [data-theme="light"] .st-tree-item-row.selected { background: #ccfbf1; } [data-theme="light"] .st-cat-empty-dropzone { background: #f8fafc; border-color: rgba(0, 0, 0, 0.12); } [data-theme="light"] .st-chip-btn { background: #f1f5f9 !important; border-color: rgba(0, 0, 0, 0.12) !important; color: #475569 !important; } [data-theme="light"] .st-chip-btn:hover { background: #e2e8f0 !important; color: #0f172a !important; } [data-theme="light"] .st-chip-btn.active { background: #ccfbf1 !important; border-color: #0d9488 !important; color: #0f766e !important; } [data-theme="light"] .st-mode-card { background: #ffffff; border-color: rgba(0, 0, 0, 0.12); } [data-theme="light"] .st-mode-card:hover { background: #f8fafc; border-color: rgba(20, 184, 166, 0.4); } [data-theme="light"] .st-mode-card.active { background: rgba(20, 184, 166, 0.08); border-color: #0d9488; } [data-theme="light"] .st-unit-cap-box { background: #ffffff; border-color: rgba(0, 0, 0, 0.12); } [data-theme="light"] .st-modal-tab-btn { color: #64748b; } [data-theme="light"] .st-modal-tab-btn:hover { color: #0f172a; background: #f1f5f9; } [data-theme="light"] .st-modal-tab-btn.active { background: #f0fdfa; color: #0d9488; border-color: #99f6e4; } /* ============================================================ MODAL REDESIGN, UNCLIPPED INPUTS & RESPONSIVE BREAKPOINTS ============================================================ */ .input-icon-pad-left, input.input-icon-pad-left { padding-left: 2.15rem !important; } #modal-station-manage .modal-header, .st-manage-modal-header { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 0.75rem !important; margin-bottom: 0.5rem !important; padding: 1.125rem 1.25rem 0.875rem !important; border-bottom: 1px solid var(--border-color) !important; } .st-modal-tabs { display: flex !important; align-items: center !important; gap: 0.5rem !important; border-bottom: 1px solid var(--border-color) !important; padding: 0 0 0.5rem 0 !important; margin: 0 !important; width: 100% !important; } .st-modal-tab-btn { display: inline-flex !important; align-items: center !important; gap: 0.45rem !important; white-space: nowrap !important; padding: 0.45rem 0.85rem !important; font-size: 0.8125rem !important; font-weight: 600 !important; border-radius: var(--radius-sm, 6px) !important; border: 1px solid transparent !important; background: transparent !important; color: var(--text-secondary) !important; cursor: pointer !important; transition: all 0.15s ease !important; } .st-modal-tab-btn:hover { color: var(--text-main) !important; background: var(--bg-hover, rgba(255, 255, 255, 0.05)) !important; } .st-modal-tab-btn.active { background: var(--accent-soft, rgba(20, 184, 166, 0.12)) !important; color: var(--accent, #14b8a6) !important; border-color: var(--accent-border, rgba(20, 184, 166, 0.3)) !important; } .st-tab-pill { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 20px !important; height: 18px !important; padding: 0 0.4rem !important; font-size: 0.6875rem !important; font-weight: 700 !important; border-radius: 3px !important; background: var(--bg-elevated, rgba(255, 255, 255, 0.1)) !important; color: var(--text-muted) !important; line-height: 1 !important; } .st-modal-tab-btn.active .st-tab-pill { background: var(--accent, #14b8a6) !important; color: #ffffff !important; } [data-theme="light"] .st-tab-pill { background: rgba(0, 0, 0, 0.08) !important; color: #64748b !important; } [data-theme="light"] .st-modal-tab-btn.active .st-tab-pill { background: #0d9488 !important; color: #ffffff !important; } /* Mobile & Tablet Modal Responsiveness */ @media (max-width: 768px) { #modal-station-manage .modal-card, #modal-station-punch .modal-card, #modal-station-print-batch .modal-card { width: 96vw !important; max-width: 96vw !important; max-height: 94vh !important; margin: 0.5rem auto !important; } .st-toolbar-row { flex-direction: column !important; align-items: stretch !important; gap: 0.5rem !important; } .st-toolbar-actions { width: 100% !important; display: flex !important; flex-wrap: wrap !important; gap: 0.35rem !important; } .st-toolbar-actions .btn-dash { flex: 1 1 auto !important; justify-content: center !important; } .st-compact-row { flex-direction: column !important; align-items: stretch !important; height: auto !important; padding: 0.625rem !important; } .st-compact-row .st-row-controls { width: 100% !important; display: flex !important; flex-wrap: wrap !important; gap: 0.35rem !important; margin-top: 0.35rem !important; } } /* ============================================================ IMPECCABLE RESPONSIVE TWO-GROUP STATION ROW ARCHITECTURE ============================================================ */ .st-unit-num-badge { width: 44px !important; min-width: 44px !important; text-align: center !important; font-weight: 700 !important; font-family: var(--font-mono, monospace) !important; color: var(--accent, #14b8a6) !important; background: var(--accent-soft, rgba(20, 184, 166, 0.12)) !important; border: 1px solid var(--accent-border, rgba(20, 184, 166, 0.35)) !important; border-radius: var(--radius-xs, 4px) !important; padding: 0.25rem 0.35rem !important; flex-shrink: 0 !important; } .st-unit-num-badge:focus { border-color: var(--accent, #14b8a6) !important; box-shadow: 0 0 0 2px var(--accent-soft, rgba(20, 184, 166, 0.25)) !important; outline: none !important; } .st-compact-row { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 0.5rem !important; padding: 0.45rem 0.65rem !important; background: var(--bg-card, rgba(255, 255, 255, 0.03)) !important; border: 1px solid var(--border-color) !important; border-radius: var(--radius-sm, 6px) !important; transition: background var(--t-fast), border-color var(--t-fast) !important; box-sizing: border-box !important; width: 100% !important; } .st-compact-row:hover { background: var(--bg-card-hover, rgba(255, 255, 255, 0.05)) !important; border-color: var(--border-strong, rgba(255, 255, 255, 0.15)) !important; } .st-compact-row.expanded { border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; border-color: var(--accent-border, rgba(20, 184, 166, 0.35)) !important; background: var(--bg-card-hover, rgba(255, 255, 255, 0.05)) !important; } .st-row-identity { display: flex !important; align-items: center !important; gap: 0.45rem !important; flex: 1 1 auto !important; min-width: 0 !important; } .st-row-name-input { flex: 1 1 auto !important; min-width: 90px !important; } .st-row-area-input-wrap { position: relative !important; width: 110px !important; flex-shrink: 0 !important; } .st-row-specs-actions { display: flex !important; align-items: center !important; gap: 0.45rem !important; flex-shrink: 0 !important; } .st-row-pax-wrap { display: inline-flex !important; align-items: center !important; gap: 0.25rem !important; flex-shrink: 0 !important; } .st-row-pax-input { width: 44px !important; text-align: center !important; } .st-pax-label { font-size: 0.6875rem !important; color: var(--text-muted) !important; } .st-row-model-select { width: 135px !important; flex-shrink: 0 !important; } .st-row-action-btns { display: flex !important; align-items: center !important; gap: 0.25rem !important; flex-shrink: 0 !important; } /* Fluid Breakpoints for Tablet & Mobile */ @media (max-width: 860px) { .st-compact-row { flex-wrap: wrap !important; gap: 0.5rem !important; padding: 0.6rem !important; } .st-row-identity { width: 100% !important; flex: 1 1 100% !important; } .st-row-specs-actions { width: 100% !important; justify-content: space-between !important; padding-top: 0.35rem !important; border-top: 1px dashed var(--border-color) !important; } .st-row-model-select { flex: 1 1 auto !important; max-width: 180px !important; } } @media (max-width: 640px) { #modal-station-manage .modal-card, #modal-station-punch .modal-card, #modal-station-print-batch .modal-card { width: 96vw !important; max-width: 96vw !important; max-height: 94vh !important; margin: 0.35rem auto !important; } .st-modal-tabs { gap: 0.25rem !important; } .st-modal-tab-btn { flex: 1 1 50% !important; justify-content: center !important; padding: 0.35rem 0.5rem !important; font-size: 0.75rem !important; } .st-toolbar-row { flex-direction: column !important; align-items: stretch !important; gap: 0.5rem !important; } .st-toolbar-actions { width: 100% !important; display: flex !important; gap: 0.25rem !important; } .st-toolbar-actions .btn-dash { flex: 1 1 33.3% !important; font-size: 0.6875rem !important; padding: 0.35rem 0.4rem !important; justify-content: center !important; } .st-row-identity { flex-wrap: wrap !important; } .st-row-name-input { min-width: 140px !important; } .st-row-area-input-wrap { width: 100% !important; } .st-row-specs-actions { flex-wrap: wrap !important; gap: 0.35rem !important; } .st-row-model-select { width: 100% !important; max-width: 100% !important; } .st-row-action-btns { width: 100% !important; justify-content: flex-end !important; } #modal-station-manage .modal-footer { flex-direction: column-reverse !important; align-items: stretch !important; gap: 0.5rem !important; } #modal-station-manage .modal-footer .btn-dash { width: 100% !important; justify-content: center !important; } } #st-ac-custom-wrap { display: none; align-items: center; gap: 0.5rem; margin-top: 0.35rem; } #st-rules-table-qr-card { transition: opacity 0.2s ease; } /* ========================================================================== Channel Density & Multi-Channel Telemetry Craft ========================================================================== */ .density-chart-wrap { position: relative; width: 100%; height: 100%; } .density-legend-bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.75rem; font-size: 0.75rem; margin-bottom: 0.75rem; padding: 0.35rem 0.6rem; background: var(--bg-surface-elevated, rgba(255, 255, 255, 0.02)); border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.06)); border-radius: 6px; } .density-legend-items { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } .density-legend-item { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--text-muted, #8b949e); font-size: 0.75rem; } .density-legend-dot { width: 8px; height: 8px; border-radius: 2px; } .density-filter-state-pill { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.2rem 0.5rem; font-size: 0.7rem; font-weight: 500; border-radius: var(--radius-xs, 4px); background: oklch(0.68 0.14 195 / 0.12); color: var(--accent); border: 1px solid oklch(0.68 0.14 195 / 0.3); } .density-filter-state-pill button { background: none; border: none; padding: 0; margin-left: 0.2rem; cursor: pointer; color: inherit; display: inline-flex; align-items: center; } .density-svg { width: 100%; height: 100%; display: block; overflow: visible; } .density-bar-col { cursor: pointer; transition: opacity 0.18s cubic-bezier(0.16, 1, 0.3, 1), transform 0.18s cubic-bezier(0.16, 1, 0.3, 1); } .density-svg.has-hover .density-bar-col { opacity: 0.32; } .density-svg.has-hover .density-bar-col.is-hovered { opacity: 1 !important; filter: drop-shadow(0 2px 10px rgba(13, 148, 136, 0.35)); } .density-bar-col.is-selected .density-bg-track { stroke: var(--accent) !important; stroke-width: 1.5px !important; stroke-dasharray: none !important; fill: oklch(0.68 0.14 195 / 0.08) !important; } .density-bar-col.is-selected text { fill: var(--accent) !important; font-weight: 600 !important; } .density-tooltip-card { position: absolute; z-index: 50; pointer-events: none; background: var(--bg-surface, #161b22); border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.12)); border-radius: 8px; padding: 0.65rem 0.85rem; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32), 0 1px 3px rgba(0, 0, 0, 0.18); font-family: var(--font-sans, system-ui); font-size: 0.75rem; color: var(--text-primary, #e6edf3); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: opacity 0.12s ease; transform: translate(-50%, -100%); margin-top: -8px; white-space: nowrap; min-width: 175px; } :root[data-theme="light"] .density-tooltip-card, [data-theme="light"] .density-tooltip-card { background: #ffffff; border-color: rgba(0, 0, 0, 0.14); color: #1f2937; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.06); } .density-tooltip-header { font-weight: 600; font-size: 0.78rem; margin-bottom: 0.4rem; padding-bottom: 0.35rem; border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08)); display: flex; justify-content: space-between; align-items: center; } .density-tooltip-row { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; padding: 0.18rem 0; } .density-tooltip-label { display: flex; align-items: center; gap: 0.45rem; color: var(--text-muted, #8b949e); font-size: 0.73rem; } .density-tooltip-val { font-variant-numeric: tabular-nums; font-weight: 600; font-family: var(--font-mono, monospace); font-size: 0.75rem; } .density-tooltip-footer { margin-top: 0.45rem; padding-top: 0.35rem; border-top: 1px dashed var(--border-subtle, rgba(255, 255, 255, 0.08)); font-size: 0.68rem; color: var(--text-muted, #8b949e); display: flex; justify-content: space-between; align-items: center; } .dt-dot { display: inline-block; width: 7px; height: 7px; border-radius: 2px; } .badge-day-filter { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.15rem 0.5rem; font-size: 0.7rem; border-radius: var(--radius-xs, 4px); background: oklch(0.68 0.14 195 / 0.12); color: var(--accent); border: 1px solid oklch(0.68 0.14 195 / 0.35); font-weight: 500; } .btn-filter-clear { background: none; border: none; padding: 0 0.15rem; cursor: pointer; color: inherit; opacity: 0.75; transition: opacity 0.15s ease; } .btn-filter-clear:hover { opacity: 1; } /* ========================================================================== IMPECCABLE SECTION BOOKINGS DESIGN SYSTEM (LIGHT & DARK CRAFT) ========================================================================== */ /* Design Tokens for Section Bookings */ :root { --bk-card-bg: var(--bg-card); --bk-card-border: var(--border-color); --bk-table-border: rgba(255, 255, 255, 0.08); --bk-row-bg: rgba(255, 255, 255, 0.015); --bk-row-hover: rgba(255, 255, 255, 0.04); --bk-row-border: rgba(255, 255, 255, 0.06); --bk-input-bg: rgba(255, 255, 255, 0.05); --bk-input-border: rgba(255, 255, 255, 0.12); --bk-input-text: var(--text-main); --bk-toolbar-bg: rgba(255, 255, 255, 0.02); --bk-cal-cell-bg: rgba(255, 255, 255, 0.02); --bk-cal-cell-hover: rgba(20, 184, 166, 0.12); --bk-cal-cell-border: rgba(255, 255, 255, 0.06); --bk-preset-btn-bg: rgba(255, 255, 255, 0.04); --bk-preset-btn-border: rgba(255, 255, 255, 0.10); --bk-text-primary: var(--text-main); --bk-text-secondary: var(--text-secondary); --bk-text-muted: var(--text-muted); } :root[data-theme="light"], body.light-theme, html.light-theme { --bk-card-bg: #ffffff; --bk-card-border: rgba(15, 23, 42, 0.08); --bk-table-border: rgba(15, 23, 42, 0.08); --bk-row-bg: #ffffff; --bk-row-hover: #f8fafc; --bk-row-border: rgba(15, 23, 42, 0.06); --bk-input-bg: #f8fafc; --bk-input-border: rgba(15, 23, 42, 0.14); --bk-input-text: #0f172a; --bk-toolbar-bg: #f8fafc; --bk-cal-cell-bg: #ffffff; --bk-cal-cell-hover: rgba(13, 148, 136, 0.08); --bk-cal-cell-border: rgba(15, 23, 42, 0.08); --bk-preset-btn-bg: #ffffff; --bk-preset-btn-border: rgba(15, 23, 42, 0.12); --bk-text-primary: #0f172a; --bk-text-secondary: #334155; --bk-text-muted: #64748b; } /* Card Enhancements */ .bk-operating-schedule-card, .bk-ai-engine-card, .bk-block-calendar-card { background: var(--bk-card-bg); border: 1px solid var(--bk-card-border); border-radius: var(--radius-md, 12px); padding: 1.25rem; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 6px 16px -4px rgba(0, 0, 0, 0.02); transition: border-color 0.2s ease, box-shadow 0.2s ease; } :root[data-theme="light"] .bk-operating-schedule-card, :root[data-theme="light"] .bk-ai-engine-card, :root[data-theme="light"] .bk-block-calendar-card { box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05), 0 8px 24px -6px rgba(15, 23, 42, 0.03); } .bk-operating-schedule-card .dash-card-title, .bk-ai-engine-card .dash-card-title, .bk-block-calendar-card .dash-card-title { display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 0.5rem !important; margin-bottom: 0.25rem !important; } /* Card 1: Tabular Operating Schedule */ .bk-schedule-table { display: flex; flex-direction: column; border: 1px solid var(--bk-table-border); border-radius: var(--radius-sm, 8px); overflow: hidden; background: var(--bk-row-bg); } .bk-schedule-row { display: flex; align-items: center; justify-content: space-between; padding: 0.55rem 0.875rem; border-bottom: 1px solid var(--bk-row-border); background: var(--bk-row-bg); transition: background 0.15s ease; } .bk-schedule-row:last-child { border-bottom: none; } .bk-schedule-row:hover { background: var(--bk-row-hover); } .bk-day-left { display: flex; align-items: center; gap: 0.625rem; } .bk-day-chk { width: 16px; height: 16px; cursor: pointer; accent-color: var(--color-teal, #0d9488); } .bk-day-name { font-size: 0.8125rem; font-weight: 600; color: var(--bk-text-primary); min-width: 32px; cursor: pointer; user-select: none; } .bk-time-chip-group { display: flex; align-items: center; gap: 0.35rem; } .bk-time-field { padding: 0.2rem 0.4rem; font-family: var(--font-mono, monospace); font-size: 0.8125rem; font-weight: 600; color: var(--bk-input-text); background: var(--bk-input-bg); border: 1px solid var(--bk-input-border); border-radius: 5px; width: 84px; height: 28px; outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .bk-time-field:focus { border-color: var(--color-teal, #0d9488); box-shadow: 0 0 0 2px rgba(13, 148, 136, 0.15); } .bk-time-sep { font-size: 0.75rem; color: var(--bk-text-muted); font-weight: 500; } .bk-closed-pill { font-size: 0.6875rem; font-weight: 600; padding: 0.2rem 0.6rem; border-radius: var(--radius-xs, 4px); display: inline-flex; align-items: center; gap: 0.35rem; background: rgba(100, 116, 139, 0.1); color: var(--bk-text-muted); border: 1px solid rgba(100, 116, 139, 0.2); } .bk-day-duration-pill { font-size: 0.6875rem !important; padding: 0.15rem 0.45rem !important; border-radius: var(--radius-xs, 4px) !important; white-space: nowrap !important; } .bk-day-24h-btn { font-size: 0.6875rem !important; padding: 0.15rem 0.4rem !important; line-height: 1.2 !important; font-family: var(--font-mono, monospace) !important; border-radius: var(--radius-xs, 4px) !important; } .bk-day-24h-btn.active { background: var(--color-teal, #0d9488) !important; color: #fff !important; border-color: var(--color-teal, #0d9488) !important; } .cat-select-group-title { padding: 0.35rem 0.65rem; font-size: 0.6875rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; user-select: none; } /* Card 2: WhatsApp AI Booking Engine */ .bk-reminder-list { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.25rem; } .bk-reminder-row { display: flex; justify-content: space-between; align-items: center; padding: 0.625rem 0.875rem; background: var(--bk-row-bg); border: 1px solid var(--bk-row-border); border-radius: var(--radius-sm, 8px); transition: background 0.15s ease; } .bk-reminder-row:hover { background: var(--bk-row-hover); } .bk-reminder-icon-box { width: 32px; height: 32px; border-radius: 6px; background: rgba(20, 184, 166, 0.1); display: flex; align-items: center; justify-content: center; color: var(--color-teal, #0d9488); font-size: 0.9375rem; flex-shrink: 0; } .bk-reminder-title { font-size: 0.8125rem; font-weight: 600; color: var(--bk-text-primary); } .bk-reminder-desc { font-size: 0.6875rem; color: var(--bk-text-muted); margin-top: 1px; } /* Card 3: Custom Calendar & Time-Block Matrix */ .bk-quick-block-bar { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; padding: 0.625rem 0.875rem; background: var(--bk-toolbar-bg); border: 1px solid var(--bk-row-border); border-radius: var(--radius-sm, 8px); margin-bottom: 1rem; } .bk-preset-btn { display: inline-flex; align-items: center; gap: 0.35rem; background: var(--bk-preset-btn-bg); border: 1px solid var(--bk-preset-btn-border); border-radius: 6px; padding: 0.25rem 0.625rem; font-size: 0.75rem; font-weight: 600; color: var(--bk-text-secondary); cursor: pointer; transition: all 0.15s ease; user-select: none; } .bk-preset-btn:hover { background: var(--bk-row-hover); color: var(--bk-text-primary); border-color: var(--color-teal, #0d9488); transform: translateY(-1px); } .bk-cal-month-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.625rem; padding: 0 0.25rem; } .bk-cal-month-title { font-family: var(--font-mono, monospace); font-weight: 700; font-size: 1rem; letter-spacing: -0.01em; color: var(--bk-text-primary); min-width: 140px; text-align: center; } .bk-block-calendar-card .bk-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 1.25rem; } .bk-block-calendar-card .bk-cal-dow { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--bk-text-muted); text-align: center; padding: 0.4rem 0; } .bk-block-calendar-card .bk-cal-cell { height: 52px; aspect-ratio: auto; border-radius: 8px; border: 1px solid var(--bk-cal-cell-border); background: var(--bk-cal-cell-bg); display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 0.875rem; font-family: var(--font-mono, monospace); font-weight: 600; color: var(--bk-text-primary); cursor: pointer; position: relative; transition: all 0.15s cubic-bezier(0.23, 1, 0.32, 1); } .bk-block-calendar-card .bk-cal-cell:hover { border-color: var(--color-teal, #0d9488); background: var(--bk-cal-cell-hover); transform: translateY(-1px); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05); } .bk-block-calendar-card .bk-cal-cell.today { box-shadow: inset 0 0 0 2px var(--color-teal, #0d9488); } .bk-block-calendar-card .bk-cal-cell.sel { background: rgba(13, 148, 136, 0.12); border-color: var(--color-teal, #0d9488); color: var(--color-teal, #0d9488); font-weight: 700; } .bk-block-calendar-card .bk-cal-cell.out { opacity: 0.32; color: var(--bk-text-muted); background: transparent; border-color: transparent; } .bk-block-calendar-card .bk-cal-cell.has-block { border-color: rgba(239, 68, 68, 0.45); background: rgba(239, 68, 68, 0.08); color: #dc2626; } :root[data-theme="light"] .bk-block-calendar-card .bk-cal-cell.has-block { border-color: rgba(220, 38, 38, 0.35); background: rgba(254, 226, 226, 0.45); color: #b91c1c; } .bk-block-calendar-card .bk-cal-cell.has-block:hover { border-color: #dc2626; background: rgba(239, 68, 68, 0.16); } .bk-cal-cell .bk-cell-dot { position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 3px; } .bk-dot-block-badge { width: 6px; height: 6px; border-radius: 50%; background: var(--status-red, #ef4444); display: inline-block; } /* Active Overrides Tray */ .bk-active-blocks-tray { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0.625rem; } .bk-block-chip-card { background: var(--bk-row-bg); border: 1px solid var(--bk-row-border); border-radius: var(--radius-sm, 8px); padding: 0.625rem 0.875rem; display: flex; align-items: center; justify-content: space-between; gap: 0.625rem; transition: background 0.15s ease, border-color 0.15s ease; } .bk-block-chip-card:hover { background: var(--bk-row-hover); border-color: rgba(239, 68, 68, 0.35); } .bk-block-chip-content { display: flex; align-items: center; gap: 0.5rem; min-width: 0; } .bk-block-chip-icon { color: var(--status-red, #ef4444); font-size: 0.875rem; flex-shrink: 0; } .bk-block-chip-title { font-size: 0.8125rem; font-weight: 600; color: var(--bk-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bk-block-chip-meta { font-size: 0.6875rem; color: var(--bk-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bk-block-chip-remove { color: var(--status-red, #ef4444); background: transparent; border: none; cursor: pointer; padding: 0.25rem; border-radius: 4px; opacity: 0.7; transition: opacity 0.15s ease, transform 0.15s ease; } .bk-cal-cell.past { opacity: 0.35 !important; color: var(--bk-text-muted) !important; cursor: not-allowed !important; background: transparent !important; } .bk-cal-cell.past:hover { background: transparent !important; border-color: transparent !important; } /* Badge Color Classes (Architectural & Theme-Calibrated) */ .badge-purple, .badge-teal, .badge-amber, .badge-red, .badge-indigo { font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Inter', sans-serif); font-weight: 500; font-size: 0.6875rem; line-height: 1.25; letter-spacing: 0.01em; padding: 0.15rem 0.45rem; border-radius: var(--radius-xs, 4px); display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; } /* Light Theme Badges (High-Contrast Neo Kinpaku, WCAG AA >= 5.4:1 to 7.8:1) */ :root[data-theme="light"] .badge-purple, [data-theme="light"] .badge-purple, body.light-theme .badge-purple, html.light-theme .badge-purple { background: oklch(0.95 0.03 285) !important; border: 1px solid oklch(0.65 0.12 285 / 0.35) !important; color: oklch(0.32 0.14 285) !important; } :root[data-theme="light"] .badge-teal, [data-theme="light"] .badge-teal, body.light-theme .badge-teal, html.light-theme .badge-teal { background: oklch(0.95 0.03 200) !important; border: 1px solid oklch(0.65 0.12 200 / 0.35) !important; color: oklch(0.28 0.10 200) !important; } :root[data-theme="light"] .badge-amber, [data-theme="light"] .badge-amber, body.light-theme .badge-amber, html.light-theme .badge-amber { background: oklch(0.95 0.04 85) !important; border: 1px solid oklch(0.65 0.14 85 / 0.35) !important; color: oklch(0.35 0.14 85) !important; } :root[data-theme="light"] .badge-red, [data-theme="light"] .badge-red, body.light-theme .badge-red, html.light-theme .badge-red { background: oklch(0.95 0.04 25) !important; border: 1px solid oklch(0.65 0.16 25 / 0.35) !important; color: oklch(0.35 0.18 25) !important; } :root[data-theme="light"] .badge-indigo, [data-theme="light"] .badge-indigo, body.light-theme .badge-indigo, html.light-theme .badge-indigo { background: oklch(0.95 0.03 260) !important; border: 1px solid oklch(0.65 0.12 260 / 0.35) !important; color: oklch(0.30 0.12 260) !important; } /* Dark Theme Badges (Default / Mineral Slate) */ :root:not([data-theme="light"]) .badge-purple, :root[data-theme="dark"] .badge-purple, [data-theme="dark"] .badge-purple { background: oklch(0.24 0.05 285 / 0.4) !important; border: 1px solid oklch(0.45 0.10 285 / 0.35) !important; color: oklch(0.85 0.08 285) !important; } :root:not([data-theme="light"]) .badge-teal, :root[data-theme="dark"] .badge-teal, [data-theme="dark"] .badge-teal { background: oklch(0.24 0.04 200 / 0.4) !important; border: 1px solid oklch(0.45 0.08 200 / 0.35) !important; color: oklch(0.85 0.07 200) !important; } :root:not([data-theme="light"]) .badge-amber, :root[data-theme="dark"] .badge-amber, [data-theme="dark"] .badge-amber { background: oklch(0.24 0.05 85 / 0.4) !important; border: 1px solid oklch(0.45 0.10 85 / 0.35) !important; color: oklch(0.85 0.09 85) !important; } :root:not([data-theme="light"]) .badge-red, :root[data-theme="dark"] .badge-red, [data-theme="dark"] .badge-red { background: oklch(0.24 0.05 25 / 0.4) !important; border: 1px solid oklch(0.45 0.10 25 / 0.35) !important; color: oklch(0.85 0.09 25) !important; } :root:not([data-theme="light"]) .badge-indigo, :root[data-theme="dark"] .badge-indigo, [data-theme="dark"] .badge-indigo { background: oklch(0.24 0.05 260 / 0.4) !important; border: 1px solid oklch(0.45 0.09 260 / 0.35) !important; color: oklch(0.85 0.08 260) !important; } /* Occupancy Status Tag */ .occupancy-status-tag { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.6875rem; font-weight: 600; padding: 0.125rem 0.45rem; border-radius: var(--radius-xs, 4px); letter-spacing: 0.01em; white-space: nowrap; line-height: 1.25; background: var(--bg-card-sub, rgba(255, 255, 255, 0.04)); border: 1px solid var(--border-color); color: var(--text-secondary); } :root[data-theme="light"] .occupancy-status-tag, [data-theme="light"] .occupancy-status-tag { background: oklch(0.96 0.01 240); border-color: oklch(0.18 0.03 240 / 0.14); color: oklch(0.25 0.03 240); } /* Station Card Order Preview Semantic Variants */ .station-card-order-preview.preview-amber { border-color: rgba(245, 158, 11, 0.3); background: rgba(245, 158, 11, 0.05); } :root[data-theme="light"] .station-card-order-preview.preview-amber { border-color: oklch(0.65 0.16 85 / 0.3); background: oklch(0.98 0.02 85 / 0.6); } .station-card-order-preview.preview-teal { border-color: rgba(13, 148, 136, 0.3); background: rgba(13, 148, 136, 0.05); } :root[data-theme="light"] .station-card-order-preview.preview-teal { border-color: oklch(0.62 0.14 210 / 0.3); background: oklch(0.98 0.02 210 / 0.6); } .station-card-order-preview.preview-purple { border-color: rgba(168, 85, 247, 0.3); background: rgba(168, 85, 247, 0.05); } :root[data-theme="light"] .station-card-order-preview.preview-purple { border-color: oklch(0.40 0.12 285 / 0.25); background: oklch(0.98 0.02 285 / 0.6); } /* Operational Activity & Audit Log Styles */ .bk-audit-log-card { background: var(--bk-card-bg); border-radius: var(--radius-md, 12px); } .bk-audit-log-list { display: flex; flex-direction: column; gap: 0.5rem; max-height: 280px; overflow-y: auto; padding-right: 4px; } .bk-audit-log-item { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.5rem 0.75rem; background: var(--bk-row-bg); border: 1px solid var(--bk-row-border); border-radius: var(--radius-sm, 6px); font-size: 0.75rem; transition: background 0.15s ease, border-color 0.15s ease; } .bk-audit-log-item:hover { background: var(--bk-row-hover); } :root[data-theme="light"] .bk-audit-log-item, [data-theme="light"] .bk-audit-log-item, body.light-theme .bk-audit-log-item, html.light-theme .bk-audit-log-item { background: oklch(0.985 0.005 240); border-color: oklch(0.18 0.03 240 / 0.09); } :root[data-theme="light"] .bk-audit-log-item:hover, [data-theme="light"] .bk-audit-log-item:hover, body.light-theme .bk-audit-log-item:hover, html.light-theme .bk-audit-log-item:hover { background: oklch(0.965 0.008 240); border-color: oklch(0.18 0.03 240 / 0.16); } .bk-audit-log-main { display: flex; align-items: center; gap: 0.625rem; min-width: 0; flex: 1; } .bk-audit-log-action { font-weight: 600; color: var(--bk-text-primary); white-space: nowrap; } .bk-audit-log-detail { color: var(--bk-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bk-audit-log-meta { display: flex; align-items: center; gap: 0.625rem; flex-shrink: 0; font-size: 0.6875rem; color: var(--bk-text-muted); } .bk-audit-log-actor { display: inline-flex; align-items: center; gap: 0.25rem; font-weight: 500; color: var(--bk-text-secondary); } .bk-audit-log-time { font-family: var(--font-mono, monospace); color: var(--bk-text-muted); } @media (max-width: 640px) { .bk-audit-log-item { flex-direction: column !important; align-items: flex-start !important; gap: 0.35rem !important; padding: 0.625rem 0.75rem !important; } .bk-audit-log-main { width: 100% !important; flex-wrap: wrap !important; gap: 0.35rem !important; } .bk-audit-log-detail { white-space: normal !important; word-break: break-word !important; } .bk-audit-log-meta { width: 100% !important; justify-content: space-between !important; border-top: 1px dashed var(--bk-row-border) !important; padding-top: 0.35rem !important; margin-top: 0.2rem !important; } }