:root {
  color-scheme: light;
  --green: #173f35;
  --green-2: #245d4c;
  --orange: #b94f0b;
  --ink: #17211e;
  --muted: #66736e;
  --line: #dce3df;
  --paper: #f4f5f1;
  --white: #fff;
  --danger: #9d312d;
  --radius: 16px;
  --surface: #fff;
  --surface-alt: #eef3f0;
  --surface-soft: #f8faf8;
  --nav-bg: #173f35;
  --nav-text: #fff;
  --focus-ring: rgba(232, 118, 43, .2);
}

:root[data-theme="light-neutral"] {
  color-scheme: light; --green: #34443f; --green-2: #4e625b; --orange: #9d5229; --ink: #1b211f;
  --muted: #68716e; --line: #d9dfdc; --paper: #f1f3f2; --surface: #fff; --surface-alt: #edf0ef;
  --surface-soft: #f7f9f8; --nav-bg: #e8ecea; --nav-text: #1b211f;
}
:root[data-theme="dark"] {
  color-scheme: dark; --green: #78c6a5; --green-2: #9bdbc0; --orange: #f5a464; --ink: #eef5f2;
  --muted: #a9bbb4; --line: #3b4a45; --paper: #111816; --surface: #1b2522; --surface-alt: #25312d;
  --surface-soft: #202c28; --nav-bg: #0d1513; --nav-text: #f5faf8; --danger: #ff948c;
}
:root[data-theme="high-contrast"] {
  color-scheme: dark; --green: #00ff99; --green-2: #8dffc9; --orange: #ffd400; --ink: #fff;
  --muted: #e5e5e5; --line: #fff; --paper: #000; --surface: #000; --surface-alt: #111;
  --surface-soft: #080808; --nav-bg: #000; --nav-text: #fff; --danger: #ff7373; --focus-ring: rgba(255,212,0,.45);
}
:root[data-theme="b-caffe"] {
  color-scheme: light;
  --green: #141414; --green-2: #be2f2d; --orange: #be2f2d; --ink: #141414;
  --muted: #5b554e; --line: #c8c2b9; --paper: #f6f4ea; --surface: #fff;
  --surface-alt: #e3dfd9; --surface-soft: #f6f4ea; --nav-bg: #141414; --nav-text: #fff;
  --danger: #9b201f; --focus-ring: rgba(190,47,45,.28); --brand-gold: #b59461;
}
:root[data-theme="b-caffe"] body,
:root[data-theme="b-caffe"] button,
:root[data-theme="b-caffe"] input,
:root[data-theme="b-caffe"] select,
:root[data-theme="b-caffe"] textarea { font-family: Gotham, Montserrat, "Avenir Next", Arial, sans-serif; }
:root[data-theme="b-caffe"] h1,
:root[data-theme="b-caffe"] h2,
:root[data-theme="b-caffe"] h3,
:root[data-theme="b-caffe"] .document-title { font-family: Plantin, Georgia, "Times New Roman", serif; }
:root[data-theme="b-caffe"] .brand-mark { background: var(--brand-gold); color: #141414; }
:root[data-theme="b-caffe"] .button.primary { background: #be2f2d; color: #fff; }
:root[data-theme="b-caffe"] .eyebrow { color: #be2f2d; }

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--paper); color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .45; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.muted { color: var(--muted); }
.eyebrow { margin: 0 0 7px; color: var(--green-2); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
h1 { margin: 0; font-family: Georgia, serif; font-size: clamp(28px, 4vw, 38px); letter-spacing: -.5px; }
h2 { margin: 0; font-size: 18px; }

.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: linear-gradient(145deg, #173f35 0 46%, #f4f5f1 46%); }
.login-card { width: min(430px, 100%); padding: 34px; border: 1px solid var(--line); border-radius: 22px; background: white; box-shadow: 0 24px 70px rgba(15, 49, 39, .18); }
.login-card.wide { width: min(600px, 100%); }
.brand-mark { width: 50px; height: 50px; display: grid; place-items: center; margin-bottom: 22px; border-radius: 14px; background: #f1a66d; color: var(--green); font-weight: 900; }
.brand-mark.small { width: 38px; height: 38px; margin: 0; border-radius: 11px; }
.form-stack { display: grid; gap: 15px; margin-top: 25px; }
.form-error { color: var(--danger); font-size: 13px; }
.field { display: grid; gap: 6px; }
[hidden] { display: none !important; }
.field span { color: var(--muted); font-size: 12px; font-weight: 750; }
.field input, .field select, .search-field input { width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid #cfd8d3; border-radius: 11px; background: white; color: var(--ink); }
.field input:focus, .field select:focus, .search-field input:focus { outline: 3px solid rgba(232, 118, 43, .2); border-color: var(--orange); }
.input-suffix { display: flex; align-items: center; border: 1px solid #cfd8d3; border-radius: 11px; background: white; overflow: hidden; }
.input-suffix:focus-within { outline: 3px solid rgba(232, 118, 43, .2); border-color: var(--orange); }
.field .input-suffix input { min-width: 0; border: 0; border-radius: 0; outline: 0; }
.input-suffix > span { padding: 0 14px; color: var(--muted); font-weight: 800; }
.searchable-combo { position: relative; }
.searchable-combo > input[role="combobox"] { width: 100%; min-height: 46px; padding: 10px 40px 10px 12px; border: 1px solid #cfd8d3; border-radius: 11px; background: white; color: var(--ink); }
.searchable-combo::after { content: '⌕'; position: absolute; top: 12px; right: 13px; color: var(--muted); pointer-events: none; }
.combo-popover { position: absolute; z-index: 45; top: calc(100% + 5px); left: 0; right: 0; max-height: min(320px,45vh); overflow: auto; padding: 5px; border: 1px solid var(--line); border-radius: 12px; background: white; box-shadow: 0 16px 38px rgba(10,35,28,.2); }
.combo-popover [role="option"] { width: 100%; min-height: 48px; display: grid; gap: 3px; padding: 9px 11px; border: 0; border-radius: 9px; background: white; color: var(--ink); text-align: left; }
.combo-popover [role="option"]:hover,.combo-popover [role="option"][aria-selected="true"] { background: #e7f0ec; }
.combo-popover small { color: var(--muted); }
.combo-state { min-height: 48px; display: grid; place-items: center; padding: 8px; color: var(--muted); font-size: 13px; }
.combo-state.error { color: var(--danger); }
.sku-assist-action { align-content: end; }
[data-sku-status][data-state="AVAILABLE"] { color: #176044; }
[data-sku-status][data-state="ALREADY_USED"],[data-sku-status][data-state="INVALID_FORMAT"] { color: var(--danger); }
.sku-overview { display: grid; gap: 16px; }
.sku-overview section { display: grid; gap: 8px; }
.sku-overview h3,.sku-overview p { margin: 0; }
.sku-existing { max-height: 260px; display: grid; gap: 5px; overflow: auto; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); }
.button { min-height: 44px; padding: 9px 14px; border: 1px solid transparent; border-radius: 11px; font-weight: 780; }
.button.primary { background: var(--orange); color: white; }
.button.quiet { border-color: var(--line); background: white; color: var(--ink); }
.button.danger { border-color: #d9a5a1; color: var(--danger); }
.button.small { min-height: 40px; padding: 7px 11px; font-size: 13px; }

.company-choice { display: grid; gap: 10px; margin-top: 24px; }
.company-option { min-height: 65px; padding: 13px 15px; display: grid; gap: 3px; text-align: left; border: 1px solid var(--line); border-radius: 13px; background: #f8faf8; }
.company-option span { color: var(--muted); font-size: 12px; }

.app-shell { min-height: 100vh; }
.topbar { min-height: 68px; display: grid; grid-template-columns: 240px 1fr auto; align-items: center; gap: 20px; padding: 10px 28px; background: var(--nav-bg); color: var(--nav-text); }
.brand { display: flex; align-items: center; gap: 10px; }
.brand div { display: grid; }
.brand small { color: #b6cbc3; font-size: 11px; }
.topbar nav { display: flex; gap: 7px; }
.main-navigation { align-items: center; }
.nav-toggle, .nav-backdrop, .mobile-nav-head { display: none; }
.nav-group { position: relative; }
.nav-group summary { min-height: 44px; display: flex; align-items: center; padding: 8px 13px; border-radius: 10px; color: white; font-weight: 750; cursor: pointer; list-style: none; }
.nav-group summary::-webkit-details-marker { display: none; }
.nav-group summary::after { content: '›'; margin-left: 7px; font-size: 17px; transform: rotate(90deg); transition: transform .15s; }
.nav-task-indicator,.nav-task-count { display: inline-grid; min-width: 22px; min-height: 22px; place-items: center; padding: 0 6px; border-radius: 999px; background: #c73535; color: white; font-size: 12px; font-weight: 850; line-height: 1; }
.nav-task-indicator { margin-left: auto; }
.nav-task-link { display: flex; width: 100%; min-height: 44px; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border: 1px solid #e7b8b8; border-radius: 9px; background: #fff5f5; color: #7a2020; font-weight: 800; text-align: left; }
.nav-group[open] summary::after { transform: rotate(-90deg); }
.nav-group.context-active > summary, .nav-group[open] > summary { background: rgba(255,255,255,.12); }
.nav-menu { position: absolute; z-index: 12; top: calc(100% + 7px); left: 0; min-width: 210px; display: grid; gap: 3px; padding: 7px; border: 1px solid rgba(23,63,53,.14); border-radius: 12px; background: white; box-shadow: 0 16px 36px rgba(10,35,28,.2); }
.nav-menu .nav-link { width: 100%; color: var(--ink); text-align: left; }
.nav-menu .nav-link.active { background: #e3eee9; color: var(--green); }
.nav-group:last-child .nav-menu { right: 0; left: auto; }
.nav-link { min-height: 44px; padding: 8px 14px; border: 0; border-radius: 10px; background: transparent; color: white; font-weight: 750; }
.nav-link.active { background: rgba(255,255,255,.12); }
.nav-home { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.account { display: flex; align-items: center; gap: 10px; }
.company-name, .user-name { font-size: 12px; }
.user-name { border: 0; padding: 5px 7px; background: transparent; color: inherit; cursor: pointer; font: inherit; }
.user-name:hover, .user-name:focus-visible { border-radius: 6px; outline: none; background: rgba(255,255,255,.12); }
.topbar .button.quiet { border-color: rgba(255,255,255,.2); background: transparent; color: white; }
.content { width: min(1120px, 100%); margin: 0 auto; padding: 38px 28px 70px; }
.page-head, .detail-head, .panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.toolbar { margin: 26px 0 13px; }
.search-field { display: block; width: min(420px, 100%); }

.customer-list { display: grid; gap: 9px; }
.product-group-list, .unit-list, .product-list, .supplier-list, .warehouse-list, .stock-list, .movement-list, .lot-list { display: grid; gap: 9px; }
.lot-list { margin-top: 20px; }
.lot-card { width: 100%; min-height: 72px; display: grid; grid-template-columns: minmax(180px,1fr) minmax(160px,.8fr) auto 22px; align-items: center; gap: 14px; padding: 13px 17px; text-align: left; border: 1px solid var(--line); border-radius: 14px; background: white; color: var(--ink); }
.lot-card > span:nth-child(-n+2) { display: grid; gap: 4px; }
.lot-card small { color: var(--muted); font-size: 12px; }
.status.mhd-expired { background: #f7dedd; color: var(--danger); }
.status.mhd-expiring_soon { background: #fff0d1; color: #7a5300; }
.status.mhd-no_date { background: #edf0ee; color: #5a6561; }
.lot-manager h3, .lot-manager p { margin: 0; }
.warehouse-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 18px; margin-top: 24px; }
.warehouse-card, .stock-card, .movement-card { min-height: 64px; display: grid; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: white; color: var(--ink); }
.warehouse-card { width: 100%; grid-template-columns: 1fr auto; text-align: left; }
.warehouse-card span:first-child, .stock-card span:first-child, .movement-card span:first-child { display: grid; gap: 3px; }
.warehouse-card small, .stock-card small, .movement-card small, .movement-card time { color: var(--muted); font-size: 12px; }
.stock-card { grid-template-columns: 1fr auto; }
.stock-card b, .movement-card b { color: var(--green); }
.movement-panel, .location-panel { margin-top: 18px; }
.movement-list { margin-top: 16px; }
.movement-card { grid-template-columns: 1fr auto 170px; }
.supplier-card { width: 100%; min-height: 72px; display: grid; grid-template-columns: 1fr auto 22px; align-items: center; gap: 16px; padding: 13px 17px; text-align: left; border: 1px solid var(--line); border-radius: 14px; background: white; color: var(--ink); }
.supplier-card > span:first-child { display: grid; gap: 4px; }
.supplier-card small { color: var(--muted); }
.full-panel { grid-column: 1 / -1; }
.entity-list { display: grid; gap: 8px; margin-top: 17px; }
.entity-card { min-height: 64px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.entity-card > span:first-child { display: grid; gap: 4px; }
.entity-card small { color: var(--muted); }
.user-warehouse { display: grid; justify-items: end; gap: 3px; }
.customer-card { width: 100%; min-height: 78px; display: grid; grid-template-columns: minmax(180px, 1.3fr) minmax(220px, 1fr) auto 22px; align-items: center; gap: 18px; padding: 14px 17px; text-align: left; border: 1px solid var(--line); border-radius: 14px; background: white; color: var(--ink); }
.customer-card:hover, .contact-card:hover { border-color: #93afa5; }
.product-group-card { width: 100%; min-height: 68px; display: grid; grid-template-columns: 1fr auto 22px; align-items: center; gap: 18px; padding: 13px 17px; text-align: left; border: 1px solid var(--line); border-radius: 14px; background: white; color: var(--ink); }
.product-group-card:hover { border-color: #93afa5; }
.product-group-card > span:first-child { display: grid; gap: 4px; }
.product-group-card small { color: var(--muted); font-size: 12px; }
.unit-toolbar { display: flex; align-items: end; gap: 12px; }
.field.compact { width: 190px; }
.unit-symbol { font-size: 19px; font-weight: 850; color: var(--green); }
.product-card { width: 100%; min-height: 72px; display: grid; grid-template-columns: minmax(180px, 1fr) minmax(150px, .7fr) auto 22px; align-items: center; gap: 16px; padding: 13px 17px; text-align: left; border: 1px solid var(--line); border-radius: 14px; background: white; color: var(--ink); }
.product-card:hover { border-color: #93afa5; }
.product-card > span:first-child, .product-reference { display: grid; gap: 4px; }
.product-card small, .product-reference { color: var(--muted); font-size: 12px; }
.form-secondary { display: flex; gap: 8px; flex-wrap: wrap; }
.hidden { display: none !important; }
.field small { color: var(--muted); font-size: 12px; }
textarea { width: 100%; resize: vertical; font: inherit; padding: 11px 12px; border: 1px solid #cbd5d0; border-radius: 10px; color: var(--ink); }
.field.full, .flag-grid.full { grid-column: 1 / -1; }
.flag-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 12px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.flag-grid legend { padding: 0 6px; color: var(--muted); font-size: 12px; font-weight: 700; }
.customer-card > span, .customer-meta { display: grid; gap: 4px; }
.customer-card small, .customer-meta { color: var(--muted); font-size: 12px; }
.status { display: inline-flex; width: fit-content; padding: 5px 9px; border-radius: 999px; background: #e1eee8; color: #1c5e4b; font-size: 11px; font-weight: 800; }
.status.inactive { background: #edf0ee; color: #5a6561; }
.status.primary { background: #fff0e6; color: #9d4614; }
.chevron { color: var(--muted); font-size: 24px; }
.pagination { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; color: var(--muted); font-size: 12px; }
.pagination div { display: flex; gap: 8px; }
.empty { min-height: 180px; display: grid; place-content: center; gap: 5px; text-align: center; border: 1px dashed #bcc9c3; border-radius: 14px; color: var(--muted); }
.empty.compact { min-height: 90px; }

.back-link { min-height: 44px; margin-bottom: 20px; padding: 0; border: 0; background: transparent; color: var(--green-2); font-weight: 750; }
.detail-grid { display: grid; grid-template-columns: minmax(280px, .8fr) minmax(420px, 1.2fr); gap: 18px; margin-top: 24px; }
.panel { padding: 21px; border: 1px solid var(--line); border-radius: var(--radius); background: white; }
.facts { display: grid; gap: 15px; margin: 22px 0 0; }
.facts div { display: grid; grid-template-columns: 90px 1fr; gap: 12px; }
.facts dt { color: var(--muted); font-size: 12px; }
.facts dd { margin: 0; font-size: 13px; font-weight: 700; }
[data-backup-panel] .facts div { grid-template-columns: minmax(170px,220px) minmax(0,1fr); }
[data-backup-panel] .facts dt,[data-backup-panel] .facts dd { overflow-wrap: anywhere; }
[data-onedrive-certificate] code { overflow-wrap: anywhere; }
[data-backup-panel] .table-wrap table { min-width: 640px; }
[data-backup-panel] .table-wrap th,[data-backup-panel] .table-wrap td:nth-child(-n+3) { white-space: nowrap; overflow-wrap: normal; }
@media (max-width: 600px) {
  [data-backup-panel] .facts div { grid-template-columns: minmax(0,1fr); gap: 4px; }
}
.contact-list { display: grid; gap: 8px; margin-top: 17px; }
.contact-card { width: 100%; min-height: 64px; display: grid; grid-template-columns: 40px 1fr auto 18px; align-items: center; gap: 10px; padding: 10px; text-align: left; border: 1px solid var(--line); border-radius: 12px; background: #fbfcfb; color: var(--ink); }
.contact-card span:nth-child(2) { display: grid; gap: 3px; }
.contact-card small { color: var(--muted); }
.avatar { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: #dcebe4; color: var(--green); font-size: 12px; font-weight: 850; }

.modal { width: min(720px, calc(100vw - 24px)); max-height: calc(100vh - 24px); padding: 0; border: 0; border-radius: 18px; box-shadow: 0 30px 90px rgba(10,35,28,.3); }
.modal:has(#document-mail-form) { width: min(960px, calc(100vw - 24px)); }
#document-mail-form textarea,#mail-template-form textarea,#mail-signature-form textarea { min-height: 190px; line-height: 1.5; }
.modal::backdrop { background: rgba(15,36,30,.55); }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 19px 21px; border-bottom: 1px solid var(--line); }
.icon-button { width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--paper); font-size: 24px; }
.modal-body { padding: 21px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
#master-transfer-form, #master-transfer-form .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: 0; }
#master-transfer-form .field, [data-transfer-mapping] { min-width: 0; }
#master-transfer-form input, #master-transfer-form select { min-width: 0; max-width: 100%; }
#master-transfer-form .field span, #master-transfer-form .field small, [data-transfer-result] summary { overflow-wrap: anywhere; }
.content[data-page="master-data-transfer"] .form-actions { position: static; margin: 0; padding: 8px 0 0; border: 0; background: transparent; flex-wrap: wrap; min-width: 0; }
.content[data-page="master-data-transfer"] .form-actions .button { min-width: 0; flex: 1 1 145px; }
@media (max-width: 760px) {
  #master-transfer-form, #master-transfer-form .form-grid { grid-template-columns: minmax(0, 1fr); }
}
#customer-group-form .field { align-content: start; }
#customer-group-form .field input, #customer-group-form .field select { height: 46px; }
.form-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 9px; padding-top: 8px; }
.signature-pad { display:grid; gap:10px; }
.signature-pad canvas { width:100%; height:auto; max-height:230px; touch-action:none; background:#fff; border:2px solid var(--line); border-radius:12px; cursor:crosshair; }
.signature-pad canvas:focus { outline:3px solid color-mix(in srgb,var(--green) 32%,transparent); outline-offset:2px; }
.signature-drawing-preview { margin:0; padding:10px; border:1px dashed var(--line); border-radius:10px; background:#fff; }
.signature-drawing-preview figcaption { color:var(--muted); font-size:.85rem; margin-bottom:6px; }
.signature-drawing-preview img { display:block; width:100%; max-height:150px; object-fit:contain; background:#fff; }
.signature-proof { display:grid; gap:4px; padding:14px; border:1px solid var(--line); border-radius:12px; background:var(--surface-alt); }
.signature-proof small { color:var(--muted); overflow-wrap:anywhere; }
.loan-attachment-form { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin:14px 0; }
.loan-attachment-form [data-loan-file-name] { min-width:180px; flex:1; overflow-wrap:anywhere; }
.check-field { min-height: 46px; display: flex; align-items: center; gap: 10px; }
.check-field input { width: 20px; height: 20px; }
.full { grid-column: 1 / -1; }
.document-dropzone { min-height: 130px; display: grid; place-content: center; gap: 6px; text-align: center; border: 2px dashed #9bb8ab; border-radius: 14px; background: #f6faf8; cursor: pointer; }
.document-dropzone.dragging { border-color: var(--green); background: #e8f3ee; }
.document-dropzone input { max-width: 100%; margin: 8px auto 0; }
.document-state { color: var(--muted); font-size: 12px; }
#goods-receipt-form,
#goods-receipt-form > *,
#goods-receipt-form .field,
#goods-receipt-form .searchable-combo,
#goods-receipt-form .receipt-position { min-width: 0; }
#goods-receipt-form input,
#goods-receipt-form select,
#goods-receipt-form textarea { max-width: 100%; }
.receipt-positions { display: grid; gap: 12px; }
.receipt-position { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; }
.receipt-position-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 12px; }
.financial-hidden .field:has([data-unit-cost]),
.financial-hidden .field:has([name="unitCostBasis"]),
.financial-hidden .field:has([data-cost]) { display: none; }
.recognition-row { background: #fff; }
.recognition-row-head,.row-actions,.ignored-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.recognition-badge { display: inline-flex; width: fit-content; border-radius: 999px; padding: 5px 9px; font-size: 11px; font-weight: 800; }
.recognition-badge.green { background: #e4f3eb; color: #176044; }
.recognition-badge.yellow { background: #fff3ce; color: #7b5700; }
.recognition-badge.red { background: #fde4e2; color: #9a2e27; }
.recognition-warning { padding: 11px 13px; border: 1px solid #e8b55e; border-radius: 10px; background: #fff8e7; }
.recognition-evidence { padding: 8px 10px; border-radius: 9px; background: #f6f8f7; font-size: 12px; }
.recognition-evidence summary { cursor: pointer; font-weight: 700; }
.conflict-text { color: #9a2e27; margin-top: 5px; }
.recognition-row.ignored { background: #f4f6f5; border-style: dashed; }
.document-state[data-state="reading"],.document-state[data-state="matching"] { color: var(--green); font-weight: 700; }
.document-state[data-state="conflict"] { color: #9a2e27; font-weight: 700; }
.inventory-panel { margin-top: 22px; overflow-x: auto; }
.recognized-reference { margin: 0; padding: 11px 13px; border-radius: 10px; background: var(--paper); }
.inventory-header, .inventory-row { min-width: 720px; display: grid; grid-template-columns: minmax(270px,1fr) 120px 150px 140px; align-items: center; gap: 12px; padding: 11px 8px; }
.inventory-header { color: var(--muted); font-size: 12px; border-bottom: 1px solid var(--line); }
.inventory-row { border-bottom: 1px solid var(--line); }
.inventory-row > span { display: grid; gap: 3px; }
.inventory-row small { color: var(--muted); }
.inventory-row input { min-height: 44px; width: 100%; padding: 9px 11px; border: 1px solid #cfd8d3; border-radius: 10px; font: inherit; }
.inventory-row.has-difference { background: #fff8ef; }
.toast { position: fixed; right: 20px; bottom: 20px; z-index: 20; max-width: min(420px, calc(100vw - 30px)); padding: 13px 16px; border-radius: 11px; background: var(--green); color: white; opacity: 0; transform: translateY(12px); pointer-events: none; transition: .18s; }
.toast.show { opacity: 1; transform: none; }
.delivery-lines-table table { min-width: 760px; }
.delivery-lines-table td > span { display: block; }
.delivery-lines-table td > span + span { margin-top: 8px; }
.delivery-lines-table td small { overflow-wrap: anywhere; }
.delivery-history { margin: 16px 2px 0; }
.delivery-finalization { display: grid; gap: 16px; }
.finalization-summary { display: grid; gap: 5px; padding: 14px; border-radius: 12px; background: var(--paper); }
.allocation-lines { display: grid; gap: 12px; }
.allocation-line { display: grid; gap: 12px; padding: 15px; border: 1px solid var(--line); border-radius: 13px; }
.allocation-line .panel-head > div { display: grid; gap: 4px; }
.allocation-line small, .finalization-summary small { color: var(--muted); }
.allocation-options { display: grid; gap: 7px; padding: 12px; border: 1px solid var(--line); border-radius: 11px; }
.allocation-options legend { padding: 0 6px; font-size: 12px; font-weight: 750; }
.manual-lots, .fefo-suggestion { display: grid; gap: 8px; }
.allocation-lot { display: grid; grid-template-columns: 1fr 120px; align-items: center; gap: 10px; }
.allocation-lot input { width: 100%; min-height: 42px; padding: 8px 10px; border: 1px solid #cfd8d3; border-radius: 9px; }
.fefo-suggestion span { color: var(--muted); font-size: 12px; }
.delivery-commercial-form { width: 100%; }
.delivery-commercial-form .panel { min-width: 0; }
.delivery-commercial-line { grid-template-columns: 1fr; overflow: visible; }
.delivery-commercial-line > .searchable-combo-field { grid-column: 1 / -1; }
.delivery-commercial-fields { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 10px; align-items: end; min-width: 0; }
.delivery-line-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; padding-top: 4px; border-top: 1px solid var(--line); }
.delivery-source-line:not(:has([data-include]:checked)) { opacity: .62; background: var(--paper); }
.sales-line > [data-remove], .sales-line > [data-add-sales-position] { align-self: end; }

@media (min-width: 801px) and (max-width: 1200px) {
  .topbar { grid-template-columns: 200px 1fr auto; gap: 8px; padding-inline: 12px; }
  .nav-group summary { padding-inline: 8px; font-size: 12px; }
  .main-navigation { gap: 2px; }
  .account { gap: 4px; }
  .user-name, .company-name { display: none; }
}

@media (max-width: 800px) {
  .topbar { grid-template-columns: 1fr auto auto; gap: 8px; padding: 10px 15px; }
  .nav-toggle { min-height: 44px; display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border: 1px solid rgba(255,255,255,.25); border-radius: 10px; background: transparent; color: white; font-weight: 800; }
  .topbar .main-navigation { position: fixed; z-index: 32; inset: 0 auto 0 0; width: min(360px, 88vw); display: flex; flex-direction: column; align-items: stretch; gap: 6px; overflow-y: auto; padding: max(18px, env(safe-area-inset-top)) 14px 24px; background: var(--green); box-shadow: 16px 0 40px rgba(10,35,28,.28); visibility: hidden; transform: translateX(-105%); }
  .topbar .main-navigation.open { visibility: visible; transform: none; }
  .mobile-nav-head { min-height: 48px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; padding: 0 4px; }
  .mobile-nav-head .icon-button { min-width: 44px; min-height: 44px; border-color: rgba(255,255,255,.25); color: white; }
  .nav-group { width: 100%; }
  .nav-group summary { justify-content: space-between; min-height: 48px; font-size: 14px; }
  .nav-group summary::after { content: '›'; font-size: 22px; transform: rotate(90deg); transition: transform .15s; }
  .nav-group[open] summary::after { transform: rotate(-90deg); }
  .nav-menu, .nav-group:last-child .nav-menu { position: static; min-width: 0; margin-top: 4px; border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.06); box-shadow: none; }
  .topbar nav .nav-link { min-width: 0; min-height: 48px; overflow: hidden; padding-inline: 12px; font-size: 14px; text-overflow: ellipsis; }
  .nav-menu .nav-link { color: white; }
  .nav-menu .nav-link.active { background: rgba(255,255,255,.16); color: white; }
  .nav-backdrop { position: fixed; z-index: 31; inset: 0; width: 100%; border: 0; background: rgba(6,22,18,.5); opacity: 0; pointer-events: none; }
  .nav-backdrop.open { display: block; opacity: 1; pointer-events: auto; }
  body.nav-open { overflow: hidden; }
  .receipt-position { grid-template-columns: 1fr; }
  .user-name, .company-name { display: none; }
  .account { justify-content: flex-end; }
  .content { padding: 27px 15px 60px; }
  .detail-grid { grid-template-columns: 1fr; }
  .warehouse-grid { grid-template-columns: 1fr; }
  .movement-card { grid-template-columns: 1fr auto; }
  .movement-card time { grid-column: 1 / -1; }
  .customer-card { grid-template-columns: 1fr auto 18px; gap: 9px; }
  .customer-meta { grid-column: 1 / -1; grid-row: 2; }
  .customer-card > .status { grid-column: 2; grid-row: 1; }
  .customer-card > .chevron { grid-column: 3; grid-row: 1; }
  .unit-scale { grid-column: 2 / -1; }
  .product-card { grid-template-columns: 1fr auto 18px; }
  .product-reference { grid-column: 1 / -1; grid-row: 2; }
  .product-card > .status { grid-column: 2; grid-row: 1; }
  .product-card > .chevron { grid-column: 3; grid-row: 1; }
  .lot-card { grid-template-columns: 1fr auto 18px; }
  .lot-card > span:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  .lot-card > .status { grid-column: 2; grid-row: 1; }
  .lot-card > .chevron { grid-column: 3; grid-row: 1; }
  .inventory-panel { padding: 12px; overflow: visible; }
  .inventory-header { display: none; }
  .inventory-row { min-width: 0; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
  .inventory-row > span { grid-column: 1 / -1; }
  .user-warehouse { justify-items: start; }
  .allocation-lot { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .topbar { grid-template-columns: auto auto minmax(0, 1fr); }
  .account { min-width: 0; gap: 4px; }
  .login-shell { padding: 12px; background: var(--green); }
  .login-card { padding: 25px 20px; }
  .brand div { display: none; }
  .page-head, .detail-head { align-items: stretch; flex-direction: column; }
  .shopify-catalog-controls { align-items: stretch; flex-direction: column; }
  .legal-release-list > .panel > .panel-head { align-items: stretch; flex-direction: column; }
  .shopify-catalog-controls .detail-actions { display: grid; grid-template-columns: 1fr; }
  .shopify-catalog-controls .button { width: 100%; }
  .page-head .button, .detail-head .button { width: 100%; }
  .customer-card { min-height: 92px; padding: 13px; }
  .product-group-card { min-height: 68px; padding: 13px; }
  .unit-toolbar { align-items: stretch; flex-direction: column; }
  .field.compact { width: 100%; }
  .product-card { min-height: 92px; padding: 13px; }
  .flag-grid { grid-template-columns: 1fr; }
  .customer-meta span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .form-grid { grid-template-columns: 1fr; }
  .combo-popover { position: fixed; z-index: 60; top: auto; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); left: 10px; max-height: 48vh; }
  .pricing-row { grid-template-columns: 1fr; gap: 4px; }
  .cost-grid { grid-template-columns: 1fr; }
  .pricing-section .panel-head { align-items: stretch; flex-direction: column; }
  .pricing-section .panel-head > div:last-child { display: grid; gap: 7px; }
  .form-actions { position: sticky; bottom: 0; margin: 0 -21px -21px; padding: 13px 21px calc(13px + env(safe-area-inset-bottom)); background: white; border-top: 1px solid var(--line); }
  .form-actions .button { flex: 1; }
  .receipt-position-actions .button { flex: 1 1 100%; width: 100%; }
  .pagination { align-items: flex-start; gap: 12px; }
}

.recipient-switch,.detail-actions,.sales-actions{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}.sales-prospect{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.sales-form,.sales-lines,.sales-line,.sales-product-search{min-width:0}.sales-line-head{padding:.5rem;font-size:.75rem;font-weight:700;color:var(--muted)}.sales-line{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.75rem;align-items:end;overflow:visible}.sales-product-search{grid-column:1/-1}.sales-product-search .searchable-combo-field{width:100%}.sales-product-search .combo-popover{width:100%;max-height:min(420px,55vh);overflow:auto}.sales-line-fields{grid-column:1/-1;display:grid;grid-template-columns:1.1fr .7fr 1fr .7fr 1fr 1fr;gap:.5rem;align-items:end;min-width:0}.sales-line-note{min-width:0}.sales-totals{display:flex;justify-content:flex-end;gap:1.5rem;flex-wrap:wrap;padding:1rem;border-radius:12px;background:#f4f7f5;font-variant-numeric:tabular-nums}.sales-document{overflow:auto}.sales-document table{width:100%;border-collapse:collapse}.sales-document th,.sales-document td{text-align:left;padding:.75rem;border-bottom:1px solid var(--border);vertical-align:top}.sales-document td small{display:block;margin-top:.25rem;color:var(--muted)}.preline{white-space:pre-line}.warning{padding:1rem;border-radius:10px;background:#fff4d6;color:#704d00}
.draft-banner{display:flex;flex-direction:column;gap:.25rem;margin-bottom:1rem;padding:1rem 1.1rem;border:1px solid #d99f1e;border-radius:12px;background:#fff7dc;color:#694900}.draft-banner strong{font-size:1.02rem}.draft-banner span{font-size:.9rem}.invoice-lines{display:grid;gap:.8rem}.invoice-line-card{display:grid;gap:.75rem}.invoice-line-fields{grid-template-columns:repeat(6,minmax(0,1fr))}.invoice-source-line.inactive{opacity:.72}.invoice-source-line .check-field small{display:block;margin-top:.2rem;color:var(--muted)}
.settlement-panel{margin-top:1rem}.settlement-facts{grid-template-columns:repeat(4,minmax(0,1fr))}.journal-head{margin-top:1.25rem}.payment-journal{display:grid;gap:.65rem}.payment-entry{display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:.8rem 0;border-top:1px solid var(--line)}.payment-entry>div{display:grid;gap:.2rem}.payment-entry small{display:block;color:var(--muted)}.payment-entry.reversal strong{color:#8b3a32}.open-item-summary{display:grid;text-align:right;gap:.15rem}.open-item-summary small{color:var(--muted)}
@media(max-width:900px){.sales-line-head{display:none}.sales-line-fields{grid-template-columns:repeat(3,minmax(0,1fr))}.invoice-line-fields{grid-template-columns:repeat(2,minmax(0,1fr))}.sales-prospect{grid-template-columns:1fr}.sales-document table{min-width:760px}}
@media(max-width:900px){.delivery-commercial-fields{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){.settlement-facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.sales-product-search .combo-popover{width:auto}.sales-line{grid-template-columns:1fr 1fr}.sales-line-fields,.sales-product-search,.sales-line-note{grid-column:1/-1}.delivery-commercial-fields,.invoice-line-fields{grid-template-columns:1fr}.delivery-line-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.delivery-line-actions .button,.sales-line [data-remove],.sales-line [data-add-sales-position]{width:100%}.sales-totals{justify-content:flex-start;flex-direction:column;gap:.35rem}.detail-actions .button{width:100%}}
@media(max-width:520px){.settlement-facts{grid-template-columns:1fr}.payment-entry{align-items:flex-start;flex-direction:column}.payment-entry .button{width:100%}.open-item-summary{text-align:left}}
@media(max-width:340px){.sales-line{grid-template-columns:1fr}.delivery-line-actions{grid-template-columns:1fr}}

/* V1-orientierte Informationsarchitektur mit moderner V2-Darstellung */
.toolbar { display: flex; align-items: end; flex-wrap: wrap; gap: 12px; margin: 22px 0 14px; }
.toolbar .search-field { flex: 1 1 320px; }
.data-table { overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: white; }
.table-scroll { width: 100%; overflow-x: auto; }
.data-table table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table th { padding: 10px 12px; border-bottom: 1px solid #cfd9d4; background: #eef3f0; color: #44514c; font-size: 11px; font-weight: 850; letter-spacing: .025em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.data-table td { min-height: 48px; padding: 10px 12px; border-bottom: 1px solid #e4e9e6; text-align: left; vertical-align: middle; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr[tabindex] { cursor: pointer; }
.data-table tbody tr[tabindex]:hover { background: #f7faf8; }
.data-table tbody tr[tabindex]:focus-visible { position: relative; outline: 3px solid rgba(232,118,43,.34); outline-offset: -3px; }
.data-table .amount { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.data-table .action { width: 1%; text-align: right; white-space: nowrap; }
.document-key-facts { display:flex; flex-wrap:wrap; gap:1px; overflow:hidden; margin-bottom:16px; border:1px solid var(--line); border-radius:13px; background:var(--line); }
.document-key-facts > span { flex:1 1 110px; min-width:0; display:grid; gap:5px; padding:11px 12px; background:white; }
.document-key-facts small { color:var(--muted); font-size:10px; font-weight:800; letter-spacing:.035em; text-transform:uppercase; }
.document-key-facts strong { overflow-wrap:anywhere; font-size:13px; font-variant-numeric:tabular-nums; }
.totals-panel .tax-summary { margin-bottom:10px; }
.evidence-panel > summary { cursor:pointer; list-style:none; }
.evidence-panel > summary::-webkit-details-marker { display:none; }
.evidence-panel > summary span { display:grid; gap:4px; }
.evidence-panel > summary small { color:var(--muted); }
.evidence-panel[open] > summary { padding-bottom:14px; border-bottom:1px solid var(--line); }
.evidence-content { display:grid; gap:18px; padding-top:16px; }
.evidence-content > section+section { padding-top:16px; border-top:1px solid var(--line); }
.compact-settlement .settlement-facts { grid-template-columns:repeat(3,minmax(0,1fr)); }
.compact-settlement .settlement-facts > div { grid-template-columns:minmax(0,1fr); gap:4px; }
.compact-settlement .settlement-facts dt, .compact-settlement .settlement-facts dd { overflow-wrap:anywhere; }
.table-open { min-height: 40px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 9px; background: white; color: var(--green); font-size: 12px; font-weight: 800; }
.table-open:hover,.table-open:focus-visible { border-color: #7e9f92; background: #edf5f1; outline: 0; }
.table-state { min-height: 150px; display: grid; place-items: center; color: var(--muted); }
.table-state.error { color: var(--danger); }
.table-empty-row td { padding: 0; }
.table-empty-row .empty { border: 0; border-radius: 0; }
.status { line-height: 1.2; white-space: nowrap; }
.status-success { background: #e1eee8; color: #1c5e4b; }
.status-warning { background: #fff0d1; color: #765200; }
.status-danger { background: #f7dedd; color: var(--danger); }
.status-neutral { background: #edf0ee; color: #5a6561; }
.status-credit { background: #ece8fa; color: #58469a; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.section-head h2,.section-head p { margin-block: 0; }
.overview-section,.dashboard-section { min-width: 0; }
.warehouse-sections { display: grid; gap: 26px; margin-top: 24px; }

.dashboard-head { align-items: end; }
.dashboard-date { color: var(--muted); font-size: 13px; font-weight: 750; }
.metric-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin: 24px 0; }
.metric-card { min-height: 112px; display: grid; align-content: center; gap: 8px; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: white; color: var(--ink); text-align: left; box-shadow: 0 3px 12px rgba(20,55,45,.04); }
.metric-card:hover,.metric-card:focus-visible { border-color: #86a497; outline: 3px solid rgba(232,118,43,.18); }
.metric-card span { color: var(--muted); font-size: 12px; font-weight: 750; }
.metric-card strong { color: var(--green); font-size: clamp(24px,3vw,32px); font-variant-numeric: tabular-nums; }
.product-overview { display:grid; grid-template-columns:minmax(260px,.65fr) minmax(0,1.35fr); gap:18px; margin-bottom:18px; }
.product-image-panel { display:grid; align-content:start; gap:14px; }
.product-image-frame { min-height:220px; display:grid; place-items:center; overflow:hidden; border:1px solid var(--line); border-radius:14px; background:var(--surface-soft,#f4f6f5); color:var(--muted); }
.product-image-frame img { width:100%; height:280px; display:block; object-fit:contain; background:white; }
.product-image-upload { cursor:pointer; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0,2fr) minmax(260px,.8fr); gap: 20px; align-items: start; }
.dashboard-section { padding: 18px; border: 1px solid var(--line); border-radius: 15px; background: white; }
.dashboard-section .data-table { border-radius: 10px; }
.dashboard-workspace { margin-bottom: 18px; }
.quick-section-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.quick-section { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: #f8faf9; }
.quick-section h3 { margin: 0 0 10px; color: var(--muted); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.quick-action-list { display: grid; gap: 6px; }
.quick-action-list button { display: flex; min-height: 42px; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px solid transparent; border-radius: 9px; background: white; color: var(--ink); text-align: left; }
.quick-action-list button:hover,.quick-action-list button:focus-visible { border-color: var(--green); outline: 0; }
.quick-action-list button.primary { background: var(--green); color: white; }
.action-menu { position: relative; }
.action-menu > summary { display: inline-flex; align-items: center; list-style: none; cursor: pointer; }
.action-menu > summary::-webkit-details-marker { display: none; }
.action-menu > summary::after { content: '⌄'; margin-left: 7px; }
.action-menu-popover { position: absolute; z-index: 20; top: calc(100% + 6px); right: 0; min-width: 270px; padding: 6px; border: 1px solid var(--line); border-radius: 11px; background: white; box-shadow: 0 14px 34px rgba(24,45,37,.16); }
.action-menu-popover button { width: 100%; min-height: 42px; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); text-align: left; }
.action-menu-popover button:hover,.action-menu-popover button:focus-visible { background: #eef4f1; outline: 0; }
.document-chain { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.document-chain h2 { margin: 2px 0 0; }
.chain-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.chain-link { display: grid; gap: 2px; min-height: 46px; padding: 7px 11px; border: 1px solid var(--line); border-radius: 9px; background: #f8faf9; color: var(--ink); text-align: left; }
.chain-link span { color: var(--muted); font-size: 11px; }
.contribution-panel { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 18px; border-color: #b9d7ca; background: #f1f8f5; }
.contribution-panel h2 { margin: 2px 0 0; }
.contribution-panel > div:last-child { display: grid; justify-items: end; gap: 3px; text-align: right; }
.contribution-panel strong { color: var(--green); font-size: 24px; }
.contribution-panel span,.sales-totals small { display: block; color: var(--muted); font-size: 12px; }
.list-summary { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 8px; margin: 0 0 12px; }
.list-summary > span { display: grid; gap: 3px; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: white; }
.list-summary small { color: var(--muted); }
.list-summary strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.info-banner { display: grid; gap: 3px; margin: 0 0 12px; padding: 11px 13px; border: 1px solid #cbd8e6; border-radius: 10px; background: #f3f7fb; color: #29435c; }
.info-banner span { font-size: 13px; }
.action-list { display: grid; gap: 8px; }
.action-list button { min-height: 58px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #f8faf9; color: var(--ink); text-align: left; }
.action-list button:hover,.action-list button:focus-visible { border-color: #86a497; outline: 2px solid rgba(232,118,43,.18); }
.action-list button span { color: var(--muted); font-size: 12px; }
.action-list button strong { color: var(--green); font-variant-numeric: tabular-nums; }
.action-panel .empty { min-height: 150px; border: 0; }
.role-permission-section { margin-top: 28px; }
.settings-tabs { display: flex; gap: 6px; margin: 0 0 18px; padding: 5px; border: 1px solid var(--line); border-radius: 12px; background: #eef3f0; }
.settings-tabs button { min-height: 40px; padding: 8px 16px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-weight: 800; }
.settings-tabs button[aria-selected="true"] { background: white; color: var(--green); box-shadow: 0 1px 4px rgba(24,48,38,.12); }
.user-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.role-permission-layout { min-width: 0; display: grid; grid-template-columns: minmax(180px,230px) minmax(0,1fr); gap: 16px; align-items: start; }
.role-selector { display: grid; gap: 7px; padding: 8px; border: 1px solid var(--line); border-radius: 13px; background: white; }
.role-selector button { min-height: 56px; display: grid; gap: 3px; padding: 9px 11px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--ink); text-align: left; }
.role-selector button span { color: var(--muted); font-size: 10px; letter-spacing: .06em; }
.role-selector button:hover,.role-selector button:focus-visible { border-color: #8ba99d; background: #f1f6f4; outline: 3px solid rgba(232,118,43,.18); }
.role-selector button.active { border-color: var(--green); background: var(--green); color: white; }
.role-selector button.active span { color: #c5d9d1; }
.role-permission-content { min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: 13px; background: white; }
.permission-summary { display: flex; align-items: end; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.permission-summary h2,.permission-summary p { margin: 0; }
.permission-summary > span { color: var(--muted); font-size: 12px; font-weight: 750; }
.role-permission-content .info-banner { margin-bottom: 16px; }
.permission-groups { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.permission-group { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 11px; }
.permission-group h3 { margin: 0; padding: 10px 12px; border-bottom: 1px solid var(--line); background: #eef3f0; color: #44514c; font-size: 12px; letter-spacing: .03em; text-transform: uppercase; }
.permission-group ul { display: grid; margin: 0; padding: 0; list-style: none; }
.permission-entry { min-width: 0; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; border-bottom: 1px solid #e7ece9; }
.permission-entry:last-child { border-bottom: 0; }
.permission-entry > span:first-child { min-width: 0; display: grid; gap: 3px; }
.permission-entry strong { font-size: 12px; }
.permission-entry code { overflow-wrap: anywhere; color: var(--muted); font-size: 10px; }
.permission-state { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; font-size: 10px; font-weight: 800; }
.permission-state > span { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; }
.permission-state.allowed { color: #176044; }
.permission-state.allowed > span { background: #e1eee8; }
.permission-state.denied { color: #68736f; }
.permission-state.denied > span { background: #edf0ee; }
.permission-switch { display: inline-flex; align-items: center; gap: 7px; color: #68736f; font-size: 10px; font-weight: 800; white-space: nowrap; }
.permission-switch input { width: 18px; height: 18px; margin: 0; accent-color: var(--green); }
.permission-switch:has(input:checked) { color: #176044; }
.permission-switch:has(input:disabled) { opacity: .65; cursor: not-allowed; }
.role-permission-actions { display: flex; justify-content: flex-end; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }

@media (min-width: 801px) {
  .app-shell { min-height: 100vh; display: grid; grid-template-columns: 260px minmax(0,1fr); }
  .topbar { position: sticky; z-index: 20; top: 0; grid-column: 1; grid-row: 1; width: 260px; height: 100vh; min-height: 0; display: grid; grid-template-columns: 1fr; grid-template-rows: auto minmax(0,1fr) auto; align-items: stretch; gap: 22px; padding: 22px 16px 18px; overflow: hidden; }
  .topbar .brand { padding: 0 5px; }
  .topbar nav,.main-navigation { min-height: 0; display: flex; flex-direction: column; align-items: stretch; gap: 8px; overflow-y: auto; }
  .nav-group { width: 100%; position: static; }
  .nav-group summary { min-height: 36px; padding: 7px 10px; color: #b7cdc4; font-size: 10px; letter-spacing: .09em; text-transform: uppercase; }
  .nav-group summary::after { content: '›'; margin-left: auto; font-size: 17px; transform: rotate(90deg); }
  .nav-group[open] summary::after { transform: rotate(-90deg); }
  .nav-group.context-active > summary,.nav-group[open] > summary { background: rgba(255,255,255,.07); color: white; }
  .nav-menu,.nav-group:last-child .nav-menu { position: static; min-width: 0; display: grid; gap: 2px; margin: 3px 0 6px; padding: 3px; border: 0; border-radius: 9px; background: transparent; box-shadow: none; }
  .topbar nav .nav-link,.nav-menu .nav-link { width: 100%; min-height: 40px; padding: 8px 11px; color: #e6f0ec; font-size: 13px; text-align: left; }
  .nav-menu .nav-link:hover,.nav-menu .nav-link:focus-visible { background: rgba(255,255,255,.09); outline: 0; }
  .nav-menu .nav-link.active { background: #f4f7f5; color: var(--green); }
  .account { display: grid; align-items: stretch; gap: 6px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.14); }
  .account .company-name,.account .user-name { display: block; overflow: hidden; padding: 4px 7px; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
  .account .company-name { color: #b7cdc4; }
  .content { grid-column: 2; grid-row: 1; width: min(1460px,100%); margin: 0 auto; padding: 30px 30px 70px; }
}

@media (min-width: 721px) and (max-width: 1200px) {
  .data-table [data-priority="secondary"] { display: none; }
  .dashboard-grid { grid-template-columns: 1fr; }
}

@media (max-width: 1050px) {
  .permission-groups { grid-template-columns: 1fr; }
}

@media (min-width: 721px) and (max-width: 950px) {
  .metric-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .quick-section-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .list-summary { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

@media (max-width: 720px) {
  .document-key-facts > span { flex-basis:calc(50% - .5px); }
  .compact-settlement .settlement-facts { grid-template-columns:1fr; }
  .toolbar { align-items: stretch; flex-direction: column; }
  .toolbar .field.compact,.toolbar .search-field { width: 100%; }
  .data-table { overflow: visible; border: 0; background: transparent; }
  .table-scroll { overflow: visible; }
  .data-table table,.data-table tbody { display: block; width: 100%; }
  .data-table thead { display: none; }
  .data-table tbody { display: grid; gap: 9px; }
  .data-table tbody tr { display: grid; grid-template-columns: 1fr; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: white; }
  .data-table tbody td { min-height: 0; display: grid; grid-template-columns: minmax(105px,38%) minmax(0,1fr); align-items: baseline; gap: 10px; padding: 6px 0; border: 0; text-align: left; white-space: normal; }
  .data-table tbody td::before { content: attr(data-label); color: var(--muted); font-size: 10px; font-weight: 850; letter-spacing: .035em; text-transform: uppercase; }
  .data-table tbody td[data-priority="secondary"] { display: none; }
  .data-table tbody td.amount { text-align: left; }
  .content[data-page^="report"] .data-table tbody td.amount { text-align: right; font-variant-numeric: tabular-nums; }
  .data-table tbody td.action { width: auto; margin-top: 4px; }
  .data-table tbody td.action .table-open { width: 100%; }
  .data-table .table-empty-row { display: block; padding: 0; }
  .data-table .table-empty-row td { display: block; }
  .data-table .table-empty-row td::before { content: none; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .dashboard-section { padding: 14px; }
  .metric-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .quick-section-grid { grid-template-columns: 1fr; }
  .list-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .document-chain { align-items: stretch; flex-direction: column; }
  .contribution-panel { align-items: stretch; flex-direction: column; }
  .contribution-panel > div:last-child { justify-items: start; text-align: left; }
  .chain-links { justify-content: stretch; }
  .chain-link { width: 100%; }
  .action-menu,.action-menu > summary { width: 100%; }
  .action-menu-popover { position: static; min-width: 0; margin-top: 6px; box-shadow: none; }
  .metric-card { min-height: 96px; padding: 14px; }
  .role-permission-layout { grid-template-columns: 1fr; }
  .role-selector { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .role-selector button { min-height: 50px; }
  .role-permission-content { padding: 14px; }
  .permission-summary { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 420px) {
  .metric-grid { grid-template-columns: 1fr; }
}

/* Phase F: zentrale, firmenbezogene Designtokens. */
.panel,.data-table,.login-card,.modal > div,.role-selector,.role-permission-content,.permission-group,
.customer-card,.product-group-card,.supplier-card,.lot-card,.warehouse-card,.stock-card,.movement-card,
.entity-card,.list-summary > span,.managed-company,.number-range-card { background: var(--surface); color: var(--ink); }
.field input,.field select,.field textarea,.search-field input,.input-suffix,.searchable-combo > input[role="combobox"],
.combo-popover,.combo-popover [role="option"],.button.quiet,.settings-tabs button[aria-selected="true"] {
  border-color: var(--line); background: var(--surface); color: var(--ink);
}
.field input:focus,.field select:focus,.field textarea:focus,.search-field input:focus,.theme-card:focus-visible {
  outline: 3px solid var(--focus-ring); border-color: var(--orange);
}
.settings-tabs,.permission-group h3 { background: var(--surface-alt); }
.nav-menu { background: var(--surface); color: var(--ink); }
.nav-menu .nav-link { color: var(--ink); }
:root[data-theme="light-neutral"] .topbar .nav-link,
:root[data-theme="light-neutral"] .topbar .nav-group summary,
:root[data-theme="light-neutral"] .topbar .button.quiet { color: var(--nav-text); }
:root[data-theme="light-neutral"] .brand small,
:root[data-theme="light-neutral"] .account .company-name { color: #52635d; }
:root[data-theme="dark"] .status,:root[data-theme="high-contrast"] .status { border: 1px solid currentColor; }
:root[data-theme="dark"] .nav-menu .nav-link.active { background: #e9f4ef; color: #13201c; }
:root[data-theme="high-contrast"] .nav-menu .nav-link.active { background: #fff; color: #000; }
:root[data-theme="dark"] .button.primary,:root[data-theme="dark"] .toast,
:root[data-theme="high-contrast"] .button.primary,:root[data-theme="high-contrast"] .toast { color: #111; }
:root[data-theme="high-contrast"] button,:root[data-theme="high-contrast"] input,
:root[data-theme="high-contrast"] select,:root[data-theme="high-contrast"] textarea { border-width: 2px; }

/* Die späten Theme-Tokens dürfen die dunkle Desktop-Navigation nicht auf eine helle Fläche umschalten. */
@media (min-width: 801px) {
  .topbar .nav-menu { background: transparent; color: var(--nav-text); }
  .topbar .nav-menu .nav-link,.topbar .nav-group summary,.topbar .button.quiet { color: var(--nav-text); }
  .topbar .nav-menu .nav-link:hover,.topbar .nav-menu .nav-link:focus-visible { background: rgba(255,255,255,.13); color: var(--nav-text); }
  .topbar .nav-menu .nav-link.active { background: var(--surface); color: var(--ink); }
}

.settings-context { margin-top: 24px; }
.settings-context > strong { display: block; margin-bottom: 7px; color: var(--muted); font-size: 12px; }
.settings-tabs-wrap { width: 100%; max-width: 100%; min-width: 0; flex-wrap: wrap; margin-top: 0; }
.subsection-switch { display:flex; gap:8px; margin:0 0 16px; }
.system-integrations { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-top:18px; }
.system-integrations .form-actions { padding:0; }
.mail-tabs { width: max-content; max-width: 100%; overflow-x: auto; }
.mail-tabs button { white-space: nowrap; }
.mail-card-list { display: grid; gap: 10px; margin-top: 16px; }
.mail-card { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; padding: 15px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-alt); }
.mail-card > div { display: grid; gap: 4px; min-width: 0; }
.mail-card small { display: block; color: var(--muted); overflow-wrap: anywhere; }
.mail-card .preline { margin: 8px 0 0; }
.mail-template-preview,.attachment-preview,.signature-preview { border-style: dashed; background: var(--surface-alt); }
.mail-template-preview:empty { display: none; }
.attachment-preview,.signature-preview { display: grid; gap: 5px; }
.legal-active,.legal-release-card,.legal-version-list article { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.legal-active > div,.legal-release-card > div,.legal-version-list article > div { display:grid; gap:4px; min-width:0; }
.legal-active small,.legal-release-card small,.legal-version-list small { overflow-wrap:anywhere; color:var(--muted); }
.legal-workspace-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(360px,1fr); gap:18px; margin:20px 0; align-items:start; }
.legal-release-list,.legal-version-list,.legal-selection-grid { display:grid; gap:10px; }
.legal-release-card { margin:0 0 10px; }
.legal-family-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-bottom:18px; }
.legal-family { margin:0; }
.legal-version-list article { padding:12px 0; border-top:1px solid var(--line); }
.legal-version-list article:first-child { border-top:0; }
.legal-document-selection { margin:24px 0 0; }
.legal-selection-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.legal-mail-attachment { padding:8px 0; border-top:1px solid var(--line); }
.legal-mail-attachment span,.attachment-preview .check-field span { display:grid; gap:2px; }
.shipping-attachments > div:first-child { display:grid; gap:3px; margin-bottom:3px; }
.shipping-attachments > div:first-child small,.check-field.unavailable small { color:var(--muted); }
.check-field.unavailable { opacity:.72; }
.assigned-warehouse { padding:12px; border:1px solid var(--line); border-radius:11px; background:var(--surface-alt); }
.assigned-warehouse strong,.assigned-warehouse small { display:block; }
.additional-customer-fields { padding:0; overflow:hidden; }
.additional-customer-fields > summary { padding:15px 18px; cursor:pointer; font-weight:800; }
.additional-customer-fields[open] > summary { border-bottom:1px solid var(--line); }
.additional-customer-fields > .form-grid { padding:18px; }
.duplicate-hint { display:grid; gap:4px; padding:11px 13px; border:1px solid #d8cbaa; border-radius:11px; background:#fffaf0; color:var(--ink); }
.duplicate-hint span,.duplicate-hint small { color:var(--muted); }
fieldset.form-grid { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.form-grid[disabled] { opacity: .72; }
.user-settings-tabs { width: max-content; max-width: 100%; margin-top: 8px; }
.settings-layout { display: grid; grid-template-columns: minmax(0,2fr) minmax(240px,1fr); gap: 18px; align-items: start; }
.settings-layout > * { min-width: 0; }
.table-wrap { width: 100%; max-width: 100%; min-width: 0; overflow-x: auto; }
.table-wrap table { width: 100%; border-collapse: collapse; }
.table-wrap th,.table-wrap td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.table-wrap td { overflow-wrap: anywhere; }
.legal-release-list .panel .muted { overflow-wrap: anywhere; }
.legal-release-list { min-width: 0; }
.legal-release-list > * { max-width: 100%; min-width: 0; }
.settings-form { margin: 0; }
.logo-panel { display: grid; gap: 14px; }
.company-logo-preview,.company-logo-placeholder { width: 100%; height: 170px; object-fit: contain; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); }
.company-logo-placeholder { display: grid; place-items: center; color: var(--muted); font-weight: 750; }
.logo-upload { display: inline-grid; place-items: center; }
.logo-upload input { display: none; }
.company-management { margin-top: 18px; }
.managed-company-list,.number-range-list { display: grid; gap: 9px; margin-top: 16px; }
.managed-company,.number-range-card { min-height: 68px; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; }
.managed-company > span { display: grid; gap: 4px; }
.managed-company small,.number-range-card small { color: var(--muted); }
.number-range-card { grid-template-columns: minmax(150px,1fr) minmax(230px,1fr) auto; }
.number-range-card > span { display: grid; gap: 3px; }
.number-range-card dl { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin: 0; }
.number-range-card dl div { display: grid; gap: 2px; }
.number-range-card dt { color: var(--muted); font-size: 11px; }
.number-range-card dd { margin: 0; font-weight: 800; font-variant-numeric: tabular-nums; }
.theme-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 12px; margin-top: 20px; }
.theme-card { min-height: 150px; display: grid; gap: 7px; padding: 12px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); color: var(--ink); text-align: left; }
.theme-card.selected { border: 2px solid var(--orange); }
.theme-card small { color: var(--muted); }
.theme-swatch { height: 72px; border: 1px solid var(--line); border-radius: 9px; background: linear-gradient(135deg,#173f35 0 34%,#f4f5f1 34% 70%,#e8762b 70%); }
.theme-light-neutral { background: linear-gradient(135deg,#e8ecea 0 34%,#fff 34% 70%,#bb6732 70%); }
.theme-dark { background: linear-gradient(135deg,#0d1513 0 34%,#1b2522 34% 70%,#f5a464 70%); }
.theme-high-contrast { background: linear-gradient(135deg,#000 0 34%,#fff 34% 70%,#ffd400 70%); }
.theme-b-caffe { background: linear-gradient(135deg,#141414 0 30%,#f6f4ea 30% 63%,#be2f2d 63% 82%,#b59461 82%); }

.filter-toolbar { flex-wrap: wrap; align-items: end; }
.filter-toolbar .search-field { flex: 1 1 320px; }
.filter-toolbar .field.compact { flex: 1 1 170px; }
.content[data-page="price-lists"] .form-actions { min-width: 0; flex-wrap: wrap; }
.content[data-page="price-lists"] .panel { min-width: 0; }
@media (max-width: 560px) {
  .content[data-page="price-lists"] .form-actions { position: static; width: 100%; margin: 0; padding: 8px 0 0; border: 0; background: transparent; }
  .content[data-page="price-lists"] .form-actions .button { min-width: 0; flex: 1 1 145px; }
}
.customer-filter-toolbar .field.compact { flex: 1 1 150px; }
.price-missing { color: var(--danger); font-size: 12px; }
.payment-rule-list { display: grid; gap: 10px; margin-top: 12px; }
.payment-rule { padding: 13px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-alt); }
.dunning-stage-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; align-items: start; }
.dunning-stage-form { margin: 0; }
.dunning-preview { white-space: normal; }
.dunning-preview p { white-space: pre-line; overflow-wrap: anywhere; }

.document-type-tabs { display: flex; gap: 7px; overflow-x: auto; margin-bottom: 12px; padding-bottom: 3px; }
.document-type-tabs button,.document-mobile-switch button { min-height: 40px; padding: 8px 13px; border: 1px solid var(--line); border-radius: 9px; background: white; color: var(--muted); font-weight: 800; white-space: nowrap; }
.document-type-tabs button[aria-selected="true"],.document-mobile-switch button[aria-selected="true"] { border-color: var(--green); background: var(--green); color: white; }
.document-template-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; padding: 13px 16px; }
.document-logo-panel { display: grid; grid-template-columns: minmax(260px,1fr) minmax(180px,320px) auto; align-items: center; gap: 18px; margin-bottom: 14px; }
.document-logo-preview,.document-logo-upload-preview { display: grid; justify-items: center; gap: 7px; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--paper); color: var(--muted); font-size: 12px; }
.document-logo-preview img,.document-logo-upload-preview img { display: block; max-width: 100%; max-height: 120px; object-fit: contain; }
.document-logo-upload-preview { min-height: 210px; }
.document-logo-upload-preview img { max-height: 150px; }
.document-logo-live { display: block; width: auto; height: auto; object-fit: contain; object-position: left top; }
.document-template-toolbar > div:first-child { display: grid; gap: 3px; }
.document-template-context { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; }
.document-template-toolbar span { color: var(--muted); font-size: 12px; }
.document-template-toolbar span.saved { color: #176044; font-weight: 800; }
.document-template-toolbar span.unsaved { color: #9b4f13; font-weight: 800; }
.document-designer { display: grid; grid-template-columns: minmax(360px,1.05fr) minmax(430px,.95fr); gap: 16px; align-items: start; }
.document-designer-form,.document-designer-preview { min-width: 0; margin: 0; }
.document-editor-tabs { overflow-x: auto; margin-bottom: 14px; }
.document-control-stack { display: grid; gap: 15px; min-width: 0; margin: 0; padding: 0; border: 0; }
.document-control-stack h3 { margin: 4px 0 -4px; font-size: 14px; }
.document-margin-grid { display: grid; grid-template-columns: repeat(4,minmax(70px,1fr)); gap: 8px; }
.document-block-list { display: grid; gap: 7px; }
.document-block-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 46px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-alt); }
.document-order-actions { display: inline-flex; gap: 4px; }
.check-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.check-field.locked { color: var(--muted); }
.document-preview-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.document-preview-toolbar > div { display: flex; align-items: center; gap: 8px; }
.document-preview-toolbar label { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; font-weight: 750; }
.document-preview-pages { display: inline-flex; align-items: center; gap: 5px; }
.document-preview-pages input { width: 58px; min-height: 34px; padding: 5px 7px; text-align: center; }
[data-document-preview-host] { min-width: 0; overflow: hidden; border: 1px solid #cfd8d4; border-radius: 11px; background: #dde4e1; }
.document-pdf-preview { display: block; width: 100%; height: min(76vh,760px); min-height: 650px; border: 0; background: #dde4e1; }
.document-preview-loading,.document-preview-error { min-height: 650px; display: grid; place-content: center; gap: 7px; padding: 24px; color: var(--muted); text-align: center; }
.document-preview-error strong { color: #8a2d21; }
.document-preview-error span { max-width: 42ch; }
.document-quality { margin: -5px 0 0; font-size: 12px; font-weight: 750; }
.document-quality.success-text { color: #176044; }
.document-quality.warning-text { color: #9b4f13; }
.document-mobile-switch { display: none; gap: 7px; margin-bottom: 10px; }
.document-version-list { display: grid; gap: 9px; margin: 0; padding-left: 24px; }
.document-version-list li { padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; }
.document-version-list li strong,.document-version-list li span { display: block; }
.document-version-list li span { margin-top: 3px; color: var(--muted); font-size: 12px; }
.document-text-choice { display:grid; grid-template-columns:minmax(190px,.55fr) minmax(260px,1.45fr); gap:12px; align-items:start; padding:12px; border:1px solid var(--line); border-radius:10px; background:var(--surface-alt); }

@media (max-width: 900px) {
  .legal-workspace-grid,.legal-family-grid,.legal-selection-grid { grid-template-columns:1fr; }
  .legal-active,.legal-release-card,.legal-version-list article { align-items:flex-start; flex-direction:column; }
  .product-overview { grid-template-columns:1fr; }
  .settings-layout { grid-template-columns: 1fr; }
  .theme-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .dunning-stage-grid { grid-template-columns: 1fr; }
  .document-designer { grid-template-columns: 1fr; }
  .document-logo-panel { grid-template-columns: 1fr; align-items: stretch; }
  .document-pdf-preview,.document-preview-loading,.document-preview-error { min-height: 560px; height: 68vh; }
}
@media (max-width: 720px) {
  .settings-tabs-wrap { overflow-x: auto; flex-wrap: nowrap; }
  .mail-card { flex-direction: column; }
  .settings-tabs-wrap button { white-space: nowrap; }
  .subsection-switch,.system-integrations { align-items:stretch; flex-direction:column; }
  .subsection-switch .button,.system-integrations .button { width:100%; }
  .number-range-card { grid-template-columns: 1fr; }
  .number-range-card .button { width: 100%; }
  .document-template-toolbar { align-items: stretch; flex-direction: column; }
  .document-template-toolbar .form-actions { justify-content: stretch; }
  .document-template-toolbar .button { flex: 1; }
  .document-mobile-switch { display: flex; }
  .document-designer.mobile-form .document-designer-preview,.document-designer.mobile-preview .document-designer-form { display: none; }
  .document-margin-grid,.check-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .document-text-choice { grid-template-columns:1fr; }
  .document-preview-toolbar { align-items: stretch; flex-direction: column; }
  .document-preview-toolbar > div { justify-content: space-between; flex-wrap: wrap; }
}
@media (max-width: 420px) {
  .theme-grid { grid-template-columns: 1fr; }
}
.vat-check-field{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.75rem;align-items:end}.vat-check-field label{display:grid;gap:.4rem}.vat-check-result{display:grid;gap:.75rem;padding:1rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface-soft)}.vat-check-result[hidden],[data-business-field][hidden],[data-private-field][hidden]{display:none!important}.comparison-table{width:100%;border-collapse:collapse}.comparison-table th,.comparison-table td{padding:.65rem;text-align:left;border-bottom:1px solid var(--border);vertical-align:middle}.comparison-table thead th{font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted)}.contact-inline{border:1px solid var(--border);border-radius:var(--radius);padding:1rem}.contact-inline legend{padding:0 .4rem;font-weight:700}.check-field.compact{min-height:auto}
@media(max-width:720px){.vat-check-field{grid-template-columns:1fr}.vat-check-field .button{width:100%}.comparison-table{min-width:640px}}

.payment-basis-hash { overflow-wrap: anywhere; word-break: break-word; }

/* Attachment wishes and file status are separate, also at narrow widths. */
.legal-attachment-option{min-width:0;}
.legal-attachment-status{display:block;margin:.35rem 0 .8rem 1.8rem;overflow-wrap:anywhere;font-size:.875rem;line-height:1.5;color:var(--muted,#52635d);}
.legal-attachment-option.unavailable .legal-attachment-status{color:#765017;}

/* Native details keeps the movement history keyboard accessible and collapsed. */
.movement-panel > summary { cursor: pointer; font-size: 18px; min-height: 44px; line-height: 24px; padding: 10px 0; }
.movement-panel > summary:focus-visible { outline: 3px solid var(--green); outline-offset: 5px; }
.movement-toggle-label { float: right; color: var(--muted); font-size: 14px; }
.movement-panel:not([open]) .when-open, .movement-panel[open] .when-closed { display: none; }
.movement-panel[open] > summary { margin-bottom: 16px; }
.movement-reference { grid-column: 1 / -1; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.movement-reference > summary { cursor: pointer; }

/* Readable main navigation and shared stock disclosures. */
.legal-upload-notice { display: flex; flex-direction: column; gap: 8px; line-height: 1.5; }
[data-legal-special][hidden], [data-legal-audience][hidden] { display: none; }
.topbar .main-navigation .nav-link, .topbar .main-navigation .nav-group > summary {
  font-size: 16px; line-height: 1.45; min-height: 44px; white-space: normal;
  overflow: visible; overflow-wrap: anywhere; text-overflow: clip; letter-spacing: normal;
}
.topbar .main-navigation .nav-group > summary { text-transform: none; }
@media (min-width: 801px) {
  .app-shell { grid-template-columns: 280px minmax(0,1fr); }
  .topbar { width: 280px; }
  .topbar .main-navigation .nav-link { padding: 9px 11px; }
}

@media (min-width: 801px) {
  .compact-document-head { flex-wrap: wrap; }
  .compact-document-head > div:first-child { flex: 0 0 auto; max-width: 100%; }
  .compact-document-head .detail-actions { flex: 1 1 400px; justify-content: flex-end; }
}

/* Mobile navigation must use the same theme contrast as the desktop sidebar. */
@media (max-width: 800px) {
  .topbar .main-navigation { background: var(--nav-bg); }
  .topbar .main-navigation .nav-menu { background: transparent; }
  .topbar .main-navigation .nav-link,
  .topbar .main-navigation .nav-group > summary,
  .topbar .main-navigation .mobile-nav-head .icon-button { color: var(--nav-text); }
  .topbar .main-navigation .mobile-nav-head .icon-button { background: transparent; }
  .topbar .main-navigation .nav-menu .nav-link.active { background: var(--surface); color: var(--ink); }
}

[data-shopify-source-order] .facts > div { display: grid; grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); gap: .75rem; margin-bottom: .75rem; }
[data-shopify-source-order] .facts dt, [data-shopify-source-order] .facts dd { width: auto; min-width: 0; margin: 0; white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 600px) { [data-shopify-source-order] .facts > div { grid-template-columns: 1fr; gap: .25rem; } }
#number-range-form .field { min-width: 0; align-content: start; }
#number-range-form .field small { overflow-wrap: anywhere; }
.modal:has(#number-range-form) { overflow: hidden; }
#number-range-form { max-height: calc(100dvh - 106px); overflow-y: auto; box-sizing: border-box; }
#number-range-form .form-actions { position: sticky; bottom: -21px; margin: 0 -21px -21px; padding: 13px 21px; background: white; border-top: 1px solid var(--line); }

/* Post-V3: contained form grids, compact mobile filters and document cards. */
.modal .form-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.modal .field,.modal .panel,.modal .full,.modal .form-grid > * { min-width:0; max-width:100%; }
.modal input,.modal select,.modal textarea { min-width:0; max-width:100%; box-sizing:border-box; }
.modal .field span,.modal small,.modal .warning,.modal .info-banner,.modal .status { overflow-wrap:anywhere; white-space:normal; }
.document-text-editor .document-text-choice { padding:0; border:0; background:transparent; display:grid; grid-template-columns:1fr; gap:12px; }
.pdf-view { display:grid; gap:12px; }
.pdf-view iframe { border:0; width:100%; height:65dvh; min-width:0; }
.list-filter-details { flex:1 1 100%; }
.list-filter-details > summary { cursor:pointer; font-weight:700; padding:8px 0; overflow-wrap:anywhere; }
.list-filter-fields { display:flex; flex-wrap:wrap; gap:12px; align-items:end; }
.list-filter-fields > * { flex:1 1 150px; }
@media(max-width:720px){
  .modal,.modal:has(#document-mail-form) { position:fixed; inset:var(--dialog-viewport-top,0px) 0 auto; width:100%; max-width:100%; height:var(--dialog-viewport-height,100dvh); max-height:var(--dialog-viewport-height,100dvh); margin:0; border-radius:0; overflow-x:hidden; overflow-y:auto; }
  .modal-head { position:sticky; top:0; z-index:30; padding:12px max(14px,env(safe-area-inset-right)) 12px max(14px,env(safe-area-inset-left)); background:var(--surface,#fff); gap:8px; }
  .modal-head h2 { min-width:0; margin:0; overflow-wrap:anywhere; font-size:20px; }
  .modal-head .icon-button { flex:0 0 44px; }
  .modal-body { padding:14px; }
  .modal .form-grid,.modal .sales-prospect,.modal .receipt-position,.modal .sales-line,.modal .sales-line-fields,.modal .invoice-line-fields,.modal .delivery-commercial-fields,.modal .settings-layout { display:grid; grid-template-columns:minmax(0,1fr); gap:12px; }
  .modal .form-grid > *,.modal .receipt-position > *,.modal .sales-line-fields > * { grid-column:1/-1; }
  .modal .field input,.modal .field select,.modal .field textarea,.modal .searchable-combo { width:100%; font-size:16px; }
  .modal .panel { padding:12px; }
  .modal .panel-head { flex-direction:column; align-items:stretch; gap:8px; }
  .modal .button { white-space:normal; overflow-wrap:anywhere; min-width:0; max-width:100%; }
  .modal .form-actions,#number-range-form .form-actions { position:static; display:flex; flex-wrap:wrap; margin:0; padding:12px 0 max(12px,env(safe-area-inset-bottom)); gap:8px; }
  .modal .form-actions > * { flex:1 1 100%; width:100%; }
  #number-range-form { max-height:none; overflow:visible; }
  .modal:has(#number-range-form) { overflow-y:auto; }
  .modal .action-menu-popover { position:static; width:100%; min-width:0; }
  .modal .combo-popover { width:100%; max-width:100%; min-width:0; max-height:35dvh; }
  .modal input,.modal select,.modal textarea { scroll-margin-top:90px; scroll-margin-bottom:24px; }
  .toolbar { margin:12px 0; gap:10px; min-height:0; }
  .toolbar .search-field,.toolbar .field.compact,.toolbar > .field { flex:0 0 auto; min-height:0; height:auto; width:100%; margin:0; }
  .list-filter-details { flex:none; width:100%; }
  .list-filter-fields { display:grid; grid-template-columns:minmax(0,1fr); gap:10px; }
  .list-filter-fields > * { width:100%; margin:0; }
  .document-card-table tbody tr:not(.table-empty-row) { grid-template-columns:44px minmax(0,1fr) auto; gap:4px 8px; padding:12px; align-items:center; }
  .document-card-table tbody td { display:block; padding:0; min-width:0; overflow-wrap:anywhere; grid-column:1/-1; }
  .document-card-table tbody td::before { content:none; }
  .document-card-table tbody td[data-priority="secondary"] { display:none; }
  .document-card-table tbody td[data-key="select"] { grid-column:1; grid-row:1; margin:0; }
  .document-card-table tbody td[data-key="select"] input { width:24px; height:24px; margin:10px; }
  .document-card-table tbody td[data-key="number"] { grid-column:1/3; grid-row:1; font-size:16px; }
  .document-card-table tr:has(td[data-key="select"]) td[data-key="number"] { grid-column:2; }
  .document-card-table tbody td[data-key="status"] { grid-column:3; grid-row:1; justify-self:end; }
  .document-card-table tbody td[data-key="status"] .status { font-size:11px; white-space:normal; }
  .document-card-table tbody td[data-key="customer"] { grid-row:2; }
  .document-card-table tbody td[data-key="date"] { grid-column:1/3; grid-row:3; color:var(--muted); font-size:13px; }
  .document-card-table tbody td[data-key="kind"] { grid-column:3; grid-row:3; color:var(--muted); font-size:13px; }
  .document-card-table tbody td[data-key="open"],.document-card-table tbody td[data-key="actions"] { margin-top:7px; }
}

.app-icon{object-fit:contain;border-radius:9px;flex-shrink:0;}

/* Wide document preview; mobile pages are rendered explicitly for Safari. */
dialog.modal.pdf-preview-dialog { width: 88vw; max-width: 1600px; height: 90dvh; max-height: 90dvh; padding: 0; }
.pdf-preview-dialog > div { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.pdf-preview-dialog .modal-head { flex: 0 0 auto; }
.pdf-preview-dialog .pdf-view { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.pdf-preview-dialog .pdf-view iframe { flex: 1; height: 100%; min-height: 0; }
.pdf-view-controls { display: flex; justify-content: center; align-items: center; gap: 8px; padding: 6px; flex-wrap: wrap; }
.pdf-view-controls select { width: auto; min-height: 36px; padding: 4px 8px; }
.pdf-canvas-surface { flex: 1; min-height: 0; overflow: auto; background: #e9e9e9; padding: 8px 0; text-align: center; }
.pdf-canvas-surface canvas { display: block; margin: 0 auto; background: white; max-width: none; }
#payment-form .field { align-content: start; }
#payment-form .field > span { min-height: 2.5em; display: flex; align-items: flex-end; }
#payment-form .field > input, #payment-form .field > select { box-sizing: border-box; height: 44px; min-height: 44px; }
@media (max-width: 720px) {
  dialog.modal.pdf-preview-dialog { width: 100vw; max-width: 100vw; height: var(--dialog-viewport-height, 100dvh); max-height: var(--dialog-viewport-height, 100dvh); }
  #payment-form .field > span { min-height: 0; }
}