/**
 * APP XiDEA ダークモードCSS
 *
 * [data-theme="dark"] をhtml要素に付与することで有効化
 * CSS変数の上書きとBootstrapコンポーネントのオーバーライドで構成
 */

/* ========================================
   CSS変数（ダーク）
   ======================================== */
[data-theme="dark"] {
  --xidea-primary: #e2e8f0;
  --xidea-accent: #FF6B35;
  --xidea-accent-hover: #ff8255;

  --xidea-text: #cbd5e1;
  --xidea-text-muted: #94a3b8;
  --xidea-text-light: #64748b;

  --xidea-bg: #0f172a;
  --xidea-bg-soft: #1e293b;
  --xidea-bg-card: #1e293b;

  --xidea-border: #334155;
  --xidea-border-light: #1e293b;

  --xidea-shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
  --xidea-shadow: 0 2px 10px rgba(0,0,0,0.5);
  --xidea-shadow-lg: 0 12px 30px rgba(0,0,0,0.6);
}

/* ========================================
   基本要素
   ======================================== */
[data-theme="dark"] body {
  background-color: var(--xidea-bg-soft);
  color: var(--xidea-text);
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
  color: var(--xidea-primary);
}

/* ========================================
   ナビバー・ヘッダー
   ======================================== */
[data-theme="dark"] .xidea-header,
[data-theme="dark"] .navbar,
[data-theme="dark"] .navbar-light,
[data-theme="dark"] .bg-white {
  background-color: #1e293b !important;
  border-color: #334155 !important;
}

[data-theme="dark"] .navbar-light .navbar-nav .nav-link,
[data-theme="dark"] .navbar-light .navbar-brand {
  color: var(--xidea-text) !important;
}

[data-theme="dark"] .navbar-light .navbar-nav .nav-link:hover {
  color: var(--xidea-accent) !important;
}

[data-theme="dark"] .navbar-toggler {
  border-color: var(--xidea-border) !important;
}

[data-theme="dark"] .navbar-toggler-icon {
  filter: invert(1);
}

/* ========================================
   ドロップダウン
   ======================================== */
[data-theme="dark"] .dropdown-menu {
  background-color: #1e293b;
  border-color: #334155;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}

[data-theme="dark"] .dropdown-item {
  color: var(--xidea-text);
}

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
  background-color: #0f172a;
  color: var(--xidea-accent);
}

[data-theme="dark"] .dropdown-item.active {
  background-color: var(--xidea-accent);
  color: #fff;
}

[data-theme="dark"] .dropdown-divider {
  border-color: #334155;
}

[data-theme="dark"] .dropdown-header {
  color: var(--xidea-text-muted);
}

/* ========================================
   カード
   ======================================== */
[data-theme="dark"] .card,
[data-theme="dark"] .xidea-card {
  background-color: var(--xidea-bg-card);
  border-color: var(--xidea-border);
  color: var(--xidea-text);
}

[data-theme="dark"] .card-header {
  background-color: #0f172a;
  border-color: var(--xidea-border);
}

[data-theme="dark"] .card-footer {
  background-color: #0f172a;
  border-color: var(--xidea-border);
}

/* ========================================
   モーダル
   ======================================== */
[data-theme="dark"] .modal-content {
  background-color: #1e293b;
  border-color: #334155;
  color: var(--xidea-text);
}

[data-theme="dark"] .modal-header {
  border-color: #334155;
}

[data-theme="dark"] .modal-footer {
  border-color: #334155;
}

[data-theme="dark"] .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* ========================================
   フォーム
   ======================================== */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] .xidea-input,
[data-theme="dark"] .xidea-select,
[data-theme="dark"] .xidea-textarea {
  background-color: #0f172a;
  border-color: #334155;
  color: var(--xidea-text);
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
  background-color: #0f172a;
  border-color: var(--xidea-accent);
  color: var(--xidea-text);
  box-shadow: 0 0 0 3px rgba(255,107,53,0.2);
}

[data-theme="dark"] .form-control::placeholder {
  color: var(--xidea-text-light);
}

[data-theme="dark"] .form-control:disabled,
[data-theme="dark"] .form-select:disabled {
  background-color: #1e293b;
  color: var(--xidea-text-muted);
}

[data-theme="dark"] .form-check-input {
  background-color: #334155;
  border-color: #475569;
}

/* form-switch (スライドスイッチ) OFF状態:
   Bootstrapデフォルトのつまみは暗い円SVGのため、ダーク背景では見えない。
   白い円SVGに差し替えて視認性を確保する。 */
[data-theme="dark"] .form-switch .form-check-input {
  background-color: #334155;
  border-color: #475569;
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255%2c255%2c255%2c0.85%29'/%3e%3c/svg%3e");
}

[data-theme="dark"] .form-check-input:checked {
  background-color: var(--xidea-accent);
  border-color: var(--xidea-accent);
}

/* form-switch ON状態のつまみは白で固定（Bootstrap既定と同じ） */
[data-theme="dark"] .form-switch .form-check-input:checked {
  background-color: var(--xidea-accent);
  border-color: var(--xidea-accent);
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

[data-theme="dark"] .form-check-input:focus {
  box-shadow: 0 0 0 3px rgba(255,107,53,0.2);
}

[data-theme="dark"] .form-switch .form-check-input:focus {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255%2c255%2c255%2c0.85%29'/%3e%3c/svg%3e");
}

[data-theme="dark"] .form-label,
[data-theme="dark"] .form-text {
  color: var(--xidea-text);
}

[data-theme="dark"] .input-group-text {
  background-color: #1e293b;
  border-color: #334155;
  color: var(--xidea-text);
}

/* ========================================
   テーブル
   ======================================== */
[data-theme="dark"] .table,
[data-theme="dark"] .xidea-table {
  color: var(--xidea-text);
  border-color: var(--xidea-border);
}

[data-theme="dark"] .table th,
[data-theme="dark"] .table td {
  border-color: var(--xidea-border);
}

[data-theme="dark"] .table thead th {
  background-color: #0f172a;
  color: var(--xidea-text-muted);
}

[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: rgba(255,255,255,0.03);
  color: var(--xidea-text);
}

[data-theme="dark"] .table-hover > tbody > tr:hover > * {
  background-color: rgba(255,255,255,0.05);
  color: var(--xidea-text);
}

[data-theme="dark"] .table-light {
  background-color: #0f172a;
  color: var(--xidea-text-muted);
}

/* ========================================
   ボタン（Bootstrap）
   ======================================== */
[data-theme="dark"] .btn-outline-secondary {
  color: var(--xidea-text-muted);
  border-color: #334155;
}

[data-theme="dark"] .btn-outline-secondary:hover {
  background-color: #334155;
  border-color: #334155;
  color: var(--xidea-text);
}

[data-theme="dark"] .btn-outline-secondary:disabled {
  color: var(--xidea-text-light);
  border-color: #334155;
}

[data-theme="dark"] .btn-light {
  background-color: #334155;
  border-color: #334155;
  color: var(--xidea-text);
}

[data-theme="dark"] .btn-light:hover {
  background-color: #475569;
  border-color: #475569;
  color: var(--xidea-text);
}

[data-theme="dark"] .btn-secondary {
  background-color: #334155;
  border-color: #334155;
}

/* ========================================
   バッジ
   ======================================== */
[data-theme="dark"] .badge.bg-light {
  background-color: #334155 !important;
  color: var(--xidea-text) !important;
}

[data-theme="dark"] .badge.bg-secondary {
  background-color: #334155 !important;
}

/* ========================================
   アラート
   ======================================== */
[data-theme="dark"] .alert-success {
  background-color: rgba(46,204,113,0.12);
  border-color: rgba(46,204,113,0.4);
  color: #6ee7a0;
}

[data-theme="dark"] .alert-warning {
  background-color: rgba(243,156,18,0.12);
  border-color: rgba(243,156,18,0.4);
  color: #fcd34d;
}

[data-theme="dark"] .alert-danger {
  background-color: rgba(231,76,60,0.12);
  border-color: rgba(231,76,60,0.4);
  color: #fca5a5;
}

[data-theme="dark"] .alert-info {
  background-color: rgba(52,152,219,0.12);
  border-color: rgba(52,152,219,0.4);
  color: #93c5fd;
}

/* ========================================
   テキスト・ボーダー
   ======================================== */
[data-theme="dark"] .text-muted {
  color: var(--xidea-text-muted) !important;
}

[data-theme="dark"] .text-dark {
  color: var(--xidea-text) !important;
}

[data-theme="dark"] .border,
[data-theme="dark"] .border-top,
[data-theme="dark"] .border-bottom,
[data-theme="dark"] .border-start,
[data-theme="dark"] .border-end {
  border-color: #334155 !important;
}

[data-theme="dark"] hr {
  border-color: #334155;
  opacity: 1;
}

/* ========================================
   背景色ユーティリティ
   ======================================== */
[data-theme="dark"] .bg-light {
  background-color: #1e293b !important;
}

[data-theme="dark"] .bg-white {
  background-color: #1e293b !important;
}

/* ========================================
   フッター
   ======================================== */
[data-theme="dark"] .xidea-footer {
  background-color: #1e293b !important;
  border-color: #334155 !important;
}

[data-theme="dark"] .xidea-footer a {
  color: var(--xidea-text-muted) !important;
}

[data-theme="dark"] .xidea-footer a:hover {
  color: var(--xidea-accent) !important;
}

/* ========================================
   リストグループ
   ======================================== */
[data-theme="dark"] .list-group-item {
  background-color: var(--xidea-bg-card);
  border-color: var(--xidea-border);
  color: var(--xidea-text);
}

[data-theme="dark"] .list-group-item:hover {
  background-color: #0f172a;
}

[data-theme="dark"] .list-group-item.active {
  background-color: var(--xidea-accent);
  border-color: var(--xidea-accent);
}

/* ========================================
   ページネーション
   ======================================== */
[data-theme="dark"] .page-link {
  background-color: #1e293b;
  border-color: #334155;
  color: var(--xidea-text);
}

[data-theme="dark"] .page-link:hover {
  background-color: #0f172a;
  border-color: #334155;
  color: var(--xidea-accent);
}

[data-theme="dark"] .page-item.active .page-link {
  background-color: var(--xidea-accent);
  border-color: var(--xidea-accent);
}

[data-theme="dark"] .page-item.disabled .page-link {
  background-color: #1e293b;
  border-color: #334155;
  color: var(--xidea-text-light);
}

/* ========================================
   タブ・ピル
   ======================================== */
[data-theme="dark"] .nav-tabs {
  border-color: #334155;
}

[data-theme="dark"] .nav-tabs .nav-link {
  color: var(--xidea-text-muted);
}

[data-theme="dark"] .nav-tabs .nav-link:hover {
  border-color: #334155;
  color: var(--xidea-text);
}

[data-theme="dark"] .nav-tabs .nav-link.active {
  background-color: #1e293b;
  border-color: #334155 #334155 #1e293b;
  color: var(--xidea-accent);
}

[data-theme="dark"] .nav-pills .nav-link {
  color: var(--xidea-text-muted);
}

[data-theme="dark"] .nav-pills .nav-link.active {
  background-color: var(--xidea-accent);
  color: #fff;
}

/* ========================================
   アコーディオン
   ======================================== */
[data-theme="dark"] .accordion-item {
  background-color: #1e293b;
  border-color: #334155;
  color: var(--xidea-text);
}

[data-theme="dark"] .accordion-button {
  background-color: #1e293b;
  color: var(--xidea-text);
}

[data-theme="dark"] .accordion-button:not(.collapsed) {
  background-color: #0f172a;
  color: var(--xidea-accent);
  box-shadow: inset 0 -1px 0 #334155;
}

[data-theme="dark"] .accordion-button::after {
  filter: invert(1) brightness(0.8);
}

[data-theme="dark"] .accordion-button:not(.collapsed)::after {
  filter: invert(0.5) sepia(1) saturate(3) hue-rotate(330deg);
}

[data-theme="dark"] .accordion-button:focus {
  border-color: var(--xidea-accent);
  box-shadow: 0 0 0 3px rgba(255,107,53,0.2);
}

[data-theme="dark"] .accordion-body {
  background-color: #1e293b;
  color: var(--xidea-text);
}

[data-theme="dark"] .accordion-collapse {
  background-color: #1e293b;
}

/* ========================================
   ページ遷移ローディング
   ======================================== */
[data-theme="dark"] #page-transition-loading {
  background: rgba(15, 23, 42, 0.95) !important;
}

/* ========================================
   Bootstrap table — 背景色をダークに（--bs-table-bg上書き）
   ======================================== */

/* Bootstrap 5はCSS変数 --bs-table-bg でテーブル背景を制御するため、変数ごと上書きする */
[data-theme="dark"] .table {
  --bs-table-bg: #1e293b;
  --bs-table-color: var(--xidea-text);
  --bs-table-border-color: #334155;
  --bs-table-striped-color: var(--xidea-text);
  --bs-table-striped-bg: rgba(255,255,255,0.03);
  --bs-table-hover-color: var(--xidea-text);
  --bs-table-hover-bg: rgba(255,255,255,0.07);
  background-color: #1e293b;
}

/* ========================================
   ECX 注文一覧 — ページ固有スタイルの上書き
   ======================================== */

/* 注文カード本体（background: white ハードコード） */
[data-theme="dark"] .order-card {
  background: var(--xidea-bg-card) !important;
}

/* 発送済み注文カード（background-color: #e0e0e0 ハードコード）
   → 暗いグリーンティントで「完了」を視認しやすく */
[data-theme="dark"] .order-card.shipped-order,
[data-theme="dark"] .order-card.shipped-order .order-card-header,
[data-theme="dark"] .order-card.shipped-order .order-card-body {
  background-color: #0f2a1e !important;
  border-color: #1e4d38 !important;
}

/* 発送済み注文行（PC テーブル表示） */
[data-theme="dark"] tr.order-row.shipped-order > td,
[data-theme="dark"] tr.shipped-order > td {
  background-color: #0f2a1e !important;
}

/* 商品ドロップダウンのhoverセル */
[data-theme="dark"] .hover-bg-light:hover {
  background-color: #334155 !important;
}

/* 商品フィルタードロップダウンのbg-white / bg-light エリア */
[data-theme="dark"] .product-dropdown-item:hover {
  background-color: #334155 !important;
}

/* モーダル内の商品リスト thead (table-light) */
[data-theme="dark"] .table-light,
[data-theme="dark"] thead.table-light > tr > th,
[data-theme="dark"] thead.table-light > tr > td {
  background-color: #0f172a !important;
  color: var(--xidea-text-muted) !important;
  border-color: #334155 !important;
}

/* ========================================
   ECX 履歴 — ページ固有スタイルの上書き
   ======================================== */

/* 発送完了済み・アーカイブ済みブロック（インライン background: #d0d0d0 を上書き） */
[data-theme="dark"] .history-card.completed-history {
  background-color: #1a2535 !important;
}

/* メモテキストエリア（ブラウザデフォルト白背景を上書き） */
[data-theme="dark"] .memo-textarea {
  background-color: #0f172a;
  color: var(--xidea-text);
  border-color: var(--xidea-border);
}

[data-theme="dark"] .memo-textarea:focus {
  background-color: #0f172a;
  border-color: var(--xidea-accent);
}

/* ========================================
   ECX メールテンプレート編集 — 変数リスト
   ======================================== */

[data-theme="dark"] .variable-item {
  border-bottom-color: #334155 !important;
}

[data-theme="dark"] .variable-item:hover {
  background: #0f172a !important;
}

[data-theme="dark"] .variable-code {
  background: rgba(52, 152, 219, 0.2) !important;
  color: #93c5fd !important;
}

[data-theme="dark"] .section-header {
  background: #0f172a !important;
  color: var(--xidea-text-muted) !important;
  border-bottom-color: #334155 !important;
}

/* ========================================
   ECX ショップ管理 — btn-xidea-outline（background: white ハードコード）
   ======================================== */

[data-theme="dark"] .btn-xidea-outline {
  background: transparent !important;
  color: var(--xidea-primary) !important;
  border-color: var(--xidea-primary) !important;
}

[data-theme="dark"] .btn-xidea-outline:hover {
  background: var(--xidea-primary) !important;
  color: var(--xidea-bg) !important;
}

/* ========================================
   ECX ショップ管理 — カードヘッダー・ロゴ
   ======================================== */

[data-theme="dark"] .shop-card-header {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
}

[data-theme="dark"] .shop-logo {
  background: #0f172a !important;
}

[data-theme="dark"] .shop-logo-placeholder {
  background: #0f172a !important;
  color: #475569 !important;
}

[data-theme="dark"] .shop-card-footer {
  background: #0f172a !important;
}

/* ========================================
   ECX テンプレート管理 — サムネイル
   ======================================== */

[data-theme="dark"] .template-thumbnail {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
  color: #475569 !important;
}

/* ========================================
   SETOX セットリスト一覧 — ページ固有スタイルの上書き
   ======================================== */

/* 過去のセットリスト行（!importantなインラインスタイルを高い詳細度で上書き） */
[data-theme="dark"] .setlist-table tr.past-setlist,
[data-theme="dark"] .setlist-table tr.past-setlist td {
  background-color: #0d1526 !important;
  color: var(--xidea-text-muted) !important;
}

/* モバイル時のカード風行 */
[data-theme="dark"] .setlist-table tr {
  background: #1e293b !important;
  border-color: #334155 !important;
}

[data-theme="dark"] .setlist-table td.mobile-actions {
  border-top-color: #334155 !important;
}

/* モバイル行内のハードコードテキスト色 */
[data-theme="dark"] .mobile-line-1,
[data-theme="dark"] .mobile-stat-1,
[data-theme="dark"] .mobile-stat-2,
[data-theme="dark"] .mobile-stat-3 {
  color: var(--xidea-text-muted) !important;
}

[data-theme="dark"] .mobile-line-2 a {
  color: var(--xidea-text) !important;
}

[data-theme="dark"] .mobile-line-3 {
  color: var(--xidea-text) !important;
}

/* ========================================
   TMX — ページ固有スタイルの上書き
   ======================================== */

/* プロフィール: SNS・職歴エントリブロック (background: #f8f9fa ハードコード) */
[data-theme="dark"] .sns-entry,
[data-theme="dark"] .work-entry {
  background: #0f172a !important;
  border-color: #334155 !important;
}

/* プロフィール: タブのborder-color (#fff 部分を隠すハードコード) */
[data-theme="dark"] .nav-tabs .nav-link.active {
  border-bottom-color: var(--xidea-bg-card) !important;
}

/* カテゴリ編集: カスタムフィールドブロック (background: #f8f9fa, border: #dee2e6 ハードコード) */
[data-theme="dark"] .field-builder-item {
  background: #0f172a !important;
  border-color: #334155 !important;
}

/* ダッシュボード・プロフィール変更履歴: bg-light border-bottom ヘッダー行 */
/* (bg-light は全体で上書き済みだが、変更履歴行の px-3 py-2 bg-light 等は念のため) */
[data-theme="dark"] .card > .table-responsive > .table td .px-3.py-2.bg-light,
[data-theme="dark"] td > .px-3.bg-light {
  background: #0f172a !important;
}

/* ========================================
   パンくずリスト
   ======================================== */

/* Bootstrap 5 のセパレーター（/）は --bs-breadcrumb-divider-color で制御。
   デフォルト値 rgba(0,0,0,.65) はダーク背景で不可視になるため上書きする。 */
[data-theme="dark"] .breadcrumb {
  --bs-breadcrumb-divider-color: #64748b;
  --bs-breadcrumb-active-color: #94a3b8;
}

[data-theme="dark"] .breadcrumb-item::before {
  color: #64748b;
}

[data-theme="dark"] .breadcrumb-item.active {
  color: #94a3b8;
}

[data-theme="dark"] .breadcrumb-item a {
  color: var(--xidea-accent);
}

[data-theme="dark"] .breadcrumb-item a:hover {
  color: var(--xidea-accent-hover);
}

/* ========================================
   ダークモード切替スイッチ
   ======================================== */
.dark-mode-switch-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1rem;
  cursor: default;
}

.dark-mode-switch-item:hover {
  background-color: transparent !important;
}

[data-theme="dark"] .dark-mode-switch-item:hover {
  background-color: transparent !important;
}

/* スイッチのラベルテキスト */
.dark-mode-switch-item .switch-label {
  font-size: 0.875rem;
  color: var(--xidea-text);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  user-select: none;
}

[data-theme="dark"] .dark-mode-switch-item .switch-label {
  color: var(--xidea-text);
}

/* ========================================
   dashboard/members.php: 保留中の招待・役職バッジ
   ======================================== */
[data-theme="dark"] .invitation-item {
  background: #1e293b !important;
  border-color: #475569 !important;
}

[data-theme="dark"] .invitation-item:hover {
  background: #273548 !important;
  border-color: #f59e0b !important;
}

[data-theme="dark"] .role-admin {
  background: #3b1e1e !important;
  color: #fca5a5 !important;
}

[data-theme="dark"] .role-member {
  background: #1e2a3b !important;
  color: #93c5fd !important;
}

/* ========================================
   お知らせバナー（カスタム背景色のダークモード対応）
   ======================================== */
[data-theme="dark"] .announcement-banner {
  background-color: var(--ann-bg-dark) !important;
  color: var(--xidea-text);
}