/* ========================================== */
/* 全体の崩れ防止（幅の計算を安定させる）       */
/* ========================================== */

/* 全要素に box-sizing を適用する */
* { /* 全要素 */
  box-sizing: border-box; /* padding/border を width に含める */
} /* ここまで */


/* ========================================== */
/* 変数（色などをまとめて管理できる）           */
/* ========================================== */

:root { /* 変数定義開始 */
  --primary-color: #4a90e2; /* メインの青 */
  --bg-color: #f5f7fa; /* 背景の薄いグレー */
  --card-bg: #ffffff; /* カードの白 */
  --text-color: #222; /* 文字（濃い） */
  --muted-color: #666; /* 補助文字（薄い） */
  --border-color: #e6e8ee; /* 枠線（薄い） */
  --border-radius: 12px; /* 角丸 */
  --danger-color: #dc3545; /* 警告（赤） */
  --pdf-color: #6f42c1; /* PDFボタン（紫） */
} /* 変数定義終了 */


/* ========================================== */
/* html / body（ページ全体）                   */
/* ========================================== */

html { /* html */
  font-size: 16px; /* 基本フォントサイズ */
} /* html終わり */

body { /* body */
  font-family: "Helvetica Neue", Arial, sans-serif; /* フォント */
  background-color: var(--bg-color); /* 背景色 */
  color: var(--text-color); /* 文字色 */
  margin: 0; /* 余白を消す */
  padding: clamp(12px, 2vw, 28px); /* 画面幅に応じた余白 */
  line-height: 1.6; /* 行間 */
} /* body終わり */


/* ========================================== */
/* コンテナ（白いカード）                       */
/* ========================================== */

.container { /* メイン枠 */
  width: min(1200px, 100%); /* 最大1200px、狭い時は100% */
  margin: 0 auto; /* 中央寄せ */
  background: var(--card-bg); /* 背景 */
  padding: clamp(14px, 2vw, 28px); /* 内側余白 */
  border-radius: var(--border-radius); /* 角丸 */
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.08); /* 影 */
  border: 1px solid var(--border-color); /* 枠線 */
} /* container終わり */


/* ========================================== */
/* タイトル（h1）                               */
/* ========================================== */

h1 { /* h1 */
  text-align: center; /* 中央揃え */
  color: var(--primary-color); /* 青 */
  margin: 4px 0 18px 0; /* 上下余白 */
  font-size: clamp(1.5rem, 2.2vw, 2.1rem); /* 可変サイズ */
  letter-spacing: 0.02em; /* 文字間隔 */
} /* h1終わり */


/* ========================================== */
/* 補足説明文                                   */
/* ========================================== */

.help-text { /* 説明 */
  font-size: 0.95rem; /* 少し小さめ */
  color: var(--muted-color); /* 薄い色 */
  margin: 0 0 12px 0; /* 下余白 */
} /* help-text終わり */


/* ========================================== */
/* タブ（管理 / 注文 / 確認）                  */
/* ========================================== */

.tabs { /* タブの並び */
  display: grid; /* グリッド */
  grid-template-columns: repeat(3, 1fr); /* 3列均等 */
  gap: 8px; /* 間隔 */
  margin-bottom: 18px; /* 下余白 */
} /* tabs終わり */

.tab-btn { /* タブボタン */
  padding: 12px 10px; /* 内側余白 */
  border: 1px solid var(--border-color); /* 枠線 */
  background: #fff; /* 背景 */
  cursor: pointer; /* カーソル */
  font-weight: 800; /* 太字 */
  font-size: clamp(0.88rem, 1.2vw, 1.05rem); /* 文字サイズ可変 */
  line-height: 1.15; /* 行高さ */
  white-space: nowrap; /* 折り返し禁止 */
  overflow: hidden; /* はみ出し隠す */
  text-overflow: ellipsis; /* はみ出しを…に */
  color: #666; /* 文字色 */
  border-radius: 10px; /* 角丸 */
  transition: 0.2s; /* 変化をなめらかに */
} /* tab-btn終わり */

.tab-btn.active { /* 選択中 */
  color: var(--primary-color); /* 青文字 */
  border-color: rgba(74, 144, 226, 0.35); /* 枠線うっすら青 */
  box-shadow: 0 6px 16px rgba(74, 144, 226, 0.12); /* 影 */
} /* active終わり */


/* ==========================================
   ✅ 注文入力タブを無効化したときの見た目
========================================== */
.tab-btn:disabled { /* disabled状態 */
  opacity: 0.45; /* 薄く表示 */
  cursor: not-allowed; /* 禁止カーソル */
  background: #f3f3f3; /* 背景薄グレー */
} /* disabled終わり */


/* ========================================== */
/* パネル切替                                  */
/* ========================================== */

.panel { /* パネル */
  display: none; /* 初期は非表示 */
} /* panel終わり */

.panel.active { /* 表示中パネル */
  display: block; /* 表示 */
} /* panel active終わり */


/* ========================================== */
/* セクションタイトル（指定：1.5rem / 太字）   */
/* ========================================== */

.section-title { /* セクション見出し */
  margin-top: 22px; /* 上余白 */
  margin-bottom: 10px; /* 下余白 */
  font-size: 1.5rem; /* 指定：1.5rem */
  font-weight: 800; /* 指定：太字 */
  border-left: 5px solid var(--primary-color); /* 左ライン */
  padding-left: 10px; /* 左余白 */
} /* section-title終わり */

.danger-title { /* 危険系 */
  border-left-color: var(--danger-color); /* 左ライン赤 */
  color: var(--danger-color); /* 文字赤 */
} /* danger-title終わり */


/* ========================================== */
/* 管理画面：依頼者追加フォーム                */
/* ========================================== */

.form-group-admin { /* 入力 + ボタン */
  display: grid; /* グリッド */
  grid-template-columns: 1fr auto; /* 入力：可変 / ボタン：固定 */
  gap: 10px; /* 間隔 */
  align-items: center; /* 縦中央 */
  margin-bottom: 10px; /* 下余白 */
} /* form-group-admin終わり */


/* ========================================== */
/* 管理画面：備品追加フォーム                  */
/* ========================================== */

.item-add-area { /* 備品フォーム枠 */
  background: #fafbfe; /* 背景 */
  padding: 14px; /* 内側余白 */
  border-radius: 12px; /* 角丸 */
  border: 1px solid var(--border-color); /* 枠線 */
} /* item-add-area終わり */

.checkbox-row { /* チェックボックス行 */
  display: flex; /* 横並び */
  gap: 8px; /* 間隔 */
  align-items: center; /* 縦中央 */
  font-size: 0.95rem; /* 文字サイズ */
  margin: 8px 0 10px 0; /* 余白 */
} /* checkbox-row終わり */

.mini-label { /* 小ラベル */
  font-size: 0.85rem; /* 小さめ */
  margin: 8px 0 6px 0; /* 余白 */
  color: var(--muted-color); /* 薄い色 */
} /* mini-label終わり */

.editing-hint { /* 編集中ヒント */
  margin-top: 10px; /* 上余白 */
  font-size: 0.9rem; /* サイズ */
  color: #0b5394; /* 文字色 */
  background: #e8f0fe; /* 背景 */
  padding: 8px 10px; /* 内側余白 */
  border-radius: 10px; /* 角丸 */
} /* editing-hint終わり */


/* ========================================== */
/* 管理画面：一覧（依頼者/備品）               */
/* ========================================== */

.admin-list { /* ul */
  list-style: none; /* 点なし */
  padding: 0; /* 余白なし */
  margin: 8px 0 0 0; /* 余白 */
} /* admin-list終わり */

.admin-list li { /* 1行 */
  background: #fff; /* 背景 */
  border: 1px solid var(--border-color); /* 枠線 */
  border-radius: 12px; /* 角丸 */
  padding: 12px; /* 内側余白 */
  margin-bottom: 10px; /* 下余白 */
  display: grid; /* グリッド */
  grid-template-columns: 1fr auto; /* 左：情報 / 右：ボタン */
  gap: 10px; /* 間隔 */
  align-items: center; /* 縦中央 */
} /* admin-list li終わり */

.row-left { /* 左側 */
  display: flex; /* flex */
  flex-direction: column; /* 縦 */
  gap: 4px; /* 間隔 */
} /* row-left終わり */

.row-title { /* タイトル */
  font-weight: 800; /* 太字 */
  font-size: 1.02rem; /* サイズ */
} /* row-title終わり */

.row-meta { /* 補足 */
  font-size: 0.92rem; /* 小さめ */
  color: var(--muted-color); /* 薄い */
  line-height: 1.45; /* 行間 */
} /* row-meta終わり */

.row-actions { /* 右側ボタン */
  display: flex; /* 横並び */
  gap: 8px; /* 間隔 */
  flex-wrap: wrap; /* 折り返し */
  justify-content: flex-end; /* 右寄せ */
} /* row-actions終わり */


/* ========================================== */
/* 注文入力：備品行                            */
/* ========================================== */

.form-group { /* 備品行 */
  background: #fff; /* 背景 */
  border: 1px solid var(--border-color); /* 枠線 */
  border-radius: 12px; /* 角丸 */
  padding: 12px; /* 内側余白 */
  margin-bottom: 12px; /* 下余白 */
  display: grid; /* グリッド */
  grid-template-columns: 1fr 120px; /* 左：情報 / 右：数量 */
  gap: 12px; /* 間隔 */
  align-items: start; /* 上揃え */
} /* form-group終わり */

.item-name { /* 備品名 */
  font-weight: 800; /* 太字 */
  display: block; /* ブロック */
  font-size: 1.05rem; /* サイズ */
  margin-bottom: 2px; /* 下余白 */
} /* item-name終わり */

.item-desc { /* 説明 */
  font-size: 0.9rem; /* サイズ */
  color: var(--muted-color); /* 薄い */
  margin-bottom: 6px; /* 下余白 */
} /* item-desc終わり */

.item-requester-display { /* 依頼者タグ */
  font-size: 0.9rem; /* サイズ */
  color: var(--primary-color); /* 文字青 */
  background: #eef6ff; /* 背景薄青 */
  padding: 4px 8px; /* 内側余白 */
  border-radius: 8px; /* 角丸 */
  display: inline-block; /* タグ風 */
} /* requester-display終わり */

.item-controls { /* 数量欄 */
  display: flex; /* flex */
  justify-content: flex-end; /* 右寄せ */
} /* item-controls終わり */


/* ========================================== */
/* 入力系（テキスト/数値/セレクト/テキストエリア） */
/* ========================================== */

input[type="number"] { /* 数量入力 */
  width: 100%; /* 全幅 */
  padding: 10px; /* 内側余白 */
  font-size: 1.15rem; /* 大きめ */
  text-align: right; /* 右寄せ */
  border: 1px solid #cfd6e4; /* 枠線 */
  border-radius: 10px; /* 角丸 */
  background: #fff; /* 背景 */
} /* number終わり */

input[type="text"], textarea, select { /* テキスト/テキストエリア/セレクト */
  width: 100%; /* 全幅 */
  padding: 10px; /* 内側余白 */
  border: 1px solid #cfd6e4; /* 枠線 */
  border-radius: 10px; /* 角丸 */
  background: #fff; /* 背景 */
  font-size: 1rem; /* サイズ */
} /* text/textarea/select終わり */

textarea { /* テキストエリア */
  height: 110px; /* 高さ */
  resize: vertical; /* 縦だけ伸縮 */
} /* textarea終わり */


/* ========================================== */
/* 品目別備考                                 */
/* ========================================== */

.item-note-wrap { /* 囲い */
  grid-column: 1 / -1; /* 横幅を全部使う */
  margin-top: 6px; /* 上余白 */
} /* item-note-wrap終わり */

.item-note-label { /* ラベル */
  font-size: 0.9rem; /* サイズ */
  color: var(--muted-color); /* 薄い */
  margin-bottom: 6px; /* 下余白 */
} /* item-note-label終わり */

.item-note-textarea { /* 品目別備考入力 */
  width: 100%; /* 全幅 */
  height: 90px; /* 高さ */
  resize: vertical; /* 縦だけ */
} /* item-note-textarea終わり */


/* ========================================== */
/* ボタン共通                                 */
/* ========================================== */

.btn { /* ボタン */
  width: 100%; /* 全幅 */
  padding: 12px 12px; /* 内側余白 */
  background-color: var(--primary-color); /* 背景色 */
  color: #fff; /* 文字色 */
  border: none; /* 枠線なし */
  border-radius: 12px; /* 角丸 */
  font-size: 1rem; /* サイズ */
  font-weight: 800; /* 太字 */
  cursor: pointer; /* カーソル */
  transition: 0.2s; /* なめらか */
} /* btn終わり */

.btn:hover { /* ホバー */
  opacity: 0.92; /* 少し薄く */
} /* hover終わり */


/* ========================================== */
/* ✅ .btn を disabled にした時の見た目         */
/* ========================================== */

.btn:disabled { /* disabled状態のボタン開始 */
  opacity: 0.55; /* 薄くする */
  cursor: not-allowed; /* 禁止カーソル */
} /* disabled状態のボタン終わり */

.btn:disabled:hover { /* disabled状態でホバーした時開始 */
  opacity: 0.55; /* hoverで変化しない */
} /* disabled状態でホバーした時終わり */


.btn-add { /* 追加ボタン */
  background-color: #28a745; /* 緑 */
} /* btn-add終わり */

.btn-danger { /* 危険ボタン */
  background-color: var(--danger-color); /* 赤 */
} /* btn-danger終わり */

.btn-secondary { /* サブボタン */
  background-color: #808080; /* deeppink */
} /* btn-secondary終わり */

.btn-secondary-pdf { /* pdfボタン */
  background-color: #ff1493; /* deeppink */
} /* btn-secondary終わり */

.btn-pdf { /* PDFボタン */
  background-color: var(--pdf-color); /* 紫 */
} /* btn-pdf終わり */

.btn-small { /* 小ボタン */
  width: auto; /* 自動幅 */
  padding: 8px 10px; /* 内側余白 */
  font-size: 0.92rem; /* 小さめ */
  border-radius: 10px; /* 角丸 */
} /* btn-small終わり */


/* ========================================== */
/* 警告ボックス                               */
/* ========================================== */

.warning-box { /* 警告 */
  background: #fff3cd; /* 背景（薄い黄色） */
  color: #856404; /* 文字（茶色） */
  padding: 10px; /* 内側余白 */
  border-radius: 10px; /* 角丸 */
  margin-bottom: 15px; /* 下余白 */
  font-size: 0.95rem; /* サイズ */
} /* warning-box終わり */


/* ========================================== */
/* 注文確認リスト                              */
/* ========================================== */

.order-list { /* ul */
  list-style: none; /* 点なし */
  padding: 0; /* 余白なし */
  margin: 10px 0 0 0; /* 余白 */
} /* order-list終わり */

.order-list li { /* 1行 */
  background: #fff; /* 背景 */
  border: 1px solid var(--border-color); /* 枠線 */
  border-radius: 12px; /* 角丸 */
  padding: 12px; /* 内側余白 */
  margin-bottom: 10px; /* 下余白 */
  display: grid; /* グリッド */
  grid-template-columns: 1fr 80px; /* 左：詳細 / 右：数量 */
  gap: 10px; /* 間隔 */
  align-items: center; /* 縦中央 */
} /* order-list li終わり */

.order-details { /* 左側 */
  display: flex; /* flex */
  flex-direction: column; /* 縦 */
  gap: 6px; /* 間隔 */
} /* order-details終わり */

.empty-msg { /* 空メッセージ */
  text-align: center; /* 中央 */
  color: #777; /* 薄い */
} /* empty-msg終わり */

.item-note-display { /* 確認画面の品目別備考表示 */
  font-size: 0.92rem; /* サイズ */
  color: #333; /* 文字 */
  background: #fbfbff; /* 背景 */
  border: 1px solid var(--border-color); /* 枠線 */
  padding: 8px 10px; /* 内側余白 */
  border-radius: 10px; /* 角丸 */
} /* item-note-display終わり */


/* ========================================== */
/* 全体備考の表示ボックス                      */
/* ========================================== */

.remark-box { /* 全体備考ボックス */
  margin: 14px 0; /* 余白 */
  padding: 12px; /* 内側余白 */
  background: #fff3cd; /* 背景 */
  border-radius: 12px; /* 角丸 */
  border: 1px solid #ffe19a; /* 枠線 */
} /* remark-box終わり */

.pre-wrap { /* 改行保持 */
  white-space: pre-wrap; /* 改行を保持して表示 */
} /* pre-wrap終わり */


/* ========================================== */
/* PDFエリア                                   */
/* ========================================== */

.pdf-area { /* PDF枠 */
  margin-top: 16px; /* 上余白 */
  padding: 14px; /* 内側余白 */
  background: #f3ecff; /* 薄紫背景 */
  border: 1px solid rgba(111, 66, 193, 0.18); /* 枠線 */
  border-radius: 12px; /* 角丸 */
  text-align: center; /* 中央 */
} /* pdf-area終わり */

/* ========================================== */
/* ✅ 追加：PDF/印刷ボタンを同サイズで縦並び    */
/* ========================================== */

.pdf-actions { /* ボタン群開始 */
  display: grid; /* グリッド */
  gap: 10px; /* ボタン間の隙間 */
} /* ボタン群終わり */


/* ========================================== */
/* 補足文                                       */
/* ========================================== */

.note-text { /* 補足 */
  margin-top: 16px; /* 上余白 */
  font-size: 0.9rem; /* 小さめ */
  color: var(--muted-color); /* 薄い */
} /* note-text終わり */


/* ========================================== */
/* レスポンシブ（タブレット以下）               */
/* ========================================== */

@media (max-width: 900px) { /* 900px以下 */
  .tabs { /* タブ */
    grid-template-columns: 1fr; /* 縦並び */
  } /* tabs終わり */

  .form-group-admin { /* 管理入力 */
    grid-template-columns: 1fr; /* 縦並び */
  } /* form-group-admin終わり */

  .admin-list li { /* 一覧 */
    grid-template-columns: 1fr; /* 縦並び */
  } /* admin-list li終わり */

  .row-actions { /* ボタン */
    justify-content: flex-start; /* 左寄せ */
  } /* row-actions終わり */

  .form-group { /* 備品行 */
    grid-template-columns: 1fr; /* 縦並び */
  } /* form-group終わり */

  .item-controls { /* 数量 */
    justify-content: flex-start; /* 左寄せ */
  } /* item-controls終わり */

  .order-list li { /* 確認行 */
    grid-template-columns: 1fr; /* 縦並び */
  } /* order-list li終わり */
} /* media終わり */


/* ========================================== */
/* レスポンシブ（スマホ）                       */
/* ========================================== */

@media (max-width: 520px) { /* 520px以下 */
  body { /* body */
    padding: 10px; /* 余白を小さく */
  } /* body終わり */

  .container { /* 枠 */
    padding: 12px; /* 内側余白を小さく */
  } /* container終わり */

  .tab-btn { /* タブ */
    font-size: clamp(0.86rem, 3.6vw, 1rem); /* スマホで確実に収まる */
  } /* tab-btn終わり */
} /* media終わり */