/* ============================================================
   ALPHA FINANS - Accessibility CSS
   WCAG 2.1 AA Compliance (targeting AAA where possible)

   Table of Contents:
   1.  CSS Custom Properties
   2.  Screen Reader Only (.sr-only)
   3.  Skip Link
   4.  Focus Indicators
   5.  High Contrast Mode
   6.  Reduced Motion
   7.  Font Size Scale (A- / A / A+)
   8.  Screen Reader Mode Enhancements
   9.  Focus Trap Overlay
   10. Live Regions
   11. Form Accessibility
   12. Touch Target Sizes
   13. Text Readability
   14. Navigation Landmarks
   15. Current Page Indicator
   16. RTL Support
   17. Accessibility Settings Panel
   18. Print Styles
   ============================================================ */

/* ============================================================
   1. CSS CUSTOM PROPERTIES
============================================================ */
:root {
  --a11y-focus-color:       #ff9800;
  --a11y-focus-shadow:      0 0 0 6px rgba(255, 152, 0, 0.25);
  --a11y-focus-width:       3px;
  --a11y-font-scale:        1;
  --a11y-hc-bg:             #000;
  --a11y-hc-text:           #fff;
  --a11y-hc-link:           #ffff00;
  --a11y-hc-border:         #fff;
  --a11y-hc-focus:          #ffff00;
  --a11y-panel-bg:          #1e2130;
  --a11y-panel-border:      rgba(255, 255, 255, 0.12);
  --a11y-panel-text:        #e0e0e0;
  --a11y-panel-accent:      #4caf50;
  --a11y-panel-toggle-off:  #555;
  --a11y-panel-toggle-on:   #4caf50;
  --a11y-panel-z:           100001;
}

/* ============================================================
   2. SCREEN READER ONLY
============================================================ */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Visible on focus (for skip links) */
.sr-only-focusable:focus,
.sr-only-focusable:active {
  position: static !important;
  width: auto !important;
  height: auto !important;
  padding: inherit !important;
  margin: inherit !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: inherit !important;
}

/* ============================================================
   3. SKIP LINK
============================================================ */
.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: calc(var(--a11y-panel-z) + 1);
  padding: 12px 24px;
  background: var(--primary-color, #1a73e8);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 8px 8px;
  transition: top 0.15s ease;
  line-height: 1.4;
}

.skip-link:focus {
  top: 0;
  outline: var(--a11y-focus-width) solid var(--a11y-focus-color);
  outline-offset: 2px;
}

/* ============================================================
   4. FOCUS INDICATORS
   Visible focus for keyboard navigation on every interactive element.
============================================================ */

/* Universal focus-visible */
*:focus-visible {
  outline: var(--a11y-focus-width) solid var(--a11y-focus-color);
  outline-offset: 2px;
}

/* Remove focus ring for mouse users */
*:focus:not(:focus-visible) {
  outline: none;
}

/* Specific enhanced focus for key elements */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible,
[role="menuitem"]:focus-visible,
[role="option"]:focus-visible,
[role="switch"]:focus-visible,
[role="checkbox"]:focus-visible,
[role="radio"]:focus-visible,
[role="combobox"]:focus-visible,
[role="listbox"]:focus-visible,
[role="link"]:focus-visible,
[tabindex]:focus-visible {
  outline: var(--a11y-focus-width) solid var(--a11y-focus-color);
  outline-offset: 2px;
  box-shadow: var(--a11y-focus-shadow);
}

/* Keyboard navigation mode — stronger indicators */
.keyboard-nav *:focus {
  outline: var(--a11y-focus-width) solid var(--a11y-focus-color) !important;
  outline-offset: 2px !important;
}

/* Cells in tables */
.keyboard-nav td:focus,
.keyboard-nav th:focus {
  outline: var(--a11y-focus-width) solid var(--a11y-focus-color);
  outline-offset: -2px;
}

/* ============================================================
   5. HIGH CONTRAST MODE
   Activated by body.high-contrast OR OS prefers-contrast: high
============================================================ */
@media (prefers-contrast: high) {
  body:not([class*="theme-"]) {
    --a11y-hc-active: 1;
  }
}

body.high-contrast,
@media (prefers-contrast: high) {
  body {
    --text-primary:   #000;
    --text-secondary: #111;
    --bg-primary:     #fff;
    --bg-secondary:   #f0f0f0;
    --border-color:   #000;
    --focus-color:    #000080;
  }
}

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

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

body.high-contrast button,
body.high-contrast input,
body.high-contrast select,
body.high-contrast textarea {
  background-color: var(--a11y-hc-bg) !important;
  color: var(--a11y-hc-text) !important;
  border: 2px solid var(--a11y-hc-border) !important;
}

body.high-contrast *:focus-visible {
  outline: 3px solid var(--a11y-hc-focus) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

body.high-contrast img {
  filter: contrast(1.3) brightness(1.1);
}

/* Dark theme in high contrast */
[data-theme="dark"].high-contrast,
body[data-theme="dark"].high-contrast {
  --a11y-hc-bg:   #000;
  --a11y-hc-text: #fff;
  --a11y-hc-link: #ffff00;
}

/* OS high contrast media query */
@media (prefers-contrast: high) {
  :root {
    --text-primary:   #000;
    --text-secondary: #333;
    --bg-primary:     #fff;
    --border-color:   #000;
  }

  [data-theme="dark"] {
    --text-primary:   #fff;
    --text-secondary: #ddd;
    --bg-primary:     #000;
    --border-color:   #fff;
  }

  button,
  a,
  input,
  select,
  textarea {
    border: 2px solid currentColor;
  }

  img {
    filter: contrast(1.2);
  }
}

/* ============================================================
   6. REDUCED MOTION
============================================================ */

/* OS preference */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration:       0.01ms !important;
    scroll-behavior:           auto !important;
  }
}

/* Manual toggle via body.reduced-motion */
body.reduced-motion *,
body.reduced-motion *::before,
body.reduced-motion *::after {
  animation-duration:        0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration:       0.01ms !important;
  scroll-behavior:           auto !important;
}

/* Ticker/marquee: stop when reduced motion is on */
body.reduced-motion [role="marquee"],
body.reduced-motion .ticker-tape,
body.reduced-motion .ticker-track {
  animation: none !important;
}

/* ============================================================
   7. FONT SIZE SCALE
   Applied via --a11y-font-scale CSS variable
============================================================ */
body {
  font-size: calc(1rem * var(--a11y-font-scale, 1));
}

/* Preserve relative units inside components */
body[data-font-size="small"]  { font-size: calc(0.875rem); }
body[data-font-size="normal"] { font-size: 1rem; }
body[data-font-size="large"]  { font-size: calc(1.25rem); }

/* ============================================================
   8. SCREEN READER MODE
   Extra verbosity helpers for screen reader users.
============================================================ */
body.screen-reader-mode [data-sr-label]::before {
  content: attr(data-sr-label) ': ';
  position: absolute;
  left: -10000px;
  white-space: nowrap;
}

/* Show more descriptive text for financial values */
body.screen-reader-mode .price-value::after {
  content: attr(data-sr-price);
  position: absolute;
  left: -10000px;
}

/* ============================================================
   9. FOCUS TRAP OVERLAY
============================================================ */
.focus-trap-active {
  position: relative;
}

.focus-trap-active::before {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9998;
  pointer-events: none;
}

/* ============================================================
   10. LIVE REGIONS
============================================================ */
#alpha-a11y-live,
#alpha-a11y-assertive {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ============================================================
   11. FORM ACCESSIBILITY
============================================================ */

/* Error state — uses shape and color (not just color) */
.error-field,
[aria-invalid="true"] {
  border-color: #d32f2f !important;
  border-width: 2px !important;
  /* Error icon pattern: right side */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23d32f2f' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zm0 10.5a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5zM8.75 4v4.5h-1.5V4h1.5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 40px;
}

/* Success state */
[aria-invalid="false"] {
  border-color: #2e7d32 !important;
}

/* Required field visual indicator */
[aria-required="true"]::after {
  content: ' *';
  color: #d32f2f;
  font-weight: 700;
}

/* Disabled state */
[aria-disabled="true"],
[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Error message role="alert" regions */
[role="alert"],
.error-msg,
.field-error {
  display: block;
  margin-top: 4px;
  font-size: 0.85em;
  color: #d32f2f;
}

body[data-theme="dark"] [role="alert"],
body[data-theme="dark"] .error-msg {
  color: #ff8a80;
}

/* ============================================================
   12. TOUCH TARGET SIZES (WCAG 2.5.5 — minimum 44x44)
============================================================ */
button,
a,
[role="button"],
[role="tab"],
[role="menuitem"],
[role="option"],
input[type="checkbox"],
input[type="radio"] {
  min-height: 44px;
  min-width: 44px;
}

/* Icon-only action buttons (alarm, etc.) keep padding */
.alarm-action-btn,
.icon-btn,
[class*="icon-btn"] {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ============================================================
   13. TEXT READABILITY
============================================================ */
body {
  line-height: 1.6;
  letter-spacing: 0.02em;
}

p {
  margin-bottom: 1em;
  max-width: 75ch; /* Optimal line length for readability */
}

/* Underlined links (not buttons styled as links) */
a:not(.btn):not(.nav-link):not(.skip-link):not([class*="tab"]):not([class*="item"]) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:not(.btn):not(.nav-link):not(.skip-link):not([class*="tab"]):not([class*="item"]):hover {
  text-decoration-thickness: 2px;
}

/* Ensure sufficient line height in form inputs */
input,
select,
textarea {
  line-height: 1.5;
}

/* ============================================================
   14. NAVIGATION LANDMARKS
============================================================ */

/* Visually distinguish main landmark on focus */
main:focus,
[role="main"]:focus {
  outline: none; /* main gets tabindex=-1 transiently for skip link */
}

/* ============================================================
   15. CURRENT PAGE INDICATOR
============================================================ */
[aria-current="page"] {
  font-weight: 700;
  border-bottom: 3px solid var(--primary-color, #1a73e8);
  text-decoration: none !important;
}

/* ============================================================
   16. RTL SUPPORT
============================================================ */
[dir="rtl"] .skip-link {
  left: auto;
  right: 16px;
  border-radius: 0 0 0 8px;
}

[dir="rtl"] .error-field,
[dir="rtl"] [aria-invalid="true"] {
  background-position: left 12px center;
  padding-right: inherit;
  padding-left: 40px;
}

[dir="rtl"] .a11y-panel-toggle {
  right: auto;
  left: 16px;
}

[dir="rtl"] .a11y-panel {
  right: auto;
  left: 16px;
}

/* ============================================================
   17. ACCESSIBILITY SETTINGS PANEL
============================================================ */

/* Toggle button (floating button to open panel) */
.a11y-panel-toggle {
  position: fixed;
  bottom: 80px;
  right: 16px;
  z-index: var(--a11y-panel-z);
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: var(--primary-color, #1a73e8);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  padding: 0;
}

.a11y-panel-toggle:hover {
  background: var(--primary-hover, #1557b0);
  transform: scale(1.08);
}

.a11y-panel-toggle:focus-visible {
  outline: 3px solid var(--a11y-focus-color);
  outline-offset: 3px;
  border-color: var(--a11y-focus-color);
}

.a11y-panel-toggle[aria-expanded="true"] {
  background: var(--a11y-panel-accent, #4caf50);
}

/* Panel container */
.a11y-panel {
  position: fixed;
  bottom: 134px;
  right: 16px;
  z-index: var(--a11y-panel-z);
  width: 280px;
  background: var(--a11y-panel-bg, #1e2130);
  border: 1px solid var(--a11y-panel-border, rgba(255,255,255,0.12));
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  font-size: 14px;
  color: var(--a11y-panel-text, #e0e0e0);
}

/* Panel header */
.a11y-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--a11y-panel-border, rgba(255,255,255,0.12));
}

.a11y-panel-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--a11y-panel-text, #e0e0e0);
}

.a11y-panel-close {
  background: transparent;
  border: none;
  color: var(--a11y-panel-text, #e0e0e0);
  cursor: pointer;
  padding: 4px;
  min-width: 28px;
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background 0.15s ease;
}

.a11y-panel-close:hover {
  background: rgba(255, 255, 255, 0.1);
}

.a11y-panel-close:focus-visible {
  outline: 2px solid var(--a11y-focus-color);
  outline-offset: 1px;
}

/* Panel body */
.a11y-panel-body {
  padding: 12px 0;
}

/* Panel rows */
.a11y-panel-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  gap: 8px;
  min-height: 44px;
}

.a11y-panel-row:hover {
  background: rgba(255, 255, 255, 0.04);
}

.a11y-panel-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--a11y-panel-text, #e0e0e0);
  flex: 1;
  user-select: none;
  cursor: default;
}

/* Toggle switch (role="switch") */
.a11y-toggle-btn {
  position: relative;
  width: 44px;
  height: 24px;
  min-width: 44px;
  min-height: 24px;
  background: var(--a11y-panel-toggle-off, #555);
  border: none;
  border-radius: 12px;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s ease;
  flex-shrink: 0;
}

.a11y-toggle-btn--on {
  background: var(--a11y-panel-toggle-on, #4caf50) !important;
}

.a11y-toggle-btn:focus-visible {
  outline: 2px solid var(--a11y-focus-color);
  outline-offset: 2px;
}

.a11y-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s ease;
  pointer-events: none;
}

.a11y-toggle-btn--on .a11y-toggle-thumb,
.a11y-toggle-btn[aria-checked="true"] .a11y-toggle-thumb {
  transform: translateX(20px);
}

/* Font size controls */
.a11y-font-row {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.a11y-font-controls {
  display: flex;
  gap: 6px;
  align-self: flex-end;
}

.a11y-font-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--a11y-panel-text, #e0e0e0);
  border-radius: 6px;
  cursor: pointer;
  min-width: 44px;
  min-height: 36px;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, border-color 0.15s ease;
  padding: 0 10px;
}

.a11y-font-btn:hover {
  background: rgba(255, 255, 255, 0.14);
}

.a11y-font-btn--active {
  background: var(--a11y-panel-accent, #4caf50) !important;
  border-color: var(--a11y-panel-accent, #4caf50) !important;
  color: #fff !important;
}

.a11y-font-btn:focus-visible {
  outline: 2px solid var(--a11y-focus-color);
  outline-offset: 1px;
}

/* Keyboard shortcut hint at bottom of panel */
.a11y-panel-hint {
  padding: 8px 16px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  border-top: 1px solid var(--a11y-panel-border, rgba(255,255,255,0.12));
  margin-top: 4px;
}

.a11y-panel-hint kbd {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  padding: 1px 5px;
  font-family: monospace;
  font-size: 10px;
}

/* Light theme panel overrides */
body[data-theme="light"] .a11y-panel {
  --a11y-panel-bg:     #ffffff;
  --a11y-panel-border: rgba(0, 0, 0, 0.12);
  --a11y-panel-text:   #212121;
  --a11y-panel-toggle-off: #aaa;
}

body[data-theme="light"] .a11y-panel-hint {
  color: rgba(0, 0, 0, 0.4);
}

body[data-theme="light"] .a11y-panel-hint kbd {
  background: rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.2);
}

body[data-theme="light"] .a11y-font-btn {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.15);
  color: #212121;
}

body[data-theme="light"] .a11y-panel-close {
  color: #212121;
}

body[data-theme="light"] .a11y-panel-close:hover {
  background: rgba(0, 0, 0, 0.08);
}

body[data-theme="light"] .a11y-toggle-btn {
  background: #ccc;
}

/* ============================================================
   18. PRINT STYLES
============================================================ */
@media print {
  .skip-link,
  .sr-only,
  [aria-hidden="true"],
  .a11y-panel-toggle,
  .a11y-panel {
    display: none !important;
  }

  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #666;
  }

  /* Print financial tables clearly */
  table {
    border-collapse: collapse;
    width: 100%;
  }

  th,
  td {
    border: 1px solid #000;
    padding: 4px 8px;
  }

  thead {
    background: #f0f0f0;
  }

  /* Mark required fields in print */
  [aria-required="true"]::after {
    content: ' (zorunlu)';
    font-size: 0.8em;
  }
}