/* ===== ANIMATIONS ===== */ @keyframes shimmer-bar { 0% { transform: translateX(-100%); } 100% { transform: translateX(400%); } } /* ===== BOOT SCREEN ===== * App.init adds `app-booting` to on first paint and removes * it once auth resolves. Without this, the user sees a flash of the * post-signin setup welcome step while JS is deciding which top- * level screen to display. The pseudo-element overlays everything * (above splash + auth + app), painting the canvas color and a * small centered spinner so the page feels like it's loading * rather than rendering then re-rendering. */ body.app-booting::before { content: ''; position: fixed; inset: 0; z-index: 100000; background: var(--bg, #F7F4EE); } body.app-booting::after { content: ''; position: fixed; top: 50%; left: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; border: 2px solid rgba(0,0,0,0.12); border-top-color: rgba(0,0,0,0.55); border-radius: 50%; z-index: 100001; animation: app-boot-spin 0.8s linear infinite; } html.dark-mode body.app-booting::after { border-color: rgba(255,255,255,0.18); border-top-color: rgba(255,255,255,0.7); } @keyframes app-boot-spin { to { transform: rotate(360deg); } } /* ===== RESET & BASE ===== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* Light mode (default) */ :root { --bg: #F7F4EE; --sf: #FDFCF9; --sf2: #EDE9DF; --sf3: #E0DBCF; --bd: #DDD8CE; --bd2: #DDD8CE; --tx: #2A2520; --tx2: #4A433C; --tx3: #7A7168; --ac: #2A2520; --ac2: #4A433C; --ac-text: #FDFCF9; --acl: #EDE9DF; --acb: #E0DBCF; --gn: #1E4D35; --gnl: #E8F0EB; --gnb: #B4D7C4; --bl: #1E3A5F; --bll: #E8EEF4; --blb: #B4C8DE; --am: #B45309; --aml: #FEF3C7; --amb: #FDE68A; --rd: #C0392B; --rdl: #FEE2E2; --rdb: #FECACA; --ghost: #7A7168; --pending-bg: #FEF3C7; --pending-text: #B45309; --se: 'Fraunces', serif; --sa: 'DM Sans', sans-serif; --sidebar-w: 240px; --radius-card: 12px; --radius-btn: 100px; --sh: none; --shs: none; --transition: 0.15s ease; } /* Dark mode (manual toggle) */ html.dark-mode { --bg: #0D0D0D; --sf: #1A1A1A; --sf2: #232323; --sf3: #2C2C2C; --bd: #2A2A2A; --bd2: #333333; --tx: #FFFFFF; --tx2: #B0B0B0; --tx3: #777777; --ghost: #555555; --acl: #1A1510; --acb: #3A2A1A; --gnl: #0D2A1F; --gnb: #166534; --bll: #0D1A2E; --blb: #1E3A5F; --aml: #2A2000; --amb: #4A3A00; --rdl: #2A0D0D; --rdb: #4A1A1A; --pending-bg: #2A2000; --pending-text: #FBBF24; /* The five "strong" colors (used as foreground text on dark-tint * backgrounds and as solid pill backgrounds) need a flip in dark * mode. Without these overrides --ac/--gn/--bl/--am/--rd inherit * their light-mode values, so things like "Review all N brands" * (--ac on --aml), the OWNER role badge (--bl on --bll), and the * inventory dashboard preview footers (--ac) render as dark text * on dark backgrounds — invisible. * * Components that use these as a SOLID pill background (e.g. * `.btn-primary` extensions, `.export-step-dot.active`) get a * lighter-but-saturated pill in dark mode, which matches the * existing pattern of light buttons (`.btn-primary` itself uses * --tx/--sf and renders as a white pill in dark mode). */ --ac: #F5EBD8; /* warm cream — used as text on --acl, or as a light button bg */ --ac-text: #1A1510; /* dark text on top of --ac */ --ac2: #D6CDB8; --gn: #4ADE80; /* emerald 400 */ --bl: #93C5FD; /* sky 300 */ --am: #FBBF24; /* amber 400 */ --rd: #F87171; /* red 400 */ } /* Sidebar active state in dark mode — the cross-mode default * (`background: var(--tx)`) flips to a stark white pill, which * jars against the dark sidebar. Use a subtle elevation instead. * Border-left accent pulls the eye without a high-contrast block. */ html.dark-mode .sidebar-item.active { background: var(--sf2); color: var(--tx); border-left-color: var(--ac); } html.dark-mode .sidebar-item.active .sidebar-item-badge { background: rgba(255, 255, 255, 0.10); color: var(--tx); } html.dark-mode .data-mode-btn.active { background: var(--sf2); border-color: var(--sf2); } html.dark-mode .data-mode-btn.active .data-mode-label { color: var(--tx); } html.dark-mode .data-mode-btn.active .data-mode-desc { color: var(--tx3); } html.dark-mode .data-mode-btn.active .data-mode-icon { color: var(--tx3); } html.dark-mode .data-mode-btn.active::after { background: var(--tx); color: var(--sf); } html.dark-mode .pill.active { background: var(--sf2); border-color: var(--sf2); color: var(--tx); } html.dark-mode .pill.active .pill-hint { color: var(--tx3); } html.dark-mode .sb-product-icon { background: var(--tx); color: var(--bg); } html.dark-mode .sb-avatar { background: var(--tx); color: var(--bg); } html.dark-mode .generate-bar { background: rgba(13,13,13,0.95); } html.dark-mode .topbar { background: rgba(26,26,26,0.95); } html.dark-mode .empty-state-card { border-color: var(--bd); } /* Tabs & filters in dark mode */ html.dark-mode .tab { background: var(--sf2); border-color: var(--bd); color: var(--tx2); } html.dark-mode .tab:hover { color: var(--tx); } html.dark-mode .tab.active { background: var(--sf3); border-color: var(--tx3); color: var(--tx); } /* Source role badges in dark mode */ html.dark-mode .source-role.sales { background: #1A2A3A; color: #7AB8E8; border-color: #2A3A4A; } html.dark-mode .source-role.inventory { background: #1A2E1F; color: #5EC47A; border-color: #2A3E2F; } html.dark-mode .source-role.both { background: #2A2000; color: #E8B830; border-color: #3A3010; } /* History in dark mode */ html.dark-mode .history-status.completed { color: #4ADE80; } html.dark-mode .history-status.in-progress { color: #FBBF24; } html.dark-mode .history-po-range { color: var(--tx) !important; } html.dark-mode .main-area::before { background: #5A4A32; opacity: 0.1; } html.dark-mode .main-area::after { background: #3A5A3E; opacity: 0.1; } html.dark-mode .bg-blob-3 { background: #3A4A5A; opacity: 0.1; } html.dark-mode .bg-blob-4 { background: #5A4A32; opacity: 0.06; } /* Auto dark mode — follows system preference when no explicit theme is set */ @media (prefers-color-scheme: dark) { html:not(.light-mode) { --bg: #0D0D0D; --sf: #1A1A1A; --sf2: #232323; --sf3: #2C2C2C; --bd: #2A2A2A; --bd2: #333333; --tx: #FFFFFF; --tx2: #B0B0B0; --tx3: #777777; --ghost: #555555; --acl: #1A1510; --acb: #3A2A1A; --gnl: #0D2A1F; --gnb: #166534; --bll: #0D1A2E; --blb: #1E3A5F; --aml: #2A2000; --amb: #4A3A00; --rdl: #2A0D0D; --rdb: #4A1A1A; --pending-bg: #2A2000; --pending-text: #FBBF24; } html:not(.light-mode) .data-mode-btn.active { background: var(--sf2); border-color: var(--sf2); } html:not(.light-mode) .data-mode-btn.active .data-mode-label { color: var(--tx); } html:not(.light-mode) .data-mode-btn.active .data-mode-desc { color: var(--tx3); } html:not(.light-mode) .data-mode-btn.active .data-mode-icon { color: var(--tx3); } html:not(.light-mode) .data-mode-btn.active::after { background: var(--tx); color: var(--sf); } html:not(.light-mode) .pill.active { background: var(--sf2); border-color: var(--sf2); color: var(--tx); } html:not(.light-mode) .pill.active .pill-hint { color: var(--tx3); } html:not(.light-mode) .sb-product-icon { background: var(--tx); color: var(--bg); } html:not(.light-mode) .sb-avatar { background: var(--tx); color: var(--bg); } html:not(.light-mode) .generate-bar { background: rgba(13,13,13,0.95); } html:not(.light-mode) .topbar { background: rgba(26,26,26,0.95); } html:not(.light-mode) .empty-state-card { border-color: var(--bd); } html:not(.light-mode) .tab { background: var(--sf2); border-color: var(--bd); color: var(--tx2); } html:not(.light-mode) .tab:hover { color: var(--tx); } html:not(.light-mode) .tab.active { background: var(--sf3); border-color: var(--tx3); color: var(--tx); } html:not(.light-mode) .source-role.sales { background: #1A2A3A; color: #7AB8E8; border-color: #2A3A4A; } html:not(.light-mode) .source-role.inventory { background: #1A2E1F; color: #5EC47A; border-color: #2A3E2F; } html:not(.light-mode) .source-role.both { background: #2A2000; color: #E8B830; border-color: #3A3010; } html:not(.light-mode) .history-status.completed { color: #4ADE80; } html:not(.light-mode) .history-status.in-progress { color: #FBBF24; } html:not(.light-mode) .history-po-range { color: var(--tx) !important; } html:not(.light-mode) .main-area::before { background: #5A4A32; opacity: 0.1; } html:not(.light-mode) .main-area::after { background: #3A5A3E; opacity: 0.1; } html:not(.light-mode) .bg-blob-3 { background: #3A4A5A; opacity: 0.1; } html:not(.light-mode) .bg-blob-4 { background: #5A4A32; opacity: 0.06; } } html, body { background: var(--bg); color: var(--tx); font-family: var(--sa); font-size: 14px; height: 100%; -webkit-font-smoothing: antialiased; } a { color: var(--tx3); text-decoration: underline; text-underline-offset: 3px; } a:hover { color: var(--tx); } /* ===== TYPOGRAPHY ===== */ h1 { font-family: var(--se); font-size: 22px; font-weight: 400; margin-bottom: 4px; color: var(--tx); } h2 { font-family: var(--se); font-size: 20px; font-weight: 400; margin-bottom: 8px; color: var(--tx); } h3 { font-family: var(--se); font-size: 18px; font-weight: 400; margin-bottom: 3px; color: var(--tx); } /* ===== LOGO / WORDMARK ===== */ /* Delegate brand */ .sb-brand { font-family: var(--sa); font-size: 10px; font-weight: 400; color: var(--tx3); } .sb-brand-lg { font-family: var(--sa); font-size: 10px; font-weight: 400; color: var(--tx3); margin-bottom: 6px; } .sb-brand-md { font-family: var(--sa); font-size: 10px; font-weight: 400; color: var(--tx3); margin-bottom: 4px; } .sb-product { display: flex; align-items: center; gap: 10px; margin-top: 4px; } .sb-product-icon { width: 32px; height: 32px; border-radius: 8px; background: var(--tx); color: var(--bg); display: flex; align-items: center; justify-content: center; font-family: var(--se); font-size: 15px; font-weight: 400; } .sb-product-name { font-family: var(--se); font-size: 15px; font-weight: 600; color: var(--tx); letter-spacing: -0.3px; } .sb-product-desc { font-family: var(--sa); font-size: 10px; font-weight: 400; color: var(--tx3); } .theme-toggle { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 12px; font-weight: 500; color: var(--tx3); transition: all var(--transition); margin-top: 10px; } .theme-toggle:hover { background: var(--sf2); color: var(--tx); } .theme-toggle-icon { font-size: 14px; } .delegate-badge { display: flex; align-items: center; gap: 5px; font-family: var(--sa); font-size: 10px; font-weight: 400; color: var(--tx3); padding: 14px 10px 0; } .delegate-badge span { font-weight: 500; color: var(--tx3); text-transform: uppercase; letter-spacing: 1.4px; } .sb-wordmark { font-family: var(--se); font-size: 18px; font-weight: 300; color: var(--tx); line-height: 1; } .sb-wordmark-lg { font-size: 36px; } .sb-wordmark-md { font-size: 26px; } /* ===== BUTTONS ===== */ .btn { font-family: var(--sa); font-weight: 500; border: none; cursor: pointer; border-radius: var(--radius-btn); transition: all var(--transition); display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; white-space: nowrap; font-size: 12px; } .btn:disabled { opacity: 0.35; cursor: not-allowed; } .btn-primary { background: var(--tx); color: var(--sf); padding: 7px 18px; } .btn-primary:hover:not(:disabled) { background: var(--tx2); } .btn-secondary { background: transparent; color: var(--tx2); border: 1px solid var(--bd); padding: 6px 16px; } .btn-secondary:hover:not(:disabled) { border-color: var(--tx3); color: var(--tx); } .btn-outline { background: transparent; color: var(--tx2); border: 1px solid var(--bd); padding: 6px 16px; } .btn-outline:hover:not(:disabled) { border-color: var(--tx3); color: var(--tx); } .btn-danger { background: var(--rd); color: #fff; padding: 6px 16px; } .btn-danger:hover:not(:disabled) { opacity: 0.85; } .btn-sm { padding: 6px 16px; font-size: 12px; } .btn-lg { padding: 11px 22px; font-size: 13px; } .btn-row { display: flex; gap: 0.5rem; flex-wrap: wrap; } /* ===== SETUP SCREENS ===== */ .screen { min-height: 100vh; } .setup-step { display: none; min-height: 100vh; align-items: center; justify-content: center; background: var(--bg); } .setup-step.active { display: flex; } .setup-container { text-align: center; max-width: 400px; width: 100%; padding: 2rem; } .setup-logo { margin-bottom: 0.75rem; } .setup-tagline { font-size: 14px; color: var(--tx3); font-weight: 600; margin-bottom: 2rem; } .setup-container form { text-align: left; margin-top: 1.5rem; } .setup-container form .btn { width: 100%; margin-top: 1rem; } /* Wider container for path picker / provider picker / configure modal — those steps need more horizontal room than the company form. */ .setup-container-wide { max-width: 720px; text-align: left; } .setup-container-wide h2 { text-align: center; } .setup-subtitle { text-align: center; color: var(--tx3); font-size: 14px; margin-bottom: 2rem; } /* Step progress bar (top of viewport). Renders the breadcrumb of onboarding steps so the user knows how far they are. */ .setup-progress { position: fixed; top: 24px; left: 0; right: 0; display: flex; justify-content: center; gap: 18px; font-size: 11px; color: var(--tx3); pointer-events: none; z-index: 100; } .setup-progress-step { display: inline-flex; align-items: center; gap: 6px; letter-spacing: 0.04em; text-transform: lowercase; } .setup-progress-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--bd); border: 1px solid var(--bd); } .setup-progress-step.is-active { color: var(--tx); font-weight: 600; } .setup-progress-step.is-active .setup-progress-dot { background: var(--tx); border-color: var(--tx); } .setup-progress-step.is-done { color: var(--tx2); } .setup-progress-step.is-done .setup-progress-dot { background: var(--gn); border-color: var(--gn); } /* Step 3: path picker — two big cards */ .setup-path-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 1.5rem 0; } @media (max-width: 720px) { .setup-path-grid { grid-template-columns: 1fr; } } .setup-path-card { display: flex; flex-direction: column; align-items: flex-start; text-align: left; padding: 24px; background: var(--sf); border: 1px solid var(--bd); border-radius: 12px; cursor: pointer; font-family: inherit; color: var(--tx); transition: all 0.15s ease; } .setup-path-card:hover { border-color: var(--tx); background: var(--acl); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,0,0,0.06); } .setup-path-icon { font-size: 28px; margin-bottom: 12px; } .setup-path-card h3 { font-size: 18px; margin: 0 0 8px; } .setup-path-card p { font-size: 13px; color: var(--tx2); margin: 0 0 12px; line-height: 1.5; } .setup-path-best-for { font-size: 12px; color: var(--tx3); margin-bottom: 16px; } .setup-path-best-for strong { color: var(--tx2); } .setup-path-cta { margin-top: auto; font-size: 14px; font-weight: 600; color: var(--tx); } .setup-skip-link { display: block; margin: 1rem auto 0; background: transparent; border: 0; color: var(--tx3); font-size: 12px; cursor: pointer; font-family: inherit; text-decoration: underline; } .setup-skip-link:hover { color: var(--tx); } .setup-back { background: transparent; border: 0; color: var(--tx3); font-size: 12px; cursor: pointer; font-family: inherit; margin-bottom: 12px; } .setup-back:hover { color: var(--tx); } /* Step 4a.1: provider picker */ .setup-provider-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 1.5rem 0; } @media (max-width: 720px) { .setup-provider-grid { grid-template-columns: 1fr; } } .setup-provider-card { display: flex; flex-direction: column; align-items: flex-start; text-align: left; padding: 24px; background: var(--sf); border: 1px solid var(--bd); border-radius: 12px; cursor: pointer; font-family: inherit; } .setup-provider-card:hover { border-color: var(--tx); background: var(--acl); } .setup-provider-logo { font-family: var(--se); font-size: 22px; font-weight: 600; margin-bottom: 8px; } .setup-provider-shopify { color: #5a8a3a; } .setup-provider-zoho { color: #c8202c; } .setup-provider-desc { font-size: 13px; color: var(--tx2); line-height: 1.5; } .setup-fineprint { text-align: center; font-size: 12px; color: var(--tx3); margin-top: 1rem; } /* Step 4a.2: configure channel — role checkbox cards */ .setup-role-card { display: flex; align-items: flex-start; gap: 12px; padding: 14px; background: var(--sf); border: 1px solid var(--bd); border-radius: 10px; margin-bottom: 10px; cursor: pointer; } .setup-role-card:hover { border-color: var(--tx); } .setup-role-card input[type="checkbox"] { margin-top: 3px; } .setup-role-card-body strong { display: block; font-size: 14px; margin-bottom: 4px; } .setup-role-card-body p { font-size: 12px; color: var(--tx2); margin: 0; line-height: 1.5; } .setup-role-card-nested { margin-left: 28px; background: var(--bg); } .setup-role-card-nested.is-disabled { opacity: 0.5; cursor: not-allowed; } .setup-role-card-hint { font-style: italic; } /* Step 4a.3: sync status */ .setup-sync-progress { display: flex; flex-direction: column; gap: 10px; margin: 1.5rem 0; } .setup-sync-step { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--sf); border: 1px solid var(--bd); border-radius: 8px; font-size: 13px; color: var(--tx2); } .setup-sync-dot { width: 10px; height: 10px; border-radius: 999px; background: var(--bd); flex-shrink: 0; } .setup-sync-step.is-done { color: var(--tx); background: var(--gnl); border-color: var(--gnb); } .setup-sync-step.is-done .setup-sync-dot { background: var(--gn); } .setup-sync-status { margin-left: auto; font-size: 12px; color: var(--tx3); font-variant-numeric: tabular-nums; } .setup-sync-status.done { color: var(--gn); font-weight: 600; } /* Step 4b: excel landing — checklist of next steps */ .setup-checklist { display: flex; flex-direction: column; gap: 14px; margin: 1.5rem 0; } .setup-checklist-item { display: flex; align-items: flex-start; gap: 14px; padding: 16px; background: var(--sf); border: 1px solid var(--bd); border-radius: 10px; } .setup-checklist-num { flex-shrink: 0; width: 28px; height: 28px; border-radius: 999px; background: var(--tx); color: var(--bg); display: flex; align-items: center; justify-content: center; font-family: var(--se); font-size: 14px; font-weight: 600; } .setup-checklist-item strong { display: block; font-size: 14px; margin-bottom: 4px; } .setup-checklist-item p { font-size: 12px; color: var(--tx2); margin: 0; line-height: 1.5; } .setup-excel-cta { display: flex; gap: 12px; margin-top: 1.5rem; } .setup-excel-cta .btn { flex: 1; } @media (max-width: 480px) { .setup-excel-cta { flex-direction: column; } } /* ===== FORMS ===== */ .form-group { margin-bottom: 12px; } .form-group label { display: block; font-size: 10px; font-weight: 600; color: var(--tx3); letter-spacing: 1.2px; text-transform: uppercase; margin-bottom: 5px; } .form-group input:not([type="checkbox"]), .form-group select, .form-group textarea { width: 100%; font-family: var(--sa); font-weight: 500; font-size: 13px; padding: 9px 12px; border: 1.5px solid var(--bd); border-radius: var(--radius-btn); background: var(--sf); color: var(--tx); transition: all var(--transition); outline: none; } .form-group input::placeholder, .form-group textarea::placeholder { color: var(--tx3); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--ac); background: var(--sf); } .form-group textarea { resize: vertical; } .form-tip { display: block; font-size: 11px; color: var(--tx3); font-weight: 400; margin-top: 4px; } .required { color: var(--am); } .tip-box { background: var(--acl); border: 1px solid var(--acb); padding: 10px 14px; border-radius: 8px; font-size: 12px; font-weight: 600; margin-bottom: 1rem; color: var(--tx2); } .checkbox-group { display: flex; flex-direction: column; gap: 8px; } .checkbox-label { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; cursor: pointer; } .checkbox-label input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--ac); cursor: pointer; } /* ===== SIDEBAR ===== */ .sidebar { position: fixed; top: 0; left: 0; width: var(--sidebar-w); height: 100vh; background: var(--sf); border-right: 1px solid var(--bd); display: flex; flex-direction: column; justify-content: space-between; z-index: 100; } .sidebar-top { display: flex; flex-direction: column; flex: 1; overflow-y: auto; } .sb-logo { padding: 20px 18px 20px; border-bottom: 1px solid var(--bd); } .sidebar-section-label { font-family: var(--sa); font-size: 10px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--tx3); padding: 20px 16px 6px; } .sidebar-item { display: flex; align-items: center; gap: 10px; font-family: var(--sa); font-size: 14px; font-weight: 400; padding: 9px 14px; margin: 1px 6px; color: var(--tx2); text-decoration: none; transition: all var(--transition); border-left: none; border-radius: 8px; cursor: pointer; } .sidebar-item:hover { color: var(--tx); background: var(--sf2); text-decoration: none; } /* Sidebar item label/badge layout. Most items don't have a badge * so they default to a single label. Smart Reorder + future items * can render a count chip on the right that floats to the end. */ .sidebar-item-label { flex: 1; min-width: 0; } .sidebar-item-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 18px; padding: 0 6px; font-size: 11px; font-weight: 600; line-height: 1; color: var(--tx2); background: var(--sf3); border-radius: 999px; flex-shrink: 0; } .sidebar-item-badge.is-critical { color: #fff; background: var(--rd); } .sidebar-item.active .sidebar-item-badge { background: rgba(255, 255, 255, 0.15); color: var(--sf); } .sidebar-item.active .sidebar-item-badge.is-critical { background: var(--rd); color: #fff; } .sidebar-item.active { color: var(--sf); background: var(--tx); border-left-color: transparent; font-weight: 500; position: relative; } .sidebar-item.active::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--gnl); margin-left: auto; flex-shrink: 0; } .sidebar-icon { font-size: 14px; flex-shrink: 0; width: 18px; text-align: center; } .sidebar-item.disabled { opacity: 0.5; cursor: default; pointer-events: none; } .coming-soon-badge { font-family: var(--sa); font-size: 9px; font-weight: 500; color: var(--tx3); background: var(--sf2); border: 1px solid var(--bd); border-radius: 100px; padding: 1px 6px; margin-left: auto; } .sidebar-bottom { padding: 14px 16px; border-top: 1px solid var(--bd); } .sb-profile { display: flex; align-items: center; gap: 9px; cursor: pointer; } .sb-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--tx); border: none; display: flex; align-items: center; justify-content: center; font-family: var(--se); font-size: 11px; color: var(--bg); font-weight: 400; flex-shrink: 0; } .sidebar-profile-name { font-family: var(--sa); font-size: 12px; font-weight: 500; color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar-profile-link { font-size: 10px; color: var(--tx3); } /* ===== MAIN AREA ===== */ .main-area { margin-left: var(--sidebar-w); min-height: 100vh; display: flex; flex-direction: column; overflow: hidden; background: var(--bg); width: calc(100vw - var(--sidebar-w)); position: relative; } /* Background decorative blobs */ .main-area::before, .main-area::after { content: ''; position: fixed; border-radius: 60% 40% 50% 50%; opacity: 0.15; pointer-events: none; z-index: 0; } .main-area::before { width: 380px; height: 280px; background: #C4A882; top: 60px; right: -40px; transform: rotate(-15deg); } .main-area::after { width: 220px; height: 200px; background: #8BAF8E; top: 300px; right: 80px; border-radius: 40% 60% 50% 50%; transform: rotate(10deg); } .bg-blob-3, .bg-blob-4 { position: fixed; border-radius: 50% 50% 40% 60%; opacity: 0.15; pointer-events: none; z-index: 0; } .bg-blob-3 { width: 180px; height: 150px; background: #A8B4C4; top: 520px; right: -10px; transform: rotate(-8deg); } .bg-blob-4 { width: 80px; height: 80px; background: #C4A882; top: 200px; right: 280px; border-radius: 50%; opacity: 0.1; } /* ===== TOP BAR ===== */ .topbar { display: flex; align-items: center; justify-content: space-between; padding: 14px 32px; border-bottom: 1px solid var(--bd); background: rgba(253,252,249,0.95); backdrop-filter: blur(16px); position: sticky; top: 0; /* z-index 250 (was 50) — needs to sit ABOVE the notification drawer's overlay (z-index 199). The topbar's position:sticky creates a stacking context for everything inside it (including the notification drawer hanging below it). If the topbar's z-index is below the overlay, the entire drawer becomes unclickable in the area where the overlay covers — which is basically everywhere outside the bell icon. */ z-index: 250; } .topbar-left { flex: 1; } .topbar-breadcrumb { display: flex; align-items: center; gap: 6px; font-family: var(--sa); font-size: 12px; } .breadcrumb-root { font-weight: 400; color: var(--tx3); } .breadcrumb-sep { color: var(--tx3); opacity: 0.4; } .breadcrumb-active { font-weight: 500; color: var(--tx); } .topbar-actions { display: flex; align-items: center; gap: 8px; } .btn-topbar { border-radius: 100px; padding: 6px 16px; font-size: 12px; font-weight: 500; } .topbar-title { font-family: var(--se); font-size: 19px; font-weight: 400; color: var(--tx); margin-bottom: 2px; } .topbar-subtitle { font-size: 11px; font-weight: 400; color: var(--tx3); } .topbar-actions { display: flex; gap: 8px; align-items: center; } /* ===== NOTIFICATION BELL & DRAWER ===== */ .btn-icon-topbar { position: relative; background: none; border: 1px solid var(--bd); border-radius: 50%; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--tx2); transition: border-color var(--transition), color var(--transition), background var(--transition); margin-left: 8px; } .btn-icon-topbar:hover { border-color: var(--tx3); color: var(--tx); } /* In dark mode --bd is #2A2A2A, only ~6% above the canvas, so the * bell icon's ring nearly disappears against the topbar. Bump it * to a more visible elevated stroke + a subtle filled bg so the * notification entry point reads at a glance. */ html.dark-mode .btn-icon-topbar { border-color: var(--bd2); background: var(--sf); } html.dark-mode .btn-icon-topbar:hover { border-color: var(--tx3); background: var(--sf2); } .btn-icon-topbar svg { pointer-events: none; } .btn-icon-topbar .notif-badge { pointer-events: none; } /* dl8 active org chip in the topnav. Two render modes from js/orgs.js → Orgs._renderTopnav(): - Solo user (1 org): static chip showing the org name - Multi-org user: button + dropdown switcher */ .topnav-org { position: relative; display: inline-flex; align-items: center; margin-left: 8px; font-size: 12px; color: var(--tx2); } .topnav-org-name { padding: 6px 10px; border: 1px solid var(--bd); border-radius: 999px; font-weight: 500; background: var(--sf); white-space: nowrap; max-width: 180px; overflow: hidden; text-overflow: ellipsis; } .topnav-org-button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--bd); border-radius: 999px; background: var(--sf); color: var(--tx2); font-size: 12px; font-weight: 500; cursor: pointer; transition: border-color var(--transition), color var(--transition); } .topnav-org-button:hover { border-color: var(--tx3); color: var(--tx); } .topnav-org-caret { font-size: 10px; color: var(--tx3); line-height: 1; } .topnav-org-dropdown { position: absolute; top: calc(100% + 6px); right: 0; min-width: 200px; background: var(--sf); border: 1px solid var(--bd); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); padding: 4px; z-index: 50; } .topnav-org-item { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 8px 10px; background: none; border: none; border-radius: 6px; color: var(--tx); font-size: 13px; font-weight: 500; text-align: left; cursor: pointer; transition: background var(--transition); } .topnav-org-item:hover { background: var(--sf2); } .topnav-org-item.is-active { color: var(--tx); font-weight: 600; } .topnav-org-check { color: var(--bl); font-size: 12px; } /* Activation screen — shown when user has dl8 orgs but the active one doesn't have Orderly enabled. Defensive scaffold; for Samad's case (Orderly already active on MK Distro) this never renders. */ #activation-screen { position: fixed; inset: 0; background: var(--sf2); display: none; align-items: center; justify-content: center; padding: 32px 16px; z-index: 100; overflow-y: auto; } .activation-card { width: 100%; max-width: 480px; background: var(--sf); border: 1px solid var(--bd); border-radius: 16px; padding: 32px; box-shadow: 0 20px 48px rgba(0, 0, 0, 0.06); } .activation-eyebrow { font-size: 11px; font-weight: 700; color: var(--tx3); letter-spacing: 1px; margin-bottom: 8px; } .activation-title { font-size: 28px; font-weight: 600; margin: 0 0 12px 0; color: var(--tx); } .activation-desc { font-size: 14px; color: var(--tx2); line-height: 1.55; margin: 0 0 24px 0; } .activation-orgs { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; } .activation-org-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; background: var(--sf2); border: 1px solid var(--bd); border-radius: 10px; } .activation-org-name { font-size: 14px; font-weight: 500; color: var(--tx); display: inline-flex; align-items: center; gap: 8px; } .activation-org-role { font-size: 10px; color: var(--tx3); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; padding: 1px 6px; border: 1px solid var(--bd); border-radius: 4px; } .activation-divider { text-align: center; margin: 16px 0; color: var(--tx3); font-size: 12px; position: relative; } .activation-divider::before, .activation-divider::after { content: ""; position: absolute; top: 50%; width: calc(50% - 24px); height: 1px; background: var(--bd); } .activation-divider::before { left: 0; } .activation-divider::after { right: 0; } .activation-divider span { padding: 0 8px; background: var(--sf); } .activation-create-btn { display: block; width: 100%; padding: 12px; background: transparent; border: 1px dashed var(--bd); border-radius: 10px; color: var(--tx2); font-size: 13px; font-weight: 500; cursor: pointer; transition: border-color var(--transition), color var(--transition); } .activation-create-btn:hover { border-color: var(--tx3); color: var(--tx); } .activation-error { margin-top: 16px; padding: 10px 12px; background: var(--rl); border: 1px solid var(--rb); border-radius: 8px; color: var(--r); font-size: 13px; } /* Members tab — list of org members + pending invitations */ .members-card { margin-bottom: 16px; } .members-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .members-card-header h3 { margin: 0; font-size: 14px; } .members-list { display: flex; flex-direction: column; gap: 6px; } .member-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; background: var(--sf2); border: 1px solid var(--bd); border-radius: 8px; font-size: 13px; } .member-row-pending { background: var(--sf); border-style: dashed; color: var(--tx2); } .member-id { display: inline-flex; align-items: center; gap: 12px; flex: 1; min-width: 0; } .member-avatar { width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; background: var(--acl); color: var(--ac); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; } .member-text { min-width: 0; flex: 1; } .member-name { font-size: 13px; font-weight: 500; color: var(--tx); display: inline-flex; align-items: center; gap: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .member-email { font-size: 12px; color: var(--tx3); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .member-you { font-size: 10px; color: var(--tx3); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; padding: 1px 6px; border: 1px solid var(--bd); border-radius: 4px; } .member-role { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--tx3); padding: 2px 8px; border: 1px solid var(--bd); border-radius: 4px; } .member-role-owner { color: var(--bl); background: var(--bll); border-color: var(--blb); } .member-role-admin { color: var(--gn); background: var(--gnl); border-color: var(--gnb); } .empty-state-small { padding: 12px; font-size: 13px; color: var(--tx3); text-align: center; } /* Alert feed cards (in-app notification drawer + Overview alert feed). One row per alert with a colored severity icon, title, description, and relative-time meta line. Clicking routes to the relevant screen (stockouts → reorder, sync errors → integrations). */ .alert-card { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--bd); cursor: pointer; transition: background var(--transition); } .alert-card:last-child { border-bottom: none; } .alert-card:hover { background: var(--sf2); } .alert-card.alert-resolved { opacity: 0.65; } .alert-card-icon { width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; margin-top: 2px; } .alert-card.alert-warning .alert-card-icon { color: var(--am); background: var(--aml); border: 1px solid var(--amb); } .alert-card.alert-error .alert-card-icon { color: var(--r); background: var(--rl); border: 1px solid var(--rb); } .alert-card.alert-success .alert-card-icon { color: var(--gn); background: var(--gnl); border: 1px solid var(--gnb); } .alert-card.alert-info .alert-card-icon { color: var(--bl); background: var(--bll); border: 1px solid var(--blb); } .alert-card-body { flex: 1; min-width: 0; } .alert-card-title { font-size: 13px; font-weight: 600; color: var(--tx); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; } .alert-card-desc { font-size: 12px; color: var(--tx2); line-height: 1.45; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .alert-card-meta { font-size: 11px; color: var(--tx3); margin-top: 4px; } .alert-card-action { font-size: 12px; color: var(--tx2); margin-top: 4px; padding: 6px 8px; background: var(--sf2); border-left: 2px solid var(--bl); border-radius: 4px; line-height: 1.45; } .alert-card-action strong { color: var(--tx); font-weight: 600; } /* Subtle indicator that an alert hasn't been seen yet — matches the bell badge state. Disappears as soon as the drawer is opened. */ .alert-card.alert-unread .alert-card-title::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--bl); margin-right: 6px; vertical-align: middle; } /* "Mark all read" + "Open overview" sit side-by-side in the drawer footer. Both use .btn .btn-secondary; the markAllRead button id is preserved so app.js can hide it when there's nothing unread. */ /* Stat-card 'attention' modifier — flips an Overview stat card (currently just the stockouts card) to a red-tinted warning state when its value is non-zero. Subtle by design; we don't want the Overview to look alarmed for a single stockout. */ .stat-card.stat-card-attention { background: var(--rl); border-color: var(--rb); } .stat-card.stat-card-attention .stat-value { color: var(--r); } /* Notification preferences (Settings → Notifications card). Three channel rows (email / Slack / in-app), then a divider, then a per-kind subscription list. */ .notif-prefs-section { padding: 8px 0; border-bottom: 1px solid var(--bd); } .notif-prefs-section:last-of-type { border-bottom: none; } .notif-prefs-row { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; padding: 8px 0; } .notif-prefs-row input[type="checkbox"] { margin: 0; flex: none; width: 18px; height: 18px; margin-top: 2px; cursor: pointer; accent-color: var(--bl); } .notif-prefs-row input[type="checkbox"]:disabled { cursor: not-allowed; opacity: 0.4; } .notif-prefs-row-title { font-size: 14px; font-weight: 500; color: var(--tx); } .notif-prefs-row-desc { font-size: 12px; color: var(--tx3); margin-top: 2px; line-height: 1.45; } .notif-prefs-divider { height: 1px; background: var(--bd); margin: 8px 0 14px 0; } .notif-prefs-kinds-label { font-size: 12px; font-weight: 600; color: var(--tx2); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; } .notif-prefs-kind-row { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; cursor: pointer; font-size: 13px; color: var(--tx2); } .notif-prefs-kind-row input[type="checkbox"] { margin: 0; margin-top: 2px; flex: none; accent-color: var(--bl); cursor: pointer; } .notif-prefs-kind-row strong { color: var(--tx); } /* Slack channel-picker modal — list of channels with hash/lock icons. Mirrors Slack's own channel-picker UX so the affordance reads immediately. */ .slack-channel-list { max-height: 360px; overflow-y: auto; border: 1px solid var(--bd); border-radius: 8px; } .slack-channel-row { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 12px; background: none; border: none; border-bottom: 1px solid var(--bd); text-align: left; font-size: 13px; color: var(--tx); cursor: pointer; transition: background var(--transition); } .slack-channel-row:last-child { border-bottom: none; } .slack-channel-row:hover { background: var(--sf2); } .slack-channel-hash { color: var(--tx3); flex: none; font-size: 14px; width: 16px; text-align: center; } .slack-channel-name { flex: 1; font-weight: 500; } .slack-channel-members { font-size: 11px; color: var(--tx3); } .notif-badge { position: absolute; top: -4px; right: -4px; background: var(--ac); color: var(--ac-text); font-family: var(--sa); font-size: 9px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 100px; display: flex; align-items: center; justify-content: center; padding: 0 4px; /* Tiny outer ring so the badge reads as separated from the bell * icon in both modes — matches Slack/Linear-style notification dots. */ box-shadow: 0 0 0 2px var(--bg); } .notif-overlay { position: fixed; inset: 0; z-index: 199; display: none; } .notif-overlay.open { display: block; } .notif-dropdown { /* Dropdown is anchored to its relative-positioned topbar parent. The parent doesn't establish a high enough stacking context, so a plain z-index:200 here sometimes loses to the fixed overlay's z-index:199 in cross-context comparison — which lets the overlay intercept clicks on the dropdown's footer buttons. Pin to 1000 so the dropdown unambiguously sits above the overlay regardless of the parent's stacking. */ position: absolute; top: calc(100% + 8px); right: 0; width: 360px; max-height: 480px; background: var(--sf); z-index: 1000; display: none; flex-direction: column; box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.08); border: 1px solid var(--bd); border-radius: var(--radius-card); overflow: hidden; } .notif-dropdown.open { display: flex; } .notif-dropdown-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--bd); } .notif-drawer-close { background: none; border: none; font-size: 18px; color: var(--tx3); cursor: pointer; padding: 0; line-height: 1; } .notif-drawer-close:hover { color: var(--tx); } .notif-dropdown-body { flex: 1; overflow-y: auto; padding: 10px 14px; max-height: 360px; } .notif-dropdown-footer { padding: 10px 14px; border-top: 1px solid var(--bd); } .notif-run-item { padding: 14px 16px; border: 1px solid var(--bd); border-radius: var(--radius-card); margin-bottom: 10px; cursor: pointer; transition: border-color var(--transition); } .notif-run-item:hover { border-color: var(--tx3); } .notif-run-date { font-family: var(--sa); font-size: 11px; font-weight: 500; color: var(--tx3); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; } .notif-run-title { font-family: var(--se); font-size: 15px; font-weight: 400; color: var(--tx); margin-bottom: 4px; } .notif-run-meta { font-family: var(--sa); font-size: 12px; color: var(--tx3); } .notif-run-status { display: inline-block; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 4px; margin-left: 6px; } .notif-run-status.completed { background: var(--gnl); color: var(--gn); } .notif-run-status.in_progress { background: #fef3cd; color: #856404; } .notif-empty { text-align: center; padding: 40px 20px; color: var(--tx3); font-family: var(--sa); font-size: 13px; } /* ===== APP CONTENT ===== */ .app-content { display: none; flex: 1; overflow-y: auto; padding: 28px 32px 40px; width: 100%; position: relative; z-index: 1; } .app-content.active { display: block; } .content-wrapper { width: 100%; /* Bumped from the original 860px cap so data-heavy pages * (Suppliers grid, Smart Reorder tables, Dashboard report grid) * stretch on wider monitors. 1400px is a comfortable upper bound — * wide enough for ~6-column tables, narrow enough that text * stays readable on ultrawide displays. */ max-width: 1400px; padding-bottom: 160px; } /* ===== PAGE HEADER ===== */ .page-header { margin-bottom: 8px; } .page-header-eyebrow { font-family: var(--sa); font-size: 10px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--tx3); margin-bottom: 12px; } .page-header-title { font-family: var(--se); font-size: 44px; font-weight: 300; color: var(--tx); letter-spacing: -0.8px; line-height: 1.08; margin-bottom: 14px; } .page-header-title em { font-style: italic; font-weight: 300; } .page-header-desc { font-family: var(--sa); font-size: 14px; font-weight: 400; color: var(--tx3); line-height: 1.65; max-width: 520px; } .page-header-divider { border-top: 1px solid var(--bd); margin-top: 28px; margin-bottom: 28px; } /* Two-column layout — title block on the left, action cluster on * the right. Used by Smart Reorder so Refresh + Reorder Settings * sit at the page level (matching the Dashboard's pattern) rather * than getting buried in the dense actions bar below. The divider * stays full-width via `grid-column` so it spans both columns. */ .page-header.page-header-with-actions { display: grid; grid-template-columns: 1fr auto; gap: 12px 24px; align-items: start; } .page-header.page-header-with-actions .page-header-titles { min-width: 0; } .page-header.page-header-with-actions .page-header-divider { grid-column: 1 / -1; } .page-header-actions { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-self: end; margin-top: 14px; /* aligns visually with title baseline */ } /* Reorder refresh button — same is-refreshing/spin pattern as * the dashboard's .dash-refresh-btn. Reused class so the two * pages have identical Refresh affordances. */ .reorder-refresh-icon { display: inline-block; margin-right: 2px; font-weight: 700; } .reorder-refresh-btn[disabled] { opacity: 0.7; cursor: not-allowed; } .reorder-refresh-btn.is-refreshing .reorder-refresh-icon { animation: dash-refresh-spin 0.8s linear infinite; } /* ===== INTRO BANNER (legacy) ===== */ .intro-banner { display: flex; align-items: flex-start; gap: 16px; background: var(--sf); border: 1px solid var(--bd); border-radius: var(--radius-card); padding: 22px 24px; margin-bottom: 24px; position: relative; } .intro-banner-icon { font-size: 24px; flex-shrink: 0; margin-top: 2px; } .intro-banner-content h3 { font-family: var(--se); font-size: 15px; font-weight: 600; color: var(--tx); margin-bottom: 4px; } .intro-banner-content p { font-size: 12px; color: var(--tx2); line-height: 1.5; } .intro-banner-close { position: absolute; top: 10px; right: 12px; background: none; border: none; font-size: 16px; color: var(--tx3); cursor: pointer; line-height: 1; padding: 2px 4px; } .intro-banner-close:hover { color: var(--tx); } /* ===== DATA MODE SELECTOR ===== */ .data-mode-options { display: flex; gap: 12px; margin-bottom: 32px; } .data-mode-btn { flex: 1; display: flex; flex-direction: column; align-items: flex-start; text-align: left; padding: 24px; height: 200px; border-radius: var(--radius-card); border: 1.5px solid var(--bd); background: var(--sf); cursor: pointer; transition: all var(--transition); position: relative; } .data-mode-btn:hover { border-color: var(--tx3); background: var(--bg); } .data-mode-btn.active { background: var(--tx); border-color: var(--tx); } .data-mode-btn.active::after { content: '✓'; position: absolute; top: 14px; right: 14px; width: 22px; height: 22px; border-radius: 50%; background: var(--sf); color: var(--tx); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; } .data-mode-btn.active .data-mode-icon { color: rgba(253,252,249,0.5); } .data-mode-icon { font-size: 24px; color: var(--tx3); } .data-mode-text { margin-top: auto; } .data-mode-label { font-family: var(--se); font-size: 18px; font-weight: 400; color: var(--tx); display: block; margin-bottom: 6px; } .data-mode-desc { font-family: var(--sa); font-size: 13px; font-weight: 400; color: var(--tx3); line-height: 1.55; display: block; } .data-mode-btn.active .data-mode-label { color: var(--sf); } .data-mode-btn.active .data-mode-desc { color: rgba(253,252,249,0.55); } /* ===== CARDS ===== */ .card { background: var(--sf); border: 1px solid var(--bd); border-radius: var(--radius-card); padding: 24px 26px; margin-bottom: 28px; box-shadow: var(--shs); width: 100%; } .card h3 { font-family: var(--se); font-size: 20px; font-weight: 400; margin-bottom: 4px; } .card-danger { border-color: var(--rdb); } /* Yellow-bordered "watch out, this affects everything" card. * Used for org-wide settings whose impact is global (e.g. SKU * exclusions). Subtler than card-danger but still visually flags * the user. */ .card-warning { border-color: #f0c050; background: linear-gradient(180deg, rgba(240, 192, 80, 0.04), transparent); } /* === Global SKU exclusions card === */ .excl-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 12px; } .excl-count { flex-shrink: 0; padding: 3px 10px; font-size: 12px; font-weight: 600; color: var(--tx3); background: var(--sf); border-radius: 999px; } .excl-count-active { color: #8a5a00; background: #fff5d6; border: 1px solid #f0d27a; } .excl-warning { margin: 0 0 16px; padding: 10px 12px; font-size: 12px; line-height: 1.5; color: #6a4400; background: #fff5d6; border: 1px solid #f0d27a; border-radius: 8px; } .excl-warning strong { color: #4a2e00; } .excl-rule { display: flex; gap: 8px; margin-bottom: 8px; align-items: center; } .excl-rule select, .excl-rule input { padding: 6px 10px; font-size: 13px; border: 1px solid var(--bd); border-radius: 6px; background: var(--bg); color: var(--tx); } .excl-rule select { min-width: 140px; } .excl-rule input { flex: 1; min-width: 120px; } .excl-rule input:disabled { background: var(--sf); color: var(--tx3); } .excl-rule-remove { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--bd); border-radius: 6px; font-size: 14px; color: var(--tx3); cursor: pointer; flex-shrink: 0; } .excl-rule-remove:hover { color: var(--rd); border-color: var(--rd); } .excl-empty { font-size: 13px; color: var(--tx3); font-style: italic; margin: 8px 0 12px; } .excl-actions { display: flex; gap: 12px; align-items: center; margin-top: 12px; flex-wrap: wrap; } .excl-combinator { margin-left: auto; font-size: 13px; color: var(--tx3); } .excl-combinator select { padding: 4px 8px; font-size: 13px; border: 1px solid var(--bd); border-radius: 6px; background: var(--bg); color: var(--tx); } /* "Currently matching" preview list — shown under the rule editor * so users see exactly which SKUs will be hidden before saving. */ .excl-preview { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--bd); } .excl-preview-loading { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--bd); font-size: 13px; color: var(--tx3); font-style: italic; } .excl-preview-header { display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px; } .excl-preview-header strong { font-size: 13px; color: var(--tx); } .excl-preview-count { font-size: 12px; font-weight: 600; color: #8a5a00; background: #fff5d6; border: 1px solid #f0d27a; padding: 1px 8px; border-radius: 999px; } .excl-preview-desc { font-size: 12px; color: var(--tx3); margin: 0 0 10px; } .excl-preview-empty { font-size: 13px; color: var(--tx3); font-style: italic; margin: 8px 0 0; } .excl-preview-list { max-height: 320px; overflow-y: auto; border: 1px solid var(--bd); border-radius: 8px; background: var(--bg); } .excl-preview-row { display: flex; align-items: center; gap: 12px; padding: 6px 12px; font-size: 13px; border-bottom: 1px solid var(--bd); } .excl-preview-row:last-child { border-bottom: none; } .excl-preview-row:hover { background: var(--sf); } .excl-preview-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tx); } .excl-preview-sku { font-size: 11px; color: var(--tx3); background: var(--sf); padding: 1px 6px; border-radius: 4px; flex-shrink: 0; } .excl-preview-vendor { font-size: 11px; color: var(--tx3); flex-shrink: 0; } .excl-preview-archived-tag { font-size: 11px; color: var(--tx3); font-weight: 500; background: var(--sf); padding: 1px 6px; border-radius: 4px; flex-shrink: 0; } .excl-preview-row-archived .excl-preview-name { color: var(--tx3); font-style: italic; } .excl-preview-overflow { margin-top: 8px; font-size: 12px; color: var(--tx3); font-style: italic; text-align: center; } .card-header-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .section-heading { margin-bottom: 14px; margin-top: 32px; } .section-heading-row { display: flex; align-items: center; justify-content: space-between; } .section-desc { font-family: var(--sa); font-size: 13px; font-weight: 400; color: var(--tx3); margin-top: 6px; line-height: 1.5; } .sources-section-label { font-family: var(--sa); font-size: 11px; font-weight: 600; color: var(--tx3); text-transform: uppercase; letter-spacing: 1.2px; margin-bottom: 10px; margin-top: 20px; } .sources-section-label:first-child { margin-top: 0; } .sources-section-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 8px; } .source-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: var(--sf); border: 1.5px dashed var(--bd); border-radius: var(--radius-card); padding: 32px 24px; text-align: center; cursor: pointer; transition: all var(--transition); } .source-placeholder:hover { border-color: var(--tx3); background: var(--bg); } .source-placeholder-icon { width: 36px; height: 36px; border-radius: 50%; background: var(--sf2); color: var(--tx3); display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 300; margin-bottom: 4px; } .source-placeholder-label { font-family: var(--sa); font-size: 14px; font-weight: 500; color: var(--tx); } .source-placeholder-hint { font-family: var(--sa); font-size: 12px; font-weight: 400; color: var(--tx3); } .source-placeholder-ghost { opacity: 0.45; border-style: dashed; } .source-placeholder-ghost:hover { opacity: 0.7; } .empty-state-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: var(--sf); border: 1px dashed var(--bd); border-radius: var(--radius-card); padding: 40px 24px; text-align: center; color: var(--tx3); font-size: 13px; margin-bottom: 28px; } .section-heading h3 { font-family: var(--se); font-size: 24px; font-weight: 400; color: var(--tx); } .step-badge { font-family: var(--sa); font-size: 10px; font-weight: 500; color: var(--tx3); background: var(--sf2); border: 1px solid var(--bd); border-radius: 100px; padding: 3px 9px; margin-left: 8px; vertical-align: middle; font-style: normal; } .card-desc { font-family: var(--sa); font-size: 14px; color: var(--tx2); font-weight: 400; margin-bottom: 18px; } /* ===== PILL SELECTOR (Match Key) ===== */ .pill-selector { display: flex; gap: 5px; margin-bottom: 12px; flex-wrap: wrap; } .pill { font-family: var(--sa); font-weight: 500; padding: 8px 18px; border-radius: 100px; border: 1.5px solid var(--bd); background: var(--sf); color: var(--tx2); font-size: 12px; cursor: pointer; transition: all var(--transition); display: flex; flex-direction: column; align-items: center; gap: 2px; } .pill-main { font-weight: 400; } .pill-hint { font-size: 9px; font-weight: 400; } .pill:hover { border-color: var(--tx3); color: var(--tx); } .pill.active { background: var(--tx); border-color: var(--tx); color: var(--sf); } .pill.active .pill-hint { color: rgba(253,252,249,0.55); } /* ===== TOGGLE SWITCH ===== */ .fuzzy-row { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; } .fuzzy-bracket { font-weight: 400; color: var(--tx3); font-size: 10px; } .fuzzy-explain { font-size: 10.5px; color: var(--tx3); line-height: 1.4; margin: 0; padding-left: 44px; } .toggle-label { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 11px; font-weight: 600; color: var(--tx2); } .toggle-label input { display: none; } .toggle-switch { width: 36px; height: 20px; background: var(--bd2); border-radius: 10px; position: relative; transition: background var(--transition); } .toggle-switch::after { content: ''; position: absolute; width: 14px; height: 14px; background: #fff; border-radius: 50%; top: 3px; left: 3px; transition: transform var(--transition); box-shadow: none; } .toggle-label input:checked + .toggle-switch { background: var(--ac); } .toggle-label input:checked + .toggle-switch::after { transform: translateX(16px); } /* ===== FUZZY MATCHING PANEL ===== */ .fuzzy-panel { margin-top: 12px; padding: 14px 16px; background: var(--sf2); border: 1px solid var(--bd); border-radius: 10px; } .fuzzy-slider-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .fuzzy-slider-label { font-size: 10px; font-weight: 800; color: var(--tx3); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; } .fuzzy-slider-value { font-size: 13px; font-weight: 800; color: var(--ac); min-width: 36px; text-align: right; } .fuzzy-slider-row input[type="range"] { flex: 1; -webkit-appearance: none; appearance: none; height: 6px; border-radius: 3px; background: var(--bd2); outline: none; } .fuzzy-slider-row input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--ac); cursor: pointer; border: 2px solid var(--sf); box-shadow: none; } .fuzzy-example { background: var(--sf); border: 1px solid var(--bd); border-radius: 8px; padding: 10px 14px; } .fuzzy-example-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .fuzzy-example-badge { font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 980px; background: var(--acl); border: 1px solid var(--acb); color: var(--ac); } .fuzzy-example-badge.risky { background: var(--aml); border-color: var(--amb); color: var(--am); } .fuzzy-example-badge.danger { background: var(--rdl); border-color: var(--rdb); color: var(--rd); } .fuzzy-example-desc { font-size: 11px; color: var(--tx3); font-weight: 600; } .fuzzy-example-match { display: flex; align-items: center; gap: 10px; } .fuzzy-example-item { flex: 1; display: flex; flex-direction: column; gap: 2px; } .fuzzy-example-label { font-size: 9px; font-weight: 800; color: var(--tx3); letter-spacing: 0.1em; text-transform: uppercase; } .fuzzy-example-item span:last-child { font-size: 12px; font-weight: 600; color: var(--tx); } .fuzzy-example-arrow { font-size: 14px; color: var(--tx3); flex-shrink: 0; } /* ===== SETTINGS GRID ===== */ .settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } /* ===== SOURCES ===== */ .sources-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; } .sources-empty { display: block; margin-bottom: 28px; } .source-card { background: var(--sf); border: 1px solid var(--bd); border-radius: 12px; overflow: hidden; box-shadow: var(--shs); } .source-card.sc-border-green { border-color: var(--gnb); } .source-card.sc-border-blue { border-color: var(--blb); } .sc-top { padding: 12px 14px; border-bottom: 1px solid var(--bd); display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; } .sc-top > div:first-child { flex: 1; min-width: 0; overflow: hidden; } .source-card .source-name { font-size: 14px; font-weight: 700; color: var(--tx); margin-bottom: 2px; } .source-card .source-role { display: inline-block; font-size: 9px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 8px; border-radius: 980px; margin-bottom: 7px; } .source-role.sales { background: var(--acl); color: var(--ac); border: 1.5px solid var(--acb); } .source-role.inventory { background: var(--bll); color: var(--bl); border: 1.5px solid var(--blb); } .source-role.both { background: var(--aml); color: var(--am); border: 1.5px solid var(--amb); } .source-card .source-file { font-size: 11px; color: var(--tx3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sc-body { padding: 12px 14px; } .sc-status { border-radius: 6px; padding: 7px 10px; margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; font-size: 11px; font-weight: 700; } .sc-status-ok { color: var(--gn); background: var(--gnl); border: 1px solid var(--gnb); } .sc-status-warn { color: var(--am); background: var(--aml); border: 1px solid var(--amb); } .sc-edit-link { font-size: 10px; color: var(--tx3); text-decoration: underline; cursor: pointer; border: none; background: none; font-family: var(--sa); font-weight: 600; } .sc-edit-link:hover { color: var(--tx); } .sc-stats { display: flex; gap: 5px; flex-wrap: wrap; } .sc-stat { font-size: 10px; font-weight: 600; background: var(--sf2); border: 1px solid var(--bd); padding: 3px 8px; border-radius: 980px; color: var(--tx2); } .source-remove { font-size: 16px; color: var(--tx3); cursor: pointer; border: 1.5px solid var(--bd); background: var(--sf2); padding: 2px 7px; border-radius: 6px; flex-shrink: 0; line-height: 1; transition: all var(--transition); } .source-remove:hover { background: var(--rdl); color: var(--rd); border-color: var(--rdb); } /* ===== FILE DROP ===== */ .file-drop { border: 1.5px dashed var(--bd2); border-radius: 7px; padding: 16px; text-align: center; cursor: pointer; transition: all var(--transition); background: var(--sf2); } .file-drop:hover, .file-drop.dragover { border-color: var(--ac); background: var(--acl); } .file-drop-text { font-size: 11px; font-weight: 600; color: var(--tx3); margin-bottom: 4px; } .file-drop-text strong { color: var(--ac); } .file-drop-hint { font-size: 10px; color: var(--tx3); } /* ===== MAPPING ===== */ .mapping-grid { display: grid; gap: 9px; } .mapping-row { display: grid; grid-template-columns: 150px 1fr; align-items: center; gap: 9px; } .mapping-row label { font-size: 12px; font-weight: 700; text-align: right; color: var(--tx2); } .mapping-row label .required { margin-left: 2px; } .mapping-row select { width: 100%; font-family: var(--sa); font-weight: 600; font-size: 12px; padding: 7px 9px; border: 1.5px solid var(--bd); border-radius: 7px; background: var(--sf2); color: var(--tx); outline: none; } .mapping-row select:focus { border-color: var(--ac); background: var(--sf); } .mapping-row select option:disabled { color: var(--bd2); background: var(--sf2); font-style: italic; } .mapping-preview { margin-top: 12px; font-size: 11px; color: var(--tx3); max-height: 140px; overflow-y: auto; background: var(--sf2); border: 1px solid var(--bd); border-radius: 7px; padding: 10px; } .mapping-preview table { width: 100%; border-collapse: collapse; } .mapping-preview th, .mapping-preview td { text-align: left; padding: 3px 6px; border-bottom: 1px solid var(--bd); font-size: 10px; } .mapping-preview th { font-weight: 800; color: var(--tx3); text-transform: uppercase; letter-spacing: 0.08em; } /* ===== TABS ===== */ .tabs { display: flex; gap: 5px; margin-bottom: 14px; } .tab { font-family: var(--sa); font-weight: 700; padding: 6px 13px; border: 1.5px solid var(--bd2); background: var(--sf2); color: var(--tx3); font-size: 11px; border-radius: 6px; cursor: pointer; transition: all var(--transition); } .tab:hover { color: var(--tx); } .tab.active { background: var(--acl); border-color: var(--acb); color: var(--ac); } .tabs-primary { margin-bottom: 6px; } .tabs-secondary { margin-bottom: 14px; } .history-controls-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .history-controls-row .tabs-secondary { margin-bottom: 0; } .history-sort { display: flex; align-items: center; gap: 6px; } .history-sort-label { font-size: 11px; color: var(--tx3); font-weight: 600; } .history-sort select { font-family: var(--sa); font-size: 11px; padding: 4px 8px; border: 1px solid var(--bd2); border-radius: 6px; background: var(--sf); color: var(--tx); cursor: pointer; } .tab-sm { padding: 4px 10px; font-size: 10px; border-radius: 5px; } /* ===== AGGREGATED HISTORY CARDS ===== */ .history-agg-card { background: var(--sf); border: 1px solid var(--bd); border-radius: 12px; box-shadow: var(--shs); margin-bottom: 10px; overflow: hidden; } .history-agg-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; cursor: pointer; transition: background var(--transition); } .history-agg-header:hover { background: var(--sf2); } .history-agg-name { font-size: 14px; font-weight: 700; color: var(--tx); margin-bottom: 2px; } .history-agg-meta { font-size: 11px; color: var(--tx3); display: flex; gap: 12px; } .history-agg-brands { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; } .history-agg-body { display: none; padding: 0 16px 12px; border-top: 1px solid var(--bd); } .history-agg-card.expanded .history-agg-body { display: block; padding-top: 12px; } .history-agg-card.expanded .history-expand-icon { transform: rotate(180deg); } /* ===== PO DASHBOARD ===== */ .dashboard-bulk-actions { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; } .dashboard-error-bar { display: flex; align-items: center; justify-content: space-between; background: var(--aml); border: 1px solid var(--amb); border-radius: 8px; padding: 8px 14px; font-size: 12px; font-weight: 600; color: var(--am); margin-bottom: 14px; } .dashboard-fuzzy-bar { display: flex; align-items: center; justify-content: space-between; background: var(--bll); border: 1px solid var(--blb); border-radius: 8px; padding: 8px 14px; font-size: 12px; font-weight: 600; color: var(--bl); margin-bottom: 14px; } .po-actions { display: flex; gap: 4px; flex-wrap: wrap; } /* ===== DATA WARNING BANNER ===== */ .data-warning-banner { display: flex; gap: 12px; align-items: flex-start; background: var(--aml); border: 1px solid var(--amb); border-radius: 10px; padding: 14px 16px; } .data-warning-icon { font-size: 20px; flex-shrink: 0; line-height: 1; } .data-warning-banner h4 { font-family: var(--sa); font-size: 13px; font-weight: 700; font-style: normal; color: var(--am); } .data-warning-banner .card-desc { color: var(--tx2); margin-bottom: 0; } /* ===== SUPPLIERS TOOLBAR ===== */ /* Sits above the suppliers grid. Two render modes: - Default: filter (category + brand) + sort dropdowns - Selection mode: count + select-all + cancel + delete buttons */ .suppliers-toolbar { margin-bottom: 14px; } .suppliers-toolbar:empty { display: none; } .suppliers-toolbar-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; padding: 12px 14px; background: var(--sf); border: 1px solid var(--bd); border-radius: 10px; } .suppliers-toolbar-control { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .suppliers-toolbar-label { font-size: 11px; font-weight: 600; color: var(--tx3); text-transform: uppercase; letter-spacing: 0.06em; } .suppliers-toolbar-control select { min-width: 160px; padding: 6px 10px; border: 1px solid var(--bd); border-radius: 8px; background: var(--sf); color: var(--tx); font-size: 13px; cursor: pointer; } .suppliers-toolbar-control select:focus { outline: none; border-color: var(--bl); } .suppliers-toolbar-clear { margin-left: auto; background: none; border: 1px solid transparent; padding: 6px 10px; font-size: 12px; color: var(--bl); cursor: pointer; border-radius: 6px; } .suppliers-toolbar-clear:hover { background: var(--bll); } /* Pushed to the right edge of the toolbar so it sits opposite * the filter/sort controls. Same flex-pattern as the Clear filters * button — `margin-left: auto` claims the remaining space. When * Clear filters is also visible it sits to the LEFT of Resync; * the small gap from the toolbar-row's `gap` keeps them tidy. */ .suppliers-toolbar-resync { margin-left: auto; flex-shrink: 0; } /* Active / Dismissed view tabs. Pill-shaped segmented control to the LEFT of the filter cluster — first thing the user sees. */ .suppliers-view-tabs { display: inline-flex; background: var(--sf); border: 1px solid var(--bd); border-radius: 999px; padding: 2px; gap: 2px; } .suppliers-view-tab { border: 0; background: transparent; color: var(--tx2); font-size: 12px; font-weight: 500; padding: 5px 12px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-family: inherit; } .suppliers-view-tab:hover { color: var(--tx); } .suppliers-view-tab.is-active { background: var(--sf); color: var(--tx); box-shadow: 0 1px 2px rgba(0,0,0,0.06); } .suppliers-view-tab-count { font-size: 11px; color: var(--tx3); background: var(--bg); padding: 1px 6px; border-radius: 999px; min-width: 18px; text-align: center; } .suppliers-view-tab.is-active .suppliers-view-tab-count { color: var(--tx); background: var(--sf); } .suppliers-toolbar-hint { font-size: 12px; color: var(--tx3); margin-left: 12px; } /* Dismissed-card variant: muted, no drag handle, prominent badge. Restore is the primary action; Delete-permanently is destructive. */ .supplier-card-dismissed { opacity: 0.78; background: var(--sf); } .supplier-card-dismissed:hover { opacity: 1; } .supplier-dismissed-badge { font-size: 10px; letter-spacing: 0.04em; background: var(--bg); color: var(--tx3); border: 1px solid var(--bd); padding: 2px 8px; border-radius: 999px; font-weight: 600; } /* Selection mode bar */ .suppliers-toolbar-selection { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--bll); border: 1px solid var(--blb); border-radius: 10px; } .suppliers-toolbar-count { font-size: 13px; font-weight: 600; color: var(--bl); flex: 1; } /* ===== SUPPLIERS GRID ===== */ .suppliers-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; } .supplier-card { background: var(--sf); border: 1px solid var(--bd); border-radius: 12px; padding: 16px; box-shadow: var(--shs); position: relative; transition: border-color var(--transition), box-shadow var(--transition), opacity var(--transition); } /* Drag-drop visual states */ .supplier-card[draggable="true"] { cursor: grab; } .supplier-card[draggable="true"]:active { cursor: grabbing; } .supplier-card.supplier-dragging { opacity: 0.4; } .supplier-card.supplier-drag-over { border-color: var(--bl); box-shadow: 0 0 0 2px var(--bll); } .supplier-card.supplier-card-selected { border-color: var(--bl); background: var(--bll); } /* Header row: checkbox, drag handle, name, source tags */ .supplier-card-header { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px; } .supplier-card-checkbox { width: 16px; height: 16px; margin: 0; margin-top: 3px; flex: none; cursor: pointer; accent-color: var(--bl); } .supplier-drag-handle { color: var(--tx3); font-size: 14px; letter-spacing: -3px; user-select: none; cursor: grab; margin-top: 1px; padding: 0 2px; flex: none; } .supplier-drag-handle:active { cursor: grabbing; } .supplier-card-header-main { flex: 1; min-width: 0; } /* Category chips (auto-derived from products.product_type per brand) */ .supplier-categories { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 9px; } .supplier-category-chip { font-size: 10px; font-weight: 500; padding: 2px 8px; background: var(--sf2); color: var(--tx2); border: 1px solid var(--bd); border-radius: 4px; text-transform: uppercase; letter-spacing: 0.04em; } .supplier-category-chip-more { color: var(--tx3); font-style: italic; text-transform: none; letter-spacing: 0; } .supplier-card .supplier-name { font-size: 14px; font-weight: 700; color: var(--tx); margin-bottom: 8px; } .supplier-card .supplier-brands { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 9px; } .brand-tag { font-size: 10px; font-weight: 600; padding: 2px 7px; background: var(--acl); color: var(--ac); border: 1px solid var(--acb); border-radius: 980px; } .supplier-contact { font-size: 11px; color: var(--tx3); line-height: 1.6; } .supplier-actions { display: flex; gap: 4px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--bd); } /* ===== HISTORY ===== */ .history-card { background: var(--sf); border: 1px solid var(--bd); border-radius: 12px; box-shadow: var(--shs); margin-bottom: 10px; overflow: hidden; } .history-card-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; cursor: pointer; transition: background var(--transition); } .history-card-header:hover { background: var(--sf2); } .history-info { flex: 1; } .history-info .history-po-range { font-size: 13px; font-weight: 700; color: var(--ac); margin-bottom: 2px; } .history-info .history-meta { font-size: 11px; color: var(--tx3); display: flex; gap: 12px; } .history-status { font-size: 9px; font-weight: 800; padding: 3px 8px; border-radius: 980px; text-transform: uppercase; letter-spacing: 0.08em; } .history-status.completed { background: var(--gnl); color: var(--gn); border: 1px solid var(--gnb); } .history-status.in-progress { background: var(--acl); color: var(--ac); border: 1px solid var(--acb); } .history-expand-icon { font-size: 12px; color: var(--tx3); transition: transform var(--transition); margin-left: 12px; } .history-card.expanded .history-expand-icon { transform: rotate(180deg); } .history-card-body { display: none; padding: 0 16px 12px; border-top: 1px solid var(--bd); } .history-card.expanded .history-card-body { display: block; padding-top: 12px; } .history-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--bd); font-size: 12px; } .history-row:last-child { border-bottom: none; } .history-row-info { flex: 1; } .history-row-actions { display: flex; gap: 5px; } /* ===== MODALS ===== */ .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; z-index: 500; padding: 20px; } .modal { background: var(--sf); border-radius: 18px; width: 100%; max-width: 420px; max-height: 88vh; overflow: hidden; display: flex; flex-direction: column; box-shadow: none; } .modal-lg { max-width: 520px; } .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--bd); flex-shrink: 0; } .modal-header h3 { font-family: var(--se); font-size: 18px; font-style: italic; margin-bottom: 0; } .modal-close { font-size: 18px; color: var(--tx3); cursor: pointer; border: none; background: none; padding: 3px 6px; border-radius: 4px; flex-shrink: 0; } .modal-close:hover { background: var(--sf2); } .modal-body { padding: 18px 22px; overflow-y: auto; flex: 1; } .modal-footer { padding: 13px 22px; border-top: 1px solid var(--bd); display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-shrink: 0; background: var(--sf); } /* ===== EXPORT FLOW ===== */ .export-steps-bar { display: flex; gap: 4px; align-items: center; margin-left: 12px; flex: 1; justify-content: center; } .export-step-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bd2); transition: all var(--transition); } .export-step-dot.active { background: var(--ac); width: 20px; border-radius: 4px; } .export-step-dot.done { background: var(--gn); } .export-section { margin-bottom: 16px; } .export-section h4 { font-family: var(--se); font-size: 16px; font-style: italic; font-weight: 400; margin-bottom: 5px; } .export-checklist { display: flex; flex-direction: column; gap: 0; max-height: 300px; overflow-y: auto; } .export-checklist label { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; padding: 8px 0; border-bottom: 1px solid var(--bd); cursor: pointer; } .export-checklist label:last-child { border-bottom: none; } .export-format-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .export-format-option { padding: 15px; border: 2px solid var(--bd2); border-radius: 10px; cursor: pointer; text-align: left; font-size: 13px; font-weight: 700; transition: all var(--transition); } .export-format-option:hover { border-color: var(--ac); } .export-format-option.selected { border-color: var(--ac); background: var(--acl); color: var(--ac); } .export-delivery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; } .export-delivery-option { padding: 13px; border: 1.5px solid var(--bd2); border-radius: 9px; cursor: pointer; text-align: center; font-size: 12px; font-weight: 700; transition: all var(--transition); } .export-delivery-option:hover { border-color: var(--ac); } .export-delivery-option.selected { border-color: var(--ac); background: var(--acl); color: var(--ac); } .export-delivery-option.disabled { opacity: 0.5; cursor: not-allowed; } /* Send/Download table */ .send-table { width: 100%; border-collapse: collapse; } .send-table th, .send-table td { text-align: left; padding: 7px 9px; font-size: 11px; border-bottom: 1px solid var(--bd); } .send-table th { font-size: 10px; font-weight: 800; color: var(--tx3); letter-spacing: 0.08em; text-transform: uppercase; background: var(--sf2); } .status-badge { font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 4px; } .status-badge.done { background: var(--gnl); color: var(--gn); border: 1px solid var(--gnb); } .status-badge.pending { background: var(--sf2); color: var(--tx3); border: 1px solid var(--bd); } /* Review stats */ .review-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-bottom: 15px; } .stat-card { background: var(--sf2); border: 1px solid var(--bd); border-radius: 8px; padding: 12px; } .stat-card .stat-value { font-family: var(--se); font-size: 28px; color: var(--tx); line-height: 1; margin-bottom: 2px; } .stat-card .stat-label { font-size: 10px; font-weight: 700; color: var(--tx3); text-transform: uppercase; letter-spacing: 0.06em; } .financial-summary { border: 1px solid var(--bd); border-radius: 8px; overflow: hidden; margin-bottom: 12px; } .financial-row { display: flex; justify-content: space-between; font-size: 12px; padding: 9px 12px; border-bottom: 1px solid var(--bd); } .financial-row:last-child { border-bottom: none; } .financial-row .label { font-weight: 600; color: var(--tx2); } .financial-row .value { font-weight: 700; color: var(--tx); } /* ===== REORDER STAT CARDS ===== */ .reorder-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 16px; } .reorder-stat { background: var(--sf); border: 1.5px solid var(--bd); border-radius: var(--radius-card); padding: 18px 20px; box-shadow: var(--shs); cursor: pointer; transition: border-color var(--transition); } .reorder-stat:hover { border-color: var(--tx3); } .info-icon { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; background: var(--bd); color: var(--tx3); font-family: var(--se); font-size: 9px; font-style: italic; font-weight: 600; cursor: help; position: relative; vertical-align: middle; margin-left: 4px; } .info-icon::after { content: attr(title); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: var(--tx); color: var(--sf); font-family: var(--sa); font-size: 12px; font-style: normal; font-weight: 400; line-height: 1.4; letter-spacing: 0; text-transform: none; padding: 8px 12px; border-radius: 8px; width: 220px; white-space: normal; pointer-events: none; opacity: 0; transition: opacity 0.2s; z-index: 100; } .info-icon:hover::after { opacity: 1; } .reorder-label { font-family: var(--sa); font-size: 9px; font-weight: 600; color: var(--tx3); letter-spacing: 1.2px; text-transform: uppercase; margin-bottom: 8px; } .reorder-value { font-family: var(--se); font-size: 36px; font-weight: 300; color: var(--tx); letter-spacing: -1px; line-height: 1; margin-bottom: 2px; } .reorder-value-sm { font-size: 18px; } .reorder-unit { font-family: var(--sa); font-size: 13px; font-weight: 400; color: var(--tx3); margin-top: 4px; } .reorder-input { width: 100%; font-family: var(--sa); font-weight: 800; font-size: 24px; padding: 4px 6px; border: 2px solid var(--ac); border-radius: 6px; background: var(--sf); color: var(--tx); outline: none; margin-bottom: 2px; } select.reorder-input { font-size: 13px; font-weight: 700; padding: 8px 6px; } /* ===== GENERATE BAR ===== */ .generate-bar { display: flex; align-items: center; gap: 12px; position: fixed; bottom: 0; left: var(--sidebar-w); right: 0; background: rgba(247,244,238,0.95); backdrop-filter: blur(16px); border-top: 1px solid var(--bd); padding: 16px 32px; z-index: 50; } .generate-status { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 13px; font-weight: 500; color: var(--tx); } .generate-status-sub { font-size: 11px; font-weight: 400; color: var(--tx3); } .generate-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--bd2); flex-shrink: 0; } .generate-dot.ready { background: var(--gn); } .generate-status strong { color: var(--tx2); } .generate-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; } /* ===== ACTION ROW ===== */ .action-row { display: flex; align-items: center; gap: 12px; margin-top: 8px; } /* ===== EMPTY STATE ===== */ .empty-state { padding: 20px; text-align: center; color: var(--tx3); font-size: 12px; font-weight: 400; } /* ===== ERROR BANNER ===== */ .error-banner { background: var(--aml); border: 1px solid var(--amb); border-radius: 8px; padding: 10px 14px; margin-bottom: 16px; display: flex; align-items: center; gap: 10px; } .error-banner-icon { font-size: 16px; flex-shrink: 0; } .error-banner-text { flex: 1; font-size: 12px; color: var(--am); font-weight: 600; } .error-banner-text strong { font-weight: 800; } .error-banner-link { font-size: 11px; font-weight: 700; color: var(--am); text-decoration: underline; cursor: pointer; border: none; background: none; font-family: var(--sa); white-space: nowrap; flex-shrink: 0; } .error-banner-link:hover { color: var(--tx); } /* ===== PROGRESS OVERLAY ===== */ .progress-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.75); display: flex; align-items: center; justify-content: center; z-index: 2000; padding: 20px; } .progress-card { background: var(--sf); border-radius: 18px; padding: 32px 36px; max-width: 440px; width: 100%; box-shadow: none; text-align: center; } .progress-title { font-family: var(--sa); font-size: 18px; font-weight: 800; color: var(--tx); margin-bottom: 20px; } .progress-bar-wrap { width: 100%; height: 10px; background: var(--sf2); border-radius: 5px; overflow: hidden; margin-bottom: 14px; border: 1px solid var(--bd); } .progress-bar-fill { height: 100%; background: var(--ac); border-radius: 5px; transition: width 0.3s ease; } .progress-status { font-size: 12px; font-weight: 600; color: var(--tx2); margin-bottom: 6px; } .progress-eta { font-size: 11px; font-weight: 700; color: var(--ac); margin-bottom: 16px; } .progress-tips { text-align: left; font-size: 11px; color: var(--tx3); line-height: 1.6; } .progress-tip { background: var(--aml); border: 1px solid var(--amb); border-radius: 7px; padding: 8px 11px; margin-bottom: 6px; font-size: 11px; color: var(--am); font-weight: 600; } /* ===== LIVE DASHBOARD ===== */ .live-progress-bar { background: var(--sf2); border: 1px solid var(--bd); border-radius: 10px; padding: 14px 16px; margin-bottom: 16px; } .live-progress-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .live-progress-text { font-size: 12px; font-weight: 600; color: var(--tx); } .live-progress-eta { font-size: 11px; color: var(--tx3); } .live-progress-brand-count { font-size: 11px; color: var(--tx3); margin-top: 6px; } .live-progress-leave { font-size: 10px; color: var(--tx3); margin-top: 8px; text-align: center; } .live-brand-list { display: flex; flex-direction: column; gap: 6px; } .live-brand-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: var(--sf); border: 1px solid var(--bd2); border-left: 3px solid var(--gn); border-radius: 8px; transition: all 0.3s ease; opacity: 1; transform: translateY(0); } .live-brand-enter { opacity: 0; transform: translateY(-8px); } .live-brand-name { font-size: 13px; font-weight: 700; color: var(--tx); } .live-brand-meta { font-size: 11px; color: var(--tx3); margin-top: 2px; } .live-brand-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; } .live-brand-status { font-size: 10px; color: var(--gn); font-weight: 600; } .live-summary { margin-bottom: 14px; } .progress-leave-note { margin-top: 14px; font-size: 11px; color: var(--tx3); text-align: center; padding: 8px 12px; background: var(--sf2); border-radius: 6px; } /* ===== TOAST ===== */ .toast { position: fixed; top: 24px; left: 50%; transform: translateX(-50%); background: var(--tx); color: var(--sf); padding: 10px 20px; border-radius: var(--radius-btn); font-size: 12px; font-weight: 700; z-index: 2000; box-shadow: none; animation: toastIn 0.2s ease; } @keyframes toastIn { from { opacity: 0; transform: translateX(-50%) translateY(-8px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } /* ===== SUPPLIER ASSIGNMENT ===== */ .assignment-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 11px; background: var(--sf2); border: 1px solid var(--bd); border-radius: 7px; margin-bottom: 7px; gap: 10px; } .assignment-brand { font-size: 12px; font-weight: 700; color: var(--tx); flex-shrink: 0; } .assignment-row select { font-family: var(--sa); font-weight: 600; font-size: 11px; padding: 5px 8px; border: 1.5px solid var(--bd); border-radius: 6px; background: var(--sf); min-width: 140px; outline: none; } /* ===== DELIVERY TABS ===== */ .delivery-tabs { display: flex; gap: 5px; margin-bottom: 12px; } .delivery-tab { font-family: var(--sa); font-weight: 700; padding: 6px 13px; border: 1.5px solid var(--bd2); background: var(--sf2); color: var(--tx3); font-size: 11px; border-radius: 6px; cursor: pointer; } .delivery-tab.active { background: var(--acl); border-color: var(--acb); color: var(--ac); } /* ===== MOBILE MENU BUTTON (hidden on desktop) ===== */ .mobile-menu-btn { display: none; background: none; border: none; font-size: 22px; color: var(--tx); cursor: pointer; padding: 4px 8px; border-radius: 6px; flex-shrink: 0; } .mobile-menu-btn:hover { background: var(--sf2); } .mobile-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 99; } .mobile-overlay.active { display: block; } /* ===== RESPONSIVE ===== */ @media (max-width: 900px) { :root { --sidebar-w: 200px; } .app-content { padding: 16px 18px 30px; } .topbar { padding: 14px 18px; } .main-area::before, .main-area::after, .bg-blob-3, .bg-blob-4 { display: none; } } @media (max-width: 768px) { /* -- Sidebar: slide-in overlay instead of hidden -- */ :root { --sidebar-w: 0px; } .sidebar { transform: translateX(-100%); transition: transform 0.25s ease; z-index: 200; width: 260px; } .sidebar.mobile-open { transform: translateX(0); } .mobile-menu-btn { display: block; } /* -- Main area -- */ .main-area { margin-left: 0; width: 100%; } .topbar { padding: 12px 16px; } .topbar-left { display: flex; align-items: center; gap: 8px; } .topbar-title { font-size: 16px !important; } .topbar-subtitle { font-size: 10px !important; } .app-content { padding: 14px 16px 30px; } /* -- Page header -- */ .page-header-title { font-size: 28px; } .intro-banner { flex-direction: column; gap: 8px; padding: 14px 16px; } .intro-banner-icon { font-size: 20px; } /* -- Data mode selector -- */ .data-mode-options { flex-direction: column; } .data-mode-btn { flex-direction: row; text-align: left; align-items: center; gap: 12px; padding: 12px 14px; } .data-mode-icon { font-size: 18px; flex-shrink: 0; } .data-mode-label { font-size: 13px; } .data-mode-desc { font-size: 10px; } /* -- Cards -- */ .card { padding: 14px 16px; } .card h3 { font-size: 14px; } /* -- Grids -- */ .settings-grid { grid-template-columns: 1fr; } .sources-grid { grid-template-columns: 1fr; } .suppliers-grid { grid-template-columns: 1fr; } /* -- Match key pills -- */ .pill-selector { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .pill { padding: 8px 10px; border-radius: 10px; text-align: center; } /* -- Fuzzy row -- */ .fuzzy-explain { padding-left: 0; margin-top: 4px; } /* -- Mapping modal -- */ .mapping-row { grid-template-columns: 1fr; gap: 3px; } .mapping-row label { text-align: left; } /* -- Reorder settings -- */ .reorder-grid { grid-template-columns: 1fr 1fr; } /* -- Generate bar -- */ .generate-bar { left: 0; flex-direction: column; gap: 12px; align-items: stretch; text-align: center; padding: 14px 16px; } .generate-bar .btn-lg { width: 100%; justify-content: center; padding: 12px; font-size: 14px; } /* -- History -- */ .history-controls-row { flex-direction: column; align-items: stretch; gap: 8px; } .history-sort { justify-content: flex-end; } .history-row { flex-direction: column; gap: 8px; align-items: flex-start; } .history-row-actions { display: flex; gap: 5px; flex-wrap: wrap; width: 100%; } .history-row-actions .btn { flex: 1; min-width: 0; justify-content: center; font-size: 10px; padding: 5px 6px; } /* -- Modals -- */ .modal-overlay { padding: 10px; align-items: flex-end; } .modal { max-width: 100%; border-radius: 16px 16px 0 0; max-height: 92vh; } .modal-lg { max-width: 100%; } .modal-header { padding: 14px 16px; } .modal-body { padding: 14px 16px; } .modal-footer { padding: 12px 16px; } /* -- Export dashboard -- */ .review-stats { grid-template-columns: 1fr 1fr; } .export-format-grid { grid-template-columns: 1fr; } .export-delivery-grid { grid-template-columns: 1fr; } .dashboard-bulk-actions { flex-direction: column; } .dashboard-bulk-actions .btn { width: 100%; justify-content: center; } /* -- PO table: card layout on mobile -- */ .send-table thead { display: none; } .send-table tbody tr { display: flex; flex-direction: column; padding: 10px 0; border-bottom: 1px solid var(--bd); gap: 4px; } .send-table td { padding: 2px 0; font-size: 12px; border: none; } .po-actions { flex-wrap: wrap; } .po-actions .btn { flex: 1; min-width: 0; justify-content: center; font-size: 10px; } /* -- Live dashboard -- */ .live-brand-row { flex-direction: column; align-items: flex-start; gap: 8px; } .live-brand-actions { width: 100%; flex-wrap: wrap; } .live-brand-actions .btn { flex: 1; min-width: 0; justify-content: center; } /* -- Export checklist (brand picker) -- */ .export-checklist label { font-size: 12px; padding: 8px 4px; } /* -- Supplier cards -- */ .supplier-card { padding: 12px; } /* -- Setup screens -- */ .setup-container { padding: 1.5rem 1rem; max-width: 100%; } .sb-wordmark-lg { font-size: 32px !important; } .sb-wordmark-md { font-size: 24px !important; } /* -- File drop zone -- */ .file-drop { padding: 16px; } /* -- Source card -- */ .source-card { padding: 12px; } } /* Extra small screens (iPhone SE, etc.) */ @media (max-width: 380px) { .reorder-grid { grid-template-columns: 1fr; } .pill-selector { grid-template-columns: 1fr; } .review-stats { grid-template-columns: 1fr; } .data-mode-btn { padding: 10px 12px; } .topbar-title { font-size: 14px !important; } } /* ===== Supplier modal — brand picker search + add ===== */ .brand-picker-group { display: flex; align-items: stretch; border: 1px solid var(--bd); border-radius: 10px; background: var(--sf); overflow: hidden; transition: border-color var(--transition); } .brand-picker-group:focus-within { border-color: var(--tx); } .brand-picker-input { flex: 1; min-width: 0; border: 0 !important; background: transparent !important; padding: 10px 14px; font-family: var(--sa); font-size: 14px; color: var(--tx); outline: none; } .brand-picker-input::placeholder { color: var(--tx3); } .brand-picker-add { flex-shrink: 0; border: 0; border-left: 1px solid var(--bd); border-radius: 0; background: var(--gn); color: #FFFFFF; padding: 0 16px; font-family: var(--sa); font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: background var(--transition); } .brand-picker-add:hover { background: #16513A; } .brand-picker-add:active { background: #123D2A; } html.dark-mode .brand-picker-group { background: var(--sf2); } html.dark-mode .brand-picker-add { background: #1E8A5C; } html.dark-mode .brand-picker-add:hover { background: #26A06B; } /* ===== AUTH SCREEN (v2) — split layout ===== */ #auth-screen { min-height: 100vh; width: 100%; background: var(--bg); display: block; } #auth-screen-body { min-height: 100vh; width: 100%; } .auth-split { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; width: 100%; } /* ---------- LEFT column: brand + form ---------- */ .auth-left { display: flex; flex-direction: column; justify-content: center; padding: 40px 72px; max-width: 640px; width: 100%; margin-left: auto; /* pull toward the seam so form sits near the middle */ } .auth-brand-xl { margin-bottom: 28px; } .auth-brand-delegate { font-family: var(--sa); font-size: 13px; font-weight: 500; letter-spacing: 2.4px; text-transform: uppercase; color: var(--tx3); margin-bottom: 6px; } .auth-wordmark { font-family: var(--se); font-style: italic; font-weight: 400; font-size: 88px; line-height: 0.95; color: var(--tx); letter-spacing: -1.5px; } .auth-tagline { margin-top: 14px; color: var(--tx3); font-size: 15px; letter-spacing: 0.2px; max-width: 420px; } .auth-form-block { max-width: 440px; width: 100%; } .auth-heading { font-family: var(--se); font-size: 22px; font-weight: 400; color: var(--tx); line-height: 1.2; margin: 0 0 6px; } .auth-subheading { color: var(--tx3); font-size: 13px; line-height: 1.45; margin: 0 0 14px; max-width: 420px; } /* Two form-groups side by side (first/last name row) */ .auth-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .auth-field-row .form-group { margin-bottom: 14px; } /* Step indicator ( ● ○ Step 1 of 2 ) */ .auth-step-indicator { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .auth-step-dot { width: 22px; height: 4px; border-radius: 2px; background: var(--bd2); transition: background var(--transition); } .auth-step-dot.active { background: var(--tx); } .auth-step-label { font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--tx3); margin-left: 4px; } /* Step 2 footer — Back + Create account side by side */ .auth-step-actions { display: grid; grid-template-columns: auto 1fr; gap: 10px; margin-top: 6px; } .auth-step-actions .btn-secondary { padding-left: 18px; padding-right: 18px; } .auth-step-actions .auth-submit { margin-top: 0; } /* ---------- Onboarding questionnaire ---------- */ .auth-onboard-fields { display: block; } .auth-onboard-fields .form-group { margin-bottom: 10px; } .onboard-field { position: relative; } .onboard-select { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 11px 14px; border: 1px solid var(--bd); border-radius: 10px; background: var(--sf); color: var(--tx3); font-family: var(--sa); font-size: 14px; text-align: left; cursor: pointer; transition: border-color var(--transition), color var(--transition); } .onboard-select:hover { border-color: var(--tx3); } .onboard-select.has-value { color: var(--tx); } .onboard-field.open .onboard-select { border-color: var(--tx); color: var(--tx); } .onboard-select-chevron { font-size: 10px; color: var(--tx3); line-height: 1; } .onboard-panel { margin-top: 6px; border: 1px solid var(--bd); border-radius: 10px; background: var(--sf); padding: 6px; max-height: 220px; overflow-y: auto; box-shadow: 0 2px 10px rgba(0,0,0,0.04); } .onboard-option { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; background: transparent; color: var(--tx); font-family: var(--sa); font-size: 13.5px; font-weight: 500; text-align: left; border-radius: 8px; cursor: pointer; transition: background var(--transition); } .onboard-option:hover { background: var(--sf2); } .onboard-option.checked, .onboard-option.selected { background: var(--sf2); } .onboard-checkbox { width: 18px; height: 18px; border: 1.5px solid var(--bd2); border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; color: var(--sf); background: var(--sf); flex-shrink: 0; transition: background var(--transition), border-color var(--transition); } .onboard-option.checked .onboard-checkbox { background: var(--tx); border-color: var(--tx); color: var(--sf); } html.dark-mode .onboard-select { background: var(--sf2); } html.dark-mode .onboard-panel { background: var(--sf2); } html.dark-mode .onboard-option:hover { background: var(--sf3); } html.dark-mode .onboard-option.checked, html.dark-mode .onboard-option.selected { background: var(--sf3); } html.dark-mode .onboard-checkbox { background: var(--sf2); border-color: var(--bd2); } html.dark-mode .onboard-option.checked .onboard-checkbox { background: var(--tx); border-color: var(--tx); color: var(--bg); } /* SSO buttons (Google + Apple) — placeholders for now */ .auth-sso-group { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; } .auth-sso-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 11px 14px; border-radius: 10px; font-family: var(--sa); font-size: 14px; font-weight: 500; cursor: pointer; transition: background var(--transition), border-color var(--transition), color var(--transition); } .auth-sso-btn svg { flex-shrink: 0; } .auth-sso-btn--google { background: #FFFFFF; border: 1px solid var(--bd); color: #1F1F1F; } .auth-sso-btn--google:hover { background: #F7F7F7; border-color: var(--tx3); } .auth-sso-btn--apple { background: #000000; border: 1px solid #000000; color: #FFFFFF; } .auth-sso-btn--apple:hover { background: #1A1A1A; } /* "or continue with email" divider */ .auth-divider { position: relative; text-align: center; margin: 2px 0 12px; font-size: 12px; color: var(--tx3); letter-spacing: 0.4px; } .auth-divider::before, .auth-divider::after { content: ''; position: absolute; top: 50%; width: calc(50% - 80px); height: 1px; background: var(--bd); } .auth-divider::before { left: 0; } .auth-divider::after { right: 0; } .auth-divider span { background: var(--bg); padding: 0 12px; position: relative; } .auth-form-block .form-group { margin-bottom: 11px; } .auth-form-block .form-group label { font-size: 11.5px; font-weight: 500; color: var(--tx2); letter-spacing: 0.6px; text-transform: uppercase; display: block; margin-bottom: 6px; } .auth-form-block .form-group input { width: 100%; padding: 11px 14px; border: 1px solid var(--bd); border-radius: 10px; background: var(--sf); color: var(--tx); font-family: var(--sa); font-size: 14px; transition: border-color var(--transition), background var(--transition); } .auth-form-block .form-group input:focus { outline: none; border-color: var(--tx); background: var(--sf); } .auth-form-block .form-tip { display: block; margin-top: 6px; color: var(--tx3); font-size: 11.5px; } .auth-password-wrap { position: relative; } .auth-password-wrap input { padding-right: 58px; } .auth-password-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: transparent; border: 0; color: var(--tx3); font-size: 12px; font-weight: 500; padding: 6px 10px; border-radius: 6px; cursor: pointer; transition: color var(--transition), background var(--transition); } .auth-password-toggle:hover { color: var(--tx); background: var(--sf2); } .auth-submit { width: 100%; margin-top: 6px; } .auth-alert { padding: 10px 12px; border-radius: 8px; font-size: 13px; line-height: 1.4; margin-bottom: 14px; } .auth-alert-error { background: var(--rdl); color: var(--rd); border: 1px solid var(--rdb); } .auth-alert-success { background: var(--gnl); color: var(--gn); border: 1px solid var(--gnb); } .auth-linkbtn { background: transparent; border: 0; padding: 0; color: var(--tx); font-family: var(--sa); font-size: inherit; font-weight: 500; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .auth-linkbtn:hover { color: var(--tx2); } .auth-forgot { display: block; margin: 12px auto 0; font-size: 13px; color: var(--tx3); font-weight: 400; } .auth-toggle { margin-top: 14px; color: var(--tx3); font-size: 13.5px; } .auth-toggle .auth-linkbtn { margin-left: 6px; } /* ---------- RIGHT column: value-prop slider ---------- */ .auth-right { position: relative; background: var(--sf2); border-left: 1px solid var(--bd); display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 64px 48px; overflow: hidden; } .auth-slides { width: 100%; max-width: 480px; } .auth-slide { display: flex; flex-direction: column; align-items: flex-start; text-align: left; animation: auth-slide-fade 0.5s ease both; } @keyframes auth-slide-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .auth-slide-icon { width: 72px; height: 72px; border-radius: 18px; display: flex; align-items: center; justify-content: center; font-size: 30px; color: var(--tx); margin-bottom: 32px; } .auth-slide[data-tint="bll"] .auth-slide-icon { background: var(--bll); } .auth-slide[data-tint="gnl"] .auth-slide-icon { background: var(--gnl); } .auth-slide[data-tint="acb"] .auth-slide-icon { background: var(--acb); } .auth-slide[data-tint="amb"] .auth-slide-icon { background: var(--amb); } .auth-slide-eyebrow { font-size: 11.5px; font-weight: 600; color: var(--tx3); letter-spacing: 1.4px; text-transform: uppercase; margin-bottom: 12px; } .auth-slide-title { font-family: var(--se); font-size: 40px; font-weight: 400; color: var(--tx); line-height: 1.1; margin: 0 0 20px; letter-spacing: -0.5px; } .auth-slide-body { font-size: 15px; color: var(--tx2); line-height: 1.55; max-width: 420px; margin: 0; } .auth-slide-dots { display: flex; gap: 8px; margin-top: 48px; } .auth-slide-dot { width: 28px; height: 4px; border-radius: 2px; border: 0; background: var(--bd2); padding: 0; cursor: pointer; transition: background var(--transition), width var(--transition); } .auth-slide-dot:hover { background: var(--tx3); } .auth-slide-dot.active { background: var(--tx); width: 44px; } /* ---------- Short viewports: tighten further ---------- */ @media (max-height: 780px) { .auth-left { padding-top: 28px; padding-bottom: 28px; } .auth-brand-xl { margin-bottom: 20px; } .auth-wordmark { font-size: 68px; } .auth-subheading { margin-bottom: 10px; } .auth-sso-group { margin-bottom: 10px; } .auth-divider { margin: 0 0 8px; } .auth-form-block .form-group { margin-bottom: 9px; } .auth-toggle { margin-top: 10px; } } /* ---------- Responsive: collapse to single column ---------- */ @media (max-width: 960px) { .auth-split { grid-template-columns: 1fr; } .auth-left { padding: 40px 28px; margin-left: 0; max-width: 520px; align-items: stretch; margin: 0 auto; } .auth-wordmark { font-size: 64px; } .auth-brand-xl { margin-bottom: 36px; } .auth-right { display: none; } } @media (max-width: 520px) { .auth-left { padding: 28px 20px; } .auth-wordmark { font-size: 54px; } .auth-brand-xl { margin-bottom: 28px; } } /* ---------- Dark mode ---------- */ html.dark-mode .auth-right { background: var(--sf); border-left-color: var(--bd); } html.dark-mode .auth-form-block .form-group input { background: var(--sf2); border-color: var(--bd); } html.dark-mode .auth-form-block .form-group input:focus { border-color: var(--tx); background: var(--sf); } html.dark-mode .auth-password-toggle:hover { background: var(--sf3); } html.dark-mode .auth-slide-dot { background: var(--bd); } html.dark-mode .auth-slide-dot.active { background: var(--tx); } /* ===== Backfill progress pulse ===== */ .shimmer-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--gn); margin-right: 6px; animation: shimmer-pulse 1.2s ease-in-out infinite; vertical-align: middle; } @keyframes shimmer-pulse { 0%, 100% { opacity: 0.35; transform: scale(0.9); } 50% { opacity: 1; transform: scale(1.1); } } /* Connected badge — shown on ready connection cards */ .conn-status-badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 8px; font-size: 11px; font-weight: 500; letter-spacing: 0.02em; color: var(--gn); background: var(--gnl); border: 1px solid var(--gnb); border-radius: 999px; line-height: 1.5; white-space: nowrap; } .conn-status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gn); box-shadow: 0 0 0 2px rgba(30, 77, 53, 0.18); } /* ==================================================================== Smart Reorder screen ==================================================================== */ .reorder-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; } .reorder-stat { background: var(--bg); border: 1px solid var(--bd); border-radius: 12px; padding: 14px 16px; } .reorder-stat-label { font-size: 12px; letter-spacing: 0; color: var(--ghost); font-weight: 500; margin-bottom: 6px; } .reorder-stat-value { font-family: 'Fraunces', serif; font-size: 28px; font-weight: 400; line-height: 1; color: var(--tx); } .reorder-stat-critical { color: var(--rd); } .reorder-stat-warning { color: #B9851B; } /* Diagnostic stat strip in the Smart Reorder empty state — quieter * than the main .reorder-stats row so it reads as informational * rather than the primary KPI band. */ .reorder-empty-stats { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--bd); } .reorder-empty-stat { display: inline-flex; align-items: baseline; gap: 6px; font-size: 12px; color: var(--tx3); } .reorder-empty-stat strong { color: var(--tx); font-size: 15px; font-weight: 600; } .reorder-actions-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; background: var(--bg); border: 1px solid var(--bd); border-radius: 12px; margin-bottom: 20px; position: sticky; top: 0; z-index: 5; } .reorder-actions-info { font-size: 13px; color: var(--tx); } .reorder-group { background: var(--bg); border: 1px solid var(--bd); border-radius: 14px; margin-bottom: 16px; overflow: hidden; } .reorder-group-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; background: var(--sf); border-bottom: 1px solid var(--bd); } .reorder-group-title { font-size: 15px; font-weight: 500; margin: 0; display: flex; align-items: center; gap: 6px; } /* Collapse chevron in the group title. Small + minimal so it doesn't * compete with the supplier name. Active region is the whole button * so it's easy to hit on touch. */ .reorder-group-collapse-btn { appearance: none; background: transparent; border: 0; padding: 0 4px; margin: 0; font-size: 12px; line-height: 1; color: var(--ghost); cursor: pointer; transition: color 0.15s ease; } .reorder-group-collapse-btn:hover { color: var(--ink); } .reorder-group.is-collapsed .reorder-group-header { /* Collapsed: trim the bottom padding since there's no table below. */ padding-bottom: 12px; } /* Excluded SKUs footer — appears below the supplier groups when the * user has marked any SKUs as "exclude from this run" via the bulk * action bar. Without this surface, once a SKU is excluded there's * no way to get it back short of a full Recompute (which would also * wipe all qty edits). The footer collapsed shows just the count; * expanding reveals per-SKU Restore chips. */ .reorder-excluded-footer { margin-top: 12px; padding: 10px 14px; border: 1px solid var(--bd); background: var(--bg-soft, var(--bg)); border-radius: 8px; font-size: 12px; color: var(--tx2, var(--ghost)); } .reorder-excluded-summary { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .reorder-excluded-summary strong { color: var(--ink); } .reorder-excluded-toggle { background: transparent; border: 0; padding: 2px 6px; font-size: 12px; color: var(--ac); cursor: pointer; text-decoration: underline; } .reorder-excluded-toggle:hover { color: var(--ink); } .reorder-excluded-list { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; } .reorder-excluded-chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; background: var(--bg); border: 1px solid var(--bd-soft, var(--bd)); border-radius: 14px; font-size: 11px; } .reorder-excluded-chip-sku { font-family: var(--mono, ui-monospace, "SF Mono", Menlo, monospace); color: var(--ink); } .reorder-excluded-chip-name { color: var(--ghost); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .reorder-excluded-chip-restore { background: transparent; border: 0; padding: 0 2px; font-size: 11px; color: var(--ac); cursor: pointer; } .reorder-excluded-chip-restore:hover { color: var(--ink); text-decoration: underline; } .reorder-excluded-tail { color: var(--ghost); font-size: 11px; padding: 4px 8px; } /* Per-supplier rounding picker in the group header. Sits flush with * the +Add Item / totals row. Quiet styling so it doesn't compete * with the more important Units/Cost/Margin stats. */ .reorder-group-rounding { height: 28px; padding: 0 24px 0 8px; margin-right: 8px; border: 1px solid var(--bd); background: var(--bg); color: var(--ink); font-size: 11px; border-radius: 6px; cursor: pointer; max-width: 220px; } .reorder-group-rounding:hover { border-color: var(--ghost); } /* Per-supplier "ignore in-transit stock" toggle in the group header. * Quiet by default; picks up an accent treatment when on so it's * obvious that this table's qtys are computed differently. */ .reorder-group-ignore-transit { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; margin-right: 8px; border: 1px solid var(--bd); background: var(--bg); color: var(--ghost); font-size: 11px; border-radius: 6px; cursor: pointer; white-space: nowrap; user-select: none; } .reorder-group-ignore-transit:hover { border-color: var(--ghost); } .reorder-group-ignore-transit input { margin: 0; cursor: pointer; } .reorder-group-ignore-transit.is-on { color: var(--ac, #2563eb); border-color: color-mix(in srgb, var(--ac, #2563eb) 45%, transparent); background: color-mix(in srgb, var(--ac, #2563eb) 8%, transparent); font-weight: 500; } .reorder-group-meta { font-size: 12px; color: var(--ghost); margin: 2px 0 0; } /* Split-brand warning under the group title — flags when a brand in * this group is also carried by another supplier, so the user knows * why an expected supplier is missing and that they can reroute. */ .reorder-group-split-hint { font-size: 11px; color: var(--rd, #c84); margin: 4px 0 0; cursor: help; font-weight: 500; } /* Per-group sort-metric badge under the supplier name. Surfaces * why this group is at its current position so the ordering is * legible at a glance. Style is quiet — informational, not the * headline of the card. */ .reorder-group-sort-badge { display: inline-block; margin-top: 4px; padding: 2px 8px; font-size: 11px; font-weight: 600; color: var(--ac, #2c6fff); background: rgba(44, 111, 255, 0.10); border-radius: 999px; } .reorder-group-sort-badge-critical { color: var(--rd); background: rgba(220, 53, 69, 0.10); } /* Bulk select column — first cell on every row + a "select all in * this group" checkbox in the table header. Narrow column; the * checkbox aligns with the row-level Include checkbox visually. */ .reorder-th-bulk { width: 40px; text-align: center; padding: 8px 6px !important; } .reorder-td-bulk { width: 40px; text-align: center; padding: 6px; } .reorder-tr.is-bulk-selected { background: rgba(44, 111, 255, 0.06); } .reorder-tr.is-bulk-selected:hover { background: rgba(44, 111, 255, 0.10); } /* Bulk action bar — appears under the main actions bar when at * least one row is selected. Sticky-ish in feel: surfaces the * primary batch ops (set qty, reroute supplier, exclude, reset). * Designed to be informative at a glance — count badge on the * left, all action controls in a single horizontal flow. */ .reorder-bulk-bar { display: flex; align-items: center; gap: 10px; padding: 10px 16px; margin-bottom: 14px; background: rgba(44, 111, 255, 0.06); border: 1px solid rgba(44, 111, 255, 0.20); border-radius: 10px; flex-wrap: wrap; } .reorder-bulk-count { font-size: 13px; color: var(--tx); } .reorder-bulk-count strong { font-size: 15px; color: var(--ac, #2c6fff); } .reorder-bulk-label { font-size: 13px; color: var(--tx2); } .reorder-bulk-qty { display: inline-flex; align-items: center; gap: 6px; } .reorder-bulk-qty input { width: 70px; padding: 5px 8px; font-size: 13px; border: 1px solid var(--bd); border-radius: 6px; background: var(--bg); color: var(--tx); } .reorder-bulk-reroute-wrap { position: relative; display: inline-block; } /* "Group by Supplier / Brand" segmented control. Sits at the * left of the actions bar. Visually a single pill split into two * buttons; the active half gets a filled background. */ .reorder-group-toggle { display: inline-flex; border: 1px solid var(--bd); border-radius: var(--radius-btn); overflow: hidden; background: var(--bg); } .reorder-group-toggle-btn { padding: 6px 12px; font-size: 13px; font-weight: 500; color: var(--tx2); background: transparent; border: none; cursor: pointer; transition: var(--transition); } .reorder-group-toggle-btn + .reorder-group-toggle-btn { border-left: 1px solid var(--bd); } .reorder-group-toggle-btn:hover { background: var(--sf); } .reorder-group-toggle-btn.is-active { background: var(--ac); color: var(--ac-text); font-weight: 600; } .reorder-group-toggle-btn.is-active:hover { background: var(--ac); } /* Sort dropdown (next to "Sort: