/*
 * 施工管理ツール 共通スタイル（B案「すっきり業務SaaS型」）
 * ビルド不要（Node/npm不要）にするため素のCSSで実装。画面の見た目はすべてこのファイルで管理する。
 * （例外: reports/pdf.blade.php はPDF生成用の独立文書のため、ファイル内に<style>を持つ）
 *
 * 目次
 *  1. 変数・ベース
 *  2. 共通レイアウト（サイドメニュー・上部ヘッダー・下部タブ）
 *  3. レイアウト・見出し
 *  4. カード・リスト
 *  5. ボタン
 *  6. フォーム
 *  7. メッセージ・バッジ・補足テキスト
 *  8. 現場一覧（並び替えタブ）
 *  9. 図面・ピン・写真グリッド
 * 10. 未整理トレイ・アップロード状況
 * 11. 写真の編集（書き込みツール・黒板情報）
 * 12. レポート（詳細・PDF欄・作成と編集の写真選択）
 * 13. ゴミ箱（種類ごとのカード・1件1行・右端に復元）
 * 14. 監査ログ（PC=表形式／スマホ=カード）
 * 15. ページネーション
 * 16. ログイン画面
 * 17. PC向けレイアウト
 * 18. ヘルプ（「？」ボタン）
 * 19. 現場詳細（見出し・切り替え・大ボタン・図面カード）
 * 20. 現場一覧（PC=表形式／スマホ=カード）
 * 21. 現場の登録・編集（PC=2列＋下の操作バー／スマホ=1列）
 * 22. ユーザー管理（一覧: PC=表形式／スマホ=カード、追加・編集: 21章の部品＋ロールと権限）
 * 23. アカウント設定（.kv-card の3つのカード）
 * 24. 運営者画面（/operator。お客さん（会社）の一覧・詳細・登録、運営者、パスワードの1回だけの表示、容量の上限）
 * 25. 図面のピン（写真2枚以上のピン・ピンの一覧・ピンの移動・写真の編集の「ピン」）
 */

/* ============================================================
   1. 変数・ベース
   ============================================================ */
:root {
  /* 面・線 */
  --color-bg: #f6f7f9;            /* 画面の背景 */
  --color-surface: #ffffff;       /* カード */
  --color-surface-muted: #fafbfc; /* 表の見出し行など、ごく薄い面 */
  --color-surface-sunken: #e9ecf0;/* 切り替えボタンの台 */
  --color-border: #e5e8ec;        /* カードの枠線 */
  --color-divider: #eef0f3;       /* 行の区切り線 */
  --color-border-strong: #d5d9df; /* 入力欄の枠 */

  /* 文字 */
  --color-text: #1c2430;          /* 本文 */
  --color-text-sub: #46505e;      /* サブ文字（表の値・メニュー） */
  --color-muted: #5d6675;         /* 補足文字 */
  --color-subtle: #8a93a0;        /* プレースホルダー・矢印など */

  /* アクセント（青） */
  --color-primary: #2549c9;
  --color-primary-dark: #1c3aa3;              /* ホバー・押下 */
  --color-primary-soft: rgba(37, 73, 201, .08);  /* 薄い背景 */
  --color-primary-soft-strong: rgba(37, 73, 201, .14);
  --color-focus-ring: rgba(37, 73, 201, .25);

  /* 状態色 */
  --color-danger: #d92d20;
  --color-danger-dark: #b42318;
  --color-danger-soft: #fef3f2;
  --color-danger-border: #f4c5c0;
  --color-success: #067647;
  --color-success-soft: #ecfdf3;
  --color-warning: #b54708;
  --color-warning-soft: #fef0c7;

  /* 角丸 */
  --radius-card: 12px;  /* カード */
  --radius: 10px;       /* ボタン・入力欄 */
  --radius-sm: 8px;     /* 小さいボタン・サムネイル */
  --radius-pill: 999px; /* バッジ */

  /* 影（基本は枠線のみ。浮かせたいボタンだけ影を付ける） */
  --shadow: none;
  --shadow-float: 0 2px 6px rgba(16, 24, 40, .18);
  --shadow-popover: 0 8px 24px rgba(16, 24, 40, .14);

  /* 高さ（タップできる部分は44px以上） */
  --control-height: 44px;       /* 通常ボタン */
  --control-height-lg: 56px;    /* 主要ボタン（写真を撮る・ログインなど） */
  --input-height: 48px;         /* 入力欄 */

  /* レイアウト */
  --header-height: 56px;   /* スマホ上部ヘッダー */
  --tabbar-height: 64px;   /* スマホ下部タブ */
  --sidebar-width: 248px;  /* PC左サイドメニュー */
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Hiragino Sans",
               "Yu Gothic UI", "Yu Gothic", YuGothic, Meiryo, "Noto Sans JP", sans-serif;
  font-size: 15px;
  line-height: 1.6;
  background: var(--color-bg);
  color: var(--color-text);
  -webkit-text-size-adjust: 100%;
}
/* スマホ下部タブがある画面だけ、タブの分の余白を空ける */
body.has-tabbar { padding-bottom: calc(var(--tabbar-height) + env(safe-area-inset-bottom)); }

a { color: var(--color-primary); text-decoration: none; }
a:hover { color: var(--color-primary-dark); text-decoration: underline; }

h2 { font-size: 22px; line-height: 1.35; margin: 0 0 12px; letter-spacing: .02em; }

img { max-width: 100%; }

/* ============================================================
   2. 共通レイアウト（サイドメニュー・上部ヘッダー・下部タブ）
   部品: resources/views/layouts/app.blade.php ／ アイコン: layouts/_nav-icon.blade.php
   スマホ（899px以下）: 白い上部ヘッダー＋下部タブ。サイドメニューは隠す
   PC  （900px以上）: 左サイドメニュー。上部ヘッダー・下部タブは隠す（→ 17. 参照）
   ============================================================ */
.app-shell { min-height: 100vh; }
.app-main { min-width: 0; }

.nav-icon { display: block; flex-shrink: 0; }

/* ロゴマーク（public/images/logo-mark.svg の画像。紺の角丸・旗・家は画像の中に描いてある） */
.brand-mark {
  display: block;
  width: 30px; height: 30px;
  flex-shrink: 0;
}

/* --- 左サイドメニュー（PCのみ表示） --- */
.sidebar { display: none; }

.sidebar-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 0 10px 24px;
  color: var(--color-text);
}
.sidebar-brand:hover { color: var(--color-text); text-decoration: none; }
.sidebar-brand .brand-name {
  font-size: 17px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.sidebar-nav { display: flex; flex-direction: column; gap: 2px; }
.sidebar-link {
  min-height: var(--control-height);
  padding: 0 12px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; gap: 12px;
  font-size: 15px;
  color: var(--color-text-sub);
  transition: background-color .15s, color .15s;
}
.sidebar-link:hover { background: var(--color-bg); color: var(--color-text); text-decoration: none; }
.sidebar-link.is-active { background: var(--color-primary-soft); color: var(--color-primary); font-weight: 700; }
.sidebar-link:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 1px; }

.sidebar-user {
  margin-top: auto;
  border-top: 1px solid var(--color-border);
  padding: 16px 10px 0;
  display: flex; flex-direction: column; gap: 10px;
}
.user-chip { display: flex; align-items: center; gap: 10px; min-width: 0; }
.user-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: #e8ebef;
  color: var(--color-text-sub);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700;
  flex-shrink: 0;
}
.user-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.4; }
.user-name { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-role { font-size: 12px; color: var(--color-muted); }

.sidebar-user-links { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.sidebar-user-links a { color: var(--color-text-sub); }
.sidebar-user-links a:hover,
.sidebar-user-links a.is-active { color: var(--color-primary); }
.sidebar-user-links .sep { color: #c3c9d1; }
.sidebar-user-links form { margin: 0; }

/* リンクの見た目をしたボタン（ログアウトなど、POSTが必要な操作用） */
.link-button {
  padding: 0; border: none; background: none;
  font-family: inherit; font-size: inherit;
  color: var(--color-text-sub);
  cursor: pointer;
}
.link-button:hover { color: var(--color-primary); text-decoration: underline; }
.link-button:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; border-radius: 4px; }

/* --- スマホ上部ヘッダー（白） --- */
.appbar {
  position: sticky; top: 0; z-index: 20;
  height: var(--header-height);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  display: flex; align-items: center; gap: 4px;
  padding: 0 6px;
  padding-top: env(safe-area-inset-top);
  box-sizing: content-box;
}
.appbar-icon {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--color-text);
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.appbar-icon:hover { background: var(--color-bg); color: var(--color-text); text-decoration: none; }
.appbar-icon:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: -3px; }
.appbar-brand {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.appbar-title {
  flex: 1; min-width: 0;
  font-size: 15px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* 画面ごとの右上ボタン（@section('appbar_action')。写真の編集の「保存」など） */
.appbar-action { display: flex; align-items: center; flex-shrink: 0; }
.appbar-save {
  position: relative;
  height: 40px;
  padding: 0 18px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: #fff;
  font-family: inherit; font-size: 14px; font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.appbar-save::after { content: ""; position: absolute; inset: -4px; } /* タップできる範囲を48pxに広げる */
.appbar-save:hover,
.appbar-save:active { background: var(--color-primary-dark); }
.appbar-save:disabled { opacity: .6; cursor: default; }
.appbar-save:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; }

/* 「…」メニュー（<details>で開閉） */
.appbar-menu { position: relative; flex-shrink: 0; }
.appbar-menu > summary { list-style: none; color: var(--color-text-sub); }
.appbar-menu > summary::-webkit-details-marker { display: none; }
.appbar-menu > summary::marker { content: ""; }
.appbar-menu[open] > summary { background: var(--color-bg); }
.appbar-menu-panel {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30;
  width: 240px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-popover);
  padding: 6px;
}
.appbar-menu-panel form { margin: 0; }
.appbar-menu-user {
  display: flex; flex-direction: column;
  padding: 8px 10px 10px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--color-divider);
  line-height: 1.4;
}
.appbar-menu-item {
  display: flex; align-items: center;
  width: 100%;
  min-height: var(--control-height);
  padding: 0 10px;
  border: none; border-radius: var(--radius-sm);
  background: none;
  font-family: inherit; font-size: 15px;
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
}
.appbar-menu-item:hover { background: var(--color-bg); color: var(--color-text); text-decoration: none; }

/* --- スマホ下部タブ（白・アイコン＋文字、選択中は青） --- */
.tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 20;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
}
.tabbar a {
  flex: 1; min-width: 0;
  min-height: var(--tabbar-height);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-size: 11px;
  color: var(--color-muted);
  -webkit-tap-highlight-color: transparent;
}
.tabbar a .nav-icon { width: 22px; height: 22px; }
.tabbar a span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tabbar a:hover { text-decoration: none; color: var(--color-text); }
.tabbar a.active { color: var(--color-primary); font-weight: 700; }
.tabbar a:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: -3px; }

/* ============================================================
   3. レイアウト・見出し
   ============================================================ */
.container { max-width: 760px; margin: 0 auto; padding: 16px 16px 32px; }

.page-header {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin-bottom: 6px;
}
.page-header .page-title { margin: 0; min-width: 0; }
/* 見出し横のボタンは右端へ寄せる（バッジは見出しのすぐ隣に置く） */
.page-header > .btn { margin-left: auto; }

.page-sub {
  color: var(--color-muted);
  font-size: 13px;
  margin: 0 0 16px;
}
.page-sub .badge { vertical-align: 1px; margin-left: 4px; }

.back-link { margin: 24px 0 0; font-size: 14px; }

.section-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 16px; font-weight: 700;
  color: var(--color-text);
  margin: 28px 0 10px;
  line-height: 1.4;
}

.toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.toolbar form { margin: 0; }
.toolbar .toolbar-title { flex: 1; font-size: 15px; }

/* ============================================================
   4. カード・リスト
   ============================================================ */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
  padding: 16px;
  margin-bottom: 16px;
}
.card > :last-child { margin-bottom: 0; }

.list-item {
  display: block;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
  padding: 14px 16px;
  margin-bottom: 10px;
  color: var(--color-text);
}
a.list-item { position: relative; padding-right: 40px; transition: border-color .15s, background-color .15s; }
a.list-item::after {
  content: "";
  position: absolute; right: 18px; top: 50%;
  width: 8px; height: 8px;
  border-top: 2px solid var(--color-subtle);
  border-right: 2px solid var(--color-subtle);
  transform: translateY(-50%) rotate(45deg);
}
a.list-item:hover { text-decoration: none; color: var(--color-text); border-color: var(--color-border-strong); background: var(--color-surface-muted); }
.list-item .title { font-weight: 700; font-size: 15px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
a.list-item .title { color: var(--color-text); }
.list-item .meta { color: var(--color-muted); font-size: 13px; margin-top: 4px; }
.list-item .item-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.list-item .item-actions form { margin: 0; }

.empty-state {
  color: var(--color-muted);
  font-size: 14px;
  padding: 28px 16px;
  text-align: center;
  background: var(--color-surface);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-card);
}

/* ============================================================
   5. ボタン
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--control-height);
  padding: 8px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--color-primary);
  background: var(--color-primary);
  color: #fff;
  font-family: inherit;
  font-size: 15px; font-weight: 700;
  line-height: 1.3;
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .15s, border-color .15s, color .15s;
}
.btn:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); color: #fff; text-decoration: none; }
.btn:active { background: var(--color-primary-dark); }
.btn:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; }
.btn:disabled,
.btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

.btn.secondary { background: var(--color-surface); color: var(--color-text-sub); border-color: var(--color-border-strong); }
.btn.secondary:hover { background: var(--color-bg); color: var(--color-text); border-color: var(--color-subtle); }

/* 削除ボタンは誤操作を防ぐため、目立ちすぎない赤枠スタイル */
.btn.danger { background: var(--color-surface); color: var(--color-danger); border-color: var(--color-danger-border); }
.btn.danger:hover { background: var(--color-danger-soft); color: var(--color-danger-dark); border-color: var(--color-danger); }

.btn.block { display: flex; width: 100%; }
.btn.sm { min-height: 36px; padding: 4px 12px; font-size: 13px; border-radius: var(--radius-sm); }

/* 主要ボタン（写真を撮る・まとめて追加／ログインなど）: 画面幅いっぱい・高さ56px・少し浮かせる */
.btn.lg {
  min-height: var(--control-height-lg);
  font-size: 17px;
  padding: 10px 20px;
  box-shadow: var(--shadow-float);
}
.btn.lg .nav-icon,
.btn.lg svg { width: 24px; height: 24px; }

/* ============================================================
   6. フォーム
   ============================================================ */
.form-group { margin-bottom: 18px; }
.form-group.is-compact { margin-bottom: 6px; }
.form-group label { display: block; font-size: 13px; font-weight: 700; color: var(--color-text-sub); margin-bottom: 6px; }
.form-group input[type=text],
.form-group input[type=email],
.form-group input[type=password],
.form-group input[type=tel],
.form-group input[type=number],
.form-group input[type=date],
.form-group input[type=datetime-local],
.form-group select,
.form-group textarea {
  width: 100%;
  min-height: var(--input-height);
  padding: 10px 14px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 16px; /* iOSで入力時に自動ズームしないよう16px以上にする */
  color: var(--color-text);
  background: var(--color-surface);
  transition: border-color .15s, box-shadow .15s;
}
.form-group textarea { min-height: 104px; line-height: 1.6; resize: vertical; }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--color-subtle); }

/* 入力エラーのある欄: 赤い枠（ログイン画面のメールアドレス未入力など。aria-invalid と一緒に付ける） */
.form-group.is-invalid label { color: var(--color-danger-dark); }
.form-group.is-invalid input,
.form-group.is-invalid select,
.form-group.is-invalid textarea { border-color: var(--color-danger); }
.form-group.is-invalid input:focus,
.form-group.is-invalid select:focus,
.form-group.is-invalid textarea:focus { border-color: var(--color-danger); box-shadow: 0 0 0 3px rgba(217, 45, 32, .2); }

/* チェックボックス付きラベル（横並び） */
.form-group label.check-label {
  display: flex; align-items: center; gap: 10px;
  min-height: var(--control-height);
  font-weight: 500; color: var(--color-text); font-size: 15px;
  cursor: pointer;
}
.form-group label.check-label input[type=checkbox] { width: 20px; height: 20px; margin: 0; accent-color: var(--color-primary); }

/* ファイル選択 */
input[type=file] { font-family: inherit; font-size: 13px; color: var(--color-muted); max-width: 100%; }
input[type=file]::file-selector-button {
  margin-right: 10px;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-sub);
  font-family: inherit; font-size: 13px; font-weight: 700;
  cursor: pointer;
}
input[type=file]::file-selector-button:hover { background: var(--color-bg); }

.form-actions { margin-top: 24px; }

/* 項目名の下の補足（「レポートに印字されます」など）と、欄の下の入力エラー */
.field-hint { margin: -2px 0 6px; font-size: 12px; color: var(--color-muted); line-height: 1.5; }
.field-error { margin: 6px 0 0; font-size: 12px; font-weight: 700; color: var(--color-danger-dark); line-height: 1.5; }

/* 項目名の横にバッジを付けるとき（「管理メモ ［管理者のみ表示］」） */
.form-group label.label-with-badge { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.form-group label.label-with-badge .badge { height: 20px; padding: 0 8px; font-size: 11px; font-weight: 700; }

/* 管理者だけが見る欄は、ごく薄い面で「ほかの人には見えない」ことを伝える */
.form-group textarea.is-private { background: var(--color-surface-muted); }
.form-group textarea.is-private:focus { background: var(--color-surface); }

/* 選択肢を切り替えボタンで選ぶ欄（ステータスなど）。中身はラジオボタンなのでJS不要。
   見た目は現場詳細の切り替え（.segmented）と同じ「灰色の台に白いボタンが乗る形」 */
.field-choice { border: 0; padding: 0; margin-left: 0; margin-right: 0; min-width: 0; }
.field-legend {
  display: block;
  padding: 0;
  margin-bottom: 6px;
  font-size: 13px; font-weight: 700;
  color: var(--color-text-sub);
}
.form-group.is-invalid .field-legend { color: var(--color-danger-dark); }
.segmented.choice-segmented { grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: var(--input-height); }
.form-group.is-invalid .choice-segmented { box-shadow: 0 0 0 1px var(--color-danger); }
.form-group label.choice-item {
  display: flex;
  margin: 0;
  font-size: 14px; font-weight: 400;
  color: var(--color-text-sub);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.choice-item-face {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  min-height: 40px;
  border-radius: 7px;
  white-space: nowrap;
  transition: background-color .15s, color .15s;
}
.choice-item:hover .choice-item-face { color: var(--color-text); }
.choice-item input:checked + .choice-item-face {
  background: var(--color-surface);
  color: var(--color-primary);
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .08);
}
.choice-item input:focus-visible + .choice-item-face { outline: 3px solid var(--color-focus-ring); outline-offset: 0; }

/* チェックボックスの選択肢を1つずつ枠で囲む（担当する作業者・詳細項目のチェック）。チェックすると青枠 */
.option-list { display: flex; flex-direction: column; gap: 8px; }
.option-card {
  display: flex; align-items: center; gap: 12px;
  min-height: 48px;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  font-size: 15px;
  color: var(--color-text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .15s, background-color .15s;
}
.option-card:hover { border-color: var(--color-border-strong); }
.option-card input[type=checkbox] { width: 20px; height: 20px; margin: 0; flex-shrink: 0; accent-color: var(--color-primary); }
.option-card-label { flex: 1; min-width: 0; overflow-wrap: anywhere; line-height: 1.45; }
.option-card:has(input:checked) { border-color: var(--color-primary); background: var(--color-primary-soft); }
.option-card:has(input:focus-visible) { outline: 3px solid var(--color-focus-ring); outline-offset: 1px; }

/* ============================================================
   7. メッセージ・バッジ・補足テキスト
   ============================================================ */
.errors,
.status {
  padding: 12px 14px;
  border-radius: var(--radius);
  margin-bottom: 16px;
  font-size: 14px;
  border: 1px solid;
}
.errors { background: var(--color-danger-soft); border-color: #fecdca; color: var(--color-danger-dark); }
.status { background: var(--color-success-soft); border-color: #abefc6; color: var(--color-success); }

/* 状態バッジ: 進行中（incomplete）＝薄い青＋青文字＋先頭に小さな丸／完了（complete）＝薄いグレー＋グレー文字 */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
}
.badge.complete { background: var(--color-divider); color: var(--color-muted); }
.badge.incomplete { background: var(--color-primary-soft-strong); color: var(--color-primary); }
/* 「焼き込み済み」など、状態ではない「済み」の目印: 薄い青＋青文字（丸なし） */
.badge.is-primary { background: var(--color-primary-soft-strong); color: var(--color-primary); }
/* 状態ではない補足の目印（「管理者のみ表示」など）: 薄いグレー＋グレー文字（丸なし） */
.badge.is-neutral { background: var(--color-divider); color: var(--color-muted); }
/* 注意の目印（「古い内容」のPDFなど）: 薄い黄色＋茶色の文字（丸なし） */
.badge.is-warning { background: var(--color-warning-soft); color: var(--color-warning); }
/* 止まっている目印（運営者画面の「停止中」の会社）: 薄い赤＋赤い文字（丸なし） */
.badge.is-danger { background: var(--color-danger-soft); color: var(--color-danger-dark); }
.badge.incomplete::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.hint { font-size: 12px; color: var(--color-muted); margin: 8px 0 0; }

/* 画面には出さないが、読み上げ・キーボード操作には残す（ファイル選択を大きいボタン(label)で代用するときなど） */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.hint.is-block { margin: 0 0 10px; }
.text-warning { color: var(--color-warning); }
.text-danger { color: var(--color-danger); }

.notice {
  font-size: 13px;
  padding: 10px 12px;
  border-radius: var(--radius);
  margin: 0 0 12px;
}
.notice.is-warning { background: var(--color-warning-soft); color: var(--color-warning); }
.notice.is-danger { background: var(--color-danger-soft); color: var(--color-danger-dark); }
.notice.is-info { background: var(--color-bg); color: var(--color-muted); }
/* 保存できたお知らせ（アカウント設定で、保存したカードの中に出す） */
.notice.is-success { background: var(--color-success-soft); color: var(--color-success); }
/* 容量のお知らせ（お客さんの画面の上部。管理者・物件管理者だけ。80%以上=黄色／上限=赤）。長文なので行間を広げ、左に色の線 */
.notice.storage-notice {
  margin-bottom: 16px;
  font-size: 14px; line-height: 1.7;
  border-left: 4px solid currentColor;
}
/* 容量の上限で追加できないときの、ボタン・フォームの近くの短い説明 */
.notice.upload-blocked-notice { line-height: 1.7; }

/* ============================================================
   8. 現場一覧（並び替えタブ・下線スタイル）
   ============================================================ */
.sort-tabs {
  display: flex; gap: 4px;
  margin: 8px 0 16px;
  border-bottom: 1px solid var(--color-border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.sort-tabs .tab-item {
  display: inline-flex; align-items: center;
  min-height: var(--control-height);
  padding: 0 14px;
  margin-bottom: -1px;
  font-size: 14px;
  color: var(--color-muted);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.sort-tabs .tab-item:hover { text-decoration: none; color: var(--color-text); }
.sort-tabs .tab-item.is-active { color: var(--color-text); font-weight: 700; border-bottom-color: var(--color-primary); }

/* ============================================================
   9. 図面・ピン・写真グリッド
   ============================================================ */
.drawing-wrap {
  position: relative;
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #fbfbfc;
  cursor: crosshair;
}
.drawing-wrap img { width: 100%; display: block; }
/* ピン: 青丸＋白フチ＋番号。中心がピン留めした位置（data-x / data-y をJSで left / top に反映） */
.pin {
  position: absolute; z-index: 1;
  width: 26px; height: 26px;
  margin: -13px 0 0 -13px;
  border-radius: 50%;
  border: 3px solid #fff;
  background: var(--color-primary);
  box-shadow: 0 2px 6px rgba(16, 24, 40, .25);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; line-height: 1;
  cursor: pointer;
  transition: transform .1s;
  -webkit-tap-highlight-color: transparent;
}
/* 指で押しやすいよう、見た目より広い範囲をタップ可能にする */
.pin::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; }
.pin:hover { color: #fff; text-decoration: none; transform: scale(1.15); background: var(--color-primary-dark); z-index: 2; }
.pin:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; z-index: 2; }
.pin-upload-form { display: none; }

.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.photo-grid img {
  width: 100%; aspect-ratio: 1; object-fit: cover; display: block;
  border-radius: var(--radius-sm);
  background: var(--color-bg);
}
.photo-grid a { display: block; border-radius: var(--radius-sm); transition: opacity .15s; }
.photo-grid a:hover { opacity: .85; }

/* ピン留め済みの写真: 図面ごとの見出しと、図面のピンと同じ番号 */
.photo-group-title { margin: 14px 0 8px; font-size: 13px; font-weight: 700; color: var(--color-text-sub); }
.photo-group-title:first-of-type { margin-top: 0; }
.photo-tile { position: relative; }
.photo-tile-num {
  position: absolute; top: 6px; left: 6px;
  min-width: 22px; height: 22px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  border: 2px solid #fff;
  background: var(--color-primary);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; line-height: 1;
  box-shadow: 0 1px 3px rgba(16, 24, 40, .25);
}

/* ============================================================
   10. 未整理トレイ・アップロード状況
   ============================================================ */
/* 未整理の写真: サムネイルを4列（PCは6列）で並べる。選択中は青い外枠＋チェック */
.tray-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 8px; }
.tray-section-divider {
  grid-column: 1 / -1;
  border-top: 1px dashed var(--color-border-strong);
  margin: 4px 0 0; padding-top: 6px;
  font-size: 11px; color: var(--color-subtle);
}
.tray-section-divider:first-child { margin-top: 0; border-top: none; padding-top: 0; }
.tray-tile {
  position: relative;
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tray-tile img {
  width: 100%; aspect-ratio: 1; object-fit: cover; display: block;
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  outline: 2px solid transparent; outline-offset: 2px;
  transition: outline-color .15s, opacity .15s;
}
.tray-tile:hover img { opacity: .9; }
.tray-tile .tray-check {
  position: absolute; top: 5px; left: 5px; z-index: 1;
  width: 22px; height: 22px; margin: 0;
  accent-color: var(--color-primary);
  cursor: pointer;
}
.tray-tile .tray-check:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 1px; }
.tray-tile.is-selected img { outline-color: var(--color-primary); }
.tray-time {
  font-size: 11px; color: var(--color-muted); line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tray-tile.is-selected .tray-time { color: var(--color-primary); font-weight: 700; }
.tray-empty { font-size: 13px; color: var(--color-muted); margin: 0; }

/* 写真を選んでいる間に出す帯（何枚選んだか／次に何をするか） */
.tray-selection-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px;
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: var(--radius);
  background: var(--color-primary-soft);
  color: var(--color-primary);
}
.tray-selection-text { flex: 1 1 220px; min-width: 0; font-size: 13px; font-weight: 700; line-height: 1.5; }
.tray-selection-actions { display: flex; gap: 8px; flex-shrink: 0; margin-left: auto; }
.tray-toggle { margin-top: 12px; }

.queue-title { font-size: 13px; display: block; margin-bottom: 4px; }
.queue-item { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.queue-item img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; }
.queue-item.is-failed img { outline: 2px solid var(--color-danger); opacity: .6; }
.queue-status { font-size: 12px; color: var(--color-muted); flex: 1; }
.queue-status.is-failed { color: var(--color-danger); }
.queue-summary { font-size: 12px; color: var(--color-muted); margin: 6px 0 0; }
.retry-btn { font-size: 12px; min-height: 32px; padding: 3px 10px; }

/* ============================================================
   11. 写真の編集（resources/views/projects/photo-annotate.blade.php ／ 動き: public/js/photo-annotate.js）
   上から: （PCのみ）見出し＋保存 → コメント＋「？」 → 写真 → 書き込みツール（アイコンのみ）
          → 色の丸ボタン＋太さ → 黒板情報カード → 写真の情報カード → その他の操作
   スマホ: 「保存」は上部ヘッダー右（.appbar-save）。ツールは写真の下に置き、縦長の写真でも
          画面下（下部タブがあればその上）に残るよう sticky で固定する
   注意: Fabric.jsは描画用の透明キャンバス（upper-canvas）を上に重ね、同じクラスを付ける。
        canvas.annotate-canvas に背景色を指定すると下の写真が隠れるため指定しないこと
   ============================================================ */
.annotate-head { display: none; } /* スマホは上部ヘッダーに画面名と「保存」があるので出さない（PCは17章） */

.annotate-intro { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 12px; }
.annotate-intro-text { flex: 1; min-width: 0; margin: 0; font-size: 13px; color: var(--color-muted); }
.annotate-intro-text.has-comment { font-size: 14px; color: var(--color-text-sub); }

/* 保存結果などのお知らせ: どこまでスクロールしていても見えるよう、画面上部に浮かせて出す（タップで閉じる） */
.annotate-message {
  position: fixed; z-index: 35;
  top: calc(var(--header-height) + env(safe-area-inset-top) + 10px);
  left: 50%; transform: translateX(-50%);
  width: min(560px, calc(100% - 24px));
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  box-shadow: var(--shadow-popover);
  color: var(--color-text);
  font-size: 14px;
  cursor: pointer;
}
.annotate-message.is-danger { background: var(--color-danger-soft); border-color: #fecdca; color: var(--color-danger-dark); }

/* --- 写真（キャンバス） --- */
.annotate-stage {
  position: relative;
  min-height: 200px;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--color-surface-sunken); /* 写真の読み込み中に見える台。キャンバス自体には色を付けない */
}
canvas.annotate-canvas { display: block; touch-action: none; }
.annotate-stage .canvas-container { margin: 0 auto; }
.annotate-loading {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  margin: 0; padding: 16px;
  background: var(--color-surface-sunken);
  color: var(--color-muted);
  font-size: 13px;
  text-align: center;
}

/* --- 書き込みツール（アイコンのみ。選択中は青背景＋白アイコン） --- */
.annotate-tools {
  position: sticky; z-index: 5;
  bottom: calc(env(safe-area-inset-bottom) + 10px);
  display: flex; justify-content: space-between; gap: 2px;
  margin-top: 12px;
  padding: 6px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
}
body.has-tabbar .annotate-tools { bottom: calc(var(--tabbar-height) + env(safe-area-inset-bottom) + 10px); }

.tool-btn {
  width: 44px; height: 44px;
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-sub);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .15s, color .15s;
}
.tool-btn:hover { background: var(--color-bg); color: var(--color-text); }
.tool-btn.is-active,
.tool-btn.is-active:hover { background: var(--color-primary); color: #fff; }
.tool-btn:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 1px; }

/* --- 色の丸ボタン＋太さ（＋テキストのときだけ文字サイズ） --- */
.annotate-options {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px 10px;
  margin: 14px 2px 0;
}
.color-swatches { display: flex; align-items: center; gap: 10px; }
.color-swatch {
  position: relative;
  width: 30px; height: 30px;
  flex-shrink: 0;
  padding: 0;
  border: 1px solid var(--color-border-strong);
  border-radius: 50%;
  background: var(--swatch-color, transparent);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* 指で押しやすいよう、見た目より広い範囲をタップ可能にする（隣の丸と重ならない大きさ） */
.color-swatch::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; }
.color-swatch.is-red { background: #ff0000; }
.color-swatch.is-yellow { background: #ffd400; }
.color-swatch.is-white { background: #ffffff; }
.color-swatch.is-blue { background: #2549c9; }
/* 選択中: 白いフチ＋青い外枠 */
.color-swatch.is-active { border: 2px solid #fff; box-shadow: 0 0 0 2px var(--color-primary); }
.color-swatch:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 3px; }

/* 「ほかの色」: 虹色の丸。4色以外を選んだら、その色で塗る（--swatch-color はJSが設定） */
.color-swatch.is-custom {
  display: inline-block;
  background: conic-gradient(#ff0000, #ffd400, #2fbf4a, #2aa7e0, #2549c9, #a43fd1, #ff0000);
}
.color-swatch.is-custom.has-color { background: var(--swatch-color); }
.color-swatch.is-custom input[type=color] {
  position: absolute; inset: -6px; z-index: 1;
  width: calc(100% + 12px); height: calc(100% + 12px);
  margin: 0; padding: 0;
  border: none;
  opacity: 0;
  cursor: pointer;
}
.color-swatch.is-custom:focus-within { outline: 3px solid var(--color-focus-ring); outline-offset: 3px; }

.tool-width-label { display: flex; align-items: center; gap: 8px; margin-left: auto; font-size: 12px; color: var(--color-muted); }
.tool-width-label input[type=range] { width: 96px; min-height: 32px; accent-color: var(--color-primary); }

.tool-fontsize-label { display: flex; align-items: center; gap: 8px; width: 100%; font-size: 12px; color: var(--color-muted); }
.tool-fontsize {
  min-height: 40px; padding: 4px 10px;
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
  font-family: inherit; font-size: 16px; background: var(--color-surface); color: var(--color-text);
}

/* --- 項目名を左・入力欄を右に並べるカード（黒板情報・写真の情報） --- */
.kv-card {
  margin: 20px 0 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.kv-card-head {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--color-divider);
}
.kv-card-title { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.4; }
.kv-card-head .badge { margin-left: auto; }
.kv-card-notes { padding: 10px 14px; border-bottom: 1px solid var(--color-divider); }
.kv-card-notes .notice { margin: 0 0 8px; }
.kv-card-notes .hint { margin: 0; }

.kv-row {
  display: flex; align-items: center; gap: 12px;
  min-height: 48px;
  padding: 0 14px;
  border-bottom: 1px solid var(--color-divider);
  transition: background-color .15s;
}
.kv-row:focus-within { background: var(--color-primary-soft); }
.kv-label { width: 72px; flex-shrink: 0; font-size: 13px; color: var(--color-muted); cursor: pointer; }
.kv-input {
  flex: 1; min-width: 0;
  min-height: 46px;
  padding: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 16px; /* iOSで入力時に自動ズームしないよう16px以上にする */
  color: var(--color-text);
  text-align: right;
}
.kv-input:focus { outline: none; }
.kv-input::placeholder { color: var(--color-subtle); }
.kv-input::-webkit-date-and-time-value { text-align: right; }

/* コメントなど長い入力は、項目名の下に入力欄を置く */
.kv-row.is-stacked { flex-direction: column; align-items: stretch; gap: 4px; padding: 10px 14px; }
.kv-row.is-stacked .kv-label { width: auto; }
.kv-row.is-stacked .kv-input { min-height: 72px; text-align: left; line-height: 1.6; resize: vertical; }

.kv-row.is-invalid { background: var(--color-danger-soft); }
.kv-row.is-invalid .kv-label { color: var(--color-danger-dark); font-weight: 700; }
.kv-error {
  margin: 0;
  padding: 6px 14px;
  border-bottom: 1px solid var(--color-divider);
  background: var(--color-danger-soft);
  color: var(--color-danger-dark);
  font-size: 12px;
}

/* カードの一番下の横長ボタン（「この内容で黒板を焼き込み直す」など） */
.kv-card-action {
  display: flex; align-items: center; justify-content: center;
  width: 100%;
  min-height: 48px;
  padding: 8px 14px;
  border: none;
  background: var(--color-surface-muted);
  font-family: inherit; font-size: 14px; font-weight: 700;
  color: var(--color-primary);
  cursor: pointer;
  transition: background-color .15s;
}
.kv-card-action:hover { background: var(--color-primary-soft); }
.kv-card-action:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: -3px; }

/* --- その他の操作（元画像のダウンロード・書き込みの全消去・写真の削除） --- */
.annotate-more { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.annotate-more form { margin: 0; }

/* ============================================================
   12. レポート（resources/views/reports/show.blade.php ／ 作成・編集: reports/_form.blade.php ／ 動き: public/js/report.js）
   詳細: （PCのみ）パンくず → 見出し（状態バッジ・作成日・タイトル・編集）→ PDF欄（未作成／最新／古い）
         → 内容（項目名左・値右の一覧カード）→ 写真（PDFの順番の番号つき）→ その他の操作（削除）
   作成・編集: 現場フォーム（21章）と同じ部品。左列＝基本情報／右列＝調査内容 → 横幅いっぱいの写真選択
   ============================================================ */
/* PCだけ出すパンくず（フォーム以外の画面用。フォームは21章の .form-page-head の中に置く） */
.breadcrumb.page-breadcrumb { display: none; }

/* --- PDF欄 --- */
.pdf-card { padding: 16px; }
.pdf-card.is-outdated { border-color: #fedf89; }
.pdf-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.pdf-card-title { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.4; }
.pdf-card-text { margin: 0 0 12px; font-size: 13px; color: var(--color-muted); line-height: 1.6; }
.pdf-card .notice { line-height: 1.6; }
.pdf-card-actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* スマホ: 「PDFを開く」「PDFを保存」を横に2つ、「作成／作り直す」はその下に横幅いっぱい */
.pdf-card-actions form { margin: 0; flex: 1 1 100%; display: flex; }
.pdf-card-actions > .btn { flex: 1 1 140px; min-height: 48px; }
.pdf-card-actions form .btn { flex: 1 1 auto; min-height: 48px; }

/* --- 内容（読むだけの一覧カード。入力用の .kv-card を表示用に使う） --- */
.kv-card.report-kv { margin: 0 0 8px; }
.report-kv .kv-label { width: 7.5em; cursor: default; }
.kv-value {
  flex: 1; min-width: 0;
  padding: 12px 0;
  font-size: 15px;
  color: var(--color-text);
  text-align: right;
  overflow-wrap: anywhere;
}
.kv-value.is-empty { color: var(--color-subtle); }
.kv-row.is-stacked .kv-value { padding: 0; text-align: left; line-height: 1.7; white-space: pre-wrap; }
.report-kv .kv-row:last-child { border-bottom: none; }
.kv-card.report-kv .kv-row:focus-within { background: transparent; }

/* --- 写真（PDFの順番の番号つき。下にどの図面の写真か・コメント） --- */
.report-photo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 8px; }
.report-photo { display: flex; flex-direction: column; gap: 4px; min-width: 0; color: var(--color-text-sub); }
.report-photo:hover { text-decoration: none; color: var(--color-text); }
.report-photo .photo-tile { display: block; }
.report-photo img {
  width: 100%; aspect-ratio: 1; object-fit: cover; display: block;
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  transition: opacity .15s;
}
.report-photo:hover img { opacity: .85; }
.report-photo:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); }
.report-photo-caption {
  font-size: 11px; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

/* --- その他の操作（削除は一番下に離して置く） --- */
.report-more {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 28px; padding-top: 16px;
  border-top: 1px solid var(--color-border);
}
.report-more form { margin: 0; }

/* --- 作成・編集: レポートに含める写真の選択（未整理トレイと同じく、選ぶと青い外枠） --- */
.form-card.report-pick-card { margin-top: 16px; } /* 21章の .form-card { margin: 0 } より強くする */
.report-pick-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px;
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: var(--radius);
  background: var(--color-primary-soft);
  color: var(--color-primary);
}
.report-pick-count { flex: 1 1 180px; min-width: 0; font-size: 13px; font-weight: 700; }
.report-pick-actions { display: flex; gap: 8px; flex-shrink: 0; margin-left: auto; }
.report-pick-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 8px; }
.report-pick {
  position: relative;
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.report-pick .photo-tile { display: block; }
.report-pick img {
  width: 100%; aspect-ratio: 1; object-fit: cover; display: block;
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  outline: 2px solid transparent; outline-offset: 2px;
  opacity: .7;
  transition: outline-color .15s, opacity .15s;
}
.report-pick:hover img { opacity: .9; }
/* チェックボックスは右上（左上はピン番号） */
.report-pick .report-pick-check {
  position: absolute; top: 5px; right: 5px; z-index: 1;
  width: 22px; height: 22px; margin: 0;
  accent-color: var(--color-primary);
  cursor: pointer;
}
.report-pick .report-pick-check:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 1px; }
.report-pick:has(.report-pick-check:checked) img { outline-color: var(--color-primary); opacity: 1; }
.report-pick-caption {
  font-size: 11px; color: var(--color-muted); line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.report-pick:has(.report-pick-check:checked) .report-pick-caption { color: var(--color-primary); font-weight: 700; }
.report-pick-card.is-invalid { border-color: var(--color-danger-border); }

@media (min-width: 900px) {
  .breadcrumb.page-breadcrumb { display: flex; margin-bottom: 16px; }

  .pdf-card { padding: 20px 24px; }
  .pdf-card-actions > .btn,
  .pdf-card-actions form,
  .pdf-card-actions form .btn { flex: 0 0 auto; }
  .pdf-card-actions .btn { min-width: 200px; }

  .report-photo-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px 12px; }
  .report-pick-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px 10px; }
  .form-card.report-pick-card { margin-top: 24px; }
}

/* ============================================================
   13. ゴミ箱（resources/views/projects/trash.blade.php）
   PCはパンくず（現場一覧 › 施設名 › ゴミ箱）、スマホは上部ヘッダーの「戻る」
   図面／写真／レポート／請求書・領収書を、それぞれ白いカードで区切る
   1件1行: 左にサムネイル（図面・写真のみ）→ 名前・補足・削除日時 → 右端に「復元」（どの種類も同じ位置）
   ============================================================ */
.trash-lead { line-height: 1.7; margin-bottom: 16px; }
.trash-lead-site { display: block; font-weight: 700; color: var(--color-text-sub); }

.trash-card {
  margin: 0 0 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.trash-card-head {
  display: flex; align-items: baseline; gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-divider);
}
.trash-card-title { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.4; }
.trash-card-count { font-size: 13px; color: var(--color-muted); font-variant-numeric: tabular-nums; }

.trash-empty { margin: 0; padding: 16px; font-size: 13px; color: var(--color-muted); }
.trash-card-note {
  margin: 0;
  padding: 10px 16px;
  border-top: 1px solid var(--color-divider);
  background: var(--color-surface-muted);
  font-size: 12px; line-height: 1.6;
  color: var(--color-muted);
}

.trash-rows { list-style: none; margin: 0; padding: 0; }
.trash-rows > li + li { border-top: 1px solid var(--color-divider); }

.trash-row {
  display: flex; align-items: center; gap: 12px;
  min-height: 64px;
  padding: 12px 16px;
}

/* サムネイル（押すと大きい画像を別タブで開く）。削除済みと分かるよう少し薄く */
.trash-thumb {
  position: relative;
  flex-shrink: 0;
  width: 56px; height: 56px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  display: flex; align-items: center; justify-content: center;
}
.trash-thumb img { width: 100%; height: 100%; object-fit: cover; opacity: .75; transition: opacity .15s; }
.trash-thumb:hover img { opacity: 1; }
.trash-thumb:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; }
.trash-thumb.is-file { text-decoration: none; }
.trash-thumb-label { font-size: 12px; font-weight: 700; color: var(--color-muted); }

.trash-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.trash-row-title {
  margin: 0;
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px;
  font-size: 15px; font-weight: 700; line-height: 1.45;
  color: var(--color-text);
  word-break: break-word;
}
.trash-row-sub { margin: 0; font-size: 13px; color: var(--color-text-sub); word-break: break-word; }
.trash-row-meta { margin: 0; font-size: 12px; color: var(--color-muted); font-variant-numeric: tabular-nums; }

/* 「復元」は右端に、どの行も同じ幅でそろえる */
.trash-row-action { flex-shrink: 0; margin: 0 0 0 auto; }
.trash-row-action .btn { min-width: 76px; }

@media (min-width: 900px) {
  .trash-lead { margin-bottom: 20px; }
  .trash-card-head,
  .trash-empty,
  .trash-card-note { padding-left: 24px; padding-right: 24px; }
  .trash-row { padding: 12px 24px; gap: 16px; }
}

/* ============================================================
   14. 監査ログ（resources/views/audit_logs/index.blade.php）
   PC（900px以上）: 白いカードの中に 見出し行 → 1操作1行の表
                    列: 日時／ユーザー／操作／対象／IPアドレス（見出し行と各行で同じ列幅を使う）
   スマホ         : 見出し行を隠し、1操作ずつのカードを縦に並べる
                    1段目: 操作＋日時 ／ 2段目: 対象（名前・どの現場か） ／ 3段目: ユーザー ・ IPアドレス
   行そのものはリンクにしない（対象の名前だけがリンク。開けないものは文字だけ）
   ============================================================ */

/* --- 行（スマホ: カード） --- */
.audit-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }

.audit-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "action time"
    "subject subject"
    "meta meta";
  column-gap: 12px;
  align-items: start;
  padding: 14px 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  color: var(--color-text);
  font-size: 14px;
}

.audit-action { grid-area: action; font-size: 15px; font-weight: 700; line-height: 1.45; word-break: break-word; }
.audit-time {
  grid-area: time;
  padding-top: 2px;
  font-size: 12px; color: var(--color-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.audit-subject { grid-area: subject; display: flex; flex-direction: column; gap: 1px; min-width: 0; margin-top: 4px; }
/* ログイン・ログアウトなど対象の無い操作は、スマホでは「—」の行ごと出さない（PCは列をそろえるため「—」を出す） */
.audit-subject.is-empty { display: none; }
.audit-subject-main { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-width: 0; }
.audit-subject-name { color: var(--color-text-sub); word-break: break-word; }
a.audit-subject-name { color: var(--color-primary); }
.audit-subject-main .badge { flex-shrink: 0; }
.audit-subject-context { font-size: 12px; color: var(--color-muted); word-break: break-word; }

/* ユーザー・IPアドレス: スマホでは1行にまとめ、「・」で区切る */
.audit-row-meta {
  grid-area: meta;
  display: block;
  margin-top: 6px;
  font-size: 12px; line-height: 1.5;
  color: var(--color-muted);
}
.audit-row-meta .audit-cell { display: inline; }
.audit-row-meta .audit-cell + .audit-cell::before { content: "・"; margin: 0 4px; color: var(--color-subtle); }
.audit-ip { font-variant-numeric: tabular-nums; }
.audit-user.is-missing,
.audit-empty { color: var(--color-subtle); }

/* 見出し行はPCだけ */
.audit-table-head { display: none; }

.audit-list-hint { margin-top: 16px; line-height: 1.6; }

/* --- PC: 表形式 --- */
@media (min-width: 900px) {
  .audit-list {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    overflow: hidden;
  }

  /* 見出し行と各行で同じ列幅を使う（日時／ユーザー／操作／対象／IPアドレス） */
  .audit-table-head,
  .audit-row {
    grid-template-columns: 132px minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 2.4fr) 116px;
    grid-template-areas: none;
    column-gap: 16px;
    padding: 0 24px;
  }

  .audit-table-head {
    display: grid;
    align-items: center;
    height: 40px;
    background: var(--color-surface-muted);
    border-bottom: 1px solid var(--color-border);
    font-size: 12px; font-weight: 700;
    color: var(--color-muted);
    white-space: nowrap;
  }

  .audit-rows { gap: 0; }
  .audit-rows > li + li { border-top: 1px solid var(--color-divider); }

  .audit-row {
    grid-template-rows: auto;
    align-items: start;
    min-height: 56px;
    padding-top: 14px; padding-bottom: 14px;
    border: none;
    border-radius: 0;
    background: transparent;
  }

  /* HTMLの並び（スマホのカードの順）と、PCの列の順が違うので、列を指定して置く */
  .audit-row-meta { display: contents; }
  .audit-row-meta .audit-cell { display: block; }
  .audit-row-meta .audit-cell + .audit-cell::before { content: none; }

  .audit-time   { grid-column: 1; grid-row: 1; padding-top: 0; font-size: 14px; color: var(--color-text-sub); }
  .audit-user   { grid-column: 2; grid-row: 1; font-size: 14px; color: var(--color-text-sub); word-break: break-word; }
  .audit-action { grid-column: 3; grid-row: 1; font-size: 14px; }
  .audit-subject,
  .audit-subject.is-empty { display: flex; grid-column: 4; grid-row: 1; margin-top: 0; }
  .audit-ip     { grid-column: 5; grid-row: 1; font-size: 13px; color: var(--color-muted); }
}

/* ============================================================
   15. ページネーション
   ============================================================ */
.simple-pagination {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
  margin-top: 16px;
  font-size: 14px;
}
.simple-pagination .page-info { color: var(--color-muted); margin-right: 8px; font-size: 13px; }
.simple-pagination .page-link {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--control-height); min-height: var(--control-height);
  padding: 0 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-sub);
  line-height: 1;
}
.simple-pagination .page-link:hover { background: var(--color-bg); color: var(--color-text); text-decoration: none; }
.simple-pagination .page-link.is-active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.simple-pagination .page-link.is-disabled { color: var(--color-border-strong); border-color: var(--color-divider); cursor: default; }

/* ============================================================
   16. ログイン画面
   部品: resources/views/auth/login.blade.php
   スマホ: 上にロゴ・サービス名・ひとこと → 白いカード（入力欄52px・ログイン56px）→ 画面下に「パスワードを忘れた場合は…」
   PC  : 全体を画面の上下中央に置き、「パスワードを忘れた場合は…」はカードのすぐ下（→ 17. 参照）
   ============================================================ */
.auth-wrap {
  display: flex; flex-direction: column; align-items: stretch;
  max-width: 420px;
  margin: 0 auto;
  padding-top: 64px;
  /* 画面の高さいっぱいに広げ、注意書きを画面下に置く（.container の上下余白 16px + 32px を引く） */
  min-height: calc(100vh - 48px);
  min-height: calc(100dvh - 48px);
}

.auth-brand {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  margin-bottom: 36px;
  text-align: center;
}
/* ロゴマークの大きい版（ログイン画面用） */
.brand-mark.is-lg { width: 56px; height: 56px; }
.auth-brand-name {
  margin: 0;
  font-size: 22px; font-weight: 700; line-height: 1.35;
  letter-spacing: .04em;
  color: var(--color-text);
  overflow-wrap: anywhere;
}
.auth-brand-lead { margin: 0; font-size: 13px; color: var(--color-muted); }

.auth-card {
  padding: 24px 20px;
  margin-bottom: 0;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(16, 24, 40, .06);
}
.auth-card .auth-title { margin: 0 0 18px; font-size: 18px; font-weight: 700; line-height: 1.4; }
.auth-card .form-group input { min-height: 52px; }
.auth-card .btn.lg { margin-top: 2px; }

/* カード内のお知らせ（ログアウトしました）・エラー（回数制限のロック・組み合わせ違いなど） */
.auth-message {
  margin: 0 0 18px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 13px; line-height: 1.5;
}
.auth-message p { margin: 0; }
.auth-message p + p { margin-top: 4px; }
.auth-message.is-error { margin-top: -6px; background: var(--color-danger-soft); color: var(--color-danger-dark); }
.auth-message.is-status { background: var(--color-success-soft); color: var(--color-success); }

.auth-footnote {
  margin: auto 0 0;
  padding-top: 32px;
  font-size: 12px; line-height: 1.7;
  color: var(--color-muted);
  text-align: center;
}

/* ============================================================
   17. PC向けレイアウト（幅900px以上）
   ============================================================ */
@media (max-width: 899px) {
  /* スマホではサイドメニューを出さない（上部ヘッダー＋下部タブを使う） */
  .sidebar { display: none; }
}

@media (min-width: 900px) {
  body.has-tabbar { padding-bottom: 0; }

  /* 左サイドメニュー＋右側にメイン */
  .app-shell { display: flex; align-items: stretch; }
  .sidebar {
    display: flex; flex-direction: column;
    position: sticky; top: 0;
    width: var(--sidebar-width); height: 100vh;
    flex-shrink: 0;
    padding: 20px 14px;
    background: var(--color-surface);
    border-right: 1px solid var(--color-border);
    overflow-y: auto;
  }
  .app-main { flex: 1; }

  /* スマホ用の上部ヘッダー・下部タブは隠す */
  .appbar,
  .tabbar { display: none; }

  .container { max-width: 1080px; margin: 0 auto; padding: 36px 48px 56px; }
  /* ログイン画面（サイドメニューなし）は中央寄せのまま */
  body.is-guest .container { max-width: 960px; padding: 28px 24px 48px; }

  h2 { font-size: 26px; }
  .page-header { margin-bottom: 8px; }

  .photo-grid { grid-template-columns: repeat(5, 1fr); gap: 10px; }
  .tray-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px 10px; }

  /* 写真の編集: PCは見出し横に「保存」。幅は保存される画像の上限（720px）に合わせる。ツールは画面下に残す */
  .annotate-head { display: flex; }
  .annotate-page { max-width: 720px; }
  .annotate-message { top: 16px; }
  .annotate-tools,
  body.has-tabbar .annotate-tools { bottom: 16px; justify-content: flex-start; gap: 4px; }

  /* ログイン画面: 全体を上下中央に置き、注意書きはカードのすぐ下に */
  .auth-wrap { justify-content: center; padding-top: 0; min-height: calc(100vh - 76px); min-height: calc(100dvh - 76px); }
  .auth-footnote { margin-top: 0; padding-top: 24px; }
}

/* ============================================================
   18. ヘルプ（「？」ボタン）
   部品: resources/views/components/help.blade.php
   文面: lang/ja/help.php ／ 補助スクリプト: public/js/help.js
   スマホ: 説明は画面下（タブバーがあればその上）にカードで出す
   PC   : 説明は「？」の下に吹き出しで出す（右端からはみ出す分はJSで左にずらす）
   ============================================================ */
.help {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
  flex-shrink: 0;
  font-weight: 400;
}
.help-toggle {
  position: relative;
  list-style: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  border: 1.5px solid var(--color-primary);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-primary);
  font-size: 13px; font-weight: 700; line-height: 1;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.help-toggle::-webkit-details-marker { display: none; }
.help-toggle::marker { content: ""; }
/* 指で押しやすいよう、見た目より広い範囲をタップ可能にする */
.help-toggle::after { content: ""; position: absolute; inset: -10px; }
.help-toggle:hover { background: var(--color-primary-soft); }
.help-toggle:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.help[open] > .help-toggle { background: var(--color-primary); color: #fff; }

.help-panel {
  position: fixed; z-index: 40;
  left: 12px; right: 12px;
  bottom: calc(env(safe-area-inset-bottom) + 12px);
  max-height: 60vh;
  overflow-y: auto;
  padding: 14px 16px 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-popover);
  color: var(--color-text);
  font-size: 14px; font-weight: 400; line-height: 1.7;
  text-align: left;
  white-space: normal;
  cursor: auto;
}
body.has-tabbar .help-panel { bottom: calc(var(--tabbar-height) + env(safe-area-inset-bottom) + 12px); }
.help-title { margin: 0 0 6px; font-size: 15px; font-weight: 700; }
.help-text { margin: 0 0 8px; }
.help-list { margin: 0 0 8px; padding-left: 1.3em; }
.help-list li { margin-bottom: 2px; }
.help-close { display: block; margin: 4px 0 0 auto; }

/* 見出しラベルの横に「？」を置くとき（label の中には details を置けないため横に並べる） */
.label-with-help { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.form-group .label-with-help label { margin-bottom: 0; }

@media (min-width: 900px) {
  .help-panel,
  body.has-tabbar .help-panel {
    position: absolute;
    left: 0; right: auto; bottom: auto;
    top: calc(100% + 8px);
    width: 340px;
    max-height: none;
    transform: translateX(var(--help-shift, 0px));
  }
}

/* ============================================================
   19. 現場詳細（resources/views/projects/show.blade.php）
   上から: 状態バッジ＋管理番号 → 施設名 → 依頼者・住所 → 操作ボタン
          → 図面／写真／レポート／請求書の切り替え（ページ内リンク・上部に固定）
          → 「写真を撮る・まとめて追加」大ボタン → 図面カード → 未整理の写真 → レポート → 請求書
   ============================================================ */
.detail-head { margin-bottom: 14px; }
.detail-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.detail-no { font-size: 12px; color: var(--color-muted); letter-spacing: .02em; }
.detail-title { margin: 0; font-size: 20px; line-height: 1.4; word-break: break-word; }
.detail-sub { margin: 4px 0 0; font-size: 13px; color: var(--color-muted); word-break: break-word; }
.detail-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.detail-actions form { margin: 0; }

/* 切り替え（灰色の台に白いボタンが乗る形）。スクロールしても上部に残す */
.segmented {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px;
  padding: 4px;
  background: var(--color-surface-sunken);
  border-radius: var(--radius);
}
.segmented.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.segmented-item {
  min-height: 40px;
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  color: var(--color-text-sub);
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .15s, color .15s;
}
.segmented-item:hover { color: var(--color-text); text-decoration: none; }
.segmented-item.is-active {
  background: var(--color-surface);
  color: var(--color-text);
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .08);
}
.segmented-item:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 0; }

.detail-tabs {
  position: sticky; z-index: 10;
  top: calc(var(--header-height) + env(safe-area-inset-top) + 8px);
  margin-bottom: 14px;
  /* 下を流れる内容と重なっても読めるよう、台の外側に背景色の帯を付ける */
  box-shadow: 0 0 0 8px var(--color-bg);
}

/* ページ内リンクで移動したとき、上部ヘッダーと切り替えに見出しが隠れないようにする */
.detail-section { scroll-margin-top: calc(var(--header-height) + env(safe-area-inset-top) + 72px); }

/* 見出しと右側のボタンを横並びにする */
.section-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin: 28px 0 10px; }
.section-head .section-title { margin: 0; flex: 1; min-width: 0; }
.detail-section:first-of-type .section-head { margin-top: 20px; }
.section-count { color: var(--color-primary); font-weight: 700; }

/* 写真を撮る・まとめて追加（画面幅いっぱい・高さ56px） */
.capture-action { margin-bottom: 4px; }
.capture-button { cursor: pointer; }
.capture-button .nav-icon { width: 24px; height: 24px; }
/* 実際の input は隠しているので、キーボードで選んだときは大ボタンに枠を出す */
.visually-hidden:focus-visible + .capture-button { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; }
.capture-hint { display: flex; align-items: flex-start; gap: 8px; }
/* 容量の上限に達して押せないとき（中の input は disabled）: 灰色にして、押せないことが分かるように */
.capture-button.is-disabled,
.capture-button.is-disabled:hover {
  background: var(--color-divider);
  border-color: var(--color-divider);
  color: var(--color-muted);
  box-shadow: none;
  cursor: not-allowed;
}
.capture-action .upload-blocked-notice { margin: 10px 0 0; }
.capture-hint > span { flex: 1; min-width: 0; }

/* 図面カード: 図面名＋「図面を切替」→ 図面 → 名前を変更・削除 */
.drawing-card { padding: 14px; }
.drawing-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.drawing-name {
  flex: 1; min-width: 0;
  font-size: 15px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.drawing-card-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--color-divider); }
.drawing-card-foot form { margin: 0; }

/* PDFの図面: 「PDFを開く」「PDFを保存」を横に2つ並べる（スマホでも同じ幅で2つ） */
.drawing-pdf-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.drawing-pdf-actions .btn { width: 100%; }

/* 図面名の変更（<details>）: 「名前を変更」を押すと、図面カードの下がその場で入力欄に変わる。
   開いている間は「名前を変更」「この図面を削除」を隠し、入力欄を横幅いっぱいに出す */
.drawing-rename > summary { list-style: none; }
.drawing-rename > summary::-webkit-details-marker { display: none; }
.drawing-rename > summary::marker { content: ""; }
.drawing-rename[open] { flex: 1 1 100%; }
.drawing-rename[open] > summary { display: none; }
.drawing-card-foot:has(.drawing-rename[open]) .drawing-delete-form { display: none; }
.drawing-rename-form .form-group { margin-bottom: 12px; }
.drawing-rename-actions { display: flex; justify-content: flex-end; gap: 8px; }
.drawing-rename-actions .btn { min-width: 112px; }

/* 未整理の写真を選んでいる間: 図面を青枠で囲み、説明文も青で強調する */
.drawing-wrap.is-assigning { border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-primary-soft-strong); }
.drawing-hint.is-assigning { color: var(--color-primary); font-weight: 700; }

/* 図面の切り替えメニュー（<details>で開閉） */
.drawing-switcher { position: relative; flex-shrink: 0; }
.drawing-switcher > summary { list-style: none; gap: 4px; }
.drawing-switcher > summary::-webkit-details-marker { display: none; }
.drawing-switcher > summary::marker { content: ""; }
.drawing-switcher > summary .nav-icon { transition: transform .15s; }
.drawing-switcher[open] > summary { background: var(--color-bg); border-color: var(--color-subtle); }
.drawing-switcher[open] > summary .nav-icon { transform: rotate(180deg); }
.drawing-switcher-panel {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 15;
  width: min(280px, calc(100vw - 32px));
  max-height: 60vh; overflow-y: auto;
  margin: 0; padding: 6px;
  list-style: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-popover);
}
.drawing-switcher-item {
  display: flex; align-items: center; gap: 10px;
  min-height: var(--control-height);
  padding: 0 10px;
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: 14px;
}
.drawing-switcher-item:hover { background: var(--color-bg); color: var(--color-text); text-decoration: none; }
.drawing-switcher-item.is-active { background: var(--color-primary-soft); color: var(--color-primary); font-weight: 700; }
.drawing-switcher-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drawing-switcher-count { flex-shrink: 0; font-size: 12px; color: var(--color-muted); font-weight: 400; }

/* 図面の追加・請求書の登録など、普段は閉じておくフォーム（<details>で開閉。JS不要） */
.disclosure { padding: 0; }
.disclosure-summary {
  display: flex; align-items: center;
  min-height: 52px;
  padding: 0 16px;
  list-style: none;
  font-size: 15px; font-weight: 700;
  color: var(--color-primary);
  cursor: pointer;
  border-radius: var(--radius-card);
  -webkit-tap-highlight-color: transparent;
}
.disclosure-summary::-webkit-details-marker { display: none; }
.disclosure-summary::marker { content: ""; }
.disclosure-summary::after {
  content: "";
  margin-left: auto;
  width: 8px; height: 8px;
  border-right: 2px solid var(--color-subtle);
  border-bottom: 2px solid var(--color-subtle);
  transform: translateY(-2px) rotate(45deg);
  transition: transform .15s;
}
.disclosure[open] > .disclosure-summary::after { transform: translateY(2px) rotate(-135deg); }
.disclosure-summary:hover { background: var(--color-surface-muted); }
.disclosure-summary:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: -3px; }
.disclosure[open] > .disclosure-summary { border-bottom: 1px solid var(--color-divider); border-radius: var(--radius-card) var(--radius-card) 0 0; }
.disclosure-body { padding: 16px; }
.disclosure-body > :last-child { margin-bottom: 0; }

@media (min-width: 900px) {
  .detail-title { font-size: 26px; }
  .detail-sub { font-size: 14px; }

  /* PCは上部ヘッダーが無いので、切り替えは画面上端に固定 */
  .detail-tabs { top: 12px; max-width: 520px; }
  .detail-section { scroll-margin-top: 80px; }

  /* PCでは大ボタンを画面幅いっぱいにはしない */
  .capture-action { display: flex; align-items: center; gap: 16px; }
  .capture-action .capture-button { width: auto; min-width: 360px; }
  .capture-hint { margin: 0; flex: 1; }
  .capture-action .upload-blocked-notice { margin: 0; flex: 1; }

  .drawing-card { padding: 18px; }
}

/* ============================================================
   20. 現場一覧（resources/views/projects/index.blade.php）
   PC（900px以上）: 白いカードの中に 並び替えタブ → 見出し行 → 1現場1行の表
                    列: 現場名／管理番号／依頼者／担当／状態（見出し行と各行で同じ列幅を使う）
   スマホ         : 見出し行を隠し、1現場ずつのカードを縦に並べる
                    1段目: 現場名＋状態バッジ ／ 2段目: 管理番号 ・ 依頼者 ・ 担当
   1行（1枚）全体が現場詳細へのリンク（<a class="site-row">）
   ============================================================ */

/* --- 見出し（タイトル＋件数、右に「現場を登録」） --- */
.list-head { align-items: flex-end; margin-bottom: 16px; }
.list-head-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.list-head-count { margin: 0; font-size: 13px; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.list-head > .btn .nav-icon { width: 18px; height: 18px; }

/* --- 行（スマホ: カード） --- */
.site-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }

.site-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "name status"
    "meta meta";
  column-gap: 12px;
  align-items: start;
  padding: 14px 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  color: var(--color-text);
  -webkit-tap-highlight-color: transparent;
  transition: border-color .15s, background-color .15s;
}
.site-row:hover { text-decoration: none; color: var(--color-text); border-color: var(--color-border-strong); background: var(--color-surface-muted); }
.site-row:active { background: var(--color-bg); }
.site-row:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; }

.site-name {
  grid-area: name;
  font-size: 15px; font-weight: 700; line-height: 1.45;
  color: var(--color-text);
  word-break: break-word;
}
.site-status { grid-area: status; display: flex; padding-top: 1px; }

/* 管理番号・依頼者・担当: スマホでは1行にまとめ、「・」で区切る（空の項目は出さない）
   文字と同じ流れ（inline）で並べるので、折り返しても「・」が行頭に来ない（日本語の禁則処理に任せる） */
.site-row-meta {
  grid-area: meta;
  display: block;
  margin-top: 4px;
  font-size: 13px; line-height: 1.5;
  color: var(--color-muted);
  min-width: 0;
}
.site-row-meta .site-cell { display: inline; word-break: break-word; }
.site-row-meta .site-cell.is-empty { display: none; }
.site-row-meta .site-cell:not(.is-empty) ~ .site-cell:not(.is-empty)::before {
  content: "・";
  margin: 0 4px;
  color: var(--color-subtle);
}
.site-no { font-variant-numeric: tabular-nums; }
.site-cell-label { color: var(--color-subtle); }

/* 見出し行はPCだけ */
.site-table-head { display: none; }

.site-list-empty {
  margin: 0;
  color: var(--color-muted);
  font-size: 14px;
  padding: 28px 16px;
  text-align: center;
  background: var(--color-surface);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-card);
}

/* --- PC: 表形式 --- */
@media (min-width: 900px) {
  .list-head { margin-bottom: 20px; }
  .list-head-count { font-size: 14px; }

  /* 外側の白いカード（並び替えタブ・見出し行・行をまとめて囲む） */
  .site-list {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    overflow: hidden;
  }
  .site-list .sort-tabs { margin: 0; padding: 0 16px; }
  .site-list .sort-tabs .tab-item { min-height: 48px; }

  /* 見出し行と各行で同じ列幅を使う（現場名／管理番号／依頼者／担当／状態） */
  .site-table-head,
  .site-row {
    grid-template-columns:
      minmax(0, 2.4fr) minmax(108px, 1.1fr) minmax(0, 1.6fr) minmax(0, .9fr) minmax(88px, .8fr);
    grid-template-areas: none;
    column-gap: 16px;
    padding: 0 24px;
  }

  .site-table-head {
    display: grid;
    align-items: center;
    height: 40px;
    background: var(--color-surface-muted);
    border-bottom: 1px solid var(--color-border);
    font-size: 12px; font-weight: 700;
    color: var(--color-muted);
    white-space: nowrap;
  }

  .site-rows { gap: 0; }
  .site-rows > li + li { border-top: 1px solid var(--color-divider); }

  .site-row {
    align-items: center;
    min-height: 64px;
    padding-top: 10px; padding-bottom: 10px;
    border: none;
    border-radius: 0;
    background: transparent;
    font-size: 14px;
  }
  .site-row:hover { background: var(--color-surface-muted); }
  .site-row:focus-visible { outline-offset: -3px; }

  .site-name { grid-area: auto; }
  .site-status { grid-area: auto; padding-top: 0; }

  /* スマホでまとめていた3項目を、PCではそれぞれ1列として並べる */
  .site-row-meta { display: contents; }
  .site-row-meta .site-cell {
    display: block;
    font-size: 14px;
    color: var(--color-text-sub);
  }
  .site-row-meta .site-cell.is-empty { display: block; color: var(--color-subtle); }
  /* 管理番号はハイフンで折り返すと読みにくいので1行に収める（長すぎる分は「…」。全文は title で確認できる） */
  .site-row-meta .site-no { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .site-row-meta .site-cell:not(.is-empty) ~ .site-cell:not(.is-empty)::before { content: none; }

  /* PCは見出し行に「担当」と出ているので、セル内の「担当」は読み上げ用にだけ残す */
  .site-cell-label {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .site-list-empty { border: none; border-radius: 0; }
}

/* ============================================================
   21. 現場の登録・編集（resources/views/projects/create.blade.php・edit.blade.php ／ 中身: projects/_form.blade.php）
   PC（900px以上）: パンくず＋見出し → 左列（基本情報・詳細項目）／右列（担当する作業者・備考と管理メモ）
                    → 画面下に固定の操作バー（キャンセル／登録する）
   スマホ         : 見出しは上部ヘッダーに任せて出さない。カードを同じ順に1列で並べ、
                    操作バーは画面下（下部タブがあればその上）に固定
   ============================================================ */
.form-page-head { display: none; }
.breadcrumb {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px;
  margin: 0 0 6px;
  font-size: 13px;
  color: var(--color-muted);
}
.breadcrumb a { color: var(--color-muted); }
.breadcrumb a:hover { color: var(--color-primary); }
.breadcrumb-sep { color: var(--color-subtle); }
/* 長い施設名はパンくずの中で「…」にする（マウスを乗せる必要はない。見出しの下に全文が無くても、戻り先として分かれば足りる） */
.breadcrumb-current-site { max-width: 320px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.form-page-title { margin: 0; }

.site-form-columns { display: flex; flex-direction: column; gap: 16px; }
.site-form-main,
.site-form-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.form-card { margin: 0; padding: 18px 16px; }
.form-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.form-card-title { margin: 0 0 16px; font-size: 16px; font-weight: 700; line-height: 1.4; }
.form-card-head .form-card-title { margin: 0; }
.form-card-lead { margin: 0 0 14px; font-size: 12px; color: var(--color-muted); }
.form-card .notice { margin-bottom: 0; }
.form-card.is-invalid { border-color: var(--color-danger-border); }
.form-side-notice { margin: 0; background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text-sub); }

/* 2つ並べる入力欄（PCのみ2列。スマホは1列） */
.form-grid-2 { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 16px; }

/* 詳細項目（折りたたみ）: 見出しは本文と同じ色。下に何が入っているかと入力済みの数を出す */
.form-disclosure { margin: 0; }
.form-disclosure > .disclosure-summary { min-height: 64px; padding: 10px 16px; color: var(--color-text); gap: 12px; }
.form-disclosure-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.form-disclosure-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 16px; font-weight: 700; }
.form-disclosure-sub { font-size: 12px; font-weight: 400; color: var(--color-muted); }
.form-checks { display: flex; flex-direction: column; gap: 8px; }

/* 操作バー（キャンセル／登録する）: 画面下に固定。.container の左右・下の余白を打ち消して横幅いっぱいに出す */
.form-actionbar {
  position: sticky; bottom: 0; z-index: 15;
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  margin: 20px -16px -32px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
}
/* 下部タブがある人（管理者・物件管理者）は、タブの上に出す（タブ側で端末下の余白を取っている） */
body.has-tabbar .form-actionbar {
  bottom: calc(var(--tabbar-height) + env(safe-area-inset-bottom));
  padding-bottom: 12px;
}
.form-actionbar .btn { min-height: 48px; }
.form-actionbar .form-submit { flex: 1; font-size: 16px; }

@media (min-width: 900px) {
  .form-page-head { display: block; margin-bottom: 20px; }

  .site-form-columns {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
  }
  .site-form-main,
  .site-form-side { gap: 20px; }

  .form-card { padding: 22px 24px; }
  .form-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-disclosure > .disclosure-summary { padding: 10px 24px; }
  .form-disclosure .disclosure-body { padding: 20px 24px 24px; }

  /* PCは下部タブが無いので、画面の一番下に固定 */
  .form-actionbar,
  body.has-tabbar .form-actionbar {
    bottom: 0;
    margin: 28px -48px -56px;
    padding: 16px 48px;
    gap: 12px;
  }
  .form-actionbar .btn { padding-left: 22px; padding-right: 22px; }
  .form-actionbar .form-submit { flex: none; min-width: 160px; padding-left: 40px; padding-right: 40px; }
}

/* ============================================================
   22. ユーザー管理（一覧: resources/views/users/index.blade.php ／ 追加・編集: users/_form.blade.php・_permissions.blade.php）
   一覧 PC（900px以上）: 白いカードの中に 見出し行 → 1人1行の表（名前・メール／ロール／請求書・領収書／状態）
        スマホ         : 1人ずつのカード（1段目: 名前＋状態バッジ ／ 2段目: メール ／ 3段目: ロール ・ 請求書）
        物件管理者・作業者の行は編集画面へのリンク。管理者の行はリンクにしない（自分の行だけアカウント設定へ）
   追加・編集: 21章の部品（パンくず・2列・操作バー）。右列はロールの切り替え＋選んだロールの説明＋作業者の追加権限
        物件管理者を選んでいる間は、権限のチェックを薄くして「常にすべてできます」を出す（:has() でラジオボタンを見る）
   ============================================================ */

/* --- 一覧の行（スマホ: カード） --- */
.user-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }

.user-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "main status"
    "meta meta";
  column-gap: 12px;
  align-items: start;
  padding: 14px 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  color: var(--color-text);
  -webkit-tap-highlight-color: transparent;
  transition: border-color .15s, background-color .15s;
}
a.user-row:hover { text-decoration: none; color: var(--color-text); border-color: var(--color-border-strong); background: var(--color-surface-muted); }
a.user-row:active { background: var(--color-bg); }
a.user-row:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; }

.user-main { grid-area: main; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.user-row-name { font-size: 15px; font-weight: 700; line-height: 1.45; word-break: break-word; }
.user-row-me { font-size: 12px; font-weight: 400; color: var(--color-muted); }
.user-row-email { font-size: 13px; color: var(--color-muted); overflow-wrap: anywhere; }
.user-row-note { font-size: 12px; color: var(--color-subtle); }
.user-status { grid-area: status; display: flex; padding-top: 1px; }

/* ロール・請求書: スマホではメールの下に1行でまとめ、「・」で区切る */
.user-row-meta {
  grid-area: meta;
  display: block;
  margin-top: 6px;
  font-size: 13px; line-height: 1.5;
  color: var(--color-text-sub);
}
.user-row-meta .user-cell { display: inline; }
.user-row-meta .user-cell + .user-cell::before { content: "・"; margin: 0 4px; color: var(--color-subtle); }
.user-cell-label { color: var(--color-subtle); margin-right: 4px; }
.user-cell.is-muted { color: var(--color-muted); }

/* 無効化中の人は、名前とメールを薄くする（状態バッジはグレーの「無効化中」） */
.user-row.is-inactive .user-row-name,
.user-row.is-inactive .user-row-email,
.user-row.is-inactive .user-row-meta { color: var(--color-subtle); }

/* 見出し行はPCだけ */
.user-table-head { display: none; }

.user-list-hint { margin-top: 16px; line-height: 1.6; }

/* --- 追加・編集: ロールの説明（選んでいるロールの説明だけ出す） --- */
.role-description { display: none; margin: 10px 0 0; font-size: 13px; line-height: 1.6; color: var(--color-text-sub); }
.user-form:has(input[name=role][value=manager]:checked) .role-description.is-manager,
.user-form:has(input[name=role][value=worker]:checked) .role-description.is-worker { display: block; }
.user-role-card .field-choice { margin-bottom: 20px; }

/* --- 追加・編集: 作業者の追加権限 --- */
.user-permissions { padding-top: 18px; border-top: 1px solid var(--color-divider); }
.user-permissions-title { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.4; }
.user-permissions .form-card-head { margin-bottom: 4px; }
.user-permissions-lead.is-manager { display: none; margin: 0 0 12px; }
.user-permission-options { transition: opacity .15s; }
/* 物件管理者を選んでいる間は、チェックは効かないので薄くして説明を差し替える（値はそのまま保存する） */
.user-form:has(input[name=role][value=manager]:checked) .user-permissions-lead.is-worker { display: none; }
.user-form:has(input[name=role][value=manager]:checked) .user-permissions-lead.is-manager { display: block; }
.user-form:has(input[name=role][value=manager]:checked) .user-permission-options { opacity: .45; }

/* --- 編集: アカウントの状態・削除 --- */
.user-form-state-hint { margin: 8px 0 0; }
.user-delete {
  margin-top: 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.user-delete > .disclosure-summary { min-height: 44px; padding: 8px 14px; color: var(--color-danger-dark); font-size: 14px; }
.user-delete[open] > .disclosure-summary { border-radius: var(--radius) var(--radius) 0 0; }
.user-delete .disclosure-body { padding: 12px 14px 14px; }
.user-delete .notice { line-height: 1.7; }
.user-delete form { margin: 0; }

/* --- PC: 一覧を表形式に --- */
@media (min-width: 900px) {
  .user-list {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    overflow: hidden;
  }

  /* 見出し行と各行で同じ列幅を使う（名前・メール／ロール／請求書・領収書／状態） */
  .user-table-head,
  .user-row {
    grid-template-columns: minmax(0, 2.6fr) minmax(96px, 1fr) minmax(128px, 1.2fr) minmax(88px, .7fr);
    grid-template-areas: none;
    column-gap: 16px;
    padding: 0 24px;
  }

  .user-table-head {
    display: grid;
    align-items: center;
    height: 40px;
    background: var(--color-surface-muted);
    border-bottom: 1px solid var(--color-border);
    font-size: 12px; font-weight: 700;
    color: var(--color-muted);
    white-space: nowrap;
  }

  .user-rows { gap: 0; }
  .user-rows > li + li { border-top: 1px solid var(--color-divider); }

  .user-row {
    align-items: center;
    min-height: 68px;
    padding-top: 12px; padding-bottom: 12px;
    border: none;
    border-radius: 0;
    background: transparent;
    font-size: 14px;
  }
  a.user-row:hover { background: var(--color-surface-muted); }
  a.user-row:focus-visible { outline-offset: -3px; }

  .user-main,
  .user-status { grid-area: auto; }
  .user-status { padding-top: 0; }

  /* スマホでまとめていた2項目を、PCではそれぞれ1列として並べる */
  .user-row-meta { display: contents; }
  .user-row-meta .user-cell { display: block; font-size: 14px; }
  .user-row-meta .user-cell + .user-cell::before { content: none; }
  /* PCは見出し行に「請求書・領収書」と出ているので、セル内の「請求書」は読み上げ用にだけ残す */
  .user-cell-label {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}

/* ============================================================
   23. アカウント設定（resources/views/account/edit.blade.php ／ 1行の入力欄: account/_kv-field.blade.php）
   3つのカード（あなたのアカウント／パスワードの変更／会社の設定＝管理者のみ）。どれも 11章の .kv-card
   （項目名を左・入力欄を右、下に横長の送信ボタン）。お知らせ・入力エラーは送ったカードの中に出す
   ============================================================ */
.account-page { max-width: 640px; margin-top: 12px; }
.account-card {
  margin: 0 0 16px;
  /* 保存・入力エラーで #account-password などへ戻ったとき、スマホの上部ヘッダーにカードの頭が隠れないように */
  scroll-margin-top: calc(var(--header-height) + env(safe-area-inset-top) + 12px);
}
.account-card .kv-label { width: 9em; white-space: nowrap; cursor: default; }
.account-card label.kv-label { cursor: pointer; }
/* 名前・パスワードは打ち込む欄なので左寄せ（黒板情報の一覧は右寄せのまま） */
.account-card .kv-input,
.account-card .kv-value { text-align: left; }
/* 表示だけの値（メール・ロール・会社）は、打ち込める欄より少し控えめな色に */
.account-card .kv-value { color: var(--color-text-sub); }
.account-card .kv-row:has(.kv-value):focus-within { background: transparent; }
.account-card .kv-card-notes .notice:last-child { margin-bottom: 0; }
.account-card .kv-card-notes .hint + .hint { margin-top: 4px; }
/* カードの外の補足（「パスワードを忘れた場合は…」） */
.account-card-footnote { margin: -8px 0 20px; padding: 0 4px; line-height: 1.6; }

@media (min-width: 900px) {
  .account-card { scroll-margin-top: 24px; }
}

/* ============================================================
   24. 運営者画面（レイアウト: resources/views/layouts/operator.blade.php ／ 画面: resources/views/operator/）
   お客さんの画面と同じ部品（2章のサイドメニュー・上部ヘッダー・下部タブ、11章の .kv-card、20〜22章の一覧・フォーム）を使い、
   運営者画面だけの部品をここに置く。
   - お客さんの画面と見分けるための「運営者画面」の目印（.operator-mark）
   - 会社の一覧（PC=表形式／スマホ=カード。20章の現場一覧と同じ作り）
   - 会社の詳細（PC=2列: 会社の情報／使用量 → 管理者アカウント → 契約状態）
   - 作成・再発行したパスワードを1回だけ見せるカード（.issued-card）
   - 運営者の一覧（22章の .user-* に「操作」の列を足す）
   ============================================================ */

/* --- 「運営者画面」の目印（ロゴの横・スマホ上部ヘッダー・ログイン画面） --- */
.operator-mark {
  display: inline-flex; align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: var(--radius-pill);
  background: #16245c; /* ロゴの紺 */
  color: #fff;
  font-size: 11px; font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
}
.operator-mark.is-appbar { flex-shrink: 0; margin-right: 2px; }
.operator-brand-text { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.auth-brand-lead .operator-mark { height: 22px; padding: 0 10px; font-size: 12px; }

/* --- 会社の一覧（スマホ: カード） --- */
.company-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }

.company-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "main status"
    "meta meta"
    "second second";
  column-gap: 12px;
  align-items: start;
  padding: 14px 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  color: var(--color-text);
  -webkit-tap-highlight-color: transparent;
  transition: border-color .15s, background-color .15s;
}
.company-row:hover { text-decoration: none; color: var(--color-text); border-color: var(--color-border-strong); background: var(--color-surface-muted); }
.company-row:active { background: var(--color-bg); }
.company-row:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; }

.company-main { grid-area: main; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.company-row-name { font-size: 15px; font-weight: 700; line-height: 1.45; word-break: break-word; }
.company-row-sub { font-size: 12px; color: var(--color-muted); word-break: break-word; }
.company-status { grid-area: status; display: flex; padding-top: 1px; }

/* 人数・現場と写真・容量（1行目）と、月額・最終利用（2行目）: スマホでは「・」で区切って1行ずつ */
.company-row-meta {
  grid-area: meta;
  display: block;
  margin-top: 6px;
  font-size: 13px; line-height: 1.5;
  color: var(--color-text-sub);
  font-variant-numeric: tabular-nums;
}
.company-row-meta.is-second { grid-area: second; margin-top: 2px; color: var(--color-muted); }
.company-row-meta .company-cell { display: inline; }
.company-row-meta .company-cell + .company-cell::before { content: "・"; margin: 0 4px; color: var(--color-subtle); }
.company-cell-label { color: var(--color-subtle); margin-right: 4px; }
.company-cell-note { font-size: 12px; color: var(--color-muted); }
.company-cell.is-empty { color: var(--color-subtle); }

/* 停止中の会社は、名前を薄くする（バッジは赤の「停止中」） */
.company-row.is-suspended .company-row-name,
.company-row.is-suspended .company-row-meta { color: var(--color-subtle); }

.company-table-head { display: none; }
.company-list-hint { margin-top: 16px; line-height: 1.6; }

/* --- 容量（一覧の「容量」の欄・詳細の「ファイル容量」・上限に近い会社のお知らせ） --- */
.company-storage-alert { line-height: 1.7; margin-bottom: 16px; }
.company-storage-cell .badge.company-storage-badge,
.company-storage-value .badge.company-storage-badge {
  height: 20px; padding: 0 8px;
  margin-left: 6px;
  font-size: 11px;
  vertical-align: 1px;
}
.company-storage-percent { margin-left: 4px; }
.company-storage-line { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0; }

/* 容量の棒グラフ（<meter>）。80%未満=青、80%以上=黄色、100%=赤（low=80 high=100 optimum=0 の指定で切り替わる） */
.storage-meter {
  display: block;
  width: 100%;
  height: 8px;
  margin-top: 6px;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--color-divider);
  -webkit-appearance: none;
  appearance: none;
}
.storage-meter::-webkit-meter-bar { height: 8px; border: none; border-radius: var(--radius-pill); background: var(--color-divider); }
.storage-meter::-webkit-meter-optimum-value { border-radius: var(--radius-pill); background: var(--color-primary); }
.storage-meter::-webkit-meter-suboptimum-value { border-radius: var(--radius-pill); background: #f79009; }
.storage-meter::-webkit-meter-even-less-good-value { border-radius: var(--radius-pill); background: var(--color-danger); }
.storage-meter::-moz-meter-bar { border-radius: var(--radius-pill); background: var(--color-primary); }
.storage-meter:-moz-meter-sub-optimum::-moz-meter-bar { background: #f79009; }
.storage-meter:-moz-meter-sub-sub-optimum::-moz-meter-bar { background: var(--color-danger); }

/* --- 会社の詳細 --- */
.company-head .badge { flex-shrink: 0; }
.company-storage-notice { line-height: 1.7; }
.company-suspended-notice { line-height: 1.7; }

.operator-detail-columns { display: flex; flex-direction: column; gap: 16px; }
.operator-detail-main,
.operator-detail-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.kv-card.company-kv { margin: 0; }
.company-kv .kv-label { width: 7.5em; }
.company-kv form { margin: 0; }
/* 値の横・下に出す小さな補足（「（ほかに無効 1人）」「10/12 18:30 時点」） */
.kv-value-note { font-size: 12px; color: var(--color-muted); }
.kv-value .kv-value-note.is-block { display: block; margin-top: 2px; }
.kv-label.label-with-badge { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.kv-label.label-with-badge .badge { height: 20px; padding: 0 8px; font-size: 11px; }

/* ページ内リンク（#usage・#admins・#status）で戻ったとき、スマホの上部ヘッダーに見出しが隠れないように */
.operator-anchor { scroll-margin-top: calc(var(--header-height) + env(safe-area-inset-top) + 12px); }

/* 管理者アカウントの一覧（1人1枚のカード。下に「パスワードを再発行」の折りたたみ） */
.operator-admin-rows { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.operator-admin-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "main status"
    "reset reset";
  column-gap: 12px;
  padding: 14px 16px 6px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
}
.operator-admin-main { grid-area: main; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.operator-admin-name { font-size: 15px; font-weight: 700; line-height: 1.45; word-break: break-word; }
.operator-admin-email { font-size: 13px; color: var(--color-text-sub); overflow-wrap: anywhere; }
.operator-admin-meta { font-size: 12px; color: var(--color-muted); }
.operator-admin-status { grid-area: status; display: flex; padding-top: 1px; }
.operator-admin-row.is-inactive .operator-admin-name,
.operator-admin-row.is-inactive .operator-admin-email { color: var(--color-subtle); }

.operator-admin-reset { grid-area: reset; margin: 10px -16px 0; border-top: 1px solid var(--color-divider); }
.operator-admin-reset > .disclosure-summary { min-height: 44px; font-size: 14px; border-radius: 0 0 var(--radius-card) var(--radius-card); }
.operator-admin-reset[open] > .disclosure-summary { border-radius: 0; }
.operator-admin-reset .disclosure-body { padding: 4px 16px 10px; }
.operator-admin-reset .notice { line-height: 1.7; }
.operator-admin-reset form { margin: 0; }

.operator-admin-create { margin-bottom: 8px; }
.operator-admin-create form { margin: 0; }

/* 契約状態: 3つの切り替えボタン。「停止中」を選んでいる間だけ確認のチェックを出す */
.segmented.choice-segmented.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.company-status-form { margin: 0 0 8px; }
.company-status-form .field-choice { margin-bottom: 12px; }
.company-status-help {
  margin: 0 0 14px;
  padding-left: 1.2em;
  font-size: 13px; line-height: 1.7;
  color: var(--color-text-sub);
}
.company-suspend-confirm { display: none; margin-bottom: 14px; }
.company-status-form:has(input[name=status][value=suspended]:checked) .company-suspend-confirm { display: block; }
/* 入力エラーで戻ったときは、選んでいる状態に関係なく出す（理由が読めるように） */
.company-status-form.is-invalid .company-suspend-confirm:has(.field-error) { display: block; }
.option-card.is-invalid { border-color: var(--color-danger); background: var(--color-danger-soft); }

/* --- 作成・再発行したパスワードを1回だけ見せるカード --- */
.issued-card {
  margin: 0 0 20px;
  padding: 16px;
  background: var(--color-surface);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-card);
}
.issued-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.issued-card-title { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.4; color: var(--color-primary); }
.issued-card-lead { margin: 0 0 12px; font-size: 13px; line-height: 1.7; color: var(--color-text-sub); }
.issued-card-list { margin: 0 0 14px; border-top: 1px solid var(--color-divider); }
.issued-card-row {
  display: flex; align-items: center; gap: 12px;
  min-height: 44px;
  padding: 6px 0;
  border-bottom: 1px solid var(--color-divider);
}
.issued-card-row dt { width: 7.5em; flex-shrink: 0; font-size: 13px; color: var(--color-muted); }
.issued-card-row dd { margin: 0; flex: 1; min-width: 0; font-size: 15px; overflow-wrap: anywhere; }
.issued-card-password { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.issued-card-password code {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 20px; font-weight: 700;
  letter-spacing: .08em;
  color: var(--color-text);
  user-select: all;
}
.issued-card-message { margin-bottom: 0; }
.issued-card-message textarea {
  min-height: 0;
  font-size: 14px; line-height: 1.7;
  background: var(--color-surface-muted);
}
.issued-card-message .btn { margin-top: 8px; }

/* --- 運営者の一覧（22章の .user-* を使い、右に「操作」の列を足す） --- */
.operator-row {
  grid-template-areas:
    "main status"
    "meta meta"
    "action action";
}
.operator-row-action { grid-area: action; display: flex; align-items: center; margin-top: 10px; }
.operator-row-action form { margin: 0; }
.operator-row-action .hint { margin: 0; }

/* 運営者の追加フォーム（1列だけ） */
.operator-form-single { max-width: 640px; }
.operator-form-single .notice { line-height: 1.7; margin-bottom: 18px; }

/* --- PC --- */
@media (min-width: 900px) {
  .operator-mark.is-appbar { display: none; }

  /* 会社の一覧: 表形式（会社名／契約状態／人数／現場・写真／容量／月額／最終利用） */
  .company-list {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    overflow: hidden;
  }
  .company-table-head,
  .company-row {
    grid-template-columns:
      minmax(0, 2fr) 88px minmax(0, .7fr) minmax(0, 1.4fr) minmax(0, 1.5fr) minmax(0, .8fr) minmax(0, 1fr);
    grid-template-areas: none;
    column-gap: 14px;
    padding: 0 24px;
  }
  .company-table-head {
    display: grid;
    align-items: center;
    height: 40px;
    background: var(--color-surface-muted);
    border-bottom: 1px solid var(--color-border);
    font-size: 12px; font-weight: 700;
    color: var(--color-muted);
    white-space: nowrap;
  }
  .company-rows { gap: 0; }
  .company-rows > li + li { border-top: 1px solid var(--color-divider); }
  .company-row {
    align-items: center;
    min-height: 64px;
    padding-top: 10px; padding-bottom: 10px;
    border: none;
    border-radius: 0;
    background: transparent;
    font-size: 14px;
  }
  .company-row:hover { background: var(--color-surface-muted); }
  .company-row:focus-visible { outline-offset: -3px; }
  .company-main,
  .company-status { grid-area: auto; }
  .company-status { padding-top: 0; }

  .company-row-meta,
  .company-row-meta.is-second { display: contents; }
  .company-row-meta .company-cell { display: block; font-size: 14px; color: var(--color-text-sub); }
  .company-row-meta .company-cell.is-empty { color: var(--color-subtle); }
  .company-row-meta .company-cell + .company-cell::before { content: none; }
  .company-row.is-suspended .company-row-meta .company-cell { color: var(--color-subtle); }
  /* 容量の欄: 「85 GB／100 GB」の下に割合を左そろえで置く（幅が狭く、横に並べると折り返して位置がずれるため） */
  .company-row-meta .company-cell.company-storage-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
  .company-storage-cell .badge.company-storage-badge,
  .company-storage-cell .company-storage-percent { margin-left: 0; }
  /* PCは見出し行に項目名が出ているので、セル内の項目名は読み上げ用にだけ残す */
  .company-cell-label {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  /* 会社の詳細: 左に会社の情報、右に使用量 */
  .operator-detail-columns {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
  }
  .operator-anchor { scroll-margin-top: 24px; }

  .issued-card { padding: 20px 24px; }

  /* 運営者の一覧: 表形式（名前・メール／最終ログイン／状態／操作） */
  .operator-table-head,
  .operator-row {
    grid-template-columns: minmax(0, 2.4fr) minmax(140px, 1.2fr) minmax(88px, .6fr) minmax(180px, 1fr);
  }
  /* スマホ用の並び（上の .operator-row）は、22章のPCの指定より後にあるので、ここでもう一度外す */
  .operator-row { grid-template-areas: none; }
  .operator-row .user-row-meta { display: contents; }
  .operator-table-head span:last-child { text-align: right; }
  .operator-row-action { grid-area: auto; margin-top: 0; justify-content: flex-end; }
}

/* ============================================================
   25. 図面のピン（写真2枚以上のピン・ピンの一覧・ピンの移動・写真の編集の「ピン」）
   ============================================================ */
/* 図面とピンの一覧を重ねる台（.drawing-wrap は overflow: hidden なので、一覧はその外＝ここに置く） */
.drawing-stage { position: relative; }

/* 写真2枚以上のピンはボタン（押すと一覧）。見た目は 9章の .pin と同じ青丸 */
button.pin { padding: 0; font-family: inherit; appearance: none; }
/* 青丸の右上の白い小丸 = 写真の枚数 */
.pin-count {
  position: absolute; top: -10px; right: -12px;
  min-width: 17px; height: 17px;
  padding: 0 4px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--color-primary);
  background: #fff;
  color: var(--color-primary);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; line-height: 1;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .2);
  pointer-events: none;
}

/* 未整理の写真を選んでいる間は、ピンを押すと「そのピンに追加」になることを見せる */
.drawing-wrap.is-assigning .pin { box-shadow: 0 0 0 3px var(--color-focus-ring), 0 2px 6px rgba(16, 24, 40, .25); }

/* ピンの移動中: 図面を点線で囲む。動かすピンは薄く、仮のピンは点線の縁で出す */
.drawing-wrap.is-moving { outline: 2px dashed var(--color-primary); outline-offset: 2px; cursor: crosshair; }
.drawing-wrap.is-moving .pin { cursor: crosshair; }
.drawing-wrap.is-moving .pin:not(.is-ghost):not(.is-move-source) { opacity: .55; }
.pin.is-move-source { opacity: .45; box-shadow: none; }
.pin.is-ghost {
  z-index: 3;
  background: var(--color-primary-dark);
  pointer-events: none;
  animation: pin-ghost-pulse 1.2s ease-in-out infinite;
}
.pin.is-ghost[hidden] { display: none; }
@keyframes pin-ghost-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37, 73, 201, .45); }
  50% { box-shadow: 0 0 0 8px rgba(37, 73, 201, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .pin.is-ghost { animation: none; }
}

/* 移動中の案内（画面の上）と「ここに移動」（画面の下）。スマホは下部タブの上に出す */
.pin-move-banner {
  position: fixed; z-index: 45;
  top: calc(env(safe-area-inset-top) + 8px); left: 12px; right: 12px;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px 10px 14px;
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-popover);
  font-size: 14px; font-weight: 700; line-height: 1.5;
}
.pin-move-banner[hidden] { display: none; }
.pin-move-banner-text { flex: 1; min-width: 0; }
.pin-move-banner .btn.secondary { flex-shrink: 0; }
.pin-move-bar {
  position: fixed; z-index: 45;
  left: 12px; right: 12px;
  bottom: calc(env(safe-area-inset-bottom) + 12px);
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  padding: 10px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-popover);
}
.pin-move-bar[hidden] { display: none; }
/* 下部タブのある画面では、その上に出す */
body.has-tabbar .pin-move-bar { bottom: calc(var(--tabbar-height) + env(safe-area-inset-bottom) + 10px); }

/* 写真2枚以上のピンの一覧。スマホ: 画面の下から出す */
.pin-sheet-backdrop {
  position: fixed; inset: 0; z-index: 41;
  background: rgba(16, 24, 40, .35);
}
.pin-sheet-backdrop[hidden] { display: none; }
.pin-sheet {
  position: fixed; z-index: 42;
  left: 0; right: 0; bottom: 0;
  max-height: 72vh;
  overflow-y: auto;
  padding: 14px 16px calc(env(safe-area-inset-bottom) + 16px);
  background: var(--color-surface);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  box-shadow: var(--shadow-popover);
}
.pin-sheet[hidden] { display: none; }
.pin-sheet-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.pin-sheet-title { flex: 1; margin: 0; font-size: 16px; font-weight: 700; line-height: 1.4; }
.pin-sheet-count { margin-left: 6px; font-size: 13px; font-weight: 400; color: var(--color-muted); }
.pin-sheet-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  margin: -6px -8px -6px 0;
  border: none; border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-sub);
  cursor: pointer;
}
.pin-sheet-close:hover { background: var(--color-bg); color: var(--color-text); }
.pin-sheet-close:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: -3px; }
.pin-sheet-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 8px;
  margin: 0; padding: 0; list-style: none;
}
.pin-sheet-grid li { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pin-sheet-photo { display: block; border-radius: var(--radius-sm); }
.pin-sheet-photo img {
  width: 100%; aspect-ratio: 1; object-fit: cover; display: block;
  border-radius: var(--radius-sm);
  background: var(--color-bg);
}
.pin-sheet-photo:hover { opacity: .85; }
.pin-sheet-photo:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; }
.pin-sheet-caption {
  font-size: 11px; color: var(--color-muted); line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pin-sheet-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.pin-sheet-actions .btn { width: 100%; }
.pin-sheet .upload-blocked-notice { margin: 10px 0 0; }

/* 「このピンに写真を追加」の進み具合・失敗の理由 */
.pin-add-status {
  margin: 12px 0 0;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--color-primary-soft);
  color: var(--color-text-sub);
  font-size: 13px; line-height: 1.5;
}
.pin-add-status[hidden] { display: none; }
.pin-add-status.is-danger { background: var(--color-danger-soft); color: var(--color-danger-dark); }

/* 写真の編集の「ピン」 */
.pin-card .kv-value { text-align: left; }
.pin-card .pin-add-status { margin: 10px 14px 0; }
.pin-card-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 14px 14px; }
.pin-card-actions form { margin: 0; }
.pin-card-note { margin: 0; padding: 12px 14px 14px; }
.pin-card .upload-blocked-notice { margin: 0 14px 14px; }

@media (min-width: 900px) {
  /* PC: 一覧はピンの横に出す（位置は現場詳細の JS が left / top で決める） */
  .pin-sheet.is-docked {
    position: absolute; z-index: 30;
    left: auto; right: auto; bottom: auto;
    width: 340px;
    max-height: none;
    padding: 14px 16px 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
  }
  .pin-move-banner {
    top: 16px;
    left: calc(var(--sidebar-width) + 24px); right: auto;
    max-width: 560px;
  }
  .pin-move-bar,
  body.has-tabbar .pin-move-bar {
    bottom: 24px;
    left: calc(var(--sidebar-width) + (100% - var(--sidebar-width)) / 2); right: auto;
    width: 340px;
    transform: translateX(-50%);
  }
}

/* ============================================================
   26. PDFの図面（ページを選んで図面にする・元のPDF）
   ============================================================ */
/* ページ選び（図面を追加のフォームの中・PDFのままの図面のカードの中） */
.pdf-pages {
  margin: 4px 0 16px;
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface-muted);
}
.pdf-pages-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.pdf-pages-title { margin: 0; font-weight: 700; }
.pdf-pages-toggle { display: flex; gap: 6px; }
.pdf-pages-note { margin: 8px 0 0; }
.pdf-pages-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.pdf-page {
  position: relative;
  display: flex; flex-direction: column; gap: 4px;
  padding: 6px;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  cursor: pointer;
}
.pdf-page:has(input:checked) { border-color: var(--color-primary); background: var(--color-primary-soft); }
.pdf-page:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--color-focus-ring); }
.pdf-page input {
  position: absolute; top: 10px; left: 10px; z-index: 1;
  width: 22px; height: 22px; margin: 0;
  accent-color: var(--color-primary);
}
.pdf-page-thumb {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 4px;
  background: #fff;
}
.pdf-page-thumb canvas { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; }
.pdf-page-loading { font-size: .8rem; color: var(--color-subtle); }
.pdf-page-caption { font-size: .85rem; text-align: center; color: var(--color-text-sub); }
.pdf-pages-count { margin: 12px 0 0; font-weight: 700; }
.pdf-pages-count.is-error,
.pdf-pages-status.is-error { color: var(--color-danger-dark); }
.pdf-pages-status { margin: 8px 0 0; }

/* PDFのままの図面の「ピンを立てられるようにする」 */
.pdf-convert { margin-top: 12px; }
.pdf-convert-panel .pdf-pages { margin-bottom: 12px; }
.pdf-convert-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pdf-convert-actions .btn { width: 100%; }

/* PDFから作った図面の「元のPDF」 */
.drawing-source-pdf {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
  margin-top: 10px;
  font-size: .85rem;
  color: var(--color-muted);
}
.drawing-source-pdf-label { margin-right: auto; }

@media (min-width: 900px) {
  .pdf-pages-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .pdf-convert-actions { display: flex; justify-content: flex-end; }
  .pdf-convert-actions .btn { width: auto; min-width: 140px; }
}