/* Händlerportal · Bestelltabelle (Matrix) und Leiste unten. Ladereihenfolge: templates/b2b_portal/_styles.html */
/* Matrix */
.toolbar{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;justify-content:space-between;margin:18px 0 10px}
.hint{font-size:13px;color:var(--muted);max-width:70ch;min-width:0}
.hint kbd{font-family:inherit;font-size:11.5px;border:1px solid var(--line-strong);border-bottom-width:2px;border-radius:4px;padding:0 5px;color:var(--fg)}
.btn{display:inline-flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--line-strong);border-radius:8px;padding:7px 12px;cursor:pointer;font-size:13.5px;font-weight:500;white-space:nowrap}
.btn:hover{background:var(--tint)}
.btn svg{width:16px;height:16px}
.btn.primary{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}
.btn.primary:hover{filter:brightness(1.08);background:var(--primary)}
.btn.ghost{border-color:transparent;background:none;color:var(--muted)}
.btn.ghost:hover{color:var(--fg);background:var(--tint)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.frame{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
table.mx{border-collapse:separate;border-spacing:0;width:100%;font-size:13.5px}
.mx th,.mx td{border-bottom:1px solid var(--line);padding:0}
.mx thead th{position:sticky;top:0;background:var(--surface);font-weight:500;text-align:center;padding:10px 6px 8px;vertical-align:bottom;white-space:nowrap}
.mx thead .grp th{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);padding:10px 6px 4px;border-bottom:0}
.mx thead .grp th.gstart,.mx td.gstart,.mx thead .cols th.gstart{border-left:1px solid var(--line)}
.mx .colhead{display:grid;gap:1px;justify-items:center}
.mx .colhead .ek{font-size:11.5px;color:var(--muted);font-weight:400}
.mx .colhead .uvp{font-size:10.5px;color:var(--muted);font-weight:400;opacity:.8}
.mx th.rowh{position:sticky;left:0;z-index:2;background:var(--surface);text-align:left;padding:8px 14px 8px 14px;min-width:170px;border-right:1px solid var(--line)}
.mx thead th.rowh{z-index:3}
.mx th.rowh .rn{display:flex;align-items:center;gap:10px}
.mx th.rowh .rn span{display:grid;line-height:1.25}
.mx th.rowh .rn small{font-size:11.5px;color:var(--muted);font-weight:400}
.mx td.cell{text-align:center;padding:6px 4px;min-width:64px}
.mx td.cell input{width:54px;height:36px;text-align:center;border:1px solid var(--line);border-radius:7px;background:var(--bg);font-variant-numeric:tabular-nums;font-size:14px;padding:0 4px}
.mx td.cell input:hover{border-color:var(--line-strong)}
.mx td.cell input:focus{outline:none;border-color:var(--focus);box-shadow:0 0 0 2px color-mix(in srgb,var(--focus) 30%,transparent);background:var(--surface)}
.mx td.cell.has input{background:var(--tint-strong);border-color:var(--accent);font-weight:600}
.mx td.cell .pr{display:block;font-size:10.5px;color:var(--muted);margin-top:2px}
.mx td.cell{position:relative}
.st{display:inline-block;width:8px;height:8px;border-radius:50%;flex:none}
.st.g{background:var(--st-g)}.st.y{background:var(--st-y)}.st.r{background:var(--st-r)}
.mx td.cell .st{position:absolute;top:11px;left:calc(50% + 16px);width:7px;height:7px;z-index:1;pointer-events:none}
.mx td.cell.red .st{display:none}
.mx td.cell.red{background:repeating-linear-gradient(135deg,transparent 0 6px,color-mix(in srgb,var(--st-r) 16%,transparent) 6px 8px)}
.mx td.cell.red .out{display:inline-grid;place-items:center;width:54px;height:36px;font-size:11px;color:var(--st-r);font-weight:500}
.mx td.na{background:repeating-linear-gradient(135deg,transparent 0 6px,var(--tint) 6px 7px);text-align:center;color:var(--muted);font-size:12px}
.mx td.rsum{text-align:right;padding:6px 12px;white-space:nowrap;border-left:1px solid var(--line)}
.mx td.rsum b{display:block;font-weight:600}
.mx td.rsum span{font-size:12px;color:var(--muted)}
.mx td.racts{padding:4px 8px;white-space:nowrap}
.mx td.racts .ra{display:flex;gap:2px}
.ib{background:none;border:0;border-radius:6px;padding:6px;cursor:pointer;color:var(--muted);display:grid;place-items:center}
.ib:hover{background:var(--tint);color:var(--fg)}
.ib[disabled]{opacity:.3;cursor:not-allowed}
.ib svg{width:17px;height:17px}
.mx tfoot td,.mx tfoot th{background:var(--tint);border-bottom:0;font-weight:600;text-align:center;padding:9px 4px}
.mx tfoot th.rowh{background:var(--tint)}
.mx tr.copied th.rowh{box-shadow:inset 3px 0 0 var(--sun)}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-top:10px}
.legend i{display:inline-block;width:14px;height:14px;border-radius:3px;vertical-align:-2px;margin-right:6px;border:1px solid var(--line-strong)}
.legend i.o{background:repeating-linear-gradient(135deg,transparent 0 3px,color-mix(in srgb,var(--st-r) 35%,transparent) 3px 4px)}
.legend .st{margin-right:6px;vertical-align:0}
.legend i.n{background:repeating-linear-gradient(135deg,transparent 0 3px,var(--line-strong) 3px 4px)}

/* Sticky bottom bar */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:25;background:var(--surface);border-top:1px solid var(--line);padding:12px var(--gutter);padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}
.bar-in{max-width:calc(1180px - 2 * var(--gutter));margin:0 auto;display:flex;gap:12px 20px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.bar .stat{display:flex;gap:20px;flex-wrap:wrap;align-items:baseline}
.bar .stat div{display:grid;line-height:1.2}
.bar .stat small{font-size:11.5px;color:var(--muted)}
.bar .stat b{font-size:17px;font-weight:600}
.bar .acts{display:flex;gap:8px;flex-wrap:wrap}