/* ===== ハンディターミナル風 モバイルファーストUI ===== */
:root {
    --ht-navy: #0b2e4f;
    --ht-accent: #0d6efd;
    --ht-bg: #eef2f6;
}

html { font-size: 18px; }
body {
    background: var(--ht-bg);
    font-family: "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", Meiryo, system-ui, sans-serif;
    -webkit-text-size-adjust: 100%;
    padding-bottom: env(safe-area-inset-bottom);
}
body.scan-open { overflow: hidden; }

/* ヘッダー */
.ht-header {
    position: sticky; top: 0; z-index: 100;
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    background: var(--ht-navy); color: #fff;
    padding: .55rem .75rem; padding-top: calc(.55rem + env(safe-area-inset-top));
    box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.ht-header-title { display: flex; align-items: center; gap: .5rem; font-size: 1.25rem; font-weight: 700; min-width: 0; }
.ht-header-title span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ht-back { color: #fff; text-decoration: none; font-size: 1.3rem; padding: 0 .4rem; }
.ht-header-user { display: flex; align-items: center; gap: .4rem; font-size: .85rem; white-space: nowrap; }
.ht-worker { max-width: 9em; overflow: hidden; text-overflow: ellipsis; }
.ht-logout { font-size: .8rem; padding: .3rem .5rem; }

.ht-main { padding: 1rem .75rem 2rem; max-width: 640px; }

/* 大きなタッチボタン */
.btn-handy {
    min-height: 64px; font-size: 1.35rem; font-weight: 700;
    border-radius: .75rem; display: flex; align-items: center; justify-content: center; gap: .5rem;
}
.btn-handy-xl { min-height: 96px; font-size: 1.3rem; }

/* 入力欄 */
.ht-label { font-weight: 700; font-size: 1rem; margin-bottom: .25rem; }
.ht-input { font-size: 1.5rem; min-height: 60px; font-family: ui-monospace, Menlo, Consolas, monospace; }
.ht-input-btn { font-size: 1.25rem; font-weight: 700; min-width: 5em; }
.ht-mono { font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .03em; }

/* ログイン */
.ht-login { max-width: 480px; margin: 0 auto; }
.ht-tabs .nav-link { font-size: 1.1rem; font-weight: 700; min-height: 56px; border-radius: .6rem; }
.ht-tabs .nav-link:not(.active) { background: #fff; color: var(--ht-navy); }
.ht-scanned { font-size: 1.2rem; background: #fff; border-radius: .5rem; padding: .75rem 1rem; }
.ht-scanned span { font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 700; }

/* メニュー */
.ht-menu { display: grid; gap: .75rem; }
.ht-menu-item { justify-content: flex-start; text-align: left; min-height: 76px; padding: .5rem .75rem .5rem 1rem; }
.ht-menu-name { flex: 1; line-height: 1.25; }
.ht-menu-no {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.1rem; height: 2.1rem; border-radius: 50%; background: rgba(255,255,255,.25); font-size: 1.1rem;
}
.ht-menu-icon { font-size: 1.6rem; }
.ht-menu-badge { flex: none; font-size: .8rem; }
.ht-menu-item:disabled { opacity: .6; }

/* メッセージ */
.ht-alert { border-radius: .6rem; padding: .9rem 1rem; font-size: 1.15rem; font-weight: 700; margin-bottom: 1rem; }
.ht-alert:empty { display: none; }
.ht-alert ul { margin: 0; padding-left: 1.2rem; }
.ht-alert-error { background: #fde2e1; color: #a1100b; border: 2px solid #e5534b; }
.ht-alert-warn  { background: #fff4d6; color: #7a5200; border: 2px solid #f0b429; }
.validation-summary-valid { display: none; }

/* 照会結果 */
.ht-result { background: #fff; border-radius: .75rem; padding: 1rem; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.ht-result-kind { display: inline-block; background: var(--ht-accent); color: #fff; font-size: .8rem; font-weight: 700; padding: .1rem .6rem; border-radius: 1rem; }
.ht-kind-loc { background: #198754; }
.ht-result-name { font-size: 1.5rem; font-weight: 800; margin: .4rem 0 .6rem; word-break: break-all; }
.ht-dl { display: grid; grid-template-columns: auto 1fr; gap: .2rem .75rem; margin-bottom: .75rem; }
.ht-dl dt { color: #6c757d; font-weight: 400; }
.ht-dl dd { margin: 0; font-weight: 700; }
.ht-total { display: flex; align-items: baseline; gap: .5rem; background: #e7f1ff; border-radius: .5rem; padding: .5rem 1rem; margin-bottom: .75rem; }
.ht-total strong { font-size: 2.4rem; color: var(--ht-navy); line-height: 1.1; }
.ht-table { font-size: 1.1rem; margin-bottom: 0; }
.ht-table td { vertical-align: middle; }
.ht-qty { font-size: 1.6rem; font-weight: 800; white-space: nowrap; }
.ht-zero .ht-qty { color: #dc3545; }
.ht-loc-link { font-weight: 700; font-size: 1.15rem; text-decoration: none; }

/* カメラ読取オーバーレイ */
.scan-overlay {
    position: fixed; inset: 0; z-index: 2000; background: #000; color: #fff;
    display: flex; flex-direction: column; gap: .75rem;
    padding: calc(.75rem + env(safe-area-inset-top)) .75rem calc(.75rem + env(safe-area-inset-bottom));
}
.scan-overlay[hidden] { display: none; }
.scan-overlay-header { font-size: 1.1rem; font-weight: 700; text-align: center; }
.scan-reader { width: 100%; max-width: 640px; margin: auto; overflow: hidden; border-radius: .5rem; background: #111; }
.scan-reader video { display: block; width: 100%; height: auto; max-height: 65vh; object-fit: cover; }
.scan-status { margin-top: auto; min-height: 1.5em; text-align: center; font-size: 1rem; }
.scan-status.is-error { color: #ff8a80; font-weight: 700; }

/* 読取中のガイド線（ハンディのレーザー風）。映像の中央に、映像の幅いっぱいの横線を表示。
   scanner.js はこの線（#scan-guide の実際の位置）に重なったコードだけを読む（HandyTerminal:Scanner:RequireGuideLine） */
.scan-reader { position: relative; }
.scan-guide {
    display: none; position: absolute; left: 0; right: 0; top: calc(50% - 1.5px); height: 3px;
    background: #ff1744; box-shadow: 0 0 8px 2px rgba(255, 23, 68, .8);
    animation: ht-laser 1.2s ease-in-out infinite alternate; pointer-events: none;
}
.scan-overlay.is-scanning .scan-guide { display: block; }
.scan-status.is-hint { color: #ffd54f; font-weight: 700; }
@keyframes ht-laser { from { opacity: .45; } to { opacity: 1; } }

/* ===== 入荷検品 ===== */
.ht-alert-success { background: #dff5e3; color: #0f5132; border: 2px solid #3fb950; }
#rcv-message { white-space: pre-line; }
.ht-flash { animation: ht-flash .35s ease-out; }
@keyframes ht-flash { from { transform: scale(1.03); filter: brightness(1.15); } to { transform: none; filter: none; } }
.ht-section-title { font-size: 1.05rem; font-weight: 700; margin: 1rem 0 .5rem; color: #495057; }

.ht-slip-list { display: grid; gap: .6rem; }
.ht-slip-card { display: block; background: #fff; border-radius: .75rem; padding: .8rem 1rem; color: inherit; text-decoration: none;
    box-shadow: 0 1px 4px rgba(0,0,0,.08); border-left: 6px solid var(--ht-accent); }
.ht-slip-card:active { background: #e7f1ff; }
.ht-slip-no { font-size: 1.35rem; font-weight: 800; color: var(--ht-navy); }
.ht-slip-supplier { font-weight: 700; font-size: 1.05rem; }

/* 状態バッジ（伝票・明細共通） */
.ht-badge { display: inline-block; font-size: .85rem; font-weight: 800; padding: .15rem .6rem; border-radius: 1rem; white-space: nowrap; }
.ht-badge-NotStarted { background: #e9ecef; color: #495057; }
.ht-badge-InProgress, .ht-badge-Partial { background: #fff3cd; color: #7a5200; }
.ht-badge-Complete, .ht-badge-Completed { background: #d1e7dd; color: #0f5132; }
.ht-badge-Over { background: #f8d7da; color: #842029; }

.ht-rcv-head { background: #fff; border-radius: .75rem; padding: .8rem 1rem; box-shadow: 0 1px 4px rgba(0,0,0,.08); margin-bottom: .75rem; }
.ht-progress .progress { height: 14px; border-radius: 7px; }
.ht-progress-text { display: flex; justify-content: space-between; font-size: .95rem; margin-top: .25rem; }
.ht-progress-text strong { font-size: 1.2rem; }

.ht-rcv-scan { background: #fff; border-radius: .75rem; padding: .8rem; box-shadow: 0 1px 4px rgba(0,0,0,.08); margin-bottom: .75rem; }
.ht-rcv-scan-row { display: flex; gap: .5rem; align-items: flex-end; }
.ht-rcv-scan-row > .ht-input { flex: 1; min-width: 0; }
.ht-qty-box { width: 5.5rem; flex: none; }
.ht-qty-input { text-align: center; padding-left: .25rem; padding-right: .25rem; }
.ht-rcv-scan-buttons { display: flex; gap: .5rem; margin-top: .5rem; }
.ht-btn-register { min-width: 6rem; }
.ht-rcv-message:empty { display: none; }

.ht-rcv-lines { display: grid; gap: .5rem; }
.ht-rcv-line { background: #fff; border-radius: .6rem; padding: .6rem .8rem; box-shadow: 0 1px 3px rgba(0,0,0,.07); border-left: 6px solid #adb5bd; }
.ht-rcv-line.is-Partial { border-left-color: #f0b429; }
.ht-rcv-line.is-Complete { border-left-color: #3fb950; background: #f3fbf4; }
.ht-rcv-line.is-Over { border-left-color: #e5534b; background: #fff5f5; }
.ht-rcv-line.is-last { outline: 3px solid var(--ht-accent); }
.ht-rcv-line-top { display: flex; align-items: center; gap: .5rem; }

.ht-rcv-line-name { flex: 1; font-weight: 700; font-size: 1.1rem; line-height: 1.25; }
.ht-rcv-line-sub { font-size: .8rem; color: #6c757d; margin: .15rem 0 .2rem 2.2rem; }
.ht-rcv-line-qty strong { font-size: 1.8rem; font-weight: 800; }
.ht-rcv-line-qty span { font-size: 1.1rem; color: #495057; }
.ht-rcv-edit { font-weight: 700; min-width: 4.5rem; min-height: 44px; }

.ht-rcv-footer { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: 1rem; }
.ht-stepper { display: flex; gap: .5rem; }
.ht-stepper .ht-step { font-size: 1.8rem; font-weight: 800; min-width: 64px; }
.ht-stepper .ht-input { flex: 1; font-size: 2rem; }

.ht-loc-current { background: #198754; color: #fff; border-radius: .5rem; padding: .5rem .8rem; }
.ht-loc-label { font-size: .85rem; opacity: .9; }
.ht-loc-code { font-size: 2.1rem; font-weight: 800; letter-spacing: .05em; line-height: 1.1; }
.ht-loc-change { min-height: 48px; min-width: 5rem; }

.ht-rcv-hint { margin: .3rem 0 0 2.2rem; font-size: .8rem; color: #6c757d; }
.ht-rcv-line-qty { margin-left: 2.2rem; }

/* ===== 出荷・ピッキング ===== */
.ht-badge-Shortage { background: #f8d7da; color: #842029; }

.ht-pick-loc { background: #fff3cd; color: #3d2a00; border-radius: .5rem; padding: .4rem .8rem; text-align: center; }

.ht-pick-loc-code { font-size: 2.8rem; font-weight: 800; letter-spacing: .06em; line-height: 1.1; }

.ht-pick-line .ht-rcv-line-name { margin-top: .1rem; }
.ht-pick-line-bottom { display: flex; align-items: center; gap: .4rem; }
.ht-pick-line-bottom .ht-rcv-line-qty { flex: 1; }
.ht-pick-line.is-Shortage { border-left-color: #e5534b; background: #fff5f5; }
.ht-pick-line.is-skipped { border-left-style: dashed; }

.ht-attention { animation: ht-attention 1s ease-in-out 3; background: #f8d7da; }
@keyframes ht-attention { 50% { box-shadow: 0 0 0 6px rgba(220,53,69,.35); } }

/* ===== 棚卸 ===== */
.ht-stk-locs { display: grid; gap: .5rem; }
.ht-stk-loc { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .1rem .5rem; text-align: left; width: 100%;
  background: #fff; border: 0; border-left: 6px solid #adb5bd; border-radius: .6rem; padding: .6rem .8rem; box-shadow: 0 1px 3px rgba(0,0,0,.07); min-height: 56px; }
.ht-stk-loc.is-InProgress { border-left-color: #f0b429; }
.ht-stk-loc.is-Completed { border-left-color: #3fb950; background: #f3fbf4; }
.ht-stk-loc-code { font-weight: 800; font-size: 1.4rem; }
.ht-stk-loc-name { font-size: .85rem; color: #495057; }
.ht-stk-loc-info { grid-column: 1 / -1; font-size: .78rem; color: #6c757d; }
.ht-stk-head { background: #fff; border-radius: .75rem; padding: .7rem .8rem; box-shadow: 0 1px 4px rgba(0,0,0,.08); margin-bottom: .75rem; border: 3px solid #198754; }
.ht-stk-head-loc { background: #198754; color: #fff; border-radius: .5rem; padding: .3rem .8rem; text-align: center; margin-top: .3rem; }
.ht-stk-recount { margin-top: .4rem; background: #fff3cd; color: #7a5200; border-radius: .4rem; padding: .3rem .5rem; font-size: .85rem; font-weight: 700; }
.ht-stk-note { font-size: .75rem; color: #6c757d; border: 1px solid #ced4da; border-radius: 1rem; padding: 0 .5rem; white-space: nowrap; }
.ht-stk-footer { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: 1rem; }
.ht-stk-footer .ht-stk-complete { grid-column: 1 / -1; }
.ht-dev-table { font-size: .9rem; }
.ht-dev-table .is-diff { background: #fff5f5; font-weight: 700; }

/* ===== ロケーション移動 ===== */
.ht-mv-step { background: #fff; border-radius: .75rem; padding: .7rem .8rem; box-shadow: 0 1px 4px rgba(0,0,0,.08); margin-bottom: .75rem; border: 3px solid #f0b429; }
.ht-mv-step.is-set { border-color: #198754; }
.ht-mv-step.is-disabled { opacity: .5; pointer-events: none; border-color: #dee2e6; }
.ht-mv-step-title { font-weight: 800; font-size: 1.05rem; margin-bottom: .4rem; }
.ht-mv-no { display: inline-block; color: #0d6efd; }
.ht-mv-items { margin-top: .5rem; }
.ht-mv-items summary { font-weight: 700; color: #0f5132; min-height: 36px; }
.ht-mv-item { display: grid; grid-template-columns: 1fr auto; gap: 0 .5rem; padding: .3rem .4rem; border-bottom: 1px solid #eee; }
.ht-mv-item-name { font-weight: 700; }
.ht-mv-item-qty { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-weight: 800; font-size: 1.15rem; white-space: nowrap; }
.ht-mv-total { text-align: right; margin-top: .4rem; }
.ht-mv-done { background: #d1e7dd; color: #0f5132; border-radius: .75rem; padding: .8rem; margin-bottom: .75rem; border: 3px solid #198754; }
.ht-mv-done-buttons { display: grid; gap: .5rem; }

/* ---- 作業ロック ---- */
.ht-lock-badge { display: inline-block; margin-top: .35rem; padding: .15rem .55rem; border-radius: 999px; font-size: .8rem; font-weight: 700;
  background: #f8d7da; color: #842029; border: 1px solid #f1aeb5; }
.ht-lock-badge.is-mine { background: #cfe2ff; color: #084298; border-color: #9ec5fe; }
.ht-stk-loc .ht-lock-badge { grid-column: 1 / -1; justify-self: start; margin-top: .1rem; }
.ht-lock-note { font-size: .78rem; color: #6c757d; margin: .4rem .2rem 0; }
.ht-lock-card .ht-slip-supplier { font-weight: 700; }

/* ---------- 明細単位の処理（入荷検品・出荷ピッキングの読取画面） ---------- */
.ht-label-sub { font-weight: 400; font-size: .85rem; color: #6c757d; }
.ht-line-card { background: #fff; border-radius: .75rem; padding: .8rem 1rem; margin-bottom: .8rem; border: 2px solid #0d6efd; }
.ht-line-code { font-size: 1.15rem; font-weight: 700; letter-spacing: .03em; }
.ht-line-name { font-size: 1.3rem; font-weight: 700; margin-top: .3rem; line-height: 1.3; }
.ht-line-qtys { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-top: .6rem; text-align: center; }
.ht-line-qtys > div { background: #f1f3f5; border-radius: .5rem; padding: .35rem .2rem; }
.ht-line-qtys > div.is-remaining { background: #e7f1ff; color: #084298; }
.ht-line-qlabel { font-size: .8rem; color: #6c757d; }
.is-remaining .ht-line-qlabel { color: #084298; }
.ht-line-qval { font-size: 1.5rem; font-weight: 700; }
.ht-line-qval small { font-size: .8rem; font-weight: 400; }
.ht-pick-loc-box { background: #212529; color: #fff; border-radius: .75rem; padding: .6rem 1rem; margin-bottom: .6rem; text-align: center; }
.ht-pick-loc-box .ht-line-qlabel { color: #adb5bd; }
.ht-pick-loc { font-size: 2rem; font-weight: 700; letter-spacing: .05em; }
.ht-qty-input { font-size: 1.6rem; font-weight: 700; text-align: right; }

.ht-rcv-message { white-space: pre-line; }
/* 明細の状態（入荷：未入荷／分納／完納、出荷：未ピック／一部ピック／完了／完了（欠品 n）） */
.ht-line-status-row { display: flex; align-items: center; gap: .6rem; margin-top: .35rem; }
.ht-line-status { display: inline-block; border-radius: .4rem; padding: .1rem .6rem; font-weight: 800; background: #e9ecef; color: #495057; }
.ht-line-status[data-status="分納"], .ht-line-status[data-status="一部ピック"] { background: #fff3cd; color: #664d03; }
.ht-line-status[data-status="完納"], .ht-line-status[data-status="完了"] { background: #d1e7dd; color: #0f5132; }
.ht-line-status[data-status^="完了（欠品"] { background: #f8d7da; color: #842029; }

/* 長いボタン・案内文の折り返し：句（「明細バーコードまたは」「QRコードを読む」など）の途中で改行しない。1句が1行に収まらないときだけ句の中で折り返す */
.ht-phrase { display: inline-block; }
.ht-phrases { display: block; text-align: center; }  /* flex のボタンの中では句をまとめて1つの要素にする */