/*
 * これは application.css のマニフェストファイルです。
 * 
 * Propshaft を使用しており、プリプロセッサなしでアセットが効率的に配信されます。
 * アプリ全体に適用されるスタイルはこのファイルに記述できますが、CSS の優先順位は
 * 標準のカスケード順（後の宣言や詳細度の高いスタイルが優先）に従うことに注意してください。
 *
 * メンテナンス性の向上のため、スタイルは機能ごとに別ファイルに整理することを検討してください。
 */

:root {
  /* メインカラーおよびアクセントカラー */
  --color-primary: #DE5435;
  --color-secondary: #0d3b66;

  /* 中間色 */
  --color-neutral-100: #f8f9fa;
  --color-neutral-900: #212529;

  /* スペーシング（Bootstrap 基準） */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
}

/* ブランドカラーを使用するヘッダー背景 */
.bg-brand {
  background-color: var(--color-primary) !important;
}

/* 誕生日膳リマインドモーダルの説明文サイズ */
.birthday-meal-reminder-message {
  font-size: 1.3rem;
}

/* 一覧本文の視認性を高めるためのフォント拡大 */
.list-font-scale-130 {
  font-size: 130%;
}

.list-font-scale-130 .table,
.list-font-scale-130 .form-control,
.list-font-scale-130 .form-select,
.list-font-scale-130 .form-label,
.list-font-scale-130 .form-check-label,
.list-font-scale-130 .btn,
.list-font-scale-130 .page-link {
  font-size: inherit;
}

.list-font-scale-130 .btn-sm,
.list-font-scale-130 .form-control-sm,
.list-font-scale-130 .form-select-sm {
  font-size: 0.875em;
}

/* 喫食予定一覧タブ内の文字サイズを拡大 */
.mealplan-tab-content-large {
  font-size: 400%;
}

/*
 * カレンダー入力（month）のスタイル
 * Webkit系ブラウザでの表示調整と背景色の設定
 */
input[type="month"].form-control,
input[type="month"].form-control-sm {
  -webkit-appearance: auto;
  appearance: auto;
  background-color: #fff;
}

input[type="month"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
}

/* インライン通知メッセージのマージン調整 */
.notice-inline {
  margin-bottom: var(--space-2);
}

/*
 * 献立作成画面のタブスタイル
 * アクティブ時の拡大エフェクトと色変更
 */
.mealplan-tabs .nav-link {
  font-weight: 600;
  transition: transform 0.2s;
  font-size: 0.72em;
  padding: 0.3rem 0.6rem;
  background-color: transparent !important;
  color: var(--color-neutral-900) !important;
}

.mealplan-tabs .nav-link.active {
  transform: scale(1.15, 1.15);
  background-color: #e3f0ff !important;
  color: #007bff !important;
}

/* 喫食情報一覧タブと同じ見た目に合わせるためのスケール調整 */
.mealplan-tabs-scaled {
  font-size: 130%;
}

/* カレンダーテーブルの共通セルスタイル */
.calendar th,
.calendar td {
  text-align: center;
  vertical-align: middle;
  padding: 0.5rem;
  font-size: 0.9rem;
}

/*
 * 献立カレンダーのラッパーとテーブルレイアウト
 * 横スクロール対応と最小幅設定
 */
.meal-calendar-wrapper {
  position: relative;
  overflow-x: auto;
}

.meal-calendar-wrapper .calendar {
  table-layout: fixed;
  min-width: 960px;
}

/* ヘッダー行の固定表示 */
.meal-calendar-wrapper .calendar thead th {
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 2;
}

/*
 * 左側固定カラムの設定
 * 利用者名カラムとラベルカラムの固定表示
 */
.sticky-col {
  position: sticky;
  left: 0;
  background: #fff;
  z-index: 3;
}

.sticky-col.name-col {
  left: 0;
  min-width: 180px;
}

.sticky-col.label-col {
  left: 180px;
  min-width: 56px;
  width: 56px;
}

/* カレンダーのカラム幅設定 */
.calendar-name-column {
  width: 12.5rem;
  vertical-align: middle;
}

.calendar-label-column {
  width: 2.5em;
  font-weight: 600;
  background-color: #f8f8f8;
}

/* 土日の背景色設定 */
.sunday {
  background-color: #ffe8e8 !important;
}

.saturday {
  background-color: #e8f4ff !important;
}

/* ユーザーリンクボタンのスタイル */
.user-link {
  background: #e0e0e0;
  color: #333;
  font-size: 1rem;
  border: 1px solid #bbb;
  display: inline-block;
  cursor: pointer;
  border-radius: 12px;
  padding: 0.375rem 1rem;
  text-decoration: none;
}

.user-link:hover {
  background: #d0d0d0;
  color: #333;
}

/* 完了マークとセル幅の設定 */
.meal-mark {
  font-size: 1.2rem;
  color: #28a745;
}

.meal-label-header {
  min-width: 80px;
  z-index: 4;
}

.meal-label-cell {
  min-width: 80px;
}

/*
 * 食事選択セルのスタイル
 * クリック可能な矩形領域
 */
.meal-select {
  display: flex;
  justify-content: center;
}

.meal-value {
  width: 44px;
  height: 44px;
  line-height: 44px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
  background-color: white;
}

.meal-value:hover {
  background-color: #f8f9fa;
}

/*
 * ユーザータイプによる表示制御
 * 通所/入所による行や設定項目の出し分け
 */
.user-type-residential .day-only {
  display: none !important;
}

.user-type-day .residential-only {
  display: none !important;
}

body:not(.user-type-day) .day-only {
  display: none;
}

body:not(.user-type-day) .residential-only {
  display: table-row;
}

.user-type-day .breakfast-setting,
.user-type-day .dinner-setting {
  display: none !important;
}

/*
 * モバイルオフキャンバスメニュー
 * 既存の視認性を維持するため、リンクサイズは従来値を継承する
 */

#sidebarMenu .nav-link {
  font-size: 0.875rem;
  font-weight: 500;
}

#sidebarMenu .nav-link.active {
  color: #DE5435;
}

.sidebar-heading {
  font-size: 0.75rem;
}

/*
 * デスクトップヘッダーメニュー
 * ドロップダウン展開時にヘッダー高さを変えないよう、メニューは絶対配置で表示する
 */

.header-menu {
  position: relative;
}

.header-menu .navbar-nav {
  flex-wrap: nowrap;
  white-space: nowrap;
}

.header-menu .dropdown {
  position: relative;
}

.header-menu .nav-link {
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  border-radius: 0.375rem;
  padding: 0.4rem 0.65rem;
}

.header-menu .nav-link:hover,
.header-menu .nav-link:focus {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.16);
}

.header-menu .nav-link.active {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.24);
}

.header-menu .dropdown-menu {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  margin-top: 0;
  min-width: 12rem;
  z-index: 1080;
}

.header-menu .dropdown-item {
  font-size: 0.875rem;
}

.header-menu .dropdown-item.active,
.header-menu .dropdown-item:active {
  color: #fff;
  background-color: var(--color-primary);
}

.header-logout-form {
  margin-bottom: 0;
}

.header-logout-form .btn {
  white-space: nowrap;
}

/*
 * ナビゲーションバー
 * ブランド表示
 */

.navbar-brand {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  background-color: rgba(0, 0, 0, 0.25);
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.25);
}

.navbar .form-control {
  padding: 0.75rem 1rem;
}