/**
 * APP XiDEA リキッドグラスモード
 *
 * - html[data-glass="true"] で有効化
 * - 背景は #liquid-glass-bg（JSが動的挿入）に
 *   CSSグラデーションアニメーションを適用する
 *   動画を選択した場合は <video id="liquid-glass-video-bg"> が最背面に表示される
 * - ガラス効果対象（拡張済み）:
 *     [メインガラス]   .xidea-card / .card / .modal-content / .accordion
 *     [軽量ガラス]     .list-group / .list-group-item / .alert
 *     [部分透過]       .accordion-item/button/body / .nav-tabs / .table
 * - ダーク両立は [data-theme="dark"][data-glass="true"]
 *
 * z-index設計（衝突回避の要）:
 *   カード本体: position:relative; isolation:isolate; backdrop-filter でぼかし
 *   ::before  : z-index:0 の歪みレイヤとして inset配置し、
 *               中身は position:relative; z-index:1 で前面化する
 */

/* ========================================
   1. CSS変数（ライトのデフォルト値）
   ======================================== */
:root {
  --glass-blur: 6px;
  --glass-saturate: 1.6;
  --glass-tint: rgba(255, 255, 255, 0.18);
  --glass-border: rgba(255, 255, 255, 0.55);
  --glass-shine-1: rgba(255, 255, 255, 0.55);
  --glass-shine-2: rgba(255, 255, 255, 0.35);
  --glass-shadow: 0 8px 24px rgba(0, 0, 0, 0.18), 0 0 1px rgba(0, 0, 0, 0.1);
  --glass-radius: var(--xidea-radius-lg, 12px);
}

/* ダーク+ガラス時のtint・縁取り上書き */
[data-theme="dark"][data-glass="true"] {
  --glass-tint: rgba(30, 41, 59, 0.40);
  --glass-border: rgba(148, 163, 184, 0.35);
  --glass-shine-1: rgba(226, 232, 240, 0.30);
  --glass-shine-2: rgba(148, 163, 184, 0.18);
  --glass-shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
  --glass-saturate: 1.3;
}

/* ========================================
   2. グラデーション背景
   ======================================== */
#liquid-glass-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: #e0e4f0;
  background-image:
    radial-gradient(ellipse 80% 60% at 15% 20%, rgba(255, 107, 53, 0.65) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 85% 15%, rgba(108,  92, 231, 0.60) 0%, transparent 55%),
    radial-gradient(ellipse 70% 50% at 20% 85%, rgba(  0, 206, 201, 0.55) 0%, transparent 60%),
    radial-gradient(ellipse 55% 70% at 80% 80%, rgba(253, 121, 168, 0.55) 0%, transparent 55%),
    radial-gradient(ellipse 90% 90% at 50% 50%, rgba(100, 160, 255, 0.38) 0%, transparent 65%);
  background-size: 300% 300%;
  animation: glassGradShift 60s ease-in-out infinite alternate;
}

[data-theme="dark"] #liquid-glass-bg {
  background-color: #080c18;
  background-image:
    radial-gradient(ellipse 80% 60% at 15% 20%, rgba(200,  50,   0, 0.80) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 85% 15%, rgba( 80,  40, 200, 0.75) 0%, transparent 55%),
    radial-gradient(ellipse 70% 50% at 20% 85%, rgba(  0, 150, 140, 0.70) 0%, transparent 60%),
    radial-gradient(ellipse 55% 70% at 80% 80%, rgba(200,  60, 120, 0.70) 0%, transparent 55%),
    radial-gradient(ellipse 90% 90% at 50% 50%, rgba( 40, 100, 200, 0.50) 0%, transparent 65%);
  background-size: 300% 300%;
  animation: glassGradShift 60s ease-in-out infinite alternate;
}

@keyframes glassGradShift {
  0%   { background-position: 0%   0%,   100% 0%,   0%  100%, 100% 100%, 50% 50%; }
  20%  { background-position: 25%  15%,   75% 25%,  15%  75%,  85%  65%, 45% 55%; }
  40%  { background-position: 55%  35%,   45% 55%,  45%  45%,  55%  35%, 35% 65%; }
  60%  { background-position: 15%  65%,   85% 15%,  65%  25%,  25%  75%, 65% 35%; }
  80%  { background-position: 70%  20%,   30% 70%,  30%  60%,  70%  40%, 40% 60%; }
  100% { background-position: 50%  50%,   50% 50%,  30%  70%,  70%  30%, 50% 50%; }
}

/* 動画背景 */
#liquid-glass-video-bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  pointer-events: none;
}

/* ガラスモード時はbody背景を透過させて背景を見せる */
[data-glass="true"] body {
  background: transparent !important;
}

/* ピッカーモーダルのグラデーションプレビュー */
.glass-picker-grad-preview {
  aspect-ratio: 16/9;
  background-color: #e0e4f0;
  background-image:
    radial-gradient(ellipse 80% 60% at 15% 20%, rgba(255, 107, 53, 0.65) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 85% 15%, rgba(108,  92, 231, 0.60) 0%, transparent 55%),
    radial-gradient(ellipse 70% 50% at 20% 85%, rgba(  0, 206, 201, 0.55) 0%, transparent 60%),
    radial-gradient(ellipse 55% 70% at 80% 80%, rgba(253, 121, 168, 0.55) 0%, transparent 55%);
  background-size: 200% 200%;
  animation: glassGradShift 8s ease-in-out infinite alternate;
}

/* ========================================
   3. メインガラス効果
   （backdrop-filter + tint + shine + overflow:hidden）
   対象: カード3種 + アコーディオン全体
   ======================================== */
[data-glass="true"] .xidea-card,
[data-glass="true"] .card:not(.position-absolute):not(.position-fixed),
[data-glass="true"] .modal-content,
[data-glass="true"] .accordion {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--glass-tint) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--glass-radius);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  box-shadow:
    var(--glass-shadow),
    inset 1.5px 1.5px 1px 0 var(--glass-shine-1),
    inset -1px -1px 1px 1px var(--glass-shine-2);
}

/* 歪みレイヤ（::before） */
[data-glass="true"] .xidea-card::before,
[data-glass="true"] .card:not(.position-absolute):not(.position-fixed)::before,
[data-glass="true"] .modal-content::before,
[data-glass="true"] .accordion::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  filter: url(#glass-distortion-card);
  background:
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.10) 0%,
      rgba(255, 255, 255, 0.00) 40%,
      rgba(255, 255, 255, 0.06) 100%);
  pointer-events: none;
}

/* 中身を歪みレイヤより前面へ */
[data-glass="true"] .xidea-card > *,
[data-glass="true"] .card:not(.position-absolute):not(.position-fixed) > *,
[data-glass="true"] .modal-content > *,
[data-glass="true"] .accordion > * {
  position: relative;
  z-index: 1;
}

/* ホバーで浮く */
[data-glass="true"] .xidea-card,
[data-glass="true"] .card:not(.position-absolute):not(.position-fixed) {
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
              box-shadow 0.3s ease;
}
[data-glass="true"] .xidea-card:hover,
[data-glass="true"] .card:not(.position-absolute):not(.position-fixed):hover {
  transform: translateY(-2px);
}

/* card-header / card-body / card-footer は透過のみ（背景の二重tint防止） */
[data-glass="true"] .card:not(.position-absolute):not(.position-fixed) > .card-header,
[data-glass="true"] .card:not(.position-absolute):not(.position-fixed) > .card-body,
[data-glass="true"] .card:not(.position-absolute):not(.position-fixed) > .card-footer {
  background: transparent !important;
  border-color: var(--glass-border) !important;
}

/* モーダルbackdropをやや濃いめに */
[data-glass="true"] .modal-backdrop.show {
  opacity: 0.35;
}

/* ========================================
   4. タブコンテンツパネル
      tmx/profile など tab-content が直接パネルになる場合
   ======================================== */
[data-glass="true"] .tab-content.border,
[data-glass="true"] .tab-content.rounded-bottom {
  position: relative;
  isolation: isolate;
  background: var(--glass-tint) !important;
  border-color: var(--glass-border) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  box-shadow:
    var(--glass-shadow),
    inset 1.5px 1.5px 1px 0 var(--glass-shine-1),
    inset -1px -1px 1px 1px var(--glass-shine-2);
}

/* ========================================
   5. ガラス効果の拡張（リスト・枠を持つ部分）
   ======================================== */

[data-glass="true"] .list-group {
  border-radius: var(--xidea-radius-lg, 12px);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border) !important;
  box-shadow:
    var(--glass-shadow),
    inset 1.5px 1.5px 1px 0 var(--glass-shine-1);
  overflow: hidden;
}

[data-glass="true"] .list-group-item {
  background: var(--glass-tint) !important;
  border-color: var(--glass-border) !important;
  -webkit-backdrop-filter: blur(4px) saturate(var(--glass-saturate));
  backdrop-filter: blur(4px) saturate(var(--glass-saturate));
}

[data-glass="true"] .alert {
  background: var(--glass-tint) !important;
  border-color: var(--glass-border) !important;
  -webkit-backdrop-filter: blur(4px) saturate(var(--glass-saturate));
  backdrop-filter: blur(4px) saturate(var(--glass-saturate));
}

[data-glass="true"] .accordion-item {
  background: transparent !important;
  border-color: var(--glass-border) !important;
}
[data-glass="true"] .accordion-button {
  background: transparent !important;
  color: inherit;
}
[data-glass="true"] .accordion-button:not(.collapsed) {
  background: rgba(255, 255, 255, 0.1) !important;
  box-shadow: none;
}
[data-glass="true"] .accordion-body {
  background: transparent !important;
}

[data-glass="true"] .nav-tabs {
  border-color: var(--glass-border) !important;
}
[data-glass="true"] .nav-tabs .nav-link.active {
  background: var(--glass-tint) !important;
  border-color: var(--glass-border) !important;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
[data-glass="true"] .nav-tabs .nav-link:not(.active):hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: transparent !important;
}

[data-glass="true"] .table {
  --bs-table-bg: transparent !important;
  --bs-table-striped-bg: rgba(255, 255, 255, 0.05) !important;
  --bs-table-hover-bg: rgba(255, 255, 255, 0.10) !important;
  --bs-table-border-color: var(--glass-border) !important;
  /* dark-mode.css が table 要素自体に background-color: #1e293b を直接設定するため上書き */
  background: transparent !important;
  background-color: transparent !important;
}
[data-glass="true"] .table > :not(caption) > * > * {
  background-color: transparent !important;
}

/* ========================================
   5. パフォーマンス / アクセシビリティ
   ======================================== */
@media (prefers-reduced-motion: reduce) {
  #liquid-glass-bg { animation: none; }
  [data-glass="true"] .xidea-card,
  [data-glass="true"] .card { transition: none; }
}

/* ========================================
   6. ヘッダー / フッター
   ======================================== */

/*
 * common.css の .xidea-header { background: white } を !important で上書き。
 * backdrop-filter は stacking context を生成するため後続のガラスカードが
 * ドロップダウンより前面になる問題を z-index:1040 で防ぐ。
 * 内側の .navbar は transparent にして二重ガラスを避ける。
 */
[data-glass="true"] .xidea-header {
  position: relative;
  z-index: 1040;
  background: rgba(255, 255, 255, 0.28) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.8);
  backdrop-filter: blur(14px) saturate(1.8);
  border-bottom: 1px solid var(--glass-border) !important;
  box-shadow: 0 1px 16px rgba(0, 0, 0, 0.10);
}

[data-theme="dark"][data-glass="true"] .xidea-header {
  background: rgba(10, 15, 35, 0.60) !important;
}

/* 内側 navbar は透過させてヘッダー自体のガラスを見せる */
[data-glass="true"] .xidea-header .navbar {
  background: transparent !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

[data-glass="true"] .xidea-header .dropdown-menu {
  background: rgba(255, 255, 255, 0.55) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.8);
  backdrop-filter: blur(16px) saturate(1.8);
  border: 1px solid var(--glass-border) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
}

[data-theme="dark"][data-glass="true"] .xidea-header .dropdown-menu {
  background: rgba(20, 28, 55, 0.75) !important;
}

[data-glass="true"] .xidea-footer {
  background: rgba(255, 255, 255, 0.18) !important;
  -webkit-backdrop-filter: blur(10px) saturate(var(--glass-saturate));
  backdrop-filter: blur(10px) saturate(var(--glass-saturate));
  border-top: 1px solid var(--glass-border) !important;
}

[data-theme="dark"][data-glass="true"] .xidea-footer {
  background: rgba(10, 15, 35, 0.45) !important;
}

/* ========================================
   7. ヒーロー / 統計ブロック（アプリ固有の色付きブロック）
   ======================================== */

/* ECXヒーロー（オレンジグラデーション → 半透明オレンジガラス） */
[data-glass="true"] .ecx-hero {
  background: rgba(255, 107, 53, 0.42) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid rgba(255, 107, 53, 0.35) !important;
  box-shadow: 0 8px 24px rgba(255, 107, 53, 0.18), inset 1px 1px 1px rgba(255,255,255,0.25);
}

/* SetOXヒーロー（パープルグラデーション → 半透明パープルガラス） */
[data-glass="true"] .setox-hero {
  background: rgba(155, 89, 182, 0.42) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid rgba(155, 89, 182, 0.35) !important;
  box-shadow: 0 8px 24px rgba(155, 89, 182, 0.18), inset 1px 1px 1px rgba(255,255,255,0.25);
}

/* 統計カード（未発送注文・発送数 etc.） */
[data-glass="true"] .stat-card,
[data-glass="true"] .stats-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--glass-tint) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--glass-radius);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  box-shadow:
    var(--glass-shadow),
    inset 1.5px 1.5px 1px 0 var(--glass-shine-1),
    inset -1px -1px 1px 1px var(--glass-shine-2);
}
[data-glass="true"] .stat-card > *,
[data-glass="true"] .stats-card > * { position: relative; z-index: 1; }

/* ========================================
   8. カスタムカード類（各アプリ固有）
      .card と同等のガラス効果を付与
   ======================================== */
[data-glass="true"] .app-card,
[data-glass="true"] .feature-card,
[data-glass="true"] .feature-box,
[data-glass="true"] .ranking-card,
[data-glass="true"] .artist-card,
[data-glass="true"] .artist-header,
[data-glass="true"] .form-section,
[data-glass="true"] .info-section,
[data-glass="true"] .member-card,
[data-glass="true"] .history-card,
[data-glass="true"] .order-card,
[data-glass="true"] .upload-area,
[data-glass="true"] .file-info,
[data-glass="true"] .song-card,
[data-glass="true"] .song-header,
[data-glass="true"] .filter-bar {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--glass-tint) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--glass-radius);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  box-shadow:
    var(--glass-shadow),
    inset 1.5px 1.5px 1px 0 var(--glass-shine-1),
    inset -1px -1px 1px 1px var(--glass-shine-2);
}

/* 歪みレイヤ */
[data-glass="true"] .app-card::before,
[data-glass="true"] .feature-card::before,
[data-glass="true"] .feature-box::before,
[data-glass="true"] .ranking-card::before,
[data-glass="true"] .artist-card::before,
[data-glass="true"] .artist-header::before,
[data-glass="true"] .form-section::before,
[data-glass="true"] .info-section::before,
[data-glass="true"] .member-card::before,
[data-glass="true"] .history-card::before,
[data-glass="true"] .order-card::before,
[data-glass="true"] .upload-area::before,
[data-glass="true"] .file-info::before,
[data-glass="true"] .song-card::before,
[data-glass="true"] .song-header::before,
[data-glass="true"] .filter-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  filter: url(#glass-distortion-card);
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.10) 0%,
    rgba(255, 255, 255, 0.00) 40%,
    rgba(255, 255, 255, 0.06) 100%);
  pointer-events: none;
}

/* 中身を歪みレイヤより前面へ */
[data-glass="true"] .app-card > *,
[data-glass="true"] .feature-card > *,
[data-glass="true"] .feature-box > *,
[data-glass="true"] .ranking-card > *,
[data-glass="true"] .artist-card > *,
[data-glass="true"] .artist-header > *,
[data-glass="true"] .form-section > *,
[data-glass="true"] .info-section > *,
[data-glass="true"] .member-card > *,
[data-glass="true"] .history-card > *,
[data-glass="true"] .order-card > *,
[data-glass="true"] .upload-area > *,
[data-glass="true"] .file-info > *,
[data-glass="true"] .song-card > *,
[data-glass="true"] .song-header > *,
[data-glass="true"] .filter-bar > * {
  position: relative;
  z-index: 1;
}

/* ホバー効果（カード系のみ） */
[data-glass="true"] .app-card,
[data-glass="true"] .feature-card,
[data-glass="true"] .feature-box,
[data-glass="true"] .ranking-card,
[data-glass="true"] .artist-card,
[data-glass="true"] .order-card,
[data-glass="true"] .song-card {
  transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275),
              box-shadow 0.3s ease;
}
[data-glass="true"] .app-card:hover,
[data-glass="true"] .feature-card:hover,
[data-glass="true"] .feature-box:hover,
[data-glass="true"] .ranking-card:hover,
[data-glass="true"] .artist-card:hover,
[data-glass="true"] .song-card:hover {
  transform: translateY(-2px);
}

/* shipped-order / completed-history は半透明の深みを保つ */
[data-glass="true"] .order-card.shipped-order,
[data-glass="true"] .history-card.completed-history {
  background: rgba(160, 160, 175, 0.30) !important;
}

/* ========================================
   9. エントリー項目（SNS・職歴 etc.）
      軽いガラス — backdrop-filter なし
   ======================================== */
[data-glass="true"] .sns-entry,
[data-glass="true"] .work-entry {
  background: rgba(255, 255, 255, 0.14) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 8px;
}

[data-theme="dark"][data-glass="true"] .sns-entry,
[data-theme="dark"][data-glass="true"] .work-entry {
  background: rgba(40, 55, 90, 0.30) !important;
}

/* ========================================
   10. セットリスト表示行（モバイル時のカード行）
   ======================================== */

/* デスクトップ: tr行にガラス適用 */
[data-glass="true"] .setlist-table tr {
  background: var(--glass-tint) !important;
  border: 1px solid var(--glass-border) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  box-shadow: var(--glass-shadow),
    inset 1px 1px 1px 0 var(--glass-shine-1);
}

[data-glass="true"] .setlist-table tr.past-setlist,
[data-glass="true"] .setlist-table tr.past-setlist td {
  background: rgba(160, 160, 175, 0.28) !important;
}

/* モバイル: 外側カード・table-responsive・<tr>を透過し、内側の .card にガラスを委ねる */
/* iOS Safari / Android Chrome で overflow:hidden + backdrop-filter の描画バグを防ぐ */
@media (max-width: 768px) {
  /* 外側ラッパーカードを透過
     グローバル glass ルールの特異度 0,4,0 (!important) より高い 0,5,0 で上書き */
  [data-glass="true"] .setlist-outer-card.card:not(.position-absolute):not(.position-fixed) {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    overflow: visible !important;
    transform: none !important;
  }
  [data-glass="true"] .setlist-outer-card.card:not(.position-absolute):not(.position-fixed)::before {
    display: none !important;
  }
  /* table-responsive の -webkit-overflow-scrolling を無効化（iOS GPU レイヤ白背景防止） */
  [data-glass="true"] .setlist-table-responsive {
    background: transparent !important;
    -webkit-overflow-scrolling: auto !important;
  }
  /* <tr>・past-setlist td も透過 */
  [data-glass="true"] .setlist-table tr,
  [data-glass="true"] .setlist-table tr.past-setlist,
  [data-glass="true"] .setlist-table tr.past-setlist td {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
  }
  [data-glass="true"] .setlist-table td.mobile-row {
    display: block !important;
    padding: 0 !important;
  }
}

/* ========================================
   11. 楽曲詳細ページ内のソフト背景要素
       backdrop-filter なしの軽量ガラス
   ======================================== */
[data-glass="true"] .lyrics-display,
[data-glass="true"] .audio-version-item,
[data-glass="true"] .lighting-detail-item {
  background: rgba(255, 255, 255, 0.10) !important;
  border-color: var(--glass-border) !important;
}
[data-theme="dark"][data-glass="true"] .lyrics-display,
[data-theme="dark"][data-glass="true"] .audio-version-item,
[data-theme="dark"][data-glass="true"] .lighting-detail-item {
  background: rgba(30, 41, 59, 0.25) !important;
}

/* ========================================
   12. テーブルヘッダー（.table-light）透過
   ======================================== */
[data-glass="true"] thead.table-light > tr > th,
[data-glass="true"] thead.table-light > tr > td,
[data-glass="true"] .table > thead.table-light,
[data-glass="true"] .table-light {
  background-color: rgba(255, 255, 255, 0.12) !important;
  --bs-table-bg: transparent !important;
  color: inherit;
}