/* =========================================================
   THEME  LINE=2
   ========================================================= */
:root{
  --bg:#0f172a;
  --panel:#111827;
  --line:#1f2937;
  --text:#e5e7eb;
  --muted:#9ca3af;

  --primary:#2563eb;
  --danger:#ef4444;

  --hover:#f59e0b;
  --selected:#84cc16;
}

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

body{
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  background:var(--bg);
  color:var(--text);
  display:flex;
  flex-direction:column;
}

/* =========================================================
   HEADER          LINE=31
   ========================================================= */
.app-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border-bottom:1px solid var(--line);
}

.app-title{
  display:flex;
  align-items:center;
  gap:12px;
}

.app-title h1{
  margin:0;
  font-size:18px;
}

/* =========================================================
   HEADER RIGHT（テロップ領域に横幅を渡す）  LINE=HDR-RIGHT
   ========================================================= */
.header-right{
  flex: 1;                 /* ★残り幅を全部使わせる（テロップ用） */
  display:flex;
  justify-content:flex-end;/* 右寄せ */
  align-items:center;
  gap:8px;
  min-width: 0;            /* ★flexのはみ出し固定を防ぐ（重要） */
}

/* =========================================================
   HEADER TICKER（ヘッダー用 大型テロップ / H1級）  LINE=HDR-TICKER-START
   - 右エリア（.header-right）内で横スクロール表示
   - セレクタは .header-ticker-wrap / .header-ticker
   ========================================================= */

/* テロップの枠 */
.header-ticker-wrap{
  position: relative;
  overflow: hidden;
  height: 48px;                /* H1級の高さ */
  width: 100%;                 /* .header-right の幅いっぱい */
  max-width: 1440px;            /* 必要なら調整 */
  display:flex;
  align-items:center;

  border: 2px solid rgba(37, 0, 78, 0.918);
  border-radius: 10px;
  background: rgba(26, 26, 29, 0.9);
  padding: 0 12px;
}

/* テロップ文字 */
.header-ticker{
  display:inline-block;        /* transform を安定させる */
  white-space: nowrap;
  font-size: 28px;             /* ★H1級 */
  font-weight: 700;
  color: #d0fce2c7;

  /* ★開始は右外（少し多めに逃がす：見えてしまう環境の保険） */
  transform: translateX(110%);

  /* 移動速度（遅くしたいなら 40s → 60s など）＋点滅 */
  animation:
    /* headerTickerMove 40s linear infinite,         永久ループ */
    headerTickerMove 14s linear 1 forwards,
    headerBlink 1.2s steps(2, start) infinite;

  will-change: transform;      /* ★描画の安定（任意） */
}

/* 右外 → 左外（0%と100%を必ず持つ） */
@keyframes headerTickerMove{
  0%   { transform: translateX(102%); }
  100% { transform: translateX(0%); } /* 少し多めに左へ抜ける  -120%  */
}

/* 点滅（強すぎない範囲） */
@keyframes headerBlink{
  0%   { opacity: 1; }
  50%  { opacity: .35; }
  100% { opacity: 1; }
}

/* ユーザーが動きを減らす設定なら（※停止ではなく“点滅だけ止める”）
   - 「最初から全部表示で動かない」を防ぐため、移動は残す
*/
@media (prefers-reduced-motion: reduce){
  .header-ticker{
    animation:
      /* headerTickerMove 40s linear infinite; 点滅だけ外す */
      headerTickerMove 5s linear 1 forwards;
  }
}

/* =========================================================
   HEADER TICKER END  LINE=HDR-TICKER-END
   ========================================================= */
/* =========================================================
   BUTTONS (APP)     LINE=70
   ========================================================= */
.btn{
  border:1px solid var(--line);
  background:#0b1220;
  color:var(--text);
  padding:8px 10px;
  border-radius:10px;
  cursor:pointer;
  font-size:13px;
}
.btn:hover{ filter:brightness(1.08); }
.btn.primary{ background:rgba(37,99,235,.25); border-color:rgba(37,99,235,.6); }
.btn.danger{  background:rgba(239,68,68,.18); border-color:rgba(239,68,68,.6); }
.btn:disabled{ opacity:.45; cursor:not-allowed; }

/* =========================================================
   MAIN GRID        2026-02-26   LINE=87
   ========================================================= */
.layout{
  display:grid;
  grid-template-columns: 580px 1fr 420px;
  grid-template-rows: 1fr 300px;
  grid-template-areas:
    "left center right"
    "bottom-history bottom-history bottom-files";
  gap:12px;
  padding:12px;
  min-height: calc(100vh - 60px);
}

.pane.left{ grid-area:left; }
.pane.center{ grid-area:center; }
.pane.right{ grid-area:right; }
.pane.bottom-history{ grid-area:bottom-history; }
.pane.bottom-files{ grid-area:bottom-files; }

.pane{ min-height:0; }
.list-wrap{ min-height:0; }

/* =========================================================
   PANES            LINE=111
   ========================================================= */
.pane{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height:0;
}

.pane-title{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  padding:10px 12px;
  border-bottom:1px solid var(--line);
  gap:8px;
}

.pane-title h2{ margin:0; font-size:14px; }
.mini-note{ font-size:12px; color:var(--muted); }

.mini-actions{
  display:flex;
  gap:8px;
  align-items:center;
}

.toolbar{
  display:flex;
  gap:8px;
  padding:10px 12px;
  border-bottom:1px solid var(--line);
}

/* =========================================================
   LIST WRAP (SCROLL)         LINE=149
   ========================================================= */
.list-wrap{
  padding:8px 10px;
  overflow:auto;
  min-height:0;
  outline:2px solid transparent;
  outline-offset:-2px;
  border-radius:12px;
  overscroll-behavior: contain;
  transition: outline-color 120ms ease, box-shadow 120ms ease;
}

.list-wrap:hover{
  outline-color: var(--hover);
  box-shadow: 0 0 0 2px rgba(245,158,11,0.25);
}

/* =========================================================
   TABLES            LINE=168
   ========================================================= */
.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:13px;
}
.table th,.table td{
  border-bottom:1px solid var(--line);
  padding:8px 8px;
  vertical-align:middle;
}
.table th{
  color:var(--muted);
  font-weight:600;
  font-size:12px;
}
.table tr:hover td{ background:rgba(255,255,255,.03); }

.col-flag{ width:44px; text-align:center; }

/* clickable row highlight */
#reqTable tbody tr,
#ptTable tbody tr,
#histTable tbody tr,
#fileTable tbody tr{ cursor:pointer; }

#reqTable tbody tr.row-selected td,
#ptTable tbody tr.row-selected td,
#histTable tbody tr.row-selected td,
#fileTable tbody tr.row-selected td{
  background: rgba(132, 204, 22, 0.25);
}
#reqTable tbody tr.row-selected:hover td,
#ptTable tbody tr.row-selected:hover td,
#histTable tbody tr.row-selected:hover td,
#fileTable tbody tr.row-selected:hover td{
  background: rgba(132, 204, 22, 0.28);
}

/* =========================================================
   SELECT            LINE=210
   ========================================================= */
.block{ border-bottom:1px solid var(--line); }
.block:last-child{ border-bottom:none; }
.field{ padding:10px 12px; }

.select{
  width:100%;
  background:#0b1220;
  border:1px solid var(--line);
  border-radius:10px;
  padding:10px;
  color:var(--text);
}

/* =========================================================
   MAP               LINE=226
   ========================================================= */
.map-title{ align-items:center; }

.map-head-left{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.map-status-inline{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  color:var(--muted);
  font-size:12px;
}

.map-tools{
  display:flex;
  gap:8px;
  align-items:center;
}

.map-shell{
  padding:10px;
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:0;
  flex:1;
}

.map-viewport{
  width:1500px;
  height:1000px;
  max-width:100%;
  max-height:100%;
  background:#0b1220;
  border:1px dashed rgba(255,255,255,.12);
  border-radius:12px;
  position:relative;
  overflow:hidden;
  touch-action:none;
}

#mapImage{
  position:absolute;
  left:0; top:0;
  transform-origin:0 0;
  user-select:none;
  -webkit-user-drag:none;
}

.map-overlay{
  position:absolute;
  left:0; top:0;
  width:100%;
  height:100%;
  pointer-events:none;
}

/* ==================================================================================
       markers clickable（2026-01-27：マーカーをクリックできるようにする）   LINE=289
   ================================================================================== */
#mapOverlay{ pointer-events:auto; }
#mapOverlay g, #mapOverlay circle, #mapOverlay text{ pointer-events:auto; }

/* マップ上マーカーのラベル文字色を黒にする */
#mapOverlay text{ fill:#000; }

/* =========================================================
   BOTTOM TOOLBAR        LINE=298
   ========================================================= */
.bottom-tools{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.divider{ width:1px; height:22px; background:var(--line); margin:0 4px; }

/* =========================================================
   FILES            LINE=304
   ========================================================= */
.file-note{
  padding:10px 12px;
  color:var(--muted);
  font-size:12px;
  border-bottom:1px solid var(--line);
}

.file-link{
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.file-link:hover{ filter:brightness(1.1); }

#fileTable{
  width:100%;
  table-layout:fixed; /* 固定レイアウト：列幅は width 指定で決まる */
}

#fileTable th,
#fileTable td{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}



/* ===========================================================================
   FILE TABLE: ★列だけは省略「…」を無効化する（Dsp/★対策）  LINE=335
   =========================================================================== */

/* 見出し [Dsp] を省略しない */
#fileTable th.col-flag{
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
  width: 64px;          /* ← [Dsp] が全部見える幅。必要なら 56/60/70 で調整 */
  text-align: right;    /* 右寄せのまま */
}

/* 明細の★も「…」を出さない */
#fileTable td.col-flag{
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
  width: 64px;          /* 見出しと同じ幅に揃える */
  text-align: right;    /* ★を右端へ */
}

/* ★ボタン自体も折り返し禁止（念のため） */
#fileTable td.col-flag .star-btn{
  display: inline-block;
  white-space: nowrap;
}



/* [ID] は固定幅 */
#fileTable .f-id{
  width:70px;
  text-align:center;
}

/* ★列は固定幅（右端に“固定”される） */
#fileTable .col-flag{
  width:44px;
  text-align:right; /* ★を右寄せ（列内） */
  white-space:nowrap;
}

/* Title は残りを全部使う（ここが「広げる」本体） */
#fileTable .f-title{
  width:auto;
}

/* ★ボタン自体の余計な余白でズレないように（任意だが安定する） */
#fileTable td.col-flag .star-btn{
  display:inline-block;
}

/* =========================================================
   HISTORY TABLE FIXED COLS         LINE=388
   ========================================================= */
#histTable{
  width:100%;
  table-layout:fixed;
}
#histTable th, #histTable td{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#histTable .h-date{ width:110px; }
#histTable .h-req{ width:180px; }
#histTable .h-mini{ width:90px; }
#histTable .h-note{ width:auto; }

/* =========================================================
   STAR BUTTON           LINE=405
   ========================================================= */
.star-btn{
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  color: var(--text);
  border-radius:10px;
  padding: 4px 10px;
  cursor:pointer;
  font-size:14px;
}
.star-btn:hover{ filter:brightness(1.08); }

/* =========================================================
   RIGHT PANE (POINT TABLE HEIGHT)       LINE=419
   ========================================================= */
.pane.right{
  display:flex;
  flex-direction:column;
  min-height:0;
}
.pane.right .drawing-block{ flex:0 0 auto; }
.pane.right .points-block{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
}
.pane.right .points-block .list-wrap{
  flex:1 1 auto;
  min-height:0;
}
.pane.right .pane-title{ padding:8px 10px; }

/* 2026-01-26-AM5:40：ポイント表：行高を少し狭く + ★ボタンを小さく */
#ptTable th, #ptTable td{ padding:6px 8px; }
.star-btn{ padding:2px 8px; font-size:12px; border-radius:8px; }
#ptTable .col-flag{ width:38px; }

/* =========================================================
   STATUS PILL            LINE=445
   ========================================================= */
.status-pill{
  display:inline-block;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#0b1220;
  color:var(--text);
  font-size:12px;
  line-height:1.6;
}
.status-pill.is-active{
  border-color: rgba(132, 204, 22, 0.7);
  background: rgba(132, 204, 22, 0.25);
  color: var(--text);
}

/* =========================================================
   ptRes button (解除)（2026-01-29）    LINE=464
   ========================================================= */
#ptRes{
  min-width:72px;
  background:#fb923c;
  border-color:#fb923c;
  color:#111827;
}
#ptRes:hover{ background:#f97316; border-color:#f97316; }
#ptRes:active{ background:#ea580c; border-color:#ea580c; }
#ptRes:disabled{
  background:#fed7aa;
  border-color:#fed7aa;
  color:#9a3412;
  cursor:not-allowed;
}

/* =========================================================
   DIALOG BASE (confirm/editor)
   IMPORTANT: dialog is visible only when [open]  LINE=483
   ========================================================= */
.dialog::backdrop{ background: rgba(0,0,0,.55); }
.dialog{
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--panel);
  color:var(--text);
  padding:0;

  /* safety: avoid accidental show by CSS */
  display:none;
}
.dialog[open]{ display:block; }

.dialog-body{
  padding:14px 16px;
  min-width:360px;
}
.dialog-body h3{ margin:0 0 6px 0; font-size:15px; }
.dialog-body p{ margin:0 0 12px 0; color:var(--muted); }
.dialog-actions{ display:flex; justify-content:flex-end; gap:8px; }

.editor .dialog-body{
  min-width:min(820px, calc(100vw - 40px));
  max-height: min(80vh, 740px);
  overflow:auto;
}

.editor-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding-bottom:10px;
  border-bottom:1px solid var(--line);
}

.editor-sub{
  margin-top:4px;
  font-size:12px;
  color:var(--muted);
}

.editor-actions{ display:flex; gap:8px; align-items:center; }

.editor-form{
  padding-top:12px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px 14px;
}
@media (max-width:900px){
  .editor-form{ grid-template-columns:1fr; }
}

.form-row{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:10px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#0b1220;
}
.form-row label{ font-size:12px; color:var(--muted); }

.input, .select2{
  width:100%;
  border:1px solid var(--line);
  background:#0a1324;
  color:var(--text);
  border-radius:10px;
  padding:10px;
  font-size:13px;
}

.check-row{ display:flex; align-items:center; gap:8px; }
.editor-hint{ margin-top:10px; font-size:12px; color:var(--muted); }

/* =========================================================
   PHOTO VIEWER dialog (ptPhotosDialog)  ※JSロジック維持
   IMPORTANT: show only when [open]        LINE=565
   ========================================================= */
#ptPhotosDialog{
  position: fixed;
  left: 16px;
  bottom: 16px;
  margin: 0;

  /* safety */
  display:none;
}
#ptPhotosDialog[open]{ display:block; }

.photo-dialog{ border-radius:14px; }
.photo-body{
  width: min(720px, calc(100vw - 32px));
  height: min(520px, calc(100vh - 32px));
  overflow: hidden;
  padding: 12px 12px;
}
.photo-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding-bottom:10px;
  border-bottom:1px solid var(--line);
}
.photo-actions{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}
.photo-view{
  margin-top:12px;
  height: calc(100% - 58px);
  display:flex;
  flex-direction:column;
  gap:8px;
}
#ptPhotoImg{
  width:100%;
  height:100%;
  flex:1;
  object-fit:contain;
  background:#0b1220;
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  cursor:pointer;
}
.photo-note-line{
  font-size:12px;
  color:var(--muted);
  min-height:18px;
}
.photo-pager{
  font-size:12px;
  color:var(--muted);
  text-align:right;
}

/* =========================================================
   PHOTO ADD dialog (ptPhotoAddDialog)  ※JSロジック維持
   IMPORTANT: show only when [open]       LINE=629
   Requirements:
   - width not too wide
   - no "auto show" at startup
   - header/body/footer fixed; body scroll
   - 3 columns fixed
   - 90-degree corners everywhere
   - comment 1-line height
   - enough height; list uses remaining height
   ========================================================= */

/* ★迷子防止：.modal.modal-photo-add を1か所に統合（意味は維持） */
.modal.modal-photo-add{
  /* safety: do NOT show unless open（初期起動で勝手に出さない） */
  display:none;

  /* base (white theme) */
  width: min(560px, 92vw);  /* ← 横幅を狭くする本丸（必要なら 680/640 に変更） */
  max-width: 560px;
  /* ③ 全体の最大高さ：少し背高にして見切れを減らす */
  max-height: 96vh;;
  padding: 0;
  border: 1px solid #ccc;
  border-radius: 0;         /* 角90度 */
  background: #fff;
  color: #111;

  /* 3段構成（header/body/footer） */
  flex-direction: column;
  overflow: hidden;
}
.modal.modal-photo-add[open]{
  display:flex;
}

.modal.modal-photo-add::backdrop{
  background: rgba(0,0,0,.35);
}

/* header/footer 固定 */
.modal.modal-photo-add .modal-header,
.modal.modal-photo-add .modal-footer{
  flex: 0 0 auto;
  border-radius: 0;
}

.modal.modal-photo-add .modal-header{
  padding: 14px 16px 10px;
  border-bottom: 1px solid #e5e5e5;
}
.modal.modal-photo-add .modal-header h2{
  margin: 0 0 6px 0;
  font-size: 18px;
  font-weight: 700;
}

/* サブタイトルも折り返すと縦を食うため、同じく1行固定 */
.modal.modal-photo-add .modal-sub{
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}


/* =========================================================
   2026-02-03：写真追加モーダル（レイアウト崩れ対策）  LINE=695
   症状：
     - 写真一覧が伸びすぎて、下の入力欄/ボタンが押せない
   方針：
     - スクロールは「写真一覧だけ」
     - bodyはスクロールさせない
   ========================================================= */

/* body だけスクロール */
.modal.modal-photo-add .modal-body{
  flex: 1 1 auto;
  min-height: 0;

  /* ③ モーダル本体(body)はスクロールさせない（見切れ防止） */
  overflow: hidden;

  padding: 14px 16px 12px;

  display:flex;
  flex-direction:column;
  gap:12px;
}

/* （残っていた場合）空の .photo-picker は消す */
.modal.modal-photo-add .photo-picker:empty{ display:none; }


/* =========================================================
   ② 写真一覧：横スクロールを出さない（PDFの青枠）  LINE=723
   - 深層対策：
     (a) 親枠で overflow-x を封鎖
     (b) グリッド列を minmax(0,1fr) にして列幅が箱を超えないようにする
     (c) 子要素の min-width 由来のはみ出しを防ぐ
   ========================================================= */

/* JS-generated list container（一覧全体の枠）
   ★ここが本丸：高さを制限して「一覧だけスクロール」
   → 下のテキストBOX/ボタンを押し出さない
*/
.modal.modal-photo-add .photo-pick-box{
  /* ★伸び放題にしない（下を押し出す原因） */
  flex: 0 0 auto;
  min-height: 0;

  /* ★一覧枠の中だけスクロール */
  max-height: 380px;          /* 目安：3列×3～4段見える（必要なら 280/360 で調整） */
  overflow-y: auto;
  overflow-x: hidden !important;  /* ★これが本丸（横スクロール禁止） */

  border: 1px solid #e0e0e0;
  border-radius: 0;          /* 角90度 */
  background: #fff;
  padding: 12px;
  margin: 0;
  color: #000;
}

/* ======================================================================================
   3列固定
   - 「どの div でも」ではなく、一覧本体（.photo-pick-grid）だけをグリッド化する
   - 以前の .photo-pick-box > div は、status/hint まで grid にして崩れる原因
   ======================================================================================*/
.modal.modal-photo-add .photo-pick-grid{
  display: grid !important;

  /* ★3列（横幅を狭くする目的と整合） */
  grid-template-columns: repeat(3, 130px) !important; /* ★はみ出し防止の定石 */
  justify-content: center;
  gap: 10px !important;

  /* スクロールは親（photo-pick-box）に任せる */
  overflow: visible !important;

  /* 余計な横はみ出し防止 */
  min-width: 0 !important;
}

/* 角90度を内部まで統一（JSの角丸スタイルがあっても上書き）
   ★min-width:0 は横スクロール原因になりやすいので必須
*/
.modal.modal-photo-add,
.modal.modal-photo-add .photo-pick-box,
.modal.modal-photo-add .photo-pick-grid,
.modal.modal-photo-add .photo-pick-grid > *{
  min-width: 0 !important;  /* ★これが無いと横スクロール原因になりやすい */
}

/* thumbs：縦横比を崩さない（歪み防止）
   - 高さは現状（90px）を維持
*/

/* 写真追加モーダル：画像の歪みを強制的に禁止（高さは現状維持） */
.modal.modal-photo-add .photo-pick-thumb,
.modal.modal-photo-add .photo-pick-box img{
  width: 100% !important;
  height: 90px !important;             /* 高さは変えない */
  object-fit: cover !important;        /* 歪み禁止（必要ならトリミング） */
  object-position: center !important;  /* 中央基準 */
  display: block !important;

  /* 念のため：別CSSやJSで変形されても無効化 */
  transform: none !important;
  max-width: none !important;
}

/* =========================================================
   ④ 下の入力欄が押せない場合の最後の保険         LINE=801
   - 一覧枠が大きすぎる環境では、さらに少しだけ抑える
   画面高さ条件の上書き    2026-2-4
   ========================================================= */
/* @media (max-height: 990px){
  .modal.modal-photo-add .photo-pick-box{
    max-height: 330px;
  }
} */


/* input area */
.modal.modal-photo-add .photo-input{
  display:grid;
  gap:10px;
  padding-top:4px;
}

/* keep existing HTML ids, just style */
.modal.modal-photo-add .form-row{
  display:grid;
  grid-template-columns: 120px 1fr;
  gap: 12px;
  align-items:start;

  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
}

.modal.modal-photo-add .form-row label{
  font-size:13px;
  padding-top:8px;
  opacity:.9;
  color:#111;
}

.modal.modal-photo-add .form-row input[type="text"],
.modal.modal-photo-add .form-row textarea{
  width:100%;
  padding:10px 10px;
  border:1px solid #ccc;
  border-radius:0;
  font-size:14px;
  color:#111;
  background:#fff;
}

/* comment = 1 line height（2行→1行相当） */
.modal.modal-photo-add #ptPhotoAddNote{
  height: 2.2em;
  line-height: 1.6;
  padding: 6px 8px;
  overflow: hidden !important;  /* ★スクロールバー非表示 */
  resize: none !important;      /* ユーザー操作で伸ばさない（見た目安定） */
}

/* pick status */
.modal.modal-photo-add .pick-status{
  font-size:13px;
  font-weight:600;
  opacity:.9;
  padding:2px 0 0;
  color:#111;
}

/* footer fixed */
.modal.modal-photo-add .modal-footer{
  padding: 12px 16px;
  border-top: 1px solid #e5e5e5;
  display:flex;
  gap:10px;
  justify-content:flex-end;
}

/* modal buttons (HTML class based) */
.modal.modal-photo-add .modal-footer button{
  min-width: 140px;
  height: 38px;
  border-radius: 0;
  border: 1px solid #ccc;
  cursor: pointer;
}

.modal.modal-photo-add .photo-pick-cap{
  font-size: 12px;
  padding-top: 4px;
}



/* =========================================================
   ① 説明文（2行）を非表示にする                LINE=894
   - 目的：縦の無駄をゼロにする（PDFの赤枠）
   - ロジックには触らない（表示だけ消す）
   ========================================================= */
.modal.modal-photo-add .modal-note{
  display: none !important;
}

/* キャプションは1行固定（高さを安定させて2.5段を作りやすくする） */
.modal.modal-photo-add .photo-pick-cap{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}



/* ======================================================================
   2026-02-03：写真一覧の見える段数（縦2.5段）調整       LINE=913
   - JSロジックは触らない
   - 一覧枠（photo-pick-box）だけ高さ制限して枠内スクロール
   - 中だけスクロール（下の入力欄/ボタンは押せるまま）
   ====================================================================== */
.modal.modal-photo-add .photo-pick-box{
  height: 430px !important;   /* ★3段が安定して見える目安（必要なら 360/400 で微調整） */
  max-height: none !important;/* ★max-height の縮み要因を排除 */
  overflow-y: auto;
  overflow-x: hidden !important;

  box-sizing: border-box;/* 2026-02-04-　追加の“安全策” */
}


/* keep your existing button class names */
.btn-primary{
  border-color: #16a34a;
  background: #16a34a;
  color: #fff;
}
.btn-secondary{
  border-color: #f59e0b;
  background: #f59e0b;
  color: #111;
}
.btn-ghost{
  background: #fff;
  color: #111;
}



/* =========================================================
   END                 LINE=947  
   ========================================================= */

/* =========================================================
   2026-02-04：写真追加モーダル 最終上書き（本番）
   目的：
     - 写真一覧を「3列固定」
     - 縦は「約3段」見せて、超えた分は枠内スクロール
     - 下の入力欄/ボタンは常に押せる
   ========================================================= */
#ptPhotoAddDialog .photo-pick-box{
  /* ★ここが段数の本丸：この高さで「見える段数」が決まる */
  height: 100px;           /* 3段安定。少し減らすなら 400 / 増やすなら 460 */
  max-height: none;
  overflow-y: auto;
  overflow-x: hidden;

  /* 見た目は従来のまま（角90度） */
  border: 1px solid #e0e0e0;
  border-radius: 0;
  background: #fff;
  padding: 12px;
  margin: 0;
  color: #000;

  box-sizing: border-box;  /* 計算の安定化 */
}

/* ===========================================================================
   2026-02-04：タイル高さを安定させる（段数がブレないように）       LINE=976
   =========================================================================== */
#ptPhotoAddDialog .photo-pick-item{
  display: flex;
  flex-direction: column;
}

#ptPhotoAddDialog .photo-pick-cap{
  height: 18px;              /* ★キャプション領域を固定（ここが段数ブレの主因） */
  line-height: 18px;
  padding-top: 0;
}


/* =========================================================
   2026-02-04：3ボタン選択ダイアログ（写真（任意）） LINE=991
   対象：JS生成の <dialog id="dlgChoice3">
   要望：左右余白を増やす／高さ（縦の余裕）を増やす／ボタンを中央揃え
   ========================================================= */
#dlgChoice3{
  /* ダイアログ自体の幅と余白感 */
  width: min(520px, calc(100vw - 40px));
  padding: 0;
  border-radius: 14px; /* ここは好み。角90度なら 0 に */
}

#dlgChoice3 .dialog-header{
  padding: 18px 22px 10px;  /* ★左右余白を増やす + 上にも余裕 */
}

#dlgChoice3 #dlgChoice3Title{
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 8px;
}

#dlgChoice3 #dlgChoice3Msg{
  padding: 0 22px 8px;      /* ★本文にも左右余白 */
  line-height: 1.7;
}

/* ★ボタンを中央揃え（JSの inline justify-content:flex-end を上書き） */
#dlgChoice3 .dialog-actions{
  justify-content: center !important;  /* ★本丸 */
  padding: 14px 22px 18px;            /* ★下にも余裕 */
  gap: 12px !important;
  flex-wrap: wrap;                     /* 画面が狭いとき崩れない */
}

/* ボタンの見た目（任意） */
#dlgChoice3 .dialog-actions button{
  min-width: 140px;
}


/* =======================================================================================
   2026-02-04：ポイント追加/修正（ptEditDialog）レイアウト個別調整
   目的：
     - 「モーダル全体の幅」と「入力欄（POINT/comment）の幅」を別々に調整できるようにする
     - JSロジックは触らない（CSSのみ）
   対象：
     <dialog id="ptEditDialog" class="dialog editor"> ... </dialog>
   ======================================================================================= */

/* ---------------------------------------------------------
   A) モーダル（画面枠）のサイズ                 LINE=1041
   - ここを変えると「画面の横幅」が変わる
   - 入力欄の幅は別で制御する（Bで設定）
   --------------------------------------------------------- */
#ptEditDialog .editor-body{
  /* ★画面サイズ（必要に応じて数値だけ変える） */
  min-width: min(520px, calc(100vw - 40px));  /* ← モーダルの幅（基準） */
  max-height: min(80vh, 520px);               /* ← 高さの上限（画面からはみ出さない） */
  overflow: auto;                             /* 中身が長い場合だけスクロール */
}

/* ---------------------------------------------------------
   B) 入力欄の幅（個別フィールド化）              LINE=1053
   - POINT：5文字程度（短め）
   - comment：日本語20字程度（長め）
   ※ここは「モーダル幅」と独立して効く
   --------------------------------------------------------- */
#ptEditDialog #ptLabelInput{
  width: 8em;                 /* ★POINT：5文字目安（必要なら 6em/7em/9em） */
  max-width: 100%;
}

#ptEditDialog #ptCommentInput{
  width: 32em;                /* ★comment：日本語20字目安（必要なら 28em/30em/36em） */
  max-width: 100%;
}

/* ---------------------------------------------------------
   C) 入力欄の並び（崩れ防止）               LINE=1069
   - 2列グリッドを使って「ラベル」と「入力欄」を安定配置
   - 画面が狭いときは1列に落とす
   --------------------------------------------------------- */
#ptEditDialog .editor-form{
  display: grid;
  grid-template-columns: 140px 1fr;  /* 左：ラベル / 右：入力欄エリア */
  gap: 10px 12px;
}

#ptEditDialog .editor-form .form-row{
  /* form-row が既存で「縦積み」なので、ここでは横並びにする */
  display: contents; /* ★ラッパーをレイアウトから外し、label + input を直にgridへ */
}

#ptEditDialog .editor-form .form-row label{
  align-self: center;
}

#ptEditDialog .editor-form .form-row input{
  /* 入力欄の右側は基本は左詰め（短いPOINTでも自然） */
  justify-self: start;
}

/* 画面が狭い場合は1列に落とす（スマホ/縮小時の保険） */
@media (max-width: 640px){
  #ptEditDialog .editor-form{
    grid-template-columns: 1fr;
  }
  #ptEditDialog .editor-form .form-row label{
    margin-top: 6px;
  }
}

/* ---------------------------------------------------------
   D) ボタンを中央揃え（戻る/保存）        LINE=1104
   --------------------------------------------------------- */
#ptEditDialog .editor-actions{
  justify-content: center;
  width: 100%;
  gap: 10px;
}


/* =========================================================
   要件修正モーダル：グリッドレイアウト（基準）   LINE=1114
   5列 × 6行（50mm × 25mm）
   ========================================================= */
#reqEditDialog #editorForm{
  display: grid;
  grid-template-columns: repeat(5, 50mm); /* A〜E */
  grid-template-rows: repeat(6, 25mm);    /* 1〜6 */
  gap: 6px 8px;
  align-content: start;
}


/* ---- 1行目 ---- */
.f-id            { grid-column: 1; grid-row: 1; } /* A1 */
.f-title         { grid-column: 2; grid-row: 1; } /* B1 */
.f-occurred      { grid-column: 4; grid-row: 1; } /* D1 */
.f-severity      { grid-column: 5; grid-row: 1; } /* E1 */

/* ---- 2行目 ---- */
.f-client        { grid-column: 2; grid-row: 2; } /* B2 */
.f-Requirements  { grid-column: 3; grid-row: 2; } /* C2 */
.f-Inclination   { grid-column: 4; grid-row: 2; } /* D2 */
.f-Roadconditions{ grid-column: 5; grid-row: 2; } /* E2 */

/* ---- 3行目 ---- */
.f-nextAction    { grid-column: 2; grid-row: 3; } /* B3 */
.f-progress      { grid-column: 3; grid-row: 3; } /* C3 */
.f-deadline      { grid-column: 4; grid-row: 3; } /* D3 */

/* ---- 4行目 ---- */
.f-isHidden      { grid-column: 2; grid-row: 4; } /* B4 */
.f-Completed     { grid-column: 3; grid-row: 4; } /* C4 */
.f-Agreement1    { grid-column: 4; grid-row: 4; } /* D4 */
.f-Agreement2    { grid-column: 5; grid-row: 4; } /* E4 */

/* ---- 5行目 ---- */
.f-demandID      { grid-column: 2; grid-row: 5; } /* B5 */
.f-note          { grid-column: 3 / span 3; grid-row: 5; } /* C5+D5+E5 */

/* ---- 6行目 ---- */
.f-mapused       { grid-column: 2; grid-row: 6; } /* B6 */
.f-mapID         { grid-column: 3; grid-row: 6; } /* C6 */


/* =========================================================
   重要項目（紫反転）               LINE=1159
   ========================================================= */
#reqEditDialog .form-row.is-key{
  background: #5b2d8b;
  color: #ffffff;
  padding: 6px 8px;
  border-radius: 6px;
}

#reqEditDialog .form-row.is-key label{
  color: #ffffff;
  font-weight: 600;
}


/* ====================================================
   履歴 修正モーダル：XY固定          LINE=1175
   ==================================================== */
#histEditDialog .hist-grid{
  display: grid;
  gap: 10px;

  /* 4列×5行（40mm×25mm を“目安”として、画面に合わせて縮む設計） */
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  grid-auto-rows: minmax(84px, auto);

  grid-template-areas:
    "A1  B1  .   ."
    ".   B2  C2  D2"
    ".   B3  .   D3"
    ".   NOTE NOTE NOTE"
    ".   NOTE NOTE NOTE";
}

/* grid-area 名と、実フィールドの対応 */
#histEditDialog .hist-grid .form-row{ min-width: 0; }

/* NOTE（B4～D5）を広く */
#histEditDialog .hist-grid .form-row[style*="grid-area: NOTE"]{
  align-items: start;
}
#histEditDialog .hist-grid .textarea{
  width: 100%;
  min-height: 160px;
  resize: vertical;
  box-sizing: border-box;
}

/* 重要（紫） */
#histEditDialog .hist-grid .form-row.is-important{
  background: rgba(140, 90, 255, 0.10);
  border: 1px solid rgba(140, 90, 255, 0.35);
  border-radius: 10px;
  padding: 10px;
}



/* ====================================================
   履歴モーダル：クリック不能（被さり）対策     LINE=1218
   ==================================================== */
#histEditDialog .editor-head{
  position: sticky;
  top: 0;
  z-index: 50;           /* ★フォームより前 */
  background: #fff;      /* ★下が透けて押せない事故防止 */
}

#histEditDialog .editor-actions{
  position: relative;
  z-index: 60;           /* ★ボタンをさらに前へ */
}

#histEditDialog #histEditorForm{
  position: relative;
  z-index: 1;            /* ★ヘッダより後ろ */
}

/* textarea が勝手に巨大化して覆う事故の保険 */
#histEditDialog #histEditorForm textarea{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}




/* =====================================================
   履歴モーダル：XYグリッド配置（履歴だけ）   LINE=1248
   ===================================================== */
#histEditDialog #histEditorForm.hist-editor-grid{
  display: grid;
  gap: 10px 14px;
  align-items: start;
  grid-template-columns: 1fr 1fr 1fr 1fr;   /* A B C D */
  grid-template-areas:
    "a1 b1 c1 d1"
    "a2 b2 c2 d2"
    "a3 a3 a3 a3"
    "a4 a4 a4 a4"
    "a5 a5 a5 a5";
}

/* まずは「存在確認」用に全部普通に流す */
#histEditDialog #histEditorForm [data-field]{ min-width: 0; }

/* === エリア割当（必要なら後で微調整） === */
#histEditDialog #histEditorForm [data-field="id"]            { grid-area: a1; }
#histEditDialog #histEditorForm [data-field="requirementId"] { grid-area: b1; }
#histEditDialog #histEditorForm [data-field="date"]          { grid-area: c1; }
#histEditDialog #histEditorForm [data-field="maxdate"]       { grid-area: d1; }

#histEditDialog #histEditorForm [data-field="need"]          { grid-area: b2; }
#histEditDialog #histEditorForm [data-field="agree"]         { grid-area: c2; }
#histEditDialog #histEditorForm [data-field="isHidden"]      { grid-area: d2; }

/* NOTE は下で大きく */
#histEditDialog #histEditorForm [data-field="note"]          { grid-area: a3; }



/* 履歴モーダル：グリッドは #histEditorForm の中だけに限定 */
#histEditorForm.hist-editor-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* A～D */
  gap: 10px;
  align-items: start;
}

/* グリッド配置対象は form-row だけ */
#histEditorForm.hist-editor-grid > .form-row{
  position: relative;
  z-index: 1;
}

/* ヘッダーは常に最前面（被さり事故防止） */
#histEditDialog .editor-head{
  position: sticky;   /* stickyが嫌なら relative でもOK */
  top: 0;
  z-index: 50;
  background: inherit; /* 白なら white でもOK */
}

/* textarea がヘッダーを覆う事故を防ぐ（念のため） */
#histEditorForm .textarea{
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
}



/* 重要（紫）も #histEditorForm の中だけに限定            LINE=1312 */
#histEditorForm .form-row.is-important{
  background: rgba(128, 90, 213, 0.12); /* 薄紫 */
  outline: 2px solid rgba(128, 90, 213, 0.55);
  border-radius: 10px;
  padding: 8px;
}


/* ==============================================================
   履歴 修正モーダル：ヘッダーが押せない事故の確実対策   LINE=1322
   ============================================================== */

/* 1) ダイアログ全体を「縦Flex」にして、ヘッダーとフォームを分離 */
#histEditDialog .editor-body{
  display: flex;
  flex-direction: column;
  max-height: 88vh;        /* 任意：はみ出し防止 */
}

/* 2) ヘッダーを最前面に固定（ここが最重要） */
#histEditDialog .editor-head{
  flex: 0 0 auto;
  position: sticky;        /* 上に固定 */
  top: 0;
  z-index: 9999;           /* 何よりも前 */
  background: #fff;        /* 透明だと下が透けて「押せない」ように見える */
  pointer-events: auto;    /* 念のため */
}

/* 3) フォーム領域はヘッダーの下だけでスクロール */
#histEditorForm{
  flex: 1 1 auto;
  overflow: auto;
  position: relative;
  z-index: 1;              /* ヘッダーより下 */
}

/* 4) もし textarea 等が“伸びて被さる”CSSがある場合の保険 */
#histEditorForm textarea,
#histEditorForm .textarea{
  position: static !important;
}

/* 5) グリッドはフォーム内だけ（既に入れてるならOK、保険で強制） */
#histEditorForm.hist-editor-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

/* 透明な被さりがあってもヘッダーだけは必ず押せるようにする */
#histEditDialog .editor-head,
#histEditDialog .editor-head *{
  pointer-events: auto !important;
}



/* 履歴モーダル：ヘッダーを最前面にして、フォームが被さらないようにする          LINE=1371   */
#histEditDialog .editor-head{
  position: relative;
  z-index: 10000;
  background: #fff;
}
#histEditorForm{
  position: relative;
  z-index: 1;
}


/* ==============================================================================
   HISTORY EDIT DIALOG (histEditDialog) - SINGLE SOURCE      LINE=1384
   - 白帯を消す（ダーク統一）
   - ヘッダーは最前面＆押せる
   - グリッドは #histEditorForm の中だけ
   ============================================================================== */

/* form(editor-body) を縦Flexにして、ヘッダ/フォーム/ヒントを分離 */
#histEditDialog .editor-body{
  display:flex;
  flex-direction:column;
  max-height: min(80vh, 740px);
  overflow:hidden; /* スクロールはフォーム側へ */
}

/* ヘッダ：白帯禁止。ダークに統一 */
#histEditDialog .editor-head{
  flex: 0 0 auto;
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--panel);          /* ★#fff をやめる */
  border-bottom: 1px solid var(--line);
  padding: 10px 12px;
}

/* ボタン領域は確実にクリックできるように最前面 */
#histEditDialog .editor-actions{
  position: relative;
  z-index: 1010;
}

/* フォーム：ヘッダ下だけスクロール */
#histEditDialog #histEditorForm{
  flex: 1 1 auto;
  overflow:auto;
  position: relative;
  z-index: 1;
}

/*==================================================================================
   ★重要：通常の .editor-form(2列) を、履歴だけは上書きする     LINE=1424
  ==================================================================================*/
#histEditDialog #histEditorForm.hist-editor-grid{
  display:grid !important;           /* .editor-form の display:grid は同じだが念のため */
  padding-top: 12px;                /* 既存に合わせる */
  gap: 10px 14px;
  align-items:start;

  /* A～D の4列 */
  grid-template-columns: repeat(4, minmax(0, 1fr));

  /* まずはこの配置（あとでPDF通りに詰める） */
  grid-template-areas:
    "a1 b1 c1 d1"
    ".  b2 c2 d2"
    ".  b3 .  d3"
    ".  n1 n1 n1"
    ".  n1 n1 n1";
}

/* グリッド対象 */
#histEditDialog #histEditorForm.hist-editor-grid > .form-row{
  min-width:0;
}

/* === フィールド → エリア割当（あなたのJSONに対応） === */
#histEditDialog #histEditorForm [data-field="id"]            { grid-area: a1; }
#histEditDialog #histEditorForm [data-field="requirementId"] { grid-area: b1; }
#histEditDialog #histEditorForm [data-field="date"]          { grid-area: c1; }
#histEditDialog #histEditorForm [data-field="maxdate"]       { grid-area: d1; }

#histEditDialog #histEditorForm [data-field="need"]          { grid-area: b2; }
#histEditDialog #histEditorForm [data-field="agree"]         { grid-area: c2; }
#histEditDialog #histEditorForm [data-field="isHidden"]      { grid-area: d2; }

/* NOTE は大きく */
#histEditDialog #histEditorForm [data-field="note"]          { grid-area: n1; }

/* textarea がヘッダを覆わない保険 */
#histEditDialog #histEditorForm textarea,
#histEditDialog #histEditorForm .textarea{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  position: static !important;
}

/* 重要（紫）— 履歴フォーム内だけ */
#histEditDialog #histEditorForm .form-row.is-important{
  background: rgba(128, 90, 213, 0.12);
  outline: 2px solid rgba(128, 90, 213, 0.55);
  border-radius: 10px;
  padding: 8px;
}


/* ファイル選択一覧（FILES/_index.json）         LINE=1480    */
.doc-pick-box{
  border:1px solid var(--line);
  border-radius:12px;
  background:#0b1220;
  padding:10px;
  margin-bottom:10px;
}

.doc-pick-list{
  max-height: 260px;
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.doc-pick-item{
  border:1px solid var(--line);
  border-radius:10px;
  padding:8px 10px;
  cursor:pointer;
}
.doc-pick-item:hover{ filter:brightness(1.08); }

/* IDセルだけクリック可能にしたい場合の視覚 */
#fileTable .cell-select{ cursor:pointer; }



/* ========================================================================================
   2026-02-08：ファイル修正XY-モーダル（fileEditDialog）                 LINE=1511
   - PDF（4列×6行）の目安グリッドに合わせる
   - grid-template-areas と [data-field] の割当
   - 既存機能に触らない（CSSのみ・追記）
   ======================================================================================== */

/* -------------------------------------------------------------------------
   A) fileEditDialog：ヘッダ/フォームが被さらないための基本      LINE=1518
   - 既存 .editor の挙動は維持しつつ、ファイルだけ安定化
   ------------------------------------------------------------------------- */
#fileEditDialog .editor-body{
  display:flex;
  flex-direction:column;
  max-height: min(80vh, 740px);
  overflow:hidden; /* スクロールはフォーム側へ */
}

/* ヘッダ：ダーク統一（白帯禁止） */
#fileEditDialog .editor-head{
  flex: 0 0 auto;
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  padding: 10px 12px;
}

/* ボタン領域は確実にクリックできるように最前面 */
#fileEditDialog .editor-actions{
  position: relative;
  z-index: 1010;
}

/* フォーム：ヘッダ下だけスクロール */
#fileEditDialog #fileEditorForm{
  flex: 1 1 auto;
  overflow:auto;
  position: relative;
  z-index: 1;
}

/* ---------------------------------------------------------------------------------
   B) 4列×6行グリッド（A～D × 1～6）                        LINE=1554
   1枠の目安：横40mm×縦25mm（PDF）
   配置（PDFの指示）：
     A1: id(=fileId)
     B1+C1+D1: requirementId
     B2+C2+D2: title
     B3+C3+D3: path
     B4: kind
     C4: date
     B5+C5+D5: note
     D6: isHidden
   ---------------------------------------------------------------------------------- */
#fileEditDialog #fileEditorForm.file-editor-grid{
  display:grid !important;
  gap: 10px 14px;
  align-items: start;

  /* 4列（A B C D） */
  grid-template-columns: repeat(4, minmax(0, 1fr));

  /* 6行（1～6） */
  grid-template-areas:
    "a1  req req req"        /* 1行目：A1=id, B1-C1-D1=requirementId */
    ".   ttl ttl ttl"        /* 2行目：B2-C2-D2=title */
    ".   pth pth pth"        /* 3行目：B3-C3-D3=path */
    ".   knd dat ."          /* 4行目：B4=kind, C4=date */
    ".   not not not"        /* 5行目：B5-C5-D5=note */
    ".   .   .   hid";       /* 6行目：D6=isHidden */
}

/* グリッド対象（form-row だけ） */
#fileEditDialog #fileEditorForm.file-editor-grid > .form-row{
  min-width: 0;
}

/* ---------------------------------------------------------------------------------
   C) [data-field] → grid-area 割当                           LINE=1590
   - 実装揺れ対策で、id / fileId の両方を許容
   --------------------------------------------------------------------------------- */
#fileEditDialog #fileEditorForm [data-field="id"],
#fileEditDialog #fileEditorForm [data-field="fileId"]{
  grid-area: a1;
}

#fileEditDialog #fileEditorForm [data-field="requirementId"]{
  grid-area: req;
}

#fileEditDialog #fileEditorForm [data-field="title"]{
  grid-area: ttl;
}

#fileEditDialog #fileEditorForm [data-field="path"]{
  grid-area: pth;
}

#fileEditDialog #fileEditorForm [data-field="kind"]{
  grid-area: knd;
}

#fileEditDialog #fileEditorForm [data-field="date"]{
  grid-area: dat;
}

#fileEditDialog #fileEditorForm [data-field="note"]{
  grid-area: not;
}

#fileEditDialog #fileEditorForm [data-field="isHidden"]{
  grid-area: hid;
}

/* textarea 等がヘッダを覆わない保険 */
#fileEditDialog #fileEditorForm textarea,
#fileEditDialog #fileEditorForm .textarea{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  position: static !important;
}



/* =====================================================================================
   2026-02-08：ファイル修正モーダル（fileEditDialog）XYレイアウト         LINE=1638
   - 既存CSSは削除しない（上書き追加のみ）
   - 対象を fileEditDialog に限定して、他機能へ影響させない
   ===================================================================================== */

/* 4列（A～D）× 複数行：スクショのオレンジ枠イメージ */
#fileEditDialog #fileEditorForm .editor-form{
  display: grid;
  gap: 10px 14px;
  align-items: start;

  /* A B C D */
  grid-template-columns: repeat(4, minmax(0, 1fr));

  /* 行の並び（スクショに合わせた配置） */
  grid-template-areas:
    "A1  B1  B1  B1"   /* 1行目：fileId / requirementId(横長) */
    ".   B2  B2  ."    /* 2行目：Title（中央寄せの横長） */
    ".   B3  B3  B3"   /* 3行目：Path（横長） */
    ".   B4  C4  ."    /* 4行目：kind / date */
    ".   B5  B5  B5"   /* 5行目：note（横長） */
    ".   .   .   D6";  /* 6行目：isHidden（右下） */
}

/* grid の子要素（form-row）が潰れない保険      LINE=1662               */
#fileEditDialog #fileEditorForm .editor-form > .form-row{
  min-width: 0;
}

/* ---- 各 form-row を grid-area に割当（HTML順に依存：現在のあなたのHTMLに対応） ---- */
/* 1: fileId */
#fileEditDialog #fileEditorForm .editor-form > .form-row:nth-child(1){ grid-area: A1; }

/* 2: requirementId */
#fileEditDialog #fileEditorForm .editor-form > .form-row:nth-child(2){ grid-area: B1; }

/* 3: Title */
#fileEditDialog #fileEditorForm .editor-form > .form-row:nth-child(3){ grid-area: B2; }

/* 4: Path */
#fileEditDialog #fileEditorForm .editor-form > .form-row:nth-child(4){ grid-area: B3; }

/* 5: kind */
#fileEditDialog #fileEditorForm .editor-form > .form-row:nth-child(5){ grid-area: B4; }

/* 6: date */
#fileEditDialog #fileEditorForm .editor-form > .form-row:nth-child(6){ grid-area: C4; }

/* 7: note */
#fileEditDialog #fileEditorForm .editor-form > .form-row:nth-child(7){ grid-area: B5; }

/* 8: isHidden */
#fileEditDialog #fileEditorForm .editor-form > .form-row:nth-child(8){ grid-area: D6; }

/* NOTE は横長なので input を伸ばす（見た目安定） */
#fileEditDialog #fileEditorForm #fileNoteInput{
  width: 100%;
  max-width: 100%;
}


/* =========================================================
   ptPhotoAddDialog：UPLOAD（左）＋ 既存（右）  LINE=1701
   ========================================================= */
#ptPhotoAddDialog .modal-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

#ptPhotoAddDialog .modal-footer-right{
  display:flex;
  gap:10px;
  justify-content:flex-end;
}

/* ==========================================================
   要件（マスター）内側 2箇所だけ強調（#151845）   LINE=1717
   ========================================================== */

/* ① 見出し帯（要件（マスター）＋説明の行） */
.pane.left .pane-title {
  background: #151845;
}

/* ② 一覧の内側背景（スクロール領域の面） */
.pane.left #reqListWrap {
  background: #151845;
}