:root{--nr-blue:#1f6fb2;--nr-dark:#16374f;--nr-bg:#f4f6f8;--nr-line:#d7dee5;--nr-green:#1e9e5a;--nr-red:#c0392b;--nr-amber:#d9822b}
*{box-sizing:border-box}
/* 文字はhi-expressの実測値に合わせる（社長指示 2026-08-09）:
   Bootstrap系フォントスタック・12px・行間1.5・#212529 */
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
  "Helvetica Neue",Arial,"Noto Sans","Hiragino Kaku Gothic ProN","Meiryo",sans-serif,
  "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  background:var(--nr-bg);color:#212529;font-size:12px;line-height:1.5}
a{color:var(--nr-blue);text-decoration:none}
a:hover{text-decoration:underline}

/* header */
.topbar{background:var(--nr-dark);color:#fff;display:flex;align-items:center;
  padding:8px 18px;min-height:52px;gap:16px;flex-wrap:wrap}
.topbar .logo{font-weight:700;font-size:18px;letter-spacing:.5px;white-space:nowrap;flex-shrink:0}
.topbar .logo small{font-weight:400;opacity:.8;font-size:12px;margin-left:6px}
/* ロゴ画像（2026-09-04差し替え）。黒文字ロゴのため濃紺バーの上では白地バッジに載せる */
.topbar .logo img{display:block;height:30px;background:#fff;border-radius:6px;padding:3px 10px;box-sizing:content-box}
.topnav{display:flex;gap:10px 14px;flex:1;flex-wrap:wrap;align-items:center}
.topnav a{color:#dce6ef;padding:6px 4px;white-space:nowrap}  /* 縦に潰れないよう改行を禁止 */
.topnav a:hover{color:#fff}
.topright{display:flex;align-items:center;gap:10px;font-size:13px;flex-wrap:wrap;white-space:nowrap}
.topright a{white-space:nowrap}
.topright .badge-live{background:var(--nr-red)}
.topright .badge-dry{background:var(--nr-green)}

/* 画面が狭いときはロゴ・文字を少し縮め、はみ出しは横スクロールに逃がす */
@media (max-width: 900px){
  .topbar{gap:10px;padding:6px 12px}
  .topbar .logo{font-size:15px}
  .topbar .logo img{height:24px;padding:2px 7px}
  .topnav{gap:6px 10px;font-size:13px}
  .topnav a{padding:4px 2px}
  .topright{font-size:12px;gap:8px}
}

.container{max-width:100%;padding:18px 22px}
h1{font-size:20px;margin:0 0 14px}
h2{font-size:16px;margin:18px 0 8px}

/* buttons */
.btn{display:inline-block;border:none;border-radius:6px;padding:5px 12px;background:var(--nr-blue);color:#fff;cursor:pointer;font-size:12px}
.btn:hover{background:#195a90;text-decoration:none}
.btn.secondary{background:#5b6b7a}
.btn.green{background:var(--nr-green)}
.btn.amber{background:var(--nr-amber)}
.btn.red{background:var(--nr-red)}
.btn.ghost{background:#fff;color:var(--nr-blue);border:1px solid var(--nr-blue)}
.btn.lg{font-size:15px;padding:14px 18px;font-weight:600}
.btn.sm{padding:4px 9px;font-size:12px}
.btn.joom{background:#fff;color:var(--nr-red);border:2px solid var(--nr-red);font-weight:700;padding:9px 22px}
.btn.joom:hover{background:#fff5f4}

/* Hi-Express風の検索バー */
.searchbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:6px 0 10px}
.searchbar .count{color:var(--nr-dark);font-weight:600}
.pager{display:flex;gap:4px;flex-wrap:wrap;margin:6px 0 12px;font-size:12px}
.pager a,.pager span{padding:3px 8px;border:1px solid var(--nr-line);border-radius:4px;background:#fff;color:var(--nr-blue)}
.pager .cur{background:var(--nr-blue);color:#fff;border-color:var(--nr-blue)}
.toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.cellbtn{display:inline-block;background:var(--nr-blue);color:#fff;border-radius:5px;padding:5px 10px;font-size:12px;text-align:center}
.chk-list{font-size:11px;color:#5b6b7a;line-height:1.7}
.subgrey{font-size:11px;color:#8a99a8}
.note-banner{background:#fff;border:1px solid var(--nr-line);border-left:4px solid var(--nr-blue);border-radius:6px;padding:10px 14px;margin-bottom:12px}
.note-banner.warn{border-left-color:var(--nr-amber)}
.hidden{display:none}

/* ===== ストア連携フォーム：入力必要／不要をはっきり分ける ===== */
.need-input{border:2px solid var(--nr-blue);border-radius:8px;padding:14px 16px;background:#f7fbff;margin-bottom:16px}
.need-input-head{font-weight:700;color:var(--nr-dark);margin-bottom:12px;font-size:14px}
.step-badge{display:inline-block;background:var(--nr-blue);color:#fff;border-radius:4px;
  padding:3px 10px;font-size:12px;font-weight:700;margin-right:8px}
.form-row.req label{color:var(--nr-dark);font-size:14px}
.form-row.req input{border:2px solid var(--nr-blue);background:#fff;font-size:15px;padding:9px 11px}
.form-row.req input:focus{outline:none;border-color:#0d4f80;box-shadow:0 0 0 3px rgba(31,111,178,.18)}
.req-mark{display:inline-block;background:var(--nr-red);color:#fff;border-radius:3px;
  padding:1px 7px;font-size:11px;font-weight:700;margin-left:6px;vertical-align:middle}
.later-mark{display:inline-block;background:#8a99a8;color:#fff;border-radius:3px;
  padding:1px 7px;font-size:11px;font-weight:700;margin-left:6px;vertical-align:middle}
.hint{display:block;font-size:12px;color:#5b6b7a;margin-top:4px;line-height:1.6}
.hint.ok{color:#1e7a44;font-weight:600}

/* 折りたたみの詳細設定（通常は触らない） */
details.advanced{border:1px solid var(--nr-line);border-radius:8px;background:#fafbfc;padding:10px 14px}
details.advanced summary{cursor:pointer;font-size:13px;color:#5b6b7a;font-weight:600;padding:4px 0}
details.advanced summary:hover{color:var(--nr-dark)}

/* 入力不可（グレーアウト）項目 */
.form-row.locked label{color:#9aa8b5;font-size:13px}
.form-row.locked input,
.form-row.locked textarea,
input:disabled,textarea:disabled{background:#eef1f4;color:#9aa8b5;border-color:#dfe4e9;cursor:not-allowed}
.lock-mark{display:inline-block;background:#dfe4e9;color:#7a8a99;border-radius:3px;
  padding:1px 7px;font-size:11px;margin-left:6px;vertical-align:middle}

/* big action grid */
.action-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin:10px 0 22px}
.action-grid form{margin:0}
.action-grid .btn{width:100%;text-align:center}

/* cards */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.card{background:#fff;border:1px solid var(--nr-line);border-radius:8px;padding:14px}
.card .num{font-size:28px;font-weight:700;color:var(--nr-dark)}
.card .lbl{font-size:13px;color:#5b6b7a;margin-top:4px}

/* tables */
.table-wrap{overflow-x:auto;background:#fff;border:1px solid var(--nr-line);border-radius:8px}
table{border-collapse:collapse;width:100%;font-size:12px;white-space:nowrap}
th,td{border-bottom:1px solid var(--nr-line);padding:7px 10px;text-align:left;vertical-align:top}
th{background:#eef2f6;position:sticky;top:0;font-weight:600;color:var(--nr-dark)}
tr:hover td{background:#f8fbfe}

/* 発送代行グリッド（hi-express準拠の多列表）
   1つのマスに「販路・ストアアカウント・管理番号・発送先国」のように
   複数の入力欄を縦に積む列がある。
   table に white-space:nowrap が効いているため、入力欄が inline のままだと
   改行されず横一列に詰め込まれ、全部つぶれて読めなくなる（2026-07-28 実機で発覚）。
   明示的に block にして縦積みを保証する。 */
.orders-grid td > select,
.orders-grid td > input[type=text],
.orders-grid td > input[type=number],
.orders-grid td > input[type=date],
.orders-grid td > textarea{display:block;width:100%;margin-bottom:4px}
.orders-grid td > select:last-child,
.orders-grid td > input:last-child,
.orders-grid td > textarea:last-child{margin-bottom:0}
/* チェックボックス付きの説明文は1行1項目。表の見出しほど強調しない */
.orders-grid td > label{display:block;font-weight:400;font-size:12px;color:#4a5560}
.orders-grid td > label > input{margin-right:4px}

/* 列幅は中身に合わせ、はみ出す分は .table-wrap の横スクロールで見る。
   width:100% のままだと29列が均等に潰れ、入力欄が数文字しか出ない。 */
.orders-grid{width:max-content;min-width:100%}

/* ===== 横スクロールをどこからでもできるようにする（社長指摘 2026-07-30）=====
   以前は表全体がページの下へ伸びていたため、横スクロールバーがページの最下部に
   しか無く、行を見ている途中で横に動かせなかった。
   表を画面の高さに収め、表の内側でスクロールさせる（hi-expressと同じ挙動）。
   - 横スクロールバーが常に画面内に見える
   - 表の上ならどこでも Shift+ホイール／トラックパッドの横スワイプで横に動く
   - 見出し行（既存の th の position:sticky）が上に残る */
.table-wrap.grid-scroll{max-height:calc(100vh - 200px);min-height:320px;overflow:auto;
  overscroll-behavior-x:contain}

/* 横に流したとき、どの行を見ているか分からなくなるので左端2列を固定する */
.orders-grid th:first-child,.orders-grid td:first-child{position:sticky;left:0;z-index:3;
  box-sizing:border-box;width:36px;min-width:36px;max-width:36px;background:#fff}
.orders-grid th:nth-child(2),.orders-grid td:nth-child(2){position:sticky;left:36px;z-index:3;
  box-sizing:border-box;width:104px;min-width:104px;background:#fff}
/* 見出し行は固定列より必ず上に描く。z-indexを付けないと、縦スクロール時に
   左端の固定セルが見出しの上に重なって読めなくなる。 */
.orders-grid thead th{z-index:4}
.orders-grid thead th:first-child,.orders-grid thead th:nth-child(2){z-index:6;background:#eef2f6}
/* 固定列は背景が透けるため、行の色（hover・キャンセル）を明示的に塗り直す */
.orders-grid tbody tr:hover td:first-child,
.orders-grid tbody tr:hover td:nth-child(2){background:#f8fbfe}
.orders-grid tbody tr.row-cancelled td:first-child,
.orders-grid tbody tr.row-cancelled td:nth-child(2){background:#f5f5f5}

/* 商品画像。小さすぎて何の商品か分からなかったため大きくする（社長指摘 2026-07-30）*/
.orders-grid .thumb{display:block;width:64px;height:64px;object-fit:cover;
  border:1px solid var(--nr-line);border-radius:4px;background:#fff;margin-bottom:3px}
.orders-grid .thumb.lg{width:96px;height:96px}

/* メッセージ欄は行の高さいっぱいに広げる（hi-express同様・社長指摘 2026-07-30）。
   ::before で最低の高さを確保し、textarea を絶対配置でセルに敷き詰める。
   最終入力時刻はセル下端に出す。 */
.orders-grid td.msg-cell{position:relative;min-width:240px;padding:4px 6px}
.orders-grid td.msg-cell::before{content:"";display:block;min-height:76px}
.orders-grid td.msg-cell textarea{position:absolute;top:4px;left:6px;right:6px;bottom:20px;
  width:auto;height:auto;min-width:0;margin:0;resize:none}
.orders-grid td.msg-cell .msg-log{position:absolute;left:6px;right:6px;bottom:3px;
  font-size:10px;color:#7a8a99;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 自動保存の状態表示（左端の固定列に出す） */
.orders-grid .autosave-mark{display:block;font-size:9px;line-height:1.2;color:#7a8a99;
  min-height:11px;white-space:nowrap}
.orders-grid .autosave-mark.ng{color:#c0392b;font-weight:600}
/* 入力欄に最低幅を持たせて列幅を決める（チェックボックス列まで広げないため
   td ではなく入力欄側に指定する） */
.orders-grid td > select,
.orders-grid td > input[type=text],
.orders-grid td > input[type=number],
.orders-grid td > input[type=date]{min-width:130px}
.orders-grid td > textarea{min-width:180px}

/* forms */
.form-box{background:#fff;border:1px solid var(--nr-line);border-radius:8px;padding:18px;max-width:640px}
.form-row{margin-bottom:12px;display:flex;flex-direction:column;gap:4px}
input[type=text],input[type=email],input[type=password],input[type=number],select,textarea{
  padding:4.5px 9px;border:1px solid var(--nr-line);border-radius:6px;font-size:12px;width:100%}
label{font-weight:400;font-size:12px;color:#212529}

/* ===== 詳細フィルタ（hi-express準拠: ラベル左・コントロール右・1行1項目。
   社長指摘 2026-08-09「フィルタが伸びすぎ」対応。
   パネルは .searchbar(flex) の子なので flex-basis:100% で全幅に落とす） ===== */
.searchbar #js-search-body{flex-basis:100%;width:100%;max-width:760px}
#js-search-body{padding:12px 16px}
#js-search-body .form-row{flex-direction:row;align-items:center;gap:10px;margin-bottom:8px}
#js-search-body .form-row>label:first-child{flex:0 0 100px;margin:0}
#js-search-body select,
#js-search-body input[type=text]{width:auto;min-width:180px;max-width:320px}
#js-search-body input[type=date]{width:auto}
#js-search-body .form-row label{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
#js-search-body .form-row input[type=radio],
#js-search-body .form-row input[type=checkbox]{margin:0}

/* flash */
.flash{padding:10px 14px;border-radius:6px;margin:8px 0}
.flash.success{background:#e3f5ea;color:#1e7a44;border:1px solid #b6e3c8}
.flash.danger{background:#fbe7e4;color:#a5281a;border:1px solid #f1bdb6}
.flash.warning{background:#fdf3e3;color:#9a6312;border:1px solid #f3dcad}

/* status badges */
.tag{display:inline-block;padding:2px 8px;border-radius:11px;font-size:12px;background:#e7edf3;color:#3a4a5a}
.tag.green{background:#e3f5ea;color:#1e7a44}
.tag.red{background:#fbe7e4;color:#a5281a}
.tag.amber{background:#fdf3e3;color:#9a6312}

.bar{background:#fff;border:1px solid var(--nr-line);border-radius:8px;padding:12px;margin-bottom:14px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.muted{color:#7a8a99;font-size:12px}
.thumb{width:34px;height:34px;background:#eef2f6;border-radius:4px;display:inline-flex;align-items:center;justify-content:center;color:#9aa;font-size:10px}

/* ===== 案内ブロック（.ok / .warn）=====
   複数のテンプレートが class="ok" / class="warn" を使っているのに定義が無く、
   重要な案内（CSVの列仕様・送り先倉庫が違う警告・宛先入力番号の説明）が
   すべて無地の文章として埋没していた（2026-08-10 会員UI監査で判明）。 */
.ok{background:#e7f6ec;border-left:5px solid var(--nr-green,#1e9e5a);border-radius:6px;
  padding:11px 15px;margin:12px 0;font-size:13px;line-height:1.8}
.warn{background:#fdf3e3;border-left:5px solid var(--nr-amber,#d9822b);border-radius:6px;
  padding:11px 15px;margin:12px 0;font-size:13px;line-height:1.8;font-weight:600}
.flash.info,.flash.message{background:#eaf3fb;color:#16374f;border:1px solid #c5dcf0}

/* 入力欄を包む label（発送代行作成など）。項目名を常に見えるようにする */
label.inline{display:inline-flex;align-items:center;gap:5px;font-size:13px;white-space:nowrap}
.form-box label{display:block;font-size:12px;color:#4a5560;margin-bottom:2px}
.form-box label input[type=checkbox]{margin-right:4px}

/* ===== スマホ表示 =====
   会員は非IT層が多く、スマホで開く人が一定数いる。
   ボタンが小さすぎる／横スクロールの先に隠れる問題を緩和する
   （2026-08-10 会員UI監査。特に会員設定の「認証してトークン取得」に届かない） */
@media (max-width:640px){
  .btn,.btn.sm{padding:10px 14px;font-size:13px;min-height:40px;line-height:1.3}
  .bar .btn,.toolbar .btn{margin-bottom:4px}
  .form-box{padding:14px}
  .form-row input,.form-row select,.form-row textarea{font-size:16px}  /* iOSの自動ズーム防止 */
  /* 会員設定のストア連携表：横スクロールさせずカード状に積む */
  .stack-sp,.stack-sp thead,.stack-sp tbody,.stack-sp tr,.stack-sp th,.stack-sp td{display:block;width:auto}
  .stack-sp thead{display:none}
  .stack-sp tr{border:1px solid var(--nr-line);border-radius:8px;padding:10px 12px;margin-bottom:10px;background:#fff}
  .stack-sp td{border:none;padding:4px 0;white-space:normal}
  .stack-sp td::before{content:attr(data-label);display:block;font-size:11px;color:#8a99a8;font-weight:700}
  /* 発送代行の巨大グリッドは高さを固定せず、画面なりに伸ばす */
  .grid-scroll{max-height:none !important}
  .orders-grid td:first-child,.orders-grid th:first-child,
  .orders-grid td:nth-child(2),.orders-grid th:nth-child(2){position:static}
}

/* 入力エラー（会員が「押しても何も起きない」と感じないように必ず出す） */
.field-error{color:var(--nr-red);font-size:12px;font-weight:600;margin-top:3px;line-height:1.6}