/* ============================================================ Broer Outdoor -- voorraadsysteem webUI Statische HTML/CSS-verkenning, los van de Streamlit-app. Zelfde kleurenpalet als .streamlit/config.toml, verder geen afhankelijkheden -- systeemlettertype, geen externe fonts/iconen. ============================================================ */ :root { /* Basispalet -- #2B1810 is Broer Outdoor's eigen hoofdkleur, de rest van de ladder is daaromheen opgebouwd (elke stap zowel lichter als iets warmer/verzadigder, anders verdampt bruin naar grijs zodra je 'm oplicht -- een klassieke fout). Contrast per stap doorgerekend (WCAG-relatieve-luminantie), niet op het oog geschat. */ --accent: #E07B39; --accent-hover: #EF8F4F; --accent-soft: #E07B3922; --secondary: #A3975A; --tertiary: #8A9297; --bg: #2B1810; --bg-gradient: radial-gradient(circle at 15% 0%, #3A2417 0%, #2B1810 55%, #1F1209 100%); --surface: #3F2818; --surface-hover: #593C24; --surface-raised: #4C331F; --border: #7D5C3C; --border-soft: #6B4E30; /* Warme hover-rand voor interactieve elementen (knoppen/velden) -- was --tertiary (een kille blauwgrijze), wat precies de "dit hoort er niet bij"-grijsheid gaf die opviel. --tertiary blijft bestaan puur als tweede grafiekkleur (vergelijkingsreeksen). */ --border-hover: #9C6E3E; /* Tekstvakken/dropdowns iets lichter dan de kaart eromheen, zodat ze zich duidelijk als 'hier kun je iets doen' aftekenen i.p.v. te verdwijnen in de achtergrond. */ --input-bg: #63472C; --input-border: #7D5C3C; --text: #FAF9F7; --text-muted: #D2C3B2; --text-faint: #A5988A; --good: #7FA363; --warn: #D9A441; --info: #7E9FB0; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --shadow-card: 0 1px 2px #0000002e, 0 4px 14px -8px #00000055; --shadow-pop: 0 12px 32px -8px #000000aa; --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; } /* Vertelt de browser dat DEZE pagina donker is, ook voor de dingen die CSS niet kan herstijlen: het pop-up-lijstje van een -lijstje te hoeven openen (dat valt niet in de huisstijl te stylen). */ .config-islands { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; } .island { font-family: var(--font); font-size: 12.5px; font-weight: 600; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border-soft); background: var(--surface-raised); color: var(--text-muted); cursor: pointer; transition: background .12s ease, border-color .12s ease, color .12s ease; } .island:hover { border-color: var(--border-hover); color: var(--text); } .island.active { background: var(--accent-soft); border-color: #E07B3944; color: var(--accent-hover); font-weight: 700; } .toolbar .actions { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; } /* Buttons */ .btn { font-family: var(--font); font-size: 13.5px; font-weight: 600; padding: 9px 16px; border-radius: var(--radius-sm); border: 1px solid var(--border-soft); background: var(--surface); color: var(--text); cursor: pointer; text-align: left; white-space: nowrap; transition: background .12s ease, border-color .12s ease, transform .05s ease; } .btn:hover { background: var(--surface-hover); border-color: var(--border-hover); } .btn:active { transform: translateY(1px); } .btn:disabled { opacity: 0.42; cursor: not-allowed; } .btn-primary { background: var(--accent); border-color: var(--accent); color: #201007; } .btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); } .btn-ghost { background: transparent; border-color: transparent; color: var(--text-muted); padding: 9px 10px; } .btn-ghost:hover { background: var(--surface); color: var(--text); } .btn-sm { padding: 6px 12px; font-size: 12.5px; } .btn-block { width: 100%; } .caption { font-size: 12.5px; color: var(--text-faint); margin: 0; } .caption.hint { padding: 9px 2px 0; } /* Channel group */ .channel-group { margin-bottom: 28px; } .channel-heading { display: flex; align-items: baseline; gap: 10px; margin: 0 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--border-soft); } .channel-heading h2 { font-size: 16px; margin: 0; font-weight: 700; } .channel-heading .count { font-size: 12.5px; color: var(--text-faint); font-weight: 500; } /* Order card */ .order-card { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: 18px 20px; margin-bottom: 14px; } .order-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 14px; } .order-ref-btn { all: unset; cursor: pointer; display: inline-flex; align-items: baseline; gap: 8px; font-size: 14.5px; } .order-ref-btn:hover .order-ref { color: var(--accent-hover); text-decoration: underline; } .order-ref { font-weight: 700; color: var(--text); } .order-customer { color: var(--text-muted); font-weight: 500; } .chevron { color: var(--text-faint); font-size: 12px; } .order-meta { text-align: right; flex-shrink: 0; } .order-meta .datetime { font-size: 12px; color: var(--text-faint); } .status-pill { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.03em; padding: 2px 8px; border-radius: 999px; margin-left: 6px; text-transform: uppercase; } .status-pill.unfulfilled, .status-pill.open { background: #D9A44122; color: var(--warn); } .status-pill.paid { background: #7FA36322; color: var(--good); } .status-pill.info { background: #7E9FB022; color: var(--info); } .status-pill.neutral { background: var(--surface-raised); color: var(--text-faint); } /* Blijft zichtbaar bovenaan de viewport bij scrollen -- voor een filter-/actiebalk boven een lange lijst, zodat je niet terug hoeft te scrollen om 'm te finetunen. Eigen achtergrond nodig (niet transparant), anders schemert de content erachter doorheen zodra 'm los van de pagina komt te 'zweven'. */ .sticky-bar { position: sticky; top: 0; z-index: 5; /* Effen kleur, bewust GEEN background-image hier -- de gradient schaalt op de eigen (kleine) box van dit element en zou dus nooit aansluiten op de veel grotere, vast-op-de-viewport gezette -gradient erachter. */ background: var(--bg); padding-top: 10px; margin-top: -10px; } .order-toggles { display: flex; align-items: center; gap: 16px; margin-top: 8px; justify-content: flex-end; } .dropship-toggle { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-muted); } .dropship-toggle input { accent-color: var(--accent); } .order-select-toggle { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-muted); cursor: pointer; } .order-select-toggle input { accent-color: var(--accent); cursor: pointer; } /* Line items */ .line-item { display: grid; grid-template-columns: 42px 1fr auto; gap: 14px; align-items: center; padding: 9px 0; border-top: 1px solid var(--border-soft); } .line-item:first-of-type { border-top: none; } .line-thumb { width: 42px; height: 42px; border-radius: var(--radius-sm); background: #ffffff0f; display: grid; place-items: center; overflow: hidden; font-size: 10px; color: var(--text-faint); } .line-thumb img { width: 100%; height: 100%; object-fit: contain; } .line-title-btn { all: unset; cursor: pointer; font-size: 14px; color: var(--text); text-align: left; display: block; } .line-title-btn:hover { color: var(--accent-hover); text-decoration: underline; } .line-sub { font-size: 12px; color: var(--text-faint); margin-top: 2px; } .line-right { display: flex; align-items: center; gap: 14px; } .qty { font-weight: 700; font-size: 13.5px; min-width: 26px; text-align: right; } .qty.multi { color: var(--accent); } .select, .input { font-family: var(--font); font-size: 13px; background: var(--input-bg); color: var(--text); border: 1px solid var(--input-border); border-radius: var(--radius-sm); padding: 7px 10px; box-sizing: border-box; transition: border-color .12s ease, box-shadow .12s ease, background .12s ease; } .select:hover, .input:hover { border-color: var(--border-hover); } .select:focus, .input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .select:disabled, .input:disabled { opacity: .55; cursor: not-allowed; } .input::placeholder { color: var(--text-faint); } .select { cursor: pointer; } /* Checkboxen/radioknoppen overal in de app -- zonder dit was dit het felblauwe systeem-vinkje op een wit vlak i.p.v. de huisstijl. */ input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); width: 15px; height: 15px; cursor: pointer; } /* .field is the standard label+control wrapper used across the site's forms (filters, add-forms, grids) -- min-width:0 so it can actually shrink inside a flex/grid row instead of forcing the whole row to overflow, and its input/select fills the field instead of sizing to its own content (which was the root cause of several "field pokes out of its box" layout bugs). A bare .select/.input OUTSIDE a .field (e.g. the per-line pick-dropdown on an order card) keeps sizing to its content, unchanged. */ .field { min-width: 0; } .field .select, .field .input { width: 100%; min-width: 0; } .order-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-soft); font-size: 13px; color: var(--text-muted); } .order-footer b { color: var(--text); } /* Shipping block */ .ship-block { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-soft); } .ship-row { display: grid; grid-template-columns: 1fr auto auto auto; gap: 10px; align-items: center; } .ship-note { font-size: 12.5px; color: var(--text-faint); margin: 6px 0 10px; } .ship-note.warn { color: var(--warn); } .saved-note { font-size: 12.5px; color: var(--good); margin-top: 8px; } /* Tracking block (dropship) */ .tracking-row { display: grid; grid-template-columns: 160px 1fr auto auto; gap: 10px; align-items: center; } .checkbox-inline { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-muted); white-space: nowrap; } .checkbox-inline input { accent-color: var(--accent); } /* ---------------- Mobiel menu (uitschuifbaar vanaf links) ---------------- */ /* .menu-toggle/.sidebar-backdrop bestaan altijd in de DOM (via _sidebar.html, op elke pagina) maar zijn alleen zichtbaar/actief onder de 880px-breakpoint hieronder -- op desktop blijft de zijbalk gewoon altijd-zichtbaar zoals nu. */ .menu-toggle { display: none; } /* ---------------- Prestaties (dashboard) ---------------- */ .period-bar { display: flex; align-items: flex-end; gap: 22px; margin-bottom: 22px; flex-wrap: wrap; } .period-bar .field { min-width: 240px; } /* Was ooit .period-bar .toggle-field -- nu een losstaande, herbruikbare klasse (staat inmiddels ook buiten .period-bar, bv. Overzicht > Problemen), anders werkt de flex-uitlijning daar niet. */ .toggle-field { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted); } .period-bar .toggle-field { padding-bottom: 9px; } .switch { position: relative; width: 34px; height: 19px; flex-shrink: 0; border-radius: 999px; background: var(--surface-raised); border: 1px solid var(--border-soft); cursor: pointer; } .switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: var(--text-faint); transition: transform .15s ease, background .15s ease; } .switch.on { background: var(--accent-soft); border-color: var(--accent); } .switch.on::after { transform: translateX(15px); background: var(--accent); } .period-range { font-size: 12.5px; color: var(--text-faint); margin: 0 0 22px; } .kpi-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 30px; } /* Voor KPI-rijen met minder dan 5 kaarten (bv. 4 op Bestellingen/ Voorraad) -- een losse modifier-klasse i.p.v. een inline style, want een inline style wint altijd van de mobiele media-query hieronder en zou 'm daar dus vastzetten op 4 kolommen. */ .kpi-row.kpi-row-4 { grid-template-columns: repeat(4, 1fr); } .kpi-card { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: 16px 16px 14px; } .kpi-label { font-size: 11.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; margin-bottom: 8px; } .kpi-value { font-size: 21px; font-weight: 700; color: var(--text); } .kpi-delta { font-size: 12px; font-weight: 600; margin-top: 4px; } .kpi-delta.up { color: var(--good); } .kpi-delta.down { color: #C97575; } .kpi-footnote { font-size: 12px; color: var(--text-faint); max-width: 820px; margin: -14px 0 28px; } /* Sectiekopjes tussen groepen panel-grids op een dashboard (Prestaties) -- puur typografisch, geen kader, zodat het duidelijk een groepering is en geen nieuw paneel. */ .dash-section { margin: 32px 0 14px; font-size: 12px; font-weight: 700; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.06em; padding-bottom: 8px; border-bottom: 1px solid var(--border-soft); } .dash-section:first-of-type { margin-top: 0; } .dash-note { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: 14px 18px; margin-top: 24px; font-size: 12.5px; color: var(--text-muted); } .dash-note b { color: var(--text); } .panel-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; margin-bottom: 16px; } .panel { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: 18px 20px; } .panel h3 { margin: 0 0 16px; font-size: 14px; font-weight: 700; } /* Eenvoudige, afhankelijkheidsvrije staafdiagrammen -- geen chart-library, gewoon divs met een berekende hoogte/breedte. Illustratief, nog geen echte data. */ .bars { display: flex; align-items: flex-end; gap: 18px; height: 140px; padding: 0 4px; /* Bij veel kolommen (bv. 'Dit jaar' -> 12 maanden, of Omzet per week -> 12 weken) past de rij niet meer op een smal (mobiel) scherm -- elke kolom heeft door zijn label (bv. "2026-08 - EUR 11.095") een eigen minimumbreedte, en flex-items krimpen nooit vanzelf onder hun inhoud. Zonder dit zou de hele balk buiten het scherm steken i.p.v. binnen zijn eigen paneel te blijven. */ overflow-x: auto; } .bars .bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; justify-content: flex-end; min-width: 44px; } .bars .bar { width: 100%; max-width: 64px; border-radius: 6px 6px 0 0; background: linear-gradient(180deg, var(--accent-hover) 0%, var(--accent) 100%); min-height: 3px; transition: opacity .12s ease; } .bars .bar-col:hover .bar { opacity: 0.85; } .bars .bar.prev { background: var(--secondary); } .bars .bar-col .bar-label { font-size: 11.5px; color: var(--text-faint); } .bars.two-tone .bar-col { flex-direction: row; align-items: flex-end; gap: 4px; } .hbar-list { display: flex; flex-direction: column; gap: 12px; } .hbar-row .hbar-top { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 5px; } .hbar-row .hbar-top .name { color: var(--text); font-weight: 600; } .hbar-row .hbar-top .val { color: var(--text-faint); } .hbar-track { background: var(--border-soft); border-radius: 999px; height: 7px; overflow: hidden; } .hbar-fill { height: 100%; background: var(--accent); border-radius: 999px; } .hbar-fill.alt { background: var(--secondary); } .hbar-fill.alt2 { background: var(--tertiary); } .rank-list { display: flex; flex-direction: column; } .rank-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--border-soft); } .rank-row:first-child { border-top: none; } .rank-num { width: 20px; font-size: 12px; font-weight: 700; color: var(--text-faint); } .rank-name { flex: 1; font-size: 13.5px; } .rank-val { font-size: 13px; color: var(--text-muted); font-weight: 600; } /* ---------------- Voorraad ---------------- */ .filter-details { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: 14px 18px; margin-bottom: 8px; } .filter-details summary { cursor: pointer; font-weight: 700; font-size: 14px; list-style: none; user-select: none; } .filter-details summary::-webkit-details-marker { display: none; } .filter-details summary::before { content: "▸ "; color: var(--text-faint); } .filter-details[open] summary::before { content: "▾ "; } .filter-badge { display: inline-block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--accent-hover); background: var(--accent-soft); border: 1px solid #E07B3944; border-radius: 999px; padding: 2px 8px; margin-left: 4px; } .filter-form { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin: 16px 0 0; } .filter-form .field-wide { grid-column: span 2; } .filter-form label.field-label { display: block; font-size: 11.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.03em; font-weight: 600; margin-bottom: 5px; } .filter-form select, .filter-form input[type="text"] { width: 100%; font-family: var(--font); font-size: 13px; background: var(--surface-raised); color: var(--text); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 8px 10px; } .tag-picker { background: var(--surface-raised); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 8px 10px; } .tag-picker summary { cursor: pointer; font-size: 13px; color: var(--text); list-style: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tag-picker summary::-webkit-details-marker { display: none; } .tag-picker[open] summary { margin-bottom: 8px; } .tag-picker-list { display: flex; flex-wrap: wrap; gap: 4px 12px; max-height: 140px; overflow-y: auto; padding-top: 6px; border-top: 1px solid var(--border-soft); } .tag-check { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-muted); white-space: nowrap; } .tag-check input { accent-color: var(--accent); } .filter-actions { grid-column: 1 / -1; display: flex; gap: 10px; align-items: center; } .result-bar { display: flex; justify-content: space-between; align-items: center; margin: 18px 0 14px; padding-top: 14px; border-top: 1px solid var(--border-soft); } .product-card { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: 14px 18px; margin-bottom: 10px; display: grid; grid-template-columns: 52px 1fr auto; gap: 16px; align-items: center; } .product-thumb { width: 52px; height: 52px; border-radius: var(--radius-sm); background: #ffffff0f; display: grid; place-items: center; overflow: hidden; font-size: 10px; color: var(--text-faint); } .product-thumb img { width: 100%; height: 100%; object-fit: contain; } .product-title { font-weight: 700; font-size: 14.5px; } .product-title a { color: var(--text); text-decoration: none; } .product-title a:hover { color: var(--accent-hover); text-decoration: underline; } .product-card:target { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .product-title .set-tag { color: var(--secondary); font-weight: 500; font-size: 13px; } .product-meta { display: flex; flex-direction: column; gap: 2px; } .product-stock { text-align: right; } .product-stock .value { font-size: 22px; font-weight: 700; } .product-stock .label { font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.03em; } .product-stock .sub { font-size: 12px; color: var(--text-faint); } .pagination { display: flex; align-items: center; gap: 12px; justify-content: center; margin-top: 20px; } .pagination a.btn.disabled { opacity: 0.35; pointer-events: none; } /* ---------------- Geneste navigatie (Overzicht/Labels met subitems) ---------------- */ .nav-group { border: none; } .nav-group summary { display: block; cursor: pointer; list-style: none; padding: 9px 12px; border-radius: var(--radius-sm); color: var(--text-muted); font-size: 14px; font-weight: 500; border-left: 2px solid transparent; transition: background .12s ease, color .12s ease; } .nav-group summary::-webkit-details-marker { display: none; } .nav-group summary::after { content: "›"; float: right; transform: rotate(90deg); transition: transform .12s ease; color: var(--text-faint); } .nav-group[open] summary::after { transform: rotate(-90deg); } .nav-group summary:hover { background: var(--surface); color: var(--text); } .nav-group.has-active summary { color: var(--text); } .nav-sub { margin: 2px 0 2px 21px; padding-left: 10px; border-left: 1px solid var(--border-soft); display: flex; flex-direction: column; gap: 1px; } .nav-sub a { display: block; text-decoration: none; padding: 7px 10px; border-radius: var(--radius-sm); color: var(--text-faint); font-size: 13px; font-weight: 500; transition: background .12s ease, color .12s ease; } .nav-sub a:hover { background: var(--surface); color: var(--text); } .nav-sub a.active { background: var(--surface-raised); color: var(--accent); font-weight: 600; } /* ---------------- Mobiel (<880px) -- alle overrides in één blok, aan het eind zodat cascade-volgorde 'm altijd laat winnen van de losse desktop-regels hierboven, ongeacht waar in het bestand die zelf staan. (Stond 'm eerder halverwege het bestand -- alles wat er ONDER kwam te staan, zoals de hele Prestaties-sectie, kon 'm daardoor nooit verslaan: zelfde specificiteit, latere bron-volgorde wint. Dat brak stilletjes .kpi-row/.panel-grid op mobiel.) ---------------- */ @media (max-width: 880px) { body { flex-direction: column; } .menu-toggle { display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 30; width: 100%; background: var(--bg); background-image: var(--bg-gradient); border: none; border-bottom: 1px solid var(--border-soft); padding: 12px 16px; color: var(--text); font-family: var(--font); font-size: 14px; font-weight: 600; cursor: pointer; } /* Drie CSS-streepjes i.p.v. een tekstglyph (☰/emoji) -- die viel op sommige systeem-fontfallbacks terug op een reusachtig lettertype en trok het hele knopje krom. Absoluut gepositioneerd i.p.v. flex, want ".bars" bestaat elders al (de Prestaties-staafdiagrammen) en dat collidieert op flex-sizing als je hetzelfde patroon hergebruikt. */ .menu-toggle .bars { position: relative; width: 18px; height: 13px; flex: none; } .menu-toggle .bars span { position: absolute; left: 0; width: 18px; height: 2px; border-radius: 1px; background: var(--text); } .menu-toggle .bars span:nth-child(1) { top: 0; } .menu-toggle .bars span:nth-child(2) { top: 5px; } .menu-toggle .bars span:nth-child(3) { top: 10px; } .sidebar-backdrop { display: none; position: fixed; inset: 0; background: #0000008a; z-index: 40; } .sidebar-backdrop.open { display: block; } .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 260px; max-width: 82vw; z-index: 50; transform: translateX(-100%); transition: transform .2s ease; border-right: 1px solid var(--border-soft); overflow-y: auto; box-shadow: var(--shadow-pop); /* Op desktop hoeft de zijbalk geen eigen achtergrond te hebben -- die deelt gewoon de achtergrond van . Los over de pagina heen geschoven op mobiel moet 'm dat WEL hebben, anders schemert de onderliggende pagina er dwars doorheen. */ background: var(--bg); background-image: var(--bg-gradient); } .sidebar.open { transform: translateX(0); } .main { padding: 16px; max-width: 100%; overflow-x: hidden; } .filter-form select, .filter-form input[type="text"] { max-width: 100%; } .page-header h1 { font-size: 21px; } .kpi-row, .kpi-row.kpi-row-4 { grid-template-columns: repeat(2, 1fr); } .panel-grid { grid-template-columns: 1fr; } .filter-form { grid-template-columns: 1fr 1fr; } .filter-form .field-wide { grid-column: 1 / -1; } .toolbar { flex-direction: column; align-items: stretch; } .toolbar .actions { flex-direction: column; align-items: stretch; } .toolbar .actions .btn { width: 100%; text-align: center; } .order-card-top { flex-direction: column; gap: 8px; } .order-meta { text-align: left; } .dropship-toggle { justify-content: flex-start; } .line-item { grid-template-columns: 36px 1fr; row-gap: 6px; } .line-right { grid-column: 1 / -1; justify-content: space-between; } .ship-row, .tracking-row { grid-template-columns: 1fr; } .ship-row .btn, .tracking-row .btn { width: 100%; } .product-card { grid-template-columns: 44px 1fr; } .product-stock { grid-column: 1 / -1; text-align: left; display: flex; align-items: baseline; gap: 8px; } }