/* === wwwroot/css/a11y.css ===
   Əlçatanlıq ayarlarının interfeysə TƏTBİQ olunan hissəsi.

   ══════════════════════════════════════════════════════════════════════════
   🔴 BU FAYL BİR DƏFƏ SƏHV YAZILDI — SƏBƏBİNİ OXU, TƏKRARLAMA (2026-08-05)
   ══════════════════════════════════════════════════════════════════════════
   İlk versiya belə yazılmışdı:

       html { line-height: var(--a11y-line-height); }
       html { letter-spacing: var(--a11y-letter-spacing); }
       html.a11y-contrast-high { --mud-palette-text-primary: #000; }

   HEÇ BİRİ İŞLƏMİRDİ. Səbəb: MudBlazor mətnin bütün ölçülərini ÖZ CSS
   dəyişənləri ilə idarə edir və onları hər elementə BİRBAŞA yazır:

       body { line-height: var(--mud-typography-default-lineheight); ... }
       .mud-typography-body1 { letter-spacing: var(--mud-typography-body1-letterspacing); ... }

   Yəni `html`-ə yazılan `line-height` irsiyyətlə gəlir, amma `body`-dəki
   birbaşa təyinat onu ƏVƏZ EDİR. Nəticə: ayar dəyişir, ekranda heç nə olmur.

   DOĞRU YOL: MudBlazor-un ÖZ dəyişənlərini əvəz etmək.
   `MudThemeProvider` onları runtime-da `:root`-a yazır; `html.sinif`
   selektoru (0,1,1) `:root`-dan (0,1,0) daha spesifikdir → bizim qalib gəlir.

   ⚠️ Dəyişən adlarını `MudBlazor.min.css`-dən yoxlamadan dəyişməyin.
      MudBlazor 9-da 14 tipoqrafiya şkalası var — hamısı aşağıda sadalanıb.
      Biri unudulsa həmin mətn növü ayara REAKSİYA VERMİR (məsələn düymələr
      böyüyür, cədvəl başlıqları böyümür).

   ⚠️ Bu fayl QLOBALDIR, scoped CSS deyil — və olmamalıdır: MudBlazor
      dialoq/menyu/snackbar-ı `<body>` altında AYRI qatda render edir,
      scoped CSS onlara çatmır.
   ══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════
   1. MƏTN ÖLÇÜSÜ
   ═══════════════════════════════════════════════════════════
   `html`-in `font-size`-ı dəyişdirilir. MudBlazor bütün ölçüləri `rem`-lə
   verir, ona görə mətn, boşluq və komponent hündürlükləri BİRLİKDƏ böyüyür —
   yəni düzüm dağılmır, sadəcə miqyaslanır.
   (`app.css` `html`-ə `font-size` yazmır — yoxlanılıb.) */

html.a11y-scale-1 { font-size: 112.5%; }   /* 16 → 18px */
html.a11y-scale-2 { font-size: 125%;   }   /* 16 → 20px */
html.a11y-scale-3 { font-size: 140%;   }   /* 16 → 22.4px */


/* ═══════════════════════════════════════════════════════════
   2. SƏTİR ARALIĞI
   ═══════════════════════════════════════════════════════════
   Mütləq dəyər verilir, `calc(var(--eyni-deyisen) * 1.25)` YOX —
   dəyişənin özünə istinad dairəvi olur və CSS qaydanı tamamilə atır. */

html.a11y-line-wide {
    --mud-typography-default-lineheight:   1.9;
    --mud-typography-body1-lineheight:     1.9;
    --mud-typography-body2-lineheight:     1.9;
    --mud-typography-subtitle1-lineheight: 1.85;
    --mud-typography-subtitle2-lineheight: 1.85;
    --mud-typography-caption-lineheight:   1.8;
    --mud-typography-overline-lineheight:  1.8;
    --mud-typography-button-lineheight:    1.75;
    /* Başlıqlarda 1.9 çox boş görünür — böyük mətnə az aralıq bəs edir. */
    --mud-typography-h1-lineheight: 1.35;
    --mud-typography-h2-lineheight: 1.35;
    --mud-typography-h3-lineheight: 1.4;
    --mud-typography-h4-lineheight: 1.4;
    --mud-typography-h5-lineheight: 1.45;
    --mud-typography-h6-lineheight: 1.45;
}


/* ═══════════════════════════════════════════════════════════
   3. HƏRF ARALIĞI
   ═══════════════════════════════════════════════════════════ */

html.a11y-letter-wide {
    --mud-typography-default-letterspacing:   .055em;
    --mud-typography-body1-letterspacing:     .055em;
    --mud-typography-body2-letterspacing:     .055em;
    --mud-typography-subtitle1-letterspacing: .05em;
    --mud-typography-subtitle2-letterspacing: .05em;
    --mud-typography-caption-letterspacing:   .06em;
    --mud-typography-overline-letterspacing:  .12em;
    --mud-typography-button-letterspacing:    .06em;
    /* Böyük başlıqda geniş aralıq sözü parçalayır — az verilir. */
    --mud-typography-h1-letterspacing: .01em;
    --mud-typography-h2-letterspacing: .01em;
    --mud-typography-h3-letterspacing: .015em;
    --mud-typography-h4-letterspacing: .02em;
    --mud-typography-h5-letterspacing: .025em;
    --mud-typography-h6-letterspacing: .025em;
}

/* Rəqəm sahələrində hərf aralığı ZƏRƏRLİDİR — telefon nömrəsi və məbləğ
   oxunmur, resepsiyonist səhv diktə edir. */
html.a11y-letter-wide input,
html.a11y-letter-wide .mud-input-slot,
html.a11y-letter-wide [class*="tabular"] {
    letter-spacing: normal !important;
}


/* ═══════════════════════════════════════════════════════════
   4. YÜKSƏK KONTRAST
   ═══════════════════════════════════════════════════════════
   Material dizaynın iki əsas şikayəti: soluq ikinci dərəcəli mətn və
   çətin görünən ayırıcı xətlər. İkisi də düzəldilir.

   🔴 RƏNGLƏR SABİT YAZILMIR — `text-primary`-ə istinad edilir.
      Səbəb: qaranlıq temada sabit qara mətn qara fonda GÖRÜNMÜR.
      Bu yolla qayda hər iki temada özünü düzəldir. */

html.a11y-contrast-high {
    --mud-palette-text-secondary:  var(--mud-palette-text-primary);
    --mud-palette-text-disabled:   var(--mud-palette-text-primary);
    --mud-palette-lines-default:   var(--mud-palette-text-primary);
    --mud-palette-lines-inputs:    var(--mud-palette-text-primary);
    --mud-palette-divider:         var(--mud-palette-text-primary);
    --mud-palette-divider-light:   var(--mud-palette-text-primary);
}

/* `text-primary`-nin özünü tam kontrasta çəkirik. Tema istiqamətini
   `a11y.js` müəyyən edir (fonun parlaqlığına baxır) — MudBlazor qaranlıq
   rejimi qlobal sinif ilə bildirmir, ona görə özümüz hesablayırıq. */
html.a11y-contrast-high:not(.a11y-dark) { --mud-palette-text-primary: #000000; }
html.a11y-contrast-high.a11y-dark       { --mud-palette-text-primary: #ffffff; }

/* Kartların sərhədi görünsün — kontrast rejimində "üzən" kart pis oxunur. */
html.a11y-contrast-high .mud-paper,
html.a11y-contrast-high .mud-card {
    border: 1px solid var(--mud-palette-divider);
}


/* ═══════════════════════════════════════════════════════════
   5. RƏNGDƏN ASILILIĞI AZALT
   ═══════════════════════════════════════════════════════════
   ⚠️ Rəng korluğunu CSS filtri ilə "düzəltmək" MÜMKÜN DEYİL.
      Bu rejimin gördüyü iş: məlumatın YALNIZ rənglə çatdırılmasını
      dayandırmaq — forma və qalınlıq da fərq yaratsın. */

html.a11y-color-safe .mud-chip {
    border: 2px solid currentColor !important;
    font-weight: 600 !important;
}

html.a11y-color-safe .mud-alert {
    border-left: 6px solid currentColor !important;
}

/* Status nöqtələri (badge) tək başına rəngdir — sərhəd forma qazandırır. */
html.a11y-color-safe .mud-badge {
    outline: 2px solid var(--mud-palette-surface);
    outline-offset: 0;
}

/* Cədvəldə seçili sətir yalnız fon rəngi ilə seçilirdi. */
html.a11y-color-safe .mud-table-row.mud-selected-row,
html.a11y-color-safe .mud-selected-item {
    box-shadow: inset 4px 0 0 0 currentColor;
}


/* ═══════════════════════════════════════════════════════════
   6. HƏRƏKƏTİ AZALT
   ═══════════════════════════════════════════════════════════ */

html.a11y-reduce-motion *,
html.a11y-reduce-motion *::before,
html.a11y-reduce-motion *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
}

/* İstifadəçi OS səviyyəsində istəyibsə ayar olmadan da hörmət edirik. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}


/* ═══════════════════════════════════════════════════════════
   7. LİNKLƏRİ ALTDAN XƏTLƏ
   ═══════════════════════════════════════════════════════════
   Link mətndən YALNIZ rənglə fərqlənməməlidir (WCAG 1.4.1). */

html.a11y-underline-links a:not(.mud-button-root):not(.mud-nav-link),
html.a11y-underline-links .mud-link {
    text-decoration: underline !important;
    text-underline-offset: .2em;
}


/* ═══════════════════════════════════════════════════════════
   8. KLAVİATURA FOKUSU
   ═══════════════════════════════════════════════════════════
   `:focus-visible` seçilib, `:focus` YOX — əks halda siçanla hər klikdə
   çərçivə çıxır və istifadəçi onu "qırıq dizayn" kimi qəbul edir. */

html.a11y-focus-visible :focus-visible {
    outline: 3px solid var(--mud-palette-primary) !important;
    outline-offset: 2px !important;
    border-radius: 3px;
}


/* ═══════════════════════════════════════════════════════════
   9. ÜZƏN DÜYMƏ
   ═══════════════════════════════════════════════════════════
   z-index QƏSDƏN 1300-dür: MudBlazor dialoqundan (1400) və
   snackbar-dan (1500) AŞAĞI — dialoq açıqkən düymə onun üstünə çıxmamalıdır. */

.a11y-launcher {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1300;
}

@media print {
    .a11y-launcher { display: none !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   10. RƏNG GÖRMƏSİ DÜZƏLİŞİ (12.08.2026)
   ═══════════════════════════════════════════════════════════════════════════
   🔴 NİYƏ ƏLAVƏ OLUNDU: paneldəki «rəng korluğu» seçimi rəngə TOXUNMURDU —
      yalnız çiplərə kənar əlavə edirdi. İstifadəçi «rəng korluğu heç işləmir»
      deyəndə haqlı idi.

   ⚠️ FİLTR MƏHZ `html`-Ə VERİLİR, `body`-yə YOX.
      `filter` adətən `position: fixed` uşaqlar üçün yeni konteyner blok
      yaradır — o zaman yan panel və yuxarı zolaq səhifə ilə birlikdə
      sürüşərdi. Spesifikasiya KÖK elementi bu qaydadan istisna edir.

   Filtr tərifləri (`feColorMatrix`) `a11y.js` tərəfindən BİR DƏFƏ DOM-a
   əlavə olunur — istifadə edilməyəndə heç nə yaranmır.
   ═══════════════════════════════════════════════════════════════════════════ */
html.a11y-cvd-protan {
    filter: url(#a11y-cvd-protan);
}

html.a11y-cvd-deutan {
    filter: url(#a11y-cvd-deutan);
}

html.a11y-cvd-tritan {
    filter: url(#a11y-cvd-tritan);
}

html.a11y-cvd-mono {
    filter: url(#a11y-cvd-mono);
}


/* ═══════════════════════════════════════════════════════════════════════════
   11. BÖYÜK KURSOR
   ═══════════════════════════════════════════════════════════════════════════
   Kursor SVG-dir (data URI) — xarici fayl yoxdur, 0 əlavə sorğu.
   `!important` şərtdir: MudBlazor komponentləri öz `cursor` dəyərlərini
   birbaşa yazır (məs. `cursor: pointer`), əks halda yalnız boş sahədə işləyər. */
html.a11y-big-cursor,
html.a11y-big-cursor * {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'><path d='M5 2 L5 20 L9.5 15.5 L12.5 22 L15.5 20.5 L12.5 14.5 L19 14.5 Z' fill='white' stroke='black' stroke-width='1.5' stroke-linejoin='round'/></svg>") 4 2, auto !important;
}

    /* Klikləyən elementlərdə «əl» forması saxlanılır — yalnız böyüdülür. */
    html.a11y-big-cursor a,
    html.a11y-big-cursor button,
    html.a11y-big-cursor [role="button"],
    html.a11y-big-cursor .mud-button-root,
    html.a11y-big-cursor .mud-table-row {
        cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'><path d='M9 2 C9 2 8 2 8 3.5 L8 12 L6.5 10.5 C6 10 5 10 4.5 10.7 C4 11.4 4.2 12 4.6 12.6 L8.5 19 C9 19.8 9.8 20 10.5 20 L16 20 C17 20 17.6 19.4 17.8 18.5 L18.8 13 C19 11.8 18.4 11 17.4 10.8 L13 10 L13 3.5 C13 2 12 2 12 2 Z' fill='white' stroke='black' stroke-width='1.2' stroke-linejoin='round'/></svg>") 10 2, pointer !important;
    }


/* ═══════════════════════════════════════════════════════════════════════════
   12. RAHAT OXUMA (disleksiya dostu)
   ═══════════════════════════════════════════════════════════════════════════
   ⚠️ XARİCİ ŞRİFT YÜKLƏNMİR. «OpenDyslexic» gətirmək ~120 KB əlavə sorğudur
      və effektinin elmi sübutu mübahisəlidir. Sübutlanmış hissə ARALIQ və
      DÜZÜLÜŞDÜR — məhz onu edirik.

   Blok düzülüş (`justify`) sözlər arasında dəyişkən boşluq yaradır («çay»
   effekti) və disleksiyada sətri itirməyin əsas səbəbidir → sola düzülür. */
html.a11y-readable-font body,
html.a11y-readable-font .mud-typography,
html.a11y-readable-font p,
html.a11y-readable-font span,
html.a11y-readable-font td,
html.a11y-readable-font th,
html.a11y-readable-font li,
html.a11y-readable-font label,
html.a11y-readable-font input,
html.a11y-readable-font textarea {
    font-family: Verdana, Tahoma, 'Segoe UI', sans-serif !important;
    letter-spacing: .06em !important;
    word-spacing: .16em !important;
}

html.a11y-readable-font p,
html.a11y-readable-font li,
html.a11y-readable-font td {
    text-align: start !important;
    line-height: 1.75 !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   13. OXUMA XƏTTİ
   ═══════════════════════════════════════════════════════════════════════════
   Zolağın özü `a11y.js`-də yaradılır və kursorla birlikdə hərəkət edir.
   `pointer-events: none` ŞƏRTDİR — əks halda zolaq bütün klikləri udardı. */
.a11y-guide-bar {
    position: fixed;
    left: 0;
    right: 0;
    height: 36px;
    z-index: 2147483000; /* MudBlazor dialoqundan da yuxarı */
    pointer-events: none;
    background: color-mix(in srgb, var(--mud-palette-warning) 18%, transparent);
    border-top: 2px solid var(--mud-palette-warning);
    border-bottom: 2px solid var(--mud-palette-warning);
    transition: none; /* kursoru gecikmə ilə izləməməlidir */
}