:root { --blue:#2563eb; --green:#16a34a; --red:#dc2626; --amber:#d97706; --gray:#6b7280; --bg:#f6f7f9; --line:#e5e7eb; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif; color:#111827; background:var(--bg); }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

.topbar { display:flex; align-items:center; gap:16px; flex-wrap:wrap; background:#fff; border-bottom:1px solid var(--line); padding:10px 18px; }
.topbar .brand { font-weight:700; font-size: 17px; color:#111827; }
.topbar nav { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-left:auto; }
.topbar .who { color:var(--gray); font-size: 13px; }

.container { max-width: 960px; margin: 22px auto; padding: 0 16px; }
.foot { text-align:center; color:var(--gray); font-size: 13px; padding:24px; }

body { font-size: 15px; }
h1 { font-size: 24px; font-weight: 500; margin: 0 0 12px; }
h2 { font-size: 17px; font-weight: 500; margin: 0 0 8px; }

.card { background:#fff; border:1px solid var(--line); border-radius:10px; padding:18px; margin-bottom:18px; }
.card.narrow { max-width:420px; }
.card-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
.card-head h2 { margin:0; }

label { display:block; margin:10px 0; font-size: 13px; color:#374151; }
input, textarea, select { width:100%; padding:9px 10px; border:1px solid #cbd5e1; border-radius:7px; font-size: 15px; margin-top:4px; }
.row2 { display:flex; gap:12px; } .row2 label { flex:1; }

button, .btn { cursor:pointer; border:1px solid #cbd5e1; background:#fff; color:#111827; padding:8px 14px; border-radius:7px; font-size: 15px; display:inline-block; }
button.primary, .primary.btn { background:var(--blue); border-color:var(--blue); color:#fff; }
button.small { padding:5px 12px; background:var(--green); border-color:var(--green); color:#fff; font-size: 13px; }
button.small.light { background:#fff; color:#374151; }
button.link { border:none; background:none; color:var(--blue); padding:0 4px; font-size: 13px; }
button.danger, .btn.danger { color:var(--red); border-color:#fca5a5; }
.inline { display:inline; }
.actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

table { width:100%; border-collapse:collapse; }
th, td { text-align:left; padding:9px 8px; border-bottom:1px solid var(--line); font-size: 15px; vertical-align:middle; }
th { color:var(--gray); font-weight:500; font-size: 13px; }
td { vertical-align:top; }
.fit { white-space:nowrap; }
.row-warn { background:#fef2f2; }

.tag { display:inline-block; padding:2px 9px; border-radius:999px; font-size: 13px; color:#fff; }
.tag.green{background:var(--green);} .tag.blue{background:var(--blue);} .tag.red{background:var(--red);}
.tag.amber{background:var(--amber);} .tag.gray{background:var(--gray);}

.error { color:var(--red); background:#fef2f2; border:1px solid #fecaca; padding:9px 12px; border-radius:7px; }
.ok { color:var(--green); }
.muted { color:var(--gray); font-size: 13px; }
.copy { background:#f3f4f6; font-family: ui-monospace, monospace; font-size: 13px; }
.day-block { margin-bottom:16px; }
.day-title { font-weight:500; margin:10px 0 6px; font-size: 15px; }
.hours { display:flex; flex-wrap:wrap; gap:8px; }
.hour { display:flex; flex-direction:column; align-items:center; min-width:92px; padding:8px 10px; border-radius:8px; border:1px solid #cbd5e1; background:#fff; font-size: 15px; cursor:pointer; line-height:1.3; }
.hour .cnt { font-size: 11px; color:#6b7280; margin-top:2px; }
.hour.open { border-color:#16a34a; color:#15803d; }
.hour.open:hover { background:#f0fdf4; }
.hour.mine { border-color:#2563eb; background:#eff6ff; color:#1d4ed8; }
.hour.mine .cnt { color:#1d4ed8; }
.hour.full { border-style:dashed; color:#9ca3af; cursor:not-allowed; background:#f9fafb; }
fieldset.weekdays { border:1px solid var(--line); border-radius:8px; padding:8px 12px; margin:10px 0; }
fieldset.weekdays legend { font-size: 13px; color:var(--gray); padding:0 4px; }
.wd { display:inline-flex; align-items:center; gap:3px; margin:2px 8px 2px 0; font-size: 15px; width:auto; }
.wd input { width:auto; margin:0; }
.metrics { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:18px; }
.metric { background:#fff; border:0.5px solid var(--line); border-radius:10px; padding:14px 16px; }
.metric.hl { background:#fff7ed; border-color:#fdba74; }
.metric .label { font-size: 13px; color:var(--gray); }
.metric .num { font-size: 24px; font-weight:500; margin-top:4px; }
.banner { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; background:#fffbeb; border:1px solid #fcd34d; border-radius:10px; padding:12px 16px; margin-bottom:18px; }
.banner-body strong { color:#92400e; }
.banner ul { margin:6px 0 0; padding-left:18px; }
.banner li { font-size: 13px; margin:2px 0; }
#calendar { margin-top:8px; }

/* 月ビュー「1日サマリー + ミニ時間帯バー」 */
.fc-daygrid-event.cal-event-summary { padding: 0 !important; cursor: pointer; background: transparent !important; border: none !important; }
.fc-daygrid-event.cal-event-summary .fc-event-title { display: none; }
.fc-daygrid-event.cal-event-summary:hover { background: rgba(0,0,0,0.03) !important; }
.cal-day-summary { padding: 1px 2px 3px; }
.cal-summary-line { font-size: 11px; line-height: 1.3; color: #374151; padding: 1px 3px 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-bars { display: flex; gap: 1px; padding: 0 3px; }
.cal-bar { flex: 1; height: 7px; border-radius: 1px; min-width: 4px; }
.cal-bar-open { background: #f59e0b; }
.cal-bar-full { background: #9ca3af; }
.cal-bar-mine { background: #2563eb; }
.cal-bar-none { background: #e5e7eb; }

/* 募集フォームの時間帯リスト */
.range-row { display:flex; align-items:center; gap:8px; margin:6px 0; }
.range-row select { flex:1; margin-top:0; }
.range-row .range-sep { color:var(--gray); }
.range-row .range-del { padding:4px 10px; }

/* 週タブフィルタ */
.period-tabs { display:flex; gap:4px; flex-wrap:wrap; }
.period-tab { padding:4px 12px; font-size: 13px; border-color:#cbd5e1; }
.period-tab.is-active { background:var(--blue); color:#fff; border-color:var(--blue); }

/* 今月の予想収入バッジ */
.earnings-badge { display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; background:#eff6ff; border:1px solid #bfdbfe; border-radius:10px; padding:10px 14px; margin-bottom:14px; font-size: 15px; }
.earnings-badge .el { color:#1d4ed8; font-weight:500; }
.earnings-badge .ev { font-size: 15px; }

/* 個別枠の空き通知購読 */
.hour-stack { display:flex; flex-direction:column; gap:2px; align-items:stretch; }
.watch-btn { padding:3px 8px; font-size: 11px; border:1px solid #cbd5e1; border-radius:6px; background:#fff; cursor:pointer; }
.watch-btn.is-on { background:#fef3c7; border-color:#fbbf24; color:#92400e; }
.watch-btn:hover { background:#f9fafb; }
.watch-btn.is-on:hover { background:#fde68a; }

/* 予約者チップ（管理者の手動削除付き） */
.booker-chip { display:inline-flex; align-items:center; gap:3px; padding:2px 10px; border:1px solid #cbd5e1; border-radius:999px; margin:1px 3px 1px 0; font-size: 13px; }
.booker-chip .x { background:transparent; border:none; color:#9ca3af; cursor:pointer; font-size: 15px; padding:0 2px; line-height:1; }
.booker-chip .x:hover { color:#dc2626; }

/* 空状態 */
.empty-state { background:#f9fafb; border:1px dashed #d1d5db; border-radius:10px; padding:18px 16px; text-align:center; line-height:1.6; }

/* 送信中ボタン */
button.is-submitting { opacity:.7; cursor:wait; position:relative; }
button.is-submitting::after { content:''; display:inline-block; width:.7em; height:.7em; margin-left:.4em; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; vertical-align:-2px; animation:spin .7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* 募集詳細の折りたたみ */
.day-details { border:0.5px solid var(--line); border-radius:8px; margin-bottom:10px; }
.day-details > .day-summary { padding:10px 14px; cursor:pointer; font-weight:500; list-style:none; display:flex; align-items:center; }
.day-details > .day-summary::-webkit-details-marker { display:none; }
.day-details > .day-summary::before { content:'▶'; display:inline-block; transition:transform .15s; margin-right:8px; font-size:.7em; color:var(--gray); }
.day-details[open] > .day-summary::before { transform:rotate(90deg); }
.day-details[open] > .day-summary { border-bottom:0.5px solid var(--line); }
.day-details > table { margin-top:6px; }
.day-stats { font-size: 13px; }

/* 連続枠の一括予約ボタン */
.range-book { background:#fff7ed; color:#92400e; border-color:#fdba74; padding:6px 12px; font-size: 13px; }
.range-book:hover { background:#ffedd5; }

/* ハンバーガーメニュー（モバイル時のみ） */
.nav-toggle { display:none; cursor:pointer; padding:6px 10px; border:1px solid var(--line); border-radius:6px; font-size:1.1rem; margin-left:auto; }
@media (max-width: 640px) {
  .topbar { flex-wrap:wrap; }
  .nav-toggle { display:inline-block; }
  .topbar nav { display:none; width:100%; flex-direction:column; align-items:flex-start; gap:8px; padding:8px 0; margin-left:0; }
  .topbar nav .who { margin-right:auto; }
  .nav-toggle-cb:checked ~ nav { display:flex; }
}

/* テーブルのモバイル対応：横スクロール（最低限） */
.card > table, .table-wrap > table { display:table; }
@media (max-width: 640px) {
  .card > table, .table-wrap > table { font-size: 13px; }
  .card > table th, .card > table td { padding:6px 4px; }
  /* metrics は元から grid-auto-fit なので問題なし。
     学生・謝金などの幅広テーブルは横スクロール対応 */
  .card { overflow-x:auto; -webkit-overflow-scrolling:touch; }
}

/* ダークモード自動切替（prefers-color-scheme） */
@media (prefers-color-scheme: dark) {
  :root {
    --blue:#60a5fa; --green:#4ade80; --red:#f87171; --amber:#fbbf24; --gray:#9ca3af;
    --bg:#0f172a; --line:#1e293b;
  }
  body { color:#e5e7eb; background:var(--bg); }
  .topbar { background:#111827; border-bottom-color:#1f2937; }
  .topbar .brand { color:#e5e7eb; }
  .card, .metric, .frame { background:#111827; border-color:#1f2937; }
  .day-details { border-color:#1f2937; }
  table th { color:#9ca3af; }
  table td { color:#e5e7eb; }
  th, td { border-bottom-color:#1f2937; }
  input, textarea, select { background:#0f172a; color:#e5e7eb; border-color:#374151; }
  button, .btn { background:#1f2937; color:#e5e7eb; border-color:#374151; }
  button.primary, .primary.btn { background:#2563eb; color:#fff; border-color:#2563eb; }
  button.small { background:var(--green); color:#0f172a; border-color:var(--green); }
  .empty-state { background:#0b1220; border-color:#334155; }
  .copy { background:#0b1220; color:#e5e7eb; }
  .row-warn { background:#3f1d1d; }
  .day-block, .day-summary { color:#e5e7eb; }
  .hour { background:#1f2937; color:#e5e7eb; border-color:#374151; }
  .hour.open { color:#86efac; border-color:#22c55e; }
  .hour.open:hover { background:#052e16; }
  .hour.mine { background:#1e3a8a; color:#bfdbfe; border-color:#3b82f6; }
  .hour.full { background:#1f2937; color:#6b7280; }
  .banner { background:#3f3010; border-color:#92400e; }
  .banner-body strong { color:#fef3c7; }
  .error { color:#fca5a5; background:#3f1d1d; border-color:#7f1d1d; }
  .earnings-badge { background:#172554; border-color:#1e40af; color:#bfdbfe; }
  .earnings-badge .el { color:#93c5fd; }
  .booker-chip { background:#1f2937; border-color:#374151; }
  .watch-btn { background:#1f2937; color:#e5e7eb; border-color:#374151; }
  .watch-btn.is-on { background:#3f3010; border-color:#92400e; color:#fbbf24; }
  .range-book { background:#3f3010; color:#fbbf24; border-color:#92400e; }
  .range-book:hover { background:#451a03; }
  .cal-summary-line { color:#d1d5db; }
  .cal-bar-none { background:#374151; }
  .period-tab { background:#1f2937; color:#e5e7eb; border-color:#374151; }
  .period-tab.is-active { background:#2563eb; color:#fff; }
  /* FullCalendar */
  .fc { color:#e5e7eb; }
  .fc-theme-standard td, .fc-theme-standard th { border-color:#1f2937; }
  .fc-toolbar-title, .fc-col-header-cell-cushion, .fc-daygrid-day-number { color:#e5e7eb; }
  .fc-button { background-color:#1f2937 !important; color:#e5e7eb !important; border-color:#374151 !important; }
  .fc-button-active, .fc-button-primary:not(:disabled).fc-button-active { background-color:#2563eb !important; border-color:#2563eb !important; }
}

/* 出欠記録チップ */
.booker-chip.att-present { background:#dcfce7; border-color:#86efac; }
.booker-chip.att-absent  { background:#fee2e2; border-color:#fca5a5; opacity:.7; }
.booker-chip.att-late    { background:#fef3c7; border-color:#fbbf24; }
.att-select { width:auto; padding:1px 4px; font-size: 11px; margin:0 2px; background:transparent; border:1px solid transparent; border-radius:4px; }
.att-select:hover { border-color:#cbd5e1; background:#fff; }

/* 次のシフトカード */
.next-shift-card { background:#2563eb; color:#fff; border-radius:10px; padding:12px 16px; margin-bottom:14px; display:flex; flex-direction:column; gap:2px; }
.next-shift-label { font-size: 13px; opacity:.9; }
.next-shift-time { font-size: 17px; }
.next-shift-time .muted { color:#bfdbfe; }
.next-shift-until { font-size: 13px; opacity:.9; }
@media (prefers-color-scheme: dark) { .next-shift-card { background:#1e40af; } }