/* ============================================================================= Supplier Catalog Design System - Subframe/Tailwind Inspired ============================================================================= */ /* ----------------------------------------------------------------------------- Brand fonts (Monotype kit) are loaded in base.html / login.html. DM Mono stays in the var() fallback chain so dev / unauthenticated states don't look broken if the kit hasn't loaded yet. ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Design Tokens (from Subframe config) ----------------------------------------------------------------------------- */ :root { /* color-scheme controlled by inline style on , toggled by JS */ /* Neutral Colors (warm stone) — light/dark pairs */ --neutral-0: light-dark(rgb(255, 255, 255), rgb(23, 20, 18)); --neutral-50: light-dark(rgb(250, 250, 249), rgb(28, 25, 23)); --neutral-100: light-dark(rgb(245, 245, 244), rgb(41, 37, 36)); --neutral-200: light-dark(rgb(231, 229, 228), rgb(55, 50, 48)); --neutral-300: light-dark(rgb(214, 211, 209), rgb(68, 64, 60)); --neutral-400: light-dark(rgb(168, 162, 158), rgb(120, 113, 108)); --neutral-500: light-dark(rgb(120, 113, 108), rgb(148, 142, 137)); --neutral-600: light-dark(rgb(87, 83, 78), rgb(168, 162, 158)); --neutral-700: light-dark(rgb(68, 64, 60), rgb(200, 196, 193)); --neutral-800: light-dark(rgb(41, 37, 36), rgb(214, 211, 209)); --neutral-900: light-dark(rgb(28, 25, 23), rgb(231, 229, 228)); --neutral-950: light-dark(rgb(12, 10, 9), rgb(245, 245, 244)); /* Brand Colors */ --brand-50: light-dark(rgb(250, 250, 250), rgb(28, 25, 23)); --brand-100: light-dark(rgb(245, 245, 245), rgb(41, 37, 36)); --brand-200: light-dark(rgb(229, 229, 229), rgb(55, 50, 48)); --brand-300: light-dark(rgb(212, 212, 212), rgb(68, 64, 60)); --brand-400: light-dark(rgb(163, 163, 163), rgb(120, 113, 108)); --brand-500: light-dark(rgb(115, 115, 115), rgb(148, 142, 137)); --brand-600: light-dark(rgb(38, 38, 38), rgb(229, 229, 229)); --brand-700: light-dark(rgb(64, 64, 64), rgb(200, 196, 193)); --brand-800: light-dark(rgb(38, 38, 38), rgb(229, 229, 229)); --brand-900: light-dark(rgb(23, 23, 23), rgb(245, 245, 244)); /* SS&Co brand palette — 10 colors comprising the brand. Approximate hexes from the brand-guide swatches; refine as Pantone/Adobe values become available. Use these directly as accent colors, or rely on the semantic mappings below for warnings / success / danger. */ --ssco-coral: #F58886; --ssco-sunset: #F4A53B; --ssco-sunflower: #F8E80E; --ssco-sunrise: #D8D14F; --ssco-turquoise: #1FA39A; --ssco-indian-brush: #E51857; --ssco-evening-cloud: #2C2D74; --ssco-night-sky: #0E0B26; --ssco-rock-forest: #373625; --ssco-sand: #F3EEEB; /* Brand color subtle tints (12-15% opacity) for backgrounds */ --ssco-coral-subtle: rgba(245, 136, 134, 0.15); --ssco-sunset-subtle: rgba(244, 165, 59, 0.15); --ssco-sunflower-subtle: rgba(248, 232, 14, 0.15); --ssco-sunrise-subtle: rgba(216, 209, 79, 0.15); --ssco-turquoise-subtle: rgba(31, 163, 154, 0.15); --ssco-indian-brush-subtle: rgba(229, 24, 87, 0.15); --ssco-evening-cloud-subtle: rgba(44, 45, 116, 0.15); /* Semantic Colors — routed through brand palette. success → Turquoise, warning → Sunset, error → Indian Brush */ --error-400: light-dark(#EE3F77, #ED4F84); --error-500: light-dark(var(--ssco-indian-brush), #ED4F84); --warning-400: light-dark(#F6B45D, #F7BD6F); --warning-500: light-dark(var(--ssco-sunset), #F7BD6F); --success-400: light-dark(#3EB6AD, #5BC6BE); --success-500: light-dark(var(--ssco-turquoise), #5BC6BE); /* Semantic status backgrounds (subtle tints) */ --error-subtle: light-dark(#FAD9E4, var(--ssco-indian-brush-subtle)); --warning-subtle: light-dark(#FCE5CB, var(--ssco-sunset-subtle)); --success-subtle: light-dark(#CFEEEB, var(--ssco-turquoise-subtle)); --info-subtle: light-dark(#D7D8EE, var(--ssco-evening-cloud-subtle)); /* Semantic Aliases */ --brand-primary: light-dark(rgb(38, 38, 38), rgb(229, 229, 229)); --default-font: light-dark(rgb(28, 25, 23), rgb(231, 229, 228)); --subtext-color: light-dark(rgb(120, 113, 108), rgb(148, 142, 137)); --neutral-border: light-dark(rgb(231, 229, 228), rgb(55, 50, 48)); --default-background: light-dark(rgb(255, 255, 255), rgb(18, 16, 14)); /* Typography — Simple Supply Co brand fonts (Monotype kit). Guida Mono Pro Var: body + technical (mostly used). Ringside Compressed: condensed display heads. Kansas Casual: occasional flair / callouts. Heritage / Legend Soft Script: rare decorative use. */ --font-mono: "Guida Mono Pro Var", "DM Mono", ui-monospace, SFMono-Regular, monospace; --font-display: "Ringside Compressed A", "Ringside Compressed B", "Ringside Compressed", "Helvetica Neue Condensed", "Arial Narrow", sans-serif; --font-flair: "Kansas Casual", "Bradley Hand", cursive; --font-script: "Legend Soft Script", "Brush Script MT", cursive; --font-heritage: "Heritage", "Tangerine", cursive; /* Shadows */ --shadow-sm: light-dark( 0px 1px 2px 0px rgba(0, 0, 0, 0.05), 0px 1px 2px 0px rgba(0, 0, 0, 0.3) ); --shadow-md: light-dark( 0px 4px 16px -2px rgba(0, 0, 0, 0.08), 0px 4px 16px -2px rgba(0, 0, 0, 0.4) ); --shadow-lg: light-dark( 0px 12px 32px -4px rgba(0, 0, 0, 0.08), 0px 12px 32px -4px rgba(0, 0, 0, 0.5) ); /* Border Radius */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-full: 9999px; /* Spacing */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; /* Layout */ --icon-sidebar-width: 56px; --categories-width: 280px; } /* ----------------------------------------------------------------------------- Web Awesome Token Overrides ----------------------------------------------------------------------------- */ :root, .wa-light { --wa-font-family-body: var(--font-mono); --wa-font-family-heading: var(--font-display); --wa-font-family-code: var(--font-mono); --wa-font-size-2xs: 11px; --wa-font-size-xs: 12px; --wa-font-size-s: 13px; --wa-font-size-m: 14px; --wa-font-size-l: 16px; --wa-font-size-xl: 18px; --wa-border-radius-s: var(--radius-sm); --wa-border-radius-m: var(--radius-md); --wa-border-radius-l: var(--radius-lg); /* Global form-control heights — wa-button, wa-select, wa-input all share these so dropdowns and buttons line up at the same height everywhere. */ --wa-form-control-height: 32px; --wa-input-height-s: 28px; --wa-input-height-m: 32px; --wa-input-height-l: 40px; } .wa-dark { --wa-font-family-body: var(--font-mono); --wa-font-family-heading: var(--font-display); --wa-font-family-code: var(--font-mono); } wa-badge { font-size: 10px; } wa-card::part(base) { border-color: var(--neutral-border); background: var(--default-background); } wa-card::part(header) { font-weight: 500; font-size: 13px; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--neutral-border); } wa-card::part(body) { padding: var(--space-3) var(--space-4); } wa-card::part(footer) { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--neutral-border); } /* When .card-body is left inside a wa-card during a partial migration, drop its padding so we don't double-pad against wa-card's own body slot. */ wa-card .card-body { padding: 0; } /* ----------------------------------------------------------------------------- Global vertical rhythm New components consistently shipped without breathing room. These rules give every dialog body, card body, and explicit `.wa-stack` container a default flex-column with gap so direct children don't jam together. Children that need overrides can opt out with margin/gap of their own. ----------------------------------------------------------------------------- */ wa-dialog::part(body), wa-card::part(body), .wa-stack { display: flex; flex-direction: column; gap: var(--space-4); } /* Modal & drawer titles use the brand display font — same character as .page-heading but a touch smaller so they fit a dialog header. */ wa-dialog::part(title), wa-drawer::part(title) { font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1.1; letter-spacing: 0.02em; text-transform: uppercase; } /* Tighter rhythm variant — for dense forms / inline groups. */ .wa-stack-sm { display: flex; flex-direction: column; gap: var(--space-2); } /* Map WA's brand palette → warm stone (replaces default blue). The palette runs lightest (95) → darkest (05) as constants. WA's theme already remaps the chain for dark mode (fill-quiet picks brand-95 in light, brand-10 in dark, etc.) — don't double-invert with light-dark() here, or in dark mode tags end up with cream backgrounds. */ :root, .wa-light, .wa-dark, .wa-brand-blue { --wa-color-brand-95: rgb(245, 245, 244); --wa-color-brand-90: rgb(231, 229, 228); --wa-color-brand-80: rgb(214, 211, 209); --wa-color-brand-70: rgb(168, 162, 158); --wa-color-brand-60: rgb(120, 113, 108); --wa-color-brand-50: rgb(87, 83, 78); --wa-color-brand-40: rgb(68, 64, 60); --wa-color-brand-30: rgb(41, 37, 36); --wa-color-brand-20: rgb(28, 25, 23); --wa-color-brand-10: rgb(23, 20, 18); --wa-color-brand-05: rgb(12, 10, 9); /* Loud fill stays dark stone in both modes (matches cart-btn pattern) — primary buttons should always read as "shade of black" with white text. */ --wa-color-brand-fill-loud: rgb(38, 38, 38); --wa-color-brand-border-loud: rgb(38, 38, 38); --wa-color-brand-on-loud: rgb(255, 255, 255); /* Route WA's success / warning / danger semantic tokens through the SS&Co brand palette. wa-tag, wa-callout, and wa-button variant=success/warning/ danger pick these up automatically across the app. */ --wa-color-success-fill-loud: var(--ssco-turquoise); --wa-color-success-fill-normal: var(--ssco-turquoise); --wa-color-success-fill-quiet: var(--success-subtle); --wa-color-success-border-loud: var(--ssco-turquoise); --wa-color-success-border-normal: var(--ssco-turquoise); --wa-color-success-border-quiet: var(--success-subtle); --wa-color-success-on-loud: white; --wa-color-success-on-quiet: var(--ssco-turquoise); --wa-color-warning-fill-loud: var(--ssco-sunset); --wa-color-warning-fill-normal: var(--ssco-sunset); --wa-color-warning-fill-quiet: var(--warning-subtle); --wa-color-warning-border-loud: var(--ssco-sunset); --wa-color-warning-border-normal: var(--ssco-sunset); --wa-color-warning-border-quiet: var(--warning-subtle); --wa-color-warning-on-loud: rgb(40, 25, 5); --wa-color-warning-on-quiet: light-dark(#7a4a0c, var(--ssco-sunset)); --wa-color-danger-fill-loud: var(--ssco-indian-brush); --wa-color-danger-fill-normal: var(--ssco-indian-brush); --wa-color-danger-fill-quiet: var(--error-subtle); --wa-color-danger-border-loud: var(--ssco-indian-brush); --wa-color-danger-border-normal: var(--ssco-indian-brush); --wa-color-danger-border-quiet: var(--error-subtle); --wa-color-danger-on-loud: white; --wa-color-danger-on-quiet: var(--ssco-indian-brush); /* Surface → match our card/page backgrounds and borders */ --wa-color-surface-default: var(--default-background); --wa-color-surface-raised: var(--default-background); --wa-color-surface-lowered: var(--neutral-50); --wa-color-surface-border: var(--neutral-border); /* Focus ring matches brand */ --wa-focus-ring-width: 2px; --wa-focus-ring-offset: 1px; /* Form controls — compact, brand mono */ --wa-form-control-border-color: var(--neutral-border); --wa-form-control-border-radius: var(--radius-md); --wa-form-control-background-color: var(--default-background); --wa-form-control-value-color: var(--default-font); --wa-form-control-placeholder-color: var(--subtext-color); --wa-form-control-label-color: var(--subtext-color); --wa-form-control-label-font-weight: 400; --wa-form-control-hint-color: var(--subtext-color); --wa-form-control-padding-inline: var(--space-3); } /* ----------------------------------------------------------------------------- Web Awesome Component Styling Lightweight per-component tweaks. Most styling comes from token overrides above. Use ::part() only when tokens can't reach the surface we need. ----------------------------------------------------------------------------- */ /* Buttons — flat, no shadow, matches our .btn aesthetic */ wa-button::part(base) { box-shadow: none; font-weight: 500; transition: all 0.15s ease; } wa-button[appearance~="outlined"]::part(base) { border-color: var(--neutral-border); color: var(--default-font); background: var(--default-background); } wa-button[appearance~="outlined"]:hover::part(base) { background: var(--neutral-100); border-color: var(--neutral-300); } wa-button[appearance~="plain"]::part(base) { color: var(--subtext-color); } wa-button[appearance~="plain"]:hover::part(base) { color: var(--default-font); } /* Inputs / textareas / selects */ wa-input, wa-textarea, wa-select { font-family: var(--font-mono); font-size: 14px; } /* WA's form-control mixin sets the host to display: flex; flex-direction: column to stack label / control / hint vertically. When all three slots are empty (just a bare select with no label), the column layout still adds vertical extent that makes the host visually taller than a sibling wa-button. Switch to inline-flex row when there's no label/hint slotted. */ wa-input:not([label]):not([hint]), wa-textarea:not([label]):not([hint]), wa-select:not([label]):not([hint]) { display: inline-flex; flex-direction: row; align-items: center; } wa-input::part(base), wa-textarea::part(base), wa-select::part(combobox) { border-color: var(--neutral-border); background: var(--default-background); color: var(--default-font); transition: border-color 0.15s ease; } wa-input:focus-within::part(base), wa-textarea:focus-within::part(base), wa-select:focus-within::part(combobox) { border-color: var(--brand-primary); } wa-input::part(form-control-label), wa-textarea::part(form-control-label), wa-select::part(form-control-label) { font-size: 11px; margin-bottom: var(--space-1); } /* Callouts — subtle tinted background, single-character left accent */ wa-callout { font-size: 14px; line-height: 1.4; } wa-callout::part(base) { border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); border-width: 1px; } wa-callout[variant="success"]::part(base) { background: var(--success-subtle); border-color: transparent; color: var(--success-500); } wa-callout[variant="danger"]::part(base) { background: var(--error-subtle); border-color: transparent; color: var(--error-500); } wa-callout[variant="warning"]::part(base) { background: var(--warning-subtle); border-color: transparent; color: var(--warning-500); } wa-callout[variant="neutral"]::part(base), wa-callout[variant="brand"]::part(base) { background: var(--neutral-50); border-color: var(--neutral-border); color: var(--default-font); } /* Dropdown items + select options share the same vertical rhythm. Both components style padding on :host, so we target the elements directly. One rule keeps every dropdown menu in the app consistent. */ wa-option, wa-dropdown-item { padding: var(--space-3) var(--space-4); min-height: 38px; line-height: 1.4; font-size: 14px; } /* Tags — used as status badges. WA styles padding on :host (the custom element), not ::part(base) — so we set padding on the host directly. */ wa-tag { padding-block: var(--wa-space-2xs, 4px); padding-inline: var(--wa-space-s, 10px); line-height: 1.4; } wa-tag::part(base) { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 500; border-radius: var(--radius-sm); } /* Avatar — matches our 64px profile circle look */ wa-avatar { --size: 40px; --background-color: var(--neutral-100); --color: var(--subtext-color); } wa-avatar::part(base) { border: 2px solid var(--neutral-border); } /* Divider — match our existing border color. Set margin directly so it beats the wa-card's inherited --spacing (which is what blank --spacing on the divider would resolve to inside a card). */ wa-divider { --color: var(--neutral-border); --width: 1px; margin: var(--space-5) 0 !important; } /* Spinner — inherit current color */ wa-spinner { --indicator-color: currentColor; --track-color: var(--neutral-200); } /* ----------------------------------------------------------------------------- Reset & Base ----------------------------------------------------------------------------- */ /* Reset — keep box-sizing for everyone, but only zero margin/padding on element types that need it. Wildcard margin: 0 was breaking WA's slotted-icon spacing (wa-button's `slot[name='start']::slotted(*) { margin-inline-end: 0.75em }` lives in a layer; unlayered * wins). */ *, *::before, *::after { box-sizing: border-box; } body, h1, h2, h3, h4, h5, h6, p, ul, ol, dl, figure, blockquote, pre, form, fieldset { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; } body { font-family: var(--font-mono); font-size: 14px; line-height: 24px; color: var(--default-font); background-color: var(--default-background); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: inherit; text-decoration: none; } a:hover { color: var(--brand-primary); } img { display: block; max-width: 100%; } input, button, select { font: inherit; color: var(--default-font); background-color: var(--default-background); } /* ----------------------------------------------------------------------------- Typography ----------------------------------------------------------------------------- */ .text-caption { font-size: 14px; line-height: 18px; font-weight: 400; } .text-caption-bold { font-size: 14px; line-height: 18px; font-weight: 500; } .text-body { font-size: 14px; line-height: 24px; font-weight: 400; } .text-body-bold { font-size: 15px; line-height: 22px; font-weight: 500; } .text-heading-3 { font-size: 18px; line-height: 22px; font-weight: 400; } .text-heading-2 { font-size: 22px; line-height: 26px; font-weight: 400; } .text-heading-1 { font-size: 32px; line-height: 38px; font-weight: 400; } .text-muted { color: var(--subtext-color); } /* ----------------------------------------------------------------------------- App Shell Layout ----------------------------------------------------------------------------- */ .app-shell { display: flex; min-height: 100vh; } /* Icon Sidebar (left) */ .icon-sidebar { width: var(--icon-sidebar-width); background: var(--default-background); border-right: 1px solid var(--neutral-border); display: flex; flex-direction: column; align-items: center; padding: var(--space-4) 0; position: fixed; top: 0; left: 0; height: 100vh; z-index: 100; } .icon-sidebar-logo { width: 32px; height: 32px; margin-bottom: var(--space-6); display: flex; align-items: center; justify-content: center; } .icon-sidebar-logo svg { width: 24px; height: 24px; color: var(--brand-primary); } .icon-sidebar-nav { display: flex; flex-direction: column; gap: var(--space-2); } .icon-sidebar-bottom { margin-top: auto; } .icon-sidebar-item { position: relative; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-md); color: var(--neutral-500); cursor: pointer; transition: all 0.15s ease; } /* Notification inbox row styling on /notifications */ .notification-dot-cell { width: 18px; padding-left: 12px; } .notification-unread-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--brand-color, #d92020); } .notification-row.notification-unread { background: var(--brand-subtle, var(--neutral-50)); } .notification-link { color: var(--default-font); text-decoration: none; } .notification-link:hover { text-decoration: underline; } .notification-body { color: var(--subtext-color); font-size: 12px; margin-top: 2px; } .activity-tab-toolbar { display: flex; justify-content: flex-end; padding: 8px 0; } /* Unread notification badge — small pill on the upper right of the sidebar bell icon. */ .sidebar-unread-dot { position: absolute; top: 4px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: #d92020; color: #fff; font-size: 10px; font-weight: 600; line-height: 16px; text-align: center; pointer-events: none; } .icon-sidebar-item:hover { background: var(--neutral-100); color: var(--brand-primary); } .icon-sidebar-item.active { background: var(--neutral-100); color: var(--brand-primary); } .icon-sidebar-item.active:hover { background: var(--neutral-100); color: var(--brand-primary); } .icon-sidebar-item svg { width: 20px; height: 20px; } /* Cloak icon has more internal detail than other sidebar icons (eye + $); bump it up slightly so the dollar sign reads cleanly. */ .icon-sidebar-item .cloak-icon-on, .icon-sidebar-item .cloak-icon-off { width: 22px; height: 22px; } button.icon-sidebar-item { border: none; background: none; font: inherit; } /* Main Content Area */ .main-content { margin-left: var(--icon-sidebar-width); flex: 1; display: flex; flex-direction: column; background: var(--default-background); } .main-content.padded { padding: 80px; } /* Top Navigation Bar */ .top-nav { height: 56px; background: var(--default-background); border-bottom: 1px solid var(--neutral-border); display: flex; align-items: center; padding: 0 var(--space-4); gap: var(--space-4); position: sticky; top: 0; z-index: 50; } /* Supplier Dropdown */ .supplier-dropdown { position: relative; } .supplier-dropdown-btn { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); background: var(--default-background); border: 1px solid var(--neutral-border); border-radius: var(--radius-md); cursor: pointer; font-weight: 500; font-size: 14px; text-transform: uppercase; letter-spacing: 0.04em; } .supplier-dropdown-btn:hover { background: var(--neutral-50); } .supplier-dropdown-btn svg { width: 16px; height: 16px; color: var(--neutral-500); } .supplier-dropdown-menu { position: absolute; top: 100%; left: 0; margin-top: var(--space-1); background: var(--default-background); border: 1px solid var(--neutral-border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); min-width: 200px; display: none; flex-direction: column; z-index: 100; overflow: hidden; } .supplier-dropdown-menu.show { display: flex; } .supplier-dropdown-item { display: block; padding: var(--space-2) var(--space-3); cursor: pointer; font-size: 14px; white-space: nowrap; border-bottom: 1px solid var(--neutral-100); color: var(--default-font); text-decoration: none; text-transform: uppercase; letter-spacing: 0.04em; } .supplier-dropdown-item:last-child { border-bottom: none; } .supplier-dropdown-item:hover { background: var(--neutral-50); } /* Search Box */ .search-box { display: flex; align-items: center; gap: var(--space-2); flex: 1; max-width: 400px; } .search-input-wrapper { flex: 1; position: relative; } .search-input-wrapper svg { position: absolute; left: var(--space-3); top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--neutral-400); } .search-input { width: 100%; padding: var(--space-2) var(--space-3) var(--space-2) 36px; border: 1px solid var(--neutral-border); border-radius: var(--radius-md); font-size: 14px; background: var(--default-background); } .search-input::placeholder { color: var(--neutral-400); } .search-input:focus { outline: none; border-color: var(--brand-primary); } .search-btn { padding: var(--space-2) var(--space-4); background: var(--default-background); border: 1px solid var(--neutral-border); border-radius: var(--radius-md); cursor: pointer; font-weight: 500; font-size: 14px; } .search-btn:hover { background: var(--neutral-50); } /* Nav Right Section */ .nav-right { display: flex; align-items: center; gap: var(--space-3); margin-left: auto; } /* Allocation Dropdown */ .allocation-dropdown { position: relative; } .allocation-dropdown-btn { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); background: var(--default-background); border: 1px solid var(--neutral-border); border-radius: var(--radius-md); cursor: pointer; font-size: 14px; } .allocation-dropdown-btn:hover { background: var(--neutral-50); } .allocation-dropdown-btn svg { width: 16px; height: 16px; color: var(--neutral-500); } .allocation-dropdown-menu { position: absolute; top: 100%; right: 0; margin-top: var(--space-1); background: var(--default-background); border: 1px solid var(--neutral-border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); min-width: 160px; display: none; z-index: 100; } .allocation-dropdown-menu.show { display: block; } .allocation-dropdown-item { padding: var(--space-2) var(--space-3); cursor: pointer; font-size: 14px; } .allocation-dropdown-item:hover { background: var(--neutral-50); } .allocation-dropdown-item[data-allocation="BV(CO)"], .allocation-dropdown-item[data-allocation="Salida(CO)"] { color: var(--info-color, #0d6efd); } .allocation-dropdown-item[data-allocation="Staff"] { color: var(--warning-color, #b45309); } /* Color-coded allocation button */ .allocation-dropdown-btn.alloc-co { border-color: var(--info-color, #0d6efd); background: light-dark(#eff6ff, #1e3a5f); } .allocation-dropdown-btn.alloc-staff { border-color: var(--warning-color, #b45309); background: light-dark(#fefce8, #3d2e0a); } /* CO/Staff Modal */ .co-modal-sku { font-size: 14px; color: var(--subtext-color); margin-bottom: var(--space-3); } .co-modal-field { margin-bottom: var(--space-3); width: 100%; } .co-modal-footer { display: flex; justify-content: flex-end; gap: var(--space-2); width: 100%; } /* Selected customer card */ .co-selected-customer { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border: 1px solid var(--neutral-border); border-radius: var(--radius-md); background: var(--neutral-50); margin-bottom: var(--space-3); } .co-selected-info { display: flex; align-items: center; gap: 12px; } .co-selected-icon { font-size: 24px; color: var(--subtext-color); } .co-selected-name { font-size: 15px; font-weight: 600; } .co-selected-detail { font-size: 14px; color: var(--subtext-color); } /* New customer toggle */ .co-new-customer-toggle { margin-top: var(--space-2); margin-bottom: var(--space-2); } /* Customer search results in modal */ .co-search-results:empty { display: none; } .co-search-results { max-height: 200px; overflow-y: auto; border: 1px solid var(--neutral-border); border-radius: var(--radius-sm); margin-bottom: var(--space-2); } .co-search-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; } .co-search-item:hover { background: var(--neutral-50); } .co-search-item-icon { font-size: 18px; color: var(--subtext-color); } .co-search-name { font-size: 14px; font-weight: 500; } .co-search-detail { font-size: 13px; color: var(--subtext-color); } .co-search-empty { padding: 12px; font-size: 14px; color: var(--subtext-color); text-align: center; } /* Allocation customer card (in cart allocation row) */ .alloc-customer-card { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid var(--neutral-border); border-radius: var(--radius-md); background: var(--neutral-50); font-size: 14px; } .alloc-customer-info { display: flex; flex-direction: column; gap: 1px; } .alloc-customer-name { font-weight: 600; font-size: 14px; } .alloc-customer-contact { font-size: 11px; color: var(--subtext-color); } /* Provenance line at the top of an expanded cart row's allocation panel — "Added by Scott · May 6, 03:14 PM". */ .cart-row-meta { font-size: 11px; color: var(--subtext-color); } /* Comment count badge on the expand caret. */ .comment-count-badge { margin-left: 6px; vertical-align: middle; } /* Per-cart-item comment thread (a wa-card living in the expanded allocation row). Width is capped — without this, the card stretches the full colspan of the cart row, and 60ch (per the WA pattern) feels too tight on wide screens. */ .comment-thread { margin-top: var(--space-1); max-width: min(720px, 100%); } /* Override the global inline-flex rule on label-less wa-textarea so the compose textarea fills the card width instead of sizing to content. Selector specificity must beat `wa-textarea:not([label]):not([hint])` above. */ .comment-thread wa-textarea.comment-input:not([label]) { display: block; width: 100%; } /* Comment list is a