/* /var/www/assets/common.css */

/* 全体共通の基本設定 */
body {
  padding-top: 60px; /* ヘッダーの高さに合わせて調整。必要に応じて変更 */

  box-sizing: border-box;
  margin: 0;
  font-family: 'Helvetica Neue', sans-serif;
  background: #f8f9fa; /* 全体の背景色 */
  color: #333;
}

/* グローバルヘッダーのスタイル */
header.global-header {
  background-color: #ffffff; /* 白に変更 */
  border-bottom: 1px solid #e0e0e0; /* 下線を追加 */
  padding: 5px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
  width: 100%;
  height: 60px; /* ヘッダーの高さを固定 */
  z-index: 1000; /* 最前面に表示 */
  box-sizing: border-box;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 影を追加 */
}

.nav-left {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
}

.nav-left a {
  text-decoration: none;
  color: #555;
  padding: 5px 10px; /* パディングを追加 */
  border-radius: 4px;
  transition: background-color 0.3s ease; /* ホバー時のトランジション */
}

.nav-left a:first-child {
  font-weight: bold;
  color: #333;
}

.nav-left a:hover {
  background-color: #f0f0f0; /* ホバー時の背景色 */
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logout-button {
  text-decoration: none;
  color: #333;
  background-color: #e9ecef; /* 少し濃い目のグレー */
  padding: 6px 12px; /* パディングを調整 */
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.logout-button:hover {
  background-color: #dee2e6;
}

/* サイドバーのスタイル */
aside.sidebar {
  width: 200px; /* サイドバーの幅 */
  background-color: #343a40; /* 濃い目の背景色 */
  color: #ffffff;
  position: fixed;
  top: 60px; /* ヘッダーの下から開始 */
  left: 0;
  height: calc(100% - 60px); /* ヘッダーを除いた高さ */
  padding-top: 20px;
  box-sizing: border-box;
  z-index: 999; /* ヘッダーよりは下、コンテンツよりは上 */
  box-shadow: 2px 0 5px rgba(0,0,0,0.2); /* 影を追加 */
}

aside.sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

aside.sidebar ul li a {
  display: block;
  padding: 12px 20px;
  color: #adb5bd; /* リンクの色 */
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease;
}

aside.sidebar ul li a:hover {
  background-color: #495057; /* ホバー時の背景色 */
  color: #ffffff;
}

aside.sidebar ul li a.active { /* 現在アクティブな項目用 */
  background-color: #007bff; /* 青系の色 */
  color: #ffffff;
  font-weight: bold;
}

/* メインコンテンツエリアの基本スタイル */
main.content-area {
  /* disabled: margin-left 200px (sidebar unified) */ /* サイドバーの幅分の余白 */
  padding: 20px; /* コンテンツ内のパディング */
  padding-top: 80px; /* ヘッダー分も考慮 */
}

/* ✅ ログイン／新規登録ボタン（未ログイン時） */
.nav-button {
  text-decoration: none;
  color: white;
  background-color: #007bff;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 14px;
  transition: background-color 0.3s ease;
}

.nav-button:hover {
  background-color: #0056b3;
}

/* ✅ controlサイドバーにも hover/active を反映させる強制スタイル */
.sidebar-menu .sidebar-link {
  color: #adb5bd;
  text-decoration: none;
  display: block;
  padding: 12px 20px;
  border-radius: 4px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.sidebar-menu .sidebar-link:hover {
  background-color: #495057;
  color: #ffffff;
}

.sidebar-menu .sidebar-link.active {
  background-color: #007bff;
  color: #ffffff;
  font-weight: bold;
}


a.sidebar-link {
  color: #adb5bd !important;
  text-decoration: none !important;
}


/* control sidebar base */
@import url("/control/static/sidebar-common.css");

/* ===== 250917 form font fix (scoped to content) ===== */
.content-wrap input,
.content-wrap textarea,
.content-wrap select,
.content-wrap button {
  font-size: 16px !important;   /* GPT入力欄相当の見やすさ */
  line-height: 1.5 !important;
}
.content-wrap input::placeholder,
.content-wrap textarea::placeholder {
  font-size: 0.95em;            /* プレースホルダも見やすく */
  opacity: 0.75;
}
/* ===== /250917 ===== */