/* ========================================================= QNC CONFIGURATION & QUOTING UI SYSTEM Purpose: Standalone UI styles for QNC product search, configuration, quoting, order entry, and related administration. Conventions: - All custom component classes use the qnc-* prefix. - All custom CSS variables use the --qnc-* prefix. - Styles are scoped beneath .qnc-app wherever practical. - Theme is controlled with: - Bootstrap controls are supported, but overrides are scoped to .qnc-app to avoid leaking into unrelated applications. ========================================================= */ /* ========================================================= 01. DESIGN TOKENS - LIGHT THEME ========================================================= */ .qnc-app { color-scheme: light; --qnc-bg-page: #f5f5f5; --qnc-bg-surface: #ffffff; --qnc-bg-subtle: #f8fafc; --qnc-bg-muted: #f1f5f9; --qnc-bg-hover: #f8fafc; --qnc-bg-selected: #e7f1ff; --qnc-text: #212529; --qnc-text-muted: #6c757d; --qnc-text-soft: #64748b; --qnc-text-inverse: #ffffff; --qnc-border: #b8c0cc; --qnc-border-soft: #d7dde5; --qnc-border-strong: #94a3b8; --qnc-accent: #0d6efd; --qnc-accent-hover: #0b5ed7; --qnc-accent-soft: #e7f1ff; --qnc-accent-border: #bfd7ff; --qnc-accent-contrast: #ffffff; --qnc-success: #198754; --qnc-success-soft: #edf8f2; --qnc-success-border: #a9dfc3; --qnc-warning: #b26a00; --qnc-warning-soft: #fff7e8; --qnc-warning-border: #f1c27d; --qnc-danger: #dc3545; --qnc-danger-soft: #fff1f2; --qnc-danger-border: #f2a8b0; --qnc-info: #0d6efd; --qnc-info-soft: #eef6ff; --qnc-info-border: #bfd7ff; --qnc-neutral-soft: #f1f5f9; --qnc-header-bg: #000000; --qnc-header-text: #ffffff; --qnc-shadow-xs: 0 1px 2px rgba(15, 23, 42, .06); --qnc-shadow-sm: 0 4px 12px rgba(15, 23, 42, .08); --qnc-shadow-md: 0 12px 28px rgba(15, 23, 42, .12); --qnc-radius-sm: 6px; --qnc-radius-md: 10px; --qnc-radius-lg: 14px; --qnc-radius-pill: 999px; --qnc-control-height: 38px; --qnc-transition: 150ms ease; } /* ========================================================= 02. DESIGN TOKENS - DARK THEME ========================================================= */ html[data-qnc-theme="dark"] .qnc-app { color-scheme: dark; --qnc-bg-page: #121212; --qnc-bg-surface: #1e1e1e; --qnc-bg-subtle: #262626; --qnc-bg-muted: #303030; --qnc-bg-hover: #2a2a2a; --qnc-bg-selected: #3a2f12; --qnc-text: #e8e8e8; --qnc-text-muted: #a7a7a7; --qnc-text-soft: #cbd5e1; --qnc-text-inverse: #111111; --qnc-border: #454545; --qnc-border-soft: #343434; --qnc-border-strong: #5a5a5a; --qnc-accent: #f9c866; --qnc-accent-hover: #e8b84f; --qnc-accent-soft: #3a2f12; --qnc-accent-border: #5a4520; --qnc-accent-contrast: #111111; --qnc-success: #4ade80; --qnc-success-soft: #18251d; --qnc-success-border: #2f5738; --qnc-warning: #f9c866; --qnc-warning-soft: #2a2418; --qnc-warning-border: #5a4520; --qnc-danger: #f87171; --qnc-danger-soft: #2a1818; --qnc-danger-border: #5a2a2a; --qnc-info: #8ab4f8; --qnc-info-soft: #182434; --qnc-info-border: #2f4665; --qnc-neutral-soft: #2a2a2a; --qnc-header-bg: #000000; --qnc-header-text: #ffffff; --qnc-shadow-xs: 0 1px 2px rgba(0, 0, 0, .28); --qnc-shadow-sm: 0 4px 14px rgba(0, 0, 0, .32); --qnc-shadow-md: 0 14px 34px rgba(0, 0, 0, .46); } /* ========================================================= 03. APP SHELL / BASE ========================================================= */ .qnc-app { min-height: 100vh; background: var(--qnc-bg-page); color: var(--qnc-text); font-size: 14px; } .qnc-app *, .qnc-app *::before, .qnc-app *::after { box-sizing: border-box; } .qnc-app .qnc-shell { width: 100%; max-width: 1500px; margin: 0 auto; padding: 0 18px 40px; } .qnc-app .qnc-content { min-width: 0; } .qnc-app .qnc-page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 18px; } .qnc-app .qnc-page-header-main { min-width: 0; } .qnc-app .qnc-page-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; } .qnc-app .qnc-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; } .qnc-app .qnc-toolbar-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .qnc-app .qnc-divider { border: 0; border-top: 1px solid var(--qnc-border-soft); margin: 18px 0; } /* ========================================================= 04. TYPOGRAPHY / LINKS ========================================================= */ .qnc-app .qnc-title { margin: 0; color: var(--qnc-text); font-size: 20px; font-weight: 700; line-height: 1.25; } .qnc-app .qnc-subtitle { margin: 5px 0 0; color: var(--qnc-text-muted); font-size: 13px; line-height: 1.55; } .qnc-app .qnc-section-title { margin: 0; color: var(--qnc-text); font-size: 15px; font-weight: 700; } .qnc-app .qnc-label { color: var(--qnc-text); font-size: 12px; font-weight: 700; } .qnc-app .qnc-help, .qnc-app .qnc-muted { color: var(--qnc-text-muted); } .qnc-app .qnc-help { margin-top: 4px; font-size: 11px; line-height: 1.45; } .qnc-app a:not(.btn):not(.qnc-button) { color: var(--qnc-accent); text-decoration-color: color-mix(in srgb, var(--qnc-accent) 45%, transparent); } .qnc-app a:not(.btn):not(.qnc-button):hover { color: var(--qnc-accent-hover); } .qnc-app mark { padding: .1em .25em; border-radius: 3px; background: var(--qnc-accent-soft); color: var(--qnc-text); } /* ========================================================= 05. PANELS / CARDS / SECTION HEADERS ========================================================= */ .qnc-app .qnc-panel { margin-bottom: 18px; background: var(--qnc-bg-surface); border: 1px solid var(--qnc-border-soft); border-radius: var(--qnc-radius-md); box-shadow: var(--qnc-shadow-xs); } .qnc-app .qnc-panel-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; background: var(--qnc-bg-subtle); border-bottom: 1px solid var(--qnc-border-soft); border-radius: var(--qnc-radius-md) var(--qnc-radius-md) 0 0; } .qnc-app .qnc-panel-body { padding: 16px; } .qnc-app .qnc-panel-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 14px; background: var(--qnc-bg-subtle); border-top: 1px solid var(--qnc-border-soft); border-radius: 0 0 var(--qnc-radius-md) var(--qnc-radius-md); } .qnc-app .qnc-card { background: var(--qnc-bg-surface); border: 1px solid var(--qnc-border); border-radius: var(--qnc-radius-md); box-shadow: var(--qnc-shadow-xs); } .qnc-app .qnc-card-body { padding: 14px; } .qnc-app .qnc-card.is-selected { border-color: var(--qnc-accent); box-shadow: 0 0 0 2px var(--qnc-accent-soft); } .qnc-app .qnc-empty-state { padding: 28px 18px; background: var(--qnc-bg-subtle); border: 1px dashed var(--qnc-border); border-radius: var(--qnc-radius-md); color: var(--qnc-text-muted); text-align: center; } .qnc-app .qnc-empty-state-title { margin-bottom: 4px; color: var(--qnc-text); font-weight: 700; } /* ========================================================= 06. FORMS ========================================================= */ .qnc-app .form-label, .qnc-app .qnc-form-label { margin-bottom: 5px; color: var(--qnc-text); font-size: 12px; font-weight: 700; } .qnc-app .form-control, .qnc-app .form-select, .qnc-app textarea, .qnc-app .qnc-input, .qnc-app .qnc-select, .qnc-app .qnc-textarea { min-height: var(--qnc-control-height); background-color: var(--qnc-bg-surface); color: var(--qnc-text); border: 1px solid var(--qnc-border); border-radius: var(--qnc-radius-sm); transition: border-color var(--qnc-transition), box-shadow var(--qnc-transition), background-color var(--qnc-transition); } .qnc-app textarea, .qnc-app .qnc-textarea { min-height: 88px; resize: vertical; } .qnc-app .form-control:focus, .qnc-app .form-select:focus, .qnc-app textarea:focus, .qnc-app .qnc-input:focus, .qnc-app .qnc-select:focus, .qnc-app .qnc-textarea:focus { background-color: var(--qnc-bg-surface); color: var(--qnc-text); border-color: var(--qnc-accent); box-shadow: 0 0 0 3px var(--qnc-accent-soft); outline: none; } .qnc-app .form-control:disabled, .qnc-app .form-select:disabled, .qnc-app textarea:disabled, .qnc-app .qnc-input:disabled, .qnc-app .qnc-select:disabled, .qnc-app .qnc-textarea:disabled { background-color: var(--qnc-bg-muted); color: var(--qnc-text-muted); cursor: not-allowed; opacity: .85; } .qnc-app .form-check-input { background-color: var(--qnc-bg-surface); border-color: var(--qnc-border); } .qnc-app .form-check-input:checked { background-color: var(--qnc-accent); border-color: var(--qnc-accent); } .qnc-app .form-check-input:focus { border-color: var(--qnc-accent); box-shadow: 0 0 0 3px var(--qnc-accent-soft); } .qnc-app .qnc-form-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; } .qnc-app .qnc-col-12 { grid-column: span 12; } .qnc-app .qnc-col-10 { grid-column: span 10; } .qnc-app .qnc-col-9 { grid-column: span 9; } .qnc-app .qnc-col-8 { grid-column: span 8; } .qnc-app .qnc-col-6 { grid-column: span 6; } .qnc-app .qnc-col-5 { grid-column: span 5; } .qnc-app .qnc-col-4 { grid-column: span 4; } .qnc-app .qnc-col-3 { grid-column: span 3; } .qnc-app .qnc-col-2 { grid-column: span 2; } .qnc-app .qnc-field-error { margin-top: 4px; color: var(--qnc-danger); font-size: 11px; font-weight: 600; } /* ========================================================= 07. BUTTONS / ICON ACTIONS ========================================================= */ .qnc-app .btn, .qnc-app .qnc-button { min-height: 36px; border-radius: var(--qnc-radius-sm); font-weight: 600; } .qnc-app .btn-primary, .qnc-app .qnc-button-primary { background: var(--qnc-accent) !important; border-color: var(--qnc-accent) !important; color: var(--qnc-accent-contrast) !important; } .qnc-app .btn-primary:hover, .qnc-app .btn-primary:focus, .qnc-app .qnc-button-primary:hover, .qnc-app .qnc-button-primary:focus { background: var(--qnc-accent-hover) !important; border-color: var(--qnc-accent-hover) !important; color: var(--qnc-accent-contrast) !important; } .qnc-app .btn-outline-primary { border-color: var(--qnc-accent); color: var(--qnc-accent); } .qnc-app .btn-outline-primary:hover, .qnc-app .btn-outline-secondary:hover, .qnc-app .btn-secondary:hover, .qnc-app .btn-light:hover { background: var(--qnc-bg-muted) !important; border-color: var(--qnc-border) !important; color: var(--qnc-text) !important; } .qnc-app .qnc-icon-button { display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; padding: 0; background: transparent; color: var(--qnc-text-muted); border: 1px solid transparent; border-radius: var(--qnc-radius-sm); cursor: pointer; transition: color var(--qnc-transition), background var(--qnc-transition), border-color var(--qnc-transition); } .qnc-app .qnc-icon-button:hover { background: var(--qnc-bg-muted); color: var(--qnc-text); border-color: var(--qnc-border-soft); } .qnc-app .qnc-icon-button.is-danger:hover { background: var(--qnc-danger-soft); color: var(--qnc-danger); border-color: var(--qnc-danger-border); } /* ========================================================= 08. BADGES / STATUS / ALERTS ========================================================= */ .qnc-app .qnc-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border: 1px solid var(--qnc-border); border-radius: var(--qnc-radius-pill); background: var(--qnc-bg-subtle); color: var(--qnc-text); font-size: 11px; font-weight: 700; line-height: 1; white-space: nowrap; } .qnc-app .qnc-badge-success { background: var(--qnc-success-soft); border-color: var(--qnc-success-border); color: var(--qnc-success); } .qnc-app .qnc-badge-warning { background: var(--qnc-warning-soft); border-color: var(--qnc-warning-border); color: var(--qnc-warning); } .qnc-app .qnc-badge-danger { background: var(--qnc-danger-soft); border-color: var(--qnc-danger-border); color: var(--qnc-danger); } .qnc-app .qnc-badge-info { background: var(--qnc-info-soft); border-color: var(--qnc-info-border); color: var(--qnc-info); } .qnc-app .qnc-badge-accent { background: var(--qnc-accent-soft); border-color: var(--qnc-accent-border); color: var(--qnc-accent); } .qnc-app .qnc-alert, .qnc-app .alert { padding: 12px 14px; background: var(--qnc-bg-subtle); border: 1px solid var(--qnc-border); border-radius: var(--qnc-radius-md); color: var(--qnc-text); } .qnc-app .qnc-alert-success, .qnc-app .alert-success { background: var(--qnc-success-soft) !important; border-color: var(--qnc-success-border) !important; color: var(--qnc-success) !important; } .qnc-app .qnc-alert-warning, .qnc-app .alert-warning { background: var(--qnc-warning-soft) !important; border-color: var(--qnc-warning-border) !important; color: var(--qnc-warning) !important; } .qnc-app .qnc-alert-danger, .qnc-app .alert-danger { background: var(--qnc-danger-soft) !important; border-color: var(--qnc-danger-border) !important; color: var(--qnc-danger) !important; } .qnc-app .qnc-alert-info, .qnc-app .alert-info { background: var(--qnc-info-soft) !important; border-color: var(--qnc-info-border) !important; color: var(--qnc-info) !important; } /* ========================================================= 09. TABLE SYSTEM ========================================================= */ .qnc-app .qnc-table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--qnc-border); border-radius: var(--qnc-radius-md); background: var(--qnc-bg-surface); } .qnc-app .qnc-table, .qnc-app .table { width: 100%; margin-bottom: 0; color: var(--qnc-text); --bs-table-color: var(--qnc-text); --bs-table-bg: transparent; --bs-table-border-color: var(--qnc-border-soft); --bs-table-striped-color: var(--qnc-text); --bs-table-striped-bg: var(--qnc-bg-subtle); --bs-table-hover-color: var(--qnc-text); --bs-table-hover-bg: var(--qnc-bg-hover); } .qnc-app .qnc-table th, .qnc-app .table thead th { padding: 10px 12px; background: var(--qnc-bg-subtle) !important; color: var(--qnc-text-muted) !important; border-color: var(--qnc-border-soft) !important; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; } .qnc-app .qnc-table td, .qnc-app .table td { padding: 11px 12px; background: transparent; color: var(--qnc-text) !important; border-color: var(--qnc-border-soft) !important; font-size: 13px; vertical-align: middle; } .qnc-app .qnc-table tbody tr:hover, .qnc-app .table-hover tbody tr:hover { background: var(--qnc-bg-hover); } .qnc-app .qnc-table tbody tr.is-selected, .qnc-app .qnc-table tbody tr.is-editing, .qnc-app .gv-row-editing, .qnc-app .gv-row-editing td { background: var(--qnc-bg-selected) !important; } .qnc-app .qnc-table-actions { display: flex; justify-content: flex-end; gap: 4px; white-space: nowrap; } .qnc-app .qnc-table .qnc-cell-primary { color: var(--qnc-text); font-weight: 700; } .qnc-app .qnc-table .qnc-cell-secondary { color: var(--qnc-text-muted); font-size: 12px; } /* ========================================================= 10. LIST / MASTER-DETAIL SYSTEM ========================================================= */ .qnc-app .qnc-split-layout { display: grid; grid-template-columns: minmax(260px, 360px) minmax(0, 1fr); gap: 16px; align-items: start; } .qnc-app .qnc-master-pane, .qnc-app .qnc-detail-pane { min-width: 0; } .qnc-app .qnc-list { overflow: hidden; background: var(--qnc-bg-surface); border: 1px solid var(--qnc-border); border-radius: var(--qnc-radius-md); } .qnc-app .qnc-list-item { display: block; width: 100%; padding: 11px 13px; background: var(--qnc-bg-surface); color: var(--qnc-text); border: 0; border-bottom: 1px solid var(--qnc-border-soft); text-align: left; text-decoration: none; cursor: pointer; transition: background var(--qnc-transition), border-color var(--qnc-transition); } .qnc-app .qnc-list-item:last-child { border-bottom: 0; } .qnc-app .qnc-list-item:hover, .qnc-app .qnc-list-item:focus { background: var(--qnc-bg-hover); color: var(--qnc-text); } .qnc-app .qnc-list-item.is-selected { padding-left: 9px; background: var(--qnc-bg-selected); border-left: 4px solid var(--qnc-accent); } .qnc-app .qnc-list-item-title { color: var(--qnc-text); font-weight: 700; line-height: 1.3; } .qnc-app .qnc-list-item-meta { margin-top: 3px; color: var(--qnc-text-muted); font-size: 11px; } .qnc-app .qnc-scroll-list { max-height: 520px; overflow-y: auto; } /* ========================================================= 11. FILTERS / SEARCH / TABS ========================================================= */ .qnc-app .qnc-filter-bar { display: flex; align-items: end; gap: 10px; flex-wrap: wrap; padding: 10px; margin-bottom: 12px; background: var(--qnc-bg-subtle); border: 1px solid var(--qnc-border-soft); border-radius: var(--qnc-radius-md); } .qnc-app .qnc-filter-field { min-width: 160px; } .qnc-app .qnc-filter-search { flex: 1 1 260px; } .qnc-app .qnc-tabs { display: flex; gap: 4px; margin-bottom: 14px; padding: 4px; overflow-x: auto; background: var(--qnc-bg-muted); border: 1px solid var(--qnc-border-soft); border-radius: var(--qnc-radius-md); } .qnc-app .qnc-tab { flex: 0 0 auto; padding: 7px 11px; background: transparent; color: var(--qnc-text-muted); border: 0; border-radius: var(--qnc-radius-sm); font-size: 12px; font-weight: 700; cursor: pointer; } .qnc-app .qnc-tab:hover { color: var(--qnc-text); } .qnc-app .qnc-tab.is-active { background: var(--qnc-bg-surface); color: var(--qnc-text); box-shadow: var(--qnc-shadow-xs); } /* ========================================================= 12. MODEL MATCH / COMPARISON WORKSPACE ========================================================= */ .qnc-app .qnc-match-header { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 14px; align-items: stretch; margin-bottom: 14px; } .qnc-app .qnc-match-product { padding: 14px; background: var(--qnc-bg-surface); border: 1px solid var(--qnc-border); border-radius: var(--qnc-radius-md); } .qnc-app .qnc-match-product-label { margin-bottom: 5px; color: var(--qnc-text-muted); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .qnc-app .qnc-match-product-name { color: var(--qnc-text); font-size: 16px; font-weight: 700; } .qnc-app .qnc-match-versus { display: flex; align-items: center; justify-content: center; min-width: 42px; color: var(--qnc-text-muted); font-size: 11px; font-weight: 800; text-transform: uppercase; } .qnc-app .qnc-criteria-grid { overflow: hidden; border: 1px solid var(--qnc-border); border-radius: var(--qnc-radius-md); background: var(--qnc-bg-surface); } .qnc-app .qnc-criteria-row { display: grid; grid-template-columns: minmax(150px, 1.1fr) minmax(160px, 1fr) minmax(160px, 1fr) minmax(135px, .75fr) 190px; border-bottom: 1px solid var(--qnc-border-soft); } .qnc-app .qnc-criteria-row:last-child { border-bottom: 0; } .qnc-app .qnc-criteria-row.is-header { background: var(--qnc-bg-subtle); color: var(--qnc-text-muted); font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; } .qnc-app .qnc-criteria-row.is-inactive { opacity: .6; } .qnc-app .qnc-criteria-cell { min-width: 0; padding: 10px 12px; border-right: 1px solid var(--qnc-border-soft); } .qnc-app .qnc-criteria-cell:last-child { border-right: 0; } .qnc-app .qnc-criteria-name { color: var(--qnc-text); font-weight: 700; } .qnc-app .qnc-criteria-notes { margin-top: 4px; color: var(--qnc-text-muted); font-size: 11px; line-height: 1.4; } .qnc-app .qnc-comparison-status { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; white-space: nowrap; } .qnc-app .qnc-comparison-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; } .qnc-app .qnc-status-match { color: var(--qnc-success); } .qnc-app .qnc-status-draper-exceeds { color: var(--qnc-success); } .qnc-app .qnc-status-competitor-exceeds { color: var(--qnc-warning); } .qnc-app .qnc-status-no-match { color: var(--qnc-danger); } .qnc-app .qnc-status-info { color: var(--qnc-info); } .qnc-app .qnc-status-na { color: var(--qnc-text-muted); } .qnc-app .qnc-comparison-summary { display: grid; grid-template-columns: repeat(4, minmax(120px, 1fr)); gap: 10px; margin-bottom: 14px; } .qnc-app .qnc-summary-card { padding: 12px; background: var(--qnc-bg-surface); border: 1px solid var(--qnc-border-soft); border-radius: var(--qnc-radius-md); } .qnc-app .qnc-summary-value { color: var(--qnc-text); font-size: 20px; font-weight: 800; line-height: 1; } .qnc-app .qnc-summary-label { margin-top: 5px; color: var(--qnc-text-muted); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; } /* ========================================================= 13. DOCUMENTS / FILES ========================================================= */ .qnc-app .qnc-file-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; } .qnc-app .qnc-file-card { position: relative; min-width: 0; padding: 12px; background: var(--qnc-bg-surface); border: 1px solid var(--qnc-border-soft); border-radius: var(--qnc-radius-md); color: var(--qnc-text); transition: transform var(--qnc-transition), border-color var(--qnc-transition), box-shadow var(--qnc-transition); } .qnc-app .qnc-file-card:hover { transform: translateY(-2px); border-color: var(--qnc-accent); box-shadow: var(--qnc-shadow-sm); } .qnc-app .qnc-file-name { overflow: hidden; color: var(--qnc-text); font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; } .qnc-app .qnc-file-meta { margin-top: 4px; color: var(--qnc-text-muted); font-size: 10px; } .qnc-app .qnc-dropzone { padding: 24px; background: var(--qnc-bg-subtle); border: 2px dashed var(--qnc-border); border-radius: var(--qnc-radius-md); color: var(--qnc-text-muted); text-align: center; transition: background var(--qnc-transition), border-color var(--qnc-transition); } .qnc-app .qnc-dropzone.is-dragover { background: var(--qnc-accent-soft); border-color: var(--qnc-accent); } /* ========================================================= 14. MODALS / DRAWERS ========================================================= */ .qnc-app .modal-content { background: var(--qnc-bg-surface); color: var(--qnc-text); border: 1px solid var(--qnc-border); } .qnc-app .modal-header, .qnc-app .modal-footer { border-color: var(--qnc-border-soft); } .qnc-app .modal-title { color: var(--qnc-text); } .qnc-app .qnc-drawer-backdrop { position: fixed; inset: 0; z-index: 1040; background: rgba(0, 0, 0, .45); } .qnc-app .qnc-drawer { position: fixed; top: 0; right: 0; z-index: 1050; width: min(520px, 92vw); height: 100vh; background: var(--qnc-bg-surface); border-left: 1px solid var(--qnc-border); box-shadow: var(--qnc-shadow-md); overflow-y: auto; } .qnc-app .qnc-drawer-header { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; background: var(--qnc-bg-surface); border-bottom: 1px solid var(--qnc-border-soft); } .qnc-app .qnc-drawer-body { padding: 16px; } .qnc-app .qnc-drawer-footer { position: sticky; bottom: 0; display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; background: var(--qnc-bg-surface); border-top: 1px solid var(--qnc-border-soft); } /* ========================================================= 15. NAVIGATION / BREADCRUMBS / THEME TOGGLE ========================================================= */ .qnc-app .qnc-breadcrumbs { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 10px; color: var(--qnc-text-muted); font-size: 11px; } .qnc-app .qnc-breadcrumbs a { text-decoration: none; } .qnc-app .qnc-breadcrumb-separator { color: var(--qnc-border-strong); } .qnc-app .qnc-theme-toggle { display: inline-flex; align-items: center; gap: 8px; } .qnc-app .qnc-theme-switch { position: relative; display: inline-flex; width: 42px; height: 22px; flex: 0 0 auto; } .qnc-app .qnc-theme-switch input { width: 1px; height: 1px; opacity: 0; position: absolute; } .qnc-app .qnc-theme-switch-track { width: 100%; height: 100%; background: var(--qnc-bg-muted); border: 1px solid var(--qnc-border); border-radius: var(--qnc-radius-pill); cursor: pointer; transition: background var(--qnc-transition), border-color var(--qnc-transition); } .qnc-app .qnc-theme-switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; background: var(--qnc-text-muted); border-radius: 50%; transition: transform var(--qnc-transition), background var(--qnc-transition); } .qnc-app .qnc-theme-switch input:checked + .qnc-theme-switch-track { background: var(--qnc-accent-soft); border-color: var(--qnc-accent); } .qnc-app .qnc-theme-switch input:checked + .qnc-theme-switch-track::after { transform: translateX(20px); background: var(--qnc-accent); } /* ========================================================= 16. LOADING / PROGRESS / UTILITY STATES ========================================================= */ .qnc-app .qnc-loading { display: inline-flex; align-items: center; gap: 8px; color: var(--qnc-text-muted); font-size: 12px; } .qnc-app .qnc-spinner { width: 16px; height: 16px; border: 2px solid var(--qnc-border); border-top-color: var(--qnc-accent); border-radius: 50%; animation: qnc-spin .7s linear infinite; } @keyframes qnc-spin { to { transform: rotate(360deg); } } .qnc-app .qnc-skeleton { min-height: 14px; border-radius: 4px; background: linear-gradient( 90deg, var(--qnc-bg-muted) 25%, var(--qnc-bg-subtle) 50%, var(--qnc-bg-muted) 75% ); background-size: 200% 100%; animation: qnc-skeleton 1.2s ease-in-out infinite; } @keyframes qnc-skeleton { from { background-position: 200% 0; } to { background-position: -200% 0; } } .qnc-app .qnc-progress { width: 100%; height: 8px; overflow: hidden; background: var(--qnc-bg-muted); border-radius: var(--qnc-radius-pill); } .qnc-app .qnc-progress-bar { height: 100%; background: var(--qnc-accent); border-radius: inherit; } .qnc-app .qnc-hidden { display: none !important; } .qnc-app .qnc-visually-muted { opacity: .65; } .qnc-app .qnc-nowrap { white-space: nowrap; } .qnc-app .qnc-text-right { text-align: right; } /* ========================================================= 17. STICKY ACTION BAR ========================================================= */ .qnc-app .qnc-sticky-actions { position: sticky; bottom: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding: 10px 12px; background: color-mix(in srgb, var(--qnc-bg-surface) 94%, transparent); border: 1px solid var(--qnc-border-soft); border-radius: var(--qnc-radius-md); box-shadow: var(--qnc-shadow-sm); backdrop-filter: blur(8px); } .qnc-app .qnc-sticky-actions-left, .qnc-app .qnc-sticky-actions-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* ========================================================= 18. RESPONSIVE ========================================================= */ @media (max-width: 1100px) { .qnc-app .qnc-comparison-summary { grid-template-columns: repeat(2, minmax(120px, 1fr)); } .qnc-app .qnc-criteria-row { grid-template-columns: minmax(140px, 1fr) minmax(150px, 1fr) minmax(150px, 1fr) minmax(120px, .8fr) 180px; } } @media (max-width: 900px) { .qnc-app .qnc-page-header { flex-direction: column; } .qnc-app .qnc-page-actions { justify-content: flex-start; } .qnc-app .qnc-split-layout { grid-template-columns: 1fr; } .qnc-app .qnc-match-header { grid-template-columns: 1fr; } .qnc-app .qnc-match-versus { min-height: 24px; } .qnc-app .qnc-form-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } .qnc-app .qnc-col-10, .qnc-app .qnc-col-9, .qnc-app .qnc-col-8, .qnc-app .qnc-col-6, .qnc-app .qnc-col-5, .qnc-app .qnc-col-4, .qnc-app .qnc-col-3, .qnc-app .qnc-col-2 { grid-column: span 6; } } @media (max-width: 720px) { .qnc-app .qnc-shell { padding-left: 12px; padding-right: 12px; } .qnc-app .qnc-comparison-summary { grid-template-columns: 1fr 1fr; } .qnc-app .qnc-criteria-grid { border: 0; background: transparent; overflow: visible; } .qnc-app .qnc-criteria-row { display: block; margin-bottom: 10px; background: var(--qnc-bg-surface); border: 1px solid var(--qnc-border); border-radius: var(--qnc-radius-md); } .qnc-app .qnc-criteria-row.is-header { display: none; } .qnc-app .qnc-criteria-cell { padding: 9px 11px; border-right: 0; border-bottom: 1px solid var(--qnc-border-soft); } .qnc-app .qnc-criteria-cell:last-child { border-bottom: 0; } .qnc-app .qnc-sticky-actions { align-items: stretch; flex-direction: column; } .qnc-app .qnc-sticky-actions-left, .qnc-app .qnc-sticky-actions-right { width: 100%; } } @media (max-width: 520px) { .qnc-app .qnc-comparison-summary { grid-template-columns: 1fr; } .qnc-app .qnc-form-grid { grid-template-columns: 1fr; } .qnc-app .qnc-col-12, .qnc-app .qnc-col-10, .qnc-app .qnc-col-9, .qnc-app .qnc-col-8, .qnc-app .qnc-col-6, .qnc-app .qnc-col-5, .qnc-app .qnc-col-4, .qnc-app .qnc-col-3, .qnc-app .qnc-col-2 { grid-column: 1; } .qnc-app .qnc-toolbar, .qnc-app .qnc-filter-bar { align-items: stretch; flex-direction: column; } .qnc-app .qnc-filter-field, .qnc-app .qnc-filter-search { width: 100%; min-width: 0; } .qnc-app .qnc-file-grid { grid-template-columns: 1fr; } } /* ========================================================= 19. ACCESSIBILITY / REDUCED MOTION ========================================================= */ .qnc-app :focus-visible { outline: 2px solid var(--qnc-accent); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .qnc-app *, .qnc-app *::before, .qnc-app *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* ========================================================= 20. OPTIONAL SITE HEADER HOOKS Use only when the QNC Configurator page owns the header. ========================================================= */ .qnc-app .qnc-app-header { background: var(--qnc-header-bg); color: var(--qnc-header-text); border-bottom: 0; } .qnc-app .qnc-app-header a, .qnc-app .qnc-app-header button { color: var(--qnc-header-text); } /* ========================================================= 21. ADMIN MASTER / PRIMARY NAVIGATION ========================================================= */ .qnc-app .qnc-admin-header { position: relative; z-index: 1000; background: var(--qnc-header-bg); color: var(--qnc-header-text); } .qnc-app .qnc-admin-header-inner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: end; gap: 28px; width: 100%; max-width: 1500px; margin: 0 auto; padding: 12px 18px 10px; } .qnc-app .qnc-admin-brand { display: inline-flex; align-items: flex-end; min-width: 0; color: var(--qnc-header-text); text-decoration: none; } .qnc-app .qnc-admin-logo { display: block; width: auto; max-width: 230px; height: auto; } .qnc-app .qnc-admin-brand-text { margin-left: 14px; padding-bottom: 5px; color: rgba(255, 255, 255, .78); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; } .qnc-app .qnc-admin-menu { min-width: 0; } .qnc-app .qnc-admin-nav { display: flex; align-items: flex-end; gap: clamp(24px, 4vw, 58px); margin: 0; padding: 0; list-style: none; } .qnc-app .qnc-admin-nav-item { position: relative; flex: 0 0 auto; } .qnc-app .qnc-admin-nav-link { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 8px 0 7px; color: #ffffff !important; font-size: 14px; font-weight: 700; line-height: 1; text-decoration: none !important; white-space: nowrap; opacity: .88; transition: opacity var(--qnc-transition), color var(--qnc-transition); } .qnc-app .qnc-admin-nav-link:hover, .qnc-app .qnc-admin-nav-link:focus, .qnc-app .qnc-admin-nav-item.is-current > .qnc-admin-nav-link, .qnc-app .qnc-admin-nav-item.is-open > .qnc-admin-nav-link { color: #ffffff !important; opacity: 1; } .qnc-app .qnc-admin-nav-item.is-current > .qnc-admin-nav-link::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 3px; background: var(--qnc-accent); border-radius: var(--qnc-radius-pill) var(--qnc-radius-pill) 0 0; } .qnc-app .qnc-admin-nav-caret { width: 0; height: 0; margin-top: 2px; border-top: 4px solid currentColor; border-right: 4px solid transparent; border-left: 4px solid transparent; } .qnc-app .qnc-admin-dropdown { position: absolute; top: calc(100% + 8px); left: -12px; display: none; min-width: 220px; padding: 7px; background: var(--qnc-bg-surface); border: 1px solid var(--qnc-border-soft); border-radius: var(--qnc-radius-md); box-shadow: var(--qnc-shadow-md); } .qnc-app .qnc-admin-nav-item.is-open > .qnc-admin-dropdown { display: block; } .qnc-app .qnc-admin-dropdown a { display: block; padding: 9px 10px; color: var(--qnc-text) !important; border-radius: var(--qnc-radius-sm); font-size: 13px; font-weight: 600; text-decoration: none !important; white-space: nowrap; } .qnc-app .qnc-admin-dropdown a:hover, .qnc-app .qnc-admin-dropdown a:focus { background: var(--qnc-bg-hover); color: var(--qnc-text) !important; } .qnc-app .qnc-admin-utilities { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding-bottom: 1px; } .qnc-app .qnc-admin-utility-link { display: inline-flex; align-items: center; min-height: 34px; padding: 7px 10px; border: 1px solid rgba(255, 255, 255, .24); border-radius: var(--qnc-radius-sm); color: #ffffff !important; font-size: 12px; font-weight: 700; text-decoration: none !important; white-space: nowrap; transition: background var(--qnc-transition), border-color var(--qnc-transition); } .qnc-app .qnc-admin-utility-link:hover, .qnc-app .qnc-admin-utility-link:focus { background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .42); color: #ffffff !important; } .qnc-app .qnc-admin-theme { display: flex; align-items: center; gap: 7px; color: rgba(255, 255, 255, .82); font-size: 11px; font-weight: 700; white-space: nowrap; } .qnc-app .qnc-admin-theme .qnc-theme-switch-track { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .32); } .qnc-app .qnc-admin-theme .qnc-theme-switch-track::after { background: #ffffff; } .qnc-app .qnc-admin-theme .qnc-theme-switch input:checked + .qnc-theme-switch-track { background: var(--qnc-accent-soft); border-color: var(--qnc-accent); } .qnc-app .qnc-admin-theme .qnc-theme-switch input:checked + .qnc-theme-switch-track::after { background: var(--qnc-accent); } .qnc-app .qnc-admin-mobile-toggle { display: none; align-items: center; justify-content: center; min-height: 36px; padding: 8px 12px; background: transparent; color: #ffffff; border: 1px solid rgba(255, 255, 255, .32); border-radius: var(--qnc-radius-sm); font-size: 12px; font-weight: 700; cursor: pointer; } .qnc-app .qnc-admin-main { min-height: calc(100vh - 160px); padding-top: 20px; } .qnc-app .qnc-admin-footer { margin-top: 28px; padding: 14px 18px; background: #000000; color: rgba(255, 255, 255, .72); text-align: center; font-size: 11px; } .qnc-app .qnc-admin-footer a { color: #ffffff !important; } /* ========================================================= 22. ADMIN MASTER - RESPONSIVE ========================================================= */ @media (max-width: 1100px) { .qnc-app .qnc-admin-header-inner { grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; } .qnc-app .qnc-admin-brand-text { display: none; } .qnc-app .qnc-admin-nav { gap: 26px; } .qnc-app .qnc-admin-utility-link { display: none; } } @media (max-width: 820px) { .qnc-app .qnc-admin-header-inner { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding-top: 10px; padding-bottom: 10px; } .qnc-app .qnc-admin-brand { min-width: 0; } .qnc-app .qnc-admin-logo { max-width: 205px; } .qnc-app .qnc-admin-mobile-toggle { display: inline-flex; grid-column: 2; grid-row: 1; } .qnc-app .qnc-admin-menu { display: none; grid-column: 1 / -1; width: 100%; padding-top: 6px; } .qnc-app .qnc-admin-menu.is-open { display: block; } .qnc-app .qnc-admin-nav { flex-direction: column; align-items: stretch; gap: 5px; width: 100%; } .qnc-app .qnc-admin-nav-item { width: 100%; } .qnc-app .qnc-admin-nav-link { width: 100%; justify-content: space-between; padding: 10px 12px; background: rgba(255, 255, 255, .06); border-radius: var(--qnc-radius-sm); } .qnc-app .qnc-admin-nav-item.is-current > .qnc-admin-nav-link::after { top: 7px; right: auto; bottom: 7px; left: 0; width: 3px; height: auto; border-radius: 0 var(--qnc-radius-pill) var(--qnc-radius-pill) 0; } .qnc-app .qnc-admin-dropdown { position: static; min-width: 0; margin-top: 5px; background: var(--qnc-bg-surface); box-shadow: none; } .qnc-app .qnc-admin-utilities { grid-column: 1 / -1; justify-content: flex-start; padding-top: 2px; } .qnc-app .qnc-admin-utility-link { display: inline-flex; } } @media (max-width: 520px) { .qnc-app .qnc-admin-logo { max-width: 180px; } .qnc-app .qnc-admin-utilities { align-items: stretch; flex-direction: column; } .qnc-app .qnc-admin-theme { justify-content: space-between; width: 100%; } .qnc-app .qnc-admin-utility-link { justify-content: center; width: 100%; } } /* ========================================================= 23. ADMIN DASHBOARD ========================================================= */ .qnc-app .qnc-metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; } .qnc-app .qnc-metric-card { min-width: 0; padding: 14px; background: var(--qnc-bg-surface); border: 1px solid var(--qnc-border-soft); border-radius: var(--qnc-radius-md); box-shadow: var(--qnc-shadow-xs); } .qnc-app .qnc-metric-value { color: var(--qnc-text); font-size: 26px; font-weight: 800; line-height: 1; } .qnc-app .qnc-metric-label { margin-top: 6px; color: var(--qnc-text-muted); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .qnc-app .qnc-admin-launch-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .qnc-app .qnc-admin-launch-card { display: flex; min-height: 180px; flex-direction: column; padding: 18px; background: var(--qnc-bg-surface); border: 1px solid var(--qnc-border); border-radius: var(--qnc-radius-md); box-shadow: var(--qnc-shadow-xs); color: var(--qnc-text) !important; text-decoration: none !important; transition: transform var(--qnc-transition), border-color var(--qnc-transition), box-shadow var(--qnc-transition); } .qnc-app .qnc-admin-launch-card:hover, .qnc-app .qnc-admin-launch-card:focus { transform: translateY(-2px); border-color: var(--qnc-accent); box-shadow: var(--qnc-shadow-sm); color: var(--qnc-text) !important; } .qnc-app .qnc-admin-launch-kicker { margin-bottom: 8px; color: var(--qnc-accent); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .qnc-app .qnc-admin-launch-title { margin: 0 0 8px; color: var(--qnc-text); font-size: 17px; font-weight: 800; } .qnc-app .qnc-admin-launch-text { margin: 0; color: var(--qnc-text-muted); font-size: 12px; line-height: 1.55; } .qnc-app .qnc-admin-launch-action { margin-top: auto; padding-top: 16px; color: var(--qnc-accent); font-size: 12px; font-weight: 800; } .qnc-app .qnc-health-list { margin: 0; padding: 0; list-style: none; } .qnc-app .qnc-health-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--qnc-border-soft); } .qnc-app .qnc-health-row:first-child { padding-top: 0; } .qnc-app .qnc-health-row:last-child { padding-bottom: 0; border-bottom: 0; } .qnc-app .qnc-health-label { color: var(--qnc-text); font-weight: 700; } .qnc-app .qnc-health-help { margin-top: 2px; color: var(--qnc-text-muted); font-size: 11px; } .qnc-app .qnc-health-count { min-width: 34px; color: var(--qnc-text); font-size: 18px; font-weight: 800; text-align: right; } @media (max-width: 900px) { .qnc-app .qnc-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .qnc-app .qnc-admin-launch-grid { grid-template-columns: 1fr; } .qnc-app .qnc-admin-launch-card { min-height: 0; } } @media (max-width: 520px) { .qnc-app .qnc-metric-grid { grid-template-columns: 1fr; } } /* ========================================================= 24. COMPARISON PREVIEW Append this section to the current QNCConfig_UI.css bible. ========================================================= */ .qnc-app .qnc-preview-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; padding: 12px 14px; background: var(--qnc-bg-subtle); border: 1px solid var(--qnc-border-soft); border-radius: var(--qnc-radius-md); } .qnc-app .qnc-preview-toolbar-title { color: var(--qnc-text); font-size: 13px; font-weight: 800; } .qnc-app .qnc-preview-document { width: 100%; max-width: none; margin: 0; overflow: hidden; background: var(--qnc-bg-surface); border: 1px solid var(--qnc-border); border-radius: var(--qnc-radius-lg); box-shadow: var(--qnc-shadow-sm); } .qnc-app .qnc-preview-header { padding: 30px 34px 26px; background: var(--qnc-bg-subtle); border-bottom: 1px solid var(--qnc-border-soft); } .qnc-app .qnc-preview-eyebrow { margin-bottom: 8px; color: var(--qnc-accent); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .qnc-app .qnc-preview-title { margin: 0; color: var(--qnc-text); font-size: 28px; font-weight: 800; line-height: 1.15; } .qnc-app .qnc-preview-intro { max-width: 760px; margin: 10px 0 0; color: var(--qnc-text-muted); font-size: 13px; line-height: 1.6; } .qnc-app .qnc-preview-products { display: grid; grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr); align-items: stretch; gap: 0; margin: 0; border-bottom: 1px solid var(--qnc-border-soft); } .qnc-app .qnc-preview-product { min-width: 0; padding: 24px 30px; background: var(--qnc-bg-surface); } .qnc-app .qnc-preview-product.is-draper { background: var(--qnc-accent-soft); } .qnc-app .qnc-preview-product-kicker { margin-bottom: 6px; color: var(--qnc-text-muted); font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; } .qnc-app .qnc-preview-product.is-draper .qnc-preview-product-kicker { color: var(--qnc-accent); } .qnc-app .qnc-preview-product-name { color: var(--qnc-text); font-size: 20px; font-weight: 800; line-height: 1.25; } .qnc-app .qnc-preview-product-meta { margin-top: 5px; color: var(--qnc-text-muted); font-size: 12px; } .qnc-app .qnc-preview-vs { display: flex; align-items: center; justify-content: center; background: var(--qnc-bg-subtle); color: var(--qnc-text-muted); border-right: 1px solid var(--qnc-border-soft); border-left: 1px solid var(--qnc-border-soft); font-size: 10px; font-weight: 900; letter-spacing: .06em; } .qnc-app .qnc-preview-vs span { display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; background: var(--qnc-bg-surface); border: 1px solid var(--qnc-border); border-radius: 50%; } .qnc-app .qnc-preview-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--qnc-border-soft); } .qnc-app .qnc-preview-summary-item { padding: 18px 22px; background: var(--qnc-bg-surface); border-right: 1px solid var(--qnc-border-soft); } .qnc-app .qnc-preview-summary-item:last-child { border-right: 0; } .qnc-app .qnc-preview-summary-number { color: var(--qnc-text); font-size: 24px; font-weight: 900; line-height: 1; } .qnc-app .qnc-preview-summary-label { margin-top: 6px; color: var(--qnc-text-muted); font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; } .qnc-app .qnc-preview-section { padding: 28px 30px 32px; } .qnc-app .qnc-preview-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 16px; } .qnc-app .qnc-preview-section-kicker { margin-bottom: 3px; color: var(--qnc-text-muted); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .qnc-app .qnc-preview-section-title { margin: 0; color: var(--qnc-text); font-size: 18px; font-weight: 800; } .qnc-app .qnc-preview-legend { display: flex; align-items: center; justify-content: flex-end; gap: 14px; flex-wrap: wrap; } .qnc-app .qnc-preview-legend-item { display: inline-flex; align-items: center; gap: 6px; color: var(--qnc-text-muted); font-size: 10px; font-weight: 700; white-space: nowrap; } .qnc-app .qnc-preview-dot { width: 8px; height: 8px; border-radius: 50%; } .qnc-app .qnc-preview-dot-match { background: var(--qnc-success); } .qnc-app .qnc-preview-dot-exceeds { background: var(--qnc-accent); } .qnc-app .qnc-preview-dot-review { background: var(--qnc-warning); } .qnc-app .qnc-preview-criterion { position: relative; margin-bottom: 12px; overflow: hidden; background: var(--qnc-bg-surface); border: 1px solid var(--qnc-border-soft); border-radius: var(--qnc-radius-md); } .qnc-app .qnc-preview-criterion:last-child { margin-bottom: 0; } .qnc-app .qnc-preview-criterion::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 4px; background: var(--qnc-border-strong); } .qnc-app .qnc-preview-criterion.is-match::before { background: var(--qnc-success); } .qnc-app .qnc-preview-criterion.is-draper-exceeds::before { background: var(--qnc-accent); } .qnc-app .qnc-preview-criterion.is-review::before { background: var(--qnc-warning); } .qnc-app .qnc-preview-criterion.is-no-match::before { background: var(--qnc-danger); } .qnc-app .qnc-preview-criterion.is-info::before { background: var(--qnc-info); } .qnc-app .qnc-preview-criterion-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 14px 16px 12px 20px; background: var(--qnc-bg-subtle); border-bottom: 1px solid var(--qnc-border-soft); } .qnc-app .qnc-preview-criterion-name { margin: 0; color: var(--qnc-text); font-size: 14px; font-weight: 800; } .qnc-app .qnc-preview-criterion-meta { margin-top: 3px; color: var(--qnc-text-muted); font-size: 10px; line-height: 1.45; } .qnc-app .qnc-preview-status { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px; padding: 5px 9px; background: var(--qnc-neutral-soft); color: var(--qnc-text-muted); border: 1px solid var(--qnc-border); border-radius: var(--qnc-radius-pill); font-size: 10px; font-weight: 800; white-space: nowrap; } .qnc-app .qnc-preview-status::before { content: ""; width: 7px; height: 7px; background: currentColor; border-radius: 50%; } .qnc-app .qnc-preview-status.is-match { background: var(--qnc-success-soft); color: var(--qnc-success); border-color: var(--qnc-success-border); } .qnc-app .qnc-preview-status.is-draper-exceeds { background: var(--qnc-accent-soft); color: var(--qnc-accent); border-color: var(--qnc-accent-border); } .qnc-app .qnc-preview-status.is-review { background: var(--qnc-warning-soft); color: var(--qnc-warning); border-color: var(--qnc-warning-border); } .qnc-app .qnc-preview-status.is-no-match { background: var(--qnc-danger-soft); color: var(--qnc-danger); border-color: var(--qnc-danger-border); } .qnc-app .qnc-preview-status.is-info { background: var(--qnc-info-soft); color: var(--qnc-info); border-color: var(--qnc-info-border); } .qnc-app .qnc-preview-status.is-na { background: var(--qnc-neutral-soft); color: var(--qnc-text-muted); border-color: var(--qnc-border); } .qnc-app .qnc-preview-values { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .qnc-app .qnc-preview-value-column { min-width: 0; padding: 16px 18px 17px 20px; } .qnc-app .qnc-preview-value-column + .qnc-preview-value-column { border-left: 1px solid var(--qnc-border-soft); } .qnc-app .qnc-preview-value-column.is-draper { background: color-mix(in srgb, var(--qnc-accent-soft) 45%, transparent); } .qnc-app .qnc-preview-value-label { margin-bottom: 6px; color: var(--qnc-text-muted); font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; } .qnc-app .qnc-preview-value { color: var(--qnc-text); font-size: 13px; font-weight: 700; line-height: 1.55; white-space: pre-line; } .qnc-app .qnc-preview-notes { padding: 12px 18px 14px 20px; background: var(--qnc-bg-subtle); border-top: 1px solid var(--qnc-border-soft); } .qnc-app .qnc-preview-notes-label { margin-bottom: 4px; color: var(--qnc-text-muted); font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .qnc-app .qnc-preview-notes-text { color: var(--qnc-text); font-size: 11px; line-height: 1.55; white-space: pre-line; } .qnc-app .qnc-preview-footer { padding: 20px 30px 24px; background: var(--qnc-bg-subtle); color: var(--qnc-text-muted); border-top: 1px solid var(--qnc-border-soft); font-size: 10px; line-height: 1.55; } .qnc-app .qnc-preview-footer-title { margin-bottom: 4px; color: var(--qnc-text); font-weight: 800; } .qnc-app .qnc-preview-footer p { margin: 0; } @media (max-width: 760px) { .qnc-app .qnc-preview-toolbar, .qnc-app .qnc-preview-section-heading { align-items: stretch; flex-direction: column; } .qnc-app .qnc-preview-toolbar .qnc-page-actions, .qnc-app .qnc-preview-legend { justify-content: flex-start; } .qnc-app .qnc-preview-header, .qnc-app .qnc-preview-section { padding-left: 18px; padding-right: 18px; } .qnc-app .qnc-preview-products { grid-template-columns: 1fr; } .qnc-app .qnc-preview-vs { min-height: 46px; border-top: 1px solid var(--qnc-border-soft); border-right: 0; border-bottom: 1px solid var(--qnc-border-soft); border-left: 0; } .qnc-app .qnc-preview-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } .qnc-app .qnc-preview-summary-item:nth-child(2) { border-right: 0; } .qnc-app .qnc-preview-summary-item:nth-child(-n+2) { border-bottom: 1px solid var(--qnc-border-soft); } .qnc-app .qnc-preview-criterion-heading { align-items: flex-start; flex-direction: column; } .qnc-app .qnc-preview-values { grid-template-columns: 1fr; } .qnc-app .qnc-preview-value-column + .qnc-preview-value-column { border-top: 1px solid var(--qnc-border-soft); border-left: 0; } } @media (max-width: 480px) { .qnc-app .qnc-preview-summary { grid-template-columns: 1fr; } .qnc-app .qnc-preview-summary-item { border-right: 0; border-bottom: 1px solid var(--qnc-border-soft); } .qnc-app .qnc-preview-summary-item:last-child { border-bottom: 0; } } @media print { .qnc-app .qnc-preview-admin-only, .qnc-app .qnc-admin-header, .qnc-app .qnc-admin-footer { display: none !important; } .qnc-app .qnc-admin-main { padding-top: 0; } .qnc-app .qnc-shell { max-width: none; padding: 0; } .qnc-app .qnc-preview-document { max-width: none; border: 0; border-radius: 0; box-shadow: none; } .qnc-app .qnc-preview-criterion { break-inside: avoid; page-break-inside: avoid; } } /* ========================================================= 25. DEALER / PROJECT UI REFINEMENTS ========================================================= */ .qnc-app .qnc-form-grid > [class^="qnc-col-"], .qnc-app .qnc-form-grid > [class*=" qnc-col-"] { min-width: 0; } .qnc-app .qnc-form-grid { align-items: start; } .qnc-app .qnc-form-label { display: block; width: 100%; margin: 0 0 6px 0; line-height: 1.25; } .qnc-app .qnc-form-grid .form-control, .qnc-app .qnc-form-grid .form-select, .qnc-app .qnc-form-grid input[type="file"], .qnc-app .qnc-form-grid textarea { display: block; width: 100%; max-width: none; box-sizing: border-box; } .qnc-app .qnc-file-input { width: 100%; min-width: 0; } .qnc-app .qnc-check-row { display: flex; align-items: flex-start; gap: 8px; width: 100%; min-width: 0; } .qnc-app .qnc-check-row input[type="checkbox"] { /* Bootstrap 4 .form-check-input is absolutely positioned by default. QNC checkbox rows participate in normal flex layout, so explicitly keep the checkbox in-flow. This also prevents it from drifting while the configurator panel scrolls independently. */ position: static !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; float: none !important; flex: 0 0 auto; width: auto; margin: 3px 0 0 0 !important; transform: none !important; } .qnc-app .qnc-check-row label { display: block; flex: 1 1 auto; width: auto; min-width: 0; margin: 0; line-height: 1.35; white-space: nowrap; } .qnc-app .qnc-checkbox-field { align-self: start; } .qnc-app .qnc-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .qnc-app .qnc-table-wrap .qnc-table { width: 100%; margin-bottom: 0; } .qnc-app .qnc-table .d-flex { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; } .qnc-app .qnc-table .justify-content-end { justify-content: flex-end; } .qnc-app .qnc-page-actions, .qnc-app .qnc-panel-footer, .qnc-app .qnc-panel-header > .d-flex { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .qnc-app .qnc-page-actions .btn, .qnc-app .qnc-panel-footer .btn { white-space: nowrap; } @media (max-width: 900px) { .qnc-app .qnc-form-grid > [class^="qnc-col-"], .qnc-app .qnc-form-grid > [class*=" qnc-col-"] { grid-column: 1 / -1; width: 100%; max-width: 100%; flex: 0 0 100%; } .qnc-app .qnc-checkbox-field { align-self: auto; } .qnc-app .qnc-check-row label { white-space: normal; } } /* Dealer logo upload row: give the native file input enough real width and keep the Default Logo control aligned from the top of the field. */ .qnc-app .qnc-logo-file-field { min-width: 0; } .qnc-app .qnc-logo-file-field input[type="file"], .qnc-app .qnc-logo-file-field .qnc-file-input { width: 100% !important; max-width: 100% !important; min-width: 300px; } .qnc-app .qnc-logo-default-field { align-self: start !important; } .qnc-app .qnc-logo-default-field .qnc-check-row { min-height: 38px; align-items: flex-start; } @media (max-width: 1100px) { .qnc-app .qnc-logo-name-field, .qnc-app .qnc-logo-file-field, .qnc-app .qnc-logo-default-field { grid-column: 1 / -1; width: 100%; max-width: 100%; flex: 0 0 100%; } .qnc-app .qnc-logo-file-field input[type="file"], .qnc-app .qnc-logo-file-field .qnc-file-input { min-width: 0; } } /* ========================================================= 26. REVISION CONFIGURATOR ========================================================= */ .qnc-app .qnc-config-status-value { font-size: 16px; line-height: 1.2; } .qnc-app .qnc-config-item-header { align-items: flex-start; } .qnc-app .qnc-config-item-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; } .qnc-app .qnc-config-section { margin-bottom: 18px; overflow: hidden; background: var(--qnc-bg-surface); border: 1px solid var(--qnc-border-soft); border-radius: var(--qnc-radius-md); } .qnc-app .qnc-config-section:last-child { margin-bottom: 0; } .qnc-app .qnc-config-section-header { padding: 11px 14px; background: var(--qnc-bg-subtle); border-bottom: 1px solid var(--qnc-border-soft); } .qnc-app .qnc-config-section-title { margin: 0; color: var(--qnc-text); font-size: 14px; font-weight: 800; } .qnc-app .qnc-config-section-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; } .qnc-app .qnc-config-field { min-width: 0; padding: 16px; border-right: 1px solid var(--qnc-border-soft); border-bottom: 1px solid var(--qnc-border-soft); } .qnc-app .qnc-config-field:nth-child(2n) { border-right: 0; } .qnc-app .qnc-config-field:nth-last-child(-n+2) { border-bottom: 0; } .qnc-app .qnc-config-field.is-disabled { opacity: .7; } .qnc-app .qnc-config-field-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 5px; } .qnc-app .qnc-config-field-label-wrap { display: flex; min-width: 0; align-items: center; gap: 7px; flex-wrap: wrap; } .qnc-app .qnc-config-field-label { color: var(--qnc-text); font-size: 13px; font-weight: 800; } .qnc-app .qnc-config-required { padding: 3px 7px; font-size: 9px; } .qnc-app .qnc-config-option-key { flex: 0 0 auto; color: var(--qnc-text-muted); font-size: 9px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; } .qnc-app .qnc-config-help { margin-bottom: 8px; color: var(--qnc-text-muted); font-size: 11px; line-height: 1.45; } .qnc-app .qnc-config-marketing { margin: 8px 0 10px; padding: 9px 10px; background: var(--qnc-accent-soft); color: var(--qnc-text); border: 1px solid var(--qnc-accent-border); border-radius: var(--qnc-radius-sm); font-size: 11px; font-weight: 600; line-height: 1.45; } .qnc-app .qnc-config-control { min-width: 0; } .qnc-app .qnc-config-input { width: 100%; max-width: none; } .qnc-app .qnc-config-choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 8px; } .qnc-app .qnc-config-choice { position: relative; display: flex; min-width: 0; align-items: stretch; background: var(--qnc-bg-surface); border: 1px solid var(--qnc-border); border-radius: var(--qnc-radius-sm); transition: border-color var(--qnc-transition), background var(--qnc-transition), box-shadow var(--qnc-transition); } .qnc-app .qnc-config-choice:hover { border-color: var(--qnc-accent); } .qnc-app .qnc-config-choice.is-selected { background: var(--qnc-accent-soft); border-color: var(--qnc-accent); box-shadow: 0 0 0 1px var(--qnc-accent-soft); } .qnc-app .qnc-config-choice.is-disabled { cursor: not-allowed; opacity: .6; } .qnc-app .qnc-config-choice > span.qnc-config-choice-input, .qnc-app .qnc-config-choice > .qnc-config-choice-input { display: flex; flex: 0 0 auto; align-items: flex-start; padding: 12px 0 12px 12px; } .qnc-app .qnc-config-choice-input input[type="radio"], .qnc-app .qnc-config-choice-input input[type="checkbox"], .qnc-app .qnc-config-choice > input[type="radio"], .qnc-app .qnc-config-choice > input[type="checkbox"] { margin: 2px 0 0; } .qnc-app .qnc-config-choice-label { display: flex; min-width: 0; flex: 1 1 auto; align-items: center; gap: 9px; margin: 0; padding: 10px 12px 10px 9px; color: var(--qnc-text); cursor: pointer; } .qnc-app .qnc-config-choice.is-disabled .qnc-config-choice-label { cursor: not-allowed; } .qnc-app .qnc-config-swatch { display: block; width: 28px; height: 28px; flex: 0 0 28px; border: 1px solid var(--qnc-border-strong); border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); } .qnc-app .qnc-config-choice-image { display: block; width: 38px; height: 38px; flex: 0 0 38px; object-fit: cover; background: var(--qnc-bg-subtle); border: 1px solid var(--qnc-border); border-radius: 5px; } .qnc-app .qnc-config-choice-text { display: block; min-width: 0; } .qnc-app .qnc-config-choice-title { display: block; color: var(--qnc-text); font-size: 12px; font-weight: 800; line-height: 1.25; } .qnc-app .qnc-config-choice-description { display: block; margin-top: 2px; color: var(--qnc-text-muted); font-size: 10px; line-height: 1.35; } .qnc-app .qnc-config-additional { margin-top: 10px; } .qnc-app .qnc-config-readonly { min-height: var(--qnc-control-height); padding: 8px 10px; background: var(--qnc-bg-muted); color: var(--qnc-text-muted); border: 1px solid var(--qnc-border-soft); border-radius: var(--qnc-radius-sm); } .qnc-app .qnc-config-footer { align-items: center; justify-content: space-between; } .qnc-app .qnc-config-autosave-note { color: var(--qnc-text-muted); font-size: 11px; } .qnc-app .qnc-config-footer-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; } @media (max-width: 900px) { .qnc-app .qnc-config-section-body { grid-template-columns: 1fr; } .qnc-app .qnc-config-field, .qnc-app .qnc-config-field:nth-child(2n), .qnc-app .qnc-config-field:nth-last-child(-n+2) { border-right: 0; border-bottom: 1px solid var(--qnc-border-soft); } .qnc-app .qnc-config-field:last-child { border-bottom: 0; } .qnc-app .qnc-config-field-heading, .qnc-app .qnc-config-footer { align-items: stretch; flex-direction: column; } .qnc-app .qnc-config-option-key { white-space: normal; } .qnc-app .qnc-config-item-actions, .qnc-app .qnc-config-footer-actions { justify-content: flex-start; } } @media (max-width: 520px) { .qnc-app .qnc-config-choice-grid { grid-template-columns: 1fr; } } /* ========================================================= 27. QNC PRODUCT SEARCH / PRODUCT RESULTS Product picker used by Shades and AV. ========================================================= */ .qnc-app .qnc-product-search { display: grid; gap: 14px; } .qnc-app .qnc-product-type { display: inline-flex; width: fit-content; max-width: 100%; gap: 4px; padding: 4px; overflow-x: auto; background: var(--qnc-bg-muted); border: 1px solid var(--qnc-border-soft); border-radius: var(--qnc-radius-md); } .qnc-app .qnc-product-type-option { position: relative; flex: 0 0 auto; } .qnc-app .qnc-product-type-option input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .qnc-app .qnc-product-type-label { display: inline-flex; min-height: 36px; align-items: center; justify-content: center; padding: 7px 16px; color: var(--qnc-text-muted); border: 1px solid transparent; border-radius: var(--qnc-radius-sm); font-size: 12px; font-weight: 800; cursor: pointer; white-space: nowrap; transition: background var(--qnc-transition), color var(--qnc-transition), border-color var(--qnc-transition), box-shadow var(--qnc-transition); } .qnc-app .qnc-product-type-label:hover { color: var(--qnc-text); } .qnc-app .qnc-product-type-option input:checked + .qnc-product-type-label { background: var(--qnc-bg-surface); color: var(--qnc-text); border-color: var(--qnc-border-soft); box-shadow: var(--qnc-shadow-xs); } .qnc-app .qnc-product-type-option input:focus-visible + .qnc-product-type-label { outline: 2px solid var(--qnc-accent); outline-offset: 2px; } .qnc-app .qnc-product-search-row { display: flex; align-items: end; gap: 10px; flex-wrap: wrap; } .qnc-app .qnc-product-search-field { flex: 1 1 420px; min-width: 240px; } .qnc-app .qnc-product-search-input { width: 100%; } .qnc-app .qnc-product-search-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; color: var(--qnc-text-muted); font-size: 11px; } .qnc-app .qnc-product-result-count { font-weight: 700; } .qnc-app .qnc-product-list { overflow: hidden; background: var(--qnc-bg-surface); border: 1px solid var(--qnc-border); border-radius: var(--qnc-radius-md); box-shadow: var(--qnc-shadow-xs); } .qnc-app .qnc-product-row { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; align-items: center; gap: 16px; min-height: 108px; padding: 14px; background: var(--qnc-bg-surface); border-bottom: 1px solid var(--qnc-border-soft); transition: background var(--qnc-transition); } .qnc-app .qnc-product-row:last-child { border-bottom: 0; } .qnc-app .qnc-product-row:hover { background: var(--qnc-bg-hover); } .qnc-app .qnc-product-row.is-selected { background: var(--qnc-bg-selected); box-shadow: inset 4px 0 0 var(--qnc-accent); } .qnc-app .qnc-product-thumb { display: flex; width: 88px; height: 78px; align-items: center; justify-content: center; overflow: hidden; background: var(--qnc-bg-muted); border: 1px solid var(--qnc-border-soft); border-radius: var(--qnc-radius-sm); } .qnc-app .qnc-product-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; } .qnc-app .qnc-product-thumb-placeholder { color: var(--qnc-text-muted); font-size: 10px; font-weight: 700; text-align: center; } .qnc-app .qnc-product-info { min-width: 0; } .qnc-app .qnc-product-name { margin: 0; color: var(--qnc-accent); font-size: 17px; font-weight: 800; line-height: 1.25; } .qnc-app a.qnc-product-name { text-decoration: none; } .qnc-app a.qnc-product-name:hover, .qnc-app a.qnc-product-name:focus { color: var(--qnc-accent-hover); text-decoration: underline; text-underline-offset: 2px; } .qnc-app .qnc-product-subtitle { margin-top: 3px; color: var(--qnc-text); font-size: 12px; font-weight: 600; line-height: 1.4; } .qnc-app .qnc-product-description { display: -webkit-box; margin-top: 4px; overflow: hidden; color: var(--qnc-text-muted); font-size: 11px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .qnc-app .qnc-product-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 5px; color: var(--qnc-text-muted); font-size: 10px; } .qnc-app .qnc-product-part-number { font-weight: 700; } .qnc-app .qnc-product-actions { display: flex; min-width: 118px; align-items: center; justify-content: flex-end; gap: 8px; } .qnc-app .qnc-product-actions .btn, .qnc-app .qnc-product-actions .qnc-button { min-width: 110px; white-space: nowrap; } .qnc-app .qnc-product-loading-row { display: grid; grid-template-columns: 88px minmax(0, 1fr) 118px; gap: 16px; padding: 14px; border-bottom: 1px solid var(--qnc-border-soft); } .qnc-app .qnc-product-loading-row:last-child { border-bottom: 0; } /* ========================================================= 28. QNC QUOTE / CONFIGURATOR WORKSPACE General layout hooks for the next stages of this project. ========================================================= */ .qnc-app .qnc-workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(440px, 500px); gap: 18px; align-items: start; } .qnc-app .qnc-workspace-main, .qnc-app .qnc-workspace-side { min-width: 0; } .qnc-app .qnc-workspace-side { position: sticky; top: 16px; } .qnc-app .qnc-quote-summary { overflow: hidden; background: var(--qnc-bg-surface); border: 1px solid var(--qnc-border); border-radius: var(--qnc-radius-md); box-shadow: var(--qnc-shadow-xs); } .qnc-app .qnc-quote-summary-header { padding: 12px 14px; background: var(--qnc-bg-subtle); border-bottom: 1px solid var(--qnc-border-soft); } .qnc-app .qnc-quote-summary-title { margin: 0; color: var(--qnc-text); font-size: 14px; font-weight: 800; } .qnc-app .qnc-quote-summary-body { padding: 12px 14px; } .qnc-app .qnc-quote-summary-row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 7px 0; border-bottom: 1px solid var(--qnc-border-soft); } .qnc-app .qnc-quote-summary-row:last-child { border-bottom: 0; } .qnc-app .qnc-quote-summary-label { color: var(--qnc-text-muted); font-size: 11px; } .qnc-app .qnc-quote-summary-value { color: var(--qnc-text); font-size: 12px; font-weight: 800; text-align: right; } .qnc-app .qnc-quote-summary-total { margin-top: 6px; padding-top: 12px; border-top: 2px solid var(--qnc-border); } .qnc-app .qnc-quote-summary-total .qnc-quote-summary-label, .qnc-app .qnc-quote-summary-total .qnc-quote-summary-value { color: var(--qnc-text); font-size: 14px; font-weight: 900; } .qnc-app .qnc-stepper { display: flex; gap: 0; margin-bottom: 18px; overflow-x: auto; background: var(--qnc-bg-surface); border: 1px solid var(--qnc-border-soft); border-radius: var(--qnc-radius-md); } .qnc-app .qnc-step { position: relative; display: flex; min-width: 145px; flex: 1 0 auto; align-items: center; gap: 8px; padding: 10px 12px; color: var(--qnc-text-muted); border-right: 1px solid var(--qnc-border-soft); font-size: 11px; font-weight: 700; } .qnc-app .qnc-step:last-child { border-right: 0; } .qnc-app .qnc-step-number { display: inline-flex; width: 24px; height: 24px; flex: 0 0 24px; align-items: center; justify-content: center; background: var(--qnc-bg-muted); color: var(--qnc-text-muted); border-radius: 50%; font-size: 10px; font-weight: 900; } .qnc-app .qnc-step.is-active { background: var(--qnc-accent-soft); color: var(--qnc-text); } .qnc-app .qnc-step.is-active .qnc-step-number { background: var(--qnc-accent); color: var(--qnc-accent-contrast); } .qnc-app .qnc-step.is-complete .qnc-step-number { background: var(--qnc-success); color: #ffffff; } .qnc-app .qnc-money { font-variant-numeric: tabular-nums; white-space: nowrap; } .qnc-app .qnc-number { font-variant-numeric: tabular-nums; } .qnc-app .qnc-action-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 16px; } .qnc-app .qnc-action-bar-left, .qnc-app .qnc-action-bar-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* ========================================================= 29. QNC RESPONSIVE ADDITIONS ========================================================= */ @media (max-width: 900px) { .qnc-app .qnc-workspace { grid-template-columns: 1fr; } .qnc-app .qnc-workspace-side { position: static; } } @media (max-width: 720px) { .qnc-app .qnc-product-row { grid-template-columns: 72px minmax(0, 1fr); gap: 12px; } .qnc-app .qnc-product-thumb { width: 72px; height: 68px; } .qnc-app .qnc-product-actions { grid-column: 1 / -1; width: 100%; justify-content: flex-end; } .qnc-app .qnc-product-loading-row { grid-template-columns: 72px minmax(0, 1fr); } } @media (max-width: 520px) { .qnc-app .qnc-product-type { display: flex; width: 100%; } .qnc-app .qnc-product-type-option { flex: 1 1 0; } .qnc-app .qnc-product-type-label { width: 100%; } .qnc-app .qnc-product-search-row { align-items: stretch; flex-direction: column; } .qnc-app .qnc-product-search-field { width: 100%; min-width: 0; } .qnc-app .qnc-product-row { grid-template-columns: 58px minmax(0, 1fr); min-height: 0; padding: 12px; } .qnc-app .qnc-product-thumb { width: 58px; height: 58px; } .qnc-app .qnc-product-name { font-size: 15px; } .qnc-app .qnc-product-actions { justify-content: stretch; } .qnc-app .qnc-product-actions .btn, .qnc-app .qnc-product-actions .qnc-button { width: 100%; } .qnc-app .qnc-action-bar, .qnc-app .qnc-action-bar-left, .qnc-app .qnc-action-bar-right { align-items: stretch; flex-direction: column; width: 100%; } } /* ========================================================= 30. QNC PRODUCT SUBCATEGORIES / LIVE SEARCH SUGGESTIONS ========================================================= */ .qnc-app .qnc-product-subcategories { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .qnc-app .qnc-product-subcategory { position: relative; flex: 0 0 auto; } .qnc-app .qnc-product-subcategory input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .qnc-app .qnc-product-subcategory-label { display: inline-flex; min-height: 34px; align-items: center; justify-content: center; padding: 6px 12px; background: var(--qnc-bg-surface); color: var(--qnc-text-muted); border: 1px solid var(--qnc-border); border-radius: var(--qnc-radius-sm); font-size: 11px; font-weight: 800; cursor: pointer; white-space: nowrap; transition: background var(--qnc-transition), color var(--qnc-transition), border-color var(--qnc-transition), box-shadow var(--qnc-transition); } .qnc-app .qnc-product-subcategory-label:hover { background: var(--qnc-bg-hover); color: var(--qnc-text); border-color: var(--qnc-border-strong); } .qnc-app .qnc-product-subcategory input:checked + .qnc-product-subcategory-label { background: var(--qnc-accent-soft); color: var(--qnc-accent); border-color: var(--qnc-accent); box-shadow: 0 0 0 1px var(--qnc-accent-soft); } .qnc-app .qnc-product-subcategory input:focus-visible + .qnc-product-subcategory-label { outline: 2px solid var(--qnc-accent); outline-offset: 2px; } .qnc-app .qnc-live-search { position: relative; } .qnc-app .qnc-autocomplete { position: absolute; top: calc(100% + 5px); right: 0; left: 0; z-index: 1100; display: none; max-height: 420px; overflow-y: auto; background: var(--qnc-bg-surface); border: 1px solid var(--qnc-border); border-radius: var(--qnc-radius-md); box-shadow: var(--qnc-shadow-md); } .qnc-app .qnc-autocomplete.is-open { display: block; } .qnc-app .qnc-autocomplete-item { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 10px; width: 100%; padding: 9px 10px; background: var(--qnc-bg-surface); color: var(--qnc-text); border: 0; border-bottom: 1px solid var(--qnc-border-soft); text-align: left; cursor: pointer; } .qnc-app .qnc-autocomplete-item:last-child { border-bottom: 0; } .qnc-app .qnc-autocomplete-item:hover, .qnc-app .qnc-autocomplete-item:focus, .qnc-app .qnc-autocomplete-item.is-active { background: var(--qnc-bg-hover); outline: none; } .qnc-app .qnc-autocomplete-thumb { display: flex; width: 48px; height: 42px; align-items: center; justify-content: center; overflow: hidden; background: var(--qnc-bg-muted); border: 1px solid var(--qnc-border-soft); border-radius: 5px; } .qnc-app .qnc-autocomplete-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; } .qnc-app .qnc-autocomplete-thumb-placeholder { color: var(--qnc-text-muted); font-size: 8px; font-weight: 800; text-align: center; } .qnc-app .qnc-autocomplete-content { min-width: 0; } .qnc-app .qnc-autocomplete-name { overflow: hidden; color: var(--qnc-text); font-size: 12px; font-weight: 800; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; } .qnc-app .qnc-autocomplete-subtitle { overflow: hidden; margin-top: 2px; color: var(--qnc-text-muted); font-size: 10px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; } .qnc-app .qnc-autocomplete-meta { margin-top: 2px; color: var(--qnc-text-muted); font-size: 9px; font-weight: 700; } .qnc-app .qnc-autocomplete-message { padding: 11px 12px; color: var(--qnc-text-muted); font-size: 11px; } .qnc-app .qnc-search-hint { margin-top: 5px; color: var(--qnc-text-muted); font-size: 10px; } @media (max-width: 520px) { .qnc-app .qnc-product-subcategories { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; } .qnc-app .qnc-product-subcategory, .qnc-app .qnc-product-subcategory-label { width: 100%; } } /* ========================================================= 31. SHADE CONFIGURATOR Product header + compact reflowing shade field layout. Hidden fields/sections use .qnc-hidden and occupy no space. ========================================================= */ .qnc-app .qnc-shade-config-page { padding-top: 18px; } .qnc-app .qnc-config-product-card { overflow: hidden; } .qnc-app .qnc-config-product-body { display: grid; grid-template-columns: minmax(180px, 240px) minmax(0, 1fr); gap: 24px; align-items: start; } .qnc-app .qnc-config-product-media { position: relative; display: flex; width: 100%; min-height: 180px; align-items: center; justify-content: center; overflow: hidden; background: var(--qnc-bg-subtle); border: 1px solid var(--qnc-border-soft); border-radius: var(--qnc-radius-md); } .qnc-app .qnc-config-product-image { display: block; width: 100%; height: 180px; object-fit: contain; } .qnc-app .qnc-config-product-no-image { display: flex; position: absolute; inset: 0; align-items: center; justify-content: center; padding: 18px; color: var(--qnc-text-muted); font-size: 11px; font-weight: 700; text-align: center; } .qnc-app .qnc-config-product-content { min-width: 0; } .qnc-app .qnc-config-product-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .qnc-app .qnc-config-product-name { display: block; font-size: 22px; } .qnc-app .qnc-config-product-description { max-width: 920px; margin-top: 7px; color: var(--qnc-text-muted); font-size: 12px; line-height: 1.55; } .qnc-app .qnc-config-product-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; margin-top: 18px; } .qnc-app .qnc-config-product-detail-row { display: grid; grid-template-columns: minmax(105px, auto) minmax(0, 1fr); align-items: center; gap: 10px; min-width: 0; } .qnc-app .qnc-config-product-detail-label { color: var(--qnc-text-muted); font-size: 11px; font-weight: 800; } .qnc-app .qnc-config-product-detail-value { min-width: 0; color: var(--qnc-text); font-size: 12px; font-weight: 700; } .qnc-app .qnc-config-product-price { font-weight: 900; } .qnc-app .qnc-config-product-small-input { width: 92px; max-width: 100%; } .qnc-app .qnc-config-product-label-input { width: min(100%, 360px); } .qnc-app .qnc-shade-config-panel-body { padding: 14px; } .qnc-app .qnc-shade-section { margin-bottom: 14px; } .qnc-app .qnc-shade-section:last-child { margin-bottom: 0; } .qnc-app .qnc-shade-section-body { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; padding: 12px; align-items: stretch; } .qnc-app .qnc-shade-field { display: flex; min-width: 0; flex-direction: column; padding: 10px; background: var(--qnc-bg-subtle); border: 1px solid var(--qnc-border-soft); border-radius: var(--qnc-radius-sm); } .qnc-app .qnc-shade-field .qnc-config-control { margin-top: auto; } .qnc-app .qnc-shade-field-label { display: block; margin-bottom: 6px; line-height: 1.3; } .qnc-app .qnc-shade-required { margin-left: 2px; color: var(--qnc-danger); font-weight: 900; } .qnc-app .qnc-shade-field .form-control, .qnc-app .qnc-shade-field .form-select, .qnc-app .qnc-shade-field .qnc-config-input { width: 100%; max-width: none; } .qnc-app .qnc-shade-checkbox-row { min-height: var(--qnc-control-height); align-items: center; } .qnc-app .qnc-shade-checkbox { position: static !important; float: none !important; margin: 0 !important; } /* The rule engine will use .qnc-hidden. Because hidden nodes are display:none, CSS grid immediately re-packs the remaining fields with no blank cells. */ .qnc-app .qnc-shade-field.qnc-hidden, .qnc-app .qnc-shade-section.qnc-hidden { display: none !important; } @media (max-width: 1300px) { .qnc-app .qnc-shade-section-body { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 1050px) { .qnc-app .qnc-shade-section-body { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 760px) { .qnc-app .qnc-shade-section-body { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 900px) { .qnc-app .qnc-config-product-body { grid-template-columns: 170px minmax(0, 1fr); gap: 18px; } .qnc-app .qnc-config-product-media, .qnc-app .qnc-config-product-image { min-height: 150px; height: 150px; } .qnc-app .qnc-config-product-details { grid-template-columns: 1fr; } } @media (max-width: 620px) { .qnc-app .qnc-config-product-body { grid-template-columns: 1fr; } .qnc-app .qnc-config-product-media { width: min(100%, 260px); } .qnc-app .qnc-config-product-detail-row { grid-template-columns: 100px minmax(0, 1fr); } } @media (max-width: 520px) { .qnc-app .qnc-shade-section-body { grid-template-columns: 1fr; } } /* ========================================================= 32. QNC CONFIGURATOR / SEARCH WORKSPACE + SHARED QUOTE SIDEBAR Search, Shade Config, and AV Config use the same balanced desktop workspace. Both columns stay the same height. The quote list uses the available middle space and only scrolls vertically when it truly needs to. ========================================================= */ /* Keep shade/AV field cards compact and consistent. */ .qnc-app .qnc-shade-section-body { grid-template-columns: repeat(auto-fill, minmax(205px, 235px)); justify-content: start; align-items: start; } .qnc-app .qnc-shade-field { width: 100%; min-height: 92px; } /* One shared desktop proportion for Product Search, Shade Config, and AV Config. The overall qnc-shell width does not change; more of the existing width is simply assigned to the quote column. */ .qnc-app .qnc-product-search-workspace, .qnc-app .qnc-shade-workspace, .qnc-app .qnc-av-workspace { grid-template-columns: minmax(0, 1fr) minmax(440px, 500px); height: clamp(620px, 72vh, 820px); align-items: stretch; } .qnc-app .qnc-product-search-workspace .qnc-workspace-main, .qnc-app .qnc-shade-workspace .qnc-workspace-main, .qnc-app .qnc-av-workspace .qnc-workspace-main { min-width: 0; min-height: 0; height: 100%; overflow: hidden; } /* Product Search: keep the left panel the same height as the quote. Results scroll inside the existing panel only when they exceed the workspace. */ .qnc-app .qnc-product-search-workspace .qnc-workspace-main > .qnc-panel { height: 100%; margin-bottom: 0; overflow-y: auto; overflow-x: hidden; } /* Shade Config: preserve the fixed-height configuration panel with its own options scroller and pinned action row. */ .qnc-app .qnc-shade-config-panel { display: flex; height: 100%; min-height: 0; flex-direction: column; margin-bottom: 0; overflow: hidden; } .qnc-app .qnc-shade-config-panel > .qnc-panel-header { flex: 0 0 auto; } .qnc-app .qnc-shade-config-panel-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-gutter: stable; } .qnc-app .qnc-shade-config-actions { display: flex; flex: 0 0 auto; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px 14px; background: var(--qnc-bg-subtle); border-top: 1px solid var(--qnc-border-soft); } .qnc-app .qnc-shade-config-actions .btn { min-width: 112px; } /* AV Config uses the same fixed-height behavior as Shade Config. UpdatePanel renders an extra wrapper, so make that wrapper participate in the flex layout. */ .qnc-app .qnc-av-config-panel { display: flex; height: 100%; min-height: 0; flex-direction: column; margin-bottom: 0; overflow: hidden; } .qnc-app .qnc-av-config-panel > .qnc-panel-header { flex: 0 0 auto; } .qnc-app .qnc-av-config-panel > div[id$="upAVConfigurator"] { display: flex; flex: 1 1 auto; min-height: 0; flex-direction: column; overflow: hidden; } .qnc-app .qnc-av-config-panel > div[id$="upAVConfigurator"] > .qnc-shade-config-panel-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-gutter: stable; } .qnc-app .qnc-av-config-panel > div[id$="upAVConfigurator"] > .qnc-shade-config-actions { flex: 0 0 auto; } /* Shared quote panel: always stretch to the same height as the left column. */ .qnc-app .qnc-shade-quote-side { position: static; top: auto; align-self: stretch; height: 100%; min-width: 0; min-height: 0; } .qnc-app .qnc-shade-quote-summary { display: flex; height: 100%; min-height: 0; max-height: none; flex-direction: column; margin-bottom: 0; overflow: hidden; } .qnc-app .qnc-shade-quote-header { display: flex; flex: 0 0 auto; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 18px; } /* The table is the flexible middle region. It fills the unused quote height so the totals/footer remain visually anchored at the bottom. */ .qnc-app .qnc-shade-quote-table { position: relative; display: flex; flex: 1 1 auto; min-height: 0; flex-direction: column; margin: 12px 14px 0; overflow: hidden; background: var(--qnc-bg-surface); border: 1px solid var(--qnc-border-soft); border-radius: var(--qnc-radius-sm); } .qnc-app .qnc-shade-quote-table-head, .qnc-app .qnc-shade-quote-item { display: grid; grid-template-columns: minmax(0, 1fr) 42px 94px 94px 26px; gap: 8px; align-items: start; } .qnc-app .qnc-shade-quote-table-head { flex: 0 0 auto; padding: 9px 10px; background: var(--qnc-bg-subtle); color: var(--qnc-text-muted); border-bottom: 1px solid var(--qnc-border-soft); font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; } .qnc-app .qnc-shade-quote-table-head > span:nth-child(n+2):not(:last-child) { text-align: right; } .qnc-app .qnc-shade-quote-items { flex: 1 1 auto; min-width: 0; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; } .qnc-app .qnc-shade-quote-item { width: 100%; min-width: 0; padding: 10px; background: var(--qnc-bg-surface); color: var(--qnc-text); border-bottom: 1px solid var(--qnc-border-soft); } .qnc-app .qnc-shade-quote-item:last-child { border-bottom: 0; } .qnc-app .qnc-shade-quote-item:hover { background: var(--qnc-bg-hover); } .qnc-app .qnc-shade-quote-label { min-width: 0; overflow: visible; color: var(--qnc-text); font-size: 11px; font-weight: 800; line-height: 1.35; overflow-wrap: anywhere; text-overflow: clip; white-space: normal; } .qnc-app .qnc-shade-quote-qty, .qnc-app .qnc-shade-quote-price, .qnc-app .qnc-shade-quote-total { min-width: 0; color: var(--qnc-text); font-size: 10px; font-weight: 700; text-align: right; line-height: 1.25; white-space: nowrap; } .qnc-app .qnc-shade-quote-remove { display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center; justify-self: end; padding: 0; background: transparent; color: var(--qnc-text-muted); border: 0; border-radius: var(--qnc-radius-sm); font-size: 18px; font-weight: 700; line-height: 1; cursor: pointer; } .qnc-app .qnc-shade-quote-remove:hover, .qnc-app .qnc-shade-quote-remove:focus { background: var(--qnc-danger-soft); color: var(--qnc-danger); outline: none; } /* Empty-state text occupies the same flexible table region without changing the height of the quote card. */ .qnc-app .qnc-shade-quote-empty { position: absolute; inset: 38px 0 0; display: flex; align-items: center; justify-content: center; padding: 34px 18px; color: var(--qnc-text-muted); font-size: 11px; line-height: 1.5; text-align: center; pointer-events: none; } .qnc-app .qnc-shade-quote-totals { flex: 0 0 auto; padding: 14px 18px 10px; } .qnc-app .qnc-shade-quote-footer { flex: 0 0 auto; padding: 12px 18px 18px; } .qnc-app .qnc-shade-place-order { width: 100%; min-height: 42px; } @media (max-width: 1180px) { .qnc-app .qnc-product-search-workspace, .qnc-app .qnc-shade-workspace, .qnc-app .qnc-av-workspace { grid-template-columns: minmax(0, 1fr) 420px; } .qnc-app .qnc-shade-section-body { grid-template-columns: repeat(auto-fill, minmax(190px, 220px)); } } @media (max-width: 900px) { .qnc-app .qnc-product-search-workspace, .qnc-app .qnc-shade-workspace, .qnc-app .qnc-av-workspace { grid-template-columns: 1fr; height: auto; align-items: start; } .qnc-app .qnc-product-search-workspace .qnc-workspace-main, .qnc-app .qnc-shade-workspace .qnc-workspace-main, .qnc-app .qnc-av-workspace .qnc-workspace-main, .qnc-app .qnc-product-search-workspace .qnc-workspace-main > .qnc-panel, .qnc-app .qnc-shade-config-panel, .qnc-app .qnc-av-config-panel, .qnc-app .qnc-shade-quote-side, .qnc-app .qnc-shade-quote-summary { height: auto; overflow: visible; } .qnc-app .qnc-shade-config-panel-body { overflow: visible; } .qnc-app .qnc-av-config-panel > div[id$="upAVConfigurator"] { display: block; overflow: visible; } .qnc-app .qnc-av-config-panel > div[id$="upAVConfigurator"] > .qnc-shade-config-panel-body { overflow: visible; } .qnc-app .qnc-shade-quote-table { flex: none; min-height: 280px; } .qnc-app .qnc-shade-quote-items { max-height: 340px; overflow-y: auto; overflow-x: hidden; } } @media (max-width: 520px) { .qnc-app .qnc-shade-section-body { grid-template-columns: 1fr; justify-content: stretch; } .qnc-app .qnc-shade-field { min-height: 0; } .qnc-app .qnc-shade-config-actions { align-items: stretch; flex-direction: column; } .qnc-app .qnc-shade-config-actions .btn { width: 100%; } .qnc-app .qnc-shade-quote-table-head, .qnc-app .qnc-shade-quote-item { grid-template-columns: minmax(0, 1fr) 34px 70px 76px 24px; gap: 5px; } } /* ========================================================= 33. SHADE CONFIGURATOR - DATABASE FABRIC PICKER ========================================================= */ .qnc-app .qnc-shade-field-fabric { grid-column: 1 / -1; width: 100%; min-height: 0; } .qnc-app .qnc-shade-field-fabric .qnc-config-control { margin-top: 0; } .qnc-app .qnc-fabric-picker { display: grid; gap: 12px; } .qnc-app .qnc-fabric-picker-family { width: min(100%, 420px); } .qnc-app .qnc-fabric-picker-message { min-height: 18px; color: var(--qnc-text-muted); font-size: 11px; line-height: 1.45; } .qnc-app .qnc-fabric-picker-message.is-loading { color: var(--qnc-info); } .qnc-app .qnc-fabric-picker-message.is-error { color: var(--qnc-danger); font-weight: 700; } .qnc-app .qnc-fabric-picker-message.is-selected { color: var(--qnc-text); font-weight: 700; } .qnc-app .qnc-fabric-swatch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; width: 100%; } .qnc-app .qnc-fabric-swatch { display: flex; min-width: 0; flex-direction: column; padding: 0; overflow: hidden; background: var(--qnc-bg-surface); color: var(--qnc-text); border: 1px solid var(--qnc-border); border-radius: var(--qnc-radius-sm); box-shadow: var(--qnc-shadow-xs); text-align: left; cursor: pointer; transition: border-color var(--qnc-transition), box-shadow var(--qnc-transition), transform var(--qnc-transition), background var(--qnc-transition); } .qnc-app .qnc-fabric-swatch:hover, .qnc-app .qnc-fabric-swatch:focus-visible { transform: translateY(-1px); border-color: var(--qnc-accent); box-shadow: var(--qnc-shadow-sm); } .qnc-app .qnc-fabric-swatch.is-selected { background: var(--qnc-accent-soft); border-color: var(--qnc-accent); box-shadow: 0 0 0 2px var(--qnc-accent-soft); } .qnc-app .qnc-fabric-swatch-image-wrap { position: relative; display: flex; width: 100%; aspect-ratio: 1 / 1; align-items: center; justify-content: center; overflow: hidden; background: var(--qnc-bg-muted); border-bottom: 1px solid var(--qnc-border-soft); } .qnc-app .qnc-fabric-swatch-image { display: block; width: 100%; height: 100%; object-fit: cover; } .qnc-app .qnc-fabric-swatch-placeholder { width: 100%; height: 100%; align-items: center; justify-content: center; padding: 10px; color: var(--qnc-text-muted); font-size: 10px; font-weight: 700; text-align: center; } .qnc-app .qnc-fabric-swatch-body { display: flex; min-width: 0; flex: 1 1 auto; flex-direction: column; gap: 3px; padding: 9px 10px 10px; } .qnc-app .qnc-fabric-swatch-name { overflow: hidden; color: var(--qnc-text); font-size: 11px; font-weight: 800; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; } .qnc-app .qnc-fabric-swatch-back, .qnc-app .qnc-fabric-swatch-part { overflow: hidden; color: var(--qnc-text-muted); font-size: 9px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; } .qnc-app .qnc-fabric-swatch-part { font-weight: 700; } .qnc-app .qnc-fabric-status-row { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; } .qnc-app .qnc-fabric-status { display: inline-flex; align-items: center; padding: 2px 5px; border: 1px solid var(--qnc-border); border-radius: var(--qnc-radius-pill); color: var(--qnc-text-muted); font-size: 8px; font-weight: 800; line-height: 1.2; white-space: nowrap; } .qnc-app .qnc-fabric-status.is-in { background: var(--qnc-success-soft); color: var(--qnc-success); border-color: var(--qnc-success-border); } .qnc-app .qnc-fabric-status.is-out, .qnc-app .qnc-fabric-status.is-discontinued { background: var(--qnc-danger-soft); color: var(--qnc-danger); border-color: var(--qnc-danger-border); } .qnc-app .qnc-fabric-status.is-delayed { background: var(--qnc-warning-soft); color: var(--qnc-warning); border-color: var(--qnc-warning-border); } @media (max-width: 1180px) { .qnc-app .qnc-fabric-swatch-grid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); } } @media (max-width: 620px) { .qnc-app .qnc-fabric-picker-family { width: 100%; } .qnc-app .qnc-fabric-swatch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ========================================================= 34. SHADE CONFIGURATOR - UPDATEPANEL FLEX / SCROLL FIX UpdatePanel renders an extra div around the configurator body. Make that generated wrapper participate in the fixed-height flex layout so the options area keeps its independent scrollbar. ========================================================= */ .qnc-app .qnc-shade-config-panel > div[id$="upShadeConfigurator"] { display: flex; flex: 1 1 auto; min-height: 0; flex-direction: column; overflow: hidden; } /* Keep the options region as the only scrolling area. */ .qnc-app .qnc-shade-config-panel > div[id$="upShadeConfigurator"] > .qnc-shade-config-panel-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-gutter: stable; } /* Keep Reset Options / Add Item pinned below the scrolling options. */ .qnc-app .qnc-shade-config-panel > div[id$="upShadeConfigurator"] > .qnc-shade-config-actions { flex: 0 0 auto; } @media (max-width: 900px) { .qnc-app .qnc-shade-config-panel > div[id$="upShadeConfigurator"] { display: block; overflow: visible; } .qnc-app .qnc-shade-config-panel > div[id$="upShadeConfigurator"] > .qnc-shade-config-panel-body { overflow: visible; } }