/* =============================================================================
   SoulCore Billing - Focus States
   M8-002: WCAG 2.1 Success Criterion 2.4.7 Focus Visible
   =============================================================================

   Global focus-visible styles for all interactive elements in billing pages.
   Uses :focus-visible to avoid showing focus ring on mouse clicks while
   maintaining accessibility for keyboard navigation.
   ============================================================================= */

/* =============================================================================
   GLOBAL FOCUS-VISIBLE STYLES
   Applies to all interactive elements within billing pages
   ============================================================================= */

/* Links */
.billing-page a:focus-visible,
[class*="billing-"] a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Buttons */
.billing-page button:focus-visible,
.billing-page [role="button"]:focus-visible,
[class*="billing-"] button:focus-visible,
[class*="billing-"] [role="button"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--accent-glow);
}

/* Form inputs */
.billing-page input:focus-visible,
.billing-page select:focus-visible,
.billing-page textarea:focus-visible,
[class*="billing-"] input:focus-visible,
[class*="billing-"] select:focus-visible,
[class*="billing-"] textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-color: var(--accent);
}

/* Focusable elements with tabindex */
.billing-page [tabindex]:focus-visible,
[class*="billing-"] [tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Checkboxes and radio buttons */
.billing-page input[type="checkbox"]:focus-visible,
.billing-page input[type="radio"]:focus-visible,
[class*="billing-"] input[type="checkbox"]:focus-visible,
[class*="billing-"] input[type="radio"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--accent-glow);
}

/* =============================================================================
   DARK THEME ENHANCEMENTS
   Higher visibility for dark backgrounds
   ============================================================================= */
[data-theme="dark"] .billing-page a:focus-visible,
[data-theme="dark"] .billing-page button:focus-visible,
[data-theme="dark"] .billing-page input:focus-visible,
[data-theme="dark"] .billing-page select:focus-visible,
[data-theme="dark"] .billing-page textarea:focus-visible,
[data-theme="dark"] [class*="billing-"] a:focus-visible,
[data-theme="dark"] [class*="billing-"] button:focus-visible,
[data-theme="dark"] [class*="billing-"] input:focus-visible,
[data-theme="dark"] [class*="billing-"] select:focus-visible,
[data-theme="dark"] [class*="billing-"] textarea:focus-visible {
  outline-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-glow);
}

/* =============================================================================
   REMOVE DEFAULT OUTLINE FOR NON-KEYBOARD FOCUS
   Only when focus-visible is supported
   ============================================================================= */
.billing-page *:focus:not(:focus-visible),
[class*="billing-"] *:focus:not(:focus-visible) {
  outline: none;
}

/* =============================================================================
   SPECIFIC COMPONENT OVERRIDES
   For components that need custom focus styling
   ============================================================================= */

/* Cards that are clickable */
.billing-card:focus-visible,
.billing-stat-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--accent-glow);
}

/* Pagination links */
.billing-pagination a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 0;
  z-index: 1;
  position: relative;
}

/* Badge/Tag elements that might be interactive */
.billing-badge:focus-visible,
.billing-status-badge:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* Modal close buttons */
.billing-modal [data-action*="close"]:focus-visible,
.billing-modal .billing-modal__close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--accent-glow);
}

/* Toast dismiss buttons */
.billing-toast button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* =============================================================================
   ADMIN PANEL FOCUS STYLES
   Extends focus visibility to admin billing pages
   ============================================================================= */

/* Admin panels typically don't use .billing-page wrapper */
body[data-controller*="admin"] a:focus-visible,
body[data-controller*="admin"] button:focus-visible,
body[data-controller*="admin"] input:focus-visible,
body[data-controller*="admin"] select:focus-visible,
body[data-controller*="admin"] textarea:focus-visible,
body[data-controller*="admin"] [tabindex]:focus-visible {
  outline: 2px solid #6366f1; /* indigo-500 for admin */
  outline-offset: 2px;
}

/* =============================================================================
   HIGH CONTRAST MODE SUPPORT
   For users who prefer increased contrast
   ============================================================================= */
@media (prefers-contrast: more) {
  .billing-page a:focus-visible,
  .billing-page button:focus-visible,
  .billing-page input:focus-visible,
  [class*="billing-"] a:focus-visible,
  [class*="billing-"] button:focus-visible,
  [class*="billing-"] input:focus-visible {
    outline-width: 3px;
    outline-color: #000000;
  }

  [data-theme="dark"] .billing-page a:focus-visible,
  [data-theme="dark"] .billing-page button:focus-visible,
  [data-theme="dark"] .billing-page input:focus-visible,
  [data-theme="dark"] [class*="billing-"] a:focus-visible,
  [data-theme="dark"] [class*="billing-"] button:focus-visible,
  [data-theme="dark"] [class*="billing-"] input:focus-visible {
    outline-color: #FFFFFF;
  }
}

/* =============================================================================
   REDUCED MOTION SUPPORT
   Removes any focus transition animations for users who prefer reduced motion
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
  .billing-page *:focus-visible,
  [class*="billing-"] *:focus-visible {
    transition: none !important;
  }
}