/* ファイル名: calendar_tab.css */
/* 🌸 タブレイアウトと各タブ固有の背景・枠線設定 */

/* タブの親領域 */
.calendar-form-tabs {
  display: flex;
}

/* 各タブの基本スタイル */
.calendar-form-tab {
  font-weight: bold;
  font-size: 14px;
  padding: 6px 16px;
  cursor: pointer;
  border: 2px solid transparent;
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  background-color: #fce4ec;
}

/* アイコンタブ（アクティブ時） */
.calendar-form-tab.active[data-tab="calendar-icon-tab"] {
  background: #fff0f5;
  border-color: #ff99cc;
  z-index: 10;
  position: relative;
}

/* LSタブ（通常/アクティブ） */
.calendar-form-tab[data-tab="calendar-ls-tab"] {
  background: #fffacd;
  border-color: #f1c232;
  color: #946000;
}
.calendar-form-tab.active[data-tab="calendar-ls-tab"] {
  background: #fffae5;
  border-color: #f1c232;
  z-index: 10;
  position: relative;
}

/* イベントタブ（通常/アクティブ） */
.calendar-form-tab[data-tab="calendar-event-tab"] {
  background: #e6f4ff;
  border-color: #99caff;
  color: #1865b2;
}
.calendar-form-tab.active[data-tab="calendar-event-tab"] {
  background: #f0f8ff;
  border-color: #99caff;
  z-index: 10;
  position: relative;
}

/* ヘルプタブ */
#calendar-help-tab.calendar-tab-content {
  background: #fff0f5;
  border: 2px solid #ff99cc;
  border-top: 2px solid #ff99cc;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  margin-top: -1px;
}

/* 🌸 各タブの中身（デフォルト非表示） */
.calendar-tab-content {
  display: none;
  max-width: 684px;
  margin-left: auto;
  margin-right: auto;
  padding: 12px;
  margin-bottom: 16px;
  overflow: visible !important;
  max-height: none !important;
  box-sizing: border-box;
}

.calendar-tab-content.active {
  display: block;
}