/* =============================================
   worklog-analytics 管理ダッシュボード CSS
   ============================================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ---- CSS変数 (テーマ) ---- */
/* :root既定値 = ベージュ (JSがdata-theme属性を設定する前の初期表示用フォールバック)。
   [data-theme="..."]と同じ詳細度のため、必ずそれらの定義より前に置くこと
   (後に書くと同じ詳細度で後勝ちし、他テーマの変数を上書きしてしまう)。 */
:root {
  --bg-base:        #fdfbf7;
  --bg-surface:     #f5f0e6;
  --bg-card:        #ffffff;
  --bg-hover:       #ebe3d5;
  --border:         #dcd3c6;
  --border-subtle:  #ede8df;

  --accent:         #4f8ef7;
  --accent-glow:    rgba(79, 142, 247, 0.15);
  --accent-dark:    #2d6bd4;

  --success:        #3fb950;
  --success-bg:     rgba(63, 185, 80, 0.1);
  --warning:        #d29922;
  --warning-bg:     rgba(210, 153, 34, 0.1);
  --danger:         #f85149;
  --danger-bg:      rgba(248, 81, 73, 0.1);
  --info:           #58a6ff;

  /* PC稼働バーの青。WorkLogロゴのメインカラーに合わせる */
  --pc-active:      #0492b8;

  /* TeamSpirit勤怠(公式)の帯表示。PC稼働の青(--pc-active系)と混同しないよう暖色系 */
  --ts-band:        #96733c;
  --ts-band-bg:     rgba(150, 115, 60, 0.28);
  --ts-rest:        rgba(150, 115, 60, 0.45);

  /* Salesforce営業活動(Event)のマーカー色。青(PC)・暖色(TeamSpirit)のどちらとも
     混同しないよう緑寄りにする(teal系は青と色相が近く見分けにくいため、
     はっきりした緑にしている) */
  --sf-event:       #16a34a;
  --sf-event-bg:    rgba(22, 163, 74, 0.16);

  /* amptalk通話(AmptalkCall)のマーカー色。ロゴのブランドカラーをそのまま使う
     (MiiTelと同じ方式。ライト/ダーク共通)。 */
  --amptalk-event:      #0062a7;
  --amptalk-event-bg:   rgba(0, 98, 167, 0.16);

  /* MiiTel通話のマーカー色。ロゴのブランドカラーをそのまま使う(ライト/ダーク共通)。 */
  --miitel-event:       #209cff;
  --miitel-event-bg:    rgba(32, 156, 255, 0.16);

  /* Googleカレンダー連携のマーカー色。Salesforce(緑)・amptalk(ティール)とは別経路の
     補助情報のため紫系にする。社内会議(is_meeting)は彩度を落として控えめにする */
  --cal-event:          #7c3aed;
  --cal-event-bg:       rgba(124, 58, 237, 0.14);
  --cal-event-meeting:      #9ca3af;
  --cal-event-meeting-bg:   rgba(156, 163, 175, 0.16);

  --text-primary:   #3d3832;
  --text-secondary: #6b6359;
  --text-muted:     #9e9486;
}

[data-theme="dark"] {
  --bg-base:        #0d1117;
  --bg-surface:     #161b22;
  --bg-card:        #1c2128;
  --bg-hover:       #21262d;
  --border:         #30363d;
  --border-subtle:  #21262d;

  --accent:         #4f8ef7;
  --accent-glow:    rgba(79, 142, 247, 0.15);
  --accent-dark:    #2d6bd4;

  --success:        #3fb950;
  --success-bg:     rgba(63, 185, 80, 0.1);
  --warning:        #d29922;
  --warning-bg:     rgba(210, 153, 34, 0.1);
  --danger:         #f85149;
  --danger-bg:      rgba(248, 81, 73, 0.1);
  --info:           #58a6ff;

  /* PC稼働バーの青。WorkLogロゴのメインカラーに合わせる(ライト/ダーク共通) */
  --pc-active:      #0492b8;

  --ts-band:        #e0bd7e;
  --ts-band-bg:     rgba(224, 189, 126, 0.26);
  --ts-rest:        rgba(224, 189, 126, 0.42);

  --sf-event:       #4ade80;
  --sf-event-bg:    rgba(74, 222, 128, 0.16);

  --amptalk-event:      #0062a7;
  --amptalk-event-bg:   rgba(0, 98, 167, 0.16);

  --miitel-event:       #209cff;
  --miitel-event-bg:    rgba(32, 156, 255, 0.16);

  --cal-event:          #c4b5fd;
  --cal-event-bg:       rgba(196, 181, 253, 0.18);
  --cal-event-meeting:      #9ca3af;
  --cal-event-meeting-bg:   rgba(156, 163, 175, 0.14);

  --text-primary:   #e6edf3;
  --text-secondary: #8b949e;
  --text-muted:     #484f58;
}

[data-theme="light"] {
  --bg-base:        #f6f8fa;
  --bg-surface:     #ffffff;
  --bg-card:        #ffffff;
  --bg-hover:       #f3f4f6;
  --border:         #d0d7de;
  --border-subtle:  #eaeef2;
  --text-primary:   #1f2328;
  --text-secondary: #656d76;
  --text-muted:     #8c959f;
}

[data-theme="gray"] {
  --bg-base:        #e5e7eb;
  --bg-surface:     #f3f4f6;
  --bg-card:        #ffffff;
  --bg-hover:       #e5e7eb;
  --border:         #d1d5db;
  --border-subtle:  #e5e7eb;
  --text-primary:   #111827;
  --text-secondary: #4b5563;
  --text-muted:     #9ca3af;
}

[data-theme="beige"] {
  --bg-base:        #fdfbf7;
  --bg-surface:     #f5f0e6;
  --bg-card:        #ffffff;
  --bg-hover:       #ebe3d5;
  --border:         #dcd3c6;
  --border-subtle:  #ede8df;
  --text-primary:   #3d3832;
  --text-secondary: #6b6359;
  --text-muted:     #9e9486;
}

:root {
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  --shadow-sm:   0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:   0 4px 12px rgba(0,0,0,0.5);
  --shadow-lg:   0 8px 32px rgba(0,0,0,0.6);
  --shadow-glow: 0 0 20px rgba(79,142,247,0.2);

  --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---- リセット ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; scroll-behavior: smooth; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--bg-base);
  color: var(--text-primary);
  line-height: 1.6;
  min-height: 100vh;
}

/* =============================================
   ログインページ
   ============================================= */
.login-page {
  display: none;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at 50% 0%, rgba(79,142,247,0.12) 0%, transparent 70%),
              var(--bg-base);
}

.login-page.visible { display: flex; }

.login-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 48px 40px;
  width: 100%;
  max-width: 420px;
  text-align: center;
  box-shadow: var(--shadow-lg);
  animation: fade-up 0.4s ease;
}

.login-logo {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, var(--accent), #7c3aed);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  margin: 0 auto 20px;
  box-shadow: var(--shadow-glow);
}

.login-title {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 6px;
}

.login-subtitle {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-bottom: 32px;
}

.btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 13px 20px;
  background: #fff;
  color: #333;
  border: none;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
}

.btn-google:hover {
  background: #f5f5f5;
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.btn-google svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.login-note {
  margin-top: 20px;
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* =============================================
   アプリレイアウト
   ============================================= */
.app-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  grid-template-rows: auto 1fr;
  min-height: 100vh;
}

/* ---- ヘッダー ---- */
.app-header {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding: 12px 24px;
  min-height: 60px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(8px);
}

.header-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-primary);
  text-decoration: none;
}

.logo-icon {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, var(--accent), #7c3aed);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  box-shadow: var(--shadow-glow);
}

.logo-icon-img {
  height: 24px;
  width: auto;
  display: block;
}

.header-sep { flex: 1; }

.mobile-nav-overlay { display: none; }

/* フィルタ内の「アラート」ボタンも、隣接する日付選択/ドロップダウン/テキストボックスと
   同じ角丸(6px)に揃える(.btn標準の10pxのままだと浮いて見えるため) */
#alert-filter-btn, #ai-alert-filter-btn { border-radius: 6px; justify-content: center; }

.hamburger-btn {
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  font-size: 2rem;
  line-height: 1;
  color: var(--text-primary);
  cursor: pointer;
  padding: 4px 8px;
  position: relative;
  top: -3px; /* グリフの見た目の重心が下寄りなので、ヘッダー中央に見えるよう補正 */
  left: 3px;
}


.user-info {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.status-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 99px;
  font-size: 0.75rem;
  font-weight: 500;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  transition: var(--transition);
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-muted);
}

.status-badge.ok  { border-color: var(--success); color: var(--success); }
.status-badge.ok .status-dot { background: var(--success); box-shadow: 0 0 6px var(--success); animation: pulse 2s infinite; }
.status-badge.err { border-color: var(--danger);  color: var(--danger);  }
.status-badge.err .status-dot { background: var(--danger); }

@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }

/* ---- サイドナビ ---- */
.app-sidebar {
  background: var(--bg-surface);
  border-right: 1px solid var(--border);
  padding: 20px 0;
  position: sticky;
  top: 60px;
  height: calc(100vh - 60px);
  overflow-y: visible;
  display: flex;
  flex-direction: column;
}

/* ---- サイドメニューの折り畳み（PC表示） ---- */
.sidebar-collapse-btn {
  position: absolute;
  bottom: 12px;
  right: -12px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: var(--transition);
}
.sidebar-collapse-btn:hover { color: var(--text-primary); background: var(--bg-hover); }

.app-layout.sidebar-collapsed .app-sidebar { overflow-x: hidden; }
.app-layout.sidebar-collapsed { grid-template-columns: 64px 1fr; }
.app-layout.sidebar-collapsed .sidebar-collapse-btn { transform: rotate(180deg); }
.app-layout.sidebar-collapsed .nav-label,
.app-layout.sidebar-collapsed .nav-caret,
.app-layout.sidebar-collapsed .nav-section-title { display: none; }
.app-layout.sidebar-collapsed .nav-submenu { display: none !important; }
.app-layout.sidebar-collapsed .nav-item { justify-content: center; padding: 9px 0; }
.app-layout.sidebar-collapsed .nav-item.active { border-left: none; }

.nav-section-title {
  padding: 8px 20px 4px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 20px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  border-left: 2px solid transparent;
  transition: var(--transition);
  user-select: none;
}

.nav-item:hover  { color: var(--text-primary); background: var(--bg-hover); }
.nav-item.active { color: var(--accent); background: var(--accent-glow); border-left-color: var(--accent); }
.nav-icon { font-size: 1rem; width: 20px; text-align: center; display: inline-flex; align-items: center; justify-content: center; }
.nav-icon svg { width: 17px; height: 17px; flex-shrink: 0; }

.nav-caret { margin-left: auto; font-size: 0.7rem; color: var(--text-muted); }
/* サブメニューは高さ0から開閉アニメーションさせる(上からアニメーションで開く見た目) */
.nav-submenu {
  list-style: none;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.25s ease;
}
.nav-submenu.open { max-height: 400px; }
.nav-subitem { padding-left: 40px; font-size: 0.8rem; }

/* ---- メインコンテンツ ---- */
.app-main { padding: 32px; overflow-y: auto; }
.page { display: none; }
.page.active { display: block; }

.page-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.page-subtitle {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-bottom: 28px;
}

/* ---- カード ---- */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 20px;
}

/* PC表示: カレンダー・フィルタ枠は全幅だと広すぎるため50%・左寄せにする（最低900pxは確保） */
.report-half-card { max-width: 50%; min-width: 1000px; }
/* 期間カード(開始〜終了+プリセット)は1行に収めるにはやや窮屈なため、他の
   半幅カードより少しだけ広くする */
/* overflow:hiddenで、内部のフレックス計算がどうであれ枠の外に見た目上はみ出さないようにする */
/* 下のフィルタ枠(.report-half-card標準の50%)と幅を揃える(4K等の広い画面幅で
   期間枠だけ60%まで広がり、フィルタ枠より幅が大きくなっていたため) */
.report-half-card.ai-alert-period-card { max-width: 50%; overflow: hidden; }

.card-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ---- タブ切り替え（取り込みモード）---- */
.mode-tabs {
  display: flex;
  gap: 0;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px;
  margin-bottom: 20px;
  width: fit-content;
}

.report-mode-toggle-row {
  gap: 20px;
  flex-wrap: wrap;
}

.mode-tab {
  padding: 10px 20px 8px;
  border-radius: 4px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition);
  user-select: none;
  display: flex;
  align-items: center;
  gap: 7px;
}

.mode-tab:hover { color: var(--text-primary); }
.mode-tab.active {
  background: var(--bg-card);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

/* タブ切替に、集計基準(0:00/5:00)のスイッチと同じ「背景がスライドする」演出を
   加えたい箇所だけに付けるオプトインクラス。.mode-tab.activeの個別背景は消し、
   代わりに1枚の.mode-tab-indicatorをJS側(updateModeTabIndicator)でleft/widthを
   アニメーションさせて動かす。他の(このクラスが付いていない).mode-tabsには
   一切影響しない。 */
.mode-tabs-animated { position: relative; }
.mode-tabs-animated .mode-tab { position: relative; z-index: 1; }
.mode-tabs-animated .mode-tab.active { background: none; box-shadow: none; }
.mode-tabs-animated .mode-tab-indicator {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: 0;
  background: var(--bg-card);
  border-radius: 4px;
  box-shadow: var(--shadow-sm);
  transition: left 0.25s cubic-bezier(0.4, 0, 0.2, 1), width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
}

/* 「Gカレンダー」「シンプル表示」の浮動パネル。position:fixedで画面(ビューポート)に
   対して固定し、.app-main内部スクロールの影響を受けず常に同じ位置に留まる。
   top/rightの実際の値はJS(positionFloatingTogglePanel、app.js)が「稼働状況レポート」
   見出し・下のカード(.report-half-card)の右端を実測して都度設定する
   (CSSの%指定では.app-mainの内部スクロール構成に対して安定しなかったため)。 */
.floating-toggle-panel {
  position: fixed;
  /* JS(positionFloatingTogglePanel)が実測値で上書きするまでの既定値。JS実行前や
     万一失敗した場合でも画面内に見える位置に必ず表示されるようにするための保険。 */
  top: 20px;
  right: 20px;
  z-index: 40;
  width: fit-content;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  box-shadow: var(--shadow-md, 0 4px 16px rgba(0, 0, 0, 0.12));
}
.floating-toggle-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* 管理監督者・一般ロールでWorkLog非表示設定がオンの場合、フロートパネルから
   WorkLog単体トグルを除く(親がflex-direction:column; gap:6pxのため、行を
   非表示にするだけで隙間も自動的に詰まる) */
body[data-restricted-worklog="on"] #floating-toggle-row-worklog { display: none; }

/* フロートパネルの各トグル(スイッチ)の外側・左に、タイムライン上の対応する帯と
   同じ色の小さな四角を置き、どの色がどのトグルに対応するかひと目で分かるように
   する。枠線・塗りはそれぞれ実際の帯の枠線色・塗り色と揃える(帯自体が枠線+薄い
   塗りの2層構成のため、ミニチュアとして同じ見え方にする)。WorkLogだけは帯自体が
   単色塗りのため、枠線・塗りとも同じ色にする。 */
.toggle-color-swatch {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border-width: 1.5px;
  border-style: solid;
  box-sizing: border-box;
}
/* Gカレンダー・Salesforceのように1トグルで2色を切り替える行は、横並びだと
   スイッチの位置がずれるため、1px間隔の縦積みにする(幅は1個分のまま)。 */
.toggle-color-swatch-stack {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 0 0 auto;
}
.toggle-color-swatch.cal-color { border-color: var(--cal-event); background: var(--cal-event-bg); }
/* Gカレンダートグルは通常の予定(紫)だけでなく、社内会議(灰、is_meeting)の
   表示/非表示も一緒に切り替えるため、その色も並べて示す
   (.cal-event-marker.is-meetingと同じ色)。 */
.toggle-color-swatch.cal-meeting-color { border-color: var(--cal-event-meeting); background: var(--cal-event-meeting-bg); }
.toggle-color-swatch.worklog-color { border-color: var(--pc-active); background: var(--pc-active); }
.toggle-color-swatch.sf-color { border-color: var(--sf-event); background: var(--sf-event-bg); }
/* SalesforceトグルはEvent(緑)の帯だけでなく、時刻情報の無いTask(ベージュ、
   例:「メール（DM含む）／返信待ち」)のチップも一緒に表示/非表示を切り替えるため、
   その色も並べて示す(.sales-activity-chip.is-taskと同じ色)。 */
.toggle-color-swatch.task-color { border-color: var(--border); background: var(--bg-hover); }
.toggle-color-swatch.amptalk-color { border-color: var(--amptalk-event); background: var(--amptalk-event-bg); }
.toggle-color-swatch.miitel-color { border-color: var(--miitel-event); background: var(--miitel-event-bg); }
/* ツールチップ設定は対応する帯の色が無いため、四角自体は表示せず場所だけ確保して
   他の行とスイッチの位置(左端)を揃える。 */
.toggle-color-swatch.no-color { visibility: hidden; }
.floating-toggle-label {
  font-size: 0.74rem;
  color: var(--text-secondary);
  white-space: nowrap;
  flex: 0 0 auto;
  min-width: 88px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  padding-left: 3px;
}
.google-g-icon {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  margin-left: 1px;
}
.sf-cloud-icon {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  margin-left: -2px;
}
.amptalk-icon {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  vertical-align: -2px;
}
.worklog-icon {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  vertical-align: -2px;
}
.miitel-icon {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  vertical-align: -2px;
}
/* アクセス権限管理「管理監督者・一般ロールからWorkLogを隠す」の行。
   管理監督者・一般それぞれの(ラベル+ON/OFFスイッチ)グループを横並びにする。
   画面が狭い場合は折り返す(スマホでも崩れないように)。 */
.hide-worklog-header-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 12px 32px;
}

/* アクセス権限管理: 検索行と一覧の間の「簡単権限設定」(既存ユーザーの権限を
   一覧でチェックした複数対象者へまとめてコピーする)行 */
.quick-role-copy-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 16px;
}
/* 「コピー元」検索付き選択(氏名で絞り込んでクリック選択する)。人数が多く
   プルダウンでは探しにくいという指摘に対応(通常の<select>から変更)。 */
.quick-role-copy-source-combo {
  position: relative;
}
.quick-role-copy-source-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 100%;
  max-height: 240px;
  overflow-y: auto;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-md, 0 4px 16px rgba(0, 0, 0, 0.12));
  z-index: 30;
}
.quick-role-copy-source-item {
  padding: 6px 10px;
  font-size: 0.85rem;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.quick-role-copy-source-item:hover,
.quick-role-copy-source-item.active {
  background: var(--bg-surface-hover, var(--bg-surface));
}
.quick-role-copy-source-empty {
  padding: 6px 10px;
  font-size: 0.8rem;
  color: var(--text-muted);
}
/* Gmailエクスポート画面: 部/課/役職ドリルダウン+氏名検索の結果一覧(常時表示のインライン
   リスト。クリックで対象者を1名選択する)。フロート表示のquick-role-copy-source-listとは
   異なり、常にその場に枠として表示し続ける。 */
.vault-export-target-result-list {
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-card);
}
/* 管理監督者・一般の各トグル(ラベル+スイッチ)を1グループとして横並びにする */
.hide-worklog-toggle-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.hide-worklog-switch-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
/* 他のON/OFFトグル(フロートパネル等)と同じmode-tabs-compactサイズに揃え、
   幅も内容(OFF/ON)にフィットさせる(mode-tabs-compact側でflex:1により
   OFF/ON間の余白差は既に解消済みのため固定幅指定は不要)。 */
@media (max-width: 480px) {
  /* スマホ幅ではスイッチ一式(トグル+ステータス文言)を横並びのまま、タイトルの
     下いっぱいに広げて見切れを防ぐ */
  .hide-worklog-switch-wrap { width: 100%; justify-content: space-between; }
}

.mode-tabs.mode-tabs-compact {
  margin-bottom: 0;
  padding: 3px;
}
/* 期間集計カードの「集計/詳細」トグル(mode-tabs-compact)と高さを揃えた
   「🖥️ 端末情報」ボタン。トグル外枠(padding 3px)+内側タブ(padding 3px 10px,
   font-size 0.72rem)の実測高さに合わせている。 */
.btn.admina-btn {
  height: 30px;
  padding: 0 10px;
  font-size: 0.72rem;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  border-radius: 5px;
}
.mode-tabs-compact .mode-tab {
  padding: 3px 10px;
  font-size: 0.72rem;
  white-space: nowrap;
  flex: 1 1 0;
  justify-content: center;
}
/* フロートパネルの各トグル(mode-tabs-compact)は、外枠に対して内側のスライドする
   インジケータをもう少し大きく見せたいため、通常の4pxより詰めた余白にする。 */
.mode-tabs-compact.mode-tabs-animated .mode-tab-indicator {
  top: 2px;
  bottom: 2px;
  left: 2px;
  /* 他の要素と共用のvar(--shadow-sm)は変えず、ここだけぼかしを3px→1pxにする */
  box-shadow: 0 0 2px rgba(0,0,0,0.4);
}
@media (max-width: 900px) {
  /* スマホでは全幅の固定パネルだと画面が狭くなりすぎるため、通常表示は隠し、
     代わりにハンバーガーメニュー内へ移動して表示する(relocateFloatingTogglePanelForViewport、
     app.js参照)。.mobile-embeddedはその移動先で付与されるクラス。 */
  .floating-toggle-panel:not(.mobile-embedded) {
    display: none;
  }
  .floating-toggle-panel.mobile-embedded {
    position: static;
    width: auto;
    box-shadow: none;
    border-radius: 0;
    border: none;
    border-top: 1px solid var(--border);
    margin-top: 8px;
    padding: 10px 4px 4px;
  }
  .floating-toggle-panel.mobile-embedded .floating-toggle-row { justify-content: space-between; }
}

/* 稼働レポートを開いた際、日付指定/期間集計の外枠 → 日付選択欄の順に
   レインボーカラーで1周だけ点滅させ、操作箇所を案内する演出 */
/* box-shadowを外側に広げると、フィルタ行などoverflow-x:autoを持つ祖先要素の
   端(特に左端)でクリップされて見切れてしまうため、内側(inset)に発光させる */
@keyframes rainbow-blink-border {
  0%   { border-color: #ff3b30; box-shadow: inset 0 0 6px 1px rgba(255, 59, 48, 0.6); }
  16%  { border-color: #ff9500; box-shadow: inset 0 0 6px 1px rgba(255, 149, 0, 0.6); }
  33%  { border-color: #ffcc00; box-shadow: inset 0 0 6px 1px rgba(255, 204, 0, 0.6); }
  50%  { border-color: #34c759; box-shadow: inset 0 0 6px 1px rgba(52, 199, 89, 0.6); }
  66%  { border-color: #007aff; box-shadow: inset 0 0 6px 1px rgba(0, 122, 255, 0.6); }
  83%  { border-color: #af52de; box-shadow: inset 0 0 6px 1px rgba(175, 82, 222, 0.6); }
  100% { border-color: var(--border); box-shadow: none; }
}
.rainbow-blink-once {
  animation: rainbow-blink-border 1.6s linear 1;
}

/* ---- 稼働レポート フィルタ ---- */
.report-filter-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
  flex-wrap: nowrap;
  overflow-x: auto;
}
/* 期間指定/フィルタ両方の行(.report-filter-rowを共有)で、テキスト入力・セレクト・
   ボタンの高さがブラウザ既定のフォームコントロール差(select/input/buttonそれぞれの
   行間・パディングの計算のされ方の違い)でバラついていたため、明示的な高さで揃える。
   勤務実態アラート側(.ai-alert-period-row/.ai-alert-filter-row)も同じ40pxに揃える。 */
.report-filter-row .drive-input,
.report-filter-row .btn,
.ai-alert-period-row .drive-input,
.ai-alert-period-row .btn,
.ai-alert-filter-row .drive-input,
.ai-alert-filter-row .btn {
  height: 40px;
}

.report-preset-row {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
}
.report-preset-row .report-preset-btn { flex: 0 0 auto; white-space: nowrap; }

.report-preset-btn.active {
  background: var(--accent);
  color: var(--bg-card, #fff);
  border-color: var(--accent);
}

/* フィルタの「部/課/役職」(稼働ログアラートは部/課のみ)を、画面幅やインラインの
   min-width指定に関わらず必ず1行に収める。個々のselectをgridの各エリアに
   割り当てる方式は、select自体の意図しない最小サイズ要求で行が折り返される
   ことがあったため、専用のnowrapフレックス行にまとめてラップを起こさせない。 */
.bu-sect-pos-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
}
.bu-sect-pos-row select {
  flex: 0 0 auto;
  width: 140px; /* 閉じたボックスの幅のみ縮小(開いた選択肢一覧は折り返さず全文表示される) */
  min-width: 0;
}

/* 「昨日」〜「曜日」の計6項目(プリセット5ボタン+曜日セレクト)を1行に並べ、
   幅を均等にする(PC/スマホ共通)。.report-preset-rowはdisplay:contentsで潰し、
   ボタンを親の直接の子として扱わせることでセレクトと同じ並び・幅で揃える。 */
.preset-and-daytype-row {
  display: flex;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
}
.preset-and-daytype-row .report-preset-row {
  display: contents;
}
.preset-and-daytype-row .report-preset-btn,
.preset-and-daytype-row select {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  /* .btnはdisplay:inline-flexのためtext-alignが効かず、文字が左寄せに見えていた。
     justify-contentで中央寄せにする(selectには影響しない) */
  justify-content: center;
}

.range-summary-grid {
  display: grid;
  /* スマホは3列×2行(出勤日数/合計業務時間/合計操作時間、平均操作率/残業時間/深夜残業時間)で揃える */
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (min-width: 769px) {
  /* PCは横幅に余裕があるため6列×1行で揃える */
  .range-summary-grid { grid-template-columns: repeat(6, 1fr); }
}
/* 「24時間24分」等の太字数値は列幅(120px前後)に収まるサイズに固定し、折り返さず1行に収める */
.range-summary-grid .summary-value {
  font-size: 1.05rem;
  white-space: nowrap;
  margin-bottom: 0;
}
/* ラベルを上・値を下の並びにし、高さを最小限に抑えるためpaddingも詰める(見出し上は特に詰める) */
.range-summary-grid .summary-item { padding: 3px 10px 6px; }
.range-summary-grid .summary-label { margin-bottom: 2px; }
@media (max-width: 420px) {
  .range-summary-grid .summary-value { font-size: 0.9rem; }
}

/* 期間指定の担当一覧: 各ボックスをクリックすると一覧をその項目で並べ替えられる。
   ソート中の項目にだけ昇順/降順アイコン(▴/▾)を見出しの右に添える(admin-users-tableの
   sortable-thと同じ表現)。 */
.range-summary-grid .summary-item[data-sort-key] { cursor: pointer; user-select: none; transition: border-color 0.15s; }
.range-summary-grid .summary-item[data-sort-key]:hover { border-color: var(--accent); }
/* 見出しテキスト自体は(アイコンの有無に関わらず)中央揃えのまま保つため、
   テキストをinline-blockで包み、アイコンはそのテキストの右端からposition:absoluteで
   5px離した位置に重ねる(テキストの幅に含めない=中央位置がアイコンでずれない)。 */
.range-summary-grid .summary-item[data-sort-key] .summary-label { text-align: center; }
.range-summary-grid .summary-item[data-sort-key] .summary-label-text { position: relative; display: inline-block; }
.range-summary-grid .summary-item[data-sorted="asc"] .summary-label-text,
.range-summary-grid .summary-item[data-sorted="desc"] .summary-label-text { color: var(--accent); }
.range-summary-grid .summary-item[data-sort-key] .summary-label-text::after {
  content: '';
  position: absolute;
  left: 100%;
  top: 50%;
  margin-left: 5px;
  transform: translateY(-50%);
  font-size: 2em;
  line-height: 1;
  white-space: nowrap;
}
.range-summary-grid .summary-item[data-sorted="asc"] .summary-label-text::after { content: '▴'; }
.range-summary-grid .summary-item[data-sorted="desc"] .summary-label-text::after { content: '▾'; }

.range-day-row {
  display: flex;
  align-items: center; /* PC幅では日付をバーの真横(垂直中央)に揃える */
  gap: 16px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.range-day-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.range-day-label {
  flex: 0 0 auto; /* 固定幅(128px)だと文字幅との差でバーとの間が空きすぎるため、文字幅に合わせる */
  font-variant-numeric: tabular-nums; /* 数字を等幅にして行ごとの幅ブレ(≒バーの開始位置のズレ)を防ぐ */
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  position: relative;
  top: 3px; /* align-items:centerでの見た目上のズレ補正、帯の縦中央に揃える */
}
/* 日付ラベルの曜日表記: 土曜=水色、日曜・祝日=赤 */
.day-saturday { color: var(--info); }
.day-holiday  { color: var(--danger); }

@media (max-width: 640px) {
  .range-day-row { flex-direction: column; align-items: stretch; gap: 0; } /* 日付の下〜開始/終了表示の上の間隔を0に */
  .range-day-label { margin-top: 0; padding-bottom: 0; top: 0; } /* モバイルは縦積みのため中央揃え補正は不要 */
}

/* ---- Drive URL 入力 ---- */
.drive-input-group {
  display: flex;
  gap: 10px;
  align-items: stretch;
  margin-bottom: 12px;
}

.drive-input {
  flex: 1;
  padding: 10px 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 6px; /* 日付選択/フィルタのテキストボックス/ドロップダウンで共用 */
  font-family: inherit;
  font-size: 0.875rem;
  color: var(--text-primary);
  outline: none;
  transition: var(--transition);
}

.drive-input::placeholder { color: var(--text-muted); }
.drive-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }

/* 日付選択/期間集計のカレンダートグル欄はプレースホルダーもグレーではなく通常の文字色にする */
#report-date-display::placeholder,
#range-date-display::placeholder {
  color: var(--text-primary);
}

.drive-hint {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: -4px;
  margin-bottom: 16px;
  padding-left: 2px;
}

/* ---- ドロップゾーン ---- */
.drop-zone {
  border: 2px dashed var(--border);
  border-radius: var(--radius-md);
  padding: 48px 24px;
  text-align: center;
  cursor: pointer;
  transition: var(--transition);
  position: relative;
  background: var(--bg-surface);
}

.drop-zone:hover, .drop-zone.drag-over {
  border-color: var(--accent);
  background: var(--accent-glow);
}

.drop-zone input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}

.drop-icon  { font-size: 2.5rem; margin-bottom: 12px; display: block; }
.drop-title { font-size: 1rem; font-weight: 600; margin-bottom: 6px; }
.drop-hint  { font-size: 0.8rem; color: var(--text-secondary); }

/* ---- 選択ファイルチップ ---- */
.file-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

.file-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 99px;
  font-size: 0.8rem;
  color: var(--text-secondary);
  animation: chip-in 0.2s ease;
}

@keyframes chip-in { from{transform:scale(.8);opacity:0} to{transform:scale(1);opacity:1} }

.chip-remove { cursor: pointer; color: var(--text-muted); font-size: 0.9rem; transition: color var(--transition); }
.chip-remove:hover { color: var(--danger); }

/* ---- オプション行 ---- */
.options-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  padding: 16px 0;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  margin: 16px 0;
}

.toggle-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
}

.day-start-label-text { font-size: 0.8rem; }

.toggle-switch { position: relative; width: 40px; height: 22px; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }

.toggle-track {
  position: absolute;
  inset: 0;
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: 99px;
  transition: var(--transition);
  cursor: pointer;
}

.toggle-track::after {
  content: '';
  position: absolute;
  left: 3px; top: 3px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--text-muted);
  transition: var(--transition);
}

.toggle-switch input:checked + .toggle-track { background: var(--accent-glow); border-color: var(--accent); }
.toggle-switch input:checked + .toggle-track::after { transform: translateX(18px); background: var(--accent); }
.toggle-desc { color: var(--text-secondary); font-size: 0.8rem; }

/* ---- ボタン ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border: none;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
  white-space: nowrap;
}
/* .btnより後ろに置くことで、.report-preset-btn側の角丸・padding・font-sizeを
   確実に効かせる(同じ詳細度の場合、CSSはソース順で後のルールが勝つため。
   これまでpaddingがここに無く.btnの10px 22pxに負けて、意図した6px 14pxの
   コンパクトな見た目にならずボタンが大きく表示されていた) */
.report-preset-btn {
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 0.8rem;
}

.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--accent-dark); box-shadow: var(--shadow-glow); transform: translateY(-1px); }
.btn-primary:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn-ghost { background: transparent; color: var(--text-secondary); border: 1px solid var(--border); }
.btn-ghost:hover { background: var(--bg-hover); color: var(--text-primary); }
.btn.is-toggle-off { opacity: 0.55; }
.btn-lg { padding: 13px 32px; font-size: 1rem; }
.btn-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ---- プログレスバー ---- */
.progress-wrap { display: none; margin-top: 20px; }
.progress-wrap.visible { display: block; }

.progress-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.progress-bar { height: 6px; background: var(--bg-hover); border-radius: 99px; overflow: hidden; }
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #7c3aed);
  border-radius: 99px;
  width: 0%;
  transition: width 0.4s ease;
}

/* ---- 結果パネル ---- */
.result-panel { display: none; margin-top: 20px; animation: fade-up 0.3s ease; }
.result-panel.visible { display: block; }

@keyframes fade-up { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }

.summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.summary-item {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 16px;
  text-align: center;
}

.summary-value { font-size: 1.8rem; font-weight: 700; line-height: 1; margin-bottom: 4px; }
.summary-label { font-size: 0.75rem; color: var(--text-secondary); font-weight: 500; }

.summary-item.loaded  .summary-value { color: var(--success); }
.summary-item.skipped .summary-value { color: var(--warning); }
.summary-item.error   .summary-value { color: var(--danger);  }
.summary-item.total   .summary-value { color: var(--info);    }

.result-table-wrap { overflow-x: auto; border-radius: var(--radius-md); border: 1px solid var(--border); }

.result-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.result-table th {
  padding: 10px 14px;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.result-table td { padding: 10px 14px; border-bottom: 1px solid var(--border-subtle); color: var(--text-secondary); }
.result-table tr:last-child td { border-bottom: none; }
.result-table tr:hover td { background: var(--bg-hover); }

.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 99px; font-size: 0.75rem; font-weight: 600; }
.badge-success { background: var(--success-bg); color: var(--success); }
.badge-warning { background: var(--warning-bg); color: var(--warning); }
.badge-danger  { background: var(--danger-bg);  color: var(--danger);  }
.badge-info    { background: rgba(88,166,255,0.1); color: var(--info); }

/* ---- 履歴テーブル ---- */
.history-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.history-table-wrap { overflow-x: auto; border-radius: var(--radius-md); border: 1px solid var(--border); }
.history-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.history-table th {
  padding: 10px 14px;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
}
.history-table td { padding: 10px 14px; border-bottom: 1px solid var(--border-subtle); color: var(--text-secondary); }
.history-table tr:last-child td { border-bottom: none; }
.history-table tr:hover td { background: var(--bg-hover); }
.history-table .filename { color: var(--text-primary); font-weight: 500; font-family: monospace; font-size: 0.8rem; }
/* アクセスログ: 各セルは折り返さず(はみ出す場合は.history-table-wrapの横スクロールに任せる) */
#access-log-tbody td { white-space: nowrap; }
/* 検証用ログイン許可リストでのログイン時、メールアドレスの下に実際にログインした
   外部Googleアカウントをもう1行添える。行全体の高さを増やさないよう、
   この2行分はline-heightを詰めて表示する(通常ログイン時は1行のまま)。 */
.access-log-email-lines {
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.25;
}
.access-log-email-lines span { display: block; }
.history-table .row-count { color: var(--success); font-weight: 600; }

/* ログ明細テーブル: 状態列の縦書き化防止・行間を詰める・非稼働行をグレーに */
.log-detail-table th, .log-detail-table td { white-space: nowrap; padding: 6px 12px; }
/* border-collapse:collapse だと th/td の border-radius が正しく描画されず、角に
   細い線が残ってしまう(ブラウザの既知の制約)。separateに切り替えて角丸を有効にする。
   collapseで付いていたセル間の重複線を消すため隙間なし(border-spacing:0)にする。 */
.log-detail-table { border-collapse: separate; border-spacing: 0; }
.log-detail-table .log-row-idle td { background: var(--bg-hover); color: var(--text-muted); }
/* 稼働時間から除外される異常値行(ロック/スリープ検知漏れ疑い)は赤帯で強調する。
   非稼働(グレー)より優先して見せたいため、is_idleの背景より濃い赤で上書きする。 */
.log-detail-table .log-row-anomalous td { background: var(--danger-bg); }
.log-detail-table .log-row-anomalous td:first-child { border-left: 3px solid var(--danger); }
.log-anomalous-badge { color: var(--danger); font-weight: 600; white-space: nowrap; }
/* WorkLog非表示時、タイムラインバークリックで開くamptalk架電・訪問一覧の色分け。
   背景は白を基本とし、訪問(PlannedVisit)行だけ緑背景にする(amptalk架電は区分列の
   チップ色と左端の帯のみで区別し、行全体は白のままにする)。 */
.log-detail-table .log-detail-sales-row td:first-child { border-left: 3px solid transparent; }
.log-detail-table .log-detail-sales-row.is-amptalk td:first-child { border-left-color: var(--amptalk-event); }
.log-detail-table .log-detail-sales-row.is-planned-visit td:first-child { border-left-color: var(--sf-event); }
.log-detail-table .log-detail-sales-row.is-planned-visit td { background: color-mix(in srgb, var(--sf-event) 18%, transparent); }
/* 相手先名(3列目)だけ残り幅いっぱいまで伸ばし(table-layout:fixedの固定列以外は
   自動で残り幅を分け合う=flexの考え方)、はみ出す分は折り返さず「…」で省略する。
   日付/時間/区分の3列は固定幅にして、長い相手先名でも表全体が2行に増えないようにする。 */
.log-detail-sales-table { table-layout: fixed; width: 100%; }
.log-detail-sales-table th:nth-child(1), .log-detail-sales-table td:nth-child(1) { width: 100px; }
.log-detail-sales-table th:nth-child(2), .log-detail-sales-table td:nth-child(2) { width: 110px; }
.log-detail-sales-table th:nth-child(4), .log-detail-sales-table td:nth-child(4) { width: 92px; }
.log-detail-sales-table td:nth-child(3) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 見出し行(開始/終了/表示時間/状態/ウィンドウタイトル)はスクロールしても固定表示する。
   .history-table-wrapのoverflow-x:autoはCSSの仕様上overflow-yも暗黙的にautoに
   なってしまい、それ自体がstickyの基準(スクロールコンテナ)にされて効かなくなるため、
   横スクロールの責務を#log-detail-body側(元々overflow-y:auto)に移し、
   .history-table-wrapはoverflow:visibleにしてスクロールコンテナから外す。 */
#log-detail-body {
  overflow-x: auto;
  /* 角丸+クリッピングはここ(実際のスクロールコンテナ)に持たせる。内側の
     .history-table-wrap はoverflow:visibleにしているため角丸を保持できず、
     スクロール位置によって固定表示の見出し行が角を越えて見えてしまっていた。
     overflow:auto な要素はスクロール中でも常にborder-radiusで正しくクリップ
     されるため、ここに枠線・角丸を移すことで解消する。 */
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
#log-detail-body .history-table-wrap { overflow: visible; border: none; border-radius: 0; }
.log-detail-table thead th { position: sticky; top: 0; z-index: 1; }
/* 表示時間(秒)の列は数値なので右揃えにする */
.log-detail-table th:nth-child(3), .log-detail-table td:nth-child(3) { text-align: right; }
/* amptalk架電・訪問一覧(WorkLog非表示時)は3列目が「相手先名」のため、上記の右揃えを
   打ち消して左揃えにする(2クラス指定で上のルールより詳細度を上げて上書きする)。 */
.log-detail-table.log-detail-sales-table th:nth-child(3),
.log-detail-table.log-detail-sales-table td:nth-child(3) { text-align: left; }
/* amptalk議事録の文字起こしテーブルは3列目が「発言」(長文になりうる)のため、
   上記の右揃え・.log-detail-table全体のnowrapを打ち消して折り返し表示にする。
   これをしないと長い発言1件で表全体が横に広がり、#log-detail-bodyに横スクロールが
   出てしまう。 */
.log-detail-table.log-detail-transcript-table th:nth-child(3),
.log-detail-table.log-detail-transcript-table td:nth-child(3) {
  text-align: left;
  white-space: normal;
  word-break: break-word;
}
/* ======== AIアラート ======== */
/* .card自体はoverflow:hiddenを持たないため、sticky見出しの背景が角丸の外にはみ出て
   見えてしまう。テーブルを囲むカードだけpaddingを0にしてoverflow:hiddenで角丸に沿わせる */
.ai-alert-table-card { padding: 0; overflow: hidden; }
/* align-items:stretchで各フィルタ要素(テキストボックス/ドロップダウン/クリアボタン)の
   高さを強制的に揃える(centerだとselectのブラウザ既定描画がわずかに高くなり、
   ボタンとの高さがずれて見えることがあるため。稼働レポート側と同じ考え方) */
.ai-alert-filter-row { display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap; }
/* 「アラート」ボタンを包むラップ自体もflexにして、stretchされた高さを
   中のボタンまで実際に伝える(divのままだとボタンは自身の内容分の高さのまま) */
.ai-alert-filter-wrap { display: flex; }
.ai-alert-filter-wrap #ai-alert-filter-btn { height: 100%; }
/* 社員番号検索・アラート種別ボタンをまとめておき、モバイルでは50%/50%で1行に並べる
   (氏名検索は別行にする)。 */
.ai-alert-search-alert-group { display: contents; }
@media (max-width: 768px) {
  .ai-alert-filter-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "title clear"
      "buspos buspos"
      "searchrow searchrow";
    gap: 8px;
    align-items: center;
  }
  /* input[type=checkbox]は除く: report-filter-rowと同様の理由
     (#ai-alert-filter-menuのチェックボックスにまで幅100%が掛かってしまうため) */
  .ai-alert-filter-row select, .ai-alert-filter-row input:not([type="checkbox"]) { min-width: 0 !important; width: 100%; }
  .ai-alert-filter-row .card-title { grid-area: title; }
  .ai-alert-filter-row > .btn { grid-area: clear; justify-self: end; }
  .ai-alert-filter-row .bu-sect-pos-row { grid-area: buspos; }
  /* 部/課/役職を均等3分割の固定幅にし、フィルタ枠内に必ず収まるようにする
     (中身の選択肢が長くてもボックス自体は広がらない。開いた時の一覧は
     ブラウザ標準の表示幅になる) */
  .ai-alert-filter-row .bu-sect-pos-row select { flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; }
  /* 氏名/社員番号の統合検索欄とアラートの2項目を1行(等分2列)に並べる */
  .ai-alert-search-alert-group {
    grid-area: searchrow;
    display: flex;
    gap: 8px;
  }
  .ai-alert-search-alert-group #ai-alert-name,
  .ai-alert-search-alert-group .ai-alert-filter-wrap { flex: 1 1 50%; width: auto !important; }
  .ai-alert-search-alert-group .ai-alert-filter-wrap #ai-alert-filter-btn { width: 100% !important; }
  .ai-alert-date-range { width: 100%; }
}
/* 期間カード(📅期間 + 開始〜終了 + プリセット)は上のフィルタカードと見た目は近いが、
   要素構成(日付2つ+プリセット)が異なるため別クラスにしている(.ai-alert-filter-rowの
   グリッド化ルールと衝突させないため)。 */
/* PC(デスクトップ)では タイトル/開始〜終了/プリセットボタンを1行に横並びにする。
   .report-filter-rowと同様、折り返さずoverflow-x:autoで収まらない場合だけ
   横スクロールにフォールバックする(日付欄がflex:1 1 autoで伸びすぎて
   プリセットボタンを2行目に押し出さないよう、伸び率は控えめにしている)。 */
.ai-alert-period-row { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; overflow-x: auto; width: 100%; max-width: 100%; }
@media (max-width: 768px) {
  /* 「期間」ラベルの右に日付テキストボックスを並べ、プリセット行だけ次の行に折り返す */
  .ai-alert-period-row { flex-direction: row; align-items: center; flex-wrap: wrap; overflow-x: visible; }
  .ai-alert-period-row > .card-title { flex: 0 0 auto; margin-top: 0; }
  .ai-alert-period-row > #ai-alert-date-display { flex: 1 1 auto; width: auto; margin-top: 0; }
  .ai-alert-period-row > .preset-and-daytype-row {
    flex: 1 1 100%;
    width: 100%;
    margin-top: 8px;
  }
  /* 期間カードの外枠が狭いままにならないよう全幅に戻し、アイコンの書き出しも
     他のカードに合わせて左に寄せる */
  .report-half-card.ai-alert-period-card { max-width: 100%; padding-left: 12px; padding-right: 12px; }
}
/* 開始〜終了はどの画面幅でも折り返さず1行に収める。type="date"はブラウザ側の
   最小表示幅があるため、両方をflex:1 1 0(min-width:0)で均等に縮められるようにし、
   セパレーター(〜)だけ縮まない固定幅にする。 */
.ai-alert-date-range { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; flex: 0 1 340px; width: 100%; min-width: 0; }
.ai-alert-date-range input[type="date"] { flex: 1 1 0; min-width: 130px; }
.ai-alert-date-sep { color: var(--text-muted); flex: 0 0 auto; }
.ai-alert-checkbox { display: flex; align-items: center; justify-content: flex-start; width: 100%; box-sizing: border-box; gap: 6px; font-size: 0.8rem; color: var(--text-secondary); cursor: pointer; user-select: none; padding: 4px 6px; border-radius: var(--radius-sm); white-space: nowrap; }
.ai-alert-checkbox:hover { color: var(--text-primary); background: var(--bg-hover); }
.ai-alert-checkbox input { accent-color: var(--accent); cursor: pointer; flex: 0 0 auto; margin: 0; }

/* auto-fitだと項目数が少ない時にカードいっぱいまで引き伸ばされてしまうため、
   auto-fillで空きトラックを確保し、他のカードと揃った幅に収める */
#ai-alert-stats .summary-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin-bottom: 0; gap: 8px; }
/* 検出件数/対象ユーザー数の枠の高さを、上の「📅期間」「🔍フィルタ」カード(1行分の
   高さ)と揃える。カード自体のpadding(.card既定の24px)はそのままにし、
   内側のsummary-item側だけ圧縮することで1行のボタン/入力欄と同程度の高さにする。 */
#ai-alert-stats .summary-item { padding: 0; }
#ai-alert-stats .summary-value { font-size: 1.1rem; margin-bottom: 2px; line-height: 1.2; }
#ai-alert-stats .summary-label { font-size: 0.65rem; }

.ai-alert-table-wrap { overflow: auto; max-height: 68vh; }
.ai-alert-table { min-width: 760px; }
.ai-alert-table thead th { position: sticky; top: 0; z-index: 1; padding: 0; }
.ai-alert-table thead th button {
  all: unset;
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  padding: 10px 14px;
  cursor: pointer;
  box-sizing: border-box;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
.ai-alert-table thead th button:hover { color: var(--text-primary); }
.ai-alert-table thead th button::after { content: ''; }
.ai-alert-table thead th[data-sorted] button { color: var(--accent); }
.ai-alert-table thead th[data-sorted="asc"] button::after { content: '▴'; }
.ai-alert-table thead th[data-sorted="desc"] button::after { content: '▾'; }
.ai-alert-table td.dim { color: var(--text-secondary); }
/* 部/課/役職: PCは「/」区切りの1行、モバイルは列幅で折り返し位置がバラつき
   行の罫線がずれて見えるため、部・課・役職を3行に分けnowrapで表示する */
.dept-sep { display: none; }
.dept-line { display: block; white-space: nowrap; }
@media (min-width: 769px) {
  .dept-sep { display: inline; }
  .dept-line { display: inline; white-space: normal; }
}
/* 社員番号は通常は独立列で表示するが、スマホでは列を減らして横スクロールを
   最小化するため、氏名セル内に小さく薄い文字で1行目として表示する形に切り替える。 */
.ai-alert-empcode-inline { display: none; }
@media (max-width: 768px) {
  .ai-alert-col-empcode { display: none; }
  .ai-alert-table { min-width: 480px; }
  .ai-alert-empcode-inline {
    display: block;
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--text-muted);
    line-height: 1.3;
  }
}
.ai-alert-clickable { cursor: pointer; }
.ai-alert-clickable:hover { color: var(--accent); text-decoration: underline; }
/* display:inline のままだと、部署/課/役職が改行(複数行)した際に折り返した各行ごとに
   下線が付いてしまい、最終行の文字幅だけの短い破線がズレて見える。inline-blockにして
   ボックス全体の下に1本だけ線が引かれるようにする */
.ai-alert-position-clickable { display: inline-block; cursor: pointer; border-bottom: 1px dashed var(--text-muted); }
.ai-alert-position-clickable:hover { color: var(--accent); border-bottom-color: var(--accent); }
.ai-alert-row.ai-alert-row-open td { background: var(--accent-glow); }
.ai-alert-accordion-row td { padding: 14px; background: var(--bg-surface); white-space: normal; }
.ai-alert-accordion-card { box-shadow: none; }

.alert-badge {
  display: inline-block;
  background: var(--bg-hover);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  border-radius: 99px;
  padding: 2px 9px;
  font-size: 0.72rem;
  white-space: nowrap;
  margin: 2px 4px 2px 0;
}
.alert-badge.warn   { background: var(--warning-bg); border-color: var(--warning); color: var(--warning); }
.alert-badge.severe { background: var(--danger-bg);  border-color: var(--danger);  color: var(--danger); }
.alert-badge.info   { background: var(--accent-glow); border-color: var(--accent); color: var(--accent); }
/* 「（〜）」の詳細説明はクリックするまで隠す */
.alert-badge.has-detail { cursor: pointer; }
.alert-badge-detail { display: none; margin-left: 3px; opacity: 0.85; }
.alert-badge.expanded .alert-badge-detail { display: inline; }

/* td自体をdisplay:flexにすると、Chromiumではtable-cellとしての性質(行の高さに
   合わせて自動的に引き伸ばされる挙動)が失われ、部署/課/役職列が2行に折り返されて
   行全体が高くなった際に該当アラート列だけ低いままズレて見える不具合があった。
   tdはtable-cellのままにし、中の div だけをflex化することで、他列(確認列等)と
   同様に行の高さいっぱいに広がった上で内容を中央揃えできるようにする。 */
.ai-alert-badges-cell-inner { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; height: 100%; }
/* 確認列: バッジ列とは別の列として、中央に固定幅で配置する */
.ai-alert-confirm-col { text-align: center; white-space: nowrap; width: 90px; }
.ai-alert-confirm-btn {
  padding: 3px 10px;
  font-size: 0.72rem;
  font-weight: 600;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-surface);
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
}
.ai-alert-confirm-btn:hover { border-color: var(--accent); color: var(--accent); }
.ai-alert-confirm-btn.status-requested {
  background: var(--warning-bg);
  border-color: var(--warning);
  color: var(--warning);
}
.ai-alert-confirm-btn.status-confirmed {
  background: var(--success-bg);
  border-color: var(--success);
  color: var(--success);
}
.ai-alert-confirm-btn.status-requested:hover,
.ai-alert-confirm-btn.status-confirmed:hover { border-color: var(--danger); color: var(--danger); }

/* 「(N件をまとめ)」のクリックで、そのグループだけ元の行を展開/折りたたみできる */
.log-merge-toggle {
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
  white-space: nowrap;
}
.log-merge-toggle:hover { color: var(--accent-hover, var(--accent)); }
/* 個別展開されたまとめ内の元の行は、まとめ行から続く内容だと分かるようにインデントする */
.log-detail-table .log-row-group-child td:nth-child(5) { padding-left: 28px; }

/* データ取得元インジケータ(ローカルキャッシュ/Firestore/BigQueryのどこから来たか)の丸ドット */
.cache-source-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  vertical-align: middle;
  margin-left: 6px;
  cursor: help;
}

.empty-state { text-align: center; padding: 60px 24px; color: var(--text-muted); }
/* レポート一覧の読み込み中・空表示は画面幅ではなく、上のカード(.report-half-card)と
   同じ幅の中央に揃える */
#reports-container > .empty-state { max-width: 50%; min-width: 1000px; }
@media (max-width: 768px) {
  #reports-container > .empty-state { max-width: 100%; min-width: 0; }
}
.empty-icon  { font-size: 2.5rem; margin-bottom: 12px; }
/* 読み込み中インジケータ: 絵文字ではなく、グラデーションのリングが時計回りに回転する
   丸いスピナー。conic-gradientで先端が薄くなるコメット状の帯を作り、中心を
   mask でくり抜いてドーナツ状にしている。 */
.loading-spinner {
  width: 40px;
  height: 40px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--accent) 0%, transparent 80%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 5px));
  animation: loading-spin-rotate 0.9s linear infinite;
}
@keyframes loading-spin-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.empty-text  { font-size: 0.875rem; }

/* 所要時間が読めない処理向けの疑似進捗（実%ではなくアニメーションと経過秒数で進行中を示す） */
.indeterminate-bar {
  width: 100%;
  max-width: 280px;
  height: 6px;
  margin: 16px auto 8px;
  background: var(--bg-hover);
  border-radius: 99px;
  overflow: hidden;
  position: relative;
}
.indeterminate-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: -40%;
  width: 40%;
  height: 100%;
  background: var(--accent);
  border-radius: 99px;
  animation: indeterminate-slide 1.2s ease-in-out infinite;
}
@keyframes indeterminate-slide {
  0%   { left: -40%; }
  100% { left: 100%; }
}
.loading-elapsed { font-size: 0.75rem; color: var(--text-muted); }

/* ---- スピナー ---- */
.spinner {
  width: 18px; height: 18px;
  border: 2.5px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  flex-shrink: 0;
}
@keyframes spin { to{transform:rotate(360deg)} }

/* ---- トースト ---- */
.toast-container { position: fixed; bottom: 24px; right: 24px; display: flex; flex-direction: column; gap: 10px; z-index: 9999; }

.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  box-shadow: var(--shadow-lg);
  animation: toast-in 0.3s ease;
  min-width: 260px;
  max-width: 400px;
}

.toast.success { border-left: 3px solid var(--success); }
.toast.error   { border-left: 3px solid var(--danger);  }
.toast.info    { border-left: 3px solid var(--accent);  }

@keyframes toast-in { from{opacity:0;transform:translateX(20px)} to{opacity:1;transform:translateX(0)} }

/* ---- レスポンシブ ---- */
@media (max-width: 768px) {
  .app-layout { grid-template-columns: 1fr; }
  .app-layout.sidebar-collapsed { grid-template-columns: 1fr; }
  .hamburger-btn { display: flex; margin-left: auto; flex-shrink: 0; }
  .sidebar-collapse-btn { display: none; }

  /* ヘッダー：ロゴはアイコンのみにして、アカウント名+ハンバーガーを1行で右寄せに収める
     (BigQueryバッジ・ログアウトはJSでハンバーガーメニュー内に移動済み) */
  .app-header { padding: 10px 16px; gap: 8px; flex-wrap: nowrap; }
  .header-logo .logo-text { display: none; }
  .logo-icon-img { height: 21.6px; } /* PCの24pxに対して90%サイズ */

  /* サイドナビ → ハンバーガーで開閉する、画面右上に固定表示するフライアウトメニューに
     切り替える(全幅の帯ではなく右揃えのパネルにする)。topはJS(toggleMobileNav)で
     ヘッダーの実高さを測って設定する(ヘッダーの高さがビューポート幅で変わるため)。 */
  .app-sidebar {
    position: fixed;
    top: 60px;
    right: 0;
    left: auto;
    width: 260px;
    max-width: 85vw;
    height: auto;
    max-height: 0;
    border: none;
    border-radius: 0 0 0 var(--radius-lg);
    box-shadow: var(--shadow-lg);
    /* box-shadowはブラーで四方に広がるため、上端(ヘッダーとの境目)にも影が
       落ちてしまう。clip-path(top:0)で自身の上端より上の描画だけを切り取り、
       左・下・右の影はそのまま残す */
    clip-path: inset(0 -40px -40px -40px);
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: max-height 0.2s ease;
    z-index: 150;
  }
  .app-sidebar.open { max-height: 80vh; padding: 8px 0; overflow-y: auto; }
  /* ハンバーガーメニュー展開中、メインコンテンツを暗くしてタップで閉じられるようにする */
  .mobile-nav-overlay {
    display: block;
    position: fixed;
    /* topはJS(toggleMobileNav)でヘッダー実高さに合わせて設定し、
       ヘッダー(ロゴ/ハンバーガー)部分は暗くならないようにする */
    top: 60px;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 140;
  }
  .mobile-nav-overlay.open { opacity: 1; pointer-events: auto; }
  .nav-section-title { display: none; }
  .nav-item { flex-direction: row; gap: 10px; padding: 12px 20px; font-size: 0.875rem; border-left: none; border-bottom: none; }
  .nav-item.active { border-left-color: transparent; background: var(--accent-glow); }
  /* サブメニューであることが分かるよう、アイコンをその分だけ右にインデントする
     (上の.nav-itemがpadding-leftも20pxに上書きしてしまうため、ここで再度効かせる) */
  .nav-subitem { padding-left: 40px; }
  /* メニュー内の区切り線は不要なため外す
     (「.app-sidebar .nav-bottom-section」等クラス2つ分の詳細度にして、
     後方にある無条件のborder-topルールに負けないようにする) */
  .app-sidebar .nav-bottom-section { border-top: none; }
  .app-sidebar #nav-settings-toggle { border-bottom: none; }
  .app-sidebar .nav-mobile-extra:not(:empty) { border-top: none; }
  .app-main { padding: 20px 16px; }
  .summary-grid { grid-template-columns: repeat(2, 1fr); }
  .mode-tabs { width: 100%; }
  .report-mode-toggle-row { gap: 8px; flex-wrap: nowrap; margin-bottom: 12px; }
  .report-mode-toggle-row .mode-tabs { width: auto; flex: 0 0 auto; margin-bottom: 0; }
  .report-mode-toggle-row .mode-tab { padding: 6px 8px; font-size: 0.72rem; white-space: nowrap; }
  .drive-input-group { flex-direction: column; }
  /* フィルタ行: タイトル+クリアを1行目、部/課/役職を1行目分の高さで並べ、
     検索欄・アラートはそれぞれ全幅の行にする(縦に積むと枠が高くなりすぎるため) */
  .report-filter-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "title clear"
      "buspos buspos"
      "searchrow searchrow";
    gap: 8px;
    align-items: center;
  }
  /* input[type=checkbox]は除く: アラートフィルタのドロップダウン(#alert-filter-menu)は
     position:fixedで別の場所に表示されるが、DOM上は.report-filter-rowの子孫のため、
     このルールがチェックボックスにも掛かってしまい幅100%(=行いっぱい)に広がって
     ラベル文字が枠の外へはみ出す不具合があった */
  .report-filter-row select, .report-filter-row input:not([type="checkbox"]) { min-width: 0 !important; width: 100%; }
  .report-filter-row .card-title { grid-area: title; }
  #filter-clear-btn { grid-area: clear; justify-self: end; }
  .bu-sect-pos-row { grid-area: buspos; }
  /* 部/課/役職を均等3分割の固定幅にして画面右端まで揃える(勤務実態アラート側と同じ)。
     上の.report-filter-row select { width:100% !important } が効くと
     flex:1 1 0 での均等配分と競合するため、width/min-widthも!importantで打ち消す */
  .bu-sect-pos-row select { flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; }
  .filter-search-alert-group { grid-area: searchrow; }
  .report-half-card { max-width: 100%; min-width: 0; }

  /* select/input内の文字が中央寄りで見えづらいため、左右パディングを詰めて
     文字の書き出しをできるだけ左に近づける */
  #filter-business-unit, #filter-section, #filter-position,
  #filter-search, #alert-filter-btn,
  #ai-alert-business-unit, #ai-alert-section, #ai-alert-name, #ai-alert-filter-btn {
    padding-left: 6px;
    padding-right: 6px;
  }

  /* 期間集計ヘッダー行: 「フィルタ」行とはレイアウトが異なるため、grid化はせず
     flexで「タイトル+カレンダー欄」を1行目、プリセットボタン→曜日を2行目にする。
     (.report-filter-rowとの併用クラスのため、直前のgrid指定を上書きする) */
  .report-filter-row.range-period-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  /* 期間ボックス(2026/07/01〜2026/07/31形式、常に24文字で幅は一定)にできるだけ幅を
     残すため、隣のラベルは幅を切り詰める(iOS拡大防止で16px固定の入力欄側とは異なり、
     こちらはただのラベルなのでフォントを縮めても支障ない) */
  .range-period-row .card-title { flex: 0 0 auto; font-size: 0.78rem; }
  /* index.html側のinline style(flex:0 0 auto; width:230px)より優先させる必要があるため!important */
  .range-period-row #range-date-display {
    order: 2 !important;
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0;
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
  .range-period-row .preset-and-daytype-row {
    order: 3;
    flex: 0 0 100%;
    width: 100%;
    margin-top: 8px;
  }

  /* スマホでは6項目を1行にぴったり収めるため、ボタン/セレクトのpadding・文字を縮める */
  .preset-and-daytype-row .report-preset-btn,
  .preset-and-daytype-row select {
    padding: 6px 2px;
    font-size: 0.7rem;
  }

  /* カレンダー：日付枠を最小限に（取込済みは色のみで判別） */
  .calendar-grid { gap: 4px; }
  .cal-cell { min-height: 28px; padding: 2px; border-radius: 4px; }
  .cal-date { font-size: 0.7rem; }

  /* レポートカード：ドーナツ+指標は横並びのまま、タイムラインは下に配置 */
  .report-body { flex-direction: column; align-items: stretch; gap: 12px; }
  .report-summary { gap: 16px; }
  .metrics-row { gap: 8px; }
  /* ドーナツチャートはPC比 2/3 サイズに縮小 */
  .donut-chart { width: 67px; height: 67px; }
  .donut-inner { width: 51px; height: 51px; font-size: 0.85rem; }
  .metric-val { font-size: 1rem; }
  .report-body .timeline-section { max-width: 100%; width: 100%; flex: 1 1 100%; flex-basis: auto; }
  /* アラートは隠さずバーの下にフルwidthで配置。中身が無い時は高さを持たせない */
  .timeline-with-alert { flex-direction: column; align-items: stretch; }
  .timeline-with-alert .timeline-section { max-width: 100%; width: 100%; flex: 1 1 100%; flex-basis: auto; }
  .report-alert:empty { display: none; padding: 0; border: none; }

}

/* ---- ラジオボタン ---- */
.target-date-options {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.radio-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  cursor: pointer;
  user-select: none;
}

.radio-label input[type="radio"] {
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* ---- カレンダー UI ---- */
.calendar-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

/* 月送りボタンを日付枠と同じサイズの正方形にする */
.calendar-nav .btn {
  width: 40px;
  height: 40px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.calendar-nav:has(+ .calendar-grid-compact) .btn {
  width: 26px;
  height: 26px;
}

.calendar-nav h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}

.cal-header-cell {
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  padding-bottom: 8px;
}

.cal-cell {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cal-cell.empty {
  background: transparent;
  border-color: transparent;
}

.cal-date {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.cal-cell.cursor-pointer {
  cursor: pointer;
  transition: all 0.2s ease;
}

.cal-cell.cursor-pointer:hover {
  background: var(--bg-hover);
  border-color: var(--accent);
}

/* 取り込み済みは枠・背景は付けず、日付の文字色のみ緑にする */
.cal-cell.has-data .cal-date {
  color: var(--success);
}

/* 選択中の日付を緑枠で強調表示 */
.cal-cell.cal-cell-selected {
  border-color: var(--success);
  background: var(--success-bg);
}
.cal-cell.cal-cell-selected .cal-date {
  color: var(--success);
  font-weight: 700;
}

/* 単日選択カレンダー(日付指定/期間集計)を1/3程度の幅に狭める */
.calendar-wrap-narrow {
  max-width: 33%;
}
@media (max-width: 640px) {
  .calendar-wrap-narrow { max-width: 100%; }
}

/* カレンダーの表示/非表示をアコーディオンでなめらかに開閉する。
   grid-template-rows(0fr/1fr)のトリックは端末によって閉時に中身(前月/次月ボタン等)が
   はみ出て見えることがあったため、より確実にクリップされるmax-height方式に変更。 */
.calendar-accordion {
  overflow: hidden;
  max-height: 0;
  margin-top: 0;
  /* margin-topもmax-heightと同時にアニメーションさせないと、閉じる瞬間に
     余白だけ先に0になってカレンダーが一瞬上にずれてから縮むように見えるため、
     両方を同じtransitionで揃える */
  transition: max-height 0.3s ease, margin-top 0.3s ease;
}
.calendar-accordion.open {
  max-height: 2000px;
}
/* 日付指定/期間指定の切替: 高さの違うパネルを重ねて表示側に自動で揃える方式だと、
   低い方のパネルを表示した際にフィルタ枠との間に不自然な余白が残ってしまうため、
   実際のコンテンツ高さ同士をアニメーションで滑らかにつなぐ方式にしている。
   非表示側のパネルはposition:absoluteで文書の流れから外し(スペースを取らない)、
   表示側だけがposition:staticで通常の流れに入る。切替中はJS側で.report-mode-panels-stack
   のheightを「現在の実高さ→次のパネルの実高さ(scrollHeight)」に明示的に固定して
   アニメーションさせ、完了後はheightをautoに戻す(戻さないと、切替後にカレンダーの
   開閉などでパネルの中身の高さが変わってもこの枠だけ追従できなくなるため)。 */
.report-mode-panels-stack {
  position: relative;
  overflow: hidden;
  transition: height 0.3s ease;
}
/* 期間集計カードの「集計⇄詳細」切替も同じ考え方で、実高さ同士をアニメーションでつなぐ
   (animateHeightSwap参照)。transitionを常時のCSSにしておくことで、JS側は
   heightの数値(px/auto)を切り替えるだけで確実にアニメーションが効く。 */
.range-card-body-wrap {
  overflow: hidden;
  transition: height 0.3s ease;
}
.report-mode-panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* visibilityもtransition対象に含めることで、非表示への切替はopacityのフェードが
     終わった後(0.3s後)まで遅らせる(含めないと、フェード中でもvisibility:hiddenが
     即座に効いて描画されず、フェードが見えなくなる) */
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.report-mode-panel.open {
  position: static;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
/* 期間集計/稼働ログアラートのカレンダー欄は、閉じている間はmarginも0にして
   カード上下の余白がズレないようにし、開いた時だけ上に間隔を空ける
   (以前はHTML側にmargin-top:12pxを常時指定していたため、閉時でも余白が残っていた) */
.calendar-wrap-narrow.calendar-accordion.open {
  margin-top: 12px;
}
/* 日付指定: ヘッダー行(📅日付選択+テキストボックス)の下余白も、カレンダーが
   閉じている間は0にする(常時margin-bottomがあると、閉時にカード下側だけ
   余白が広く見えてしまうため、開いている時だけ間隔を空ける) */
#report-date-header {
  margin-bottom: 0;
  transition: margin-bottom 0.3s ease;
}
#report-date-header:has(+ #report-calendar-wrap.open) {
  margin-bottom: 16px;
}
/* カレンダー本体(日付指定/期間集計/稼働ログアラート共通)の外枠上下の余白を均等にする */
.calendar-wrap-narrow > .calendar-accordion-inner {
  padding-top: 8px;
  padding-bottom: 8px;
}

/* スマホでカレンダー選択欄をタップした際、iOSでフォーム要素の文字サイズが16px未満だと
   自動的にページが拡大表示されてしまうため、16px以上を確保して拡大を防ぐ */
@media (max-width: 768px) {
  #report-date-display, #range-date-display, #ai-alert-date-display,
  #filter-search, #ai-alert-name {
    font-size: 16px;
  }
  /* #report-date-displayの幅(110px)はデスクトップの14px想定で、16pxだと
     日付("2026/07/06"等)が右端で欠けてしまうため、スマホでは幅を広げる */
  #report-date-display {
    width: 135px !important;
  }
}

/* 期間集計: 開始日〜終了日確定後、その間を緑枠で表示 */
.calendar-grid-compact .cal-cell.in-range {
  border-color: var(--success);
  background: var(--success-bg);
}
.calendar-grid-compact .cal-cell.in-range .cal-date {
  color: var(--success);
}

/* 期間集計: コンパクトな範囲選択カレンダー（単日側のグリッドを縮小して流用） */
.calendar-grid-compact {
  gap: 3px;
}
.calendar-grid-compact .cal-cell {
  padding: 2px;
  min-height: 26px;
}
.calendar-grid-compact .cal-header-cell {
  font-size: 0.68rem;
  padding-bottom: 4px;
}
.calendar-grid-compact .cal-date {
  font-size: 0.72rem;
}

/* ======== 設定モーダル ======== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.modal-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

.settings-modal {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  width: 400px;
  max-width: 90%;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  transform: translateY(20px);
  transition: transform 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.modal-overlay.visible .settings-modal {
  transform: translateY(0);
}

.settings-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.settings-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.close-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.5rem;
  cursor: pointer;
}

.close-btn:hover {
  color: var(--text-primary);
}

/* ログ明細モーダルの閉じるボタン: ヘッダーがモバイルで縦積みになっても
   常に画面右上に固定表示する(フレックスの並び順に依存させない) */
.log-detail-header .close-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
}

/* ログ明細モーダルのヘッダー: PCでは「名前 検索窓 …(余白)… 詳細を見る ×」を1行に横並び
   (space-betweenだと検索窓が名前から離れてしまうため、flex-startにして
   name+検索窓は左に寄せ、詳細を見るボタンだけ margin-left:auto で右に押し出す) */
.log-detail-header {
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 12px;
  padding-right: 32px; /* 右上固定の閉じるボタンとの重なりを防ぐ */
}
.log-detail-title { flex: 0 1 auto; min-width: 0; }
.log-detail-search-input { flex: 0 0 auto; width: 220px; }
.log-detail-expand-wrap { flex: 0 0 auto; margin-left: auto; }

/* モバイルでは1行に収まらないため縦積みに戻す */
@media (max-width: 640px) {
  .log-detail-header { flex-direction: column; align-items: stretch; }
  .log-detail-search-input { width: 100%; }
  .log-detail-expand-wrap { margin-left: 0; }
}

/* 管理者/特権管理者以外は、ログ明細モーダル内でのテキスト選択(ドラッグ)を禁止する
   (右クリック・ショートカットキーの禁止はJS側、app.js参照)。検索入力欄は除外し、
   入力操作自体は妨げない。 */
.log-detail-no-copy #log-detail-body,
.log-detail-no-copy .log-detail-table {
  user-select: none;
  -webkit-user-select: none;
}

.theme-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 表示設定ページの選択項目(カラーテーマ4種・ログ明細の開き方2種など)は
   短いラベルが縦に並ぶと縦長になりすぎるため、2列で折り返す。
   親カード側でも幅を確保し、ラベルの文言が折り返さないようにする。 */
.theme-options-2col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.theme-options-2col .theme-label { white-space: nowrap; }

.theme-label {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 0;
}

.theme-label:hover {
  background: var(--bg-hover);
}

.theme-label input[type="radio"] {
  accent-color: var(--accent);
}

/* ---- アクセス権限管理: ロール編集パネル(右からスライドイン) ---- */
#role-edit-overlay { justify-content: flex-end; }
.role-edit-panel {
  background: var(--bg-card);
  border-left: 1px solid var(--border);
  padding: 28px;
  width: 420px;
  max-width: 92vw;
  height: 100vh;
  overflow-y: auto;
  box-shadow: -10px 0 30px rgba(0,0,0,0.3);
  transform: translateX(20px);
  transition: transform 0.2s ease;
  display: flex;
  flex-direction: column;
}
#role-edit-overlay.visible .role-edit-panel { transform: translateX(0); }

.dept-tree { font-size: 0.85rem; max-height: 50vh; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px; }
.dept-tree-node { padding: 3px 0; }
.dept-tree-label { display: flex; align-items: center; gap: 6px; cursor: pointer; padding: 3px 4px; border-radius: 4px; }
.dept-tree-label:hover { background: var(--bg-hover); }
.dept-tree-children { margin-left: 20px; border-left: 1px dashed var(--border-subtle); padding-left: 8px; }
.dept-tree-toggle { width: 14px; display: inline-block; text-align: center; color: var(--text-muted); cursor: pointer; user-select: none; }

/* ---- ユーザー一覧テーブル(アクセス権限管理) ---- */
.admin-users-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.admin-users-table th { text-align: left; padding: 8px 10px; color: var(--text-secondary); font-weight: 600; border-bottom: 1px solid var(--border); white-space: nowrap; }
.admin-users-table th.sortable-th { cursor: pointer; user-select: none; }
.admin-users-table th.sortable-th:hover { color: var(--text-primary); }
.admin-users-table th.sortable-th::after { content: ''; display: inline-block; width: 1em; }
.admin-users-table th.sortable-th[data-sorted="asc"] { color: var(--accent); }
.admin-users-table th.sortable-th[data-sorted="asc"]::after { content: '▴'; }
.admin-users-table th.sortable-th[data-sorted="desc"] { color: var(--accent); }
.admin-users-table th.sortable-th[data-sorted="desc"]::after { content: '▾'; }
.admin-users-table td { padding: 8px 10px; border-bottom: 1px solid var(--border-subtle); white-space: nowrap; }
.admin-users-table tr:hover td { background: var(--bg-hover); }

.role-badge { display: inline-block; padding: 2px 10px; border-radius: 99px; font-size: 0.72rem; font-weight: 600; white-space: nowrap; }
.role-badge.super_admin { background: var(--danger-bg); color: var(--danger); }
.role-badge.admin       { background: rgba(124, 58, 237, 0.15); color: #a78bfa; }
.role-badge.supervisor  { background: var(--accent-glow); color: var(--accent); }
.role-badge.user        { background: var(--bg-hover); color: var(--text-secondary); }

.nav-bottom-section {
  margin-top: auto;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}

/* モバイルのハンバーガーメニュー内に移動してくるログアウト・BigQuery接続状況
   (稼働レポート/設定メニューの下、末尾に表示。ログアウトはメニュー項目と同じ見た目、
   BigQuery接続状況はその下に情報表示として並べる) */
.nav-mobile-extra {
  display: none;
}
.nav-mobile-extra:empty { display: none; }
.nav-mobile-extra:not(:empty) {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border-subtle);
  margin-top: 8px;
  padding-top: 8px;
}
/* デスクトップのヘッダーボタンとしての見た目(以前はHTML側にインラインstyleで
   指定していたが、モバイルメニュー用CSSの詳細度に負けてしまうため通常のCSSに移す)。
   「ご利用ガイド」ボタンも同じ高さ・文字サイズに揃える。 */
#header-logout-link,
#user-info a[href="/manual"] {
  padding: 5px 12px;
  font-size: 0.8rem;
}
.nav-mobile-extra #header-logout-link.nav-item-style {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 20px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
  background: none;
  border: none;
  border-radius: 0;
  text-align: left;
}
/* ログアウトのアイコンは他のメニュー項目(稼働レポート/勤務実態アラート/設定)と
   同じ線画SVGアイコンを使う。デスクトップのヘッダーボタンでは表示しない */
#header-logout-link .logout-icon { display: none; }
.nav-mobile-extra #header-logout-link.nav-item-style .logout-icon {
  display: inline-flex;
}
.nav-mobile-extra #bq-status-badge {
  align-self: center;
  margin: 8px auto 4px;
  border-radius: 8px;
}
/* BigQuery接続済み表示: モバイルメニュー内では「(プロジェクト名)」の前で改行して2行にする */
.nav-mobile-extra .bq-status-detail {
  display: block;
}

/* ======== レポートカード ======== */
.report-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 8px 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.report-header {
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border);
  padding-bottom: 4px;
}
.report-header-meta {
  /* 名前と同じ行の続きに置くと、折り返し時に2行目の先頭が名前の真下に来てしまうため、
     部/課/役職は名前とは別の行(自分の書き出し位置)から折り返させる */
  display: block;
  margin-left: 0;
  margin-top: 2px;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--text-secondary);
}
.report-header-name-link {
  cursor: pointer;
  border-radius: 4px;
  transition: var(--transition);
}
.report-header-name-link:hover {
  color: var(--accent);
  text-decoration: underline;
}
.report-header-empcode {
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--text-muted);
  line-height: 1.4;
}
.report-header-pattern {
  color: var(--text-secondary);
  white-space: nowrap;
  margin-left: 6px;
}
.report-header-name-link { cursor: pointer; }
.report-header-name-link:hover { color: var(--accent); text-decoration: underline; }
/* PC: サマリー(ドーナツ+指標)とタイムラインを横並びにし、1人あたりの高さを抑える */
.report-body {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: nowrap;
}
.report-summary {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}
/* タイムラインバーとアラート枠のペア。.report-body には他に .report-summary
   (ドーナツ+指標、幅固定)が同居することがあるため、bar:alert=2:1の比率は
   このペア専用のラッパーの幅を基準に計算する(.report-body全体を基準にすると
   summary分の幅が考慮されずアラート枠が潰れるため)。 */
.timeline-with-alert {
  display: flex;
  gap: 16px;
  align-items: center;
  flex: 1;
  min-width: 0;
}
.timeline-with-alert .timeline-section {
  flex: 0 1 66.6667%;
  max-width: 66.6667%;
  min-width: 0;
}
.report-alert {
  flex: 1;
  min-width: 0;
  align-self: stretch;
  border: 1px dashed var(--border);
  border-radius: 6px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px; /* アラート項目が複数ある場合の行間を詰める */
}
/* モバイルでは目盛とアラート枠の間隔をgap 0にし、枠内の上下paddingも5pxにする。
   (この宣言より前にある @media (max-width: 768px) ブロック内に書いても、CSSの
   ソース順で後に来るこの無条件ルールに負けて効かなくなるため、ここに置く) */
@media (max-width: 768px) {
  .timeline-with-alert { gap: 0; }
  .report-alert { padding-top: 5px; padding-bottom: 5px; margin-bottom: 5px; }
}
/* .report-filter-row の overflow-x:auto により overflow-y も暗黙にクリップ対象になる
   (CSS仕様上、片方が visible 以外なら他方も auto になる)ため、position:absolute では
   ドロップダウンがクリップされて見えなくなる。position:fixed でその影響を回避し、
   表示位置は開く際にJS側でボタンの座標を基準に設定する(toggleAlertFilterMenu参照)。 */
.alert-filter-menu {
  position: fixed;
  z-index: 20;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  padding: 8px;
  min-width: 240px;
  max-width: calc(100vw - 16px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* アラートにチェックを入れてから一覧の絞り込み結果が表示されるまで(バックエンドへの
   問い合わせを伴うため一瞬の待ち時間がある)、メニュー下部にオーロラ調のグラデーションが
   途切れなく流れるプログレス表示を出す。実際の進捗%は分からないため、不確定進捗
   (グラデーションが同じ動きを繰り返す)表示にしている。 */
.alert-filter-menu-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  overflow: hidden;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.alert-filter-menu-progress.active { opacity: 1; }
.alert-filter-menu-progress::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #6366f1, #8b5cf6, #ec4899, #f59e0b, #10b981, #06b6d4, #6366f1);
  background-size: 200% 100%;
  animation: alert-filter-progress-flow 1.8s linear infinite;
  box-shadow: 0 0 6px 1px rgba(139, 92, 246, 0.55);
}
@keyframes alert-filter-progress-flow {
  0%   { background-position: 0% 0; }
  100% { background-position: -200% 0; }
}
.alert-filter-option {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  box-sizing: border-box;
  gap: 6px;
  font-size: 0.8rem;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
}
/* チェックボックス自体のブラウザ既定marginで行ごとに位置がずれることがあるため、
   固定サイズ・margin無しにして常に左端(padding基準)に揃える。 */
.alert-filter-option input[type="checkbox"] { flex: 0 0 auto; margin: 0; }
.alert-filter-option:hover {
  background: var(--bg-hover);
}
#alert-filter-count, #ai-alert-filter-count {
  margin-left: 4px;
  font-size: 0.7rem;
  color: var(--accent);
  font-weight: 700;
}
.alert-item {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--warning);
}
/* 「詐称系」アラート(退勤打刻後勤務の可能性/勤務時間詐称の可能性/深夜残業詐称の可能性)を
   通常のアラートと区別するため、その先頭項目の上に仕切り線を入れる */
.alert-item-divider,
.alert-filter-divider {
  border-top: 1px solid var(--border);
  margin: 6px 0;
}
/* 期間集計の詳細表示で、チェック中のアラート種別が画面に入った瞬間に2秒だけ
   目立たせるレインボー演出(bindRainbowAlertObserver参照)。演出後はエンジ色で
   持続的に目立たせたままにする。 */
@keyframes rainbow-text-flash {
  0%   { color: #ff2d2d; }
  16%  { color: #ff9a2d; }
  33%  { color: #ffe22d; }
  50%  { color: #2dd45a; }
  66%  { color: #2d8cff; }
  83%  { color: #a12dff; }
  100% { color: #a9273b; }
}
.alert-item-rainbow-target.rainbow-flash {
  animation: rainbow-text-flash 2s linear;
}
.alert-item-rainbow-target.rainbow-done {
  color: #a9273b; /* エンジ色 */
}

/* ドーナツチャート */
.donut-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.donut-label {
  font-size: 0.8rem;
  color: var(--text-secondary);
}
.donut-chart {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: conic-gradient(var(--success) 0%, #e2e8f0 0%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.donut-inner {
  width: 52px;
  height: 52px;
  background: var(--bg-card);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
}

/* 指標サマリ（業務時間/操作時間/休憩時間を3行で表示） */
.metrics-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.metric-item {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 8px;
}
.metric-label {
  position: relative;
  width: 72px;
  flex-shrink: 0;
  text-align: right;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.metric-val {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-primary);
}

/* TS勤務時間: 「勤怠打刻なし」の文字は時間数より2px小さく表示する */
.metric-val-small {
  font-size: calc(1.2rem - 2px);
}

/* TS勤務時間: 時間数の下に出勤〜退勤の実時刻を小さく添える */
.metric-val-group {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.metric-sub {
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--text-secondary);
}

/* タイムライン (PC活用状況) */
.timeline-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.timeline-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
}
/* PC稼働(起動/終了)とTeamSpirit勤怠(出勤/退勤)のラベル行を、親.timeline-sectionの
   gapを1回分だけ消費するようにまとめて包む(2行の間には余白を作らない)。 */
.timeline-labels-stack {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.timeline-labels-ts {
  position: relative;
  font-size: 0.75rem;
  min-height: 1.2em;
}
.timeline-labels-ts:empty { display: none; }
.timeline-labels {
  position: relative;
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--text-muted);
  min-height: 1.2em;
}
/* 起動/終了ラベルが無い日(PC稼働ログが無い、またはWorkLog非表示設定時)は
   空行の分だけ隙間ができてしまうため、TeamSpirit出勤/退勤ラベルが下に詰まるように折りたたむ */
.timeline-labels:empty { display: none; }
.timeline-labels-bottom {
  position: relative;
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--text-muted);
  min-height: 1.2em;
}
.timeline-ticks {
  position: relative;
  height: 6px;
}

/* バー下の時刻表示（モバイル）は縮小して1段の横並びに収める */
@media (max-width: 768px) {
  .timeline-labels-bottom { min-height: 1.2em; font-size: 0.42rem; letter-spacing: -0.8px; }
}
.timeline-tick {
  position: absolute;
  top: 0;
  width: 1px;
  height: 100%;
  background: var(--text-muted);
}
.timeline-bar {
  position: relative;
  height: 32px;
  background: var(--bg-base);
  border: 1px solid var(--border); /* border around the whole timeline like in the image */
  border-radius: 0;
  overflow: hidden;
}
.timeline-bar-clickable { cursor: pointer; }
.timeline-bar-clickable:hover { border-color: var(--accent); }
.timeline-segment {
  position: absolute;
  top: 7.5px; /* (32px - 15px) / 2 の中央配置から1px上に調整 */
  height: 15px; /* TeamSpirit勤怠の帯(全高)と重ねても両方視認できるよう、PC稼働は固定15pxに収める */
  min-width: 2px; /* 数分程度の短い稼働もバー上で視認できるように最小幅を確保 */
  background: var(--pc-active); /* blue color for active segments */
  /* Salesforce/Gカレンダーの帯(全高、z-index:1)より手前に出す。PC稼働の帯は高さ15pxで
     より小さく、重なった際は面積の小さいこちらを優先してホバー/ツールチップを
     取れるようにする(でないと後発のカレンダー帯に覆われてホバーできなくなる)。 */
  z-index: 2;
}
.timeline-loading {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--bg-base) 25%, var(--border) 50%, var(--bg-base) 75%);
  background-size: 200% 100%;
  animation: timeline-loading-shimmer 1.4s ease-in-out infinite;
}
@keyframes timeline-loading-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---- 履歴テーブルの操作ボタン ---- */
.action-cell {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.btn-icon {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 4px);
  padding: 4px 8px;
  cursor: pointer;
  font-size: 0.8rem;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-icon:hover {
  background: var(--bg-hover);
}

.btn-icon.edit-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.btn-icon.delete-btn:hover {
  border-color: var(--danger);
  color: var(--danger);
}

.btn-icon.save-btn {
  background: var(--success);
  color: #fff;
  border-color: var(--success);
}
.btn-icon.save-btn:hover {
  background: #16a34a;
}

.btn-icon.cancel-btn {
  background: var(--bg-hover);
  color: var(--text-secondary);
}

/* インライン入力フィールド */
.edit-filename-input {
  width: 100%;
  padding: 4px 8px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm, 4px);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-family: inherit;
  font-size: inherit;
  outline: none;
}


/* 追加: タイムラインのUI改善とアラート表示用スタイル */
.timeline-segment-purple {
  background: #9333ea !important;
}

/* 同一ウィンドウが2時間超表示された異常値区間(PC放置の疑い、稼働時間の集計からは除外)。
   「⚠️ PC電源未シャットダウン」アラートと同じ警告色(--warning)で強調する。 */
.timeline-segment-anomalous {
  background: var(--warning) !important;
}

/* TeamSpirit勤怠(公式の出社〜退社)をPC稼働バーの背後に敷く帯。
   .timeline-segment(PC稼働)より先にDOMへ挿入することで自然に背面へ回る。 */
.ts-band-overlay {
  position: absolute;
  top: 0;
  height: 100%;
  background: var(--ts-band-bg);
  border-left: 2px solid var(--ts-band);
  border-right: 2px solid var(--ts-band);
  z-index: 0;
}
/* 休憩(中抜け)の時間帯だけ斜線ハッチにして「勤務時間内だが稼働除外」と分かるようにする */
.ts-rest-cut {
  position: absolute;
  top: 0;
  height: 100%;
  background: repeating-linear-gradient(45deg, var(--ts-rest) 0 4px, transparent 4px 8px);
  z-index: 0;
}

/* Salesforce営業活動(Event)の時間帯マーカー。PC稼働セグメントより後にDOMへ
   挿入することで前面に表示する。.timeline-barはoverflow:hiddenのため
   バー外にはみ出す装飾(三角マーカー等)は使わず、バー内で完結する表現にする。 */
.sf-event-marker {
  position: absolute;
  top: 0;
  height: 100%;
  min-width: 3px;
  background: var(--sf-event-bg);
  border-top: 2px solid var(--sf-event);
  border-bottom: 2px solid var(--sf-event);
  box-sizing: border-box;
  z-index: 1;
}
/* amptalk通話(AmptalkCall)は同じSalesforce営業活動でも別経路のデータのため、
   Event(緑)と区別できるようティール系にする */
.sf-event-marker.amptalk-event-marker {
  background: var(--amptalk-event-bg);
  border-top-color: var(--amptalk-event);
  border-bottom-color: var(--amptalk-event);
}
/* amptalk通話チップにマウスオーバーした際、対応する帯を白く点滅させて
   どの帯がその通話かひと目で分かるようにする。PC稼働の帯(.timeline-segment、
   z-index:2)に重なって隠れないよう、点滅中だけ最前面に出す。 */
.amptalk-event-marker.amptalk-blink {
  animation: amptalk-blink-flash 0.5s ease-in-out infinite;
  z-index: 3;
}
@keyframes amptalk-blink-flash {
  0%, 100% { background: var(--amptalk-event-bg); border-top-color: var(--amptalk-event); border-bottom-color: var(--amptalk-event); }
  50% { background: #ffffff; border-top-color: #ffffff; border-bottom-color: #ffffff; }
}
/* MiiTel通話(MiitelCall)は同じSalesforce営業活動でも別経路のデータのため、
   Event(緑)・amptalk(ティール)と区別できるようブランドカラーの青にする */
.sf-event-marker.miitel-event-marker {
  background: var(--miitel-event-bg);
  border-top-color: var(--miitel-event);
  border-bottom-color: var(--miitel-event);
}
.miitel-event-marker.miitel-blink {
  animation: miitel-blink-flash 0.5s ease-in-out infinite;
  z-index: 3;
}
@keyframes miitel-blink-flash {
  0%, 100% { background: var(--miitel-event-bg); border-top-color: var(--miitel-event); border-bottom-color: var(--miitel-event); }
  50% { background: #ffffff; border-top-color: #ffffff; border-bottom-color: #ffffff; }
}
/* Salesforce営業活動(Event、時刻付き)チップにマウスオーバーした際、対応する帯を
   白く点滅させる(amptalk・訪問予定と同様)。 */
.sf-event-marker.is-sf-event-marker.sf-blink {
  animation: sf-blink-flash 0.5s ease-in-out infinite;
  z-index: 3;
}
@keyframes sf-blink-flash {
  0%, 100% { background: var(--sf-event-bg); border-top-color: var(--sf-event); border-bottom-color: var(--sf-event); }
  50% { background: #ffffff; border-top-color: #ffffff; border-bottom-color: #ffffff; }
}
/* 訪問予定(PlannedVisit、Salesforce Task「訪問予定日」)は実績ではなく予定のため、
   Salesforce営業活動(緑)と同系色にしつつ、実績(sf-event-marker本来の16%塗り)より
   濃い50%塗りにして「予定」であることを塗りの濃さで区別する。左右の線は入れず、
   sf-event-markerと同じ上下2pxのみとする(□に囲まない)。 */
.sf-event-marker.planned-visit-marker {
  background: color-mix(in srgb, var(--sf-event) 25%, transparent);
}
/* 連続する2件の訪問予定が隙間なく隣接している場合、左側の予定の右端に1pxの
   縦線を入れて別の予定であることが分かるようにする(JS側で隣接時のみ付与)。 */
.planned-visit-marker.visit-marker-divider {
  border-right: 1px solid var(--sf-event);
}
/* 訪問予定チップにマウスオーバーした際、対応する帯を白く点滅させる(amptalkと同様)。
   隣接して区切り線を持つ帯も、その帯だけが点滅する(マージせず個別描画のため)。 */
.planned-visit-marker.visit-blink {
  animation: visit-blink-flash 0.5s ease-in-out infinite;
  z-index: 3;
}
@keyframes visit-blink-flash {
  0%, 100% { background: color-mix(in srgb, var(--sf-event) 25%, transparent); border-color: var(--sf-event); }
  50% { background: #ffffff; border-color: #ffffff; }
}
/* Googleカレンダー連携マーカー(Salesforce未登録の営業訪問実績を補う補助情報)。
   ON/OFFトグル(#calendar-overlay-tabs)の状態はbody[data-cal-overlay-mode]に
   反映され、ここで表示/非表示を切り替える(トグル操作のたびにタイムラインを
   再取得・再描画しなくて済むよう、要素自体は常に描画しCSSだけで出し分ける)。 */
.cal-event-marker {
  position: absolute;
  top: 0;
  height: 100%;
  min-width: 3px;
  background: var(--cal-event-bg);
  border-top: 2px solid var(--cal-event);
  border-bottom: 2px solid var(--cal-event);
  box-sizing: border-box;
  z-index: 1;
}
.cal-event-marker.is-meeting {
  background: var(--cal-event-meeting-bg);
  border-top-color: var(--cal-event-meeting);
  border-bottom-color: var(--cal-event-meeting);
}
body:not([data-cal-overlay-mode="on"]) .cal-event-marker {
  display: none;
}

/* 浮動パネルの「WorkLog」「Salesforce」「amptalk」「MiiTel」個別トグル。帯・チップとも
   対象を絞ってdisplay:noneで切り替える(常時表示のGカレンダーと同じ方式)。
   amptalk通話・MiiTel通話はSalesforce由来のデータではあるが別トグルで独立制御するため、
   Salesforceトグルの対象からは除外する
   (:not(.amptalk-event-marker):not(.miitel-event-marker) / :not(.is-amptalk):not(.is-miitel))。 */
body[data-worklog-visible="off"] .timeline-segment {
  display: none;
}
body[data-sf-visible="off"] .sf-event-marker:not(.amptalk-event-marker):not(.miitel-event-marker) {
  display: none;
}
body[data-sf-visible="off"] .sales-activity-chip:not(.is-amptalk):not(.is-miitel) {
  display: none;
}
body[data-amptalk-visible="off"] .amptalk-event-marker {
  display: none;
}
body[data-amptalk-visible="off"] .sales-activity-chip.is-amptalk {
  display: none;
}
body[data-miitel-visible="off"] .miitel-event-marker {
  display: none;
}
body[data-miitel-visible="off"] .sales-activity-chip.is-miitel {
  display: none;
}
/* 隙間なく連続する複数の予定が1本の帯に結合された際、境目に入れる区切り線。
   帯全体(100%高)ではなく、上下の太枠(border-top/bottom 2px)部分だけに
   白1pxを重ねることで、塗りつぶし部分の見た目を変えずに複数件であることを示す。 */
.cal-event-divider {
  position: absolute;
  width: 1px;
  height: 2px;
  background: #fff;
  z-index: 2;
  pointer-events: none;
}
.cal-event-divider-top { top: 0; }
.cal-event-divider-bottom { bottom: 0; }
body:not([data-cal-overlay-mode="on"]) .cal-event-divider {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .amptalk-event-marker.amptalk-blink { animation: none; background: #ffffff; border-top-color: #ffffff; border-bottom-color: #ffffff; }
  .miitel-event-marker.miitel-blink { animation: none; background: #ffffff; border-top-color: #ffffff; border-bottom-color: #ffffff; }
  .planned-visit-marker.visit-blink { animation: none; background: #ffffff; border-color: #ffffff; }
  .sf-event-marker.is-sf-event-marker.sf-blink { animation: none; background: #ffffff; border-top-color: #ffffff; border-bottom-color: #ffffff; }
}

/* バー下の「本日の営業活動」一覧(件数チップ)。0件の日は要素ごと出さない */
.sales-activity-slot:empty { display: none; }
.sales-activity-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.sales-activity-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  color: var(--sf-event);
  background: var(--sf-event-bg);
  border: 1px solid var(--sf-event);
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sales-activity-chip.is-task {
  color: var(--text-secondary);
  background: var(--bg-hover);
  border-color: var(--border);
}
.sales-activity-chip.is-amptalk {
  color: var(--amptalk-event);
  background: var(--amptalk-event-bg);
  border-color: var(--amptalk-event);
}
.sales-activity-chip.is-miitel {
  color: var(--miitel-event);
  background: var(--miitel-event-bg);
  border-color: var(--miitel-event);
}
.sales-activity-chip.is-planned-visit {
  color: var(--sf-event);
  background: color-mix(in srgb, var(--sf-event) 25%, transparent);
  border: 1px solid var(--sf-event);
}

.timeline-tick.extra-mark,
.timeline-label-item.extra-mark {
  display: none;
}
/* 1H目盛りトグルはカード/期間集計本体側に1つだけ置き、配下の全タイムラインに反映する
   (.timeline-section 自身ではなく祖先要素に付与されるため、子孫セレクタで拾う) */
.show-1h-marks .timeline-tick.extra-mark,
.show-1h-marks .timeline-label-item.extra-mark {
  display: inline-block;
}

.hide-by-default {
  display: none;
}
.show-1h-marks .hide-by-default {
  display: block;
}

/* 極限まで隙間を詰める */
.timeline-section {
  margin-bottom: 4px;
}
.timeline-bar {
  margin-bottom: 0px !important;
  /* 親 .timeline-section の gap:8px 分を打ち消し、起動/終了ラベルの直下に詰める */
  margin-top: -6px !important;
}
.timeline-ticks {
  height: 3px !important;
  /* 親 .timeline-section の gap:8px 分を打ち消し、バー直下に詰める */
  margin-top: -7px !important;
}
.timeline-labels-bottom {
  min-height: auto !important;
  height: 16px !important;
  /* 親 .timeline-section の gap:8px 分を打ち消し、目盛り(｜)の直下に詰める */
  margin-top: -8px !important;
}

/* タイムラインセグメントのカスタムツールチップ (native title属性は改行/幅を制御できないため)。
   .timeline-barがoverflow:hiddenのため、以前はバー内に収まる::after疑似要素で表示していたが、
   帯の高さ(28px)に収まらない分がクリップされて読めなかった。body直下に浮かせるJS駆動の
   フローティング要素(#timeline-segment-tooltip、position:fixed)に置き換えて、
   帯の外にも自由に表示できるようにする。 */
.timeline-segment[data-tooltip], .sf-event-marker[data-tooltip], .cal-event-marker[data-tooltip] { cursor: default; }
#timeline-segment-tooltip {
  position: fixed;
  display: none;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  padding: 6px 10px;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--text-primary);
  white-space: pre;
  overflow: hidden;
  max-width: min(560px, 80vw);
  z-index: 10000; /* .modal-overlay(z-index:9999)より手前にして、モーダル内でホバーしても隠れないようにする */
  pointer-events: none;
}

/* ---- モバイル: 稼働時間バーを常に画面幅いっぱいに(ファイル後方の同名セレクタが
   後勝ちで上書きしてしまうため、確実に最後に読まれるここへ配置) ---- */
@media (max-width: 640px) {
  /* report-body(ドーナツ+指標行 / タイムライン行を縦積みする親)のalign-itemsが
     ファイル後方の同名セレクタ(align-items:center)に上書きされ、子要素が中央寄せの
     内容幅(見た目50%程度)になってしまっていた。stretchを確実に効かせて全幅にする。 */
  .report-body {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .timeline-with-alert {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .timeline-with-alert .timeline-section,
  .range-day-row .timeline-section {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  .range-day-row { flex-direction: column; align-items: stretch; }
}

/* ---- モバイル: フィルタ行の「名前/メールアドレス」と「アラート」を50/50で1行に ---- */
.filter-search-alert-group { display: contents; }
@media (max-width: 768px) {
  .filter-search-alert-group {
    display: flex !important;
    grid-column: 1 / -1;
    gap: 8px;
  }
  .filter-search-alert-group #filter-search { flex: 1 1 50% !important; width: auto !important; }
  .filter-search-alert-group .alert-filter-wrap { flex: 1 1 50% !important; width: auto !important; }
  .filter-search-alert-group .alert-filter-wrap #alert-filter-btn { width: 100% !important; }
}

/* クリアボタンは他の.btnより一回り小さく、左右の余白も詰める。角丸も他の
   フィルタ要素(テキストボックス/ドロップダウン/アラートボタン等)と揃えて6pxにする */
#filter-clear-btn, #ai-alert-clear-btn {
  padding: 10px 10px; /* 上下paddingを他のフィルタ要素(.drive-input)と揃えて高さを一致させる */
  font-size: 0.8rem;
  border-radius: 6px;
}

/* ---- クリアボタンの文言: デスクトップ「クリア」/ モバイル「フィルタ解除」 ----
   (稼働レポート/AIアラート両方のクリアボタンで共用) */
#filter-clear-btn .clear-btn-label-mobile, #ai-alert-clear-btn .clear-btn-label-mobile { display: none; }
@media (max-width: 768px) {
  #filter-clear-btn .clear-btn-label-desktop, #ai-alert-clear-btn .clear-btn-label-desktop { display: none !important; }
  #filter-clear-btn .clear-btn-label-mobile, #ai-alert-clear-btn .clear-btn-label-mobile { display: inline !important; }
}

/* ---- 「〇〇として表示」バナー (特権管理者専用の隠し機能) ----
   スクロールしても常に画面最上部に見えるよう固定表示にする(position:fixed)。
   本来の管理者本人とは別のユーザーとして見えていることに、常にどの位置を見ていても
   気づけるようにするため。押し下げられた分の高さはJS側でbody.view-as-activeの
   padding-topとして反映する(showApp参照)。 */
#view-as-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 16px;
  background: var(--warning);
  color: #1a1200;
  font-size: 0.85rem;
  font-weight: 600;
}
#view-as-banner button {
  border: 1px solid rgba(0,0,0,0.35);
  background: rgba(255,255,255,0.35);
  color: inherit;
  font-weight: 600;
  font-size: 0.8rem;
  padding: 4px 12px;
  border-radius: 6px;
  cursor: pointer;
  flex: 0 0 auto;
  white-space: nowrap;
}
#view-as-banner button:hover { background: rgba(255,255,255,0.55); }

/* 社員番号クリックで「〇〇として表示」を開けることを示す(特権管理者にのみ付与される) */
.report-header-empcode-clickable {
  cursor: pointer;
  text-decoration: underline dotted;
}
.report-header-empcode-clickable:hover { color: var(--accent); }