/* ======================================================================== */ /* produce-pos — brutalist monochrome overlay */ /* ======================================================================== */ /* * Design intent: pure black on pure white, Inter typography, zero radii, no * shadows or gradients, 1px solid black borders as the only structural * element. Modeled on pos-v2 so the two UIs share a visual language. * * Activation: — toggled from the topbar. * When the class is absent, this file has ZERO effect on v1. * * Strategy * ──────── * 1. Override v1's CSS custom properties (:root tokens) under the body class. * Because v1 uses vars everywhere, this does ~70% of the work for free. * 2. Override hardcoded gradients and colors that live outside the token * system (notices, .versa-sale-table header, .versa-total-mini-*, etc.) * 3. Apply a small set of universal rules (radii→0, shadows→none) inside the * scoped selector so we don't have to chase every surface. * * !important is used sparingly but deliberately — v1's existing selectors * are high-specificity, and the whole point of an overlay is to win. The * scoping under body.theme-brutalist keeps it from bleeding into v1's * default look. * * The printed ticket surface (.ticket80-*) is intentionally NOT overridden: * thermal receipts must remain visually unchanged. */ /* ======================== TOKEN OVERRIDES ============================== */ body.theme-brutalist { --bg0: #ffffff; --bg1: #ffffff; --bg2: #ffffff; --card: #ffffff; --surface: #ffffff; --text: #000000; --muted: #666666; --line: #000000; --accent: #000000; --accent-strong: #000000; --accent-soft: #f0f0f0; --green: #000000; --red: #d00000; --amber: #000000; --shadow: none; --shadow-soft: none; --radius: 0px; --radius2: 0px; --pad: 16px; --font: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-mono: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif; } /* ======================== ROOT / BODY ================================== */ body.theme-brutalist { background: #ffffff !important; color: #000; font-family: var(--font); font-feature-settings: "tnum" 1, "cv11" 1; letter-spacing: 0.01em; } html:has(body.theme-brutalist) { background: #fff; } body.theme-brutalist ::selection { background: #000; color: #fff; } /* Universal flattening: kill radii and shadows everywhere. */ body.theme-brutalist *, body.theme-brutalist *::before, body.theme-brutalist *::after { border-radius: 0 !important; box-shadow: none !important; text-shadow: none !important; backdrop-filter: none !important; } /* Universal typography: force every text-bearing element on-screen to use Inter so screens like "Totales por SKU", descriptive blurbs, table rows, and secondary buttons all pick up the brutalist typeface regardless of whatever font-family they inherited in v1. The printed ticket is explicitly excluded below so thermal output keeps its original monospace look. */ body.theme-brutalist, body.theme-brutalist * { font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif !important; } /* Preserve the printed ticket's original look — thermal printers don't care about visual themes, and we shouldn't change the paper record. Font-family here must win over the universal Inter override above, so we use !important and the same monospace stack the @media print block in styles.css uses. */ body.theme-brutalist .ticket80-shell, body.theme-brutalist .ticket80, body.theme-brutalist .ticket80 * { border-radius: initial !important; box-shadow: initial !important; font-family: "Consolas", "Menlo", "Courier New", monospace !important; letter-spacing: normal; text-transform: none; } /* ======================== INPUTS ======================================= */ body.theme-brutalist input, body.theme-brutalist select, body.theme-brutalist textarea { background: #fff; color: #000; border: 1px solid #000; font-family: var(--font); font-variant-numeric: tabular-nums; } body.theme-brutalist input:focus-visible, body.theme-brutalist select:focus-visible, body.theme-brutalist textarea:focus-visible { outline: 2px solid #000 !important; outline-offset: -1px; border-color: #000; box-shadow: none !important; } body.theme-brutalist input::placeholder, body.theme-brutalist textarea::placeholder { color: #bbb; } /* ======================== TOPBAR / BOTTOM NAV ========================== */ body.theme-brutalist .topbar { background: #fff !important; border-bottom: 1px solid #000; backdrop-filter: none !important; } body.theme-brutalist .topbar-inner { padding: 0; gap: 0; } body.theme-brutalist .brand-block { padding: 12px 18px; border-right: 1px solid #000; } body.theme-brutalist .brand-title { font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #000; } body.theme-brutalist .brand-sub { color: #666; text-transform: uppercase; letter-spacing: 0.08em; font-size: 10px; font-weight: 500; } body.theme-brutalist .brand-logo { filter: grayscale(100%); } body.theme-brutalist .topbar-meta { padding: 0; gap: 0; align-items: stretch; justify-content: flex-end; } body.theme-brutalist .topbar-user { padding: 10px 16px; border-left: 1px solid #000; gap: 6px; } body.theme-brutalist .topbar-meta .row-wrap { gap: 0; align-items: stretch; } body.theme-brutalist .sync-chip, body.theme-brutalist .app-version { display: flex; align-items: center; padding: 0 14px; border-left: 1px solid #000; color: #666; font-size: 10px; font-variant-numeric: tabular-nums; text-transform: uppercase; letter-spacing: 0.08em; background: transparent; } body.theme-brutalist .bottom-nav { background: #fff !important; border-top: 1px solid #000; backdrop-filter: none !important; padding: 0 !important; } body.theme-brutalist .bottom-nav-inner { gap: 0; padding: 0; max-width: none; } /* Bottom-nav tab buttons (`.nav-item`) — these are NOT `.btn` so they were missed by the button override block. Restyle them as flat bordered cells that invert on active, matching the topbar nav treatment. */ body.theme-brutalist .nav-item { background: #fff !important; border: 0 !important; border-right: 1px solid #000 !important; color: #000 !important; min-height: 48px; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; padding: 6px 8px; transition: background 80ms, color 80ms; } body.theme-brutalist .bottom-nav-inner > .nav-item:last-child { border-right: 0 !important; } body.theme-brutalist .nav-item:hover { background: #f0f0f0 !important; color: #000 !important; } body.theme-brutalist .nav-item-active, body.theme-brutalist .nav-item.is-active { background: #000 !important; color: #fff !important; border-color: #000 !important; } body.theme-brutalist .nav-icon { font-size: 12px; font-weight: 700; color: inherit; } /* ======================== BUTTONS ====================================== */ body.theme-brutalist .btn { background: #fff; color: #000; border: 1px solid #000; font-weight: 700; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; padding: 9px 14px; transition: background 80ms, color 80ms; min-height: 40px; } body.theme-brutalist .btn:hover:not(:disabled) { background: #000; color: #fff; transform: none; } body.theme-brutalist .btn:active:not(:disabled) { transform: none; } body.theme-brutalist .btn:disabled { opacity: 0.35; filter: grayscale(100%); } body.theme-brutalist .btn:focus-visible { outline: 2px solid #000; outline-offset: 1px; box-shadow: none !important; } body.theme-brutalist .btn-primary { background: #000 !important; color: #fff !important; border-color: #000 !important; } body.theme-brutalist .btn-primary:hover:not(:disabled) { background: #fff !important; color: #000 !important; } body.theme-brutalist .btn-secondary { background: #fff !important; color: #000 !important; border-color: #000 !important; } body.theme-brutalist .btn-secondary:hover:not(:disabled) { background: #000 !important; color: #fff !important; } body.theme-brutalist .btn-ghost { background: #fff !important; color: #000 !important; border-color: #000 !important; } body.theme-brutalist .btn-ghost:hover:not(:disabled) { background: #000 !important; color: #fff !important; } body.theme-brutalist .btn-danger { background: #fff !important; color: #d00000 !important; border-color: #d00000 !important; } body.theme-brutalist .btn-danger:hover:not(:disabled) { background: #d00000 !important; color: #fff !important; } body.theme-brutalist .btn.is-active { background: #000 !important; color: #fff !important; border-color: #000 !important; } body.theme-brutalist .topbar-signout { border-radius: 0 !important; border: 0 !important; border-left: 1px solid #000 !important; min-height: 0; padding: 0 18px; align-self: stretch; display: flex; align-items: center; } /* Theme toggle button in the topbar. Sits next to the signout buttons. */ body.theme-brutalist .theme-toggle-btn, .theme-toggle-btn { /* Render in both classic and brutalist themes. Styles further below tune the classic appearance. The brutalist path inherits .btn styling. */ } body.theme-brutalist .theme-toggle-btn::before { content: "●"; margin-right: 6px; color: #000; font-size: 10px; } /* ======================== CARDS / PANELS =============================== */ body.theme-brutalist .card, body.theme-brutalist .hero-card { background: #fff !important; border: 1px solid #000 !important; padding: 16px; } body.theme-brutalist .section-title { font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-size: 13px; color: #000; } body.theme-brutalist .section-subtitle { color: #666; } body.theme-brutalist .empty-state { background: #fff; border: 1px dashed #000; color: #666; text-transform: uppercase; letter-spacing: 0.1em; font-size: 11px; } /* ======================== FIELDS ======================================= */ body.theme-brutalist .field-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: #000; } body.theme-brutalist .field-hint { color: #666; } /* ======================== NOTICES ====================================== */ body.theme-brutalist .notice { background: #fff; border: 1px solid #000; color: #000; font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; } body.theme-brutalist .notice-ok { color: #000; border-color: #000; } body.theme-brutalist .notice-warn { color: #000; border-color: #000; } body.theme-brutalist .notice-info { color: #000; border-color: #000; } body.theme-brutalist .notice-error { color: #d00000; border-color: #d00000; } /* ======================== SALE SCREEN ================================== */ body.theme-brutalist .versa-sale-shell { background: transparent; padding: 0; } body.theme-brutalist .versa-command-btn { background: #fff !important; border: 1px solid #000 !important; color: #000; box-shadow: none !important; } body.theme-brutalist .versa-command-btn:hover:not(:disabled) { background: #000 !important; color: #fff !important; } body.theme-brutalist .versa-command-btn-primary { background: #000 !important; color: #fff !important; border-color: #000 !important; } body.theme-brutalist .versa-command-btn-primary:hover:not(:disabled) { background: #fff !important; color: #000 !important; } body.theme-brutalist .versa-command-label { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } body.theme-brutalist .versa-command-shortcut { font-size: 10px; letter-spacing: 0.14em; color: #666; } body.theme-brutalist .versa-customer-strip { gap: 0; } body.theme-brutalist .versa-customer-code input, body.theme-brutalist .versa-customer-main input { border: 1px solid #000; font-weight: 700; letter-spacing: 0.06em; } body.theme-brutalist .versa-customer-btn { text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; } body.theme-brutalist .versa-strip-meta span { background: #fff !important; border: 1px solid #000; color: #000; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; padding: 4px 8px; } body.theme-brutalist .versa-session-strip, body.theme-brutalist .versa-session-strip-open, body.theme-brutalist .versa-session-strip-closed { background: #fff !important; border: 1px solid #000 !important; color: #000 !important; } body.theme-brutalist .versa-session-chip { background: #fff; border: 1px solid #000; color: #000; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; } body.theme-brutalist .versa-sale-table-wrap { background: #fff; border: 1px solid #000; } body.theme-brutalist .versa-sale-table th { background: #000 !important; color: #fff !important; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; border-bottom: 1px solid #000; } body.theme-brutalist .versa-sale-table td { border-top: 1px solid #000; background: #fff; } body.theme-brutalist .versa-sale-row-empty td { background: #fafafa !important; color: #999; font-style: italic; } body.theme-brutalist .versa-line-index { background: #000 !important; color: #fff !important; font-weight: 700; letter-spacing: 0; } body.theme-brutalist .versa-line-name { color: #000 !important; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; } body.theme-brutalist .versa-line-meta { color: #666; } body.theme-brutalist .versa-discount-hint { color: #000; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; font-size: 10px; } body.theme-brutalist .versa-scale-pill { background: #000 !important; color: #fff !important; font-weight: 700; letter-spacing: 0.12em; } body.theme-brutalist .versa-cell-total { font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: -0.01em; } body.theme-brutalist .versa-inline-ok, body.theme-brutalist .versa-row-action { background: #fff !important; border: 1px solid #000 !important; color: #000; } body.theme-brutalist .versa-inline-ok:hover, body.theme-brutalist .versa-row-action:hover { background: #000 !important; color: #fff !important; } body.theme-brutalist .versa-row-action-danger { color: #d00000 !important; border-color: #d00000 !important; background: #fff !important; } body.theme-brutalist .versa-row-action-danger:hover { background: #d00000 !important; color: #fff !important; } /* ------------------------ TOTAL PANEL -------------------------------- */ body.theme-brutalist .versa-total-panel { background: #fff !important; border: 1px solid #000 !important; } body.theme-brutalist .versa-total-tc { color: #000; } body.theme-brutalist .versa-total-usd { color: #000; } body.theme-brutalist .versa-total-main { color: #000 !important; font-family: var(--font-mono); letter-spacing: -0.04em; } body.theme-brutalist .versa-last-change-card { background: #fff !important; border: 1px solid #000 !important; } body.theme-brutalist .versa-last-change-head { color: #000; letter-spacing: 0.12em; } body.theme-brutalist .versa-last-change-row, body.theme-brutalist .versa-last-change-row strong { color: #000; } body.theme-brutalist .versa-last-change-row-accent { border-top-color: #000 !important; border-top-style: solid !important; } body.theme-brutalist .versa-total-mini { background: #000 !important; color: #fff !important; border: 1px solid #000; } body.theme-brutalist .versa-total-mini-green, body.theme-brutalist .versa-total-mini-blue { background: #000 !important; } body.theme-brutalist .versa-total-mini-label, body.theme-brutalist .versa-total-mini-value { color: #fff; } /* ------------------------ PAYMENT BLOCK ------------------------------ */ body.theme-brutalist .versa-payment-block { background: #fff !important; border: 1px solid #000 !important; } /* ------------------------ ENTRY RAIL / STATS ------------------------- */ body.theme-brutalist .versa-entry-stats, body.theme-brutalist .versa-entry-card { background: #fff !important; border: 1px solid #000 !important; } body.theme-brutalist .versa-entry-stat-value { color: #000; font-family: var(--font-mono); letter-spacing: -0.02em; } body.theme-brutalist .versa-entry-stat-label { color: #666; text-transform: uppercase; letter-spacing: 0.12em; font-size: 11px; } body.theme-brutalist .versa-entry-stat-meta { color: #666; } /* ------------------------ SKU PAD MIRROR ----------------------------- v1 ships a desktop media-query override (styles.css line ~3882) that re-paints the shell with rgba translucency + blur. Use !important AND match its selector specificity here so we win across every viewport. */ body.theme-brutalist .versa-sku-pad-mirror-shell { background: #fff !important; border: 1px solid #000 !important; backdrop-filter: none !important; box-shadow: none !important; padding: 10px 12px 12px !important; } body.theme-brutalist .versa-sku-pad-mirror-label { color: #000 !important; letter-spacing: 0.14em; font-weight: 700; text-transform: uppercase; } body.theme-brutalist .versa-sku-pad-mirror-shell input, body.theme-brutalist .versa-sku-pad-mirror-shell input[data-role="sale-code-pad-input"] { border: 1px solid #000 !important; background: #fff !important; color: #000 !important; font-weight: 700; letter-spacing: 0.08em; border-radius: 0 !important; } body.theme-brutalist .versa-sku-pad-mirror-shell input::placeholder { color: #bbb !important; } /* ======================== MODALS ======================================= */ body.theme-brutalist .versa-modal-backdrop { background: rgba(0, 0, 0, 0.6) !important; backdrop-filter: none !important; } body.theme-brutalist .versa-modal-card { background: #fff !important; border: 1px solid #000 !important; box-shadow: none !important; } body.theme-brutalist .versa-modal-head, body.theme-brutalist .versa-modal-head-green, body.theme-brutalist .versa-modal-head-dark { background: #fff !important; color: #000 !important; border-bottom: 1px solid #000 !important; } body.theme-brutalist .versa-modal-title { color: #000 !important; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; } body.theme-brutalist .versa-modal-close { background: #fff !important; border: 1px solid #000 !important; color: #000 !important; width: 36px; height: 36px; } body.theme-brutalist .versa-modal-close:hover { background: #000 !important; color: #fff !important; } body.theme-brutalist .versa-capture-header { color: #000; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } body.theme-brutalist .versa-capture-grid input { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: -0.01em; } body.theme-brutalist .versa-cancel-modal { background: #fff !important; border: 1px solid #000 !important; } body.theme-brutalist .versa-discount-modal { background: #fff !important; border: 1px solid #000 !important; } body.theme-brutalist .versa-checkout-body, body.theme-brutalist .versa-checkout-grid { background: #fff; } body.theme-brutalist .versa-checkout-total { color: #000 !important; font-family: var(--font-mono); letter-spacing: -0.03em; } body.theme-brutalist .checkout-panel { background: #fff !important; border: 1px solid #000 !important; } body.theme-brutalist .checkout-stats-grid > * { background: #fff !important; border: 1px solid #000 !important; } /* ======================== APERTURA / CAJA ============================== */ body.theme-brutalist .versa-apertura-body, body.theme-brutalist .versa-apertura-toolbar { background: transparent; } body.theme-brutalist .versa-apertura-grid > * { background: #fff !important; border: 1px solid #000 !important; } body.theme-brutalist .cash-shortcut { background: #fff !important; border: 1px solid #000 !important; color: #000 !important; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; } body.theme-brutalist .cash-shortcut:hover { background: #000 !important; color: #fff !important; } body.theme-brutalist .cash-shortcut.is-active { background: #000 !important; color: #fff !important; } body.theme-brutalist .cash-report-layout { background: transparent; } body.theme-brutalist .cash-report-header-card, body.theme-brutalist .cash-report-block, body.theme-brutalist .cash-report-group-card, body.theme-brutalist .cash-report-banner { background: #fff !important; border: 1px solid #000 !important; color: #000; } body.theme-brutalist .cash-report-company { font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } body.theme-brutalist .cash-report-company-sub, body.theme-brutalist .cash-report-item-meta, body.theme-brutalist .cash-report-item-footer { color: #666; } body.theme-brutalist .cash-report-block-title, body.theme-brutalist .cash-report-group-head { background: #000 !important; color: #fff !important; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; } body.theme-brutalist .cash-report-row, body.theme-brutalist .cash-report-item-row, body.theme-brutalist .cash-flat-item-row { border-bottom: 1px solid #000; } body.theme-brutalist .cash-report-item-total, body.theme-brutalist .cash-flat-item-total { font-variant-numeric: tabular-nums; font-weight: 700; color: #000; } body.theme-brutalist .cash-denomination-card, body.theme-brutalist .cash-denomination-grid > * { background: #fff !important; border: 1px solid #000 !important; } body.theme-brutalist .cash-denomination-table th { background: #000 !important; color: #fff !important; } body.theme-brutalist .cash-denomination-row input { border: 1px solid #000; font-family: var(--font-mono); font-variant-numeric: tabular-nums; } body.theme-brutalist .cash-session-row { background: #fff !important; border: 1px solid #000 !important; color: #000; } body.theme-brutalist .cash-session-row-active { background: #000 !important; color: #fff !important; } body.theme-brutalist .cash-diff-pos { color: #000 !important; font-weight: 700; } body.theme-brutalist .cash-diff-neg { color: #d00000 !important; font-weight: 700; } body.theme-brutalist .cash-diff-even { color: #666 !important; } body.theme-brutalist .cash-cut-guide { background: #fff !important; border: 1px solid #000 !important; } body.theme-brutalist .cash-cut-guide-title { color: #000; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; } body.theme-brutalist .cash-draft-saved { color: #666; font-style: normal; } /* ======================== HISTORIAL ==================================== */ body.theme-brutalist .history-list { background: #fff !important; border: 1px solid #000 !important; } body.theme-brutalist .history-sku-table th { background: #000 !important; color: #fff !important; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; } body.theme-brutalist .history-sku-table td { border-top: 1px solid #000; } body.theme-brutalist .history-sku-total-row td { background: #000 !important; color: #fff !important; font-weight: 700; } body.theme-brutalist .sale-row { background: #fff !important; border: 1px solid #000 !important; } body.theme-brutalist .sale-row + .sale-row { border-top: 0 !important; } body.theme-brutalist .sale-row:hover { background: #f0f0f0 !important; } body.theme-brutalist .sale-row[role="button"]:focus-visible, body.theme-brutalist .sale-row.is-active, body.theme-brutalist .sale-row-active { background: #000 !important; color: #fff !important; } body.theme-brutalist .sale-row.is-active .sale-row-title, body.theme-brutalist .sale-row.is-active .sale-row-meta, body.theme-brutalist .sale-row.is-active .sale-row-amount, body.theme-brutalist .sale-row.is-active .sale-row-total { color: #fff !important; } body.theme-brutalist .sale-row-cancelled { opacity: 0.45; } body.theme-brutalist .sale-row-title { font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #000; } body.theme-brutalist .sale-row-meta { color: #666; } body.theme-brutalist .sale-row-total, body.theme-brutalist .sale-row-amount { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 700; color: #000; } body.theme-brutalist .customer-row { background: #fff !important; border: 1px solid #000 !important; } body.theme-brutalist .customer-row-active { background: #000 !important; color: #fff !important; } body.theme-brutalist .customer-row-title { font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; } body.theme-brutalist .customer-row-meta { color: #666; } /* ======================== FISCAL ======================================= */ body.theme-brutalist .fiscal-workflow-panel, body.theme-brutalist .fiscal-doc-list, body.theme-brutalist .fiscal-doc-card, body.theme-brutalist .fiscal-preview-card { background: #fff !important; border: 1px solid #000 !important; color: #000; } body.theme-brutalist .fiscal-preview-line { border-bottom: 1px solid #000; } body.theme-brutalist .fiscal-preview-line-head { background: #000 !important; color: #fff !important; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; } /* ======================== UTILITIES ==================================== */ body.theme-brutalist .muted { color: #666 !important; } body.theme-brutalist .mono { font-family: var(--font-mono) !important; } body.theme-brutalist .delta-pos { color: #000 !important; font-weight: 700; } body.theme-brutalist .delta-neg { color: #d00000 !important; font-weight: 700; } body.theme-brutalist .soft-chip, body.theme-brutalist .role-chip { background: #fff !important; border: 1px solid #000 !important; color: #000 !important; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; padding: 2px 8px; } body.theme-brutalist .stat, body.theme-brutalist .summary-tile { background: #fff !important; border: 1px solid #000 !important; } body.theme-brutalist .stat-label, body.theme-brutalist .summary-tile-label { color: #666; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500; font-size: 10px; } body.theme-brutalist .stat-value, body.theme-brutalist .summary-tile-value { color: #000; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 700; } /* ======================== QUICK-LINE CARDS ============================= */ body.theme-brutalist .quick-line-card, body.theme-brutalist .line-card { background: #fff !important; border: 1px solid #000 !important; } body.theme-brutalist .quick-line-index { background: #000 !important; color: #fff !important; font-weight: 700; } body.theme-brutalist .quick-total-box { background: #000 !important; color: #fff !important; } body.theme-brutalist .quick-total-value { color: #fff !important; font-family: var(--font-mono); letter-spacing: -0.02em; } /* ======================== SKU PILLS ==================================== */ body.theme-brutalist .sku-pill { background: #fff !important; border: 1px solid #000 !important; color: #000 !important; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; font-size: 10px; } body.theme-brutalist .sku-meta { color: #666; } /* ======================== THEME TOGGLE (BOTH THEMES) =================== */ /* Classic-theme appearance of the toggle button (inherits v1 button styles via .btn .btn-ghost, but we give it a subtle chip look). */ .theme-toggle-btn { display: inline-flex; align-items: center; gap: 6px; min-width: 0; } /* On the brutalist side the same button becomes a plain topbar cell. */ body.theme-brutalist .theme-toggle-btn { border-radius: 0 !important; border: 0 !important; border-left: 1px solid #000 !important; min-height: 0; padding: 0 16px; align-self: stretch; display: flex; align-items: center; letter-spacing: 0.1em; }