/* ============================================
   A-POOL Sales Analysis - Custom Styles
   ブルー基調・オフィシャルデザイン
   ============================================ */

:root {
  --a-blue-950: #172554;
  --a-blue-900: #1e3a8a;
  --a-blue-800: #1e40af;
  --a-blue-700: #1d4ed8;
  --a-blue-600: #2563eb;
  --a-blue-500: #3b82f6;
}

* {
  -webkit-tap-highlight-color: transparent;
}

body {
  -webkit-font-smoothing: antialiased;
}

/* スクロールバー */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #93c5fd; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #60a5fa; }

/* カードシャドウ */
.card-shadow {
  box-shadow: 0 1px 3px 0 rgba(30, 58, 138, 0.08), 0 1px 2px -1px rgba(30, 58, 138, 0.08);
}
.card-shadow-lg {
  box-shadow: 0 4px 12px -2px rgba(30, 58, 138, 0.12), 0 2px 6px -2px rgba(30, 58, 138, 0.08);
}

/* プログレスバー アニメーション */
.progress-bar-fill {
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* フェードイン */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fadeIn 0.35s ease-out; }

/* ローディングスピナー */
@keyframes spin { to { transform: rotate(360deg); } }
.spinner {
  border: 3px solid #dbeafe;
  border-top-color: #2563eb;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  animation: spin 0.8s linear infinite;
}

/* サイドバーナビゲーション アクティブ */
.nav-item.active {
  background: linear-gradient(135deg, #1d4ed8, #1e40af);
  color: white;
}
.nav-item.active i { color: white; }

/* モーダル背景 */
.modal-backdrop {
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(2px);
}

/* テーブルホバー */
.table-row-hover:hover {
  background-color: #eff6ff;
}

/* バッジ */
.badge-admin {
  background: linear-gradient(135deg, #1e3a8a, #1d4ed8);
}

/* ロゴグラデーション */
.logo-gradient {
  background: linear-gradient(135deg, #1e40af 0%, #2563eb 50%, #3b82f6 100%);
}

/* モバイル対応: タップターゲット確保 */
button, .clickable {
  touch-action: manipulation;
}

@media (max-width: 767px) {
  .mobile-hide { display: none; }
}
@media (min-width: 768px) {
  .desktop-hide { display: none; }
}