:root {
    --bg: #E2E6E5;
    --surface: #FFFFFF;
    --surface-2: #F1F3F1;
    --sor-a: #E9F0F4; --sor-b: #F7EFE4; --sor-a-akcent: #33586E; --sor-b-akcent: #A85A22;
    --ink: #1A2024;
    --ink-soft: #4B5559;
    --line: #C7CDC9;
    --steel: #33586E;
    --steel-dark: #234152;
    --rust: #A85A22;
    --rust-soft: #EBD9C8;
    --caution: #B87500;
    --caution-bg: #FBEBCF;
    --ok: #3F6E46;
    --ok-bg: #E1EBE0;
    --danger: #A3392F;
    --danger-bg: #F5DEDA;
    --radius: 3px;
    --shadow: 0 1px 2px rgba(20,26,28,.08), 0 1px 1px rgba(20,26,28,.04);
    color-scheme: light;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg: #14181A;
      --surface: #1D2326;
      --surface-2: #242B2E;
    --sor-a: #213340; --sor-b: #36291F; --sor-a-akcent: #7FB2CE; --sor-b-akcent: #E0975A;
      --ink: #E7EAEA;
      --ink-soft: #A6AFB1;
      --line: #333B3E;
      --steel: #6E9CB4;
      --steel-dark: #8FB6CB;
      --rust: #D08A4F;
      --rust-soft: #3A2D22;
      --caution: #E0A83D;
      --caution-bg: #3A2F17;
      --ok: #7BAA80;
      --ok-bg: #1E2B20;
      --danger: #D97C71;
      --danger-bg: #33201D;
      color-scheme: dark;
    }
  }
  :root[data-theme="dark"] {
    --bg: #14181A;
    --surface: #1D2326;
    --surface-2: #242B2E;
    --sor-a: #213340; --sor-b: #36291F; --sor-a-akcent: #7FB2CE; --sor-b-akcent: #E0975A;
    --ink: #E7EAEA;
    --ink-soft: #A6AFB1;
    --line: #333B3E;
    --steel: #6E9CB4;
    --steel-dark: #8FB6CB;
    --rust: #D08A4F;
    --rust-soft: #3A2D22;
    --caution: #E0A83D;
    --caution-bg: #3A2F17;
    --ok: #7BAA80;
    --ok-bg: #1E2B20;
    --danger: #D97C71;
    --danger-bg: #33201D;
    color-scheme: dark;
  }

  * { box-sizing: border-box; }
  html, body { margin:0; padding:0; }
  body {
    background: var(--bg);
    color: var(--ink);
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: 15px;
    line-height: 1.45;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
  }
  .mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; }
  .display {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    letter-spacing: .01em;
  }
  a { color: var(--steel-dark); }
  button { font-family: inherit; cursor: pointer; }
  input, select, textarea { font-family: inherit; font-size: 14px; }

  .wrap { max-width: 1180px; margin: 0 auto; padding: 18px 20px 80px; }

  /* ---------- header ---------- */
  header.top {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    padding-bottom: 14px; margin-bottom: 18px;
    border-bottom: 3px solid var(--ink);
  }
  header.top .title-block { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
  header.top h1 {
    font-size: 34px; margin: 0; line-height: 1;
    text-transform: uppercase;
  }
  header.top .subtitle {
    color: var(--ink-soft); font-size: 13.5px;
  }
  .whoami {
    font-size: 12.5px; color: var(--ink-soft); text-align: right;
    display:flex; flex-direction:column; gap:2px; align-items:flex-end;
  }
  .whoami b { color: var(--ink); font-weight:600; }
  .conn-badge {
    display:inline-flex; align-items:center; gap:5px;
    font-size: 11.5px; padding: 2px 7px; border-radius: 999px;
    border: 1px solid var(--line);
  }
  .conn-dot { width:6px; height:6px; border-radius:50%; background: var(--ok); }
  .conn-badge.off .conn-dot { background: var(--danger); }

  /* ---------- toolbar ---------- */
  .toolbar {
    display:flex; gap:10px; flex-wrap: wrap; align-items:center;
    margin-bottom: 18px;
  }
  .toolbar .search {
    flex: 1 1 220px; min-width: 180px;
  }
  .field {
    display:flex; flex-direction:column; gap:3px;
  }
  .field label {
    font-size: 11px; text-transform: uppercase; letter-spacing:.04em;
    color: var(--ink-soft);
  }
  input[type=text], input[type=number], select, textarea {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 7px 9px;
    color: var(--ink);
    outline: none;
  }
  input[type=text]:focus, input[type=number]:focus, select:focus, textarea:focus,
  button:focus-visible, .card:focus-visible {
    outline: 2px solid var(--steel);
    outline-offset: 1px;
  }
  .toolbar select { padding: 7px 8px; }
  .chk {
    display:flex; align-items:center; gap:6px; font-size: 13px; color: var(--ink-soft);
    padding: 7px 2px;
  }
  .btn {
    border: 1px solid var(--ink);
    background: var(--ink);
    color: var(--bg);
    border-radius: var(--radius);
    padding: 9px 16px;
    font-weight: 600;
    font-size: 13.5px;
    white-space: nowrap;
  }
  .btn:hover { opacity: .88; }
  .btn.secondary {
    background: transparent; color: var(--ink); border-color: var(--line);
  }
  .btn.steel { background: var(--steel); border-color: var(--steel); color: #fff; }
  .btn.rust { background: var(--rust); border-color: var(--rust); color: #fff; }
  .btn.danger { background: transparent; color: var(--danger); border-color: var(--danger); }
  .btn.small { padding: 6px 11px; font-size: 12.5px; }
  .btn:disabled { opacity:.5; cursor:not-allowed; }

  /* ---------- groups & cards ---------- */
  .group { margin-bottom: 26px; }
  .group-head {
    display:flex; align-items:baseline; gap:10px;
    margin-bottom: 10px;
  }
  .group-head h2 {
    font-size: 20px; margin:0; text-transform: uppercase;
  }
  .group-head .count { color: var(--ink-soft); font-size: 12.5px; }
  .group-line { flex:1; height:1px; background: var(--line); }

  .grid {
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
    gap: 10px;
  }
  .card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 12px 13px 11px 15px;
    position: relative;
    cursor: pointer;
    border-left: 5px solid var(--cat-color, var(--steel));
    display:flex; flex-direction:column; gap:6px;
  }
  .card:hover { border-color: var(--ink-soft); }
  .card .ribbon {
    position:absolute; top:0; right:0;
    background: var(--rust); color:#fff;
    font-size: 10.5px; font-weight:600; letter-spacing:.03em;
    padding: 2px 8px 2px 10px;
    border-radius: 0 0 0 8px;
  }
  .card .grade-row {
    display:flex; align-items:baseline; justify-content:space-between; gap:8px;
  }
  .card .grade {
    font-size: 18px; font-weight:700; font-family:'Barlow Condensed',sans-serif;
    text-transform: uppercase;
  }
  .card .thick { font-size: 13px; color: var(--ink-soft); }
  .card .dims {
    font-size: 15px; letter-spacing: .01em;
  }
  .card .meta-row {
    display:flex; justify-content: space-between; align-items:center;
    font-size: 12px; color: var(--ink-soft);
  }
  .card .qty {
    font-weight:600; color: var(--ink);
  }
  .card .qty.low { color: var(--caution); }
  .tag {
    display:inline-flex; align-items:center; gap:4px;
    font-size: 11px; padding: 1px 7px; border-radius: 999px;
    background: var(--surface-2); color: var(--ink-soft);
    border: 1px solid var(--line);
  }
  .tag.low { background: var(--caution-bg); color: var(--caution); border-color: transparent; }
  .tag.out { background: var(--danger-bg); color: var(--danger); border-color: transparent; }
  .tag.ok { background: var(--ok-bg); color: var(--ok); border-color: transparent; }
  .tag.tervezett { background: var(--surface-2); color: var(--steel-dark); border: 1px dashed var(--steel); font-style: italic; }
  .tag.active { background: var(--steel); color: #fff; border-color: transparent; font-weight: 700; }
  .card .shelf {
    font-size: 12.5px; color: var(--ink-soft);
  }
  .card .shelf b { color: var(--ink); font-family:'IBM Plex Mono',monospace; font-weight:600; }

  .weight-summary {
    display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 12px;
    background: var(--surface-2); border-radius: var(--radius); border: 1px solid var(--line);
  }
  .weight-summary .chip {
    display: flex; align-items: baseline; gap: 5px; padding: 4px 10px;
    background: var(--surface); border-radius: 999px; border: 1px solid var(--line);
    font-size: 13px;
  }
  .weight-summary .chip .kat { color: var(--ink-soft); }
  .weight-summary .chip .kg { font-family:'IBM Plex Mono',monospace; font-weight:700; color: var(--ink); }
  .weight-summary .chip .grand { color: var(--steel-dark); }

  .potty{background:var(--danger);color:#fff;border-radius:10px;padding:0 6px;font-size:11px;margin-left:4px;font-weight:700;}
  .tab-count{background:var(--steel-dark);color:#fff;border-radius:9px;padding:0 6px;font-size:11px;margin-left:3px;font-weight:700;}
  .sku-info{font-size:12px;color:var(--steel-dark);margin-top:4px;line-height:1.5;}
  .sku-info .sku-hiany{color:var(--danger);font-weight:600;}
  .instr-banner {
    margin-top: 6px; padding: 6px 8px; border-radius: var(--radius);
    background: var(--caution-bg); color: var(--caution);
    font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  }
  .instr-banner .instr-link {
    background: none; border: none; color: var(--caution); text-decoration: underline;
    font-size: 11.5px; font-weight: 600; white-space: nowrap; padding: 0;
  }
  .instr-title { font-size: 20px; font-weight: 700; font-family:'Barlow Condensed',sans-serif; text-transform: uppercase; }
  .instr-warning {
    margin-top: 10px; padding: 10px 12px; border-radius: var(--radius);
    background: var(--caution-bg); color: var(--caution); font-size: 13.5px; font-weight: 600;
  }
  .instr-desc { margin-top: 10px; font-size: 14px; white-space: pre-wrap; }

  .empty {
    border: 1px dashed var(--line); border-radius: var(--radius);
    padding: 40px 20px; text-align:center; color: var(--ink-soft);
  }
  .empty .btn { margin-top: 14px; }

  /* ---------- modal ---------- */
  .modal-bg {
    position: fixed; inset:0; background: rgba(10,14,16,.45);
    display:flex; align-items:flex-start; justify-content:center;
    padding: 26px 14px; overflow-y:auto; z-index: 40;
  }
  .modal {
    background: var(--surface); border-radius: var(--radius);
    max-width: 620px; width: 100%;
    box-shadow: 0 8px 30px rgba(0,0,0,.25);
    border: 1px solid var(--line);
  }
  .modal.wide { max-width: 980px; }
  .modal.full { max-width: 1400px; width: calc(100% - 28px); }
  .modal-bg:has(.modal.full) { padding: 10px 14px; align-items: stretch; }
  .modal.full .modal-body { max-height: calc(100vh - 150px); overflow-y: auto; }
  .modal-head {
    display:flex; justify-content:space-between; align-items:center;
    padding: 14px 18px; border-bottom: 1px solid var(--line);
  }
  .modal-head h2 { margin:0; font-size: 21px; text-transform: uppercase; }
  .modal-head .x {
    background:none; border:none; font-size: 20px; color: var(--ink-soft); line-height:1;
    padding: 4px 6px;
  }
  .modal-body { padding: 16px 18px; }
  .modal-foot {
    display:flex; justify-content:flex-end; gap:8px;
    padding: 14px 18px; border-top: 1px solid var(--line);
    flex-wrap: wrap;
  }
  .form-grid {
    display:grid; grid-template-columns: 1fr 1fr; gap: 10px 12px;
  }
  .form-grid .full { grid-column: 1 / -1; }
  @media (max-width: 520px) { .form-grid { grid-template-columns: 1fr; } }

  fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px 12px; margin: 4px 0 0; }
  fieldset legend { font-size: 12px; color: var(--ink-soft); text-transform: uppercase; letter-spacing:.03em; padding: 0 4px; }

  .detail-row { display:flex; justify-content:space-between; gap:10px; padding: 5px 0; border-bottom: 1px solid var(--surface-2); font-size: 13.5px; }
  .detail-row span:first-child { color: var(--ink-soft); }
  .detail-row span:last-child { text-align:right; font-family:'IBM Plex Mono',monospace; }
  .fx-note { color: var(--ink-soft); font-size: 11.5px; font-family:'IBM Plex Sans',sans-serif; margin-left: 5px; }

  .history { margin-top: 14px; }
  .history h3 { font-size: 13px; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 8px; }
  .hist-item {
    display:flex; gap:10px; padding: 7px 0; border-bottom: 1px solid var(--surface-2);
    font-size: 13px; align-items:baseline;
  }
  .hist-item .hd { color: var(--ink-soft); font-size: 11.5px; min-width: 92px; font-family:'IBM Plex Mono',monospace; }
  .hist-item .ht { flex:1; }
  .hist-item .delta { font-family:'IBM Plex Mono',monospace; font-weight:600; }
  .hist-item .delta.pos { color: var(--ok); }
  .hist-item .delta.neg { color: var(--rust); }

  .lineage {
    font-size: 12.5px; color: var(--ink-soft); background: var(--surface-2);
    border-radius: var(--radius); padding: 8px 10px; margin-top: 10px;
  }
  .lineage a { cursor:pointer; text-decoration: underline; }

  .banner {
    background: var(--caution-bg); color: var(--caution);
    border-radius: var(--radius); padding: 9px 12px; font-size: 13px;
    margin-bottom: 14px; display:flex; gap:8px; align-items:center;
  }
  .hint { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
  .toast {
    position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
    background: var(--ink); color: var(--bg); padding: 10px 18px;
    border-radius: var(--radius); font-size: 13.5px; z-index: 60;
    box-shadow: 0 4px 16px rgba(0,0,0,.3);
  }
  .checkbox-row { display:flex; align-items:center; gap:8px; margin: 8px 0 2px; }
  .subtle-btn { background:none; border:none; color: var(--steel-dark); text-decoration: underline; font-size: 12.5px; padding: 4px 0; }

  @media (max-width: 640px) {
    header.top { align-items: flex-start; }
    header.top h1 { font-size: 26px; }
    .toolbar { flex-direction: column; align-items: stretch; }
    .toolbar > *, .toolbar .search { width: 100%; flex: 0 0 auto; }   /* oszlopban a sorra szánt flex-alap (pl. 280px) magasságként érvényesülne: üres hely a keresőmező alatt */
    /* telefon: a sok fül több sorba törik (nem vágódik le), a sorok szövege teljes szélességet kap, a gombok alatta sorolnak */
    .view-seg { display: flex; flex-wrap: wrap; }
    .view-seg button { flex: 1 1 auto; border-bottom: 1px solid var(--line); }
    .batch-row { flex-wrap: wrap; }
    .batch-row > .bl-main { flex: 1 1 100%; min-width: 0; }
    .batch-row > div:not(.bl-main) { flex-wrap: wrap; }
    .batch-row > .bl-right { text-align: left; }
  }

  /* ---------- role switcher ---------- */
  .role-bar {
    display:flex; align-items:center; gap:8px; flex-wrap:wrap;
    background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 7px 10px; margin-bottom: 14px; font-size: 12.5px; color: var(--ink-soft);
  }
  .role-bar b { color: var(--ink); }
  .role-seg {
    display:inline-flex; border: 1px solid var(--line); border-radius: var(--radius); overflow:hidden;
  }
  .role-seg button {
    border: none; background: var(--surface); color: var(--ink-soft);
    padding: 5px 11px; font-size: 12.5px; font-weight: 600; border-right: 1px solid var(--line);
  }
  .role-seg button:last-child { border-right: none; }
  .role-seg button.active { background: var(--steel); color: #fff; }
  .role-note { flex: 1 1 auto; min-width: 160px; }

  .role-locked-msg {
    font-size: 12px; color: var(--ink-soft); font-style: italic;
  }

  .ship-line {
    border: 1px solid var(--line); border-radius: var(--radius);
    padding: 10px 12px 12px; margin-top: 10px; position: relative;
    background: var(--surface-2);
  }
  .ship-line .ship-line-head {
    display:flex; justify-content:space-between; align-items:center; margin-bottom: 8px;
  }
  .ship-line .ship-line-head b { font-size: 12.5px; text-transform: uppercase; color: var(--ink-soft); }
  /* A szállítmány-űrlap sorai váltakozó (két) színnel és színes bal sávval: ne folyjanak egybe */
  .ship-line[data-par="0"] { background: var(--sor-a); border-left: 6px solid var(--sor-a-akcent); }
  .ship-line[data-par="1"] { background: var(--sor-b); border-left: 6px solid var(--sor-b-akcent); }
  .ship-line[data-par="0"] .ship-line-head b { color: var(--sor-a-akcent); }
  .ship-line[data-par="1"] .ship-line-head b { color: var(--sor-b-akcent); }
  .ship-line .ship-line-head b { font-size: 13px; }
  .ship-line .ship-remove { background:none; border:none; color: var(--danger); font-size: 12.5px; cursor:pointer; }
  .sku-pick { margin-bottom: 8px; }
  .ship-total {
    margin-top: 10px; padding: 9px 11px; border-radius: var(--radius);
    background: var(--ok-bg); color: var(--ok); font-size: 13px;
  }

  .batch-row {
    display:flex; justify-content:space-between; align-items:center; gap:10px;
    padding: 10px 4px; border-bottom: 1px solid var(--surface-2);
    cursor: pointer;
  }
  .batch-row:hover { background: var(--surface-2); }
  .batch-row .bl-main { font-size: 13.5px; }
  .batch-row .bl-main .db { font-weight:600; font-family:'IBM Plex Mono',monospace; }
  .batch-row .bl-sub { font-size: 11.5px; color: var(--ink-soft); margin-top:2px; }
  .batch-row .bl-right { text-align:right; }

  /* ---------- egységes kártyás listasorok (V30) ----------
     Minden listasor (Kitárolás, Teendők, projektek, rendelések…) ugyanazt a nyelvet beszéli:
     kártya + bal oldali státuszsáv (zöld = rendben, sárga = figyelni kell, piros = baj, szürke = nem aktív),
     címkézett mezők (.facts/.fact), figyelmeztető csík (.warnbar), a gombok külön oszlopban (.row-actions). */
  .batch-row {
    background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--line);
    border-radius: var(--radius); padding: 12px 14px; margin-bottom: 8px; align-items: flex-start; gap: 14px;
  }
  .batch-row:hover { background: var(--surface-2); }
  .batch-row .bl-main { flex: 1 1 auto; min-width: 0; font-size: 15px; font-weight: 600; line-height: 1.35; }
  .batch-row .bl-sub { font-size: 12.5px; font-weight: 400; color: var(--ink-soft); margin-top: 4px; line-height: 1.45; }
  .batch-row.st-ok   { border-left-color: var(--ok); }
  .batch-row.st-warn { border-left-color: var(--caution); background: color-mix(in srgb, var(--caution-bg) 35%, var(--surface)); }
  .batch-row.st-bad  { border-left-color: var(--danger); background: color-mix(in srgb, var(--danger-bg) 45%, var(--surface)); }
  .batch-row.st-muted{ border-left-color: var(--line); background: var(--surface-2); }
  .batch-row .row-actions { display: flex; flex-direction: column; gap: 6px; align-items: stretch; flex: 0 0 auto; min-width: 150px; }
  .batch-row .row-actions .btn { width: 100%; text-align: center; }
  .batch-row .row-actions .btn:not(.steel):not(.rust) { font-weight: 500; }
  .facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; font-weight: 400; }
  .fact { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 5px 10px; min-width: 92px; }
  .fact .fl { display: block; font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; }
  .fact .fv { display: block; font-size: 16px; font-weight: 700; font-family: 'IBM Plex Mono', monospace; color: var(--ink); overflow-wrap: anywhere; }
  .fact.big .fv { font-size: 20px; color: var(--steel-dark); }
  .fact.warn { border-color: var(--caution); background: var(--caution-bg); }
  .fact.warn .fv { color: var(--caution); }
  .warnbar { margin-top: 8px; padding: 6px 10px; border-radius: var(--radius); background: var(--caution-bg); color: var(--caution); font-size: 12.5px; font-weight: 700; border: 1px solid var(--caution); }
  .badbar  { margin-top: 8px; padding: 6px 10px; border-radius: var(--radius); background: var(--danger-bg); color: var(--danger); font-size: 12.5px; font-weight: 700; border: 1px solid var(--danger); }
  /* projekt-blokk a Kitárolásban és a Teendők kártyái */
  .history.kt-projekt { margin-top: 18px; padding-top: 12px; border-top: 3px solid var(--steel); }
  .history.kt-projekt > h3 { font-size: 15px; text-transform: none; color: var(--ink); margin: 0 0 6px; }
  .kt-summary { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 10px; font-size: 12.5px; }
  .kt-summary .fact { min-width: 0; padding: 3px 9px; }
  .kt-summary .fact .fv { font-size: 14px; display: inline; margin-left: 6px; }
  .kt-summary .fact .fl { display: inline; text-transform: none; letter-spacing: 0; font-size: 12.5px; }
  .history:has(> .bl-main) { background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--steel); border-radius: var(--radius); padding: 12px 14px; margin-top: 10px; }
  .history:has(> .bl-main) > .bl-main { font-size: 15px; line-height: 1.4; }
  .history:has(> .bl-main) .bl-sub { font-size: 12.5px; line-height: 1.5; margin-top: 3px; }
  .history .batch-row { border-left-width: 3px; }
  @media (max-width: 640px) {
    .batch-row .row-actions { flex-direction: row; flex-wrap: wrap; min-width: 0; width: 100%; }
    .batch-row .row-actions .btn { width: auto; flex: 1 1 auto; }
  }

  .view-seg {
    display:inline-flex; border: 1px solid var(--line); border-radius: var(--radius); overflow:hidden;
  }
  .view-seg button {
    border: none; background: var(--surface); color: var(--ink-soft);
    padding: 7px 13px; font-size: 13px; font-weight: 600; border-right: 1px solid var(--line);
  }
  .view-seg button:last-child { border-right: none; }
  .view-seg button.active { background: var(--ink); color: var(--bg); }

  .table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
  table.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
  table.data-table th {
    text-align: left; padding: 9px 12px; border-bottom: 2px solid var(--ink);
    white-space: nowrap; cursor: pointer; user-select: none; color: var(--ink-soft);
    font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em;
  }
  table.data-table th:hover { color: var(--steel-dark); }
  table.data-table th .arrow { font-size: 10px; margin-left: 3px; }
  table.data-table td { padding: 8px 12px; border-bottom: 1px solid var(--surface-2); white-space: nowrap; }
  table.data-table td.mono { font-family: 'IBM Plex Mono', monospace; }
  table.data-table tr.data-row { cursor: pointer; }
  table.data-table tr.data-row:hover td { background: var(--surface-2); }
  table.data-table tr.sku-summary-row td {
    background: var(--surface-2); font-weight: 600; padding: 7px 12px;
    border-bottom: 1px solid var(--line); white-space: normal; font-size: 12.5px;
  }

.conn-badge.connecting .conn-dot{background:var(--ink-soft)}
.logged-item-editor [hidden]{display:none!important}.logged-item-editor{display:grid;gap:12px}.logged-item-editor>section{display:grid;gap:10px}.logged-item-editor .field{display:grid;gap:5px}.logged-item-editor input,.logged-item-editor select,.logged-item-editor textarea{box-sizing:border-box;width:100%;max-width:100%}
.category-density-panel [hidden]{display:none!important}.category-density-panel{display:grid;gap:12px}.category-density-panel .batch-row{display:flex;gap:10px;flex-wrap:wrap;align-items:end;padding:12px}.category-density-panel .field{display:grid;gap:5px}.category-density-panel input{box-sizing:border-box;max-width:100%}.category-density-panel .batch-row input{width:160px}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.warehouse-navigation{display:grid;gap:10px;margin:12px 0}.warehouse-daily-actions,.warehouse-secondary-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:start}.warehouse-action-menu{border:1px solid var(--line);border-radius:4px;background:var(--surface)}.warehouse-action-menu>summary{padding:9px 12px;cursor:pointer;font-weight:600;font-size:13px}.warehouse-action-menu[open]{flex:1 1 260px}.warehouse-menu-content,.warehouse-native-actions{display:flex;gap:8px;flex-wrap:wrap}.warehouse-menu-content{padding:0 12px 12px}.warehouse-navigation [hidden]{display:none!important}
.server-controls{padding:8px 0;margin:8px 0;background:transparent;display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;}
.shipment-intake [hidden],.server-form-fields [hidden]{display:none!important}.server-controls h2{margin:0 0 8px;font-size:18px}.server-controls p{margin:8px 0}.server-actions{display:flex;gap:8px;flex-wrap:wrap}.server-form-fields{display:grid;gap:12px}.receiving-lines{display:grid;gap:12px}.receiving-line{border:1px solid var(--line);padding:12px;display:grid;gap:10px}.receiving-line legend{font-weight:700;padding:0 5px}
.shipment-intake .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.shipment-intake .field{min-width:0}.shipment-intake .field>input:not([type=checkbox]),.shipment-intake select{box-sizing:border-box;width:100%;min-width:0;max-width:100%}
.procurement-modal{max-width:940px}.procurement-modal [hidden]{display:none!important}.procurement-body,.procurement-body form{display:grid;gap:12px}.procurement-body .field{min-width:0}.procurement-body input:not([type=checkbox]),.procurement-body select{box-sizing:border-box;width:100%;min-width:0}.procurement-order{padding:14px;border:1px solid var(--line)}.procurement-order h3{margin:0 0 8px}.procurement-order p{overflow-wrap:anywhere}
@media(max-width:520px){.shipment-intake .form-grid{grid-template-columns:minmax(0,1fr)}}
.security-users{display:grid;gap:12px}.security-user{border:1px solid var(--line);padding:12px}.security-user h3,.security-user p{margin:0 0 6px}.security-user form{display:grid;gap:8px;margin-top:12px}.security-user input{max-width:180px}.security-help{line-height:1.5}.security-message{font-weight:600}
.master-sections{display:grid;gap:18px}.master-section{padding:12px;border:1px solid var(--line)}.master-section h3{margin:0 0 10px}.master-section ul{padding-left:18px}.master-section li{margin:8px 0;display:flex;align-items:center;gap:10px;flex-wrap:wrap}.master-section li span{flex:1 1 200px}.test-dataset-actions form{display:grid;gap:12px}.test-dataset-actions input{max-width:200px}
@media(max-width:600px){.server-actions button{flex:1 1 140px}.server-controls{padding:12px}}