/* Gedeeld Bricqer-stijl design-systeem.
   Stond tot 03-08-2026 als <style> in elke pagina (17 KB per antwoord, 6 KB na gzip, en de
   browser parseerde hem bij elke Livewire-ronde opnieuw). Nu een eigen bestand, zodat de
   browser hem één keer ophaalt en daarna uit zijn cache haalt.
   Bewerken doe je HIER; resources/views/partials/bricqer-styles.blade.php verwijst er alleen
   naar. Geen buildstap: public/build staat in .gitignore, dus een Vite-entry zou op de server
   ontbreken tot iemand npm run build draait. */

    [x-cloak] { display:none !important; }
    .bq { --blue:#2563eb; --green:#166534; --ink:#111827; --muted:#6b7280; --line:#e5e7eb; --soft:#f3f4f6; }
    .bq * { box-sizing:border-box; }
    .bq-muted { color:#6b7280; }
    .bq-row { display:flex; align-items:center; gap:8px; }
    .bq-spread { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }

    /* Cards */
    .bq-card { background:#fff; border:1px solid #eef0f3; border-radius:6px; padding:18px; margin-bottom:14px; box-shadow:0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.07); transition:box-shadow .16s ease; }
    .bq-card:hover { box-shadow:0 4px 14px rgba(16,24,40,.08), 0 2px 5px rgba(16,24,40,.05); }
    .bq-card h2 { margin:0 0 12px; font-size:16px; }
    .bq-card h3 { margin:0 0 12px; font-size:16px; display:flex; align-items:center; justify-content:space-between; }

    /* Buttons */
    .bq-btn { display:inline-flex; align-items:center; gap:7px; border:none; border-radius:6px; padding:9px 15px; font-weight:600; font-size:14px; cursor:pointer; line-height:1.2; }
    .bq-btn.primary { background:#2563eb; color:#fff; }
    .bq-btn.green { background:#166534; color:#fff; }
    .bq-btn.ghost { background:#f3f4f6; color:#374151; }
    .bq-btn.soft { background:#eff6ff; color:#2563eb; border:1px solid #dbeafe; }
    .bq-btn.danger { background:#fef2f2; color:#b91c1c; border:1px solid #fecaca; }
    .bq-btn:hover { filter:brightness(.97); }
    .bq-btn:disabled { opacity:.5; cursor:not-allowed; }
    .bq-iconbtn { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:6px; border:1px solid #e5e7eb; background:#fff; color:#6b7280; cursor:pointer; }
    .bq-iconbtn:hover { color:#2563eb; background:#eff6ff; }

    /* Split button */
    .bq-split { display:inline-flex; }
    .bq-split .primary { border-radius:6px 0 0 6px; }
    .bq-split .caret { background:#2563eb; color:#fff; border:none; border-left:1px solid rgba(255,255,255,.3); padding:0 10px; cursor:pointer; border-radius:0 6px 6px 0; display:inline-flex; align-items:center; }

    /* Badges. Nooit afbreken: een badge is één etiket en las over twee regels als "WACHT OP /
       BETALING", waardoor de orderregel ook nog eens hoger werd dan de rest. Liever uitsteken
       dan afbreken; de teksten zijn kort en de kolom groeit gewoon mee. */
    .bq-badge { display:inline-flex; align-items:center; gap:6px; border-radius:6px; padding:3px 10px; font-size:12px; font-weight:700; letter-spacing:.02em; white-space:nowrap; }
    .bq-badge.gray { background:#eef2f7; color:#475569; }
    .bq-badge.blue { background:#dbeafe; color:#1e40af; }
    .bq-badge.green { background:#dcfce7; color:#166534; }
    .bq-badge.amber { background:#fef3c7; color:#92400e; }
    .bq-badge.navy { background:#e0e7ff; color:#3730a3; }
    .bq-badge.red { background:#fee2e2; color:#991b1b; }

    /* Statusbadges (x-bq.status-badge) staan met tientallen onder elkaar in de orderlijst. Als
       gevulde, vetgedrukte blokjes trokken ze alle aandacht naar zich toe, terwijl de status van
       een order iets is dat je terloops afleest. Dus: lichter vlak, dunnere letter, geen kleurvlek.
       Rood blijft ongemoeid — NIET BETAALD en GEANNULEERD MOETEN opvallen. */
    .bq-badge.status { font-weight:600; font-size:11px; padding:2px 8px; background:#f4f6f8; color:#64748b; }
    .bq-badge.status.blue { background:#f1f5fb; color:#4a6fa5; }
    .bq-badge.status.navy { background:#f2f3fb; color:#5158a0; }
    .bq-badge.status.amber { background:#fbf6ea; color:#96702a; }
    .bq-badge.status.green { background:#f1f8f3; color:#42775a; }
    .bq-badge.status.gray { background:#f4f6f8; color:#6b7280; }
    .bq-dot { width:13px; height:13px; border-radius:3px; border:1px solid #bbb; display:inline-block; flex:none; }

    /* Chips */
    .bq-chip { border:1px solid #d1d5db; background:#fff; border-radius:6px; padding:6px 12px; cursor:pointer; font-weight:600; font-size:13px; display:inline-flex; align-items:center; gap:6px; }
    .bq-chip.on { background:#2563eb; color:#fff; border-color:#2563eb; }

    /* Inputs */
    .bq-input, .bq-select { border:1px solid #d1d5db; border-radius:6px; padding:9px 11px; font-size:14px; background:#fff; }
    .bq-field { display:flex; flex-direction:column; gap:4px; font-size:13px; color:#374151; margin-bottom:12px; }
    .bq-field > input, .bq-field > select, .bq-field > textarea { border:1px solid #d1d5db; border-radius:6px; padding:9px 11px; font-size:15px; }

    /* Stat cards */
    .bq-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:16px; }
    .bq-stat { background:#fff; border:1px solid #eef0f3; border-radius:6px; padding:16px 18px; box-shadow:0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.07); }
    .bq-stat .lbl { font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:#6b7280; font-weight:700; }
    .bq-stat .val { font-size:26px; font-weight:800; color:#111827; margin-top:6px; }
    .bq-stat .bar { height:4px; border-radius:2px; background:#2563eb; margin-top:12px; width:40%; }

    /* Info grid (3 blocks) */
    .bq-info-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:14px; }
    .bq-info-row { display:flex; align-items:baseline; gap:10px; padding:6px 0; font-size:14px; }
    .bq-info-row .lbl { color:#6b7280; width:120px; flex:none; }
    .bq-info-row .val { font-weight:400; color:#111827; }
    .bq-info-row .sub { margin-left:auto; color:#6b7280; font-size:13px; }

    /* Tables */
    table.bq-table { width:100%; border-collapse:collapse; font-size:14px; }
    table.bq-table th { text-align:left; color:#6b7280; font-size:12px; border-bottom:1px solid #e5e7eb; padding:9px 8px; font-weight:700; }
    table.bq-table td { padding:10px 8px; border-bottom:1px solid #f3f4f6; vertical-align:middle; }
    table.bq-table tr.click { cursor:pointer; }
    table.bq-table tr.click:hover td { background:#f8faff; }
    table.bq-table img.thumb { width:44px; height:44px; object-fit:contain; background:transparent; border-radius:6px; }

    /* Rows / list items */
    .bq-item { display:flex; align-items:center; gap:12px; padding:12px 6px; border-bottom:1px solid #f3f4f6; }
    .bq-item:hover { background:#f8faff; }

    /* Dropdown menu */
    .bq-pos { position:relative; }
    /* max-height + scroll: een lang menu (filter + sortering samen zijn tien regels) liep het scherm
       uit en de onderste keuzes waren niet te bereiken. Nu scrollt het menu zelf en houdt het ruimte
       tot de onderrand. overscroll-behavior houdt de pagina eronder stil terwijl je in het menu veegt. */
    .bq-menu { position:absolute; z-index:60; right:0; background:#fff; border:1px solid #e5e7eb; border-radius:6px; box-shadow:0 10px 30px rgba(0,0,0,.15); min-width:300px; padding:6px; margin-top:6px;
        max-height:min(58vh, 440px); overflow-y:auto; overscroll-behavior:contain; }
    .bq-menu.left { right:auto; left:0; }
    .bq-menu.wide { min-width:326px; }
    .bq-menu-item { display:flex; gap:10px; align-items:flex-start; padding:9px 10px; border-radius:6px; cursor:pointer; color:#374151; }
    .bq-menu-item:hover { background:#f3f4f6; }
    .bq-menu-item.on { background:#dbeafe; }
    .bq-menu-item .t { font-weight:600; color:#111827; font-size:14px; }
    .bq-menu-item .d { color:#6b7280; font-size:12px; }
    .bq-menu-item.danger, .bq-menu-item.danger .t { color:#b91c1c; }
    .bq-menu-item.danger:hover { background:#fef2f2; }
    .bq-menu-sep { height:1px; background:#f3f4f6; margin:6px 4px; }
    .bq-menu-head { font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:#6b7280; font-weight:700; padding:8px 10px 4px; }

    /* Modal */
    .bq-modal-bg { position:fixed; inset:0; background:rgba(15,23,42,.45); z-index:100; display:flex; align-items:flex-start; justify-content:center; padding:40px 16px; overflow:auto; }
    .bq-modal { background:#fff; border-radius:6px; width:100%; max-width:640px; box-shadow:0 20px 60px rgba(0,0,0,.3); }
    .bq-modal-head { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid #f3f4f6; }
    .bq-modal-head h3 { margin:0; font-size:17px; }
    .bq-modal-body { padding:20px; }
    .bq-modal-foot { display:flex; align-items:center; justify-content:flex-end; gap:8px; padding:14px 20px; border-top:1px solid #f3f4f6; }

    /* Sticky bars */
    .bq-sticky-top { position:sticky; top:0; z-index:30; background:#111827; color:#fff; display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-radius:6px; margin-bottom:14px; }
    .bq-sticky-bottom { position:sticky; bottom:0; z-index:30; background:#fff; border-top:1px solid #e5e7eb; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; box-shadow:0 -6px 20px rgba(0,0,0,.06); }

    /* Left subnav for module pages */
    .bq-layout { display:grid; grid-template-columns:230px 1fr; gap:18px; align-items:start; }
    .bq-subnav { background:#fff; border:1px solid #e5e7eb; border-radius:6px; padding:8px; }
    .bq-subnav a { display:block; padding:10px 12px; border-radius:6px; color:#374151; text-decoration:none; }
    .bq-subnav a .t { font-weight:600; font-size:14px; display:flex; align-items:center; gap:8px; }
    .bq-subnav a .d { color:#6b7280; font-size:12px; margin-left:24px; }
    .bq-subnav a.on, .bq-subnav a:hover { background:#eff6ff; color:#2563eb; }
    .bq-subnav a.on .t, .bq-subnav a:hover .t { color:#2563eb; }

    /* Product-grid (catalogus/voorraad kiezen) */
    .bq-modal.full { max-width:96vw; width:96vw; }
    .bq-filters { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
    .bq-fbtn { display:inline-flex; align-items:center; gap:6px; border:1px solid #e5e7eb; background:#fff; border-radius:6px; padding:7px 14px; font-weight:600; font-size:13px; cursor:pointer; color:#374151; }
    .bq-fbtn.on { background:#eff6ff; border-color:#bfdbfe; color:#2563eb; }
    .bq-fsel { border:1px solid #e5e7eb; border-radius:6px; padding:7px 12px; font-size:13px; font-weight:600; color:#374151; background:#fff; }
    .bq-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
    .bq-pcard { border:1px solid #e5e7eb; border-radius:6px; padding:12px; cursor:pointer; background:#fff; display:flex; flex-direction:column; }
    .bq-pcard:hover { border-color:#93c5fd; box-shadow:0 4px 14px rgba(0,0,0,.08); }
    .bq-pcard.sel { border-color:#2563eb; background:#f8faff; }
    .bq-pcard img { width:100%; height:120px; object-fit:contain; background:#fff; }
    .bq-pcard .pno { font-weight:700; margin-top:8px; }
    .bq-pcard .pdesc { color:#6b7280; font-size:13px; line-height:1.25; min-height:32px; margin-top:2px; overflow:hidden; }
    .bq-pcard .cbar { border-radius:6px; height:20px; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; margin:8px 0; }
    .bq-pcard .prow { display:flex; justify-content:space-between; align-items:center; font-size:13px; color:#374151; }
    .bq-pager { display:flex; align-items:center; justify-content:space-between; margin-top:14px; }
    .bq-pager .pg { display:inline-flex; align-items:center; justify-content:center; min-width:34px; height:34px; border:1px solid #e5e7eb; border-radius:6px; margin-left:4px; cursor:pointer; font-weight:600; }
    .bq-pager .pg.on { background:#2563eb; color:#fff; border-color:#2563eb; }

    @media (max-width:1400px) { .bq-grid { grid-template-columns:repeat(4,1fr); } }
    @media (max-width:1100px) { .bq-grid { grid-template-columns:repeat(3,1fr); } }
    @media (max-width:1024px) {
        .bq-stats { grid-template-columns:repeat(2,1fr); }
        .bq-info-grid { grid-template-columns:1fr; }
        .bq-layout { grid-template-columns:1fr; }
        .bq-grid { grid-template-columns:repeat(2,1fr); }
    }

    /* ---- KOLOMRASTERS. Gebruik deze classes in plaats van style="grid-template-columns:…".
       Een inline stijl wint namelijk van élke class-regel hieronder, dus zo'n raster blijft op een
       telefoon net zo breed als op een monitor — dat was de grootste bron van schermen die buiten
       beeld liepen. Met deze classes vouwt het raster vanzelf: eerst naar twee kolommen, onder 640px
       naar één. Heb je echt ongelijke kolommen nodig (bv. 2fr 1fr), gebruik dan .bq-cols-split. ---- */
    .bq-cols, .bq-cols-2, .bq-cols-3, .bq-cols-4, .bq-cols-5, .bq-cols-split { display:grid; gap:12px; }
    .bq-cols-2 { grid-template-columns:repeat(2,1fr); }
    .bq-cols-3 { grid-template-columns:repeat(3,1fr); }
    .bq-cols-4 { grid-template-columns:repeat(4,1fr); }
    .bq-cols-5 { grid-template-columns:repeat(5,1fr); }
    .bq-cols-split { grid-template-columns:2fr 1fr; }
    @media (max-width:1024px) {
        .bq-cols-3, .bq-cols-4, .bq-cols-5, .bq-cols-split { grid-template-columns:repeat(2,1fr); }
    }
    @media (max-width:640px) {
        .bq-cols-2, .bq-cols-3, .bq-cols-4, .bq-cols-5, .bq-cols-split { grid-template-columns:1fr; }
    }

    /* ---- Telefoon-laag (≤640px). Het gedeelde systeem was desktop-first en stopte bij 1024px; deze
       laag vouwt grids naar 1 kolom, laat info-rijen wrappen, cap't dropdowns op schermbreedte en
       schaalt modals. Brede tabellen: wikkel ze in <div class="bq-scroll-x"> en geef de tabel een
       min-width passend bij het kolomaantal, zodat de wrapper horizontaal scrollt i.p.v. de hele
       pagina. ---- */
    .bq-scroll-x { overflow-x:auto; -webkit-overflow-scrolling:touch; }
    @media (max-width:640px) {
        .bq-stats { grid-template-columns:1fr; gap:10px; }
        .bq-info-grid { grid-template-columns:1fr; }
        .bq-card { padding:14px; }
        .bq-info-row { flex-wrap:wrap; }
        .bq-info-row .lbl { width:auto; }
        .bq-info-row .sub { margin-left:0; }
        .bq-menu, .bq-menu.wide { min-width:min(320px,92vw); max-width:92vw; }
        .bq-modal-bg { padding:0; }
        /* VOLLE BREEDTE, niet volle hoogte. Een modal van 460px op een scherm van 390px liet links
           en rechts een randje achtergrond staan en knelde de inhoud; de breedte moet dus vrij.
           !important omdat vrijwel elke modal zijn breedte inline meekrijgt (max-width:520px e.d.)
           en een inline stijl anders wint.
           GEEN vaste hoogte forceren: `min-height:100%` verslaat volgens de CSS-regels elke
           `max-height` die een scherm zelf zet — dat maakte van het bodemblad in de picker (84vh,
           afgeronde bovenhoeken) een volledig scherm, en liet onder een kort printvoorbeeld dertig
           procent grijze leegte staan. De hoogte blijft dus gewoon de inhoud volgen. */
        .bq-modal, .bq-modal.full { max-width:none !important; width:100% !important; border-radius:0; }
        /* De onderrand van een modal is op een telefoon de knoppenbalk: die moet boven de
           iPhone-thuisbalk blijven. */
        .bq-modal-foot { padding-bottom:calc(14px + env(safe-area-inset-bottom)); }
        .bq-sticky-bottom, .bq-sticky-top { flex-wrap:wrap; }
    }

    /* Sticky onderbalk boven de thuisbalk van een iPhone. Zonder dit valt de belangrijkste knop van
       het scherm (afronden, accepteren) deels achter de systeembalk. Op toestellen zonder inzet is
       env() nul, dus dit kost daar niets. */
    .bq-sticky-bottom { padding-bottom:calc(14px + env(safe-area-inset-bottom)); }

    /* Vinger-vriendelijke tikdoelen op touch-apparaten (warehouse-tablet/telefoon), los van breedte. */
    @media (pointer:coarse) {
        .bq-iconbtn { width:44px; height:44px; }
        .bq-btn { min-height:44px; }
        .bq-chip, .bq-fbtn, .bq-fsel { min-height:40px; }
        .bq-pager .pg { min-width:40px; height:40px; }
        /* Keuzerijen in een UITKLAPMENU zijn óók tikdoelen en stonden op ~36px. Bewust alleen in
           .bq-menu: dezelfde class wordt ook gebruikt voor lange lijsten in een zijbalk (de ~200
           kleuren bij Nieuwe order), en daar maakt 44px per rij van negen zichtbare kleuren er vijf.
           `align-items` blijft met rust: bij een tweeregelig item hoort het icoon naast de titel te
           staan, niet verticaal gecentreerd. */
        .bq-menu > .bq-menu-item { min-height:44px; }
        /* iOS zoomt bij focus in op elk veld kleiner dan 16px en zoomt daarna niet terug: dan
           springt het hele scherm weg zodra je een aantal intikt. 16px houdt dat tegen.
           ALLEEN op de eigen classes, NIET op input[type=…]. Zo'n attribuutselector weegt net zo
           zwaar als een class en verslaat daarmee elke pagina die zijn veld bewust groter maakt: het
           aantalveld in de picker (30px) en het bakcodeveld in de voorraadcorrectie (20px) zakten er
           allebei door naar 16px, precies op de schermen waar dit voor bedoeld was. */
        .bq-input, .bq-select, .bq-fsel, .bq-gs-veld, .bq-zoekveld,
        .bq-field > input, .bq-field > select, .bq-field > textarea { font-size:16px; }
    }