/* ==========================================================================
   統一ボタンシステム - ベストプラクティス版
   全サイト（フロントエンド・管理画面）で統一されたボタンコンポーネント
   ========================================================================== */

/* レイヤーシステムを使わずに直接定義（優先度確保） */
  
  /* =================================
     ベースボタン
     ================================= */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    padding: var(--btn-padding);
    min-height: var(--btn-height);
    border-radius: var(--btn-border-radius);
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: var(--btn-font-weight);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: var(--transition-normal);
    border: 1px solid var(--gray-border);
    background: var(--white);
    color: var(--gray-dark);
    user-select: none;
  }

  .btn:focus-visible {
    outline: 2px solid var(--primary-blue);
    outline-offset: 2px;
  }

  .btn:disabled,
  .btn[aria-disabled="true"] {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
    transform: none;
  }

  /* =================================
     ボタンバリエーション
     ================================= */

  /* プライマリ */
  .btn-primary {
    background: var(--primary-blue);
    color: var(--white);
    border-color: var(--primary-blue);
    font-weight: var(--font-weight-semibold);
    box-shadow: var(--shadow-md);
  }

  .btn-primary:hover:not(:disabled) {
    background: var(--primary-blue-dark);
    border-color: var(--primary-blue-dark);
    transform: translateY(-1px);
    box-shadow: var(--shadow-lg);
  }

  /* セカンダリ */
  .btn-secondary {
    background: var(--gray-light);
    color: var(--gray-dark);
    border-color: var(--gray-border);
  }

  .btn-secondary:hover:not(:disabled) {
    background: var(--gray-medium);
    color: var(--white);
    border-color: var(--gray-medium);
  }

  /* 成功 */
  .btn-success {
    background: var(--success);
    color: var(--white);
    border-color: var(--success);
  }

  .btn-success:hover:not(:disabled) {
    background: var(--success-dark);
    border-color: var(--success-dark);
    transform: translateY(-1px);
  }

  /* 警告 */
  .btn-warning {
    background: var(--warning);
    color: var(--white);
    border-color: var(--warning);
  }

  .btn-warning:hover:not(:disabled) {
    background: var(--warning-dark);
    border-color: var(--warning-dark);
    transform: translateY(-1px);
  }

  /* 危険 */
  .btn-danger {
    background: var(--danger);
    color: var(--white);
    border-color: var(--danger);
  }

  .btn-danger:hover:not(:disabled) {
    background: var(--danger-dark);
    border-color: var(--danger-dark);
    transform: translateY(-1px);
  }

  /* アウトライン */
  .btn-outline {
    background: transparent;
    color: var(--primary-blue);
    border-color: var(--primary-blue);
    border-width: 2px;
  }

  .btn-outline:hover:not(:disabled) {
    background: var(--primary-blue);
    color: var(--white);
  }

  /* =================================
     サイズバリエーション
     ================================= */
  .btn-sm {
    padding: 0.375rem 0.75rem;
    font-size: var(--font-size-xs);
    min-height: 32px;
    gap: 0.25rem;
  }

  .btn-lg {
    padding: 0.875rem 1.5rem;
    font-size: var(--font-size-lg);
    min-height: 56px;
    gap: 0.75rem;
  }

  /* =================================
     特殊ボタン
     ================================= */

  /* アイコンボタン */
  .btn-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    padding: 0;
    border-radius: var(--radius-md);
    font-size: 1rem;
  }

  .btn-icon.btn-sm {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    font-size: 0.875rem;
  }

  .btn-icon.btn-lg {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    font-size: 1.125rem;
  }

  /* ログインボタン（特殊デザイン） */
  .login-btn {
    background: var(--pink);
    color: var(--white);
    padding: 16px 36px;
    border: none;
    border-radius: var(--radius-full);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-heavy);
    min-height: 56px;
    box-shadow: 0 8px 25px rgba(233, 30, 99, 0.3);
    transition: all 0.3s ease;
  }

  .login-btn:hover:not(:disabled) {
    background: var(--pink-dark);
    box-shadow: 0 12px 30px rgba(233, 30, 99, 0.4);
    transform: translateY(-2px);
  }

  /* =================================
     管理画面コンテキスト調整 - 強制適用
     ================================= */

  /* 管理画面のアクションコンテナ */
  .admin-actions,
  .panel-actions {
    display: flex;
    gap: 0.75rem;
    align-items: center;
  }

  /* 管理画面内のボタンは少し小さめのデフォルト */
  .admin-actions .btn,
  .panel-actions .btn {
    padding: 0.5rem 1rem;
    font-size: var(--font-size-xs);
    min-height: 36px;
  }

  /* 管理画面内のボタンカラー強制適用 */
  .page-admin .btn-primary,
  .admin-actions .btn-primary,
  .panel-actions .btn-primary {
    background: #4a90e2 !important;
    color: #ffffff !important;
    border-color: #4a90e2 !important;
  }

  .page-admin .btn-primary:hover,
  .admin-actions .btn-primary:hover,
  .panel-actions .btn-primary:hover {
    background: #357abd !important;
    border-color: #357abd !important;
  }

  .page-admin .btn-secondary,
  .admin-actions .btn-secondary,
  .panel-actions .btn-secondary {
    background: #e2e8f0 !important;
    color: #4a5568 !important;
    border-color: #d1d5db !important;
  }

  .page-admin .btn-secondary:hover,
  .admin-actions .btn-secondary:hover,
  .panel-actions .btn-secondary:hover {
    background: #718096 !important;
    color: #ffffff !important;
    border-color: #718096 !important;
  }

  .page-admin .btn-success,
  .admin-actions .btn-success,
  .panel-actions .btn-success {
    background: #27ae60 !important;
    color: #ffffff !important;
    border-color: #27ae60 !important;
  }

  .page-admin .btn-success:hover,
  .admin-actions .btn-success:hover,
  .panel-actions .btn-success:hover {
    background: #1e8449 !important;
    border-color: #1e8449 !important;
  }

  .page-admin .btn-warning,
  .admin-actions .btn-warning,
  .panel-actions .btn-warning {
    background: #f39c12 !important;
    color: #ffffff !important;
    border-color: #f39c12 !important;
  }

  .page-admin .btn-warning:hover,
  .admin-actions .btn-warning:hover,
  .panel-actions .btn-warning:hover {
    background: #d68910 !important;
    border-color: #d68910 !important;
  }

  .page-admin .btn-danger,
  .admin-actions .btn-danger,
  .panel-actions .btn-danger {
    background: #e74c3c !important;
    color: #ffffff !important;
    border-color: #e74c3c !important;
  }

  .page-admin .btn-danger:hover,
  .admin-actions .btn-danger:hover,
  .panel-actions .btn-danger:hover {
    background: #c0392b !important;
    border-color: #c0392b !important;
  }

  /* アイコンボタンの色も強制適用 */
  .page-admin .btn-icon {
    background: #ffffff !important;
    border-color: #d1d5db !important;
    color: #4a5568 !important;
  }

  .page-admin .btn-icon:hover {
    background: #f3f4f6 !important;
    border-color: #9ca3af !important;
    color: #374151 !important;
  }

  /* =================================
     レスポンシブデザイン
     ================================= */
  @media (max-width: 768px) {
    .btn {
      font-size: var(--font-size-xs);
      padding: 0.5rem 1rem;
      min-height: 40px;
    }
    
    .btn-sm {
      padding: 0.375rem 0.75rem;
      min-height: 36px;
    }
    
    .login-btn {
      padding: 14px 28px;
      font-size: var(--font-size-sm);
      min-height: 48px;
    }

    .admin-actions,
    .panel-actions {
      gap: 0.5rem;
    }

    .admin-actions .btn,
    .panel-actions .btn {
      padding: 0.5rem 0.875rem;
      font-size: var(--font-size-xs);
      min-height: 36px;
    }
  }

  @media (max-width: 480px) {
    .admin-actions,
    .panel-actions {
      flex-wrap: wrap;
    }

    .admin-actions .btn,
    .panel-actions .btn {
      flex: 1;
      min-width: 100px;
    }
  }