/* ========== Focus Mode (Staging workspace) ========== */
  body.focus-mode-active .topbar,
  body.focus-mode-active .tabstrip{
    display:none !important;
  }
  body.focus-mode-active #app{
    height:100vh;
  }
  body.focus-mode-active .content{
    overflow:hidden;
    display:flex;
    flex-direction:column;
    height:100vh;
    max-height:100vh;
  }
  body.focus-mode-active .content .stg-detail-fill{
    flex:1;
    min-height:0;
    height:100%;
    display:flex;
    flex-direction:column;
    overflow:hidden;
  }

  /* Selection command strip — top pane-head (tabs row), always one line */
  .stg-batch-bar{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
    padding:6px 10px;
    margin:0;
    width:100%;
    max-width:none;
    box-sizing:border-box;
    background:var(--paper);
    color:var(--ink);
    border:1px solid var(--line);
    border-radius:var(--radius);
    font-size:12.5px;
    min-height:36px;
    height:auto;
    flex-shrink:0;
    /* Outside scroll area (pane-head) — no sticky needed */
    position:static;
    z-index:auto;
    box-shadow:none;
    white-space:normal;
  }
  .stg-batch-bar.has-selection{
    background:var(--accent-tint);
    border-color:#b7d4cb;
  }
  .stg-batch-bar .batch-count{
    flex:1 1 auto;min-width:120px;line-height:1.25;white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis;color:var(--ink);
    font-size:13px;
  }
  .stg-batch-bar .batch-count b{font-family:var(--mono);color:var(--accent-dark)}
  .stg-batch-bar .stg-batch-actions{
    display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;margin-left:auto;
  }
  .stg-batch-bar .btn{
    background:var(--surface);color:var(--ink);border-color:var(--line);
    height:28px;min-height:28px;padding:0 11px;font-size:12px;line-height:26px;
    white-space:nowrap;flex-shrink:0;
  }
  .stg-batch-bar .btn.primary{
    background:var(--accent);color:#fff;border-color:var(--accent-dark);
    white-space:nowrap !important;font-weight:600;
  }
  .stg-batch-bar .btn.ghost{background:transparent;color:var(--ink-soft);border-color:var(--line)}
  .stg-batch-bar .btn.ghost:hover{background:var(--line-soft);color:var(--ink)}
  .stg-batch-bar .btn:disabled{opacity:.45;cursor:not-allowed}
  .stg-batch-bar-empty{
    opacity:1;
    background:var(--paper);
    border-style:dashed;
  }
  .stg-batch-bar-empty .batch-count{color:var(--ink-soft);font-size:12px}
  .stg-pane-head .stg-batch-bar{margin-left:0;margin-top:6px}
  .stg-pane-head-row{
    display:flex;align-items:center;gap:8px;flex-wrap:wrap;width:100%;min-width:0;
  }
  .stg-pane-head{
    flex-wrap:wrap !important;
    overflow:visible;
	width: 100%;
  }
  .stg-match-btn-oneline,
  .stg-batch-bar .btn.stg-match-btn-oneline{
    white-space:nowrap !important;
    height:28px !important;min-height:28px !important;
    padding:0 12px !important;font-size:12px !important;line-height:26px !important;
  }

  /* ========== Staging Focus Layout (100vh workspace) ========== */
  .staging-layout{
    display:grid;
    grid-template-columns:minmax(340px, max-content) minmax(0,1fr);
    grid-template-rows:40px minmax(0,1fr);
    gap:0;
    height:100vh;
    max-height:100vh;
    overflow:hidden;
    background:var(--paper);
    border:none;
    border-radius:0;
  }
  body:not(.focus-mode-active) .staging-layout{
    height:calc(100vh - 52px);
    max-height:calc(100vh - 52px);
  }

  /* Ultra-compact single header (~48px) */
  .stg-zone-a{
    grid-column:1 / -1;
    grid-row:1;
    background:var(--surface);
    border-bottom:1px solid var(--line);
    padding:0 10px;
    display:flex;
    align-items:center;
    gap:8px;
    height:40px;
    min-height:40px;
    max-height:40px;
    box-sizing:border-box;
    flex-shrink:0;
    z-index:12;
    overflow:visible;
  }
  .stg-focus-left{
    display:flex;align-items:center;justify-content:flex-start;
    gap:10px;min-width:0;flex:1 1 auto;
    margin-left:0; /* never push children right */
  }
  .stg-focus-right{
    display:flex;align-items:center;gap:8px;flex:0 0 auto;margin-left:auto;
  }
  .stg-tb-file{
    font-size:12.5px;font-weight:700;color:var(--ink);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:min(36vw,360px);
  }
  .stg-zone-a .btn.small,
  .stg-zone-a .btn{
    height:28px;min-height:28px;padding:0 9px;font-size:12px;line-height:26px;
  }
  .stg-zone-a .btn.action-primary,
  .stg-zone-a .btn.primary{
    font-weight:600;
  }

  /* Stats dropdown (replaces badge strip) */
  /* Import details — popover (not modal), anchored under zone-a above center pane */
  .stg-stats-dd{
    position:relative;flex-shrink:0;margin:0;
  }
  .stg-stats-dd > summary{
    list-style:none;cursor:pointer;pointer-events:auto;position:relative;z-index:6;
    height:28px;padding:0 8px;border:1px solid var(--line);border-radius:var(--radius);
    background:var(--paper);font-size:12px;color:var(--ink-soft);
    display:inline-flex;align-items:center;gap:5px;user-select:none;
  }
  .stg-stats-dd > summary::-webkit-details-marker{display:none}
  .stg-stats-dd > summary:hover,
  .stg-stats-dd[open] > summary{
    background:var(--accent-tint);color:var(--accent-dark);border-color:var(--accent);
  }
  .stg-stats-panel{
    position:fixed;
    z-index:10000; /* global overlay tier — above sticky panes (≤10) */
    min-width:280px;max-width:360px;
    background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
    box-shadow:0 12px 32px rgba(31,36,33,.18);
    padding:12px 14px;
  }
  /* When portaled to body, keep same look */
  body > .stg-stats-panel.stg-stats-panel-portaled{
    z-index:10000;
  }
  .stg-stats-panel h4{
    margin:0 0 8px;font-size:11px;font-weight:700;color:var(--ink-soft);
    text-transform:uppercase;letter-spacing:.04em;
  }
  .stg-stats-panel .im-row{
    display:flex;justify-content:space-between;gap:12px;
    font-size:12.5px;padding:4px 0;color:var(--ink-soft);
    border-bottom:1px dashed var(--line-soft);
  }
  .stg-stats-panel .im-row:last-child{border-bottom:none}
  .stg-stats-panel .im-row b{color:var(--ink);font-family:var(--mono);font-weight:700}
  .stg-stats-panel .stg-stats-modes{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
  .stg-stats-panel .stg-stats-modes .btn{height:26px;font-size:11.5px}

  .stg-chip{
    display:inline-flex;align-items:center;gap:3px;
    height:24px;padding:0 7px;border-radius:999px;
    border:1px solid var(--line);background:var(--paper);
    font-size:11px;font-weight:500;color:var(--ink-soft);
    cursor:pointer;white-space:nowrap;line-height:22px;
    font-family:inherit;
  }
  .stg-chip:hover{border-color:var(--accent);color:var(--ink)}
  .stg-chip.active{
    background:var(--accent);color:#fff;border-color:var(--accent-dark);font-weight:600;
  }
  .stg-chip b{font-family:var(--mono);font-weight:600;font-size:11px}

  .stg-zone-b,.stg-zone-c{
    min-height:0;min-width:0;overflow:hidden;
    display:flex;flex-direction:column;
    background:var(--surface);
  }
  .stg-zone-b{
    grid-column:1;grid-row:2;
    border-right:1px solid var(--line);
    position:relative;
    width:fit-content;
    min-width:340px;
    max-width:450px;
    flex-shrink:0;
  }
  /* Central workspace: monolithic single view — NEVER split into sub-frames */
  .stg-zone-c{
    grid-column:2;grid-row:2;
  }
  /* Legacy right column removed from grid (Single-View Paradigm) */
  .stg-zone-d{display:none !important}
  /* Left sidebar: scrollable periods + sticky command bar */
  .stg-zone-b-inner{
    display:flex;flex-direction:column;height:100%;min-height:0;
  }
  .stg-zone-b .stg-pane-body{
    flex:1 1 auto;min-height:0;overflow:auto;padding:0 0 56px 0;
    overscroll-behavior:contain;
  }
  .stg-pane-head{
    flex-shrink:0;padding:5px 8px;background:var(--paper);
    border-bottom:1px solid var(--line-soft);
    font-size:11.5px;font-weight:700;color:var(--ink-soft);
    display:flex;align-items:center;gap:6px;flex-wrap:wrap;
    letter-spacing:.02em;min-height:32px;box-sizing:border-box;
    position:static; /* fixed frame, not sticky-inside-scroll */
    z-index:5;
	width: 100%;
  }
  .stg-pane-head .badge{font-weight:600;font-size:10.5px;padding:1px 5px;line-height:15px}
  .stg-pane-head .stg-view-tabs{
    display:inline-flex;flex-wrap:wrap;gap:3px;margin-left:auto;
  }
  .stg-pane-body{
    flex:1 1 auto;min-height:0;overflow:auto;padding:4px 6px 8px;
    position:relative;
  }
  .stg-zone-c-inner{
    display:flex;flex-direction:column;height:100%;min-height:0;
  }
  .stg-zone-c1{
    display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden;
    flex:1 1 auto;
  }
  /* c2 disabled — match plan lives inside the single scrollable view */
  .stg-zone-c2{display:none !important}
  .stg-nav-month{display:none} /* month folded into period title row */
  /* Period cards: uniform 1px contour — NO left accent strip */
  .stg-nav-period-wrap,
  .stg-nav-period-wrap.status-warn,
  .stg-nav-period-wrap.status-ok,
  .stg-nav-period-wrap.status-error,
  .stg-nav-period-wrap.status-idle,
  .stg-nav-period-wrap.is-active{
    border:2px solid var(--line) !important;
    border-left:1px solid var(--line) !important;
    border-radius:var(--radius);
    margin:6px 8px;
    background:var(--surface);
    overflow:hidden;
    box-shadow:none;
    transition:border-color .15s ease, background .15s ease, opacity .15s ease, margin .15s ease;
  }
  .stg-nav-period-wrap.status-ok{
    background:var(--accent-tint);
    border-color:#b7d4cb !important;
  }
  .stg-nav-period-wrap.status-warn{
    background:#FBF4E6;
    border-color:#E5D4A8 !important;
  }
  .stg-nav-period-wrap.status-idle{
    background:var(--surface);
    border-color:var(--line) !important;
  }
  /* Active: same 1px thickness, accent color on full perimeter */
  .stg-nav-period-wrap.is-active{
    border-color:var(--accent) !important;
    background:var(--surface);
    margin:8px 6px;
  }
  /* Inactive siblings step aside when one is active */
  .stg-zone-b-inner:has(.stg-nav-period-wrap.is-active) .stg-nav-period-wrap:not(.is-active){
    opacity:.58;
    margin:4px 12px 4px 14px;
  }
  .stg-zone-b-inner:has(.stg-nav-period-wrap.is-active) .stg-nav-period-wrap:not(.is-active):hover{
    opacity:.9;
  }
  /* Kill any left-strip pseudo / inset markers on period nav */
  .stg-nav-period-wrap::before,
  .stg-nav-period-wrap::after,
  .stg-nav-period::before,
  .stg-nav-period::after{
    display:none !important;
    content:none !important;
  }
  .stg-nav-period{
    display:block;width:100%;text-align:left;border:none;background:transparent;
    padding:7px 10px 6px;cursor:pointer;font:inherit;color:var(--ink);
    box-shadow:none !important;
  }
  .stg-nav-period:hover{background:rgba(47,111,98,.06)}
  .stg-nav-period.active{
    /* was inset left strip — removed; weight only */
    box-shadow:none !important;
    font-weight:600;
  }
  .stg-nav-period-wrap.is-active .stg-nav-period{
    font-weight:600;
  }
  /* Month + period on one line — full text, no ellipsis */
  .stg-nav-period .stg-nav-title{
    font-size:12px;font-weight:600;line-height:1.3;
    display:flex;align-items:baseline;flex-wrap:nowrap;gap:4px;min-width:0;
    white-space:nowrap;overflow:visible;text-overflow:unset;
  }
  .stg-nav-period .stg-nav-month-inline{
    color:var(--accent-dark);font-weight:700;font-size:10.5px;
    text-transform:uppercase;letter-spacing:.03em;flex-shrink:0;
  }
  .stg-nav-period .stg-nav-period-label{
    min-width:0;overflow:visible;text-overflow:unset;white-space:nowrap;
  }
  .stg-nav-period .stg-nav-meta{
    font-size:11px;color:var(--ink-soft);margin-top:1px;
    white-space:nowrap;overflow:visible;text-overflow:unset;
  }
  .stg-nav-cid{
    display:flex;align-items:center;justify-content:space-between;gap:8px;
    width:calc(100% - 12px);margin:0 6px 6px;text-align:left;
    border:1px solid var(--line-soft);
    border-left:none;
    border-right:none;
    border-radius:0;
    background:transparent;
    padding:6px 8px;cursor:pointer;font:inherit;font-size:11.5px;color:var(--ink);
    box-sizing:border-box;
    box-shadow:none !important;
  }
  .stg-nav-cid:hover{background:rgba(47,111,98,.06);color:var(--ink)}
  .stg-nav-cid.active{
    background:var(--accent-tint);
    font-weight:600;
    box-shadow:none !important;
    border-color:var(--line-soft);
  }
  .stg-nav-cid.status-ok{background:var(--accent-tint)}
  .stg-nav-cid.status-warn{background:#FBF4E6}
  .stg-nav-cid.status-idle{background:transparent}
  .stg-nav-period-wrap .stg-nav-cid:last-child{border-bottom:none}
  .stg-nav-cid .stg-contractor-name{
    white-space:nowrap;overflow:visible;text-overflow:unset;flex:1 1 auto;min-width:0;
  }
  .stg-nav-cid .stg-contractor-meta{
    white-space:nowrap;flex-shrink:0;font-size:11px;
  }
  .stg-nav-cid .delta-ok{color:var(--accent-dark);font-family:var(--mono);font-size:11px}
  .stg-nav-cid .delta-bad{color:var(--danger);font-family:var(--mono);font-size:11px}
  .stg-nav-cid .delta-warn{color:var(--amber);font-family:var(--mono);font-size:11px}
  /* Central period one-line header */
  .stg-period-oneline{
    display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:6px;min-width:0;
  }
  .stg-period-month{
    color:var(--accent-dark);font-weight:700;font-size:12px;
    text-transform:uppercase;letter-spacing:.03em;flex-shrink:0;
  }
  .stg-period-sep{color:var(--ink-soft);flex-shrink:0}
  .stg-period-dates{font-size:12px}
  .stg-split-empty{
    padding:24px 16px;text-align:center;color:var(--ink-soft);font-size:13px;line-height:1.45;
  }
  .stg-zone-d .stg-inv-focus{margin:0 0 8px}
  .stg-zone-d .stg-match-actions{position:sticky;bottom:0;background:var(--surface);padding:8px 0;border-top:1px solid var(--line-soft);z-index:2}
  .stg-pane-body{
    overflow:auto;
    position:relative;
  }
  .stg-pane-body table.stg-table thead th,
  .stg-pane-body table.stg-inv-table thead th,
  .staging-table thead th,
  .stg-vtable-scroll thead th{
    position:sticky;top:0;z-index:10;
    background-color:var(--paper,#F7F6F2);
    background:var(--paper,#F7F6F2);
    box-shadow:0 1px 0 var(--line,#DEDAD0);
  }
  /*
   * Stacked sticky in .stg-pane-body scrollport:
   *  1) .stg-period-head-row  → top: 0, z-index: 5
   *  2) thead th              → top: var(--stg-sticky-period-h), z-index: 2
   * Sibling combinator (~) was wrong (table is a descendant, not a sibling).
   * Hardcoded top:44px was shorter than the real toolbar → thead slid under it.
   */
  .stg-period{
    --stg-sticky-period-h: 0px;
  }
  .stg-period.stg-period-locked,
  .stg-period:has(> .stg-period-head-row.is-sticky-match){
    --stg-sticky-period-h: 52px; /* fallback until ResizeObserver measures */
  }
  .stg-period.stg-period-locked > .stg-period-head-row,
  .stg-period-head-row.is-sticky-match{
    position:sticky;
    top:0;
    z-index:5;
    background:var(--accent-tint);
  }
  .stg-period.stg-period-locked table.stg-table thead th,
  .stg-period.stg-period-locked .stg-vtable-scroll thead th,
  .stg-period:has(> .stg-period-head-row.is-sticky-match) table.stg-table thead th,
  .stg-period:has(> .stg-period-head-row.is-sticky-match) .stg-vtable-scroll thead th{
    top: var(--stg-sticky-period-h, 52px);
    z-index: 2; /* below period toolbar (5), above body rows */
  }

  /* Compact Quick View (right pool) + dense controls in Focus Mode */
  body.focus-mode-active .stg-zone-d .stg-pane-body{padding:4px 6px 6px}
  body.focus-mode-active .stg-zone-d .stg-table th,
  body.focus-mode-active .stg-zone-d .stg-table td{padding:3px 5px;font-size:11.5px}
  body.focus-mode-active .stg-zone-d .stg-split-empty{padding:16px 10px;font-size:12px}
  body.focus-mode-active .stg-table input.stg-cell-input{
    height:26px;padding:0 5px;font-size:12px;
  }
  body.focus-mode-active .stg-add-row{padding:6px 8px;gap:6px;margin-top:6px}
  body.focus-mode-active .stg-add-row .stg-add-field input,
  body.focus-mode-active .stg-add-row .stg-add-field select{height:28px}
  body.focus-mode-active .stg-match-actions .btn,
  body.focus-mode-active .stg-zone-d .btn{
    height:28px;min-height:28px;padding:0 9px;font-size:12px;
  }
  body.focus-mode-active .stg-month-head{font-size:11.5px;padding:4px 0}
  body.focus-mode-active .stg-period{margin-bottom:8px;padding-left:8px}
  body.focus-mode-active .import-note{padding:6px 8px;font-size:12px}
  /* Contextual action affordance: muted until selection */
  .stg-batch-bar .btn.primary:disabled,
  .stg-batch-bar .btn:disabled{
    opacity:.4;filter:grayscale(.35);
  }
  .stg-batch-bar.has-selection .btn.primary:not(:disabled){
    box-shadow:0 0 0 1px rgba(255,255,255,.25);
  }
  .stg-qv-sum{
    display:flex;justify-content:space-between;align-items:center;gap:8px;
    padding:6px 8px;margin:0 0 4px;background:var(--paper);border:1px solid var(--line);
    border-radius:var(--radius);font-size:11.5px;position:sticky;top:0;z-index:2;
  }
  .stg-qv-sum b{font-family:var(--mono);color:var(--accent-dark)}


  .stg-inner-tabs{display:inline-flex;gap:3px;align-items:center;flex-wrap:wrap}
  .stg-inner-tabs .stg-chip{pointer-events:auto;cursor:pointer}
  .stg-inner-tabs .stg-chip:disabled{opacity:.45;cursor:not-allowed}
  .stg-center-tabs{display:inline-flex;gap:4px;align-items:center;flex-wrap:wrap}
  .stg-center-tabs .stg-chip{pointer-events:auto;cursor:pointer}
  .stg-center-tabs .stg-chip.active{
    background:var(--accent);color:#fff;border-color:var(--accent-dark);font-weight:600;
  }
  /* Ensure sticky thead/tfoot work inside pane scroll containers */
  body.focus-mode-active .stg-pane-body{
    overflow:auto;
    overscroll-behavior:contain;
  }
  body.focus-mode-active .stg-pane-body .stg-table thead th,
  body.focus-mode-active .stg-pane-body table.stg-inv-table thead th{
    position:sticky;top:0;z-index:4;background:var(--paper);
  }
  body.focus-mode-active .stg-pane-body .stg-table tfoot td,
  body.focus-mode-active .stg-pane-body table.stg-inv-table tfoot td{
    position:sticky;bottom:0;z-index:4;background:var(--paper);
  }
  
  /* Focus Mode: one scrollport (pane-body) — kill nested vtable scroll + height fights */
  body.focus-mode-active .stg-vtable-scroll{
    max-height:none !important;
    height:auto !important;
    overflow:visible !important;
  }
  body.focus-mode-active .stg-pane-body{
    padding-bottom:64px;
    overscroll-behavior-y:contain;
  }
  body.focus-mode-active .stg-period-validators{
    z-index:1;
  }
  body.focus-mode-active .stg-period-head-row.is-sticky-match,
  body.focus-mode-active .stg-period.stg-period-locked > .stg-period-head-row{
    z-index:5;
  }
  body.focus-mode-active .stg-period.stg-period-locked table.stg-table thead th,
  body.focus-mode-active .stg-period:has(> .stg-period-head-row.is-sticky-match) table.stg-table thead th{
    top: var(--stg-sticky-period-h, 52px);
    z-index:2;
  }
  body.focus-mode-active .stg-pane-head{
    position:sticky;top:0;z-index:6;background:var(--paper);
  }

  body.focus-mode-active .stg-zone-b .stg-pane-head{
    position:sticky;top:0;z-index:5;
  }

  /* Detail mode: content fills viewport, no page scroll for staging */
  .content:has(.staging-layout){overflow:hidden;display:flex;flex-direction:column}
  .content .stg-detail-fill{
    flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;
    max-width:none;margin:0;padding:0;
  }
  .stg-detail-fill > .stg-detail-bar{
    flex-shrink:0;margin:0;border-radius:0;border-left:none;border-right:none;border-top:none;
  }
  @media (max-width:1100px){
    .staging-layout{
      grid-template-columns:1fr;
      grid-template-rows:40px auto minmax(280px,1fr);
      height:auto;max-height:none;overflow:auto;
    }
    body.focus-mode-active .staging-layout{height:auto;max-height:none}
    .stg-zone-b,.stg-zone-c{grid-column:1;border-right:none;border-bottom:1px solid var(--line)}
    .stg-zone-b{grid-row:2;max-height:35vh}
    .stg-zone-c{grid-row:3;max-height:none}
  }

  /* thead below batch bar when both sticky */
  .stg-table thead th{z-index:2}
  .stg-picker{
    border:1px solid var(--accent);border-radius:var(--radius);background:var(--surface);
    padding:12px 14px;margin:10px 0 14px;box-shadow:0 4px 16px rgba(31,36,33,.1);
  }
  .stg-picker-head{
    display:flex;align-items:center;gap:8px;flex-wrap:nowrap;margin-bottom:8px;
    min-height:32px;overflow:hidden;
  }
  .stg-picker-head .stg-pipe{margin:0;flex:1 1 auto;min-width:0;flex-wrap:nowrap}
  .stg-picker-head .stg-pipe .step{padding:3px 8px;font-size:11px;white-space:nowrap}
  .stg-picker-head .stg-head-ctrls{
    display:inline-flex;align-items:center;gap:6px;flex-shrink:0;margin-left:auto;
  }
  .stg-picker-head .stg-head-ctrls .btn{height:28px;padding:0 9px;font-size:11.5px;white-space:nowrap}
  .stg-match-btn-oneline{
    white-space:nowrap !important;height:28px !important;min-height:28px !important;
    padding:0 10px !important;font-size:12px !important;line-height:26px !important;
    flex-shrink:0;
  }
  .stg-match-plan{border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);padding:10px 12px;margin:10px 0 12px}
  .stg-match-plan h4{margin:0 0 8px;font-size:12.5px;font-weight:700;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.04em}
  .stg-match-plan .mp-row{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;padding:5px 0;border-bottom:1px dashed var(--line-soft);font-size:12.5px}
  .stg-match-plan .mp-row:last-child{border-bottom:none}
  .stg-match-plan .mp-ok{color:var(--accent-dark);font-weight:600}
  .stg-match-plan .mp-amb{color:var(--amber);font-weight:600}
  .stg-match-plan .mp-miss{color:var(--danger);font-weight:600}
  .stg-match-plan .mp-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
  .stg-sel-hint{font-size:11.5px;color:var(--ink-soft);margin:4px 0 8px}

  .stg-picker-head b{font-size:13px}
  /* Validators stay inside .stg-period — sticky bottom:0 on the outer scrollport
     made the amber bar spill past the card edge (v3 layout fix). */
  .stg-period-validators{
    max-width:100%;
    min-width:0;
    overflow:hidden;
    box-sizing:border-box;
  }
  .stg-validator{
    display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;
    gap:8px 14px;
    padding:8px 12px;border-radius:var(--radius);background:var(--paper);border:1px solid var(--line);
    font-size:12.5px;margin-top:8px;min-width:0;max-width:100%;width:100%;
    box-sizing:border-box;line-height:1.3;
    position:relative;
    z-index:2;
    box-shadow:none;
  }
  .stg-validator.ok{border-color:var(--accent);background:var(--accent-tint)}
  .stg-validator.warn{border-color:var(--amber);background:#FBF2DE}
  .stg-validator .stg-val-name{
    flex:0 1 200px;min-width:120px;max-width:240px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .stg-validator .stg-val-name b{font-weight:700}
  .stg-validator .stg-val-sum{
    flex:0 0 auto;white-space:nowrap;
  }
  .stg-validator .stg-val-status{
    flex:0 1 auto;min-width:0;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .stg-validator .stg-smart-msg{
    flex:1 1 180px;margin:0;padding:5px 10px;border-radius:var(--radius);
    font-size:11.5px;line-height:1.25;white-space:normal;
    background:var(--surface);border:1px solid var(--line);
    max-width:100%;overflow:hidden;
  }
  .stg-progress{flex:1 1 100%;height:8px;border-radius:99px;background:var(--line-soft);overflow:hidden;margin-top:4px}
  .stg-progress-bar{height:100%;background:var(--accent);transition:width .15s ease}
  .stg-progress-bar.ok{background:var(--accent)}
  .stg-progress-bar.warn{background:var(--amber)}
  .stg-progress-bar.bad{background:var(--danger)}
  .stg-validator .bal-ok{color:var(--accent-dark);font-weight:700}
  .stg-validator .bal-warn{color:var(--amber);font-weight:700}
  .stg-validator .bal-bad{color:var(--danger);font-weight:700}
  .stg-table th.stg-check{width:1%;text-align:center;vertical-align:middle}
  .stg-table th.stg-check input{accent-color:var(--accent);width:15px;height:15px;cursor:pointer}
  .stg-smart-msg{margin-top:8px;padding:8px 10px;border-radius:var(--radius);font-size:12.5px;background:var(--paper);border:1px solid var(--line)}
  .stg-smart-msg.ok,.stg-validator .stg-smart-msg.ok{border-color:var(--accent);background:var(--accent-tint);color:var(--accent-dark)}
  .stg-smart-msg.warn,.stg-validator .stg-smart-msg.warn{border-color:var(--amber);background:#F8E9C8;color:#7A5510}
  @media (max-width:1100px){
    .stg-validator{flex-wrap:wrap;gap:6px 12px}
    .stg-validator .stg-val-name{flex:1 1 180px;max-width:none}
    .stg-validator .stg-smart-msg{flex:1 1 auto;max-width:none;white-space:normal}
  }
  .stg-inv-focus{
    border:1px solid var(--accent);border-radius:var(--radius);background:var(--accent-tint);
    padding:12px 14px;margin:10px 0;
  }
  .stg-inv-focus .stg-inv-title{font-weight:700;font-size:13.5px;margin-bottom:4px}
  .stg-inv-focus .stg-inv-meta{font-size:12.5px;color:var(--ink-soft);line-height:1.45}
  /* Open invoices list: grows with pane; header row stays pinned while scrolling */
  .stg-inv-list{
    margin:8px 0 0;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);
    max-height:min(62vh, 560px);overflow:auto;min-height:140px;
  }
  .stg-inv-list table.stg-inv-table{width:100%;border-collapse:collapse}
  .stg-inv-list table.stg-inv-table thead th{
    position:sticky;top:0;z-index:4;background:var(--paper);
    box-shadow:0 1px 0 var(--line);
  }
  .stg-pane-body table.stg-inv-table thead th,
  table.stg-inv-table thead th{
    position:sticky;top:0;z-index:4;background:var(--paper);
    box-shadow:0 1px 0 var(--line);
  }
  /* Section title sits above the scrollable list (not inside it) */
  .stg-picker .section-head.stg-inv-section-head{
    position:sticky;top:0;z-index:5;background:var(--surface);
    padding:6px 0 4px;margin-top:4px !important;border-bottom:none;
  }
  .stg-inv-item{display:flex;align-items:center;gap:8px;padding:7px 10px;border-bottom:1px solid var(--line-soft);cursor:pointer;font-size:12.5px}
  .stg-inv-item:hover{background:var(--accent-tint)}
  .stg-inv-item.active{background:var(--accent-tint);box-shadow:inset 3px 0 0 var(--accent)}
  .stg-inv-item.closed{opacity:.55}
  table.stg-inv-table{width:100%;border-collapse:collapse;font-size:12px;background:var(--surface)}
  table.stg-inv-table thead th{
    position:sticky;top:0;z-index:3;background:var(--paper);font-weight:600;color:var(--ink-soft);
    font-size:11px;padding:4px 6px;border-bottom:1px solid var(--line);white-space:nowrap;text-align:left;
    box-shadow:0 1px 0 var(--line);
  }
  table.stg-inv-table tfoot td{
    position:sticky;bottom:0;z-index:3;background:var(--paper);font-weight:700;
    box-shadow:0 -1px 0 var(--line);padding:4px 6px;
  }
  table.stg-inv-table thead th.sortable{cursor:pointer;user-select:none}
  table.stg-inv-table thead th.sortable:hover{background:var(--line-soft);color:var(--accent-dark)}
  table.stg-inv-table thead th.sorted{color:var(--accent-dark)}
  table.stg-inv-table thead th.stg-num, table.stg-inv-table td.stg-num{text-align:right;font-variant-numeric:tabular-nums}
  table.stg-inv-table tbody td{
    padding:4px 6px;border-bottom:1px solid var(--line-soft);vertical-align:middle;
    white-space:nowrap;overflow:visible;
  }
  table.stg-inv-table tbody td.stg-inv-name{
    white-space:normal;overflow-wrap:break-word;word-break:normal;min-width:120px;
  }
  table.stg-inv-table tbody tr{cursor:pointer}
  table.stg-inv-table tbody tr:hover td{background:var(--accent-tint)}
  table.stg-inv-table tbody tr.active td{background:#DCEAE6}
  table.stg-inv-table .stg-check{width:1%;text-align:center}
  table.stg-inv-table .stg-mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
  /* Invoice-First product rows: clean white by default; selected = green; DK-miss = soft fade only */
  .stg-table tr.stg-row-dk-hit > td{
    background:#fff !important;
    box-shadow:inset 3px 0 0 0 var(--accent);
  }
  .stg-table tr.stg-row-dk-miss > td{
    background:#fff !important;
    opacity:.55;
    color:var(--ink-soft);
  }
  .stg-table tr.stg-row-draft-on > td,
  .stg-table tr.stg-row-dk-hit.stg-row-draft-on > td{
    background:#f0fdf4 !important;
    opacity:1;
    color:inherit;
    box-shadow:inset 3px 0 0 0 var(--accent);
  }
  .stg-kpi-strip{
    display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;
    padding:5px 8px;margin:4px 0;border-radius:var(--radius);
    background:var(--paper);border:1px solid var(--line);font-size:11.5px;
  }
  .stg-kpi-strip b{font-family:var(--mono)}
  .stg-kpi-strip .ok{color:var(--accent-dark)}
  .stg-kpi-strip .warn{color:var(--amber)}
  .stg-closed-box{margin:8px 0;font-size:12.5px}
  .stg-closed-box summary{cursor:pointer;color:var(--accent-dark);font-weight:600}
  .stg-closed-item{padding:4px 0 4px 8px;border-left:2px solid var(--accent);margin:4px 0;color:var(--ink-soft)}
  .stg-pipe{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
  .stg-pipe .step{
    padding:4px 10px;border-radius:99px;font-size:11.5px;font-weight:600;
    background:var(--line-soft);color:var(--ink-soft);
  }
  .stg-pipe .step.on{background:var(--accent-tint);color:var(--accent-dark)}
  .stg-pipe .step.done{background:var(--accent);color:#fff}
  .stg-corridor{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12.5px}
  .stg-corridor label{color:var(--ink-soft);font-weight:600;white-space:nowrap}
  .stg-date{
    height:30px;border:1px solid var(--line);border-radius:var(--radius);
    padding:0 8px;background:var(--surface);font-family:var(--mono);font-size:12.5px;
  }
  .stg-date.field-error{
    border-color:var(--danger);background:var(--danger-tint);outline:2px solid var(--danger);
  }
  .stg-sep{color:var(--ink-soft)}
  .stg-match-actions{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
  .stg-unmapped{
    border:1px dashed var(--amber);border-radius:var(--radius);background:#FBF2DE;
    padding:12px;margin-top:14px;
  }
  .stg-unmapped h4{margin:0 0 8px;font-size:13px;color:var(--amber)}
  .stg-empty{padding:20px;text-align:center;color:var(--ink-soft);font-size:13px}
  .stg-excl-wrap{margin:8px 0 12px}
  .stg-excl-panel{
    margin-top:8px;padding:10px 12px;border:1px dashed var(--line);border-radius:var(--radius);
    background:var(--surface);
  }
  .stg-actions{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
  .stg-bind-k{font-size:11.5px}
  .stg-k-label{
    display:inline;font-size:12px;font-weight:600;color:var(--accent-dark);
    background:none;border:none;padding:0;margin-left:4px;
  }
  /* Period / matched-group accordion (Staging) */
  .stg-period.stg-period-closed{border:1px solid var(--accent);border-radius:var(--radius);background:var(--accent-tint);padding:0;margin-bottom:10px}
  .stg-period.stg-period-open{margin-bottom:12px}
  .stg-period.stg-period-locked{
    border:2px solid var(--accent);border-radius:var(--radius);background:var(--accent-tint);
    box-shadow:0 0 0 3px rgba(47,111,98,.12);padding:4px 6px 8px;margin-bottom:12px;
  }
  .stg-period.stg-period-locked > .stg-period-head-row{background:rgba(47,111,98,.08);border-radius:var(--radius)}
  .stg-period-lock{
    display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:600;
    color:var(--accent-dark);cursor:pointer;user-select:none;white-space:nowrap;
    padding:2px 8px;border:1px solid var(--accent);border-radius:99px;background:var(--surface);
  }
  .stg-period-lock input{accent-color:var(--accent);margin:0}
  .stg-period-lock.is-on{background:var(--accent);color:#fff;border-color:var(--accent-dark)}

  .stg-period-toggle{
    display:inline-flex;align-items:center;gap:6px;flex-wrap:nowrap;width:auto;
    max-width:100%;padding:4px 6px;border:none;background:transparent;cursor:pointer;
    font:inherit;color:inherit;text-align:left;
  }
  .stg-period-toggle:hover{background:rgba(47,111,98,.08)}
  .stg-period-toggle .stg-acc-arrow{font-size:11px;width:14px;flex-shrink:0;color:var(--accent-dark)}
  .stg-period-body{padding:0 4px 8px}
  .stg-matched-block{
    border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);
    margin-top:10px;overflow:hidden;
  }
  .stg-matched-toggle{
    display:flex;align-items:center;gap:8px;flex-wrap:wrap;width:100%;
    padding:8px 10px;border:none;background:var(--accent-tint);cursor:pointer;
    font:inherit;color:var(--accent-dark);text-align:left;font-weight:600;font-size:12.5px;
  }
  .stg-matched-toggle:hover{background:#dceae6}
  .stg-matched-body{padding:0 0px 0px;}
  .stg-matched-body table.stg-table{margin-top:0}

  /* Virtualized Staging tables — only visible rows in DOM */
  .stg-vtable-scroll{
    /* Prefer a single outer scroll (.stg-pane-body). Nested max-height caused rubber-band jitter. */
    max-height:none;
    overflow:visible;
    border:1px solid var(--line);
    border-radius:var(--radius);background:var(--surface);position:relative;
  }
  /* Only use an inner scrollport when explicitly opted-in (non-focus legacy) */
  .stg-vtable-scroll.stg-vtable-scroll--contained{
    max-height:min(60vh, 520px);
    overflow:auto;
  }
  .stg-vtable-scroll > table.stg-table{margin-top:0}
  .stg-vtable-scroll thead th{
    position:sticky;top:0;z-index:10;background-color:var(--paper,#F7F6F2);
    background:var(--paper,#F7F6F2);box-shadow:0 1px 0 var(--line,#DEDAD0);
  }
  .stg-vtable-scroll tr.stg-vspacer > td{
    padding:0 !important;border:none !important;height:0;
    line-height:0;font-size:0;background:transparent !important;
  }
  .stg-vtable-meta{
    font-size:11px;color:var(--ink-soft);padding:4px 8px 0;text-align:right;
  }
  .stg-matched-body .stg-vtable-scroll{margin-top:0}
  .stg-inv-group-head td{
    background:#E8F2EF !important;
    font-size:15px !important;
    color:var(--accent-dark) !important;
    font-weight:800 !important;
    padding:10px 14px !important;
    border-top:2px solid var(--accent) !important;
    border-bottom:1px solid var(--line) !important;
    letter-spacing:.02em;line-height:1.4;
  }
  .stg-inv-group-label{font-weight:800;opacity:1;margin-right:4px;font-size:15px}
  .stg-inv-group-nums{font-family:var(--mono);font-weight:800;font-size:15px}
  .stg-inv-group-dates,.stg-inv-group-dog{font-weight:800;opacity:1;font-size:15px}
  .stg-inv-group-sep{opacity:.5;margin:0 2px}
  /* Підібрані: блок «№, дата, договір» + окремо к-сть/ціна/сума */
  .stg-table-matched td.stg-inv-meta{
    white-space:nowrap;vertical-align:middle;min-width:14rem;max-width:28rem;
  }
  .stg-inv-meta-block{
    display:inline-flex;align-items:center;flex-wrap:nowrap;gap:4px;
    min-width:0;max-width:100%;
  }
  .stg-inv-meta-sep{color:var(--ink-soft);font-weight:600;flex-shrink:0;user-select:none}
  .stg-inv-meta-row{display:inline-flex;align-items:center;min-width:0}
  .stg-inv-meta-no input.stg-inv-no-input,
  .stg-inv-meta-no .stg-inv-no-text{
    font-family:var(--mono);font-weight:700;font-size:13px;color:var(--ink);
    white-space:nowrap;min-width:5.5rem;max-width:12rem;
  }
  .stg-inv-meta-date input.stg-inv-date-input,
  .stg-inv-meta-date .stg-inv-date-text{
    font-family:var(--mono);font-size:12px;color:var(--ink-soft);
    white-space:nowrap;min-width:5.5rem;max-width:9rem;
  }
  .stg-inv-meta-dog input.stg-inv-dog-input,
  .stg-inv-meta-dog .stg-inv-dog-text{
    font-family:var(--mono);font-size:12px;color:var(--ink);
    white-space:nowrap;min-width:3.5rem;max-width:8rem;
  }
  .stg-inv-meta-dog-label{font-size:11px;color:var(--ink-soft);font-weight:600;margin-right:2px}
  .stg-table-matched th.stg-th-inv-meta{min-width:14rem;white-space:nowrap}
  .stg-matched-toggle{font-size:13.5px}
  .stg-row-matched > td{background:#F4FAF7}
  .stg-table th.stg-doc,.stg-table td.stg-doc{white-space:nowrap;font-size:12px;font-family:var(--mono);font-variant-numeric:tabular-nums}
  .stg-table td.stg-doc-empty{color:var(--ink-soft);font-family:var(--sans)}
  /* Registry of staging uploads */
  .stg-registry{margin-top:14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);overflow:hidden}
  .stg-registry-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
    padding:10px 14px;background:var(--paper);border-bottom:1px solid var(--line-soft)}
  .stg-registry-head h3{margin:0;font-size:13px;font-weight:700;color:var(--ink)}
  table.stg-registry-table{width:100%;border-collapse:collapse;font-size:13px}
  table.stg-registry-table thead th{
    text-align:left;font-size:11.5px;font-weight:600;color:var(--ink-soft);
    padding:8px 12px;border-bottom:1px solid var(--line);background:var(--paper);white-space:nowrap
  }
  table.stg-registry-table tbody td{
    padding:10px 12px;border-bottom:1px solid var(--line-soft);vertical-align:middle
  }
  table.stg-registry-table tbody tr.stg-reg-row{cursor:pointer}
  table.stg-registry-table tbody tr.stg-reg-row:hover td{background:var(--accent-tint)}
  table.stg-registry-table tbody tr.stg-reg-row.active td{background:#DCEAE6}
  table.stg-registry-table .stg-reg-name{font-weight:600;color:var(--ink)}
  table.stg-registry-table .stg-reg-file{font-family:var(--mono);font-size:12px;color:var(--ink-soft)}
  table.stg-registry-table .stg-reg-date{font-family:var(--mono);font-size:12.5px;white-space:nowrap}
  table.stg-registry-table th.sortable,table.stg-table th.sortable{cursor:pointer;user-select:none}
  table.stg-registry-table th.sortable:hover,table.stg-table th.sortable:hover{color:var(--accent-dark)}
  table.stg-table th.sorted{color:var(--accent-dark)}
  .stg-detail-bar{
    display:none; /* folded into Zone A toolbar in detail mode */
  }
  .stg-detail-bar .stg-detail-title{font-weight:600;font-size:13px;flex:1;min-width:120px}
  .stg-table input.stg-cell-input{
    width:100%;min-width:72px;height:28px;border:1px solid var(--line);border-radius:4px;
    padding:0 6px;background:var(--paper);font:inherit;box-sizing:border-box
  }
  .stg-table input.stg-cell-input:focus{outline:2px solid var(--accent);background:#fff;border-color:var(--accent)}
  .stg-table input.stg-cell-input.stg-doc-input{font-family:var(--mono);font-size:12px;min-width:88px}
  .stg-table input.stg-cell-input.stg-num-input{font-family:var(--mono);text-align:right;min-width:64px}
  .stg-table input.stg-cell-input.stg-name-input{min-width:140px}
  .stg-add-row{
    display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px;
    padding:10px;margin-top:8px;border:1px dashed var(--line);border-radius:var(--radius);
    background:var(--paper)
  }
  .stg-add-row .stg-add-field{display:flex;flex-direction:column;gap:3px;min-width:0}
  .stg-add-row .stg-add-field label{font-size:10.5px;font-weight:600;color:var(--ink-soft)}
  .stg-add-row .stg-add-field input,.stg-add-row .stg-add-field select{
    height:30px;border:1px solid var(--line);border-radius:4px;padding:0 8px;background:var(--surface);font:inherit
  }
  .stg-add-row .stg-add-field.grow{flex:1 1 180px}
  .stg-add-row .stg-add-field.narrow{flex:0 0 110px}
  .stg-add-hint{font-size:11.5px;color:var(--ink-soft);width:100%;margin:0}
  tr.stg-row-manual > td{background:#F8FBF9}
  .stg-matched-head-row,.stg-period-head-row{
    display:flex;align-items:center;justify-content:space-between;gap:12px 16px;
    flex-wrap:wrap;width:100%;min-width:0;box-sizing:border-box;
  }
  .stg-matched-head-row .stg-matched-toggle{flex:1;min-width:200px}
  .stg-period-head-row .stg-period-toggle{
    display:inline-flex;align-items:center;gap:8px;flex:1 1 auto;min-width:0;
    text-align:left;border:none;background:transparent;cursor:pointer;
    padding:2px 4px;font:inherit;color:inherit;
  }
  .stg-period-left{
    display:flex;align-items:center;justify-content:flex-start;
    gap:8px;flex:1 1 280px;min-width:min(100%,280px);max-width:100%;
  }
  .stg-period-actions{
    display:flex;align-items:center;justify-content:flex-end;
    gap:8px;flex-wrap:wrap;flex:1 1 auto;min-width:0;
    margin-left:auto;
  }
  .stg-period-head-row.is-fully-matched .stg-period-actions{
    flex:0 1 auto;
  }
  .stg-period-oneline{
    display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px 8px;
    min-width:0;line-height:1.35;
  }
  
  /* Validators: stay in document flow, never above sticky chrome / center overlays */
  .stg-period-validators{
    position:relative;
    z-index:1;
    isolation:isolate;
  }
  .stg-period-validators .stg-validator{
    position:relative;
    z-index:1;
  }
  /* Sticky period toolbar above validators, below global popovers */
  .stg-period.stg-period-locked > .stg-period-head-row,
  .stg-period-head-row.is-sticky-match{
    z-index:3;
  }

  .stg-period.stg-period-locked > .stg-period-head-row,
  .stg-period-head-row.is-sticky-match{
    position:sticky;top:0;z-index:5; /* above thead(2) & validators(1); below popovers */
    background:var(--accent-tint);
    border:1px solid var(--accent);
    border-radius:var(--radius);
    padding:5px 10px;
    margin:0 0 6px;
    box-shadow:0 1px 0 rgba(31,36,33,.06);
  }
  .stg-period-match-controls{
    display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;
    flex-shrink:0;margin:0;
    border:2px solid var(--accent);border-radius:999px;
    background:var(--surface);padding:3px 6px 3px 12px;
    white-space:nowrap;
  }
  .stg-period-match-controls .batch-count{
    font-size:13px;font-weight:600;color:var(--ink);line-height:1;
  }
  .stg-period-match-controls .batch-count b{
    font-family:var(--mono);color:var(--accent-dark);font-weight:700;
  }
  .stg-period-match-controls .btn{
    height:26px;min-height:26px;padding:0 10px;font-size:12px;line-height:24px;
    white-space:nowrap;flex-shrink:0;
  }
  .stg-period-match-controls .btn.primary{
    background:var(--accent);color:#fff;border-color:var(--accent-dark);font-weight:600;
  }
  .stg-period-match-controls .btn.ghost{
    background:transparent;color:var(--ink-soft);border-color:transparent;
  }
  .stg-period-match-controls .btn.ghost:hover{background:var(--line-soft);color:var(--ink)}
  .stg-period-match-controls .btn:disabled{opacity:.45;cursor:not-allowed}







/* Batch button stays left in open-invoices header (no margin-left:auto) */
.stg-inv-section-head{
  justify-content:flex-start !important;
}
.stg-inv-section-head > [data-action="stg-cycle-contract-group"]{
  margin-left:0 !important;
  margin-right:0;
  order:0;
}


/* Matched table thead must not inherit period sticky top offset (blank gap) */
.stg-matched-body table.stg-table thead th,
.stg-matched-body .stg-vtable-scroll thead th{
  top: 0 !important;
  color: var(--ink-soft, #5B6460) !important;
  background: var(--paper, #F7F6F2) !important;
}


  /* Token (213_10.02.2025_6) for matched invoice block */
  .stg-inv-token-view{
    display:inline-block;font-family:var(--mono);font-weight:800;font-size:14px;
    color:var(--accent-dark);white-space:nowrap;letter-spacing:.02em;
    background:#E8F2EF;border:1px solid var(--accent);border-radius:6px;
    padding:3px 10px;line-height:1.35;
  }
  .stg-table-matched td.stg-inv-meta{min-width:11rem;max-width:22rem}


/* Підібрані: без колонки №/дата/дог. — назва + суми на всю ширину */
.stg-table-matched{width:100%;table-layout:auto}

.stg-table-matched th.stg-num,
.stg-table-matched td.stg-num{width:1%;white-space:nowrap;padding-left:12px;padding-right:12px}
.stg-table-matched th.stg-actions,
.stg-table-matched td.stg-actions{width:1%;white-space:nowrap}
.stg-table-matched .stg-check{width:1%}


/* Внутренний контейнер выстраивает кнопки в ряд */
.stg-actions.stg-actions-inline,
.stg-actions-bar {
  display:inline-flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  align-items:center;
  gap:4px;
  white-space:nowrap;
  vertical-align:middle;
}

/* Ячейка сохраняет свойства таблицы и полноразмерный фон */
.stg-table-matched td.stg-actions {
  display:table-cell !important;
  vertical-align:middle;
}

.stg-table-matched .stg-act-btn{
  height:26px;min-height:26px;padding:0 8px;font-size:12px;line-height:24px;
  flex-shrink:0;
}
.stg-table-matched{
  width:100%;
  table-layout:fixed;
  border-collapse:collapse;
}
.stg-table-matched col.stg-col-check{width:2.5%}
.stg-table-matched th.stg-check,
.stg-table-matched td.stg-check{width:2.5%;padding:6px 4px}
.stg-table-matched th.stg-name,
.stg-table-matched td.stg-name,
.stg-table-matched tbody tr.stg-row-matched > td:nth-child(2){
  width:42%;min-width:0;text-align:left;
}
.stg-table-matched th.stg-num,
.stg-table-matched td.stg-num{
  width:9%;text-align:right;white-space:nowrap;
  font-variant-numeric:tabular-nums;padding:6px 10px;
}
.stg-table-matched th.stg-actions,
.stg-table-matched td.stg-actions{width:14%;text-align:right}
.stg-table-matched thead th{
  font-size:12px;font-weight:600;padding:8px 10px;
}
.stg-table-matched tbody td{padding:8px 10px;vertical-align:middle}
.stg-row-matched > td{background:#F4FAF7}


/* ========== Підібрані позиції — layout & actions ========== */
.stg-table-matched{
  width:100% !important;
  table-layout:fixed !important;
  border-collapse:collapse !important;
}
.stg-table-matched col.stg-m-check{width:36px}
.stg-table-matched col.stg-m-name{width:auto}
.stg-table-matched col.stg-m-num{width:96px}
.stg-table-matched col.stg-m-act{width:250px}

.stg-table-matched thead th{
  font-size:12px !important;
  font-weight:600 !important;
  color:var(--ink-soft) !important;
  background:#EEF6F3 !important;
  border-bottom:1px solid #C5D9D2 !important;
  padding:9px 12px !important;
  text-align:left;
}
.stg-table-matched thead th.stg-num{text-align:right}
.stg-table-matched thead th.stg-actions,
.stg-table-matched thead th:last-child{
  width:250px !important;
  text-align:right !important;
  background:#EEF6F3 !important;
}

/* uniform row tint — including actions cell */
.stg-table-matched tbody tr.stg-row-matched > td,
.stg-table-matched tbody tr.stg-row-done > td,
.stg-table-matched tbody tr.matched-item > td{
  background:#F4FAF7 !important;
  border-bottom:1px solid #D7E6E0 !important;
  padding:10px 12px !important;
  vertical-align:middle !important;
}
.stg-table-matched tbody tr.stg-row-matched:hover > td,
.stg-table-matched tbody tr.stg-row-done:hover > td{
  background:#EAF5F0 !important;
}

.stg-table-matched td.stg-check,
.stg-table-matched th.stg-check{width:36px !important}

.stg-table-matched td.stg-name,
.stg-table-matched th.stg-name{
  width:auto !important;
  text-align:left !important;
}

.stg-table-matched td.stg-num,
.stg-table-matched th.stg-num{
  width:96px !important;
  text-align:right !important;
  white-space:nowrap !important;
  font-family:var(--mono, ui-monospace, monospace);
  font-variant-numeric:tabular-nums;
  font-size:13px;
}

/* actions: table-cell keeps bg; inner bar is flex row */
.stg-table-matched td.stg-actions,
.stg-table-matched td.stg-actions-matched{
  width:250px !important;
  background:#F4FAF7 !important;
  text-align:right !important;
  white-space:nowrap !important;
}
.stg-actions-bar{
  display:inline-flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:6px !important;
  vertical-align:middle;
}

/* chip buttons */
.stg-chip{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  height:28px !important;
  min-height:28px !important;
  padding:0 11px !important;
  margin:0 !important;
  border-radius:8px !important;
  font-size:12px !important;
  font-weight:600 !important;
  line-height:1 !important;
  cursor:pointer;
  border:1px solid transparent;
  box-sizing:border-box;
  white-space:nowrap;
  font-family:inherit;
}
.stg-chip-primary{
  background:#1F6B57 !important;
  color:#fff !important;
  border-color:#175445 !important;
}
.stg-chip-primary:hover{background:#175445 !important}
.stg-chip-ghost{
  background:#fff !important;
  color:#1F6B57 !important;
  border-color:#A8C9BE !important;
}
.stg-chip-ghost:hover{background:#E8F2EF !important}
.stg-chip-danger{
  background:#fff !important;
  color:#B42318 !important;
  border-color:#F0B0A8 !important;
}
.stg-chip-danger:hover{background:#FEF3F2 !important}

.stg-inv-group-head td{
  background:#E8F2EF !important;
  font-size:14px !important;
  font-weight:800 !important;
  color:var(--accent-dark, #1F6B57) !important;
  padding:10px 14px !important;
  border-top:2px solid var(--accent, #1F6B57) !important;
  border-bottom:1px solid #C5D9D2 !important;
}

/* Убираем белый пробел в конце заголовка таблицы "Підібрані позиції" */
.stg-table-matched thead,
.stg-table-matched thead tr {
    background-color: #EEF6F3 !important;
    border-bottom: 1px solid #C5D9D2 !important;
}

/* 1. Делаем контейнер относительным, чтобы позиционировать кнопку внутри него */
.stg-matched-head-row {
    position: relative !important;
}

/* 2. Заставляем зеленый заголовок игнорировать соседей и занимать 100% ширины */
.stg-matched-head-row .stg-matched-toggle {
    flex: 1 1 100% !important;
    width: 100% !important;
    padding-right: 210px !important; /* Оставляем пустую зону справа, чтобы текст не наехал на кнопку */
}

/* 3. Отвязываем кнопку "Скасувати", вешаем ее поверх зеленого фона у правого края */
.stg-matched-head-row .btn[data-action="stg-undo-period-matched"] {
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    z-index: 2 !important;
}
  .stg-inv-group-inner{
    display:inline-flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px 10px;
    width:100%;
  }
  .stg-inv-group-apply{
    flex:0 0 auto;
    margin:0;
    margin-right:4px;
    vertical-align:middle;
  }