/* 店長用集計画面(/manager)専用の上書きCSS。
   共有 public/style.css(タヌポータル風: クリーム色+ブランド4色+丸ゴシック+ピル型ボタン)を
   後読みで上書きし、社内カレンダーアプリ(apps/カレンダー/public/style.css)と同じ
   「薄いグレー背景+白カード+青アクセントのフラットなトーン」に揃える。
   このファイルは /manager 配下だけで読み込まれる。他画面(/、app.js等)には影響しない。
   希望休(緑)/有給(赤)の色分けの意味は維持し、全体トーンだけをここで上書きする。 */

:root,
body.accent-gold {
  --accent: #2563eb;
  --accent-soft: rgba(37, 99, 235, 0.12);
  --ink: #1f2937;
  --ink-soft: #6b7280;
  --border: #e5e7eb;
  --cream: #f4f5f7;
  --cream-deep: #e5e7eb;
  --paper: #ffffff;
  --danger: #dc2626;
}

/* フォント: 全社共通方針によりNoto Sans JPに統一する(2026-08-28、以前はシステムフォント優先だった) */
html, body {
  font-family: "Noto Sans JP", "Yu Gothic", "Hiragino Sans", sans-serif !important;
}

body {
  background-color: var(--cream) !important;
  background-image: none !important;
}

/* 角丸32px+白枠+斜めストライプの「タヌポータル風」コンテナをフラットな白カードに */
.screen {
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid var(--border);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  padding: 0 0 16px;
}

header.app-header {
  justify-content: flex-start;
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
header.app-header img { height: 28px; }
header.app-header h1 { font-size: 1.1rem; font-weight: 700; }

main.app-main { padding: 16px 16px 4px; }

footer.app-footer {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

/* カード: 丸角20px+濃い影 → 控えめな角丸+薄い影 */
.card {
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid var(--border);
  box-shadow: none;
  padding: 14px;
}

.section-title .leaf {
  border-radius: 3px;
  background: var(--accent);
}

/* ボタン: ピル型(border-radius:999px)+グラデーション → 四角い角丸+単色 */
.btn { border-radius: 6px; }
.btn-accent {
  background: var(--accent);
  box-shadow: none;
}
.btn-accent:hover { background: #1d4ed8; }
.btn-accent:active { transform: none; }
.btn-ghost {
  border: 1px solid var(--border);
  color: var(--ink-soft);
}
.btn-link { color: var(--ink-soft); }
.btn-link:hover { color: var(--accent); }

/* タブ切り替え(カレンダー/一覧/未提出) */
.tab-btn { border-radius: 6px; border: 1px solid var(--border); }
.tab-btn.is-active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}

/* 月切り替え */
.month-switch button {
  border-radius: 6px;
  border: 1px solid var(--border);
  box-shadow: none;
}

/* 所属選択グリッド */
.choice-btn { border-radius: 6px; }
.choice-btn.is-active { border-color: var(--accent); background: var(--accent-soft); }

.current-person .dept-tag {
  background: #eef2f7;
  border-radius: 4px;
}

/* 進捗バー */
.progress-bar { background: #e5e7eb; }
.progress-bar > div { background: var(--accent); }

/* カレンダーグリッド: 正方形セルより高さのある四角セル、控えめな角丸 */
.cal-cell {
  border-radius: 6px;
  background: #ffffff;
  border: 1px solid var(--border);
}
.cal-cell.is-selected { background: var(--accent); border-color: var(--accent); }

.mgr-cal-cell {
  min-height: 66px;
  border-radius: 6px;
  background: #ffffff;
  border: 1px solid var(--border);
}

/* 件数バッジ・氏名表示は「イベントチップ」風に角丸小ラベル化(緑=希望休/赤=有給の色分けは維持) */
.count-badge {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 4px;
}

/* 2026-09-22: 黒田さん指示「見づらい、字少し大きく」。店長画面のカレンダーは氏名を読むのが目的なので、
   PC幅では氏名0.8rem・日付0.95rem・件数バッジ0.68remに拡大し、セルの高さと横幅の下限も広げる。
   スマホ幅(600px以下)は横スクロール量を抑えるため一段控えめ(0.7rem)。 */
/* 「－」「＋」ボタンで --cal-scale(0.7〜1.6、端末に記憶)を変えると、氏名・日付・バッジ・グリッド幅が一緒に拡縮する */
/* 2026-09-22: 黒田さんが「80%がちょうどいい」→ その大きさを100%(標準)にする。--cal-base が旧80%相当 */
#viewCalendar { --cal-scale: 1; --cal-base: 0.8; }
.day-cell-people { font-size: calc(0.8rem * var(--cal-scale) * var(--cal-base)); line-height: 1.35; }
.mgr-cal-cell { min-height: calc(84px * var(--cal-scale) * var(--cal-base)); padding: 6px 4px; }
.mgr-cal-cell .day-num { font-size: calc(0.95rem * var(--cal-scale) * var(--cal-base)); }
.count-badge { font-size: calc(0.68rem * var(--cal-scale) * var(--cal-base)); top: 3px; right: 4px; }
.mgr-cal-scroll-inner { min-width: calc(720px * var(--cal-scale) * var(--cal-base)); }
@media (max-width: 600px) {
  .day-cell-people { font-size: calc(0.7rem * var(--cal-scale) * var(--cal-base)); }
  .mgr-cal-scroll-inner { min-width: calc(670px * var(--cal-scale) * var(--cal-base)); }
}
.mgr-cal-zoom {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin: -6px 0 10px;
  font-size: 0.8rem;
  color: var(--ink-soft);
}
.mgr-cal-zoom-btn {
  width: 40px;
  height: 36px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 1.15rem;
  font-weight: 800;
  cursor: pointer;
}
.mgr-cal-zoom-btn:disabled { opacity: 0.4; cursor: default; }
.mgr-cal-zoom-value { min-width: 3.2em; text-align: center; font-weight: 700; color: var(--ink); }
.mgr-cal-zoom-reset {
  border: 0;
  background: none;
  color: var(--ink-soft);
  font: inherit;
  font-size: 0.76rem;
  text-decoration: underline;
  cursor: pointer;
}
@media print { .mgr-cal-zoom { display: none; } }

.list-row { border-bottom-color: var(--border); }

.dept-row { border-bottom-color: var(--border); }

.mode-btn, .note-box, .yukyu-badge { border-radius: 6px; }

/* v追補: 店長による希望休/有給の直接編集モーダル */
.edit-overlay {
  position: fixed;
  inset: 0;
  background: rgba(31, 41, 55, 0.5);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 50;
  padding: 0;
}
.edit-overlay .edit-card {
  width: 100%;
  max-width: 480px;
  max-height: 88vh;
  overflow-y: auto;
  border-radius: 16px 16px 0 0;
  margin: 0;
}
.edit-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.edit-emp-name { font-size: 1rem; font-weight: 700; color: var(--ink); }
.edit-hint { font-size: 0.74rem; color: var(--ink-soft); line-height: 1.5; margin: 0 0 10px; }
.edit-card .note-input { margin-top: 10px; }
.edit-card .btn-block { margin-top: 12px; }
.list-row-actions { margin-top: 6px; }
.list-row-actions .btn-link { font-size: 0.78rem; }