<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
  <title>RegalCast Management</title>
  <link rel="icon" type="image/svg+xml" href="/favicon.svg"/>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Inter:wght@300;400;500;600;700&family=Noto+Sans+JP:wght@300;400;500;700&display=swap" rel="stylesheet">
  <script>if(location.hostname==='regalcast.co.jp')location.replace('https://regal-cast.com');</script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/exceljs@4.4.0/dist/exceljs.min.js"></script>
  <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>

<!-- ===== LOGIN SCREEN ===== -->
<div id="login-screen">
  <!-- 通常ログインボックス -->
  <div class="login-box" id="login-box-main">
    <div class="login-logomark">RC</div>
    <div class="login-logo">RegalCast</div>
    <div class="login-sub">Management System</div>
    <input class="login-input" id="login-email" type="email" placeholder="メールアドレス" onkeydown="if(event.key==='Enter')document.getElementById('login-pass').focus()">
    <input class="login-input" id="login-pass" type="password" placeholder="パスワード" onkeydown="if(event.key==='Enter')doLogin()">
    <button class="login-btn" id="login-btn" onclick="doLogin()">ログイン</button>
    <div class="login-error" id="login-error"></div>
    <div class="login-reset" onclick="doResetPassword()">パスワードを忘れた方はこちら</div>
    <div style="margin-top:20px;padding-top:16px;border-top:1px solid var(--border)">
      <button onclick="showAllianceLogin()"
        style="width:100%;padding:11px 14px;background:transparent;border:1.5px solid var(--border);border-radius:var(--r-sm);font-size:13px;color:var(--ink3);cursor:pointer;font-family:inherit;font-weight:500;transition:all .15s;text-align:center"
        onmouseover="this.style.borderColor='var(--accent2)';this.style.color='var(--accent2)'"
        onmouseout="this.style.borderColor='var(--border)';this.style.color='var(--ink3)'">
        アライアンスの方はこちら →
      </button>
    </div>
  </div>

  <!-- アライアンスログインボックス -->
  <div class="login-box" id="login-box-alliance" style="display:none">
    <div class="login-logomark" style="background:var(--accent2)">AL</div>
    <div class="login-logo">RegalCast</div>
    <div class="login-sub">Alliance Portal</div>

    <!-- タブ切替 -->
    <div style="display:flex;gap:0;margin-bottom:16px;border:1.5px solid var(--border);border-radius:8px;overflow:hidden">
      <button id="alliance-tab-legacy"
        onclick="showAllianceLegacyTab()"
        class="alliance-tab-active"
        style="flex:1;padding:9px 8px;font-size:12px;font-weight:600;font-family:inherit;border:none;cursor:pointer;transition:all .15s;background:var(--ink);color:#fff">
        既存メンバー
      </button>
      <button id="alliance-tab-password"
        onclick="showAlliancePasswordTab()"
        style="flex:1;padding:9px 8px;font-size:12px;font-weight:600;font-family:inherit;border:none;cursor:pointer;transition:all .15s;background:transparent;color:var(--ink3)">
        新メンバー（6月以降）
      </button>
    </div>
    <style>
      .alliance-tab-active { background: var(--ink) !important; color: #fff !important; }
      #alliance-tab-legacy:not(.alliance-tab-active),
      #alliance-tab-password:not(.alliance-tab-active) { background: transparent !important; color: var(--ink3) !important; }
    </style>

    <!-- 既存メンバーフォーム（プルダウン） -->
    <div id="alliance-form-legacy">
      <div style="background:rgba(58,125,90,.08);border:1px solid rgba(58,125,90,.25);border-radius:6px;padding:10px 12px;font-size:11px;color:var(--accent2);margin-bottom:16px;line-height:1.7">
        出退勤記録ページです。<br>お名前をプルダウンから選択してください。
      </div>
      <div style="margin-bottom:14px">
        <div style="font-size:10px;color:var(--ink3);margin-bottom:5px;text-transform:uppercase;letter-spacing:1px;font-family:'DM Mono',monospace">お名前</div>
        <select id="alliance-name-select" class="login-input" style="cursor:pointer">
          <option value="">── 選択してください ──</option>
        </select>
      </div>
      <button class="login-btn" onclick="doAllianceLogin()"
        style="background:var(--accent2)" onmouseover="this.style.background='#2d6b4a'" onmouseout="this.style.background='var(--accent2)'">
        入室する
      </button>
    </div>

    <!-- 新メンバーフォーム（名前+パスワード） -->
    <div id="alliance-form-password" style="display:none">
      <div style="background:rgba(58,125,90,.08);border:1px solid rgba(58,125,90,.25);border-radius:6px;padding:10px 12px;font-size:11px;color:var(--accent2);margin-bottom:16px;line-height:1.7">
        出退勤記録ページです。<br>名前と初期パスワードを入力してください。
      </div>
      <div style="margin-bottom:12px">
        <div style="font-size:10px;color:var(--ink3);margin-bottom:5px;text-transform:uppercase;letter-spacing:1px;font-family:'DM Mono',monospace">お名前</div>
        <input id="alliance-pw-name" class="login-input" type="text" placeholder="例：山田 花子" onkeydown="if(event.key==='Enter')document.getElementById('alliance-pw-pass').focus()">
      </div>
      <div style="margin-bottom:14px">
        <div style="font-size:10px;color:var(--ink3);margin-bottom:5px;text-transform:uppercase;letter-spacing:1px;font-family:'DM Mono',monospace">パスワード</div>
        <input id="alliance-pw-pass" class="login-input" type="password" placeholder="初期パスワード" onkeydown="if(event.key==='Enter')doAllianceLoginWithPassword()">
      </div>
      <button id="alliance-pw-btn" class="login-btn" onclick="doAllianceLoginWithPassword()"
        style="background:var(--accent2)" onmouseover="this.style.background='#2d6b4a'" onmouseout="this.style.background='var(--accent2)'">
        入室する
      </button>
    </div>

    <div class="login-error" id="alliance-error"></div>
    <div class="login-reset" onclick="showNormalLogin()">← 通常ログインに戻る</div>
  </div>
</div>

<!-- ===== ALLIANCE SCREEN（出退勤専用） ===== -->
<div id="alliance-screen" style="display:none;flex-direction:column;min-height:100vh">
  <div style="background:var(--ink);color:#f8fafc;padding:12px 20px;display:flex;align-items:center;justify-content:space-between;border-bottom:3px solid var(--accent2);flex-shrink:0;box-shadow:var(--shadow-sm)">
    <div>
      <div style="font-size:16px;font-weight:700;letter-spacing:-0.3px">RegalCast <span style="color:var(--accent2)">Alliance</span></div>
      <div style="font-size:9px;opacity:.4;letter-spacing:2px;font-family:'DM Mono',monospace;margin-top:1px">ATTENDANCE PORTAL</div>
    </div>
    <div style="display:flex;align-items:center;gap:14px">
      <div style="text-align:right">
        <div id="alliance-user-name" style="font-size:13px;font-weight:700"></div>
        <div id="alliance-user-dept" style="font-size:10px;opacity:.5;font-family:'DM Mono',monospace;display:none"></div>
      </div>
      <button onclick="doAllianceLogout()" class="logout-btn">退出</button>
    </div>
  </div>
  <div style="flex:1;padding:20px 16px;max-width:520px;width:100%;margin:0 auto">
    <div id="alliance-att-content"></div>
  </div>
</div>

<!-- ===== APP SCREEN ===== -->
<div id="app-screen">

  <!-- MOBILE HEADER -->
  <div class="mobile-header">
    <div style="display:flex;justify-content:space-between;align-items:center">
      <div>
        <div style="font-size:15px;font-weight:700;letter-spacing:-0.3px">RegalCast<span style="color:var(--blue)"> MGT</span></div>
        <div id="m-page-title" style="font-size:10px;opacity:.5;font-family:'DM Mono',monospace;text-transform:uppercase">DASHBOARD</div>
      </div>
      <div style="text-align:right">
        <div style="font-size:12px;font-weight:700" id="user-name-display-m"></div>
        <div style="display:flex;gap:6px;justify-content:flex-end;margin-top:3px">
          <button onclick="openErrorReport()" style="padding:4px 8px;background:transparent;border:1.5px solid var(--border);border-radius:var(--r-sm);font-size:10px;color:var(--ink3);cursor:pointer;font-family:inherit;transition:all .15s" onmouseover="this.style.borderColor='var(--blue)';this.style.color='var(--blue)'" onmouseout="this.style.borderColor='var(--border)';this.style.color='var(--ink3)'">🐛</button>
          <button class="logout-btn" onclick="doLogout()" style="font-size:10px">ログアウト</button>
        </div>
      </div>
    </div>
  </div>

  <!-- MOBILE CONTENT -->
  <div class="mobile-content">

    <!-- M: DASHBOARD -->
    <div class="mobile-view active" id="m-view-dashboard">
      <div id="notif-banner-m" style="margin-bottom:12px"></div>
      <div id="m-admin-alert-panel"></div>
      <div id="m-dash-content"></div>
    </div>

    <!-- M: PROJECTS -->
    <!-- M: ATTENDANCE -->
    <div class="mobile-view" id="m-view-attendance">
      <!-- 面談リクエスト -->
      <div id="m-meeting-request-area" style="margin-bottom:12px;display:none">
        <button onclick="requestMeeting('attendance')"
          style="width:100%;min-height:52px;padding:14px;border-radius:var(--r);border:2px solid var(--accent);background:transparent;color:var(--accent);font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:8px">
          💬 面談をリクエストする
        </button>
      </div>

      <!-- 打刻カード -->
      <div class="m-att-card">
        <div id="att-missed-banner-m"></div>
        <div id="attendance-status-m" style="margin-bottom:14px"></div>

        <!-- ── 出勤フォーム ── -->
        <div id="m-clockin-form">
          <!-- メンタル天気（必須） -->
          <div class="m-mental-section">
            <div class="m-mental-label">
              🌤 今日のメンタル天気
              <span class="required-badge">必須</span>
            </div>
            <div class="m-mental-grid" id="mental-picker-m">
              <label class="mental-btn" data-val="快晴"><input type="radio" name="mental-m" value="快晴" style="display:none">☀️<div>快晴</div></label>
              <label class="mental-btn" data-val="曇り"><input type="radio" name="mental-m" value="曇り" style="display:none">☁️<div>曇り</div></label>
              <label class="mental-btn" data-val="雨"><input type="radio" name="mental-m" value="雨" style="display:none">🌧<div>雨</div></label>
              <label class="mental-btn" data-val="豪雨"><input type="radio" name="mental-m" value="豪雨" style="display:none">⛈<div>豪雨</div></label>
              <label class="mental-btn" data-val="雷"><input type="radio" name="mental-m" value="雷" style="display:none">🌩<div>雷</div></label>
              <label class="mental-btn" data-val="嵐"><input type="radio" name="mental-m" value="嵐" style="display:none">🌀<div>嵐</div></label>
              <label class="mental-btn" data-val="天災"><input type="radio" name="mental-m" value="天災" style="display:none">🔥<div>天災</div></label>
            </div>
          </div>

          <!-- 出勤ボタン（大） -->
          <button class="att-btn att-btn-in m-att-btn-big" onclick="clockIn()">
            🟢 出勤を記録する
          </button>

          <!-- アコーディオン：交通費・詳細 -->
          <details class="m-accordion">
            <summary>
              <span>🚃 交通費・詳細を入力する</span>
              <span class="m-accordion-chevron">▼</span>
            </summary>
            <div class="m-accordion-body">
              <!-- テンプレ選択ボタン（JS が動的に描画） -->
              <div id="m-fare-tmpl-btns-in"></div>
              <div style="font-size:12px;color:var(--accent2);background:rgba(5,150,105,.08);border:1px solid rgba(5,150,105,.2);border-radius:var(--r-sm);padding:10px 12px;margin-bottom:14px;line-height:1.6">
                🎫 <strong>定期購入者の方へ</strong><br>
                定期券購入時に<strong>金額を1回だけ</strong>入力。通常日は¥0のままでOK。
              </div>
              <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px">
                <div>
                  <label style="font-size:12px;color:var(--ink3);display:block;margin-bottom:5px">🚃 乗車駅</label>
                  <input class="form-input" id="att-station-from" placeholder="例：渋谷">
                </div>
                <div>
                  <label style="font-size:12px;color:var(--ink3);display:block;margin-bottom:5px">🏢 降車駅</label>
                  <input class="form-input" id="att-station-to" placeholder="例：新宿">
                </div>
              </div>
              <div style="margin-bottom:12px">
                <label style="font-size:12px;color:var(--ink3);display:block;margin-bottom:5px">💴 出勤交通費（自宅→勤務先）</label>
                <input type="number" class="form-input" id="att-fare-in" placeholder="例：380" min="0" inputmode="numeric">
              </div>
              <div style="margin-bottom:14px">
                <label style="font-size:12px;color:var(--ink3);display:block;margin-bottom:5px">💴 その他交通費（ラウンド・途中移動等）</label>
                <input type="number" class="form-input" id="att-fare-other" placeholder="例：200" min="0" inputmode="numeric">
              </div>
              <div style="padding:14px;background:var(--surface2);border-radius:var(--r-sm);margin-bottom:12px">
                <label style="display:flex;align-items:center;gap:10px;cursor:pointer;font-size:15px;font-weight:500;min-height:28px">
                  <input type="checkbox" id="att-late" onchange="document.getElementById('m-late-reason').style.display=this.checked?'block':'none'" style="width:20px;height:20px;accent-color:var(--warn);flex-shrink:0">
                  ⏰ 遅刻あり
                </label>
                <div id="m-late-reason" style="display:none;margin-top:10px">
                  <input class="form-input" id="att-late-reason" placeholder="理由（例：電車遅延）">
                </div>
              </div>
              <div>
                <label style="font-size:12px;color:var(--ink3);display:block;margin-bottom:5px">メモ（任意）</label>
                <textarea class="form-input" id="attendance-note" rows="2" placeholder="メモ（任意）" style="resize:none"></textarea>
              </div>
            </div>
          </details>
        </div><!-- /m-clockin-form -->

        <!-- ── 退勤フォーム ── -->
        <div id="m-clockout-form">
          <!-- 退勤ボタン（大） -->
          <button class="att-btn att-btn-out m-att-btn-big" onclick="clockOut()">
            🔵 退勤を記録する
          </button>

          <!-- アコーディオン：交通費・詳細 -->
          <details class="m-accordion">
            <summary>
              <span>🚃 交通費・詳細を入力する</span>
              <span class="m-accordion-chevron">▼</span>
            </summary>
            <div class="m-accordion-body">
              <!-- テンプレ選択ボタン（退勤用） -->
              <div id="m-fare-tmpl-btns-out"></div>
              <div style="margin-bottom:12px">
                <label style="font-size:12px;color:var(--ink3);display:block;margin-bottom:5px">💴 退勤交通費（勤務先→自宅）</label>
                <input type="number" class="form-input" id="att-fare-out" placeholder="例：380" min="0" inputmode="numeric">
              </div>
              <div style="margin-bottom:12px">
                <label style="font-size:12px;color:var(--ink3);display:block;margin-bottom:5px">💴 その他交通費（ラウンド・途中移動等）</label>
                <input type="number" class="form-input" id="att-fare-other-out" placeholder="例：0" min="0" inputmode="numeric">
              </div>
              <div style="margin-bottom:14px">
                <label style="font-size:12px;color:var(--ink3);display:block;margin-bottom:5px">☕ 休憩時間（分）※基本60分</label>
                <input type="number" class="form-input" id="att-break" placeholder="60" min="0" value="60" inputmode="numeric">
              </div>
              <div style="padding:14px;background:var(--surface2);border-radius:var(--r-sm)">
                <label style="display:flex;align-items:center;gap:10px;cursor:pointer;font-size:15px;font-weight:500;min-height:28px">
                  <input type="checkbox" id="att-early" onchange="document.getElementById('m-early-reason').style.display=this.checked?'block':'none'" style="width:20px;height:20px;accent-color:var(--warn);flex-shrink:0">
                  🏃 早退あり
                </label>
                <div id="m-early-reason" style="display:none;margin-top:10px">
                  <input class="form-input" id="att-early-reason" placeholder="理由（例：体調不良）">
                </div>
              </div>
            </div>
          </details>

        </div><!-- /m-clockout-form -->

        <!-- 残業申請（clockout-form の外に置く：退勤後も表示できるように） -->
        <div id="m-ot-request-area" style="display:none;margin-top:14px">
          <button onclick="openOvertimeModal()"
            style="width:100%;min-height:56px;padding:14px;border-radius:var(--r-sm);border:2px solid var(--warn);background:transparent;color:var(--warn);font-size:15px;font-weight:700;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:8px">
            ⏰ 残業申請
          </button>
        </div>
      </div><!-- /m-att-card -->

      <!-- ── 今月の目標ウィジェット ── -->
      <div id="m-goal-widget"
        style="display:none;margin-top:12px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px 16px;box-shadow:0 1px 3px rgba(0,0,0,0.06)">
      </div>

      <!-- ── 秘書タスクウィジェット ── -->
      <div id="m-member-task-widget"
        style="display:none;margin-top:12px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px 16px;box-shadow:0 1px 3px rgba(0,0,0,0.06)">
      </div>

      <!-- ── メンバータスク状況ウィジェット（admin/leader用） ── -->
      <div id="task-summary-widget"
        style="display:none;margin-top:12px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px 16px;box-shadow:0 1px 3px rgba(0,0,0,0.06)">
      </div>

      <!-- ── 未紐づけタスク紐づけウィジェット（admin用） ── -->
      <div id="unlinked-tasks-widget"
        style="display:none;margin-top:12px;background:var(--surface);border:1px solid rgba(217,119,6,.3);border-radius:12px;padding:14px 16px;box-shadow:0 1px 3px rgba(0,0,0,0.06)">
      </div>

      <!-- ── 今日の振り返りAI相談 ── -->
      <div style="margin-top:12px">
        <details class="m-accordion" id="m-reflection-accordion">
          <summary>
            <span>💬 今日の振り返りをAIに相談</span>
            <span class="m-accordion-chevron">▼</span>
          </summary>
          <div class="m-accordion-body" style="padding:0">
            <div id="m-reflection-messages" style="max-height:320px;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding:12px;"></div>
            <div style="padding:10px 12px 12px;border-top:1px solid var(--border);display:flex;gap:8px;align-items:flex-end">
              <textarea id="m-reflection-input" rows="2"
                style="flex:1;border:1.5px solid var(--border);border-radius:8px;padding:9px 12px;font-size:13px;font-family:inherit;resize:none;outline:none;line-height:1.5"
                placeholder="今日の業務について話しかけてみよう..."
                onkeydown="handleReflectionKey(event)"></textarea>
              <button onclick="sendReflectionMessage()"
                style="background:var(--blue);color:#fff;border:none;border-radius:8px;width:40px;height:40px;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;align-self:flex-end">↑</button>
            </div>
          </div>
        </details>
      </div>
    </div>

    <!-- M: SHIFTS -->
    <div class="mobile-view" id="m-view-shifts">
      <!-- 週ナビ（モバイル） -->
      <div style="display:flex;align-items:center;justify-content:space-between;background:var(--surface2);border-radius:10px;padding:8px 12px;margin-bottom:12px">
        <button onclick="shiftWeekNav(-1)" style="background:none;border:none;cursor:pointer;font-size:20px;padding:0 4px;color:var(--ink2)">◀</button>
        <div style="text-align:center">
          <div id="shift-week-label-m" style="font-size:12px;font-weight:700;color:var(--ink1)"></div>
          <button onclick="_shiftWeekOffset=0;loadShifts()" style="font-size:10px;padding:2px 10px;border-radius:10px;border:1px solid var(--border);background:var(--surface);cursor:pointer;color:var(--ink3);margin-top:4px">今週に戻る</button>
        </div>
        <button onclick="shiftWeekNav(1)" style="background:none;border:none;cursor:pointer;font-size:20px;padding:0 4px;color:var(--ink2)">▶</button>
      </div>
      <!-- リーダー用フィルター（postLoginSetupで表示制御） -->
      <div id="m-shift-leader-filter-row" style="display:none;margin-bottom:10px">
        <select class="form-input" id="shift-leader-filter-m" style="width:100%;font-size:12px" onchange="loadShifts()">
          <option value="self">自分のシフト</option>
          <option value="dept">部署全体</option>
          <option value="all">全員</option>
        </select>
      </div>
      <div id="m-shift-btns" style="margin-bottom:10px;display:flex;gap:8px;flex-wrap:wrap"></div>
      <div id="shift-calendar-m"></div>
    </div>

    <!-- M: MONTHLY -->
    <div class="mobile-view" id="m-view-monthly">
      <!-- コントロール -->
      <div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px">
        <input type="month" class="form-input" id="att-month-m" value="" style="flex:1;min-width:130px" onchange="loadMonthlyAttendance(true, this.value)">
        <button class="mini-btn" id="att-reload-btn-m" onclick="loadMonthlyAttendance()" style="padding:6px 12px;background:var(--accent2);color:#fff;border:none;border-radius:6px;font-size:12px;font-weight:700;cursor:pointer;min-width:80px">🔄 更新</button>
        <button onclick="exportExcel()" style="padding:6px 12px;background:var(--accent2);color:#fff;border:none;border-radius:6px;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap">⬇ Excel</button>
        <button id="m-att-add-btn" onclick="openAddAttendanceModal()" style="display:none;padding:6px 12px;background:var(--blue);color:#fff;border:none;border-radius:6px;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap">＋ 追加</button>
      </div>
      <!-- 管理者：メンバーフィルター -->
      <div id="m-att-member-row" style="display:none;margin-bottom:10px">
        <select class="form-input" id="att-member-filter-m" style="width:100%" onchange="(function(){var sel=document.getElementById('att-member-filter');if(sel)sel.value=this.value;loadMonthlyAttendance(true);}).call(this)">
          <option value="">全員</option>
        </select>
      </div>
      <!-- サマリーカード -->
      <div id="att-summary-m" style="margin-bottom:14px"></div>
      <!-- 勤怠詳細カード一覧 -->
      <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:8px">
        <div class="section-title" style="font-size:12px;margin-bottom:0">勤怠詳細</div>
        <div id="att-detail-filter-btns-m" style="display:none;gap:4px;flex-wrap:wrap">
          <button class="mini-btn att-detail-filter-m active" data-filter="missed" onclick="setAttDetailFilter('missed')" style="font-size:10px">🚨 漏れ全件</button>
          <button class="mini-btn att-detail-filter-m" data-filter="checkin_missed" onclick="setAttDetailFilter('checkin_missed')" style="font-size:10px">⚠️ 入店漏れ</button>
          <button class="mini-btn att-detail-filter-m" data-filter="checkout_missed" onclick="setAttDetailFilter('checkout_missed')" style="font-size:10px">⚠️ 退店漏れ</button>
          <button class="mini-btn att-detail-filter-m" data-filter="all" onclick="setAttDetailFilter('all')" style="font-size:10px">全件</button>
        </div>
      </div>
      <div id="m-att-cards"></div>
    </div>




    <div class="mobile-view" id="m-view-mental">
      <div style="font-weight:700;font-size:14px;margin-bottom:12px">🌤 メンタル天気確認</div>
      <div style="display:flex;gap:8px;margin-bottom:10px;align-items:center">
        <input type="month" class="form-input" id="mental-month-m" style="flex:1">
        <button class="mini-btn" onclick="loadMentalData(document.getElementById('mental-month-m').value)">表示</button>
      </div>
      <div id="mental-summary-m" style="margin-bottom:10px"></div>
      <!-- 検索・フィルター（モバイル） -->
      <div style="display:flex;flex-direction:column;gap:6px;margin-bottom:10px;padding:10px;background:var(--surface2);border-radius:8px">
        <div style="position:relative">
          <input class="form-input" id="mental-search-m" placeholder="🔍 名前で検索" style="width:100%;padding-right:24px;font-size:12px" oninput="renderMentalFiltered()">
          <button onclick="document.getElementById('mental-search-m').value='';renderMentalFiltered()" style="position:absolute;right:7px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--ink3);font-size:11px;padding:0">✕</button>
        </div>
        <div style="display:flex;gap:6px">
          <select class="form-input" id="mental-sort-m" style="flex:1;font-size:12px" onchange="renderMentalFiltered()">
            <option value="risk">⚠ リスク高い順</option>
            <option value="name">🔤 名前順</option>
            <option value="count">📊 件数順</option>
            <option value="recent">🕐 直近順</option>
          </select>
          <select class="form-input" id="mental-alert-filter-m" style="flex:1;font-size:12px" onchange="renderMentalFiltered()">
            <option value="all">すべて</option>
            <option value="danger">⚠ 要注意</option>
            <option value="warn">△ 注視以上</option>
            <option value="caution">○ 経過観察以上</option>
            <option value="ok">✓ 良好</option>
          </select>
        </div>
      </div>
      <div style="font-size:11px;color:var(--ink3);margin-bottom:8px" id="mental-count-label-m"></div>
      <div id="mental-member-list-m"></div>
    </div>
    <div class="mobile-view" id="m-view-mysalary">
      <div style="font-weight:700;font-size:14px;margin-bottom:12px">💰 給与テーブル確認</div>
      <div id="mysalary-content-m"></div>
    </div>
    <div class="mobile-view" id="m-view-salary">
      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;flex-wrap:wrap;gap:8px">
        <div style="font-weight:700;font-size:14px">💰 給与管理</div>
        <div id="salary-admin-btns-m" style="display:none;gap:8px;flex-wrap:wrap">
          <button class="add-btn" style="font-size:11px" onclick="openAddSalaryModal()">＋ 追加</button>
          <button class="add-btn" style="font-size:11px;background:var(--accent2)" onclick="openSalaryTableModal()">📋 テーブル</button>
        </div>
      </div>
      <div id="salary-list-m"></div>
    </div>
    <div class="mobile-view" id="m-view-users">
      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px">
        <div style="font-size:13px;font-weight:700">👥 メンバー管理</div>
        <button class="add-btn" style="font-size:11px" onclick="openBulkAddMembersModal()">＋ 登録</button>
      </div>
      <label style="display:flex;align-items:center;gap:5px;font-size:11px;color:var(--ink3);cursor:pointer;margin-bottom:10px">
        <input type="checkbox" id="show-retired-check-m" onchange="toggleShowRetired()" style="accent-color:var(--ink3);cursor:pointer">
        退職者を表示
      </label>
      <div id="m-users-list"></div>
    </div>

    <!-- M: DAILY CHECK (admin only) -->
    <div class="mobile-view" id="m-view-daily">
      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px">
        <div style="font-weight:700;font-size:14px">📍 当日出退勤確認</div>
        <button class="mini-btn" id="daily-reload-btn-m" onclick="loadDailyCheckM(true)" style="min-width:70px">🔄 更新</button>
      </div>
      <div style="margin-bottom:10px;padding:8px 12px;background:var(--surface2);border-radius:6px;font-size:12px">
        <label style="display:flex;align-items:center;gap:8px;cursor:pointer">
          <input type="checkbox" id="m-daily-show-all" onchange="loadDailyCheckM(true)" style="width:15px;height:15px;accent-color:var(--blue)">
          全メンバー表示（シフトなし・打刻なし含む）
        </label>
      </div>
      <div id="m-daily-check-body">
        <div style="color:var(--ink3);font-size:12px;padding:20px;text-align:center">読み込み中...</div>
      </div>
    </div>

    <!-- M: REPORTS (admin only) -->
    <div class="mobile-view" id="m-view-reports">
      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:10px">
        <div style="font-weight:700;font-size:14px">📨 報告確認</div>
        <button class="mini-btn" onclick="loadReportsM()">🔄 更新</button>
      </div>
      <div style="display:flex;gap:5px;overflow-x:auto;padding-bottom:6px;margin-bottom:10px;-webkit-overflow-scrolling:touch;border-bottom:1.5px solid var(--border)">
        <button class="m-report-tab active" data-cat="all"        onclick="filterReportsMobile('all',this)"        style="white-space:nowrap;flex-shrink:0;font-size:11px;padding:5px 12px;border:none;border-bottom:2px solid var(--ink);background:none;cursor:pointer;font-weight:700;color:var(--ink)">すべて</button>
        <button class="m-report-tab"        data-cat="meeting"    onclick="filterReportsMobile('meeting',this)"    style="white-space:nowrap;flex-shrink:0;font-size:11px;padding:5px 12px;border:none;border-bottom:2px solid transparent;background:none;cursor:pointer;font-weight:600;color:var(--ink3)">🤝 面談</button>
        <button class="m-report-tab"        data-cat="motivation" onclick="filterReportsMobile('motivation',this)" style="white-space:nowrap;flex-shrink:0;font-size:11px;padding:5px 12px;border:none;border-bottom:2px solid transparent;background:none;cursor:pointer;font-weight:600;color:var(--ink3)">😞 モチベ</button>
        <button class="m-report-tab"        data-cat="irregular"  onclick="filterReportsMobile('irregular',this)"  style="white-space:nowrap;flex-shrink:0;font-size:11px;padding:5px 12px;border:none;border-bottom:2px solid transparent;background:none;cursor:pointer;font-weight:600;color:var(--ink3)">⚡ イレギュラー</button>
        <button class="m-report-tab"        data-cat="bug"        onclick="filterReportsMobile('bug',this)"        style="white-space:nowrap;flex-shrink:0;font-size:11px;padding:5px 12px;border:none;border-bottom:2px solid transparent;background:none;cursor:pointer;font-weight:600;color:var(--ink3)">🐛 不具合</button>
        <button class="m-report-tab"        data-cat="correction" onclick="filterReportsMobile('correction',this)"  style="white-space:nowrap;flex-shrink:0;font-size:11px;padding:5px 12px;border:none;border-bottom:2px solid transparent;background:none;cursor:pointer;font-weight:600;color:var(--ink3)">🔧 修正申請</button>
        <button class="m-report-tab"        data-cat="other"      onclick="filterReportsMobile('other',this)"      style="white-space:nowrap;flex-shrink:0;font-size:11px;padding:5px 12px;border:none;border-bottom:2px solid transparent;background:none;cursor:pointer;font-weight:600;color:var(--ink3)">📝 その他</button>
        <button class="m-report-tab"        data-cat="onboarding" onclick="filterReportsMobile('onboarding',this)"  style="white-space:nowrap;flex-shrink:0;font-size:11px;padding:5px 12px;border:none;border-bottom:2px solid transparent;background:none;cursor:pointer;font-weight:600;color:var(--ink3)">📋 入社フォーム</button>
      </div>
      <div id="m-reports-body"></div>
    </div>


    <!-- M: MY PAGE -->
    <!-- M: PROFILES -->
    <!-- M: FORM SUBMISSIONS -->
    <div class="mobile-view" id="m-view-formsubmissions">
      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;flex-wrap:wrap;gap:8px">
        <div style="font-weight:700;font-size:14px">📬 入社フォーム確認</div>
        <button class="mini-btn" onclick="loadFormSubmissions()" style="font-size:11px">🔄 更新</button>
      </div>
      <div style="font-size:11px;color:var(--ink3);margin-bottom:10px">採用予定者から提出された入社フォームを確認できます</div>
      <div style="display:flex;gap:0;overflow-x:auto;padding-bottom:2px;margin-bottom:12px;-webkit-overflow-scrolling:touch;border-bottom:1.5px solid var(--border)">
        <button class="form-sub-tab active" data-filter="unread"    onclick="filterFormSubmissions('unread',this)"    style="white-space:nowrap;flex-shrink:0;font-size:11px;padding:6px 12px;border:none;border-bottom:2px solid var(--ink);background:none;cursor:pointer;font-weight:700;color:var(--ink)">🆕 未処理</button>
        <button class="form-sub-tab"        data-filter="processed" onclick="filterFormSubmissions('processed',this)" style="white-space:nowrap;flex-shrink:0;font-size:11px;padding:6px 12px;border:none;border-bottom:2px solid transparent;background:none;cursor:pointer;font-weight:600;color:var(--ink3)">✅ 処理済</button>
        <button class="form-sub-tab"        data-filter="all"       onclick="filterFormSubmissions('all',this)"       style="white-space:nowrap;flex-shrink:0;font-size:11px;padding:6px 12px;border:none;border-bottom:2px solid transparent;background:none;cursor:pointer;font-weight:600;color:var(--ink3)">📋 すべて</button>
        <button class="form-sub-tab"        data-filter="deleted"   onclick="filterFormSubmissions('deleted',this)"   style="white-space:nowrap;flex-shrink:0;font-size:11px;padding:6px 12px;border:none;border-bottom:2px solid transparent;background:none;cursor:pointer;font-weight:600;color:var(--ink3)">🗑 削除済</button>
      </div>
      <div style="font-size:11px;color:var(--ink3);margin-bottom:8px" id="m-form-sub-count">—</div>
      <div id="m-form-submissions-body"></div>
    </div>

    <div class="mobile-view" id="m-view-onboarding">
      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;flex-wrap:wrap;gap:8px">
        <div style="font-weight:700;font-size:14px">📋 入社手続き</div>
        <input class="form-input" id="onboarding-search-m" placeholder="🔍 検索" style="width:130px;font-size:12px" oninput="filterOnboarding(this.value)">
      </div>
      <div style="display:flex;gap:8px;margin-bottom:14px">
        <button class="btn btn-secondary" style="flex:1;font-size:12px" onclick="bulkIssueFormUrls()">📋 一括URL発行</button>
        <button class="btn btn-primary" style="flex:1;font-size:12px" onclick="openPendingFormModal()">🔗 新規フォーム発行</button>
      </div>
      <div id="m-onboarding-list"></div>
    </div>

    <div class="mobile-view" id="m-view-offboarding">
      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;flex-wrap:wrap;gap:8px">
        <div style="font-weight:700;font-size:14px">🚪 退職手続き</div>
        <input class="form-input" id="offboarding-search-m" placeholder="🔍 検索" style="width:130px;font-size:12px" oninput="filterOffboarding(this.value)">
      </div>
      <div id="m-offboarding-list"></div>
    </div>

    <div class="mobile-view" id="m-view-profiles">
      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;flex-wrap:wrap;gap:8px">
        <div style="font-weight:700;font-size:14px">👥 社員紹介</div>
        <input class="form-input" id="profile-search-m" placeholder="🔍 検索" style="width:140px;font-size:12px" oninput="filterProfiles(this.value)">
      </div>
      <div id="profile-skill-filter-m" style="display:none;flex-wrap:wrap;gap:6px;margin-bottom:12px;align-items:center"></div>
      <div id="profile-card-grid-m" style="display:grid;grid-template-columns:repeat(2,1fr);gap:12px"></div>
    </div>

    <!-- M: PAID LEAVE -->
    <div class="mobile-view" id="m-view-paid-leave">
      <div id="m-paid-leave-content"></div>
    </div>

    <div class="mobile-view" id="m-view-overtime">
      <div id="m-overtime-content"></div>
    </div>

    <div class="mobile-view" id="m-view-mypage">
      <div style="font-weight:700;font-size:15px;margin-bottom:16px">👤 マイページ</div>

      <!-- 全社実行ガント（リーダー以上） -->
      <a href="gantt.html" target="_blank" id="gantt-mypage-btn" style="display:none;align-items:center;gap:12px;background:rgba(239,68,68,.06);border:1.5px solid rgba(239,68,68,.2);border-radius:10px;padding:14px;margin-bottom:12px;text-decoration:none;transition:all .15s" onmouseover="this.style.background='rgba(239,68,68,.12)'" onmouseout="this.style.background='rgba(239,68,68,.06)'">
        <span style="font-size:24px">📊</span>
        <div>
          <div style="font-size:13px;font-weight:700;color:var(--accent)">全社実行ガント</div>
          <div style="font-size:11px;color:var(--ink3);margin-top:2px">7月以降の実行計画・判断待ち確認</div>
        </div>
        <span style="margin-left:auto;color:var(--accent);font-size:16px">→</span>
      </a>

      <!-- 成長ロードマップ -->
      <a href="roadmap.html" target="_blank" style="display:flex;align-items:center;gap:12px;background:rgba(37,99,235,.06);border:1.5px solid rgba(37,99,235,.2);border-radius:10px;padding:14px;margin-bottom:16px;text-decoration:none;transition:all .15s" onmouseover="this.style.background='rgba(37,99,235,.12)'" onmouseout="this.style.background='rgba(37,99,235,.06)'">
        <span style="font-size:24px">📋</span>
        <div>
          <div style="font-size:13px;font-weight:700;color:var(--blue)">成長ロードマップ</div>
          <div style="font-size:11px;color:var(--ink3);margin-top:2px">目標を確認・AIに相談する</div>
        </div>
        <span style="margin-left:auto;color:var(--blue);font-size:16px">→</span>
      </a>

      <!-- 管理者からの面談依頼 -->
      <div id="m-meeting-from-admin-wrap" style="background:var(--surface2);border-radius:10px;padding:14px;margin-bottom:16px">
        <div style="font-size:11px;font-weight:700;color:var(--ink3);margin-bottom:10px;text-transform:uppercase;letter-spacing:1px;display:flex;align-items:center;gap:6px">
          🤝 面談依頼
          <span id="m-mypage-meeting-badge" class="notif-badge" style="display:none;background:var(--accent)"></span>
        </div>
        <div id="m-meeting-from-admin"><div style="font-size:12px;color:var(--ink3)">読み込み中…</div></div>
      </div>

      <!-- プロフィール情報 -->
      <div style="background:var(--surface2);border-radius:10px;padding:14px;margin-bottom:16px">
        <div style="font-size:11px;font-weight:700;color:var(--ink3);margin-bottom:10px;text-transform:uppercase;letter-spacing:1px">プロフィール</div>
        <div id="mypage-profile-info" style="font-size:13px;line-height:1.8"></div>
      </div>

      <!-- 通勤設定 -->
      <div style="background:var(--surface2);border-radius:10px;padding:14px;margin-bottom:16px">
        <div style="font-size:11px;font-weight:700;color:var(--ink3);margin-bottom:10px;text-transform:uppercase;letter-spacing:1px">🚃 通勤設定</div>

        <!-- 自宅最寄駅 -->
        <div style="margin-bottom:14px">
          <label style="font-size:11px;color:var(--ink3);display:block;margin-bottom:4px">🏠 自宅最寄駅</label>
          <input class="form-input" id="mypage-nearest-station" placeholder="例：新宿駅" style="font-size:13px;padding:9px">
        </div>

        <!-- 店舗別テンプレ -->
        <div style="font-size:11px;color:var(--ink3);margin-bottom:4px;font-weight:700">📍 よく使う経路（テンプレ）</div>
        <div style="font-size:11px;color:var(--ink3);background:rgba(5,150,105,.08);border:1px solid rgba(5,150,105,.2);border-radius:6px;padding:8px 10px;margin-bottom:10px;line-height:1.6">
          🚃 ここに登録した経路は、<strong>出退勤打刻のときにワンタップで自動入力</strong>されます。<br>
          店舗ごとに1つ登録しておくと便利です。
        </div>
        <div id="mypage-fare-templates"></div>
        <button class="mini-btn" onclick="addFareTemplate()" style="margin-top:8px;width:100%;padding:9px;font-size:12px">＋ 経路を追加</button>
      </div>

      <button class="btn" onclick="saveMyPage()" style="width:100%;padding:12px;font-size:14px;font-weight:700">💾 保存する</button>
    </div>

  </div><!-- /mobile-content -->

  <!-- MOBILE NAV -->
  <nav class="mobile-nav">
    <div class="mobile-nav-inner">
      <div class="mnav-item active" onclick="switchMobile('dashboard',this)" data-roles="admin,leader,member">
        <div class="mnav-icon"><i data-lucide="home"></i></div>
        <div class="mnav-label">ホーム <span id="m-shift-notif-badge" class="notif-badge" style="display:none;background:var(--accent2);font-size:9px;padding:1px 4px"></span></div>
      </div>
      <div class="mnav-item mnav-attendance" onclick="switchMobile('attendance',this)" data-roles="admin,leader,member">
        <div class="mnav-icon"><i data-lucide="clock"></i></div><div class="mnav-label">出退勤</div>
      </div>
      <div class="mnav-item" onclick="switchMobile('mysalary',this)" data-roles="member,leader">
        <div class="mnav-icon"><i data-lucide="banknote"></i></div><div class="mnav-label">給与</div>
      </div>
      <div class="mnav-item" onclick="switchMobile('monthly',this)" data-roles="admin,leader,member">
        <div class="mnav-icon"><i data-lucide="calendar-days"></i></div><div class="mnav-label">勤怠表</div>
      </div>
      <div class="mnav-item" onclick="switchMobile('shifts',this)" data-roles="member,leader">
        <div class="mnav-icon"><i data-lucide="calendar-range"></i></div><div class="mnav-label">シフト</div>
      </div>
      <div class="mnav-item" onclick="switchMobile('mental',this)" data-roles="admin,leader">
        <div class="mnav-icon"><i data-lucide="cloud-sun"></i></div><div class="mnav-label">メンタル</div>
      </div>
      <div class="mnav-item" onclick="switchMobile('users',this)" data-roles="admin">
        <div class="mnav-icon"><i data-lucide="users"></i></div><div class="mnav-label">管理</div>
      </div>
      <div class="mnav-item" onclick="switchMobile('onboarding',this);loadOnboarding()" data-roles="admin">
        <div class="mnav-icon"><i data-lucide="clipboard-list"></i></div><div class="mnav-label">入社</div>
      </div>
      <div class="mnav-item" onclick="switchMobile('formsubmissions',this);loadFormSubmissions()" data-roles="admin">
        <div class="mnav-icon" style="position:relative"><i data-lucide="mail-open"></i><span id="m-form-sub-nav-badge" class="notif-badge" style="display:none;background:var(--accent2)"></span></div>
        <div class="mnav-label">入社フォーム</div>
      </div>
      <div class="mnav-item" onclick="switchMobile('offboarding',this)" data-roles="admin">
        <div class="mnav-icon"><i data-lucide="door-open"></i></div><div class="mnav-label">退職</div>
      </div>
      <div class="mnav-item" onclick="switchMobile('salary',this)" data-roles="admin">
        <div class="mnav-icon"><i data-lucide="wallet"></i></div><div class="mnav-label">給与</div>
      </div>
      <div class="mnav-item" onclick="switchMobile('daily',this)" data-roles="admin">
        <div class="mnav-icon"><i data-lucide="map-pin"></i></div><div class="mnav-label">当日確認</div>
      </div>
      <div class="mnav-item" onclick="switchMobile('reports',this)" data-roles="admin">
        <div class="mnav-icon" style="position:relative"><i data-lucide="inbox"></i><span id="m-report-badge" class="notif-badge" style="display:none;background:var(--accent)"></span></div>
        <div class="mnav-label">報告確認</div>
      </div>
      <div class="mnav-item" onclick="switchMobile('notifications',this);loadNotificationSettings()" data-roles="" style="display:none">
        <div class="mnav-icon"><i data-lucide="bell"></i></div><div class="mnav-label">通知設定</div>
      </div>
      <div class="mnav-item" onclick="switchMobile('profiles',this);loadProfiles()" data-roles="admin,leader,member">
        <div class="mnav-icon"><i data-lucide="id-card"></i></div><div class="mnav-label">社員紹介</div>
      </div>
      <div class="mnav-item" onclick="switchMobile('paid-leave',this)" data-roles="admin,leader,member">
        <div class="mnav-icon" style="position:relative"><i data-lucide="palmtree"></i><span id="m-paid-leave-nav-badge" class="notif-badge" style="display:none;background:var(--accent2)"></span></div>
        <div class="mnav-label">有給申請</div>
      </div>
      <div class="mnav-item" onclick="switchMobile('overtime',this);loadOvertimeRequests()" data-roles="admin,leader,member">
        <div class="mnav-icon" style="position:relative"><i data-lucide="clock-alert"></i><span id="m-ot-nav-badge" class="notif-badge" style="display:none;background:var(--warn)"></span></div>
        <div class="mnav-label">残業申請</div>
      </div>
      <div class="mnav-item" onclick="switchMobile('mypage',this)" data-roles="admin,leader,member">
        <div class="mnav-icon"><i data-lucide="user-round"></i></div><div class="mnav-label">マイページ</div>
      </div>
    </div>
  </nav>

  <!-- PC TOP BAR -->
  <div class="top-bar">
    <div class="brand">RegalCast<span> Management</span><sub>2026 OPERATION SYSTEM</sub></div>
    <div class="top-right">
      <button onclick="openErrorReport()" style="padding:5px 12px;background:transparent;border:1.5px solid var(--border);border-radius:var(--r-sm);font-size:11px;color:var(--ink3);cursor:pointer;font-family:inherit;margin-right:8px;font-weight:500;transition:all .15s" onmouseover="this.style.borderColor='var(--blue)';this.style.color='var(--blue)'" onmouseout="this.style.borderColor='var(--border)';this.style.color='var(--ink3)'" title="不具合・エラーを報告する">🐛 報告</button>
      <a href="gantt.html" target="_blank" id="gantt-nav-btn" style="display:none;padding:5px 12px;background:rgba(239,68,68,.07);border:1.5px solid rgba(239,68,68,.2);border-radius:var(--r-sm);font-size:11px;color:var(--accent);cursor:pointer;font-family:inherit;margin-right:8px;font-weight:600;transition:all .15s;text-decoration:none;white-space:nowrap" onmouseover="this.style.background='rgba(239,68,68,.14)'" onmouseout="this.style.background='rgba(239,68,68,.07)'" title="全社実行ガント（リーダー以上）">📊 全社ガント</a>
      <a href="roadmap.html" target="_blank" style="padding:5px 12px;background:rgba(37,99,235,.07);border:1.5px solid rgba(37,99,235,.2);border-radius:var(--r-sm);font-size:11px;color:var(--blue);cursor:pointer;font-family:inherit;margin-right:8px;font-weight:600;transition:all .15s;text-decoration:none;white-space:nowrap" onmouseover="this.style.background='rgba(37,99,235,.14)'" onmouseout="this.style.background='rgba(37,99,235,.07)'" title="自分の成長ロードマップを見る">📋 ロードマップ</a>
      <div class="user-info">
        <div class="uname" id="user-name-display">—</div>
        <div class="urole" id="user-role-display">—</div>
      </div>
      <button class="logout-btn" onclick="doLogout()">ログアウト</button>
    </div>
  </div>

  <!-- PC NAV -->
  <div class="nav-tabs">
    <!-- ホーム -->
    <div class="tab active" data-tab="dashboard" data-roles="admin,leader,member">📊 ダッシュボード <span id="notif-badge" class="notif-badge" style="display:none"></span></div>

    <!-- 勤怠グループ -->
    <div class="tab-group" id="tabgroup-kintai">
      <div class="tab-group-header">🕐 勤怠 <span class="tab-group-arrow">▾</span></div>
      <div class="tab-group-dropdown">
        <div class="tab tab-dropdown-item" data-tab="attendance" data-roles="admin,leader,member">🕐 出退勤</div>
        <div class="tab tab-dropdown-item" data-tab="shifts" data-roles="admin,leader,member">📅 シフト確認</div>
        <div class="tab tab-dropdown-item" data-tab="monthly" data-roles="admin,leader,member">📋 勤怠表</div>
        <div class="tab tab-dropdown-item" data-tab="daily" data-roles="admin">📍 当日確認</div>
      </div>
    </div>

    <!-- 給与グループ -->
    <div class="tab-group" id="tabgroup-kyuyo">
      <div class="tab-group-header">💰 給与 <span class="tab-group-arrow">▾</span></div>
      <div class="tab-group-dropdown">
        <div class="tab tab-dropdown-item" data-tab="mysalary" data-roles="member,leader">📋 給与テーブル確認</div>
        <div class="tab tab-dropdown-item" data-tab="salary" data-roles="admin">💰 給与管理</div>
      </div>
    </div>

    <!-- 社員紹介 -->
    <div class="tab" data-tab="profiles" data-roles="admin,leader,member" onclick="loadProfiles()">👥 社員紹介</div>

    <!-- 有給申請 -->
    <div class="tab" data-tab="paid-leave" data-roles="admin,leader,member" onclick="loadPaidLeave()">🌴 有給申請 <span id="paid-leave-nav-badge" class="notif-badge" style="display:none;background:var(--accent2)"></span></div>

    <!-- 残業申請 -->
    <div class="tab" data-tab="overtime" data-roles="admin,leader,member" onclick="loadOvertimeRequests()">⏰ 残業申請 <span id="ot-nav-badge" class="notif-badge" style="display:none;background:var(--warn)"></span></div>

    <!-- 管理グループ -->
    <div class="tab-group" id="tabgroup-kanri">
      <div class="tab-group-header">⚙ 管理 <span class="tab-group-arrow">▾</span></div>
      <div class="tab-group-dropdown">
        <div class="tab tab-dropdown-item" data-tab="reports" data-roles="admin">📨 報告確認 <span id="report-badge" class="notif-badge" style="display:none;background:var(--accent)"></span></div>
        <div class="tab tab-dropdown-item" data-tab="mental" data-roles="admin,leader">🌤 メンタル</div>
        <div class="tab tab-dropdown-item" data-tab="users" data-roles="admin">👥 メンバー管理</div>
        <div class="tab tab-dropdown-item" data-tab="formsubmissions" data-roles="admin">📬 入社フォーム確認 <span id="form-sub-nav-badge" class="notif-badge" style="display:none;background:var(--accent2)"></span></div>
        <div class="tab tab-dropdown-item" data-tab="onboarding" data-roles="admin">📋 入社手続き</div>
        <div class="tab tab-dropdown-item" data-tab="offboarding" data-roles="admin">🚪 退職手続き</div>
        <div class="tab tab-dropdown-item" data-tab="notifications" data-roles="admin" onclick="loadNotificationSettings()">🔔 通知設定</div>
      </div>
    </div>
  </div>

  <!-- PC CONTENT -->
  <div class="content">

    <!-- DASHBOARD -->
    <div id="view-dashboard" class="view active">
      <div id="notif-banner"></div>
      <div id="admin-alert-panel"></div>
      <div id="dash-content" style="margin-top:4px"></div>
    </div>


    <!-- ATTENDANCE -->
    <div id="view-attendance" class="view">
      <!-- 面談リクエストボタン（メンバー・リーダーのみ） -->
      <div id="pc-meeting-request-area" style="margin-bottom:14px;display:none">
        <button onclick="requestMeeting('attendance')"
          style="padding:10px 20px;border-radius:8px;border:1.5px solid var(--accent);background:transparent;color:var(--accent);font-size:13px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:8px">
          💬 面談をリクエストする
        </button>
      </div>
      <div class="att-grid">
        <div class="att-action-card">
          <div class="att-action-title">📍 本日の出退勤記録</div>
          <div id="att-missed-banner"></div>
          <div id="attendance-status" style="margin-bottom:14px"></div>

          <!-- 出勤フォーム -->
          <div style="font-size:11px;font-weight:700;color:var(--accent2);margin-bottom:8px;padding-bottom:4px;border-bottom:1px solid var(--border)">🟢 出勤時の入力</div>
          <!-- テンプレ選択ボタン（PC・出勤用） -->
          <div id="pc-fare-tmpl-btns-in" style="margin-bottom:10px"></div>
          <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px">
            <div>
              <label style="font-size:11px;color:var(--ink3);display:block;margin-bottom:4px">🚃 乗車駅</label>
              <input class="form-input" id="att-station-from-pc" placeholder="例：渋谷">
            </div>
            <div>
              <label style="font-size:11px;color:var(--ink3);display:block;margin-bottom:4px">🏢 降車駅</label>
              <input class="form-input" id="att-station-to-pc" placeholder="例：新宿">
            </div>
          </div>
          <div style="margin-bottom:10px;font-size:11px;color:var(--accent2);background:rgba(58,125,90,.08);border:1px solid rgba(58,125,90,.2);border-radius:6px;padding:8px 12px;line-height:1.6">
            🎫 <strong>定期購入者の方へ</strong>：定期券の<strong>購入時に1回だけ</strong>購入金額を入力してください。通常の出勤日は¥0のままでOKです。
          </div>
          <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px">
            <div>
              <label style="font-size:11px;color:var(--ink3);display:block;margin-bottom:4px">💴 出勤交通費（自宅→勤務先）</label>
              <input type="number" class="form-input" id="att-fare-in-pc" placeholder="例：380" min="0">
            </div>
            <div>
              <label style="font-size:11px;color:var(--ink3);display:block;margin-bottom:4px">💴 その他交通費（営業・途中移動等）</label>
              <input type="number" class="form-input" id="att-fare-other-pc" placeholder="例：200" min="0">
            </div>
          </div>
          <!-- メンタル天気 -->
          <div style="margin-bottom:12px;padding:12px 14px;background:linear-gradient(135deg,rgba(42,82,152,.06),rgba(58,125,90,.06));border:1px solid rgba(42,82,152,.15);border-radius:8px">
            <div style="font-size:11px;font-weight:700;color:var(--ink2);margin-bottom:9px">🌤 今日のメンタル天気 <span style="background:var(--accent);color:#fff;font-size:9px;padding:1px 5px;border-radius:3px;font-weight:700">必須</span></div>
            <div style="display:flex;gap:6px;flex-wrap:wrap" id="mental-picker-pc">
              <label class="mental-btn" data-val="快晴"><input type="radio" name="mental-pc" value="快晴" style="display:none">☀️<div>快晴</div></label>
              <label class="mental-btn" data-val="曇り"><input type="radio" name="mental-pc" value="曇り" style="display:none">☁️<div>曇り</div></label>
              <label class="mental-btn" data-val="雨"><input type="radio" name="mental-pc" value="雨" style="display:none">🌧<div>雨</div></label>
              <label class="mental-btn" data-val="豪雨"><input type="radio" name="mental-pc" value="豪雨" style="display:none">⛈<div>豪雨</div></label>
              <label class="mental-btn" data-val="雷"><input type="radio" name="mental-pc" value="雷" style="display:none">🌩<div>雷</div></label>
              <label class="mental-btn" data-val="嵐"><input type="radio" name="mental-pc" value="嵐" style="display:none">🌀<div>嵐</div></label>
              <label class="mental-btn" data-val="天災"><input type="radio" name="mental-pc" value="天災" style="display:none">🔥<div>天災</div></label>
            </div>
          </div>
          <div style="margin-bottom:10px;padding:10px;background:var(--surface2);border-radius:6px">
            <label style="display:flex;align-items:center;gap:8px;cursor:pointer;font-size:12px;font-weight:700">
              <input type="checkbox" id="att-late-pc" onchange="document.getElementById('pc-late-reason').style.display=this.checked?'block':'none'" style="width:15px;height:15px;accent-color:var(--warn)">
              ⏰ 遅刻あり
            </label>
            <div id="pc-late-reason" style="display:none;margin-top:8px">
              <input class="form-input" id="att-late-reason-pc" placeholder="理由（例：電車遅延）">
            </div>
          </div>
          <button class="att-btn att-btn-in" style="margin-bottom:16px" onclick="clockIn()">🟢 出勤を記録する</button>

          <!-- 退勤フォーム -->
          <div style="font-size:11px;font-weight:700;color:var(--blue);margin-bottom:8px;padding-bottom:4px;border-bottom:1px solid var(--border)">🔵 退勤時の入力</div>
          <!-- テンプレ選択ボタン（PC・退勤用） -->
          <div id="pc-fare-tmpl-btns-out" style="margin-bottom:10px"></div>
          <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px">
            <div>
              <label style="font-size:11px;color:var(--ink3);display:block;margin-bottom:4px">💴 退勤交通費（勤務先→自宅）</label>
              <input type="number" class="form-input" id="att-fare-out-pc" placeholder="例：380" min="0">
            </div>
            <div>
              <label style="font-size:11px;color:var(--ink3);display:block;margin-bottom:4px">💴 その他交通費（営業・途中移動等）</label>
              <input type="number" class="form-input" id="att-fare-other-out-pc" placeholder="例：0" min="0">
            </div>
          </div>
          <div style="margin-bottom:10px">
            <label style="font-size:11px;color:var(--ink3);display:block;margin-bottom:4px">☕ 休憩時間（分）※基本60分</label>
            <input type="number" class="form-input" id="att-break-pc" placeholder="60" value="60" min="0">
          </div>
          <div style="margin-bottom:10px;padding:10px;background:var(--surface2);border-radius:6px">
            <label style="display:flex;align-items:center;gap:8px;cursor:pointer;font-size:12px;font-weight:700">
              <input type="checkbox" id="att-early-pc" onchange="document.getElementById('pc-early-reason').style.display=this.checked?'block':'none'" style="width:15px;height:15px;accent-color:var(--warn)">
              🏃 早退あり
            </label>
            <div id="pc-early-reason" style="display:none;margin-top:8px">
              <input class="form-input" id="att-early-reason-pc" placeholder="理由（例：体調不良）">
            </div>
          </div>
          <input class="form-input" id="attendance-note-pc" placeholder="メモ（任意）" style="margin-bottom:12px">
          <button class="att-btn att-btn-out" onclick="clockOut()">🔵 退勤を記録する</button>
          <!-- 残業申請ボタン（退勤済みの場合に表示） -->
          <div id="pc-ot-request-area" style="display:none;margin-top:10px">
            <button onclick="openOvertimeModal()" style="width:100%;padding:10px;border-radius:8px;border:1.5px solid var(--warn);background:transparent;color:var(--warn);font-size:13px;font-weight:700;cursor:pointer">
              ⏰ 残業申請
            </button>
          </div>
        </div>
        <div class="att-action-card" id="att-team-card" style="display:none">
          <div class="att-action-title">👥 本日のチーム出勤状況</div>
          <div id="att-team-status"></div>
        </div>
      </div>
    </div>

    <!-- SHIFTS -->
    <div id="view-shifts" class="view">
      <div class="shift-controls">
        <div style="font-size:13px;font-weight:700">
          シフト確認
          <span id="shift-off-badge" class="notif-badge" style="display:none;background:var(--accent);margin-left:6px"></span>
        </div>
        <div style="display:flex;gap:10px;align-items:center;flex-wrap:wrap">
          <!-- 週ナビ -->
          <div style="display:flex;align-items:center;gap:6px;background:var(--surface2);border-radius:8px;padding:4px 8px">
            <button onclick="shiftWeekNav(-1)" style="background:none;border:none;cursor:pointer;font-size:16px;padding:0 4px;color:var(--ink2)">◀</button>
            <span id="shift-week-label" style="font-size:12px;font-weight:700;white-space:nowrap;min-width:160px;text-align:center"></span>
            <button onclick="shiftWeekNav(1)" style="background:none;border:none;cursor:pointer;font-size:16px;padding:0 4px;color:var(--ink2)">▶</button>
            <button onclick="_shiftWeekOffset=0;loadShifts()" style="font-size:10px;padding:3px 8px;border-radius:4px;border:1px solid var(--border);background:var(--surface);cursor:pointer;color:var(--ink2)">今週</button>
          </div>
          <!-- 管理者：メンバーフィルター -->
          <select class="form-input" id="shift-member-filter" style="display:none;width:auto" onchange="loadShifts()">
            <option value="">全員</option>
          </select>
          <!-- リーダー：表示範囲フィルター -->
          <select class="form-input" id="shift-leader-filter" style="display:none;width:auto" onchange="loadShifts()">
            <option value="self">自分のシフト</option>
            <option value="dept">部署メンバー</option>
            <option value="all">全員</option>
          </select>
          <div style="position:relative;display:none" id="shift-search-wrap">
            <input class="form-input" id="shift-search" placeholder="🔍 名前で検索" style="width:160px;padding-right:24px" oninput="filterShiftBySearch(this.value)">
            <button onclick="document.getElementById('shift-search').value='';filterShiftBySearch('')" style="position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--ink3);font-size:11px;padding:0;line-height:1" title="クリア">✕</button>
          </div>
          <button class="add-btn" id="request-off-btn" onclick="openRequestOffModal()" style="display:none;background:var(--accent)">🙏 希望休を申請</button>
          <button class="add-btn" id="admin-off-btn" onclick="openRequestOffModal()" style="display:none;background:var(--accent)">🙏 希望休を登録</button>
          <button class="add-btn" id="sync-orders-shift-btn" onclick="openSyncShiftFromOrdersModal()" style="display:none;background:#27ae60">🔄 受注管理から同期</button>
          <button class="add-btn" id="delete-member-shift-btn" onclick="openDeleteMemberShiftModal()" style="display:none;background:var(--accent)">🗑 メンバー別削除</button>
        </div>
      </div>
      <div style="display:flex;gap:12px;align-items:center;margin-bottom:12px;font-size:11px;color:var(--ink3);flex-wrap:wrap">
        <div style="display:flex;align-items:center;gap:4px"><div style="width:10px;height:10px;background:rgba(42,82,152,.15);border-radius:2px"></div>シフト</div>
        <div style="display:flex;align-items:center;gap:4px"><div style="width:10px;height:10px;background:rgba(200,71,42,.12);border-radius:2px"></div>希望休</div>
      </div>
      <div id="shift-calendar"></div>
    </div>

    <!-- MONTHLY ATTENDANCE -->
    <div id="view-monthly" class="view">
      <!-- Controls -->
      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;flex-wrap:wrap;gap:10px">
        <div id="att-member-filter-wrap" style="display:flex;align-items:center;gap:8px;flex-wrap:wrap">
          <div class="month-row" style="margin:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap">
            <label>対象月</label>
            <input type="month" class="form-input" id="att-month" style="width:auto" onchange="loadMonthlyAttendance(true, this.value)">
            <button class="add-btn" id="att-reload-btn" onclick="loadMonthlyAttendance()" style="background:var(--accent2);min-width:80px">🔄 更新</button>
            <span id="att-last-loaded-label" style="font-size:11px;color:var(--ink3)"></span>
          </div>
          <label id="att-member-label" style="display:none;font-size:11px;color:var(--ink3);white-space:nowrap">メンバー</label>
          <select class="form-input" id="att-member-filter" style="display:none;width:auto" onchange="(function(){var btn=document.getElementById('att-reset-btn');if(btn)btn.style.display=this.value?'inline-block':'none';loadMonthlyAttendance(true);}).call(this)">
            <option value="">全員</option>
          </select>
          <!-- リーダー：表示範囲フィルター -->
          <select class="form-input" id="att-leader-filter" style="display:none;width:auto" onchange="onAttLeaderFilterChange()">
            <option value="self">自分の勤怠</option>
            <option value="dept">部署メンバー</option>
            <option value="all">全員</option>
          </select>
          <button id="att-reset-btn" onclick="resetAttFilter()" style="display:none;padding:4px 10px;background:var(--accent);color:#fff;border:none;border-radius:4px;font-size:11px;cursor:pointer;white-space:nowrap;font-weight:700">↩ 全員に戻す</button>
          <div style="position:relative;display:none" id="att-search-wrap">
            <input class="form-input" id="att-name-search" placeholder="🔍 名前で検索" style="width:160px;padding-right:24px" oninput="filterAttBySearch(this.value)">
            <button onclick="document.getElementById('att-name-search').value='';filterAttBySearch('')" style="position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--ink3);font-size:11px;padding:0;line-height:1" title="クリア">✕</button>
          </div>
        </div>
        <div style="display:flex;gap:8px;align-items:center">
          <button class="add-btn" onclick="exportExcel()" style="background:var(--accent2);display:flex;align-items:center;gap:6px">
            ⬇ Excelエクスポート
          </button>
          <button id="att-add-btn" class="add-btn" onclick="openAddAttendanceModal()" style="display:none">
            ＋ 勤怠を追加
          </button>
        </div>
      </div>

      <!-- Summary -->
      <div id="att-summary"></div>

      <!-- Table -->
      <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:8px">
        <div class="section-title" style="margin-bottom:0">勤怠詳細</div>
        <div id="att-detail-filter-btns" style="display:none;gap:4px;flex-wrap:wrap">
          <button class="mini-btn att-detail-filter active" data-filter="missed" onclick="setAttDetailFilter('missed')" style="font-size:11px">🚨 漏れ全件</button>
          <button class="mini-btn att-detail-filter" data-filter="checkin_missed" onclick="setAttDetailFilter('checkin_missed')" style="font-size:11px">⚠️ 入店漏れのみ</button>
          <button class="mini-btn att-detail-filter" data-filter="checkout_missed" onclick="setAttDetailFilter('checkout_missed')" style="font-size:11px">⚠️ 退店漏れのみ</button>
          <button class="mini-btn att-detail-filter" data-filter="all" onclick="setAttDetailFilter('all')" style="font-size:11px">全件表示</button>
        </div>
      </div>
      <div class="tbl-wrap" style="overflow-x:auto">
        <table style="table-layout:fixed;width:100%;min-width:960px">
          <colgroup>
            <col style="width:130px"><!-- 日付 -->
            <col id="att-col-member" style="width:90px"><!-- メンバー -->
            <col style="width:66px"><!-- 出勤 -->
            <col style="width:66px"><!-- 退勤 -->
            <col style="width:50px"><!-- 休憩 -->
            <col style="width:76px"><!-- 勤務時間 -->
            <col style="width:56px"><!-- 残業 -->
            <col style="width:140px"><!-- 最寄駅→降車駅 -->
            <col style="width:66px"><!-- 交通費 -->
            <col style="width:68px"><!-- メンタル -->
            <col style="width:100px"><!-- メモ -->
            <col style="width:64px"><!-- 位置情報 -->
            <col style="width:80px"><!-- 修正 -->
          </colgroup>
          <thead><tr>
            <th class="att-sortable" data-col="date" onclick="sortAttendanceBy('date')" style="cursor:pointer;user-select:none">日付 <span id="att-sort-date" class="att-sort-icon"></span></th>
            <th id="att-th-member" class="att-sortable" data-col="name" onclick="sortAttendanceBy('name')" style="cursor:pointer;user-select:none">メンバー <span id="att-sort-name" class="att-sort-icon"></span></th>
            <th class="att-sortable" data-col="clockIn" onclick="sortAttendanceBy('clockIn')" style="cursor:pointer;user-select:none">出勤 <span id="att-sort-clockIn" class="att-sort-icon"></span></th>
            <th class="att-sortable" data-col="clockOut" onclick="sortAttendanceBy('clockOut')" style="cursor:pointer;user-select:none">退勤 <span id="att-sort-clockOut" class="att-sort-icon"></span></th>
            <th>休憩</th>
            <th class="att-sortable" data-col="hours" onclick="sortAttendanceBy('hours')" style="cursor:pointer;user-select:none">勤務時間 <span id="att-sort-hours" class="att-sort-icon"></span></th>
            <th>残業</th>
            <th>最寄駅 → 降車駅</th>
            <th class="att-sortable" data-col="fare" onclick="sortAttendanceBy('fare')" style="cursor:pointer;user-select:none">交通費 <span id="att-sort-fare" class="att-sort-icon"></span></th>
            <th>🌤 メンタル</th>
            <th>メモ</th>
            <th>位置情報</th>
            <th></th>
          </tr></thead>
          <tbody id="attendance-table-body"></tbody>
        </table>
      </div>
    </div>

    <!-- BUDGET (admin only) -->
    <!-- DAILY ATTENDANCE CHECK (admin) -->
    <div id="view-daily" class="view">
      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;flex-wrap:wrap;gap:8px">
        <div style="font-size:13px;font-weight:700">📍 当日出退勤確認</div>
      </div>
      <div id="daily-check-body">
        <div style="color:var(--ink3);font-size:12px;padding:20px;text-align:center">タブをクリックするとデータを読み込みます</div>
      </div>
    </div>

    <!-- REPORTS (admin) -->
    <div id="view-reports" class="view">
      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;flex-wrap:wrap;gap:8px">
        <div style="font-size:13px;font-weight:700">📨 報告確認</div>
        <button class="mini-btn" onclick="loadReports()">🔄 更新</button>
      </div>
      <!-- カテゴリタブ -->
      <div style="display:flex;gap:0;margin-bottom:14px;border-bottom:2px solid var(--border);overflow-x:auto;-webkit-overflow-scrolling:touch">
        <button class="report-admin-tab active" data-cat="all"        onclick="filterAdminReports('all',this)">すべて</button>
        <button class="report-admin-tab"        data-cat="meeting"    onclick="filterAdminReports('meeting',this)">🤝 面談リクエスト</button>
        <button class="report-admin-tab"        data-cat="motivation" onclick="filterAdminReports('motivation',this)">😞 モチベーション</button>
        <button class="report-admin-tab"        data-cat="irregular"  onclick="filterAdminReports('irregular',this)">⚡ イレギュラー</button>
        <button class="report-admin-tab"        data-cat="bug"        onclick="filterAdminReports('bug',this)">🐛 不具合</button>
        <button class="report-admin-tab"        data-cat="correction" onclick="filterAdminReports('correction',this)">🔧 修正申請</button>
        <button class="report-admin-tab"        data-cat="other"      onclick="filterAdminReports('other',this)">📝 その他</button>
        <button class="report-admin-tab"        data-cat="onboarding" onclick="filterAdminReports('onboarding',this)">📋 入社フォーム <span id="form-sub-badge" style="display:none;background:var(--accent2);color:#fff;font-size:9px;padding:1px 5px;border-radius:99px;margin-left:2px"></span></button>
      </div>
      <div id="reports-body"></div>
    </div>




    <!-- MENTAL WEATHER (admin/leader) -->
    <div id="view-mental" class="view">
      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;flex-wrap:wrap;gap:10px">
        <div>
          <div class="section-title" style="margin:0">🌤 メンタル天気 確認</div>
          <div style="font-size:11px;color:var(--ink3);margin-top:4px">出勤時に記録されたメンタル状態を確認できます</div>
        </div>
        <div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap">
          <input type="month" class="form-input" id="mental-month" style="width:auto">
          <button class="add-btn" onclick="loadMentalData()">表示</button>
        </div>
      </div>
      <!-- サマリーカード -->
      <div id="mental-summary" style="margin-bottom:16px"></div>
      <!-- 個人別トレンド：検索・フィルター -->
      <div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px;padding:10px 12px;background:var(--surface2);border-radius:8px">
        <div style="position:relative;flex:1;min-width:140px">
          <input class="form-input" id="mental-search" placeholder="🔍 名前で検索" style="width:100%;padding-right:24px" oninput="renderMentalFiltered()">
          <button onclick="document.getElementById('mental-search').value='';renderMentalFiltered()" style="position:absolute;right:7px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--ink3);font-size:11px;padding:0">✕</button>
        </div>
        <select class="form-input" id="mental-sort" style="width:auto" onchange="renderMentalFiltered()">
          <option value="risk">⚠ リスク高い順</option>
          <option value="name">🔤 名前順</option>
          <option value="count">📊 記録件数順</option>
          <option value="recent">🕐 直近天気順</option>
        </select>
        <select class="form-input" id="mental-alert-filter" style="width:auto" onchange="renderMentalFiltered()">
          <option value="all">すべて</option>
          <option value="danger">⚠ 要注意のみ</option>
          <option value="warn">△ 注視以上</option>
          <option value="caution">○ 経過観察以上</option>
          <option value="ok">✓ 良好のみ</option>
        </select>
      </div>
      <div class="section-title" style="margin-bottom:8px">個人別トレンド <span id="mental-count-label" style="font-size:11px;font-weight:400;color:var(--ink3)"></span></div>
      <div id="mental-member-list"></div>
    </div>

    <!-- MY SALARY (member/leader) -->
    <div id="view-mysalary" class="view">
      <div class="section-title">💰 給与テーブル確認</div>
      <div id="mysalary-content"></div>
    </div>

    <!-- SALARY (admin only) -->
    <div id="view-salary" class="view">
      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;flex-wrap:wrap;gap:10px">
        <div>
          <div class="section-title" style="margin:0">💰 給与管理</div>
          <div style="font-size:11px;color:var(--ink3);margin-top:4px">管理者専用 — メンバーには現在の給与テーブルのみ表示されます</div>
        </div>
        <div style="display:flex;gap:8px;flex-wrap:wrap;align-items:center">
          <div style="position:relative">
            <input class="form-input" id="salary-search" placeholder="🔍 名前で検索" style="width:160px;padding-right:24px" oninput="filterSalaryBySearch(this.value)">
            <button onclick="document.getElementById('salary-search').value='';filterSalaryBySearch('')" style="position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--ink3);font-size:11px;padding:0;line-height:1" title="クリア">✕</button>
          </div>
          <button id="salary-add-btn" class="add-btn" onclick="openAddSalaryModal()">＋ 給与情報を追加</button>
          <button id="salary-table-btn" class="add-btn" style="background:var(--accent2)" onclick="openSalaryTableModal()">📋 基本給与テーブル</button>
          <button id="salary-bulk-btn" class="add-btn" style="background:#7c5cbf" onclick="bulkImportSalaryData()">📥 初期データ一括投入</button>
        </div>
      </div>
      <div id="salary-list"></div>
    </div>

    <!-- USERS (admin) -->
    <div id="view-users" class="view">
      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;flex-wrap:wrap;gap:8px">
        <div style="font-size:13px;font-weight:700">メンバー管理</div>
        <div style="display:flex;gap:8px;flex-wrap:wrap;align-items:center">
          <div style="position:relative">
            <input class="form-input" id="users-search" placeholder="🔍 名前で検索" style="width:160px;padding-right:24px" oninput="filterUsersBySearch(this.value)">
            <button onclick="document.getElementById('users-search').value='';filterUsersBySearch('')" style="position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--ink3);font-size:11px;padding:0;line-height:1" title="クリア">✕</button>
          </div>
<button class="add-btn" style="background:var(--accent2)" onclick="openAddAllianceModal()">🤝 業務委託追加</button>
          <button class="add-btn" onclick="openAddUserModal()">＋ 社員メンバーを追加</button>
          <button class="add-btn" style="background:var(--ink3)" onclick="openUidSwapModal()">🔄 UID付け替え</button>
        </div>
      </div>
      <!-- フィルター・ソート -->
      <div style="display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap">
        <span style="font-size:11px;color:var(--ink3);white-space:nowrap">会社で絞り込み：</span>
        <select id="contractor-company-filter" class="form-input" style="width:180px;font-size:12px" onchange="filterContractorsByCompany()">
          <option value="">全社</option>
        </select>
        <label style="display:flex;align-items:center;gap:5px;font-size:11px;color:var(--ink3);cursor:pointer;margin-left:8px">
          <input type="checkbox" id="show-retired-check" onchange="toggleShowRetired()" style="accent-color:var(--ink3);cursor:pointer">
          退職者を表示
        </label>
        <span style="font-size:11px;color:var(--ink3);white-space:nowrap;margin-left:8px">並び替え：</span>
        <select id="users-sort" class="form-input" style="width:140px;font-size:12px" onchange="sortUsers()">
          <option value="">名前順</option>
          <option value="dept">部門順</option>
          <option value="company">会社順</option>
        </select>
      </div>
      <!-- 一括削除バー -->
      <div id="bulk-delete-bar" style="display:none;align-items:center;gap:10px;background:#fee2e2;border:1px solid #fca5a5;border-radius:6px;padding:8px 14px;margin-bottom:12px">
        <span id="bulk-delete-count" style="font-size:12px;font-weight:700;color:var(--accent);flex:1"></span>
        <button class="btn" style="background:var(--accent);color:#fff;border:none;padding:5px 14px;font-size:12px" onclick="bulkDeleteUsers()">🗑 一括削除</button>
        <button class="btn btn-secondary" style="padding:5px 10px;font-size:12px" onclick="document.querySelectorAll('.user-check').forEach(c=>c.checked=false);updateBulkDeleteBar()">選択解除</button>
      </div>
      <div class="tbl-wrap">
        <table>
          <thead><tr>
            <th style="width:32px;text-align:center">
              <input type="checkbox" id="check-all-users" onchange="selectAllUsers(this)"
                style="width:15px;height:15px;cursor:pointer;accent-color:var(--accent)">
            </th>
            <th>名前</th><th>メールアドレス</th><th>権限</th><th>部門</th><th>会社名</th><th></th>
          </tr></thead>
          <tbody id="users-table-body"></tbody>
        </table>
      </div>
      <div style="margin-top:14px;padding:12px 16px;background:var(--surface2);border-radius:6px;font-size:11px;color:var(--ink3)">
        ⚠️ メンバーを削除するとFirebase Authenticationのログイン情報は残ります。完全に削除する場合は<a href="https://console.firebase.google.com" target="_blank" style="color:var(--blue)">Firebaseコンソール</a>からも削除してください。
      </div>
    </div>

    <!-- LOGIN LOG VIEW -->
    <!-- ONBOARDING -->
    <!-- OFFBOARDING -->
    <div id="view-offboarding" class="view">
      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;flex-wrap:wrap;gap:8px">
        <div class="section-title" style="margin:0">🚪 退職手続き管理</div>
        <div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap">
          <input class="form-input" id="offboarding-search" placeholder="🔍 名前で検索" style="width:200px;font-size:12px" oninput="filterOffboarding(this.value)">
        </div>
      </div>
      <div class="tbl-wrap">
        <table>
          <thead><tr>
            <th>名前</th>
            <th>部門</th>
            <th>退職希望日</th>
            <th>ステータス</th>
            <th style="width:80px"></th>
          </tr></thead>
          <tbody id="offboarding-tbody">
            <tr><td colspan="5" class="empty">読み込み中...</td></tr>
          </tbody>
        </table>
      </div>
    </div>

    <!-- FORM SUBMISSIONS / 入社フォーム確認 -->
    <div id="view-formsubmissions" class="view">
      <div style="display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:14px;flex-wrap:wrap;gap:10px">
        <div>
          <div class="section-title" style="margin:0">📬 入社フォーム確認</div>
          <div style="font-size:11px;color:var(--ink3);margin-top:4px">採用予定者から提出された入社フォームを一覧・確認できます</div>
        </div>
        <button class="mini-btn" onclick="loadFormSubmissions()" style="white-space:nowrap">🔄 更新</button>
      </div>

      <!-- フィルタタブ -->
      <div style="display:flex;gap:0;overflow-x:auto;padding-bottom:2px;margin-bottom:14px;-webkit-overflow-scrolling:touch;border-bottom:1.5px solid var(--border)">
        <button class="form-sub-tab active" data-filter="unread"    onclick="filterFormSubmissions('unread',this)"    style="white-space:nowrap;flex-shrink:0;font-size:12px;padding:8px 16px;border:none;border-bottom:2px solid var(--ink);background:none;cursor:pointer;font-weight:700;color:var(--ink);transition:all .15s">🆕 未処理</button>
        <button class="form-sub-tab"        data-filter="processed" onclick="filterFormSubmissions('processed',this)" style="white-space:nowrap;flex-shrink:0;font-size:12px;padding:8px 16px;border:none;border-bottom:2px solid transparent;background:none;cursor:pointer;font-weight:600;color:var(--ink3);transition:all .15s">✅ 処理済</button>
        <button class="form-sub-tab"        data-filter="all"       onclick="filterFormSubmissions('all',this)"       style="white-space:nowrap;flex-shrink:0;font-size:12px;padding:8px 16px;border:none;border-bottom:2px solid transparent;background:none;cursor:pointer;font-weight:600;color:var(--ink3);transition:all .15s">📋 すべて</button>
        <button class="form-sub-tab"        data-filter="deleted"   onclick="filterFormSubmissions('deleted',this)"   style="white-space:nowrap;flex-shrink:0;font-size:12px;padding:8px 16px;border:none;border-bottom:2px solid transparent;background:none;cursor:pointer;font-weight:600;color:var(--ink3);transition:all .15s">🗑 削除済み</button>
      </div>

      <div style="font-size:11px;color:var(--ink3);margin-bottom:10px" id="form-sub-count">—</div>
      <div id="form-submissions-body"></div>
    </div>

    <div id="view-onboarding" class="view">
      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;flex-wrap:wrap;gap:8px">
        <div class="section-title" style="margin:0">📋 入社手続き管理</div>
        <div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap">
          <input class="form-input" id="onboarding-search" placeholder="🔍 名前で検索" style="width:200px;font-size:12px" oninput="filterOnboarding(this.value)">
          <button class="btn btn-secondary" style="font-size:12px;padding:7px 14px;white-space:nowrap" onclick="bulkIssueFormUrls()">📋 一括URL発行</button>
          <button class="btn btn-primary" style="font-size:12px;padding:7px 14px;white-space:nowrap" onclick="openPendingFormModal()">🔗 新規入社フォームを発行</button>
        </div>
      </div>
      <div class="tbl-wrap">
        <table>
          <thead><tr>
            <th>名前</th>
            <th>部門</th>
            <th>入社日</th>
            <th>雇用形態</th>
            <th>ステータス</th>
            <th style="width:80px"></th>
          </tr></thead>
          <tbody id="onboarding-tbody">
            <tr><td colspan="6" class="empty">読み込み中...</td></tr>
          </tbody>
        </table>
      </div>
    </div>

    <!-- NOTIFICATIONS -->
    <div id="view-notifications" class="view">
      <div class="section-title">🔔 通知設定</div>
      <div style="max-width:520px">
        <div class="card" style="padding:24px;display:flex;flex-direction:column;gap:20px">

          <!-- 有効・無効トグル -->
          <div style="display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:var(--surface2);border-radius:var(--r-sm)">
            <div>
              <div style="font-size:13px;font-weight:600">メール通知</div>
              <div style="font-size:11px;color:var(--ink3);margin-top:2px">シフト開始・終了時刻を過ぎても打刻がないメンバーに自動でメールを送ります</div>
            </div>
            <label style="display:flex;align-items:center;gap:8px;cursor:pointer">
              <span id="notif-enabled-label" style="font-size:12px;font-weight:600;color:var(--ink3)">無効</span>
              <input type="checkbox" id="notif-enabled" style="width:18px;height:18px;cursor:pointer;accent-color:var(--accent2)"
                onchange="document.getElementById('notif-enabled-label').textContent=this.checked?'有効':'無効';document.getElementById('notif-enabled-label').style.color=this.checked?'var(--accent2)':'var(--ink3)'">
            </label>
          </div>

          <!-- 仕組み説明 -->
          <div style="background:rgba(58,125,90,.07);border:1px solid rgba(58,125,90,.2);border-radius:6px;padding:12px 14px;font-size:11px;color:var(--ink2);line-height:1.9">
            <strong>通知のタイミング</strong><br>
            ・ シフト開始時刻を過ぎても <strong>入店打刻なし</strong> → 本人にメール通知<br>
            ・ シフト終了時刻を過ぎても <strong>退店打刻なし</strong> → 本人にメール通知<br>
            <span style="color:var(--ink3)">通知は30分ごとに自動チェックされます。1日1回のみ送信されます。</span>
          </div>

          <!-- Gmail設定 -->
          <div style="padding-top:4px;border-top:1px solid var(--border)">
            <div style="font-size:13px;font-weight:600;margin-bottom:12px">Gmail 送信元設定</div>
            <div style="background:rgba(42,82,152,.07);border:1px solid rgba(42,82,152,.2);border-radius:6px;padding:10px 12px;font-size:11px;color:var(--accent);margin-bottom:16px;line-height:1.8">
              Googleアカウントの <strong>アプリパスワード</strong> を使ってください。<br>
              Google アカウント → セキュリティ → 2段階認証を有効化 →「アプリパスワード」で発行できます。
            </div>
            <div style="display:flex;flex-direction:column;gap:12px">
              <div>
                <label class="form-label">Gmailアドレス（送信元）</label>
                <input class="form-input" type="email" id="notif-gmail-user" placeholder="example@gmail.com" style="max-width:320px">
              </div>
              <div>
                <label class="form-label">アプリパスワード（16文字）</label>
                <input class="form-input" type="password" id="notif-gmail-pass" placeholder="xxxx xxxx xxxx xxxx" autocomplete="new-password" style="max-width:320px">
              </div>
            </div>
          </div>

          <div>
            <button class="btn btn-primary" id="notif-save-btn" onclick="saveNotificationSettings()">💾 設定を保存</button>
          </div>
        </div>
      </div>
    </div>

    <!-- PROFILES -->
    <div id="view-profiles" class="view">
      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;flex-wrap:wrap;gap:8px">
        <div class="section-title" style="margin:0">👥 社員紹介</div>
        <input class="form-input" id="profile-search" placeholder="🔍 名前・部署で検索" style="width:220px;font-size:12px" oninput="filterProfiles(this.value)">
      </div>
      <div id="profile-skill-filter" style="display:none;flex-wrap:wrap;gap:6px;margin-bottom:16px;align-items:center"></div>
      <div id="profile-card-grid" style="display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px"></div>
    </div>

    <!-- PAID LEAVE -->
    <div id="view-paid-leave" class="view">
      <div id="paid-leave-content"></div>
    </div>

    <div id="view-overtime" class="view">
      <div id="overtime-content"></div>
    </div>

  </div><!-- /content -->
</div><!-- /app-screen -->

<!-- MODAL -->
<div class="modal-overlay" id="modal-overlay" onclick="closeModalOuter(event)">
  <div class="modal">
    <div class="modal-title">
      <span id="modal-title-text">追加</span>
      <span class="modal-close" onclick="closeModal()">✕</span>
    </div>
    <div id="modal-body"></div>
  </div>
</div>


<!-- UID付け替えモーダル -->
<div class="modal-overlay" id="modal-uid-swap" style="display:none;z-index:1100" onclick="if(event.target===this)document.getElementById('modal-uid-swap').style.display='none'">
  <div class="modal" style="max-width:500px;width:95%">
    <div class="modal-title">
      <span>🔄 UID付け替え</span>
      <span class="modal-close" onclick="document.getElementById('modal-uid-swap').style.display='none'">✕</span>
    </div>
    <div style="padding:16px">

      <!-- Step1: 入力 -->
      <div id="uid-swap-step1">
        <p style="font-size:12px;color:var(--ink3);margin-bottom:14px">Firebase Authでアカウントを再作成したときに、旧UIDのデータを新UIDに一括移行します。</p>
        <div style="margin-bottom:10px">
          <label style="font-size:12px;font-weight:600;display:block;margin-bottom:4px">旧UID（移行元）</label>
          <input id="uid-swap-old" class="form-input" placeholder="例: abc123xyz..." style="width:100%;font-family:monospace;font-size:12px">
        </div>
        <div style="margin-bottom:16px">
          <label style="font-size:12px;font-weight:600;display:block;margin-bottom:4px">新UID（移行先）</label>
          <input id="uid-swap-new" class="form-input" placeholder="例: def456uvw..." style="width:100%;font-family:monospace;font-size:12px">
        </div>
        <div style="display:flex;gap:8px;justify-content:flex-end">
          <button class="btn btn-secondary" onclick="document.getElementById('modal-uid-swap').style.display='none'">キャンセル</button>
          <button class="btn btn-primary" onclick="previewUidSwap()">プレビュー確認 →</button>
        </div>
      </div>

      <!-- Step2: プレビュー -->
      <div id="uid-swap-step2" style="display:none">
        <div id="uid-swap-preview"></div>
        <div style="display:flex;gap:8px;justify-content:flex-end;margin-top:14px">
          <button class="btn btn-secondary" onclick="document.getElementById('uid-swap-step1').style.display='';document.getElementById('uid-swap-step2').style.display='none'">← 戻る</button>
          <button class="btn" style="background:var(--accent);color:#fff;border:none" onclick="execUidSwap()">⚡ 移行実行</button>
        </div>
      </div>

      <!-- Step3: 実行ログ -->
      <div id="uid-swap-step3" style="display:none">
        <div id="uid-swap-log" style="background:var(--surface2);border-radius:6px;padding:12px;max-height:300px;overflow-y:auto;font-family:monospace"></div>
        <div style="margin-top:12px;text-align:right">
          <button id="uid-swap-done-btn" class="btn btn-primary" style="display:none" onclick="document.getElementById('modal-uid-swap').style.display='none'">✅ 完了して閉じる</button>
        </div>
      </div>

    </div>
  </div>
</div>

<script type="module" src="js/main.js?v=38"></script>
<script>
  // Initialize lucide icons after DOM is ready
  if (typeof lucide !== 'undefined') lucide.createIcons();
  document.addEventListener('DOMContentLoaded', () => {
    if (typeof lucide !== 'undefined') lucide.createIcons();
  });
</script>
<script>
// ── 振り返りAI相談チャット ──────────────────────────────────
(function() {
  let reflectionHistory = [];
  let reflectionSending = false;

  function getAttendanceContext() {
    // 今日の打刻情報をコンテキストとして取得
    const clockInEl = document.querySelector('#m-today-records, [id*="today"]');
    const nameEl = document.querySelector('.m-user-name, #m-user-name');
    const name = nameEl?.textContent?.trim() || '';
    const now = new Date();
    const dateStr = `${now.getMonth()+1}月${now.getDate()}日`;
    return `今日は${dateStr}です。${name ? `ユーザー名: ${name}。` : ''}`;
  }

  function addReflectionMessage(role, text) {
    const el = document.getElementById('m-reflection-messages');
    if (!el) return;
    const isUser = role === 'user';
    const div = document.createElement('div');
    div.style.cssText = `display:flex;gap:8px;align-items:flex-start;${isUser ? 'flex-direction:row-reverse' : ''}`;
    div.innerHTML = `
      <div style="width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;background:${isUser ? 'rgba(5,150,105,.12)' : 'rgba(37,99,235,.1)'}">
        ${isUser ? '👤' : '🤖'}
      </div>
      <div style="max-width:78%;padding:9px 13px;border-radius:12px;font-size:13px;line-height:1.6;${isUser ? 'background:var(--blue);color:#fff;border-top-right-radius:3px' : 'background:var(--surface);border:1px solid var(--border);color:var(--ink);border-top-left-radius:3px'}">
        ${text.replace(/\n/g, '<br>')}
      </div>`;
    el.appendChild(div);
    el.scrollTop = el.scrollHeight;
  }

  async function sendReflectionMessage() {
    if (reflectionSending) return;
    const input = document.getElementById('m-reflection-input');
    if (!input) return;
    const text = input.value.trim();
    if (!text) return;

    input.value = '';
    reflectionSending = true;
    addReflectionMessage('user', text);

    // 初回メッセージ時にシステムプロンプトを設定
    const systemInstruction = {
      parts: [{ text: `あなたは仕事の振り返りをサポートするAI秘書です。${getAttendanceContext()}ユーザーの今日の業務について、共感しながら丁寧に振り返りをサポートしてください。良かった点・改善点・明日への展望などを引き出す質問をしながら、前向きに対話してください。返答は簡潔で温かみのあるトーンで。` }]
    };

    reflectionHistory.push({ role: 'user', parts: [{ text }] });

    // ローディング表示
    const loadingDiv = document.createElement('div');
    loadingDiv.id = 'm-reflection-loading';
    loadingDiv.style.cssText = 'display:flex;gap:4px;padding:8px 12px;align-items:center';
    loadingDiv.innerHTML = `<div style="width:28px;height:28px;border-radius:50%;background:rgba(37,99,235,.1);display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0">🤖</div>
      <div style="display:flex;gap:4px;padding:10px 14px;background:var(--surface);border:1px solid var(--border);border-radius:12px;border-top-left-radius:3px">
        ${[1,2,3].map(i => `<span style="width:6px;height:6px;background:var(--ink3);border-radius:50%;animation:rmBounce 1.2s ease-in-out ${(i-1)*0.2}s infinite;display:inline-block"></span>`).join('')}
      </div>`;
    const msgs = document.getElementById('m-reflection-messages');
    if (msgs) { msgs.appendChild(loadingDiv); msgs.scrollTop = msgs.scrollHeight; }

    try {
      const res = await fetch('/api/geminiProxy', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ contents: reflectionHistory, systemInstruction })
      });
      const data = await res.json();
      const reply = data?.candidates?.[0]?.content?.parts?.[0]?.text || 'うまく返答できませんでした。';
      reflectionHistory.push({ role: 'model', parts: [{ text: reply }] });
      loadingDiv.remove();
      addReflectionMessage('ai', reply);
    } catch (e) {
      loadingDiv.remove();
      addReflectionMessage('ai', '⚠️ エラーが発生しました。もう一度お試しください。');
    } finally {
      reflectionSending = false;
    }
  }

  function handleReflectionKey(e) {
    if (e.key === 'Enter' && !e.shiftKey && !e.isComposing) {
      e.preventDefault();
      sendReflectionMessage();
    }
  }

  window.sendReflectionMessage = sendReflectionMessage;
  window.handleReflectionKey   = handleReflectionKey;
})();
</script>
</body>
</html>
