/* style.css — LSS School OS Web PoC
   LSS Product Design System「Concrete Simplicity」に合わせた最小限のスタイル。
   白・ミント・薄いグレー・適切な余白。派手な透明感・グラデーションは使わない。
   Tkinter版 theme.py の正式カラーパレットと同じ値を使用する。 */

:root {
  --color-mint: #2FAE84;
  --color-mint-dark: #138A6A;
  --color-mint-tint: #EAF7F2;
  --color-bg: #F7FAF9;
  --color-card: #FFFFFF;
  --color-border: #E3EAE7;
  --color-text: #18201E;
  --color-muted: #68736F;
  --color-info: #2563C9;
  --color-warning: #E97912;
  --color-danger: #DC3B3B;
  --color-success: #159567;
  --sidebar-width: 260px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  font-size: 14px;
  line-height: 1.6;
}

.app-title { font-weight: 700; font-size: 16px; }

.poc-badge {
  display: inline-block;
  background: var(--color-mint-tint);
  color: var(--color-mint-dark);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
  margin-top: 6px;
}

.poc-badge-real {
  background: #fde2e2;
  color: #b3261e;
}

.container { max-width: 1180px; margin: 0 auto; padding: 20px; }

/* 資料請求一覧ページ（Phase W2.1）：1536px以上では一覧が画面幅を有効活用
   できるよう、このページのcontainerだけ広げる（サイドバー幅・ホーム画面の
   構成は変更しない）。 */
@media (min-width: 1536px) {
  .container.container-wide { max-width: 1440px; }
}

/* ==========================================================================
   共通レイアウト（左サイドバー＋メイン領域、Phase W2追加）
   ========================================================================== */

.sidebar-toggle-checkbox { display: none; }

.app-shell {
  display: flex;
  align-items: flex-start;
  min-height: 100vh;
}

.sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  background: var(--color-card);
  border-right: 1px solid var(--color-border);
  min-height: 100vh;
  padding: 20px 14px;
  position: sticky;
  top: 0;
  align-self: flex-start;
}

.sidebar-header a.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-text);
  text-decoration: none;
}

.logo-circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--color-mint);
  color: #fff;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.logo-text { font-weight: 700; font-size: 15px; }

.sidebar-caption {
  color: var(--color-muted);
  font-size: 11px;
  margin: 14px 2px 6px;
}

.sidebar-home-link {
  display: block;
  background: var(--color-mint-tint);
  color: var(--color-mint-dark);
  text-decoration: none;
  font-weight: 700;
  font-size: 13px;
  padding: 9px 10px;
  border-radius: 8px;
  margin-bottom: 16px;
}

.sidebar-group { margin-bottom: 18px; }

.sidebar-group-title {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--color-muted);
  font-size: 11px;
  font-weight: 700;
  margin: 0 2px 6px;
}
.sidebar-group-title .dot { color: var(--color-mint); font-size: 9px; }

.sidebar-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 8px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--color-text);
  text-decoration: none;
}
a.sidebar-item:hover { background: var(--color-mint-tint); }
.sidebar-item.is-disabled { color: var(--color-muted); }

.icon-chip {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 7px;
  background: var(--color-mint-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}

.badge-soon {
  margin-left: auto;
  background: var(--color-bg);
  color: var(--color-muted);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 10px;
  flex-shrink: 0;
}

.sidebar-backdrop { display: none; }

.main-area { flex: 1; min-width: 0; }

.mobile-header {
  display: none;
  align-items: center;
  gap: 12px;
  background: var(--color-card);
  border-bottom: 1px solid var(--color-border);
  padding: 12px 16px;
  position: sticky;
  top: 0;
  z-index: 5;
}

.hamburger-btn {
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
}
.hamburger-btn:hover { background: var(--color-mint-tint); }

/* ==========================================================================
   ホーム画面（Phase W2追加）
   ========================================================================== */

.home-header { margin-bottom: 18px; }
.home-header h1 { font-size: 22px; margin: 0 0 2px; }
.home-header .home-date { color: var(--color-muted); font-size: 13px; }

.home-body {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}
.home-center { flex: 1; min-width: 0; }
.home-right { width: 300px; flex-shrink: 0; }

.section-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 12px;
}
.section-heading .accent-bar {
  width: 4px;
  height: 16px;
  background: var(--color-mint);
  border-radius: 2px;
  display: inline-block;
}

/* --- 年間スケジュール（月ミニカレンダー） --- */
.calendar-grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.calendar-grid th {
  color: var(--color-muted);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 0;
  text-align: center;
}
.calendar-grid th.wd-sat { color: var(--color-info); }
.calendar-grid th.wd-sun { color: var(--color-danger); }
.calendar-grid td {
  text-align: center;
  vertical-align: top;
  padding: 4px 2px;
  height: 44px;
  font-size: 12px;
  border-radius: 6px;
}
.calendar-grid td.out-month { color: #C6CFCB; }
.calendar-grid td.is-today { background: var(--color-mint-tint); font-weight: 700; }
.calendar-grid .day-num { display: block; }
.calendar-grid .day-dots { display: block; margin-top: 2px; }
.calendar-grid .dot { color: var(--color-mint-dark); font-size: 9px; }
.calendar-grid td.has-events { cursor: pointer; }
.calendar-grid td.has-events:hover { background: var(--color-bg); }

.calendar-legend { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 0; font-size: 11px; color: var(--color-muted); }
.calendar-legend .legend-dot { color: var(--color-mint-dark); margin-right: 3px; }

.day-detail-panel {
  margin-top: 12px;
  padding: 12px 14px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 13px;
}
.day-detail-panel .title { font-weight: 700; margin-bottom: 6px; }
.day-detail-panel ul { margin: 0; padding-left: 18px; }
.day-detail-panel .empty-hint { color: var(--color-muted); }
.day-detail-breakdown { margin: 6px 0 10px; display: flex; flex-direction: column; gap: 4px; }
.day-detail-breakdown-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

/* --- 今日／今週／来週やること --- */
.task-cards-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 18px;
}
.task-card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 14px 16px;
  min-height: 190px;
}
.task-card ul { list-style: none; margin: 0; padding: 0; }
.task-card li {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 0;
  font-size: 13px;
  border-bottom: 1px solid var(--color-border);
}
.task-card li:last-child { border-bottom: none; }
.task-card .checkbox-glyph { color: var(--color-muted); }
.task-card .cat-badge {
  margin-left: auto;
  font-size: 10px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--color-mint-tint);
  color: var(--color-mint-dark);
  flex-shrink: 0;
}
.task-card .empty { color: var(--color-muted); font-size: 13px; }

/* --- エルス --- */
.els-card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.els-bubble {
  flex: 1;
  background: var(--color-mint-tint);
  border: 1px solid var(--color-mint);
  color: var(--color-mint-dark);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 12px;
}
.els-bubble .greeting { font-weight: 700; }
.els-image {
  width: 88px;
  height: 88px;
  object-fit: contain;
  flex-shrink: 0;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: #fff;
  padding: 4px;
}

/* --- メモ・引き継ぎ（読み取り専用） --- */
.memo-card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 14px 16px;
}
.memo-updated { color: var(--color-muted); font-size: 11px; margin-bottom: 8px; }
.memo-body {
  font-size: 13px;
  white-space: pre-wrap;
  line-height: 1.7;
}
.memo-readonly-hint {
  margin-top: 10px;
  font-size: 11px;
  color: var(--color-muted);
}

/* ==========================================================================
   資料請求一覧：上段3パネル（Phase W2追加）
   ========================================================================== */
.prospects-top-row {
  display: grid;
  grid-template-columns: 30% 45% 25%;
  gap: 14px;
  margin-bottom: 20px;
  align-items: stretch;
}
.top-panel {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 14px 16px;
}
.top-panel .panel-body { font-size: 12px; color: var(--color-muted); }
.top-panel .soon-note {
  margin-top: 8px;
  display: inline-block;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  color: var(--color-muted);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 11px;
}
.top-panel .stat-row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 12px; }
.top-panel .stat-row .num { font-weight: 700; color: var(--color-text); }

/* --- 保存状態表示（Phase W2.4最終仕上げ。ボタン自体は一覧操作バーへ移動済み・
   toolbar-group関連スタイルは.selection-toolbar側を参照） --- */
.save-status { font-weight: 700; padding: 1px 8px; border-radius: 999px; font-size: 11px; }
.save-status-idle, .save-status-success { color: var(--color-mint-dark); background: var(--color-mint-tint); }
.save-status-saving { color: var(--color-warning); background: #FFF3E4; }
.save-status-error { color: #B3261E; background: #FCE8E6; }
.top-panel .cal-count-row { display: flex; gap: 10px; font-size: 11px; color: var(--color-muted); margin-top: 8px; flex-wrap: wrap; }
.top-panel .cal-count-row b { color: var(--color-text); }
.top-panel .calendar-grid td { height: 30px; font-size: 11px; }

.card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 16px;
}

.summary-grid { display: flex; flex-wrap: wrap; gap: 12px; }

.summary-card {
  flex: 1 1 120px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 14px 16px;
  text-align: center;
}

.summary-card .label { color: var(--color-muted); font-size: 12px; }
.summary-card .value { font-size: 22px; font-weight: 700; margin-top: 4px; }

.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.filter-row input, .filter-row select {
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: 13px;
  background: var(--color-card);
  color: var(--color-text);
}

.btn {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 6px;
  border: none;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
}

.btn-main { background: var(--color-mint); color: #fff; }
.btn-main:hover { background: var(--color-mint-dark); }

.result-count { color: var(--color-muted); font-size: 13px; margin-bottom: 10px; }

.status-chip {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: var(--color-mint-tint);
  color: var(--color-mint-dark);
}
.status-chip.status-対象外, .status-chip.status-辞退, .status-chip.status-対応終了 {
  background: #F3F4F6; color: var(--color-muted);
}
.status-chip.status-入学 { background: #E6F5EC; color: var(--color-success); }
.status-chip.status-個別相談予約, .status-chip.status-来校済 {
  background: #FFF3E4; color: var(--color-warning);
}

/* --- 営業ステータス個別変更（Phase W2.4） --- */
.status-cell { overflow: visible; }
.status-cell .status-chip[role="button"] {
  cursor: pointer;
  border: 1px dashed transparent;
}
.status-cell .status-chip[role="button"]:hover {
  border-color: var(--color-mint);
}
.status-inline-select {
  font-size: 12px;
  padding: 2px 4px;
  border: 1px solid var(--color-mint);
  border-radius: 6px;
  background: var(--color-card);
  color: var(--color-text);
  max-width: 100%;
}
.bulk-busy-note {
  font-size: 12px;
  color: var(--color-mint-dark);
  margin-bottom: 8px;
}

/* --- PC: 表形式（Phase W2.2：実務で使えるテーブルへ調整） ---
   【overflow構造（重要）】
   .table-scroll が「唯一の」横スクロールコンテナ。overflow-x:auto に加えて
   overflow-y:auto と max-height を持たせているのは、329件规模の一覧では
   テーブル自体の高さが数千pxに達し、水平スクロールバーが画面のはるか下に
   埋もれて実質発見不可能になる（実機で「横スクロールできない」と報告された
   真因）ため。テーブル本体には min-width（実列数から算出した約2200px）を
   与え、外側のこのラッパーだけに overflow-x:auto を持たせる。ページ全体
   （body）ではなく、この要素の内部だけがスクロールする。
   table-layout:fixed は、JSによるcolgroup経由の列幅変更を安定させるため
   （autoレイアウトだと個別の<col>幅指定が内容量に引っ張られて効かない）。 */
.table-scroll {
  overflow-x: auto;
  overflow-y: auto;
  max-height: 640px;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  position: relative;
}
/* Windows Chrome等でスクロールバーの視認性を上げる（OS標準の挙動自体は壊さない） */
.table-scroll::-webkit-scrollbar { height: 14px; width: 14px; }
.table-scroll::-webkit-scrollbar-track { background: var(--color-bg); }
.table-scroll::-webkit-scrollbar-thumb {
  background: #B7C4BE; border-radius: 7px; border: 3px solid var(--color-bg);
}
.table-scroll::-webkit-scrollbar-thumb:hover { background: var(--color-mint); }

table.prospect-table {
  table-layout: fixed;
  width: max-content;
  min-width: 2200px;
  border-collapse: collapse;
  background: var(--color-card);
}
table.prospect-table th, table.prospect-table td {
  text-align: left;
  padding: 9px 10px;
  border-bottom: 1px solid var(--color-border);
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
}
table.prospect-table th {
  background: var(--color-bg); color: var(--color-muted); font-weight: 700;
  position: sticky; top: 0; z-index: 2;
}
table.prospect-table th .th-label { display: block; overflow: hidden; text-overflow: ellipsis; padding-right: 6px; }
table.prospect-table tr:last-child td { border-bottom: none; }
table.prospect-table a { color: var(--color-text); text-decoration: none; font-weight: 700; }
table.prospect-table a:hover { color: var(--color-mint-dark); }
table.prospect-table th.col-select, table.prospect-table td.col-select { text-align: center; }
table.prospect-table td.col-address { white-space: normal; }
.check-yes { color: var(--color-mint-dark); font-weight: 700; }
.check-no { color: var(--color-muted); }

/* --- 列境界線（Phase W2.3：Excelのように列の切れ目を分かりやすくする） --- */
table.prospect-table th, table.prospect-table td {
  border-right: 1px solid var(--color-border);
}
table.prospect-table th:last-child, table.prospect-table td:last-child { border-right: none; }
table.prospect-table tbody tr:hover td { background: var(--color-bg); }

/* --- 列幅ドラッグハンドル（Phase W2.2、W2.3で視認性を強化） --- */
.col-resize-handle {
  position: absolute;
  top: 0; right: -3px;
  width: 7px; height: 100%;
  cursor: col-resize;
  touch-action: none;
  z-index: 3;
}
.col-resize-handle:hover, .col-resize-handle.is-dragging {
  background: var(--color-mint);
  opacity: 0.6;
}

/* --- 一覧ツールバー（Phase W2.2） --- */
.checkbox-inline { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--color-text); }
.result-count-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.table-tools { display: flex; align-items: center; gap: 12px; }

/* --- 選択・一括変更ツールバー（Phase W2.3） --- */
.selection-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
  padding: 8px 12px;
  background: var(--color-mint-tint);
  border-radius: 8px;
}
/* 保存系／選択系／一括変更系を視覚的にグループ化する（Phase W2.4実機確認後の
   配置調整）。1つのグループが1つのflexアイテムになるため、折り返しはグループ
   単位で起こり、関連ボタンが途中で分断されない。 */
.toolbar-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.selection-count { font-size: 12.5px; color: var(--color-mint-dark); font-weight: 700; }
.toolbar-sep { width: 1px; height: 18px; background: var(--color-border); }
a.btn-tool { text-decoration: none; display: inline-flex; align-items: center; }
.selection-toolbar select {
  padding: 6px 8px; border: 1px solid var(--color-border); border-radius: 6px;
  font-size: 12.5px; background: var(--color-card); color: var(--color-text);
}
.btn-tool-primary { background: var(--color-mint); color: #fff; border-color: var(--color-mint); }
.btn-tool-primary:hover { background: var(--color-mint-dark); }
.btn-tool:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-tool-danger { color: #B3261E; border-color: #B3261E; }
.btn-tool-danger:hover:not(:disabled) { background: #FCE8E6; }
.btn-tool-mint { color: var(--color-mint-dark); border-color: var(--color-mint); }
.btn-tool-mint:hover:not(:disabled) { background: var(--color-mint-tint); }
/* .btn-toolの基本色（背景var(--color-card)寄りの中間色）がCSS内で後方に
   定義されているため、同じ詳細度の.btn-tool-mint/.btn-tool-dangerだけでは
   打ち消せない。テンプレート一覧の編集・削除ボタンに限り、詳細度を上げて
   確実にミント／赤のアクセントを効かせる（他画面のbtn-tool-danger/
   btn-tool-primaryの見た目は今回変更しない）。 */
.mail-template-table .btn-tool-mint { color: var(--color-mint-dark); border-color: var(--color-mint); }
.mail-template-table .btn-tool-mint:hover:not(:disabled) { background: var(--color-mint-tint); }
.mail-template-table .btn-tool-danger { color: #B3261E; border-color: #B3261E; }
.mail-template-table .btn-tool-danger:hover:not(:disabled) { background: #FCE8E6; }

/* --- データ管理・各種設定：既存Tkinter版の導線を復元（Phase W2.3） --- */
.data-menu { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.data-menu-item {
  font-size: 11px;
  padding: 4px 9px;
  border-radius: 6px;
  border: 1px solid var(--color-border);
  background: var(--color-card);
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
}
a.data-menu-item:hover { background: var(--color-mint-tint); border-color: var(--color-mint); }
.data-menu-item.is-soon { color: var(--color-muted); background: var(--color-bg); cursor: default; }

/* --- パンフ発送済・電話/メール回数の操作ボタン（Phase W2.3、W2.4でコンパクト化） ---
   【重要】.count-cell に display:flex を指定するのは <td> 自身ではなく、必ず
   <td>の中の<span>（内側ラッパー）に対してだけにすること。table-cellの
   displayを直接flexへ上書きすると、そのセルがCSS上「テーブルセルではない
   もの」として扱われテーブルの行・列レイアウトから外れてしまい、右側の
   すべての列が1列分ズレて見える不具合の原因になる（Phase W2.4で実機発見・
   修正）。同じ理由で、今後<td>へ直接display:flex/grid/block等を指定しない。 */
.panf-toggle-btn {
  background: none; border: none; cursor: pointer; font-size: 13px; padding: 1px 3px; border-radius: 4px;
}
.panf-toggle-btn:hover { background: var(--color-mint-tint); }
.count-cell { display: flex; align-items: center; gap: 3px; white-space: nowrap; overflow: hidden; }
.count-num { font-weight: 700; }
.count-plus-btn {
  background: var(--color-card); border: 1px solid var(--color-border); border-radius: 5px;
  font-size: 9.5px; padding: 0 3px; line-height: 1.6; cursor: pointer; color: var(--color-mint-dark);
  flex-shrink: 0;
}
.count-plus-btn:hover:not(:disabled) { background: var(--color-mint-tint); border-color: var(--color-mint); }
.count-plus-btn:disabled, .panf-toggle-btn:disabled { opacity: 0.5; cursor: wait; }

/* --- 電話/メール回数の直接編集（Phase W2.4追加調整） --- */
.count-num[role="button"] {
  cursor: pointer;
  border-bottom: 1px dashed transparent;
  padding: 0 1px;
}
.count-num[role="button"]:hover { border-bottom-color: var(--color-mint); }
.count-inline-input {
  width: 3.2em;
  font-size: 12px;
  font-weight: 700;
  padding: 1px 3px;
  border: 1px solid var(--color-mint);
  border-radius: 4px;
  background: var(--color-card);
  color: var(--color-text);
}
.count-inline-input:disabled { opacity: 0.6; cursor: wait; }
.bulk-count-input {
  width: 4em;
  font-size: 12px;
  padding: 3px 6px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-card);
  color: var(--color-text);
}

/* --- お知らせ・エラー表示（Phase W2.3） --- */
.flash { padding: 10px 14px; border-radius: 8px; font-size: 13px; margin-bottom: 14px; }
.flash-error { background: #FDEBEA; color: var(--color-danger); border: 1px solid #F5C6C3; }
.flash-info { background: var(--color-mint-tint); color: var(--color-mint-dark); border: 1px solid var(--color-mint); }

/* --- sticky横スクロールバー（Phase W2.3）
   .table-scroll-outer は通常のブロック要素（ページの縦スクロールに従う）。
   .sticky-hscroll は position:sticky; bottom:0 により、
   .table-scroll-outer が画面内にある間、ビューポート下端に張り付いた
   まま見え続ける（実テーブルの内部スクロール位置に関係なく、常に手が
   届く場所に横スクロール操作用のバーを表示する）。scrollLeftはJSで
   実テーブル側と双方向に同期する。 */
.table-scroll-outer { position: relative; }
.sticky-hscroll {
  position: sticky;
  bottom: 0;
  height: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-top: none;
  border-radius: 0 0 10px 10px;
  z-index: 4;
}
.sticky-hscroll::-webkit-scrollbar { height: 14px; }
.sticky-hscroll::-webkit-scrollbar-track { background: var(--color-bg); }
.sticky-hscroll::-webkit-scrollbar-thumb {
  background: #B7C4BE; border-radius: 7px; border: 3px solid var(--color-bg);
}
.sticky-hscroll::-webkit-scrollbar-thumb:hover { background: var(--color-mint); }
.sticky-hscroll-inner { height: 1px; }
.btn-tool {
  background: var(--color-card); border: 1px solid var(--color-border); color: var(--color-text);
  border-radius: 6px; padding: 5px 12px; font-size: 12px; cursor: pointer;
}
.btn-tool:hover { background: var(--color-mint-tint); }
.link-reset { font-size: 11px; color: var(--color-muted); text-decoration: underline; }
.link-reset:hover { color: var(--color-mint-dark); }

.column-picker-panel {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
}
.column-picker-title { width: 100%; font-size: 11px; color: var(--color-muted); margin-bottom: 4px; }
.column-picker-item { font-size: 12.5px; display: flex; align-items: center; gap: 4px; }

/* --- スマホ: カード形式 --- */
.prospect-cards { display: none; }

.prospect-card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 10px;
}
.prospect-card .name { font-weight: 700; font-size: 15px; }
.prospect-card .name a { color: var(--color-text); text-decoration: none; }
.prospect-card .meta { color: var(--color-muted); font-size: 12px; margin-top: 4px; }
.prospect-card .row { display: flex; justify-content: space-between; margin-top: 6px; font-size: 13px; }

.detail-field { display: flex; padding: 8px 0; border-bottom: 1px solid var(--color-border); }
.detail-field .k { width: 140px; color: var(--color-muted); flex-shrink: 0; }
.detail-field .v { flex: 1; }

/* ==========================================================================
   Excel取込・重複チェック（Phase W2.5-1新設）
   ========================================================================== */

.page-lead { color: var(--color-muted); font-size: 13px; margin: 0 0 14px; }

/* --- Excel取込ドロップカード（一覧上部の小カード・専用ページの大カード共通） --- */
.import-mini-card, .import-drop-card {
  border: 2px dashed var(--color-border);
  border-radius: 10px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.import-mini-card { padding: 14px 10px; }
.import-drop-card { padding: 36px 20px; max-width: 480px; margin: 0 auto 16px; }
.import-mini-card:hover, .import-drop-card:hover { border-color: var(--color-mint); background: var(--color-mint-tint); }
.import-mini-card.is-dragover, .import-drop-card.is-dragover { border-color: var(--color-mint); background: var(--color-mint-tint); }
.import-mini-card.is-busy, .import-drop-card.is-busy { opacity: 0.6; cursor: wait; }
.import-mini-icon, .import-drop-icon { font-size: 26px; margin-bottom: 4px; }
.import-mini-title, .import-drop-title { font-weight: 700; font-size: 13px; color: var(--color-text); }
.import-drop-title { font-size: 15px; }
.import-mini-or, .import-drop-or { font-size: 11px; color: var(--color-muted); margin: 6px 0; }
.import-mini-btn { display: inline-block; font-size: 12px; padding: 6px 14px; }
.import-mini-note, .import-drop-note { font-size: 11px; color: var(--color-muted); margin-top: 8px; }
.import-drop-filename { font-size: 12px; color: var(--color-mint-dark); margin-top: 10px; font-weight: 700; }
.import-mobile-note { display: none; color: var(--color-muted); font-size: 13px; }

.import-nav-row, .import-register-row { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0; align-items: center; }

/* --- 分類サマリーチップ --- */
.import-summary-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.import-summary-chip {
  font-size: 12.5px; font-weight: 700; padding: 5px 12px; border-radius: 999px;
  background: var(--color-card); border: 1px solid var(--color-border); color: var(--color-text);
}
.chip-new { background: var(--color-mint-tint); color: var(--color-mint-dark); border-color: var(--color-mint); }
.chip-update { background: #FFF3E4; color: var(--color-warning); border-color: var(--color-warning); }
.chip-same { background: var(--color-bg); color: var(--color-muted); }
.chip-check { background: #FCE8E6; color: #B3261E; border-color: #B3261E; }
.chip-out, .chip-pending { background: var(--color-bg); color: var(--color-muted); }

/* --- 分類タブ --- */
.import-tab-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; border-bottom: 1px solid var(--color-border); padding-bottom: 8px; }
.import-tab {
  background: var(--color-card); border: 1px solid var(--color-border); border-radius: 999px;
  padding: 6px 14px; font-size: 12.5px; cursor: pointer; color: var(--color-text);
}
.import-tab:hover { background: var(--color-mint-tint); }
.import-tab.is-active { background: var(--color-mint); color: #fff; border-color: var(--color-mint); }
.import-empty-note { color: var(--color-muted); font-size: 13px; padding: 12px 0; }

/* --- 更新候補の差分比較カード --- */
.import-diff-card { background: var(--color-card); border: 1px solid var(--color-border); border-radius: 8px; padding: 12px 14px; margin-bottom: 12px; }
.import-diff-title { font-weight: 700; font-size: 13px; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; cursor: pointer; }
.import-diff-table { min-width: 0; }
.import-diff-table th, .import-diff-table td { font-size: 12.5px; }
.import-diff-new { color: var(--color-mint-dark); font-weight: 700; }

/* --- Excel取込プレビューの行選択（Phase W2.5-1追加改善「個別選択登録」） --- */
.import-select-toolbar { display: flex; gap: 8px; margin-bottom: 10px; }
.import-selection-count { font-size: 13px; font-weight: 700; color: var(--color-mint-dark); }

/* --- 今後の取込対象外にする（対象エリア判定とは別の学校側判断による永続除外） ---
   通常の「選択した人を登録する」と誤操作しにくいよう、登録ボタンとは別の
   囲み・控えめな配色にする（登録＝ミント系の主要ボタン、除外＝枠線のみの
   btn-toolを使い、視覚的な優先度を意図的に下げている）。 */
.import-exclude-row {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin: 14px 0; padding: 10px 12px; border: 1px dashed var(--color-border); border-radius: 8px;
  background: var(--color-bg);
}
.import-exclude-label { font-size: 12.5px; color: var(--color-muted); }
.import-exclude-row select, .import-exclude-row input[type="text"] {
  font-size: 12.5px; padding: 5px 8px; border: 1px solid var(--color-border); border-radius: 6px;
}
.import-exclude-row input[type="text"] { min-width: 180px; }

/* --- 重複チェック区分バッジ --- */
.dup-tier { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.dup-tier-高一致 { background: #FCE8E6; color: #B3261E; }
.dup-tier-中一致 { background: #FFF3E4; color: var(--color-warning); }
.dup-tier-低一致 { background: var(--color-bg); color: var(--color-muted); }

/* ==========================================================================
   メールテンプレート管理・メールグループ管理（Phase W2.5-2新設）
   ========================================================================== */

.mail-readonly-badge {
  font-size: 10px; font-weight: 700; color: var(--color-muted); background: var(--color-bg);
  border: 1px solid var(--color-border); border-radius: 999px; padding: 1px 8px; margin-left: 8px;
}

/* --- テンプレート一覧（コンパクト1行表形式。2026-08-29再改訂）
   最大12件程度を1画面でなるべく多く見せ、スクロール量を最小化するため、
   本文プレビュー・使用状況・使用可バッジは表示から外した（内部の削除安全性・
   使用中判定ロジック自体はwrite_ops.pyに温存、表示だけを削っている）。 --- */
.mail-template-table-wrap { border: 1px solid var(--color-border); border-radius: 10px; overflow: hidden; margin-bottom: 20px; }
.mail-template-table { width: 100%; border-collapse: collapse; table-layout: fixed; background: var(--color-card); }
.mail-template-table col.col-num { width: 44px; }
.mail-template-table col.col-name { width: 27%; }
.mail-template-table col.col-actions { width: 172px; }
.mail-template-table th {
  background: var(--color-mint-tint); color: var(--color-mint-dark); font-size: 11.5px; font-weight: 700;
  text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--color-border);
}
.mail-template-table td {
  padding: 9px 12px; border-bottom: 1px solid var(--color-border); font-size: 13px; color: var(--color-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle;
}
.mail-template-table tbody tr:last-child td { border-bottom: none; }
.mail-template-table tbody tr:hover { background: var(--color-bg); }
.mail-template-table tbody tr.is-inactive { opacity: 0.55; }
.mail-template-table td.col-num { color: var(--color-muted); font-size: 12px; }
.mail-template-table td.col-name { font-weight: 700; }
.mail-template-table td.col-actions { overflow: visible; }
/* 操作列は必ず[編集][削除]を横1行で維持する。<form>はブロック要素なので
   白space:nowrapだけでは折返しを防ぎきれず、tdへ直接display:flexを当てる
   ブラウザ間の互換性リスクも避けるため、内側に専用のflexラッパーを置く。 */
.mail-template-row-actions-inline { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.mail-template-row-actions-inline form { display: inline-flex; flex: 0 0 auto; }
.mail-template-table .btn-tool-sm { font-size: 12px; padding: 4px 9px; white-space: nowrap; flex: 0 0 auto; }

/* --- メールグループ一覧（タブ化・コンパクト1行表形式。2026-08-29再改訂）
   指定日メール（キャンペーン型）・追いメール（継続型）・旧設定（レガシー9項目）
   をタブで切り替える。テンプレート一覧で確定した1行表形式の方向性を再利用。
   対象人数・編集ボタンを最左列に置き「見る→すぐ編集」の動線を優先する
   （内部のmail_campaigns等のSSOT・判定ロジックは無変更、表示のみ整理）。 --- */
.mail-group-table-wrap { border: 1px solid var(--color-border); border-radius: 10px; overflow: hidden; margin-bottom: 20px; }
.mail-group-table { width: 100%; border-collapse: collapse; table-layout: fixed; background: var(--color-card); }
.mail-group-table col.col-count { width: 90px; }
.mail-group-table col.col-edit { width: 118px; }
.mail-group-table col.col-name { width: 20%; }
.mail-group-table col.col-target { width: 18%; }
.mail-group-table col.col-template { width: 20%; }
.mail-group-table col.col-timing { width: 110px; }
.mail-group-table col.col-delete { width: 84px; }
.mail-group-table th {
  background: var(--color-mint-tint); color: var(--color-mint-dark); font-size: 11.5px; font-weight: 700;
  text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--color-border);
}
.mail-group-table td {
  padding: 9px 12px; border-bottom: 1px solid var(--color-border); font-size: 13px; color: var(--color-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle;
}
.mail-group-table tbody tr:last-child td { border-bottom: none; }
.mail-group-table tbody tr:hover { background: var(--color-bg); }
.mail-group-table td.col-count { font-weight: 800; font-size: 14px; color: var(--color-mint-dark); }
.mail-group-table td.col-name { font-weight: 700; }
.mail-group-table td.col-edit, .mail-group-table td.col-delete { overflow: visible; }
.mail-group-table .btn-tool-sm { font-size: 12px; padding: 4px 9px; white-space: nowrap; }
.mail-group-table .btn-tool-mint { color: var(--color-mint-dark); border-color: var(--color-mint); }
.mail-group-table .btn-tool-danger { color: #B3261E; border-color: #B3261E; }
.mail-group-table .btn-tool-mint:hover:not(:disabled) { background: var(--color-mint-tint); }
.mail-group-table .btn-tool-danger:hover:not(:disabled) { background: #FCE8E6; }
.mail-group-table-legacy col { width: auto; }
.mail-group-table-legacy td.col-template { max-width: 0; }

.mail-sequence-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.mail-sequence-row { background: var(--color-card); border: 1px solid var(--color-border); border-radius: 10px; padding: 12px 16px; }
.mail-sequence-summary { display: flex; align-items: center; gap: 14px; }
.mail-sequence-name { font-weight: 700; font-size: 14px; flex-shrink: 0; }
.mail-sequence-meta { font-size: 12.5px; color: var(--color-muted); flex: 1; }
.mail-sequence-toggle { font-size: 12px; padding: 4px 10px; flex-shrink: 0; }
.mail-sequence-summary .btn-tool-mint { color: var(--color-mint-dark); border-color: var(--color-mint); font-size: 12px; padding: 4px 10px; flex-shrink: 0; }
.mail-sequence-summary .btn-tool-mint:hover:not(:disabled) { background: var(--color-mint-tint); }
.mail-sequence-detail { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--color-border); }
.mail-sequence-detail ol { margin: 0; padding-left: 20px; font-size: 13px; line-height: 1.8; color: var(--color-text); }
.mail-count-sub { font-size: 11px; font-weight: 400; color: var(--color-muted); }

/* --- メンバー管理（送信メンバー・追いメール対象者。2026-08-29追加） --- */
.mail-member-summary { display: flex; gap: 12px; margin-bottom: 16px; }
.mail-member-summary-item {
  background: var(--color-card); border: 1px solid var(--color-border); border-radius: 10px;
  padding: 10px 18px; display: flex; flex-direction: column; gap: 2px; min-width: 140px;
}
.mail-member-summary-item.is-final { background: var(--color-mint-tint); border-color: var(--color-mint); }
.mail-member-summary-label { font-size: 11px; color: var(--color-muted); }
.mail-member-summary-value { font-size: 20px; font-weight: 800; color: var(--color-text); }
.mail-member-summary-item.is-final .mail-member-summary-value { color: var(--color-mint-dark); }

.mail-member-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.mail-member-toolbar select { padding: 5px 8px; border: 1px solid var(--color-border); border-radius: 6px; font-size: 12.5px; }

.mail-status-tag {
  display: inline-block; font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 999px;
  margin-right: 4px; white-space: nowrap;
}
.mail-status-tag.is-sent { background: var(--color-mint-tint); color: var(--color-mint-dark); }
.mail-status-tag.is-excluded { background: #FCE8E6; color: #B3261E; }
.mail-status-tag.is-ok { background: var(--color-bg); color: var(--color-muted); border: 1px solid var(--color-border); }

/* --- メンバー検索・追加フォーム（共通パーシャル_mail_member_search.html用。
   2026-08-29「メンバー追加画面の検索機能強化」追加）。1536pxで2段程度に
   収まるようgridで折り返す。 --- */
.mail-member-search-heading {
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 8px;
}
.mail-member-search-heading-title { display: flex; align-items: center; gap: 8px; }
.btn-main:disabled { opacity: 0.5; cursor: not-allowed; }

.mail-member-search-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px 10px; align-items: center; margin-bottom: 10px; max-width: 1080px;
}
.mail-member-search-grid input[type="text"],
.mail-member-search-grid select {
  padding: 7px 10px; border: 1px solid var(--color-border); border-radius: 6px; font-size: 13px;
  background: var(--color-card); color: var(--color-text); width: 100%; box-sizing: border-box;
}
.mail-search-keyword { grid-column: span 2; }
.mail-search-date-range {
  grid-column: span 2; display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--color-muted); white-space: nowrap;
}
.mail-search-date-range input[type="text"] { width: 110px; flex: 1 1 auto; }
.mail-search-buttons { grid-column: span 2; display: flex; gap: 8px; }
.mail-search-count { font-size: 12.5px; color: var(--color-muted); margin-right: 8px; }

.mail-member-table col.col-check { width: 40px; }
.mail-member-table col.col-grade { width: 100px; }
.mail-member-table col.col-status { width: 100px; }
.mail-member-table col.col-mailcount { width: 80px; }
.mail-member-table col.col-email { width: 20%; }
.mail-member-table col.col-state { width: 150px; }
.mail-member-table td.col-email { overflow: hidden; text-overflow: ellipsis; }

/* --- 送信履歴一覧（Phase W2.5-5新設） --- */
.mail-history-table col.col-datetime { width: 140px; }
.mail-history-table col.col-email { width: 18%; }
.mail-history-table col.col-category { width: 140px; }
.mail-history-table col.col-stage { width: 130px; }
.mail-history-table col.col-actions { width: 70px; }
.mail-history-table td.col-email, .mail-history-table td.col-subject {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 0;
}

.mail-step-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.mail-step-chip {
  display: inline-block; background: var(--color-card); border: 1px solid var(--color-border); border-radius: 999px;
  padding: 6px 14px; font-size: 12.5px; color: var(--color-text); text-decoration: none;
}
.mail-step-chip:hover { background: var(--color-bg); }
.mail-step-chip.is-active { background: var(--color-mint); color: #fff; border-color: var(--color-mint); }
.mail-step-chip.is-done { color: var(--color-muted); }

/* --- フォーム共通 --- */
.mail-form-field { margin-bottom: 16px; max-width: 640px; }
.mail-form-field label { display: block; font-size: 12.5px; font-weight: 700; margin-bottom: 4px; }
.mail-form-field input[type="text"], .mail-form-field input[type="number"], .mail-form-field select, .mail-form-field textarea {
  width: 100%; padding: 8px 10px; border: 1px solid var(--color-border); border-radius: 6px;
  font-size: 13px; background: var(--color-card); color: var(--color-text); box-sizing: border-box;
}
.mail-form-field textarea { font-family: inherit; resize: vertical; line-height: 1.6; }
.mail-form-note { font-size: 11px; color: var(--color-muted); display: block; margin-top: 4px; }
.mail-form-row { display: flex; gap: 14px; max-width: 640px; }
.mail-form-row .mail-form-field { flex: 1; }

.mail-variable-row { margin-bottom: 6px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12px; color: var(--color-muted); }
.mail-variable-btn { font-size: 11px; padding: 3px 8px; font-family: monospace; }

.mail-checkbox-group { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.mail-checkbox-item { font-size: 13px; display: flex; align-items: center; gap: 5px; }

.mail-target-preview {
  background: var(--color-mint-tint); color: var(--color-mint-dark); font-weight: 700; font-size: 13px;
  padding: 8px 14px; border-radius: 8px; max-width: 640px; margin-bottom: 16px;
}
.mail-template-preview-box {
  margin-top: 8px; padding: 10px 12px; background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: 8px; font-size: 12.5px; white-space: pre-wrap; color: var(--color-text);
}
.mail-template-preview-box[hidden] { display: none; }

/* --- テンプレート本文：Gmail風リッチエディタ（2026-08-29 Phase W2.5-2追加） --- */
/* .mail-form-fieldの既定max-width:640pxは氏名等の短い入力欄向けのため、
   本文欄だけは編集領域を狭くしすぎないよう解除する（ユーザー指示§22）。 */
.mail-body-field { max-width: 900px; }
.mail-body-field textarea#本文 { min-height: 320px; }
.mail-rich-toolbar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
  background: var(--color-bg); border: 1px solid var(--color-border); border-bottom: none;
  border-radius: 8px 8px 0 0; padding: 6px 8px;
}
.mail-rich-btn {
  background: var(--color-card); border: 1px solid var(--color-border); color: var(--color-text);
  border-radius: 6px; padding: 5px 9px; font-size: 12.5px; cursor: pointer; line-height: 1.2;
}
.mail-rich-btn:hover { background: var(--color-mint-tint); border-color: var(--color-mint); }
.mail-rich-toolbar-sep { width: 1px; height: 20px; background: var(--color-border); margin: 0 2px; }
.mail-rich-swatch {
  display: inline-block; width: 13px; height: 13px; border-radius: 50%;
  border: 1px solid var(--color-border); vertical-align: middle;
}
.mail-rich-variable-menu { position: relative; }
.mail-rich-variable-dropdown {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 30;
  background: var(--color-card); border: 1px solid var(--color-border); border-radius: 8px;
  box-shadow: 0 4px 14px rgba(24,32,30,0.12); padding: 6px; min-width: 160px;
  display: flex; flex-direction: column; gap: 2px;
}
.mail-rich-variable-dropdown[hidden] { display: none; }
.mail-rich-variable-item { text-align: left; border-color: transparent; background: transparent; }
.mail-rich-variable-item:hover { background: var(--color-mint-tint); border-color: var(--color-mint); }

.mail-rich-editor {
  min-height: 320px; max-height: 60vh; overflow-y: auto;
  background: var(--color-card); border: 1px solid var(--color-border); border-radius: 0 0 8px 8px;
  padding: 16px 20px; font-family: "Hiragino Sans", "Meiryo", "Segoe UI", sans-serif;
  font-size: 14px; line-height: 1.8; color: #000;
}
.mail-rich-editor:focus { outline: 2px solid var(--color-mint); outline-offset: -1px; }
.mail-rich-editor p { margin: 0 0 0.6em; }
.mail-rich-editor a { color: #1155cc; text-decoration: underline; }
/* 箇条書き記号「・」は編集不能なCSS装飾として表示する（記号自体を利用者が
   誤って編集・削除できないようにするための意図的な設計。markup_to_editor_
   html()が本文テキストから記号文字を取り除いている前提とセットで機能する）。 */
.mail-rich-editor .mail-bullet { position: relative; }
.mail-rich-editor .mail-bullet::before { content: "・"; }

/* --- メール作成・送信対象確認（Phase W2.5-3新設） --- */
.mail-compose-target-summary {
  display: flex; align-items: center; gap: 12px; margin: 6px 0 14px;
  font-size: 14px; flex-wrap: wrap;
}
.mail-compose-target-count b { color: var(--color-mint-dark); font-size: 16px; }
.mail-compose-send-actions {
  display: flex; align-items: center; gap: 10px; margin: 16px 0; flex-wrap: wrap;
}
.confirm-preview-row td { background: var(--color-bg); padding: 10px 14px; }
.confirm-preview-content { font-size: 13px; }
.confirm-preview-content .mail-rich-editor {
  border: 1px solid var(--color-border); border-radius: 8px; padding: 10px;
  background: var(--color-card); margin-top: 4px;
}
.confirm-preview-btn { margin-left: 6px; padding: 2px 8px; font-size: 11px; }

/* ==========================================================================
   レスポンシブ（Phase W2追加）
   ・~1536px/1280px：デスクトップ構成のまま、右カラム幅・余白のみ縮小
   ・~880px以下：左サイドバーをハンバーガーメニュー化（オフキャンバス）
   ・~720px以下：資料請求一覧をtable→card、ホームを2カラム→1カラムへ
   ========================================================================== */

@media (max-width: 1280px) {
  .home-right { width: 260px; }
  .prospects-top-row { grid-template-columns: 32% 42% 26%; }
}

@media (max-width: 880px) {
  .sidebar {
    position: fixed;
    top: 0; left: 0;
    height: 100vh;
    z-index: 20;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    box-shadow: 2px 0 12px rgba(0,0,0,0.08);
  }
  .app-shell.sidebar-open .sidebar { transform: translateX(0); }
  .app-shell.sidebar-open .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(24,32,30,0.35);
    z-index: 15;
  }
  .mobile-header { display: flex; }
  .home-body { flex-direction: column; }
  .home-right { width: 100%; }
  .prospects-top-row { grid-template-columns: 1fr; }
  .mail-template-table col.col-name { width: 22%; }
  .mail-template-table col.col-actions { width: 140px; }
  .mail-template-table .btn-tool-sm { padding: 4px 7px; }
}

@media (max-width: 720px) {
  .container { padding: 12px; }
  table.prospect-table { display: none; }
  .prospect-cards { display: block; }
  .filter-row input, .filter-row select { flex: 1 1 100%; }
  .task-cards-row { grid-template-columns: 1fr; }
  .calendar-grid td { height: 36px; font-size: 11px; }
  /* Excel取込はPC操作を前提とするため、スマホではドロップカードの代わりに
     案内文だけを表示する（重複チェック結果の閲覧はスマホでも可能なまま）。 */
  .import-mini-card, .import-drop-card { display: none; }
  .import-mobile-note { display: block; }
}