/* ============================================================ ERP design tokens — single source of truth for color, space, typography, radius, shadow, motion. Loaded BEFORE erp-shell.css. Dark mode flips by setting [data-theme="dark"] on . Legacy aliases (--purple, --page, --panel, ...) are kept so the existing erp-shell.css works unchanged. ============================================================ */ :root { /* Brand */ --brand-50: #eef0ff; --brand-100: #d9deff; --brand-200: #b3bcff; --brand-300: #8d99ff; --brand-400: #6877ff; --brand-500: #4a1db8; --brand-600: #3d168f; --brand-700: #2e1170; --brand-800: #1f0a4d; --brand-900: #120628; /* Accent / semantic palettes */ --accent-500: #006cff; --accent-600: #0057cc; --success-500: #25c56b; --success-600: #1ea958; --warn-500: #f59e0b; --warn-600: #d97706; --danger-500: #ef4444; --danger-600: #dc2626; --info-500: #0ea5e9; /* Semantic tone pairs — used by tags, banners, status pills. The `-bg` variant is a low-saturation surface; the unsuffixed variant is the legible foreground on top. Light mode uses pastel washes. */ --tone-good: #15803d; --tone-good-bg: #dcfce7; --tone-bad: #b91c1c; --tone-bad-bg: #fee2e2; --tone-warn: #92400e; --tone-warn-bg: #fef3c7; --tone-info: #1e40af; --tone-info-bg: #dbeafe; /* Neutral scale (light mode) */ --neutral-0: #ffffff; --neutral-50: #f8fafc; --neutral-100: #f1f5f9; --neutral-200: #e2e8f0; --neutral-300: #cbd5e1; --neutral-400: #94a3b8; --neutral-500: #64748b; --neutral-600: #475569; --neutral-700: #334155; --neutral-800: #1e293b; --neutral-900: #0f172a; /* Surface tokens (themable) */ --surface-page: #eaf0f6; --surface-panel: var(--neutral-0); --surface-raised: var(--neutral-0); --surface-sunken: var(--neutral-50); --surface-overlay: rgba(15, 23, 42, 0.55); /* Text tokens */ --text-strong: var(--neutral-900); --text-default: #111827; --text-muted: #657386; --text-faint: var(--neutral-400); --text-on-brand: #ffffff; --text-link: var(--accent-500); /* Border tokens */ --border-default: #d8e0ea; --border-strong: var(--neutral-300); --border-focus: var(--accent-500); /* Sidebar */ --sidebar-bg: var(--surface-panel); --sidebar-active: #e5ebf3; --sidebar-hover: var(--neutral-50); --sidebar-text: var(--text-default); /* Typography */ --font-sans: "Source Sans Pro", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "JetBrains Mono", "Cascadia Code", Menlo, Consolas, monospace; --fs-xs: 12px; --fs-sm: 13px; --fs-base: 14px; --fs-md: 15px; --fs-lg: 17px; --fs-xl: 20px; --fs-2xl: 24px; --fs-3xl: 30px; --lh-tight: 1.2; --lh-normal: 1.5; --lh-loose: 1.7; /* Spacing scale (4px grid) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* Radius */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 18px; --radius-pill: 999px; /* Shadows */ --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.06); --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06); --shadow-md: 0 4px 16px rgba(15, 23, 42, 0.08); --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12); --shadow-xl: 0 28px 80px rgba(15, 23, 42, 0.18); /* Motion */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms; /* z-index */ --z-sidebar: 10; --z-topbar: 20; --z-dropdown: 100; --z-overlay: 900; --z-modal: 1000; --z-toast: 1100; /* Legacy aliases — DO NOT REMOVE (consumed by erp-shell.css) */ --purple: var(--brand-500); --purple-dark: var(--brand-600); --blue: var(--accent-500); --green: var(--success-500); --page: var(--surface-page); --panel: var(--surface-panel); --line: var(--border-default); --text: var(--text-default); --muted: var(--text-muted); --shadow: var(--shadow-sm); } /* ============================================================ Dark mode overrides ============================================================ */ [data-theme="dark"] { --surface-page: #0b1220; --surface-panel: #111a2e; --surface-raised: #172238; --surface-sunken: #0d1526; --surface-overlay: rgba(0, 0, 0, 0.7); --text-strong: #f8fafc; --text-default: #e2e8f0; --text-muted: #94a3b8; --text-faint: #64748b; --text-on-brand: #ffffff; --text-link: #60a5fa; --border-default: #1f2a44; --border-strong: #2c3a5a; --sidebar-bg: #0f1628; --sidebar-active: #1c2944; --sidebar-hover: #182239; --sidebar-text: var(--text-default); --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55); /* Legacy aliases re-mapped */ --page: var(--surface-page); --panel: var(--surface-panel); --line: var(--border-default); --text: var(--text-default); --muted: var(--text-muted); --shadow: var(--shadow-sm); --sidebar-active: #1c2944; /* Semantic tone pairs — dark variants. Foreground stays bright enough to read on the dark `-bg` surface; surface uses a low-opacity wash of the brand colour so it reads as the same family. */ --tone-good: #4ade80; --tone-good-bg: rgba(34, 197, 94, 0.16); --tone-bad: #fca5a5; --tone-bad-bg: rgba(239, 68, 68, 0.18); --tone-warn: #fcd34d; --tone-warn-bg: rgba(245, 158, 11, 0.18); --tone-info: #93c5fd; --tone-info-bg: rgba(59, 130, 246, 0.18); } /* Auto dark mode for users with system preference and no explicit choice */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { --surface-page: #0b1220; --surface-panel: #111a2e; --surface-raised: #172238; --surface-sunken: #0d1526; --text-strong: #f8fafc; --text-default: #e2e8f0; --text-muted: #94a3b8; --border-default: #1f2a44; --sidebar-bg: #0f1628; --sidebar-active: #1c2944; --page: #0b1220; --panel: #111a2e; --line: #1f2a44; --text: #e2e8f0; --muted: #94a3b8; } } /* ============================================================ Cross-cutting utilities introduced in V-1 ============================================================ */ /* Responsive table wrapper — fixes viewport overflow */ .erp-table-wrap { width: 100%; max-width: 100%; overflow-x: auto; overflow-y: visible; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-panel); -webkit-overflow-scrolling: touch; scrollbar-gutter: stable; } .erp-table-wrap > table, .erp-table-wrap > .erp-table { width: 100%; min-width: max-content; border-collapse: collapse; margin: 0; border: 0; } .erp-table-wrap thead th { position: sticky; top: 0; z-index: 1; background: var(--surface-sunken); color: var(--text-muted); font-weight: 700; text-align: left; border-bottom: 1px solid var(--border-default); } /* Standalone .erp-table-modern — opt-in modern styling */ .erp-table-modern { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); } .erp-table-modern th, .erp-table-modern td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-default); text-align: left; vertical-align: middle; } .erp-table-modern tbody tr:hover { background: var(--sidebar-hover); } /* Theme toggle button */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-panel); color: var(--text-default); cursor: pointer; transition: background var(--dur-fast) var(--ease-out); } .theme-toggle:hover { background: var(--sidebar-hover); } .theme-toggle svg { width: 18px; height: 18px; } [data-theme="dark"] .theme-toggle .icon-sun { display: inline-block; } [data-theme="dark"] .theme-toggle .icon-moon { display: none; } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: inline-block; } /* Icon helper */ .icon { display: inline-block; width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; stroke: currentColor; stroke-width: 0; } .icon-lg { width: 20px; height: 20px; } /* Command palette */ .cmdk-overlay { position: fixed; inset: 0; z-index: var(--z-overlay); background: var(--surface-overlay); backdrop-filter: blur(4px); display: none; align-items: flex-start; justify-content: center; padding-top: 12vh; } .cmdk-overlay.open { display: flex; } .cmdk-panel { width: min(640px, 92vw); max-height: 70vh; display: flex; flex-direction: column; background: var(--surface-panel); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); overflow: hidden; z-index: var(--z-modal); } .cmdk-input { width: 100%; padding: 16px 20px; border: 0; border-bottom: 1px solid var(--border-default); background: transparent; color: var(--text-default); font-size: var(--fs-lg); outline: none; } .cmdk-input::placeholder { color: var(--text-faint); } .cmdk-list { flex: 1; overflow-y: auto; padding: 6px; } .cmdk-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: var(--radius-sm); color: var(--text-default); cursor: pointer; font-size: var(--fs-sm); } .cmdk-item .cmdk-section { margin-left: auto; color: var(--text-faint); font-size: var(--fs-xs); } .cmdk-item.is-active { background: var(--sidebar-active); } .cmdk-item:hover { background: var(--sidebar-hover); } .cmdk-empty { padding: 24px; text-align: center; color: var(--text-muted); font-size: var(--fs-sm); } .cmdk-footer { padding: 8px 14px; border-top: 1px solid var(--border-default); background: var(--surface-sunken); color: var(--text-muted); font-size: var(--fs-xs); display: flex; gap: 14px; } .cmdk-footer kbd { background: var(--surface-panel); border: 1px solid var(--border-default); border-radius: var(--radius-xs); padding: 1px 6px; font-family: var(--font-mono); font-size: 11px; } /* --- Enhanced palette: bar with scope chip, groups, tiles, overflow --- */ .cmdk-bar { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--border-default); padding-left: 14px; } .cmdk-bar .cmdk-input { border-bottom: 0; padding-left: 6px; } .cmdk-scope { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--accent-500) 12%, transparent); color: var(--accent-500); font-size: 11px; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; } .cmdk-group { padding: 6px 0; } .cmdk-group + .cmdk-group { border-top: 1px solid var(--border-default); } .cmdk-group__head { display: flex; align-items: center; gap: 6px; padding: 6px 14px 4px; color: var(--text-muted); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; } .cmdk-group__head .icon { width: 12px; height: 12px; opacity: 0.7; } .cmdk-group__body { display: flex; flex-direction: column; } /* Subtle accent on suggestion + AI rows so they stand out from results */ .cmdk-item.is-suggestion .icon, .cmdk-item.is-ai .icon { color: var(--accent-500); } .cmdk-item.is-action .icon { color: var(--tone-info, var(--accent-500)); } /* Highlighted matched substring */ .cmdk-item mark { background: color-mix(in srgb, var(--accent-500) 24%, transparent); color: inherit; padding: 0 1px; border-radius: 2px; font-weight: 700; } .cmdk-item__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Quick-action tile grid (empty state) */ .cmdk-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; padding: 4px 10px 8px; } .cmdk-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px 12px; border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--surface-sunken); color: var(--text-default); font-family: inherit; text-align: left; cursor: pointer; transition: background-color .12s ease, border-color .12s ease; } .cmdk-tile:hover, .cmdk-tile.is-active { background: color-mix(in srgb, var(--accent-500) 12%, transparent); border-color: var(--accent-500); } .cmdk-tile .icon { width: 14px; height: 14px; color: var(--accent-500); } .cmdk-tile__title { font-size: var(--fs-sm); font-weight: 700; } .cmdk-tile__sub { font-size: var(--fs-xs); color: var(--text-muted); } /* "+N more in X" overflow link */ .cmdk-overflow { display: flex; align-items: center; justify-content: flex-end; gap: 4px; padding: 6px 14px; color: var(--text-muted); text-decoration: none; font-size: var(--fs-xs); font-weight: 600; cursor: pointer; } .cmdk-overflow:hover, .cmdk-overflow.is-active { color: var(--accent-500); background: var(--sidebar-hover); } .cmdk-overflow .icon { width: 12px; height: 12px; } /* Skeleton loader */ .skeleton { background: linear-gradient(90deg, var(--surface-sunken), var(--neutral-200), var(--surface-sunken)); background-size: 200% 100%; animation: skeleton-shimmer 1.4s infinite; border-radius: var(--radius-sm); } @keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } [data-theme="dark"] .skeleton { background: linear-gradient(90deg, var(--surface-sunken), #1f2a44, var(--surface-sunken)); } /* Accessibility */ :focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ============================================================ Dark-mode overrides for erp-shell.css legacy hardcoded colors. The legacy stylesheet uses ~70 hardcoded #fff backgrounds and ~180 hardcoded text colors. Rather than rewrite all 4k lines, we override the high-traffic surfaces here. Anything missed will still inherit body color so it remains legible. ============================================================ */ [data-theme="dark"] body { background: var(--surface-page); color: var(--text-default); } /* Sidebar — text was hardcoded #334155 / #4b5563 */ [data-theme="dark"] .erp-sidebar { background: var(--sidebar-bg); border-right-color: var(--border-default); } [data-theme="dark"] .nav-link, [data-theme="dark"] .nav-group summary, [data-theme="dark"] .nav-children a { color: var(--text-default); } [data-theme="dark"] .nav-icon { color: var(--text-muted); } [data-theme="dark"] .nav-link:hover, [data-theme="dark"] .nav-group summary:hover, [data-theme="dark"] .nav-children a:hover { background: var(--sidebar-hover); } [data-theme="dark"] .nav-link.active, [data-theme="dark"] .nav-group summary.active, [data-theme="dark"] .nav-children a.active { background: var(--sidebar-active); color: #93c5fd; } /* Topbar — now uses --topbar-* tokens which already flip per [data-theme]; no overrides needed. */ /* Cards & panels — anything that hardcoded background:#fff */ [data-theme="dark"] .erp-card, [data-theme="dark"] .erp-panel, [data-theme="dark"] .auth-card, [data-theme="dark"] .narrow-panel, [data-theme="dark"] .dashboard-chart-panel, [data-theme="dark"] .manufacturing-summary-card, [data-theme="dark"] .report-summary-card, [data-theme="dark"] .sales-filter-card, [data-theme="dark"] .pos-cart-summary, [data-theme="dark"] .purchase-summary-strip, [data-theme="dark"] .add-record, [data-theme="dark"] .action-menu, [data-theme="dark"] .inline-edit, [data-theme="dark"] .row-action-menu, [data-theme="dark"] .report-date-menu, [data-theme="dark"] .settings-summary-grid, [data-theme="dark"] .dashboard-secondary-metrics, [data-theme="dark"] .sales-register-table, [data-theme="dark"] .responsive-table { background: var(--surface-panel) !important; color: var(--text-default); border-color: var(--border-default); } /* Headings inside dark cards */ [data-theme="dark"] .erp-card h1, [data-theme="dark"] .erp-card h2, [data-theme="dark"] .erp-card h3, [data-theme="dark"] .erp-card h4, [data-theme="dark"] .page-heading h1, [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4 { color: var(--text-strong); } /* Inputs, selects, textareas */ [data-theme="dark"] input[type="text"], [data-theme="dark"] input[type="email"], [data-theme="dark"] input[type="password"], [data-theme="dark"] input[type="number"], [data-theme="dark"] input[type="search"], [data-theme="dark"] input[type="tel"], [data-theme="dark"] input[type="date"], [data-theme="dark"] input[type="datetime-local"], [data-theme="dark"] input[type="url"], [data-theme="dark"] select, [data-theme="dark"] textarea { background: var(--surface-sunken); color: var(--text-default); border-color: var(--border-default); } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: var(--text-faint); } /* Tables */ [data-theme="dark"] table { color: var(--text-default); background: transparent; } [data-theme="dark"] table th { background: var(--surface-sunken); color: var(--text-muted); border-color: var(--border-default); } [data-theme="dark"] table td { border-color: var(--border-default); } [data-theme="dark"] table tbody tr:hover { background: var(--sidebar-hover); } [data-theme="dark"] .erp-table-wrap { background: var(--surface-panel); border-color: var(--border-default); } /* Buttons (the generic ones) */ [data-theme="dark"] .button-secondary, [data-theme="dark"] .button-ghost, [data-theme="dark"] .table-actions button { background: var(--surface-raised); color: var(--text-default); border-color: var(--border-default); } /* Dashboard chart */ [data-theme="dark"] .sales-chart { border-top-color: var(--border-default); } [data-theme="dark"] .chart-axis, [data-theme="dark"] .chart-point small { color: var(--text-muted); } [data-theme="dark"] .chart-body { background: repeating-linear-gradient( to bottom, transparent 0, transparent 13%, var(--border-default) calc(13% + 1px) ); } [data-theme="dark"] .chart-point span { background: linear-gradient(180deg, #60a5fa, #f59e0b); } [data-theme="dark"] .dashboard-chart-tabs button { background: transparent; color: var(--text-muted); border-color: var(--border-default); } [data-theme="dark"] .dashboard-chart-tabs button.active { background: var(--sidebar-active); color: var(--text-strong); } /* Super-admin layout (it has its own light card surfaces) */ [data-theme="dark"] .super-shell, [data-theme="dark"] .super-card, [data-theme="dark"] .super-card * { color: var(--text-default); } [data-theme="dark"] .super-card { background: var(--surface-panel); border-color: var(--border-default); } /* Borders, dividers, dashed lines */ [data-theme="dark"] hr { border-color: var(--border-default); } [data-theme="dark"] [style*="border-bottom: 1px solid #e2e8f0"], [data-theme="dark"] [style*="border-bottom: 1px solid #f1f5f9"] { border-bottom-color: var(--border-default) !important; } [data-theme="dark"] [style*="background: #f8fafc"], [data-theme="dark"] [style*="background: #f1f5f9"] { background: var(--surface-sunken) !important; } [data-theme="dark"] [style*="color: #64748b"], [data-theme="dark"] [style*="color: #475569"], [data-theme="dark"] [style*="color: #334155"] { color: var(--text-muted) !important; } /* Code blocks */ [data-theme="dark"] code, [data-theme="dark"] pre { background: var(--surface-sunken); color: var(--text-default); border-color: var(--border-default); } /* ============================================================ Notification bell dropdown ============================================================ */ .bell-wrap { position: relative; display: inline-block; } .bell-badge { position: absolute; top: -2px; right: -2px; min-width: 18px; height: 18px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; background: var(--danger-500); color: #fff; border-radius: var(--radius-pill); font-size: 10px; font-weight: 800; pointer-events: none; } .bell-badge[hidden] { display: none; } .bell-panel { position: absolute; top: calc(100% + 8px); right: 0; width: min(380px, 92vw); max-height: 70vh; display: none; flex-direction: column; background: var(--surface-panel); border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); z-index: var(--z-dropdown); overflow: hidden; } .bell-panel.open { display: flex; } .bell-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--border-default); background: var(--surface-sunken); } .bell-header strong { color: var(--text-strong); font-size: var(--fs-sm); } .bell-header button { background: transparent; border: 0; cursor: pointer; color: var(--text-link); font-size: var(--fs-xs); } .bell-list { flex: 1; overflow-y: auto; } .bell-item { display: grid; grid-template-columns: 4px 1fr; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border-default); color: var(--text-default); cursor: pointer; text-decoration: none; } .bell-item:hover { background: var(--sidebar-hover); } .bell-item.is-unread { background: var(--surface-sunken); } .bell-item .bell-stripe { border-radius: var(--radius-pill); } .bell-item.sev-info .bell-stripe { background: var(--info-500); } .bell-item.sev-warn .bell-stripe { background: var(--warn-500); } .bell-item.sev-danger .bell-stripe { background: var(--danger-500); } .bell-item.sev-success .bell-stripe { background: var(--success-500); } .bell-item-title { font-weight: 700; font-size: var(--fs-sm); color: var(--text-strong); } .bell-item-body { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; } .bell-item-meta { font-size: 11px; color: var(--text-faint); margin-top: 4px; } .bell-empty { padding: 24px; text-align: center; color: var(--text-muted); font-size: var(--fs-sm); } } /* ============================================================ V-1.6 Layout polish ============================================================ */ /* ---------- Collapsible sidebar with hover-to-expand ---------- Collapsed default: 64px icon-only column. Desktop hover grows the grid column so content reflows; mobile keeps the 64px strip. */ [data-sidebar-collapsed="1"] .erp-app { grid-template-columns: 64px minmax(0, 1fr); transition: grid-template-columns 180ms ease; } /* Hide every text/affordance INSIDE the collapsed sidebar; show only icons. We target span.nav-icon as the keep-visible element and hide everything else under .nav-link / details > summary / pinned anchors. */ [data-sidebar-collapsed="1"] .erp-sidebar .erp-brand span, [data-sidebar-collapsed="1"] .erp-sidebar .nav-link > *:not(.nav-icon), [data-sidebar-collapsed="1"] .erp-sidebar .nav-group summary > *:not(.nav-icon), [data-sidebar-collapsed="1"] .erp-sidebar .pinned-section-label, [data-sidebar-collapsed="1"] .erp-sidebar .pinned-section a > *:not(.nav-icon) { display: none; } [data-sidebar-collapsed="1"] .erp-sidebar .nav-group .nav-children { display: none; } [data-sidebar-collapsed="1"] .erp-sidebar .nav-link, [data-sidebar-collapsed="1"] .erp-sidebar .nav-group summary, [data-sidebar-collapsed="1"] .erp-sidebar .pinned-section a { display: flex; justify-content: center; padding: 8px 6px; } /* Desktop hover-expand. :has() makes the grid widen so content reflows — no overlay, no z-index gymnastics, no clipped content. */ @media (hover: hover) and (min-width: 901px) { [data-sidebar-collapsed="1"] .erp-app:has(.erp-sidebar:hover), [data-sidebar-collapsed="1"] .erp-app:has(.erp-sidebar:focus-within) { grid-template-columns: 260px minmax(0, 1fr); } /* When hovered, restore all the hidden children. */ [data-sidebar-collapsed="1"] .erp-app:has(.erp-sidebar:hover) .erp-sidebar .erp-brand span, [data-sidebar-collapsed="1"] .erp-app:has(.erp-sidebar:focus-within) .erp-sidebar .erp-brand span, [data-sidebar-collapsed="1"] .erp-app:has(.erp-sidebar:hover) .erp-sidebar .pinned-section-label, [data-sidebar-collapsed="1"] .erp-app:has(.erp-sidebar:focus-within) .erp-sidebar .pinned-section-label { display: inline; } [data-sidebar-collapsed="1"] .erp-app:has(.erp-sidebar:hover) .erp-sidebar .nav-link > *, [data-sidebar-collapsed="1"] .erp-app:has(.erp-sidebar:focus-within) .erp-sidebar .nav-link > *, [data-sidebar-collapsed="1"] .erp-app:has(.erp-sidebar:hover) .erp-sidebar .nav-group summary > *, [data-sidebar-collapsed="1"] .erp-app:has(.erp-sidebar:focus-within) .erp-sidebar .nav-group summary > *, [data-sidebar-collapsed="1"] .erp-app:has(.erp-sidebar:hover) .erp-sidebar .pinned-section a > *, [data-sidebar-collapsed="1"] .erp-app:has(.erp-sidebar:focus-within) .erp-sidebar .pinned-section a > * { display: inline-flex; } [data-sidebar-collapsed="1"] .erp-app:has(.erp-sidebar:hover) .erp-sidebar .nav-link, [data-sidebar-collapsed="1"] .erp-app:has(.erp-sidebar:focus-within) .erp-sidebar .nav-link, [data-sidebar-collapsed="1"] .erp-app:has(.erp-sidebar:hover) .erp-sidebar .nav-group summary, [data-sidebar-collapsed="1"] .erp-app:has(.erp-sidebar:focus-within) .erp-sidebar .nav-group summary, [data-sidebar-collapsed="1"] .erp-app:has(.erp-sidebar:hover) .erp-sidebar .pinned-section a, [data-sidebar-collapsed="1"] .erp-app:has(.erp-sidebar:focus-within) .erp-sidebar .pinned-section a { display: grid; justify-content: start; padding: 0 16px; } [data-sidebar-collapsed="1"] .erp-app:has(.erp-sidebar:hover) .erp-sidebar .nav-group[open] .nav-children, [data-sidebar-collapsed="1"] .erp-app:has(.erp-sidebar:focus-within) .erp-sidebar .nav-group[open] .nav-children { display: block; } } @media (max-width: 900px) { .erp-app { grid-template-columns: 64px minmax(0, 1fr); } } /* Pinned favourites section */ .pinned-section { padding: 8px 12px 4px; border-bottom: 1px solid var(--border-default); margin-bottom: 4px; } .pinned-section-label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); font-weight: 700; padding: 4px 6px; } .pinned-section a { display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: 8px; padding: 6px 6px; border-radius: var(--radius-sm); color: var(--text-default); font-size: var(--fs-sm); } .pinned-section a:hover { background: var(--sidebar-hover); } /* Pin/unpin button next to nav items */ .nav-pin-btn { background: transparent; border: 0; cursor: pointer; color: var(--text-faint); padding: 2px; border-radius: var(--radius-xs); opacity: 0; transition: opacity var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .nav-link:hover .nav-pin-btn, .nav-group summary:hover .nav-pin-btn { opacity: 1; } .nav-pin-btn.is-pinned { opacity: 1; color: var(--warn-500); } .nav-pin-btn:hover { color: var(--warn-500); } /* Tenant switcher pill */ .tenant-switcher { position: relative; } .tenant-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: var(--surface-raised); border: 1px solid var(--border-default); border-radius: var(--radius-pill); color: var(--text-default); font-size: var(--fs-xs); font-weight: 700; cursor: pointer; } .tenant-pill .tenant-status { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--success-500); } .tenant-pill .tenant-status.trial { background: var(--warn-500); } .tenant-pill .tenant-status.suspended { background: var(--danger-500); } .tenant-menu { position: absolute; top: calc(100% + 6px); right: 0; width: 260px; background: var(--surface-panel); border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 8px; display: none; z-index: var(--z-dropdown); } .tenant-menu.open { display: block; } .tenant-menu .tenant-row { display: block; padding: 8px 10px; border-radius: var(--radius-sm); color: var(--text-default); font-size: var(--fs-sm); text-decoration: none; } .tenant-menu .tenant-row:hover { background: var(--sidebar-hover); } .tenant-menu .tenant-row.is-current { background: var(--sidebar-active); font-weight: 700; } .tenant-menu .tenant-divider { border: 0; border-top: 1px solid var(--border-default); margin: 6px 0; } .tenant-menu .tenant-meta { padding: 4px 10px; color: var(--text-muted); font-size: var(--fs-xs); } /* Breadcrumb trail */ .breadcrumbs { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; padding: 0; list-style: none; color: var(--text-muted); font-size: var(--fs-xs); } .breadcrumbs a { color: var(--text-link); text-decoration: none; } .breadcrumbs a:hover { text-decoration: underline; } .breadcrumbs .sep { color: var(--text-faint); } .breadcrumbs .current { color: var(--text-default); font-weight: 700; } /* Page heading toolbar slots */ .page-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin: 12px 0 16px; } .page-toolbar-left, .page-toolbar-right { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .page-toolbar:empty { display: none; } .view-mode-toggle { display: inline-flex; border: 1px solid var(--border-default); border-radius: var(--radius-sm); overflow: hidden; } .view-mode-toggle button { background: var(--surface-panel); border: 0; padding: 6px 10px; color: var(--text-muted); cursor: pointer; font-size: var(--fs-xs); } .view-mode-toggle button.active { background: var(--sidebar-active); color: var(--text-strong); } .bulk-actions-bar { display: none; align-items: center; gap: 12px; padding: 10px 14px; background: var(--brand-50); border: 1px solid var(--brand-200); border-radius: var(--radius-md); color: var(--brand-700); font-size: var(--fs-sm); } [data-theme="dark"] .bulk-actions-bar { background: var(--brand-900); border-color: var(--brand-700); color: var(--brand-200); } .bulk-actions-bar.is-active { display: flex; } .bulk-actions-bar strong { font-weight: 800; } /* Empty state */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 24px; text-align: center; background: var(--surface-panel); border: 1px dashed var(--border-default); border-radius: var(--radius-lg); color: var(--text-muted); } .empty-state .empty-illustration { width: 72px; height: 72px; margin-bottom: 16px; color: var(--text-faint); } .empty-state h3 { margin: 0 0 8px; color: var(--text-strong); font-size: var(--fs-lg); } .empty-state p { margin: 0 0 20px; max-width: 420px; line-height: var(--lh-normal); } .empty-state .empty-cta { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; background: var(--brand-500); color: #fff; border-radius: var(--radius-sm); text-decoration: none; font-weight: 700; font-size: var(--fs-sm); } .empty-state .empty-cta:hover { background: var(--brand-600); } /* ============================================================ V-3 — Combobox + auto-save UI ============================================================ */ .cbx-wrap { position: relative; display: block; } .cbx-input { width: 100%; padding: 8px 12px; border: 1px solid var(--border, #d1d5db); border-radius: var(--radius-md, 6px); background: var(--surface, #fff); color: var(--text, #111); font: inherit; } .cbx-input:focus-visible { outline: 2px solid var(--brand-500, #6366f1); outline-offset: 1px; } .cbx-menu { display: none; position: absolute; left: 0; right: 0; top: 100%; margin-top: 4px; max-height: 260px; overflow-y: auto; background: var(--surface, #fff); border: 1px solid var(--border, #d1d5db); border-radius: var(--radius-md, 6px); box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,.08)); z-index: 50; } .cbx-wrap.cbx-open .cbx-menu { display: block; } .cbx-option { padding: 8px 12px; cursor: pointer; color: var(--text, #111); font-size: var(--fs-sm, 13px); } .cbx-option.is-active, .cbx-option:hover { background: var(--brand-50, #eef2ff); color: var(--brand-700, #4338ca); } .cbx-empty { padding: 12px; color: var(--text-muted, #6b7280); font-size: var(--fs-sm, 13px); } [data-autosave-status] { display: inline-block; font-size: 12px; color: var(--text-muted, #6b7280); margin-left: 8px; } [data-autosave-status].is-saved { color: var(--success-600, #15803d); } [data-theme="dark"] .cbx-input, [data-theme="dark"] .cbx-menu { background: var(--surface-2, #1f2937); color: #e5e7eb; border-color: #374151; } [data-theme="dark"] .cbx-option { color: #e5e7eb; } [data-theme="dark"] .cbx-option.is-active, [data-theme="dark"] .cbx-option:hover { background: #374151; color: #fff; } /* ============================================================ V-3.5/3.6/3.7 — bulk, inline edit, shortcuts ============================================================ */ .bulk-actions-bar { display: none; } .bulk-actions-bar.is-active { display: flex; } [data-bulk-row], [data-bulk-all] { cursor: pointer; } [data-inline-edit] { cursor: text; position: relative; } [data-inline-edit]:hover { background: var(--brand-50, #eef2ff); } [data-inline-edit].is-saving { opacity: 0.6; } [data-inline-edit].is-saved { background: var(--success-100, #dcfce7); transition: background 600ms; } [data-inline-edit].is-error { background: var(--danger-100, #fee2e2); } .inline-edit-input { width: 100%; box-sizing: border-box; padding: 4px 6px; border: 1px solid var(--brand-500, #6366f1); border-radius: 4px; font: inherit; background: var(--surface, #fff); color: var(--text, #111); } .shortcuts-modal { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; z-index: 9000; } .shortcuts-modal[hidden] { display: none; } .shortcuts-panel { background: var(--surface, #fff); color: var(--text, #111); border-radius: var(--radius-lg, 8px); padding: 20px 24px; min-width: 320px; box-shadow: 0 10px 40px rgba(0,0,0,.25); } .shortcuts-panel h3 { margin: 0 0 12px; font-size: 16px; } .shortcuts-panel ul { list-style: none; padding: 0; margin: 0 0 16px; } .shortcuts-panel li { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--border, #e5e7eb); } .shortcuts-panel li:last-child { border-bottom: 0; } .shortcuts-panel kbd { background: var(--surface-2, #f3f4f6); border: 1px solid var(--border, #d1d5db); border-radius: 4px; padding: 2px 8px; font: 12px/1 ui-monospace, SFMono-Regular, monospace; color: var(--text, #111); } .shortcuts-close { background: var(--brand-600, #4f46e5); color: #fff; border: 0; border-radius: 6px; padding: 8px 16px; cursor: pointer; } [data-theme="dark"] .shortcuts-panel { background: #1f2937; color: #e5e7eb; } [data-theme="dark"] .shortcuts-panel li { border-color: #374151; } [data-theme="dark"] .shortcuts-panel kbd { background: #374151; border-color: #4b5563; color: #f3f4f6; } [data-theme="dark"] .inline-edit-input { background: #1f2937; color: #e5e7eb; border-color: var(--brand-400); } /* ============================================================ V-4 — Dashboard widgets, deltas, onboarding, inbox ============================================================ */ .metric-delta { display: inline-block; margin-top: 4px; font-size: 11px; font-weight: 600; padding: 2px 6px; border-radius: 4px; } .metric-delta.delta-up { color: var(--success-700, #15803d); background: var(--success-50, #f0fdf4); } .metric-delta.delta-down { color: var(--danger-700, #b91c1c); background: var(--danger-50, #fef2f2); } .metric-delta.delta-flat { color: var(--text-muted, #6b7280); background: var(--surface-2, #f3f4f6); } .onboarding-card, .dashboard-inbox { background: var(--surface, #fff); border: 1px solid var(--border, #e5e7eb); border-radius: var(--radius-lg, 8px); padding: 16px 20px; margin-bottom: 16px; box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.04)); } .onboarding-card header, .dashboard-inbox header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .onboarding-card .eyebrow, .dashboard-inbox .eyebrow { color: var(--text-muted, #6b7280); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; } .onboarding-card h2, .dashboard-inbox h2 { margin: 4px 0 0; font-size: 16px; } .onboarding-progress { background: var(--surface-2, #f3f4f6); border-radius: 999px; height: 6px; overflow: hidden; margin-bottom: 12px; } .onboarding-bar { background: var(--brand-500, #6366f1); height: 100%; transition: width 240ms ease; } .onboarding-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; } .onboarding-steps li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text, #111); } .onboarding-steps li.is-done { color: var(--text-muted, #6b7280); text-decoration: line-through; } .step-check { display: inline-block; width: 18px; text-align: center; color: var(--success-600, #16a34a); } .onboarding-steps li:not(.is-done) .step-check { color: var(--text-muted, #9ca3af); } .inbox-list { list-style: none; padding: 0; margin: 0; } .inbox-item { border-left: 3px solid var(--brand-400, #818cf8); padding: 8px 12px; margin-bottom: 6px; background: var(--surface-2, #f9fafb); border-radius: 0 4px 4px 0; } .inbox-item.sev-warn { border-left-color: var(--warning-500, #f59e0b); } .inbox-item.sev-danger { border-left-color: var(--danger-500, #ef4444); } .inbox-item.sev-success { border-left-color: var(--success-500, #22c55e); } .inbox-item a { text-decoration: none; color: inherit; display: block; } .inbox-title { font-weight: 600; font-size: 13px; } .inbox-body { font-size: 12px; color: var(--text-muted, #6b7280); margin: 2px 0; } .inbox-meta { font-size: 11px; color: var(--text-muted, #9ca3af); } .widget-hide button { background: none; border: 0; color: var(--text-muted, #6b7280); cursor: pointer; font-size: 12px; } .widget-hide button:hover { color: var(--text, #111); text-decoration: underline; } [data-theme="dark"] .onboarding-card, [data-theme="dark"] .dashboard-inbox { background: #1f2937; border-color: #374151; color: #e5e7eb; } [data-theme="dark"] .inbox-item { background: #111827; } [data-theme="dark"] .onboarding-progress { background: #374151; } /* ============================================================ V-6 — CRM (contact 360, kanban, tasks, tags) ============================================================ */ .contact-tabs { margin-top: 16px; } .contact-tab-nav { display: flex; gap: 4px; border-bottom: 1px solid var(--border, #e5e7eb); } .contact-tab-nav button { background: none; border: 0; padding: 10px 16px; cursor: pointer; font-weight: 600; color: var(--text-muted, #6b7280); border-bottom: 2px solid transparent; } .contact-tab-nav button:hover { color: var(--text, #111); } .contact-tab-nav button.active { color: var(--brand-600, #4f46e5); border-bottom-color: var(--brand-600, #4f46e5); } .contact-tab-pane { display: none; padding: 16px 0; } .contact-tab-pane.active { display: block; } .contact-metrics { margin-bottom: 16px; } .tag-strip { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; } .tag-chip { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; color: var(--text, #111); } .stage-pill { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; background: var(--surface-2, #f3f4f6); color: var(--text, #111); } .stage-pill.stage-lead { background: #e0e7ff; color: #3730a3; } .stage-pill.stage-qualified { background: #fef3c7; color: #92400e; } .stage-pill.stage-proposal { background: #ddd6fe; color: #5b21b6; } .stage-pill.stage-won { background: #dcfce7; color: #15803d; } .stage-pill.stage-lost { background: #fee2e2; color: #b91c1c; } .kanban-board { display: grid; grid-template-columns: repeat(5, minmax(180px, 1fr)); gap: 12px; margin-top: 16px; overflow-x: auto; } .kanban-col { background: var(--surface-2, #f9fafb); border-radius: var(--radius-md, 6px); padding: 12px; min-height: 240px; } .kanban-col.is-over { background: var(--brand-50, #eef2ff); outline: 2px dashed var(--brand-400); } .stage-header { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; } .kanban-list { display: grid; gap: 8px; } .deal-card { background: var(--surface, #fff); border: 1px solid var(--border, #e5e7eb); border-radius: var(--radius-md, 6px); padding: 10px 12px; cursor: grab; box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.04)); } .deal-card.is-dragging { opacity: 0.4; } .deal-title { font-weight: 600; font-size: 13px; } .deal-meta { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-muted, #6b7280); margin-top: 4px; } .deal-close { font-size: 11px; color: var(--text-muted, #6b7280); margin-top: 4px; } .dashboard-tasks { background: var(--surface, #fff); border: 1px solid var(--border, #e5e7eb); border-radius: var(--radius-lg, 8px); padding: 16px 20px; margin-bottom: 16px; } .dashboard-tasks header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .task-quick-list { list-style: none; padding: 0; margin: 0; } .task-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border, #e5e7eb); } .task-row:last-child { border-bottom: 0; } .task-row.is-overdue { color: var(--danger-700, #b91c1c); } .task-check { background: none; border: 1px solid var(--text-muted, #9ca3af); border-radius: 50%; width: 22px; height: 22px; cursor: pointer; padding: 0; } .task-check:hover { background: var(--success-100, #dcfce7); } .task-title { font-weight: 500; font-size: 13px; } .task-meta { font-size: 11px; color: var(--text-muted, #6b7280); } tr.is-complete { text-decoration: line-through; color: var(--text-muted, #6b7280); } tr.is-overdue td { color: var(--danger-700, #b91c1c); } .filter-tabs { display: flex; gap: 12px; margin: 16px 0; } .filter-tabs a { color: var(--text-muted, #6b7280); text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; } .filter-tabs a.active { color: var(--brand-600); border-bottom-color: var(--brand-600); font-weight: 600; } [data-theme="dark"] .kanban-col { background: #1f2937; } [data-theme="dark"] .deal-card { background: #111827; border-color: #374151; color: #e5e7eb; } [data-theme="dark"] .dashboard-tasks { background: #1f2937; border-color: #374151; color: #e5e7eb; } /* ============================================================ V-7.7 — Barcode scanner modal ============================================================ */ .barcode-scanner-modal { position: fixed; inset: 0; background: rgba(0,0,0,.7); display: flex; align-items: center; justify-content: center; z-index: 9100; } .barcode-scanner-panel { background: var(--surface, #fff); border-radius: var(--radius-lg, 8px); padding: 16px; width: min(420px, 92vw); text-align: center; } .barcode-scanner-panel video { width: 100%; border-radius: var(--radius-md, 6px); background: #000; } .barcode-status { font-size: 13px; color: var(--text-muted, #6b7280); margin: 8px 0; } .barcode-close { background: var(--brand-600, #4f46e5); color: #fff; border: 0; border-radius: 6px; padding: 8px 16px; cursor: pointer; } [data-theme="dark"] .barcode-scanner-panel { background: #1f2937; color: #e5e7eb; } .input-with-action { display: flex; gap: 6px; align-items: stretch; } .input-with-action input { flex: 1; } .input-with-action .text-button { padding: 6px 10px; border: 1px solid var(--border-default, #d1d5db); border-radius: var(--radius-sm, 6px); background: var(--surface-2, #f9fafb); cursor: pointer; font-size: 12px; white-space: nowrap; } .input-with-action .text-button:hover { background: var(--brand-50, #eef2ff); } /* ============================================================ V-7.x — Product create v2 (redesigned form) ============================================================ */ .product-create-v2 { display: block; } .product-create-grid { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); } @media (min-width: 1100px) { .product-create-grid { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; } } .product-create-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; } .product-create-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; } .form-card { background: var(--surface, #fff); border: 1px solid var(--border-subtle, #e5e7eb); border-radius: var(--radius-lg, 10px); overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,0.03); } .form-card-head { padding: 14px 18px 10px; border-bottom: 1px solid var(--border-subtle, #f1f5f9); background: var(--surface-2, #fafbfc); } .form-card-head h2 { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: 0.01em; color: var(--text, #111827); } .form-card-head p { margin: 4px 0 0; font-size: 12px; color: var(--text-muted, #6b7280); } .form-card-body { padding: 16px 18px 18px; display: grid; gap: 14px; } .form-card-body.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .form-card-body.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 720px) { .form-card-body.grid-2, .form-card-body.grid-3 { grid-template-columns: minmax(0, 1fr); } } .form-card-body .field.wide { grid-column: 1 / -1; } .form-card-body .field { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .form-card-body .field > span { font-size: 12px; font-weight: 600; color: var(--text, #374151); display: inline-flex; align-items: center; gap: 6px; } .form-card-body .field > span em { font-style: normal; font-size: 10px; font-weight: 500; text-transform: uppercase; color: var(--text-muted, #9ca3af); letter-spacing: 0.04em; } .form-card-body .field input[type="text"], .form-card-body .field input[type="number"], .form-card-body .field select, .form-card-body .field textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--border-default, #d1d5db); border-radius: var(--radius-sm, 6px); background: var(--surface, #fff); color: var(--text, #111827); font-size: 13px; } .form-card-body .field input:focus, .form-card-body .field select:focus, .form-card-body .field textarea:focus { outline: none; border-color: var(--brand-500, #6366f1); box-shadow: 0 0 0 3px rgba(99,102,241,0.15); } .form-card-body .field .hint { font-size: 11px; color: var(--text-muted, #6b7280); line-height: 1.4; } .input-with-prefix { display: flex; align-items: stretch; border: 1px solid var(--border-default, #d1d5db); border-radius: var(--radius-sm, 6px); background: var(--surface, #fff); overflow: hidden; } .input-with-prefix .prefix { padding: 8px 10px; background: var(--surface-2, #f3f4f6); color: var(--text-muted, #6b7280); font-size: 13px; border-right: 1px solid var(--border-subtle, #e5e7eb); display: inline-flex; align-items: center; } .input-with-prefix input { flex: 1; border: 0 !important; padding: 8px 10px; background: transparent; font-size: 13px; min-width: 0; } .input-with-prefix input:focus { outline: none; box-shadow: none; } .input-with-prefix:focus-within { border-color: var(--brand-500, #6366f1); box-shadow: 0 0 0 3px rgba(99,102,241,0.15); } .switch-stack { gap: 10px !important; } .switch { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text, #374151); cursor: pointer; user-select: none; } .switch input { position: absolute; opacity: 0; pointer-events: none; } .switch > span { width: 34px; height: 20px; border-radius: 999px; background: var(--border-default, #d1d5db); position: relative; transition: background .15s ease; flex: 0 0 34px; } .switch > span::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s ease; box-shadow: 0 1px 2px rgba(0,0,0,0.2); } .switch input:checked + span { background: var(--brand-500, #6366f1); } .switch input:checked + span::after { transform: translateX(14px); } .switch input:focus-visible + span { box-shadow: 0 0 0 3px rgba(99,102,241,0.25); } .btn-primary, .btn-soft, .btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 14px; border-radius: var(--radius-sm, 6px); font-size: 13px; font-weight: 600; cursor: pointer; border: 1px solid transparent; text-decoration: none; transition: background .12s ease, border-color .12s ease, color .12s ease; } .btn-primary { background: var(--brand-600, #4f46e5); color: #fff; } .btn-primary:hover { background: var(--brand-700, #4338ca); } .btn-soft { background: var(--surface-2, #f3f4f6); color: var(--text, #111827); border-color: var(--border-default, #d1d5db); } .btn-soft:hover { background: var(--brand-50, #eef2ff); border-color: var(--brand-200, #c7d2fe); } .btn-ghost { background: transparent; color: var(--text-muted, #6b7280); } .btn-ghost:hover { color: var(--text, #111827); background: var(--surface-2, #f3f4f6); } .summary-list { gap: 10px !important; } .summary-list > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 0; border-bottom: 1px dashed var(--border-subtle, #e5e7eb); font-size: 12px; } .summary-list > div:last-child { border-bottom: 0; } .summary-list .label { color: var(--text-muted, #6b7280); } .summary-list .value { color: var(--text, #111827); font-weight: 600; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%; } .sticky-side { position: sticky; top: 16px; } .form-actions-v2 { display: flex; flex-direction: column; gap: 8px; } .form-actions-v2 .btn-primary, .form-actions-v2 .btn-soft, .form-actions-v2 .btn-ghost { width: 100%; } .form-errors-card { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; padding: 12px 16px; border-radius: var(--radius-md, 8px); margin-bottom: 16px; font-size: 13px; } .form-errors-card strong { display: block; margin-bottom: 6px; } .form-errors-card ul { margin: 0; padding-left: 18px; } .form-errors-card li { margin: 2px 0; } [data-theme="dark"] .form-card { background: #1f2937; border-color: #374151; } [data-theme="dark"] .form-card-head { background: #111827; border-color: #374151; } [data-theme="dark"] .form-card-head h2 { color: #f3f4f6; } [data-theme="dark"] .form-card-body .field input, [data-theme="dark"] .form-card-body .field select, [data-theme="dark"] .form-card-body .field textarea { background: #111827; color: #e5e7eb; border-color: #374151; } [data-theme="dark"] .input-with-prefix { background: #111827; border-color: #374151; } [data-theme="dark"] .input-with-prefix .prefix { background: #1f2937; border-color: #374151; color: #9ca3af; } [data-theme="dark"] .btn-soft { background: #374151; color: #e5e7eb; border-color: #4b5563; } [data-theme="dark"] .summary-list > div { border-color: #374151; } [data-theme="dark"] .summary-list .value { color: #f3f4f6; } [data-theme="dark"] .form-errors-card { background: #3f1d1d; border-color: #7f1d1d; color: #fecaca; }