/* ==========================================================================
   PlayThru Accessibility Styles (WCAG 2.1 AA Compliance)
   ========================================================================== */

/* Default CSS Variables - will be overridden by PHP inline styles */
:root {
  --bg-color: #0f3663;
  --text-color: #ffffff;
  --accent-color: #ffc107;
  --btn-text-color: #000000;
  --link-color: var(--accent-color);
  --border-color: #CFD6DF;
  --focus-outline: 3px solid #ffc107;
}

/* ==========================================================================
   High Contrast Mode Overrides
   ========================================================================== */

body.a11y-high-contrast {
  --bg-color: #000000 !important;
  --text-color: #ffffff !important;
  --accent-color: #ffff00 !important;
  --btn-text-color: #000000 !important;
  --link-color: #00ffff !important;
  --border-color: #ffffff !important;
  --focus-outline: 3px solid #ffff00 !important;
}

/* Remove background images in high contrast mode for better readability */
body.a11y-high-contrast * {
  background-image: none !important;
}

/* Ensure text is always readable in high contrast mode */
body.a11y-high-contrast {
  background-color: var(--bg-color) !important;
  color: var(--text-color) !important;
}

body.a11y-high-contrast .text-white,
body.a11y-high-contrast .text-warning,
body.a11y-high-contrast p,
body.a11y-high-contrast h1,
body.a11y-high-contrast h2,
body.a11y-high-contrast h3,
body.a11y-high-contrast h4,
body.a11y-high-contrast h5,
body.a11y-high-contrast h6,
body.a11y-high-contrast label,
body.a11y-high-contrast span {
  color: var(--text-color) !important;
}

body.a11y-high-contrast .customaccent,
body.a11y-high-contrast .pfont.customaccent {
  color: var(--accent-color) !important;
}

body.a11y-high-contrast a {
  color: var(--link-color) !important;
  text-decoration: underline !important;
}

body.a11y-high-contrast a:hover,
body.a11y-high-contrast a:focus {
  color: #ffffff !important;
  background-color: var(--link-color) !important;
}

/* Buttons in high contrast mode */
body.a11y-high-contrast .btn,
body.a11y-high-contrast button {
  background-color: var(--accent-color) !important;
  color: var(--btn-text-color) !important;
  border: 2px solid var(--text-color) !important;
}

body.a11y-high-contrast .btn:hover,
body.a11y-high-contrast .btn:focus,
body.a11y-high-contrast button:hover,
body.a11y-high-contrast button:focus {
  background-color: var(--text-color) !important;
  color: var(--bg-color) !important;
}

/* Form elements in high contrast mode */
body.a11y-high-contrast input,
body.a11y-high-contrast select,
body.a11y-high-contrast textarea {
  background-color: var(--text-color) !important;
  color: var(--bg-color) !important;
  border: 2px solid var(--text-color) !important;
}

/* Exclude transparent/styled dropdowns from form styling */
/* The hole selector dropdown should always be transparent with custom arrow */
select.hchange,
.hchange {
  background-color: transparent !important;
  border: none !important;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 25px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffc107' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right center !important;
  background-size: 12px !important;
}

body.a11y-high-contrast select.hchange,
body.a11y-high-contrast .hchange {
  background-color: transparent !important;
  border: none !important;
  color: var(--accent-color) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffff00' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right center !important;
  background-size: 12px !important;
}

/* Checkboxes and custom checkmarks */
body.a11y-high-contrast .checkmark {
  border: 2px solid var(--text-color) !important;
  background-color: transparent !important;
}

body.a11y-high-contrast input:checked + .checkmark,
body.a11y-high-contrast .checkbox_container input:checked ~ .checkmark {
  background-color: var(--accent-color) !important;
}

/* Custom round checkboxes (quickcard page) */
body.a11y-high-contrast .form-check-input[type="checkbox"] {
  background-color: var(--bg-color) !important;
  border: 3px solid var(--text-color) !important;
}

body.a11y-high-contrast .form-check-input[type="checkbox"]:checked {
  background-color: var(--accent-color) !important;
  border-color: var(--accent-color) !important;
}

/* Add a visible checkmark for checked state */
body.a11y-high-contrast .form-check-input[type="checkbox"]:checked::before {
  content: "✓";
  display: block;
  color: var(--bg-color);
  font-size: 1em;
  font-weight: bold;
  text-align: center;
  line-height: 1;
}

/* Modal styling in high contrast mode */
body.a11y-high-contrast .modal-content {
  background-color: var(--bg-color) !important;
  border: 2px solid var(--text-color) !important;
  color: var(--text-color) !important;
}

body.a11y-high-contrast .modal-header {
  background-color: var(--bg-color) !important;
  border-bottom: 1px solid var(--text-color) !important;
}

body.a11y-high-contrast .modal-header .modal-title {
  color: var(--accent-color) !important;
}

body.a11y-high-contrast .modal-header .btn-close {
  filter: invert(1) !important;
}

body.a11y-high-contrast .modal-body {
  background-color: var(--bg-color) !important;
  color: var(--text-color) !important;
}

body.a11y-high-contrast .modal-body p,
body.a11y-high-contrast .modal-body span,
body.a11y-high-contrast .modal-body label,
body.a11y-high-contrast .modal-body div,
body.a11y-high-contrast .modal-body h1,
body.a11y-high-contrast .modal-body h2,
body.a11y-high-contrast .modal-body h3,
body.a11y-high-contrast .modal-body h4,
body.a11y-high-contrast .modal-body h5,
body.a11y-high-contrast .modal-body h6,
body.a11y-high-contrast .modal-body small {
  color: var(--text-color) !important;
}

body.a11y-high-contrast .modal-footer {
  background-color: var(--bg-color) !important;
  border-top: 1px solid var(--text-color) !important;
}

/* Bootstrap Card styling in high contrast mode */
body.a11y-high-contrast .card {
  background-color: var(--bg-color) !important;
  border: 2px solid var(--text-color) !important;
  color: var(--text-color) !important;
}

body.a11y-high-contrast .card-body {
  background-color: var(--bg-color) !important;
  color: var(--text-color) !important;
}

body.a11y-high-contrast .card-header,
body.a11y-high-contrast .card-footer {
  background-color: var(--bg-color) !important;
  border-color: var(--text-color) !important;
  color: var(--text-color) !important;
}

/* Text muted override in high contrast mode */
body.a11y-high-contrast .text-muted {
  color: var(--text-color) !important;
}

/* Form control placeholder text */
body.a11y-high-contrast .form-control::placeholder {
  color: #888888 !important;
}

/* HR styling in high contrast mode */
body.a11y-high-contrast hr {
  border-color: var(--text-color) !important;
  opacity: 1 !important;
}

/* Delete name styling in modal */
body.a11y-high-contrast .deletename {
  color: var(--text-color) !important;
}

body.a11y-high-contrast .deleteminus {
  color: #ff6666 !important;
}

/* ==========================================================================
   Chaos Caddy Modal Styling (High Contrast)
   ========================================================================== */

body.a11y-high-contrast .modal1 {
  background-color: rgba(0, 0, 0, 0.95) !important;
}

body.a11y-high-contrast .modal-content1,
body.a11y-high-contrast .modal-content2 {
  background-color: var(--bg-color) !important;
  border: 2px solid var(--text-color) !important;
  color: var(--text-color) !important;
}

body.a11y-high-contrast .nlalert {
  background-color: var(--bg-color) !important;
}

body.a11y-high-contrast .nlh1 {
  color: var(--text-color) !important;
}

body.a11y-high-contrast .nlname {
  color: var(--accent-color) !important;
}

body.a11y-high-contrast .nlscore {
  color: var(--accent-color) !important;
}

body.a11y-high-contrast .win_button {
  background-color: var(--accent-color) !important;
  color: var(--btn-text-color) !important;
  border: 2px solid var(--text-color) !important;
}

body.a11y-high-contrast .win_button:hover,
body.a11y-high-contrast .win_button:focus {
  background-color: var(--text-color) !important;
  color: var(--bg-color) !important;
}

body.a11y-high-contrast .restore-order {
  color: var(--accent-color) !important;
}

body.a11y-high-contrast .close,
body.a11y-high-contrast .close1,
body.a11y-high-contrast .closeSpan {
  color: var(--text-color) !important;
}

/* ==========================================================================
   Enhanced Focus States (Always Active)
   ========================================================================== */

*:focus-visible {
  outline: var(--focus-outline) !important;
  outline-offset: 2px;
}

/* Ensure focus is visible on all interactive elements */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: var(--focus-outline) !important;
  outline-offset: 2px;
}

/* ==========================================================================
   Skip Link (Screen Reader Navigation)
   ========================================================================== */

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000000;
  color: #ffffff;
  padding: 8px 16px;
  z-index: 10000;
  text-decoration: none;
  font-weight: bold;
}

.skip-link:focus {
  top: 0;
  outline: 3px solid #ffff00;
}

/* ==========================================================================
   Accessibility Toggle Button Styles
   ========================================================================== */

#a11y-toggle {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#a11y-toggle:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

#a11y-toggle:focus-visible {
  outline: 3px solid #ffff00 !important;
  outline-offset: 2px;
}

/* High contrast mode indicator for toggle button */
body.a11y-high-contrast #a11y-toggle {
  background: #ffff00 !important;
  border-color: #000000 !important;
}

body.a11y-high-contrast #a11y-toggle i {
  color: #000000 !important;
}