/*
 * 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;
}

.stock-metric-label {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.metric-help {
    width: 1.25rem;
    height: 1.25rem;
    padding: 0;
    border: 1px solid var(--color-border, #d9e0d7);
    border-radius: 999px;
    background: var(--color-surface, #fff);
    color: var(--color-muted, #5f6f61);
    font: inherit;
    font-size: .75rem;
    line-height: 1;
    cursor: help;
}

.stock-number-negative {
    color: var(--status-danger-text, #991b1b);
}

.notification-list { display: grid; gap: 1rem; margin-top: 1rem; }
.notification-card { border: 1px solid var(--color-border, #d9e0d7); border-left: 4px solid #94a3b8; border-radius: .75rem; padding: 1rem; background: var(--color-surface, #fff); }
.notification-card--warning { border-left-color: #d97706; }
.notification-card--critical { border-left-color: #b91c1c; }
.notification-card__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.notification-card__header h3 { margin: .5rem 0 0; }
.notification-card pre { overflow: auto; max-height: 22rem; padding: .75rem; background: #f6f8f5; border-radius: .5rem; }
.notification-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: 1rem; }
.inline-action-form { display: inline-flex; gap: .35rem; align-items: center; }
.inline-action-form input { max-width: 10rem; }

.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);
}

.license-plate-text {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    max-width: 100%;
    margin-top: 8px;
    padding: 7px 10px;
    border: 1px solid #c9a900;
    border-radius: 5px;
    background: #f8db35;
    color: #171717;
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 38%);
}

.items-row .item-product .license-plate-text small {
    margin: 0;
    color: #5c5100;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.license-plate-text strong {
    max-width: 100%;
    overflow-wrap: anywhere;
    font-size: 15px;
    letter-spacing: .035em;
}

/* 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;
}

.orders-overview-heading {
    align-items: flex-end;
}

.manual-order-form {
    display: grid;
    gap: 20px;
    margin-top: 20px;
}

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

.manual-order-form input,
.manual-order-form select,
.manual-order-form textarea {
    box-sizing: border-box;
    width: 100%;
}

.manual-order-form textarea {
    min-height: 112px;
    resize: vertical;
}

.manual-order-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
    gap: 20px;
    align-items: start;
}

.manual-order-main,
.manual-order-sidebar {
    display: grid;
    gap: 20px;
}

.manual-order-fields {
    display: grid;
    gap: 14px;
    margin-top: 18px;
}

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

.manual-order-address-row {
    display: grid;
    grid-template-columns: minmax(130px, 0.7fr) minmax(200px, 1.3fr) minmax(150px, 0.8fr);
    gap: 14px;
}

.manual-order-fieldset {
    display: grid;
    gap: 14px;
    border: 0;
    border-top: 1px solid var(--color-border);
    margin: 20px 0 0;
    padding: 18px 0 0;
}

.manual-order-fieldset legend {
    padding: 0 10px 0 0;
    color: var(--color-text);
    font-size: 14px;
    font-weight: 650;
}

.manual-order-products .section-heading {
    margin-bottom: 0;
}

.manual-order-lines {
    display: grid;
    gap: 12px;
    margin-top: 18px;
}

.manual-order-line {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) 120px auto;
    align-items: end;
    gap: 12px;
    border-top: 1px solid var(--color-border);
    padding-top: 12px;
}

.manual-order-remove-line {
    margin-bottom: 1px;
}

.manual-order-submit {
    display: grid;
    gap: 10px;
    margin-top: 18px;
}

.manual-order-submit button {
    width: 100%;
}

.manual-order-submit a {
    order: 2;
    text-align: center;
}

.manual-order-submit-panel p {
    margin: 10px 0 0;
    color: var(--color-text-muted);
    line-height: 1.5;
}

@media (max-width: 1000px) {
    .manual-order-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 800px) {
    .manual-order-field-row,
    .manual-order-address-row,
    .manual-order-line {
        grid-template-columns: 1fr;
    }
}

.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-detail-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.order-detail-actions .order-actions {
    margin-left: 0;
}

.order-lines-save-button[hidden] {
    display: none;
}

.order-lines-save-button {
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
}

.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: 0;
    width: min(340px, calc(100vw - 32px));
    max-height: min(72vh, 680px);
    overflow-y: auto;
    padding: 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--card-radius);
    background: var(--color-surface);
    box-shadow: var(--card-shadow);
}

.order-actions-group {
    display: grid;
    gap: 2px;
    padding: 6px 0 8px;
}

.order-actions-group + .order-actions-group {
    border-top: 1px solid var(--color-border);
    padding-top: 10px;
}

.order-actions-group-label {
    padding: 0 10px 4px;
    color: var(--color-text-muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.order-actions-menu button {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: center;
    column-gap: 9px;
    width: 100%;
    border: 0;
    border-radius: 6px;
    background: transparent;
    padding: 9px 10px;
    color: var(--color-text-body);
    text-align: left;
}

.order-action-icon-definitions {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.order-action-icon {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.order-actions-menu button > span {
    min-width: 0;
    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:disabled {
    color: var(--color-text-muted);
    opacity: .7;
}

.order-actions-menu button.supplier-copy-action {
    align-items: start;
}

.order-action-copy-label {
    display: grid;
    gap: 1px;
}

.order-actions-menu .supplier-copy-action .order-action-copy-title {
    font-size: 13px;
    font-weight: 400;
    line-height: 1.35;
}

.order-actions-menu .supplier-copy-action small {
    color: var(--color-text-muted);
    font-size: 11px;
}

.order-actions-danger-group {
    padding-bottom: 2px;
}

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

.order-actions-menu button.danger-action:hover,
.order-actions-menu button.danger-action:focus-visible {
    background: var(--status-danger-bg);
}

.clipboard-toast {
    position: fixed;
    z-index: 20;
    right: 22px;
    bottom: 22px;
    max-width: min(420px, calc(100vw - 32px));
    padding: 12px 16px;
    border: 1px solid var(--status-success-soft-text);
    border-radius: 8px;
    color: var(--status-success-soft-text);
    background: var(--status-success-soft-bg);
    box-shadow: var(--card-shadow);
    font-weight: 700;
}

.clipboard-toast[hidden] {
    display: none;
}

.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: 1740px;
    grid-template-columns: 145px minmax(210px, 1.3fr) 125px 115px 110px 120px 125px 135px 185px 170px;
    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: 1420px;
    grid-template-columns: 170px 100px 110px 100px 100px 110px 135px minmax(200px, 1fr) 180px;
    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, vrije voorraad, beheer. Woo ID/Promio/Gebruik staan op sku.php. */
    min-width: 900px;
    grid-template-columns: 104px 185px minmax(200px, 1.1fr) 90px 90px 115px 70px;
    align-items: start;
}

.orders-filters {
    grid-template-columns: minmax(260px, 1fr) minmax(250px, .4fr) 170px auto;
}

.family-stock-link {
    display: inline-flex;
    min-width: 32px;
    justify-content: flex-end;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.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);
}

/* Producten > Backorders: compact inkoopoverzicht per familie. */
.backorder-priority-card {
    border-color: #f2c15c;
    background: #fffaf0;
}

.backorder-priority-card strong,
.backorder-quantity strong {
    color: #9a5a00;
}

.product-backorder-filters {
    grid-template-columns: minmax(240px, 1fr) minmax(210px, .55fr) auto auto;
    align-items: end;
}

.product-backorder-family summary {
    grid-template-columns: 24px minmax(240px, 1.5fr) 145px 125px 165px 110px;
}

.product-backorder-family summary > a {
    justify-self: end;
}

.product-backorder-family .backorder-family-name,
.product-backorder-family summary > span {
    min-width: 0;
}

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

.product-backorder-variant-table .data-head,
.product-backorder-variant-table .data-row {
    min-width: 830px;
    grid-template-columns: 170px minmax(220px, 1fr) 130px 80px 140px 120px;
    align-items: start;
}

.backorder-amount-badge {
    display: inline-flex;
    border: 1px solid #f2c15c;
    border-radius: 999px;
    background: #fff4d6;
    color: #7a4700;
    padding: 3px 9px;
    font-weight: 700;
}

.backorder-orders-link {
    display: inline-flex;
    min-width: 28px;
    justify-content: center;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

@media (max-width: 1100px) {
    .product-backorder-family summary {
        grid-template-columns: 24px minmax(220px, 1fr) 120px 110px 145px;
    }

    .product-backorder-family summary > a {
        display: none;
    }
}

.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: 12px;
    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;
}

.order-detail-heading + .order-detail-grid {
    margin-top: 0;
}

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

.detail-side-stack .module-panel,
.order-product-panel {
    padding: 18px;
}

.order-product-panel > h2 {
    margin-top: 4px;
}

.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: 88px minmax(150px, 1.6fr) minmax(82px, .72fr) minmax(104px, .9fr) minmax(118px, 1fr) minmax(112px, .9fr);
    gap: 10px;
    align-items: center;
}

.order-line-items {
    margin-top: 14px;
}

.order-line-items .items-head {
    padding: 8px 10px;
    border-radius: var(--card-radius) var(--card-radius) 0 0;
    background: var(--color-surface-alt);
}

.order-line-items .items-row {
    padding: 10px;
}

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

.order-line-items .items-row.is-out-of-stock {
    margin: 6px 0;
    border: 1px solid var(--status-danger-text);
    border-radius: var(--card-radius);
    background: color-mix(in srgb, var(--status-danger-bg) 72%, var(--color-surface));
    box-shadow: inset 3px 0 0 var(--status-danger-text);
}

.order-line-items .items-row.is-pending-removal {
    border-color: var(--status-danger-text);
    background: repeating-linear-gradient(
        -45deg,
        var(--status-danger-bg),
        var(--status-danger-bg) 8px,
        var(--color-surface) 8px,
        var(--color-surface) 16px
    );
    box-shadow: inset 3px 0 0 var(--status-danger-text);
}

.order-line-items .items-row.is-pending-removal > span:not(.order-line-inline-action) {
    opacity: .5;
}

.order-line-stock-badge {
    justify-self: start;
    margin-top: 6px;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 700;
}

.order-line-inline-quantity {
    display: flex;
    align-items: center;
    gap: 7px;
}

.order-line-inline-quantity input {
    width: 54px;
    min-width: 0;
    min-height: 38px;
    padding: 6px 8px;
    border-color: var(--color-border);
    border-radius: var(--input-radius);
    background: var(--color-surface);
    font-weight: 600;
}

.order-line-inline-quantity small,
.order-line-inline-action small {
    color: var(--color-text-muted);
}

.order-line-inline-action {
    display: grid;
    justify-items: end;
    gap: 6px;
    min-width: 0;
}

.order-line-inline-action > span:first-child {
    font-weight: 600;
    white-space: nowrap;
}

.order-line-inline-action label {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0 9px;
    border: 1px solid var(--status-danger-text);
    border-radius: var(--btn-radius);
    color: var(--status-danger-text);
    background: var(--color-surface);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.order-line-inline-action input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.order-line-inline-action label:has(input:checked) {
    color: #ffffff;
    background: var(--status-danger-text);
}

.order-line-inline-action label:focus-within {
    outline: 3px solid color-mix(in srgb, var(--status-danger-text) 22%, transparent);
    outline-offset: 2px;
}

.inline-order-lines-form {
    display: grid;
    gap: 7px;
    margin-top: 14px;
    padding: 14px;
    border-top: 1px solid var(--color-border);
    border-radius: 0 0 var(--card-radius) var(--card-radius);
    background: var(--color-surface-alt);
}

.inline-order-line-addition {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 100px;
    gap: 8px;
    align-items: end;
}

.inline-order-line-addition input {
    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: inherit;
    font-size: var(--font-size-table-cell);
}

.inline-order-line-addition input:focus {
    border-color: var(--color-primary-btn);
    outline: 3px solid color-mix(in srgb, var(--color-primary-btn) 14%, transparent);
}

.order-product-search {
    position: relative;
}

.order-product-search-results {
    position: absolute;
    z-index: 6;
    top: calc(100% + 4px);
    right: 0;
    left: 0;
    display: grid;
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--card-radius);
    background: var(--color-surface);
    box-shadow: var(--card-shadow);
}

.order-product-search-results[hidden] {
    display: none;
}

.order-product-search-results > button {
    display: grid;
    justify-items: start;
    gap: 2px;
    width: 100%;
    min-height: 0;
    padding: 9px 11px;
    border: 0;
    border-radius: 0;
    background: var(--color-surface);
    color: var(--color-text-body);
    text-align: left;
}

.order-product-search-results > button + button {
    border-top: 1px solid var(--color-border);
}

.order-product-search-results > button:hover,
.order-product-search-results > button.is-active {
    background: var(--color-surface-alt);
    filter: none;
}

.order-product-search-results > button span {
    color: var(--color-text-muted);
    font-size: 12px;
    font-weight: 500;
}

.inline-order-line-addition label {
    display: grid;
    gap: 5px;
    color: var(--color-text-muted);
    font-size: 12px;
    font-weight: 700;
}

.inline-order-line-addition button {
    white-space: nowrap;
}

.inline-order-lines-form > .muted {
    margin: 0;
    font-size: 12px;
    line-height: 1.4;
}

.order-memory-panel {
    padding: 18px;
}

.order-memory-form {
    display: grid;
    grid-template-columns: minmax(180px, .55fr) minmax(320px, 1.8fr) auto;
    gap: 10px;
    align-items: stretch;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-border);
}

.order-memory-form textarea {
    min-height: 64px;
}

.order-memory-form button {
    min-width: 150px;
}

.order-memory-panel .timeline-list {
    margin-top: 16px;
}

@media (max-width: 760px) {
    .inline-order-line-addition {
        grid-template-columns: 1fr;
    }

    .inline-order-line-addition button {
        width: 100%;
    }

    .order-memory-form {
        grid-template-columns: 1fr;
    }

}

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

.order-item-thumb .product-thumb {
    width: 80px;
    height: 80px;
}

@media (max-width: 1180px) {
    .order-detail-grid {
        grid-template-columns: 1fr;
    }

    .detail-side-stack {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .order-line-items .items-head,
    .order-line-items .items-row {
        grid-template-columns: 72px minmax(140px, 1.5fr) 76px 94px 108px 102px;
        gap: 8px;
    }

    .order-item-thumb .product-thumb {
        width: 68px;
        height: 68px;
    }
}

.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;
    }

    .detail-side-stack {
        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;
    }
}

/* 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: 8px;
    padding: 10px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-alt);
}

.order-mysterypack-card {
    display: grid;
    gap: 9px;
    padding: 12px;
    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: 6px;
}

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

.order-mysterypack-items strong {
    line-height: 1.35;
}

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

.order-mysterypack-items a.is-out-of-stock {
    border-color: var(--status-danger-text);
    background: color-mix(in srgb, var(--status-danger-bg) 72%, var(--color-surface));
    box-shadow: inset 3px 0 0 var(--status-danger-text);
}

.order-mysterypack-items a.is-out-of-stock:hover {
    border-color: var(--status-danger-text);
}

.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-regenerate {
    min-height: 34px;
    padding: 0 13px;
    font-size: 13px;
}

.order-mysterypack-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface-alt);
}

.order-mysterypack-meta span {
    padding: 7px 9px;
}

.order-mysterypack-meta span + span {
    border-left: 1px solid var(--color-border);
}

.order-mysterypack-value-check {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    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: var(--color-text-muted);
    color: #fff;
    font-weight: 900;
}

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

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

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

.order-mysterypack-price-proof > summary {
    padding: 9px 11px;
    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;
    }

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

    .order-mysterypack-meta span + span {
        border-top: 1px solid var(--color-border);
        border-left: 0;
    }

    .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; }