/* LINE風Redmineテーマ - application.css */
/* 基本スタイルと共通コンポーネント用CSS */

/* ベースとなる変数 */
:root {
  --line-primary: #06C755;      /* LINEの特徴的なグリーン */
  --line-secondary: #1E1E1E;    /* ほぼ黒（テキスト用） */
  --line-background: #F1F1F4;   /* 背景色 */
  --line-light-gray: #E8EAED;   /* 明るい背景色 */
  --line-mid-gray: #D8D8DD;     /* 境界線・区切り線 */
  --line-dark-gray: #8E8E93;    /* セカンダリテキスト */
  --line-white: #FFFFFF;        /* 白背景 */
  --line-sidebar-bg: #1E1E1E;   /* サイドバー背景色（黒） */
  --line-active-item: #E1F7E8;  /* アクティブ項目 */
  --line-border: #DCDCE0;       /* ボーダー色 */
  --line-panel-bg: #F9F9FB;     /* パネル背景色 */
  --line-link: #007AFF;         /* リンク色 */
  --line-error: #FF3B30;        /* エラー色 */
  --line-warning: #FFCC00;      /* 警告色 */
  --line-success: #34C759;      /* 成功色 */
  
  --border-radius-small: 6px;
  --border-radius-medium: 10px;
  --border-radius-large: 14px;
  
  --shadow-small: 0 1px 3px rgba(0,0,0,0.1);
  --shadow-medium: 0 4px 6px rgba(0,0,0,0.08);
  --shadow-large: 0 10px 20px rgba(0,0,0,0.12);
  
  --transition-speed: 0.3s;
}

/* リセットとベーススタイル */
html, body {
  font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  background-color: var(--line-background);
  color: var(--line-secondary);
  line-height: 1.5;
  font-size: 14px;
  margin: 0;
  padding: 0;
  height: 100%;
}

/* Redmine全体のコンテナ */
#wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: var(--line-background);
}

/* ============ ヘッダー ============ */
#top-menu {
  background-color: var(--line-primary);
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  border-bottom: 1px solid var(--line-border);
  box-shadow: var(--shadow-small);
  color: white;
  position: relative;
  z-index: 100;
}

/* ロゴ */
#top-menu a.home {
  display: flex;
  align-items: center;
  font-weight: 600;
  font-size: 16px;
  color: white;
  text-decoration: none;
}

#top-menu a.home:before {
  content: "";
  width: 28px;
  height: 28px;
  background-color: white;
  display: block;
  border-radius: 6px;
  margin-right: 10px;
}

/* ヘッダーメニューコンテナ */
#top-menu ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 15px;
}

#top-menu ul li {
  display: flex;
  align-items: center;
}

#top-menu ul li a {
  color: white;
  text-decoration: none;
  opacity: 0.9;
  transition: opacity var(--transition-speed) ease;
}

#top-menu ul li a:hover {
  opacity: 1;
}

/* ヘッダーの検索ボックス */
#top-menu form {
  position: relative;
  margin: 0 15px;
}

#top-menu #q {
  background-color: rgba(255, 255, 255, 0.2);
  border: none;
  border-radius: var(--border-radius-medium);
  padding: 10px 12px 10px 36px;
  width: 220px;
  font-size: 14px;
  color: white;
}

#top-menu #q::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

#top-menu form:before {
  content: "⚲";
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: white;
  font-size: 16px;
}

/* ユーザーメニュー */
#top-menu #loggedas {
  margin-left: auto;
  display: flex;
  align-items: center;
}

#top-menu #loggedas a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-color: white;
  color: var(--line-primary);
  font-weight: bold;
  text-decoration: none;
  box-shadow: var(--shadow-small);
  margin-left: 10px;
}

/* ============ メインメニュー（サイドバー） ============ */
#main-menu {
  position: sticky;
  top: 0;
  background-color: var(--line-white);
  border-right: 1px solid var(--line-border);
  box-shadow: var(--shadow-small);
  display: flex;
  flex-direction: column;
  height: calc(100vh - 56px);
  width: 250px;
  z-index: 90;
  transition: width var(--transition-speed) ease, transform var(--transition-speed) ease;
}

#main-menu .main-menu-toggle {
  display: none;
}

/* メインメニューヘッダー */
#main-menu h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 20px;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  border-bottom: 1px solid var(--line-mid-gray);
  background-color: var(--line-light-gray);
}

#main-menu h3 .main-menu-collapse {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--line-dark-gray);
  cursor: pointer;
  background-color: var(--line-white);
  transition: all var(--transition-speed) ease;
}

#main-menu h3 .main-menu-collapse:hover {
  background-color: var(--line-mid-gray);
  color: var(--line-secondary);
}

/* メインメニューセクション */
#main-menu ul.menu-children {
  list-style: none;
  margin: 0;
  padding: 15px 0;
}

#main-menu .menu-section {
  padding: 5px 15px;
  font-size: 12px;
  font-weight: 600;
  color: var(--line-dark-gray);
  margin-top: 15px;
  text-transform: uppercase;
}

#main-menu a {
  padding: 10px 15px;
  margin: 2px 8px;
  display: flex;
  align-items: center;
  cursor: pointer;
  border-radius: var(--border-radius-small);
  transition: all var(--transition-speed) ease;
  text-decoration: none;
  color: var(--line-secondary);
}

#main-menu a:hover {
  background-color: var(--line-light-gray);
  transform: translateY(-1px);
}

#main-menu a.selected {
  background-color: var(--line-active-item);
  color: var(--line-primary);
  font-weight: 500;
}

#main-menu a:before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-right: 10px;
  background-color: var(--line-primary);
  opacity: 0.1;
  border-radius: 4px;
}

#main-menu a.selected:before {
  opacity: 0.2;
}

/* メニューセパレーター */
#main-menu .menu-separator {
  height: 1px;
  background-color: var(--line-mid-gray);
  margin: 15px 15px;
  opacity: 0.5;
}

/* プロジェクト特有メニュー */
#main-menu #project-menu {
  margin-top: 10px;
}

#main-menu #project-menu h3 {
  background-color: var(--line-active-item);
  color: var(--line-primary);
}

/* ============ メインコンテンツエリア ============ */
#main {
  flex: 1;
  padding: 20px;
  background-color: var(--line-background);
  min-height: calc(100vh - 56px - 36px); /* ヘッダーとフッターの高さを引く */
}

#content {
  background-color: var(--line-white);
  border-radius: var(--border-radius-large);
  padding: 25px;
  box-shadow: var(--shadow-medium);
  margin-bottom: 20px;
}

/* ヘッダーとアクションボタン */
.title-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
}

h2, .content-header h1 {
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 20px 0;
  color: var(--line-secondary);
}

/* コンテンツタブ */
.tabs {
  display: flex;
  border-bottom: 1px solid var(--line-mid-gray);
  margin-bottom: 20px;
  overflow-x: auto;
}

.tabs ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.tabs ul li {
  margin-right: 5px;
}

.tabs ul li a {
  display: flex;
  align-items: center;
  height: 36px;
  padding: 0 15px;
  background-color: var(--line-light-gray);
  border-radius: var(--border-radius-medium) var(--border-radius-medium) 0 0;
  cursor: pointer;
  border: 1px solid var(--line-mid-gray);
  border-bottom: none;
  text-decoration: none;
  color: var(--line-secondary);
  transition: all var(--transition-speed) ease;
}

.tabs ul li a:hover {
  background-color: var(--line-panel-bg);
}

.tabs ul li a.selected {
  background-color: var(--line-active-item);
  color: var(--line-primary);
  font-weight: 500;
  border-bottom: 1px solid var(--line-active-item);
  margin-bottom: -1px;
}

/* ボタンスタイル */
input[type="submit"], 
input[type="button"],
button,
.button {
  background-color: var(--line-primary);
  color: white;
  border: none;
  border-radius: var(--border-radius-medium);
  padding: 10px 16px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  transition: all var(--transition-speed) ease;
  text-decoration: none;
  font-size: 14px;
}

input[type="submit"]:hover, 
input[type="button"]:hover,
button:hover,
.button:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-medium);
}

.button-outline {
  background-color: transparent;
  color: var(--line-secondary);
  border: 1px solid var(--line-mid-gray);
}

.button-outline:hover {
  background-color: var(--line-light-gray);
}

/* リンクスタイル */
a {
  color: var(--line-link);
  text-decoration: none;
  transition: color var(--transition-speed) ease;
}

a:hover {
  color: #0056b3;
  text-decoration: underline;
}

/* フォーム要素 */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="date"],
textarea,
select {
  border: 1px solid var(--line-mid-gray);
  border-radius: var(--border-radius-small);
  padding: 8px 12px;
  font-size: 14px;
  transition: border-color var(--transition-speed) ease;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--line-primary);
}

/* チェックボックスとラジオボタン */
.check_box_group,
.radio_button_group {
  margin: 5px 0;
}

/* ブロックスタイル */
.box {
  background-color: var(--line-white);
  border-radius: var(--border-radius-medium);
  padding: 15px;
  box-shadow: var(--shadow-small);
  margin-bottom: 15px;
  border: 1px solid var(--line-border);
}

.wiki {
  line-height: 1.6;
}

/* ============ フッター ============ */
#footer {
  background-color: var(--line-white);
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid var(--line-border);
  padding: 0 10px;
  color: var(--line-dark-gray);
  font-size: 12px;
}

/* ============ スクロールバー ============ */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--line-light-gray);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: #BEBEC2;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--line-dark-gray);
}

/* ============ アイコン ============ */
/* 必要に応じてSVGアイコンまたはフォントアイコンを定義 */