:root{
  --bg:#f7fafd;--card:#fff;--line:#b9c3d0;--text:#0f172a;--muted:#64748b;--primary:#217be3;
  --pill:#eef2ff;--bad:#fee2e2;--soon:#fff7ed;
}
*{box-sizing:border-box}
body{margin:0;font-family:"Yu Gothic","Meiryo",system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text)}
header{position:sticky;top:0;z-index:10;background:var(--card);border-bottom:1px solid var(--line)}
.container{max-width:100vw;margin:0 auto;padding:12px}
h1{margin:0 0 8px;font-size:18px}
.controls{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:8px 0 12px}
select,input[type="text"],input[type="date"],button{padding:6px 10px;border:1px solid var(--line);background:#fff;border-radius:8px;font-size:14px}
button.primary{background:var(--primary);color:#fff;border-color:var(--primary);cursor:pointer}
button.ghost{background:#fff;color:#0f172a;cursor:pointer}
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.tab{padding:8px 12px;border:1px solid var(--line);border-bottom-width:2px;border-radius:10px;background:#fff;cursor:pointer}
.tab.active{border-color:var(--primary);color:var(--primary);font-weight:700}
main{padding:12px}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.tablewrap{overflow:auto;max-height:64vh}
table{width:100%;border-collapse:collapse;font-size:13px;min-width:1380px}
th,td{border-bottom:1px solid var(--line);padding:8px 10px;text-align:left;background:#fff;vertical-align:top}
thead th{position:sticky;top:0;z-index:2;background:#f1f5f9}
tbody tr:hover{background:#f8fafc;cursor:pointer}
.right{text-align:right}
.warnings{background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 12px;margin:8px}
.due-bad{background:var(--bad)}
.due-soon{background:var(--soon)}
.toast{position:fixed;right:16px;bottom:16px;background:#111;color:#fff;padding:10px 12px;border-radius:10px;opacity:.92}
.hidden{display:none!important}

#jobsTable th.sticky-left,#jobsTable td.sticky-left{position:sticky;left:0;background:#fff;z-index:1;box-shadow:2px 0 0 #e2e8f0}
.jno{display:flex;align-items:center;gap:8px;white-space:nowrap}
.thumb{width:34px;height:26px;object-fit:cover;border:1px solid #cbd5e1;border-radius:4px}
.thumb.pdf{display:inline-flex;align-items:center;justify-content:center;background:#e2e8f0;font-size:10px;width:34px;height:26px;border:1px solid #cbd5e1;border-radius:4px}
.stacked{display:flex;flex-direction:column;gap:2px}
.stacked .pill{font-size:11px;padding:1px 6px}
.pill{display:inline-block;padding:2px 6px;border-radius:999px;font-size:12px;background:var(--pill)}
.muted{color:var(--muted)}
.subtle{font-size:12px;color:var(--muted)}
th.sortable{cursor:pointer}
th.sortable .arrow{margin-left:6px;font-size:10px;color:#666}
.section-head{display:flex;gap:8px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line);background:#f8fafc}
.section-body{padding:10px 14px}
.row{display:flex;gap:8px;align-items:center}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px}
.spacer{flex:1 1 auto}
.settings{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:10px;padding:4px 8px}
.tagbox{display:flex;flex-wrap:wrap;gap:6px;align-items:center;border:1px solid var(--line);border-radius:8px;padding:6px 8px;min-height:38px}
.tag{background:#eef2ff;border:1px solid #cbd5e1;border-radius:999px;padding:2px 8px;font-size:12px;display:inline-flex;gap:6px;align-items:center}
.tag .x{cursor:pointer}
.tagbox input{border:none;outline:none;min-width:120px;padding:4px 2px}
.ship-toggle{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:50%;cursor:pointer;user-select:none;background:#fff}
.ship-toggle.on{background:#e6ffe9;border-color:#7dcf8a;font-weight:700}

/* モバイル対策：品名/備考など長文でも折返し */
td, th { word-break: break-word; }

/* --- 締切アラート行 ------------------------------- */
tr.due-bad      td { background:#fee2e2 !important; }   /* 期限切れ   */
tr.due-soon     td { background:#fff7ed !important; }   /* まもなく期限 */

/* --- 出荷報告トグル（クリックで ● が着く） --------- */
.ship-toggle     { width:24px;height:24px;display:inline-flex;
                   align-items:center;justify-content:center;
                   border:1px solid var(--line);border-radius:50%;
                   cursor:pointer;background:#fff;color:#0f172a }
.ship-toggle.on  { background:#e6ffe9;border-color:#7dcf8a;font-weight:700 }


/* 期限アラート色：セル単位で上書き */
tr.due-bad  td { background: #fee2e2 !important; }
tr.due-soon td { background: #fff7ed !important; }

/* 出荷報告トグルの見た目強化（任意） */
button.ship-toggle.on { background: #e6ffe9; border-color: #7dcf8a; }
button.ship-toggle      { transition: background .15s ease; }


.highlight { background: #fffae6; }
.table { width:100%; border-collapse: collapse; }
.table th, .table td { border: 1px solid #ccc; padding: 4px; }
.hidden { display: none; }


/* 見積一覧テーブル */
#estimatesTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
#estimatesTable th,
#estimatesTable td {
  border: 1px solid #cbd5e1;
  padding: 4px;
}
#estimatesTable th {
  background: #f8fafc;
}

/* 取得済み工番の行をハイライト */
.highlight {
  background-color: #fffae6;
}

/* 見積一覧：重複行ハイライト */
#view-estimates tr.dup td {
  background-color: #fee;
}

/* 見積一覧：警告メッセージ */
#view-estimates .est-alert {
  padding: 8px;
  margin: 0 16px 8px;
  background: #fde2e2;
  border: 1px solid #f5c2c2;
  border-radius: 4px;
  font-weight: bold;
}
#view-estimates .est-alert.hidden {
  display: none;
}

/* 見積一覧テーブルの重複・状態ハイライト */
#estimatesTable tr.dup-no td {
  background-color: #ffe6e6 !important; /* 見積番号重複 */
}
#estimatesTable tr.dup-da td {
  background-color: #fff4e6 !important; /* 取得日＋金額重複 */
}
#estimatesTable tr.assigned td {
  background-color: #e6ffed !important; /* 工番取得済み */
}

/* 見積一覧の警告メッセージ */
#estimatesTable .alert-danger td,
#estimatesTable .alert-warning td {
  background: transparent !important;  /* 警告行はテキストだけカラー */
}


/* テーブルは分離ボーダー推奨（stickyのにじみ防止） */
#jobsTable { border-collapse: separate; border-spacing: 0; }

/* すべてのヘッダーセルを上部固定＋最前面寄りに */
#jobsTable thead th {
  position: sticky;
  top: 0;
  z-index: 40;            /* 本文セルより高く */
  background: #fff;       /* 透明だと下が透けて重なって見える */
}

/* 左固定（工番）用：ボディ／ヘッダー両方に left を付与 */
#jobsTable tbody td.sticky-left,
#jobsTable thead th.sticky-left {
  position: sticky;
  left: 0;
  background: #fff;
}

/* 重なり順（重要）：ヘッダー > 左固定ヘッダー > 左固定ボディ > 通常ボディ */
#jobsTable thead th.sticky-left { z-index: 50; }  /* 一番上に来る */
#jobsTable thead th            { z-index: 40; }   /* その次 */
#jobsTable tbody td.sticky-left{ z-index: 30; }   /* 本文の固定列 */
#jobsTable tbody td            { z-index: 20; }   /* 通常本文 */

/* 視覚補助（任意）：境界のにじみを軽減 */
#jobsTable thead th { box-shadow: 0 1px 0 rgba(0,0,0,0.08); }
#jobsTable thead th.sticky-left { box-shadow: 1px 0 0 rgba(0,0,0,0.08), 0 1px 0 rgba(0,0,0,0.08); }
#jobsTable tbody td.sticky-left { box-shadow: 1px 0 0 rgba(0,0,0,0.06); }


/* 例: 読み取り専用の見た目 */
td.readonly, th.readonly { opacity: .6; pointer-events: none; }

/* === 工場カラー === */
.pill.factory { 
  background: var(--fc, #e2e8f0) !important; 
  color: #fff !important; 
  border-color: transparent !important;
}
.factory-cell-inner { 
  background: color-mix(in srgb, var(--fc, transparent) 16%, transparent); 
  border-radius: 6px; padding: 2px 4px; 
}
/* 視認性向上（文字が見づらい場合に自動調整） */
.pill.factory { text-shadow: 0 1px 0 rgba(0,0,0,.18); }


/* 強制優先：工場色（マスター優先） */
.jobs-table .pill.factory,
#jobsTable .pill.factory {
  background: var(--fc, #e2e8f0) !important;
  color: #fff !important;
  border-color: transparent !important;
}
#jobsTable td .factory-cell-inner { background: transparent !important;   border-radius: 6px; padding: 2px 4px; }