/* ============================================================================
 * styles.css - Layout / Component Styling
 *
 *
 * 構成:
 *   1) Global helpers / badges
 *   2) Loading Overlay
 *   3) Forms (status / rating)
 *   4) Status badges
 *   5) Rating badges
 *   6) Scrollable table viewport (desktop >=576px)
 *   7) Mobile Card View (<576px)
 *
 * 最近の変更点 (Recent Changes):
 *   - (旧) 評価バッジ仕様は撤去済み
 *   - モバイルカード UI 導入 (幅 < 576px) でテーブルを縦カードへ切替
 *   - ステータスバッジ幅は JS (adjustStatusBadgeWidths) でランタイム計測し均一化
 *
 * 注意 / Notes:
 *   - ダークテーマ切替未実装 (必要なら data-bs-theme=dark 追加 + カラートークン再定義)
 *   - 576px ブレークポイントは Bootstrap の sm と一致 (カード化条件)
 * ========================================================================== */
/* ==========================================
 * Global badge helpers / layout utilities
 * ========================================== */
.badge-outline { background: #fff; border:1px solid #888; color:#333; }
.status-active { background:#0d6efd; color:#fff; }
.badge-detail { background:#ffffff; color:#212529; border:1px solid #adb5bd; font-weight:500; }
.badge-detail:hover, .badge-detail:focus { background:#f8f9fa; color:#0d6efd; border-color:#0d6efd; text-decoration:none; }
#toast-container { z-index: 2000; }
.main-width-80 { width:80%; max-width:80%; margin:0 auto; }
@media (max-width: 992px) { .main-width-80 { width:95%; max-width:95%; } }
@media (max-width: 575.98px) { .main-width-80 { width:100%; max-width:100%; padding-left:0.5rem; padding-right:0.5rem; } }
.avatar-img { width:32px; height:32px; object-fit:cover; }
@media (max-width: 576px) { .avatar-img { width:26px; height:26px; } }
/* ==========================================
 * Loading Overlay
 * ========================================== */
#loading-overlay { position:fixed; inset:0; z-index:1900; }
#loading-overlay .loading-backdrop { position:absolute; inset:0; background:rgba(255,255,255,0.75); backdrop-filter: blur(2px); }
#loading-overlay .loading-indicator { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); }
#loading-overlay .spinner-border { width:3rem; height:3rem; }
.fade-in { animation: fadeIn 0.15s ease-in forwards; }
.fade-out { animation: fadeOut 0.15s ease-out forwards; }
@keyframes fadeIn { from { opacity:0 } to { opacity:1 } }
@keyframes fadeOut { from { opacity:1 } to { opacity:0 } }
/* ==========================================
 * Forms: status / rating select sizing
 * ========================================== */
.status-select { padding-left:0.4rem; padding-right:0.4rem; }
.rating-select { padding-left:0.4rem; padding-right:0.4rem; }
/* コンパクト統一幅 (最小限) */
.compact-select { width:auto; min-width:4.5rem; }
@media (max-width: 576px) { .compact-select { min-width:4.2rem; } }
@media (max-width: 576px) {
	.status-select { font-size: .8rem; }
	.rating-select { font-size: .8rem; }
}
/* (バッジ関連 CSS は不要になったため削除) */

/* ==========================================
 * Colored Select (Status / Rating)
 * バッジカラーを select 背景にも適用するためのユーティリティ
 * - JS で value に応じて .status-select-<kind>, .rating-select-<n> を付与
 * - 透過防止のため border / color も明示
 * ========================================== */
select.status-select, select.rating-select { transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
/* Status */
select.status-select-watched { background:#198754 !important; color:#fff !important; border-color:#198754 !important; }
select.status-select-watching { background:#0d6efd !important; color:#fff !important; border-color:#0d6efd !important; }
select.status-select-wanna_watch { background:#fd7e14 !important; color:#212529 !important; border-color:#fd7e14 !important; }
select.status-select-on_hold, select.status-select-stop_watching { background:#dc3545 !important; color:#fff !important; border-color:#dc3545 !important; }
select.status-select-no_select { background:#f8f9fa !important; color:#212529 !important; border:1px solid #ced4da !important; }
/* Rating */
select.rating-select-none { background:#ffffff !important; color:#444 !important; border:1px solid #ced4da !important; }
select.rating-select-1 { background:#fff6e6 !important; color:#5a3d12 !important; border-color:#ffd699 !important; }
select.rating-select-2 { background:#ffebcc !important; color:#5a3d12 !important; border-color:#ffc866 !important; }
select.rating-select-3 { background:#ffd699 !important; color:#4a300d !important; border-color:#ffb84d !important; }
select.rating-select-4 { background:#ffb84d !important; color:#3a2509 !important; border-color:#ff9a1a !important; }
select.rating-select-5 { background:#e67300 !important; color:#ffffff !important; border-color:#e67300 !important; }

/* Validation highlight (override Bootstrap if needed) */
input.is-invalid, select.is-invalid {
	border-color:#dc3545 !important;
	box-shadow:0 0 0 .15rem rgba(220,53,69,.15);
}

/* ==========================================
 * Attention animation for missing year when season selected
 * ========================================== */
@keyframes fieldShake {
	0%,100% { transform: translateX(0); }
	15% { transform: translateX(-5px); }
	30% { transform: translateX(5px); }
	45% { transform: translateX(-4px); }
	60% { transform: translateX(4px); }
	75% { transform: translateX(-3px); }
	90% { transform: translateX(3px); }
}
.attention-shake {
	animation: fieldShake .55s cubic-bezier(.36,.07,.19,.97);
	display:inline-block; /* 念のため */
	will-change: transform;
}

/* ==========================================
 * Scrollable table viewport
 * ========================================== */
.table-scroll-viewport {
	position: relative;
	overflow-y: auto;
	/* height は JS で計算して設定 */
	border:1px solid #dee2e6;
	border-radius: .25rem;
	background:#fff;
}
/* Sticky header (table within scroll container) */
.table-scroll-viewport table thead th {
	position: sticky;
	top: 0;
	z-index: 5;
	background: #f8f9fa;
}
/* 過剰な横幅拡張を抑える */
.table-scroll-viewport table { margin-bottom:0; }

/* ==========================================
 * Mobile Card View
 * 576px 未満でテーブルをカード化
 * ========================================== */
@media (max-width: 575.98px) {
	#mobile-cards .mobile-work-card { background:#fff; }
	/* モバイル時もカード一覧を縦方向にスクロールできるようにする */
	#mobile-cards {
		position: relative;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		touch-action: pan-y; /* 縦スクロールを優先 */
		overflow-x: hidden;
		overscroll-behavior: contain; /* 親へのバウンス / ナビゲーションジェスチャ干渉緩和 */
		padding-left: .25rem;
		padding-right: .25rem;
		/* 高さは JS (adjustMobileCardsHeight) で計算して付与 */
	}
	/* JS 高さ計算が失敗した場合に最低限のスクロール領域を確保するフォールバック */
	#mobile-cards.mobile-fallback-height {
		max-height: calc(100vh - 220px);
	}
}

/* ==========================================
 * Action buttons width unification
 * 検索ボタンと Excel 出力ボタンを視覚的に揃える
 * ========================================== */
.btn-action-wide { min-width: 110px; }
@media (max-width: 576px) { .btn-action-wide { min-width: 96px; } }

@media (max-width: 575.98px) {
	#search-form #f-title {
		width: min(100%, 8rem);
		max-width: 12rem;
	}
}

/* ==========================================
 * Multi-status checklist dropdown (step3)
 * ========================================== */
#status-multi-filter .dropdown-menu.status-multi-menu {
	min-width: 220px;
	max-height: 320px;
	overflow-y: auto;
}
#status-multi-filter .status-multi-list .form-check {
	margin-bottom: .25rem;
}
#status-multi-filter .status-multi-btn {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	width: 14rem;
	max-width: 100%;
}
@media (max-width: 575.98px) {
	#status-multi-filter .status-multi-btn {
		width: min(100%, 12rem);
	}
}

@media (max-width: 575.98px) {
	#search-form {
		--bs-gutter-x: 0.6rem;
		--bs-gutter-y: 0.6rem;
	}
}
#status-multi-select-all,
#status-multi-clear { 
	font-size: .7rem; 
}

/* ==========================================
 * View Toggle Buttons
 * ========================================== */
.view-toggle-group {
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.view-toggle-group .btn {
  padding: 0.375rem 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 3rem;
}

.view-toggle-group .btn i {
  font-size: 1rem;
}

@media (max-width: 575.98px) {
  .view-toggle-group .btn {
    padding: 0.25rem 0.5rem;
    min-width: 2.5rem;
  }
}

/* ==========================================
 * Tile View Layout
 * タイル表示用グリッドレイアウト
 * デスクトップ: 8列、モバイル: 4列
 * ========================================== */
/* Tile Scroll Viewport - テーブル表示と同じスクロール方式 */
.tile-scroll-viewport {
  position: relative;
  overflow-y: auto;
  /* height は JS で計算して設定 */
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
  background: #fff;
  padding: 0.5rem;
}

.tile-container {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 1rem;
  padding: 0;
}

@media (max-width: 1200px) {
  .tile-container {
    grid-template-columns: repeat(6, 1fr);
  }
}

@media (max-width: 768px) {
  .tile-container {
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
  }
}

@media (max-width: 575.98px) {
  /* モバイル時もタイルビューポートに内部スクロールを適用 */
  .tile-scroll-viewport {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y; /* 縦スクロールを優先 */
    overflow-x: hidden;
    overscroll-behavior: contain; /* 親へのバウンス / ナビゲーションジェスチャ干渉緩和 */
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    /* 高さは JS (adjustMobileCardsHeight) で計算して付与 */
  }
  
  .tile-container {
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
  }
}

/* Tile Card */
.tile-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}

/* hoverは一旦オミット
.tile-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
*/

/* Tile Image Wrapper - アスペクト比 1.4:1 (幅:高さ = 1:1.4) */
.tile-image-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 71.43%; /* 1:1.4 のアスペクト比（横長） */
  aspect-ratio: 1.4 / 1;
  background: #f8f9fa;
  overflow: hidden;
}

.tile-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #f8f9fa;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tile-image-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
  color: #adb5bd;
  font-size: 2rem;
}

/* Tile Content */
.tile-content {
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  flex: 1;
}

/* Tile Title - 最大2行、超過時は省略 */
.tile-title {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
  color: #212529;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 2.275rem; /* 2行分の高さを確保 */
}

@media (max-width: 575.98px) {
  .tile-title {
    font-size: 0.75rem;
    min-height: 1.95rem;
  }
}

/* Tile Controls */
.tile-controls {
  display: flex;
  gap: 0.25rem;
  margin-top: auto;
}

.tile-controls .status-form,
.tile-controls .rating-form {
  flex: 1;
  min-width: 0;
}

.tile-controls .form-select {
  font-size: 0.75rem;
  padding: 0.25rem 0.3rem;
  min-width: 0;
  width: 100%;
}

@media (max-width: 575.98px) {
  .tile-controls .form-select {
    font-size: 0.7rem;
    padding: 0.2rem 0.25rem;
  }
}

/* ==========================================
 * Detail Tile (Popup Overlay)
 * タイルクリック時に表示される詳細タイル
 * 通常タイルの2倍幅、中央揃え、エッジ補正対応
 * ========================================== */
.detail-tile {
  position: absolute;
  display: none;
  width: calc(100% / 8 * 2);
  background: #fff;
  border: 2px solid #0d6efd;
  border-radius: 0.375rem;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.28);
  z-index: 1500;
  overflow: hidden;
  transition: opacity 0.2s ease;
  cursor: pointer;
}

.detail-tile-image-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 71.43%; /* 1:1.4 aspect ratio */
  aspect-ratio: 1.4 / 1;
  background: #f8f9fa;
  overflow: hidden;
}

.detail-tile-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #f8f9fa;
}

.detail-tile-image-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
  color: #adb5bd;
  font-size: 2rem;
}

.detail-tile-content {
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.detail-tile-title {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
  color: #212529;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 3.4rem;
}

.detail-tile-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
}

.detail-tile-badges .badge {
  font-size: 0.7rem;
  padding: 0.2rem 0.4rem;
}

.detail-tile-meta {
  font-size: 0.7rem;
  line-height: 1.4;
  color: #6c757d;
}

.detail-tile-controls {
  display: flex;
  gap: 0.25rem;
  margin-top: auto;
}

.detail-tile-controls .status-form,
.detail-tile-controls .rating-form {
  flex: 1;
  min-width: 0;
}

.detail-tile-controls .form-select {
  font-size: 0.75rem;
  padding: 0.25rem 0.3rem;
  width: 100%;
}

/* Detail Tile レスポンシブ対応 */
@media (max-width: 1200px) {
  .detail-tile {
    width: calc(100% / 6 * 2);
  }
}

@media (max-width: 768px) {
  .detail-tile {
    width: calc(100% / 4 * 2);
  }
}

@media (max-width: 575.98px) {
  .detail-tile {
    width: calc(100% / 4 * 2);
  }
  
  .detail-tile-title {
    font-size: 0.75rem;
    min-height: 2.925rem;
  }
  
  .detail-tile-badges .badge {
    font-size: 0.65rem;
  }
  
  .detail-tile-meta {
    font-size: 0.65rem;
    padding: 0.15rem 0.3rem;
  }
  
  .detail-tile-controls .form-select {
    font-size: 0.7rem;
    padding: 0.2rem 0.25rem;
  }
}

/* Small form-check spacing */
.form-check.form-check-sm .form-check-input { width: .9em; height: .9em; margin-top: .3em; }
.form-check.form-check-sm .form-check-label { line-height: 1.1; }

/* ==========================================
 * Season year input width (約5桁分) 2025-10-05
 * 年は4桁想定だが余白含め 5ch 程度で固定しフォームの横幅圧縮
 * ========================================== */
#f-season-year {
	width:7.6ch; /* 4桁 + ゆとり (再調整) */
	max-width:7.6ch;
	min-width:7.6ch;
}

/* ==========================================
 * Status / Rating Breakdown Badges
 * ステータス / 評価の内訳を表示するバッジ群
 * ========================================== */
.status-breakdown .badge, .rating-breakdown .badge {
  font-size: 0.9rem;
}
.status-breakdown .badge {
  background: #f8f9fa;
}
.rating-breakdown .badge {
  background: #e9f7ef;
}

/* ==========================================
 * Bar List Styles
 * ========================================== */
.bar-list .bar-track { position: relative; background: var(--bs-gray-200,#e9ecef); border-radius: 4px; height: 10px; overflow: hidden; }
.bar-list .bar-fill { position: absolute; inset: 0; width: calc(var(--w,0) * 1%); background: var(--c,#0d6efd); border-radius: 4px; transition: width .4s ease; }
.bar-list .bar-item:last-child { margin-bottom: 0 !important; }
.bar-list .bar-label { font-weight: 500; }
@media (max-width: 575.98px) {
  .analysis-cards-row { row-gap: 1rem; }
  .analysis-card { min-height: auto; }
  .analysis-card .display-5, .analysis-card .display-6 { font-size: 1.9rem !important; }
  #status-breakdown-collapse .bar-item, #rating-breakdown-collapse .bar-item { margin-bottom: .9rem !important; }
  .bar-list .bar-label { font-size: .85rem; }
  .bar-list .bar-count { font-size: .75rem; }
  .bar-list .bar-track { height: 12px; }
}

/* ==========================================
 * Dropdown active state clarity
 * ========================================== */
.dropdown-menu .dropdown-item.active { font-weight:600; background: var(--bs-primary-bg-subtle,#e7f1ff); }
nav .dropdown-menu { margin-top:.4rem; }

/* ==========================================
 * Modern Login Page Styles
 * ========================================== */
.login-container {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  overflow: hidden;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

/* Card wrapper with fade-in animation */
.login-card-wrapper {
  animation: fadeInUp 0.8s ease-out;
  width: 100%;
  max-width: 480px;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Glassmorphism card */
.login-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-radius: 24px;
  padding: 3rem 2.5rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 
              0 0 1px rgba(0, 0, 0, 0.1);
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.login-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.2);
}

/* Icon with pulse animation */
.login-icon-wrapper {
  margin-bottom: 1.5rem;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

.login-icon {
  width: 6rem;
  height: 6rem;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.1));
  transition: transform 0.3s ease;
}

.login-icon:hover {
  transform: rotate(5deg) scale(1.1);
}

/* Title */
.login-title {
  font-size: 2.5rem;
  font-weight: 700;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 1rem;
  letter-spacing: -0.5px;
}

/* Description */
.login-description {
  color: #4a5568;
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: 1.5rem;
  font-weight: 500;
}

/* Divider */
.login-divider {
  height: 2px;
  background: linear-gradient(90deg, transparent, #e2e8f0, transparent);
  margin: 1.5rem 0;
}

/* Info text */
.login-info {
  color: #2d3748;
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: 0.75rem;
  font-weight: 500;
}

.login-notice {
  color: #718096;
  font-size: 0.88rem;
  line-height: 1.6;
  margin-bottom: 2rem;
}

/* Form */
.login-form {
  margin-bottom: 1.5rem;
}

/* Modern button with shine effect */
.login-button {
  position: relative;
  width: 100%;
  padding: 1rem 2rem;
  font-size: 1.1rem;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 12px;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.login-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.5);
}

.login-button:active {
  transform: translateY(0);
}

.login-button-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

/* Shine animation */
.login-button-shine {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(255, 255, 255, 0.3) 50%,
    transparent 70%
  );
  animation: shine 3s ease-in-out infinite;
}

@keyframes shine {
  0% {
    transform: translateX(-100%) translateY(-100%) rotate(45deg);
  }
  100% {
    transform: translateX(100%) translateY(100%) rotate(45deg);
  }
}

/* Footer link */
.login-footer {
  margin-top: 1.5rem;
}

.login-link {
  color: #667eea;
  font-size: 0.9rem;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

.login-link:hover {
  color: #764ba2;
  text-decoration: underline;
}

/* Mobile responsiveness */
@media (max-width: 575.98px) {
  .login-card {
    padding: 2rem 1.5rem;
    border-radius: 20px;
  }
  
  .login-icon {
    width: 4.5rem;
    height: 4.5rem;
  }
  
  .login-title {
    font-size: 2rem;
  }
  
  .login-description {
    font-size: 0.95rem;
  }
  
  .login-button {
    padding: 0.9rem 1.5rem;
    font-size: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .login-icon-wrapper,
  .login-button-shine {
    animation: none;
  }
  
  .login-card-wrapper {
    animation: none;
  }
}