/* リセットCSS & 基本設定 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN",
    "Hiragino Sans", Meiryo, sans-serif;
  background-color: #fafafa; /* テーマに合わせた優しい白 */
  color: #333;
  height: 100vh;
  display: flex; /* 横並びレイアウト */
}

/* --- ログイン画面 --- */
body.login-page {
  display: block;
  background-color: #f4f6f8; /* 少し濃いグレー */
  height: 100vh;
  margin: 0;
}

.login-container {
  display: flex;
  align-items: center; /* 上下中央 */
  justify-content: center; /* 左右中央 */
  min-height: 100vh; /* 画面いっぱいの高さ */
  padding: 20px;
}

.login-box {
  background: white;
  padding: 48px 40px;
  border-radius: 12px;
  /* 境界をはっきりさせる設定 */
  border: 1px solid #e0e0e0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);

  text-align: center;
  width: 100%;
  max-width: 400px;
}

.app-title {
  color: #2e7d32; /* テーマカラーの緑 */
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 8px;
}

.app-subtitle {
  color: #666;
  font-size: 14px;
  margin-bottom: 32px;
}

.google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background-color: white;
  color: #3c4043;
  border: 1px solid #dadce0;
  padding: 12px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 500;
  font-family: "Roboto", sans-serif;
  /* ホバー時のアニメーション設定 */
  transition: background-color 0.2s, box-shadow 0.2s, transform 0.1s;
}

/* ホバー時のスタイル (ここを強化！) */
.google-btn:hover {
  background-color: #f7fafc; /* 薄い水色っぽいグレー */
  border-color: #d2e3fc; /* 薄い青枠 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); /* 影を少し濃く */
  cursor: pointer;
}

/* クリック時のスタイル */
.google-btn:active {
  background-color: #f1f3f4;
  box-shadow: none; /* クリック時は影を消して凹んだ感じに */
  transform: translateY(1px); /* 1px下に沈む */
}

/* --- プロフィール画像用スタイル --- */
.avatar-image {
  width: 36px;
  height: 36px;
  border-radius: 50%; /* 丸くする */
  object-fit: cover; /* 画像が歪まないようにトリミング */
  border: 1px solid #ddd; /* 薄い枠線 */
  background-color: #eee; /* 画像読み込み前の背景色 */
}

/* --- サイドバー (左側) --- */
.sidebar {
  width: 260px;
  background-color: #2e7d32; /* テーマカラーの緑 */
  color: white;
  display: flex;
  flex-direction: column;
  padding: 20px;
  flex-shrink: 0; /* 幅を固定 */
}

.logo {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 40px;
  color: white;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav-menu {
  list-style: none;
}

.nav-item {
  margin-bottom: 8px;
}

.nav-link {
  display: block;
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 16px;
  transition: background-color 0.2s;
}

.nav-link:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.nav-link.active {
  background-color: rgba(255, 255, 255, 0.2);
  font-weight: bold;
}

/* ログアウトボタンを下部に配置 */
.nav-bottom {
  margin-top: auto;
}

/* --- メインコンテンツ (右側) --- */
.main-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto; /* コンテンツが多い時はスクロール */
}

/* ヘッダー部分 */
.top-bar {
  background-color: white;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: flex-end; /* 右寄せ */
  padding: 0 32px;
  border-bottom: 1px solid #e0e0e0;
}

.user-profile {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 500;
}

.avatar-circle {
  width: 36px;
  height: 36px;
  background-color: #ffa000; /* アクセントカラーのアンバー */
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

/* ページの中身 */
.page-container {
  padding: 32px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.admin-card {
  background: white;
  padding: 24px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  overflow-x: auto;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
}

.admin-table th {
  background-color: #f5f5f5;
  border-bottom: 2px solid #ddd;
  padding: 12px;
  text-align: left;
}

.admin-table td {
  border-bottom: 1px solid #eee;
  padding: 12px;
}

.font-bold {
  font-weight: bold;
}
.font-mono {
  font-family: monospace;
  color: #666;
}
.text-center {
  text-align: center;
}

.badge-you {
  background: #e3f2fd;
  color: #1976d2;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
  margin-left: 8px;
}

.delete-btn {
  background-color: #c62828;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.2s;
}

.delete-btn:hover {
  background-color: #b71c1c;
}