/* R1：左侧分区布局。
   叠在既有 ui_kit.css + inventory_planning.css 之上，只加外壳与密度，不重定义组件。
   原则：减块、减层、把四种活分到四个区。 */

/* ---------- 外壳：顶栏 + 左栏 + 主区 ---------- */
.app-shell main{
  display:grid;
  grid-template-columns:232px minmax(0,1fr);
  gap:0;
  max-width:none;
  padding:0;
  min-height:calc(100vh - 64px);
}

/* 左侧导航 */
.rail{
  background:#fff;
  border-right:1px solid var(--line);
  padding:var(--s3) 12px var(--s2);
  display:flex;
  flex-direction:column;
  gap:2px;
  position:sticky;
  top:0;
  align-self:start;
  max-height:calc(100vh - 64px);
  overflow-y:auto;
}
.rail-title{
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);font-weight:700;padding:0 12px var(--s2);
}
.rail-item{
  display:flex;align-items:center;gap:12px;
  padding:0 12px;min-height:46px;border-radius:8px;
  color:var(--ink-2);font-weight:600;font-size:16px;
  border-left:3px solid transparent;
}
.rail-item:hover{background:#f3f7f6;text-decoration:none}
.rail-item[aria-current="page"]{
  background:var(--brand-soft);color:var(--brand);border-left-color:var(--brand);
}
.rail-ic{width:20px;text-align:center;font-size:17px;color:inherit;opacity:.72}
.rail-badge{
  margin-left:auto;min-width:24px;height:24px;padding:0 7px;border-radius:999px;
  background:#eef2f4;color:var(--ink-2);font-size:13px;font-weight:700;
  display:grid;place-items:center;font-variant-numeric:tabular-nums;
}
.rail-badge.danger{background:var(--danger-soft);color:var(--danger)}
.rail-dot{width:8px;height:8px;border-radius:50%;background:var(--warn);margin-left:auto}
.rail-secondary{margin-top:var(--s2)}
.rail-foot{margin-top:auto;padding:var(--s2) 12px 0;display:flex;flex-wrap:wrap;gap:6px}

/* 主区 */
.pane{min-width:0;padding:var(--s3) 32px 56px;max-width:1320px}

/* 区头：只有一层 */
.pane-head{
  display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s2);
  flex-wrap:wrap;margin-bottom:12px;
}
.pane-head h1{font-size:26px;line-height:1.25;letter-spacing:-.4px}
.pane-head .meta{margin-top:4px}
.crumb{font-size:14px;margin-bottom:2px}
.crumb a{font-weight:600}

/* 情景行：一行，不占两块 */
.run-line{font-size:14px;color:var(--muted);margin:0 0 var(--s2)}
.run-line a{font-weight:600}

/* ---------- 摘要：紧凑横向筛选 ---------- */
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:var(--s2)}
.chip{
  display:inline-flex;align-items:center;gap:8px;
  min-height:40px;padding:0 14px;border-radius:8px;
  border:1px solid var(--line-strong);background:#fff;
  font-weight:600;font-size:15px;
}
.chip:hover{border-color:var(--brand)}
.chip[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:#fff}
.chip .n{font-size:17px;font-weight:700;font-variant-numeric:tabular-nums}
.chip .d{width:9px;height:9px;border-radius:50%}
.chip.danger .d{background:var(--danger);border-radius:2px;transform:rotate(45deg)}
.chip.warn .d{background:var(--warn);clip-path:polygon(50% 0,100% 100%,0 100%)}
.chip.info .d{background:var(--info)}
.chip[aria-pressed="true"] .d{background:#fff}

/* ---------- 表 + 图 ---------- */
.layout{grid-template-columns:minmax(0,58fr) minmax(0,42fr);gap:var(--s3)}
.table-panel,.detail-panel{box-shadow:none}

.toolbar{padding:12px 16px}
.toolbar .input{min-height:40px}
.tablewrap{max-height:calc(100vh - 330px)}

table{font-size:16px}
thead th{font-size:14px;padding:10px 14px}
tbody tr{height:auto}
td{padding:10px 14px}
/* 行内副标题去掉，状态改为左侧色带 */
td .sub{display:none}
tbody tr[aria-selected="true"]{box-shadow:inset 3px 0 0 var(--brand)}
tbody tr.tier-danger{box-shadow:inset 3px 0 0 var(--danger)}
tbody tr.tier-warn{box-shadow:inset 3px 0 0 var(--warn)}
tbody tr[aria-selected="true"].tier-danger,
tbody tr[aria-selected="true"].tier-warn{box-shadow:inset 4px 0 0 var(--brand)}
td .left{font-size:16px}
td .left.over,td .left.soon{font-weight:700}
td .left-sub{display:block;font-size:14px;color:var(--muted);margin-top:1px}
td .left-sub.over{color:var(--danger);font-weight:600}
td .left-sub.soon{color:var(--warn);font-weight:600}

/* 右栏 */
.detail-panel{position:sticky;top:16px}
.sel-head{padding:16px 16px 0}
.sel-head h2{font-size:20px}
.chart-box{padding:8px 16px 0}
#chart svg,.chart-box svg{max-height:260px}
.detail-foot{padding:0 16px 16px}
.detail-foot .btn{width:100%}

/* ---------- SKU 详情 ---------- */
.sku-grid{display:grid;grid-template-columns:minmax(0,58fr) minmax(0,42fr);gap:var(--s3)}
.sku-grid .panel-wide{grid-column:1/-1}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:var(--s2)}
.panel+.panel{margin-top:var(--s2)}
.sku-grid .panel+.panel{margin-top:0}
.panel h2{font-size:18px;margin-bottom:4px}
.panel>h2+.meta{margin-bottom:var(--s2)}
.panel-flag{border-color:var(--warn-line);background:#fffdf7}

/* ---------- 材料 / 参数 / 历史 ---------- */
.two-up{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s3);align-items:start}
.two-up>.panel+.panel{margin-top:0}

.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--s2);margin-bottom:var(--s2)}
.fields label,.panel form>label{display:grid;gap:6px;font-weight:600;font-size:15px}
.fields input,.fields select,.panel form>input,.panel form>label input{
  min-height:44px;padding:0 12px;border:1px solid var(--line-strong);
  border-radius:8px;background:#fff;font-size:16px;width:100%;
}
.fields input:focus,.fields select:focus{border-color:var(--brand)}
fieldset{border:0;padding:0;margin:0 0 var(--s2)}
fieldset legend{font-weight:600;font-size:15px;margin-bottom:6px;padding:0}
.inline-check{display:flex;align-items:center;gap:8px;min-height:40px;font-size:15px}
.inline-check input{width:20px;height:20px;accent-color:var(--brand)}
.panel form{display:grid;gap:var(--s2)}

.check{display:flex;align-items:center;gap:10px;font-size:16px;min-height:44px;cursor:pointer}
.check input{width:20px;height:20px;accent-color:var(--brand)}

.snap-list,.run-list,.audit,.basis-list{display:grid;gap:0;list-style:none}
.snap-list li,.run-list li,.audit li,.basis-list li{
  padding:12px 0;border-bottom:1px solid var(--line);font-size:15px;
}
.snap-list li:last-child,.run-list li:last-child,.audit li:last-child,.basis-list li:last-child{border-bottom:0}
.snap-list li a,.run-list li a{font-weight:600}
.run-list li{display:flex;justify-content:space-between;gap:var(--s2);align-items:center;flex-wrap:wrap}
.run-list li.current{background:var(--brand-soft);margin:0 -8px;padding:12px 8px;border-radius:8px}
.audit li p{font-size:14px;color:var(--ink-2);margin-top:2px}
.empty-line{color:var(--muted)}

.kv.dense{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:8px 24px;margin:0}
.kv.dense dt{font-size:14px;color:var(--muted)}
.kv.dense dd{margin:0 0 var(--s1);font-weight:600;font-size:16px}

.notes{display:grid;gap:8px;font-size:15px;color:var(--ink-2);padding-left:18px;list-style:disc}

/* ---------- 窄屏 ---------- */
@media (max-width:1000px){
  .app-shell main{grid-template-columns:1fr;min-height:0}
  .rail{
    position:sticky;top:0;z-index:20;
    flex-direction:row;gap:2px;padding:6px 12px;
    border-right:0;border-bottom:1px solid var(--line);
    max-height:none;overflow-x:auto;overflow-y:hidden;
    scrollbar-width:none;
  }
  .rail::-webkit-scrollbar{display:none}
  .rail-title,.rail-foot{display:none}
  .rail-item{
    border-left:0;border-bottom:3px solid transparent;border-radius:6px;
    min-height:44px;padding:0 8px;white-space:nowrap;font-size:14px;gap:6px;
  }
  .rail-ic{display:none}
  .rail-badge{min-width:20px;height:20px;font-size:12px;padding:0 5px}
  .rail-item[aria-current="page"]{border-left:0;border-bottom-color:var(--brand);background:transparent}
  .rail-secondary{margin-top:0}
  .pane{padding:var(--s2) 16px 40px}
  .layout,.sku-grid,.two-up{grid-template-columns:1fr}
  .detail-panel{position:static}
  .detail-panel.detached-hidden{display:none}
  .pane-head h1{font-size:22px}
}

@media (max-width:640px){
  .chips{flex-wrap:wrap;overflow:visible;gap:6px}
  .chip{min-height:38px;font-size:14px;flex:1 1 calc(50% - 3px);justify-content:flex-start}
  .pane{padding:var(--s2) 12px 40px}

  /* 表格变卡片：3 行 */
  table,thead,tbody,tr,td{display:block}
  thead{position:absolute;left:-9999px}
  .tablewrap{max-height:none;overflow:visible}
  tbody tr{
    display:grid;grid-template-columns:1fr auto;gap:2px 12px;
    padding:12px 14px;border-bottom:1px solid var(--line);position:relative;
  }
  tbody tr[aria-selected="true"]{box-shadow:none;background:var(--brand-soft)}
  tbody tr.tier-danger,tbody tr.tier-warn{box-shadow:none}
  tbody tr.tier-danger::before,tbody tr.tier-warn::before{
    content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  }
  tbody tr.tier-danger::before{background:var(--danger)}
  tbody tr.tier-warn::before{background:var(--warn)}
  tbody tr td{padding:0;border:0}
  tbody tr td:nth-child(1){grid-column:1;font-weight:700}
  tbody tr td:nth-child(2){grid-column:1;font-size:14px;color:var(--ink-2)}
  tbody tr td:nth-child(3){grid-column:1;font-size:14px}
  tbody tr td:nth-child(4){grid-column:2;grid-row:1;text-align:right;font-weight:700}
  tbody tr td:nth-child(5){grid-column:2;grid-row:2 / span 2;text-align:right}
  tbody tr td:nth-child(6){grid-column:1 / -1;font-size:14px;margin-top:4px}
  /* 真实表格没有 data-label，按列号写标签 */
  tbody tr td:nth-child(2)::before{content:"首次断货 ";color:var(--muted);font-weight:400}
  tbody tr td:nth-child(3)::before{content:"建议动作 ";color:var(--muted);font-weight:400}
  tbody tr td:nth-child(5)::before{content:"最晚行动日 ";color:var(--muted);font-weight:400}
  tbody tr td:nth-child(6)::before{content:"跟进 ";color:var(--muted);font-weight:400}
  /* 选中卡片就地展开曲线 */
  tbody tr.inline-detail{display:block;background:#fbfdfc;border-left:3px solid var(--brand)}
  .fields{grid-template-columns:1fr}
  .panel{padding:14px}
  .pane-head{align-items:flex-start}
}

/* Integration: actual form controls and the reusable inline chart container. */
.panel select,.panel textarea{max-width:100%;min-width:0;font:inherit}
.panel code,.panel .meta{overflow-wrap:anywhere}
.panel textarea{width:100%}
.panel form>label select{min-height:44px;border:1px solid var(--line-strong);border-radius:8px;background:#fff;padding:8px 12px}
.sku-controls select{min-width:0}
@media(max-width:640px){
  tr.inline-detail>td{display:block;width:100%;grid-column:1/-1}
  tr.inline-detail>td::before{content:none!important}
  .inline-detail-panel{width:100%}
  .chart-box svg{max-height:200px}
  .panel form>.btn{width:100%}
}

.narrow-sample{display:none}
@media(max-width:1000px){.narrow-sample{display:inline-flex}}

/* Claude actual-page review A: keep scan-critical values on one line. */
@media(min-width:641px){
  #tbl{table-layout:auto}
  #tbl td:nth-child(1),#tbl th:nth-child(1){min-width:132px;white-space:nowrap}
  #tbl td:nth-child(2),#tbl th:nth-child(2),
  #tbl td:nth-child(4),#tbl th:nth-child(4),
  #tbl td:nth-child(5),#tbl th:nth-child(5){white-space:nowrap}
  #tbl td:nth-child(3){min-width:120px}
}
/* B/C: native horizontal scrolling with a visible instruction when overflowing. */
.rail-wrap{position:sticky;top:0;align-self:start;min-width:0}
.rail-wrap .rail{position:relative}
.scroll-hint{font-size:14px;line-height:1.4;color:var(--muted);margin:0;padding:4px 12px 8px}
@media(max-width:1000px){
  .rail-wrap{z-index:20;background:#fff;max-width:100%}
  .rail{scrollbar-width:thin}
  .rail::-webkit-scrollbar{display:block;height:4px}
}
@media(max-width:640px){
  .chips-region{margin-bottom:var(--s2);min-width:0}
  .chips{flex-wrap:nowrap;overflow-x:auto;gap:6px;margin-bottom:0;padding:2px;scrollbar-width:thin}
  .chips .chip{flex:none;flex-wrap:nowrap;min-height:44px;font-size:15px;white-space:nowrap;justify-content:flex-start}
  .chips .chip .n{font-size:16px;white-space:nowrap}
  .chips .chip .chip-label{flex:0 0 auto}
  .chips .chip .d{flex-shrink:0}
}