/* ShopAPP components. Values come from Vormgeving; structural layout stays in templates. */
:root {
 --shopapp-status-danger: var(--shopapp-danger, #b91c1c);
 --shopapp-status-success: #166534;
 --shopapp-status-warning: #92400e;
 --shopapp-status-info: var(--shopapp-primary, #075985);
 --shopapp-status-danger-surface: color-mix(in srgb,var(--shopapp-status-danger) 9%,var(--shopapp-surface));
 --shopapp-status-success-surface: color-mix(in srgb,var(--shopapp-status-success) 9%,var(--shopapp-surface));
 --shopapp-status-warning-surface: color-mix(in srgb,var(--shopapp-status-warning) 9%,var(--shopapp-surface));
 --shopapp-status-info-surface: color-mix(in srgb,var(--shopapp-status-info) 9%,var(--shopapp-surface));
 --shopapp-status-danger-border: color-mix(in srgb,var(--shopapp-status-danger) 35%,var(--shopapp-border));
 --shopapp-status-success-border: color-mix(in srgb,var(--shopapp-status-success) 35%,var(--shopapp-border));
 --shopapp-status-warning-border: color-mix(in srgb,var(--shopapp-status-warning) 35%,var(--shopapp-border));
 --shopapp-status-info-border: color-mix(in srgb,var(--shopapp-status-info) 35%,var(--shopapp-border));
}
.shopapp-control:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=submit]):not([type=button]) {
 background: var(--shopapp-ui-inputs-bg,var(--shopapp-surface)) !important;
 color: var(--shopapp-ui-inputs-text,var(--shopapp-text)) !important;
 border-color: var(--shopapp-ui-inputs-border,var(--shopapp-border)) !important;
 border-width: var(--shopapp-ui-inputs-border-width,1px) !important;
 border-style: solid;
 border-radius: var(--shopapp-ui-inputs-radius,.4rem) !important;
 padding: var(--shopapp-ui-inputs-padding,.65rem) !important;
 box-shadow: var(--shopapp-ui-inputs-shadow,none) !important;
 box-sizing: border-box; max-width: 100%; min-width: 0;
}
.shopapp-control:focus-visible { outline: 2px solid var(--shopapp-primary); outline-offset: 2px; }
.shopapp-control:disabled { cursor: not-allowed; }
.shopapp-control[type=checkbox], .shopapp-control[type=radio] { accent-color: var(--shopapp-ui-switches-bg,var(--shopapp-button)); }
.shopapp-control[role=switch]:checked { background-color: var(--shopapp-ui-switches-bg,var(--shopapp-button)) !important; border-color: var(--shopapp-ui-switches-border,var(--shopapp-button)) !important; }
.shopapp-control[role=switch]:checked::before { background-color: var(--shopapp-ui-switches-text,var(--shopapp-button-text)) !important; }
.shopapp-control[role=switch] { box-shadow: var(--shopapp-ui-switches-shadow,none); }
.shopapp-data-table { width:100%; border-collapse:collapse; }
.shopapp-data-table .shopapp-product-actions { width:1%; white-space:nowrap; }
.shopapp-product-actions-form { display:flex; flex-wrap:nowrap; width:max-content; }
.shopapp-product-actions-form > button { flex:none; }
.shopapp-data-table thead th, .shopapp-table-heading {
 background: var(--shopapp-ui-table-headers-bg,var(--shopapp-button)) !important;
 color: var(--shopapp-ui-table-headers-text,var(--shopapp-button-text)) !important;
 border-color: var(--shopapp-ui-table-headers-border,var(--shopapp-border)) !important;
 padding: var(--shopapp-ui-table-headers-padding,.65rem) !important;
}
.shopapp-data-table td, .shopapp-data-table tbody th {
 border-color: var(--shopapp-ui-table-cells-border,var(--shopapp-border));
 padding: var(--shopapp-ui-table-cells-padding,.65rem);
}
.shopapp-data-table tbody { background:var(--shopapp-ui-table-cells-bg,var(--shopapp-surface));color:var(--shopapp-ui-table-cells-text,var(--shopapp-text)); }
.shopapp-dialog, .supplier-buyers-dialog {
 background:var(--shopapp-ui-overlays-bg,var(--shopapp-surface)) !important;
 color:var(--shopapp-ui-overlays-text,var(--shopapp-text)) !important;
 border-color:var(--shopapp-ui-overlays-border,var(--shopapp-border)) !important;
 border-radius:var(--shopapp-ui-overlays-radius,1rem) !important;
 box-shadow:var(--shopapp-ui-overlays-shadow,var(--shopapp-shadow)) !important;
}
.supplier-card, .supplier-toolbar-card {
 background:var(--shopapp-ui-panels-bg,var(--shopapp-surface)) !important;
 color:var(--shopapp-ui-panels-text,var(--shopapp-text)) !important;
 border-color:var(--shopapp-ui-panels-border,var(--shopapp-border)) !important;
 border-width:var(--shopapp-ui-panels-border-width,1px) !important;
 border-radius:var(--shopapp-ui-panels-radius,.85rem) !important;
 box-shadow:var(--shopapp-ui-panels-shadow,var(--shopapp-shadow)) !important;
 /* Panel padding belongs to the content, never between the joined cells. */
}
.supplier-card-header, .shopapp-card-heading {
 background:var(--shopapp-ui-card-headers-bg,var(--shopapp-button)) !important;
 color:var(--shopapp-ui-card-headers-text,var(--shopapp-button-text)) !important;
 padding:var(--shopapp-ui-card-headers-padding,.65rem 1rem) !important;
}
.supplier-card-header h1, .supplier-card-header h2, .shopapp-card-heading h1, .shopapp-card-heading h2 { color:inherit !important; }
.location-suppliers .supplier-card-label {
 background:var(--shopapp-ui-table-headers-bg,var(--shopapp-button)) !important;
 color:var(--shopapp-ui-table-headers-text,var(--shopapp-button-text)) !important;
}
.supplier-card-field, .supplier-card-primary, .supplier-card-secondary {
 background:var(--shopapp-ui-table-cells-bg,var(--shopapp-surface)) !important;
 color:var(--shopapp-ui-table-cells-text,var(--shopapp-text)) !important;
 border-color:var(--shopapp-ui-table-cells-border,var(--shopapp-border)) !important;
}
.supplier-toolbar-cell, .supplier-toolbar-content, .supplier-toolbar-card .supplier-day-presets {
 background:var(--shopapp-ui-toolbars-bg,var(--shopapp-surface)) !important;
 color:var(--shopapp-ui-toolbars-text,var(--shopapp-text)) !important;
 border-color:var(--shopapp-ui-toolbars-border,var(--shopapp-border)) !important;
 padding:var(--shopapp-ui-toolbars-padding,.75rem 1rem) !important;
}
.shopapp-status-badge { border-radius:var(--shopapp-ui-badges-radius,.4rem);border-color:var(--shopapp-ui-badges-border,var(--shopapp-border));box-shadow:var(--shopapp-ui-badges-shadow,none); }
.shopapp-theme-component-samples { display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); }
.shopapp-theme-component-samples > article { min-width:0; }
@media print {
 .shopapp-data-table { border-collapse:collapse; }
 .shopapp-data-table th, .shopapp-data-table td { background:white !important;color:black !important;box-shadow:none !important; }
}

/* Former static inline declarations; conditional attributes retain runtime states. */
[data-shopapp-appearance="appearance-8836c5f056"] { background:linear-gradient(180deg, rgba(255,255,255,0.26), rgba(19,35,27,0.18)); }
[data-shopapp-appearance="appearance-65394e38ee"] { background: var(--shopapp-nav-button-active); color: var(--shopapp-nav-button-active-text); border-color: transparent; }
[data-shopapp-appearance="appearance-099f5e64de"] { background: var(--shopapp-nav-button-active); color: var(--shopapp-nav-button-active-text); border-color: transparent; box-shadow: 0 10px 22px rgba(10,20,16,0.16); }
[data-shopapp-appearance="appearance-4c17af49e7"] { background:linear-gradient(135deg, rgba(255,255,255,0.32), rgba(19,35,27,0.20)); }
[data-shopapp-appearance="appearance-d418c605bf"] { background:var(--login-button);color:var(--login-button-text); }
[data-shopapp-appearance="appearance-ac666e9fd3"] { width:25px;height:17px;object-fit:contain; }
[data-shopapp-appearance="appearance-bc3cdeab80"] { width:3rem;height:3rem;min-height:3rem;padding:0 !important; }
[data-shopapp-appearance="appearance-a5f9e27318"] { width:1rem;height:1rem; }
[data-shopapp-appearance="appearance-6102c3213a"] { display:flex;height:2.5rem;width:2.5rem;align-items:center;justify-content:center;border-radius:9999px;background:var(--shopapp-primary);color:white;box-shadow:0 14px 30px rgba(10,20,16,.28);border:4px solid rgba(255,255,255,.88) }

.login-shell, .login-panel { border-radius:var(--shopapp-ui-panels-radius,1rem); }
:root { --login-font-body:var(--shopapp-font-body,"Silka App",sans-serif); --login-font-heading:var(--shopapp-font-heading,"Brandon Text",sans-serif); }

/* Shared roles for list headers, filters, detail forms and status indicators. */
:root { --shopapp-backdrop:#07120d; }
.shopapp-card-heading :is(h1,h2,h3,p), .shopapp-table-heading :is(span,p) { color:inherit !important; }
.shopapp-card-heading { border-color:var(--shopapp-ui-card-headers-border,var(--shopapp-border)) !important; border-width:var(--shopapp-ui-card-headers-border-width,0); box-shadow:var(--shopapp-ui-card-headers-shadow,none); }
.shopapp-card-heading:not(.shopapp-panel) { border-radius:0 !important; }
.shopapp-data-table thead th, .shopapp-table-heading { border-style:solid; border-width:var(--shopapp-ui-table-headers-border-width,1px); box-shadow:var(--shopapp-ui-table-headers-shadow,none); }
.shopapp-data-table td, .shopapp-data-table tbody th { background:var(--shopapp-ui-table-cells-bg,var(--shopapp-surface));color:var(--shopapp-ui-table-cells-text,var(--shopapp-text));border-style:solid;border-width:var(--shopapp-ui-table-cells-border-width,1px); }
.shopapp-toolbar { background:var(--shopapp-ui-toolbars-bg,var(--shopapp-surface));color:var(--shopapp-ui-toolbars-text,var(--shopapp-text));border:var(--shopapp-ui-toolbars-border-width,1px) solid var(--shopapp-ui-toolbars-border,var(--shopapp-border));border-radius:var(--shopapp-ui-toolbars-radius,.4rem);padding:var(--shopapp-ui-toolbars-padding,.75rem);box-shadow:var(--shopapp-ui-toolbars-shadow,none); }
.shopapp-field-row { gap:0 !important;padding:0 !important;background:var(--shopapp-ui-table-cells-bg,var(--shopapp-surface)) !important;align-items:stretch; }
.shopapp-field-row > :first-child { background:var(--shopapp-ui-table-headers-bg,var(--shopapp-button));color:var(--shopapp-ui-table-headers-text,var(--shopapp-button-text)) !important;padding:var(--shopapp-ui-table-headers-padding,.65rem);display:flex;align-items:center; }
.shopapp-field-row > :not(:first-child) { margin:var(--shopapp-ui-table-cells-padding,.65rem);min-width:0; }
.shopapp-status-badge { padding:var(--shopapp-ui-badges-padding,.25rem .5rem);border-style:solid;border-width:var(--shopapp-ui-badges-border-width,1px); }
.shopapp-status-badge:not([class*="var(--shopapp-status-"]) { background:var(--shopapp-ui-badges-bg,var(--shopapp-surface));color:var(--shopapp-ui-badges-text,var(--shopapp-text)); }
.shopapp-dialog { border-style:solid;border-width:var(--shopapp-ui-overlays-border-width,1px); }
.shopapp-theme-component-samples .shopapp-dialog { padding:var(--shopapp-ui-overlays-padding,1rem); }
/* The switch's fixed track geometry preserves its hit area and knob alignment. */
.shopapp-theme-component-samples [role=switch] { appearance:none;display:inline-block;vertical-align:middle;width:2.75rem;height:1.5rem;border-radius:999px;position:relative;background:var(--shopapp-muted); }
.shopapp-theme-component-samples [role=switch]::before { content:"";position:absolute;width:1.1rem;height:1.1rem;top:.2rem;left:.2rem;border-radius:50%;background:var(--shopapp-surface); }
.shopapp-theme-component-samples [role=switch]:checked::before { left:1.45rem; }

.shopapp-auth-panel { background:var(--shopapp-ui-panels-bg,var(--login-surface)) !important;color:var(--shopapp-ui-panels-text,var(--login-text)) !important;border:var(--shopapp-ui-panels-border-width,1px) solid var(--shopapp-ui-panels-border,var(--shopapp-border)) !important;border-radius:var(--shopapp-ui-panels-radius,2rem) !important;padding:var(--shopapp-ui-panels-padding,1.5rem) !important;box-shadow:var(--shopapp-ui-panels-shadow,var(--shopapp-shadow)) !important; }
.shopapp-auth-panel h1 { color:inherit; }
.shopapp-button-primary,.shopapp-button-secondary { border-radius:var(--shopapp-ui-buttons-radius,.5rem);box-shadow:var(--shopapp-ui-buttons-shadow,none); }
.shopapp-switch__input:checked ~ .shopapp-switch__track { background:var(--shopapp-ui-switches-bg,var(--shopapp-button)) !important; }
.shopapp-switch__input:checked ~ .shopapp-switch__thumb { background:var(--shopapp-ui-switches-text,var(--shopapp-button-text)) !important; }
.shopapp-theme-contrast-warning { padding:1rem;border:1px solid var(--shopapp-status-warning);background:var(--shopapp-status-warning-surface);color:var(--shopapp-status-warning); }

/* A heading that is itself a panel must outrank the legacy generated panel rule. */
.shopapp-panel.shopapp-card-heading,
.shopapp-theme-page-scope .shopapp-panel.shopapp-card-heading {
 background:var(--shopapp-ui-card-headers-bg,var(--shopapp-button)) !important;
 color:var(--shopapp-ui-card-headers-text,var(--shopapp-button-text)) !important;
 border-color:var(--shopapp-ui-card-headers-border,var(--shopapp-border)) !important;
 border-width:var(--shopapp-ui-card-headers-border-width,1px) !important;
 padding:var(--shopapp-ui-card-headers-padding,.65rem 1rem) !important;
 box-shadow:var(--shopapp-ui-card-headers-shadow,none) !important;
}

/* Legacy primary action alias uses the same complete settings as shopapp-button. */
.shopapp-button-primary {
 background:var(--shopapp-ui-buttons-bg,var(--shopapp-button)) !important;
 color:var(--shopapp-ui-buttons-text,var(--shopapp-button-text)) !important;
 border:var(--shopapp-ui-buttons-border-width,1px) solid var(--shopapp-ui-buttons-border,var(--shopapp-button)) !important;
 border-radius:var(--shopapp-ui-buttons-radius,.5rem) !important;
 padding:var(--shopapp-ui-buttons-padding,.65rem 1rem) !important;
 box-shadow:var(--shopapp-ui-buttons-shadow,none) !important;
}

/* Sorting links retain the table header foreground in every interaction state. */
.shopapp-data-table thead .shopapp-table-sort-link,
.shopapp-data-table thead .shopapp-table-sort-link:hover,
.shopapp-data-table thead .shopapp-table-sort-link:focus-visible { color: inherit !important; }
.shopapp-table-sort-link:hover, .shopapp-table-sort-link:focus-visible { text-decoration: underline; }

/* Keep the replaceable group sections as the editor's responsive cards. */
.shopapp-editor-groups {
 display: flex;
 flex-direction: column;
 gap: 1rem;
 margin-top: 1.25rem;
}
.shopapp-editor-groups > div {
 min-width: 0;
 padding: 1rem;
 border: 1px solid var(--shopapp-border);
 border-radius: 1.2rem;
 background: var(--shopapp-surface);
}
.shopapp-editor-groups > [hidden] { display: none; }
@media (min-width: 1024px) {
 .shopapp-editor-groups > div { border-radius: 1.35rem; }
}
@media (min-width: 1280px) {
 .shopapp-editor-groups { flex-direction: row; }
 .shopapp-editor-groups > div { flex: 1 1 0%; }
}

/* Order dates align with their headings; status and PDF fit their contents. */
.shopapp-orders-table th:nth-child(4), .shopapp-orders-table td:nth-child(4),
.shopapp-orders-table th:nth-child(5), .shopapp-orders-table td:nth-child(5) {
 text-align:center;
 white-space:nowrap;
}
.shopapp-orders-table th:nth-child(8), .shopapp-orders-table td:nth-child(8),
.shopapp-orders-table th:nth-child(9), .shopapp-orders-table td:nth-child(9) {
 width:1%;
 white-space:nowrap;
}

/* Page introductions inherit Header text; controls keep their own theme. */
.shopapp-page-hero { overflow-wrap:anywhere; }
.shopapp-page-hero :is(h1, h2, p) { color:inherit !important; }

/* Joined recipe cells own their padding; the surrounding panel has none. */
.shopapp-recipes-list {
 min-width:0;
 overflow:hidden;
 background:var(--shopapp-ui-panels-bg,var(--shopapp-surface));
 color:var(--shopapp-ui-panels-text,var(--shopapp-text));
 border:var(--shopapp-ui-panels-border-width,1px) solid var(--shopapp-ui-panels-border,var(--shopapp-border));
 border-radius:var(--shopapp-ui-panels-radius,1.5rem);
 box-shadow:var(--shopapp-ui-panels-shadow,var(--shopapp-shadow));
}
.shopapp-recipes-table th, .shopapp-recipes-table td { vertical-align:middle; }
/* Content-sized columns leave the available width to the recipe name. */
.shopapp-recipes-table th:not(:nth-child(2)), .shopapp-recipes-table td:not(:nth-child(2)) {
 width:1%;
 white-space:nowrap;
}
.shopapp-recipes-table .shopapp-recipe-name {
 color:inherit;
 font-weight:700;
 overflow-wrap:anywhere;
}
.shopapp-recipes-table .shopapp-recipe-name:hover,
.shopapp-recipes-table .shopapp-recipe-name:focus-visible { color:inherit; text-decoration:underline; }

.shopapp-recipes-table th:nth-child(3), .shopapp-recipes-table td:nth-child(3),
.shopapp-recipes-table th:nth-child(4), .shopapp-recipes-table td:nth-child(4) {
 text-align:center;
}

/* PPL status uses central semantic colors and configured badge geometry. */
.shopapp-ppl-status { display:inline-flex; white-space:nowrap; font-weight:700; }
.shopapp-status-badge.shopapp-ppl-status--active { background:var(--shopapp-status-success-surface); color:var(--shopapp-status-success); border-color:var(--shopapp-status-success-border); }
.shopapp-status-badge.shopapp-ppl-status--inactive { background:var(--shopapp-status-warning-surface); color:var(--shopapp-status-warning); border-color:var(--shopapp-status-warning-border); }
.shopapp-ppl-status-switch:has(input:checked) .shopapp-ppl-status--inactive,
.shopapp-ppl-status-switch:not(:has(input:checked)) .shopapp-ppl-status--active { display:none; }
.shopapp-ppl-status-help { display:block; margin-top:.5rem; font-size:.875rem; color:var(--shopapp-muted); }