/* ==========================================================================
   デザインシステム（ネイビー × オレンジ）
   智洋水産株式会社 冷凍在庫管理システム / Laravel + Blade 版

   基調色はネイビー(#003882)。CTA・要対応の強調にオレンジ(#FF9B00)を使う。

   このファイルはビルド工程を一切通さず、<link rel="stylesheet"> で
   そのまま配信している（npm / Vite / Tailwind / PostCSS なし）。
   したがってこのファイルを直接編集すれば、それだけで反映される。
   ========================================================================== */

:root {
  /* ---- インク（サイドバー・ヘッダなどの骨格） ---- */
  --ink-950: #00060F;
  --ink-900: #001226;
  --ink-850: #001B3D;
  --ink-800: #003882;
  --ink-700: #0057A8;
  --ink-600: #1A6BB8;

  /* ---- ブランド（操作色・アクア） ---- */
  --brand-800: #002D68;
  --brand-700: #003882;
  --brand-600: #0057A8;
  --brand-500: #1A6BB8;
  --brand-400: #4A8FCB;
  --brand-200: #A8C8E8;
  --brand-100: #D2E4F5;
  --brand-050: #F3F7FC;

  /* ---- アクセント（要対応・CTA・コーラル） ---- */
  --accent-700: #E68A00;
  --accent-600: #FF9B00;
  --accent-500: #FFAD33;
  --accent-300: #FFCC80;
  --accent-100: #FFF1DC;
  --accent-050: #FFF8EC;

  /* ---- 意味色 ---- */
  --ok-700: #0A7A4E;
  --ok-600: #10945F;
  --ok-100: #D6F0E2;
  --ok-050: #EBF8F1;
  --warn-700: #96620A;
  --warn-600: #B8790C;
  --warn-100: #FBEBC8;
  --warn-050: #FDF6E7;
  --err-700: #AE2438;
  --err-600: #D6394F;
  --err-100: #FBD9DE;
  --err-050: #FDEEF0;
  --info-700: #1E4FD8;
  --info-600: #2E68F0;
  --info-100: #DAE5FE;
  --info-050: #EDF2FE;

  /* ---- ニュートラル ---- */
  --canvas: #F3F5F8;
  --canvas-2: #EAEEF3;
  --surface: #FFFFFF;
  --surface-2: #F7F9FB;
  --surface-3: #EFF3F6;
  --line: #E3E8ED;
  --line-2: #EDF1F5;
  --line-strong: #C9D2DB;
  --text: #10161F;
  --text-2: #4C5766;
  --text-3: #7B8797;

  /* ---- 旧トークンの別名（既存のインラインスタイルをそのまま新配色へ載せ替える） ---- */
  --primary: var(--ink-800);
  --primary-hover: var(--ink-900);
  --primary-mid: var(--ink-700);
  --primary-light: #E7EBF0;
  --primary-soft: #F5F7FA;
  --accent: var(--brand-600);
  --accent-hover: var(--brand-700);
  --accent-light: var(--brand-100);
  --accent-soft: var(--brand-050);
  --teal: var(--brand-600);
  --teal-light: var(--brand-100);
  --bg: var(--surface);
  --bg-tint: var(--canvas);
  --border: var(--line);
  --border-strong: var(--line-strong);
  --text-primary: var(--text);
  --text-secondary: var(--text-2);
  --text-muted: var(--text-3);
  --danger: var(--err-600);
  --danger-strong: var(--err-700);
  --danger-light: var(--err-050);
  --success: var(--ok-600);
  --success-light: var(--ok-050);
  --warning: var(--warn-600);
  --warning-light: var(--warn-050);
  --info: var(--info-600);
  --info-light: var(--info-050);

  /* ---- 形 ---- */
  --radius-xs: 7px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 26px;

  --shadow-xs: 0 1px 2px rgba(16, 22, 31, 0.05);
  --shadow-sm: 0 1px 3px rgba(16, 22, 31, 0.07), 0 1px 2px rgba(16, 22, 31, 0.04);
  --shadow-md: 0 6px 18px rgba(16, 22, 31, 0.09), 0 2px 5px rgba(16, 22, 31, 0.05);
  --shadow-lg: 0 18px 44px rgba(16, 22, 31, 0.16), 0 6px 14px rgba(16, 22, 31, 0.07);
  --ring: 0 0 0 3px var(--brand-100);

  --sidebar-w: 236px;
  /* Next.js のフォントローダを使わないので、OS 標準の和文フォントだけで組む
     （macOS = ヒラギノ / Windows = 游ゴシック・メイリオ）。追加読み込みなし。 */
  --font-jp: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", Meiryo, sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  font-family: var(--font-jp);
  background: var(--canvas);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0.002em;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #C4CDD6; border-radius: 6px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #A6B2BE; background-clip: content-box; }

input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--brand-600); cursor: pointer; }
input[type="range"] { accent-color: var(--brand-600); }
:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; border-radius: 6px; }
a, button { transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; }
.tnum { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
/* 長い名前は1行で「…」にし、title で全体を出す(一覧の行の高さをそろえる) */
.cell-clip { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 在庫一覧: 列を減らし、関係する項目は 1 つのセルに 2 段(主=太字・副=小さく灰色)で出す */
.table-inventory { font-size: 14px; }
.table-inventory .cell-main { font-weight: 700; color: var(--text); }
.table-inventory .cell-sub { font-size: 11.5px; color: var(--text-3); margin-top: 2px; font-weight: 500; }
.table-inventory .cell-sub-inline { margin-left: 10px; color: var(--text-2); }
.table-inventory td.frozen-cell .cell-sub-inline { display: block; margin: 1px 0 0; font-size: 11.5px; }
.table-inventory .th-sub { display: block; font-size: 10.5px; font-weight: 600; color: var(--text-3); }
/* 在庫詳細: 品名を大きく出す要約と、幅いっぱいのロット情報(項目を横に並べて縦に伸ばさない) */
.lot-summary { margin: -4px 0 16px; }
.lot-summary-title { display: flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 800; color: var(--text); }
.lot-summary-sub { margin-top: 4px; font-size: 13.5px; color: var(--text-2); }
.lot-summary-sep { margin: 0 10px; color: var(--line-strong); }
.form-grid.lot-info-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px 18px; font-size: 14px; }
.form-grid.lot-info-grid .lot-info-wide { grid-column: span 2; }
.lot-info-qty { margin-left: 12px; color: var(--text-2); }

/* ==========================================================================
   レイアウト
   ========================================================================== */
.app-shell { display: flex; min-height: 100vh; background: var(--canvas); }
.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.app-content { flex: 1; padding: 26px 30px 72px; max-width: 1580px; width: 100%; margin: 0 auto; }
@media (max-width: 960px) { .app-content { padding: 14px 13px 96px; } }

.desktop-sidebar { display: flex; }
.mobile-topbar { display: none; }
@media (max-width: 960px) {
  .desktop-sidebar { display: none !important; }
  .mobile-topbar {
    display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 40;
    background: var(--ink-900); color: #fff; padding: 10px 12px;
    padding-top: calc(10px + env(safe-area-inset-top));
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), var(--shadow-md);
  }
}
.mobile-topbar-btn {
  width: 38px; height: 38px; border-radius: 11px; background: rgba(255, 255, 255, 0.1); border: none;
  color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer;
  flex-shrink: 0; text-decoration: none;
}
.mobile-topbar-btn:active { background: rgba(255, 255, 255, 0.22); }
.mobile-topbar-title { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; text-decoration: none; color: #fff; }
.mobile-topbar-logo {
  width: 27px; height: 27px; border-radius: 9px; flex-shrink: 0;
  background: linear-gradient(140deg, var(--brand-400), var(--brand-700));
  display: flex; align-items: center; justify-content: center;
}

.drawer-overlay { position: fixed; inset: 0; background: rgba(7, 10, 16, 0.6); z-index: 49; animation: fade-in 150ms ease; backdrop-filter: blur(2px); }
.mobile-drawer {
  position: fixed; top: 0; left: 0; bottom: 0; width: min(292px, 86vw); z-index: 50;
  background: linear-gradient(180deg, var(--ink-850) 0%, var(--ink-950) 100%);
  display: flex; flex-direction: column; transform: translateX(-100%);
  transition: transform 240ms cubic-bezier(0.2, 0.9, 0.3, 1); visibility: hidden;
  padding-top: env(safe-area-inset-top);
}
.mobile-drawer.open { transform: translateX(0); visibility: visible; }
.mobile-drawer-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 16px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.mobile-drawer-nav { flex: 1; overflow-y: auto; padding: 12px 10px 16px; display: flex; flex-direction: column; gap: 16px; }
.mobile-drawer-group {
  font-size: 10px; font-weight: 800; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.34); padding: 0 10px 6px;
}
.mobile-drawer-link {
  display: flex; align-items: center; gap: 11px; padding: 11px 11px; border-radius: 11px;
  font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, 0.82); text-decoration: none; margin-bottom: 2px;
}
.mobile-drawer-link:active { background: rgba(255, 255, 255, 0.1); }
.mobile-drawer-link.active { background: var(--brand-600); color: #fff; }
.mobile-drawer-logout {
  margin: 0 14px calc(16px + env(safe-area-inset-bottom)); padding: 12px; border-radius: 11px;
  background: rgba(255, 255, 255, 0.1); border: none; color: #fff; font-size: 13.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; gap: 7px; cursor: pointer; font-family: inherit;
}

/* サイドバー内リンク（Sidebar.tsx から使用） */
.sidebar-link { position: relative; }
.sidebar-link:hover { background: rgba(255, 255, 255, 0.07) !important; color: #fff !important; }
.sidebar-link.is-active::before {
  content: ''; position: absolute; left: -12px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 18px; border-radius: 0 3px 3px 0; background: var(--brand-400);
}

/* ==========================================================================
   ページヘッダ
   ========================================================================== */
.page-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; margin-bottom: 22px; flex-wrap: wrap; }
.page-title { font-size: 22px; font-weight: 800; letter-spacing: -0.018em; margin: 0; display: flex; align-items: center; gap: 10px; }
.page-subtitle { font-size: 12.5px; color: var(--text-2); margin: 6px 0 0; line-height: 1.7; max-width: 78ch; }
.page-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.section-title { font-size: 13.5px; font-weight: 800; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; letter-spacing: -0.005em; }
.section-title .muted { font-size: 11.5px; font-weight: 600; color: var(--text-3); letter-spacing: 0; }
.eyebrow { font-size: 10.5px; font-weight: 800; letter-spacing: 0.09em; color: var(--text-3); text-transform: uppercase; }

/* ==========================================================================
   フォーム
   ========================================================================== */
.field-label { display: block; font-size: 11.5px; font-weight: 700; color: var(--text-2); margin-bottom: 4px; letter-spacing: 0.005em; }
.field-hint { font-size: 11px; color: var(--text-3); margin-top: 4px; line-height: 1.5; }
/* 項目名の横の「ⓘ」。説明は吹き出しでカーソルを合わせたとき・タップしたときに出す(入力欄の下に長い説明を置かない) */
.field-tip { display: inline-flex; vertical-align: middle; margin-left: 4px; color: var(--text-3); cursor: help; position: relative; font-weight: 400; letter-spacing: 0; text-transform: none; }
.field-tip[data-tip]:hover::after, .field-tip[data-tip]:focus::after {
  content: attr(data-tip); position: absolute; top: calc(100% + 6px); left: 0; z-index: 100;
  width: max-content; max-width: min(320px, 80vw); padding: 8px 10px; white-space: normal;
  font-size: 12px; line-height: 1.5; font-weight: 500; color: var(--text); text-align: left;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  box-shadow: 0 6px 20px rgba(16, 22, 31, 0.18);
}
.text-input, .select-input, textarea.text-input {
  width: 100%; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  font-size: 13.5px; background: var(--surface); color: var(--text); font-family: inherit;
  box-shadow: inset 0 1px 1px rgba(16, 22, 31, 0.03);
}
.text-input:hover, .select-input:hover { border-color: #AEBAC6; }
.text-input:focus, .select-input:focus { border-color: var(--brand-500); box-shadow: var(--ring); outline: none; }
.text-input::placeholder { color: var(--text-3); }
.text-input:disabled, .select-input:disabled, textarea.text-input:disabled { background: var(--surface-3); color: var(--text-3); cursor: not-allowed; }
.text-input.compact, .select-input.compact { padding: 5px 8px; font-size: 12.5px; border-radius: var(--radius-xs); }
/* 選択欄の右の矢印の場所(.select-input の padding-right)を、上の padding が潰して文字が欠けていた */
.select-input.compact { padding-right: 26px; background-position: calc(100% - 12px) calc(50% + 1px), calc(100% - 7px) calc(50% + 1px); }
.row-link { color: inherit; font-weight: 700; text-decoration: none; }
.row-link:hover { text-decoration: underline; }
.pager { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.pager-info { font-size: 12.5px; color: var(--text-2); }
.field-error { color: var(--err-600); font-size: 12px; margin: 5px 0 0; }
.text-input.invalid { border-color: var(--err-600); background: var(--err-050); }

/* 日付/年月入力(native input[type=date/month])の表示をブラウザのロケールに関わらず
   「年月日」表記で統一する(public/js/app.jsのwrapJaDateInputs()が生成)。
   実データはinputの値(YYYY-MM-DD/YYYY-MM)のまま変えず、見た目だけ上に重ねた文字で差し替える。 */
.ja-date-wrap { position: relative; display: block; }
.ja-date-wrap input[type="date"], .ja-date-wrap input[type="month"] { position: relative; z-index: 1; color: transparent; }
.ja-date-wrap input[type="date"]:disabled, .ja-date-wrap input[type="month"]:disabled { color: transparent; }
/* 入力中(フォーカス中)は元のinputの文字を見せ、キーボード入力の途中の値が分かるようにする */
.ja-date-wrap:focus-within input[type="date"], .ja-date-wrap:focus-within input[type="month"] { color: var(--text); }
.ja-date-wrap:focus-within .ja-date-overlay { display: none; }
.ja-date-overlay.is-empty { color: var(--text-3); }
.ja-date-overlay {
  position: absolute; inset: 0; z-index: 2; border-color: transparent !important; background: transparent !important;
  box-shadow: none !important; pointer-events: auto; cursor: pointer; display: flex; align-items: center;
  color: var(--text); white-space: nowrap; overflow: hidden;
}
.ja-date-wrap input:disabled + .ja-date-overlay, .ja-date-wrap input:read-only + .ja-date-overlay { cursor: not-allowed; }

/* 日本語のカレンダー(public/js/app.jsのopenJaCalendar())。ブラウザ標準は月名が英語になるため独自に出す */
.ja-cal {
  position: fixed; z-index: 200; width: 266px; padding: 10px;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md); font-size: 13px; color: var(--text);
}
.ja-cal button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.ja-cal button:disabled { color: var(--text-3); opacity: .45; cursor: not-allowed; }
.ja-cal-head { display: flex; align-items: center; gap: 2px; margin-bottom: 6px; }
.ja-cal-title { flex: 1; text-align: center; font-weight: 800; font-size: 14px; font-variant-numeric: tabular-nums; }
.ja-cal-nav { width: 28px; height: 28px; border-radius: var(--radius-sm); font-weight: 700; }
.ja-cal-nav:hover, .ja-cal-link:hover { background: var(--brand-050); color: var(--brand-700); }
.ja-cal-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.ja-cal-months { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.ja-cal-dow { text-align: center; font-size: 11.5px; font-weight: 700; color: var(--text-2); padding: 3px 0; }
.ja-cal-cell { height: 30px; border-radius: var(--radius-sm); font-variant-numeric: tabular-nums; }
.ja-cal-months .ja-cal-cell { height: 38px; font-weight: 700; }
.ja-cal-cell:hover:not(:disabled) { background: var(--brand-050); }
.ja-cal-cell.is-other { opacity: .4; }
.ja-cal-cell.is-sun, .ja-cal-dow.is-sun { color: var(--err-600); }
.ja-cal-cell.is-sat, .ja-cal-dow.is-sat { color: var(--brand-700); }
.ja-cal-cell.is-today { box-shadow: inset 0 0 0 1px var(--brand-700); }
.ja-cal-cell.is-selected { background: var(--brand-700); color: #fff; }
.ja-cal-foot { display: flex; justify-content: space-between; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
.ja-cal-link { padding: 4px 10px; border-radius: var(--radius-sm); font-weight: 700; color: var(--brand-700); }
.select-input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-3) 50%), linear-gradient(135deg, var(--text-3) 50%, transparent 50%); background-position: calc(100% - 15px) calc(50% + 1px), calc(100% - 10px) calc(50% + 1px); background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 30px; }

/* 得意先マスタの検索・選択(<x-customer-select>)。大量の得意先を素の<select>で
   並べるより、名前の部分一致で絞り込める検索欄の方が実用的なため、アプリ全体で統一する。 */
.customer-select { position: relative; }
/* 候補リストは position:fixed。absoluteだと .table-wrap { overflow:auto } などの祖先に
   クリップされて候補が見切れるため(座標はpublic/js/app.jsのplaceSuggest()が設定する)。 */
.customer-suggest {
  position: fixed; z-index: 120;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md); max-height: 240px; overflow-y: auto;
}
.customer-suggest-item { padding: 8px 12px; font-size: 13px; cursor: pointer; display: flex; align-items: center; gap: 8px; }
.customer-suggest-item:hover, .customer-suggest-item.is-active { background: var(--surface-2); }
.suggest-sub { color: var(--text-3); font-size: 11.5px; }
.suggest-empty { padding: 8px 12px; font-size: 12.5px; color: var(--text-3); }
.suggest-tag {
  margin-left: auto; font-size: 10.5px; font-weight: 700; padding: 1px 6px; border-radius: 999px;
  background: var(--info-50, var(--surface-2)); color: var(--info-700, var(--text-2)); white-space: nowrap;
}

/* 明細入力のカード(2026-09-16: 9列の横長テーブルは幅1100pxで必ず横スクロールが出て
   扱いづらかったため、1明細=1カードに変更した)。中身は .form-grid で自動的に折り返す。 */
.item-card { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); padding: 10px 14px 12px; margin-bottom: 10px; }
.item-card + .item-card { margin-top: 0; }
.item-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.item-card-title { font-size: 12px; font-weight: 800; color: var(--text-2); letter-spacing: 0.02em; }
/* 自動算出された欄。人が入れた値と見分けが付くよう淡く見せる */
.text-input.is-derived { background: var(--surface-2); color: var(--text-2); }
.weight-note { font-size: 11.5px; color: var(--text-3); margin-top: 3px; }
@media (max-width: 600px) { .item-card { padding: 10px 12px 12px; } }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 10px 12px; }
.form-grid.two { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
/* 項目数が多い明細行(入庫予定など)を、幅に余裕がある画面では必ず2行に収める。
   1行目(商品=2+魚種+規格+荷姿+予定数量+単重+総重量=8)がちょうど8で埋まるよう固定8列にする。
   auto-fitのままだと項目数に対して列が細かく分かれ3行以上になってしまうため、
   幅が十分な時だけ固定列に切り替える。幅が足りない画面(タブレット・モバイル)は
   従来通りauto-fitで折り返す。 */
@media (min-width: 1200px) {
  .form-grid.form-grid-dense { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}
/* 出庫依頼の明細行(商品=2+依頼数量+契約番号+備考=2 の6単位)を、幅に余裕がある画面では1行に収める。 */
@media (min-width: 1200px) {
  .form-grid.form-grid-outbound-line { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
.switch-row { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; padding-top: 4px; }

/* ==========================================================================
   ボタン
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 15px;
  border-radius: var(--radius-sm); font-size: 13px; font-weight: 700; border: 1px solid transparent;
  cursor: pointer; white-space: nowrap; font-family: inherit; text-decoration: none; letter-spacing: 0.005em;
}
.btn-primary { background: var(--ink-800); color: #fff; box-shadow: var(--shadow-xs); }
.btn-primary:hover { background: var(--ink-900); box-shadow: var(--shadow-sm); }
.btn-accent { background: var(--brand-600); color: #fff; box-shadow: 0 1px 2px rgba(0, 87, 168, 0.35); }
.btn-accent:hover { background: var(--brand-700); box-shadow: 0 3px 10px rgba(0, 87, 168, 0.3); }
.btn-coral { background: var(--accent-600); color: #fff; box-shadow: 0 1px 2px rgba(255, 155, 0, 0.32); }
.btn-coral:hover { background: var(--accent-700); box-shadow: 0 3px 10px rgba(255, 155, 0, 0.28); }
.btn-teal { background: var(--brand-600); color: #fff; }
.btn-teal:hover { background: var(--brand-700); }
.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--line-strong); box-shadow: var(--shadow-xs); }
.btn-secondary:hover { background: var(--surface-2); border-color: #AEBAC6; }
.btn-danger { background: var(--err-050); color: var(--err-700); border-color: var(--err-100); }
.btn-danger:hover { background: var(--err-100); }
.btn-warn { background: var(--err-600); color: #fff; box-shadow: var(--shadow-xs); }
.btn-warn:hover { background: var(--err-700); }
.btn-ghost { background: transparent; color: var(--text-2); }
.btn-ghost:hover { background: var(--surface-3); color: var(--text); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
.btn-lg { padding: 13px 20px; font-size: 14.5px; border-radius: var(--radius-md); }
.btn-sm { padding: 6px 11px; font-size: 12px; border-radius: var(--radius-xs); }
.btn-icon { padding: 0; width: 32px; height: 32px; }
.btn-block { width: 100%; }

/* ==========================================================================
   カード
   ========================================================================== */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-xs); }
.card-pad { padding: 18px 20px; }
.card-link { text-decoration: none; color: inherit; display: block; cursor: pointer; }
.card-link:hover { box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 18px; border-bottom: 1px solid var(--line-2);
}
.card-head h3 { margin: 0; font-size: 13px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.card-tint { background: linear-gradient(180deg, var(--surface-2), var(--surface)); }

/* ==========================================================================
   KPI / 指標タイル
   ========================================================================== */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(172px, 1fr)); gap: 12px; margin-bottom: 20px; }
.kpi-grid > * { min-width: 0; }
/* ホーム: 6 枚を 3 枚×2 段にそろえる(5+1 に割れない)。狭い幅は 2 枚×3 段。列の幅を中身に引っ張られないよう minmax(0, 1fr) */
.kpi-grid.kpi-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) {
  .kpi-grid.kpi-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi-grid.kpi-grid-3 .stat-card-value { font-size: 21px; }
}
.stat-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 15px 16px 14px; box-shadow: var(--shadow-xs); display: flex; flex-direction: column; gap: 7px;
  position: relative; overflow: hidden;
}
.stat-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.stat-card-icon { width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.stat-card-label { font-size: 11.5px; color: var(--text-2); font-weight: 700; letter-spacing: 0.005em; }
.stat-card-value { font-size: 26px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.stat-card-unit { font-size: 12px; font-weight: 700; color: var(--text-3); margin-left: 3px; letter-spacing: 0; }
.stat-card-foot { font-size: 11px; color: var(--text-3); font-weight: 600; line-height: 1.55; }
.stat-card.alert { border-color: var(--err-100); background: linear-gradient(180deg, var(--err-050), var(--surface) 70%); }
.stat-card.alert .stat-card-value { color: var(--err-700); }
.stat-card.warn { border-color: var(--warn-100); background: linear-gradient(180deg, var(--warn-050), var(--surface) 70%); }
.stat-card.warn .stat-card-value { color: var(--warn-700); }
.stat-card.good { border-color: var(--ok-100); background: linear-gradient(180deg, var(--ok-050), var(--surface) 70%); }
.stat-card.brand { border-color: var(--brand-100); background: linear-gradient(180deg, var(--brand-050), var(--surface) 70%); }
.stat-card.brand .stat-card-value { color: var(--brand-800); }

/* 大きい指標（レポートのヒーロー） */
.metric-hero {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md);
  overflow: hidden; margin-bottom: 20px; box-shadow: var(--shadow-xs);
}
.metric-cell {
  background: var(--surface); padding: 18px 20px; display: flex; flex-direction: column; gap: 6px;
  box-shadow: inset -1px 0 0 var(--line), inset 0 -1px 0 var(--line);
}
.metric-cell.dark { background: linear-gradient(160deg, var(--ink-800), var(--ink-950)); color: #fff; }
.metric-cell.dark .metric-label { color: rgba(255, 255, 255, 0.62); }
.metric-cell.dark .metric-sub { color: rgba(255, 255, 255, 0.5); }
.metric-label { font-size: 11px; font-weight: 800; letter-spacing: 0.06em; color: var(--text-3); }
.metric-value { font-size: 29px; font-weight: 800; letter-spacing: -0.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.metric-value small { font-size: 13px; font-weight: 700; margin-left: 3px; letter-spacing: 0; }
.metric-sub { font-size: 11.5px; color: var(--text-3); font-weight: 600; }

/* ==========================================================================
   テーブル
   ========================================================================== */
.table-wrap-input { max-height: 70vh; }
.table-wrap { border: 1px solid var(--line); border-radius: var(--radius-md); overflow: auto; background: var(--surface); box-shadow: var(--shadow-xs); }
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.table th {
  text-align: left; padding: 10px 14px; font-weight: 700; font-size: 11px; letter-spacing: 0.03em;
  color: var(--text-2); background: var(--surface-2); border-bottom: 1px solid var(--line);
  white-space: nowrap; position: sticky; top: 0; z-index: 1;
}
.table td { padding: 8px 10px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: var(--brand-050); }
.table tbody tr.clickable, .table tbody tr.row-click { cursor: pointer; }
.table tbody tr.row-click:hover { background: var(--brand-050); box-shadow: inset 3px 0 0 var(--brand-500); }
.table tbody tr.row-muted td { color: var(--text-3); background: var(--surface-2); }
.table tbody tr.row-flag-warn { background: var(--warn-050); }
.table tbody tr.row-flag-warn:hover { background: var(--warn-100); }
.table tbody tr.row-flag-error { background: var(--err-050); }
.table tbody tr.row-flag-error:hover { background: var(--err-100); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table .tnum { white-space: nowrap; }
.table tfoot td { padding: 8px 10px; background: var(--surface-2); font-weight: 800; border-top: 1px solid var(--line-strong); }
.row-hint { font-size: 10.5px; color: var(--text-3); font-weight: 600; }
/* 行クリックで編集できることを示すシェブロン */
.row-chevron { color: var(--line-strong); display: inline-flex; transition: transform 0.15s ease, color 0.15s ease; }
tr:hover .row-chevron { color: var(--brand-600); transform: translateX(2px); }

/* 一覧行の展開トグル(何が入っているか一覧のまま確認する用。行クリックの詳細遷移とは別操作) */
.row-expand-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  border: none; background: transparent; border-radius: var(--radius-xs); cursor: pointer; color: var(--text-3);
}
.row-expand-btn:hover { background: var(--surface-2); color: var(--text-2); }
.row-expand-btn .icon { transition: transform 0.15s ease; }
.row-expand-btn.is-open .icon { transform: rotate(180deg); }
.row-detail td { background: var(--surface-2); padding: 10px 16px 12px; }
.row-detail-list { display: flex; flex-direction: column; gap: 5px; }
.row-detail-item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 10px; font-size: 12.5px; color: var(--text-2); }
.row-detail-item .muted { color: var(--text-3); }
.row-detail-empty { font-size: 12.5px; color: var(--text-3); }

.only-desktop { display: block; }
.only-mobile { display: none; }
@media (max-width: 880px) {
  .only-desktop { display: none; }
  .only-mobile { display: block; }
}
.card-list { display: flex; flex-direction: column; gap: 9px; }
/* .only-mobile と .card-list を両方持つ要素は、上の .card-list の display: flex が .only-mobile の none に勝ち、PC の幅でも出てしまう。2 つのクラスを合わせて、順番に関係なく切り替える */
.only-mobile.card-list { display: none; }
@media (max-width: 880px) {
  .only-mobile.card-list { display: flex; }
}
.list-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 13px 15px; text-decoration: none; color: inherit; display: block; }
.list-card:active { background: var(--surface-3); }
.list-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 6px; }
.list-card-title { font-size: 14px; font-weight: 800; }
.list-card-sub { font-size: 11.5px; color: var(--text-2); }
.list-card-row { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--text-2); padding: 3px 0; }
.list-card-row b { color: var(--text); font-weight: 700; }

/* ==========================================================================
   バッジ / チップ / セグメント
   ========================================================================== */
.badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 7px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.005em; white-space: nowrap; line-height: 1.5;
}
.badge-primary { background: var(--primary-light); color: var(--ink-800); }
.badge-accent { background: var(--brand-100); color: var(--brand-800); }
.badge-coral { background: var(--accent-100); color: var(--accent-700); }
.badge-teal { background: var(--brand-100); color: var(--brand-800); }
.badge-success { background: var(--ok-100); color: var(--ok-700); }
.badge-warning { background: var(--warn-100); color: var(--warn-700); }
.badge-danger { background: var(--err-100); color: var(--err-700); }
.badge-info { background: var(--info-100); color: var(--info-700); }
.badge-muted { background: var(--surface-3); color: var(--text-2); }
.badge-outline { background: var(--surface); border: 1px solid var(--line-strong); color: var(--text-2); }
.badge-solid { background: var(--ink-800); color: #fff; }

.chem-badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 6px;
  font-size: 11px; font-weight: 800; white-space: nowrap; border: 1px solid transparent;
}
.chem-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

.chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; border: 1px solid var(--line-strong); color: var(--text-2);
  text-decoration: none; background: var(--surface); cursor: pointer; font-family: inherit;
}
.chip:hover { border-color: var(--brand-400); color: var(--brand-700); background: var(--brand-050); }
.chip.active { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }

.seg { display: inline-flex; background: var(--surface-3); border-radius: 11px; padding: 3px; gap: 2px; }
.seg-btn {
  border: none; background: transparent; padding: 6px 12px; border-radius: 8px; cursor: pointer;
  font-size: 12.5px; font-weight: 700; color: var(--text-2); font-family: inherit;
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
}
.seg-btn:hover { color: var(--text); }
.seg-btn.active { background: var(--surface); color: var(--ink-800); box-shadow: var(--shadow-sm); }

.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line); margin-bottom: 20px; overflow-x: auto; overflow-y: hidden; }
.tab {
  padding: 11px 3px; margin-right: 22px; font-size: 13.5px; font-weight: 700; color: var(--text-3);
  text-decoration: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px;
  white-space: nowrap; background: none; cursor: pointer; font-family: inherit;
}
.tab.active { color: var(--text); border-bottom-color: var(--brand-600); }
.tab:hover:not(.active) { color: var(--text-2); }

/* ==========================================================================
   空状態 / アラート
   ========================================================================== */
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 52px 24px; color: var(--text-3); text-align: center; }
.empty-state-icon {
  width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  margin-bottom: 4px; background: var(--surface-3); color: var(--text-3);
}
.empty-state-title { font-size: 14px; font-weight: 800; color: var(--text-2); }
.empty-state-desc { font-size: 12.5px; max-width: 44ch; line-height: 1.75; }

.alert-banner {
  padding: 12px 15px; margin-bottom: 14px; border-radius: var(--radius-sm); border: 1px solid;
  font-size: 12.5px; font-weight: 600; line-height: 1.65; display: flex; gap: 10px; align-items: flex-start;
}
.alert-danger { background: var(--err-050); border-color: var(--err-100); color: var(--err-700); }
.alert-warning { background: var(--warn-050); border-color: var(--warn-100); color: var(--warn-700); }
.alert-info { background: var(--info-050); border-color: var(--info-100); color: var(--info-700); }
.alert-success { background: var(--ok-050); border-color: var(--ok-100); color: var(--ok-700); }
.alert-brand { background: var(--brand-050); border-color: var(--brand-100); color: var(--brand-800); }

/* 取り消し・やり直しの案内バー */
.undo-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 11px 15px; border-radius: var(--radius-sm); background: var(--ink-800); color: #fff;
  font-size: 12.5px; font-weight: 600; margin-bottom: 14px; box-shadow: var(--shadow-md);
}
.undo-bar .btn { border-color: rgba(255, 255, 255, 0.25); }

/* ==========================================================================
   配車ボード
   ========================================================================== */
.board-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 16px; align-items: start; }
@media (max-width: 1240px) { .board-layout { grid-template-columns: minmax(0, 1fr); } }

.board-toolbar {
  position: sticky; top: 0; z-index: 25; background: var(--canvas);
  padding: 6px 0 10px; margin-bottom: 12px; border-bottom: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 9px;
}
.board-toolbar-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.board-toolbar-spacer { margin-left: auto; }

.date-pager { display: inline-flex; align-items: center; gap: 1px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); box-shadow: var(--shadow-xs); overflow: hidden; }
.date-pager-btn {
  width: 32px; height: 36px; display: flex; align-items: center; justify-content: center; border: none;
  background: transparent; cursor: pointer; color: var(--text-2); text-decoration: none; position: relative;
}
.date-pager-btn:hover { background: var(--brand-050); color: var(--brand-700); }
.date-pager-label { padding: 0 12px; font-size: 14.5px; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.date-pager-label .dow { margin-left: 3px; font-size: 12px; font-weight: 700; }
.dow-sat { color: var(--info-600); }
.dow-sun { color: var(--err-600); }

.board-stats { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.board-stat {
  display: inline-flex; align-items: baseline; gap: 4px; padding: 4px 10px; border-radius: 8px;
  background: var(--surface); border: 1px solid var(--line); font-size: 11.5px; color: var(--text-2); font-weight: 700;
}
.board-stat b { color: var(--text); font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.board-stat.is-error { background: var(--err-050); border-color: var(--err-100); color: var(--err-700); }
.board-stat.is-error b { color: var(--err-700); }
.board-stat.is-warn { background: var(--warn-050); border-color: var(--warn-100); color: var(--warn-700); }
.board-stat.is-warn b { color: var(--warn-700); }
.board-stat.is-pending { background: var(--accent-050); border-color: var(--accent-100); color: var(--accent-700); }
.board-stat.is-pending b { color: var(--accent-700); }

/* 進行状況ステッパー */
.day-steps { display: flex; align-items: center; gap: 0; flex-wrap: wrap; }
.day-step {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 14px; font-size: 11.5px; font-weight: 700;
  background: var(--surface); border: 1px solid var(--line); color: var(--text-3); position: relative;
}
.day-step:first-child { border-radius: 8px 0 0 8px; }
.day-step:last-child { border-radius: 0 8px 8px 0; }
.day-step + .day-step { border-left: none; }
.day-step.done { background: var(--ok-050); border-color: var(--ok-100); color: var(--ok-700); }
.day-step.current { background: var(--ink-800); border-color: var(--ink-800); color: #fff; }
.day-step-num {
  width: 16px; height: 16px; border-radius: 50%; background: var(--surface-3); color: var(--text-3);
  font-size: 9.5px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center;
}
.day-step.done .day-step-num { background: var(--ok-600); color: #fff; }
.day-step.current .day-step-num { background: rgba(255, 255, 255, 0.22); color: #fff; }

/* --- 車両×便グリッド --- */
.board-grid-wrap { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); overflow: auto; box-shadow: var(--shadow-xs); }
.board-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; }
.board-table th {
  background: var(--ink-850); color: #fff; padding: 9px 11px; font-size: 11px; font-weight: 700;
  text-align: left; white-space: nowrap; position: sticky; top: 0; z-index: 3; letter-spacing: 0.03em;
}
.board-table th.trip-col { text-align: center; }
.board-table td { border-bottom: 1px solid var(--line-2); border-right: 1px solid var(--line-2); padding: 0; vertical-align: top; }
.board-table td:last-child { border-right: none; }
.board-group-row td {
  background: var(--surface-3); padding: 7px 12px; font-size: 11.5px; font-weight: 800;
  color: var(--ink-800); letter-spacing: 0.02em; border-right: none; position: sticky; left: 0;
}
.board-truck-cell {
  position: sticky; left: 0; z-index: 2; background: var(--surface); min-width: 132px; max-width: 132px;
  padding: 9px 11px !important; border-right: 1px solid var(--line-strong) !important;
}
.board-truck-no { font-size: 15.5px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.board-truck-meta { font-size: 10.5px; color: var(--text-3); font-weight: 700; margin-top: 2px; }
.board-truck-tank { font-size: 10.5px; font-weight: 800; margin-top: 4px; display: inline-flex; align-items: center; gap: 4px; }
.board-driver-cell {
  position: sticky; left: 132px; z-index: 2; background: var(--surface); min-width: 100px; max-width: 100px;
  padding: 9px 9px !important; border-right: 1px solid var(--line-strong) !important;
}
.board-driver-cell.is-clickable { cursor: pointer; }
.board-driver-cell.is-clickable:hover { background: var(--brand-050); }
.board-driver-name { font-size: 13px; font-weight: 800; }
.board-driver-start { font-size: 11px; color: var(--text-2); font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 2px; }
.board-trip-cell { min-width: 214px; padding: 5px !important; }
.board-trip-cell.drop-active { background: var(--brand-050); box-shadow: inset 0 0 0 2px var(--brand-500); }
.board-trip-cell.drop-blocked { background: var(--err-050); box-shadow: inset 0 0 0 2px var(--err-600); }
.board-row-off td { background: repeating-linear-gradient(135deg, var(--surface-3) 0 7px, var(--surface-2) 7px 14px); }
.board-row-active .board-truck-cell, .board-row-active .board-driver-cell { background: var(--surface-2); }

.trip-card {
  border: 1px solid var(--line); border-left: 4px solid var(--line-strong); border-radius: var(--radius-xs);
  background: var(--surface); padding: 7px 9px; cursor: grab; display: flex; flex-direction: column; gap: 3px;
  box-shadow: var(--shadow-xs);
}
.trip-card:hover { box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.trip-card.dragging { opacity: 0.35; }
.trip-card.has-error { background: var(--err-050); border-color: var(--err-100); }
.trip-card.has-warn { background: var(--warn-050); border-color: var(--warn-100); }
.trip-card-top { display: flex; align-items: center; gap: 5px; }
.trip-card-time { font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.trip-card-dest { font-size: 12px; font-weight: 700; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.trip-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 10.5px; color: var(--text-2); font-weight: 700; }
.trip-card-qty { font-variant-numeric: tabular-nums; }
.trip-empty {
  border: 1px dashed var(--line-strong); border-radius: var(--radius-xs); padding: 11px 8px;
  color: var(--text-3); font-size: 11px; background: transparent; width: 100%;
  cursor: pointer; font-family: inherit; display: flex; align-items: center; justify-content: center;
  gap: 4px; white-space: nowrap; min-height: 48px; font-weight: 700;
}
.trip-empty:hover { border-color: var(--brand-500); border-style: solid; color: var(--brand-700); background: var(--brand-050); }

/* 凡例 */
.board-legend { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; font-size: 11px; color: var(--text-3); font-weight: 600; }
.board-legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend-swatch { width: 12px; height: 12px; border-radius: 3px; border: 1px solid var(--line-strong); }

/* --- 未配車パネル --- */
.pending-panel {
  border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface);
  box-shadow: var(--shadow-xs); position: sticky; top: 82px; max-height: calc(100vh - 106px);
  display: flex; flex-direction: column; overflow: hidden;
}
.pending-head { padding: 13px 14px; border-bottom: 1px solid var(--line); background: linear-gradient(160deg, var(--accent-050), var(--surface)); }
.pending-title { font-size: 13px; font-weight: 800; display: flex; align-items: center; gap: 7px; }
.pending-count { background: var(--accent-600); color: #fff; border-radius: 999px; padding: 1px 9px; font-size: 11.5px; font-weight: 800; }
.pending-count.zero { background: var(--ok-600); }
.pending-body { flex: 1; overflow-y: auto; padding: 9px; display: flex; flex-direction: column; gap: 7px; }
.pending-group {
  display: flex; align-items: center; gap: 7px; padding: 6px 4px 3px; font-size: 11px; font-weight: 800;
  color: var(--text-2); position: sticky; top: -9px; background: var(--surface); z-index: 1;
}
.pending-group-line { flex: 1; height: 1px; background: var(--line); }
.pending-card {
  border: 1px solid var(--line); border-left: 4px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface); padding: 9px 10px; cursor: grab; display: flex; flex-direction: column; gap: 5px;
}
.pending-card:hover { box-shadow: var(--shadow-sm); border-color: var(--line-strong); }
.pending-card.dragging { opacity: 0.35; }
.pending-card.is-overdue { background: var(--err-050); border-color: var(--err-100); }
.pending-card.is-today { background: var(--accent-050); border-color: var(--accent-100); }
.pending-card-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.pending-slip { font-size: 10.5px; color: var(--text-3); font-weight: 700; font-variant-numeric: tabular-nums; }
.pending-dest { font-size: 12.5px; font-weight: 800; line-height: 1.35; }
.pending-meta { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; font-size: 10.5px; color: var(--text-2); font-weight: 700; }
.pending-actions { display: flex; gap: 5px; margin-top: 2px; }

/* --- タイムライン（ドラッグで移動・端をドラッグで時間調整） --- */
.timeline-wrap { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); overflow: auto; box-shadow: var(--shadow-xs); user-select: none; }
.timeline-head { display: flex; position: sticky; top: 0; z-index: 4; background: var(--ink-850); color: #fff; }
.timeline-label-col {
  min-width: 148px; max-width: 148px; flex-shrink: 0; padding: 8px 11px; font-size: 11px; font-weight: 700;
  position: sticky; left: 0; background: var(--ink-850); z-index: 5;
}
.timeline-hours { display: flex; flex: 1; min-width: 960px; }
.timeline-hour { flex: 1; font-size: 10px; font-weight: 700; text-align: center; padding: 8px 0; border-left: 1px solid rgba(255, 255, 255, 0.13); font-variant-numeric: tabular-nums; }
.timeline-row { display: flex; border-bottom: 1px solid var(--line-2); min-height: 46px; }
.timeline-row:hover { background: var(--brand-050); }
.timeline-row.is-drop { background: var(--brand-050); box-shadow: inset 0 0 0 2px var(--brand-400); }
.timeline-row-label {
  min-width: 148px; max-width: 148px; flex-shrink: 0; padding: 7px 11px; position: sticky; left: 0;
  background: var(--surface); z-index: 2; border-right: 1px solid var(--line-strong);
}
.timeline-track {
  flex: 1; position: relative; min-width: 960px;
  background-image: repeating-linear-gradient(to right, var(--line-2) 0 1px, transparent 1px calc(100% / 24));
  background-size: calc(100% / 24) 100%;
}
.timeline-bar {
  position: absolute; top: 7px; height: 30px; border-radius: 7px; border: 1px solid;
  display: flex; align-items: center; padding: 0 8px; font-size: 10.5px; font-weight: 800;
  overflow: hidden; white-space: nowrap; cursor: grab; box-shadow: var(--shadow-xs); min-width: 26px;
}
.timeline-bar:hover { box-shadow: var(--shadow-md); z-index: 3; }
.timeline-bar.dragging { opacity: 0.6; cursor: grabbing; box-shadow: var(--shadow-lg); z-index: 6; }
.timeline-bar.has-error { border-color: var(--err-600) !important; }
.timeline-bar-handle {
  position: absolute; top: 0; bottom: 0; width: 9px; cursor: ew-resize; display: flex; align-items: center; justify-content: center;
}
.timeline-bar-handle::after { content: ''; width: 2px; height: 12px; border-radius: 1px; background: currentColor; opacity: 0.45; }
.timeline-bar-handle.left { left: 0; }
.timeline-bar-handle.right { right: 0; }
.timeline-bar:hover .timeline-bar-handle::after { opacity: 0.85; }
.timeline-now { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--accent-600); z-index: 3; }
.timeline-now::before {
  content: ''; position: absolute; top: -3px; left: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-600);
}
.timeline-ghost {
  position: absolute; top: 7px; height: 30px; border-radius: 7px; border: 2px dashed var(--brand-500);
  background: var(--brand-050); z-index: 5; pointer-events: none;
  display: flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 800; color: var(--brand-800);
}
.timeline-hint {
  display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--text-2);
  background: var(--brand-050); border: 1px solid var(--brand-100); border-radius: var(--radius-sm);
  padding: 9px 13px; margin-bottom: 10px; font-weight: 600;
}

/* ==========================================================================
   モーダル
   ========================================================================== */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(9, 13, 20, 0.55); z-index: 60;
  display: flex; align-items: center; justify-content: center; padding: 18px; animation: fade-in 140ms ease;
  backdrop-filter: blur(3px);
}
.modal-card {
  width: 100%; max-width: 470px; background: var(--surface); border-radius: var(--radius-lg); padding: 22px;
  max-height: calc(100vh - 36px); overflow-y: auto; box-shadow: var(--shadow-lg);
  animation: modal-in 200ms cubic-bezier(0.2, 0.9, 0.3, 1);
}
.modal-card.lg { max-width: 760px; }
.modal-card.xl { max-width: 1060px; }
.modal-title { font-size: 16px; font-weight: 800; margin: 0 0 4px; display: flex; align-items: center; gap: 8px; letter-spacing: -0.015em; }
.modal-sub { font-size: 12px; color: var(--text-2); margin: 0 0 18px; line-height: 1.65; }
.modal-actions { display: flex; gap: 9px; justify-content: flex-end; margin-top: 22px; flex-wrap: wrap; align-items: center; }
@keyframes fade-in { from { opacity: 0 } to { opacity: 1 } }
@keyframes modal-in { from { opacity: 0; transform: translateY(14px) scale(0.985) } to { opacity: 1; transform: none } }
@media (max-width: 600px) {
  .modal-overlay { align-items: flex-end; padding: 0; }
  .modal-card { max-width: none; border-radius: var(--radius-xl) var(--radius-xl) 0 0; padding-bottom: calc(22px + env(safe-area-inset-bottom)); }
  .modal-actions .btn { flex: 1; }
}

/* ==========================================================================
   トースト / 先頭へ戻る
   ========================================================================== */
.toaster { position: fixed; right: 22px; bottom: 22px; z-index: 200; display: flex; flex-direction: column; gap: 8px; max-width: min(420px, calc(100vw - 32px)); }
.toast-item {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--radius-sm);
  border: 1px solid; box-shadow: var(--shadow-lg); animation: toast-in 220ms cubic-bezier(0.2, 0.9, 0.3, 1); background: var(--surface);
}
@keyframes toast-in { from { opacity: 0; transform: translateY(12px) scale(0.98) } to { opacity: 1; transform: none } }
@media (max-width: 880px) {
  .toaster { right: 12px; left: 12px; bottom: calc(78px + env(safe-area-inset-bottom)); max-width: none; }
}

.scroll-top-btn {
  position: fixed; right: 20px; bottom: 20px; z-index: 30; width: 44px; height: 44px; border-radius: 14px;
  background: var(--ink-800); color: #fff; border: none; cursor: pointer; box-shadow: var(--shadow-lg);
  display: flex; align-items: center; justify-content: center; animation: fade-in 180ms ease;
}
.scroll-top-btn:hover { background: var(--ink-900); }
.scroll-top-btn.lifted { bottom: calc(80px + env(safe-area-inset-bottom)); }

/* ==========================================================================
   フィルタ
   ========================================================================== */
.filter-panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 13px 15px; margin-bottom: 16px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow-xs);
}
.filter-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* 入力欄は既定で幅100%のため、そのままだと絞り込みの項目が1つずつ縦に並ぶ。PC幅では内容に合わせて横に並べる(960px以下は下のメディアクエリで100%に戻す) */
.filter-row > .select-input, .filter-row > .text-input { width: auto; }
.filter-label { font-size: 11px; font-weight: 800; color: var(--text-3); letter-spacing: 0.03em; }
.filter-toggle { display: none; }
@media (max-width: 960px) {
  .filter-toggle {
    display: flex; align-items: center; gap: 8px; width: 100%; margin-bottom: 12px; padding: 11px 13px;
    border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: var(--surface);
    font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; box-shadow: var(--shadow-xs); text-align: left;
  }
  .filter-toggle-range { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--text-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
  .filter-panel { display: none; }
  .filter-panel.open { display: flex; }
  .filter-panel .select-input, .filter-panel .text-input { width: 100% !important; }
  .filter-row > .seg { width: 100%; }
  .filter-row > .seg .seg-btn { flex: 1; justify-content: center; }
}

/* ==========================================================================
   マトリクス（乗務員×車両 / 公休カレンダー）
   ========================================================================== */
.matrix-wrap { overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-xs); }
.matrix { border-collapse: separate; border-spacing: 0; font-size: 11.5px; }
.matrix th, .matrix td { border-bottom: 1px solid var(--line-2); border-right: 1px solid var(--line-2); padding: 5px 7px; text-align: center; white-space: nowrap; }
.matrix th.row-head, .matrix td.row-head {
  position: sticky; left: 0; background: var(--surface); text-align: left; font-weight: 800;
  min-width: 108px; z-index: 2; border-right: 1px solid var(--line-strong);
}
.matrix thead th { position: sticky; top: 0; background: var(--surface-2); z-index: 3; font-weight: 700; color: var(--text-2); }
.matrix thead th.row-head { z-index: 4; }
.matrix td.on { background: var(--brand-050); }
.matrix tbody tr:hover td { background: var(--surface-2); }
.matrix tbody tr:hover td.on { background: var(--brand-100); }
.matrix input[type="checkbox"] { width: 15px; height: 15px; }

/* ==========================================================================
   取込プレビュー
   ========================================================================== */
.import-textarea {
  width: 100%; min-height: 200px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; line-height: 1.7; padding: 13px; border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); background: var(--surface-2); resize: vertical; color: var(--text);
}
.import-textarea:focus { border-color: var(--brand-500); box-shadow: var(--ring); outline: none; background: var(--surface); }
.import-row-error { background: var(--err-050) !important; }
.import-row-warn { background: var(--warn-050) !important; }

/* 手入力の明細行 */
.entry-row {
  display: grid; grid-template-columns: 26px 1.1fr 1.4fr 1.2fr 0.8fr 0.9fr 0.7fr 0.8fr 34px;
  gap: 7px; align-items: center; padding: 7px 0;
}
.entry-head { display: grid; grid-template-columns: 26px 1.1fr 1.4fr 1.2fr 0.8fr 0.9fr 0.7fr 0.8fr 34px; gap: 7px; font-size: 10.5px; font-weight: 800; color: var(--text-3); letter-spacing: 0.03em; padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.entry-row + .entry-row { border-top: 1px solid var(--line-2); }
.entry-index { font-size: 11px; font-weight: 800; color: var(--text-3); text-align: center; }
@media (max-width: 1080px) {
  .entry-head { display: none; }
  .entry-row {
    grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px; border: 1px solid var(--line);
    border-radius: var(--radius-sm); margin-bottom: 10px; background: var(--surface-2);
  }
  .entry-row + .entry-row { border-top: 1px solid var(--line); }
  .entry-index { text-align: left; grid-column: 1 / -1; }
}

/* ==========================================================================
   レポート
   ========================================================================== */
.report-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; }
.report-grid > * { min-width: 0; }
.chart-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-xs); overflow: hidden; }
.chart-body { padding: 16px 18px 18px; }

/* 縦棒グラフ */
.bars { display: flex; align-items: flex-end; gap: 8px; height: 170px; }
.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.bar-val { font-size: 10.5px; font-weight: 800; color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bar-stack { width: 100%; max-width: 46px; display: flex; flex-direction: column; justify-content: flex-end; flex: 1; }
.bar-seg { border-radius: 5px 5px 0 0; transition: opacity 0.15s ease; }
.bar-col:hover .bar-seg { opacity: 0.82; }
.bar-label { font-size: 10.5px; color: var(--text-3); font-weight: 700; white-space: nowrap; }
.bar-label.is-now { color: var(--accent-700); }

/* 横棒ランキング */
.rank-list { display: flex; flex-direction: column; }
.rank-row { display: grid; grid-template-columns: 22px minmax(84px, 1.1fr) minmax(0, 2fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line-2); }
.rank-row:last-child { border-bottom: none; }
.rank-no { font-size: 11px; font-weight: 800; color: var(--text-3); text-align: center; font-variant-numeric: tabular-nums; }
.rank-name { font-size: 12.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-name small { display: block; font-size: 10px; color: var(--text-3); font-weight: 600; }
.rank-track { height: 9px; border-radius: 5px; background: var(--surface-3); overflow: hidden; }
.rank-fill { height: 100%; border-radius: 5px; }
.rank-value { font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.rank-value small { display: block; font-size: 10px; color: var(--text-3); font-weight: 600; }

/* ドーナツ */
.donut-wrap { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.donut-legend { flex: 1; min-width: 168px; display: flex; flex-direction: column; gap: 6px; }
.donut-legend-row { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.donut-legend-row b { margin-left: auto; font-weight: 800; font-variant-numeric: tabular-nums; }
.donut-legend-row span.pct { font-size: 10.5px; color: var(--text-3); font-weight: 700; min-width: 38px; text-align: right; }

/* ヒートマップ（曜日×時間帯） */
.heat-grid { display: grid; gap: 3px; }
.heat-cell { border-radius: 4px; aspect-ratio: 1.6; display: flex; align-items: center; justify-content: center; font-size: 9.5px; font-weight: 800; }
.heat-axis { font-size: 10px; color: var(--text-3); font-weight: 700; display: flex; align-items: center; justify-content: center; }

/* ==========================================================================
   乗務員スマホUI
   ========================================================================== */
.driver-nav {
  position: sticky; bottom: 0; left: 0; right: 0; z-index: 40; display: flex;
  background: var(--surface); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom);
}
.driver-nav a {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 4px;
  font-size: 10.5px; font-weight: 700; color: var(--text-3); text-decoration: none;
}
.driver-nav a.active { color: var(--brand-700); }
.driver-trip {
  border: 1px solid var(--line); border-left: 5px solid var(--line-strong); border-radius: var(--radius-md);
  background: var(--surface); padding: 14px 15px; box-shadow: var(--shadow-xs);
}
.driver-trip-time { font-size: 21px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
.driver-trip-dest { font-size: 15.5px; font-weight: 800; line-height: 1.4; margin: 4px 0 2px; }

/* ==========================================================================
   印刷帳票
   ========================================================================== */
.print-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 20px; background: var(--canvas); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 30; flex-wrap: wrap;
}
/* 題名は折り返さず縮めない。右の操作は項目の組ごとに次の行へ回す(画面だけ。紙面は .no-print で出ない) */
.print-toolbar-title { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.print-toolbar-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.print-toolbar-actions > *, .print-toolbar-actions label { white-space: nowrap; }
.print-sheet { background: #fff; color: #000; margin: 0 auto 22px; box-shadow: var(--shadow-md); }
.print-sheet.a4-landscape { width: 297mm; padding: 10mm; }
.print-sheet.a4-portrait { width: 210mm; padding: 10mm; }
.print-scroll { overflow-x: auto; padding-bottom: 10px; }

.print-table { width: 100%; border-collapse: collapse; font-size: 9.5pt; }
.print-table th, .print-table td { border: 0.6pt solid #000; padding: 2pt 3pt; vertical-align: middle; }
.print-table th { background: #EAEAEA; font-weight: 700; text-align: center; font-size: 8.5pt; }
.print-table td.c { text-align: center; }
.print-table td.r { text-align: right; }
.print-table .truck-cell { font-weight: 700; text-align: center; font-size: 11pt; }
.print-table tr.truck-first td { border-top: 1.2pt solid #000; }
/* 固定の行の表(2026-10-15。docs/07_帳票.md「帳票の固定の行と余白の統一」)。行の高さをそろえ、セルの文字は折り返さない */
.print-table.print-fixed th, .print-table.print-fixed td { white-space: nowrap; line-height: 1.2; }
.print-table.print-fixed tbody tr { height: 5.5mm; }
/* 列の幅: 折り返さない列は中身の幅まで縮め(width:1%)、余りは長い文字の列(td.clip)が受け取る。品名(.clip-main)をいちばん広くする */
.print-table.print-fixed td { width: 1%; }
.print-table.print-fixed td.clip { width: 10%; max-width: 0; overflow: hidden; text-overflow: ellipsis; }
.print-table.print-fixed td.clip-main { width: 40%; }
/* 規格の列を広げ、品名を狭める(2026-10-28 お客様の回答 No.1。入庫報告書(標準)・在庫証明書・名義変更確認通知書。2026-10-30 に請求書・出庫報告書・入庫依頼書も同じにした) */
.print-table.print-fixed.spec-wide td.clip-main { width: 30%; }
.print-table.print-fixed.spec-wide td.col-spec { width: 12%; }
/* 請求書の元個数・在庫数の列を上期・下期取扱数と同じ幅にする(2026-10-31 お客様のご依頼。見出し「上期取扱数」の 5 文字分) */
.invoice-table th[data-col="initial"], .invoice-table th[data-col="stock_qty"] { min-width: calc(5em + 6.8pt); }
/* 請求書の 1 枚目の窓付き封筒の窓(2026-10-30。幅 90mm × 高さ 45mm)。
   お客様のプリンタで窓と宛先が合わなければ、ここの 5 つの値だけを直す。
   値は用紙の端からではなく本文の左上(用紙の端から 10mm の印刷の余白の内側)からの距離: 用紙の左 20mm・上 9mm の窓 = left 10mm・top -1mm。
   --win-pad は窓の枠から宛先までの余白(ずれても窓から外れない分) */
.invoice-head { --win-left: 10mm; --win-top: -1mm; --win-w: 90mm; --win-h: 45mm; --win-pad: 4mm; position: relative; min-height: calc(var(--win-top) + var(--win-h) + 2mm); margin-bottom: 2mm; }
.invoice-window { position: absolute; left: var(--win-left); top: var(--win-top); width: var(--win-w); height: var(--win-h); box-sizing: border-box; padding: var(--win-pad); }
.invoice-head-title { position: absolute; left: calc(var(--win-left) + var(--win-w) + 4mm); top: 0; margin: 0; font-size: 20px; font-weight: 700; white-space: nowrap; }
/* 用紙の行間を固定する。指定が無いと行間がフォント任せになり、お客様の Windows(Yu Gothic UI・メイリオ)で表の上下の高さが mac(ヒラギノ。標準 1.5)とずれ、固定の行数が 1 枚に入らなくなりうる(2026-10-15) */
.print-sheet { line-height: 1.5; }
/* fitPrintCells が紙と同じ幅で測るための一時的な指定 */
.fit-printing .print-sheet .no-print { display: none !important; }
.fit-printing .print-sheet { border: none; }
/* はみ出す文字は public/js/app.js の fitPrintCells が縮める。「…」は JS が動かないときの保険 */
/* 表の上の項目の長い文字(依頼の備考)を 1 行にする */
.print-oneline { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.print-page-no { font-size: 9pt; white-space: nowrap; }

.print-title { font-size: 19pt; font-weight: 700; letter-spacing: 0.5em; text-align: center; margin: 0; }
.print-signbox { border: 0.8pt solid #000; display: grid; grid-template-columns: 1fr 1fr; font-size: 8.5pt; }
.print-signbox > div { border-right: 0.8pt solid #000; }
.print-signbox > div:last-child { border-right: none; }
.print-signbox-label { border-bottom: 0.8pt solid #000; text-align: center; padding: 1.5pt; background: #EAEAEA; }
.print-signbox-space { height: 15mm; }

/* 入出庫依頼書・報告書は1枚に同一内容を3部(現場控え・事務控え・お客様控え)刷る運用のため、
   1枚のprint-sheetの中に3つの複写ブロックを縦に並べる(2026-08-07打合せで確認済みの運用)。 */
.triplicate-copy { padding: 4mm 0; }
.triplicate-copy + .triplicate-copy { border-top: 1px dashed #999; }
.triplicate-copy-label { font-size: 8.5pt; color: #666; text-align: right; margin-bottom: 2mm; }

/* 出庫依頼書専用: A4縦1枚(印刷可能高さ281mm・幅194mm)に3段収めるため、1段を約93mm以内に詰める(2026-10-15 に横から縦へ) */
.triplicate-copy.out-req { padding: 1mm 0; }
.out-req-head { display: flex; align-items: baseline; gap: 6mm; }
.out-req-title { font-size: 13pt; font-weight: 700; white-space: nowrap; }
.out-req-to { font-size: 10.5pt; font-weight: 700; border-bottom: 1.5pt solid #000; white-space: nowrap; }
.out-req-company { margin-left: auto; text-align: right; font-size: 8pt; line-height: 1.35; }
.out-req-fields { display: flex; flex-wrap: wrap; gap: 0.5mm 6mm; font-size: 9pt; margin: 1.5mm 0; line-height: 1.3; }
.out-req-f { display: flex; gap: 1.5mm; align-items: baseline; }
.out-req-f .field-label { margin: 0; font-size: 8pt; flex-shrink: 0; white-space: nowrap; }
.print-table.out-req-table { font-size: 8.5pt; }
.out-req-table th, .out-req-table td { padding: 1pt 3pt; }
.out-req-table th { font-size: 8pt; }
.out-req-table.print-fixed tbody tr { height: 4.5mm; }
.out-req-head .print-page-no { margin-left: 3mm; font-size: 8pt; }
.out-req-table td.c, .out-req-table td.r, .out-rep-table td.c, .out-rep-table td.r { white-space: nowrap; } /* 出庫報告書も日付・数・荷姿を折り返さない(2026-10-15) */
.out-req-sign { display: flex; gap: 3mm; align-items: baseline; justify-content: flex-end; margin-top: 0.5mm; font-size: 9pt; }
.out-req-sign span { display: inline-block; width: 38mm; border-bottom: 0.6pt solid #000; }
/* ドライバーのサイン欄は枠にして大きくする(2026-10-16 お客様の要望。高さ 22mm・幅 70mm)。携帯・車番は下の線にそろえる */
.out-req-sign { align-items: flex-end; }
.out-req-sign span.out-req-sign-box { width: 70mm; height: 22mm; border: 0.6pt solid #000; }
.out-req-slip-from { text-align: right; margin-top: 0.5mm; font-size: 10pt; font-weight: 700; }
.out-req-x { margin-left: 2px; padding: 0 3px; border: 0; background: none; color: #c00; cursor: pointer; font-size: 9pt; line-height: 1; }
@media screen {
  .print-editable [contenteditable] { outline: 1px dashed #5b8def; outline-offset: -2px; }
  .print-editable [contenteditable]:focus { background: #fffbe6; }
}

@media print {
  .triplicate-copy { break-inside: avoid; }
  /* 全帳票を横向き(landscape)で印刷する(出庫依頼書だけはビューの中で縦に上書きする。docs/07_帳票.md「3-3」)。用紙選択ダイアログの既定値もこれで横向きになる */
  @page { size: landscape; margin: 10mm; }
  .no-print { display: none !important; }
  /* 画面用の html, body { height: 100% } が紙面でも 1 ページ分の箱になり、白紙の 2 枚目を押し出していた(2026-10-15) */
  html, body { height: auto; }
  body { background: #fff; }
  /* 画面用の .card の枠線を紙に出さない(2026-10-15 ユーザー指摘) */
  .print-sheet { box-shadow: none; border: none; border-radius: 0; margin: 0; width: auto !important; padding: 0 !important; }
  .print-sheet + .print-sheet { page-break-before: always; }
  .print-toolbar { display: none !important; }
  .print-scroll { overflow: visible !important; padding: 0 !important; }
}

/* ==========================================================================
   アプリの外枠（サイドバー・ドロワー・通知）
   元のReactコンポーネントがインラインで持っていたスタイルを、
   Bladeから使えるようクラスとして起こしたもの。見た目は元と同じ。
   ========================================================================== */
.desktop-sidebar {
  width: var(--sidebar-w); flex-shrink: 0;
  background: linear-gradient(180deg, var(--ink-850) 0%, var(--ink-950) 100%);
  flex-direction: column; position: sticky; top: 0; height: 100vh;
  overflow-y: auto; overflow-x: hidden;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}
.sidebar-brand { display: flex; align-items: center; gap: 11px; text-decoration: none; padding: 19px 18px 15px; }
.sidebar-brand-mark {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 11px;
  background: linear-gradient(140deg, var(--brand-400), var(--brand-700));
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 12px rgba(15, 173, 198, 0.35);
}
.sidebar-brand-title { display: block; font-weight: 800; font-size: 13.5px; color: #fff; line-height: 1.2; letter-spacing: 0.005em; }
.sidebar-brand-sub { display: block; font-size: 10.5px; color: rgba(255, 255, 255, 0.46); font-weight: 600; margin-top: 2px; }
.sidebar-nav { flex: 1; padding: 4px 12px 16px; display: flex; flex-direction: column; gap: 15px; }
.sidebar-group { font-size: 10px; font-weight: 800; letter-spacing: 0.11em; color: rgba(255, 255, 255, 0.32); padding: 0 10px 6px; }
.sidebar-group-items { display: flex; flex-direction: column; gap: 1px; }
.sidebar-link {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px;
  font-size: 12.8px; font-weight: 600; color: rgba(255, 255, 255, 0.66);
  background: transparent; text-decoration: none; width: 100%;
}
.sidebar-link.is-active { font-weight: 800; color: #fff; background: rgba(255, 255, 255, 0.1); }
.sidebar-foot {
  padding: 13px 15px; border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: rgba(0, 0, 0, 0.2);
}
.sidebar-foot-name { font-size: 12.5px; font-weight: 700; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-foot-role { font-size: 10.5px; color: rgba(255, 255, 255, 0.46); font-weight: 600; }
.sidebar-logout {
  width: 31px; height: 31px; border-radius: 9px; background: rgba(255, 255, 255, 0.1);
  color: #fff; border: none; display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
}
.sidebar-logout:hover { background: rgba(255, 255, 255, 0.2); }

/* 通知（トースト） */
.toast-item > .toast-close { background: none; border: none; color: inherit; cursor: pointer; display: flex; padding: 0; }
.toast-item > .toast-msg { flex: 1; font-weight: 700; font-size: 12.5px; line-height: 1.55; white-space: pre-line; }

/* ログイン画面 */
.login-bg {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 20px; overflow-y: auto;
  background: radial-gradient(1200px 600px at 15% -10%, #002450 0%, transparent 55%),
              linear-gradient(160deg, var(--ink-850) 0%, var(--ink-950) 70%, #00060F 100%);
}
.login-mark {
  width: 54px; height: 54px; border-radius: 16px;
  background: linear-gradient(140deg, var(--brand-400), var(--brand-700));
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(15, 173, 198, 0.42);
}

/* hidden属性を確実に効かせる（.modal-overlay 等は display を指定しているため、
   HTMLのhiddenだけでは隠れない） */
[hidden] { display: none !important; }

/* 帳票の見出し・脚注（配車表／請求書／回答書で共通） */
.print-head { display: flex; align-items: flex-start; gap: 6mm; margin-bottom: 4mm; }
.print-head > :first-child { flex: 1; min-width: 0; }
.print-date { font-size: 10.5pt; font-weight: 700; text-align: center; margin-top: 1mm; }
.print-company { font-size: 8.5pt; line-height: 1.5; text-align: right; white-space: nowrap; }
.print-notes { margin-top: 3mm; font-size: 8.5pt; line-height: 1.7; border-top: 0.8pt solid #000; padding-top: 2mm; }

/* 配車ボードの操作中の見た目 */
.pending-card.is-dragging { opacity: 0.45; }
.trip-card-qty.is-diff { color: var(--warn-700); font-weight: 800; }
.trip-card-qty.is-diff small { display: block; font-size: 9.5px; font-weight: 700; }

/* 依頼1件の編集：左に依頼の内容と回答、右に配車状況・納品先の情報を並べる */
.order-detail-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1080px) { .order-detail-grid { grid-template-columns: minmax(0, 1fr); } }

/* 編集カード: 背の低いカード(単価・譲渡元・起算日)を左に積み、背の高い凍結日のカードを右に置いて、左右の下端をそろえる */
.form-grid.lot-edit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto 1fr; gap: 16px; align-items: start; }
.lot-edit-grid > .card { grid-column: 1; }
.lot-edit-grid > .card.lot-edit-frozen { grid-column: 2; grid-row: 1 / span 3; align-self: stretch; }
.lot-edit-grid > .card:last-child { align-self: stretch; }
@media (max-width: 960px) {
  .form-grid.lot-edit-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .lot-edit-grid > .card.lot-edit-frozen { grid-column: 1; grid-row: auto; }
}

/* 在庫詳細の数字のパネル(5枚を1行に。狭い画面では折り返す) */
.form-grid.lot-stat-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); margin-bottom: 16px; }
/* 6 枚を 1 行に並べるのは広い画面だけ(狭いと数字が枠からはみ出す)。それ以下は 3 列 × 2 段 */
@media (max-width: 1279px) { .form-grid.lot-stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .form-grid.lot-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* 右端のパネルの吹き出しは右そろえ(画面の外にはみ出さない) */
.lot-stat-grid > .stat-card:last-child .field-tip[data-tip]::after { left: auto; right: 0; transform: none; }
/* パネルの枠は overflow:hidden なので、吹き出しが切れないよう在庫詳細のパネルだけ見せる */
.lot-stat-grid > .stat-card { overflow: visible; }
.chart-card-link { text-decoration: none; color: inherit; display: block; transition: box-shadow .15s, transform .15s; }
.chart-card-link:hover { box-shadow: var(--shadow-md); }

/* 社印(在庫証明書・名義変更確認通知書)。差出人ブロックの左寄りに重ねる */
.print-seal { position: absolute; right: 0; top: -0.5mm; width: 21mm; height: 21mm; mix-blend-mode: multiply; pointer-events: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; }

/* 在庫証明書・名義変更確認通知書の表(2026-10-22 見本): 文字を大きく・行を高く・見出しは中央で太くしない */
.print-table.print-fixed.print-big { font-size: 10.5pt; }
.print-table.print-fixed.print-big th { font-size: 10.5pt; font-weight: 400; }
.print-table.print-fixed.print-big tbody tr { height: 6mm; }