/* Semantic shop colors cover the responsive shell and shared task controls. */
body.responsive-workspace[data-shop-theme] :is(.product-visual,.product-detail-gallery) { background: linear-gradient(140deg, var(--surface-soft), var(--surface)); }
body.responsive-workspace[data-shop-theme] :is(.product-thumbnail,.product-detail-gallery img,.product-image-preview-grid img) { background: var(--surface); }
body[data-shop-theme] { background: var(--bg); color: var(--ink); }
body.responsive-workspace[data-shop-theme] :is(.app-header,.workflow-navigation,.dialog-card,.card,.info-card,.reservation-queue-row,.input-with-icon,.catalog-multiselect-trigger,.workspace-payment-choice,.user-chip,.admin-workspace-tab,.project-delete-dialog) { background: var(--surface); color: var(--ink); border-color: var(--line); }
body.responsive-workspace[data-shop-theme] :is(.field input,.field select,.field textarea,.secondary-button,option) { background: var(--surface); color: var(--ink); border-color: var(--line); }
body.responsive-workspace[data-shop-theme] :is(.workflow-tasks a,.workflow-destinations > a,.workflow-more-button,.workflow-more nav a,.eyebrow,.workflow-shop-logo > .workflow-icon,.user-chip,.workspace-payment-choice) { color: var(--muted); }
body.responsive-workspace[data-shop-theme] :is(.nav-link:hover,.nav-link:focus-visible,.admin-workspace-tab:hover,.admin-workspace-tab:focus-visible,.reservation-queue-row:hover,.reservation-queue-row:focus-within,.stocklist-table button:hover,.product-section-tab:hover,.product-section-tab[aria-selected="true"],.workflow-tasks a:hover,.workflow-tasks [aria-current="step"],.workflow-destinations > a.active,.workflow-destinations > a:hover,.workflow-more nav a.active,.workflow-more-button.active,.admin-workspace-tab[aria-selected="true"],.reservation-queue-row.selected,.workspace-payment-choice:has(input:checked),.project-state) { background: var(--selected); color: var(--primary); border-color: var(--primary); }
body.responsive-workspace[data-shop-theme] :is(.primary-button,.workspace-basket-dock,.user-chip.active) { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
body.responsive-workspace[data-shop-theme] :is(.add-button,.active-user-row.active) { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
body.responsive-workspace[data-shop-theme] .quantity-control button { background: var(--surface); color: var(--primary); border-color: var(--line); }
body.responsive-workspace[data-shop-theme] .primary-button:hover { background: var(--primary-dark); color: var(--on-primary); }
body.responsive-workspace[data-shop-theme] .user-chip:hover { background: var(--primary-dark); color: var(--on-primary); border-color: var(--primary-dark); }
body.responsive-workspace[data-shop-theme] .nav-link.sync-working { background: var(--accent); color: var(--accent-ink); }
body.responsive-workspace[data-shop-theme] .nav-link.sync-conflicts { background: var(--danger); color: var(--on-primary); }
body.responsive-workspace[data-shop-theme] :is(.danger-button,.project-incomplete,.notice,.form-message) { border-color: var(--line); }
body.responsive-workspace[data-shop-theme] :is(.danger-button,.form-message:not(:empty),.sync-status-warning,.status-pill.has-pending,.subscription-banner.expired) { color: var(--danger); background: var(--danger-bg); }
body.responsive-workspace[data-shop-theme] :is(.project-incomplete,.notice,.subscription-banner) { color: var(--warning-ink); background: var(--warning); }
body.responsive-workspace[data-shop-theme] :is(.reservation-contact-button,.purchase-order-status-pending,.sync-conflict-comparison td.changed) { color: var(--warning-ink); background: var(--warning); border-color: var(--line); }
body.responsive-workspace[data-shop-theme] :is(.notice.error,.form-message.error,.subscription-banner.subscription-restricted) { color: var(--danger); background: var(--danger-bg); }
body.responsive-workspace[data-shop-theme] :is(.workspace-success-icon,.form-message.success) { color: var(--accent-ink); background: var(--accent); }
body.responsive-workspace[data-shop-theme] :is(th,thead,.quantity-control,.workspace-checkout-summary,.product-info-thumbnail,.stock-request-drafts,.pricing-preview,.accounting-summary > *,.info-card,.project-periods) { background: var(--surface-soft); color: var(--ink); border-color: var(--line); }
body.responsive-workspace[data-shop-theme] :is(td,.purchase-order-card,.basket-item,.project-row,.project-editor,#project-member-choices) { border-color: var(--line); }
body.responsive-workspace[data-shop-theme] tbody tr:nth-child(even), body.responsive-workspace[data-shop-theme] tbody tr:nth-child(odd) { background: var(--surface); color: var(--ink); }
body.responsive-workspace[data-shop-theme] .stocklist-table .stocklist-row-selected { background: var(--selected); }
body.responsive-workspace[data-shop-theme] :is(button,a,input,select,textarea,summary):focus-visible { outline-color: var(--focus); }
body.responsive-workspace[data-shop-theme] ::placeholder { color: var(--muted); opacity: 1; }
body.responsive-workspace[data-theme-mode="dark"] :is(.catalog-multiselect-menu,.attribute-multiselect-menu,.account-menu-popup,.admin-list-filters,.reservation-picking-row,.stock-request-draft-row,.product-attribute-table,.opening-hours-day,.payment-qr,.shop-history-row,.cash-report-card) { background: var(--surface); color: var(--ink); border-color: var(--line); }
.appearance-settings { grid-column: 1 / -1; min-width: 0; }
.appearance-settings [hidden] { display: none !important; }
.appearance-presets { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,150px),1fr)); gap: 10px; border: 0; padding: 0; margin: 0; }
.appearance-presets legend { margin-bottom: 12px; color: var(--ink); }
.appearance-preset { display: flex; align-items: start; gap: 10px; min-height: 80px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.appearance-preset:has(input:checked) { outline: 2px solid var(--primary); outline-offset: -2px; background: var(--selected,var(--surface-soft)); }
.appearance-preset strong,.appearance-preset small { display: block; }
.appearance-preset small { color: var(--muted); }
.appearance-swatches { display: flex; gap: 4px; margin-top: 8px; }
.appearance-swatches i { display: block; width: 18px; height: 18px; border: 1px solid #8793a2; border-radius: 50%; }
.appearance-color-fields { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,240px),1fr)); gap: 14px; margin-top: 16px; }
.appearance-color > label { display: block; margin-bottom: 5px; color: var(--ink); }
.appearance-color > div { display: flex; gap: 8px; }
.appearance-color input[type="color"] { width: 48px; min-height: 44px; flex: 0 0 48px; padding: 3px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.appearance-color input[data-theme-hex] { width: 100%; min-width: 0; padding: 8px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; }
.appearance-preview { padding: 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); margin-top: 16px; }
.appearance-preview-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.appearance-preview-actions > span { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 14px; border-radius: 8px; }
.appearance-demo-primary { background: var(--primary); color: var(--on-primary); }
.appearance-demo-selected { background: var(--selected); color: var(--primary); }
.appearance-demo-muted { color: var(--muted); }
.appearance-demo-success,.appearance-demo-warning,.appearance-demo-danger { padding: 8px 12px; margin-top: 8px; border-radius: 8px; }
.appearance-demo-success { background: var(--accent); color: var(--accent-ink); }
.appearance-demo-warning { background: var(--warning); color: var(--warning-ink); }
.appearance-demo-danger { background: var(--danger-bg); color: var(--danger); }