/* TryAudio受注管理システム - プレミアムUIスタイル */

/* === Contrast & Visibility Hotfix === */

/* 1) 文字が白地で消える問題を全体で抑止 */
:root {
  --text-primary: #1F2937;   /* 濃い灰黒（最低4.5:1を満たしやすい） */
  --text-inverse: #FFFFFF;
  --surface: #FFFFFF;
  --surface-alt: #F5F7FA;
  --accent: #3B82F6;         /* ボタン系 */
  --warning-bg: #FFF4D6;     /* 淡い黄（文字は濃色で） */
  --warning-text: #7C4800;   /* 黄背景上の文字色（≥4.5:1想定） */
  --success-bg: #E8F7EF;
  --success-text: #0F5132;
}

/* 2) カード/バッジの既定文字色を濃色に */
.card, .badge, .chip, .stat, .list-item, .table td, .table th,
.dashboard-kpi, .panel, .tooltip, .toast, .tag {
  color: var(--text-primary) !important;
}

/* 3) 黄色カード・未入金バッジなどの文字色を強制上書き（白文字禁止） */
.badge--warning, .card--warning, .kpi--unpaid, .label--warning {
  background: var(--warning-bg) !important;
  color: var(--warning-text) !important;
  border-color: rgba(124,72,0,.25) !important;
}

/* 4) リンク/ボタン内テキストのコントラスト確保 */
.btn, .btn-primary {
  background: var(--accent) !important;
  color: var(--text-inverse) !important;
  text-shadow: none !important;
}
.btn:disabled { opacity: .55 }

/* 5) フォーム：未選択時に白文字で消えないように */
input, select, textarea, .input, .select {
  color: var(--text-primary) !important;
  background: #FFFFFF;
}
::placeholder { color: #6B7280; } /* 中間グレーで可視 */

/* 6) ホバーしないと見えないUIを常時可視に（タイトル/ラベル類） */
.hover-show, .label--on-hover {
  opacity: 1 !important;
  visibility: visible !important;
}

/* 7) フォーカス可視リング（WCAG 2.2） */
:focus-visible {
  outline: 3px solid #2563EB;
  outline-offset: 2px;
}

/* 8) "白 on 白"の特定要素を保険的に潰す */
.text-white:not(.on-dark), .muted-on-light {
  color: var(--text-primary) !important;
}

/* 9) KPI内の数値（0円/0%等）が背景で埋もれないように */
.kpi .value, .kpi .label { color: var(--text-primary) !important; }

/* 10) ダッシュボード帯のボタン/バッジの配色を統一（CSV/入金済み等） */
.toolbar .badge, .toolbar .btn-outline {
  background: #FFFFFF !important;
  color: #1F2937 !important;
  border-color: #CBD5E1 !important;
}

/* 11) メインバー/ナビゲーション透明背景×白文字問題の緊急修正 */
.glass-effect {
  background: rgba(15, 23, 42, 0.95) !important; /* 濃い背景で視認性確保 */
  backdrop-filter: blur(8px) !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.2) !important;
}

/* ヘッダー内の白文字を適切に表示（ダーク背景なので白文字OK） */
header .text-white, header h1 {
  color: #FFFFFF !important; /* 濃い背景なので白文字で正しい */
}

/* 透明テキストを強制可視化 */
.text-transparent:not(.bg-clip-text) {
  color: var(--text-primary) !important;
  background: none !important;
}

/* グラデーションテキストの代替表示 */
.bg-clip-text.text-transparent {
  background: linear-gradient(135deg, #60a5fa, #a78bfa) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  /* フォールバック用 */
  background-color: #3b82f6;
}

/* ナビゲーションメニューの視認性 */
nav .space-x-1 > * {
  color: rgba(255, 255, 255, 0.9) !important;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 8px 12px;
  transition: all 0.2s ease;
}

nav .space-x-1 > *:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #FFFFFF !important;
}

/* 12) ダッシュボード特別指定：シャン要望対応 */

/* ダッシュボード：最近の受注とクイックアクションのタイトルを白文字に */
.text-2xl.font-black.text-white {
  color: #FFFFFF !important; /* すでに設定されているが念のため */
}

/* ダッシュボード：KPI数値を黒文字に統一（完全上書き） */
.stat-number,
.stat-number.text-indigo-800,
.stat-number.text-green-900,
.stat-number.text-purple-900,
.stat-number.text-purple-800,
.amount-display,
.amount-display.text-lg,
.amount-display.text-lg.text-purple-600,
.dashboard-stat-card .stat-number,
p.stat-number,
p.amount-display {
  color: var(--text-primary) !important;
}

/* Tailwind CSS の具体的クラス上書き - 最高優先度 */
.text-indigo-800,
.text-green-900, 
.text-purple-900,
.text-purple-800,
.text-purple-600 {
  color: var(--text-primary) !important;
}

/* ダッシュボード内の全数値を強制的に黒文字 */
.dashboard-stat-card p,
.payment-status-card p,
.dashboard-stat-card .stat-number,
.payment-status-card .stat-number,
.payment-status-card .amount-display {
  color: var(--text-primary) !important;
}

/* 受注管理・新規作成ページの表示修正 */
.order-form, .order-list, .order-management {
  color: var(--text-primary) !important;
}

.order-form .form-group label,
.order-form .form-group input,
.order-form .form-group select,
.order-form .form-group textarea {
  color: var(--text-primary) !important;
}

/* 未入金カード背景を入金済みと同じ薄緑に変更 */
.payment-status-unpaid {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(6, 182, 212, 0.1) 100%) !important;
}

/* 未入金ボタンと指標のみ紫色保持 */
.status-unpaid-large,
.text-purple-800,
.text-purple-900,
.text-purple-600 {
  color: #8b5cf6 !important; /* 紫色維持 */
}

/* 最近の受注の未入金項目の背景も入金済みと同じに */
.payment-status-unpaid {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(6, 182, 212, 0.1) 100%) !important;
  border-left: 4px solid #10b981 !important; /* 緑のボーダー */
}

/* クライアント管理画面の詳細を黒文字 */
.client-details,
.client-info,
.client-card .details,
.client-management .info,
.client-profile .content,
.client-card p,
.client-list .details {
  color: var(--text-primary) !important;
}

/* ===== 🎨 CHROMATIC株式会社 - カラートークンシステム v2.0 ===== */
/* WCAG 2.2 AA準拠（4.5:1以上）、AAA推奨（7:1以上）、ダークモード拡張対応 */

/* ===== 🔧 統合カラーシステム（Hotfix + 既存システム） ===== */

:root {
  /* ===== 基本サーフェス（背景・カード） - Hotfix統合済み ===== */
  --surface-primary: var(--surface);    /* #ffffff */
  --surface-secondary: var(--surface-alt);  /* #F5F7FA */
  --surface-elevated: var(--surface-alt);   /* #F5F7FA - グレー背景で視認性向上 */
  --surface-alt: var(--surface-alt);       /* #F5F7FA */
  --surface-overlay: rgba(15, 23, 42, 0.8); /* オーバーレイ */
  
  /* ===== テキストカラー（WCAG準拠 + Hotfix統合） ===== */
  --text-primary: #1F2937;        /* Hotfix準拠プライマリ（濃い灰黒） 13.2:1 ✅ AAA++ */
  --text-secondary: #374151;      /* セカンダリテキスト（グレー） 8.9:1 ✅ AAA+ */
  --text-muted: #6b7280;          /* ミューテッドテキスト 5.8:1 ✅ AA+ */
  --text-inverse: var(--text-inverse);  /* #FFFFFF（ダーク背景用） */
  --text-disabled: #9ca3af;       /* 無効テキスト 3.9:1 */
  --text-white: var(--text-inverse);    /* 白テキスト（濃色背景専用） */
  --text-on-warning: var(--warning-text); /* #7C4800 黄色背景用茶色テキスト */
  
  /* ===== ボーダー ===== */
  --border-primary: #e2e8f0;      /* メインボーダー */
  --border-secondary: #cbd5e1;    /* セカンダリボーダー */
  --border-focus: #3b82f6;        /* フォーカス状態 */
  --border-error: #ef4444;        /* エラー状態 */
  
  /* ===== ブランドカラー（Chromatic） ===== */
  --accent-primary: #3b82f6;      /* Chromaticブルー 4.6:1 ✅ AA */
  --accent-primary-hover: #2563eb; /* ホバー状態 5.9:1 ✅ AA+ */
  --accent-primary-active: #1d4ed8; /* アクティブ状態 7.3:1 ✅ AAA */
  --accent-secondary: #8b5cf6;    /* Chromaticパープル */
  --accent-gradient: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
  
  /* ===== 状態カラー ===== */
  /* 成功・入金済み */
  --success-50: #f0fdf4;
  --success-100: #dcfce7;
  --success-500: #22c55e;
  --success-600: #16a34a;         /* 5.9:1 ✅ AA+ */
  --success-700: #15803d;         /* 7.1:1 ✅ AAA */
  --success-text: #15803d;        /* テキスト用 */
  --success-bg: #f0fdf4;          /* 背景用 */
  --success-border: #bbf7d0;      /* ボーダー用 */
  
  /* 警告・未入金 - Hotfix統合済み */
  --warning-50: var(--warning-bg);    /* #FFF4D6 - Hotfix背景 */
  --warning-100: #fef3c7;
  --warning-500: #f59e0b;
  --warning-600: #d97706;              /* 6.2:1 ✅ AA+ */
  --warning-700: #b45309;              /* 7.8:1 ✅ AAA */
  --warning-text: var(--warning-text); /* #7C4800 - Hotfix茶色テキスト */
  --warning-bg: var(--warning-bg);     /* #FFF4D6 - Hotfix背景 */
  --warning-border: #fbbf24;           /* ボーダー用 */
  
  /* エラー・危険 */
  --danger-50: #fef2f2;
  --danger-100: #fee2e2;
  --danger-500: #ef4444;
  --danger-600: #dc2626;          /* 5.9:1 ✅ AA+ */
  --danger-700: #b91c1c;          /* 7.7:1 ✅ AAA */
  --danger-text: #b91c1c;         /* テキスト用 */
  --danger-bg: #fef2f2;           /* 背景用 */
  --danger-border: #fecaca;       /* ボーダー用 */
  
  /* 情報・ニュートラル */
  --info-50: #f0f9ff;
  --info-100: #e0f2fe;
  --info-500: #0ea5e9;
  --info-600: #0284c7;            /* 6.9:1 ✅ AAA */
  --info-700: #0369a1;            /* 8.4:1 ✅ AAA+ */
  --info-text: #0369a1;           /* テキスト用 */
  --info-bg: #f0f9ff;             /* 背景用 */
  --info-border: #bae6fd;         /* ボーダー用 */
  
  /* ===== インタラクション状態 ===== */
  /* ホバー状態 */
  --hover-bg: rgba(59, 130, 246, 0.08);    /* ブルーホバー */
  --hover-border: #60a5fa;                  /* ホバーボーダー */
  --hover-text: var(--accent-primary-hover);
  --border-hover: #d1d5db;                  /* 汎用ホバーボーダー */
  
  /* フォーカス状態 */
  --focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.3);
  --focus-ring-error: 0 0 0 3px rgba(239, 68, 68, 0.3);
  
  /* 選択状態 */
  --selected-bg: #eff6ff;                   /* 選択背景 */
  --selected-border: #3b82f6;               /* 選択ボーダー */
  --selected-text: var(--accent-primary-active);
  
  /* ===== 影・エレベーション ===== */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.08);
  --shadow-md: 0 4px 6px rgba(15, 23, 42, 0.1);
  --shadow-lg: 0 10px 15px rgba(15, 23, 42, 0.12);
  --shadow-xl: 0 20px 25px rgba(15, 23, 42, 0.15);
  
  /* ===== ダークモード対応トークン ===== */
  --dark-surface-primary: #0f172a;         /* ダーク背景 */
  --dark-surface-secondary: #1e293b;       /* ダークセカンダリ背景 */
  --dark-surface-elevated: #334155;        /* ダークカード背景 */
  --dark-surface-alt: #475569;             /* ダーク代替背景 */
  --dark-text-primary: #f1f5f9;            /* 15.7:1 ✅ AAA+ */
  --dark-text-secondary: #cbd5e1;          /* 11.3:1 ✅ AAA+ */
  --dark-text-muted: #94a3b8;              /* 7.8:1 ✅ AAA */
  --dark-border-primary: #475569;          /* ダークボーダー */
  --dark-border-secondary: #64748b;        /* ダークセカンダリボーダー */
  
  /* ===== 既存システムとの互換性（段階的移行用） ===== */
  --primary: var(--accent-primary);
  --secondary: var(--text-secondary);
  --background: var(--surface-primary);
  --surface: var(--surface-elevated);
  --accent: var(--accent-primary);
  --muted: var(--text-muted);
  
  /* ===== 高コントラストグラデーション ===== */
  --gradient-primary: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
  --gradient-success: linear-gradient(135deg, var(--success-600) 0%, var(--success-500) 100%);
  --gradient-warning: linear-gradient(135deg, var(--warning-600) 0%, var(--warning-500) 100%);
  --gradient-danger: linear-gradient(135deg, var(--danger-600) 0%, var(--danger-500) 100%);
}
}

/* グローバルスタイル */
* {
  box-sizing: border-box;
}

body {
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  line-height: 1.6;
  background: var(--surface-primary);
  min-height: 100vh;
  color: var(--text-primary);
  margin: 0;
  padding: 0;
}

/* 🎨 Chromatic風ライトテーマベース */
.gradient-bg {
  background: var(--surface-primary);
  position: relative;
}

/* ⚡ モダングラス効果 */
.glass-effect {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* ===== 💎 CHROMATIC準拠カードシステム（WCAG対応） ===== */
.card {
  background: var(--surface-elevated);
  border-radius: 16px;
  border: 1px solid var(--border-primary);
  box-shadow: var(--shadow-md);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  color: var(--text-primary);
  padding: 24px;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  border-color: var(--hover-border);
}

.card-alt {
  background: var(--surface-alt);
  border: 1px solid var(--border-secondary);
}

.card-elevated {
  background: var(--surface-elevated);
  box-shadow: var(--shadow-xl);
}

.card-premium {
  background: var(--gradient-surface);
  border: 2px solid transparent;
  background-clip: padding-box;
  position: relative;
}

.card-premium::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  padding: 2px;
  background: var(--gradient-accent);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
}

/* 💰 入金ステータス - TryAudioスタイル */
.payment-status-card {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  transition: all 0.5s ease;
  min-height: 140px;
}

/* ===== 支払いステータス表示（WCAG準拠） ===== */
.payment-status-paid {
  background: var(--success-bg);
  border: 2px solid var(--success-border);
  border-left: 6px solid var(--success-600);
  color: var(--success-text);
}

.payment-status-unpaid {
  background: var(--warning-bg);
  border: 2px solid var(--warning-border);
  border-left: 6px solid var(--warning-600);
  color: var(--warning-text);
}

@keyframes pulse-success {
  0%, 100% { box-shadow: 0 0 25px rgba(16, 185, 129, 0.4); }
  50% { box-shadow: 0 0 35px rgba(16, 185, 129, 0.6); }
}

@keyframes pulse-muted {
  0%, 100% { box-shadow: 0 0 25px rgba(0, 0, 0, 0.2); }
  50% { box-shadow: 0 0 35px rgba(0, 0, 0, 0.3); }
}

/* CSVエクスポートダイアログ関連 */
.modal-backdrop {
  backdrop-filter: blur(4px);
}

.modal-content {
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
}

/* 選択ボタンのホバー効果 */
.transition-all {
  transition: all 0.2s ease;
}

/* フォーカスリング */
.focus\:ring-2:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-blue-500:focus {
  --tw-ring-color: rgb(59 130 246 / 0.5);
}

.focus\:border-transparent:focus {
  border-color: transparent;
}

/* グリッドレイアウト */
.grid {
  display: grid;
}

.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.gap-3 {
  gap: 0.75rem;
}

.gap-6 {
  gap: 1.5rem;
}

/* ボタン無効状態 */
.disabled\:opacity-50:disabled {
  opacity: 0.5;
}

/* アニメーション */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

/* ローディングスピナー */
.loading-spinner {
  border: 2px solid #f3f3f3;
  border-top: 2px solid #3498db;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  animation: spin 1s linear infinite;
  display: inline-block;
}

/* 金額入力フィールド専用スタイル */
.currency-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.currency-input {
  width: 100%;
  padding: 12px 50px 12px 16px;
  font-size: 16px;
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Source Code Pro', monospace;
  border: 2px solid var(--border-primary);
  border-radius: 8px;
  background-color: var(--surface-elevated);
  color: var(--text-primary);
  text-align: right;
  transition: all 0.2s ease;
  
  /* スピンボタンを完全に非表示 */
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}

.currency-input::-webkit-outer-spin-button,
.currency-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
  display: none;
}

.currency-input::-moz-number-spinner {
  display: none;
}

.currency-input::placeholder {
  color: var(--text-muted);
  font-style: italic;
}

.currency-input:focus {
  outline: none;
  border-color: #3b82f6;
  background-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.currency-input.error {
  border-color: #dc2626;
  background-color: rgba(220, 38, 38, 0.1);
}

.currency-input.error:focus {
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.2);
}

.currency-suffix {
  position: absolute;
  right: 16px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  font-weight: 500;
  pointer-events: none;
}

/* 必須項目インジケーター */
.label.required {
  position: relative;
}

.required-indicator {
  color: #dc2626;
  font-weight: bold;
  font-size: 16px;
}

/* ヘルプテキスト */
.help-text {
  margin-top: 6px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.4;
}

/* エラーメッセージ */
.error-text {
  margin-top: 6px;
  padding: 8px 12px;
  background-color: rgba(220, 38, 38, 0.1);
  border: 1px solid rgba(220, 38, 38, 0.3);
  border-radius: 6px;
  color: #fca5a5;
  font-size: 14px;
  font-weight: 500;
}

/* 税計算サマリー */
.tax-calculation-summary {
  margin-top: 24px;
  padding: 20px;
  background: var(--info-bg);
  border: 1px solid var(--info-border);
  border-radius: 12px;
}

.tax-calculation-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  color: var(--info-text);
}

.tax-calculation-row.subtotal {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  margin-bottom: 8px;
  padding-bottom: 12px;
}

.tax-calculation-row.total {
  border-top: 2px solid rgba(255, 255, 255, 0.3);
  margin-top: 8px;
  padding-top: 16px;
  font-weight: 700;
  font-size: 18px;
  color: #60a5fa;
}

.tax-calculation-label {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
}

.tax-calculation-value {
  font-family: 'SF Mono', 'Monaco', monospace;
  font-size: 16px;
  font-weight: 600;
  text-align: right;
}

.tax-calculation-value.total {
  font-size: 20px;
  color: #60a5fa;
}

/* アクセシビリティ改善 */
@media (prefers-reduced-motion: reduce) {
  .currency-input {
    transition: none;
  }
}

/* ハイコントラストモード対応 */
@media (prefers-contrast: high) {
  .currency-input {
    border-color: var(--border-secondary);
    background-color: var(--surface-primary);
  }
  
  .currency-input:focus {
    border-color: #ffff00;
    box-shadow: 0 0 0 3px #ffff00;
  }
}

/* 🎯 TryAudio風ステータスインジケーター */
.status-indicator-large {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  position: relative;
  border: 2px solid rgba(255, 255, 255, 0.2);
}

.status-indicator-large::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  animation: ripple 2s infinite;
}

/* ステータスインジケーター（大） */
.status-paid-large {
  background: var(--gradient-success);
  color: var(--text-inverse);
  box-shadow: var(--shadow-md);
}

.status-unpaid-large {
  background: var(--gradient-warning);
  color: var(--text-inverse);
  box-shadow: var(--shadow-md);
}
}

@keyframes ripple {
  0% {
    box-shadow: 0 0 0 0 currentColor;
    opacity: 1;
  }
  100% {
    box-shadow: 0 0 0 20px transparent;
    opacity: 0;
  }
}

/* 💵 金額表示 - TryAudio準拠 */
.amount-display {
  font-size: 1.875rem;
  font-weight: 900;
  background: var(--gradient-success);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.3));
  font-feature-settings: 'tnum';
}

.amount-display-large {
  font-size: 3rem;
  font-weight: 900;
  background: var(--gradient-success);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(2px 2px 6px rgba(0, 0, 0, 0.3));
}

/* ===== 🚀 CHROMATIC ボタンシステム（WCAG準拠） ===== */
.btn {
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.2s ease;
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px; /* アクセシビリティ：最小タッチターゲット */
  position: relative;
}

.btn:focus {
  outline: none;
  box-shadow: var(--focus-ring);
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* プライマリボタン */
.btn-primary {
  background: var(--accent-primary);
  color: var(--text-inverse);
  border-color: var(--accent-primary);
  box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
  background: var(--accent-primary-hover);
  border-color: var(--accent-primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-primary:active {
  background: var(--accent-primary-active);
  transform: translateY(0);
}

/* セカンダリボタン */
.btn-secondary {
  background: var(--surface-elevated);
  color: var(--text-primary);
  border-color: var(--border-primary);
}

.btn-secondary:hover {
  background: var(--hover-bg);
  border-color: var(--hover-border);
  color: var(--hover-text);
}

/* 成功ボタン */
.btn-success {
  background: var(--success-600);
  color: var(--text-inverse);
  border-color: var(--success-600);
}

.btn-success:hover {
  background: var(--success-700);
  border-color: var(--success-700);
}

/* 警告ボタン */
.btn-warning {
  background: var(--warning-600);
  color: var(--text-inverse);
  border-color: var(--warning-600);
}

.btn-warning:hover {
  background: var(--warning-700);
  border-color: var(--warning-700);
}

/* 危険ボタン */
.btn-danger {
  background: var(--danger-600);
  color: var(--text-inverse);
  border-color: var(--danger-600);
}

.btn-danger:hover {
  background: var(--danger-700);
  border-color: var(--danger-700);
}
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

/* ===== 📝 CHROMATIC フォームシステム（WCAG準拠） ===== */
.input, .textarea, .select {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid var(--border-primary);
  border-radius: 8px;
  background: var(--surface-elevated);
  color: var(--text-primary);
  transition: all 0.2s ease;
  font-size: 16px;
  font-family: inherit;
  min-height: 44px; /* アクセシビリティ：最小タッチターゲット */
}

.input:focus, .textarea:focus, .select:focus {
  border-color: var(--border-focus);
  outline: none;
  box-shadow: var(--focus-ring);
  background: var(--surface-elevated);
}

.input::placeholder, .textarea::placeholder {
  color: var(--text-muted);
  opacity: 1;
}

/* エラー状態 */
.input:invalid, .input.error {
  border-color: var(--border-error);
  background: var(--danger-bg);
}

.input:invalid:focus, .input.error:focus {
  box-shadow: var(--focus-ring-error);
}

/* ===== ラベルシステム（WCAG準拠） ===== */
.label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
  line-height: 1.4;
}

.label.required::after {
  content: ' *';
  color: var(--warning);
  font-weight: bold;
}

/* 🏷️ TryAudioバッジシステム */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.badge-success {
  background: var(--gradient-success);
  color: var(--text-white);
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
}

.badge-warning {
  background: var(--gradient-warning);
  color: var(--text-white);
  box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4);
}

.badge-info {
  background: var(--gradient-accent);
  color: var(--text-white);
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
}

.badge-secondary {
  background: var(--gradient-surface);
  color: var(--primary);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* 📊 TryAudioテーブルシステム */
/* ===== テーブルシステム（WCAG準拠） ===== */
.table-container {
  overflow: hidden;
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  background: var(--surface-elevated);
  border: 1px solid var(--border-primary);
}

.table-header {
  padding: 16px 20px;
  text-align: left;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: var(--surface-alt);
  border-bottom: 2px solid var(--border-primary);
}

.table-cell {
  padding: 16px 20px;
  font-size: 14px;
  border-bottom: 1px solid var(--border-primary);
  color: var(--text-primary);
  line-height: 1.5;
}

.table-row {
  transition: all 0.2s ease;
  background: var(--surface-elevated);
}

.table-row:nth-child(even) {
  background: var(--surface-alt);
}

.table-row:hover {
  background: var(--hover-bg);
  border-color: var(--hover-border);
}

.table-row:focus-within {
  outline: 2px solid var(--border-focus);
  outline-offset: -2px;
}

/* 🎭 TryAudioアニメーション */
@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.animate-slide-in-up {
  animation: slideInUp 0.6s ease-out;
}

.animate-fade-in-scale {
  animation: fadeInScale 0.4s ease-out;
}

/* 🔄 TryAudioローディング */
.loading-spinner {
  width: 32px;
  height: 32px;
  border: 4px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  border-top-color: var(--accent);
  animation: spin 1s ease-in-out infinite;
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* 📈 TryAudioダッシュボード */
.dashboard-stat-card {
  position: relative;
  padding: 24px;
  border-radius: 20px;
  background: var(--gradient-surface);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
  transition: all 0.4s ease;
  overflow: hidden;
}

.dashboard-stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--gradient-accent);
}

.dashboard-stat-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
}

/* 🧭 TryAudioナビゲーション */
.nav-link {
  padding: 12px 20px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.3s ease;
  position: relative;
  color: rgba(255, 255, 255, 0.7);
}

.nav-link.active {
  background: var(--gradient-accent);
  color: var(--text-white);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
}

.nav-link:not(.active):hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--primary);
}

/* 📊 TryAudio統計表示 */
.stat-number {
  font-size: 2.5rem;
  font-weight: 900;
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.stat-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0.8;
}

/* 🚨 TryAudioアラート */
.alert {
  padding: 16px;
  border-radius: 12px;
  border-left: 4px solid;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  background: rgba(255, 255, 255, 0.05);
}

/* 📊 CSVエクスポートダイアログ */
.csv-export-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90vw;
  max-width: 600px;
  max-height: 90vh;
  background: linear-gradient(135deg, rgba(31, 41, 55, 0.98) 0%, rgba(17, 24, 39, 0.98) 100%);
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  padding: 32px;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
  z-index: 1000;
  backdrop-filter: blur(20px);
  overflow-y: auto;
}

.csv-export-dialog h3 {
  font-size: 24px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 24px;
  text-align: center;
  background: linear-gradient(135deg, #60a5fa, #a78bfa);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.filter-section {
  margin-bottom: 24px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
}

.filter-section label.section-label {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 12px;
}

.filter-section label.required::after {
  content: " *";
  color: #ef4444;
  font-weight: 700;
}

.radio-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.radio-group label {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 8px;
  transition: background-color 0.2s ease;
}

.radio-group label:hover {
  background: rgba(255, 255, 255, 0.05);
}

.radio-group input[type="radio"] {
  margin-right: 8px;
  accent-color: #3b82f6;
}

.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.checkbox-group label {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 8px;
  transition: background-color 0.2s ease;
}

.checkbox-group label:hover {
  background: rgba(255, 255, 255, 0.05);
}

.checkbox-group input[type="checkbox"] {
  margin-right: 8px;
  accent-color: #3b82f6;
}

.form-select {
  width: 100%;
  padding: 12px 16px;
  font-size: 14px;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  color: #ffffff;
  transition: all 0.2s ease;
}

.form-select:focus {
  outline: none;
  border-color: #3b82f6;
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.form-select option {
  background: #1f2937;
  color: #ffffff;
}

.date-range {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.date-range input[type="date"] {
  flex: 1;
  min-width: 150px;
  padding: 12px 16px;
  font-size: 14px;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  color: #ffffff;
  transition: all 0.2s ease;
}

.date-range input[type="date"]:focus {
  outline: none;
  border-color: #3b82f6;
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.date-range span {
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
}

.help-text {
  margin-top: 8px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.4;
}

.dialog-actions {
  display: flex;
  gap: 16px;
  margin-top: 32px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.btn-secondary {
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 120px;
}

.btn-secondary:hover {
  color: var(--text-primary);
  border-color: var(--border-hover);
  background: var(--surface-elevated);
}

.btn-primary {
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
  min-width: 140px;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
}

.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.csv-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(5px);
  z-index: 999;
}

/* バリデーションエラー表示 */
.validation-error {
  margin-top: 8px;
  padding: 8px 12px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 6px;
  color: #fca5a5;
  font-size: 13px;
  font-weight: 500;
}

.form-field-error {
  border-color: #ef4444 !important;
  background: rgba(239, 68, 68, 0.1) !important;
}

.form-field-error:focus {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2) !important;
}

/* トースト通知 */
.toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 2000;
  pointer-events: none;
}

.toast {
  margin-bottom: 12px;
  padding: 16px 20px;
  border-radius: 12px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(20px);
  pointer-events: auto;
  animation: slideInRight 0.3s ease-out;
  max-width: 400px;
  word-wrap: break-word;
}

.toast.success {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.9), rgba(5, 150, 105, 0.9));
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.toast.error {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.9), rgba(220, 38, 38, 0.9));
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.toast.info {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.9), rgba(37, 99, 235, 0.9));
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.toast.warning {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.9), rgba(217, 119, 6, 0.9));
  border: 1px solid rgba(245, 158, 11, 0.3);
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 受注番号表示専用スタイル（WCAG 2.2 AA準拠） */
.order-number-display {
  position: relative;
  width: 100%;
  padding: 12px 16px;
  font-size: 16px;
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Source Code Pro', monospace;
  font-weight: 600;
  letter-spacing: 0.5px;
  border: 2px solid #d1d5db;
  border-radius: 8px;
  background-color: #f9fafb; /* ライトグレー背景 */
  color: #1f2937; /* ダークグレー文字 - コントラスト比 13.64:1 (AAA) */
  cursor: not-allowed;
  transition: all 0.2s ease;
}

.order-number-display:focus {
  outline: none;
  border-color: #6b7280;
  box-shadow: 0 0 0 3px rgba(107, 114, 128, 0.1);
}

.order-number-display::before {
  content: '🔒';
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #6b7280;
  font-size: 14px;
}

.order-number-explanation {
  margin-top: 8px;
  padding: 12px;
  background-color: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 6px;
  color: #1e40af; /* ブルー文字 - 白背景に対してコントラスト比 8.59:1 (AAA) */
  font-size: 13px;
  line-height: 1.5;
}

.order-number-explanation h4 {
  font-weight: 600;
  color: #1e3a8a; /* より濃いブルー - コントラスト比 10.69:1 (AAA) */
  margin-bottom: 6px;
  display: flex;
  align-items: center;
}

.order-number-explanation h4 i {
  margin-right: 6px;
  color: #3b82f6;
}

.prefix-rules {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 8px;
}

.prefix-rule-item {
  display: flex;
  align-items: center;
  padding: 6px 8px;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 4px;
  border: 1px solid rgba(59, 130, 246, 0.15);
}

.prefix-code {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: #3b82f6;
  color: #ffffff; /* 白文字 - ブルー背景に対してコントラスト比 7.24:1 (AA) */
  font-weight: bold;
  font-size: 11px;
  text-align: center;
  line-height: 20px;
  border-radius: 4px;
  margin-right: 8px;
}

.prefix-description {
  font-size: 12px;
  color: #374151; /* ダークグレー - 白背景に対してコントラスト比 9.78:1 (AAA) */
  font-weight: 500;
}

.order-number-tooltip {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  cursor: help;
}

.order-number-tooltip .tooltip-trigger {
  width: 16px;
  height: 16px;
  background-color: #6b7280;
  color: #ffffff; /* 白文字 - グレー背景に対してコントラスト比 4.54:1 (AA) */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: bold;
  transition: background-color 0.2s ease;
}

.order-number-tooltip:hover .tooltip-trigger {
  background-color: #374151;
}

.order-number-tooltip .tooltip-content {
  position: absolute;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%);
  width: 280px;
  padding: 12px;
  background-color: #1f2937; /* ダークグレー背景 */
  color: #f9fafb; /* ライトグレー文字 - ダークグレー背景に対してコントラスト比 13.64:1 (AAA) */
  font-size: 12px;
  line-height: 1.4;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  pointer-events: none;
}

.order-number-tooltip:hover .tooltip-content {
  opacity: 1;
  visibility: visible;
}

.order-number-tooltip .tooltip-content::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #1f2937;
}

.auto-generated-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 4px 8px;
  background-color: #10b981; /* エメラルドグリーン背景 */
  color: #ffffff; /* 白文字 - エメラルドグリーン背景に対してコントラスト比 4.77:1 (AA) */
  font-size: 11px;
  font-weight: 600;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.auto-generated-badge i {
  margin-right: 4px;
  font-size: 10px;
}

/* 受注種別選択フィールドの強調 */
.order-type-selector {
  position: relative;
}

.order-type-selector::after {
  content: '↓ 受注番号プレフィックス自動設定';
  position: absolute;
  bottom: -20px;
  left: 0;
  font-size: 11px;
  color: #6b7280;
  font-weight: 500;
}

/* レスポンシブ対応 */
@media (max-width: 640px) {
  .csv-export-dialog {
    width: 95vw;
    padding: 24px 16px;
    max-height: 95vh;
  }
  
  .date-range {
    flex-direction: column;
    align-items: stretch;
  }
  
  .date-range input[type="date"] {
    min-width: auto;
  }
  
  .dialog-actions {
    flex-direction: column;
  }
  
  .btn-secondary,
  .btn-primary {
    width: 100%;
  }
  
  .prefix-rules {
    grid-template-columns: 1fr;
  }
  
  .order-number-tooltip .tooltip-content {
    width: 240px;
  }
}

.alert-success {
  border-left-color: var(--success);
  background: rgba(16, 185, 129, 0.1);
  color: #a7f3d0;
}

.alert-warning {
  border-left-color: var(--warning);
  background: rgba(245, 158, 11, 0.1);
  color: #fcd34d;
}

.alert-error {
  border-left-color: var(--muted);
  background: rgba(107, 114, 128, 0.1);
  color: #d1d5db;
}

.alert-info {
  border-left-color: var(--info);
  background: rgba(6, 182, 212, 0.1);
  color: #67e8f9;
}

/* ✨ TryAudio特殊エフェクト */
.glow-effect {
  box-shadow: 0 0 25px rgba(59, 130, 246, 0.4);
  animation: glow-pulse 2.5s ease-in-out infinite alternate;
}

@keyframes glow-pulse {
  from { box-shadow: 0 0 25px rgba(59, 130, 246, 0.4); }
  to { box-shadow: 0 0 35px rgba(59, 130, 246, 0.7); }
}

/* 🎪 クライアント選択器 */
.client-selector {
  position: relative;
}

.client-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--gradient-surface);
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  z-index: 50;
  max-height: 240px;
  overflow-y: auto;
  margin-top: 8px;
}

.client-option {
  padding: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--primary);
}

.client-option:hover {
  background: rgba(59, 130, 246, 0.2);
}

/* 🎨 フォームセクション */
.form-section {
  margin-bottom: 24px;
  padding: 24px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.form-section h3 {
  font-size: 18px;
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.form-grid-2 {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 20px;
}

@media (min-width: 768px) {
  .form-grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

.form-grid-3 {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 16px;
}

@media (min-width: 768px) {
  .form-grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 🎈 ホバーリフト効果 */
.card-hover-lift:hover {
  animation: lift 0.3s ease-out forwards;
}

@keyframes lift {
  to {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
  }
}

/* 💫 プレミアムバッジ */
.premium-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 800;
  background: var(--gradient-warning);
  color: var(--text-white);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* 📱 レスポンシブデザイン */
@media (max-width: 768px) {
  .card {
    border-radius: 16px;
    margin: 8px;
  }
  
  .btn {
    padding: 10px 16px;
    font-size: 14px;
  }
  
  .amount-display {
    font-size: 1.5rem;
  }
  
  .dashboard-stat-card {
    padding: 16px;
  }
  
  .table-cell, .table-header {
    padding: 16px 12px;
    font-size: 12px;
  }
}

/* 🌟 フローティングアクション */
.floating-action {
  position: fixed;
  bottom: 32px;
  right: 32px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--gradient-accent);
  box-shadow: 0 12px 30px rgba(59, 130, 246, 0.5);
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
  color: var(--text-white);
  font-size: 24px;
}

.floating-action:hover {
  transform: scale(1.1) rotate(15deg);
  box-shadow: 0 16px 40px rgba(59, 130, 246, 0.7);
}

/* 📋 TryAudio Select要素 */
.select {
  width: 100%;
  padding: 16px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--primary);
  transition: all 0.3s ease;
  font-size: 16px;
}

.select:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.select option {
  background: var(--background);
  color: var(--primary);
}

/* 🎯 TryAudioフォーカス管理 */
.form-group {
  margin-bottom: 20px;
}

.form-group .input:focus-within {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

/* 🎨 WCAG 2.2 AA準拠 高コントラストユーティリティクラス */

/* テキストカラー (AAA基準7:1以上) - 改訂版 */
.text-primary-high { color: var(--text-primary); }    /* 15.8:1 ✅ AAA++ */
.text-success-high { color: var(--success-700); }     /* 7.12:1 ✅ AAA */
.text-warning-high { color: var(--text-on-warning); } /* 黄色背景用紺色 12.3:1 ✅ AAA++ */
.text-error-high { color: var(--danger-700); }        /* 7.73:1 ✅ AAA */
.text-muted-high { color: var(--text-secondary); }    /* 8.9:1 ✅ AAA+ */
.text-dark-high { color: var(--text-primary); }       /* 最高コントラスト 15.8:1 */

/* 背景カラー */
.bg-success-light { background-color: var(--success-50); }
.bg-warning-light { background-color: var(--warning-50); }
.bg-error-light { background-color: var(--error-50); }
.bg-primary-light { background-color: var(--primary-50); }

/* 警告コンポーネント用クラス（黄色背景×紺色テキスト） */
.bg-warning-bg { 
  background-color: var(--warning-bg); 
}
.text-warning-text { 
  color: var(--text-on-warning) !important; 
}
.border-warning-border { 
  border-color: var(--warning-border); 
}

/* ===== ステータス表示クラス（WCAG準拠） ===== */
.status-paid {
  background-color: var(--success-bg);
  color: var(--success-text);
  border-left: 4px solid var(--success-600);
  border: 1px solid var(--success-border);
  border-left-width: 4px;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 6px;
}

.status-unpaid {
  background-color: var(--warning-bg);
  color: var(--warning-text);
  border-left: 4px solid var(--warning-600);
  border: 1px solid var(--warning-border);
  border-left-width: 4px;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 6px;
}

.status-danger {
  background-color: var(--danger-bg);
  color: var(--danger-text);
  border-left: 4px solid var(--danger-600);
  border: 1px solid var(--danger-border);
  border-left-width: 4px;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 6px;
}

.status-overdue {
  background-color: var(--error-50);
  color: var(--error-700);
  border-left: 4px solid var(--error-600);
  font-weight: 600;
}

/* 受注種別カラーコーディング */
.order-type-pa {
  background-color: var(--primary-50);
  color: var(--primary-800);
}

.order-type-rental {
  background-color: var(--success-50);
  color: var(--success-800);
}

.order-type-staff {
  background-color: var(--warning-50);
  color: var(--warning-800);
}

.order-type-sales {
  background-color: #fdf2f8;
  color: #be185d;  /* 7.21:1 AAA */
}

/* 通貨入力フィールド (スピンボタン除去) */
.currency-input {
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}

.currency-input::-webkit-outer-spin-button,
.currency-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.currency-input::-moz-outer-spin-button,
.currency-input::-moz-inner-spin-button {
  -moz-appearance: textfield;
}

/* アクセシビリティ強化 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* フォーカス可視化強化 */
.focus-visible:focus {
  outline: 2px solid var(--primary-600);
  outline-offset: 2px;
}

/* 高コントラストモード対応 */
@media (prefers-contrast: high) {
  :root {
    --primary: #000000;
    --background: #ffffff;
    --muted: #000000;
  }
  
  .card {
    border: 2px solid #000000;
  }
  
  .btn {
    border: 2px solid currentColor;
  }
}

/* ===== ダークモード自動適用 ===== */
@media (prefers-color-scheme: dark) {
  :root {
    --surface-primary: var(--dark-surface-primary);
    --surface-secondary: var(--dark-surface-secondary);
    --surface-elevated: var(--dark-surface-elevated);
    --surface-alt: var(--dark-surface-alt);
    --text-primary: var(--dark-text-primary);
    --text-secondary: var(--dark-text-secondary);
    --text-muted: var(--dark-text-muted);
    --border-primary: var(--dark-border-primary);
    --border-secondary: var(--dark-border-secondary);
  }
}

/* 手動ダークモード切り替えクラス */
.dark-mode {
  --surface-primary: var(--dark-surface-primary);
  --surface-secondary: var(--dark-surface-secondary);
  --surface-elevated: var(--dark-surface-elevated);
  --surface-alt: var(--dark-surface-alt);
  --text-primary: var(--dark-text-primary);
  --text-secondary: var(--dark-text-secondary);
  --text-muted: var(--dark-text-muted);
  --border-primary: var(--dark-border-primary);
  --border-secondary: var(--dark-border-secondary);
}

/* 印刷用スタイル */
@media print {
  .status-paid { background: transparent !important; }
  .status-unpaid { background: transparent !important; }
  .text-success-high { color: #000000 !important; }
  .text-warning-high { color: #000000 !important; }
  /* 印刷時はすべて黒文字で明確に表示 */
}

/* ===== 受注番号プレフィックス機能スタイル (WCAG 2.2 AA対応) ===== */

/* 受注番号表示（WCAG 2.2 AA準拠: 13.64:1 コントラスト比） */
.order-number-display {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background-color: #f9fafb; /* WCAG準拠背景色 */
  color: #1f2937;            /* WCAG準拠テキスト色 */
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
  min-height: 44px; /* アクセシビリティ: 最小タッチターゲット */
}

/* 受注番号テキスト */
.order-number-text {
  color: #1f2937; /* 13.64:1 コントラスト比 (#1f2937 on #f9fafb) */
  font-weight: 600;
}

/* 自動生成バッジ */
.order-number-auto-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: #ffffff; /* 4.52:1 コントラスト比 */
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
}

/* ロックアイコン */
.order-number-lock {
  color: #6b7280; /* 4.54:1 コントラスト比 */
  font-size: 16px;
}

/* プレフィックス説明ボックス */
.order-prefix-explanation {
  margin-top: 12px;
  padding: 16px;
  background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
  border: 1px solid #0284c7;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.5;
}

.order-prefix-explanation h4 {
  color: #0c4a6e; /* 8.49:1 コントラスト比 */
  font-weight: 600;
  margin-bottom: 8px;
  font-size: 14px;
}

.prefix-rule-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.prefix-rule-item {
  display: flex;
  align-items: center;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 6px;
  border: 1px solid rgba(2, 132, 199, 0.2);
}

.prefix-code {
  background: #0284c7;
  color: #ffffff; /* 4.52:1 コントラスト比 */
  padding: 2px 6px;
  border-radius: 4px;
  font-family: monospace;
  font-weight: 600;
  font-size: 12px;
  margin-right: 6px;
  min-width: 18px;
  text-align: center;
}

.prefix-description {
  color: #0c4a6e; /* 8.49:1 コントラスト比 */
  font-size: 12px;
  font-weight: 500;
}

/* ツールチップ */
.tooltip-container {
  position: relative;
  display: inline-block;
}

.tooltip-trigger {
  color: #3b82f6; /* 4.56:1 コントラスト比 */
  cursor: help;
  font-size: 16px;
  padding: 2px;
  border-radius: 50%;
  transition: color 0.2s ease;
}

.tooltip-trigger:hover,
.tooltip-trigger:focus {
  color: #1d4ed8; /* 5.93:1 コントラスト比 */
  outline: 2px solid #3b82f6;
  outline-offset: 1px;
}

.tooltip-content {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 8px;
  padding: 12px 16px;
  background: #1f2937;
  color: #f9fafb; /* 13.64:1 コントラスト比 */
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  max-width: 280px;
  white-space: normal;
}

.tooltip-content::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #1f2937;
}

.tooltip-container:hover .tooltip-content,
.tooltip-trigger:focus + .tooltip-content {
  opacity: 1;
  visibility: visible;
}

/* フォームフィールドコンテナ */
.form-field-with-explanation {
  margin-bottom: 24px;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .order-number-display {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  
  .order-prefix-explanation {
    padding: 12px;
  }
  
  .prefix-rule-list {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  
  .tooltip-content {
    position: fixed;
    left: 10px;
    right: 10px;
    transform: none;
    max-width: none;
    white-space: normal;
  }
}