/* ---------------------------------------------------------------------------
   Klantportaal — eigen opmaak bovenop de gedeelde schil.

   appshell.css (ProfixX.AppShell.UI) laadt eerst en levert de tokens (--px-*), licht en
   donker, en de px-klassen (px-card, px-btn, px-input, px-status-pill, ...). Dit bestand
   bevat alleen wat het portaal anders of extra heeft: de desktop-kop, tabellen, de pager,
   meldingen en formulieren.

   Kleur alleen via var(--px-...): dan klopt het in beide thema's én in de merkkleur van de
   tenant. Die merkkleur zet portal.js tijdens het laden op --px-color-primary en de kleuren
   die daarvan afgeleid zijn. Geen color-mix(): dezelfde afspraak als in WMS en Transport.
   --------------------------------------------------------------------------- */

/* ── Vormtokens voor de desktop ────────────────────────────────────────────────
   De schil is gemaakt voor handterminals: knoppen van 48px en tekst die met het scherm
   meegroeit. Achter een bureau mag het compacter; kleuren blijven van de schil. */
:root {
    --px-touch-target: 36px;
    --px-radius: 12px;
    --px-radius-sm: 8px;
    --px-radius-xs: 6px;
    --px-font-sm: 13px;
    --px-font-md: 14px;
    --px-font-lg: 18px;
    --px-font-xl: 26px;

    /* Knoppen zijn effen in de merkkleur. Knopstijl "verloop" (portaalconfiguratie) geeft ze een
       zacht verloop, zie hieronder. */
    --px-btn-fill: var(--px-color-primary);

    /* Accentkleur van de tenant: alleen voor kleine accenten (teller op de winkelmand, labels,
       aantal actieve filters). portal.js zet --portal-cta en --portal-on-cta; zonder branding is
       het de merkkleur. */
    --portal-cta: var(--px-color-primary);
    --portal-cta-light: var(--px-brand-light);
    --portal-cta-deep: var(--px-brand-deep);
    --portal-on-cta: var(--px-color-on-primary);
    --portal-cta-fill: var(--portal-cta);

    --portal-header-height: 64px;
    --portal-footer-height: 44px;
    --portal-content-width: 1280px;
}

* {
    box-sizing: border-box;
}

html, body {
    min-height: 100%;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: var(--px-font-md);
    line-height: 1.5;
}

.px-boot {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

h1 {
    margin: 0 0 16px;
    font-size: var(--px-font-xl);
    font-weight: 650;
    letter-spacing: -0.02em;
}

/* Blazor zet na elke navigatie de focus op de <h1> (FocusOnNavigate in App.razor), zodat een
   schermlezer de paginatitel voorleest. Die focus blijft; alleen de rand eromheen niet. */
h1:focus {
    outline: none;
}

h2,
h3 {
    letter-spacing: -0.01em;
}

a {
    color: var(--px-color-accent);
}

button {
    font-family: inherit;
}

code {
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--px-color-surface-2);
    font-size: 0.86em;
}

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

.italic {
    font-style: italic;
}

.nowrap {
    white-space: nowrap;
}

/* Knopstijl "verloop" (instelling in de portaalconfiguratie): een zacht verloop van licht naar
   de merkkleur, van boven naar beneden. Alleen op knoppen, nergens anders. */
:root[data-portal-buttons="gradient"] {
    --px-btn-fill: linear-gradient(180deg, var(--px-brand-light), var(--px-color-primary));
    --portal-cta-fill: linear-gradient(180deg, var(--portal-cta-light), var(--portal-cta));
}

/* ── Opbouw "Compact" (portaalconfiguratie) ────────────────────────────────────
   Dezelfde uitstraling als Modern, met minder witruimte: voor klanten die veel regels bestellen. */
:root[data-portal-style="compact"] {
    --px-touch-target: 32px;
    --px-font-md: 13px;
    --px-font-lg: 16px;
    --px-font-xl: 22px;
    --portal-header-height: 56px;
}

:root[data-portal-style="compact"] .portal-content {
    padding: 20px 24px;
}

:root[data-portal-style="compact"] .portal-data-table th,
:root[data-portal-style="compact"] .portal-data-table td {
    padding: 7px 12px;
}

:root[data-portal-style="compact"] .px-card {
    padding: 14px;
}

:root[data-portal-style="compact"] .portal-nav-link,
:root[data-portal-style="compact"] .portal-icon-btn,
:root[data-portal-style="compact"] .dyn-order__btn,
:root[data-portal-style="compact"] .dyn-order__qty {
    height: 32px;
}

:root[data-portal-style="compact"] .portal-icon-btn {
    width: 32px;
}

/* Bedragen, aantallen en kengetallen: cijfers even breed, zodat kolommen recht onder elkaar staan. */
.num,
.portal-data-table td.right,
.portal-data-table tfoot td {
    font-variant-numeric: tabular-nums;
}

/* ── Raamwerk ──────────────────────────────────────────────────────────────── */

.portal-root {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--px-color-bg);
}

.portal-header {
    position: sticky;
    top: 0;
    z-index: 100;
    height: var(--portal-header-height);
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 0 24px;
    /* Doorschijnend met vervaging: de pagina schuift er zichtbaar onderdoor, zonder schaduw. */
    background: var(--px-color-surface-glass, var(--px-color-surface));
    backdrop-filter: saturate(1.8) blur(12px);
    -webkit-backdrop-filter: saturate(1.8) blur(12px);
    border-bottom: 1px solid var(--px-color-border);
    /* Merkstreep van 3px langs de bovenrand. */
    box-shadow: inset 0 3px 0 var(--px-color-primary);
}

.portal-header__brand {
    display: flex;
    flex: none;
    align-items: center;
    text-decoration: none;
}

.portal-header-title {
    font-weight: 650;
    font-size: var(--px-font-lg);
    letter-spacing: -0.02em;
    color: var(--px-color-text);
    white-space: nowrap;
}

.portal-header-logo {
    height: 40px;
    max-width: 220px;
    object-fit: contain;
}

/* ── Opbouw "Merkkleur" (portaalconfiguratie) ──────────────────────────────────
   Kop in de merkkleur, ronde knoppen en de bestelknoppen in de accentkleur. portal.js laat bij deze
   opbouw het neutrale palet weg, zodat de blauwgrijze achtergrond en de schaduwen van de schil terugkomen.
   Knopstijl "verloop" geeft de vlakken het merkverloop. */
:root[data-portal-style="brand"] {
    --px-radius: 14px;
    --px-radius-sm: 10px;
    --portal-brand-fill: var(--px-color-primary);
    --portal-cta-fill: var(--portal-cta);
}

:root[data-portal-style="brand"][data-portal-buttons="gradient"] {
    --px-btn-fill: linear-gradient(135deg, var(--px-brand-light), var(--px-color-primary) 60%, var(--px-brand-deep));
    --portal-brand-fill: linear-gradient(135deg, var(--px-brand-light), var(--px-color-primary) 55%, var(--px-brand-deep));
    --portal-cta-fill: linear-gradient(135deg, var(--portal-cta-light), var(--portal-cta) 60%, var(--portal-cta-deep));
}

:root[data-portal-style="brand"] .portal-root {
    background:
        radial-gradient(1200px 500px at 50% -10%, var(--px-color-bg-2), transparent 70%),
        var(--px-color-bg);
}

:root[data-portal-style="brand"] .portal-header {
    background: var(--portal-brand-fill);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom-color: transparent;
    box-shadow: var(--px-shadow-1);
}

:root[data-portal-style="brand"] .portal-header-title,
:root[data-portal-style="brand"] .portal-nav-link,
:root[data-portal-style="brand"] .portal-header-user__name,
:root[data-portal-style="brand"] .portal-header-user__relation {
    color: var(--px-color-on-primary);
}

:root[data-portal-style="brand"] .portal-nav-link,
:root[data-portal-style="brand"] .portal-icon-btn,
:root[data-portal-style="brand"] .px-btn {
    border-radius: var(--px-radius-pill);
}

:root[data-portal-style="brand"] .portal-nav-link:hover {
    background: var(--portal-on-primary-soft);
    color: var(--px-color-on-primary);
}

:root[data-portal-style="brand"] .portal-nav-link.active {
    background: var(--portal-on-primary-strong);
    color: var(--px-color-on-primary);
}

/* De winkelmand gevuld in de accentkleur, de teller omgekeerd. */
:root[data-portal-style="brand"] .portal-nav-link--accent,
:root[data-portal-style="brand"] .portal-nav-link--accent:hover,
:root[data-portal-style="brand"] .portal-nav-link--accent.active {
    border-color: transparent;
    background: var(--portal-cta-fill);
    color: var(--portal-on-cta);
}

:root[data-portal-style="brand"] .portal-nav-link__badge {
    background: var(--portal-on-cta);
    color: var(--portal-cta);
}

:root[data-portal-style="brand"] .portal-header-user {
    border-left-color: var(--portal-on-primary-border);
}

:root[data-portal-style="brand"] .portal-icon-btn {
    border-color: var(--portal-on-primary-border);
    background: var(--portal-on-primary-soft);
    color: var(--px-color-on-primary);
}

/* Een logo in een gekleurde kop krijgt een licht plaatje; het donker-thema hieronder wint. */
:root[data-portal-style="brand"] .portal-header-logo {
    /* Het plaatje komt om het logo heen; het logo zelf blijft even groot. */
    box-sizing: content-box;
    padding: 4px 8px;
    border-radius: var(--px-radius-xs);
    background: var(--px-color-surface);
}

:root[data-portal-style="brand"] .portal-cta,
:root[data-portal-style="brand"] .dash-search .px-btn,
:root[data-portal-style="brand"] .dyn-order__btn {
    --px-btn-fill: var(--portal-cta-fill);
    border-color: transparent;
    background: var(--portal-cta-fill);
    color: var(--portal-on-cta);
}

:root[data-portal-style="brand"] .dyn-order__btn:hover:not(:disabled) {
    border-color: transparent;
    background: var(--portal-cta-fill);
    color: var(--portal-on-cta);
    filter: brightness(1.06);
}

:root[data-portal-style="brand"] .px-card,
:root[data-portal-style="brand"] .portal-data-table {
    box-shadow: var(--px-shadow-1);
}

/* Logo's van tenants zijn voor een witte ondergrond gemaakt. In donker krijgt het logo een
   licht plaatje, anders verdwijnt een donker logo in de kop. */
:root[data-px-theme="dark"] .portal-header-logo {
    box-sizing: content-box;
    padding: 4px 8px;
    border-radius: var(--px-radius-xs);
    background: var(--px-color-text);
}

.portal-header-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

.portal-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: var(--px-radius-sm);
    background: transparent;
    color: var(--px-color-text-dim);
    font-size: var(--px-font-md);
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.14s var(--px-ease), color 0.14s var(--px-ease);
}

.portal-nav-link:hover {
    background: var(--px-color-surface-2);
    color: var(--px-color-text);
}

.portal-nav-link.active {
    background: var(--px-chip-bg);
    color: var(--px-color-accent);
    font-weight: 600;
}

/* Winkelmand: omlijnd knopje rechts in de kop; de kleur zit alleen in de teller. */
.portal-nav-link--accent,
.portal-nav-link--accent.active {
    margin-left: 8px;
    border-color: var(--px-color-border-strong);
    background: var(--px-color-surface);
    color: var(--px-color-text);
}

.portal-nav-link--accent:hover {
    border-color: var(--px-color-text-dim);
    background: var(--px-color-surface);
}

/* Teller op de winkelmand: bolletje in de accentkleur van de tenant. */
.portal-nav-link__badge {
    display: inline-block;
    min-width: 20px;
    padding: 0 6px;
    border-radius: var(--px-radius-pill);
    background: var(--portal-cta);
    color: var(--portal-on-cta);
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 20px;
    text-align: center;
}

.portal-header-user {
    padding-left: 16px;
    border-left: 1px solid var(--px-color-border);
    line-height: 1.2;
    text-align: right;
}

.portal-header-user__name {
    font-weight: 600;
    font-size: var(--px-font-sm);
}

.portal-header-user__relation {
    font-size: 12px;
    color: var(--px-color-text-dim);
}

/* Taalkeuze in de kop: compact, zelfde hoogte en rand als de icoonknoppen ernaast. */
.portal-lang {
    flex: none;
    height: 36px;
    padding: 0 8px;
    border: 1px solid var(--px-color-border);
    border-radius: var(--px-radius-sm);
    background: var(--px-color-surface);
    color: var(--px-color-text);
    font-family: inherit;
    font-size: var(--px-font-sm);
    cursor: pointer;
}

:root[data-portal-style="brand"] .portal-lang {
    border-color: var(--portal-on-primary-border);
    background: var(--portal-on-primary-soft);
    color: var(--px-color-on-primary);
}

:root[data-portal-style="brand"] .portal-lang option {
    color: var(--px-color-text);
}

/* Ronde knop met alleen een icoon: thema wisselen, uitloggen. */
.portal-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--px-color-border);
    border-radius: var(--px-radius-sm);
    background: var(--px-color-surface);
    color: var(--px-color-text-dim);
    cursor: pointer;
    transition: color 0.14s var(--px-ease), border-color 0.14s var(--px-ease);
}

.portal-icon-btn:hover {
    color: var(--px-color-text);
    border-color: var(--px-color-border-strong);
}

/* Smaller scherm: de labels in het menu wijken, de iconen blijven. */
@media (max-width: 1100px) {
    .portal-nav-link__label {
        display: none;
    }

    .portal-header-user {
        display: none;
    }
}

@media (max-width: 640px) {
    .portal-header {
        gap: 8px;
        padding: 0 12px;
    }

    .portal-header-logo {
        max-width: 110px;
    }
}

.portal-content {
    flex: 1;
    width: 100%;
    max-width: var(--portal-content-width);
    margin: 0 auto;
    padding: 32px 24px;
}

@media (max-width: 640px) {
    .portal-content {
        padding: 20px 12px;
    }
}

/* Onderaan vast, zodat "Powered by" altijd in beeld is; zelfde patroon als de kop. */
.portal-footer {
    position: sticky;
    bottom: 0;
    z-index: 100;
    height: var(--portal-footer-height);
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid var(--px-color-border);
    background: var(--px-color-surface);
    color: var(--px-color-text-dim);
}

/* Paginakop met acties rechts (zoeken, bewaren, downloaden). */
.portal-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

.portal-page-header h1 {
    margin: 0;
}

.portal-page-header__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* De kaart van de schil draagt in het portaal geen ondermarge; de pagina regelt de ruimte. */
.portal-content .px-card {
    margin-bottom: 0;
}

.portal-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Knoppen ───────────────────────────────────────────────────────────────── */

/* px-btn als link: geen onderstreping, en een icoon netjes naast de tekst. */
a.px-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

/* De schil maakt pillen voor handterminals; achter een bureau een rustige, rechthoekige knop
   zonder schaduw en zonder letterspatiëring. */
.px-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 16px;
    border-radius: var(--px-radius-sm);
    font-weight: 600;
    letter-spacing: 0;
    box-shadow: none;
}

.px-btn:hover {
    box-shadow: none;
    filter: brightness(1.08);
}

.px-btn:active {
    transform: translateY(1px);
}

/* Secundaire knop: wit met een rand. */
.px-btn--ghost {
    background: var(--px-color-surface);
    border: 1px solid var(--px-color-border-strong);
    color: var(--px-color-text);
}

.px-btn--ghost:hover {
    filter: none;
    background: var(--px-color-surface-2);
    border-color: var(--px-color-border-strong);
    box-shadow: none;
}

.px-btn--fullwidth {
    width: 100%;
}

/* Bestelknop ("In winkelmand", "Bestelling plaatsen", "Alles in winkelmand"): iets hoger en in de
   accentkleur van de tenant. */
.portal-cta {
    --px-btn-fill: var(--portal-cta-fill);
    min-height: 40px;
    color: var(--portal-on-cta);
}

/* Tekstknop in de accentkleur: "Verander", "Verwijderen". */
.portal-link-button {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: none;
    background: none;
    color: var(--px-color-accent);
    font-family: inherit;
    font-size: var(--px-font-sm);
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
}

.portal-link-button:hover {
    text-decoration: underline;
}

.portal-link-button--danger {
    color: var(--px-color-danger);
}

/* Bestellen vanuit een tegel of lijstregel: aantal en een knop met het winkelmandje. Beide even
   hoog, zodat ze uitlijnen, ook als de rij door een afbeelding hoger is. */
.dyn-order__qty {
    width: 60px;
    height: 36px;
    padding: 0 8px;
    border: 1px solid var(--px-color-border-strong);
    border-radius: var(--px-radius-xs);
    background: var(--px-color-bg);
    color: var(--px-color-text);
    font-family: inherit;
    font-size: var(--px-font-sm);
}

.dyn-order__qty:focus {
    outline: none;
    border-color: var(--px-color-primary);
    box-shadow: 0 0 0 3px var(--px-chip-bg);
}

/* Winkelmandknop op een tegel of lijstregel: gevuld in de merkkleur (volgt de knopstijl). */
.dyn-order__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 14px;
    border: none;
    border-radius: var(--px-radius-sm);
    background: var(--px-btn-fill);
    color: var(--px-color-on-primary);
    cursor: pointer;
    transition: filter 0.12s var(--px-ease);
}

.dyn-order__btn:hover:not(:disabled) {
    filter: brightness(1.08);
}

.dyn-order__btn:disabled {
    opacity: 0.5;
    cursor: wait;
}

/* ── Formulieren ───────────────────────────────────────────────────────────── */

.portal-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}

.portal-field > label {
    font-weight: 600;
    font-size: var(--px-font-sm);
}

.portal-field > small,
.portal-field > .muted {
    color: var(--px-color-text-dim);
    font-size: 12px;
}

textarea.px-input {
    min-height: 96px;
    padding: 10px var(--px-gap-lg);
    line-height: 1.5;
    resize: vertical;
}

.px-input[readonly] {
    background: var(--px-color-surface-2);
    cursor: default;
}

/* ── Meldingen in de pagina ────────────────────────────────────────────────── */

.portal-error,
.portal-info,
.portal-success,
.portal-notice {
    margin: 8px 0 16px;
    padding: 10px 14px;
    border-radius: var(--px-radius-sm);
    border-left: 3px solid;
    color: var(--px-color-text);
    font-size: var(--px-font-sm);
}

.portal-error {
    border-left-color: var(--px-color-danger);
    background: var(--px-danger-tint);
}

.portal-info,
.portal-success {
    border-left-color: var(--px-color-success);
    background: var(--px-success-tint);
}

.portal-notice {
    border-left-color: var(--px-color-warning);
    background: var(--px-warning-tint);
}

/* Zwevende melding onderin ("toegevoegd aan de winkelmand"). */
.portal-toast {
    position: fixed;
    left: 50%;
    bottom: calc(var(--portal-footer-height) + 16px);
    z-index: 150;
    transform: translateX(-50%);
    margin: 0;
    box-shadow: var(--px-shadow-2);
}

/* ── Tabs ──────────────────────────────────────────────────────────────────────
   Voor de productpagina en voor een Tabs-knoop uit de layouteditor. Staat hier en niet in het
   stijlblok van een component: anders ontbreekt de opmaak zodra die component niet op het scherm is. */

.dyn-tabs__strip {
    display: flex;
    gap: 4px;
    margin: 0 0 16px;
    border-bottom: 1px solid var(--px-color-border);
    /* Alleen zijwaarts scrollen bij veel tabs; verticaal nooit (anders verschijnen scrollpijltjes). */
    overflow-x: auto;
    overflow-y: hidden;
}

.dyn-tab {
    position: relative;
    margin: 0;
    padding: 10px 16px;
    border: none;
    border-radius: var(--px-radius-xs) var(--px-radius-xs) 0 0;
    background: none;
    color: var(--px-color-text-dim);
    font-family: inherit;
    font-size: var(--px-font-md);
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.14s var(--px-ease), background 0.14s var(--px-ease);
}

.dyn-tab:hover {
    color: var(--px-color-text);
    background: var(--px-color-surface-2);
}

/* Actieve tab: donkere tekst en een streep in de merkkleur over de onderrand heen. */
.dyn-tab--active,
.dyn-tab--active:hover {
    color: var(--px-color-text);
    font-weight: 600;
    background: none;
}

.dyn-tab--active::after {
    content: '';
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 0;
    height: 2px;
    border-radius: var(--px-radius-pill);
    background: var(--px-color-primary);
}

/* ── Lege en ladende toestanden ────────────────────────────────────────────── */

.portal-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 48px 16px;
    color: var(--px-color-text-dim);
    text-align: center;
}

.portal-empty .px-icon {
    color: var(--px-color-accent);
    opacity: 0.7;
}

/* Skelet: grijze vlakken in de vorm van wat er komt, met een zachte glans. Rustiger dan "Laden...". */
.portal-skeleton {
    display: block;
    border-radius: var(--px-radius-xs);
    background: linear-gradient(90deg, var(--px-color-surface-2) 25%, var(--px-color-border) 50%, var(--px-color-surface-2) 75%);
    background-size: 200% 100%;
    animation: portal-skeleton 1.4s ease-in-out infinite;
}

.portal-skeleton--line {
    height: 12px;
    margin: 10px 0;
}

.portal-skeleton--short {
    width: 40%;
}

.portal-skeleton--block {
    min-height: 120px;
}

@keyframes portal-skeleton {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

/* Lijst blijft staan tijdens het laden van een volgende pagina; alleen wat gedimd, met een
   balkje bovenaan. Dat voelt sneller dan een lege pagina met "Laden...". */
.portal-loading-host {
    position: relative;
}

.portal-loading-host--busy > :not(.portal-loading-bar) {
    opacity: 0.55;
    pointer-events: none;
    transition: opacity 0.2s var(--px-ease);
}

.portal-loading-bar {
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 3px;
    overflow: hidden;
    border-radius: var(--px-radius-pill);
    background: var(--px-chip-bg);
}

.portal-loading-bar::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 30%;
    border-radius: inherit;
    background: var(--px-color-primary);
    animation: portal-loading 1.1s var(--px-ease) infinite;
}

@keyframes portal-loading {
    from { left: -30%; }
    to { left: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .portal-skeleton {
        animation: none;
    }

    .portal-loading-bar::after {
        animation: none;
        left: 0;
        width: 100%;
        opacity: 0.6;
    }
}

/* ── Tabellen (orders, facturen, winkelmand, lijstweergave) ────────────────── */

.portal-data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border: 1px solid var(--px-color-border);
    border-radius: var(--px-radius);
    background: var(--px-color-surface);
}

.portal-data-table th,
.portal-data-table td {
    padding: 12px 14px;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--px-color-border);
}

.portal-data-table th {
    background: var(--px-chip-bg);
    color: var(--px-color-accent);
    font-size: 12px;
    font-weight: 600;
}

.portal-data-table tbody tr:last-child td {
    border-bottom: none;
}

.portal-data-table tfoot td {
    border-bottom: none;
    border-top: 2px solid var(--px-color-border);
    background: var(--px-color-surface-2);
}

.portal-data-table .right {
    text-align: right;
}

.portal-data-table__row--clickable {
    cursor: pointer;
    transition: background 0.12s var(--px-ease);
}

.portal-data-table__row--clickable:hover {
    background: var(--px-chip-bg);
}

/* Smalle schermen: de tabel scrolt zijwaarts in plaats van de pagina op te rekken. */
.portal-table-scroll {
    overflow-x: auto;
}

/* ── Statuslabels ──────────────────────────────────────────────────────────── */

.portal-content .px-status-pill {
    display: inline-block;
    padding: 2px 10px;
    font-size: 12px;
}

/* ── Kopgegevens van een order of factuur ──────────────────────────────────── */

.portal-order-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px 24px;
    margin: 16px 0;
    padding: 18px 22px;
    border: 1px solid var(--px-color-border);
    border-radius: var(--px-radius);
    background: var(--px-color-surface);
}

/* "Terug naar ..." boven een detailpagina. */
.portal-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    color: var(--px-color-text-dim);
    font-size: var(--px-font-sm);
    font-weight: 600;
    text-decoration: none;
}

.portal-back:hover {
    color: var(--px-color-accent);
}

.portal-order-meta__full {
    grid-column: 1 / -1;
}

.portal-order-meta__label {
    display: block;
    margin-bottom: 2px;
    color: var(--px-color-text-dim);
    font-size: 12px;
    font-weight: 600;
}

.portal-order-meta__value {
    display: block;
}

.portal-order-meta__address {
    white-space: pre-line;
}

/* ── Pager ─────────────────────────────────────────────────────────────────── */

.portal-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
    margin: 24px 0 8px;
}

.portal-pager__info {
    color: var(--px-color-text-dim);
    font-size: var(--px-font-sm);
}

.portal-pager__pages {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

.portal-pager__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--px-color-border);
    border-radius: var(--px-radius-sm);
    background: var(--px-color-surface);
    color: var(--px-color-text);
    font-family: inherit;
    font-size: var(--px-font-sm);
    font-weight: 600;
    cursor: pointer;
}

.portal-pager__btn:hover:not(:disabled) {
    border-color: var(--px-color-border-strong);
    background: var(--px-color-surface-2);
}

.portal-pager__btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.portal-pager__btn--page {
    padding: 0 10px;
}

.portal-pager__btn--current,
.portal-pager__btn--current:hover:not(:disabled) {
    border-color: transparent;
    background: var(--px-color-primary);
    color: var(--px-color-on-primary);
    cursor: default;
}

.portal-pager__gap {
    padding: 0 4px;
    color: var(--px-color-text-dim);
}

.portal-pager__size {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    color: var(--px-color-text-dim);
    font-size: var(--px-font-sm);
}

.portal-pager__size .px-input {
    width: auto;
    min-height: 34px;
}

/* ── Inloggen, registreren, activeren ──────────────────────────────────────── */

.portal-login-wrapper {
    display: flex;
    justify-content: center;
    padding: 40px 16px;
}

.portal-login-card {
    width: 100%;
    max-width: 440px;
    padding: 28px;
}

.portal-login-tenant {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding: 8px 12px;
    border-radius: var(--px-radius-sm);
    background: var(--px-color-surface-2);
    font-size: var(--px-font-sm);
}

.portal-login-tenant__label {
    color: var(--px-color-text-dim);
}

.portal-login-tenant__name {
    flex: 1;
    font-weight: 600;
}

.portal-login-links {
    margin: 16px 0 0;
    text-align: center;
    font-size: var(--px-font-sm);
}

/* ── Productafbeelding ─────────────────────────────────────────────────────── */

.portal-image-slot {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Hele afbeelding zichtbaar binnen de vaste tegel; de omhulling knipt af. */
.portal-product-card__img,
.portal-product-detail__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.portal-image--loading {
    color: var(--px-color-text-dim);
    font-size: var(--px-font-sm);
    opacity: 0.6;
}

/* ── Inhoud uit de dynamische detailweergave ───────────────────────────────────
   Deze regels horen bij DynamicDetailView, maar gebruiken kale elementnamen (img, table,
   pre, code). Razor ziet die in een <style>-blok van een .razor-bestand aan voor open
   tags, dus staan ze hier. */
.portal-detail-root--detailview .dyn-field__value img {
    max-width: 100%;
    height: auto;
}

.portal-detail-root--detailview .dyn-field__value table {
    max-width: 100%;
}

.portal-detail-root--detailview .dyn-field__value pre,
.portal-detail-root--detailview .dyn-field__value code {
    white-space: pre-wrap;
    word-break: break-word;
}

/* ── Sleepfeedback in de layouteditor (SortableJS zet deze klassen) ────────── */

.portal-sortable-ghost {
    opacity: 0.5;
    background: var(--px-chip-bg) !important;
    border: 2px dashed var(--px-color-primary) !important;
    box-shadow: none !important;
}

.portal-sortable-chosen {
    box-shadow: 0 0 0 2px var(--px-color-primary);
}

.portal-sortable-drag {
    opacity: 0.9;
}