/* =============================================================================
   buttons.css - Button & Control Styles for Story Manager
   Copied from styles.css: .btn, .btn-primary, .btn-secondary, .btn-danger, .btn-outline, .btn-group, etc.
   ============================================================================= */

.btn, .btn-primary, .btn-secondary, .btn-danger, .btn-outline {
  /* ... (copy all button and control rules here) ... */
}
.btn-group {
  /* ... (copy all .btn-group rules and related responsive rules here) ... */
} 

/* WCAG 2.2 Compliant Toggle Button Styles for List/Grid View */
.toggle-btn,
.panel-toggle-btn {
  background: #fff;
  color: #0053A0; /* Dark blue for icons/text */
  border: 2px solid #0053A0;
  transition: background 0.2s, color 0.2s;
  outline: none;
}
.toggle-btn.selected,
.panel-toggle-btn.selected,
.toggle-btn.active,
.panel-toggle-btn.active {
  background: #0053A0; /* Dark blue background */
  color: #fff;          /* White icon/text */
  border-color: #0053A0;
}
.toggle-btn .icon,
.panel-toggle-btn .icon {
  fill: currentColor; /* Ensures SVG icons inherit text color */
}
/* Focus state for accessibility */
.toggle-btn:focus,
.panel-toggle-btn:focus {
  box-shadow: 0 0 0 2px #003366;
}
/* Optional: Increase icon size for better visibility */
.toggle-btn .icon,
.panel-toggle-btn .icon {
  width: 1.5em;
  height: 1.5em;
}
/* Ensure sufficient padding for touch targets */
.toggle-btn,
.panel-toggle-btn {
  min-width: 44px;
  min-height: 44px;
  padding: 0.5em 1em;
} 

/* WCAG 2.2 AA: Strengthen outline primary contrast and focus visibility */
.btn-outline-primary {
  color: #084298;            /* Dark primary text (satisfies 4.5:1 on white) */
  border-color: #084298;     /* Matching dark border */
}
.btn-outline-primary:hover,
.btn-outline-primary:active,
.btn-outline-primary.active {
  color: #ffffff;            /* White text on dark background */
  background-color: #084298; /* Dark primary background */
  border-color: #084298;
}
.btn-outline-primary:focus-visible {
  outline: 2px solid #003366;    /* High-contrast focus ring */
  outline-offset: 2px;
  box-shadow: none;              /* Avoid low-contrast shadow-only focus */
}

/* Ensure add buttons meet 44x44 target without changing visual density */
.dashboard-panel .btn.btn-sm {
  min-height: 44px;
  min-width: 44px;
  padding: 10px 12px;            /* Increase hit area while keeping icon centered */
}

/* Icons inherit currentColor for better contrast */
.dashboard-panel .btn i { color: currentColor; }

/* Final WCAG 2.2 AA enforcement (loaded late to avoid regressions) */
body.theme-light .btn-outline-primary,
.characters-page .btn-group .btn-outline-primary,
.locations-page .btn-group .btn-outline-primary,
.visuals-page .btn-group .btn-outline-primary {
  color: #084298 !important;
  border-color: #084298 !important;
  background-color: transparent !important;
}

body.theme-light .btn-outline-primary:hover,
body.theme-light .btn-outline-primary:active,
body.theme-light .btn-outline-primary.active,
.characters-page .btn-group .btn-outline-primary:hover,
.characters-page .btn-group .btn-outline-primary.active,
.locations-page .btn-group .btn-outline-primary:hover,
.locations-page .btn-group .btn-outline-primary.active,
.visuals-page .btn-group .btn-outline-primary:hover,
.visuals-page .btn-group .btn-outline-primary.active {
  background-color: #084298 !important;
  border-color: #084298 !important;
  color: #ffffff !important;
}

body.theme-light .btn-outline-primary:focus-visible,
.characters-page .btn-group .btn-outline-primary:focus-visible,
.locations-page .btn-group .btn-outline-primary:focus-visible,
.visuals-page .btn-group .btn-outline-primary:focus-visible {
  outline: 2px solid #003366 !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}