/* ============================================ Stock Tracker - Corporate / Startup UI ============================================ */ :root { /* Semantic colors (shared across themes) */ --color-success: #15803d; --color-warning: #b45309; /* Near-alert — saturated yellow, visually separate from danger red */ --color-near-alert-fg: #713f12; --color-near-alert-border: #ca8a04; --color-near-alert-surface: rgba(254, 249, 195, 0.72); --color-near-alert-surface-strong: rgba(250, 204, 21, 0.28); --color-danger: #b91c1c; --color-info: #1d4ed8; /* Typography */ --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; /* Spacing */ --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; /* Radius */ --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-full: 9999px; /* Shadows - subtle */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.06), 0 4px 6px -4px rgba(0, 0, 0, 0.05); /* Transitions */ --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-slow: 400ms ease; } /* ---- Color themes (`data-color-scheme` on so Turbo Drive picks up changes; default Harbor) ---- */ body[data-color-scheme="harbor"], body:not([data-color-scheme]) { --color-primary: #0f766e; --color-primary-dark: #0d5c56; --color-primary-light: #14b8a6; --color-accent: #0d9488; --color-accent-dark: #0f766e; --color-accent-light: #2dd4bf; --color-bg: #f8fafc; --color-bg-elevated: #ffffff; --color-bg-card: #f1f5f9; --color-border: #e2e8f0; --color-border-light: #cbd5e1; --color-text: #0f172a; --color-text-muted: #64748b; --color-text-dim: #94a3b8; --color-input-bg: #ffffff; --color-input-border: #64748b; --shadow-input: 0 1px 2px rgba(15, 23, 42, 0.06), 0 2px 5px rgba(15, 23, 42, 0.07); --color-option-group-bg: #e2e8f0; --color-option-group-border: #94a3b8; --color-option-row-bg: #ffffff; --color-option-row-hover-bg: #f1f5f9; --color-option-row-border: #cbd5e1; --overlay-primary-04: color-mix(in srgb, var(--color-primary) 4%, transparent); --overlay-primary-06: color-mix(in srgb, var(--color-primary) 6%, transparent); --overlay-primary-08: color-mix(in srgb, var(--color-primary) 8%, transparent); --overlay-primary-10: color-mix(in srgb, var(--color-primary) 10%, transparent); --overlay-primary-14: color-mix(in srgb, var(--color-primary) 14%, transparent); --overlay-primary-20: color-mix(in srgb, var(--color-primary) 20%, transparent); --focus-ring-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 22%, transparent); --shadow-glow: var(--focus-ring-shadow); } body[data-color-scheme="slate"] { --color-primary: #334155; --color-primary-dark: #1e293b; --color-primary-light: #64748b; --color-accent: #475569; --color-accent-dark: #334155; --color-accent-light: #94a3b8; --color-bg: #f8fafc; --color-bg-elevated: #ffffff; --color-bg-card: #f1f5f9; --color-border: #e2e8f0; --color-border-light: #cbd5e1; --color-text: #0f172a; --color-text-muted: #64748b; --color-text-dim: #94a3b8; --color-input-bg: #ffffff; --color-input-border: #475569; --shadow-input: 0 1px 2px rgba(15, 23, 42, 0.06), 0 2px 5px rgba(15, 23, 42, 0.07); --color-option-group-bg: #dce3eb; --color-option-group-border: #64748b; --color-option-row-bg: #ffffff; --color-option-row-hover-bg: #f1f5f9; --color-option-row-border: #cbd5e1; --overlay-primary-04: color-mix(in srgb, var(--color-primary) 4%, transparent); --overlay-primary-06: color-mix(in srgb, var(--color-primary) 6%, transparent); --overlay-primary-08: color-mix(in srgb, var(--color-primary) 8%, transparent); --overlay-primary-10: color-mix(in srgb, var(--color-primary) 10%, transparent); --overlay-primary-14: color-mix(in srgb, var(--color-primary) 14%, transparent); --overlay-primary-20: color-mix(in srgb, var(--color-primary) 20%, transparent); --focus-ring-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 22%, transparent); --shadow-glow: var(--focus-ring-shadow); } body[data-color-scheme="ember"] { --color-primary: #9a3412; --color-primary-dark: #7c2d12; --color-primary-light: #c2410c; --color-accent: #b45309; --color-accent-dark: #92400e; --color-accent-light: #d97706; --color-bg: #faf8f5; --color-bg-elevated: #ffffff; --color-bg-card: #f5f0ea; --color-border: #e7e2dc; --color-border-light: #d6cfc5; --color-text: #1c1917; --color-text-muted: #78716c; --color-text-dim: #a8a29e; --color-input-bg: #ffffff; --color-input-border: #78716c; --shadow-input: 0 1px 2px rgba(28, 25, 23, 0.06), 0 2px 5px rgba(28, 25, 23, 0.07); --color-option-group-bg: #ebe4dc; --color-option-group-border: #a8a29e; --color-option-row-bg: #ffffff; --color-option-row-hover-bg: #faf8f5; --color-option-row-border: #d6cfc5; --overlay-primary-04: color-mix(in srgb, var(--color-primary) 4%, transparent); --overlay-primary-06: color-mix(in srgb, var(--color-primary) 6%, transparent); --overlay-primary-08: color-mix(in srgb, var(--color-primary) 8%, transparent); --overlay-primary-10: color-mix(in srgb, var(--color-primary) 10%, transparent); --overlay-primary-14: color-mix(in srgb, var(--color-primary) 14%, transparent); --overlay-primary-20: color-mix(in srgb, var(--color-primary) 20%, transparent); --focus-ring-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 22%, transparent); --shadow-glow: var(--focus-ring-shadow); } body[data-color-scheme="forest"] { --color-primary: #4d7c0f; --color-primary-dark: #3f6212; --color-primary-light: #65a30d; --color-accent: #527318; --color-accent-dark: #3f6212; --color-accent-light: #84cc16; --color-bg: #f7f9f4; --color-bg-elevated: #ffffff; --color-bg-card: #eef2e6; --color-border: #dfe6d5; --color-border-light: #c5cfba; --color-text: #1a2e05; --color-text-muted: #576448; --color-text-dim: #8a9a7e; --color-input-bg: #ffffff; --color-input-border: #576448; --shadow-input: 0 1px 2px rgba(26, 46, 5, 0.06), 0 2px 5px rgba(26, 46, 5, 0.07); --color-option-group-bg: #e2ead8; --color-option-group-border: #8a9a7e; --color-option-row-bg: #ffffff; --color-option-row-hover-bg: #f7f9f4; --color-option-row-border: #c5cfba; --overlay-primary-04: color-mix(in srgb, var(--color-primary) 4%, transparent); --overlay-primary-06: color-mix(in srgb, var(--color-primary) 6%, transparent); --overlay-primary-08: color-mix(in srgb, var(--color-primary) 8%, transparent); --overlay-primary-10: color-mix(in srgb, var(--color-primary) 10%, transparent); --overlay-primary-14: color-mix(in srgb, var(--color-primary) 14%, transparent); --overlay-primary-20: color-mix(in srgb, var(--color-primary) 20%, transparent); --focus-ring-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 22%, transparent); --shadow-glow: var(--focus-ring-shadow); } body[data-color-scheme="ink"] { --color-primary: #1e4976; --color-primary-dark: #163556; --color-primary-light: #3d6ea8; --color-accent: #234876; --color-accent-dark: #163556; --color-accent-light: #3b82f6; --color-bg: #f4f5f7; --color-bg-elevated: #ffffff; --color-bg-card: #eceef2; --color-border: #dde1e8; --color-border-light: #c5cbd6; --color-text: #0f172a; --color-text-muted: #64748b; --color-text-dim: #94a3b8; --color-input-bg: #ffffff; --color-input-border: #475569; --shadow-input: 0 1px 2px rgba(15, 23, 42, 0.06), 0 2px 5px rgba(15, 23, 42, 0.07); --color-option-group-bg: #dfe4ec; --color-option-group-border: #64748b; --color-option-row-bg: #ffffff; --color-option-row-hover-bg: #f4f5f7; --color-option-row-border: #cbd5e1; --overlay-primary-04: color-mix(in srgb, var(--color-primary) 4%, transparent); --overlay-primary-06: color-mix(in srgb, var(--color-primary) 6%, transparent); --overlay-primary-08: color-mix(in srgb, var(--color-primary) 8%, transparent); --overlay-primary-10: color-mix(in srgb, var(--color-primary) 10%, transparent); --overlay-primary-14: color-mix(in srgb, var(--color-primary) 14%, transparent); --overlay-primary-20: color-mix(in srgb, var(--color-primary) 20%, transparent); --focus-ring-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 22%, transparent); --shadow-glow: var(--focus-ring-shadow); } body[data-color-scheme="lagoon"] { --color-primary: #0891b2; --color-primary-dark: #0e7490; --color-primary-light: #22d3ee; --color-accent: #06b6d4; --color-accent-dark: #0891b2; --color-accent-light: #67e8f9; --color-bg: #ecfeff; --color-bg-elevated: #ffffff; --color-bg-card: #cffafe; --color-border: #a5f3fc; --color-border-light: #67e8f9; --color-text: #164e63; --color-text-muted: #155e75; --color-text-dim: #0e7490; --color-input-bg: #ffffff; --color-input-border: #0891b2; --shadow-input: 0 1px 2px rgba(8, 145, 178, 0.12), 0 3px 8px rgba(8, 145, 178, 0.12); --color-option-group-bg: #bae6fd; --color-option-group-border: #0891b2; --color-option-row-bg: #ffffff; --color-option-row-hover-bg: #ecfeff; --color-option-row-border: #67e8f9; --overlay-primary-04: color-mix(in srgb, var(--color-primary) 4%, transparent); --overlay-primary-06: color-mix(in srgb, var(--color-primary) 6%, transparent); --overlay-primary-08: color-mix(in srgb, var(--color-primary) 8%, transparent); --overlay-primary-10: color-mix(in srgb, var(--color-primary) 10%, transparent); --overlay-primary-14: color-mix(in srgb, var(--color-primary) 14%, transparent); --overlay-primary-20: color-mix(in srgb, var(--color-primary) 20%, transparent); --focus-ring-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 28%, transparent); --shadow-glow: var(--focus-ring-shadow); } body[data-color-scheme="flare"] { --color-primary: #ea580c; --color-primary-dark: #c2410c; --color-primary-light: #fb923c; --color-accent: #f97316; --color-accent-dark: #ea580c; --color-accent-light: #fdba74; --color-bg: #fff7ed; --color-bg-elevated: #ffffff; --color-bg-card: #ffedd5; --color-border: #fed7aa; --color-border-light: #fdba74; --color-text: #431407; --color-text-muted: #9a3412; --color-text-dim: #c2410c; --color-input-bg: #ffffff; --color-input-border: #ea580c; --shadow-input: 0 1px 2px rgba(234, 88, 12, 0.1), 0 3px 8px rgba(234, 88, 12, 0.1); --color-option-group-bg: #ffedd5; --color-option-group-border: #fb923c; --color-option-row-bg: #ffffff; --color-option-row-hover-bg: #fff7ed; --color-option-row-border: #fdba74; --overlay-primary-04: color-mix(in srgb, var(--color-primary) 4%, transparent); --overlay-primary-06: color-mix(in srgb, var(--color-primary) 6%, transparent); --overlay-primary-08: color-mix(in srgb, var(--color-primary) 8%, transparent); --overlay-primary-10: color-mix(in srgb, var(--color-primary) 10%, transparent); --overlay-primary-14: color-mix(in srgb, var(--color-primary) 14%, transparent); --overlay-primary-20: color-mix(in srgb, var(--color-primary) 20%, transparent); --focus-ring-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 28%, transparent); --shadow-glow: var(--focus-ring-shadow); } body[data-color-scheme="midnight"] { --color-primary: #38bdf8; --color-primary-dark: #0ea5e9; --color-primary-light: #7dd3fc; --color-accent: #22d3ee; --color-accent-dark: #06b6d4; --color-accent-light: #a5f5fc; --color-bg: #0f172a; --color-bg-elevated: #1e293b; --color-bg-card: #334155; --color-border: #475569; --color-border-light: #64748b; --color-text: #f1f5f9; --color-text-muted: #94a3b8; --color-text-dim: #64748b; --color-input-bg: #1e293b; --color-input-border: #94a3b8; --shadow-input: inset 0 1px 3px rgba(0, 0, 0, 0.35), 0 1px 0 rgba(255, 255, 255, 0.06); --color-option-group-bg: #1e293b; --color-option-group-border: #64748b; --color-option-row-bg: #334155; --color-option-row-hover-bg: #3f4f63; --color-option-row-border: #64748b; --overlay-primary-04: color-mix(in srgb, var(--color-primary) 6%, transparent); --overlay-primary-06: color-mix(in srgb, var(--color-primary) 10%, transparent); --overlay-primary-08: color-mix(in srgb, var(--color-primary) 14%, transparent); --overlay-primary-10: color-mix(in srgb, var(--color-primary) 18%, transparent); --overlay-primary-14: color-mix(in srgb, var(--color-primary) 22%, transparent); --overlay-primary-20: color-mix(in srgb, var(--color-primary) 28%, transparent); --focus-ring-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 35%, transparent); --shadow-glow: var(--focus-ring-shadow); } /* ============================================ Reset & Base ============================================ */ *, *::before, *::after { box-sizing: border-box; } html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { margin: 0; font-family: var(--font-sans); font-size: 1rem; line-height: 1.6; color: var(--color-text); background: var(--color-bg); min-height: 100vh; } h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--space-md); font-weight: 600; line-height: 1.3; color: var(--color-text); } h1 { font-size: 2rem; } h2 { font-size: 1.5rem; } h3 { font-size: 1.25rem; } h4 { font-size: 1.1rem; } p { margin: 0 0 var(--space-md); } a { color: var(--color-primary); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--color-primary-dark); } img { max-width: 100%; height: auto; display: block; } code { font-family: var(--font-mono); font-size: 0.875em; background: var(--color-bg-card); padding: 0.2em 0.4em; border-radius: var(--radius-sm); color: var(--color-primary); } /* ============================================ Navbar ============================================ */ .navbar { display: flex; align-items: center; justify-content: space-between; padding: var(--space-md) var(--space-xl); background: var(--color-bg-elevated); border-bottom: 1px solid var(--color-border); position: sticky; top: 0; z-index: 100; box-shadow: var(--shadow-sm); } .navbar-logo { font-size: 1.25rem; font-weight: 700; color: var(--color-text) !important; letter-spacing: -0.5px; display: flex; align-items: center; gap: var(--space-sm); } .navbar-logo-image { height: 32px; fill: var(--color-primary); } .navbar-links { display: flex; gap: var(--space-sm); } .nav-link { padding: var(--space-sm) var(--space-md); color: var(--color-text-muted); font-weight: 500; border-radius: var(--radius-md); transition: all var(--transition-fast); } .nav-link:hover { color: var(--color-text); background: var(--color-bg-card); } .nav-link.active { color: var(--color-primary); background: var(--overlay-primary-10); } /* ============================================ Main Content ============================================ */ .main-content { max-width: 1400px; margin: 0 auto; padding: var(--space-xl); } /* ============================================ Page Header ============================================ */ .page-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: var(--space-xl); gap: var(--space-lg); } .page-header h1 { margin-bottom: 0; } .page-header .header-content { flex: 1; } .page-header .header-actions { display: flex; gap: var(--space-sm); } .breadcrumb { font-size: 0.875rem; color: var(--color-text-muted); margin-bottom: var(--space-sm); } .breadcrumb a { color: var(--color-text-muted); } .breadcrumb a:hover { color: var(--color-primary); } .breadcrumb span { color: var(--color-text); } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Customer workspace nav (switch customer + section tabs) */ .customer-workspace-nav { display: flex; flex-direction: column; gap: var(--space-md); margin-bottom: var(--space-lg); padding: var(--space-md) var(--space-lg); background: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: var(--radius-md); } .customer-workspace-nav__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); } .customer-workspace-nav__row--switch { justify-content: space-between; } .customer-workspace-nav__pager { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); } .customer-workspace-nav__all { flex-shrink: 0; } .customer-workspace-nav__jump { flex: 1 1 12rem; min-width: 10rem; max-width: 22rem; } .customer-workspace-nav__select { width: 100%; margin-bottom: 0; } .customer-workspace-nav__edge { font-size: 0.875rem; color: var(--color-text-muted); padding: var(--space-xs) var(--space-sm); user-select: none; } .customer-workspace-nav__edge--disabled { opacity: 0.45; } .customer-workspace-nav__row--tabs { gap: var(--space-xs); border-top: 1px solid var(--color-border); padding-top: var(--space-md); margin-top: calc(var(--space-xs) * -1); } .customer-workspace-nav__tab { display: inline-flex; align-items: center; padding: var(--space-sm) var(--space-md); font-size: 0.875rem; font-weight: 500; color: var(--color-text-muted); text-decoration: none; border-radius: var(--radius-sm); border: 1px solid transparent; } .customer-workspace-nav__tab:hover { color: var(--color-primary); background: var(--overlay-primary-08); } .customer-workspace-nav__tab--current { display: inline-flex; align-items: center; padding: var(--space-sm) var(--space-md); font-size: 0.875rem; font-weight: 500; color: var(--color-text); text-decoration: none; border-radius: var(--radius-sm); border: 1px solid var(--color-border); background: var(--color-bg); cursor: default; } /* ============================================ Flash Messages ============================================ */ .flash { display: flex; align-items: center; justify-content: space-between; padding: var(--space-md) var(--space-lg); border-radius: var(--radius-md); margin-bottom: var(--space-lg); animation: slideIn 0.3s ease; } @keyframes slideIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .flash-notice { background: rgba(21, 128, 61, 0.1); border: 1px solid var(--color-success); color: var(--color-success); } .flash-alert { background: rgba(185, 28, 28, 0.08); border: 1px solid var(--color-danger); color: var(--color-danger); } .flash-close { background: none; border: none; color: inherit; font-size: 1.25rem; cursor: pointer; padding: 0; line-height: 1; opacity: 0.7; transition: opacity var(--transition-fast); } .flash-close:hover { opacity: 1; } /* ============================================ Cards ============================================ */ .card { background: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-lg); margin-bottom: var(--space-lg); box-shadow: var(--shadow-sm); } .card-title { margin-bottom: var(--space-lg); padding-bottom: var(--space-md); border-bottom: 1px solid var(--color-border); } /* Work estimate page */ .work-estimate-intro p + p { margin-top: var(--space-md); } .work-estimate-profile-card .card-title { margin-bottom: var(--space-md); } .work-estimate-profile-toggle { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-md); } .work-estimate-profile-tab { display: inline-flex; align-items: center; padding: var(--space-sm) var(--space-md); font-size: 0.875rem; font-weight: 500; font-family: inherit; color: var(--color-text-muted); background: transparent; border: 1px solid var(--color-border); border-radius: var(--radius-sm); cursor: pointer; } .work-estimate-profile-tab:hover { color: var(--color-primary); background: var(--overlay-primary-08); } .work-estimate-profile-tab--active { color: var(--color-text); background: var(--color-bg); border-color: var(--color-primary); box-shadow: var(--shadow-sm); } .work-estimate-profile-hint { margin: 0; color: var(--color-text-muted); font-size: 0.9375rem; } .work-estimate-document-meta { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); } .work-estimate-versioning p { margin: 0; } .work-estimate-cost-table th { font-weight: 500; } .work-estimate-cost-table thead th { text-transform: none; letter-spacing: normal; font-size: 0.875rem; } .work-estimate-disclaimer p { margin: 0; } .work-estimate-disclaimer .form-hint { margin-top: var(--space-md); } .work-estimate-sign-off--complete { border-color: var(--color-primary); } .work-estimate-sign-off .form-checkbox { display: flex; align-items: flex-start; gap: var(--space-sm); margin-bottom: var(--space-lg); cursor: pointer; } .work-estimate-sign-off .form-checkbox input { margin-top: 0.2rem; flex-shrink: 0; } .work-estimate-progress { margin-top: var(--space-lg); padding-top: var(--space-lg); border-top: 1px solid var(--color-border); } .work-estimate-progress-total { margin: 0 0 var(--space-md); } .work-estimate-time-log-list { margin: 0 0 var(--space-md); padding-left: 1.25rem; font-size: 0.9375rem; } .work-estimate-time-log-list li + li { margin-top: var(--space-xs); } .work-estimate-log-form-row { display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: flex-end; } .work-estimate-log-form-row .form-group { margin-bottom: 0; } .work-estimate-log-notes { flex: 1 1 12rem; } .work-estimate-log-submit { flex: 0 0 auto; } .work-estimate-rate-link { font-weight: 500; text-decoration: underline; text-underline-offset: 2px; } .work-estimate-summary-table tfoot th { font-weight: 600; border-top: 2px solid var(--color-border); } .work-estimate-total-row th, .work-estimate-total-row td { font-weight: 600; border-top: 2px solid var(--color-border); } .work-estimate-item-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-md); } .work-estimate-item-header .card-title { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .work-estimate-hours { flex-shrink: 0; font-variant-numeric: tabular-nums; } .work-estimate-item h3 { font-size: 1rem; margin: var(--space-lg) 0 var(--space-sm); } .work-estimate-item ul { margin: 0 0 var(--space-md); padding-left: 1.25rem; } .work-estimate-item li + li { margin-top: var(--space-xs); } .work-estimate-notes ul { margin: 0; padding-left: 1.25rem; } .work-estimate-notes li + li { margin-top: var(--space-sm); } .form-card { max-width: 600px; } /* ============================================ Buttons ============================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-lg); font-family: var(--font-sans); font-size: 0.9375rem; font-weight: 500; line-height: 1.5; text-align: center; border: 1px solid transparent; border-radius: var(--radius-md); cursor: pointer; transition: all var(--transition-fast); text-decoration: none; } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn-primary { background: var(--color-primary); color: white; border-color: var(--color-primary); } .btn-primary:hover:not(:disabled) { background: var(--color-primary-dark); border-color: var(--color-primary-dark); color: white; } .btn-accent { background: var(--color-primary); color: white; border-color: var(--color-primary); } .btn-accent:hover:not(:disabled) { background: var(--color-primary-dark); border-color: var(--color-primary-dark); color: white; } .btn-secondary { background: var(--color-bg-elevated); color: var(--color-text); border-color: var(--color-border); } .btn-secondary:hover:not(:disabled) { background: var(--color-bg-card); color: var(--color-text); border-color: var(--color-border-light); } .btn-outline { background: transparent; color: var(--color-text-muted); border-color: var(--color-border); } .btn-outline:hover:not(:disabled) { background: var(--color-bg-card); color: var(--color-text); border-color: var(--color-border-light); } .btn-danger { background: transparent; color: var(--color-danger); border-color: var(--color-danger); } .btn-danger:hover:not(:disabled) { background: var(--color-danger); color: white; } .btn-sm { padding: var(--space-xs) var(--space-md); font-size: 0.8125rem; } .btn-full { width: 100%; } .button-group { display: flex; gap: var(--space-sm); } /* ============================================ Tables ============================================ */ .table { width: 100%; border-collapse: collapse; } .table th, .table td { text-align: left; padding: var(--space-md); border-bottom: 1px solid var(--color-border); } .table th { color: var(--color-text-muted); font-weight: 500; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.5px; } .table-flush-bottom tbody tr:last-child td { border-bottom: none; } .table tbody tr:hover td { background: color-mix(in srgb, var(--color-text) 5%, transparent); } .table tbody tr.clickable-row { cursor: pointer; } .table tbody tr.clickable-row:hover td { background: var(--overlay-primary-06); } .table th.numeric, .table td.numeric { text-align: right; font-variant-numeric: tabular-nums; } .table td.watch { color: var(--color-near-alert-fg); font-weight: 600; } .table .actions { text-align: right; white-space: nowrap; } .table .actions .btn { margin-left: var(--space-xs); } .table .actions form.button_to { display: inline-block; margin-left: var(--space-xs); } .table .positive { color: var(--color-success); font-weight: 600; } .table .negative { color: var(--color-danger); font-weight: 600; } .table .danger { color: var(--color-danger); font-weight: 600; } .low-stock-row { background: rgba(185, 28, 28, 0.06); } /* ============================================ Forms ============================================ */ .form { display: flex; flex-direction: column; gap: var(--space-lg); } .form-group { display: flex; flex-direction: column; gap: var(--space-sm); } .form-label { font-weight: 500; color: var(--color-text); font-size: 0.9375rem; } .form-input { padding: var(--space-md); font-family: var(--font-sans); font-size: 1rem; color: var(--color-text); background: var(--color-input-bg); border: 1px solid var(--color-input-border); border-radius: var(--radius-md); box-shadow: var(--shadow-input); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .form-input:focus { outline: none; border-color: var(--color-primary); box-shadow: var(--shadow-input), var(--focus-ring-shadow); } .form-input::placeholder { color: var(--color-text-dim); } .form-input.file-input { padding: var(--space-sm); } .form-input.file-input::file-selector-button { padding: var(--space-sm) var(--space-md); margin-right: var(--space-md); font-family: var(--font-sans); font-size: 0.875rem; font-weight: 500; color: var(--color-text); background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-sm); cursor: pointer; transition: all var(--transition-fast); } .form-input.file-input::file-selector-button:hover { background: var(--color-border); } .form-hint { font-size: 0.8125rem; color: var(--color-text-muted); } .form-errors { background: rgba(185, 28, 28, 0.08); border: 1px solid var(--color-danger); border-radius: var(--radius-md); padding: var(--space-md); color: var(--color-danger); } .form-errors h4 { margin: 0 0 var(--space-sm); color: inherit; font-size: 0.9375rem; } .form-errors ul { margin: 0; padding-left: var(--space-lg); } .form-errors li { font-size: 0.875rem; } .form-actions { display: flex; gap: var(--space-md); padding-top: var(--space-md); } .account-card-heading { margin: 0 0 var(--space-xs); font-size: 1.25rem; font-weight: 600; } .account-card-lede { margin: 0; font-size: 0.875rem; color: var(--color-text-muted); line-height: 1.5; max-width: 36rem; } fieldset.form-option-group { margin: 0; min-width: 0; padding: var(--space-lg); border: 1px solid var(--color-option-group-border); border-radius: var(--radius-md); background: var(--color-option-group-bg); } .theme-picker { display: flex; flex-direction: column; gap: var(--space-sm); } .theme-option { display: flex; align-items: flex-start; gap: var(--space-md); margin: 0; padding: var(--space-md) var(--space-lg); border: 1px solid var(--color-option-row-border); border-radius: var(--radius-md); background: var(--color-option-row-bg); box-shadow: var(--shadow-input); cursor: pointer; transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast); } .theme-option:hover { border-color: var(--color-input-border); background: var(--color-option-row-hover-bg); } .theme-option:has(.theme-option-input:checked) { border-color: var(--color-primary); background: var(--overlay-primary-04); box-shadow: 0 0 0 1px var(--color-primary); } .theme-option:has(.theme-option-input:focus-visible) { box-shadow: var(--focus-ring-shadow); } .theme-option-input { flex-shrink: 0; margin-top: 0.2rem; width: 1.125rem; height: 1.125rem; accent-color: var(--color-primary); cursor: pointer; } .theme-option-body { display: flex; align-items: flex-start; gap: var(--space-md); flex: 1; min-width: 0; } .theme-option-swatches { display: flex; gap: 4px; flex-shrink: 0; padding-top: 2px; } .theme-swatch { display: block; width: 1.5rem; height: 1.5rem; border-radius: var(--radius-sm); border: 1px solid var(--color-option-row-border); box-shadow: var(--shadow-sm); } .theme-option-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .theme-option-label { font-weight: 600; font-size: 0.9375rem; color: var(--color-text); } .theme-option-hint { font-size: 0.8125rem; color: var(--color-text-muted); line-height: 1.45; } .appearance-form-actions { padding-top: var(--space-sm); } .current-image { margin-bottom: var(--space-md); } .preview-image { max-width: 200px; border-radius: var(--radius-md); border: 1px solid var(--color-border); } .image-hint { margin-top: var(--space-sm); font-size: 0.8125rem; color: var(--color-text-muted); } .current-accessory { display: flex; gap: var(--space-lg); padding: var(--space-md); background: var(--color-bg); border-radius: var(--radius-md); margin-bottom: var(--space-md); } .accessory-preview { width: 80px; height: 80px; border-radius: var(--radius-md); overflow: hidden; background: var(--color-bg-card); display: flex; align-items: center; justify-content: center; } .accessory-preview img { width: 100%; height: 100%; object-fit: cover; } .accessory-details { flex: 1; } .accessory-details h3 { margin-bottom: var(--space-xs); } .accessory-details p { margin: 0; color: var(--color-text-muted); font-size: 0.875rem; } /* ============================================ Empty State ============================================ */ .empty-state { text-align: center; padding: var(--space-2xl); background: var(--color-bg-card); border: 1px dashed var(--color-border); border-radius: var(--radius-lg); } .empty-state.compact { padding: var(--space-lg); } .empty-state-icon { font-size: 4rem; margin-bottom: var(--space-md); opacity: 0.8; } .empty-state h3 { margin-bottom: var(--space-sm); } .empty-state p { color: var(--color-text-muted); margin-bottom: var(--space-lg); } .empty-message { text-align: center; padding: var(--space-lg); color: var(--color-text-muted); } /* ============================================ Accessories Grid ============================================ */ .accessories-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-lg); } .accessory-card { background: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; transition: all var(--transition-base); } .accessory-card:hover { border-color: var(--color-border-light); box-shadow: var(--shadow-md); } .accessory-image { height: 160px; background: var(--color-bg-card); display: flex; align-items: center; justify-content: center; overflow: hidden; } .accessory-image img { width: 100%; height: 100%; object-fit: cover; } .accessory-image .no-image { font-size: 4rem; opacity: 0.5; } .accessory-info { padding: var(--space-md); } .accessory-info h3 { margin-bottom: var(--space-sm); font-size: 1.125rem; } .accessory-info .barcode { font-size: 0.875rem; color: var(--color-text-muted); margin-bottom: var(--space-xs); } .accessory-info .alert-level { font-size: 0.875rem; color: var(--color-text-muted); margin-bottom: 0; } .accessory-actions { padding: var(--space-md); padding-top: 0; display: flex; gap: var(--space-sm); } /* ============================================ Stock Grid ============================================ */ .stock-index-filter, .accessories-index-filter, .customers-index-filter { margin-bottom: var(--space-lg); } .table.customers-index-table th, .table.customers-index-table td { text-align: center; font-variant-numeric: tabular-nums; } .table.customers-index-table th:first-child, .table.customers-index-table td:first-child { text-align: left; } .list-filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); padding: var(--space-md) 0 var(--space-lg); } .list-filter-label { flex-shrink: 0; font-weight: 600; font-size: 0.875rem; color: var(--color-text-muted); letter-spacing: 0.02em; } .stock-filter-input { flex: 1 1 12rem; min-width: 12rem; max-width: min(28rem, 100%); } .stock-filter-empty { margin: 0 0 var(--space-md); } .stock-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-lg); } .stock-card { background: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; transition: all var(--transition-base); } .stock-card:hover { border-color: var(--color-border-light); } .stock-card.low-stock { border-color: rgba(185, 28, 28, 0.4); background: rgba(185, 28, 28, 0.05); } .stock-card.near-stock { border-color: rgba(202, 138, 4, 0.5); background: var(--color-near-alert-surface); } .stock-card.near-stock:hover { border-color: #eab308; } .stock-image { height: 140px; background: var(--color-bg-card); display: flex; align-items: center; justify-content: center; overflow: hidden; } .stock-image img { width: 100%; height: 100%; object-fit: cover; } .stock-image .no-image { font-size: 3rem; opacity: 0.5; } .stock-info { padding: var(--space-md); } .stock-info h3 { margin-bottom: var(--space-sm); font-size: 1rem; } .stock-quantity { display: flex; align-items: baseline; gap: var(--space-sm); margin-bottom: var(--space-sm); } .stock-quantity .quantity { font-size: 2rem; font-weight: 700; color: var(--color-primary); line-height: 1; } .stock-quantity .quantity.danger { color: var(--color-danger); } .stock-quantity .quantity.near-alert { color: var(--color-near-alert-border); } .stock-quantity .label { font-size: 0.875rem; color: var(--color-text-muted); } .low-stock-badge { font-size: 0.75rem; color: var(--color-danger); background: rgba(185, 28, 28, 0.1); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-sm); display: inline-block; } .near-alert-badge { font-size: 0.75rem; color: var(--color-near-alert-fg); font-weight: 600; background: var(--color-near-alert-surface-strong); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-sm); display: inline-block; } .stock-actions { padding: var(--space-md); padding-top: 0; display: flex; gap: var(--space-xs); flex-wrap: wrap; } /* ============================================ Stock Summary ============================================ */ .stock-summary { margin-bottom: var(--space-lg); } .summary-item { display: flex; gap: var(--space-lg); align-items: flex-start; } .summary-image { width: 120px; height: 120px; border-radius: var(--radius-md); overflow: hidden; background: var(--color-bg-card); flex-shrink: 0; } .summary-image img { width: 100%; height: 100%; object-fit: cover; } .summary-image .no-image { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 3rem; opacity: 0.5; } .summary-details { flex: 1; } .summary-details h2 { margin-bottom: var(--space-md); } .summary-stats { display: flex; gap: var(--space-xl); margin-bottom: var(--space-md); } .stat { display: flex; flex-direction: column; } .stat-value { font-size: 1.5rem; font-weight: 700; color: var(--color-primary); line-height: 1; } .stat-value.danger { color: var(--color-danger); } .stat-label { font-size: 0.75rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-top: var(--space-xs); } .page-actions { margin-top: var(--space-lg); } /* ============================================ Badges ============================================ */ .badge { display: inline-block; padding: var(--space-xs) var(--space-sm); font-size: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; border-radius: var(--radius-sm); } .badge-initial { background: rgba(59, 130, 246, 0.2); color: var(--color-info); } .badge-addition { background: rgba(21, 128, 61, 0.12); color: var(--color-success); } .badge-removal { background: rgba(180, 83, 9, 0.12); color: var(--color-warning); } .badge-checkout { background: rgba(185, 28, 28, 0.1); color: var(--color-danger); } .badge-manual { background: rgba(30, 64, 175, 0.12); color: var(--color-info); } /* ============================================ Checkout ============================================ */ .checkout-container { display: grid; grid-template-columns: 1fr 360px; gap: var(--space-xl); align-items: start; } .checkout-main h2 { margin-bottom: var(--space-sm); } .checkout-hint { color: var(--color-text-muted); margin-bottom: var(--space-lg); } .checkout-stock-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-md); } .checkout-item { background: var(--color-bg-elevated); border: 2px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; cursor: pointer; transition: all var(--transition-fast); } .checkout-item:hover { border-color: var(--color-primary); transform: scale(1.02); } .checkout-item.added { border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--overlay-primary-20); } .checkout-item-image { height: 100px; background: var(--color-bg-card); display: flex; align-items: center; justify-content: center; overflow: hidden; } .checkout-item-image img { width: 100%; height: 100%; object-fit: cover; } .checkout-item-image .no-image { font-size: 2.5rem; opacity: 0.5; } .checkout-item-info { padding: var(--space-sm); } .checkout-item-info h4 { font-size: 0.875rem; margin-bottom: var(--space-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .checkout-item-info .available { font-size: 0.75rem; color: var(--color-text-muted); margin: 0; } .checkout-sidebar { position: sticky; top: calc(60px + var(--space-xl)); } .checkout-cart { background: var(--color-bg-elevated); } .checkout-cart h3 { margin-bottom: var(--space-md); padding-bottom: var(--space-md); border-bottom: 1px solid var(--color-border); } .cart-items { min-height: 100px; margin-bottom: var(--space-lg); } .empty-cart { text-align: center; color: var(--color-text-muted); padding: var(--space-lg) 0; font-size: 0.875rem; } .cart-item { display: flex; align-items: center; justify-content: space-between; padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-border); } .cart-item:last-child { border-bottom: none; } .cart-item-name { font-size: 0.9375rem; font-weight: 500; } .cart-item-controls { display: flex; align-items: center; gap: var(--space-sm); } .qty-btn { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-sm); color: var(--color-text); font-size: 1rem; cursor: pointer; transition: all var(--transition-fast); touch-action: manipulation; user-select: none; } .qty-btn:hover:not(:disabled) { background: var(--color-border); } .qty-btn:disabled { opacity: 0.3; cursor: not-allowed; } .cart-item-qty-input { box-sizing: border-box; width: 3.25rem; height: 28px; margin: 0; padding: 0 4px; text-align: center; font-weight: 600; font-size: 0.9375rem; font-variant-numeric: tabular-nums; color: var(--color-text); background: var(--color-input-bg); border: 1px solid var(--color-input-border); border-radius: var(--radius-sm); box-shadow: var(--shadow-input); } .cart-item-qty-input:focus { outline: none; border-color: var(--color-primary); box-shadow: var(--shadow-input), var(--focus-ring-shadow); } /* Hide native steppers; +/- .qty-btn controls quantity (display:none on spinners can glitch Chrome). */ .cart-item-qty-input::-webkit-outer-spin-button, .cart-item-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .cart-item-qty-input[type="number"] { -moz-appearance: textfield; appearance: textfield; } .remove-btn { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--color-danger); border-radius: var(--radius-sm); color: var(--color-danger); font-size: 1.125rem; cursor: pointer; margin-left: var(--space-sm); transition: all var(--transition-fast); } .remove-btn:hover { background: var(--color-danger); color: white; } .cart-total { display: flex; align-items: center; justify-content: space-between; padding: var(--space-md); background: var(--color-bg); border-radius: var(--radius-md); margin-bottom: var(--space-md); font-weight: 500; } .cart-total strong { font-size: 1.25rem; color: var(--color-primary); } .cart-actions { display: flex; flex-direction: column; gap: var(--space-sm); } /* ============================================ Customer restock ============================================ */ .restock-page .restock-intro { margin: 0 0 var(--space-md); font-size: 0.9375rem; } .restock-grid-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: var(--space-md); } .restock-grid { width: 100%; min-width: 34rem; font-size: 0.9375rem; } .restock-grid-head { display: grid; grid-template-columns: 4rem minmax(8rem, 1fr) 5rem 5rem 9.5rem 6.5rem; align-items: center; border-bottom: 1px solid var(--color-border); } .restock-grid-h { text-align: left; font-weight: 600; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-text-muted); padding: var(--space-sm) var(--space-md); white-space: nowrap; } .restock-h-current, .restock-h-total, .restock-h-add { text-align: center; } .restock-h-status { text-align: right; } .restock-grid-body { display: block; } .restock-row { display: grid; grid-template-columns: 4rem minmax(8rem, 1fr) 5rem 5rem 9.5rem 6.5rem; align-items: center; border-bottom: 1px solid var(--color-border); } .restock-stock-digits { display: contents; } .restock-grid-body .restock-row:hover { background: var(--overlay-primary-04); } .restock-grid-body .restock-row--highlight { background: var(--overlay-primary-10); } .restock-grid-body .restock-row--highlight:hover { background: var(--overlay-primary-14); } .manual-adjust-subhead { margin-top: var(--space-sm); margin-bottom: 0; } .manual-adjustment-page .restock-grid-head, .manual-adjustment-page .restock-row { grid-template-columns: 4rem minmax(8rem, 1fr) 5rem 10rem 6.5rem; } .manual-adjust-h-target { text-align: center; } .manual-adjust-target-input--wide { width: 4.25rem; } .restock-cell { padding: var(--space-sm) var(--space-md); } .restock-cell-current, .restock-cell-total { text-align: center; font-variant-numeric: tabular-nums; } .restock-cell-add { display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); text-align: center; } .restock-cell-status { text-align: right; font-size: 0.8125rem; } .restock-metric-label, .restock-add-heading, .restock-status-label { display: none; } .restock-cell-name { font-weight: 500; max-width: 14rem; word-break: break-word; } .restock-thumb { width: 48px; height: 48px; object-fit: cover; border-radius: var(--radius-sm); display: block; background: var(--color-bg-card); } .restock-thumb--empty { display: flex; align-items: center; justify-content: center; font-size: 1.25rem; opacity: 0.55; border: 1px dashed var(--color-border); } .restock-qty-controls { display: flex; align-items: center; gap: var(--space-sm); justify-content: center; } .restock-add-input { box-sizing: border-box; width: 3.25rem; height: 28px; margin: 0; padding: 0 4px; text-align: center; font-weight: 600; font-size: 0.9375rem; font-variant-numeric: tabular-nums; color: var(--color-text); background: var(--color-input-bg); border: 1px solid var(--color-input-border); border-radius: var(--radius-sm); box-shadow: var(--shadow-input); } .restock-add-input:focus { outline: none; border-color: var(--color-primary); box-shadow: var(--shadow-input), var(--focus-ring-shadow); } .restock-add-input::-webkit-outer-spin-button, .restock-add-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .restock-add-input[type="number"] { -moz-appearance: textfield; appearance: textfield; } .restock-status { display: inline-block; min-height: 1.25em; } .restock-status--saving { color: var(--color-text-muted); } .restock-status--pending { color: var(--color-text-muted); } .restock-status--saved { color: var(--color-primary); font-weight: 600; } .restock-status--error { color: var(--color-danger); font-weight: 500; } @media (max-width: 768px) { .restock-grid-wrap { overflow-x: visible; padding: var(--space-md) var(--space-sm); } .restock-grid { min-width: 0; } .restock-grid-head { display: none; } .restock-grid-body { display: flex; flex-direction: column; gap: var(--space-md); } .restock-grid-body .restock-row { grid-template-columns: auto 1fr; grid-template-rows: auto auto auto auto; gap: var(--space-md); align-items: stretch; padding: var(--space-lg); margin: 0; border: 1px solid var(--color-border); border-radius: var(--radius-md); border-bottom: 1px solid var(--color-border); background: var(--color-bg-elevated); box-shadow: var(--shadow-sm); } .restock-stock-digits { display: flex; flex-direction: row; align-items: stretch; justify-content: center; gap: var(--space-sm); padding: var(--space-md); background: var(--color-bg); border-radius: var(--radius-md); border: 1px solid var(--color-border); } .restock-metric-label { display: block; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); } .restock-add-heading { display: block; font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); margin-bottom: var(--space-xs); } .restock-status-label { display: block; flex-shrink: 0; font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); } .restock-cell-name { grid-column: 1 / -1; grid-row: 1; max-width: none; padding: 0 0 var(--space-md); margin: 0; font-size: 1.125rem; font-weight: 600; line-height: 1.35; border-bottom: 1px solid var(--color-border); } .restock-cell-image { grid-column: 1; grid-row: 2; align-self: center; padding: 0 var(--space-sm) 0 0; } .restock-stock-digits { grid-column: 2; grid-row: 2; align-self: stretch; } .restock-cell-current, .restock-cell-total { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-xs); padding: var(--space-xs) var(--space-sm); text-align: center; font-size: 1.125rem; font-weight: 700; font-variant-numeric: tabular-nums; } .restock-cell-add { grid-column: 1 / -1; grid-row: 3; display: flex; flex-direction: column; align-items: stretch; padding: var(--space-md) 0 0; margin: 0; border-top: 1px solid var(--color-border); text-align: left; } .restock-qty-controls { justify-content: center; gap: var(--space-md); width: 100%; max-width: 20rem; margin: 0 auto; touch-action: manipulation; } .restock-row .restock-qty-btn { width: 44px; height: 44px; min-width: 44px; min-height: 44px; font-size: 1.25rem; border-radius: var(--radius-md); } .restock-add-input { width: 4rem; height: 44px; min-height: 44px; font-size: 1.0625rem; border-radius: var(--radius-md); } .restock-cell-status { grid-column: 1 / -1; grid-row: 4; display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-md); padding: var(--space-md) 0 0; margin: 0; border-top: 1px solid var(--color-border); text-align: left; font-size: 0.9375rem; } .restock-cell-status .restock-status { flex: 1; text-align: right; font-weight: 500; min-height: 1.35em; } } /* UA uses dialog[open]{display:block} which beats .class{display:flex}; force flex so inner scroll keeps a fixed-size modal */ dialog.restock-dialog { box-sizing: border-box; width: 100%; max-width: min(34rem, 94vw); margin: auto; padding: var(--space-lg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden; } dialog.restock-dialog[open] { display: flex; flex-direction: column; /* Fixed chrome height: does not grow/shrink with match count (list scrolls inside) */ height: min(34rem, 85vh); min-height: min(34rem, 85vh); max-height: 85vh; } .restock-dialog::backdrop { background: rgba(15, 23, 42, 0.45); } .restock-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-sm); flex-shrink: 0; } .restock-dialog-head h2 { margin: 0; font-size: 1.125rem; } .restock-dialog-hint { flex-shrink: 0; margin: 0 0 var(--space-md); font-size: 0.875rem; color: var(--color-text-muted); } .restock-filter-input { flex-shrink: 0; margin-bottom: var(--space-sm); } .restock-picker-toolbar { flex-shrink: 0; display: flex; align-items: center; justify-content: flex-end; margin-bottom: var(--space-sm); } .restock-picker-count { font-size: 0.8125rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--color-text-muted); } .restock-picker-table-wrap { flex: 1; min-height: 0; border: 1px solid var(--color-border); border-radius: var(--radius-md); /* Always reserve scrollbar space; classic scrollbars stay visible where the OS allows */ overflow: scroll; scrollbar-gutter: stable both-edges; } .restock-picker-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; } .restock-picker-table thead th { text-align: left; font-weight: 600; font-size: 0.8125rem; color: var(--color-text-muted); padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--color-border); background: var(--color-bg); position: sticky; top: 0; z-index: 1; } .restock-picker-row { cursor: pointer; transition: background var(--transition-fast); } .restock-picker-row:hover, .restock-picker-row:focus { outline: none; background: var(--overlay-primary-08); } .restock-picker-empty { margin: var(--space-md) 0 0; font-size: 0.875rem; } /* ============================================ Dashboard ============================================ */ .dashboard { } .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-lg); margin-bottom: var(--space-xl); } .stat-card { background: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-lg); display: flex; align-items: center; gap: var(--space-md); position: relative; overflow: hidden; transition: all var(--transition-base); } .stat-card:hover { border-color: var(--color-border-light); box-shadow: var(--shadow-md); } .stat-card.alert-card { border-color: rgba(185, 28, 28, 0.4); background: rgba(185, 28, 28, 0.06); } .stat-card .stat-icon { font-size: 2.5rem; } .stat-card .stat-content { flex: 1; } .stat-card .stat-number { display: block; font-size: 2rem; font-weight: 700; color: var(--color-text); line-height: 1; } .stat-card .stat-label { font-size: 0.875rem; color: var(--color-text-muted); margin-top: var(--space-xs); } .stat-link { position: absolute; inset: 0; z-index: 1; left: 20px; } .quick-actions { margin-top: var(--space-xl); } .quick-actions h2 { margin-bottom: var(--space-lg); } .action-buttons { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-md); } .action-card { display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); padding: var(--space-lg); background: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: var(--radius-md); text-align: center; transition: all var(--transition-base); color: var(--color-text); } .action-card:hover { border-color: var(--color-primary); background: var(--overlay-primary-06); color: var(--color-text); box-shadow: var(--shadow-sm); } .action-card .action-icon { font-size: 2rem; } .action-card .action-text { font-size: 0.9375rem; font-weight: 500; } /* ============================================ Responsive ============================================ */ @media (max-width: 768px) { .navbar { padding: var(--space-sm) var(--space-md); } .navbar-links { gap: 0; } .nav-link { padding: var(--space-sm); font-size: 0.875rem; } .main-content { padding: var(--space-md); } .customer-workspace-nav__row--switch { flex-direction: column; align-items: stretch; } .customer-workspace-nav__jump { max-width: none; } .customer-workspace-nav__pager { justify-content: center; } .page-header { flex-direction: column; gap: var(--space-md); } .page-header .header-actions { width: 100%; } .page-header .header-actions .btn { flex: 1; } .checkout-container { grid-template-columns: 1fr; } .checkout-sidebar { position: static; } .form-card { max-width: none; } .summary-item { flex-direction: column; } .summary-image { width: 100%; height: 160px; } .summary-stats { flex-wrap: wrap; gap: var(--space-lg); } .table { display: block; overflow-x: auto; } .navbar-user { flex-direction: column; gap: var(--space-xs); } } /* ============================================ Authentication Pages ============================================ */ .auth-container { min-height: calc(100vh - 80px); display: flex; align-items: center; justify-content: center; padding: var(--space-lg); } .auth-card { width: 100%; max-width: 400px; background: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-xl); box-shadow: var(--shadow-md); } .auth-header { text-align: center; margin-bottom: var(--space-xl); } .auth-header h1 { font-size: 1.75rem; margin-bottom: var(--space-sm); } .auth-header p { color: var(--color-text-muted); margin: 0; } .auth-links { text-align: center; margin-top: var(--space-lg); padding-top: var(--space-lg); border-top: 1px solid var(--color-border); } .auth-links a { font-size: 0.875rem; color: var(--color-text-muted); } .auth-links a:hover { color: var(--color-primary); } .welcome-message { background: var(--color-bg); border-radius: var(--radius-md); padding: var(--space-md); margin-bottom: var(--space-lg); text-align: center; } .welcome-message p { margin: 0; color: var(--color-text-muted); } .welcome-message p:first-child { margin-bottom: var(--space-xs); color: var(--color-text); } /* ============================================ Navbar User Section ============================================ */ .navbar-user { display: flex; align-items: center; gap: var(--space-md); } .user-name { color: var(--color-text-muted); font-size: 0.875rem; } /* ============================================ Additional Badges ============================================ */ .badge-admin { background: rgba(109, 40, 217, 0.12); color: #6d28d9; } .badge-basic { background: rgba(29, 78, 216, 0.1); color: var(--color-info); } .badge-pending { background: rgba(180, 83, 9, 0.12); color: var(--color-warning); } .badge-active { background: rgba(21, 128, 61, 0.12); color: var(--color-success); } .badge-info { background: rgba(29, 78, 216, 0.1); color: var(--color-info); } .badge-disabled { background: rgba(185, 28, 28, 0.12); color: var(--color-danger); } /* ============================================ Form Hint Box ============================================ */ .form-hint-box { margin-top: var(--space-lg); padding: var(--space-md); background: rgba(29, 78, 216, 0.06); border: 1px solid rgba(29, 78, 216, 0.2); border-radius: var(--radius-md); max-width: 600px; } .form-hint-box p { margin: 0; font-size: 0.875rem; color: var(--color-text-muted); } .form-static { padding: var(--space-md); background: var(--color-bg); border-radius: var(--radius-md); color: var(--color-text); margin: 0; } /* ============================================ User Dropdown ============================================ */ .user-dropdown { position: relative; } .user-dropdown-trigger { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text); font-family: var(--font-sans); font-size: 0.875rem; cursor: pointer; transition: all var(--transition-fast); } .user-dropdown-trigger:hover { background: var(--color-bg-card); border-color: var(--color-border-light); } .user-dropdown-trigger .user-name { color: var(--color-text); } .dropdown-arrow { font-size: 0.625rem; color: var(--color-text-muted); transition: transform var(--transition-fast); } .user-dropdown-menu.open + .user-dropdown-trigger .dropdown-arrow, .user-dropdown-trigger:focus .dropdown-arrow { transform: rotate(180deg); } .user-dropdown-menu { position: absolute; top: calc(100% + var(--space-xs)); right: 0; min-width: 180px; background: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all var(--transition-fast); z-index: 1000; overflow: hidden; } .user-dropdown-menu.open { opacity: 1; visibility: visible; transform: translateY(0); } .dropdown-item { display: block; width: 100%; padding: var(--space-sm) var(--space-md); color: var(--color-text); text-decoration: none; font-size: 0.875rem; text-align: left; background: none; border: none; cursor: pointer; transition: background var(--transition-fast); } .dropdown-item:hover { background: var(--color-bg-card); color: var(--color-text); } .dropdown-item-danger { color: var(--color-danger); } .dropdown-item-danger:hover { background: rgba(185, 28, 28, 0.08); color: var(--color-danger); } /* TOTP setup */ .page-subtitle { margin: 0; color: var(--color-text-muted); font-size: 0.95rem; max-width: 40rem; } .totp-steps { margin: 0 0 var(--space-lg); padding-left: 1.25rem; color: var(--color-text); line-height: 1.6; } .totp-steps li { margin-bottom: var(--space-sm); } .totp-qr-wrap { display: inline-block; margin: var(--space-md) 0 var(--space-lg); padding: var(--space-md); background: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: var(--radius-md); } .totp-qr-wrap svg { display: block; max-width: 100%; height: auto; } .totp-secret { font-family: var(--font-mono); font-size: 0.9rem; letter-spacing: 0.04em; word-break: break-all; } /* ============================================ Report template editor (receipt layout) ============================================ */ .report-config-layout { max-width: min(100%, 76rem); margin: 0 auto var(--space-xl); } .report-config-sheet.form { background: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: var(--space-xl); } .report-config-section { padding-top: var(--space-xl); } .report-config-section:first-of-type { padding-top: 0; } .report-config-section--meta { padding-bottom: var(--space-xl); margin-bottom: var(--space-lg); border-bottom: 2px solid var(--color-border); } .report-config-section-title { font-size: 1.125rem; font-weight: 600; margin: 0 0 var(--space-xs); color: var(--color-text); letter-spacing: -0.02em; } .report-config-section-lede { font-size: 0.875rem; color: var(--color-text-muted); margin: 0 0 var(--space-lg); line-height: 1.55; max-width: min(56rem, 100%); } .report-config-meta-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-lg); align-items: end; } .report-config-meta-cell .form-label { margin-bottom: var(--space-sm); } .report-config-panel { padding: var(--space-lg); background: var(--color-bg); border-radius: var(--radius-md); border: 1px solid var(--color-border); } .report-config-panel > .report-config-section-title:first-child { margin-top: 0; } .report-config-header-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-xl); align-items: start; } .report-config-header-row .form-input { width: 100%; } .report-config-details-grid { display: flex; flex-direction: column; gap: var(--space-sm); margin-bottom: var(--space-md); } .report-config-detail-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: var(--space-sm); align-items: center; } .report-config-billing-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; align-items: start; } @media (min-width: 769px) { .report-config-billing-column:first-child { padding-right: var(--space-xl); border-right: 1px solid var(--color-border); } .report-config-billing-column:last-child { padding-left: var(--space-xl); } } .report-config-column-title { font-size: 0.9375rem; font-weight: 600; margin: 0 0 var(--space-md); padding-bottom: var(--space-sm); border-bottom: 1px solid var(--color-border); color: var(--color-text); } .report-config-label-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm) var(--space-md); margin-bottom: var(--space-sm); } .report-config-label-row .form-label { margin-bottom: 0; } .report-config-include-flag { display: inline-flex; align-items: center; gap: var(--space-xs); font-size: 0.8125rem; font-weight: 500; color: var(--color-text-muted); cursor: pointer; user-select: none; white-space: nowrap; } .report-config-include-flag:hover .report-config-include-flag-text { color: var(--color-text); } .report-config-include-checkbox { width: 1rem; height: 1rem; accent-color: var(--color-primary); cursor: pointer; } .report-config-table-scroll { overflow-x: auto; margin-bottom: var(--space-md); } .report-config-line-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .report-config-line-table th, .report-config-line-table td { padding: var(--space-xs); vertical-align: middle; border-bottom: 1px solid var(--color-border); } .report-config-line-table thead th { border-bottom: 2px solid var(--color-border); } .report-config-header-input, .report-config-cell-input { width: 100%; margin-bottom: 0; font-size: 0.875rem; } .report-config-line-actions-head { width: 5.5rem; } .report-config-line-actions { white-space: nowrap; } .report-config-actions { margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-border); } .report-config-actions--split { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); } .report-config-actions-secondary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); } .report-config-actions-secondary .button_to { display: inline-block; } .report-config-actions-primary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); margin-left: auto; } @media (max-width: 768px) { .report-config-meta-row, .report-config-header-row, .report-config-billing-grid { grid-template-columns: 1fr; gap: 0; } .report-config-billing-column:first-child { padding-right: 0; border-right: none; padding-bottom: var(--space-lg); margin-bottom: var(--space-lg); border-bottom: 1px solid var(--color-border); } .report-config-billing-column:last-child { padding-left: 0; } .report-config-detail-row { grid-template-columns: 1fr; } }