/* ============================================================
   PRISMA TIMBER — EUDR Portal Design System
   Centraal stijlbestand — alle pagina's verwijzen hiernaar
   ============================================================ */

/* ── Lettertypen — allebei zelf gehost, geen enkele externe verbinding ── */
@import url('../fonts/inter.css');                 /* 13-08-2026: was Google Fonts; zie inter.css voor waarom (AVG art. 44) */
@import url('../lib/tabler/tabler-icons.min.css'); /* Stap 7-fix: self-hosted (was jsdelivr-CDN, door CSP geblokkeerd) */

/* ── Design tokens ── */
:root {
    /* Kleuren */
    --pt-sidebar-bg:        #253127;   /* Originele menukleur */
    --pt-sidebar-border:    rgba(255,255,255,0.08);
    --pt-sidebar-text:      rgba(255,255,255,0.65);
    --pt-sidebar-text-dim:  rgba(255,255,255,0.35);
    --pt-sidebar-hover:     rgba(255,255,255,0.07);
    --pt-active:            #e67e22;   /* Oranje — primaire actie */
    /* Aparte, donkerdere tint voor de FOCUSINDICATIE. Gemeten 01-09-2026: de oranje
       --pt-active geeft 1,99:1 tegen de normale veldrand (#d8d8d4) en 2,85:1 tegen het
       witte veld -- beide onder de 3:1 die WCAG 2.2 SC 2.4.11 voor een focusindicator
       vraagt. Wie met Tab door de uploadwizard gaat (dertig velden) kon dus niet zien
       waar hij was. Deze tint haalt 4,31:1 en 3,01:1.
       Bewust een EIGEN token: --pt-active blijft ongewijzigd voor knoppen, want daar
       staat hij op een gevulde achtergrond en heeft hij het probleem niet. */
    --pt-focus:             #b8641b;
    --pt-active-hover:      #d35400;
    --pt-green:             #2e7d52;   /* Groen — succes/verified */
    --pt-green-light:       #e8f5ee;
    --pt-green-text:        #1a7a40;
    --pt-orange-light:      #fff4e6;
    --pt-orange-text:       #b05a00;
    --pt-blue-light:        #e8f0fe;
    --pt-blue-text:         #1a56c4;
    --pt-red-light:         #fdecea;
    --pt-red-text:          #b71c1c;
    --pt-gray-light:        #f2f2f2;
    /* 01-09-2026: #777 gaf 4,24-4,48:1 en bleef daarmee net onder de 4,5:1 van WCAG AA.
       Zeven gebruiken; deze tint haalt het wel en blijft zichtbaar lichter dan
       --pt-text-secondary (#555). */
    --pt-gray-text:         #6d6d6d;

    /* Achtergronden */
    --pt-body-bg:           #fafafa;
    --pt-content-bg:        #ffffff;
    --pt-surface:           #ffffff;
    --pt-surface-alt:       #f8f9f6;
    --pt-border:            #ebebea;

    /* Tekst */
    --pt-text-primary:      #1a1a1a;
    --pt-text-secondary:    #555;
    /* Gemeten 01-09-2026 tegen WCAG 2.1 AA (4,5:1 voor gewone tekst). De oude waarden
       haalden die eis niet, en zelfs de 3:1 voor grote tekst niet:

           #999 op surface / surface-alt / body-bg   2,85 / 2,70 / 2,73 : 1
           #bbb op dezelfde drie                     1,92 / 1,82 / 1,84 : 1

       `--pt-text-muted` staat op 563 plekken in de code -- het is de standaardkleur voor
       toelichtingen, labels en secundaire tekst -- dus dit raakte vrijwel elk scherm. De
       combinatie komt letterlijk zo voor in de views:
       `background:var(--pt-surface-alt); color:var(--pt-text-muted)`.

       De nieuwe waarde is uitgerekend, niet geschat: #727272 is de DONKERSTE waarde die op
       alle drie de achtergronden 4,5:1 haalt (laagste 4,55:1).

       --pt-text-dim KRIJGT DEZELFDE WAARDE, en dat verdient uitleg. Eerst stond hier
       #909090 met de redenering dat 3,02:1 volstaat omdat dim alleen voor grote tekst zou
       zijn. Die aanname is nagemeten en bleek onjuist: van de 30 gebruiken staat hij op
       `font-size:11px` (dashboard), `0.75rem` (logboek) en zelfs `9px` (dossier). Dat is
       kleine tekst, dus daar geldt 4,5:1 onverkort.

       En een LICHTERE tint dan #727272 die tóch 4,5:1 haalt bestaat niet op wit -- de twee
       tokens kunnen dus niet allebei compliant zijn én visueel verschillen. Ze vallen nu
       samen. Wil je het onderscheid terug, dan moet dat via een ANDERE as dan helderheid
       (grootte, gewicht, of een echt grote-tekst-context); dat is een ontwerpkeuze en geen
       kleurwaarde. */
    --pt-text-muted:        #727272;
    --pt-text-dim:          #727272;

    /* Layout */
    --pt-sidebar-width:          240px;
    --pt-sidebar-collapsed-width: 64px;
    --pt-transition:             0.25s ease;
    --pt-radius-sm:              6px;
    --pt-radius-md:              8px;
    --pt-radius-lg:              12px;

    /* Typografie */
    --pt-font:  'Inter', 'Segoe UI', sans-serif;
    --pt-mono:  'Consolas', 'Monaco', monospace;

    /* Accent-families zonder eerdere token (layout-consolidatie) */
    --pt-purple:            #7c3aed;   /* Transform/productie & agent-accent */
    --pt-purple-light:      #f5f3ff;
    --pt-purple-text:       #5b21b6;
    --pt-gold:              #d4af37;   /* Audit-keten badge */
    --pt-gold-light:        #fbf3d5;
    --pt-gold-text:         #8a6d1f;

    /* Semantische rand-tinten (formaliseert de waarden uit .pt-alert-*) —
       voor gekleurde panelen/inputs; badges/tags blijven borderloos. */
    --pt-green-border:      #86efac;
    --pt-red-border:        #fca5a5;
    --pt-orange-border:     #fde68a;
    --pt-blue-border:       #bfdbfe;
    --pt-purple-border:     #c4b5fd;
}

/* ── Reset & base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scrollbar-gutter: stable; }
body {
    font-family: var(--pt-font);
    background: var(--pt-body-bg);
    color: var(--pt-text-primary);
    display: flex;
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.sidebar {
    width: var(--pt-sidebar-width);
    background: var(--pt-sidebar-bg);
    color: var(--pt-sidebar-text);
    height: 100vh;
    position: fixed;
    left: 0; top: 0;
    display: flex;
    flex-direction: column;
    z-index: 1000;
    transition: width var(--pt-transition);
    overflow: hidden;
}

/* Logo / header */
.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 14px 14px;
    border-bottom: 1px solid var(--pt-sidebar-border);
    flex-shrink: 0;
}
.sidebar-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}
.sidebar-logo-img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    flex-shrink: 0;
    /* Wit maken voor donkere achtergrond */
    filter: brightness(0) invert(1);
}
.sidebar-logo-words { line-height: 1.2; }
.sidebar-logo-prisma {
    font-size: 8px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--pt-sidebar-text-dim);
    font-weight: 400;
    display: block;
}
.sidebar-logo-timber {
    font-size: 14px;
    font-weight: 600;
    color: white;
    letter-spacing: 0.2px;
    display: block;
}
.toggle-btn {
    background: none;
    border: none;
    color: var(--pt-sidebar-text-dim);
    cursor: pointer;
    font-size: 11px;
    padding: 4px 6px;
    border-radius: var(--pt-radius-sm);
    transition: color var(--pt-transition);
    flex-shrink: 0;
}
.toggle-btn:hover { color: white; }

/* Nav */
.sidebar nav {
    flex: 1;
    overflow-y: auto;
    padding: 8px 8px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    display: flex;
    flex-direction: column;
}
.sidebar nav::-webkit-scrollbar { display: none; }
/* Duwt dit item (en alles erna) naar de onderkant van de nav, net boven de
   streep van het gebruikersblok. Bij een te lang menu valt de auto-marge terug
   naar 0 en scrollt de nav gewoon. */
.sidebar nav .nav-bottom { margin-top: auto; }

.nav-section-label {
    font-size: 9px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--pt-sidebar-text-dim);
    padding: 10px 8px 4px;
    display: block;
}
.nav-divider {
    border: none;
    border-top: 1px solid var(--pt-sidebar-border);
    margin: 8px 0;
}
.nav-link {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border-radius: var(--pt-radius-sm);
    color: var(--pt-sidebar-text);
    text-decoration: none;
    font-size: 13px;
    margin-bottom: 1px;
    transition: background var(--pt-transition), color var(--pt-transition);
    white-space: nowrap;
}
.nav-link i {
    font-size: 16px;
    flex-shrink: 0;
    min-width: 18px;
    text-align: center;
}
.nav-link:hover {
    background: var(--pt-sidebar-hover);
    color: white;
}
.nav-link.active {
    background: var(--pt-active);
    color: white;
    font-weight: 500;
}
.nav-link.active i { color: white; }
.nav-link.nav-logout { color: #f87171; }
.nav-link.nav-logout:hover { background: rgba(248,113,113,0.12); color: #fca5a5; }
/* Uitloggen gaat via POST met CSRF-token (gouden regel 3), dus dat item is een
   <button> in een <form> waar de andere nav-items een <a> zijn. Deze regel haalt de
   knop-opmaak van de browser eraf; de rest van het uiterlijk komt uit .nav-link zelf. */
button.nav-link {
    width: 100%;
    background: none;
    border: 0;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

/* User footer */
.sidebar-user {
    padding: 12px 12px 14px;
    border-top: 1px solid var(--pt-sidebar-border);
    flex-shrink: 0;
}
.sidebar-user-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: rgba(255,255,255,0.7);
    margin-bottom: 5px;
}
.sidebar-user-row i { font-size: 15px; opacity: 0.55; }
.sidebar-user-row strong { font-weight: 600; }
.sidebar-user-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    margin-top: 6px;
}
.sidebar-user-id { color: rgba(255,255,255,0.35); }
.sidebar-user-id strong { color: rgba(255,255,255,0.55); }
/* Instellingen-link in de gebruikersbalk (was inline onmouseover/onmouseout — CSP) */
.sidebar-settings-link {
    color: rgba(255,255,255,0.6);
    transition: color 0.15s;
}
.sidebar-settings-link:hover,
.sidebar-settings-link:focus-visible {
    color: #ffffff;
}
.sidebar-rol-badge {
    background: rgba(255,255,255,0.1);
    padding: 1px 6px;
    border-radius: 4px;
    color: rgba(255,255,255,0.75);
    font-weight: 600;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Collapsed state */
body.collapsed .sidebar { width: var(--pt-sidebar-collapsed-width); }
body.collapsed .main-content { margin-left: var(--pt-sidebar-collapsed-width); }
body.collapsed .sidebar-logo-words,
body.collapsed .nav-text,
body.collapsed .nav-section-label,
body.collapsed .sidebar-user { display: none; }
body.collapsed .sidebar-logo-img { width: 28px; height: 28px; }
body.collapsed .nav-link { justify-content: center; padding: 10px; }
body.collapsed .nav-link i { min-width: unset; }

/* ============================================================
   MAIN CONTENT
   ============================================================ */
.main-content {
    flex: 1;
    margin-left: var(--pt-sidebar-width);
    padding: 32px 36px;
    min-height: 100vh;
    transition: margin-left var(--pt-transition);
    background: var(--pt-body-bg);
}

/* Onderstreepte paginatabs (gedeeld door Trade Hub, Transform, e.a.).
   Eén centrale definitie zodat de tabbladen overal dezelfde stijl hebben. */
.tab-btn {
    padding: 12px 20px;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.85rem;
    color: #94a3b8;
    border: none;
    background: none;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.tab-btn.active { color: #253127; border-bottom: 2px solid #253127; }

/* Page header */
.page-header {
    margin-bottom: 28px;
}
.page-header h1 {
    font-size: 22px;
    font-weight: 700;
    color: var(--pt-text-primary);
    margin-bottom: 4px;
}
.page-header p {
    font-size: 13px;
    color: var(--pt-text-muted);
}

/* ============================================================
   CARDS & SURFACES
   ============================================================ */
.pt-card {
    background: var(--pt-surface);
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius-lg);
    padding: 20px 24px;
}
.pt-card-sm { padding: 14px 16px; }

/* KPI stats */
.pt-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}
.pt-kpi {
    background: var(--pt-surface);
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius-md);
    padding: 14px 16px;
}
.pt-kpi-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--pt-text-muted);
    margin-bottom: 6px;
}
.pt-kpi-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--pt-text-primary);
    line-height: 1;
}
.pt-kpi-unit {
    font-size: 11px;
    color: var(--pt-text-muted);
    font-weight: 400;
    margin-left: 3px;
}
.pt-kpi-hint {
    font-size: 11px;
    margin-top: 5px;
    color: var(--pt-text-muted);
}

/* ============================================================
   TABELLEN
   ============================================================ */
.pt-table-wrap {
    background: var(--pt-surface);
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius-lg);
    overflow: hidden;
}
.pt-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.pt-table thead th {
    background: var(--pt-surface-alt);
    border-bottom: 1px solid var(--pt-border);
    padding: 9px 14px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--pt-text-muted);
    text-align: left;
}
.pt-table tbody tr {
    border-bottom: 1px solid #f4f4f2;
    transition: background var(--pt-transition);
}
.pt-table tbody tr:last-child { border-bottom: none; }
.pt-table tbody tr:hover { background: #fafaf8; }
.pt-table tbody td {
    padding: 10px 14px;
    color: var(--pt-text-primary);
    vertical-align: middle;
}
.pt-table .mono {
    font-family: var(--pt-mono);
    font-size: 11px;
    font-weight: 600;
}

/* ============================================================
   STATUS TAGS / BADGES
   ============================================================ */
.pt-tag {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: 100px;
    white-space: nowrap;
}
.pt-tag-ok       { background: var(--pt-green-light);  color: var(--pt-green-text); }
.pt-tag-pending  { background: var(--pt-orange-light); color: var(--pt-orange-text); }
.pt-tag-info     { background: var(--pt-blue-light);   color: var(--pt-blue-text); }
.pt-tag-danger   { background: var(--pt-red-light);    color: var(--pt-red-text); }
.pt-tag-neutral  { background: var(--pt-gray-light);   color: var(--pt-gray-text); }

/* ============================================================
   KNOPPEN
   ============================================================ */
.pt-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border-radius: var(--pt-radius-sm);
    font-size: 12.5px;
    font-weight: 500;
    border: 1px solid;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--pt-transition), transform 0.1s;
    white-space: nowrap;
    font-family: var(--pt-font);
}
.pt-btn:active { transform: scale(0.98); }
.pt-btn i { font-size: 15px; }

.pt-btn-primary  { background: var(--pt-active);  border-color: var(--pt-active);  color: white; }
.pt-btn-primary:hover { background: var(--pt-active-hover); border-color: var(--pt-active-hover); }

.pt-btn-secondary { background: white; border-color: #d4d4d0; color: var(--pt-text-secondary); }
.pt-btn-secondary:hover { background: #f5f5f3; }

.pt-btn-success  { background: var(--pt-green);   border-color: var(--pt-green);   color: white; }
.pt-btn-danger   { background: #e53e3e;            border-color: #e53e3e;           color: white; }
.pt-btn-sm       { padding: 5px 12px; font-size: 11.5px; }

/* ============================================================
   FORMULIEREN
   ============================================================ */
.pt-form-group { margin-bottom: 16px; }
.pt-label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--pt-text-secondary);
    margin-bottom: 5px;
}
.pt-input,
.pt-select,
.pt-textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #d8d8d4;
    border-radius: var(--pt-radius-sm);
    font-size: 13px;
    font-family: var(--pt-font);
    color: var(--pt-text-primary);
    background: white;
    transition: border-color var(--pt-transition);
    outline: none;
}
.pt-input:focus,
.pt-select:focus,
.pt-textarea:focus {
    /* Kleur EN dikte. Contrast alleen is niet genoeg voor wie kleuren slecht
       onderscheidt; een verschil dat ook in dikte zichtbaar is, werkt voor meer mensen.
       De 1px extra rand valt binnen de bestaande padding, dus het veld verspringt niet. */
    border-color: var(--pt-focus);
    box-shadow: 0 0 0 1px var(--pt-focus);
}
.pt-input:disabled,
.pt-select:disabled { background: #f5f5f3; color: var(--pt-text-muted); }

/* ============================================================
   TOPBAR (per pagina)
   ============================================================ */
.pt-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--pt-border);
}
.pt-topbar-left {
    display: flex;
    align-items: center;
    gap: 10px;
}
.pt-topbar-icon {
    font-size: 20px;
    color: var(--pt-active);
}
.pt-topbar-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--pt-text-primary);
}
.pt-topbar-right { display: flex; gap: 8px; align-items: center; }

/* Subkop — sectietitel binnen een pagina; bewust subtieler dan de .pt-topbar hoofdkop */
.pt-subhead {
    font-size: 14px;
    font-weight: 600;
    color: var(--pt-text-secondary);
    margin: 20px 0 10px;
    display: flex;
    align-items: center;
    gap: 7px;
}
.pt-subhead .ti { font-size: 15px; color: var(--pt-text-muted); }

/* ============================================================
   ALERTS / MELDINGEN
   ============================================================ */
.pt-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border-radius: var(--pt-radius-md);
    font-size: 13px;
    margin-bottom: 16px;
}
.pt-alert-warning { background: #fff8ec; border: 1px solid #fde68a; color: #92400e; }
.pt-alert-info    { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; }
.pt-alert-success { background: var(--pt-green-light); border: 1px solid #86efac; color: #166534; }
.pt-alert-danger  { background: var(--pt-red-light); border: 1px solid #fca5a5; color: #991b1b; }

/* ============================================================
   UTILITIES
   ============================================================ */
.pt-mono { font-family: var(--pt-mono); font-size: 11px; font-weight: 600; }
.pt-text-muted { color: var(--pt-text-muted); }
.pt-text-success { color: var(--pt-green-text); }
.pt-text-warning { color: var(--pt-orange-text); }
.pt-text-danger  { color: var(--pt-red-text); }
.pt-flex { display: flex; align-items: center; gap: 8px; }
.pt-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pt-grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
/* Tekst die alleen een schermlezer voorleest — voor een icoon dat visueel
   iets betekent maar zonder woorden geen betekenis heeft. */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
.pt-mb-4  { margin-bottom: 4px; }
.pt-mb-8  { margin-bottom: 8px; }
.pt-mb-16 { margin-bottom: 16px; }
.pt-mb-24 { margin-bottom: 24px; }

/* ============================================================
   EIGEN ICOON: EU-STERRENKRING
   ============================================================ */
/* Tabler heeft geen EU-icoon, dus staat dit icoon als los SVG-bestand in
   assets/img/. Het wordt als masker gebruikt: het bestand bepaalt de vorm,
   currentColor de kleur. Daardoor gedraagt het zich als elk ander ti-icoon —
   schaalt mee met font-size en kleurt mee met color, dus de aanroepers kunnen
   'ti ti-shield-check' één-op-één vervangen door 'ti pt-ti-eu-check'. */
.pt-ti-eu-check {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    background-color: currentcolor;
    -webkit-mask: url('../img/icoon-eu-check.svg') no-repeat center / contain;
    mask: url('../img/icoon-eu-check.svg') no-repeat center / contain;
}

/* ════════════════════════════════════════════════════════════════════════════
   RESPONSIVE — FASE 1
   ════════════════════════════════════════════════════════════════════════════

   WAT DIT WEL DOET: zorgen dat geen enkel scherm nog HORIZONTAAL schuift op een
   telefoon. Het menu schuift uit beeld en komt terug met een knop, roosters vallen
   terug naar één kolom, rijen die naast elkaar stonden vouwen om, en een brede tabel
   scrollt binnen zijn eigen kader in plaats van de hele pagina mee te trekken.

   WAT DIT NIET DOET: de schermen mooi maken. Koppen, tabbalken en de zwaarste
   tabellen verdienen daarna per scherm aandacht. Dit is de laag eronder.

   WAAROM ATTRIBUUTSELECTORS. De opmaak van dit portaal zit voor het overgrote deel
   in inline `style="..."`-attributen: gemeten 4343 stuks over 77 bestanden. Een
   mediaquery kan een inline stijl niet overschrijven met een gewone selector, want
   inline wint altijd — behalve met `!important`. En je kunt er niet bij via een
   klasse, want die is er niet.

   `[style*="grid-template-columns"]` pakt daarom alle 85 roosters in één regel, in
   plaats van 85 klassen te moeten introduceren in 54 bestanden. Dat is bewust bot:
   het is de goedkoopste manier om de ONDERSTE laag goed te krijgen, en het is in één
   commit terug te draaien. Waar een scherm daarna eigen aandacht krijgt, kan de regel
   voor dat scherm worden verfijnd.

   HET `!important`-GEBRUIK is hier dus geen slordigheid maar de enige manier om een
   inline stijl te overrulen. Buiten deze mediaquery staat er geen enkele.

   GEMETEN OP 375px, vóór en ná (aantal elementen breder dan de viewport):

       productiescherm    45 -> 0     pagina scrollt niet meer zijwaarts
       Trade Hub          43 -> 0     tabel scrollt intern: 349 zichtbaar, 852 inhoud

   De grens ligt op 900px en niet op 768: bij 240px menu plus twee kolommen inhoud
   wordt het daaronder al krap, en een tablet in staande stand valt dan ook goed.
   ════════════════════════════════════════════════════════════════════════════ */
/* Buiten de mediaquery bestaan de twee nieuwe elementen niet: op een desktop hoort het
   menu er gewoon te staan.

   DEZE REGEL MOET VÓÓR DE MEDIAQUERY STAAN, en dat is geen stijlkeuze. Stond hij erna,
   dan wint hij bij gelijke specificiteit van het `display:flex` daarbinnen en blijft de
   hamburger ONZICHTBAAR — precies wat er gebeurde, en wat pas opviel bij een meting op
   een echte smalle viewport: `knop=none` terwijl de rest van de query wél vuurde. */
.pt-menu-knop,
.pt-menu-laag { display: none; }

@media (max-width: 900px) {

    /* ── Het menu schuift uit beeld ───────────────────────────────────────────
       De ingeklapte stand (64px) bestond al; hier gaat hij hélemaal weg, zodat de
       inhoud de volle breedte krijgt. `body.menu-open` schuift hem terug. */
    .sidebar {
        transform: translateX(-100%);
        transition: transform var(--pt-transition);
        width: var(--pt-sidebar-width);   /* ook in de ingeklapte stand volle breedte
                                             zodra hij openschuift */
    }
    body.menu-open .sidebar { transform: translateX(0); }

    /* De inklapknop in het menu zelf heeft op een telefoon geen functie meer: het
       menu is er of het is er niet. */
    .toggle-btn { display: none; }

    .main-content,
    body.collapsed .main-content {
        margin-left: 0 !important;
        padding: 16px 12px;
        /* Zonder deze twee groeit de inhoud mee met de breedste tabel eronder, en
           schuift de HELE pagina in plaats van alleen die tabel. */
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box;
    }

    /* De hamburger. Staat vast linksboven zodat hij ook bij het scrollen bereikbaar
       blijft — op een telefoon is teruggescrollen naar de top duur. */
    .pt-menu-knop {
        display: flex;
        position: fixed;
        top: 10px;
        left: 10px;
        z-index: 1100;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border: 1px solid var(--pt-border);
        border-radius: var(--pt-radius-sm);
        background: var(--pt-surface);
        color: var(--pt-text-primary);
        font-size: 18px;
        cursor: pointer;
        box-shadow: 0 1px 3px rgba(0,0,0,.12);
    }
    /* Ruimte voor die knop, zodat hij niet over de paginakop valt. */
    .main-content { padding-top: 60px; }

    /* Een donkere laag over de inhoud terwijl het menu open staat: zonder die laag
       is niet te zien dat er iets bovenop ligt, en tikt iemand per ongeluk door. */
    .pt-menu-laag {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 900;
        background: rgba(0,0,0,.35);
    }
    body.menu-open .pt-menu-laag { display: block; }

    /* ── Roosters naar één kolom ──────────────────────────────────────────────
       Zie de toelichting boven deze mediaquery voor waarom dit op het
       style-attribuut gebeurt en niet op een klasse. */
    [style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }

    /* ── Rijen die naast elkaar stonden, vouwen om ────────────────────────────
       676 flex-containers, waarvan er maar 85 flex-wrap hadden. Zonder deze regel
       persen de overige 591 hun inhoud samen tot onleesbaar smal. */
    [style*="display:flex"],
    [style*="display: flex"] {
        flex-wrap: wrap !important;
    }

    /* Een flexitem met `flex:1` krijgt bij het omvouwen een HELE regel.

       Zonder deze regel gaat het juist mis door de vorige: in een rij van het type
       "titel links, knoppen rechts" houdt de knoppenkant zijn breedte, en het
       titelblok — dat `flex:1; min-width:0` draagt — krimpt tot wat er overblijft.
       Gemeten in de browser op de Trade Hub: 3 PIXELS, waardoor de kop "Trade Hub"
       in één woord per regel uiteenviel. Met een volle regel is hij 351px.

       Dit is bewust smaller dan `flex-direction: column` op zulke rijen: die variant
       is óók geprobeerd en liet de brede tabel weer uit zijn kader lopen. */
    [style*="flex:1"],
    [style*="flex: 1"] {
        flex-basis: 100% !important;
    }

    /* ── Vaste minimumbreedtes loslaten ───────────────────────────────────────
       Een `min-width: 420px` op een kaart is op een desktop een ondergrens en op een
       telefoon een garantie op horizontaal schuiven. */
    [style*="min-width"] { min-width: 0 !important; }

    /* ── Brede tabellen scrollen BINNEN hun eigen kader ───────────────────────
       Niet omvormen tot kaartjes: dat is per tabel maatwerk (18 van de 43 schermen
       hebben er een) en hoort bij fase 2. Intern scrollen is de goedkope, veilige
       tussenstap — de gegevens blijven volledig bereikbaar.

       NIET `display:block` op de TABEL zelf, en dat is in de browser nagemeten: dan
       verliest hij zijn `colgroup`-breedtes en kromp hij mee tot 349px, met kolommen
       die niet meer te lezen zijn. Het is de WRAPPER die moet scrollen; de tabel houdt
       een ondergrens zodat de kolommen leesbaar blijven. `.pt-table-wrap` bestond al
       (met `overflow-x: clip`), dus er komt geen nieuwe laag bij. */
    .pt-table-wrap {
        overflow-x: auto !important;
        max-width: 100% !important;
        -webkit-overflow-scrolling: touch;
    }
    .pt-table-wrap table {
        width: auto !important;
        max-width: none;
        min-width: 640px;
    }

    /* NIET ELKE TABEL ZIT IN DIE WRAPPER, en dat kwam pas boven bij een meting op een
       echte smalle viewport: het productiescherm heeft er geen en liep daardoor over
       (35 elementen te breed). Zo'n kale tabel scrollt daarom zelf.

       Dat kost hem zijn colgroup-breedtes — maar de tabellen die colgroup GEBRUIKEN
       zitten juist in een wrapper (gemeten: dossier heeft beide, productie geen van
       beide), dus in de praktijk raakt deze regel alleen tabellen die er niets aan
       verliezen. Een wrapper toevoegen in de views is netter en hoort bij fase 2. */
    .main-content table:not(.pt-table-wrap table) {
        display: block;
        width: 100% !important;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Wat sowieso nooit breder mag zijn dan het scherm. Bewust NIET `body *`: dat
       trof ook tekstblokken in een flexrij, en dan brak een kop af tot één woord per
       regel. Gemeten op Trade Hub — de kop "Trade Hub" viel in twee regels uiteen. */
    .main-content img,
    .main-content pre,
    .main-content canvas,
    .main-content iframe { max-width: 100%; }
}

/* ── Trade Hub-lijstweergave op smalle schermen (B25) ─────────────────────────────────
 *
 * HET PROBLEEM, GEMETEN OP 06-09-2026 met een echt gerenderde pagina op 375px:
 *
 *     tabelbreedte   961px (inkoop) / 1001px (verkoop)
 *     beschikbaar    349px
 *
 * De pagina liep niet over -- er zit al een `overflow-x:auto` om de tabel -- maar je
 * schoof per rij bijna drie schermbreedtes opzij. Zeven kolommen hebben daar geen
 * zinnige vorm.
 *
 * WAAROM GEEN TERUGVAL OP DE BUCKETWEERGAVE, zoals het oorspronkelijke voorstel zei. Die
 * keuze valt SERVERSIDE (`?weergave=lijst`, `dossier_include.php` r80 en r2299), dus de
 * bucket-markup staat niet in de DOM en CSS kan er niet naartoe terugvallen. Het
 * alternatief -- een JS-redirect op vensterbreedte -- zou de gebruiker overrulen die net
 * bewust op de lijstknop heeft geklikt.
 *
 * WAAROM GEEN KOLOMMEN VERBERGEN. Dat paste wél (gemeten: 349px met vier kolommen), maar
 * het laat stil informatie verdwijnen: leverancier, datum en Verified zijn dan weg zonder
 * dat er iets zegt dat ze bestaan. Stapelen toont alles.
 *
 * WAT ER WEL SNEUVELT: de kolomkoppen zijn de sorteerknoppen, en die zijn gestapeld
 * betekenisloos. Sorteren vervalt dus onder 900px; zoeken en het fasefilter blijven. Dat
 * is een bewuste ruil en geen omissie.
 *
 * `td[data-label]` komt uit `tradehub_lijst.js`; de detailpanelen (`js-lijst-paneel`)
 * hebben het bewust niet en blijven een blok over de volle breedte.
 *
 * EEN TWEEDE @media OP DEZELFDE BREEKGRENS, en dat is geen slordigheid. De eerste (de
 * sidebar, hierboven) staat op precies 900px en dat is hier overgenomen in plaats van een
 * eigen getal te kiezen -- twee breekgrenzen die net verschillen geven een strook breedtes
 * waarin het menu al is ingeklapt en de tabel nog niet, of andersom. Ze samenvoegen tot
 * een blok zou de sidebar- en lijstregels door elkaar zetten; apart houden leest beter en
 * kost niets, want de browser voegt gelijke queries zelf samen.
 */
@media (max-width: 900px) {
    /* Visueel weg maar leesbaar voor een schermlezer -- de labels hieronder herhalen de
       kolomnaam per cel, dus de kop zelf hoeft niet in beeld. */
    table.pt-lijst thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    table.pt-lijst,
    table.pt-lijst tbody,
    table.pt-lijst tr,
    table.pt-lijst td { display: block; width: auto; }

    table.pt-lijst tr:not(.js-lijst-paneel) {
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        margin: 0 0 10px;
        padding: 6px 2px;
        background: #fff;
    }

    /* De inline `white-space:nowrap` en `max-width` van de cellen moeten hier wijken:
       ze zijn er voor een tabelkolom en maken een gestapelde regel juist onleesbaar. */
    table.pt-lijst td[data-label] {
        display: flex;
        gap: 10px;
        align-items: baseline;
        padding: 5px 12px !important;
        white-space: normal !important;
        max-width: none !important;
        overflow: visible !important;
        text-align: left !important;
    }

    table.pt-lijst td[data-label]:not([data-label=""])::before {
        content: attr(data-label);
        flex: 0 0 40%;
        font-size: 0.64rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .03em;
        color: #94a3b8;
    }
}