/* Order matrix — custom styles for create/view product matrix UI. Uses Filament CSS variables; dark mode via `.dark` on ``. */ .order-matrix { display: flex; flex-direction: column; gap: 1.25rem; } /* ── Search field ─────────────────────────────────────────────── */ .order-matrix-search { position: sticky; top: 4rem; /* below Filament topbar (min-h-16) */ z-index: 20; display: flex; flex-direction: column; gap: 0.5rem; margin-inline: -1.5rem; margin-block-start: -0.75rem; padding-inline: 1.5rem; padding-block: 0.75rem; background: #fff; box-shadow: 0 1px 0 var(--gray-200); } .dark .order-matrix-search { background: var(--gray-900); box-shadow: 0 1px 0 color-mix(in srgb, #fff 10%, transparent); } .order-matrix-field-label { font-size: 1rem; font-weight: 500; line-height: 1.25rem; color: var(--gray-950); } .dark .order-matrix-field-label { color: #fff; } .order-matrix-field-hint { margin: 0; font-size: 0.9375rem; line-height: 1.25rem; color: var(--gray-500); } .dark .order-matrix-field-hint { color: var(--gray-400); } .order-matrix-search-input { position: relative; width: 100%; } .order-matrix-search-icon { position: absolute; inset-block-start: 50%; inset-inline-start: 0.75rem; width: 1rem; height: 1rem; transform: translateY(-50%); pointer-events: none; color: var(--gray-400); } .dark .order-matrix-search-icon { color: var(--gray-500); } .order-matrix-search-field { width: 100%; padding-block: 0.5rem; padding-inline-start: 2.25rem; padding-inline-end: 0.75rem; font-size: 0.9375rem; } /* ── Search results dropdown ──────────────────────────────────── */ .order-matrix-search-results-label { margin: 0.25rem 0 0; font-size: 0.875rem; font-weight: 500; color: var(--gray-500); } .dark .order-matrix-search-results-label { color: var(--gray-400); } .order-matrix-search-results { margin: 0; padding: 0; list-style: none; overflow: hidden; border-radius: 0.5rem; background: #fff; box-shadow: 0 0 0 1px color-mix(in srgb, var(--gray-950) 10%, transparent), 0 1px 2px rgb(0 0 0 / 0.05); } .dark .order-matrix-search-results { background: color-mix(in srgb, #fff 5%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, #fff 10%, transparent); } .order-matrix-search-result { border-block-start: 1px solid var(--gray-100); } .order-matrix-search-result:first-child { border-block-start: none; } .dark .order-matrix-search-result { border-block-start-color: color-mix(in srgb, #fff 5%, transparent); } .order-matrix-search-result-btn { display: flex; width: 100%; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 0.625rem 0.75rem; border: none; background: transparent; text-align: start; cursor: pointer; font-size: 0.875rem; transition: background-color 75ms; } .order-matrix-search-result-btn:hover, .order-matrix-search-result-btn:focus-visible { background: var(--gray-50); outline: none; } .dark .order-matrix-search-result-btn:hover, .dark .order-matrix-search-result-btn:focus-visible { background: color-mix(in srgb, #fff 5%, transparent); } .order-matrix-search-result-main { min-width: 0; flex: 1; } .order-matrix-search-result-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; color: var(--gray-950); } .dark .order-matrix-search-result-name { color: #fff; } .order-matrix-search-result-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; margin-block-start: 0.125rem; font-size: 0.875rem; color: var(--gray-500); } .dark .order-matrix-search-result-meta { color: var(--gray-400); } .order-matrix-search-result-code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.8125rem; } .order-matrix-search-result-action { flex-shrink: 0; align-self: center; border-radius: 0.375rem; padding: 0.25rem 0.5rem; font-size: 0.875rem; font-weight: 500; color: var(--primary-700); background: var(--primary-50); } .dark .order-matrix-search-result-action { color: var(--primary-400); background: color-mix(in srgb, var(--primary-400) 10%, transparent); } .order-matrix-search-empty { margin: 0; font-size: 0.9375rem; color: var(--gray-500); } .dark .order-matrix-search-empty { color: var(--gray-400); } /* ── Matrix table container ───────────────────────────────────── */ .order-matrix-table { display: flex; flex-direction: column; gap: 1rem; } .order-matrix-table--editable { margin-block-start: 0.25rem; } .order-matrix-section { overflow: hidden; border-radius: 0.75rem; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / 0.05); box-shadow: 0 0 0 1px color-mix(in srgb, var(--gray-950) 5%, transparent); } .dark .order-matrix-section { background: var(--gray-900); box-shadow: 0 0 0 1px color-mix(in srgb, #fff 10%, transparent); } .order-matrix-section-header { padding: 0.625rem 1rem; border-block-end: 1px solid var(--gray-200); background: var(--gray-50); } .order-matrix-section-toggle { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; width: 100%; margin: 0; padding: 0.625rem 1rem; border: 0; border-block-end: 1px solid var(--gray-200); background: var(--gray-50); text-align: start; cursor: pointer; } .dark .order-matrix-section-toggle { border-block-end-color: color-mix(in srgb, #fff 10%, transparent); background: color-mix(in srgb, #fff 5%, transparent); } .order-matrix-section-toggle:hover, .order-matrix-section-toggle:focus-visible { background: color-mix(in srgb, var(--gray-100) 80%, transparent); } .dark .order-matrix-section-toggle:hover, .dark .order-matrix-section-toggle:focus-visible { background: color-mix(in srgb, #fff 8%, transparent); } .order-matrix-section-chevron { flex-shrink: 0; width: 1.25rem; height: 1.25rem; max-width: 1.25rem; max-height: 1.25rem; display: block; color: var(--gray-500); transition: transform 0.2s ease; } .order-matrix-section-chevron--open { transform: rotate(180deg); } .dark .order-matrix-section-chevron { color: var(--gray-400); } .dark .order-matrix-section-header { border-block-end-color: color-mix(in srgb, #fff 10%, transparent); background: color-mix(in srgb, #fff 5%, transparent); } .order-matrix-section-title { margin: 0; flex: 1; min-width: 0; font-size: 1rem; font-weight: 600; color: var(--gray-950); } .dark .order-matrix-section-title { color: #fff; } .order-matrix-scroll { overflow-x: auto; } .order-matrix-table-el { /* Pack variation columns next to the family name instead of stretching qty cells to the far right of a full-width table (especially on view). */ width: auto; max-width: 100%; border-collapse: collapse; font-size: 0.9375rem; } .order-matrix-col-family { width: auto; } .order-matrix-col-variation { width: 6.5rem; } .order-matrix-table--readonly .order-matrix-table-el { width: 100%; } .order-matrix-table--readonly .order-matrix-col-variation { width: 7.5rem; } .order-matrix-table--readonly .order-matrix-th--variation, .order-matrix-table--readonly .order-matrix-td--option { width: 7.5rem; min-width: 7.5rem; max-width: 7.5rem; padding-inline: 0.75rem; text-align: end; } .order-matrix-table-el thead tr { border-block-end: 1px solid var(--gray-200); background: color-mix(in srgb, var(--gray-50) 80%, transparent); } .dark .order-matrix-table-el thead tr { border-block-end-color: color-mix(in srgb, #fff 10%, transparent); background: color-mix(in srgb, #fff 2%, transparent); } .order-matrix-th { padding: 0.625rem 1rem; text-align: start; font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.025em; color: var(--gray-500); } .order-matrix-th:first-child, .order-matrix-td:first-child { position: sticky; inset-inline-start: 0; z-index: 1; width: auto; background: inherit; } .order-matrix-table-el thead .order-matrix-th:first-child { background: color-mix(in srgb, var(--gray-50) 80%, transparent); } .dark .order-matrix-table-el thead .order-matrix-th:first-child { background: color-mix(in srgb, #fff 2%, transparent); } .order-matrix-table-el tbody .order-matrix-td:first-child { background: #fff; } .dark .order-matrix-table-el tbody .order-matrix-td:first-child { background: var(--gray-900); } .order-matrix-table-el tbody tr:hover .order-matrix-td:first-child { background: color-mix(in srgb, var(--gray-50) 50%, transparent); } .dark .order-matrix-table-el tbody tr:hover .order-matrix-td:first-child { background: color-mix(in srgb, #fff 2%, transparent); } .dark .order-matrix-th { color: var(--gray-400); } .order-matrix-th--actions { width: 3rem; padding-inline: 0.75rem; } /* Packed variation columns: fixed width so inputs sit left (first slot next to the family name). Option names live under each input — headers stay blank. */ .order-matrix-th--variation, .order-matrix-td--option { width: 6.5rem; min-width: 6.5rem; max-width: 6.5rem; padding-inline: 0.5rem; box-sizing: border-box; vertical-align: top; } .order-matrix-th--variation { padding-block: 0.375rem; } /* Inner wrapper enforces width — table cells ignore max-width under table-layout:auto. */ .order-matrix-qty-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; width: 5.5rem; max-width: 100%; } /* View: option on a fixed first line, quantity below — numbers share one baseline. */ .order-matrix-qty-cell--readonly { flex-direction: column; flex-wrap: nowrap; align-items: flex-end; justify-content: flex-start; gap: 0.125rem; width: 100%; min-width: 0; } .order-matrix-td--readonly { vertical-align: top; } .order-matrix-qty-cell--readonly .order-matrix-product-code { display: block; max-width: 100%; min-height: 1.05rem; line-height: 1.05rem; text-align: end; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .order-matrix-qty-cell--readonly .order-matrix-qty-value { font-size: 1rem; font-weight: 600; line-height: 1.25; font-variant-numeric: tabular-nums; min-width: 4.5ch; text-align: end; flex-shrink: 0; } .order-matrix-table-el tbody tr { border-block-start: 1px solid var(--gray-100); background: #fff; transition: background-color 75ms; } .order-matrix-table-el tbody tr:hover { background: color-mix(in srgb, var(--gray-50) 50%, transparent); } .dark .order-matrix-table-el tbody tr { border-block-start-color: color-mix(in srgb, #fff 5%, transparent); background: var(--gray-900); } .dark .order-matrix-table-el tbody tr:hover { background: color-mix(in srgb, #fff 2%, transparent); } .order-matrix-td { padding: 0.75rem 1rem; vertical-align: top; } .order-matrix-td--actions { text-align: end; vertical-align: middle; } .order-matrix-family-name { font-weight: 500; color: var(--gray-950); } .dark .order-matrix-family-name { color: #fff; } .order-matrix-family-code { margin-block-start: 0.125rem; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.875rem; color: var(--gray-500); } .dark .order-matrix-family-code { color: var(--gray-400); } .order-matrix-qty-value { font-variant-numeric: tabular-nums; color: var(--gray-950); } .dark .order-matrix-qty-value { color: #fff; } .order-matrix-multi-qty { display: flex; flex-direction: column; gap: 0.5rem; } .order-matrix-multi-qty-item-name { margin-block-end: 0.25rem; font-size: 0.875rem; color: var(--gray-500); } .dark .order-matrix-multi-qty-item-name { color: var(--gray-400); } /* ── Quantity cell (input + read-only) ────────────────────────── */ .order-matrix-product-code { display: block; max-width: 6.5rem; font-size: 0.6875rem; line-height: 1.2; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; color: var(--gray-500); word-break: break-all; } .dark .order-matrix-product-code { color: var(--gray-400); } /* ── Quantity input ───────────────────────────────────────────── */ .order-matrix-qty-input { display: block; width: 100%; max-width: 6.5rem; border: none; border-radius: 0.5rem; padding: 0.375rem 0.625rem; font-size: 0.9375rem; min-height: 2.75rem; font-variant-numeric: tabular-nums; color: var(--gray-950); background: #fff; box-shadow: 0 0 0 1px color-mix(in srgb, var(--gray-950) 10%, transparent); transition: box-shadow 75ms; } .order-matrix-qty-input::placeholder { color: var(--gray-400); } .order-matrix-qty-input:focus { outline: none; box-shadow: 0 0 0 2px var(--primary-600) inset, 0 0 0 1px color-mix(in srgb, var(--gray-950) 10%, transparent); } .dark .order-matrix-qty-input { color: #fff; background: color-mix(in srgb, #fff 5%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, #fff 20%, transparent); } .dark .order-matrix-qty-input::placeholder { color: var(--gray-500); } .dark .order-matrix-qty-input:focus { box-shadow: 0 0 0 2px var(--primary-500) inset, 0 0 0 1px color-mix(in srgb, #fff 20%, transparent); } /* ── Empty state ──────────────────────────────────────────────── */ .order-matrix-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; padding: 2.5rem 1.5rem; text-align: center; border-radius: 0.75rem; border: 1px dashed var(--gray-300); background: var(--gray-50); } .dark .order-matrix-empty { border-color: color-mix(in srgb, #fff 15%, transparent); background: color-mix(in srgb, #fff 2%, transparent); } .order-matrix-empty-icon { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 9999px; background: var(--gray-100); color: var(--gray-500); } .dark .order-matrix-empty-icon { background: color-mix(in srgb, var(--gray-500) 20%, transparent); color: var(--gray-400); } .order-matrix-empty-icon svg { width: 1.25rem; height: 1.25rem; } .order-matrix-empty-text { margin: 0; max-width: 24rem; font-size: 0.9375rem; line-height: 1.375rem; color: var(--gray-500); } .dark .order-matrix-empty-text { color: var(--gray-400); } .order-matrix-order-total { padding: 0.75rem 1rem; border-radius: 0.5rem; font-size: 0.9375rem; background: var(--gray-50); box-shadow: 0 0 0 1px color-mix(in srgb, var(--gray-600) 10%, transparent) inset; } .dark .order-matrix-order-total { background: color-mix(in srgb, var(--gray-400) 10%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--gray-400) 20%, transparent) inset; } /* ── Mobile: card layout per product family ───────────────────── */ @media (max-width: 767px) { .order-matrix-scroll { overflow-x: visible; -webkit-overflow-scrolling: touch; } .order-matrix-table-el { min-width: 0; } .order-matrix-table-el thead { display: none; } .order-matrix-table-el tbody { display: flex; flex-direction: column; gap: 0.75rem; } .order-matrix-table-el tbody tr { display: block; padding: 0.75rem; border: 1px solid var(--gray-200); border-radius: 0.625rem; background: #fff; } .dark .order-matrix-table-el tbody tr { border-color: color-mix(in srgb, #fff 10%, transparent); background: var(--gray-900); } .order-matrix-table-el tbody tr:hover { background: #fff; } .dark .order-matrix-table-el tbody tr:hover { background: var(--gray-900); } .order-matrix-th:first-child, .order-matrix-td:first-child { position: static; z-index: auto; } .order-matrix-td { display: block; padding: 0; } .order-matrix-td:first-child { padding-block-end: 0.625rem; margin-block-end: 0.625rem; border-block-end: 1px solid var(--gray-100); background: transparent !important; } .dark .order-matrix-td:first-child { border-block-end-color: color-mix(in srgb, #fff 8%, transparent); } .order-matrix-td:not(:first-child):not(:empty) { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding-block: 0.4375rem; } .order-matrix-td:not(:first-child):not(:empty)::before { content: attr(data-label); flex: 1; min-width: 0; font-size: 0.875rem; font-weight: 500; color: var(--gray-600); } .dark .order-matrix-td:not(:first-child):not(:empty)::before { color: var(--gray-400); } .order-matrix-td:empty { display: none; } .order-matrix-td:has(.order-matrix-multi-qty) { display: block; padding-block-start: 0.25rem; } .order-matrix-td:has(.order-matrix-multi-qty)::before { display: block; margin-block-end: 0.5rem; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.025em; text-transform: uppercase; color: var(--gray-500); } .order-matrix-qty-cell { flex-shrink: 0; align-items: flex-end; } .order-matrix-qty-cell--readonly { flex-direction: column; align-items: flex-end; width: auto; } /* Option is shown via data-label ::before on mobile — avoid duplicating it. */ .order-matrix-td--readonly .order-matrix-product-code { display: none; } .order-matrix-qty-input { width: 5.5rem; min-width: 5.5rem; max-width: none; min-height: 2.75rem; text-align: center; } .order-matrix-product-code { max-width: none; text-align: end; } .order-matrix-multi-qty { gap: 0.75rem; } .order-matrix-multi-qty > div { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; } .order-matrix-multi-qty-item-name { flex: 1; min-width: 0; margin-block-end: 0; font-size: 0.875rem; } .order-matrix-section-toggle, .order-matrix-section-header { padding-inline: 0.75rem; } }