/* 公共施設予約 管理画面 - デザインシステム
   モノトーン(白〜黒)基調。色を増やさず、温度感・奥行き・余白・タイポの階層で
   "作り込まれた製品"に見せる。トークンは :root で一元管理し全コンポーネントに適用する。
   参照: docs/UI_REFRESH.md */

:root {
  /* ---- サーフェス / 背景 ---- */
  --color-bg: #f7f7f8;              /* ページ背景: やわらかいオフホワイト */
  --color-surface: #ffffff;         /* カード/パネル/ヘッダ/サイドバー */
  --color-surface-hover: #fafafa;   /* 行/項目ホバー */
  --color-surface-sunken: #f4f4f5;  /* アクティブ項目・統計ブロック等の沈んだ背景 */

  /* ---- 枠線 ---- */
  --color-border: #ebebed;          /* 繊細な枠線 */
  --color-border-strong: #dcdce1;   /* ホバー時などやや濃い枠線 */

  /* ---- 文字 ---- */
  --color-text: #18181b;            /* 見出し */
  --color-text-secondary: #3f3f46;  /* 本文 */
  --color-text-muted: #71717a;      /* 補助 */
  --color-text-faint: #a1a1aa;      /* さらに薄い(装飾アイコン等) */

  /* ---- 操作 ---- */
  --color-primary: #111113;
  --color-primary-hover: #000000;
  --color-danger: #dc2626;
  --color-danger-hover: #b91c1c;
  --color-danger-tint: #fef2f2;
  --color-danger-border: #fecaca;

  /* ---- 影 ---- */
  --shadow-xs: 0 1px 2px rgba(16, 17, 18, .04);
  --shadow-sm: 0 1px 2px rgba(16, 17, 18, .04), 0 1px 3px rgba(16, 17, 18, .06);
  --shadow-md: 0 2px 4px rgba(16, 17, 18, .05), 0 6px 12px rgba(16, 17, 18, .08);
  --shadow-lg: 0 8px 16px rgba(16, 17, 18, .08), 0 20px 40px rgba(16, 17, 18, .12);
  --shadow-focus: 0 0 0 3px rgba(17, 17, 19, .12);

  /* ---- 角丸 ---- */
  --radius-sm: 6px;   /* バッジ */
  --radius-md: 8px;   /* 入力/ボタン */
  --radius-lg: 12px;  /* カード/モーダル */

  /* ---- 余白スケール ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  /* ---- レイアウト寸法 ---- */
  --nav-w: 232px;
  --topbar-h: 60px;
  --tabbar-h: 66px;

  /* ---- カレンダー: 土日祝の淡いセル背景(モノトーン内の濃淡差のみ) ---- */
  --color-cal-sat: #f4f4f5;
  --color-cal-sun: #eaeaec;

  --font-sans: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN",
    "Noto Sans JP", Meiryo, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  color: var(--color-text-secondary);
}

body {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; }
button { font-family: inherit; }
svg { flex-shrink: 0; }

h1, h2, h3 { margin: 0 0 12px; font-weight: 600; color: var(--color-text); letter-spacing: -0.01em; }
h1 { font-size: 25px; line-height: 1.3; }
h2 { font-size: 17px; line-height: 1.4; }
h3 { font-size: 13.5px; line-height: 1.4; color: var(--color-text-secondary); }
p { margin: 0 0 8px; }
ul { margin: 0; padding: 0; list-style: none; }

.muted { color: var(--color-text-muted); font-size: 13px; }
.loading { color: var(--color-text-muted); padding: 32px 0; text-align: center; }
.error-text { color: var(--color-danger); }
.hint { color: var(--color-text-muted); font-size: 13px; margin: 0 0 14px; line-height: 1.6; }

/* 旧来のシンプルな空状態(念のため残置。各画面は .empty-state 構造化ブロックへ移行済み) */
.empty { color: var(--color-text-muted); padding: 24px 0; text-align: center; }

/* ============ ブランドマーク(アイコンバッジ) ============ */
.icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-md);
}
.icon-badge svg { display: block; }
.icon-badge--sm { width: 28px; height: 28px; border-radius: 7px; }
.icon-badge--sm svg { width: 16px; height: 16px; }
.icon-badge--lg { width: 48px; height: 48px; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.icon-badge--lg svg { width: 26px; height: 26px; }

/* ============ トップバー ============ */
.topbar {
  display: none;
  position: sticky;
  top: 0;
  z-index: 20;
  height: var(--topbar-h);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}
.topbar-inner {
  height: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 8px;
}
.topbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.topbar-title {
  font-weight: 600;
  font-size: 15.5px;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  letter-spacing: -0.005em;
}
.topbar-user { display: flex; align-items: center; gap: 12px; flex-shrink: 0; min-width: 0; }
.user-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-text);
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  flex-shrink: 0;
  letter-spacing: 0;
}
.topbar-user-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.3;
  min-width: 0;
}
.user-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-text);
  max-width: 30vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-tenant { font-size: 11.5px; color: var(--color-text-muted); white-space: nowrap; }
.topbar-divider {
  width: 1px;
  height: 22px;
  background: var(--color-border);
  flex-shrink: 0;
}
.btn-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0 12px;
  min-height: 36px;
  color: var(--color-text-secondary);
  text-decoration: none;
  cursor: pointer;
  font-size: 13px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn-link:hover { background: var(--color-surface-hover); border-color: var(--color-border-strong); color: var(--color-text); }
.btn-link svg { width: 15px; height: 15px; }
@media (max-width: 480px) {
  .topbar-title { font-size: 13.5px; }
  .user-tenant { display: none; }
  .user-name { max-width: 22vw; }
  .topbar-inner { padding: 0 12px; gap: 6px; }
  .topbar-user { gap: 8px; }
  .user-avatar { display: none; }
  .btn-link span.btn-link-label { display: none; }
  .btn-link { padding: 0; width: 36px; justify-content: center; }
}

body[data-authed="true"] .topbar { display: block; }

/* ============ レイアウト / サイドナビ ============ */
.layout {
  display: flex;
  align-items: flex-start;
}
.sidenav {
  display: none;
  flex: 0 0 var(--nav-w);
  width: var(--nav-w);
  border-right: 1px solid var(--color-border);
  background: var(--color-surface);
  padding: 20px 12px;
  gap: 2px;
  flex-direction: column;
  min-height: calc(100vh - var(--topbar-h));
  position: sticky;
  top: var(--topbar-h);
}
.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px 9px 16px;
  min-height: 40px;
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--color-text-muted);
  font-size: 13.5px;
  font-weight: 500;
  transition: background-color .15s ease, color .15s ease;
}
.nav-item:hover { background: var(--color-surface-hover); color: var(--color-text-secondary); }
.nav-icon {
  display: inline-flex;
  color: inherit;
  flex-shrink: 0;
}
.nav-icon svg { width: 18px; height: 18px; display: block; }
.nav-item.active {
  color: var(--color-text);
  font-weight: 600;
  background: var(--color-surface-sunken);
}
.nav-item.active::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 16px;
  border-radius: 2px;
  background: var(--color-text);
}

.view {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 24px 16px calc(96px + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 900px) {
  body[data-authed="true"] .sidenav { display: flex; }
  .view { padding: 40px 40px 56px; }
}

/* ログイン画面(未認証)は .view の余白/最大幅の制約を外し、背景を画面全体に敷く */
body[data-authed="false"] .view {
  max-width: none;
  width: 100%;
  padding: 0;
  margin: 0;
}

/* ============ モバイル タブバー ============ */
.tabbar {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -1px 3px rgba(16, 17, 18, .05);
  z-index: 30;
}
body[data-authed="true"] .tabbar {
  display: flex;
}
@media (min-width: 900px) {
  .tabbar { display: none !important; }
}
.tab-item {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 44px;
  text-decoration: none;
  color: var(--color-text-faint);
  font-size: 11px;
  padding: 6px 2px 0;
  transition: color .15s ease;
}
.tab-icon svg { width: 20px; height: 20px; display: block; }
.tab-item .tab-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  font-weight: 500;
}
.tab-item.active { color: var(--color-text); }
.tab-item.active .tab-label { font-weight: 600; }
.tab-item.active::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 2.5px;
  border-radius: 2px;
  background: var(--color-text);
}
@media (max-width: 420px) {
  .tab-item { font-size: 10.5px; }
  .tab-icon svg { width: 19px; height: 19px; }
}

@media (max-width: 899px) {
  body[data-authed="true"] .view { padding-bottom: calc(var(--tabbar-h) + 24px); }
}

/* ============ ボタン ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease, transform .1s ease;
}
.btn:hover { background: var(--color-surface-hover); border-color: var(--color-border-strong); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.btn-primary {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
  box-shadow: 0 1px 2px rgba(16, 17, 18, .12), 0 1px 3px rgba(16, 17, 18, .1);
}
.btn-primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); box-shadow: var(--shadow-md); }
.btn-danger { background: var(--color-danger); color: #fff; border-color: var(--color-danger); }
.btn-danger:hover { background: var(--color-danger-hover); border-color: var(--color-danger-hover); }
/* 赤枠+白背景。塗りつぶしの .btn-danger は「実行」専用にして、行・日見出しの取消ボタンと見分ける。 */
.btn-danger-outline { background: var(--color-surface); color: var(--color-danger); border-color: var(--color-danger-border); }
.btn-danger-outline:hover { background: var(--color-danger-tint); border-color: var(--color-danger); color: var(--color-danger-hover); }
.btn-block { width: 100%; }
.btn-sm { min-height: 44px; padding: 6px 14px; font-size: 12.5px; white-space: nowrap; }
.btn-group { display: flex; flex-wrap: wrap; gap: 8px; }
.btn-group .btn-danger { margin-left: 4px; }

@media (min-width: 900px) {
  .btn { min-height: 40px; }
  .btn-sm { min-height: 32px; padding: 5px 12px; }
}

/* ============ カード / セクション ============ */
.card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-bottom: var(--space-4);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}
.section { margin-bottom: 36px; }
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.view-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.view-header h1 { margin-bottom: 0; }

/* 設定画面: テナント向け設定とシステム管理者向け設定の区切り */
.settings-system-divider { margin: 8px 0 28px; }
.settings-system-divider hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 0 0 12px;
}
.settings-system-label {
  margin: 0;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--color-text-muted);
  letter-spacing: .03em;
}

/* ============ ダッシュボード ============ */
.pause-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--color-primary);
  color: #fff;
  padding: 12px 16px;
  border-radius: var(--radius-lg);
  margin-bottom: 24px;
  font-size: 13.5px;
  font-weight: 500;
  box-shadow: var(--shadow-md);
}
.pause-banner svg { width: 18px; height: 18px; flex-shrink: 0; opacity: .9; }
.muni-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 700px) {
  .muni-grid { grid-template-columns: repeat(2, 1fr); }
  /* 2カラム時、自治体が奇数枚で最後の1枚だけ余る場合は行全体に広げて余白を詰める */
  .muni-grid > .muni-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 1040px) {
  .muni-grid { grid-template-columns: repeat(3, 1fr); }
  .muni-grid > .muni-card:last-child:nth-child(odd) { grid-column: auto; }
}
.muni-card { padding: 22px; }
.muni-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.muni-card-head h2 { margin: 0; font-size: 16px; }
.stat-row { display: flex; gap: 8px; margin: 16px 0; }
.stat {
  flex: 1;
  text-align: center;
  padding: 12px 4px 10px;
  background: var(--color-bg);
  border-radius: var(--radius-md);
}
.stat-num { display: block; font-size: 23px; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: var(--color-text); }
.stat-label { display: block; font-size: 11px; color: var(--color-text-muted); margin-top: 3px; }
.muni-next h3 { font-size: 12px; font-weight: 600; color: var(--color-text-muted); margin: 12px 0 6px; text-transform: none; letter-spacing: .01em; }
.muni-next li { font-size: 13px; padding: 3px 0; color: var(--color-text-secondary); }

.danger-card { border-color: var(--color-danger-border); background: var(--color-danger-tint); }
.danger-card h2 { color: var(--color-danger); font-size: 14.5px; }
.failure-list li {
  padding: 12px 0;
  border-top: 1px solid var(--color-danger-border);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.failure-list li:first-child { border-top: none; }
.error-text.block { display: block; width: 100%; margin-top: 4px; font-size: 13px; }

/* ============ アラート帯(条件付き表示: failed / 当選未確定) ============ */
.alert-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  margin-bottom: 20px;
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface-sunken);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.alert-banner--danger {
  border-color: var(--color-danger-border);
  background: var(--color-danger-tint);
}
.alert-banner > svg { width: 19px; height: 19px; flex-shrink: 0; margin-top: 1px; color: var(--color-text); }
.alert-banner--danger > svg { color: var(--color-danger); }
.alert-banner-body { flex: 1 1 auto; min-width: 0; }
.alert-banner-body p { margin: 0 0 3px; font-size: 13.5px; font-weight: 500; color: var(--color-text-secondary); line-height: 1.5; }
.alert-banner--danger .alert-banner-body p { color: var(--color-danger); }
.alert-banner-body p:last-child { margin-bottom: 0; }
.alert-banner-actions { display: flex; gap: 8px; flex-wrap: wrap; flex-shrink: 0; }
/* スマホでは本文とボタンを横に並べると本文が1行3〜4文字まで潰れる。ボタンは下段へ回す。 */
@media (max-width: 560px) {
  .alert-banner { flex-wrap: wrap; }
  .alert-banner-actions { width: 100%; }
}

/* ============ 月カレンダー(ホームの主役) ============ */
.cal-card { padding: 20px 18px 22px; }
.cal-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.cal-filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  background: var(--color-bg);
  padding: 3px;
  border-radius: var(--radius-md);
}
.cal-filter-btn {
  border: none;
  background: transparent;
  padding: 7px 12px;
  min-height: 32px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.cal-filter-btn:hover { color: var(--color-text); }
.cal-filter-btn.active {
  background: var(--color-surface);
  color: var(--color-text);
  font-weight: 600;
  box-shadow: var(--shadow-xs);
}
.cal-month-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cal-month-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
  min-width: 92px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.cal-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.cal-nav-btn:hover { background: var(--color-surface-hover); border-color: var(--color-border-strong); }
.cal-nav-btn svg { width: 14px; height: 14px; }

.cal-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--color-border);
}
.cal-legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--color-text-muted); }
.cal-legend-swatch {
  width: 15px;
  height: 12px;
  padding: 0;
  min-height: 0;
  line-height: 1;
}
/* 凡例のスワッチは無地(テキストなし)のため、実チップより濃い枠色にして視認性を上げる
   (実際のカレンダーのチップは中の文字色で状態が伝わるが、凡例は枠のみで伝える必要があるため) */
.cal-legend-swatch.cal-chip--failed { border-color: var(--color-danger); border-width: 1.5px; }
.cal-legend-swatch.cal-chip--submitted { border-color: var(--color-text-secondary); }
.cal-legend-swatch.cal-chip--planned { border-color: var(--color-text-muted); }
.cal-legend-note { font-size: 11.5px; color: var(--color-text-faint); }

.cal-dow-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 5px;
}
.cal-dow-row span {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted);
  padding: 2px 0 6px;
}

.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
  gap: 2px;
  min-height: 54px;
  padding: 4px 3px 5px;
  border: 1px solid var(--color-border);
  border-radius: 7px;
  background: var(--color-surface);
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.cal-cell:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-xs); }
.cal-cell:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.cal-cell:disabled { cursor: default; }
.cal-cell--outside { background: var(--color-bg); }
.cal-cell--outside .cal-cell-date { color: var(--color-text-faint); }
.cal-cell--sat:not(.cal-cell--outside) { background: var(--color-cal-sat); }
.cal-cell--sun:not(.cal-cell--outside) { background: var(--color-cal-sun); }
.cal-cell--today { border-color: var(--color-text); box-shadow: inset 0 0 0 1px var(--color-text); }

.cal-cell-head { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.cal-cell-date { font-size: 12px; font-weight: 600; color: var(--color-text); font-variant-numeric: tabular-nums; }
.cal-cell-date--today {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-text);
  color: #fff;
  font-size: 10.5px;
}
.cal-cell-count {
  font-size: 9.5px;
  font-weight: 600;
  color: var(--color-text-faint);
  font-variant-numeric: tabular-nums;
}

.cal-cell-chips { display: none; }
.cal-cell-dots { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; margin-top: 1px; }
.cal-dot { width: 6.5px; height: 6.5px; border-radius: 50%; flex-shrink: 0; background: transparent; }
.cal-dot--confirmed { background: var(--color-text); }
.cal-dot--won { background: var(--color-surface); border: 1.6px solid var(--color-text); }
.cal-dot--failed { background: var(--color-danger); }
.cal-dot--submitted { background: var(--color-surface); border: 1.3px solid var(--color-border-strong); }
.cal-dot--planned { background: var(--color-surface); border: 1.3px dashed var(--color-text-faint); }

.cal-chip {
  display: block;
  font-size: 9.5px;
  font-weight: 500;
  line-height: 13px;
  padding: 1px 4px;
  border-radius: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 0;
}
.cal-chip--confirmed { background: var(--color-text); color: #fff; border: 1px solid var(--color-text); }
.cal-chip--won {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-text);
  box-shadow: inset 0 0 0 1px var(--color-text);
  font-weight: 700;
}
.cal-chip--submitted { background: var(--color-surface); color: var(--color-text-secondary); border: 1px solid var(--color-border-strong); }
.cal-chip--failed { background: var(--color-danger-tint); color: var(--color-danger); border: 1px solid var(--color-danger-border); font-weight: 600; }
.cal-chip--planned { background: transparent; color: var(--color-text-muted); border: 1px dashed var(--color-border-strong); }
.cal-chip--more { background: var(--color-surface-sunken); color: var(--color-text-muted); border: 1px solid var(--color-border); font-weight: 700; text-align: center; }

@media (min-width: 900px) {
  .cal-card { padding: 24px 24px 26px; }
  .cal-grid { gap: 5px; }
  .cal-cell { min-height: 92px; padding: 6px 6px 8px; gap: 4px; border-radius: 8px; }
  .cal-cell-date { font-size: 13px; }
  .cal-cell-date--today { width: 20px; height: 20px; font-size: 11.5px; }
  .cal-cell-count { font-size: 10.5px; }
  .cal-cell-chips { display: flex; flex-direction: column; gap: 2px; }
  .cal-cell-dots { display: none; }
  .cal-month-label { min-width: 108px; }
}

/* ============ 次の自動実行タイムライン ============ */
.next-run-list { display: flex; flex-direction: column; }
.next-run-item {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 11px 0;
  border-top: 1px solid var(--color-border);
}
.next-run-item:first-child { border-top: none; padding-top: 2px; }
.next-run-icon { color: var(--color-text-faint); flex-shrink: 0; margin-top: 1px; }
.next-run-icon svg { width: 16px; height: 16px; display: block; }
.next-run-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.next-run-title { font-size: 13.5px; font-weight: 500; color: var(--color-text); }
.next-run-meta { font-size: 12px; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.next-run-rel { margin-left: 6px; color: var(--color-text-faint); }

/* ============ バッジ ============ */
.badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: var(--radius-sm);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 17px;
  white-space: nowrap;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
}
.badge[data-variant="outline-gray"] { border-color: var(--color-border); color: var(--color-text-muted); background: var(--color-surface); }
.badge[data-variant="outline-black"] { border-color: var(--color-text); color: var(--color-text); background: var(--color-surface); }
.badge[data-variant="fill-black"] { border-color: var(--color-text); background: var(--color-text); color: #fff; }
.badge[data-variant="fill-gray"] { border-color: var(--color-border); background: var(--color-surface-sunken); color: var(--color-text-muted); }
.badge[data-variant="outline-red"] { border-color: var(--color-danger-border); color: var(--color-danger); background: var(--color-danger-tint); }

/* 当選(won)は業務上最重要のため、他の黒塗りバッジ(申込済/確定/予約済)と
   一目で区別できるよう二重枠+太字で強調する(モノトーン内・色は増やさない) */
.badge.badge-won {
  font-weight: 700;
  outline: 2px solid var(--color-text);
  outline-offset: 2px;
}

/* ============ フィルタ / ツールバー ============ */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  margin-bottom: 20px;
}
.filter-bar .field { min-width: 160px; margin-bottom: 0; }

/* ============ フォーム ============ */
.field { display: block; margin-bottom: 16px; }
.field-label { display: block; font-size: 12.5px; font-weight: 500; color: var(--color-text-muted); margin-bottom: 5px; }
.field-row { display: flex; gap: 12px; flex-wrap: wrap; }
.field-row .field { flex: 1; min-width: 120px; }
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="date"], input[type="time"], input[type="month"], select, textarea {
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 14px;
  font-family: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}
select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2020%2020'%20fill='none'%3E%3Cpath%20d='M5.5%208l4.5%204.5L14.5%208'%20stroke='%2371717a'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
  padding-right: 34px;
}
textarea { min-height: 88px; padding: 10px 12px; resize: vertical; font-family: ui-monospace, monospace; font-size: 13px; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--color-text-faint);
  box-shadow: var(--shadow-focus);
}
input::placeholder, textarea::placeholder { color: var(--color-text-faint); }
.checkbox-row { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; color: var(--color-text-secondary); }
.checkbox-row input { width: auto; min-height: auto; }
.chip-group { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 8px 13px;
  min-height: 40px;
  font-size: 13px;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.chip-label:hover { background: var(--color-surface-hover); border-color: var(--color-border-strong); }
.chip-label input { width: auto; }
.form-error {
  color: var(--color-danger);
  font-size: 13px;
  margin: -4px 0 14px;
  padding: 10px 12px;
  background: var(--color-danger-tint);
  border: 1px solid var(--color-danger-border);
  border-radius: var(--radius-md);
}
.field-hint { display: block; font-size: 11.5px; color: var(--color-text-muted); margin-top: 5px; }
fieldset { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 14px; margin: 0 0 16px; }
legend { font-size: 12.5px; font-weight: 500; color: var(--color-text-muted); padding: 0 6px; }

@media (min-width: 900px) {
  .checkbox-row { min-height: 40px; }
}

/* ============ 認証画面(ログイン) ============ */
.auth-wrap {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background:
    radial-gradient(circle at 18% 18%, rgba(17, 17, 19, .05), transparent 42%),
    radial-gradient(circle at 84% 82%, rgba(17, 17, 19, .045), transparent 45%),
    linear-gradient(180deg, #fbfbfc 0%, #f2f2f4 100%);
  overflow: hidden;
}
.auth-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(17, 17, 19, .05) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 42%, black 0%, transparent 72%);
  mask-image: radial-gradient(ellipse 60% 50% at 50% 42%, black 0%, transparent 72%);
  pointer-events: none;
}
.auth-card {
  position: relative;
  width: 100%;
  max-width: 400px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 40px 36px 36px;
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
}
.auth-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  margin-bottom: 28px;
}
.auth-brand-text { display: flex; flex-direction: column; gap: 3px; }
.auth-brand-name { font-size: 16px; font-weight: 600; color: var(--color-text); letter-spacing: -0.01em; }
.auth-brand-sub { font-size: 12.5px; color: var(--color-text-muted); }
.auth-divider { height: 1px; background: var(--color-border); margin: 0 0 24px; }
.auth-title { font-size: 19px; text-align: center; margin-bottom: 4px; }
.auth-sub { text-align: center; color: var(--color-text-muted); font-size: 13px; margin-bottom: 24px; }
@media (max-width: 420px) {
  .auth-card { padding: 32px 24px 28px; }
}

/* ============ テーブル (PC=表 / スマホ=カード折り返し) ============ */
.table-wrap { overflow-x: hidden; }
table.responsive {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
table.responsive th, table.responsive td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}
table.responsive th { color: var(--color-text-muted); font-weight: 600; font-size: 11.5px; letter-spacing: .02em; }
table.responsive tbody tr { transition: background-color .12s ease; }
table.responsive tbody tr:hover { background: var(--color-surface-hover); }
table.responsive td.col-check, table.responsive th.col-check { width: 44px; }
table.responsive td input[type="date"], table.responsive td input[type="time"],
table.responsive td input[type="number"] { min-height: 34px; padding: 5px 8px; font-size: 13px; }
input.narrow { max-width: 80px; }

@media (min-width: 900px) {
  .table-wrap {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
  }
  table.responsive thead th { background: var(--color-bg); }
  table.responsive tbody tr:last-child td { border-bottom: none; }
  /* 実行ログ表: 短い列は1行固定(日本語が1文字ずつ縦折り返しになるのを防ぐ)。エラー列だけ折り返す。 */
  .jobs-table th, .jobs-table td { white-space: nowrap; vertical-align: middle; }
  .jobs-table td[data-label="エラー"], .jobs-table th:last-child { white-space: normal; min-width: 200px; }
  .jobs-table { table-layout: auto; }

  /* 申込管理・アカウント表も同様に1行固定。列幅の取り合いで「抽選」が1文字ずつ
     縦に割れたり、アカウント名が折り返されるのを防ぐ。施設名だけは長いので折り返す。 */
  .app-table th, .app-table td,
  .accounts-table th, .accounts-table td { white-space: nowrap; vertical-align: middle; }
  .app-table td[data-label="施設"] { white-space: normal; min-width: 200px; }
  /* どうしても収まらない時は文字を潰さず横スクロールに逃がす */
  .table-wrap { overflow-x: auto; }
  /* 見出しの追従(position: sticky)はここでは使えない。
     表は .table-wrap(overflow-x: auto)の中にあり、これがスクロール領域になるため
     top はページ上端ではなく「表の上端からの距離」として解かれる。結果、見出しは
     ページスクロールに追従せず、表の1行目に重なったまま固定されて操作ボタンを覆う。
     追従させるなら .table-wrap を縦スクロール領域にする作りから変える必要がある。 */
}

/* チェックボックスの見た目は小さいまま、タップ判定は44x44pxに拡大 */
.row-check-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  cursor: pointer;
}

@media (max-width: 899px) {
  table.responsive thead { display: none; }
  table.responsive, table.responsive tbody, table.responsive tr, table.responsive td {
    display: block;
    width: 100%;
  }
  table.responsive tr {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-xs);
    margin-bottom: 12px;
    padding: 6px 14px;
  }
  table.responsive tbody tr:hover { background: var(--color-surface); }
  table.responsive td {
    border: none;
    padding: 10px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--color-bg);
  }
  table.responsive td:last-child { border-bottom: none; }
  table.responsive td::before {
    content: attr(data-label);
    color: var(--color-text-muted);
    font-size: 12px;
    flex: 0 0 auto;
    margin-right: 8px;
  }
  table.responsive td.col-check {
    justify-content: flex-start;
    width: 100%;
  }
  table.responsive td.col-check::before { content: ''; margin: 0; }
}

/* ============ 一覧上部の全選択バー(スマホのみ。PCはthead全選択を使用) ============ */
.mobile-select-all {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}
@media (min-width: 900px) {
  .mobile-select-all { display: none; }
}

/* ============ 一括操作バー ============ */
.bulk-bar[hidden] { display: none; }
.bulk-bar {
  position: sticky;
  bottom: 0;
  /* 日付見出し(5)より前、トップバー(20)・タブバー(30)より後ろ。 */
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 12px 16px;
  margin: 14px 0;
  box-shadow: var(--shadow-md);
}
@media (max-width: 899px) {
  .bulk-bar { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 8px); }
}

/* ============ モーダル / ドロワー ============ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(17, 17, 19, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 100;
}
.modal-overlay[hidden] { display: none; }
.modal-overlay--drawer { justify-content: flex-end; padding: 0; }
.modal-panel {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 24px;
  width: 100%;
  max-width: 480px;
  max-height: 85vh;
  overflow: auto;
  box-shadow: var(--shadow-lg);
}
.modal-panel--drawer {
  max-width: 420px;
  height: 100%;
  max-height: 100%;
  border-radius: 0;
}
@media (max-width: 899px) {
  .modal-panel--drawer { max-width: 100%; }
}
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
/* ⚠️ スマホ(<900px)ではドロワーが画面全体を覆い、オーバーレイをタップして閉じる余白が
   0px になる。iPhoneにはEscキーも無いので、中身が長いドロワーは「閉じる手段が最下部だけ」
   になって戻れなくなる (2026-08-20: 95件の確認ドロワーで最下部まで約5.7画面)。
   見出しと操作ボタンは必ず貼り付けて、どこまでスクロールしても1タップで閉じられるようにする。 */
.modal-drawer-head {
  position: sticky;
  top: -24px;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin: -24px -24px 12px;
  padding: 24px 24px 12px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.modal-drawer-head .modal-title { margin-bottom: 0; }
.modal-sticky-actions {
  position: sticky;
  bottom: -24px;
  z-index: 2;
  margin: 20px -24px -24px;
  padding: 12px 24px calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
}
.modal-sticky-actions[hidden] { display: none; }
.modal-sticky-actions .modal-actions { margin-top: 8px; }
.modal-sticky-actions .hint,
.modal-sticky-actions .error-text { margin: 0; font-size: 12.5px; }
.modal-title { margin-bottom: 18px; }
.modal-title-badge { margin-left: 8px; }
body.modal-open { overflow: hidden; }

/* ============ カレンダー日詳細ドロワー ============ */
.day-drawer-list { display: flex; flex-direction: column; gap: 12px; }
.day-drawer-row {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
}
.day-drawer-row-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.day-drawer-muni { font-size: 12px; font-weight: 600; color: var(--color-text-muted); letter-spacing: .01em; }
.day-drawer-facility { font-size: 14.5px; font-weight: 600; color: var(--color-text); margin-bottom: 6px; }
.day-drawer-meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12.5px; color: var(--color-text-secondary); margin-bottom: 8px; }
.day-drawer-link { font-size: 12.5px; font-weight: 500; text-decoration: none; color: var(--color-text); }
.day-drawer-link:hover { text-decoration: underline; }
.day-drawer-empty { padding: 24px 0; text-align: center; }

/* ============ トースト ============ */
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(8px);
  background: var(--color-primary);
  color: #fff;
  padding: 11px 20px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 500;
  z-index: 200;
  opacity: 0;
  box-shadow: var(--shadow-lg);
  transition: opacity .2s ease, transform .2s ease;
  max-width: calc(100% - 32px);
  text-align: center;
}
.toast[hidden] { display: none; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast[data-type="error"] { background: var(--color-danger); }
@media (max-width: 899px) {
  body[data-authed="true"] .toast { bottom: calc(var(--tabbar-h) + 12px); }
}

/* ============ ジョブログ ============ */
.log-line { display: flex; gap: 10px; padding: 6px 0; font-size: 13px; border-bottom: 1px solid var(--color-bg); }
.log-line .log-ts { color: var(--color-text-muted); flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.log-line[data-level="error"] .log-msg { color: var(--color-danger); }
.log-line[data-level="warn"] .log-msg { color: #92400e; }
.artifact-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.artifact-thumb {
  display: block;
  width: 120px;
  height: 90px;
  object-fit: cover;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.artifact-item { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.artifact-item span { font-size: 11px; color: var(--color-text-muted); }

/* ============ グループ見出し(アカウント/自治体) ============ */
.group-title { font-size: 14.5px; margin: 28px 0 10px; }
.group-title:first-child { margin-top: 0; }

/* ============ 空状態(構造化ブロック) ============
   線SVGアイコン(大きめ・薄い) + 見出し + 補助文 + 導線ボタン、を中央配置のカードにまとめる。
   「灰色テキスト1行が浮くだけ」を全廃するための共通コンポーネント。 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 64px 28px;
  margin: 4px 0 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.empty-state-icon {
  color: var(--color-text-faint);
  margin-bottom: 16px;
}
.empty-state-icon svg { width: 46px; height: 46px; display: block; }
.empty-state-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
}
.empty-state-desc {
  margin: 6px 0 0;
  max-width: 380px;
  font-size: 13.5px;
  color: var(--color-text-muted);
  line-height: 1.65;
}
.empty-state-actions {
  margin-top: 22px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.empty-state--compact { padding: 40px 24px; }
.empty-state--compact .empty-state-icon svg { width: 36px; height: 36px; }
/* カード内などで入れ子になる場合、二重の枠/影を避けるための素の版 */
.empty-state--plain {
  background: none;
  border: none;
  box-shadow: none;
  padding: 28px 12px;
  margin: 0;
}
.empty-state--plain .empty-state-icon svg { width: 34px; height: 34px; }

/* 振替(取り直し)フォーム: 誤操作を避けるため既定は折りたたみ、危険操作であることを枠線で示す */
.rebook-box {
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
}
.rebook-box > summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-secondary);
}
.rebook-box > summary:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.rebook-box[open] > summary { margin-bottom: 10px; }
.rebook-box .btn-group { margin-top: 10px; }

/* ============ 翌月の予約整理 (#/organize) ============
   113件をスマホ(390x844)で扱う画面。table.responsive は 1枠=td10個=約400px になり
   113件で4万px超になるため使わず、日付ごとにまとめた専用リストにしている。
   チェックが付いている = 残す。既定は全部チェック(=何もしなければ1件も消えない)。 */
.organize-monthnav { margin-bottom: 14px; }
.organize-note { margin-bottom: 12px; }
.organize-summary { margin-top: 0; }
.organize-done { border-color: var(--color-border-strong); }
.organize-notice { align-items: flex-start; }

.organize-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.organize-bulk-toggle { margin-bottom: 16px; }

/* 日付の見出し。長いリストを上下しても「いま何日を見ているか」を失わないよう追従させる。
   トップバー(z-index:20, 高さ --topbar-h)の下に潜らせる。 */
.organize-day { margin-bottom: 18px; }
.organize-day-head {
  position: sticky;
  top: var(--topbar-h);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 2px;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 8px;
}
.organize-day-date { font-size: 14px; font-weight: 700; color: var(--color-text); }
.organize-day-count { flex: 1 1 auto; font-variant-numeric: tabular-nums; }

.organize-day .day-drawer-list { gap: 8px; }

.organize-row {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 4px 12px 4px 4px;
  background: var(--color-surface);
  transition: background-color .12s ease, opacity .12s ease;
}
/* 行全体がチェックのラベル。スクロール中に狙いを外しても「残す/外す」が確実に押せる。
   「時間変更」ボタンはラベルの外に置く(中に入れるとタップでチェックが反転する)。 */
.organize-row-main {
  display: flex;
  flex: 1 1 auto;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  padding: 8px 0;
  cursor: pointer;
}
.organize-check-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
}
.organize-check-wrap input { width: 20px; height: 20px; }
.organize-row-body { display: block; flex: 1 1 auto; min-width: 0; }
.organize-row-body .day-drawer-row-top { margin-bottom: 4px; justify-content: flex-start; gap: 8px; }
.organize-row-body .day-drawer-facility { display: block; margin-bottom: 4px; font-size: 14px; }
.organize-row-body .day-drawer-meta { margin-bottom: 0; gap: 8px; }
.organize-row-actions { display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 6px; flex: 0 0 auto; padding-left: 6px; }
.organize-row-actions[hidden] { display: none; }
.organize-row-actions .btn { min-width: 84px; }
/* .btn の display 指定に負けて hidden が効かなくなるのを防ぐ(取消側の行では「時間変更」だけ隠す) */
.organize-row-actions .btn[hidden] { display: none; }

/* 取り消す側に倒れている行。色は増やさず、濃淡と打ち消し線だけで見分ける。 */
.organize-row--drop { background: var(--color-surface-sunken); opacity: .6; }
.organize-row--drop .day-drawer-facility,
.organize-row--drop .day-drawer-meta { text-decoration: line-through; }

.organize-attention summary {
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-text-secondary);
}
.organize-attention summary:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.organize-attention details[open] summary { margin-bottom: 12px; }
/* 取り消せなかった枠は、処理中の大量の行に埋めずに単独の一覧で出す */
.organize-failed { border-color: var(--color-danger-border); }
.organize-failed-head { font-size: 14px; margin: 0 0 12px; color: var(--color-danger); }

/* 実行バー: スマホでは2段(内訳→ボタン)。ボタンは常に全幅で押しやすくする。 */
.organize-exec-bar { flex-direction: column; align-items: stretch; gap: 8px; }
.organize-exec-bar .muted { text-align: center; }

/* 最終確認ドロワーの一覧。取り消す枠だけを、折りたたまずに全件出す。 */
.organize-confirm-head { font-size: 14px; margin: 18px 0 8px; }
.organize-confirm-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--color-text-secondary);
}
.organize-confirm-list li { padding: 2px 0; border-bottom: 1px solid var(--color-border); }
.organize-confirm-list li:last-child { border-bottom: none; }
.organize-confirm-day { font-weight: 700; color: var(--color-text); margin-top: 8px; }
.organize-confirm-ack { margin-top: 18px; width: 100%; }

/* 取得したアカウント名(アリバ⑥ など)。市のサイトで照合する時の手掛かりなので目に入る濃さにする。 */
.organize-account { font-weight: 600; color: var(--color-text); white-space: nowrap; }

/* アカウント名のボタン。押すとID・パスワード・予約サイトへのリンクのダイアログが開く(admin のみ)。
   文字のまま見せて、押せることは点線の下線で示す。スマホで押し損じないよう上下に余白を持たせる。 */
.account-link {
  appearance: none; background: none; border: 0; margin: 0; padding: 6px 0;
  font: inherit; font-weight: 600; color: var(--color-text); white-space: nowrap;
  text-decoration: underline dotted; text-underline-offset: 3px;
  cursor: pointer; touch-action: manipulation;
}
.account-link:hover { color: var(--color-text-secondary); }
.account-link:focus-visible { outline: 2px solid var(--color-text); outline-offset: 2px; border-radius: 2px; }

/* アカウント情報ダイアログ */
.cred-who { margin: -8px 0 14px; }
.cred-row { display: flex; align-items: center; gap: 8px; }
.cred-value {
  flex: 1 1 auto; min-width: 0; padding: 10px 12px;
  background: var(--color-surface-sunken); border: 1px solid var(--color-border); border-radius: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 16px;
  word-break: break-all; user-select: all; -webkit-user-select: all;
}
.cred-actions .btn { min-height: 44px; }
.cred-actions a.btn { display: inline-flex; align-items: center; text-decoration: none; }

/* 再確認。確認ドロワーの上に重ねる小さな確認画面。common.js の confirmDialog は
   モーダルのパネルを使い回して下の一覧を消してしまうため、ドロワーの中に専用の層を持つ。 */
.reconfirm[hidden] { display: none; }
.reconfirm {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(17, 17, 19, .55);
}
.reconfirm-box {
  width: 100%;
  max-width: 380px;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 22px 22px 18px;
  box-shadow: var(--shadow-lg);
}
.reconfirm-title { font-size: 17px; margin: 0 0 10px; }
.reconfirm-line { margin: 0 0 6px; font-size: 14px; line-height: 1.6; color: var(--color-text-secondary); }
.reconfirm .modal-actions { margin-top: 18px; }
.reconfirm .modal-actions .btn { flex: 1 1 0; min-height: 44px; }

/* 時間変更の実行状況。実行中・完了・失敗を、押した後も画面の上に残す。 */
.organize-rebook-head { font-size: 14px; margin: 0 0 12px; }
.organize-rebook--failed { border-color: var(--color-danger-border); }
.organize-rebook--failed .organize-rebook-head { color: var(--color-danger); }
.organize-rebook-item--failed { border-color: var(--color-danger-border); }

@media (min-width: 900px) {
  .organize-row { align-items: center; }
  .organize-row-body { display: grid; grid-template-columns: 110px 1fr 110px; align-items: center; gap: 12px; }
  .organize-row-body .day-drawer-row-top { order: 3; margin-bottom: 0; justify-content: flex-end; }
  .organize-row-body .day-drawer-facility { order: 2; margin-bottom: 0; }
  .organize-row-body .day-drawer-meta { order: 1; margin-bottom: 0; }
  .organize-exec-bar { flex-direction: row; align-items: center; }
  .organize-exec-bar .muted { text-align: left; flex: 1 1 auto; }
  .organize-exec-bar .btn-block { width: auto; min-width: 260px; }
}

/* 空き状況検索 */
.availability-form { display:flex; align-items:flex-end; flex-wrap:wrap; gap:12px; }
.availability-form .field { margin:0; flex:1 1 160px; }
.availability-row { align-items:center; }
.availability-row-body { flex:1; min-width:0; overflow-wrap:anywhere; }
.availability-row-body strong { display:block; color:var(--color-text); }
.availability-row > .btn { flex:0 0 auto; }
#av-status details li { margin:8px 0; overflow-wrap:anywhere; }

.availability-form [hidden] { display: none !important; }