/* shared.css — Reserve / Biz 共通の骨子スタイル（Core-UI 共有層・/shared で全アプリへ配信）。
   ここが正本。アプリ固有の色・レイアウトは reserve.css / biz.css が後続で上書きする。
   旧: 各アプリに同一コピーがあった（biz /static/shared.css, reserve /static/css/shared.css）
       → Phase2(2026-06-19) で /shared/shared.css の1本に統合（中身は元から同一）。
   :root はエメラルド既定＝reserve のブランド。biz は biz.css でサージ緑に上書きする。
   詳細・設計: docs/specs/CORE_UI.md */

/* ============ デザイントークン（共通デフォルト） ============ */
:root {
  --primary: #10b981;
  --primary-hover: #059669;
  --primary-light: #ecfdf5;
  --bg-main: #f8fafc;
  --bg-sidebar: #ffffff;
  --card-bg: rgba(255, 255, 255, 0.85);
  --text-main: #0f172a;
  --text-muted: #64748b;
  --border: #e2e8f0;
  --error-bg: #fee2e2;
  --error-text: #991b1b;
  --success-bg: #dcfce7;
  --success-text: #166534;
  --radius: 20px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.03);
  --shadow-md: 0 10px 30px -12px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.03);
  --shadow-lg: 0 20px 40px -15px rgba(16, 185, 129, 0.15), 0 4px 12px rgba(0,0,0,0.05);
  --font-heading: 'Outfit', 'Inter', sans-serif;
  --font-body: 'Inter', -apple-system, sans-serif;

  /* spacing（4pxグリッド） */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* font-size */
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 28px;
  --text-3xl: 34px;
}

/* ============ リセット ============ */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============ Body ============ */
body {
  font-family: var(--font-body);
  background: var(--bg-main);
  color: var(--text-main);
  height: 100vh;
  overflow: hidden;
  display: flex;
}

/* ============ サイドバー ============ */
aside {
  position: relative;   /* 折りたたみボタン（絶対配置）の基準 */
  width: 260px;
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: var(--space-8) var(--space-4);
  flex-shrink: 0;
  z-index: 10;
  transition: width .2s ease, padding .2s ease;
}

aside .logo {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.3px;
  margin-bottom: var(--space-5);
  color: var(--primary);
  padding: 0 12px;
  display: flex;
  align-items: center;
  white-space: nowrap;
}

aside nav ul {
  list-style: none;
}

/* サイドバー展開/折りたたみ時のラベル: display:none の瞬間切替だとパッと
   出現・消滅してガタつく。display を離散トランジション化（allow-discrete）し、
   消える時=フェードアウト後に display:none / 現れる時=@starting-style から
   フェードイン。非対応ブラウザは従来の瞬間切替のまま（安全に劣化） */
/* 展開時: 幅がほぼ広がった後（.12s遅延）にフェードイン＝狭い幅に文字が
   押し込まれる感じを消す。この base 側の transition が「展開方向」に効く */
aside .nav-label {
  opacity: 1;
  transition: opacity .15s ease .12s, display .27s ease;
  transition-behavior: allow-discrete;
}
/* 折りたたみ時: 遅延なしで即フェードアウト→完了後に display:none。
   .collapsed 側の transition が「折りたたみ方向」に効く */
aside.collapsed .nav-label {
  opacity: 0;
  transition: opacity .12s ease, display .12s ease;
  transition-behavior: allow-discrete;
}
@starting-style {
  aside .nav-label { opacity: 0; }
}

aside nav li {
  padding: 10px 14px;
  border-radius: 12px;
  margin-bottom: var(--space-1);
  cursor: pointer;
  transition: all 0.18s ease;
  color: var(--text-muted);
  font-weight: 500;
  font-size: 15px;
  /* 折りたたみの幅アニメーション中にラベルが2行に折り返すと項目の高さが
     ボコボコ変わってガタつく。折り返さず、はみ出た分はクリップする */
  white-space: nowrap;
  overflow: hidden;
  /* ラベルの行ボックス（既定 line-height ≈ 22.5px）がアイコン（22px）より
     わずかに高く、開閉でラベルが出入りすると項目高さが±3px 変わり
     下の項目ほど縦にズレる。アイコン高さに固定して項目高さを不変にする */
  line-height: 22px;
}

aside nav li:hover {
  background: var(--primary-light);
  color: var(--primary);
}

aside nav li.active {
  background: var(--primary);
  color: white;
}

.sidebar-bottom {
  margin-top: auto;
  padding: 0 12px;
}

/* 管理者モードバナー（admin ロール時にサイドバーへ表示） */
.admin-banner {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 12px 20px;
  padding: 9px 12px;
  background: #eef2ff;
  color: #4338ca;
  border: 1px solid #c7d2fe;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2px;
}

/* サイドバー内グループ/企業名バナー（Reserve・Biz 共通） */
.group-banner,
.admin-badge {
  display: block;
  margin: 0 12px 16px;
  padding: 10px 14px;
  background: var(--primary-light, #e7f0ea);
  color: var(--primary, #3f6b52);
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  word-break: break-all;
}

/* バナー類（管理者モード・グループ・Bizモードバッジ）の折りたたみ時の消滅を
   高さごとアニメ化する。display flip（即時）だと下の nav が縦にガタつくため、
   max-height + opacity + 余白の遷移で潰す（JS は inline の display しか触らない
   ので display には依存しない）。展開方向も同じ遷移で滑らかに戻る */
.admin-banner,
.group-banner,
.admin-badge {
  /* max-height は実高さに近い値にする。大きすぎると「max-height が実高さを
     下回るまで縮まらない」デッドタイムが生まれ、head の伸縮と合成した nav の
     動きが数 px バウンスする（1行固定なので実高さは決定的） */
  max-height: 42px;
  overflow: hidden;
  /* 1行固定。幅アニメーション中に折り返すと高さが一瞬膨らみ nav がバウンスする。
     長い名前は省略記号で切る（word-break より開閉が安定） */
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: max-height .2s ease, opacity .15s ease, margin .2s ease,
              padding .2s ease, border-width .2s ease;
}
.admin-badge { max-height: 30px; }   /* Biz モードバッジは1行29px */
aside.collapsed .admin-banner,
aside.collapsed .group-banner,
aside.collapsed .admin-badge {
  max-height: 0;
  opacity: 0;
  margin-top: 0; margin-bottom: 0;
  padding-top: 0; padding-bottom: 0;
  border-width: 0;
}

/* ============ カード ============ */
.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  margin-bottom: var(--space-5);
  box-shadow: var(--shadow-sm);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: box-shadow 0.25s ease;
}

.card:hover {
  box-shadow: var(--shadow-md);
}

.card h2 {
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 700;
  margin-bottom: var(--space-2);
  color: var(--text-main);
}

/* 折りたたみ開閉等でページ高さが変わるとスクロールバーが出たり消えたりして
   コンテンツ幅が十数px動く＝画面全体がガタつく。バーの場所を常に確保して防ぐ */
main { scrollbar-gutter: stable; }

/* チェックボックス/ラジオはブラウザ標準の青のままだとブランド色（緑）と喧嘩する。
   accent-color はネイティブ部品の色だけを変える標準機能＝フォーカスリング等の
   アクセシビリティは無料で維持。--primary はアプリごとに違うので各ブランド色に自動追従 */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--primary);
}

/* ============ 折りたたみカード（設定画面・既定は閉じ）／Reserve・Biz 共通 ============ */
/* ヘッダークリックで開閉。閉じていてもタイトル＋状態で「今の設定」が分かる。
   色は各アプリの --text-muted（biz=サージ寄りグレー / reserve=スレートグレー）を参照。 */
.card.fold > .fold-head {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
/* 見出しは縮められるようにする（flex-shrink:0 だと狭い幅で全幅を主張し、
   右端のバッジ・シェブロンをカードの外へ押し出す。長いタイトルは折り返す） */
.card.fold > .fold-head h2,
.card.fold > .fold-head h3 { margin: 0; min-width: 0; }
.card.fold > .fold-head .fold-status {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}
.card.fold > .fold-head .fold-chevron {
  margin-left: auto;   /* 状態バッジが無いときは右端へ */
  font-size: 12px;
  color: var(--text-muted);
  transition: transform 0.2s;
  flex-shrink: 0;
}
/* 状態バッジがあるときはそちらが右寄せを担い、シェブロンは隣に置く */
.card.fold > .fold-head .fold-status ~ .fold-chevron { margin-left: 8px; }
.card.fold.collapsed > .fold-head .fold-chevron { transform: rotate(-90deg); }
/* grid 方式の折りたたみ（brand.js が body を .fold-grid 化し中身を
   .fold-grid-inner で包む）。0fr↔1fr で中身の実高さちょうどを遷移＝旧
   max-height:3000px の空走りが無くカクつかない。opacity / margin-top も
   同じ duration・easing に揃え、高さと色がズレて終わる違和感を消す。 */
.card.fold > .fold-body {
  opacity: 1;
  margin-top: var(--space-4);
  transition: opacity 0.22s cubic-bezier(0.4, 0, 0.2, 1),
              margin-top 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
.card.fold > .fold-body.fold-grid {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.22s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.22s cubic-bezier(0.4, 0, 0.2, 1),
              margin-top 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
.fold-grid-inner { overflow: hidden; }
.card.fold.collapsed > .fold-body { opacity: 0; margin-top: 0; }
.card.fold.collapsed > .fold-body.fold-grid { grid-template-rows: 0fr; }

/* ============ LINE 設定ステップ（折り畳み）／Reserve・Biz 共通 ============ */
/* 色は各アプリの変数を参照（--bg-main / --text-muted / --primary）＝ブランド別に追従。
   ステータスバッジ・注記の固定色は両アプリ共通。 */
.line-setup-step {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 14px;
  background: var(--bg-main);
}
.line-step-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.line-step-chevron {
  font-size: var(--text-xs);
  color: var(--text-muted);
  transition: transform 0.2s;
  margin-left: auto;
  flex-shrink: 0;
}
.line-setup-step.collapsed .line-step-chevron { transform: rotate(-90deg); }
.line-step-body {
  opacity: 1;
  transition: opacity 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
.line-step-body.fold-grid {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.22s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
.line-setup-step.collapsed .line-step-body { opacity: 0; }
.line-setup-step.collapsed .line-step-body.fold-grid { grid-template-rows: 0fr; }
.line-setup-step.collapsed .line-step-header { margin-bottom: 0; }
.line-step-num {
  background: var(--primary);
  color: white;
  font-size: var(--text-xs);
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 99px;
  white-space: nowrap;
}
.line-step-title { font-size: var(--text-base); font-weight: 700; flex: 1; }
.line-step-status {
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 99px;
  background: #f3f4f6;
  color: #6b7280;
  white-space: nowrap;
}
.line-step-status.ok      { background: #dcfce7; color: #166534; }
.line-step-status.partial { background: #fef9c3; color: #854d0e; }
.line-step-note {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: var(--text-xs);
  color: #78350f;
  margin-bottom: var(--space-3);
  line-height: 1.6;
}
.line-step-note .note-icon { font-size: 15px; flex-shrink: 0; margin-top: 1px; }
.line-step-note strong     { color: #92400e; }
.line-step-note.info { background: #eff6ff; border-color: #93c5fd; color: #1e3a5f; }
.line-step-note.info strong { color: #1e40af; }
.line-field-label { font-size: 13px; font-weight: 600; display: block; margin-bottom: 6px; }
.line-field-src { font-size: var(--text-xs); font-weight: 400; color: var(--text-muted); }

/* ============ テーブル ============ */
table {
  width: 100%;
  border-collapse: collapse;
}

th {
  text-align: left;
  padding: 14px 16px;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  background: var(--bg-main);
  white-space: nowrap; /* 「メニュ/ー」「担/当」の縦割れ防止 */
}

/* 表内の操作ボタン（編集など）も縦割れさせない */
td button { white-space: nowrap; }

td {
  padding: 14px 16px;
  font-size: 15px;
  border-bottom: 1px solid var(--border);
  color: var(--text-main);
}

tr:last-child td {
  border-bottom: none;
}

/* ============ フォーム ============ */
input, select, textarea {
  font-family: var(--font-body);
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: white;
  font-size: var(--text-md);
  transition: all 0.2s;
  color: var(--text-main);
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

/* ============ ボタン ============ */
button {
  font-family: var(--font-body);
  background: var(--primary);
  color: white;
  border: 1px solid transparent;
  padding: 10px 20px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

button:hover {
  background: var(--primary-hover);
}

button.secondary {
  background: white;
  color: var(--text-main);
  border: 1px solid var(--border);
  box-shadow: none;
}

button.secondary:hover {
  background: var(--bg-main);
  border-color: var(--primary);
  color: var(--primary);
}

/* ============ バッジ ============ */
.badge {
  padding: 4px 12px;
  border-radius: 99px;
  font-size: var(--text-xs);
  font-weight: 600;
  display: inline-flex;
  white-space: nowrap; /* 「キャンセ/ル」の縦割れ防止 */
}

.badge-success { background: var(--success-bg); color: var(--success-text); }
.badge-error   { background: var(--error-bg);   color: var(--error-text); }

/* ロールバッジ（権限を一目で識別） */
.badge-admin {
  background: #4338ca;
  color: white;
  border: 1px solid #3730a3;
  display: inline-flex;
  align-items: center;
  border-radius: 99px;
  font-size: 13px;
  font-weight: 700;
  padding: 5px 14px;
  letter-spacing: 0.3px;
  box-shadow: 0 2px 8px rgba(67,56,202,.30);
}

.badge-owner {
  background: #d97706;
  color: white;
  border: 1px solid #b45309;
  display: inline-flex;
  align-items: center;
  border-radius: 99px;
  font-size: 13px;
  font-weight: 700;
  padding: 5px 14px;
  letter-spacing: 0.3px;
  box-shadow: 0 2px 8px rgba(217,119,6,.30);
}

.badge-tenant {
  background: #16a34a;
  color: white;
  border: 1px solid #15803d;
  display: inline-flex;
  align-items: center;
  border-radius: 99px;
  font-size: 13px;
  font-weight: 700;
  padding: 5px 14px;
  letter-spacing: 0.3px;
  box-shadow: 0 2px 8px rgba(22,163,74,.25);
}

/* ============ モーダル ============ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.25);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.modal {
  background: white;
  border-radius: 20px;
  border: 1px solid var(--border);
  padding: var(--space-8);
  width: 100%;
  max-width: 480px;
  box-shadow: var(--shadow-lg);
}

/* ============ セクション表示制御 ============ */
.content-section {
  display: none;
  animation: fadeUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.content-section.active {
  display: block;
}

.hidden {
  display: none !important;
}

/* ============ アニメーション ============ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes spin {
  from { rotate: 0deg; }
  to   { rotate: 360deg; }
}

/* ============ レスポンシブ ============ */
@media (max-width: 900px) {
  aside {
    width: 180px;
    padding: 24px 10px;
  }
  aside nav li {
    font-size: var(--text-base);
    padding: 10px 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (max-width: 600px) {
  body { overflow: hidden; }

  aside {
    position: fixed;
    inset: 0 auto 0 0;
    width: 240px;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    z-index: 200;
    padding: var(--space-6) var(--space-4);
  }

  aside.open {
    transform: translateX(0);
  }

  aside nav li {
    font-size: 15px;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
}

/* ============ 最優先サマリー帯（.today-summary-bar）＝両アプリ共通部品 ============ */
/* ダッシュボード最上段の「要対応」KPI。薄い枠線1本＋階調差だけで区切る
   （左カラーバー・丸背景アイコン・box-shadow は使わない — DESIGN.md「AIっぽいを避ける」）。
   数値の色は各アプリの JS が 0件=既定グレー / 1件以上=danger で出し分ける。
   Reserve のダッシュボード再設計（2026-07-17）で確立し、Biz と共用するためここへ昇格。 */
.today-summary-bar {
  display: flex;
  gap: var(--space-4);
  margin-bottom: 28px;
}

.today-summary-card {
  flex: 1;
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card-bg);
}

/* font-size は clamp() で 600px→28px, 900px→34px へ線形補間（メディアクエリ2値切替をしない） */
.today-summary-bar .stat-value {
  font-size: clamp(28px, 16px + 2vw, 34px);
  color: var(--text-muted);
  margin-bottom: var(--space-1);
}

.today-summary-bar .stat-label { font-size: var(--text-sm); }

@media (max-width: 600px) {
  /* スマホは横に並べる余白が無いため縦積みにする */
  .today-summary-bar { flex-direction: column; gap: var(--space-4); padding-bottom: var(--space-5); }
}