/*
 * Agri OS — Lyra designfundament (Task 1)
 * Bron van waarheid: docs/lyrawms/design-tokens.json (geëxtraheerd uit
 * agrifanshop.lyrawms.nl). Alle kleur-/maatwaarden hieronder zijn 1-op-1
 * afgeleid van die tokens, met één bewuste merkbeslissing:
 *
 *   MERKBESLISSING: de actieve sidebar-status (--sidebar-active-*) gebruikt
 *   het bestaande Agrifanshop-groen in plaats van Lyra's blauw. Al het
 *   overige (typografie, tabellen, badges, knoppen, contentgebied) volgt
 *   design-tokens.json exact.
 */

:root {
    /* Typografie */
    --font-body: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    /* Montserrat 600 kon niet lokaal worden geplaatst zonder een download van
       een niet-vertrouwde bron (zie task-1-report.md). Val terug op de
       system-stack; zodra assets/fonts/montserrat-600.woff2 beschikbaar is,
       hier een @font-face toevoegen en --font-heading terugzetten naar
       "'Montserrat', ..." — de rest van de CSS hoeft dan niet te wijzigen. */
    --font-heading: var(--font-body);
    --font-size-body: 14px;
    --font-size-h1: 31.5px;
    --font-size-table-header: 10.5px;
    --font-size-table-cell: 12.25px;
    --font-size-badge: 12.25px;

    /* Kleuren */
    --color-primary: #036cce;
    --color-primary-btn: #2563eb;
    --color-text-heading: #1e293b;
    --color-text-body: #0f172a;
    --color-text-muted: #64748b;
    --color-text-nav: #475569;
    --color-surface: #ffffff;
    --color-surface-alt: #f1f5f9;
    --color-border: #e5e5e5;
    --color-content-bg: #f8fafc;
    --color-link: #036cce;

    /* Statusbadges (docs/lyrawms/design-tokens.json §colors.status) */
    --status-success-strong-bg: #065f46;
    --status-success-strong-text: #d1fae5;
    --status-success-soft-bg: #ecfdf5;
    --status-success-soft-text: #059669;
    --status-success-solid-bg: #10b981;
    --status-success-solid-text: #ffffff;
    --status-info-bg: #c2e1fe;
    --status-info-text: #036cce;
    --status-info-dark-bg: #aed8fe;
    --status-info-dark-text: #013260;
    --status-warning-bg: #fef3c7;
    --status-warning-text: #92400e;
    --status-danger-bg: #fef2f2;
    --status-danger-text: #dc2626;
    --status-completed-soft-bg: #d1fae5;
    --status-completed-soft-text: #065f46;

    /* Merkbeslissing: sidebar-actief = Agrifanshop-groen i.p.v. Lyra-blauw. */
    --sidebar-active-bg: #edf5ea;
    --sidebar-active-text: #244f2a;
    --sidebar-active-border: #3d7c3f;
    --sidebar-width: 260px;

    /* Tabel */
    --table-header-bg: #f1f5f9;
    --table-header-text: #64748b;
    --table-row-height: 39px;
    --table-cell-padding: 7px 21px;

    /* Componenten */
    --card-radius: 7px;
    --input-radius: 5.25px;
    --btn-radius: 7px;
    --badge-radius: 9999px;

    /* Legacy aliassen: bestaande pagina's (nog niet omgebouwd, Task 2+) blijven
       deze variabelen gebruiken totdat ze zelf naar de tokens hierboven verwijzen. */
    --page: var(--color-content-bg);
    --surface: var(--color-surface);
    --ink: var(--color-text-body);
    --muted: var(--color-text-muted);
    --line: var(--color-border);
    --green: var(--sidebar-active-border);
    --green-dark: var(--sidebar-active-text);
    --green-soft: var(--sidebar-active-bg);
    --accent: #8a6f35;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    background: var(--color-content-bg);
    color: var(--color-text-body);
    font-family: var(--font-body);
    font-size: var(--font-size-body);
    line-height: 1.5;
}

a {
    color: inherit;
    text-decoration: none;
}

h1,
h2,
h3,
p {
    margin-top: 0;
}

h1,
h2,
h3 {
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--color-text-heading);
}

code {
    font-family: Consolas, Monaco, monospace;
    font-size: 0.95em;
}

/* ---------------------------------------------------------------------
 * App shell: vaste witte sidebar + topbar + contentgebied.
 * ------------------------------------------------------------------ */

.app-shell {
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    min-height: 100vh;
}

.app-sidebar {
    display: flex;
    flex-direction: column;
    align-self: start;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    border-right: 1px solid var(--color-border);
    background: var(--color-surface);
    padding: 20px 16px;
}

.sidebar-brand {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 24px;
    padding: 0 8px;
    color: var(--color-text-heading);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 18px;
}

.sidebar-brand-mark {
    color: var(--sidebar-active-border);
}

.sidebar-nav {
    display: grid;
    gap: 2px;
}

.sidebar-nav-footer {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
}

.sidebar-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 38px;
    border-radius: 6px;
    border-left: 3px solid transparent;
    padding: 0 10px;
    color: var(--color-text-nav);
    font-size: 14px;
}

.sidebar-link:hover {
    background: var(--color-surface-alt);
}

.sidebar-link.active {
    border-left-color: var(--sidebar-active-border);
    background: var(--sidebar-active-bg);
    color: var(--sidebar-active-text);
    font-weight: 600;
}

.sidebar-badge {
    display: inline-flex;
    min-width: 20px;
    height: 20px;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: var(--color-surface-alt);
    padding: 0 6px;
    color: var(--color-text-muted);
    font-size: 11px;
    font-weight: 600;
}

.sidebar-link.active .sidebar-badge {
    background: var(--sidebar-active-border);
    color: #ffffff;
}

/* Task 5: minimale subitem-indent onder Bestellingen ("Backorders"). */
.sidebar-sublink {
    min-height: 32px;
    margin-left: 14px;
    padding-left: 8px;
    font-size: 13px;
}

.app-main {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.app-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
    padding: 12px 28px;
}

.topbar-search {
    display: flex;
    flex: 1;
    max-width: 480px;
    gap: 8px;
}

.topbar-search input {
    width: 100%;
    min-height: 38px;
    border: 1px solid var(--color-border);
    border-radius: var(--input-radius);
    background: var(--color-surface-alt);
    padding: 0 12px;
    font: inherit;
    font-size: var(--font-size-table-cell);
}

.topbar-search input:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 1px;
    background: var(--color-surface);
}

.topbar-search button {
    min-height: 38px;
    border: 1px solid var(--color-border);
    border-radius: var(--input-radius);
    background: var(--color-surface);
    padding: 0 14px;
    color: var(--color-primary);
    cursor: pointer;
    font: inherit;
    font-weight: 500;
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.env-chip {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    border: 1px solid var(--status-warning-text);
    border-radius: 9999px;
    background: var(--status-warning-bg);
    padding: 0 12px;
    color: var(--status-warning-text);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.app-content {
    flex: 1;
    background: var(--color-content-bg);
    padding: 24px 28px 64px;
}

.page-heading {
    margin-bottom: 20px;
}

.manual-sync-control {
    position: relative;
    display: flex;
    align-items: center;
}

.manual-sync-button[disabled] {
    cursor: wait;
    opacity: 0.7;
}

.manual-sync-status {
    position: absolute;
    z-index: 20;
    top: calc(100% + 9px);
    right: 0;
    display: none;
    width: max-content;
    max-width: min(520px, calc(100vw - 32px));
    border: 1px solid var(--color-border);
    border-radius: var(--btn-radius);
    background: var(--color-surface);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);
    padding: 9px 12px;
    color: var(--color-text-body);
    font-size: 12px;
    line-height: 1.4;
}

.manual-sync-status.is-visible {
    display: block;
}

.manual-sync-status.is-success {
    border-color: var(--status-success-solid-bg);
}

.manual-sync-status.is-error {
    border-color: var(--status-danger-text);
    color: var(--status-danger-text);
}

.page-heading h1 {
    margin: 0 0 6px;
    font-size: var(--font-size-h1);
    line-height: 1.2;
}

.page-subtitle {
    margin: 0;
    max-width: 720px;
    color: var(--color-text-muted);
    font-size: 14px;
    line-height: 1.5;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
    color: var(--color-primary);
    font-size: 13px;
    font-weight: 600;
}

.back-link:hover {
    text-decoration: underline;
}

/* Worklist tabs: horizontale statusfilters boven werklijsten. */

.worklist-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 0;
}

.worklist-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-bottom: 2px solid transparent;
    padding: 8px 4px 10px;
    margin-right: 14px;
    color: var(--color-text-muted);
    font-size: var(--font-size-table-cell);
    font-weight: 500;
}

.worklist-tab:hover {
    color: var(--color-text-heading);
}

.worklist-tab.active {
    border-bottom-color: var(--color-primary-btn);
    color: var(--color-text-heading);
    font-weight: 600;
}

.worklist-tab .tab-count {
    display: inline-flex;
    min-width: 20px;
    height: 18px;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: var(--color-surface-alt);
    padding: 0 6px;
    color: var(--color-text-muted);
    font-size: 11px;
    font-weight: 600;
}

.worklist-tab.active .tab-count {
    background: var(--color-primary-btn);
    color: #ffffff;
}

/* Statusbadges: render_status_badge() (contexten order/provider/line/stock/mapping). */

.badge-pill {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
    border-radius: var(--badge-radius);
    padding: 1.75px 7px;
    font-size: var(--font-size-badge);
    font-weight: 500;
    white-space: nowrap;
}

.badge-info { background: var(--status-info-bg); color: var(--status-info-text); }
.badge-infoDark { background: var(--status-info-dark-bg); color: var(--status-info-dark-text); }
.badge-warning { background: var(--status-warning-bg); color: var(--status-warning-text); }
.badge-danger { background: var(--status-danger-bg); color: var(--status-danger-text); }
.badge-successSoft { background: var(--status-success-soft-bg); color: var(--status-success-soft-text); }
.badge-successStrong { background: var(--status-success-strong-bg); color: var(--status-success-strong-text); }
.badge-successSolid { background: var(--status-success-solid-bg); color: var(--status-success-solid-text); }
.badge-completedSoft { background: var(--status-completed-soft-bg); color: var(--status-completed-soft-text); }

/* Miniplan pod-vlag en productafbeeldingen (Task B): thumbnails op
 * products.php (render_product_thumbnail()) en de grotere previews op
 * sku.php (productafbeelding + POD-designblok). Additief, geen bestaande
 * selectors gewijzigd. Thumb-cache miniplan: 32px → 48px; op verzoek
 * opdrachtgever (2026-07-14) verdubbeld naar 96px, rijen groeien mee;
 * previews op sku.php blijven ~200px (ongewijzigd). */

.product-thumb {
    display: block;
    width: 96px;
    height: 96px;
    border-radius: 6px;
    object-fit: cover;
    background: var(--color-surface-alt);
}

.product-thumb-placeholder {
    border: 1px dashed var(--color-border);
}

.family-thumb {
    display: flex;
    align-items: center;
}

/* Visuele audit 2026-07-14 */
/* 1. Orderdetail: SKU op eigen regel onder de (klikbare) productnaam. */
.items-row .item-product small {
    display: block;
    margin-top: 2px;
    color: var(--color-text-muted);
}

/* 2. Lange ongebroken strings (bol-/kanaal-e-mails, trackingcodes) mogen
 *    afbreken i.p.v. uit hun cel te lopen. */
.release-table small,
.search-orders-table .data-row span,
.items-row small,
.data-row small {
    overflow-wrap: anywhere;
}

/* Koppel-voortgang per productfamilie (Promio-mappings geverifieerd / varianten).
 * Track op surface-alt, vulling in successSolid; 100% is visueel "af". */
.mapping-progress {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.mapping-progress-track {
    height: 8px;
    border-radius: 999px;
    background: var(--color-surface-alt, #f1f5f9);
    overflow: hidden;
}

.mapping-progress-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: #10b981;
}

.mapping-progress-fill.is-partial {
    background: var(--color-primary, #036cce);
}

.mapping-progress small {
    color: var(--color-text-muted, #64748b);
    font-size: 11.5px;
    white-space: nowrap;
}

/* Task 3: rustige bol.com EAN-indicator naast de Promio-koppel-voortgang op
 * products.php — bewust géén eigen balk, alleen een gedempt telling-label. */
.bol-ean-indicator {
    color: var(--color-text-muted, #64748b);
    font-size: 11.5px;
    white-space: nowrap;
}

.product-hero-image {
    display: block;
    max-width: 160px;
    max-height: 160px;
    margin-bottom: 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--card-radius);
    object-fit: contain;
    background: var(--color-surface);
}

.pod-design-block {
    position: relative;
    border: 1px solid var(--color-border);
    border-radius: var(--card-radius);
    padding: 12px;
    margin-top: 4px;
}

.pod-design-block summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--color-text-heading);
}

.pod-design-hint {
    margin-top: 8px;
    color: var(--color-text-muted);
    font-size: var(--font-size-table-cell);
}

.design-preview-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 12px;
}

.design-preview {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.design-preview span.label {
    color: var(--color-text-muted);
}

.design-preview img {
    display: block;
    max-width: 200px;
    max-height: 200px;
    border: 1px solid var(--color-border);
    border-radius: var(--card-radius);
    object-fit: contain;
    background: var(--color-surface);
}

/* Printfiles zijn vaak witte/lichte opdruk voor zwarte shirts — op een witte
 * achtergrond onzichtbaar. De printfile-preview krijgt daarom een donkere
 * ondergrond (2026-07-14, verzoek opdrachtgever); de mockup blijft licht. */
.design-preview--printfile img {
    background: #111418;
    padding: 8px;
}

.design-preview-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 120px;
    border: 1px dashed var(--color-border);
    border-radius: var(--card-radius);
    color: var(--color-text-muted);
    font-size: var(--font-size-table-cell);
    text-align: center;
    padding: 8px;
}

@media (max-width: 900px) {
    .app-shell {
        grid-template-columns: 1fr;
    }

    .app-sidebar {
        position: static;
        height: auto;
        overflow-y: visible;
        border-right: 0;
        border-bottom: 1px solid var(--color-border);
    }

    .sidebar-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sidebar-nav-footer {
        margin-top: 16px;
    }

    .app-topbar {
        flex-wrap: wrap;
    }
}

/* ---------------------------------------------------------------------
 * Generieke pagina-elementen (hergebruikt door bestaande, nog niet
 * omgebouwde pagina's — Task 2+ herschrijft de pagina's zelf, maar de
 * klassen hieronder blijven tot die tijd correct gestyled binnen de shell).
 * ------------------------------------------------------------------ */

.label {
    display: block;
    color: var(--color-text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.muted {
    color: var(--color-text-muted);
}

.text-link {
    color: var(--color-primary);
    font-weight: 600;
}

.notice {
    margin-bottom: 18px;
    border: 1px solid var(--color-border);
    border-radius: var(--card-radius);
    background: var(--color-surface);
    padding: 14px 16px;
}

.notice.success {
    border-color: var(--status-success-soft-text);
    background: var(--status-success-soft-bg);
    color: var(--status-success-soft-text);
}

.notice.error {
    border-color: var(--status-danger-text);
    background: var(--status-danger-bg);
    color: var(--status-danger-text);
}

/* Kaarten */
.module-panel,
.panel-form,
.workflow-panel,
.lookup-panel,
.process-list,
.route-card,
.decision-strip,
.table-filters,
.validation-action {
    border: 1px solid var(--color-border);
    border-radius: var(--card-radius);
    background: var(--color-surface);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.module-panel,
.panel-form,
.workflow-panel {
    padding: 20px;
}

.ops-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}

.ops-card {
    border: 1px solid var(--color-border);
    border-radius: var(--card-radius);
    background: var(--color-surface);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    padding: 18px 20px;
}

.ops-card strong {
    display: block;
    margin: 6px 0 6px;
    font-family: var(--font-heading);
    font-size: 28px;
    font-weight: 600;
    line-height: 1;
}

.ops-card p {
    margin-bottom: 0;
    color: var(--color-text-muted);
    line-height: 1.45;
}

.command-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.two-col {
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
}

.panel-title {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.panel-title h2,
.module-panel h2,
.workflow-panel h2 {
    margin: 6px 0 0;
    font-size: 20px;
}

.section {
    padding: 36px 0 0;
}

.app-content .section:first-child {
    padding-top: 0;
}

.section-heading {
    max-width: 640px;
    margin-bottom: 16px;
}

/* Task 6: koptekst + primaire actieknop naast elkaar (bijv. "+ Nieuwe inslag"
 * rechtsboven op stock.php). */
.section-heading-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.section-heading-row .section-heading {
    margin-bottom: 16px;
}

a.primary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-height: 38px;
    border: 1px solid var(--color-primary-btn);
    border-radius: var(--btn-radius);
    background: var(--color-primary-btn);
    padding: 0 16px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
}

a.primary-button:hover {
    filter: brightness(0.94);
}

.section-heading h2 {
    margin: 6px 0 0;
    font-size: 22px;
    line-height: 1.25;
}

.compact-list {
    display: grid;
    gap: 10px;
}

.compact-list div {
    display: grid;
    gap: 3px;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 10px;
}

.compact-list div:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.compact-list span {
    color: var(--color-text-muted);
    font-size: 13px;
}

/* Formulieren */

.lookup-form,
.stack-form {
    display: grid;
    gap: 10px;
}

.lookup-form label {
    color: var(--color-text-muted);
    font-size: 13px;
    font-weight: 600;
}

.lookup-form div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.form-grid label {
    display: grid;
    gap: 6px;
    color: var(--color-text-muted);
    font-size: 13px;
    font-weight: 600;
}

.wide-field {
    grid-column: 1 / -1;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
}

input,
select,
textarea {
    font: inherit;
}

.lookup-form input,
.form-grid input,
.form-grid textarea,
.stack-form input,
.stack-form select,
.stack-form textarea,
.table-filters input,
.table-filters select,
.inline-map-form input,
.inline-map-form select,
.create-variant-form input,
.provider-map-form input,
.provider-map-form select {
    width: 100%;
    min-height: 38px;
    border: 1px solid var(--color-border);
    border-radius: var(--input-radius);
    background: var(--color-surface);
    padding: 0 10px;
    color: var(--color-text-body);
    font-size: var(--font-size-table-cell);
}

.form-grid textarea,
.stack-form textarea {
    min-height: 90px;
    padding-top: 9px;
    resize: vertical;
}

button,
.lookup-form button,
.form-actions button,
.stack-form button,
.filter-actions button,
.inline-map-form button,
.create-variant-form button,
.release-action-form button,
.validation-action button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    border: 1px solid var(--color-primary-btn);
    border-radius: var(--btn-radius);
    background: var(--color-primary-btn);
    padding: 0 16px;
    color: #ffffff;
    cursor: pointer;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
}

button:hover {
    filter: brightness(0.94);
}

.danger-form button {
    border-color: var(--status-danger-text);
    background: var(--status-danger-text);
}

button.danger-button {
    border-color: var(--status-danger-text);
    background: var(--status-danger-text);
}

/* Task 3: Producten in afwachting — actie-knoppen per rij. */
button.button-secondary {
    background: #ffffff;
    color: var(--color-primary-btn);
}

button.button-success {
    border-color: var(--status-success-solid-bg);
    background: var(--status-success-solid-bg);
}

button.button-danger {
    border-color: var(--status-danger-text);
    background: var(--status-danger-text);
}

.pending-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 260px;
}

.pending-actions form {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}

.pending-actions input[type="text"],
.pending-actions select {
    min-height: 34px;
    border: 1px solid var(--color-border);
    border-radius: var(--btn-radius);
    padding: 0 8px;
    font: inherit;
    font-size: 13px;
}

.filter-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.filter-actions a {
    color: var(--color-text-muted);
    font-size: 13px;
}

.table-filters {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) 180px 170px 190px auto;
    gap: 12px;
    align-items: end;
    margin-bottom: 14px;
    padding: 14px;
}

.table-filters label {
    display: grid;
    gap: 6px;
    color: var(--color-text-muted);
    font-size: 13px;
    font-weight: 600;
}

.match-filters,
.exception-filters,
.provider-filters {
    grid-template-columns: minmax(260px, 1fr) 220px auto;
}

.match-filters {
    grid-template-columns: minmax(260px, 1fr) auto;
}

.validation-action {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 14px;
    padding: 12px 14px;
}

.validation-action span {
    color: var(--color-text-muted);
    font-size: 13px;
}

/* Detail-/items-lijsten */

.detail-list {
    display: grid;
    gap: 8px;
    margin: 0;
}

.detail-list div {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 14px;
}

.detail-list dt {
    color: var(--color-text-muted);
    font-size: 13px;
}

.detail-list dd {
    margin: 0;
}

.items-table {
    display: grid;
    margin-top: 18px;
    border-top: 1px solid var(--color-border);
}

.items-head,
.items-row {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(140px, 0.8fr) 70px;
    gap: 14px;
    padding: 10px 0;
    border-bottom: 1px solid var(--color-border);
}

.items-head {
    color: var(--color-text-muted);
    font-size: 12px;
    font-weight: 600;
}

.order-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 8fr) minmax(320px, 4fr);
    gap: 16px;
    margin-top: 16px;
}

.order-workbench {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 16px;
}

.timeline-list {
    display: grid;
    gap: 12px;
    margin-top: 18px;
}

.timeline-list div {
    border-left: 3px solid var(--color-border);
    padding-left: 12px;
}

.timeline-list span {
    display: block;
    margin-top: 3px;
    color: var(--color-text-muted);
    font-size: 12px;
}

.timeline-list p {
    margin: 6px 0 0;
    color: var(--color-text-muted);
    line-height: 1.45;
}

.hold-list {
    display: grid;
    gap: 10px;
}

.hold-list div {
    display: grid;
    grid-template-columns: 130px minmax(170px, 0.9fr) minmax(230px, 1.1fr) minmax(260px, 1.3fr) 120px;
    gap: 12px;
    align-items: center;
    border-top: 1px solid var(--color-border);
    padding-top: 10px;
}

.hold-list div > * {
    min-width: 0;
}

.hold-list strong {
    word-break: break-word;
}

.hold-list span,
.hold-list p {
    margin: 0;
    color: var(--color-text-muted);
    line-height: 1.4;
}

.hold-list a {
    color: var(--color-primary);
    font-weight: 600;
}

.status {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 12px;
    border-radius: 9999px;
    background: var(--status-success-soft-bg);
    color: var(--status-success-soft-text);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.status-ok {
    background: var(--status-success-soft-bg);
    color: var(--status-success-soft-text);
}

.status-muted {
    background: var(--color-surface-alt);
    color: var(--color-text-muted);
}

.process-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid var(--color-border);
}

.process-row:last-child {
    border-bottom: 0;
}

.process-row h3 {
    margin-bottom: 6px;
    font-size: 16px;
}

.process-row p {
    margin-bottom: 0;
    color: var(--color-text-muted);
    line-height: 1.5;
}

/* Inbound / stack-forms (inslag) */

.inbound-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
    gap: 18px;
    align-items: start;
}

.workflow-list {
    display: grid;
    gap: 14px;
}

.workflow-list div {
    display: grid;
    gap: 4px;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 14px;
}

.workflow-list div:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.workflow-list span {
    color: var(--color-text-muted);
    line-height: 1.45;
}

.sku-admin-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(320px, 0.75fr);
    gap: 16px;
    align-items: start;
}

.sku-product-panel {
    grid-column: 1;
    grid-row: 1 / span 3;
}

.sku-promio-panel,
.sku-bol-panel,
.sku-control-panel {
    grid-column: 2;
}

.sku-control-panel {
    grid-row: 1;
}

.sku-promio-panel {
    grid-row: 2;
}

.sku-bol-panel {
    grid-row: 3;
}

.sku-overview-heading {
    align-items: center;
    margin-bottom: 18px;
}

.sku-overview-heading .section-heading {
    max-width: none;
    margin-bottom: 0;
}

.sku-overview-heading .family-editor-heading {
    align-items: center;
}

.sku-overview-heading .label:first-child {
    display: none;
}

.sku-overview-heading .product-hero-image {
    width: 96px;
    height: 96px;
    margin: 0;
    object-fit: contain;
}

.sku-overview-heading h2 {
    margin-bottom: 5px;
}

.sku-overview-heading p {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 0;
    color: var(--color-text-muted);
}

.sku-overview-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sku-reservations-section {
    scroll-margin-top: 16px;
}

.reservation-total {
    padding: 8px 12px;
    border-radius: 999px;
    background: var(--status-info-soft-bg);
    color: var(--status-info-soft-text);
    font-size: 13px;
}

.sku-management-section {
    padding-bottom: 36px;
}

/* ---------------------------------------------------------------------
 * Werklijst-tabellen: header #F1F5F9 uppercase 10.5px, rijhoogte 39px,
 * geen zebra, borders alleen via header-achtergrond/rijhoogte (tokens §table).
 * ------------------------------------------------------------------ */

.data-table {
    display: grid;
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--card-radius);
    background: var(--color-surface);
}

.data-head,
.data-row {
    display: grid;
    grid-template-columns: 1fr 1.5fr 100px 100px 1fr;
    gap: 12px;
    align-items: center;
    min-height: var(--table-row-height);
    padding: var(--table-cell-padding);
    border-bottom: 1px solid var(--color-border);
}

.data-head {
    background: var(--table-header-bg);
    color: var(--table-header-text);
    font-size: var(--font-size-table-header);
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.product-stock-heading {
    align-items: center;
}

.product-stock-heading .section-heading {
    margin-bottom: 0;
}

.product-stock-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.velocity-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}

.mysterypack-generator-form {
    display: grid;
    grid-template-columns: minmax(340px, 1.6fr) minmax(260px, 1fr) auto;
    gap: 14px;
    align-items: end;
}

.mysterypack-generator-form label {
    display: grid;
    gap: 7px;
}

.mysterypack-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}

.mysterypack-summary-grid .ops-card {
    display: grid;
    gap: 5px;
}

.mysterypack-summary-grid strong {
    overflow-wrap: anywhere;
}

.mysterypack-warning {
    margin-bottom: 12px;
}

.mysterypack-composition-table .data-head,
.mysterypack-composition-table .data-row {
    min-width: 1180px;
    grid-template-columns: 145px minmax(240px, 1.3fr) 145px 165px 185px 145px minmax(220px, 1fr);
    align-items: start;
}

.mysterypack-composition-table small {
    display: block;
    margin-top: 4px;
    color: var(--color-text-muted);
    line-height: 1.35;
}

.mysterypack-slot-empty {
    background: color-mix(in srgb, var(--color-warning) 8%, var(--color-surface));
}

.mysterypack-result-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.mysterypack-rules-strip {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.velocity-summary-grid .ops-card {
    display: grid;
    gap: 5px;
}

.velocity-summary-grid .ops-card strong {
    font-size: 30px;
}

.velocity-data-note {
    margin-bottom: 16px;
}

.demand-table .data-head,
.demand-table .data-row {
    min-width: 1180px;
    grid-template-columns: minmax(220px, 1.5fr) 120px 100px 100px 120px 120px 130px 130px;
    align-items: start;
}

.demand-table .data-row small {
    display: block;
    margin-top: 3px;
    color: var(--color-text-muted);
}

.product-stock-card {
    display: block;
    min-width: 0;
    padding: 20px;
    border: 1px solid var(--color-border);
    border-radius: var(--card-radius);
    background: var(--color-surface);
    color: var(--color-text);
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.product-stock-card strong {
    display: block;
    margin: 8px 0 7px;
    font-family: var(--font-heading);
    font-size: 34px;
    font-weight: 600;
    line-height: 1;
}

.product-stock-card small,
.product-stock-meta {
    color: var(--color-text-muted);
}

.product-stock-card--link {
    border-color: color-mix(in srgb, var(--color-accent) 45%, var(--color-border));
    background: color-mix(in srgb, var(--color-accent) 6%, var(--color-surface));
    transition: border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}

.product-stock-card--link:hover,
.product-stock-card--link:focus-visible {
    border-color: var(--color-accent);
    box-shadow: 0 5px 14px rgba(15, 23, 42, 0.08);
    transform: translateY(-1px);
}

.product-stock-meta {
    margin: 14px 0 0;
    font-size: 13px;
}

.product-reservations-table .data-head,
.product-reservations-table .data-row {
    grid-template-columns: 1.1fr 1.1fr 1.4fr 0.9fr 80px 1fr;
}

.product-stock-inline-link {
    display: block;
    margin-top: 3px;
    color: var(--color-accent);
    font-size: 12px;
    text-decoration: none;
}

.product-stock-inline-link:hover {
    text-decoration: underline;
}

.pod-history-overlay {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 2;
    place-content: center;
    justify-items: center;
    gap: 8px;
    padding: 24px;
    text-align: center;
    background: color-mix(in srgb, var(--color-surface) 90%, transparent);
    backdrop-filter: blur(2px);
}

.pod-design-block.is-scanning .pod-history-overlay {
    display: grid;
}

.pod-history-overlay small {
    color: var(--color-text-muted);
}

.pod-history-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-accent);
    border-radius: 50%;
    animation: pod-history-spin 0.8s linear infinite;
}

@keyframes pod-history-spin {
    to { transform: rotate(360deg); }
}

.channel-filter {
    display: grid;
    gap: 6px;
    min-width: 0;
    padding: 0;
    border: 0;
}

.channel-filter legend {
    padding: 0;
    color: var(--color-text-muted);
    font-size: 13px;
}

.channel-filter-options {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
}

.channel-filter-options .checkbox-field {
    color: var(--color-text);
    font-size: 13px;
    white-space: nowrap;
}

.order-actions {
    position: relative;
    width: fit-content;
    margin: 0 0 0 auto;
    flex: 0 0 auto;
}

.order-actions summary {
    cursor: pointer;
    list-style: none;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 9px 13px;
    font-weight: 700;
    background: var(--color-surface);
}

.order-actions summary::-webkit-details-marker {
    display: none;
}

.order-actions summary::after {
    content: '▾';
    margin-left: 9px;
}

.order-actions[open] .order-actions-menu {
    position: absolute;
    z-index: 4;
    top: calc(100% + 6px);
    right: 0;
    display: grid;
    gap: 2px;
    width: min(250px, calc(100vw - 48px));
    padding: 6px;
    border: 1px solid var(--color-border);
    border-radius: var(--card-radius);
    background: var(--color-surface);
    box-shadow: var(--card-shadow);
}

.order-actions-menu > button {
    width: 100%;
    border: 0;
    background: transparent;
    padding: 10px;
    color: var(--color-text-body);
    text-align: left;
}

.order-actions-menu > button:hover:not(:disabled),
.order-actions-menu > button:focus-visible {
    background: var(--color-surface-alt);
}

.order-actions-menu > button.danger-action {
    color: var(--color-danger, #b42318);
    text-align: center;
    font-weight: 700;
}

.order-action-dialog {
    width: min(480px, calc(100vw - 32px));
    border: 1px solid var(--color-border);
    border-radius: var(--card-radius);
    padding: 0;
    color: var(--color-text-body);
    background: var(--color-surface);
    box-shadow: var(--card-shadow);
}

.order-action-dialog::backdrop {
    background: rgba(15, 23, 42, 0.48);
}

.order-action-dialog form {
    display: grid;
    gap: 16px;
    padding: 22px;
}

.order-action-dialog h2,
.order-action-dialog p {
    margin: 0;
}

.order-action-dialog label {
    display: grid;
    gap: 6px;
}

.resend-promio-warning {
    display: grid;
    gap: 6px;
    padding: 14px;
    border: 1px solid #f0b429;
    border-radius: 8px;
    color: #7a2e0e;
    background: #fff4d6;
}

.resend-promio-warning strong {
    color: #9b1c1c;
}

.order-action-dialog .resend-promio-confirmation {
    padding: 12px;
    border: 1px solid #f0b429;
    border-radius: 8px;
    background: #fffbeb;
}

.order-action-dialog-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.editable-detail-card-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

button.icon-edit-button {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    min-height: 0;
    padding: 6px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    color: var(--color-text-body);
    background: var(--color-surface);
}

button.icon-edit-button:hover,
button.icon-edit-button:focus-visible {
    border-color: var(--color-accent);
    color: var(--color-accent);
    background: var(--color-surface-alt);
}

button.icon-edit-button svg {
    width: 17px;
    height: 17px;
    fill: currentColor;
}

.inline-detail-form {
    display: grid;
    gap: 12px;
    margin-top: 14px;
}

.inline-detail-form[hidden],
[data-inline-view][hidden] {
    display: none;
}

.inline-detail-form label {
    display: grid;
    gap: 5px;
    color: var(--color-text-muted);
    font-size: 0.82rem;
    font-weight: 650;
}

.inline-detail-form input {
    width: 100%;
    color: var(--color-text-body);
    font-size: 0.94rem;
    font-weight: 500;
}

.inline-detail-row {
    display: grid;
    grid-template-columns: minmax(105px, 0.8fr) minmax(130px, 1.4fr) minmax(64px, 0.5fr);
    gap: 8px;
}

.inline-detail-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

@media (max-width: 620px) {
    .inline-detail-row {
        grid-template-columns: 1fr;
    }
}

#release-remaining-dialog {
    width: min(860px, calc(100vw - 32px));
}

.remaining-release-preview {
    display: grid;
    gap: 16px;
    max-height: min(52vh, 520px);
    overflow: auto;
}

.remaining-release-provider {
    display: grid;
    gap: 8px;
}

.remaining-release-provider h3 {
    margin: 0;
}

.remaining-release-provider table {
    width: 100%;
}

.remaining-release-provider th,
.remaining-release-provider td {
    vertical-align: middle;
    white-space: nowrap;
}

.remaining-release-provider th:first-child,
.remaining-release-provider td:first-child {
    width: 100%;
    white-space: normal;
}

.remaining-release-provider td:last-child small {
    display: block;
    margin-top: 3px;
    color: var(--color-text-muted);
}

.inline-action-form label {
    display: grid;
    gap: 6px;
    color: var(--color-text-muted);
    font-size: 13px;
}

.inline-action-form .muted {
    margin: 0;
    font-size: 12px;
}

.sortable-head {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: inherit;
    text-decoration: none;
}

.sortable-head:hover {
    color: var(--color-text-heading);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.sortable-head.active {
    color: var(--color-text-heading);
}

.sort-indicator {
    font-size: 10px;
    line-height: 1;
    opacity: 0.7;
}

.data-row {
    font-size: var(--font-size-table-cell);
    color: var(--color-text-body);
}

.data-row:last-child {
    border-bottom: 0;
}

.data-row:hover {
    background: var(--color-surface-alt);
}

.orders-table .data-head,
.orders-table .data-row {
    min-width: 1320px;
    grid-template-columns: 34px 160px 105px 115px 120px 120px 220px 110px 165px 130px;
    align-items: start;
}

.orders-table .data-row span {
    min-width: 0;
}

.orders-table small {
    display: block;
    margin-top: 4px;
    color: var(--color-text-muted);
    line-height: 1.35;
}

.stock-table .data-head,
.stock-table .data-row {
    min-width: 1480px;
    grid-template-columns: 150px minmax(220px, 1.4fr) 160px 120px 130px 140px 170px 190px;
    align-items: start;
}

/* Task 6: Mutaties/Te controleren-tabs hebben een ander kolomaantal (type,
 * sku, aantal, referentie, status, datum) dan de Voorraad-tab hierboven. */
.movement-table .data-head,
.movement-table .data-row {
    min-width: 1080px;
    grid-template-columns: 120px 150px 90px minmax(160px, 1fr) 150px 170px;
    align-items: start;
}

.stock-table .data-row strong {
    display: block;
    margin-bottom: 4px;
}

.stock-table .data-row span {
    min-width: 0;
    word-break: break-word;
}

.match-table .data-head,
.match-table .data-row {
    min-width: 980px;
    grid-template-columns: 170px minmax(220px, 1.35fr) 120px 150px minmax(300px, 1.1fr);
    align-items: start;
}

.match-table small {
    display: block;
    margin-top: 4px;
    color: var(--color-text-muted);
    line-height: 1.35;
}

.inline-map-form {
    display: grid;
    grid-template-columns: 88px minmax(120px, 1fr) 70px;
    gap: 8px;
}

.inline-map-form select,
.inline-map-form input,
.inline-map-form button {
    min-height: 34px;
}

.exception-table .data-head,
.exception-table .data-row {
    min-width: 1050px;
    grid-template-columns: 150px minmax(240px, 1.2fr) minmax(220px, 1fr) 210px 150px;
    align-items: start;
}

/* Task 3: Producten in afwachting (match-center.php) — kanaal-kolom toegevoegd
 * naast naam/SKU/orders/laatst gezien/acties. */
.pending-products-table .data-head,
.pending-products-table .data-row {
    min-width: 1080px;
    grid-template-columns: minmax(160px, 1fr) 150px 110px 80px 140px minmax(280px, 1.4fr);
    align-items: start;
}

.exception-table small {
    display: block;
    margin-top: 4px;
    color: var(--color-text-muted);
    line-height: 1.35;
}

/* Task 4: Resolution Center-wachtrij (exceptions.php). */
.resolution-table .data-head,
.resolution-table .data-row {
    min-width: 1150px;
    grid-template-columns: 140px 150px 150px minmax(260px, 1.4fr) 150px 190px;
    align-items: start;
}

.resolution-cards .ops-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.resolution-cards .text-link {
    margin-top: 6px;
}

/* Task 7: dashboard-kerncijferkaarten (vijf i.p.v. de generieke vier),
   hold-leeftijd-buckets en laatste-sync-per-bron. Zelfde .ops-card-teller
   look als resolution-cards hierboven. */
.ops-grid.dashboard-cards {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.dashboard-cards .ops-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dashboard-cards .text-link {
    margin-top: 6px;
}

.age-bucket-grid,
.sync-status-grid {
    display: grid;
    gap: 14px;
    margin-bottom: 16px;
}

.age-bucket-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.age-bucket-grid .ops-card {
    text-align: center;
}

.sync-status-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Task 4: integraties.php kanaal-/providerkaarten. */
.integration-card {
    max-width: 640px;
}

.integration-card .detail-list {
    margin-bottom: 14px;
}

.product-movement-table .data-head,
.product-movement-table .data-row {
    min-width: 1080px;
    grid-template-columns: 150px 125px minmax(260px, 1.4fr) 120px 150px 190px;
    align-items: start;
}

.product-movement-table small {
    display: block;
    margin-top: 4px;
    color: var(--color-text-muted);
    line-height: 1.35;
}

.stock-position-history-table .data-head,
.stock-position-history-table .data-row {
    min-width: 1120px;
    grid-template-columns: 180px 130px 120px 120px 130px minmax(210px, 1fr) 190px;
    align-items: start;
}

.stock-position-history-table small {
    display: block;
    margin-top: 4px;
    color: var(--color-text-muted);
    line-height: 1.35;
}

.integration-sync-form {
    display: grid;
    gap: 7px;
    margin: 14px 0;
}

.integration-sync-form small {
    color: var(--color-text-muted);
}

.promio-stock-table .data-head,
.promio-stock-table .data-row {
    grid-template-columns: minmax(220px, 2fr) minmax(150px, 1.2fr) 90px 90px 120px;
}

.vertical-actions {
    display: grid;
    gap: 8px;
}

.vertical-actions a {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface);
    padding: 0 10px;
    color: var(--color-primary);
    font-size: 13px;
    font-weight: 600;
}

.provider-table .data-head,
.provider-table .data-row {
    min-width: 900px;
    grid-template-columns: 180px minmax(190px, 1.1fr) 95px 125px minmax(190px, 0.9fr);
    align-items: start;
}

.provider-map-form {
    grid-template-columns: minmax(100px, 1fr) 74px;
}

.provider-table small,
.release-table small {
    display: block;
    margin-top: 4px;
    color: var(--color-text-muted);
    line-height: 1.35;
}

.release-table .data-head,
.release-table .data-row {
    min-width: 1080px;
    grid-template-columns: 140px 150px minmax(190px, 1fr) 90px 160px minmax(210px, 1.05fr);
    align-items: start;
}

.payload-preview {
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--card-radius);
    background: var(--color-surface);
    padding: 16px;
    color: var(--color-text-body);
    font: 13px/1.5 Consolas, Monaco, monospace;
}

.family-list {
    display: grid;
    gap: 10px;
}

.family-card {
    border: 1px solid var(--color-border);
    border-radius: var(--card-radius);
    background: var(--color-surface);
    overflow: hidden;
}

.family-card summary,
.family-card .family-card-summary {
    /* Kolommen familierij: marker, thumb (96px), naam, type-badge,
     * koppel-voortgang (Promio-mappings, op verzoek terug als balk), bol
     * EAN-indicator (Task 3, rustig label i.p.v. eigen balk), SKU-aantal,
     * link naar familie.php (familie-editor). */
    display: grid;
    grid-template-columns: 24px 104px minmax(200px, 1.5fr) 90px 170px 110px 100px 120px;
    gap: 12px;
    align-items: center;
    padding: 14px;
    cursor: pointer;
    list-style: none;
}

.simple-product-card .family-card-summary {
    grid-template-columns: 104px minmax(200px, 1.5fr) 90px 170px 110px 140px 120px;
    cursor: default;
}

.family-card summary .text-link,
.family-card .family-card-summary .text-link {
    justify-self: start;
}

.family-card summary::-webkit-details-marker {
    display: none;
}

.family-card summary::before {
    content: '+';
    display: inline-flex;
    width: 22px;
    height: 22px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    color: var(--color-primary);
    font-weight: 700;
}

.family-card[open] summary::before {
    content: '-';
}

.family-card summary strong,
.family-card .family-card-summary strong {
    display: block;
    margin-bottom: 4px;
}

.family-card summary small,
.family-card .family-card-summary small,
.family-variant-table small {
    display: block;
    color: var(--color-text-muted);
    line-height: 1.35;
}

.match-progress {
    display: block;
    width: 100%;
    height: 8px;
    overflow: hidden;
    border-radius: 9999px;
    background: var(--color-surface-alt);
}

.match-progress span {
    display: block;
    height: 100%;
    background: var(--sidebar-active-border);
}

.search-orders-table .data-head,
.search-orders-table .data-row {
    grid-template-columns: 140px minmax(180px, 1fr) 160px 140px;
    align-items: start;
}

.search-products-table .data-head,
.search-products-table .data-row {
    grid-template-columns: 200px minmax(200px, 1fr) 120px;
    align-items: start;
}

.family-variant-table {
    border-width: 1px 0 0;
    border-radius: 0;
}

.family-variant-table .data-head,
.family-variant-table .data-row {
    /* Kolommen variantrij: afbeelding (96px-thumb), SKU, variant, status,
     * type, beheer. Woo ID/Promio/Gebruik staan op sku.php. */
    min-width: 780px;
    grid-template-columns: 104px 185px minmax(200px, 1.1fr) 90px 90px 70px;
    align-items: start;
}

.family-variant-table .data-row span {
    min-width: 0;
}

.family-variant-table .data-row span:first-child {
    overflow-wrap: anywhere;
    padding-right: 8px;
}

.create-variant-form {
    display: grid;
    grid-template-columns: minmax(160px, 0.8fr) minmax(220px, 1.2fr) auto;
    gap: 8px;
    border-top: 1px solid var(--color-border);
    padding: 12px 14px;
    background: var(--color-surface-alt);
}

.create-variant-form input,
.create-variant-form button {
    min-height: 36px;
}

.table-pagination {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    border-top: 1px solid var(--color-border);
    background: var(--color-surface-alt);
    color: var(--color-text-muted);
    font-size: 13px;
    font-weight: 600;
}

.pagination-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.pagination-actions a {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface);
    padding: 0 10px;
    color: var(--color-text-body);
    font-weight: 600;
}

/* Losse pill-achtige elementen die pagina's al gebruiken (blijven werken
   tot Task 2+ ze vervangt door render_status_badge()). */

.status-badge {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
    border-radius: var(--badge-radius);
    background: var(--status-info-bg);
    color: var(--status-info-text);
    padding: 1.75px 8px;
    font: inherit;
    font-size: var(--font-size-badge);
    font-weight: 500;
}

.status-badge.secondary {
    background: var(--color-surface-alt);
    color: var(--color-text-body);
}

.dash {
    color: var(--color-text-muted);
    font-weight: 600;
}

.row-actions {
    display: flex;
    gap: 6px;
}

.row-actions span {
    display: inline-flex;
    min-height: 26px;
    align-items: center;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 0 7px;
    color: var(--color-primary);
    font-size: 12px;
    font-weight: 600;
}

.order-link {
    color: var(--color-primary);
    font-weight: 600;
}

.tracking-link {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.order-row {
    position: relative;
}

.items-popover {
    position: absolute;
    z-index: 20;
    top: calc(100% + 8px);
    left: 0;
    display: grid;
    width: min(420px, 80vw);
    border: 1px solid var(--color-border);
    border-radius: var(--card-radius);
    background: var(--color-surface);
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.16);
    padding: 12px;
    color: var(--color-text-body);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(6px);
    transition: opacity 120ms ease, transform 120ms ease, visibility 0s linear 120ms;
}

.order-row:hover .items-popover,
.items-popover:hover {
    gap: 8px;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition: opacity 120ms ease, transform 120ms ease, visibility 0s;
}

.items-popover strong {
    color: var(--color-text-heading);
}

.items-popover em {
    display: block;
    border-top: 1px solid var(--color-border);
    padding-top: 8px;
    font-style: normal;
    line-height: 1.35;
}

.items-popover small {
    color: var(--color-text-muted);
}

@media (max-width: 760px) {
    .lookup-panel,
    .ops-grid,
    .command-layout,
    .order-detail-grid,
    .order-workbench,
    .table-filters,
    .decision-strip,
    .inbound-layout,
    .form-grid,
    .age-bucket-grid,
    .sync-status-grid,
    .product-stock-metrics,
    .sku-admin-grid,
    .process-row {
        grid-template-columns: 1fr;
    }

    .sku-product-panel,
    .sku-promio-panel,
    .sku-bol-panel,
    .sku-control-panel {
        grid-column: 1;
        grid-row: auto;
    }

    .lookup-form div,
    .detail-list div,
    .items-head,
    .items-row,
    .data-head,
    .data-row {
        grid-template-columns: 1fr;
    }
}

/* ---------------------------------------------------------------------
 * Task 2: orders-werklijst + orderdetail.
 * ------------------------------------------------------------------ */

.orders-worklist-table .data-head,
.orders-worklist-table .data-row {
    min-width: 1290px;
    grid-template-columns: 40px 140px 130px 120px 140px 140px 120px minmax(200px, 1.1fr) minmax(160px, 0.9fr);
    align-items: start;
}

.orders-bulk-form {
    display: grid;
    gap: 10px;
}

.orders-bulk-toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 16px;
    align-items: end;
    padding: 12px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--card-radius);
    background: var(--color-surface);
}

.orders-bulk-actions,
.orders-selection-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.orders-duplicate-options:not([hidden]) {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: end;
    flex: 1 1 420px;
}

.orders-delete-options:not([hidden]) {
    display: flex;
    align-items: end;
    flex: 1 1 280px;
}

.orders-duplicate-options label {
    display: grid;
    gap: 4px;
    min-width: 150px;
    color: var(--color-text-muted);
    font-size: 12px;
    font-weight: 700;
}

.orders-delete-options label {
    display: grid;
    gap: 4px;
    width: 100%;
    color: var(--color-text-muted);
    font-size: 12px;
    font-weight: 700;
}

.orders-duplicate-options label:last-child {
    flex: 1 1 220px;
}

.orders-duplicate-options select,
.orders-duplicate-options input,
.orders-delete-options input {
    min-height: 38px;
    border: 1px solid var(--color-border);
    border-radius: var(--btn-radius);
    padding: 0 10px;
    background: var(--color-surface);
    color: var(--color-text-body);
    font: inherit;
}

.orders-bulk-actions label {
    color: var(--color-text-muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.orders-bulk-actions select {
    min-width: 250px;
    min-height: 38px;
    border: 1px solid var(--color-border);
    border-radius: var(--btn-radius);
    padding: 0 34px 0 10px;
    background: var(--color-surface);
    color: var(--color-text-body);
    font: inherit;
}

.orders-selection-actions span {
    color: var(--color-text-muted);
    font-size: 13px;
}

.order-select-cell {
    display: flex;
    justify-content: center;
}

.order-select-cell input {
    width: 17px;
    height: 17px;
    margin: 0;
    accent-color: var(--color-primary);
    cursor: pointer;
}

.orders-worklist-table .data-row.is-selected {
    background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
}

@media (max-width: 760px) {
    .orders-bulk-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .orders-bulk-actions,
    .orders-selection-actions {
        align-items: stretch;
    }

    .orders-bulk-actions select {
        min-width: 0;
        flex: 1 1 220px;
    }
}

.orders-worklist-table .data-row small {
    display: block;
    margin-top: 4px;
    color: var(--color-text-muted);
    line-height: 1.35;
}

.order-detail-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    color: var(--color-text-muted);
    font-size: 13px;
}

.order-detail-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.order-detail-heading strong {
    color: var(--color-text-heading);
    font-size: 20px;
}

.detail-side-stack {
    display: grid;
    gap: 16px;
    align-content: start;
}

.promio-order-list {
    display: grid;
    gap: 0;
    margin-top: 14px;
}

.promio-order-row {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    padding: 12px 0;
    border-top: 1px solid var(--color-border);
}

.promio-order-row > div {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.promio-order-row small {
    color: var(--color-text-muted);
}

.order-line-items .items-head,
.order-line-items .items-row {
    grid-template-columns: 104px minmax(180px, 8fr) minmax(85px, 4fr) minmax(125px, 4fr) minmax(105px, 4fr) minmax(80px, 4fr);
    align-items: center;
}

.order-line-items .items-row span:last-child {
    text-align: right;
}

.order-item-thumb,
.order-item-thumb > a {
    display: flex;
    align-items: center;
}

.order-line-status-stack {
    display: grid;
    justify-items: start;
    gap: 6px;
}

.order-line-release-link {
    display: grid;
    justify-items: start;
    gap: 3px;
    color: inherit;
    text-decoration: none;
}

.order-line-release-link small {
    color: var(--color-accent);
    font-size: 11px;
    font-weight: 700;
}

.order-line-release-link:hover small,
.order-line-release-link:focus-visible small {
    text-decoration: underline;
}

.order-line-bundle-details {
    grid-column: 1 / -1;
    margin: -1px 0 0;
    overflow: hidden;
    border: 0;
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
    background: var(--color-surface);
}

.order-line-bundle-details > summary {
    display: grid;
    grid-template-columns: 104px minmax(180px, 8fr) minmax(85px, 4fr) minmax(125px, 4fr) minmax(105px, 4fr) minmax(80px, 4fr);
    align-items: center;
    gap: 14px;
    padding: 11px 0;
    cursor: pointer;
    list-style: none;
    color: var(--color-text-body);
    background: var(--color-surface-alt);
}

.order-line-bundle-details > summary::-webkit-details-marker {
    display: none;
}

.order-line-bundle-details > summary::after {
    content: '▾';
    grid-column: 6;
    grid-row: 1;
    justify-self: end;
    transition: transform 160ms ease;
}

.order-line-bundle-details > summary > span {
    grid-column: 2;
}

.order-line-bundle-details > summary > small {
    grid-column: 5 / 7;
    grid-row: 1;
    justify-self: end;
    padding-right: 20px;
    color: var(--color-text-muted);
}

.order-line-bundle-details[open] > summary::after {
    transform: rotate(180deg);
}

.order-line-bundle-details > .items-table {
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--color-border);
}

.order-bundle-components-table .items-head,
.order-bundle-components-table .items-row {
    grid-template-columns: 104px minmax(180px, 8fr) minmax(85px, 4fr) minmax(125px, 4fr) minmax(105px, 4fr) minmax(80px, 4fr);
    align-items: center;
}

.order-bundle-components-table .items-head > span:nth-child(3),
.order-bundle-components-table .items-row > span:nth-child(3) {
    grid-column: 3 / 5;
}

.order-bundle-components-table .items-head > span:nth-child(4),
.order-bundle-components-table .items-row > span:nth-child(4) {
    grid-column: 5;
}

.order-bundle-components-table .items-head > span:nth-child(5),
.order-bundle-components-table .items-row > span:nth-child(5) {
    grid-column: 6;
}

.order-bundle-component-thumb,
.order-bundle-component-thumb > a {
    display: flex;
    align-items: center;
}

.order-bundle-component-product small {
    display: block;
    margin-top: 3px;
    color: var(--color-text-muted);
}

@media (max-width: 760px) {
    .mysterypack-generator-form,
    .mysterypack-summary-grid,
    .mysterypack-rules-strip {
        grid-template-columns: 1fr;
    }

    .order-line-items .items-head,
    .order-line-items .items-row,
    .order-bundle-components-table .items-head,
    .order-bundle-components-table .items-row {
        grid-template-columns: 1fr;
    }

    .order-bundle-components-table .items-head > span,
    .order-bundle-components-table .items-row > span {
        grid-column: auto !important;
    }

    .order-line-bundle-details > summary {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 4px 12px;
        padding: 12px;
    }

    .order-line-bundle-details > summary > span {
        grid-column: 1;
        grid-row: 1;
    }

    .order-line-bundle-details > summary > small {
        grid-column: 1;
        grid-row: 2;
        justify-self: start;
        padding-right: 0;
    }

    .order-line-bundle-details > summary::after {
        grid-column: 2;
        grid-row: 1 / 3;
        align-self: center;
    }
}

/* Task 5: "Wacht op voorraad"-kaart (backorder-detail). */
.backorder-card {
    border-left: 3px solid var(--status-warning-text);
}

.backorder-items .items-head,
.backorder-items .items-row {
    grid-template-columns: minmax(0, 1.3fr) 60px 90px 70px;
}

.backorder-items .items-row span:not(:first-child) {
    text-align: right;
}

.backorder-hint {
    margin: 12px 0 0;
    font-size: 12px;
}

/* Familie-bewerkscherm (miniplan familie-editor): alle varianten van één
 * familie in één formulier bewerken, inclusief Promio-koppeling per rij. */
.family-editor-heading {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.family-editor-heading .product-hero-image {
    margin-bottom: 0;
    flex-shrink: 0;
}

.family-editor-form {
    gap: 16px;
}

.family-bulk-panel {
    max-width: 640px;
}

.checkbox-field {
    display: flex !important;
    grid-template-columns: none !important;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.checkbox-field input {
    width: auto;
    min-height: 0;
}

.family-editor-table .data-head,
.family-editor-table .data-row {
    /* Kolommen: afbeelding, SKU, naam, status, Promio SKU/PN, bol EAN, koppeling. */
    min-width: 1020px;
    grid-template-columns: 104px 150px minmax(180px, 1.1fr) 130px minmax(180px, 1fr) minmax(160px, 1fr) 140px;
    align-items: start;
}

.family-editor-table .data-row span:nth-child(3) input,
.family-editor-table .data-row span:nth-child(5) input,
.family-editor-table .data-row span:nth-child(6) input {
    width: 100%;
    min-height: 36px;
    border: 1px solid var(--color-border);
    border-radius: var(--input-radius);
    background: var(--color-surface);
    padding: 0 10px;
    color: var(--color-text-body);
    font-size: var(--font-size-table-cell);
}

.family-editor-table .data-row select {
    width: 100%;
    min-height: 36px;
    border: 1px solid var(--color-border);
    border-radius: var(--input-radius);
    background: var(--color-surface);
    padding: 0 8px;
    color: var(--color-text-body);
    font-size: var(--font-size-table-cell);
}

.bundle-components-table {
    grid-template-columns: max-content max-content minmax(220px, 1fr) max-content max-content max-content;
}

.bundle-components-table .data-head,
.bundle-components-table .data-row {
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    align-items: center;
}

.bundle-components-table .data-row > span {
    min-width: 0;
}

.bundle-quantity-form {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.bundle-quantity-form input[type="number"] {
    width: 76px;
    min-height: 36px;
}

.bundle-mapping-warning {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #b42318;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.bundle-mapping-warning:hover,
.bundle-mapping-warning:focus-visible {
    color: #7a271a;
    text-decoration: underline;
}

.bundle-mapping-warning-icon {
    display: inline-grid;
    width: 20px;
    height: 20px;
    place-items: center;
    border-radius: 50%;
    background: #d92d20;
    color: #fff;
    font-size: 13px;
    line-height: 1;
    text-decoration: none;
}

.order-mysterypack-list {
    grid-column: 1 / -1;
    display: grid;
    gap: 10px;
    padding: 12px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-alt);
}

.order-mysterypack-card {
    display: grid;
    gap: 11px;
    padding: 14px;
    border: 1px solid var(--color-border);
    border-left: 4px solid #98a2b3;
    border-radius: 10px;
    background: var(--color-surface);
}

.order-mysterypack-card.is-generated {
    border-left-color: #12b76a;
}

.order-mysterypack-heading,
.order-mysterypack-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.order-mysterypack-heading strong,
.order-mysterypack-heading .label {
    display: block;
}

.mysterypack-seed-link {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    font-weight: 700;
}

.order-mysterypack-items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 7px;
}

.order-mysterypack-items a {
    display: grid;
    gap: 2px;
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    color: inherit;
    text-decoration: none;
}

.order-mysterypack-items a:hover {
    border-color: var(--color-primary);
}

.order-mysterypack-items small,
.order-mysterypack-meta {
    color: var(--color-text-muted);
    font-size: 12px;
}

.order-mysterypack-card form {
    display: flex;
    justify-content: flex-end;
}

.order-mysterypack-value-check {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid currentColor;
    border-radius: 9px;
}

.order-mysterypack-value-check.is-pass {
    color: #067647;
    background: #ecfdf3;
}

.order-mysterypack-value-check.is-fail {
    color: #b42318;
    background: #fef3f2;
}

.order-mysterypack-value-check small,
.order-mysterypack-value-check strong {
    display: block;
}

.order-mysterypack-value-icon {
    display: grid;
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    place-items: center;
    border-radius: 50%;
    background: currentColor;
    color: #fff;
    font-weight: 900;
}

.order-mysterypack-price-proof {
    border: 1px solid var(--color-border);
    border-radius: 9px;
    overflow: hidden;
}

.order-mysterypack-price-proof > summary {
    padding: 10px 12px;
    cursor: pointer;
    font-weight: 700;
    background: var(--color-surface-alt);
}

.order-mysterypack-price-proof ol {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.order-mysterypack-price-proof li,
.order-mysterypack-proof-total {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding: 8px 12px;
    border-top: 1px solid var(--color-border);
}

.order-mysterypack-proof-total {
    background: var(--color-surface-alt);
}

.mysterypack-shirt-pool {
    margin: 14px 0;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    overflow: hidden;
}

.mysterypack-shirt-pool > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 15px;
}

.mysterypack-shirt-pool > summary > span,
.mysterypack-shirt-pool > summary > small {
    grid-column: auto;
    grid-row: auto;
    justify-self: auto;
    padding-right: 0;
}

.mysterypack-shirt-pool > summary::after {
    display: none;
}

.mysterypack-shirt-pool .data-head,
.mysterypack-shirt-pool .data-row {
    grid-template-columns: 64px minmax(220px, 2fr) minmax(120px, .7fr) minmax(220px, 1.5fr);
}

@media (max-width: 760px) {
    .order-mysterypack-list {
        padding: 8px;
    }

    .order-mysterypack-items {
        grid-template-columns: 1fr;
    }

    .mysterypack-shirt-pool > summary {
        align-items: flex-start;
        flex-direction: column;
    }

    .mysterypack-shirt-pool .data-head,
    .mysterypack-shirt-pool .data-row {
        grid-template-columns: 1fr;
    }
}


/* Beveiligde beheerlogin */
.login-page {
    min-height: 100vh;
    margin: 0;
    display: grid;
    place-items: center;
    padding: 24px;
    background: #f4f6f2;
}

.login-card {
    width: min(100%, 420px);
    padding: 36px;
    border: 1px solid #dfe5dc;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 50px rgb(25 47 28 / 10%);
}

.login-brand {
    margin-bottom: 28px;
    color: #223326;
    font-size: 24px;
    font-weight: 700;
}

.login-brand span { color: #57a447; }
.login-card h1 { margin: 0 0 8px; }
.login-card > p { margin: 0 0 24px; color: #68736a; }
.login-form { display: grid; gap: 18px; }
.login-form label { display: grid; gap: 7px; color: #354238; font-weight: 600; }
.login-form input {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 12px;
    border: 1px solid #cfd7cc;
    border-radius: 7px;
    font: inherit;
}
.login-form button { width: 100%; margin-top: 4px; }
.login-alert {
    margin-bottom: 20px;
    padding: 12px 14px;
    border: 1px solid #e4b9b5;
    border-radius: 7px;
    background: #fff1ef;
    color: #9f2f27;
}
.logout-form { margin: 0; }