/* Ted's General Store — Grading Dashboard Touchscreen-optimized dark theme. Brand tokens per BRAND_GUIDELINESgrading.md. */ @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap'); /* ================================================================ TED'S × SnowUI — DESIGN TOKENS (single source of truth) Adapted from the SnowUI Figma kit (file Xmy2Y6hI0OUBc31DvWtLPD). Reference these variables everywhere — never hardcode hex in components or templates. Dark is the default theme; the [data-theme="light"] block below overrides the semantic surface / text / border tokens only. ================================================================ */ :root { /* ---- Brand accent (Ted's gold — preserved, not from SnowUI) ---- */ --gold: #f0b90b; --gold-ink: #f0b90b; /* gold used as TEXT; darker in light theme for legibility */ --gold-soft: rgba(240, 185, 11, 0.12); /* tinted backgrounds */ --gold-softer: rgba(240, 185, 11, 0.08); /* selected/hover wash */ /* ---- Status / data palette (SnowUI "Secondary") ---- */ --green: #71dd8c; --red: #ff4747; --blue: #7dbbff; --purple: #b899eb; --indigo: #adadfb; --cyan: #a0bce8; --mint: #6be6d3; --yellow: #ffcc00; --orange: #ffb55b; /* 14% soft tints for badges / alerts (pair with the solid token) */ --green-soft: rgba(113, 221, 140, 0.14); --red-soft: rgba(255, 71, 71, 0.14); --blue-soft: rgba(125, 187, 255, 0.14); --purple-soft: rgba(184, 153, 235, 0.14); /* ---- Spacing scale (SnowUI, 4px base) ---- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 40px; --space-9: 48px; --space-10: 80px; /* ---- Radius scale (SnowUI Radius/8 base) ---- */ --radius-sm: 4px; --radius: 8px; --radius-md: 12px; --radius-lg: 20px; --radius-xl: 24px; --radius-pill: 999px; /* ---- Type scale — size / line-height (DM Sans; SnowUI weights 400/600) ---- */ --fs-xs: 12px; --lh-xs: 16px; --fs-sm: 14px; --lh-sm: 20px; --fs-base: 16px; --lh-base: 24px; --fs-lg: 18px; --lh-lg: 28px; --fs-xl: 24px; --lh-xl: 32px; --fs-2xl: 32px; --lh-2xl: 40px; --fs-3xl: 48px; --lh-3xl: 56px; --fs-4xl: 64px; --lh-4xl: 72px; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* ---- Elevation (Snow soft, diffuse shadows) + glass blur ---- */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30); --shadow: 0 1px 2px rgba(0, 0, 0, 0.34), 0 14px 34px -12px rgba(0, 0, 0, 0.55); --shadow-lg: 0 1px 2px rgba(0, 0, 0, 0.34), 0 28px 56px -18px rgba(0, 0, 0, 0.60); --blur: 40px; /* ---- Semantic surfaces — DARK (neutral charcoal, layered) ---- */ --bg: #161617; /* app shell / canvas */ --bg-card: #212123; /* elevated card / panel */ --bg-hover: #2c2c2e; /* hover / active surface */ --bg-input: #1b1b1c; /* inputs, inset wells */ --bg-sidebar: #1c1c1e; /* nav rail — its own layer */ --border: rgba(255, 255, 255, 0.08); --text: rgba(255, 255, 255, 0.95); --text-sec: rgba(255, 255, 255, 0.60); --text-dim: rgba(255, 255, 255, 0.40); } /* ---- Semantic surfaces — LIGHT (opt-in via ) ---- */ [data-theme="light"] { --bg: #EDEFF4; /* soft cool "snow" ground */ --bg-card: #ffffff; --bg-hover: #f1f3f7; --bg-input: #ffffff; --bg-sidebar: #ffffff; --border: rgba(17, 17, 24, 0.08); --text: rgba(0, 0, 0, 0.90); --text-sec: rgba(0, 0, 0, 0.55); --text-dim: rgba(0, 0, 0, 0.40); --gold-soft: rgba(240, 185, 11, 0.16); --gold-softer: rgba(240, 185, 11, 0.10); --gold-ink: #8a6a00; /* readable amber for gold text on light surfaces */ --shadow-sm: 0 1px 2px rgba(17, 17, 24, 0.05); --shadow: 0 1px 2px rgba(17, 17, 24, 0.05), 0 16px 36px -16px rgba(17, 17, 24, 0.14); --shadow-lg: 0 1px 2px rgba(17, 17, 24, 0.05), 0 28px 56px -20px rgba(17, 17, 24, 0.18); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: 'DM Sans', system-ui, -apple-system, sans-serif; font-size: 16px; height: 100%; overflow-x: hidden; -webkit-tap-highlight-color: transparent; } .mono { font-family: 'JetBrains Mono', ui-monospace, monospace; } a { color: var(--gold-ink); text-decoration: none; } a:hover { text-decoration: underline; } /* ---------- Layout ---------- */ .app-shell { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; transition: grid-template-columns 0.18s ease; } .app-shell.sidebar-collapsed { grid-template-columns: 64px 1fr; } .sidebar { background: var(--bg-sidebar); border-right: 1px solid var(--border); padding: 24px 16px; display: flex; flex-direction: column; position: relative; /* No `overflow: hidden` here — would clip the toggle button that pokes out the right edge. Collapsed-state visibility is handled per-element below. */ } /* Brand block — logo always centered, expanded or collapsed */ .sidebar .brand { display: flex; justify-content: center; align-items: center; margin: 0 0 12px 0; } .sidebar .brand img { height: 160px; /* expanded */ width: auto; max-width: 100%; display: block; transition: height 0.18s; } .sidebar .brand-tagline { text-align: center; font-size: 20px; font-weight: 800; letter-spacing: -0.5px; color: var(--gold-ink); margin: 0 0 24px 0; } /* Collapsed-state — hide labels, keep logo (smaller), keep nav icons */ .app-shell.sidebar-collapsed .sidebar nav a span, .app-shell.sidebar-collapsed .sidebar .nav-section, .app-shell.sidebar-collapsed .sidebar .footer, .app-shell.sidebar-collapsed .sidebar .brand-tagline { display: none; } .app-shell.sidebar-collapsed .sidebar { padding: 16px 8px; } .app-shell.sidebar-collapsed .sidebar nav a { justify-content: center; padding: 10px 0; position: relative; } .app-shell.sidebar-collapsed .sidebar .brand { margin-bottom: 16px; } .app-shell.sidebar-collapsed .sidebar .brand img { height: 40px; } /* Collapsed rail: instant styled label flyout on hover/keyboard-focus so each icon is identifiable (the native `title` tooltip is slow + unstyled). Reuses the label span that's hidden when collapsed; the sidebar has no overflow clip, so it escapes to the right over the content. */ .app-shell.sidebar-collapsed .sidebar nav a:hover > span, .app-shell.sidebar-collapsed .sidebar nav a:focus-visible > span { display: block; position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%); padding: 7px 11px; background: var(--bg-card); color: var(--text); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.4)); font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap; z-index: 1200; pointer-events: none; } /* Collapse toggle — a labeled footer row (chevron + "Collapse"), matching the Customize control. Chevron flips to point right when the rail is collapsed. */ .sidebar-toggle { display: flex; align-items: center; gap: 10px; width: 100%; background: transparent; border: 0; border-radius: 8px; color: var(--text-dim); cursor: pointer; font-family: inherit; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; padding: 10px 12px; flex-shrink: 0; transition: color 0.15s, background 0.15s; } .sidebar-toggle:hover { color: var(--gold-ink); background: var(--bg-hover); } .sidebar-toggle svg { width: 16px; height: 16px; flex-shrink: 0; transition: transform 0.18s; } .app-shell.sidebar-collapsed .sidebar-toggle { justify-content: center; padding: 10px 0; } .app-shell.sidebar-collapsed .sidebar-toggle .sidebar-toggle__label { display: none; } .app-shell.sidebar-collapsed .sidebar-toggle svg { transform: rotate(180deg); } .sidebar .brand { font-size: 18px; font-weight: 800; letter-spacing: -0.5px; margin-bottom: 8px; display: flex; align-items: center; gap: 10px; } .sidebar .brand .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--gold); } .sidebar .nav-section { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text-dim); margin: 16px 8px 8px; } .sidebar nav a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--text-sec); margin-bottom: 4px; transition: background 0.15s, color 0.15s; } .sidebar nav a:hover { background: var(--bg-hover); color: var(--text); text-decoration: none; } .sidebar nav a.active { background: rgba(240,185,11,0.12); color: var(--gold-ink); } .sidebar nav a svg { width: 16px; height: 16px; } /* ---------- Customizable sidebar (sidebar-customize.js) ---------- */ .nav-tree { display: flex; flex-direction: column; } /* Folder header — a collapsible version of the old .nav-section label. */ .nav-folder-header { display: flex; align-items: center; gap: 8px; width: 100%; background: transparent; border: 0; cursor: pointer; font-family: inherit; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text-dim); padding: 6px 8px; margin: 12px 0 4px; transition: color 0.15s; } .nav-folder-header:hover { color: var(--text-sec); } .nav-folder-header svg { width: 14px; height: 14px; flex-shrink: 0; } .nav-folder-label { flex: 1; text-align: left; } .nav-folder-chev { display: inline-flex; transition: transform 0.15s; } .nav-folder.is-collapsed .nav-folder-chev { transform: rotate(-90deg); } .nav-folder.is-collapsed .nav-folder-children { display: none; } .nav-folder-children { padding-left: 6px; } /* Collapsed icon-rail: drop folder headers, flatten all icons into the strip. */ .app-shell.sidebar-collapsed .sidebar .nav-folder-header { display: none; } .app-shell.sidebar-collapsed .sidebar .nav-folder.is-collapsed .nav-folder-children { display: block; } .app-shell.sidebar-collapsed .sidebar .nav-folder-children { padding-left: 0; } /* Footer controls (Customize / New folder / Reset / Done). The Customize row mirrors the collapse row so they read as one tidy footer group. */ .nav-controls { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); } .app-shell.sidebar-collapsed .sidebar .nav-controls { display: none; } .nav-customize-btn { display: flex; align-items: center; gap: 10px; width: 100%; background: transparent; border: 0; border-radius: 8px; color: var(--text-dim); font-family: inherit; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; padding: 10px 12px; cursor: pointer; transition: color 0.15s, background 0.15s; } .nav-customize-btn:hover { color: var(--gold-ink); background: var(--bg-hover); } .nav-customize-btn svg { flex-shrink: 0; } .nav-customize-bar { display: flex; flex-direction: column; gap: 6px; } .nav-cz-action { display: flex; align-items: center; justify-content: center; gap: 6px; background: transparent; border: 1px solid var(--border); border-radius: 8px; color: var(--text-sec); font-family: inherit; font-size: 11px; font-weight: 600; padding: 8px 10px; cursor: pointer; transition: color 0.15s, background 0.15s, border-color 0.15s; } .nav-cz-action:hover { color: var(--text); border-color: var(--text-dim); background: var(--bg-hover); } .nav-cz-action svg { flex-shrink: 0; } .nav-cz-reset:hover { color: var(--red); border-color: var(--red); } .nav-cz-done { background: var(--gold); border-color: var(--gold); color: #111118; } .nav-cz-done:hover { background: var(--gold); color: #111118; opacity: 0.9; } /* Customize-mode editable rows (separate from the live links). */ .nav-edit-row { display: flex; align-items: center; gap: 6px; padding: 6px 8px; margin-bottom: 2px; border-radius: 8px; font-size: 13px; color: var(--text-sec); user-select: none; border-top: 2px solid transparent; border-bottom: 2px solid transparent; } .nav-edit-row.is-child { margin-left: 16px; } .nav-edit-row.is-folder { font-weight: 600; color: var(--text); } .nav-edit-row.dragging { opacity: 0.4; } .nav-edit-row.drop-before { border-top-color: var(--gold); } .nav-edit-row.drop-after { border-bottom-color: var(--gold); } .nav-edit-row.drop-into { background: var(--bg-hover); box-shadow: inset 0 0 0 1px var(--gold); } .nav-grip { display: inline-flex; color: var(--text-dim); cursor: grab; flex-shrink: 0; } .nav-edit-icon { display: inline-flex; color: var(--text-dim); flex-shrink: 0; } .nav-edit-icon svg { width: 15px; height: 15px; } .nav-edit-chev { display: inline-flex; background: transparent; border: 0; color: var(--text-dim); cursor: pointer; padding: 0; flex-shrink: 0; transition: transform 0.15s; } .nav-edit-chev.is-collapsed { transform: rotate(-90deg); } .nav-edit-label { flex: 1; min-width: 0; text-align: left; background: transparent; border: 0; color: inherit; font: inherit; cursor: text; padding: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nav-edit-btn { display: inline-flex; background: transparent; border: 0; color: var(--text-dim); cursor: pointer; padding: 2px; flex-shrink: 0; opacity: 0; transition: color 0.15s, opacity 0.15s; } .nav-edit-row:hover .nav-edit-btn { opacity: 1; } .nav-edit-btn:hover { color: var(--text); } .nav-edit-del:hover { color: var(--red); } .nav-rename-input { flex: 1; min-width: 0; font: inherit; font-size: 13px; background: var(--bg-input); border: 1px solid var(--gold); border-radius: 6px; color: var(--text); padding: 2px 6px; outline: none; } .sidebar .footer { margin-top: auto; padding: 14px 4px 12px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-dim); } .sidebar .footer .who { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; min-width: 0; } .sidebar .footer .who .avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border); flex-shrink: 0; } .sidebar .footer .who .avatar-fallback { width: 36px; height: 36px; border-radius: 50%; background: var(--bg-input); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--gold-ink); font-weight: 700; font-size: 14px; flex-shrink: 0; } .sidebar .footer .who .who-name { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sidebar .footer .who .who-role { display: inline-block; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--gold-ink); background: rgba(240,185,11,0.12); padding: 2px 8px; border-radius: 10px; margin-top: 2px; } .sidebar .footer .signout { display: inline-block; font-size: 11px; color: var(--text-sec); padding: 4px 0; } .sidebar .footer .signout:hover { color: var(--gold-ink); text-decoration: none; } /* Top bar — sits at the top of every page's main area; holds the signed-in user and the theme toggle, right-aligned. Replaces the old sidebar-footer user block. Negative margins bleed it to the edges of .main's padding. */ .topbar { display: flex; align-items: center; justify-content: flex-end; gap: 16px; margin: -28px -32px 24px; padding: 12px 32px; border-bottom: 1px solid var(--border); background: var(--bg); } .topbar .who { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; border-radius: 999px; } .topbar a.who:hover .who-name { color: var(--gold-ink); } .topbar .avatar, .topbar .avatar-fallback { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border); flex-shrink: 0; } .topbar .avatar { object-fit: cover; } .topbar .avatar-fallback { background: var(--bg-input); display: flex; align-items: center; justify-content: center; color: var(--gold-ink); font-weight: 700; font-size: 14px; } .topbar .who-name { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; } .topbar .signout { font-size: 12px; color: var(--text-sec); } .topbar .signout:hover { color: var(--gold-ink); text-decoration: none; } /* Light/dark theme toggle — icon-only circle, matches the avatar's size/shape. */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; flex-shrink: 0; border: 1px solid var(--border); border-radius: 50%; background: var(--bg-card); color: var(--text-sec); cursor: pointer; transition: color 0.15s, background 0.15s, border-color 0.15s; } .theme-toggle:hover { color: var(--gold-ink); border-color: var(--gold); background: var(--bg-hover); } .theme-toggle .theme-toggle__icon { flex-shrink: 0; } /* Default (dark): offer the sun (→ light). In light: offer the moon (→ dark). */ .theme-toggle__moon { display: none; } [data-theme="light"] .theme-toggle__sun { display: none; } [data-theme="light"] .theme-toggle__moon { display: inline; } .main { padding: 28px 32px; overflow-y: auto; } .page-title { font-size: 22px; font-weight: 700; margin: 0 0 24px; } .page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; } /* ---------- Cards ---------- */ .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow); } .card .card-title { font-size: 14px; font-weight: 600; padding-bottom: 12px; margin-bottom: 16px; border-bottom: 1px solid var(--border); } .stat-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; position: relative; overflow: hidden; box-shadow: var(--shadow); } .stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--accent, var(--gold)); } .stat-card .label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text-dim); } .stat-card .value { font-size: 26px; font-weight: 800; letter-spacing: -1px; margin-top: 8px; } .stat-card .sub { font-size: 12px; color: var(--text-sec); margin-top: 4px; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 600; border-radius: 8px; border: 1px solid transparent; cursor: pointer; transition: all 0.15s; background: var(--bg-input); color: var(--text); text-decoration: none; } .btn:active { transform: scale(0.97); } .btn-gold { background: var(--gold); color: #000; } .btn-gold:hover { filter: brightness(1.05); } .btn-outline { background: transparent; border-color: var(--border); color: var(--text-sec); } .btn-outline:hover { color: var(--text); border-color: var(--text-sec); } .btn-green { background: var(--green); color: #fff; } .btn-blue { background: var(--blue); color: #fff; } .btn-red { background: var(--red); color: #fff; } /* Touchscreen-sized buttons */ .btn-lg { padding: 18px 28px; font-size: 16px; border-radius: 10px; } .btn-xl { padding: 24px 36px; font-size: 18px; border-radius: 12px; } /* ---------- Form inputs ---------- */ .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; } .field label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text-dim); } .input, .select, .textarea { background: var(--bg-input); border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; font-size: 14px; font-family: 'DM Sans', sans-serif; color: var(--text); width: 100%; transition: border 0.15s, box-shadow 0.15s; } .input::placeholder { color: var(--text-dim); } .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(240,185,11,0.12); } .input-xl { font-size: 22px; padding: 18px 22px; font-family: 'JetBrains Mono', monospace; letter-spacing: 1px; text-align: center; } .textarea { min-height: 90px; resize: vertical; } /* ---------- Badges ---------- */ .badge { display: inline-block; padding: 4px 10px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; border-radius: 20px; } .badge-gold { background: rgba(240,185,11,0.12); color: var(--gold-ink); } .badge-green { background: rgba(113, 221, 140,0.12); color: var(--green); } .badge-red { background: rgba(255, 71, 71,0.12); color: var(--red); } .badge-blue { background: rgba(125, 187, 255,0.12); color: var(--blue); } .badge-purple { background: rgba(184, 153, 235,0.12); color: var(--purple); } .badge-muted { background: var(--bg-input); color: var(--text-sec); } /* ---------- Tile choice grid (touchscreen Q&A) ---------- */ .tile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); grid-auto-rows: 1fr; gap: 12px; margin-top: 16px; flex: 1; min-height: 0; /* tiles will divide remaining vertical space evenly — no scroll on the question screen */ } .tile { background: var(--bg-card); border: 2px solid var(--border); border-radius: 12px; padding: 16px 14px; min-height: 0; cursor: pointer; transition: all 0.15s; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-size: clamp(14px, 1.4vw, 18px); line-height: 1.25; font-weight: 600; color: var(--text); user-select: none; word-break: break-word; } .tile:hover { border-color: var(--gold); background: var(--bg-hover); } .tile.selected { border-color: var(--gold); background: rgba(240,185,11,0.08); color: var(--gold-ink); } .tile:active { transform: scale(0.98); } .tile .tile-sub { font-size: 12px; font-weight: 400; color: var(--text-sec); margin-top: 8px; } /* ---------- Multi-select chip grid ---------- */ .chip-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; } .chip { background: var(--bg-input); border: 2px solid var(--border); border-radius: 24px; padding: 12px 22px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.15s; user-select: none; } .chip.selected { border-color: var(--gold); background: rgba(240,185,11,0.12); color: var(--gold-ink); } /* ---------- Progress bar ---------- */ .progress-shell { background: var(--bg-input); height: 6px; border-radius: 3px; overflow: hidden; margin-bottom: 24px; } .progress-bar { background: var(--gold); height: 100%; transition: width 0.3s; } .progress-meta { display: flex; justify-content: space-between; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text-dim); margin-bottom: 8px; } /* ---------- Bottom action bar ---------- */ .action-bar { display: flex; justify-content: space-between; gap: 12px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--border); } .action-bar .left, .action-bar .right { display: flex; gap: 12px; } /* ---------- Auth screen ---------- */ .auth-shell { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; } .auth-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 40px; width: 100%; max-width: 420px; } .auth-card h1 { margin: 0 0 8px; font-size: 22px; font-weight: 700; } .auth-card .auth-sub { color: var(--text-sec); font-size: 13px; margin-bottom: 28px; } /* ---------- Tables ---------- */ .table { width: 100%; border-collapse: collapse; font-size: 13px; } .table th { text-align: left; padding: 12px 14px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text-dim); background: var(--bg-input); border-bottom: 1px solid var(--border); } .table td { padding: 14px; border-bottom: 1px solid var(--border); color: var(--text); } /* Zebra striping — subtle lighter stripe on alternating rows, easier on the eyes. A translucent overlay so it works over any card/section background. */ .table tbody tr:nth-child(even) { background: rgba(128, 128, 128, 0.10); } .table tbody tr:hover { background: var(--bg-hover); } /* hover wins over the stripe */ /* PHASE_16 — lot settings page */ .settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; } .readout { padding: 10px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 14px; min-height: 40px; display: flex; align-items: center; } .input.saved-flash { border-color: var(--green); transition: border-color .2s ease; } /* PHASE_16 — column manager (drag/hide) + resizable headers */ .col-row { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border: 1px solid var(--border); border-radius: 6px; margin-bottom: 6px; background: var(--bg-card); cursor: grab; font-size: 13px; } .col-row.dragging { opacity: .5; } .col-grip { color: var(--text-dim); user-select: none; } .col-row label { display: flex; align-items: center; gap: 6px; cursor: pointer; margin: 0; } .table th { position: relative; } .col-resize { position: absolute; top: 0; right: 0; width: 8px; height: 100%; cursor: col-resize; user-select: none; } .col-resize:hover { background: var(--gold); opacity: .4; } /* ---------- Question screen ---------- */ .question-screen { max-width: 1100px; margin: 0 auto; } .question-screen h2 { font-size: clamp(20px, 2vw, 26px); font-weight: 700; margin: 0 0 8px; line-height: 1.2; } .question-screen .q-meta { font-size: 12px; color: var(--text-sec); margin-bottom: 12px; } /* Full-viewport grading layout — no scroll for typical screens */ .grading-layout { display: grid; grid-template-columns: 240px 1fr; gap: 20px; align-items: stretch; height: calc(100vh - 56px); /* subtract main padding */ min-height: 500px; } .grading-layout > .grading-pane { display: flex; flex-direction: column; min-height: 0; /* allow children to shrink */ overflow: hidden; } .grading-aside { display: flex; flex-direction: column; overflow-y: auto; min-height: 0; } /* Toggle switch (used for "Allow multiple") */ .toggle-row { display: inline-flex; align-items: center; gap: 10px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 24px; background: var(--bg-input); cursor: pointer; user-select: none; font-size: 12px; color: var(--text-sec); transition: all 0.15s; } .toggle-row:hover { border-color: var(--text-sec); color: var(--text); } .toggle-row.on { border-color: var(--gold); color: var(--gold-ink); background: rgba(240,185,11,0.08); } .toggle-switch { width: 32px; height: 18px; background: var(--bg-hover); border-radius: 12px; position: relative; transition: background 0.15s; } .toggle-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--text-sec); transition: transform 0.15s, background 0.15s; } .toggle-row.on .toggle-switch { background: rgba(240,185,11,0.25); } .toggle-row.on .toggle-switch::after { transform: translateX(14px); background: var(--gold); } /* "+ Add note" pill (collapsed notes) */ .note-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border: 1px dashed var(--border); border-radius: 20px; font-size: 12px; color: var(--text-sec); cursor: pointer; background: transparent; font-family: inherit; transition: all 0.15s; } .note-pill:hover { border-color: var(--gold); color: var(--gold-ink); border-style: solid; } .note-pill.expanded { display: none; } .note-area { display: none; margin-top: 8px; } .note-area.expanded { display: block; } /* Visual reference modal — opens on "Show examples" */ .visual-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; } .visual-modal { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 16px; max-width: 90vw; max-height: 90vh; overflow: auto; display: flex; flex-direction: column; gap: 12px; } .visual-modal-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .visual-modal img { max-width: 100%; height: auto; border-radius: 8px; background: white; /* most boards have white backgrounds; fallback for transparent edges */ } /* ---------- Product summary card ---------- */ .product-summary { display: grid; grid-template-columns: 160px 1fr; gap: 24px; align-items: start; } .product-summary img { width: 100%; border-radius: 8px; background: var(--bg-input); border: 1px solid var(--border); aspect-ratio: 1 / 1; object-fit: contain; } .product-summary .meta-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 24px; } .product-summary .meta-grid .meta-row { display: flex; flex-direction: column; gap: 4px; } .product-summary .meta-grid .meta-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text-dim); } .product-summary .meta-grid .meta-value { font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--text); } /* ---------- Flash messages ---------- */ .flash-stack { position: fixed; top: 24px; right: 24px; z-index: 100; display: flex; flex-direction: column; gap: 10px; } .flash { background: var(--bg-card); border: 1px solid var(--border); border-left: 3px solid var(--gold); border-radius: 8px; padding: 12px 18px; font-size: 13px; min-width: 280px; } .flash.error { border-left-color: var(--red); } .flash.success{ border-left-color: var(--green); } /* ---------- Mobile / tablet adjustments ---------- */ @media (max-width: 900px) { .app-shell { grid-template-columns: 1fr; } .sidebar { display: none; } .main { padding: 20px; } .topbar { margin: -20px -20px 16px; padding: 10px 20px; gap: 12px; } .product-summary { grid-template-columns: 1fr; } } /* ---------- PHASE_13 reconcile screen ---------- */ /* Phone-first warehouse surface (designed at 375px; scales up). Tokens used everywhere; the few rgba() tints below are the literal RGB of the gold / green / red tokens with alpha so they stay on-palette without color-mix(). */ .recon-shell { max-width: 720px; margin: 0 auto; padding: 12px; } .recon-shell button, .recon-shell .btn { min-height: 44px; } /* gloves-on */ .recon-header { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 12px; margin-bottom: 10px; } .recon-header h1 { font-size: 17px; font-weight: 700; margin: 0; } .recon-header .lot-meta { font-size: 12px; color: var(--text-sec); margin-top: 4px; } .recon-progress { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; font-size: 12px; } .recon-progress .metric { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; } .recon-progress .metric strong { font-size: 18px; display: block; color: var(--text); } .recon-progress .metric .label { color: var(--text-dim); font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; } .recon-scan-input-wrap { position: sticky; top: 0; background: var(--bg); padding: 8px 0; z-index: 10; } .recon-scan-input { width: 100%; font-size: 18px; padding: 14px 12px; min-height: 50px; background: var(--bg-input); border: 2px solid var(--gold); color: var(--text); border-radius: 10px; font-family: inherit; } .recon-scan-input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(240, 185, 11, 0.25); /* var(--gold) #f0b90b with alpha */ } /* PHASE_24 — on-screen-keyboard toggle button (in the mobile actions row, same size as Undo last / Show details). Gold highlight when the keyboard is on. */ #kbd-toggle.is-on { color: var(--gold-ink); border-color: var(--gold); background: rgba(240, 185, 11, 0.12); } /* PHASE_25 — live type-to-search results (shown only while the keyboard is on). */ .recon-search-results { border: 1px solid var(--border); border-radius: 10px; background: var(--bg-card); overflow-y: auto; max-height: 50vh; margin-bottom: 10px; } .recon-search-row { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; text-align: left; padding: 12px 14px; min-height: 56px; background: transparent; border: 0; border-bottom: 1px solid var(--border); color: var(--text); cursor: pointer; font-family: inherit; } .recon-search-row:last-child { border-bottom: 0; } .recon-search-row:hover, .recon-search-row:active { background: var(--bg-hover); } .recon-search-desc { font-size: 15px; font-weight: 600; } .recon-search-meta { font-size: 12px; color: var(--text-sec); } .recon-search-empty { padding: 12px 14px; color: var(--text-dim); font-size: 13px; } /* PHASE_25 — when the device flips to upside-down portrait and the OS/PWA orientation lock is ignored (warehouse Zebra), counter-rotate the whole page 180° so it stays upright. JS toggles this only on a true 180 flip. */ body.force-flip-180 { transform: rotate(180deg); transform-origin: center center; } /* PHASE_13C: visual nudge when a scan fires while a decision panel is open. We block the scan (the panel must be resolved first) and shake the input briefly + flip the border red so the worker sees the rejection without clobbering the open panel. */ .recon-scan-input.recon-scan-blocked { animation: recon-shake 0.4s; } @keyframes recon-shake { 0%, 100% { transform: translateX(0); border-color: var(--gold); } 20%, 60% { transform: translateX(-5px); border-color: var(--red); } 40%, 80% { transform: translateX(5px); border-color: var(--red); } } .recon-feedback { margin: 10px 0; padding: 12px; border-radius: 10px; font-size: 14px; display: none; /* shown via JS */ } .recon-feedback.success { background: rgba(113, 221, 140, 0.12); border: 1px solid var(--green); color: var(--green); } .recon-feedback.candidates { background: rgba(240, 185, 11, 0.10); border: 1px solid var(--gold); color: var(--text); } .recon-feedback.error { background: rgba(255, 71, 71, 0.12); border: 1px solid var(--red); color: var(--red); } .recon-candidate { display: flex; justify-content: space-between; align-items: center; padding: 10px; margin-top: 6px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; } .recon-candidate .desc { font-size: 13px; } .recon-candidate .num { font-size: 11px; color: var(--text-dim); font-family: 'JetBrains Mono', ui-monospace, monospace; } .recon-candidate button { min-width: 80px; } .recon-line-list { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; } .recon-filter-row { display: flex; gap: 6px; padding: 8px; border-bottom: 1px solid var(--border); overflow-x: auto; } .recon-filter-row button { font-size: 12px; padding: 12px 14px; border-radius: 22px; background: var(--bg); color: var(--text); border: 1px solid var(--border); cursor: pointer; min-height: 44px; white-space: nowrap; } .recon-filter-row button.active { background: var(--gold); color: var(--bg); border-color: var(--gold); } .recon-line-row { display: grid; grid-template-columns: 1fr auto; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--border); font-size: 13px; } .recon-line-row:last-child { border-bottom: none; } .recon-line-row .desc { color: var(--text); } .recon-line-row .num { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; color: var(--text-dim); } .recon-line-row .counts { font-size: 12px; text-align: right; min-width: 60px; } .recon-line-row .counts .recv { font-weight: 700; } .recon-line-row[data-status="reconciled"] .recv { color: var(--green); } .recon-line-row[data-status="partial"] .recv { color: var(--gold-ink); } .recon-line-row[data-status="over"] .recv { color: var(--red); } .recon-line-row[data-status="missing"] .recv { color: var(--text-dim); } /* Tappable mode pill — cycles auto → per_unit → batch. ≥44px via shell rule. inline-flex + vertical-align keep the 44px touch box cleanly aligned inside the `.num` line text (otherwise the shell's min-height: 44px pushes the line-box weirdly on phone). */ .recon-mode-pill { font-size: 10px; padding: 8px 10px; border-radius: 4px; margin-left: 4px; background: var(--bg); border: 1px solid var(--border); color: var(--text-sec); cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; vertical-align: middle; } .recon-mode-pill:hover { background: var(--bg-hover); color: var(--text); } .recon-mode-pill:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } .recon-mode-pill[disabled] { opacity: 0.6; cursor: wait; } .recon-status-caption { font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; } .recon-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; } .recon-actions > * { flex: 1; } .recon-actions form { display: block; } /* Inline panel rows: batch +1/+all/set + over-receipt confirm. */ .recon-btn-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .recon-btn-row > * { flex: 1 1 auto; } .recon-set-count-row { display: flex; gap: 6px; margin-top: 8px; align-items: center; } .recon-set-count-row .input { width: 110px; } /* Dedup-note inline tag inside the success feedback (replaces inline style). */ .recon-dedup-note { color: var(--text-dim); font-size: 11px; font-style: italic; } /* ---------- PHASE_17 list status badges ---------- */ /* `.badge-green` already lives in the Badges block above (rgba 34,197,94,.12). `.badge-gold-soft` is the in-progress sibling of `.badge-gold` — same gold text token, slightly more saturated tint (.15 vs the base .12) so an "N / T reconciled" badge reads as actively working, not idle. */ .badge-gold-soft { background: rgba(240, 185, 11, 0.15); color: var(--gold-ink); } /* ---------- PHASE_18 — scan settings + sealed panels + per-line scan log ---------- */ /* Sealed Yes/No decision panel. Lives INSIDE the existing `.recon-feedback.candidates` container — that parent already paints the gold-tinted background and border, so the inner wrapper just stacks content with a little breathing room. Mirrors the structural pattern used by the inline batch panel. */ .recon-sealed-panel { display: flex; flex-direction: column; gap: 8px; } .recon-sealed-actions { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 6px; } /* PHASE_30 — match the Cancel button's height to the Yes/No buttons it wraps beside (it's a plain .btn-outline otherwise capped at 44px). */ .recon-sealed-actions .btn { min-height: 56px; } .recon-sealed-btn { display: inline-flex; align-items: center; justify-content: center; flex: 1 1 auto; min-width: 100px; min-height: 56px; padding: 14px 22px; font-family: inherit; font-size: 16px; font-weight: 700; border-radius: 10px; border: 1px solid transparent; cursor: pointer; transition: filter 0.15s, transform 0.1s; background: var(--bg-input); color: var(--text); } .recon-sealed-btn:active { transform: scale(0.97); } .recon-sealed-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } .recon-sealed-btn[disabled] { opacity: 0.55; cursor: wait; } .recon-sealed-btn--yes { background: var(--green); color: #fff; } .recon-sealed-btn--yes:hover { filter: brightness(1.05); } .recon-sealed-btn--no { background: transparent; border-color: var(--border); color: var(--text-sec); } .recon-sealed-btn--no:hover { color: var(--text); border-color: var(--text-sec); } /* Inline "Sealed" / "Unsealed" pill rendered inside the candidates feedback and the per-line scan log. Bigger + bolder than the table-row badge below. */ .recon-sealed-flag { display: inline-block; padding: 3px 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; border-radius: 999px; background: rgba(113, 221, 140, 0.12); color: var(--green); } .recon-sealed-flag.recon-sealed-flag--no { background: var(--bg-input); color: var(--text-sec); } /* Sealed/unsealed count emphasis inside `.recon-progress .metric strong`. The parent rule already sets size + color; we just nudge the color so a quick glance separates the two counts. */ .recon-progress .metric strong.recon-sealed-count { color: var(--green); } .recon-progress .metric strong.recon-unsealed-count { color: var(--text-sec); } /* Per-line collapsible scan log. Sits inside a
on each line row. Compact, full-width, designed to show 1-3 lines per scanned unit on phone. */ .recon-line-items { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; margin-top: 6px; overflow: hidden; } .recon-line-items__empty { padding: 10px 12px; font-size: 12px; color: var(--text-dim); font-style: italic; } .recon-line-items__row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--border); font-size: 12px; color: var(--text); flex-wrap: wrap; } .recon-line-items__row:last-child { border-bottom: none; } .recon-line-items__row .who { font-weight: 600; color: var(--text); } .recon-line-items__row .when { color: var(--text-dim); font-size: 11px; } .recon-line-items__row .spacer { flex: 1; } /* The disclosure summary itself — make sure the tap target is comfortable. */ .recon-line-items-disclosure { margin-top: 6px; } .recon-line-items-disclosure > summary { cursor: pointer; font-size: 13px; font-weight: 500; color: var(--text-sec); padding: 8px 14px; min-height: 40px; display: inline-flex; align-items: center; gap: 6px; list-style: revert; /* Look like a peer control to the "Undo last" button so the per-item delete is discoverable, not a dim text link that disappears. */ border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card); } .recon-line-items-disclosure > summary:hover { color: var(--text); border-color: var(--gold); } .recon-line-items-disclosure[open] > summary { border-color: var(--gold); color: var(--text); } .recon-line-items-disclosure > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; } /* Tools row under each line description: undo + disclosure live here. */ .recon-line-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; } /* Small destructive button used per-row in the scan log. Compact but still passes 44px touch target via min-height on the tap surface. */ .recon-item-delete { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 6px 12px; font-family: inherit; font-size: 11px; font-weight: 600; border-radius: 6px; border: 1px solid transparent; cursor: pointer; transition: filter 0.15s; background: rgba(255, 71, 71, 0.12); color: var(--red); } .recon-item-delete:hover { filter: brightness(1.1); } .recon-item-delete:active { transform: scale(0.97); } .recon-item-delete:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; } .recon-item-delete[disabled] { opacity: 0.5; cursor: wait; } /* "Undo last" button sitting next to the disclosure. Compact, outline-ish — composes the existing `.btn.btn-outline` plus this size modifier. */ .recon-undo-last { min-height: 36px; padding: 6px 12px; font-size: 12px; } /* Phone — make sure both the sealed panel buttons and the scan log row never force horizontal scroll at 375px. */ @media (max-width: 480px) { .recon-sealed-btn { min-width: 80px; padding: 12px 14px; font-size: 15px; } .recon-line-items__row { font-size: 11px; } .recon-line-items__row .when { font-size: 10px; } } /* Compact "Sealed" / "Unsealed" tag used inline in inventory + admin item rows (FE-C). Smaller than `.recon-sealed-flag` so it fits in a table cell without bumping the row height. */ .badge-sealed, .badge-unsealed { display: inline-block; padding: 2px 7px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; border-radius: 10px; vertical-align: middle; } .badge-sealed { background: rgba(113, 221, 140, 0.12); color: var(--green); } .badge-unsealed { background: var(--bg-input); color: var(--text-sec); } /* PHASE_18 — reconcile header gear + per-line inline status message */ .recon-header-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .recon-gear-link { font-size: 12px; padding: 6px 10px; } /* PHASE_19 — header actions (undo + gear) group together, wrap on narrow. */ .recon-header-actions { display: flex; gap: 8px; flex-wrap: wrap; } .recon-undo-global { font-size: 12px; padding: 6px 10px; } /* The view/delete tools only make sense once a line has received units. */ .recon-line-row[data-status="pending"] .recon-line-tools, .recon-line-row[data-status="missing"] .recon-line-tools { display: none; } /* Inline ok/warn/err status next to a line's undo/delete controls. The `data-kind` attribute distinguishes the three states without forcing FE-A to swap classes on every update. */ .recon-line-msg { font-size: 11px; color: var(--text-sec); padding: 2px 6px; border-radius: 4px; } .recon-line-msg[data-kind="ok"] { color: var(--green); } .recon-line-msg[data-kind="warn"] { color: var(--gold-ink); } .recon-line-msg[data-kind="err"] { color: var(--red); } /* SCANNER_PHASE_2 — Costco enrichment per-line disclosure + scan job progress */ /* FE-B owns these class names; FE-A's _enrichment_partial.html references them. Tokens only — no new color values. 44×44 touch targets on every interactive element. Mobile-first: layout works at 375px and scales up at 768/1280. */ /* --- Per-line state pills (three distinct states) --- */ /* `pending` = "scan hasn't been run on this line yet" (gray, calmest) `not-found` = "scanned, Costco returned no listing match" (amber, attention) `ok` = "scanned, data present" (green, success) */ .enrich-state-pending { display: inline-block; padding: 4px 10px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; border-radius: 20px; background: var(--bg-input); color: var(--text-sec); } .enrich-state-not-found { display: inline-block; padding: 4px 10px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; border-radius: 20px; background: rgba(240, 185, 11, 0.12); /* --gold at low opacity */ color: var(--gold-ink); } .enrich-state-ok { display: inline-block; padding: 4px 10px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; border-radius: 20px; background: rgba(113, 221, 140, 0.12); /* --green at low opacity */ color: var(--green); } /* --- Manuals sub-section states (mirror of the line-state trio) --- 3a — never scanned: muted "scan pending" note 3b — scanned, zero PDFs found: explicit "No manuals on listing" 3c — scanned, N PDFs: container header for the list */ .enrich-manual-pending { font-size: 12px; color: var(--text-dim); font-style: italic; } .enrich-manual-zero { font-size: 12px; color: var(--text-sec); } .enrich-manual-has { font-size: 12px; font-weight: 600; color: var(--text); text-transform: uppercase; letter-spacing: 0.5px; margin: 12px 0 6px; } /* --- Job progress bar (operator triggers scan, polls every 5s) --- */ .enrich-progress { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 12px 16px; margin-bottom: 16px; display: flex; flex-direction: column; gap: 8px; } .enrich-progress__label { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 600; color: var(--text-sec); gap: 12px; flex-wrap: wrap; } .enrich-progress__track { background: var(--bg-input); height: 8px; border-radius: 4px; overflow: hidden; } .enrich-progress__fill { background: var(--gold); height: 100%; width: 0%; /* JS updates */ border-radius: 4px; transition: width 0.3s ease; /* smooth poll-to-poll jumps */ } /* --- Image gallery: 3-up phone, 6-up tablet/desktop --- Square aspect ratio via the wrapper (works in older Safari too via the explicit padding-top trick if needed, but aspect-ratio is broadly supported now). object-fit: cover so non-square Costco CDN images crop cleanly. */ .enrich-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; } @media (min-width: 768px) { .enrich-gallery { grid-template-columns: repeat(6, 1fr); } } .enrich-gallery__thumb { display: block; aspect-ratio: 1 / 1; width: 100%; background: var(--bg-input); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; transition: border-color 0.15s; /* 44×44 touch target — at 375px, 3-up grid w/ 16px main padding + 8px gaps gives each thumb ~107px square. Well above 44. */ } .enrich-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .enrich-gallery__thumb:hover { border-color: var(--gold); } .enrich-gallery__thumb:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } /* --- Structured spec badges (Model: ABC-123, MPN: 12345, etc.) --- Compact chips that flow on one row at 375px when there are 2-3 of them, wrap to multiple rows when there are more (appliance items can have 6-7 populated structured columns). */ .enrich-spec-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 12px; } .enrich-spec-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; font-size: 11px; border-radius: 6px; background: var(--bg-input); border: 1px solid var(--border); color: var(--text); max-width: 100%; } .enrich-spec-badge__label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-dim); } .enrich-spec-badge__value { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; } /* --- Full specs table (collapsible
) --- Default-collapsed so the line disclosure stays compact; operator can pop it open for the full key-value dump from the Stage 0 spec scrape. */ .enrich-specs-table { margin: 8px 0; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; } .enrich-specs-table > summary { cursor: pointer; font-size: 12px; font-weight: 600; color: var(--text-sec); padding: 4px 0; min-height: 36px; display: inline-flex; align-items: center; list-style: revert; } .enrich-specs-table > summary:hover { color: var(--text); } .enrich-specs-table[open] > summary { color: var(--text); } .enrich-specs-table > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; } .enrich-specs-table table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 12px; } .enrich-specs-table th, .enrich-specs-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border); vertical-align: top; } .enrich-specs-table th { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-dim); width: 40%; white-space: normal; word-break: break-word; } .enrich-specs-table td { color: var(--text); font-family: 'JetBrains Mono', ui-monospace, monospace; word-break: break-word; } .enrich-specs-table tr:last-child th, .enrich-specs-table tr:last-child td { border-bottom: none; } /* --- Manuals list (PDFs) --- */ .enrich-manuals-list { list-style: none; padding: 0; margin: 0; } .enrich-manual-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); margin-bottom: 6px; font-size: 13px; min-height: 44px; /* touch target — link/anchor sits inside */ flex-wrap: wrap; } .enrich-manual-item:last-child { margin-bottom: 0; } .enrich-manual-item a { color: var(--gold-ink); font-weight: 500; flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; } .enrich-manual-item .enrich-manual-size { font-size: 11px; color: var(--text-dim); font-family: 'JetBrains Mono', ui-monospace, monospace; white-space: nowrap; } .enrich-manual-broken { background: var(--bg-input); border-color: var(--border); color: var(--text-dim); } .enrich-manual-broken a { color: var(--text-sec); } .enrich-manual-broken a:hover { color: var(--gold-ink); } .enrich-manual-broken::before { /* COSTCO_SCAN_TOOLKIT §F6 — the broken-manual warning icon is now an inline SVG in the JS-built markup (.enrich-manual-broken__icon); the emoji glyph here is removed so we don't render two warnings (and no emoji). */ content: ''; color: var(--gold-ink); font-size: 14px; margin-right: 2px; } /* --- Error callout (failed jobs, network errors loading enrichment JSON) --- Red-ish but muted — not the destructive `--red` token. We compose a low-opacity red tint over a card background so it reads as "something went wrong" without screaming. */ .enrich-error { background: rgba(255, 71, 71, 0.08); /* --red at low opacity */ border: 1px solid rgba(255, 71, 71, 0.25); border-radius: 8px; padding: 10px 14px; font-size: 13px; color: var(--text); margin: 8px 0; } .enrich-error a { color: var(--gold-ink); } /* --- Per-line disclosure wrapper --- Visually indented + offset from the parent line row so the relationship reads as "this is detail for the row above." Indent shrinks on phone to preserve horizontal room. */ .enrich-disclosure { margin: 8px 0 12px 24px; padding: 12px 14px; background: var(--bg-card); border: 1px solid var(--border); border-left: 3px solid var(--gold); border-radius: 8px; } @media (max-width: 480px) { .enrich-disclosure { margin-left: 8px; padding: 10px 12px; } } .enrich-disclosure__body { display: flex; flex-direction: column; gap: 8px; } .enrich-disclosure__body h3 { font-size: 14px; font-weight: 700; margin: 0; line-height: 1.3; word-break: break-word; } .enrich-disclosure__body h3 a { color: var(--text); } .enrich-disclosure__body h3 a:hover { color: var(--gold-ink); } .enrich-disclosure__body .enrich-meta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; font-size: 12px; color: var(--text-sec); } .enrich-disclosure__body .enrich-meta-row .enrich-price { font-weight: 700; color: var(--text); font-size: 14px; } /* SCANNER_PHASE_2 — sub-element aliases used by FE-A's markup that weren't in the original pact. Cheap to add; styles render cleanly. */ .enrich-progress__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; } .enrich-progress__counts { font-size: 13px; color: var(--text-sec); } .enrich-progress__bar { height: 8px; background: var(--bg-input); border-radius: 4px; overflow: hidden; } .enrich-progress__actions { display: flex; gap: 8px; margin-top: 10px; justify-content: flex-end; } /* SCAN_JOB_UX_POLISH — terminal "done" state: hide the running chrome (head/bar/actions) and surface the inline completion block instead. */ .enrich-progress--done .enrich-progress__head, .enrich-progress--done .enrich-progress__bar, .enrich-progress--done .enrich-progress__actions { display: none; } .enrich-progress__completion { margin-top: 4px; } .enrich-completion__count { font-size: 16px; color: var(--green); font-weight: 600; margin-bottom: 12px; } .enrich-completion__count--cancelled { color: var(--text-sec); } .enrich-completion__next { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; } .enrich-completion__next label { font-size: 14px; color: var(--text-sec); } .enrich-completion__next .select { min-width: 100px; min-height: 44px; } .enrich-completion__next .btn { min-height: 44px; } .enrich-completion__done { color: var(--gold-ink); margin-bottom: 12px; } .enrich-header { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; } .enrich-header__title { font-size: 14px; font-weight: 700; color: var(--text); } .enrich-header__title a { color: var(--gold-ink); } .enrich-header__meta { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px; color: var(--text-sec); } .enrich-footer { margin-top: 10px; font-size: 11px; color: var(--text-dim); } .enrich-footer__when { font-family: 'JetBrains Mono', ui-monospace, monospace; } .enrich-state-pending__msg, .enrich-state-not-found__when { font-size: 12px; color: var(--text-dim); margin-left: 8px; } .enrich-manuals { margin-top: 12px; } .enrich-disclosure__desc { font-size: 12px; color: var(--text-sec); margin: 4px 0 8px; } .enrich-disclosure-list { display: flex; flex-direction: column; gap: 6px; } /* RECONCILE_COSTCO_PEEK — display-only hero photo + current Costco price on the per-line reconcile row. Sized to be visually verifiable from arm's length on a phone (100px square) without crowding the count controls. */ .recon-costco-peek { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; } .recon-costco-peek__img { width: 100px; height: 100px; object-fit: contain; background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; flex-shrink: 0; } .recon-costco-peek__price { font-size: 18px; font-weight: 600; color: var(--gold-ink); } @media (min-width: 768px) { .recon-costco-peek__img { width: 140px; height: 140px; } .recon-costco-peek__price { font-size: 22px; } } /* SCANNER_BATCH_UI — status chips above the lot table + per-line scan status badges + batch-trigger row (picker + Scan / Re-scan-all buttons). Tokens only; no new colors. */ .scan-status-strip { display: flex; gap: 8px; margin: 12px 0; flex-wrap: wrap; } .scan-chip { display: inline-block; padding: 4px 10px; border-radius: 12px; font-size: 13px; font-weight: 600; border: 1px solid var(--border); } .scan-chip--ok { background: rgba(113, 221, 140,0.12); color: var(--green); border-color: rgba(113, 221, 140,0.4); } .scan-chip--pending { background: rgba(245,192,0,0.12); color: var(--gold-ink); border-color: rgba(245,192,0,0.4); } .scan-chip--total { background: var(--bg-card); color: var(--text-sec); } .scan-batch-row { display: flex; align-items: center; gap: 12px; margin: 12px 0 20px; flex-wrap: wrap; } .scan-batch-row__label { font-size: 14px; color: var(--text-sec); } .scan-batch-row__count { min-width: 100px; min-height: 44px; } .scan-batch-row .btn { min-height: 44px; } .scan-line-badge { display: inline-block; padding: 2px 8px; font-size: 11px; font-weight: 600; border-radius: 4px; margin-left: 8px; vertical-align: middle; white-space: nowrap; } .scan-line-badge--pending { background: rgba(245,192,0,0.16); color: var(--gold-ink); } .scan-line-badge--not-found { background: rgba(255, 71, 71,0.16); color: var(--red); } .scan-line-badge--ok { background: rgba(113, 221, 140,0.16); color: var(--green); } .scan-line-badge--error { background: rgba(184, 153, 235,0.16); color: var(--purple); } @media (max-width: 480px) { .scan-batch-row { flex-direction: column; align-items: stretch; } .scan-batch-row__count { width: 100%; } .scan-batch-row .btn { width: 100%; } /* SCAN_JOB_UX_POLISH — completion card stacks: count, full-width picker, full-width Pick-hero link. */ .enrich-completion__next { flex-direction: column; align-items: stretch; } .enrich-completion__next .select, .enrich-completion__next .btn { width: 100%; } .enrich-progress__completion > .btn { width: 100%; } } /* COSTCO_IMAGE_CURATION — one-item-at-a-time hero-image picker. Mobile-first; thumbnails are 88px min on phone (operator's rapid one-handed selection target). Tokens only; no new colors. */ .curate-header { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; } .curate-progress { flex: 1; min-width: 200px; } .curate-progress__count { font-size: 14px; color: var(--text-sec); display: block; margin-bottom: 4px; } .curate-progress__bar { height: 6px; background: var(--bg-card); border-radius: 3px; overflow: hidden; } .curate-progress__fill { height: 100%; background: var(--gold); transition: width 0.2s ease; } .curate-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 16px; } .curate-card__title { color: var(--gold-ink); font-size: 18px; margin: 0 0 4px; } .curate-card__meta { color: var(--text-sec); margin: 0 0 16px; font-size: 14px; } .curate-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin-bottom: 16px; } .curate-thumb { background: var(--bg); border: 3px solid transparent; border-radius: 6px; padding: 0; cursor: pointer; aspect-ratio: 1; overflow: hidden; min-width: 88px; min-height: 88px; } .curate-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; } .curate-thumb--default { /* Subtle pre-marked ring on the scanner's lead so the operator can see the default before tapping anything else. Soft, distinguishable from the selected state's solid ring + shadow. */ border-color: rgba(245, 192, 0, 0.3); } .curate-thumb--selected { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(245, 192, 0, 0.3); } .curate-actions { display: flex; gap: 8px; position: sticky; bottom: 0; /* FE-review F2: negative-margin to span the full card width and stick to the card's TRUE bottom edge (the card has padding:16px which otherwise leaves the action row 16px above the viewport bottom — wastes the operator's thumb-rest zone). */ margin: 0 -16px -16px; padding: 8px 16px; background: var(--bg-card); /* Soft shadow above the row so a long grid doesn't visually merge into the sticky button strip. Uses bg-card for the shadow so it reads as the card's own surface, not the page bg. */ box-shadow: 0 -8px 8px -8px var(--border); } .curate-actions .btn { flex: 1; min-height: 44px; } .curate-done { text-align: center; padding: 40px 16px; } .curate-done h2 { color: var(--gold-ink); margin: 0 0 8px; } @media (min-width: 768px) { .curate-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } } /* PHASE_19 — mobile reconcile view. On a warehouse phone the line list eats the screen, so we collapse to a scan-first layout: big scan box, an icon action row (undo / settings), and a show/hide toggle for the list (hidden by default). Desktop/tablet keep the full layout unchanged. */ .recon-mobile-actions, .recon-list-toggle-row { display: none; } /* Touch-friendly icon buttons (>= 44px per Apple HIG; we use 56). */ .recon-iconbtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 56px; min-height: 56px; padding: 0 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-card); color: var(--text); font-size: 15px; font-weight: 600; cursor: pointer; text-decoration: none; } .recon-iconbtn:hover { background: var(--bg-hover); text-decoration: none; } .recon-iconbtn svg { width: 24px; height: 24px; } .recon-iconbtn--red { color: var(--red); border-color: var(--red); } .recon-iconbtn--wide { flex: 1 1 auto; width: 100%; } /* Ted's logo — centered at the very top of the reconcile header. */ .recon-logo-top { text-align: center; margin-bottom: 8px; } .recon-logo { height: 52px; width: auto; display: inline-block; } /* Center the lot number on the scanner (phone) where the header actions hide. */ @media (max-width: 640px) { .recon-header-top { justify-content: center; } .recon-header-top h1 { text-align: center; width: 100%; } } /* PHASE_23 — settings/activity links live inside the collapsible details group; on desktop the header buttons already provide them, so hide this row there. */ .recon-detail-links { display: none; } @media (max-width: 640px) { /* The icon row replaces the header's text buttons; drop them to save space. */ .recon-header-actions { display: none; } /* All mobile action/toggle buttons stack full-width. */ .recon-mobile-actions, .recon-list-toggle-row { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; } .recon-mobile-actions .recon-iconbtn, .recon-list-toggle-row .recon-iconbtn { width: 100%; } /* PHASE_23 — one master toggle reveals all of these together; collapsed by default so the scanner page is just the session + scan box. */ .recon-detail-links { flex-direction: column; gap: 10px; margin-top: 10px; } .recon-detail-links:not(.is-open), .recon-progress:not(.is-open), .recon-line-list:not(.is-open) { display: none; } .recon-detail-links.is-open { display: flex; } .recon-progress.is-open { display: grid; } .recon-line-list.is-open { display: block; } } /* PHASE_20 — reconcile session bar (Start / live clock + count / End). */ .recon-session { margin-bottom: 10px; } .recon-session__hint { font-size: 12px; color: var(--text-dim); text-align: center; margin-top: 6px; } .recon-session__active { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; } .recon-session__stat { display: flex; flex-direction: column; line-height: 1.2; } .recon-session__clock { font-size: 24px; font-weight: 700; color: var(--gold-ink); font-variant-numeric: tabular-nums; } .recon-session__sub { font-size: 12px; color: var(--text-sec); } .recon-session__grader { color: var(--text); font-weight: 700; } /* PHASE_23 */ /* Make it obvious the scan box is inert until a session starts. */ #scan-input:disabled { opacity: .5; cursor: not-allowed; } /* PHASE_21 — rack location panel. Big rack badge so the grader sees the destination at a glance, then scans the matching rack barcode. */ .recon-place-panel { text-align: center; padding: 6px 0; } .recon-place-rack { display: inline-block; font-size: 34px; font-weight: 800; letter-spacing: 1px; padding: 6px 22px; border-radius: 12px; margin-bottom: 8px; color: var(--bg); background: var(--gold); } .recon-place-rack--sr { background: var(--blue); color: #fff; } .recon-place-rack--obh { background: var(--gold); color: var(--bg); } .recon-place-rack--obl { background: var(--green); color: var(--bg); } .recon-place-msg { font-size: 17px; } .recon-place-hint { font-size: 13px; color: var(--text-sec); margin-top: 6px; } /* PHASE_22 — modal overlay for the sealed / rack decision steps. The panel content still lives in #feedback; `.is-modal` lifts it into a centered card over a backdrop so it's not buried under the buttons/list. */ .recon-backdrop { position: fixed; inset: 0; z-index: 900; background: rgba(0, 0, 0, 0.62); } .recon-feedback.is-modal { position: fixed; z-index: 901; top: 50%; left: 50%; transform: translate(-50%, -50%); width: calc(100vw - 32px); max-width: 460px; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55); text-align: center; /* PHASE_31 — solid panel: the variant backgrounds (e.g. .candidates) are a ~10% tint, so the page showed through and was hard to read as a modal. Force an opaque card background; the variant's gold border/text still show. */ background: var(--bg-card); /* PHASE_30 — never let a centered panel clip its Yes/No/Cancel off-screen on a short/landscape viewport (that soft-locks the scan flow). Cap to the dynamic viewport and scroll the inner content instead. */ max-height: calc(100dvh - 32px); overflow-y: auto; } /* req 1 — bigger item details on a scan. */ .recon-item-detail { font-size: 22px; font-weight: 700; line-height: 1.2; margin-bottom: 4px; color: var(--text); } .recon-item-sub { font-size: 14px; color: var(--text-sec); margin-bottom: 12px; } .recon-q { display: block; font-size: 20px; margin: 6px 0 12px; } .recon-q-sub { font-size: 15px; margin: 6px 0 12px; color: var(--text); } /* The rack step's own input (separate from the item-scan box). */ .recon-rack-input { width: 100%; margin-top: 14px; padding: 14px 16px; font-size: 20px; text-align: center; letter-spacing: 1px; background: var(--bg-input); border: 2px solid var(--gold); border-radius: 10px; color: var(--text); } .recon-rack-input::placeholder { color: var(--text-dim); letter-spacing: normal; } /* UPC_RECONCILE_BRIDGE — capture-missing-UPC panel (reuses .recon-rack-input). */ .recon-upc-panel { text-align: center; } .recon-upc-hint { font-size: 13px; color: var(--text-sec); margin: 6px 0 0; } .recon-upc-error { color: var(--red); font-size: 13px; margin: 8px 0 0; } .recon-upc-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; } .recon-upc-actions .btn { flex: 1; min-height: 56px; } .recon-place-err { background: rgba(255, 71, 71, 0.14); border: 1px solid var(--red); color: var(--text); border-radius: 8px; padding: 8px 10px; font-size: 13px; margin: 10px 0 0; } /* PHASE_31 — "new version available" floating refresh icon (version poller toggles `hidden`). Small gold circle, bottom-right; tap to hard-refresh. Replaces the old full-width banner. */ .update-fab { position: fixed; right: 16px; bottom: 20px; z-index: 2000; width: 52px; height: 52px; border-radius: 50%; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--gold); color: #0b0b10; border: 0; cursor: pointer; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5); animation: update-fab-pulse 2.2s ease-in-out infinite; -webkit-tap-highlight-color: transparent; } .update-fab:hover { filter: brightness(1.06); } .update-fab:active { transform: scale(0.94); } .update-fab svg { display: block; } @keyframes update-fab-pulse { 0%, 100% { box-shadow: 0 6px 20px rgba(0,0,0,0.5), 0 0 0 0 rgba(245,192,0,0.55); } 50% { box-shadow: 0 6px 20px rgba(0,0,0,0.5), 0 0 0 9px rgba(245,192,0,0); } } @media (prefers-reduced-motion: reduce) { .update-fab { animation: none; } } /* PHASE_28 — tiny build-id badge, bottom-right, so we can see a device's version. */ .app-version-badge { /* PHASE_30 — z-index above the update banner (2000) so the build id stays readable exactly when a tech is checking it before tapping Refresh. */ position: fixed; right: 6px; bottom: 3px; z-index: 2001; font-size: 9px; line-height: 1; color: var(--text-dim); opacity: 0.55; font-family: 'JetBrains Mono', ui-monospace, monospace; pointer-events: none; user-select: none; } /* PHASE_29 — "Show on Costco" lookup on the factory-sealed panel. RECONCILE_SHOW_ON_COSTCO — now a full-width anchor rendered as a secondary row below the Yes/No actions; explicit 44px min so the touch target holds even if the modal panel renders outside `.recon-shell`'s button rule. */ .recon-costco-row { margin-top: 8px; } .recon-costco-btn { width: 100%; min-height: 44px; font-size: 14px; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; } /* PHASE_31 — UPC capture page (/lots//upc). */ .upc-progress { margin: 10px 0 14px; } .upc-progress__bar { height: 8px; background: var(--bg-input); border-radius: 6px; overflow: hidden; } .upc-progress__bar span { display: block; height: 100%; background: var(--gold); transition: width .3s; } .upc-progress__txt { margin-top: 6px; font-size: 13px; color: var(--text-sec); } .upc-filterbar { display: flex; gap: 8px; margin: 4px 0 10px; } .upc-filterbar .btn.is-on { background: var(--gold); color: #0b0b10; border-color: var(--gold); } .upc-list { display: flex; flex-direction: column; gap: 8px; } .upc-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: left; padding: 12px 14px; min-height: 56px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; color: var(--text); cursor: pointer; } .upc-row:hover { background: var(--bg-hover); } .upc-row.has-upc { border-color: var(--green); } .upc-row__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .upc-row__desc { font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .upc-row__meta { font-size: 12px; color: var(--text-dim); } .upc-row__upc { flex-shrink: 0; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 13px; } .upc-row__code { color: var(--green); } .upc-row__none { color: var(--gold-ink); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; } .upc-cand { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; padding: 12px 14px; margin-top: 8px; min-height: 48px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; color: var(--text); cursor: pointer; } .upc-existing { font-size: 13px; color: var(--text-sec); margin: 6px 0; } .upc-err { background: rgba(255, 71, 71, 0.14); border: 1px solid var(--red); color: var(--text); border-radius: 8px; padding: 8px 10px; font-size: 13px; margin: 8px 0; } #upc-input { margin-top: 8px; } /* PHASE_32 — UPC already-captured panel + looked-up product lines. */ .upc-already { margin: 8px 0 2px; font-size: 16px; font-weight: 700; color: var(--green); line-height: 1.4; } .upc-already__code { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 18px; } .upc-prodline { font-size: 13px; color: var(--text-sec); margin: 4px 0 2px; } .upc-row__prod { font-size: 12px; color: var(--text-sec); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---------- MOBILE_NAV — visible only ≤ 900px; sidebar covers desktop ---------- */ /* z-index 20: the open dropdown sits above in-flow page content (incl. the reconcile screen's sticky header at z-index 10) but well below modal/panel overlays (z-index 900+). Stays in normal flow — opening pushes content down. */ .mobile-nav { display: none; position: relative; z-index: 20; } .mobile-nav__button { width: 100%; min-height: 48px; padding: 12px 16px; display: flex; align-items: center; gap: 10px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 15px; font-weight: 600; cursor: pointer; margin-bottom: 12px; } .mobile-nav__button:hover, .mobile-nav__button[aria-expanded="true"] { background: var(--bg-hover); } .mobile-nav__button-label { flex: 1; text-align: left; } .mobile-nav__list { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 8px 0; margin-bottom: 16px; } .mobile-nav__section { font-size: 11px; text-transform: uppercase; color: var(--text-dim); letter-spacing: 0.6px; padding: 8px 16px 4px; } .mobile-nav__link { display: block; padding: 12px 16px; min-height: 44px; color: var(--text); text-decoration: none; border-left: 3px solid transparent; } .mobile-nav__link:hover { background: var(--bg-hover); border-left-color: var(--gold); } .mobile-nav__link--signout { color: var(--text-sec); } .mobile-nav__divider { height: 1px; background: var(--border); margin: 8px 16px; } @media (max-width: 900px) { .mobile-nav { display: block; } /* The existing rule `.sidebar { display: none; }` at this breakpoint already hides the sidebar. */ } /* PHASE_33 — lot inventory page (UPC status + condition/rack). */ .inv-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 8px; } .inv-tab { background: var(--bg-card); border: 1px solid var(--border); color: var(--text-sec); border-radius: 8px; padding: 8px 12px; font-size: 13px; font-weight: 600; cursor: pointer; min-height: 40px; } .inv-tab.is-on { background: var(--gold); color: #0b0b10; border-color: var(--gold); } .inv-tab__n { opacity: .7; font-weight: 700; margin-left: 2px; } .inv-tab.is-on .inv-tab__n { opacity: .9; } .inv-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 8px; } .inv-chip { background: var(--bg-input); border: 1px solid var(--border); color: var(--text-sec); border-radius: 999px; padding: 5px 12px; font-size: 12px; font-weight: 600; cursor: pointer; min-height: 32px; } .inv-chip.is-on { background: var(--blue); color: #fff; border-color: var(--blue); } .inv-count { font-size: 12px; color: var(--text-dim); margin: 0 0 8px; } .inv-list { display: flex; flex-direction: column; gap: 8px; } .inv-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; } .inv-thumb { flex-shrink: 0; width: 48px; height: 48px; border-radius: 8px; overflow: hidden; background: var(--bg-input); display: flex; align-items: center; justify-content: center; } .inv-thumb img { width: 100%; height: 100%; object-fit: contain; } .inv-thumb__none { color: var(--text-dim); font-size: 18px; } .inv-main { flex: 1 1 auto; min-width: 0; } .inv-desc { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .inv-prod { font-size: 12px; color: var(--text-sec); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .inv-cat { color: var(--text-dim); } .inv-meta { font-size: 11px; color: var(--text-dim); margin-top: 2px; } .inv-rack { font-weight: 700; } .inv-rack--SR { color: var(--green); } .inv-rack--OBH { color: var(--gold-ink); } .inv-rack--OBL { color: var(--blue); } .inv-right { flex-shrink: 0; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; } .inv-upc { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; color: var(--text); } .inv-badge { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; } .inv-badge--found { background: rgba(113, 221, 140,.15); color: var(--green); } .inv-badge--nodata { background: rgba(245,192,0,.15); color: var(--gold-ink); } .inv-badge--none { background: var(--bg-input); color: var(--text-dim); } .inv-empty { color: var(--text-dim); padding: 20px; text-align: center; } @media (max-width: 520px) { .inv-upc { max-width: 110px; overflow: hidden; text-overflow: ellipsis; } } /* PHASE_33 — per-lot inventory icon on the lots list. */ .lot-inv-link { margin-left: 8px; text-decoration: none; opacity: .65; font-size: 15px; } .lot-inv-link:hover { opacity: 1; } /* PHASE_34 — page nav for the UPC/Inventory headers. Unlike .recon-header-actions (hidden on phones in favor of the reconcile mobile toolbar), these are plain nav buttons that must stay visible on mobile. */ .lot-pagenav { display: flex; gap: 8px; flex-wrap: wrap; } @media (max-width: 640px) { .lot-pagenav { display: flex; width: 100%; } .lot-pagenav .btn { flex: 1 1 auto; min-height: 44px; } } /* PHASE_35 — UPC page scan box + keyboard toggle. */ .upc-scanrow { display: flex; gap: 8px; align-items: stretch; } .upc-scanrow .input { flex: 1 1 auto; min-width: 0; } .upc-kbd { flex: 0 0 auto; min-width: 56px; font-size: 20px; padding: 0 14px; } .upc-kbd.is-on { background: var(--gold); color: #0b0b10; border-color: var(--gold); } /* PHASE_36 — inventory item detail modal (click into a unit). */ .inv-row { cursor: pointer; } .inv-modal-backdrop { position: fixed; inset: 0; z-index: 900; background: rgba(0,0,0,.62); } .inv-modal { position: fixed; z-index: 901; top: 50%; left: 50%; transform: translate(-50%,-50%); width: calc(100vw - 32px); max-width: 460px; max-height: calc(100dvh - 32px); overflow-y: auto; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 16px 48px rgba(0,0,0,.55); padding: 18px; } .inv-modal__close { position: absolute; top: 8px; right: 10px; background: transparent; border: 0; color: var(--text-sec); font-size: 26px; line-height: 1; cursor: pointer; } .inv-d-photo { width: 100%; display: flex; justify-content: center; margin-bottom: 12px; } .inv-d-photo img { max-width: 100%; max-height: 220px; object-fit: contain; border-radius: 8px; background: #fff; } .inv-d-title { font-size: 17px; margin: 0 0 2px; padding-right: 24px; } .inv-d-brand { font-size: 13px; color: var(--text-sec); margin-bottom: 12px; } .inv-d-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; } .inv-d-field { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .inv-d-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); } .inv-d-val { font-size: 13px; color: var(--text); word-break: break-word; } .inv-d-desc { font-size: 13px; color: var(--text-sec); margin-top: 12px; line-height: 1.4; } .inv-d-specs { margin-top: 12px; } .inv-d-specs-h { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); margin-bottom: 6px; } .inv-d-specs .inv-d-field { flex-direction: row; justify-content: space-between; gap: 10px; padding: 3px 0; border-bottom: 1px solid var(--border); } .inv-d-nodata { font-size: 13px; color: var(--text-dim); margin-top: 12px; } /* PHASE_37 — operator hide/show controls in the item detail modal. */ .inv-d-hide { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-left: 5px; vertical-align: middle; padding: 0; background: var(--bg-hover); color: var(--text-dim); border: 0; border-radius: 50%; font-size: 12px; line-height: 1; cursor: pointer; } .inv-d-hide:hover { background: var(--red); color: #fff; } .inv-d-photo { position: relative; } .inv-d-photo .inv-d-hide { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; font-size: 17px; background: rgba(0,0,0,.55); color: #fff; } .inv-d-hidden { margin-top: 14px; padding-top: 10px; border-top: 1px dashed var(--border); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .inv-d-unhide { background: var(--bg-input); border: 1px solid var(--border); color: var(--text-sec); border-radius: 999px; padding: 4px 10px; font-size: 12px; cursor: pointer; } .inv-d-unhide::before { content: '+ '; } /* PHASE_37 — multipack / multi-unit notices on the UPC capture panel. */ .upc-notes { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; justify-content: center; } .upc-note { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; } .upc-note--pack { background: rgba(125, 187, 255,.15); color: var(--blue); } .upc-note--multi { background: rgba(245,192,0,.15); color: var(--gold-ink); } /* PHASE_38 — UPC multi-unit quantity step. */ .upc-prog { font-size: 14px; color: var(--text-sec); margin: 8px 0 4px; } .upc-onfile { font-size: 14px; color: var(--green); margin: 6px 0; } .upc-qty-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 8px 0; } .upc-qty-btn { min-width: 56px; min-height: 48px; font-size: 18px; font-weight: 700; } /* ===================================================================== COSTCO_SCAN_TOOLKIT — bucket tabs (§F1), rich enrich panel (§F3), fetch-url + flag controls (§F2c/§F4), completion modal (§F5). Gold-on-dark tokens only; responsive at 375 / 768 / 1280. ===================================================================== */ /* §F1 — bucket tab bar (segmented control over the manifest table). */ .bucket-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 12px; } .bucket-tab { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-card); color: var(--text-sec); font-size: 14px; font-weight: 600; cursor: pointer; transition: border-color .15s ease, color .15s ease, background .15s ease; } .bucket-tab:hover { color: var(--text); border-color: var(--text-dim); } .bucket-tab:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } .bucket-tab__icon { flex: none; } .bucket-tab__count { display: inline-block; min-width: 20px; padding: 1px 7px; border-radius: 999px; background: var(--bg-input); color: var(--text-sec); font-size: 12px; text-align: center; } .bucket-tab--active { background: rgba(245,192,0,0.12); border-color: var(--gold); color: var(--gold-ink); } .bucket-tab--active .bucket-tab__count { background: var(--gold); color: var(--bg); } @media (max-width: 480px) { .bucket-tabs { gap: 6px; } .bucket-tab { flex: 1 1 calc(50% - 6px); justify-content: center; padding: 6px 10px; } } /* §F3 — rich enrichment panel. */ .enrich-panel { display: block; } .enrich-panel__status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; } .enrich-panel__hint { font-size: 13px; color: var(--text-sec); } .enrich-pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; border: 1px solid var(--border); } .enrich-pill--ok { background: rgba(113, 221, 140,0.14); color: var(--green); border-color: rgba(113, 221, 140,0.4); } .enrich-pill--not-found { background: rgba(255, 71, 71,0.14); color: var(--red); border-color: rgba(255, 71, 71,0.4); } .enrich-pill--error { background: rgba(184, 153, 235,0.14); color: var(--purple); border-color: rgba(184, 153, 235,0.4); } .enrich-pill--pending { background: rgba(245,192,0,0.14); color: var(--gold-ink); border-color: rgba(245,192,0,0.4); } .enrich-panel__hero { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; } .enrich-hero__img { flex: none; width: 96px; height: 96px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--bg-input); display: block; } .enrich-hero__img img { width: 100%; height: 100%; object-fit: contain; display: block; } .enrich-hero__body { flex: 1; min-width: 0; } .enrich-hero__title { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 6px; } .enrich-hero__title a { color: var(--gold-ink); } .enrich-hero__title a:hover { text-decoration: underline; } .enrich-hero__meta { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; font-size: 13px; color: var(--text-sec); margin-bottom: 6px; } .enrich-hero__price { color: var(--green); font-weight: 700; font-size: 15px; } .enrich-hero__brand { color: var(--text); font-weight: 600; } .enrich-hero__link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--gold-ink); } .enrich-hero__link:hover { text-decoration: underline; } .enrich-grid { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 0 0 14px; font-size: 13px; } .enrich-grid dt { color: var(--text-dim); font-weight: 600; } .enrich-grid dd { color: var(--text); margin: 0; word-break: break-word; } @media (max-width: 480px) { .enrich-panel__hero { flex-direction: column; } .enrich-hero__img { width: 100%; height: 160px; } .enrich-grid { grid-template-columns: 1fr; gap: 2px 0; } .enrich-grid dt { margin-top: 6px; } } /* §F2c/§F4 — panel footer: fetch-from-URL + flag/notes. */ .enrich-actions { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); } .enrich-actions__label { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text-sec); margin-bottom: 6px; } .enrich-fetch__row { display: flex; gap: 8px; flex-wrap: wrap; } .enrich-fetch__input { flex: 1; min-width: 200px; min-height: 44px; } .enrich-fetch__btn { min-height: 44px; flex: none; } .enrich-fetch__msg { font-size: 12px; color: var(--text-sec); margin-top: 6px; } .enrich-fetch__msg--error { color: var(--red); } .enrich-fetch__msg--ok { color: var(--green); } .enrich-flag { display: flex; flex-direction: column; gap: 8px; } .enrich-flag__toggle { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; min-height: 44px; padding: 8px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card); color: var(--text-sec); font-size: 14px; font-weight: 600; cursor: pointer; transition: border-color .15s ease, color .15s ease, background .15s ease; } .enrich-flag__toggle:hover { color: var(--text); border-color: var(--text-dim); } .enrich-flag__toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } .enrich-flag__toggle--on { background: rgba(245,192,0,0.14); border-color: var(--gold); color: var(--gold-ink); } .enrich-flag__notes { width: 100%; min-height: 60px; } .enrich-flag-chip { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 4px; font-size: 11px; font-weight: 700; background: rgba(245,192,0,0.16); color: var(--gold-ink); vertical-align: middle; } .enrich-manual-broken__icon { vertical-align: middle; margin-right: 4px; color: var(--gold-ink); } /* §F5 — modal shell (no existing .modal in the app). */ .modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; } .modal[hidden] { display: none; } .modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.6); } .modal__dialog { position: relative; width: 100%; max-width: 440px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 20px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); } .modal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .modal__title { font-size: 16px; color: var(--text); } .modal__close { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -10px -10px -10px 0; border: none; background: transparent; color: var(--text-sec); cursor: pointer; border-radius: 8px; } .modal__close:hover { color: var(--text); background: var(--bg-hover); } .modal__close:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } .modal__body { font-size: 15px; color: var(--text); margin-bottom: 18px; } .modal__actions { display: flex; gap: 10px; flex-wrap: wrap; } .modal__actions .btn { min-height: 44px; } @media (max-width: 480px) { .modal__actions { flex-direction: column; } .modal__actions .btn { width: 100%; } } /* ---------- BATCH_LABELS_QR — shared utilities (kill inline styles) ---------- */ .btn-row { display: flex; gap: 8px; flex-wrap: wrap; } .page-subtitle { color: var(--text-sec); font-size: 13px; margin-top: 4px; } /* ---------- BATCH_LABELS_QR — batch label picker (batch.html) ---------- */ .batch-labels { padding-bottom: 88px; } /* room for the sticky footer */ .batch-labels__header { margin-bottom: 12px; } .batch-labels__filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 16px; } .batch-labels__filter { display: flex; flex-direction: column; gap: 4px; } .batch-labels__filter-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-dim); } .batch-labels__filter .select { min-height: 44px; min-width: 160px; } .batch-labels__list { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--bg-card); } .batch-labels__list-header, .batch-labels__row { display: grid; grid-template-columns: 44px 120px 1fr 130px auto; align-items: center; gap: 8px; padding: 0 12px; } .batch-labels__list-header { min-height: 40px; background: var(--bg); color: var(--text-dim); font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--border); } .batch-labels__row { min-height: 52px; border-bottom: 1px solid var(--border); cursor: pointer; color: var(--text); margin: 0; } .batch-labels__row:last-child { border-bottom: none; } .batch-labels__row:hover { background: var(--bg-hover); } /* Distinct from :hover — a gold left bar + tint so selection reads clearly even on desktop where a hovered row would otherwise look the same. */ .batch-labels__row--selected { background: var(--bg-hover); box-shadow: inset 3px 0 0 var(--gold); } .batch-labels__row-checkbox { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; } .batch-labels__row-checkbox input { width: 20px; height: 20px; } .batch-labels__row-id { font-size: 13px; color: var(--text-sec); } .batch-labels__row-title { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .batch-labels__row-meta { font-size: 12px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .batch-labels__empty-state { padding: 20px; text-align: center; color: var(--text-dim); font-size: 14px; } .batch-labels__footer { position: sticky; bottom: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding: 12px 16px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; } .batch-labels__footer-count { font-size: 14px; color: var(--text-sec); font-weight: 600; } .batch-labels__footer-print-btn { min-height: 44px; } /* ---------- LABEL_PAGE_POLISH — top bar, mode toggle, pagination, row actions ---------- */ .batch-labels__top-bar { position: sticky; top: 0; z-index: 31; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; padding: 10px 16px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; } .batch-labels__mode-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; margin-left: auto; } .batch-labels__mode-toggle-option { min-height: 44px; padding: 0 14px; border: none; cursor: pointer; background: var(--bg); color: var(--text-sec); font-size: 13px; font-weight: 600; } .batch-labels__mode-toggle-option--active { background: var(--gold); color: #111118; } .batch-labels__pagination { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin: 12px 0; } .batch-labels__pagination-info { font-size: 12px; color: var(--text-dim); } .batch-labels__pagination-controls { display: flex; flex-wrap: wrap; gap: 4px; } .batch-labels__pagination-link { min-height: 44px; min-width: 44px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 8px; color: var(--text); text-decoration: none; font-size: 13px; background: var(--bg-card); } .batch-labels__pagination-link:hover { background: var(--bg-hover); } .batch-labels__pagination-link--active { background: var(--gold); color: #111118; border-color: var(--gold); } .batch-labels__pagination-link--gap { border: none; background: transparent; color: var(--text-dim); } .batch-labels__per-page .select { min-width: 90px; } .batch-labels__row-actions-head { font-size: 11px; } .batch-labels__row-actions { display: flex; gap: 4px; justify-content: flex-end; } .batch-labels__row-action { min-height: 44px; padding: 0 10px; border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; text-decoration: none; border: 1px solid var(--border); background: var(--bg); color: var(--text-sec); } .batch-labels__row-action:hover { background: var(--bg-hover); color: var(--text); } .batch-labels__row-action--print { color: var(--text); } .batch-labels__row-action--edit { color: var(--gold-ink); } .batch-labels__row-action--delete { color: var(--red); } .batch-labels__row--unallocated .batch-labels__row-id { color: var(--text-dim); font-style: italic; } /* Shared edit / delete modal overlays (reuse .modal__dialog for the card). */ .batch-labels__edit-modal, .batch-labels__delete-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0,0,0,0.6); } .batch-labels__edit-modal[hidden], .batch-labels__delete-modal[hidden] { display: none; } .batch-labels__edit-input { width: 100%; box-sizing: border-box; margin: 4px 0 8px; } .batch-labels__edit-error { color: var(--red); font-size: 13px; margin: 0 0 8px; } /* ---------- BATCH_LABELS_QR — public capture stub (capture_stub.html) ---------- */ .capture-stub { min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 24px; } .capture-stub__container { width: 100%; max-width: 420px; text-align: center; padding: 0 0 28px; overflow: hidden; } .capture-stub__brand-stripe { height: 8px; background: var(--gold); margin: 0 0 24px; } .capture-stub__id { font-size: 34px; font-weight: 700; color: var(--gold-ink); padding: 0 16px; word-break: break-all; } .capture-stub__title { font-size: 18px; color: var(--text); margin-top: 10px; padding: 0 20px; } .capture-stub__lot-info { font-size: 13px; color: var(--text-sec); margin-top: 8px; padding: 0 20px; } .capture-stub__placeholder-message { font-size: 14px; color: var(--text-dim); line-height: 1.5; margin: 20px 20px 0; } .capture-stub__link { margin: 24px 20px 0; min-height: 44px; } @media (max-width: 480px) { .batch-labels__filters { flex-direction: column; align-items: stretch; } .batch-labels__filter .select { width: 100%; } .batch-labels__list-header { display: none; } .batch-labels__row { grid-template-columns: 44px 1fr; row-gap: 4px; padding: 10px 12px; } .batch-labels__row-id { grid-column: 2; } .batch-labels__row-title { grid-column: 2; white-space: normal; } .batch-labels__row-meta { grid-column: 2; } .batch-labels__row-actions { grid-column: 1 / -1; justify-content: flex-start; flex-wrap: wrap; } .batch-labels__footer-print-btn { flex: 1; } /* Top bar collapses to a single wrapping row; toggle + CTA go full-width-ish. */ .batch-labels__top-bar { padding: 10px 12px; } .batch-labels__mode-toggle { margin-left: 0; } .batch-labels__top-bar .batch-labels__footer-print-btn { flex: 1; } } /* ---------- GRADING_TAXONOMY — grading KB admin (gkb-*) ---------- */ .gkb-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; } .gkb-card { text-decoration: none; color: var(--text); display: block; } .gkb-card:hover { background: var(--bg-hover); } .gkb-card__stat { font-size: 22px; font-weight: 700; color: var(--gold-ink); margin: 8px 0 4px; } .gkb-card__hint { font-size: 12px; color: var(--text-sec); } .gkb-two-pane { display: grid; grid-template-columns: 1fr 1.4fr; gap: 16px; align-items: start; } .gkb-pane { min-width: 0; } .gkb-list { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; } .gkb-empty { color: var(--text-dim); font-size: 13px; padding: 10px 0; } .gkb-row { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; background: var(--bg); } .gkb-row--selected { border-color: var(--gold); } .gkb-row--inactive { opacity: 0.55; } .gkb-row__main { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: var(--text); } .gkb-row__name { font-weight: 600; } .gkb-row__meta { font-size: 12px; color: var(--text-sec); } .gkb-row__edit { margin-top: 8px; } .gkb-edit-btn { display: inline-block; min-height: 44px; line-height: 28px; font-size: 13px; cursor: pointer; } /* The Edit controls are styled as buttons — suppress the native disclosure triangle so they render as clean buttons. */ .gkb-edit-btn { list-style: none; } .gkb-edit-btn::-webkit-details-marker { display: none; } .gkb-edit-form { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; } .gkb-edit-form .btn { min-height: 44px; } .gkb-inline-check { font-size: 13px; color: var(--text-sec); display: flex; align-items: center; gap: 6px; } .gkb-add { display: flex; gap: 8px; margin-top: 10px; } .gkb-add .input { flex: 1; } .gkb-add .btn, .gkb-type-add .btn { min-height: 44px; } .gkb-type-add { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); } .gkb-field { display: flex; flex-direction: column; gap: 4px; } .gkb-field label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-dim); } .gkb-field .input, .gkb-field .select { min-height: 44px; } .gkb-field--check { justify-content: flex-end; } .gkb-json { width: 100%; box-sizing: border-box; font-size: 12px; line-height: 1.5; } .gkb-json--ro { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 12px; overflow: auto; max-height: 460px; white-space: pre; color: var(--text); } @media (max-width: 900px) { .gkb-two-pane { grid-template-columns: 1fr; } } /* ================================================================ SnowUI shared component additions (resolves Wave 1 needs-decision). Token-driven; theme-adaptive. Use these instead of inline styles. ================================================================ */ /* Small button — compact action in table rows / toolbars. Compose with .btn. */ .btn-sm { padding: var(--space-2) var(--space-3); font-size: 12px; } /* Status banner — e.g. an active grading session notice. Compose .banner with a tint variant. Pair with .status-dot for a live indicator. */ .banner { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-5); border-radius: var(--radius-md); background: var(--bg-card); border: 1px solid var(--border); box-shadow: var(--shadow-sm); } .banner-green { background: var(--green-soft); border-color: transparent; } .banner-gold { background: var(--gold-soft); border-color: transparent; } .banner-red { background: var(--red-soft); border-color: transparent; } .status-dot { width: 10px; height: 10px; border-radius: var(--radius-pill); background: var(--green); flex-shrink: 0; } .status-dot--pulse { animation: status-pulse 1.6s ease-in-out infinite; } @keyframes status-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.85); } } /* Filter / chip toolbar — horizontal row of small controls that wraps. */ .filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-5); } /* Auth screen helpers (login / sign-in). */ .auth-logo { display: flex; justify-content: center; margin-bottom: var(--space-5); } .auth-logo img { height: 96px; width: auto; max-width: 100%; } .auth-hint { margin-top: var(--space-6); font-size: 11px; color: var(--text-dim); text-align: center; } /* ================================================================ Typography utilities + responsive stat grid (shared). ================================================================ */ .text-xs { font-size: var(--fs-xs); line-height: var(--lh-xs); } .text-sm { font-size: var(--fs-sm); line-height: var(--lh-sm); } .text-lg { font-size: var(--fs-lg); line-height: var(--lh-lg); } .text-muted { color: var(--text-sec); } .text-dim { color: var(--text-dim); } .eyebrow { font-size: 11px; font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 1px; color: var(--text-dim); } /* Sidebar sub-section label (e.g. Grading > Beta) — indented under a section. */ .nav-subsection { font-size: 9px; font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 1px; color: var(--text-dim); opacity: 0.85; margin: 10px 8px 4px 20px; } .app-shell.sidebar-collapsed .nav-subsection { display: none; } .mobile-nav__subsection { font-size: 10px; font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 1px; color: var(--text-dim); opacity: 0.85; padding: 6px 16px 2px; } /* Auto-fit metric grid — replaces fixed repeat(4,1fr) so cards reflow on phone. */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-6); } /* ================================================================ Light-mode status legibility — SnowUI pastels are too light for small text on white; nudge them darker only in light mode. ================================================================ */ [data-theme="light"] { --green: #2f9e54; --red: #e5484d; --blue: #3b82c4; --purple: #8b5cf6; --orange: #d98324; } /* ================================================================ ERP DASHBOARD components (home + grading). ================================================================ */ /* Section heading with optional "view all" link */ .dash-section { margin: var(--space-7) 0 var(--space-3); display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); } .dash-section h2 { font-size: var(--fs-lg); font-weight: var(--fw-bold); margin: 0; } .dash-section a { font-size: 12px; } /* Rich KPI card: label, big value, delta pill, sparkline */ .kpi { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-5); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: var(--space-2); position: relative; overflow: hidden; } .kpi__label { font-size: 11px; font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 1px; color: var(--text-dim); } .kpi__row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3); margin-top: auto; } .kpi__value { font-size: 28px; font-weight: var(--fw-bold); letter-spacing: -0.5px; line-height: 1; } .kpi__sub { font-size: 12px; color: var(--text-sec); } .kpi__spark { width: 96px; height: 34px; flex-shrink: 0; opacity: 0.95; } .kpi--scaffold { border-style: dashed; box-shadow: none; } .kpi--scaffold .kpi__value { color: var(--text-dim); } /* Delta pill (up/down) */ .delta { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: var(--fw-semibold); padding: 2px 7px; border-radius: var(--radius-pill); } .delta--up { color: var(--green); background: var(--green-soft); } .delta--down { color: var(--red); background: var(--red-soft); } .delta--flat { color: var(--text-sec); background: var(--bg-hover); } /* Chart card */ .chart-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow); } .chart-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); } .chart-card__title { font-size: 14px; font-weight: var(--fw-semibold); } .chart-card__meta { font-size: 12px; color: var(--text-sec); } .dash-row { display: grid; gap: var(--space-4); margin-bottom: var(--space-4); } .dash-row--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .dash-row--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } /* Flipwise product detail — hero (image + key facts) */ .fw-hero { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: var(--space-5); align-items: start; } .fw-hero__img { width: 100%; aspect-ratio: 1 / 1; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--bg-input); object-fit: contain; display: block; } .fw-hero__empty { width: 100%; aspect-ratio: 1 / 1; border-radius: var(--radius-md); border: 1px dashed var(--border); background: var(--bg-input); display: grid; place-items: center; color: var(--text-dim); font-size: 13px; } .fw-thumbs { display: flex; gap: 8px; overflow-x: auto; margin-top: 10px; padding-bottom: 4px; } .fw-thumbs img { width: 56px; height: 56px; flex: 0 0 auto; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); cursor: pointer; } .fw-quicklinks { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-4); } @media (max-width: 720px) { .fw-hero { grid-template-columns: 1fr; } } /* Log-sale modal hero image (from the eBay listing / product) */ .ls-hero { display: flex; justify-content: center; margin-bottom: 14px; } .ls-hero img { max-width: 100%; max-height: 170px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--bg-input); object-fit: contain; } /* Axis area charts (rendered by mini-charts.js) */ .js-chart { width: 100%; min-height: 200px; } /* legacy area-chart bits (kept for any non-JS callers) */ .area-chart-wrap { position: relative; } .area-chart { width: 100%; height: 180px; display: block; } .area-chart-dot { position: absolute; left: 100%; width: 9px; height: 9px; border-radius: 50%; background: var(--dot); transform: translate(-50%, -50%); box-shadow: 0 0 0 3px var(--bg-card), 0 0 10px 1px var(--dot); pointer-events: none; } .area-chart__labels { display: flex; justify-content: space-between; margin-top: var(--space-2); font-size: 9px; color: var(--text-dim); } .area-chart__axis { font-size: 9px; fill: var(--text-dim); } .spark-svg { width: 100%; height: 100%; display: block; } /* Donut */ .donut-wrap { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; } .donut { width: 140px; height: 140px; flex-shrink: 0; } .donut__hole-value { font-size: 22px; font-weight: var(--fw-bold); fill: var(--text); } .donut__hole-label { font-size: 7px; fill: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; } .donut-legend { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; flex: 1; } .donut-legend li { display: flex; align-items: center; gap: var(--space-2); font-size: 13px; list-style: none; } .donut-legend ul { margin: 0; padding: 0; } .legend-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; } .legend-val { margin-left: auto; color: var(--text-sec); font-weight: var(--fw-semibold); } /* Horizontal bar list */ .bar-list { display: flex; flex-direction: column; gap: var(--space-3); } .bar-list__row { display: grid; grid-template-columns: 1fr; gap: 4px; } .bar-list__top { display: flex; justify-content: space-between; gap: var(--space-3); font-size: 13px; } .bar-list__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bar-list__val { color: var(--text-sec); font-weight: var(--fw-semibold); flex-shrink: 0; } .bar-list__track { height: 8px; background: var(--bg-input); border-radius: var(--radius-pill); overflow: hidden; } .bar-list__fill { height: 100%; border-radius: var(--radius-pill); } /* Activity feed */ .feed { display: flex; flex-direction: column; } .feed__item { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--border); } .feed__item:last-child { border-bottom: 0; } .feed__dot { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; } .feed__body { min-width: 0; flex: 1; } .feed__text { font-size: 13px; color: var(--text); line-height: 1.35; } .feed__time { font-size: 11px; color: var(--text-dim); margin-top: 2px; } /* Scaffold / not-connected empty state (Sales, outbound shipping) */ .scaffold { border: 1px dashed var(--border); border-radius: var(--radius-md); padding: var(--space-7) var(--space-5); text-align: center; background: var(--bg-card); box-shadow: none; } .scaffold__icon { font-size: 26px; opacity: 0.5; margin-bottom: var(--space-2); } .scaffold__title { font-size: 14px; font-weight: var(--fw-semibold); margin-bottom: var(--space-1); } .scaffold__hint { font-size: 12px; color: var(--text-dim); max-width: 320px; margin: 0 auto var(--space-4); } .scaffold__channels { display: flex; gap: var(--space-2); justify-content: center; flex-wrap: wrap; } .scaffold__channels .badge { opacity: 0.7; } /* Chart empty state (when a live series has no data yet) */ .chart-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1); min-height: 160px; color: var(--text-dim); text-align: center; } .chart-empty__icon { font-size: 22px; opacity: 0.5; } /* ================================================================ Deferred shared utility classes (replace repeated inline patterns) + SnowUI glass flourishes. Reference these in new pages. ================================================================ */ .empty-state { text-align: center; color: var(--text-sec); font-size: 13px; padding: var(--space-8) var(--space-5); } .empty-state__icon { display: block; font-size: 26px; opacity: 0.5; margin-bottom: var(--space-2); } .help-text { font-size: 12px; color: var(--text-sec); } .section-label { font-size: 12px; font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-dim); } .input-sm { padding: var(--space-2) var(--space-3); font-size: 12px; } .badge-lg { font-size: 13px; padding: 6px 12px; } /* Frosted-glass overlays & popovers (progressive enhancement — degrades to the existing solid/scrim background where backdrop-filter is unsupported). */ .visual-modal-overlay, .batch-labels__edit-modal, .batch-labels__delete-modal { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .mobile-nav__list { background: color-mix(in srgb, var(--bg-card) 82%, transparent); backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur)); box-shadow: var(--shadow-lg); } .flash { background: color-mix(in srgb, var(--bg-card) 88%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } /* Warehouse phone-first screens — bring bespoke cards onto the SnowUI elevated look (soft shadow). Layout/JS untouched; purely additive. */ .recon-header, .recon-line-list, .recon-search-results, .upc-list { box-shadow: var(--shadow-sm); } /* ============================================================ SnowUI — avatars, user management table, edit drawer, profile (adapted from the SnowUI Figma into our dark+gold tokens; themes automatically in both light and dark via the existing variables) ============================================================ */ /* Avatars — uploaded photo, gradient preset, or initials fallback. */ .av { position: relative; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; overflow: hidden; flex-shrink: 0; line-height: 1; font-weight: 700; color: #fff; border: 1px solid var(--border); background: linear-gradient(135deg, #3f3f5a, #26263a); } .av__initial { user-select: none; } .av__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .av--violet { background: linear-gradient(135deg, #8b5cf6, #6366f1); } .av--blue { background: linear-gradient(135deg, #3b82f6, #06b6d4); } .av--teal { background: linear-gradient(135deg, #14b8a6, #0ea5e9); } .av--green { background: linear-gradient(135deg, #22c55e, #16a34a); } .av--amber { background: linear-gradient(135deg, #f59e0b, #f97316); } .av--rose { background: linear-gradient(135deg, #f43f5e, #ec4899); } .av--slate { background: linear-gradient(135deg, #64748b, #334155); } .av--gold { background: linear-gradient(135deg, #f5c000, #b8860b); } .av--gold .av__initial, .av--amber .av__initial { color: #1a1a1a; } /* Filled field — small label stacked above the value inside a bordered box. */ .field-filled { display: block; background: var(--bg-input); border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; transition: border-color 0.15s; } .field-filled:focus-within { border-color: var(--gold); } .field-filled__label { display: block; font-size: 12px; line-height: 16px; color: var(--text-dim); margin-bottom: 2px; } .field-filled input, .field-filled select, .field-filled textarea { width: 100%; background: transparent; border: 0; outline: none; color: var(--text); font: inherit; font-size: 14px; line-height: 20px; padding: 0; } .field-filled input[type="file"] { font-size: 12px; color: var(--text-sec); } .field-filled input::placeholder { color: var(--text-dim); } .field-filled--readonly { opacity: 0.7; } /* Toolbar above the user table. */ .snow-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; } .snow-toolbar__title { font-size: 16px; font-weight: 700; } /* User management table. */ .user-table { width: 100%; border-collapse: separate; border-spacing: 0; } .user-table th { text-align: left; font-size: 11px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em; padding: 10px 14px; border-bottom: 1px solid var(--border); } .user-table td { padding: 12px 14px; border-bottom: 1px solid var(--border); font-size: 13px; color: var(--text); vertical-align: middle; } .user-table tbody tr { transition: background 0.12s; cursor: pointer; } .user-table tbody tr:hover { background: var(--bg-hover); } .user-table tbody tr:last-child td { border-bottom: 0; } .user-cell { display: flex; align-items: center; gap: 10px; } .user-cell__name { font-weight: 600; } .user-cell__sub { font-size: 12px; color: var(--text-dim); } .user-table__actions { text-align: right; white-space: nowrap; } @media (max-width: 760px) { .user-table thead { display: none; } .user-table, .user-table tbody, .user-table tr, .user-table td { display: block; width: 100%; } .user-table tr { border: 1px solid var(--border); border-radius: 10px; margin-bottom: 10px; padding: 6px; } .user-table td { border: 0; padding: 6px 10px; } .user-table__actions { text-align: left; } } /* Right slide-in drawer (create / edit user). */ .drawer-scrim { position: fixed; inset: 0; background: rgba(0,0,0,0.5); opacity: 0; visibility: hidden; transition: opacity 0.2s; z-index: 900; } .drawer-scrim.open { opacity: 1; visibility: visible; } /* Hide the bottom-right floating update FAB + version badge while a drawer is open — they sit on top of the right-side drawer otherwise. */ body.drawer-open .update-fab, body.drawer-open .app-version-badge { display: none !important; } .drawer { position: fixed; top: 0; right: 0; height: 100vh; width: 440px; max-width: 92vw; background: var(--bg-card); border-left: 1px solid var(--border); box-shadow: -8px 0 30px rgba(0,0,0,0.3); transform: translateX(100%); transition: transform 0.22s ease; z-index: 901; display: flex; flex-direction: column; } .drawer.open { transform: translateX(0); } .drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; border-bottom: 1px solid var(--border); } .drawer__title { font-size: 18px; font-weight: 700; } .drawer__close { background: transparent; border: 0; color: var(--text-sec); cursor: pointer; font-size: 24px; line-height: 1; padding: 2px 6px; border-radius: 8px; } .drawer__close:hover { color: var(--text); background: var(--bg-hover); } .drawer__body { padding: 24px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 16px; } .drawer__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 24px; border-top: 1px solid var(--border); } @media (max-width: 520px) { .drawer { width: 100vw; } } /* Avatar picker (drawer + profile). */ .av-picker { display: flex; flex-direction: column; align-items: center; gap: 16px; } .av-presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 12px; width: 100%; } .av-presets__opt { cursor: pointer; display: inline-flex; } .av-presets__opt input { position: absolute; opacity: 0; width: 0; height: 0; } .av-presets__opt .av { width: 44px; height: 44px; font-size: 16px; border: 2px solid transparent; transition: box-shadow 0.15s; } .av-presets__opt input:checked + .av { box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 4px var(--gold); } .av-picker__divider { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.1em; } .av-picker__upload { width: 100%; } /* Self-service profile card. */ .profile-wrap { max-width: 580px; } .profile-fields { display: flex; flex-direction: column; gap: 14px; } /* ============================================================ SHARED DASHBOARD SYSTEM — page headers, toolbars, data tables, states, and button variants. Snow-style, token-driven. Prefer these over one-off markup so every page stays consistent. (paired with _components/ui.html + js/data-table.js) ============================================================ */ /* ---- Page header ---- */ .page-header { flex-wrap: wrap; gap: var(--space-3); } .page-header .page-title { margin: 0; } .page-header__titles { min-width: 0; } .page-header__actions { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; } /* ---- Toolbar / filter bar ---- */ .toolbar { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-4); } .toolbar__end { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; } /* data-table.js layout: LEFT [search][filters][reset] .... RIGHT [count][Views][Columns] */ .dt-toolbar-left { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; } /* longer search (grows to fill), narrower filter dropdowns (toolbar only) */ .dt-toolbar-left { flex: 1 1 auto; } .dt-toolbar-left .search-field { flex: 2 1 520px; min-width: 300px; } .dt-toolbar-left .search-field__input { width: 100%; } /* beat .toolbar .input { width:auto } */ .dt-toolbar-left .snow-select__btn { min-width: 118px; } @media (max-width: 640px) { .dt-toolbar-left, .dt-toolbar-left .search-field { flex-basis: 100%; min-width: 0; width: 100%; } } /* No margin-left:auto here — the left group's flex:1 pushes this to the far right. An auto margin would eat the free space so the search never widens. */ .dt-toolbar-right { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; } .toolbar .select, .toolbar .input { width: auto; } .toolbar .select { min-width: 150px; } @media (max-width: 640px) { .toolbar { gap: var(--space-2); } .toolbar__end, .dt-toolbar-right, .dt-toolbar-left { margin-left: 0; width: 100%; } .search-field { flex: 1; } } /* ---- Search field (icon + input) ---- */ .search-field { position: relative; display: inline-flex; align-items: center; min-width: 220px; } .search-field__icon { position: absolute; left: 12px; color: var(--text-dim); pointer-events: none; } .search-field__input { padding-left: 36px; width: 100%; } input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; } .table-count { font-size: var(--fs-xs); color: var(--text-dim); white-space: nowrap; } /* ---- Data table (extends .table) ---- */ .data-table-wrap { width: 100%; } .data-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .data-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-sm); } .data-table thead th { text-align: left; padding: 10px 14px; font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-dim); background: var(--bg-input); border-bottom: 1px solid var(--border); white-space: nowrap; } .data-table tbody td { padding: 12px 14px; border-bottom: 1px solid var(--border); color: var(--text); vertical-align: middle; } .data-table tbody tr { transition: background 0.12s; } .data-table tbody tr:hover { background: var(--bg-hover); } .data-table tbody tr:last-child td { border-bottom: 0; } .data-table--sticky thead th { position: sticky; top: 0; z-index: 3; } .data-table thead th:first-child { border-top-left-radius: var(--radius); } .data-table thead th:last-child { border-top-right-radius: var(--radius); } /* Sortable headers + asc/desc indicator */ .data-table th.sortable { cursor: pointer; user-select: none; padding-right: 26px; position: relative; } .data-table th.sortable:hover { color: var(--text-sec); } .data-table th.sortable::after { content: ''; position: absolute; right: 10px; top: 50%; margin-top: -3px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; opacity: 0.25; } .data-table th.sortable.is-asc::after { border-top: 0; border-bottom: 5px solid var(--gold); opacity: 1; } .data-table th.sortable.is-desc::after { border-top: 5px solid var(--gold); opacity: 1; } /* Cell utilities */ .cell-num { text-align: right; font-variant-numeric: tabular-nums; } .cell-actions { text-align: right; white-space: nowrap; } .row-actions { display: inline-flex; gap: var(--space-2); justify-content: flex-end; align-items: center; } .truncate { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---- Empty state ---- */ .empty-state { text-align: center; padding: var(--space-8) var(--space-4); color: var(--text-sec); } .empty-state__icon { color: var(--text-dim); margin-bottom: var(--space-3); } .empty-state__title { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text); } .empty-state__msg { font-size: var(--fs-xs); color: var(--text-dim); margin-top: var(--space-1); } /* ---- Loading skeleton ---- */ .skeleton { background: linear-gradient(90deg, var(--bg-hover) 25%, var(--bg-input) 37%, var(--bg-hover) 63%); background-size: 400% 100%; animation: skeleton-shimmer 1.4s ease infinite; border-radius: var(--radius-sm); color: transparent !important; } @keyframes skeleton-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } /* ---- Inline alerts (error / info) ---- */ .alert { display: flex; gap: var(--space-2); align-items: flex-start; padding: var(--space-3) var(--space-4); border-radius: var(--radius); font-size: var(--fs-sm); border: 1px solid var(--border); } .alert-error { background: var(--red-soft); border-color: rgba(255,71,71,0.3); color: var(--text); } .alert-info { background: var(--blue-soft); border-color: rgba(125,187,255,0.3); color: var(--text); } /* ---- Button states + variants ---- */ .btn:disabled, .btn.is-disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; } .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--gold-soft); } .btn svg { flex-shrink: 0; } .btn-ghost { background: transparent; border-color: transparent; color: var(--text-sec); } .btn-ghost:hover { background: var(--bg-hover); color: var(--text); } .btn-icon { padding: 0; width: 36px; height: 36px; border-radius: var(--radius); flex-shrink: 0; } .btn-icon.btn-sm { width: 30px; height: 30px; } /* Loading — spinner replaces content without changing the button's box size */ .btn.is-loading { position: relative; color: transparent !important; pointer-events: none; } .btn.is-loading::after { content: ''; position: absolute; width: 15px; height: 15px; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; opacity: 0.9; animation: btn-spin 0.6s linear infinite; } .btn-gold.is-loading::after { color: #000; } @keyframes btn-spin { to { transform: rotate(360deg); } } /* ============================================================ Card view + segmented toggle — reusable Cards/Table pattern. Pair a .data-table with a [data-table-cards] .dt-cards grid (children keyed by data-row-key) and a .seg toggle. The data-table engine keeps the cards filtered/sorted in sync. ============================================================ */ .view-bar { display: flex; justify-content: flex-end; margin-bottom: var(--space-3); } .seg { display: inline-flex; gap: 2px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 9px; padding: 3px; } .seg__btn { border: 0; background: none; color: var(--text-sec); font: inherit; font-size: 12.5px; font-weight: 600; padding: 6px 13px; border-radius: 7px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; } .seg__btn:hover { color: var(--text); } .seg__btn.is-active { background: var(--gold-soft); color: var(--gold-ink); } .seg__btn svg { width: 15px; height: 15px; } .dt-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; } .dt-card { display: block; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 15px 16px; text-decoration: none; color: var(--text); transition: border-color 0.15s, background 0.15s; } .dt-card:hover { border-color: var(--text-dim); background: var(--bg-hover); text-decoration: none; } .dt-card__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; } .dt-card__title { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; } .dt-card__meta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; } .dt-card__k { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-dim); } .dt-card__v { display: block; font-size: 13px; color: var(--text); margin-top: 1px; } /* ---- Progress bar (color-coded: green=done, gold=in progress, muted=idle) ---- */ .progress-row { display: flex; align-items: center; gap: 10px; width: 100%; } .progress { flex: 1; height: 6px; border-radius: var(--radius-pill); background: var(--bg-hover); overflow: hidden; min-width: 40px; } .progress__fill { height: 100%; border-radius: var(--radius-pill); transition: width 0.3s ease; } .progress__fill--green { background: var(--green); } .progress__fill--gold { background: var(--gold); } .progress__fill--muted { background: var(--text-dim); } .progress-label { font-size: 13px; font-weight: 500; color: var(--text-sec); white-space: nowrap; font-variant-numeric: tabular-nums; } /* Zebra striping for data-tables — applied to alternating VISIBLE rows by the engine (.dt-alt) so it stays correct after search/filter/sort. Hover wins. */ .data-table tbody tr.dt-alt { background: rgba(128, 128, 128, 0.10); } .data-table tbody tr.dt-alt:hover { background: var(--bg-hover); } /* ===== Columns + Views bar (data-table.js, tables with data-table-key) ===== */ .dt-viewbar { display: inline-flex; gap: 8px; align-items: center; } .dt-viewbar--standalone { display: flex; flex-wrap: wrap; margin-bottom: var(--space-4); } .dt-ctrl { position: relative; display: inline-flex; } /* pill "chips" (Columns / Views / Save) */ .dt-chip { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; font: 600 13px/1 var(--font-sans, inherit); color: var(--text); cursor: pointer; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-pill); box-shadow: var(--shadow-sm); transition: border-color .15s, background .15s, color .15s; } .dt-chip:hover { border-color: var(--border-strong, var(--border)); background: var(--bg-hover); } .dt-chip svg { opacity: .8; } .dt-chip.is-on { border-color: var(--gold); color: var(--gold-ink, var(--gold)); background: var(--gold-soft); } .dt-chip--accent { background: var(--gold); color: #1a1a1a; border-color: transparent; } .dt-chip--accent:hover { filter: brightness(1.05); background: var(--gold); color: #1a1a1a; } .dt-chip--sm { height: 30px; padding: 0 11px; font-size: 12px; } /* Stacked full-width buttons in the Columns panel (Save default / Save named / Resize) */ .dt-panel-save { width: 100%; justify-content: center; margin: 0 0 6px; } .dt-resize-toggle.dt-panel-save { margin-bottom: 2px; } /* custom Views dropdown button */ .dt-view { position: relative; } .dt-view-btn { min-width: 150px; justify-content: space-between; } .dt-view-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; } /* dropdown menu + column panel share the floating-card look */ .dt-menu, .dt-colpanel { position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 6px; min-width: 240px; max-height: 360px; overflow: auto; } .dt-menu__item { display: flex; align-items: center; gap: 4px; width: 100%; padding: 2px; border-radius: 10px; } .dt-menu > button.dt-menu__item { padding: 9px 12px; border: 0; background: transparent; color: var(--text); font: 600 13px/1 var(--font-sans, inherit); text-align: left; cursor: pointer; } .dt-menu__item:hover { background: var(--bg-hover); } .dt-menu__item.is-sel { background: var(--gold-soft); } .dt-menu__name { flex: 1; min-width: 0; padding: 9px 12px; border: 0; background: transparent; color: var(--text); font: 600 13px/1 var(--font-sans, inherit); text-align: left; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dt-menu__act { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--text-dim); cursor: pointer; opacity: 0; transition: opacity .12s, color .12s, background .12s; } .dt-menu__item:hover .dt-menu__act { opacity: 1; } .dt-menu__act:hover { background: var(--bg-input); color: var(--text); } .dt-menu__act.is-on { opacity: 1; color: var(--gold); } /* column manager panel */ .dt-colpanel__head { font-size: 12px; font-weight: 700; padding: 6px 8px 2px; } .dt-colpanel__head--sub { margin-top: 8px; border-top: 1px solid var(--border); padding-top: 10px; } .dt-colpanel__hint { font-size: 11px; color: var(--text-dim); padding: 0 8px 8px; } .dt-colpanel__list { display: flex; flex-direction: column; gap: 2px; } .dt-colrow { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 10px; font-size: 13px; } .dt-colrow:hover { background: var(--bg-hover); } .dt-colrow.dt-dragging { opacity: .5; } .dt-grip { display: grid; place-items: center; width: 22px; color: var(--text-dim); cursor: grab; } .dt-grip:active { cursor: grabbing; } .dt-colrow__lab { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; cursor: pointer; } .dt-colrow__lab span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dt-arrow { width: 26px; height: 26px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--text-dim); cursor: pointer; } .dt-arrow:hover { background: var(--bg-input); color: var(--text); } /* keep a customised sidebar hidden (layout preserved) until its saved layout is rebuilt, so the plain server nav never flashes first. Brand/logo stays put. */ html.sidebar-hydrating .app-shell .sidebar > :not(.brand) { visibility: hidden; } /* keep a saved-view table hidden until the engine applies its view, so it never flashes the default columns/order first. Engine adds .dt-ready when done; the animation is a pure-CSS safety that reveals it even if the JS never runs. */ table[data-table-key]:not(.dt-ready) { visibility: hidden; animation: dt-reveal-fallback 0s linear 4s forwards; } @keyframes dt-reveal-fallback { to { visibility: visible; } } /* resize handle — inert by default so headers stay fully clickable for sort; only the "Resize" toggle (table.dt-resizable) makes edges draggable/visible */ .dt-resize { position: absolute; top: 0; right: 0; width: 12px; height: 100%; user-select: none; touch-action: none; z-index: 2; pointer-events: none; cursor: col-resize; } .dt-resize::after { content: ""; position: absolute; top: 22%; right: 4px; height: 56%; width: 2px; border-radius: 2px; background: var(--border-strong, var(--border)); opacity: 0; transition: opacity .12s, background .12s; } table.dt-resizable .dt-resize { pointer-events: auto; } table.dt-resizable .dt-resize::after { opacity: .55; } table.dt-resizable .dt-resize:hover::after { opacity: 1; background: var(--gold); } /* "Resize" toggle chip lit while resize mode is on */ .dt-resize-toggle.is-on { border-color: var(--gold); color: var(--gold-ink, var(--gold)); background: var(--gold-soft); } /* while dragging, force the resize cursor everywhere and kill text selection */ body.dt-resizing, body.dt-resizing * { cursor: col-resize !important; user-select: none !important; } /* once resized, each column is a fixed width and clips its own content (with an ellipsis) so a narrowed column can't bleed into its neighbour */ table.dt-fixed { table-layout: fixed; } table.dt-fixed th, table.dt-fixed td { overflow: hidden; text-overflow: ellipsis; } /* ===== Snow custom-select (snow-select.js) — replaces native