/* 素材欄と報酬ダイアログ。 */
.material-list { max-width: 56rem; }
.material-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 54px; padding: .35rem .7rem; border-bottom: 1px solid #59677b; }
.material-name { min-width: 0; flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.material-row input { width: 7rem; }
.material-pane {
    height: min(80vh, 920px);
    overflow-y: auto;
    padding: .55rem;
    border: 1px solid #59677b;
    background: #1d2632;
}
.material-pane h2 { margin: .15rem 0 .35rem; }
.material-column-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 7rem;
    gap: .15rem .4rem;
    padding: .3rem .4rem;
    border: 1px solid #59677b;
    border-bottom: 0;
    background: #263344;
    font-size: .75rem;
    font-weight: 600;
}
.material-column-header span:last-child { grid-column: 1 / -1; color: #b8c8da; }
.app-shell.light .material-column-header { background: #d7e1ef; }
.app-shell.light .material-column-header span:last-child { color: #44566c; }
.app-shell.light .material-pane { background: #fff; }
.material-pane > .toolbar { position: sticky; top: 0; z-index: 2; background: inherit; margin: 0 0 .5rem; }
.material-pane .material-list { height: min(48vh, 520px); }
.material-pane .material-row { gap: .4rem; padding-inline: .25rem; }
.material-pane .material-row label { white-space: nowrap; }
.material-pane .material-row input { width: 5.5rem; }
.inventory-list .material-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    height: 70px;
    gap: 0 .35rem;
}
.inventory-list .material-metrics {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: .2rem .75rem;
    font-size: .78rem;
    color: #b8c8da;
}
.app-shell.light .inventory-list .material-metrics { color: #44566c; }
.inventory-list .material-short .material-metrics { color: #ffbbad; }
.app-shell.light .inventory-list .material-short .material-metrics { color: #9c1e12; }
.app-shell .material-pane {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 0;
    margin: 12px 16px 12px 0;
    padding: 0;
    color: var(--text);
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--bevel-frame);
    corner-shape: bevel;
}
.app-shell .reward-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    order: -1;
    flex: 0 0 auto;
    padding: 6px 10px;
    background: var(--tool);
    border-bottom: 1px solid var(--tool-line);
}
.app-shell .reward-bar .reward-check { margin-left: 6px; color: var(--accent); font-weight: 700; }
.app-shell .reward-bar .material-plan-active { color: var(--accent); font-size: 11px; font-weight: 700; white-space: nowrap; }
.app-shell .browser-modal-backdrop { position: fixed; inset: 0; z-index: 100; background: #0009; }
.app-shell .browser-modal { position: fixed; z-index: 101; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(460px, 94vw); max-height: 80dvh; overflow: auto; padding: 16px; border: 1px solid var(--card-line); background: var(--card); box-shadow: 0 18px 48px #0009; }
.app-shell .reward-bar .toolbar { margin: 0; }
.app-shell .reward-bar label { color: var(--mute2); font-size: 11px; }
.app-shell .material-column-header { flex: 0 0 auto; }
.app-shell .material-pane h2 { margin: 0; padding: 12px 12px 0; color: var(--text2); }
.app-shell .material-pane > .toolbar {
    margin: 0;
    padding: 8px 12px;
    background: var(--panel);
}
.app-shell .material-column-header {
    grid-template-columns: minmax(9rem, 1fr) 4rem 3.5rem 4rem 4rem 8rem;
    gap: 0;
    color: var(--text2);
    background: var(--head);
    border-color: var(--head-line);
    padding: 0;
    font-size: 11px;
    min-height: 34px;
    align-items: center;
}
.app-shell .material-column-header span { min-width: 0; overflow: hidden; padding: 0 6px; text-overflow: ellipsis; white-space: nowrap; }
.app-shell .material-column-header span:not(:first-child) { text-align: right; }
.app-shell .material-column-header span:last-child { grid-column: auto; color: var(--text2); }
.app-shell .material-pane .material-list {
    flex: 1 1 auto;
    min-height: 120px;
    max-width: none;
    height: auto;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
}
.app-shell .material-pane-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 7px 10px; border-bottom: 1px solid var(--line); }
.app-shell .material-pane-actions label { display: flex; align-items: center; gap: 6px; color: var(--mute2); }
.app-shell .material-pane-actions input { width: min(170px, 33vw); }
.app-shell .material-subdrawer { display: block; }
.app-shell .material-subdrawer .material-list { height: 55vh; flex: none; border: 1px solid var(--line); }
.app-shell .material-row {
    color: var(--text);
    background: var(--panel);
    border-bottom: 1px solid var(--matrowline);
}
.app-shell .inventory-list .material-row {
    display: grid;
    grid-template-columns: minmax(9rem, 1fr) 4rem 3.5rem 4rem 4rem 8rem;
    grid-template-rows: 34px;
    height: 34px;
    gap: 0;
    padding: 0;
    font-size: 11px;
}
.app-shell .inventory-list .material-row > * {
    min-width: 0;
    border-right: 1px solid var(--vline);
}
.app-shell .inventory-list .material-row input {
    width: calc(100% - 5px);
    min-height: 24px;
    height: 24px;
    margin: 4px 2px;
    padding: 1px 3px;
    text-align: right;
    font: 11px var(--font-mono);
}
.app-shell .inventory-list .material-currency > :nth-child(2) { grid-column: span 2; }
.app-shell .inventory-list .material-required-wide { grid-column: span 2; }
.app-shell .material-number {
    display: block;
    overflow: hidden;
    padding: 8px 6px;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
    font: 11px var(--font-mono);
}
.app-shell .material-number.material-editable { cursor: text; }
.app-shell .material-number:has(.mat-own-input) { padding: 0; overflow: visible; }
.app-shell .material-pane .material-list:focus { outline: none; }
.app-shell .material-short .material-balance { color: var(--danger); }
.app-shell .inventory-list .material-name {
    min-height: 33px;
    height: 33px;
    padding-top: 0;
    padding-bottom: 0;
    text-align: left;
    font-size: 11px;
}
.app-shell .material-row:nth-child(even) { background: var(--row-alt); }
.app-shell .material-row:hover { background: var(--row-hover); }
.app-shell .material-row.material-short { background: var(--danger-row); }
.app-shell .material-name {
    position: relative;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--text);
    padding-left: 17px;
}
.app-shell .material-name::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 3px;
    width: 4px;
    background: var(--material-rarity-color, var(--r2));
}
.app-shell .material-name:hover { background: transparent; color: var(--text); }
.app-shell .material-name.selected { background: var(--accent-soft); color: var(--accent); }
.app-shell .inventory-list .material-metrics { color: var(--mute2); font: 11px var(--font-mono); }
.app-shell .inventory-list .material-short .material-metrics { color: var(--danger); }
/* ---- スマホの素材行: 1段目 素材名・所持 / 2段目 加工%・総必要数・加工反映・不足 (#618)。 ---- */
.app-shell .inventory-list .material-row.phone-material-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    height: auto;
    min-height: 64px;
    align-items: center;
    padding-bottom: 6px;
    font-size: 12px;
}
.app-shell .inventory-list .phone-material-row > * { border-right: 0; }
/* PC の表で通貨行の所持を2列分に広げる規則を、2段表示の行では打ち消す。 */
.app-shell .inventory-list .phone-material-row.material-currency > :nth-child(2) { grid-column: auto; }
.app-shell .inventory-list .phone-material-row .material-name { height: 34px; min-height: 34px; font-size: 13px; font-weight: 600; }
.app-shell .inventory-list .material-row.phone-material-row { position: relative; }
.app-shell .phone-material-row::before { content: ""; position: absolute; inset: 0 auto 0 3px; width: 4px; background: var(--material-rarity-color, var(--r2)); }
.app-shell .inventory-list .phone-material-row .material-name::before { display: none; }
.app-shell .phone-material-row .material-number { padding: 4px 6px; font-size: 12px; }
.app-shell .pm-owned { display: inline-flex; align-items: center; gap: 4px; padding-right: 8px; }
.app-shell .pm-owned .material-number { min-width: 5.5rem; border: 1px solid var(--line); background: var(--input); }
.app-shell .pm-line2 { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; padding: 0 8px 0 17px; }
.app-shell .pm-owned em, .app-shell .pm-item em { color: var(--mute2); font-style: normal; font-size: 11px; }
.app-shell .pm-item { display: inline-flex; align-items: center; gap: 2px; }
.app-shell .pm-item .material-number { padding: 2px 3px; }
.app-shell .pm-item .material-editable { border-bottom: 1px dashed var(--line2); }
.app-shell .material-short .pm-shortage .material-number { color: var(--danger); font-weight: 600; }
.app-shell .pm-add { min-height: 28px; margin-left: auto; padding: 0 10px; font-size: 11px; }
.app-shell .material-pane-actions :is(button, label) { align-items: center; }
.app-shell .material-inventory-btn { white-space: nowrap; }
/* 不足している素材だけを出す切替 (#619)。 */
.app-shell .material-shortage-toggle { white-space: nowrap; }
.app-shell .material-shortage-toggle.on { color: var(--danger); background: var(--danger-soft); border-color: var(--danger); }
/* 単一 Tier の絞り込み (#705)。下辺の色は素材名の色バーと同じ --material-rarity-color で、ホバー中・押下中も残す。 */
.app-shell .material-tier-filter { display: flex; flex: 0 0 auto; gap: 4px; }
.app-shell .material-tier-toggle {
    min-width: 34px;
    padding: 0 6px;
    font-family: var(--font-mono);
    border-bottom: 2px solid var(--material-rarity-color, var(--btn-line));
}
.app-shell .material-tier-toggle.on { color: var(--accent); background: var(--accent-soft); border-color: var(--accent); }
.app-shell .material-tier-toggle:is(:hover, .on) { border-bottom-color: var(--material-rarity-color, var(--btn-line)); }
/* 条件に一致する行が無いときの案内と解除 (#705)。 */
.app-shell .material-empty {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 10px;
    padding: 16px 10px;
    color: var(--mute2);
}