:root {
  --primary: #7b1a2e;
  --primary-dark: #5a0f1f;
  --primary-light: #a83250;
  --secondary: #64748b;
  --success: #16a34a;
  --warning: #d97706;
  --danger: #dc2626;
  --bg: #f1f5f9;
  --card-bg: #ffffff;
  --text: #1e293b;
  --text-muted: #64748b;
  --border: #e2e8f0;
  --shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06);
  --radius: 12px;
  --radius-sm: 8px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
}

a { color: inherit; text-decoration: none; }

header.app-header {
  background: var(--primary);
  color: #fff;
  padding: 12px 24px;
  box-shadow: var(--shadow);
  position: sticky;
  top: 0;
  z-index: 10;
}
header.app-header .header-top { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 20px; }
header.app-header .header-left-group { display: flex; align-items: center; gap: 22px; min-width: 0; flex-wrap: wrap; row-gap: 8px; }
header.app-header .header-right-group { display: flex; align-items: center; gap: 14px; justify-content: flex-end; }
header.app-header h1 {
  font-size: 22px;
  font-weight: 900;
  margin: 0;
  flex-shrink: 0;
}
header.app-header h1 a { color: #fff; }

header.app-header nav.main-tabs { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
header.app-header nav.main-tabs a.nav-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  font-weight: 800;
  font-size: 13px;
  padding: 9px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  opacity: 0.92;
}
header.app-header nav.main-tabs a.nav-btn i { font-size: 13px; }
header.app-header nav.main-tabs a.nav-btn:hover { background: rgba(255,255,255,0.24); opacity: 1; }
header.app-header nav.main-tabs a.nav-btn.active { background: #fff; color: var(--primary); opacity: 1; }
header.app-header nav.main-tabs a.nav-btn-primary {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #5a2d00;
  font-size: 15px;
  padding: 11px 20px;
  border-radius: var(--radius-sm);
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  opacity: 1;
}
header.app-header nav.main-tabs a.nav-btn-primary i { font-size: 15px; }
header.app-header nav.main-tabs a.nav-btn-primary:hover { background: linear-gradient(135deg, #fcd34d, #fbbf24); transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,0.3); }
header.app-header nav.main-tabs a.nav-btn-primary.active { box-shadow: 0 0 0 2px #fff inset, 0 2px 6px rgba(0,0,0,0.25); }
/* 外注（外注・処理中の案件）は紫、完了品は緑で常時色分けする */
header.app-header nav.main-tabs a.nav-btn-outsource { background: #7c3aed; color: #fff; opacity: 1; }
header.app-header nav.main-tabs a.nav-btn-outsource:hover { background: #6d28d9; }
header.app-header nav.main-tabs a.nav-btn-outsource.active { background: #fff; color: #7c3aed; }
header.app-header nav.main-tabs a.nav-btn-done { background: #16a34a; color: #fff; opacity: 1; }
header.app-header nav.main-tabs a.nav-btn-done:hover { background: #15803d; }
header.app-header nav.main-tabs a.nav-btn-done.active { background: #fff; color: #16a34a; }
header.app-header .nav-btn-count {
  display: inline-block;
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 999px;
  margin-left: 5px;
}
header.app-header nav.main-tabs a.nav-btn.active .nav-btn-count { background: var(--danger); color: #fff; }

header.app-header .btn-header {
  white-space: nowrap;
  font-weight: 700;
  font-size: 14px;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  opacity: 0.95;
}
header.app-header .btn-header:hover { background: rgba(255,255,255,0.22); }
header.app-header .btn-header.active { background: #fff; color: var(--primary); opacity: 1; }

header.app-header .header-gear {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  opacity: 0.9;
  font-size: 15px;
}
header.app-header .header-gear:hover, header.app-header .header-gear.active { background: rgba(255,255,255,0.28); opacity: 1; }
header.app-header .header-gear-badge {
  position: absolute; top: -3px; right: -3px;
  background: var(--danger); color: #fff;
  font-size: 10px; font-weight: 800; line-height: 1;
  min-width: 16px; height: 16px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 3px; box-shadow: 0 0 0 2px var(--primary);
}

header.app-header .header-user-name { font-weight: 700; font-size: 13px; white-space: nowrap; opacity: 0.95; }

header.app-header .header-bell {
  position: relative;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,0.12); color: #fff; font-size: 15px;
  border: none; cursor: pointer;
}
header.app-header .header-bell:hover { background: rgba(255,255,255,0.28); }
header.app-header .header-bell-badge {
  position: absolute; top: -3px; right: -3px;
  background: var(--danger); color: #fff;
  font-size: 10px; font-weight: 800; line-height: 1;
  min-width: 16px; height: 16px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 3px; box-shadow: 0 0 0 2px var(--primary);
}

/* スマホ幅など960px以下ではベル押下で開くドロップダウンのまま（画面が狭く常設できないため） */
.notif-panel {
  display: none;
  position: absolute; top: 100%; right: 90px; margin-top: 10px;
  width: 340px; max-height: 420px; overflow-y: auto;
  background: #fff; color: var(--text);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-md);
  z-index: 30;
}
.notif-panel.open { display: block; }
.notif-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid var(--border); font-weight: 800; font-size: 14px;
  position: sticky; top: 0; background: #fff;
}
.notif-panel-header i { color: var(--primary); margin-right: 4px; }
.notif-panel-list { padding: 4px; }
.notif-empty { padding: 24px 12px; text-align: center; color: var(--text-muted); font-size: 13px; }
.notif-item {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px; border-radius: 10px; cursor: pointer;
  border-bottom: 1px solid var(--border);
}
.notif-item:hover { background: var(--bg); }
.notif-item.unread { background: #fef2f2; }
.notif-item.unread:hover { background: #fee2e2; }
.notif-item-icon {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 13px;
}
.notif-item-body { min-width: 0; flex: 1; }
.notif-item-title { font-size: 13px; font-weight: 800; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.notif-item-title .type-badge { font-size: 10px; padding: 1px 7px; }
/* 通知の種類（登録・引き取り・納期変更・コメント・不具合など）を一目で区別できるよう、
   種類ごとの色でラベルチップ＋アイコン背景＋カード左端の帯を揃えて色分けする */
.notif-type-chip {
  display: inline-flex; align-items: center; flex-shrink: 0;
  color: #fff; font-size: 10px; font-weight: 800;
  padding: 2px 8px; border-radius: 999px; line-height: 1.5; white-space: nowrap;
}
.notif-item-mold-link { color: #2563eb; font-weight: 800; }
.notif-item-mold-link:hover { text-decoration: underline; }
/* 不具合報告は見落としを防ぐため常に警告色で目立たせる（未読/既読・チャット/システムの区別より優先） */
.notif-item-alert { background: #fef2f2 !important; }
.notif-item-alert .notif-item-msg { background: #fff; border-color: #fecaca; }
.notif-item-msg {
  font-size: 12px; color: var(--text); margin-top: 5px;
  border: 1px solid var(--border); border-radius: 10px;
  padding: 6px 9px; white-space: pre-wrap; word-break: break-word;
}
/* コメント・メンション（人が書いたやり取り）は吹き出し風に色付け、それ以外（引き取り・登録・納期変更・完了など
   システムからのお知らせ）は白背景ではっきり区別できるようにする（ユーザー要望対応） */
.notif-item-chat .notif-item-msg { background: #fdf2f4; border-color: #f6d9df; }
.notif-item-system .notif-item-msg { background: #fff; border-color: var(--border); color: var(--text-muted); }
.notif-item.unread .notif-item-msg { box-shadow: 0 0 0 1px var(--primary) inset; }
.notif-item-photo { display: block; margin-top: 6px; max-width: 100%; max-height: 140px; border-radius: 8px; object-fit: cover; }
.notif-item-meta { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.notif-composer { flex-shrink: 0; padding: 10px 14px; border-bottom: 1px solid var(--border); background: #fff; }
.notif-composer-empty { font-size: 12px; color: var(--text-muted); text-align: center; padding: 4px 0; }


/* PC幅では「案件のやり取り」パネルを一覧の隣に常設表示する。
   上の赤いバナー(header)は画面幅いっぱいのまま独立した1行とし、その下でmain(一覧)とパネルが
   横に並ぶ2カラムにする（ヘッダーを縮めて右に余白を作る方式は「バナーが画面全部にならない」ため撤回）。
   DOM順は header→aside(パネル)→main だが、orderで見た目上は「一覧が左・パネルが右」に並べ替える。 */
@media (min-width: 961px) {
  /* パネルの見た目上の高さ（内側div）はビューポート基準の上限で常にほぼ1画面分に固定し、
     一覧(main)が短い/長いに関わらず潰れたり伸びすぎたりしない（案件詳細ページの.history-side
     と同じsticky+上限高さ方式）。
     注意: position:stickyは.notif-panel（flexアイテム本体、orderで並び替え対象）に直接付けない。
     flex-basis:0%のmain（一覧）と、order違いのstickyアイテムが同じ行に並ぶ組み合わせでは、
     ブラウザがstickyの「元の位置」を古いレイアウトパスで計算し、水平位置が左に約70pxずれる
     挙動を実機で確認したため（メニュー画面など.notif-panelが無いページでは発生せず、一覧との
     組み合わせでのみ再現）。position:staticな外側div(.notif-panel)と、見た目・sticky固定を
     担う内側div(.notif-panel-inner)に分離することで回避する。
     さらに外側divはalign-items:stretchで一覧(main)と同じ高さまで広げる必要がある
     （stretchしないと外側divの高さ＝内側divの高さちょうどになり、position:stickyが
     「動ける範囲」を失って一覧を少しスクロールしただけで固定されず流れてしまうため）。
     外側div自体は border/background を持たない透明な入れ物なので、高さを伸ばしても
     見た目上パネルが大きくなることはない。 */
  #app { display: flex; flex-flow: row wrap; align-items: stretch; }
  header.app-header { flex: 1 1 100%; order: 0; }
  main.container { flex: 1 1 0%; min-width: 0; order: 1; }
  .notif-panel {
    display: block !important;
    position: static; /* ベースルールのposition:absoluteを打ち消す（stickyは内側divで行う） */
    flex: 0 0 600px; order: 2;
    width: auto; max-height: none;
    overflow: visible; /* ベースルールのoverflow-y:autoを打ち消す。これが残っていると外側divがスクロール
                           コンテナ扱いになり、内側div(.notif-panel-inner)のposition:stickyが
                           効かなくなる（少しスクロールしただけで固定されず流れてしまう）*/
    margin: 0 20px 20px 0; border: none; box-shadow: none; border-radius: 0;
    z-index: auto;
  }
  .notif-panel-inner {
    display: flex; flex-direction: column;
    position: sticky; top: 76px; /* JSでヘッダー実高さに同期して上書きする */
    max-height: calc(100vh - 96px);
    border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow-md); background: #fff;
    z-index: 5;
  }
  .notif-panel-header { border-radius: var(--radius) var(--radius) 0 0; flex-shrink: 0; }
  .notif-panel-list { flex: 1; overflow-y: auto; padding: 6px; min-height: 0; }
}

header.app-header .header-brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
header.app-header .header-brand img { height: 40px; }
header.app-header .header-brand span { font-weight: 700; font-size: 14px; white-space: nowrap; }

header.app-header .header-subtabs { display: flex; gap: 26px; flex-wrap: wrap; align-items: center; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.2); }
header.app-header .header-subtabs .nav-label { font-weight: 700; font-size: 13px; opacity: 0.85; }
header.app-header .header-subtabs a { font-weight: 700; white-space: nowrap; font-size: 13px; opacity: 0.85; }
header.app-header .header-subtabs a.active { text-decoration: underline; opacity: 1; }
header.app-header .header-subtabs a:hover { opacity: 1; }
header.app-header .header-subtabs a .tag-count {
  display: inline-block; background: rgba(255,255,255,0.22); color: #fff;
  font-size: 10px; font-weight: 900; line-height: 1; padding: 2px 6px; border-radius: 999px; margin-left: 5px;
}
header.app-header .header-subtabs a.active .tag-count { background: var(--primary); color: #fff; }

/* 左右の余白をなくし画面を目一杯使う。印刷用シート等は個別にmax-widthを持つのでここでは制限しない */
main.container {
  max-width: none;
  margin: 0;
  padding: 20px 28px;
}

.card {
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  margin-bottom: 16px;
}
.card:hover { box-shadow: var(--shadow-md); }

.page-title {
  font-size: 20px;
  font-weight: 900;
  margin: 0 0 16px;
}
.page-subtitle {
  font-size: 15px;
  font-weight: 900;
  margin: 0 0 12px;
  display: flex; align-items: center; gap: 8px;
  color: var(--text);
}

.history-list { display: flex; flex-direction: column; gap: 2px; max-height: 260px; overflow-y: auto; }
.history-row {
  display: flex; align-items: baseline; gap: 10px;
  padding: 8px 4px; border-bottom: 1px solid var(--border);
  font-size: 13px; flex-wrap: wrap;
}
.history-row:last-child { border-bottom: none; }
.history-icon { color: var(--primary); width: 14px; text-align: center; flex-shrink: 0; font-size: 12px; }
.history-message { flex: 1; min-width: 160px; }
.history-meta { color: var(--text-muted); font-size: 10px; white-space: nowrap; }
.history-process-name { color: var(--primary-dark); font-weight: 800; }
.history-row-comment { background: #fdf2f4; border-radius: var(--radius-sm); }
.history-row-comment .history-icon { color: var(--primary-dark); }
.history-row-comment .history-message { font-weight: 700; }
.history-author { color: var(--primary-dark); font-weight: 900; }
.history-author::after { content: '：'; font-weight: 700; }
.history-row-major { background: #fdecea; border-radius: var(--radius-sm); }
.history-row-major .history-icon, .history-row-major .history-message { color: var(--danger); font-weight: 800; }
.history-count-highlight { color: var(--danger); font-weight: 800; }
.history-reply-quote {
  flex-basis: 100%;
  font-size: 11px; color: var(--text-muted);
  background: rgba(0,0,0,0.04); border-left: 3px solid var(--border);
  padding: 4px 8px; border-radius: 4px;
}
.hc-reply-btn {
  background: none; border: none; color: var(--text-muted); font-size: 11px; font-weight: 700;
  cursor: pointer; padding: 2px 6px; border-radius: 4px; flex-shrink: 0;
}
.hc-reply-btn:hover { background: rgba(0,0,0,0.06); color: var(--primary); }

.history-comment-form { border-bottom: 1px solid var(--border); padding-bottom: 14px; margin-bottom: 12px; flex-shrink: 0; }
.history-comment-form textarea { resize: vertical; }
.hc-reply-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: rgba(0,0,0,0.04); border-left: 3px solid var(--primary);
  padding: 6px 10px; border-radius: 6px; margin-bottom: 8px;
  font-size: 12px; color: var(--text);
}
.hc-reply-banner button { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 13px; flex-shrink: 0; }
.hc-reply-banner button:hover { color: var(--danger); }
.hc-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; }
.hc-photo-add-btn {
  display: flex; align-items: center; gap: 6px; cursor: pointer;
  font-size: 12px; font-weight: 700; color: var(--text-muted); padding: 6px 4px; flex-shrink: 0;
}
.hc-photo-add-btn:hover { color: var(--primary); }
.hc-toolbar .btn { flex: 1; }
.history-photo-grid { display: flex; gap: 6px; flex-wrap: wrap; width: 100%; margin: 4px 0 0; }
.history-photo-thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); cursor: pointer; }
.mention-input-wrap { position: relative; }
.mention-suggest {
  position: absolute; bottom: 100%; left: 0; right: 0; margin-bottom: 4px;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md); max-height: 180px; overflow-y: auto; z-index: 15;
}
.mention-suggest-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; font-size: 13px; cursor: pointer; }
.mention-suggest-item:hover { background: var(--bg); }
.mention-suggest-item i { color: var(--primary); width: 14px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  border-radius: var(--radius-sm);
  min-height: 40px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  background: var(--secondary);
  color: #fff;
  transition: transform 0.1s;
  white-space: nowrap;
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--primary); }
.btn-primary:hover { background: var(--primary-dark); }
.btn-success { background: var(--success); }
.btn-danger { background: var(--danger); }
.btn-outline { background: #fff; color: var(--primary); border: 2px solid var(--primary); }
.btn-sm { min-height: 32px; padding: 6px 12px; font-size: 12px; }

.form-group { margin-bottom: 14px; }
.form-group label {
  display: block;
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 6px;
  color: var(--text-muted);
}
.form-group .required { color: var(--danger); margin-left: 4px; }
.form-control {
  width: 100%;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 14px;
  background: #f8fafc;
  color: var(--text);
  font-family: inherit;
}
.form-control:focus {
  outline: none;
  border-color: var(--primary);
  background: #fff;
}
.form-row { display: flex; gap: 12px; flex-wrap: wrap; }
.form-row > * { flex: 1; min-width: 160px; }

.checkbox-group, .radio-group {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 6px 16px;
}
/* 選択肢が少なく横に並べたい場合（検収状態など）は、幅に関わらず1行に収める */
.checkbox-group-inline { display: flex; gap: 14px; flex-wrap: wrap; }
.checkbox-group-inline label { display: flex; align-items: center; gap: 6px; padding: 3px 0; cursor: pointer; white-space: nowrap; }
.checkbox-group-inline input:checked + span { color: var(--primary); font-weight: 700; }
.checkbox-group label, .radio-group label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
  cursor: pointer;
  font-weight: 400;
  font-size: 13px;
}
.checkbox-group input:checked + span { color: var(--primary); font-weight: 700; }
.radio-other-input { width: 130px; font-weight: 400; height: 28px; padding: 2px 8px; }
.other-cell { grid-column: span 2; }

.field-note { font-size: 12px; color: var(--text-muted); margin: 6px 0 0; }
.customer-selected-note { display: flex; align-items: center; gap: 10px; font-size: 14px; }
/* ラベル行とボタン行を分離し、文字数が変わってもボタンの位置が動かないようにする */
.customer-filter-toggle { margin: 8px 0; }
.customer-filter-toggle .field-note { margin: 0 0 6px; }
.customer-filter-toggle-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.customer-filter-toggle .btn.active { background: var(--primary); color: #fff; }
.customer-selected-note strong { color: var(--text); }
.up-upload-hint {
  background: #fdf2f4; color: var(--primary-dark); font-weight: 700;
  padding: 8px 10px; border-radius: var(--radius-sm); margin-bottom: 10px;
}

.reg-name-header, .reg-name-row {
  display: grid; grid-template-columns: 2fr 1fr 90px 32px;
  gap: 8px; align-items: center;
}
.reg-name-row { margin-bottom: 6px; }
.reg-name-header { font-size: 12px; color: var(--text-muted); font-weight: 700; margin-bottom: 4px; }
.reg-name-row .btn-outline { padding: 0; width: 32px; height: 32px; }
/* 案件登録：外出先のスマホからでもLINE感覚でサクッと送れるよう、必須項目だけに絞って見せる。
   客先管理番号・受注金額はスマホでは非表示（登録後に社内で編集可能）、材質/熱処理/表面処理はアコーディオンで畳んでおく。 */
.reg-detail-accordion { margin-bottom: 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 4px 14px; }
.reg-detail-accordion summary { cursor: pointer; font-weight: 700; padding: 10px 0; color: var(--text-muted); list-style: none; }
.reg-detail-accordion summary::-webkit-details-marker { display: none; }
.reg-detail-accordion summary::before { content: '▶'; display: inline-block; font-size: 10px; margin-right: 8px; transition: transform .15s; }
.reg-detail-accordion[open] summary::before { transform: rotate(90deg); }
.reg-detail-accordion[open] summary { border-bottom: 1px solid var(--border); margin-bottom: 12px; }
@media (max-width: 640px) {
  .reg-name-header { display: none; }
  .reg-name-row { grid-template-columns: 1fr 64px 32px; grid-template-areas: "name qty del"; }
  .reg-name-row .reg-name-input { grid-area: name; }
  .reg-name-row .reg-name-ref { display: none; }
  .reg-name-row .reg-name-qty { grid-area: qty; }
  .reg-name-row .reg-name-remove { grid-area: del; width: 100%; }
  .reg-amount-group { display: none; }
  /* 営業担当(営業/その他)は折り返さず常に同列表示にする */
  .reg-staff-row { flex-wrap: nowrap; }
  .reg-staff-row > .form-group { min-width: 0; }
  /* 入荷日・納入日を同列にし、納入時刻はその下に小さくまとめる */
  .reg-date-row { flex-wrap: wrap; }
  .reg-date-row > .form-group { min-width: 0; }
  .reg-date-row .reg-time-group { flex-basis: 100%; }
  .reg-date-row .reg-time-group label { font-size: 11px; margin-bottom: 2px; }
  /* font-sizeは16px未満にするとiOSがフォーカス時に自動拡大し、画面がずれ動く原因になるため16px未満にしない */
  .reg-date-row .reg-time-group select.form-control { max-width: 72px !important; font-size: 16px; padding: 6px 4px; }
  /* 入荷写真(3):資料(2)の比率を保ったまま同列表示にする（列が狭くなる分、内側の余白・文字も詰める） */
  .reg-upload-split { flex-direction: row; }
  .reg-upload-split .dropzone { padding: 10px 6px; font-size: 11px; }
  .reg-upload-split .dz-note { font-size: 9px; }
}

.customer-picker { display: flex; gap: 10px; margin-top: 8px; align-items: flex-start; flex-wrap: wrap; }
.customer-kana-index {
  flex-shrink: 0;
  display: grid;
  grid-template-rows: repeat(5, auto);
  grid-auto-flow: column;
  gap: 3px;
}
.customer-kana-index .kana-item {
  border: 1px solid var(--border);
  border-radius: 4px;
  width: 26px;
  padding: 4px 0;
  text-align: center;
  font-size: 12px;
  cursor: pointer;
  background: #fff;
}
.customer-kana-index .kana-item:hover { background: #f8fafc; }
.customer-kana-index .kana-item.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.customer-kana-index .kana-empty { visibility: hidden; cursor: default; }
.customer-list { flex: 1; min-width: 220px; border: 2px solid var(--border); border-radius: var(--radius-sm); max-height: 420px; overflow-y: auto; background: #fff; }
.customer-list.two-col { flex: 2; min-width: 420px; display: grid; grid-template-columns: repeat(2, 1fr); align-content: start; }
.customer-list.two-col .customer-list-item { border-right: 1px solid var(--border); }
.customer-list.two-col .customer-list-item:nth-child(2n) { border-right: none; }
.customer-list.two-col .customer-list-empty { grid-column: 1 / -1; }
/* 検収など、内側スクロールを避けて候補を全件そのまま表示したい画面用。
   会社名の長さがまちまちのため、グリッドの固定列幅で折り返させるのではなく、
   flex-wrapで各項目を文字数なりの幅のまま詰めて並べる（折り返し禁止・可変幅が基本方針）。 */
.customer-list.two-col.tall { max-height: none; overflow-y: visible; display: flex; flex-wrap: wrap; align-content: flex-start; border: none; }
.customer-list.two-col.tall .customer-list-item { flex: 0 0 auto; white-space: nowrap; border: 1px solid var(--border); border-radius: var(--radius-sm); margin: 0 6px 6px 0; }
/* 縦積み配置（検収ページ）では50音一覧と幅を競わないため、two-col前提のmin-width:420pxを外す（カード幅を超えて溢れる原因だった） */
.customer-list.two-col.tall.stacked-list { flex: 1; min-width: 0; }
.customer-list-title { padding: 8px 12px; font-weight: 700; font-size: 12px; color: var(--text-muted); background: #f8fafc; border-bottom: 1px solid var(--border); position: sticky; top: 0; }
.customer-list-item { padding: 6px 12px; cursor: pointer; font-size: 11px; border-bottom: 1px solid var(--border); }
.customer-list-item:last-child { border-bottom: none; }
.customer-list-item:hover { background: #f8fafc; }
.customer-list-item.selected { background: var(--primary); color: #fff; }
.customer-count-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px;
  background: var(--danger); color: #fff; font-size: 11px; font-weight: 800;
  border-radius: 999px; vertical-align: middle;
}
.customer-list-item.selected .customer-count-badge { background: #fff; color: var(--primary); }
/* 検収ページの検索結果テーブル：状態は「未検収／検収済み」の文字のみ。完了品（製造完了）は緑文字で示す。 */
.status-text { font-size: 12px; font-weight: 700; color: var(--text-muted); white-space: nowrap; }
.status-text-completed { color: var(--success); font-weight: 800; }
/* 未検収の完了品（すぐ検収できる案件）は行全体を緑の太字にして目立たせる */
table.data-table tr.row-completed td { color: var(--success); font-weight: 800; }
table.data-table tr.row-completed td a { color: var(--success); }
/* 請求書発行画面：この月の請求書を発行済みの会社はグレー表示にして目立たなくする（選択自体は引き続き可能） */
.customer-list-item.invoiced { color: var(--text-muted); background: #f4f4f5; }
.customer-list-item.invoiced .customer-count-badge { background: #9ca3af; }
.customer-list-item.invoiced.selected { background: var(--primary); color: #fff; }
.customer-list-empty { padding: 12px; font-size: 12px; color: var(--text-muted); }

.dropzone {
  border: 2px dotted var(--primary);
  border-radius: var(--radius);
  padding: 26px 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  cursor: pointer;
  background: #fff;
}
.dropzone.dragover { background: #fdf2f4; border-color: var(--primary-dark); }
.dropzone .dz-hint { margin: 4px 0; }
.dropzone .dz-note { font-size: 11px; margin-top: 6px; }
.dz-preview { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; justify-content: center; }
.dz-preview img { width: 80px; height: 80px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--border); }

/* 登録フォーム: 入荷写真(3)と資料(2)を横並びで配分 */
.reg-upload-split { display: flex; gap: 14px; align-items: stretch; }
.reg-upload-split .reg-upload-col { min-width: 0; }
.reg-upload-split .dropzone { height: 100%; box-sizing: border-box; }
.reg-upload-col-label { font-weight: 700; font-size: 12px; margin-bottom: 6px; color: var(--text-muted); }
.dz-preview-docs { justify-content: flex-start; }
.dz-doc-chip {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px; background: #f3f3f3;
  font-size: 12px; color: var(--text); max-width: 100%;
}
.dz-doc-chip i { color: var(--text-muted); flex-shrink: 0; }

.tab-bar { display: flex; gap: 4px; border-bottom: 2px solid var(--border); margin-bottom: 20px; flex-wrap: wrap; }
.tab-link { padding: 10px 18px; font-weight: 700; font-size: 13px; color: var(--text-muted); border-bottom: 3px solid transparent; margin-bottom: -2px; }
.tab-link:hover { color: var(--primary); }
.tab-link.active { color: var(--primary); border-bottom-color: var(--primary); }

.master-two-col { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-start; }
.master-two-col > .card { flex: 1; min-width: 300px; margin-bottom: 0; }

/* ページ全体ではなく、左右それぞれの枠内でスクロールさせる（サンテックのように件数が多い会社を選んでも、
   会社名一覧が画面外に流れず常に見えるようにする） */
.acc-layout { display: flex; gap: 16px; align-items: flex-start; }
.acc-layout-left { flex: 0 0 420px; max-width: 420px; height: calc(100vh - 280px); overflow-y: auto; }
.acc-layout-right { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 20px; height: calc(100vh - 280px); overflow-y: auto; }
.acc-layout-right > .card { margin-bottom: 0; }
.acc-layout-right table.data-table th, .acc-layout-right table.data-table td { padding: 6px 8px; font-size: 12px; }
/* 検収ページ：50音一覧の下に「入荷月・検収状態」を横並びで挟み、その下に会社名一覧を続ける縦積み配置 */
.customer-picker-filters { display: flex; gap: 20px; flex-wrap: wrap; margin: 10px 0; }
.customer-list.two-col.tall.grid-cols {
  display: grid; gap: 6px; min-width: 0; max-height: none; overflow-y: visible; border: none;
}
.customer-list.grid-cols .customer-list-item { border: 1px solid var(--border); border-radius: var(--radius-sm); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1200px) {
  /* 縦積みになる幅では、枠ごとの固定スクロールをやめて画面全体でスクロールさせる（狭い画面で2重スクロールは扱いづらいため） */
  .acc-layout { flex-direction: column; }
  .acc-layout-left { flex: 1 1 auto; max-width: none; width: 100%; height: auto; overflow-y: visible; }
  .acc-layout-right { height: auto; overflow-y: visible; }
}
/* 担当者マスタ画面のSYUKKIN従業員一覧（参考表示） */
.syukkin-employee-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-top: 8px; }
.syukkin-employee-dept { border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; background: #f8fafc; }
.syukkin-employee-dept-title { font-weight: 700; font-size: 13px; color: var(--text-muted); margin-bottom: 8px; }
.syukkin-employee-dept-list { display: flex; flex-wrap: wrap; gap: 6px; }
.syukkin-employee-chip { display: inline-block; background: #fff; border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; font-size: 12px; white-space: nowrap; }
.master-row { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.master-row .name { flex: 1; font-weight: 700; font-size: 13px; min-width: 80px; }
.master-row .move-btns { display: flex; flex-direction: column; gap: 2px; }
.master-row .move-btns button { border: none; background: #f1f5f9; border-radius: 4px; width: 22px; height: 18px; cursor: pointer; font-size: 10px; color: var(--text-muted); line-height: 1; }
.master-row .move-btns button:hover:not(:disabled) { background: var(--border); }
.master-row .move-btns button:disabled { opacity: 0.3; cursor: default; }
.master-row.inactive { opacity: 0.5; }
table.data-table tr.inactive td { opacity: 0.5; }
.master-row-edit { border: 2px solid var(--primary); border-radius: var(--radius-sm); padding: 14px; margin-bottom: 8px; background: #fdf2f4; }

/* 工事内容: インライン編集テーブル（クリック直接書き換え＋ドラッグ並び替え＋即削除） */
.proc-table { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.proc-table-head, .proc-row {
  display: grid; grid-template-columns: 26px 1fr 100px 34px; gap: 8px; align-items: center;
}
.proc-table-head { padding: 6px 10px; background: #f8f8f8; font-size: 11px; font-weight: 700; color: var(--text-muted); }
.proc-row { padding: 3px 10px; border-top: 1px solid var(--border); }
.proc-row.drag-over { background: #fdf2f4; }
.proc-row-add { background: #fafafa; }
.proc-drag-handle { color: var(--text-muted); text-align: center; cursor: grab; font-size: 12px; }
.proc-name-input, .proc-abbr-input {
  border: 1px solid transparent; background: transparent; border-radius: 4px;
  padding: 6px 7px; font-size: 13px; width: 100%; box-sizing: border-box; font-family: inherit; color: var(--text);
}
.proc-name-input { font-weight: 700; }
.proc-abbr-input { color: var(--text-muted); font-weight: 400; }
.proc-name-input:hover, .proc-abbr-input:hover { border-color: var(--border); }
.proc-name-input:focus, .proc-abbr-input:focus { border-color: var(--primary); background: #fff; outline: none; }
.proc-delete-btn {
  border: none; background: none; color: var(--text-muted); cursor: pointer;
  padding: 5px; border-radius: 4px; font-size: 13px; justify-self: center;
}
.proc-delete-btn:hover { color: #fff; background: var(--danger); }

/* 選択肢マスタ（材質・溶接棒・熱処理・表面処理）: 略称欄がない1カラム版 */
.opt-table { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.opt-row { display: grid; grid-template-columns: 22px 1fr 30px; gap: 4px; align-items: center; padding: 1px 6px; border-top: 1px solid var(--border); }
.opt-table .opt-row:first-child { border-top: none; }
.opt-row.drag-over { background: #fdf2f4; }
.opt-row-add { background: #fafafa; }
.opt-name-input {
  border: 1px solid transparent; background: transparent; border-radius: 4px;
  padding: 6px 7px; font-size: 13px; width: 100%; box-sizing: border-box; font-family: inherit; color: var(--text); font-weight: 700;
}
.opt-name-input:hover { border-color: var(--border); }
.opt-name-input:focus { border-color: var(--primary); background: #fff; outline: none; }

/* 表面処理のみ「標準日数」欄を追加した4カラム版 */
.opt-table[data-cat="treatment"] .opt-row { grid-template-columns: 22px 1fr 52px 30px; }
.opt-row-header { padding: 4px 6px 2px; }
.opt-row-header span { font-size: 10px; color: var(--text-muted); font-weight: 700; white-space: nowrap; }
.opt-days-input {
  border: 1px solid transparent; background: transparent; border-radius: 4px;
  padding: 6px 3px; font-size: 12px; width: 100%; box-sizing: border-box; font-family: inherit; color: var(--text); text-align: center;
}
.opt-days-input:hover { border-color: var(--border); }
.opt-days-input:focus { border-color: var(--primary); background: #fff; outline: none; }

/* 選択肢マスタの4カテゴリを常に1行に収める（従来のflex-wrapだと4枚目だけ折り返して浮いていた） */
.opt-categories-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; align-items: start; }
.opt-category-card { padding: 14px; margin-bottom: 0; min-width: 0; }
.opt-category-card h3 { margin: 0 0 8px; font-size: 14px; }
@media (max-width: 820px) { .opt-categories-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .opt-categories-grid { grid-template-columns: 1fr; } }

.list-count-bar { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; font-size: 13px; color: var(--text-muted); }
.list-pagination { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; padding: 16px 0 4px; }
.list-pagination .list-page-btn { min-width: 34px; padding-left: 8px; padding-right: 8px; }
.list-pagination-ellipsis { padding: 0 4px; color: var(--text-muted); font-size: 13px; }
.mold-list-row {
  display: flex;
  gap: 14px;
  padding: 10px 4px 10px 14px;
  border-bottom: 1px solid var(--border);
  border-left: 5px solid transparent;
  align-items: center;
  cursor: pointer;
}
.mold-list-row.status-arrival   { border-left-color: #94a3b8; }
.mold-list-row.status-delivered { border-left-color: #cbd5e1; }
.mold-list-row.status-progress  { border-left-color: #2563eb; }
.mold-list-row.status-done      { border-left-color: #16a34a; }
.mold-list-row.has-outsource    { border-left-color: #d97706; } /* 外注中の工程がある案件は一覧でも枠を優先してアンバーに */
.mold-list-row:hover { background: #f8fafc; }
.mold-list-row .thumb-list-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 4px; flex-shrink: 0;
}
.mold-list-row .thumb-list {
  width: 100px; height: 100px; object-fit: cover;
  border-radius: 4px; background: #f1f5f9;
  border: 1px solid var(--border);
}
/* サムネ左下（真下）に状態(作業中/入荷前/完了等)がひと目で分かるよう、一覧用に小さめの状態バッジを添える */
.mold-list-row .thumb-list-wrap .status-badge {
  font-size: 10px; padding: 1px 8px; border-width: 2px; line-height: 1.5;
}
.mold-list-row .content { flex: 1; min-width: 0; }
.mold-list-row .dates { font-size: 12px; color: var(--text-muted); margin-bottom: 2px; }
.arrival-countdown { color: var(--success); font-weight: 700; margin-left: 4px; }
.delivery-alert { color: var(--danger); font-weight: 800; }
.delivery-countdown { color: var(--danger); font-weight: 800; margin-left: 6px; }
.mold-list-row .customer-line { font-size: 13px; margin-bottom: 2px; }
.mold-list-row .customer-line .mgmt-no { color: var(--text-muted); margin-right: 8px; }
.new-badge {
  display: inline-block; background: var(--danger); color: #fff;
  font-size: 10px; font-weight: 800; letter-spacing: 0.03em;
  padding: 2px 6px; border-radius: 4px; margin-right: 8px; vertical-align: middle;
}
.outsource-list-badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: #fef3c7; color: #b45309; font-weight: 800; font-size: 11px;
  padding: 2px 8px; border-radius: 999px; white-space: nowrap;
}
.outsource-planned-badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: #fff; color: #b45309; font-weight: 800; font-size: 11px;
  padding: 2px 8px; border-radius: 999px; white-space: nowrap;
  border: 1px solid #fde3a7;
}
.procurement-list-badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: #ede9fe; color: #7c3aed; font-weight: 800; font-size: 11px;
  padding: 2px 8px; border-radius: 999px; white-space: nowrap;
}
.procurement-sent-badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: #7c3aed; color: #fff; font-weight: 800; font-size: 11px;
  padding: 2px 8px; border-radius: 999px; white-space: nowrap;
}
.mold-list-row .item-name { font-weight: 700; font-size: 15px; margin-bottom: 3px; }
.mold-list-row .meta-line {
  display: grid; grid-template-columns: 1fr 100px 170px; align-items: center; gap: 6px 20px;
  font-size: 12px; color: var(--text-muted);
}
.mold-list-row .meta-line > span:nth-child(2) { text-align: left; }
.mold-list-row .meta-line > span:last-child { text-align: right; }
.mold-list-row .check { flex-shrink: 0; font-size: 20px; color: #cbd5e1; width: 24px; text-align: center; }
.mold-list-row .check.delivered { color: var(--success); }

.notif-pref-list { max-width: 480px; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.notif-pref-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.notif-pref-row:last-child { border-bottom: none; }
.notif-pref-row i { width: 18px; text-align: center; color: var(--primary); }
.notif-pref-row span { flex: 1; font-size: 13px; font-weight: 700; }
.switch { position: relative; display: inline-block; width: 42px; height: 24px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch-track {
  position: absolute; inset: 0; background: var(--border); border-radius: 999px;
  cursor: pointer; transition: background 0.15s;
}
.switch-track::before {
  content: ''; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px;
  background: #fff; border-radius: 50%; transition: transform 0.15s; box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.switch input:checked + .switch-track { background: var(--primary); }
.switch input:checked + .switch-track::before { transform: translateX(18px); }

.data-table-wrap { overflow-x: auto; }

/* 工程の詳細設定タブ（写真不要/本数入力欄/比較先/複数回時間記録） */
.pset-table { min-width: 1400px; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.pset-row {
  display: grid; grid-template-columns: 100px 150px 96px minmax(150px, 1fr) 140px 150px 200px 168px;
  gap: 10px; align-items: center; padding: 8px 10px; border-top: 1px solid var(--border);
}
.pset-table .pset-row:first-child { border-top: none; }
.pset-row.pset-head { background: #f8f8f8; font-size: 11px; font-weight: 700; color: var(--text-muted); }
.pset-name { font-weight: 700; font-size: 13px; }
.pset-toggle-group { display: flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.pset-toggle {
  flex: 1; border: none; background: #fff; color: var(--text-muted); cursor: pointer;
  font-size: 11px; font-weight: 700; padding: 6px 4px; white-space: nowrap;
}
.pset-toggle + .pset-toggle { border-left: 1px solid var(--border); }
.pset-toggle.active { background: var(--primary); color: #fff; }
.pset-toggle.warn.active { background: var(--warning); color: #fff; }
.pset-count-label, .pset-count-group, .pset-check-against, .pset-upload-hint { font-size: 12px; padding: 6px 8px; }
table.data-table { width: 100%; border-collapse: collapse; }
table.data-table th, table.data-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  font-size: 13px;
  white-space: nowrap;
}
table.data-table th { color: var(--text-muted); font-weight: 700; }
table.data-table tr:hover td { background: #f8fafc; }
/* 列数が多く1行の情報量が大きい表（顧客名簿等）向けの詰め詰め表示。折り返しはせず、文字と余白だけ縮める */
table.data-table.data-table-compact th, table.data-table.data-table-compact td {
  padding: 4px 7px;
  font-size: 11.5px;
}
/* 正式名称・住所等の自由入力の長文欄は、折り返さず省略(...)表示にして横スクロールの主因を潰す。全文はホバーのtitleで確認 */
table.data-table.data-table-compact .cell-ellipsis {
  display: inline-block; max-width: 120px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; vertical-align: bottom;
}
table.data-table.data-table-compact .cell-ellipsis.cell-ellipsis-wide { max-width: 160px; }
table.data-table.data-table-compact .badge { padding: 2px 7px; font-size: 10px; }

.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
}
.badge-accept { background: var(--secondary); }
.badge-progress { background: var(--warning); }
.badge-done { background: var(--success); }

/* ステータス（自動判定：入荷前/納入済み/作業中/完了）用の枠バッジ。塗りつぶしバッジより枠を太めにして強調 */
.status-badge {
  display: inline-block;
  padding: 2px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  border: 2.5px solid var(--border);
  background: #fff;
  color: var(--text);
  line-height: 1.6;
}
.status-badge.status-arrival   { border-color: #94a3b8; color: #64748b; background: #f1f5f9; }
.status-badge.status-delivered { border-color: #94a3b8; color: #334155; background: #ffffff; }
.status-badge.status-progress  { border-color: #2563eb; color: #2563eb; background: #eff6ff; }
.status-badge.status-done      { border-color: #16a34a; color: #16a34a; background: #f0fdf4; }

/* 案件種別（開先・溶接／全工程／新型／簡易工事）を色とアイコンで識別しやすくするバッジ */
.type-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}
.type-badge i { font-size: 10px; }
.type-badge.type-weld   { background: #fde3e8; color: #a3123a; }
.type-badge.type-full   { background: #dbeafe; color: #1d4ed8; }
.type-badge.type-new    { background: #ede9fe; color: #6d28d9; }
.type-badge.type-simple { background: #e2e8f0; color: #475569; }
.type-badge.type-other  { background: #f1f5f9; color: #64748b; }

.thumb {
  width: 48px; height: 48px; object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: #f1f5f9;
}

.mold-detail-header {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  flex-wrap: wrap;
  position: relative;
}
.mold-detail-header .thumb-col { flex-shrink: 0; text-align: center; }
.mold-detail-header .thumb-large {
  width: 140px; height: 140px; object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: #f1f5f9;
}
.mold-detail-header .thumb-placeholder {
  display: flex; align-items: center; justify-content: center;
  font-size: 32px; color: var(--border);
}
.mold-detail-header .thumb-upload-trigger {
  flex-direction: column; gap: 8px; font-size: 26px; color: var(--primary);
  border: 2px dashed var(--primary-light); background: #fdf2f4; cursor: pointer;
  padding: 0; font-family: inherit;
}
.mold-detail-header .thumb-upload-trigger span { font-size: 12px; font-weight: 700; line-height: 1.4; padding: 0 6px; }
.mold-detail-header .thumb-upload-trigger:hover { background: #fbe4e8; }
.mold-detail-header .thumb-caption { margin-top: 8px; font-weight: 700; font-size: 13px; }
.mold-detail-header .thumb-col canvas { margin: 10px auto 0; display: block; }

/* 情報カードと資料添付を同じ行に並べ、その下いっぱいに工程一覧を広げる。
   資料添付は通常の2倍幅(600px)を上限にしつつ、画面が狭くなったら情報カードと一緒に縮む（片方だけ固定幅で押し込まれないように） */
.detail-top-row { display: flex; gap: 20px; align-items: stretch; }
.detail-top-row .mold-detail-header { flex: 3 1 320px; min-width: 320px; margin-bottom: 0; }
.detail-top-row .detail-side { flex: 2 1 260px; min-width: 260px; max-width: 600px; margin-bottom: 0; }

.detail-layout { display: flex; gap: 20px; align-items: stretch; }
.detail-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.detail-side { width: 300px; flex-shrink: 0; }
.history-side { width: 460px; flex-shrink: 0; align-self: flex-start; position: sticky; top: 76px; }
.history-side .card { max-height: calc(100vh - 96px); display: flex; flex-direction: column; margin: 0; }
.history-side .history-list { flex: 1; min-height: 0; max-height: none; overflow-y: auto; }
.doc-panel {
  height: 100%; min-height: 320px;
  border: 2px dashed var(--primary);
  border-radius: var(--radius);
  background: #fff;
  padding: 18px;
  display: flex; flex-direction: column;
  transition: background 0.1s, border-color 0.1s;
}
.doc-panel.dragover { background: #fdf2f4; border-color: var(--primary-dark); }
.doc-panel-empty {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; cursor: pointer; color: var(--text-muted); text-align: center;
}
.doc-panel-empty i { font-size: 44px; color: var(--primary-light); }
.doc-panel-empty span { font-size: 18px; font-weight: 700; color: var(--text); }
.doc-panel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font-weight: 700; font-size: 14px; }
.doc-grid { display: grid; grid-template-columns: 1fr; gap: 8px; overflow-y: auto; align-content: start; }
.doc-grid .doc-tile a { display: flex; align-items: center; gap: 10px; padding: 6px 30px 6px 6px; }
.doc-grid .doc-tile img, .doc-grid .doc-tile .doc-tile-icon { width: 48px; height: 48px; flex-shrink: 0; }
.doc-grid .doc-tile-name { padding: 0; flex: 1; min-width: 0; }
.doc-grid .doc-tile-time { padding: 0; flex-shrink: 0; }
.doc-tile { position: relative; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; background: #f8fafc; }
.doc-tile a { display: block; color: inherit; }
.doc-tile img { width: 100%; height: 130px; object-fit: cover; display: block; }
.doc-tile-icon { width: 100%; height: 130px; display: flex; align-items: center; justify-content: center; font-size: 42px; color: var(--text-muted); }
.doc-tile-name { font-size: 11px; padding: 6px 7px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-tile-time { font-size: 10px; color: var(--text-muted); padding: 0 7px 6px; }
.doc-tile-delete {
  position: absolute; top: 4px; right: 4px; width: 18px; height: 18px;
  background: rgba(255,255,255,0.9); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--danger); cursor: pointer; font-size: 11px;
}

.info-grid { flex: 1; min-width: 300px; }
.info-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; flex-wrap: wrap;
  padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 14px;
}
.info-row:last-child { border-bottom: none; }
.info-row .info-right { color: var(--text-muted); white-space: nowrap; }
.heat-badges { position: absolute; right: 20px; bottom: 16px; display: flex; gap: 8px; }
.badge-preheat, .badge-postheat {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 800; padding: 3px 12px; border-radius: 999px; white-space: nowrap;
  line-height: 1.6;
}
.badge-preheat i, .badge-postheat i { font-size: 11px; }
.badge-preheat { background: #fef3c7; color: #b45309; }
.badge-postheat { background: #fee2e2; color: #b91c1c; }
.info-customer { font-size: 15px; font-weight: 700; padding: 10px 0 5px; }
.deadline-emphasis { color: var(--danger); font-weight: 900; font-size: 15px; }
.info-item-name { font-size: 17px; font-weight: 900; }
.btn-link {
  background: none; border: none; padding: 0; margin-right: 16px;
  color: #1d4ed8; text-decoration: underline; cursor: pointer;
  font-size: 13px; font-weight: 700; display: inline-block;
}
.btn-link:disabled, .btn-link.disabled { color: #94a3b8; text-decoration: none; cursor: default; }

.process-strip2 {
  display: flex; flex-wrap: wrap;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.process-cell {
  flex: 0 0 66px; width: 66px; box-sizing: border-box;
  border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
  text-align: center; padding: 7px 3px;
}
.process-cell:last-child { border-right: none; }
.process-cell-btns { display: flex; justify-content: center; align-items: center; gap: 3px; flex-wrap: wrap; }
.process-cell .step { font-size: 10px; color: var(--text-muted); font-weight: 700; }
.process-cell .name {
  font-size: 9px; font-weight: 700; margin: 3px 0 6px;
  white-space: nowrap;
}
.process-cell .name.name-compact { font-size: 7px; } /* 66px幅だと折り返してしまう長めの工程名だけ縮小する */
.process-cell.done { background: #f0fdf4; }
.process-cell.done .step, .process-cell.done .name { color: var(--success); }
.process-cell.done .camera-add-btn { border-color: var(--success); color: var(--success); }

/* 処理工程（表面処理から自動追加）は常に紫のアクセント帯で製造工程と区別する */
.process-cell.procurement { border-top: 3px solid #7c3aed; }
/* 外注中（送付済み・未承認/未完了）は背景をアンバーにして一目でわかるようにする */
.process-cell.outsourced { background: #fffbeb; }
.process-cell.outsourced .step, .process-cell.outsourced .name { color: #b45309; }
.outsource-badge {
  display: inline-block; margin-top: 4px; font-size: 8px; font-weight: 800;
  color: #b45309; background: #fef3c7; border-radius: 999px; padding: 2px 6px;
  white-space: normal; line-height: 1.3; max-width: 100%;
}
.outsource-badge.overdue { color: #fff; background: var(--danger); }
.outsource-send-btn, .outsource-photo-btn, .outsource-approve-btn, .outsource-cancel-btn, .outsource-remove-btn {
  border: 1px solid var(--text); border-radius: 4px;
  background: #fff; cursor: pointer; width: 22px; height: 20px; color: var(--text); font-size: 10px;
}
.outsource-send-btn:hover, .outsource-photo-btn:hover { border-color: #b45309; color: #b45309; }
.outsource-approve-btn { border-color: var(--success); color: var(--success); }
.outsource-approve-btn:hover { background: var(--success); color: #fff; }
.outsource-cancel-btn { border-color: var(--text-muted); color: var(--text-muted); font-size: 11px; }
.outsource-cancel-btn:hover { border-color: var(--danger); color: var(--danger); }
.outsource-remove-btn { border-color: var(--text-muted); color: var(--text-muted); }
.outsource-remove-btn:hover { background: var(--danger); border-color: var(--danger); color: #fff; }
.outsource-return-bar { color: #b45309; font-weight: 800; }

/* 案件全体で1件だけの「外注」専用工程を追加する、目立つ大きめボタン */
.btn-outsource-big {
  background: #d97706; min-height: 48px; padding: 12px 22px; font-size: 15px; font-weight: 800;
}
.btn-outsource-big:hover { background: #b45309; }

/* 外注専用工程セル：常時ティール色のアクセント帯で、通常工程と見分けられるようにする（工程名自体が「外注」なのでタグ表示は冗長のため省略） */
.process-cell.outsource-step { border-top: 3px solid #0e7490; }
.outsource-request-info {
  font-size: 8px; font-weight: 700; color: #0e7490; margin-top: 4px; line-height: 1.4;
}
.outsource-request-info div { white-space: normal; overflow-wrap: break-word; }
.count-label { font-size: 9px; color: var(--primary); font-weight: 800; margin-top: 3px; }
.count-warning {
  font-size: 8px; color: #fff; background: var(--danger); font-weight: 800;
  border-radius: 3px; padding: 1px 4px; margin-top: 3px; white-space: normal; cursor: help;
}
.count-warning-over { background: #7c1d1d; border: 1px solid #fff; box-shadow: 0 0 0 1px var(--danger); }

/* マシニング加工の時間記録モーダル（手動/自動×複数工程） */
.te-row {
  display: grid; grid-template-columns: 56px 1fr 56px 30px; gap: 6px; align-items: center;
  padding: 5px 2px; border-bottom: 1px solid var(--border); font-size: 12px;
}
.te-seq { font-weight: 700; color: var(--text-muted); white-space: nowrap; }
.te-staff { color: var(--text-muted); white-space: nowrap; }

.progress-mini { display: flex; align-items: center; gap: 3px; margin-top: 4px; }
.progress-seg { width: 16px; height: 6px; border-radius: 3px; background: var(--border); flex-shrink: 0; }
.progress-seg.done { background: var(--success); }
.progress-mini-label { font-size: 11px; color: var(--text-muted); font-weight: 700; margin-left: 4px; white-space: nowrap; }
.camera-add-btn, .camera-only-btn {
  border: 1px solid var(--text); border-radius: 4px;
  background: #fff; cursor: pointer; position: relative;
  width: 28px; height: 24px; color: var(--text);
}
.camera-add-btn .plus-badge { position: absolute; bottom: -3px; right: -3px; font-size: 8px; background: #fff; border-radius: 50%; padding: 1px; }
.camera-add-btn:hover, .camera-only-btn:hover { border-color: var(--primary); color: var(--primary); }
.check-only-btn {
  border: 1px solid var(--text); border-radius: 4px;
  background: #fff; cursor: pointer; width: 28px; height: 24px; color: var(--text); font-size: 13px;
}
.check-only-btn:hover { border-color: var(--success); color: var(--success); }
.check-only-btn.checked { background: var(--success); border-color: var(--success); color: #fff; }
.worktime-label { font-size: 9px; color: var(--text-muted); margin-top: 3px; font-weight: 700; }
.handover-btn {
  border: 1px solid var(--border); border-radius: 4px;
  background: #fff; color: var(--text-muted); cursor: pointer; width: 28px; height: 24px; font-size: 11px;
}
.handover-btn:hover { border-color: var(--primary); color: var(--primary); }
.handover-btn.has-note { border-color: var(--warning); color: var(--warning); background: #fffbeb; }
.handover-preview {
  margin-top: 4px; font-size: 10px; color: var(--warning); max-width: 66px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer;
}

.photo-bar {
  display: flex; justify-content: space-between; align-items: center;
  background: #e5e7eb; padding: 8px 14px; border-radius: 4px;
  font-weight: 700; font-size: 13px; margin: 18px 0 10px;
}
.photo-bar .camera-only-btn { background: #fff; }
.photo-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.photo-grid img {
  width: 120px; height: 120px; object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  cursor: pointer;
}

.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 200; padding: 20px;
}
.modal-box {
  background: #fff; border-radius: var(--radius);
  padding: 28px; max-width: 640px; width: 100%;
  max-height: 90vh; overflow-y: auto;
  box-shadow: var(--shadow-md);
}
.modal-title { text-align: center; font-size: 20px; font-weight: 900; margin: 0 0 20px; }
.modal-actions { display: flex; gap: 12px; justify-content: center; margin-top: 16px; }
.modal-actions .btn { min-width: 140px; }

.worktime-quick-buttons { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.wt-quick-btn {
  border: 1px solid var(--primary); border-radius: 999px; background: #fff;
  color: var(--primary); font-size: 13px; font-weight: 700; padding: 6px 14px; cursor: pointer;
}
.wt-quick-btn:hover { background: var(--primary); color: #fff; }
.wt-quick-btn.wt-quick-reset { border-color: var(--text-muted); color: var(--text-muted); }
.wt-quick-btn.wt-quick-reset:hover { background: var(--text-muted); color: #fff; }

.lightbox-overlay { flex-direction: column; gap: 12px; }
.lightbox-stage { display: flex; align-items: center; justify-content: center; overflow: visible; }
.lightbox-stage img {
  max-width: 94vw; max-height: 60vh; object-fit: contain; border-radius: 4px;
  transition: transform 0.1s; touch-action: none;
}
/* 90°/270°回転時は元の写真枠（縦横比）のまま見切れるため、回転時は縦横の上限を入れ替える */
.lightbox-stage img.lb-rotated { max-width: 60vh; max-height: 94vw; }
.lightbox-caption { color: #fff; font-size: 15px; font-weight: 700; text-align: center; }
.lightbox-close {
  position: fixed; top: 20px; right: 24px; width: 40px; height: 40px;
  border-radius: 50%; border: none; background: rgba(255,255,255,0.15); color: #fff;
  font-size: 18px; cursor: pointer; z-index: 210;
}
.lightbox-close:hover { background: rgba(255,255,255,0.3); }

/* ズーム・回転・前後送りのメニューは画面下部に固定表示 */
.lightbox-bottombar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 205;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0));
}
.lightbox-toolbar { display: flex; gap: 14px; }
.lightbox-toolbar button {
  width: 44px; height: 44px; border-radius: 50%; border: none;
  background: rgba(255,255,255,0.15); color: #fff; font-size: 16px; cursor: pointer;
}
.lightbox-toolbar button:hover { background: rgba(255,255,255,0.3); }
.lightbox-toolbar .lb-delete-btn { background: rgba(220,38,38,0.5); margin-left: 10px; }
.lightbox-toolbar .lb-delete-btn:hover { background: var(--danger); }
.lightbox-filmstrip {
  display: flex; gap: 8px; max-width: 92vw; overflow-x: auto;
  padding: 6px; scrollbar-width: thin;
}
.lightbox-filmstrip img {
  width: 68px; height: 68px; object-fit: cover; border-radius: 4px; cursor: pointer;
  opacity: 0.55; border: 2px solid transparent; flex-shrink: 0; transition: opacity 0.1s, border-color 0.1s;
}
.lightbox-filmstrip img.active { opacity: 1; border-color: #fff; }
.lightbox-filmstrip img:hover { opacity: 0.85; }

.toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: var(--text); color: #fff; padding: 12px 20px;
  border-radius: var(--radius-sm); box-shadow: var(--shadow-md);
  z-index: 100; font-weight: 700; font-size: 13px;
}
.toast.error { background: var(--danger); }

.defect-report-btn {
  display: inline-block; vertical-align: middle; margin-right: 16px;
  border: 2px solid var(--danger); border-radius: 999px; background: #fff; color: var(--text);
  font-weight: 800; font-size: 12px; padding: 3px 12px; cursor: pointer; line-height: 1.6;
}
.defect-report-btn:hover { background: #fef2f2; }
.defect-report-btn.reported {
  background: var(--danger); color: #fff; border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(220,38,38,0.2);
}
.qr-placeholder {
  width: 140px; height: 140px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  border: 2px dashed var(--border); border-radius: var(--radius-sm);
  color: var(--text-muted); font-size: 12px; text-align: center; padding: 8px;
}
.qr-placeholder i { font-size: 26px; }

.filter-bar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; align-items: flex-end; }
.filter-bar .form-group { margin-bottom: 0; min-width: 150px; }

.empty-state { text-align: center; padding: 60px 20px; color: var(--text-muted); }

/* 実績表（完了品の作業時間集計） */
.actuals-period-bar { display: flex; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.actuals-period-label { font-size: 16px; font-weight: 900; min-width: 120px; text-align: center; }
.actuals-period-bar .btn.active { background: var(--primary); color: #fff; }
.actuals-range-form { display: flex; align-items: center; gap: 6px; }
.actuals-range-form input[type="date"] { max-width: 150px; }
.actuals-kpi { text-align: center; padding: 18px 0 6px; }
.actuals-kpi-label { font-size: 13px; color: var(--text-muted); font-weight: 700; }
.actuals-kpi-value { font-size: 38px; font-weight: 900; color: var(--primary); margin-top: 4px; }
.actuals-bar-table { display: flex; flex-direction: column; gap: 8px; }
.actuals-bar-row { display: grid; grid-template-columns: 120px 1fr 64px; gap: 10px; align-items: center; font-size: 13px; }
.actuals-bar-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 700; }
.actuals-bar-track { background: #f1f5f9; border-radius: 4px; height: 14px; overflow: hidden; }
.actuals-bar-fill { background: var(--primary); height: 100%; border-radius: 4px; }
.actuals-bar-value { text-align: right; font-weight: 800; color: var(--text-muted); white-space: nowrap; }
.actuals-mold-row { cursor: pointer; }
.actuals-mold-row:hover { background: #f8fafc; }
.actuals-process-list { display: flex; flex-direction: column; gap: 14px; }
.actuals-process-card { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; }
.actuals-staff-breakdown { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); display: flex; flex-direction: column; gap: 6px; }
.actuals-staff-row { display: grid; grid-template-columns: 120px 1fr 64px; gap: 10px; font-size: 12px; color: var(--text-muted); align-items: center; }
.actuals-staff-name { font-weight: 700; color: var(--text); }
.actuals-staff-total { text-align: right; font-weight: 800; }

/* 工程表（印刷用） */
.ps-sheet { background: #fff; border: 1px solid #333; border-radius: 8px; overflow: hidden; max-width: 720px; margin: 0 auto; }
.ps-header {
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 55%, #b9647c 100%);
  color: #fff; padding: 14px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
/* 種別ごとにバナー・各セクション見出しの色を変える（案件一覧の種別バッジと同じ色分け） */
.ps-sheet.type-weld   .ps-header { background: linear-gradient(135deg, #7f0e2a 0%, #a3123a 55%, #d95d7f 100%); }
.ps-sheet.type-full   .ps-header { background: linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 55%, #6d92ee 100%); }
.ps-sheet.type-new    .ps-header { background: linear-gradient(135deg, #4c1d95 0%, #6d28d9 55%, #a78bfa 100%); }
.ps-sheet.type-simple .ps-header { background: linear-gradient(135deg, #334155 0%, #475569 55%, #94a3b8 100%); }
.ps-header-type { font-size: 22px; font-weight: 900; letter-spacing: 0.05em; white-space: nowrap; }
/* 業務内容・工事内容・コメントの見出し帯も同じ色で統一する */
.ps-sheet.type-weld   .ps-section-title { background: #a3123a; }
.ps-sheet.type-full   .ps-section-title { background: #1d4ed8; }
.ps-sheet.type-new    .ps-section-title { background: #6d28d9; }
.ps-sheet.type-simple .ps-section-title { background: #475569; }
.ps-header-title { text-align: center; flex: 1; }
.ps-title-main { font-size: 20px; font-weight: 900; letter-spacing: 0.05em; }
.ps-title-sub { font-size: 10px; opacity: 0.9; margin-top: 2px; letter-spacing: 0.05em; }

.ps-body { display: flex; }
.ps-left { width: 190px; flex-shrink: 0; padding: 14px; border-right: 2px solid var(--primary); }
.ps-photo-label { text-align: center; font-size: 11px; color: var(--primary); font-weight: 700; margin-bottom: 6px; }
.ps-photo-box {
  width: 100%; aspect-ratio: 1; border: 1px solid var(--border); border-radius: 6px;
  display: flex; align-items: center; justify-content: center; overflow: hidden; background: #fdf6f7;
}
.ps-photo-box img { width: 100%; height: 100%; object-fit: cover; }
.ps-photo-placeholder { display: flex; flex-direction: column; align-items: center; gap: 6px; color: #e0b8c2; font-size: 26px; }
.ps-photo-placeholder span { font-size: 11px; }
.ps-qr { text-align: center; margin-top: 12px; }
.ps-qr canvas, .ps-qr img { margin: 0 auto; }
.ps-qr-text { text-align: center; font-size: 9px; color: var(--text-muted); margin-top: 4px; letter-spacing: 0.05em; }

.ps-right { flex: 1; min-width: 0; }
.ps-table { width: 100%; border-collapse: collapse; }
.ps-table th, .ps-table td { padding: 8px 12px; border-bottom: 1px solid var(--border); font-size: 13px; text-align: left; }
.ps-table th { width: 90px; background: #f8fafc; color: var(--primary); font-weight: 700; white-space: nowrap; }
.ps-table td { font-weight: 700; }
.ps-table tr.ps-red th, .ps-table tr.ps-red td { color: #c0392b; }
.ps-table tr.ps-highlight th, .ps-table tr.ps-highlight td { background: #fdecea; color: #c0392b; font-weight: 700; }
.ps-table tr.ps-dim th, .ps-table tr.ps-dim td { background: #f4f4f4; color: #9ca3af; font-weight: 400; }
.ps-table tr:last-child th, .ps-table tr:last-child td { border-bottom: none; }

.ps-section-title { background: #29385c; color: #fff; padding: 6px 14px; font-size: 12px; font-weight: 700; letter-spacing: 0.05em; }
.ps-checklist { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px 10px; padding: 10px 14px; }
.ps-check { display: flex; align-items: center; gap: 6px; font-size: 12px; padding: 4px 8px; border: 1px solid var(--border); border-radius: 4px; background: #fff; }
.ps-check.checked { border-color: #d97706; }
.ps-check-icon {
  width: 15px; height: 15px; border: 1px solid var(--border); border-radius: 3px;
  display: flex; align-items: center; justify-content: center; font-size: 9px; color: #d97706; flex-shrink: 0;
}
.ps-check.checked .ps-check-icon { background: #fef3c7; border-color: #d97706; }
.ps-detail, .ps-comment { padding: 10px 14px; font-size: 13px; }
.ps-comment div { border-bottom: 1px solid var(--border); height: 22px; }
.ps-comment-alert { color: var(--danger) !important; font-weight: 800; border-bottom: 1px solid var(--border); }
.ps-comment-textarea {
  width: 100%; box-sizing: border-box; border: 1px solid var(--border); border-radius: 4px;
  font-family: inherit; font-size: 13px; padding: 6px 8px; resize: vertical; min-height: 66px; background: #fff;
}
.ps-footer { display: flex; justify-content: space-between; padding: 8px 14px; font-size: 10px; color: var(--text-muted); border-top: 1px solid var(--border); }

/* 検収（納品書・請求書）印刷シート */
.doc-sheet { max-width: 760px; margin: 0 auto; background: #fff; border: 1px solid var(--border); border-radius: 6px; padding: 32px 40px; }
.doc-header { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 3px solid var(--primary); padding-bottom: 14px; margin-bottom: 20px; }
.doc-title { font-size: 26px; font-weight: 900; letter-spacing: 0.15em; color: var(--primary); }
.doc-meta { font-size: 13px; color: var(--text-muted); text-align: right; line-height: 1.8; }
.doc-header-right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.doc-logo { height: 34px; width: auto; }
.doc-address { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; }
.doc-to { min-width: 260px; }
.doc-to-addr { font-size: 12px; color: var(--text-muted); line-height: 1.6; margin-bottom: 8px; }
.doc-to-name { font-size: 18px; font-weight: 800; border-bottom: 1px solid var(--border); padding-bottom: 8px; }
.doc-from { font-size: 13px; text-align: right; line-height: 1.7; }
.doc-disclaimer { font-size: 11px; color: var(--text-muted); line-height: 1.6; }

/* 請求書（旧Excelテンプレート 請求書221201.xlsx を実測して再現した専用レイアウト）
   実際のセル配置：左列＝宛先/御請求額、右列＝自社情報/振込先、が上下2段で並び、その下に明細表が続く */
.inv-sheet { max-width: 900px; }
.inv-header-row { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 10px; margin-bottom: 14px; }
.inv-seal-col { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.inv-seal { width: 64px; height: 64px; object-fit: contain; }
.inv-grid-row { display: flex; justify-content: space-between; gap: 24px; margin-bottom: 18px; }
.inv-grid-row-mid { align-items: flex-start; }
.inv-col-left { flex: 1 1 320px; min-width: 0; }
.inv-col-right { flex: 1 1 320px; min-width: 0; text-align: right; }
.inv-logo { height: 32px; width: auto; margin-bottom: 6px; }
.inv-company-info { font-size: 12.5px; line-height: 1.7; color: var(--text); }
.inv-issue-date { margin-top: 10px; }
.inv-amount-row { display: flex; align-items: baseline; gap: 14px; margin-top: 14px; border: 2px solid var(--text); border-radius: 4px; padding: 8px 14px; width: fit-content; }
.inv-amount-label { font-size: 15px; font-weight: 800; }
.inv-amount-value { font-size: 20px; font-weight: 900; }
.inv-bank-title { font-weight: 800; margin-bottom: 4px; }
.inv-bank-list { font-size: 12.5px; line-height: 1.7; margin-bottom: 10px; }

/* レイアウト編集で「文字サイズ・色」をブロック単位で変えられるようにするための上書き。
   ブロック内の子要素が個別に固定px/固定colorを持っていると、ブロック側のinline style(font-size/color)が
   効かなくなるため、.inv-block配下に限定してem相対・色継承に切り替える（納品書側の同名クラスには影響させない）。 */
.inv-block[data-block-key="title"] .doc-title { font-size: inherit; color: inherit; }
.inv-block[data-block-key="customerBlock"] .doc-to-addr { font-size: 0.9em; color: inherit; }
.inv-block[data-block-key="customerBlock"] .doc-to-name { font-size: 1.4em; color: inherit; }
.inv-block[data-block-key="companyBlock"] .inv-company-info { font-size: 1em; color: inherit; }
.inv-block[data-block-key="noticeAmountBlock"] .inv-amount-label { font-size: 1.15em; color: inherit; }
.inv-block[data-block-key="noticeAmountBlock"] .inv-amount-value { font-size: 1.5em; color: inherit; }
.inv-block[data-block-key="bankBlock"] .inv-bank-list { font-size: 1em; color: inherit; }
.inv-block[data-block-key="bankBlock"] .doc-disclaimer { font-size: 0.85em; color: inherit; }

/* 請求書レイアウト編集：文字クリック編集＋矢印ボタンでの位置調整
   印刷結果と完全に同じ見た目にするため、印刷時と同じタグ・クラスにcontenteditableを付けるだけにし、
   boxの形が変わるinput/textareaへの差し替えはしない（outlineは行の幅や高さに影響しないため使用）。 */
.inv-edit-field { outline: none; cursor: text; }
.inv-edit-field[data-multiline="1"] { white-space: pre-wrap; }
.inv-edit-field:hover, .inv-edit-field:focus {
  outline: 1px dashed #f59e0b; outline-offset: 2px; background: #fffbe6;
}
.inv-block-toolbar {
  position: absolute; top: -12px; right: -6px; display: flex; align-items: center; gap: 1px;
  background: #fff; border: 1px solid var(--border); border-radius: 6px; padding: 2px 4px;
  box-shadow: 0 1px 5px rgba(0,0,0,.18); z-index: 5;
}
.inv-block-toolbar button {
  border: none; background: none; padding: 3px 5px; font-size: 11px; font-weight: 700;
  cursor: pointer; border-radius: 3px; color: var(--text-muted); line-height: 1;
}
.inv-block-toolbar button:hover { background: #f1f5f9; color: var(--primary); }
.inv-toolbar-sep { width: 1px; height: 14px; background: var(--border); margin: 0 3px; }
.inv-block { margin: 2px 0; }
.inv-block-toolbar input[type="color"] {
  width: 20px; height: 20px; border: 1px solid var(--border); border-radius: 3px; padding: 0;
  cursor: pointer; background: none;
}
.doc-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.doc-table th, .doc-table td { border: 1px solid var(--border); padding: 8px 10px; text-align: left; }
.doc-table th { background: #f8fafc; color: var(--primary); font-weight: 700; }
.doc-table tfoot td { font-weight: 700; }
.doc-table-invoice th:nth-child(4), .doc-table-invoice td:nth-child(4) { text-align: right; }
.doc-table-invoice th:nth-child(5), .doc-table-invoice td:nth-child(5),
.doc-table-invoice th:nth-child(6), .doc-table-invoice td:nth-child(6) { text-align: right; }
.doc-table-invoice td:nth-child(1), .doc-table-invoice td:nth-child(2) { white-space: nowrap; }
.doc-table-invoice th { white-space: nowrap; }

@media print {
  .doc-sheet { border-color: #000; }
  .ps-sheet { border-color: #000; }
  header.app-header, .no-print { display: none !important; }
  main.container { max-width: none; padding: 0; }
  body { background: #fff; }
}

/* スマホ画面ではQRコード（自分でスキャンしてこの画面を開いているため不要）を非表示にする。印刷時は@media printで復元 */
@media (max-width: 640px) {
  .qr-canvas-desktop-only { display: none; }
}

/* ---------- スマホ対応 ---------- */
@media (max-width: 960px) {
  /* 案件詳細：本体／資料添付／変更履歴の3カラムを縦積みにする（横460pxのhistory-sideは特に破綻しやすい） */
  .detail-layout { flex-direction: column; }
  .detail-top-row { flex-direction: column; }
  .detail-side, .history-side { width: 100%; }
  .history-side { position: static; }
  .history-side .card { max-height: none; }
}

@media (max-width: 640px) {
  main.container { padding: 12px; }
  main.container.container-wide { padding: 12px; }
  .card { padding: 14px; margin-bottom: 12px; }
  .page-title { font-size: 17px; }
  .mold-list-row .meta-line { display: flex; flex-wrap: wrap; }
  .mold-list-row .meta-line > span:nth-child(2), .mold-list-row .meta-line > span:last-child { text-align: left; }

  /* 入力欄のfont-sizeが16px未満だとiOSがフォーカス時に自動拡大し、画面がぐりぐり動く原因になるため16px未満にしない */
  .form-control, select, textarea, input[type="text"], input[type="date"], input[type="number"] { font-size: 16px; }

  header.app-header { padding: 8px 12px; }
  /* 案件登録画面はスマホでは入力に集中できるよう、上部メニュー(ナビ・ログイン等)を丸ごと非表示にする */
  header.app-header.header-hide-mobile { display: none; }
  header.app-header .header-top { grid-template-columns: 1fr; gap: 4px; }
  header.app-header .header-left-group { gap: 6px; }
  header.app-header .header-right-group { justify-content: space-between; flex-wrap: wrap; gap: 6px; }
  header.app-header h1 { font-size: 14px; margin-bottom: 2px; }
  header.app-header nav.main-tabs { gap: 5px; }
  header.app-header nav.main-tabs a.nav-btn { font-size: 10px; padding: 4px 7px; gap: 3px; }
  header.app-header nav.main-tabs a.nav-btn i { font-size: 10px; }
  header.app-header nav.main-tabs a.nav-btn-primary { font-size: 11px; padding: 5px 9px; }
  header.app-header .nav-btn-count { font-size: 8px; padding: 1px 4px; margin-left: 3px; }
  header.app-header .header-user-name { display: none; } /* 幅を圧迫するため、ログイン中は名前を省略しベルとログアウトのみ表示 */
  header.app-header .header-subtabs { display: none; } /* タグ（種別絞り込み）行は画面を圧迫するため非表示、必要なら検索から絞り込む */
  header.app-header .header-brand { display: none; } /* ロゴ・会社名は不要 */
  header.app-header .header-gear { display: none; } /* 管理項目設定の歯車は不要 */
  header.app-header .header-bell, header.app-header .header-gear { width: 28px; height: 28px; font-size: 13px; }

  /* 補足説明のうすい文字（field-note）は情報量を削って画面を広く見せるため一律非表示 */
  .field-note { display: none; }
  /* 登録フォームの50音インデックスは省略し、会社名検索のみに絞る */
  .customer-kana-index { display: none; }
  .customer-list-recent { display: none; } /* 最近使用した会社名は不要 */

  .mold-detail-header { flex-direction: column; }
  .mold-detail-header .thumb-large { width: 100%; height: 220px; }
  .info-row { font-size: 13px; }

  /* 工程一覧・アイコン類はできるだけ小さくして、枠からはみ出さず画面スペースを広く見せる */
  .process-strip2 { border-radius: 6px; }
  .process-cell { flex-basis: 46px; width: 46px; padding: 4px 3px; }
  .process-cell .step { font-size: 9px; }
  .process-cell .name { font-size: 8px; margin: 2px 0 4px; }
  .process-cell .name.name-compact { font-size: 6px; }
  .process-cell-btns { gap: 2px; }
  .camera-add-btn, .camera-only-btn, .check-only-btn, .handover-btn,
  .outsource-send-btn, .outsource-photo-btn, .outsource-approve-btn, .outsource-cancel-btn, .outsource-remove-btn {
    width: 22px; height: 20px; font-size: 10px;
  }
  .count-label, .worktime-label, .outsource-badge, .outsource-request-info { font-size: 9px; }
  .progress-seg { width: 11px; height: 5px; }
  .progress-mini-label { font-size: 10px; }
  .header-bell-badge { font-size: 9px; }
  .date-year { display: none; } /* 西暦部分は省スペースのため非表示（月日のみ表示） */

  .modal-overlay { padding: 10px; }
  .modal-box { padding: 16px; }
  .modal-title { font-size: 17px; margin-bottom: 14px; }
  .modal-actions { flex-direction: column; }
  .modal-actions .btn { width: 100%; min-width: 0; }

  /* 顧客マスタの2カラム一覧は420px前提のため、スマホ幅では1カラムに落とす */
  .customer-list.two-col { grid-template-columns: 1fr; min-width: 0; }
  .customer-list.two-col .customer-list-item { border-right: none; }
  /* 検収ページの会社名グリッド・絞り込み行はスマホ幅では1カラム・縦積みに落とす */
  .customer-list.grid-cols { grid-template-columns: 1fr !important; }
  .customer-picker-filters { flex-direction: column; gap: 10px; }

  table.data-table th, table.data-table td { font-size: 12px; padding: 6px 8px; }

  .actuals-bar-row, .actuals-staff-row { grid-template-columns: 84px 1fr 52px; gap: 6px; font-size: 11px; }
}