html, body {
    margin: 0;
    font-family: 'Segoe UI', Roboto, sans-serif;
}

/* ══════════════════════════════════════════════════
   CUSTOM SCROLLBAR — Premium asisDENT dizaynı
   ══════════════════════════════════════════════════ */

/* === Chromium (Chrome, Edge, Opera, Brave) === */

/* Scrollbar eni */
::-webkit-scrollbar {
    width: 6px !important;
    height: 6px !important;
}

/* Track — tam şəffaf */
::-webkit-scrollbar-track {
    background: transparent !important;
    border: none !important;
}

/* Thumb — asisDENT teal rəngi */
::-webkit-scrollbar-thumb {
    background: rgba(15, 118, 110, 0.3) !important;
    border-radius: 10px !important;
    border: none !important;
    min-height: 28px !important;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(15, 118, 110, 0.55) !important;
}

::-webkit-scrollbar-thumb:active {
    background: rgba(15, 118, 110, 0.7) !important;
}

/* === Dark mode === */
html.a11y-dark ::-webkit-scrollbar-thumb {
    background: rgba(45, 212, 191, 0.25) !important;
}

html.a11y-dark ::-webkit-scrollbar-thumb:hover {
    background: rgba(45, 212, 191, 0.45) !important;
}

html.a11y-dark ::-webkit-scrollbar-thumb:active {
    background: rgba(45, 212, 191, 0.6) !important;
}

/* === Firefox === */
* {
    scrollbar-width: thin !important;
    scrollbar-color: rgba(15, 118, 110, 0.3) transparent !important;
}

html.a11y-dark * {
    scrollbar-color: rgba(45, 212, 191, 0.25) transparent !important;
}

/* ══════════════════════════════════════════════════
   LAYOUT FLASH PREVENTION — Login səhifəsində arxa
   planın görünməsinin qarşısını alır
   ══════════════════════════════════════════════════ */

/* Blazor yüklənənə qədər body-də heç nə görünməsin */
body:not(.blazor-loaded) {
    background: #f8fafc !important;
}
body:not(.blazor-loaded) .mud-layout,
body:not(.blazor-loaded) .mud-drawer,
body:not(.blazor-loaded) .mud-appbar {
    visibility: hidden !important;
}

/* Login səhifəsinin özü həmişə full-screen olsun */
.login-shell {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99998 !important;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
}

/* asisdent-premium-layout da full-screen olsun */
.asisdent-premium-layout {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99997 !important;
    background: #f8fafc !important;
}

/* === Layout Utility Classes === */
.d-flex {
    display: flex !important;
}

.justify-center {
    justify-content: center !important;
}

.align-center {
    align-items: center !important;
}

.mb-6 {
    margin-bottom: 2rem !important;
}

.ml-4 {
    margin-left: 1.5rem !important;
}

.text-decoration-none {
    text-decoration: none !important;
}

/* === NAVBAR (AppBar) GLOBAL STILLER === */
.mud-appbar {
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.18) !important;
}

/* === SIDEBAR KÖLGƏSİ === */
.mud-drawer {
    box-shadow: 2px 0 20px rgba(0, 0, 0, 0.08) !important;
}

/* === COLD START / LOADING SCREEN === */
.cold-start-screen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #f8fafc;
    font-family: 'Segoe UI', Roboto, sans-serif;
    z-index: 99999;
}

.premium-loader-container {
    position: relative;
    width: 140px;
    height: 140px;
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(15, 118, 110, 0.15);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    margin-bottom: 24px;
    border: 1px solid rgba(15, 118, 110, 0.1);
}

.premium-loader-logo {
    width: 100px;
    height: auto;
    object-fit: contain;
    z-index: 1;
}

/* Skaner effekti */
.scanner-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: #0f766e;
    box-shadow: 0 0 15px #0f766e, 0 0 30px #2dd4bf;
    animation: scan 2.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    z-index: 2;
}

@keyframes scan {
    0% {
        top: -10%;
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        top: 110%;
        opacity: 0;
    }
}

.loading-text {
    color: #0f766e;
    font-weight: 700;
    letter-spacing: 3px;
    font-size: 13px;
    text-transform: uppercase;
    animation: pulse-text 2s infinite ease-in-out;
}

@keyframes pulse-text {
    0%, 100% {
        opacity: 0.7;
    }
    50% {
        opacity: 1;
    }
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* =============================================
   PENMAN BLAZOR QUILL / QUILL EDITOR — GLOBAL
   ============================================= */

/* Quill editor content sahəsi — minimum hündürlük */
.ql-editor {
    min-height: 180px !important;
}

/* Qeyd redaktoru (CustomerDetailDialog) içində editor */
.mud-dialog .ql-editor {
    min-height: 140px !important;
}

/* Toolbar və container-in qonşuluq border-radius */
.ql-toolbar {
    border-radius: 8px 8px 0 0;
}

.ql-container {
    border-radius: 0 0 8px 8px;
}

/* =============================================
   QARANLIQ MOD (DARK MODE) DƏSTƏYİ
   ============================================= */

/* MudBlazor dark mode: html.a11y-dark tətbiq edilir */
html.a11y-dark .ql-toolbar {
    background-color: #2d2d2d !important;
    border-color: #444 !important;
}

html.a11y-dark .ql-container {
    border-color: #444 !important;
    background-color: #1e1e1e !important;
}

html.a11y-dark .ql-editor {
    color: #e0e0e0 !important;
}

/* Toolbar butonları — ağ rəngdə görünsün */
html.a11y-dark .ql-toolbar button .ql-stroke,
html.a11y-dark .ql-toolbar .ql-picker-label .ql-stroke {
    stroke: #ccc !important;
}

html.a11y-dark .ql-toolbar button .ql-fill,
html.a11y-dark .ql-toolbar .ql-picker-label .ql-fill {
    fill: #ccc !important;
}

html.a11y-dark .ql-toolbar button:hover .ql-stroke,
html.a11y-dark .ql-toolbar .ql-picker-label:hover .ql-stroke {
    stroke: #fff !important;
}

html.a11y-dark .ql-toolbar button:hover .ql-fill,
html.a11y-dark .ql-toolbar .ql-picker-label:hover .ql-fill {
    fill: #fff !important;
}

html.a11y-dark .ql-toolbar button.ql-active .ql-stroke {
    stroke: #0f766e !important;
}

html.a11y-dark .ql-toolbar button.ql-active .ql-fill {
    fill: #0f766e !important;
}

/* Dropdown pickers (header, color, background) */
html.a11y-dark .ql-toolbar .ql-picker {
    color: #ccc !important;
}

html.a11y-dark .ql-toolbar .ql-picker-label {
    border-color: #555 !important;
}

html.a11y-dark .ql-toolbar .ql-picker-label:hover {
    color: #fff !important;
}

html.a11y-dark .ql-toolbar .ql-picker-options {
    background-color: #2d2d2d !important;
    border-color: #444 !important;
}

/* Picker options içində seçimlər */
html.a11y-dark .ql-toolbar .ql-picker-item {
    color: #ccc !important;
}

html.a11y-dark .ql-toolbar .ql-picker-item:hover {
    color: #fff !important;
}

/* Placeholder text */
html.a11y-dark .ql-editor.ql-blank::before {
    color: #666 !important;
}

/* Toolbar active button background (basılı halda) */
html.a11y-dark .ql-toolbar button.ql-active {
    background-color: rgba(15, 118, 110, 0.2) !important;
}

/* Color picker düyməsi üçün SVG rəngləri */
html.a11y-dark .ql-toolbar .ql-color-picker .ql-picker-label svg,
html.a11y-dark .ql-toolbar .ql-background-picker .ql-picker-label svg {
    filter: brightness(0) invert(0.8);
}

/* ══════════════════════════════════════════════════
   GLOBAL SEARCH DIALOG — Modern SaaS tərzi
   ══════════════════════════════════════════════════ */

.search-dialog {
    border-radius: 16px !important;
    overflow: hidden !important;
}

.search-dialog .mud-dialog-content {
    padding: 16px 20px 12px !important;
}

.search-input .mud-input-outlined-border {
    border-radius: 12px !important;
}

.search-results-container {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 360px;
    overflow-y: auto;
}

.search-result-item {
    padding: 10px 14px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.search-result-item:hover {
    background: var(--mud-palette-background-grey);
}

/* Qaranlıq modda */
html.a11y-dark .search-result-item:hover {
    background: rgba(255, 255, 255, 0.05);
}


/* ══════════════════════════════════════════════════════════════
   XƏTA SƏHİFƏLƏRİ (404 / ümumi xəta)  —  2026-07-30
   Pages/Errors/NotFoundPage.razor · Pages/Errors/ErrorPage.razor
   ══════════════════════════════════════════════════════════════ */
.error-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 70vh;
    padding: 32px 24px;
    font-family: 'Segoe UI', Roboto, sans-serif;
}

/* Cold-start ekranındakı loqo qutusunun eynisi — vizual davamlılıq üçün */
.error-logo-box {
    width: 120px;
    height: 120px;
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(15, 118, 110, 0.15);
    border: 1px solid rgba(15, 118, 110, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

.error-logo {
    width: 86px;
    height: auto;
    object-fit: contain;
}

.error-code {
    font-size: 64px;
    font-weight: 800;
    line-height: 1;
    color: #0f766e;
    letter-spacing: 2px;
    margin-bottom: 8px;
}

.error-code--warn {
    color: #b45309;
}

.error-title {
    font-size: 20px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 10px;
}

.error-text {
    font-size: 14px;
    line-height: 1.7;
    color: #475569;
    max-width: 460px;
    margin-bottom: 28px;
}

.error-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

/* Dark mode */
html.a11y-dark .error-logo-box {
    background: #1e293b;
    border-color: rgba(45, 212, 191, 0.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

html.a11y-dark .error-code {
    color: #2dd4bf;
}

html.a11y-dark .error-code--warn {
    color: #fbbf24;
}

html.a11y-dark .error-title {
    color: #f1f5f9;
}

html.a11y-dark .error-text {
    color: #94a3b8;
}

/* Kiçik ekranlar */
@media (max-width: 600px) {
    .error-code { font-size: 48px; }
    .error-logo-box { width: 96px; height: 96px; }
    .error-logo { width: 68px; }
    .error-actions { flex-direction: column; width: 100%; max-width: 260px; }
}

/* ─────────────────────────────────────────────────────────────
   TƏQVİM — bağlı gün/saat xanaları

   ⚠️ Bu qaydalar QLOBALDIR, scoped CSS-də ola bilməz. Sinifi
   `MudCalendar.AdditionalDateTimeClassesFunc` Heron-un ÖZ xana div-inə
   yazır; həmin element bizim `.razor`-da yazılmadığı üçün scope atributu
   daşımır və `AppointmentCalendar.razor.css`-dəki qayda ona çatmır.
   (Eyni səbəb: .claude/instructions.md §11.1 — portal komponentləri.)
   ───────────────────────────────────────────────────────────── */
.apc-cell--blocked {
    background-image: repeating-linear-gradient( 45deg, transparent, transparent 5px, color-mix(in srgb, #ef4444 8%, transparent) 5px, color-mix(in srgb, #ef4444 8%, transparent) 10px );
    cursor: not-allowed !important;
}

    .apc-cell--blocked:hover {
        background-image: repeating-linear-gradient( 45deg, transparent, transparent 5px, color-mix(in srgb, #ef4444 14%, transparent) 5px, color-mix(in srgb, #ef4444 14%, transparent) 10px );
    }

/* ─── Gün başlıqları — tema rəngi ilə ───
   Standart halda başlıqlar adi boz mətndir və günü seçmək çətindir. */
.mud-cal-week-header,
.mud-cal-grid-header {
    background: color-mix(in srgb, var(--mud-palette-primary) 7%, var(--mud-palette-surface));
    border-bottom: 2px solid color-mix(in srgb, var(--mud-palette-primary) 40%, transparent);
}

    /* ⚠️ Selektor `.mud-calendar` ilə başlayır ÇÜNKİ Heron-da
       `.mud-calendar .mud-cal-grid > div { font-weight: 400 }` var və o, sadə
       `.mud-cal-grid-header > div`-dən daha spesifikdir — qalın şrift tutmurdu. */
    .mud-calendar .mud-cal-week-header > div,
    .mud-calendar .mud-cal-grid-header > div {
        padding: 9px 4px;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .4px;
        text-transform: uppercase;
        color: color-mix(in srgb, var(--mud-palette-primary) 85%, var(--mud-palette-text-primary));
    }

/* ─── Bugünkü sütun ───
   ⚠️ Heron bugünkü xanalara TAM DOYĞUN tema rəngi ilə kənar çəkir; nəticədə
   sütun "seçilmiş kimi" görünür və cari vaxt xətti həmin kənardan seçilmir.
   Kənar zəiflədilir, fərq isə FONA verilir — sakit, lakin aydın.
   Bugünkü xanaların `mud-cal-week-not-today` sinfi OLMUR. */
.mud-cal-week-cell:not(.mud-cal-week-not-today):not(.mud-cal-time-cell) {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 7%, transparent);
    border-color: color-mix(in srgb, var(--mud-palette-primary) 22%, transparent) !important;
}

/* ─── Cari vaxt xətti ───
   Elementin öz `style`-ı `border: 1px solid var(--mud-palette-gray-default)`
   yazır — boz və qonşu xanaların kənarından seçilmir. Kənar tamamilə silinib
   yerinə tünd-qırmızı zolaq + sol nöqtə qoyulur. */
hr.mud-cal-current-time {
    border: none !important;
    height: 2px !important;
    background: #e11d48;
    opacity: 1;
    z-index: 5;
}

    hr.mud-cal-current-time::before {
        content: "";
        position: absolute;
        left: 0;
        top: -3.5px;
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: #e11d48;
    }

/* ─── Şəbəkə xətləri ───
   Standart kənarlar `rgba(0,0,0,.118)` idi — brauzer 100%-dən kiçik miqyasda
   (məs. 80%) olanda bu qədər zəif xətlər sub-piksel yuvarlaqlaşmada yer-yer
   itir və şəbəkə "qırıq-qırıq" görünür.

   ⚠️ `var(--mud-palette-lines-default)` İŞƏ YARAMIR — onun dəyəri məhz
   `rgba(0,0,0,0.118)`-dir, yəni Heron-un işlətdiyinin eynisi. Rəng
   `--mud-palette-text-primary`-dən törədilir ki, HƏM güclü olsun, HƏM də
   qaranlıq temada özü uyğunlaşsın.

   SAAT xətti bütöv və güclü, YARIM SAAT xətti nöqtəli və zəif — bu fərq
   şəbəkəni "qəsdən belədir" kimi oxudur. */
.mud-cal-week-cell {
    border-top-color: color-mix(in srgb, var(--mud-palette-text-primary) 17%, transparent) !important;
    border-right-color: color-mix(in srgb, var(--mud-palette-text-primary) 13%, transparent) !important;
}

.mud-cal-week-cell-half {
    border-top-style: dotted !important;
    border-top-color: color-mix(in srgb, var(--mud-palette-text-primary) 9%, transparent) !important;
}

/* Saat sütunu — rəqəmlər şəbəkədən bir addım geri dursun. */
.mud-cal-time-cell {
    color: var(--mud-palette-text-secondary);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

/* ─── Randevu kartının sol/sağ boşluğu (12.08.2026) ───
   Kart əvvəl xananın kənarına yapışırdı: sol tərəfdə saat sütununun xətti,
   sağda isə növbəti günün kənarı kartın konturuna toxunurdu — bloklar
   şəbəkənin bir hissəsi kimi görünürdü, ayrıca kart kimi yox.

   ⚠️ BOŞLUQ MƏHZ BURADA, Heron-un sarğısında verilir — kartın özünə
      (`.apc-item`) `margin` YAZMA. Kitabxana paralel randevuların enini və
      sol sürüşməsini `left/width` faizləri ilə hesablayır; kartda margin
      olanda o hesab pozulur və iki eyni vaxtlı randevu üst-üstə düşür.

   ⚠️ QLOBAL fayldadır, çünki `.mud-cal-cell-template` kitabxananın
      elementidir — scoped atribut ona düşmür. */
.mud-calendar .mud-cal-cell-template {
    /* 115 — sistem sahibi: «kartların sağ-sol borderlərə birazca boşluq
       qoyaq, üzür effekti olsun».
       5px → 8px. Kölgə (.apc-item box-shadow) onsuz da var idi, lakin kart
       şəbəkə xəttinə 5px yaxın olanda kölgə xəttin üstünə düşür və görünmür —
       yəni «üzmə» hissi kölgənin YOX olmasından deyil, ona YER olmamasından
       itirdi. */
    padding: 3px 8px;
}

/* Ay görünüşündə xanalar dardır — orada boşluq 3px-ə enir ki, kartın
   içindəki mətnə yer qalsın. */
.mud-cal-month-view .mud-cal-cell-template {
    padding: 2px 5px;
}

/* ─── Toolbar input-ları ───
   Tarix seçici, həkim və status süzgəcləri EYNİ hündürlükdə olmalıdır ki,
   toolbar tək düz sətir kimi oxunsun.
   ⚠️ Qayda QLOBALDIR: tarix seçici `AppointmentCalendar.razor`-dan, süzgəclər
   isə `CalendarPage.razor`-dan gəlir — iki ayrı komponent, iki ayrı scope. */
.apc-input .mud-input-control {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.apc-input .mud-input {
    height: 38px !important;
}

/* ─── 115: süzgəc enləri ───
   Əvvəl hər ikisi markup-da inline `Style="width: …px"` idi. İki zərəri
   vardı: (a) telefonda sabit en sətri daşdırırdı, (b) eni dəyişmək üçün
   `.razor` faylına girmək lazım gəlirdi. İndi qayda burada və
   `max-width` ilə birlikdədir — dar ekranda seçici özü kiçilir. */
.apc-toolbar__status {
    width: 190px;
    max-width: 100%;
}

.cal-head__doctor {
    width: 210px;
    max-width: 100%;
}

/* Başlıq sətrində seçici düymə ilə eyni hündürlükdə dursun. */
.cal-head__actions .apc-input .mud-input {
    height: 40px !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   SEÇİCİ DİALOQU (MudTimePicker / MudDatePicker · PickerVariant.Dialog)
   ══════════════════════════════════════════════════════════════════════════
   12.08.2026 — /availability ekranındakı «dialoq yarımçıq açılır, saat
   seçimi telefonda ekrandan kənarda qalır» problemi.

   SƏBƏB (MudBlazor 9.7 daxili ölçüləri):
     .mud-picker-content   → min-width: 310px · min-height: 305px · overflow: hidden
     .mud-picker-toolbar   → height: 100px
     .mud-picker-time-clock→ 260 × 260px
   Yəni dialoq ~310 × 470px yer tələb edir. 360px enli telefonda dialoq
   qutusuna sığmır və `overflow: hidden` artıq hissəni GÖSTƏRMİR — kəsir.
   Alçaq ekranda (landşaft) isə aşağıdakı «Təsdiq» düymələri kəsilirdi.

   ⚠️ NİYƏ QLOBAL: dialoq `<body>` altında, MudDialogProvider qatında
      render olunur — heç bir səhifənin scoped CSS-i ora çatmır.

   ⚠️ NİYƏ `width/height` DEYİL, `transform: scale`: ciferblatdakı rəqəmlər
      mərkəzdən sabit PİKSEL məsafəsi ilə (`translate(x, y)`) yerləşdirilir.
      Konteynerin enini kiçiltsək rəqəmlər dairənin xaricinə düşür.
      Miqyas isə hər şeyi birlikdə kiçildir. Sonrakı `margin-bottom` mənfi
      dəyəri `transform`-un boş qoyduğu yeri yığışdırır.
   ────────────────────────────────────────────────────────────────────────── */
.mud-dialog-container .mud-picker-container {
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 32px);
    /* Kəsmək əvəzinə sürüşdür — heç bir düymə əlçatmaz qalmasın. */
    overflow: auto;
}

/* ──────────────────────────────────────────────────────────────────────────
   🔴 21.09.2026 — «SAAT SELEKTORLARINDA MUDBLAZORUN SAATI YARIMÇIQ GÖSTƏRİR»
   ──────────────────────────────────────────────────────────────────────────
   Sistem sahibinin ekran görüntüsü (masaüstü, /availability):
   başlıq zolağı — «19:00» yazılan yaşıl sahə — dialoqun YALNIZ sol ~40 %-ni
   tuturdu. Rəqəm ağ rəngdədir, yaşıl zolaq bitən yerdən sonra AĞ fonda
   qalırdı: ekranda «19:0» kimi, yarımçıq görünürdü.

   OLCULEN VEZIYYET: zolağın eni MƏZMUNA görə hesablanırdı (fit-content),
   dialoqun eni isə ciferblata görə (260 px + kənarlar). İki fərqli ölçü →
   fon mətnin altında bitirdi.

   ⚠️ RƏNG DƏYİŞDİRİLMİR: ağ mətn qəsdəndir (yaşıl fonda kontrast). Düzəliş
      FONU mətnin altına qədər uzadır — tərsi olsaydı seçilmiş saatın
      vurğusu itərdi.

   ⚠️ QLOBAL OLMALIDIR: dialoq `MudDialogProvider` qatında, `<body>` altında
      render olunur — heç bir səhifənin scoped CSS-i ora çatmır (yuxarıdakı
      blokun eyni səbəbi).

   ⚠️ Yalnız `.mud-dialog-container` daxilində: `PickerVariant.Inline`
      (təqvim başlığındakı tarix seçicisi) başqa düzümdədir və ona
      toxunulmur. */
.mud-dialog-container .mud-picker-toolbar {
    width: 100%;
    box-sizing: border-box;
}

/* Rəqəm sətri sınmır və zolağın içində qalır. */
.mud-dialog-container .mud-picker-toolbar .mud-button-root,
.mud-dialog-container .mud-picker-toolbar .mud-typography {
    white-space: nowrap;
}

/* Alçaq ekran: başlıq zolağı 100px yer yeyir, gərək deyil. */
@media (max-height: 640px) {
    .mud-dialog-container .mud-picker-toolbar {
        height: 68px;
    }
}

/* Dar telefon (≤ 400px): 310px-lik minimum eni buraxırıq və ciferblatı
   kiçildirik. 260px × 0.84 ≈ 218px → 360px ekrana rahat sığır. */
@media (max-width: 400px) {
    .mud-dialog-container .mud-picker-content {
        min-width: 0;
    }

    .mud-dialog-container .mud-picker-time-clock {
        transform: scale(.84);
        transform-origin: top center;
        margin-bottom: -42px; /* 260 × 0.16 ≈ 42px — boşalan yeri yığışdırır */
    }
}

/* Çox dar telefon (≤ 340px) — köhnə cihazlar. */
@media (max-width: 340px) {
    .mud-dialog-container .mud-picker-time-clock {
        transform: scale(.72);
        margin-bottom: -73px; /* 260 × 0.28 ≈ 73px */
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   UTILITY QATI — 14.08.2026-da əlavə edildi
   ══════════════════════════════════════════════════════════════════════════
   🔴 NƏ SƏHV İDİ:
   Markup-da 570-dən çox yerdə `fw-bold`, `text-uppercase`, `shadow-sm`,
   `transition-all`, `h-100`, `opacity-50` sinifləri işlədilirdi. Bu adlar
   BOOTSTRAP-dandır. `wwwroot/lib/bootstrap` qovluğu repoda var (8.4 MB),
   lakin `index.html`-də ona bir dənə də <link> YOXDUR — yəni yüklənmir.
   MudBlazor 9.7 isə bu adları heç vaxt təyin etməyib (yalnız `rounded-*`,
   `cursor-pointer`, `border-l-*`, `d-flex`, `pa-*`, `gap-*` var).

   Nəticə: qalın yazılmalı olan HƏR mətn adi çəkidə, kölgəli olmalı hər kart
   düz, KPI rəqəmləri isə bir-birindən fərqlənmədən render olunurdu.
   Yəni nəzərdə tutulan vizual iyerarxiya ekranda ÜMUMİYYƏTLƏ yox idi.

   ⚠️ BOOTSTRAP-I GERİ QAYTARMAQ HƏLL DEYİL. Onun `reboot` qatı MudBlazor-un
      öz baza stilləri ilə toqquşur (input hündürlüyü, düymə fokusu, cədvəl
      sərhədləri) və bir problemi düzəldib on dənəsini yaradır. Ona görə
      YALNIZ həqiqətən işlədilən adlar, MudBlazor dəyişənləri üzərində.

   ⚠️ BURAYA SABİT RƏNG YAZILMIR. Rəng lazımdırsa MudBlazor-un öz propu
      işlədilir: `<MudText Color="Color.Success">`, `Class="text-success"` YOX.
      Səbəb: sinif qaranlıq rejimdən xəbərsizdir, prop isə palitradan gəlir.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Mətn çəkisi ── */
.fw-bold { font-weight: 600; }
.fw-semibold { font-weight: 500; }
.fw-normal { font-weight: 400; }

/* ── Mətn forması ──
   `letter-spacing` böyük hərflərlə yazılmış qısa etiketlər üçün vacibdir:
   onsuz «TOTAL CUSTOMERS» kimi başlıqlar sıxılıb oxunmur. */
.text-uppercase { text-transform: uppercase; letter-spacing: .04em; }
.text-lowercase { text-transform: lowercase; }
.text-capitalize { text-transform: capitalize; }

/* ── Ölçü ──
   `h-100` xüsusilə vacibdir: boş vəziyyət blokları («Sorğu yoxdur») onunla
   kartın ortasına düşür. İşləmədiyi üçün yuxarıya yapışıb qalırdı. */
.h-100 { height: 100%; }
.w-100 { width: 100%; }
.mh-100 { max-height: 100%; }
.mw-100 { max-width: 100%; }

/* ── Şəffaflıq (sönük placeholder mətnləri üçün) ──
   İşləmədiyi üçün boş vəziyyət mətnləri tam qatılıqda çıxırdı və
   istifadəçi onları «xəta mesajı» kimi oxuyurdu. */
.opacity-25 { opacity: .25; }
.opacity-50 { opacity: .5; }
.opacity-70 { opacity: .7; }

/* ── Kölgə ──
   MudBlazor-un öz elevation şkalasından gəlir ki, qaranlıq rejimdə də
   düzgün olsun (Mud dark-da kölgəni özü gücləndirir). */
.shadow-sm { box-shadow: var(--mud-elevation-1); }
.shadow-md { box-shadow: var(--mud-elevation-4); }
.shadow-none { box-shadow: none; }

/* ── Keçid ──
   Kartların hover halı üçün. Aşağıda hərəkətə həssas istifadəçilər
   üçün söndürülür. */
.transition-all { transition: all .2s cubic-bezier(.4, 0, .2, 1); }
.transition-colors { transition: background-color .2s ease, color .2s ease, border-color .2s ease; }

/* Kartın üzərinə gələndə yüngül qalxma — «bu sətir kliklənir» siqnalı.
   `hover-card` markup-da işlənirdi, təyinatı isə yox idi. */
.hover-card { transition: transform .18s ease, box-shadow .18s ease; }
.hover-card:hover { transform: translateY(-2px); box-shadow: var(--mud-elevation-6); }

/* ⚠️ Vestibulyar pozuntusu olan istifadəçi üçün hərəkət ağrı verə bilər.
   Sistem ayarı «hərəkəti azalt»dırsa, keçid tamamilə dayanır — görünüş
   dəyişmir, yalnız animasiya gedir. */
@media (prefers-reduced-motion: reduce) {
    .transition-all,
    .transition-colors,
    .hover-card { transition: none; }
    .hover-card:hover { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   SEMANTİK RƏNG SİNİFLƏRİ
   ══════════════════════════════════════════════════════════════════════════
   Markup-da `Class="fw-bold text-success"` kimi yazılışlar var. Bu adlar da
   Bootstrap-dandır və heç yerdə təyin edilməmişdi — yəni pasiyent/xidmət
   siyahılarındakı DÖRD KPI kartının rəqəmi eyni rəngdə çıxırdı, halbuki
   dördü fərqli məna daşıyır.

   🔴 HƏR DƏYƏR PALİTRADAN GƏLİR, SABİT HEX DEYİL.
      Səbəb sadədir: sabit yazılsaydı qaranlıq rejimdə yenə oxunmazdı və
      istifadəçi tema rəngini dəyişəndə bu rəqəmlər köhnə rəngdə qalardı.

   ⚠️ YENİ KOD YAZANDA bu siniflər yox, MudBlazor-un öz propu üstündür:
          <MudText Color="Color.Success">          ✅ tövsiyə olunan
          <MudText Class="text-success">           ⚠️ işləyir, köhnə üsul
      Bu blok MÖVCUD 40 çağırış yerini yaşatmaq üçündür — hamısını əl ilə
      dəyişmək eyni riski (bir yeri unutmaq) yenidən yaradardı.
   ══════════════════════════════════════════════════════════════════════════ */

.text-success { color: var(--mud-palette-success); }
.text-warning { color: var(--mud-palette-warning); }
.text-error { color: var(--mud-palette-error); }
.text-danger { color: var(--mud-palette-error); }
.text-info { color: var(--mud-palette-info); }
.text-tertiary { color: var(--mud-palette-tertiary); }

/* `text-dark` adı yanıldıcıdır — mənası «əsas mətn rəngi»dir, «qara» deyil.
   Sabit qara yazılsaydı qaranlıq rejimdə mətn görünməzdi. */
.text-dark { color: var(--mud-palette-text-primary); }
.text-muted { color: var(--mud-palette-text-secondary); }

/* Tailwind sintaksisindən qalma boz tonlar. Tailwind bu layihədə YOXDUR —
   iki mənalı ton qalır: əsas mətn və ikinci dərəcəli mətn. */
.text-gray-900, .text-gray-800, .text-gray-700 { color: var(--mud-palette-text-primary); }
.text-gray-600, .text-gray-500, .text-gray-400 { color: var(--mud-palette-text-secondary); }
.bg-gray-50, .bg-gray-100 { background-color: var(--mud-palette-background-grey); }
.border-gray-200 { border-color: var(--mud-palette-lines-default); }

/* Ölçü — Tailwind adları, MudBlazor `Typo` ilə əvəz edilməlidir, lakin
   mövcud çağırış yerləri sınmasın. */
.text-sm { font-size: .875rem; }
.text-xs { font-size: .75rem; }
.font-bold { font-weight: 600; }
.font-semibold { font-weight: 500; }

/* ══════════════════════════════════════════════════════════════════════════
   BOŞ VƏZİYYƏT (Features/Shared/EmptyState.razor)
   ══════════════════════════════════════════════════════════════════════════
   🔴 QLOBAL olmalıdır, scoped yox: komponent həm səhifədə, həm MudBlazor
      dialoqunun içində işlənir. Dialoq <body> altında AYRI qatda render
      olunur və scoped CSS ona çatmır (eyni səbəb `lab.css`, `upsell.css`
      və `legal.css` üçün də keçərlidir).

   ⚠️ Rənglərin HAMISI palitradandır — bu blok ən çox yeni klinikanın
      gördüyü ekrandır və qaranlıq rejimdə də düzgün olmalıdır.
   ══════════════════════════════════════════════════════════════════════════ */

.es-root {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 56px 24px;
    min-height: 260px;
}

/* İkon halqası: yalnız ikon tək qalanda blok «yarımçıq» görünürdü.
   Halqa ona çəki verir və gözü mərkəzə yığır. */
.es-icon-wrap {
    display: grid;
    place-items: center;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    margin-bottom: 18px;
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 16%, transparent);
}

.es-icon {
    font-size: 40px;
    color: var(--mud-palette-primary);
    opacity: .75;
}

.es-title {
    color: var(--mud-palette-text-primary);
}

/* 34ch — bir sətirdə rahat oxunan uzunluq. Genişliyi məhdudlaşdırmasaq
   izah mətni geniş ekranda tək sətrə düzülür və gözlə izlənmir. */
.es-sub {
    max-width: 34ch;
    margin-top: 6px;
    line-height: 1.5;
}

/* Dialoq və ya panel içində daha yığcam olur — orada yer məhduddur. */
.mud-dialog .es-root,
.es-root--compact {
    padding: 32px 20px;
    min-height: 0;
}

.mud-dialog .es-icon-wrap,
.es-root--compact .es-icon-wrap {
    width: 64px;
    height: 64px;
    margin-bottom: 12px;
}

.mud-dialog .es-icon,
.es-root--compact .es-icon {
    font-size: 30px;
}

/* ══════════════════════════════════════════════════════════════════════════
   STATİSTİKA KARTI İKONLARI + CƏDVƏL BAŞLIQLARI
   ══════════════════════════════════════════════════════════════════════════
   🔴 Bu qaydalar əvvəl İKİ səhifədə (`CustomersPage`, `ServicesPage`) EYNİ
      şəkildə `<style>` bloku kimi təkrarlanırdı. Üç ayrı nasazlıq vardı:

   ① `::deep` inline `<style>` blokunda İŞLƏMİR.
      `::deep` Blazor-un scoped CSS (`.razor.css`) kompilyatorunun sintaksisidir —
      brauzer onu tanımır və qaydanı ATIR. Yəni cədvəl başlıqlarının bütün
      dizaynı (böyük hərf, hərf aralığı, boz zəmin) HEÇ VAXT tətbiq olunmayıb;
      hər iki səhifədə başlıqlar defolt görünüşdə qalıb.

   ② İkon zəminləri sabit rgba idi və VURĞU RƏNGİ İLƏ UYĞUN GƏLMİRDİ:
      `stat-icon-primary` bənövşəyi (89,74,226) zəmin verirdi, ikonun özü isə
      `var(--mud-palette-primary)` — yəni teal. İstifadəçi tema rəngini
      dəyişəndə uyğunsuzluq daha da böyüyürdü. İndi zəmin ikonun ÖZ rəngindən
      `color-mix` ilə çıxarılır — nə seçilirsə seçilsin, uyğun gəlir.

   ③ `.transition-all`, `.hover-card`, `.bg-gray-50` burada təkrar təyin
      edilirdi. İndi yuxarıdakı utility qatındadır — səhifədən silindi.

   ⚠️ Cədvəl qaydaları `.saas-grid` sinfi ilə məhdudlaşdırılıb, qlobal deyil:
      hesabat səhifələrinin öz cədvəl dizaynı var (`reports.css`) və onu
      əvəz etmək istəmirik.
   ══════════════════════════════════════════════════════════════════════════ */

.stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-icon-primary { background-color: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent); color: var(--mud-palette-primary); }
.stat-icon-success { background-color: color-mix(in srgb, var(--mud-palette-success) 12%, transparent); color: var(--mud-palette-success); }
.stat-icon-warning { background-color: color-mix(in srgb, var(--mud-palette-warning) 12%, transparent); color: var(--mud-palette-warning); }
.stat-icon-error { background-color: color-mix(in srgb, var(--mud-palette-error) 12%, transparent); color: var(--mud-palette-error); }
.stat-icon-info { background-color: color-mix(in srgb, var(--mud-palette-info) 12%, transparent); color: var(--mud-palette-info); }
.stat-icon-tertiary { background-color: color-mix(in srgb, var(--mud-palette-tertiary) 12%, transparent); color: var(--mud-palette-tertiary); }

/* Cədvəl başlığı — sətirlərdən aydın ayrılmalıdır ki, göz sütunu izləyə bilsin. */
.saas-grid .mud-table-head .mud-table-cell {
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
    text-transform: uppercase;
    font-size: .75rem;
    letter-spacing: .5px;
    background-color: var(--mud-palette-background-grey);
}

.saas-grid .mud-table-row {
    transition: background-color .15s ease;
    cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
    .saas-grid .mud-table-row { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ÇOX TABLI ADMİN DİALOQU — SABİT HÜNDÜRLÜK
   ═══════════════════════════════════════════════════════════════════════════
   🔴 PROBLEM (18.08.2026, sahibin hesabatı): «ayarlarını açdıqda açılan dialoq
   hər tabda bir ölçüdə olur». Eni onsuz da sabit idi (`ExtraExtraLarge`),
   dəyişən HÜNDÜRLÜK idi: «Paket» tabı qısa, «Kanallar» tabı uzundur, ona görə
   qutu hər keçiddə sıçrayır və altındaki düymələr yerini dəyişir — operator
   «Yadda saxla»ya basmaq üçün hər dəfə gözü ilə axtarır.

   Həll: panel sahəsinin hündürlüyü sabitlənir, məzmun ONUN İÇİNDƏ sürüşür.
   Tab başlıqları və dialoq düymələri yerində qalır.

   ⚠️ QLOBAL FAYLDADIR, scoped deyil: MudBlazor dialoqu `<body>` altında ayrı
   qatda render olunur — komponentin `.razor.css`-i ora ÇATMIR (CLAUDE.md).

   ⚠️ Hündürlük `vh` ilədir: noutbukda 100 % ekran yoxdur, `px` versək kiçik
   ekranda dialoq ekrandan çıxardı. */
.admin-tabdlg__panel {
    min-height: 58vh;
    max-height: 58vh;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Sürüşdürmə zolağı məzmuna yapışmasın. */
.admin-tabdlg__panel { padding-right: 8px; }

/* Alçaq ekranda sabit hündürlük əksinə işləyir — dialoq ekranı aşır. */
@media (max-height: 720px) {
    .admin-tabdlg__panel { min-height: 46vh; max-height: 46vh; }
}

/* ══════════════════════════════════════════════════════════════════════════
   SƏBƏB SEÇİCİSİNDƏ QRUP BAŞLIĞI (115 · 20.08.2026-da düzəldildi)
   ══════════════════════════════════════════════════════════════════════════
   🔴 QLOBAL FAYLDA OLMALIDIR, `AvailabilityPage.razor.css`-də YOX.

   115-də bu qayda scoped fayla yazılmışdı və şərhi belə deyirdi:
   «element `b-xxx` atributunu özü ilə popover qatına aparır».
   Fikir doğrudur — LAKİN yalnız həmin `.razor` faylında yazılmış element
   üçün. İndi başlıq `MudSelectItem`-dir: onu MudBlazor render edir, yəni
   bizim scope atributu ONDA YOXDUR və scoped qayda səssizcə ölərdi.

   ⚠️ Yeni qayda əlavə edəndə soruş: «bu sinif BİZİM HTML teqindədir,
      yoxsa Mud komponentinin çəkdiyi elementdə?» İkincidirsə — qlobal fayl.

   ── RENDER OLUNAN QURULUŞ (bUnit ilə ölçülüb, təxmin deyil) ───────────
       <div class="mud-list-item … mud-list-item-disabled av-reason-group">
         <div class="mud-list-item-text">
           <p class="mud-typography mud-typography-body1">BAYRAM VƏ TƏTİL</p>

   ⚠️ ONA GÖRƏ İKİ QAYDA LAZIMDIR. Yalnız kənar elementə şrift versək
      HEÇ NƏ dəyişmir: `.mud-typography-body1` mətnin öz ölçüsünü və
      çəkisini ƏLAVƏ olaraq təyin edir, irsiyyət isə ona çatmır.
   ══════════════════════════════════════════════════════════════════════════ */
.mud-list-item.av-reason-group {
    padding: 10px 16px 2px;
    /* 🔴 Söndürülmüş element MudBlazor-da solğunlaşır (`opacity: .42`) və
       başlıq oxunmaz olurdu. Bu, «əlçatmaz sətir» deyil, BÖLMƏ ADIDIR. */
    opacity: 1;
    cursor: default;
    /* Üstünə gələndə fon almır: seçilə bilən sətir kimi görünməməlidir. */
    background: transparent;
    min-height: 0;
}

/* Mətnin ÖZÜ — yuxarıdakı izaha bax. */
.mud-list-item.av-reason-group .mud-typography {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    line-height: 1.4;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

/* Birinci başlıq siyahının öz yuxarı boşluğunu təkrarlamasın. */
.mud-list-item.av-reason-group:first-child {
    padding-top: 4px;
}

/* ══════════════════════════════════════════════════════════════════════════
   116 — BOŞTA QALMA KİLİDİ
   ══════════════════════════════════════════════════════════════════════════

   🔴 QLOBAL OLMALIDIR, scoped DEYİL.
      Örtük `MudDialogProvider`-in yaratdığı dialoq qatının ÜSTÜNÜ tutmalıdır;
      MudBlazor dialoqları <body> altında ayrı qatda render olunur və
      scoped CSS onlara çatmır (layihədə bu tələ dörd dəfə təkrarlanıb).

   🔴 `z-index` MudBlazor-un dialoq qatından (1400) və snackbar-dan (1500)
      YUXARIDIR. Aşağı olsaydı açıq pasiyent kartı kilidin ÜSTÜNDƏ qalar
      və kilid heç nə qorumazdı. */
.idle-lock {
    position: fixed;
    inset: 0;
    z-index: 20000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;

    /* Arxa fon oxunmaz olmalıdır: pasiyent adı, telefon və diaqnoz
       ekranda qalırsa kilid yalnız kliki dayandırır, BAXIŞI yox. */
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.idle-lock__card {
    width: 100%;
    max-width: 380px;
    border-radius: 16px;
}

.idle-lock__icon {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}

/* Hərəkətə həssas istifadəçilər üçün blur ağır ola bilər. */
@media (prefers-reduced-motion: reduce) {
    .idle-lock {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: rgba(15, 23, 42, .92);
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   116 — MASKALANMIŞ DƏYƏR (telefon · e-poçt · FIN)
   ══════════════════════════════════════════════════════════════════════════
   QLOBAL: komponent həm cədvəldə, həm də MudBlazor dialoqunun içində
   işlədilir — dialoq <body> altında ayrı qatda render olunur. */
.masked-value {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    min-width: 0;
}

/* `tabular-nums` — maskalanmış və açıq dəyər EYNİ ENDƏ olur, yəni
   düymə basılanda sətir yerindən sıçramır. */
.masked-value__text {
    font-variant-numeric: tabular-nums;
    letter-spacing: .2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Düymə sətri qalınlaşdırmamalıdır: siyahıda hər sətirdə bir dənə var. */
.masked-value__toggle.mud-icon-button {
    padding: 2px;
    opacity: .45;
}

.masked-value__toggle.mud-icon-button:hover { opacity: 1; }

.masked-value__toggle .mud-icon-root { font-size: 1rem; }

/* ══════════════════════════════════════════════════════════════════════════
   116 — TƏHLÜKƏSİZLİK MƏRKƏZİ
   ══════════════════════════════════════════════════════════════════════════
   Səhifə `.razor.css` işlətmir: qaydalar `AppTabs` komponentinin markup-una
   toxunmur, yalnız öz sarğılarına — lakin dar ekranda süzgəclərin sətirə
   keçməsi qlobal davranışdır və mövcud `.rpt-*` sistemi ilə uyğun olmalıdır. */
.sec-toolbar,
.sec-filters {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* ══════════════════════════════════════════════════════════════════════════
   116 — PASİYENT KARTININ «TƏHLÜKƏLİ ZONA»SI
   ══════════════════════════════════════════════════════════════════════════
   QLOBAL: `CustomerDetailDialog` MudBlazor dialoqudur və <body> altında
   ayrı qatda render olunur — scoped CSS ora çatmır. */
.danger-zone {
    border: 1px solid var(--mud-palette-warning);
    border-radius: 12px;
    padding: 14px 16px;
    background: color-mix(in srgb, var(--mud-palette-warning) 6%, transparent);
}

.danger-zone__head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.danger-zone__title {
    font-weight: 700;
    font-size: .85rem;
    letter-spacing: .3px;
    text-transform: uppercase;
    color: var(--mud-palette-text-primary);
}

.danger-zone__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* ══════════════════════════════════════════════════════════════════════
   125 — İCAZƏ SEÇİCİSİ (PermissionPicker)
   ══════════════════════════════════════════════════════════════════════
   🔴 QLOBALDIR, scoped DEYİL: komponent MudBlazor dialoqunun içində
      render olunur və dialoq <body> altında ayrı qatda yaradılır —
      scoped CSS oraya ÇATMIR (CLAUDE.md → hesabat/dialoq qaydası). */
.perm-picker__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: 2px 16px;
}

/* min-width:0 MƏCBURİDİR — grid elementinin defolt `min-width: auto`
   dəyəri uzun etiketdə sütunu partladır (113-dəki blowout hadisəsi). */
.perm-picker__row { min-width: 0; }
.perm-picker__row .mud-input-control { min-width: 0; }

.perm-picker__chip { height: 18px; font-size: .68rem; opacity: .75; }

/* Həssas bölmə: rəng TƏK siqnal deyil — yuxarıda ikon və başlıq da var
   (daltonizm ~8% kişi). */
.perm-picker__sensitive {
    border: 1px solid var(--mud-palette-warning);
    border-radius: var(--mud-default-borderradius);
    background: color-mix(in srgb, var(--mud-palette-warning) 6%, transparent);
}

/* ══════════════════════════════════════════════════════════════════════
   130 — YAZILMA LİNKİNİN QR KODU (BookingQrCard)
   ══════════════════════════════════════════════════════════════════════
   🔴 QLOBALDIR, scoped DEYİL. Komponentin kökü `MudCard`-dır və Blazor
      scope atributunu YALNIZ öz markup-undakı elementlərə qoyur — kart
      MudBlazor-un öz render-idir, atribut ora düşmür (#51-in dersi:
      `::deep` kök MudBlazor komponentində HEÇ VAXT tutmur). */
.booking-qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

/* QR-ın ağ fonu qaranlıq temada «üzən lövhə» kimi görünməməlidir:
   ətrafına eyni ağ haşiyə verilir, yəni kod kartın içində oturur.
   ⚠️ Fon SABİT ağdır və bu, temaya uyğunlaşmır — QÜSUR DEYİL:
      QR oxunmaq üçün tünd-açıq kontrast tələb edir və tünd fonda
      çəkilən kod bir çox skanerdə oxunmur. */
.booking-qr__code {
    background: #ffffff;
    padding: 12px;
    border-radius: 12px;
    line-height: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
}

.booking-qr__code canvas,
.booking-qr__code img { display: block; max-width: 100%; height: auto; }

.booking-qr__link {
    background: var(--mud-palette-background-grey);
    border-radius: 8px;
}

/* ══════════════════════════════════════════════════════════════════════
   SNACKBAR — «YARDIM AL» DÜYMƏSİ (25.08.2026)
   ══════════════════════════════════════════════════════════════════════
   Sistem sahibi: «snackbarda çıxartdığımız help buttonunu daha göz oxşayan,
   clickable görünən və diqqət çəkən edək».

   🔴 QAYDA QLOBALDIR, SCOPED DEYİL — MudBlazor snackbar-ı `<body>` altında
      ayrı `.mud-snackbar-provider` qatında render edir; heç bir komponentin
      `b-xxx` atributu ora çatmır. Scoped yazsaq qayda səssizcə ölərdi
      (12.08 dərsi — `MudSelect` və popover qatı ilə eyni səbəb).

   ⚠️ Yalnız XƏTA snackbar-ına tətbiq olunur (`.mud-alert-filled-error`).
      Uğur/məlumat bildirişlərində düymə yoxdur və olsaydı da ağ həb yaşıl
      fonda «xəta» kimi oxunardı.

   ⚠️ Rəng SABİT `#fff` DEYİL, `--mud-palette-error-text`-dir: qaranlıq
      temada xəta fonu dəyişir və sabit ağ orada kontrastı itirərdi. */
.mud-snackbar .mud-snackbar-action-button .mud-button-root {
    font-weight: 600;
    letter-spacing: .2px;
    border-radius: 999px;
    padding: 4px 16px;
    min-width: 0;
    background-color: var(--mud-palette-error-text, #fff);
    color: var(--mud-palette-error, #f44336);
    box-shadow: 0 2px 8px rgb(0 0 0 / 22%);
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

/* Toxunuş sahəsi düymənin özündən böyükdür — 44 px Material minimumu.
   Kiçik həbi barmaqla tutmaq mobil ekranda ən çox şikayət olunan haldır. */
.mud-snackbar .mud-snackbar-action-button {
    display: flex;
    align-items: center;
    min-height: 44px;
}

.mud-snackbar .mud-snackbar-action-button .mud-button-root:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgb(0 0 0 / 30%);
    filter: brightness(.96);
}

.mud-snackbar .mud-snackbar-action-button .mud-button-root:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgb(0 0 0 / 22%);
}

/* Diqqət çəkmə: bildiriş çıxan kimi İKİ dəfə yüngül nəbz.
   ⚠️ Sonsuz animasiya QƏSDƏN DEYİL — daim hərəkət edən element ekranı
      yorur və 15 saniyə ərzində istifadəçini əsl mətndən yayındırır. */
@keyframes asis-snack-pulse {
    0%, 100% { box-shadow: 0 2px 8px rgb(0 0 0 / 22%); }
    50%      { box-shadow: 0 0 0 6px rgb(255 255 255 / 28%); }
}

.mud-snackbar .mud-snackbar-action-button .mud-button-root {
    animation: asis-snack-pulse 1.4s ease-in-out 2;
}

/* Hərəkəti azaldılmış rejimdə nəbz söndürülür — görünüş qalır. */
@media (prefers-reduced-motion: reduce) {
    .mud-snackbar .mud-snackbar-action-button .mud-button-root {
        animation: none;
        transition: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   İXRAC DÜYMƏSİ VƏ FORMAT SEÇİMİ  (Features/Export/ExportButton.razor)
   ---------------------------------------------------------------------------
   🔴 QAYDALAR QLOBALDIR, SCOPED DEYİL — VƏ BU, ZÖVQ MƏSƏLƏSİ DEYİL.
      MudBlazor popover-i `MudPopoverProvider` içində, `<body>` altında ayrı
      qatda render olunur. Komponentin `b-xxxxx` scope atributu ora ÇATMIR,
      yəni `.razor.css` faylındakı hər sətir səssizcə ölü qalardı
      (#51-də eyni tələ `AvailabilityPage`-də ölçüldü).

   ⚠️ FORMAT RƏNGLƏRİ TEMAYA UYĞUNLAŞMIR — onlar KODDUR, bəzək deyil:
      Excel yaşıl, PDF qırmızı, Word göy. İstifadəçi eyni ikonları Windows
      Explorer-də və e-poçt qoşmasında da görür; rəngi temaya bağlasaq
      tanınma itərdi (odontoqram rəng qaydası ilə eyni səbəb, #32).
      Ona görə fon `rgb(... / 14%)`-dir: hər iki temada oxunur.
   ═══════════════════════════════════════════════════════════════════════════ */

.exp-btn {
    border-radius: 10px;
    font-weight: 600;
    letter-spacing: .2px;
}

/* Menyunun başlığı — «Hansını seçim?» sualına cavab verən sətir.
   ⚠️ MudMenuItem DEYİL: kliklənən görünməməlidir. */
.exp-menu .exp-menu__head {
    padding: 8px 14px 6px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    opacity: .55;
}

.exp-menu .mud-list-item {
    border-radius: 10px;
    margin: 2px 6px;
}

.exp-item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 250px;
}

.exp-item__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    flex: 0 0 auto;
}

.exp-item__icon--xlsx { background: rgb(16 124 65 / 14%); color: #107c41; }
.exp-item__icon--pdf  { background: rgb(200 40 40 / 14%); color: #c82828; }
.exp-item__icon--docx { background: rgb(28 90 168 / 14%); color: #1c5aa8; }

.exp-item__text {
    display: flex;
    flex-direction: column;
    min-width: 0;                 /* uzun mətn sətri genişləndirməsin */
    line-height: 1.25;
}

.exp-item__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: .875rem;
}

/* «Tövsiyə olunur» nişanı — ön planda olan format serverdən gəlir.
   ⚠️ Rəng TƏK siqnal deyil: mətnin özü də vəziyyəti deyir. */
.exp-item__pick {
    padding: 1px 7px;
    border-radius: 999px;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.exp-item__hint {
    font-size: .74rem;
    opacity: .62;
    white-space: normal;
}

.exp-menu .exp-menu__foot {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 6px 2px;
    padding: 8px 10px;
    border-top: 1px solid var(--mud-palette-lines-default);
    font-size: .75rem;
    opacity: .72;
}

/* ════════════════════════════════════════════════════════════════════
   #71 — KLİNİKA HEYƏTİ: OTURACAQ LİMİTLƏRİ (`/staff` başlığı)

   🔴 QLOBAL FAYLDADIR, scoped DEYİL: `StaffSeatUsage` üç fərqli
      valideyndən (StaffPage · gələcək ekranlar) render oluna bilər və
      scoped CSS yalnız ONU yazan komponentin markup-ına düşür.
   ════════════════════════════════════════════════════════════════════ */
.staff-seats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: 12px;
}

/* ⚠️ `min(220px, 100%)` MƏCBURİDİR: grid elementinin defolt `min-width`
   dəyəri `auto`-dur, yəni öz min-content ölçüsündən kiçilmir və uzun
   bölgü mətni sütunları bir-birinin üstünə salır (113-ün dərsi). */

.seat-bar {
    min-width: 0;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid var(--mud-palette-lines-default);
    background-color: var(--mud-palette-surface);
}

.seat-bar--full { border-color: var(--mud-palette-warning); }

.seat-bar__head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.seat-bar__label {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.seat-bar__value {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

/* Rəqəmlər cədvəl sütunu kimi düzülsün — göz onları müqayisə edir. */
.seat-bar__used  { font-size: 1.4rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.seat-bar__limit { font-size: .85rem; color: var(--mud-palette-text-secondary); }

.seat-bar__track { margin-top: 8px; height: 6px; }

.seat-bar__note {
    margin-top: 8px;
    font-size: .72rem;
    color: var(--mud-palette-text-secondary);
    min-width: 0;
    overflow-wrap: anywhere;
}

/* ═══════════════════════════════════════════════════════════════════════════
   #80 — KAMPANİYA TƏHLÜKƏSİZLİYİ (panel · proqres · önizləmə)
   ═══════════════════════════════════════════════════════════════════════════

   🔴 QLOBALDIR, SCOPED DEYİL — və bu, qəsdəndir:
      `RecallSendDialog` MudBlazor dialoqudur və <body> altında AYRI qatda
      render olunur. Komponentin `b-xxxxx` scope atributu ora ÇATMIR
      (20.08.2026-da ölçülmüş qayda). Scoped yazsaydıq hər sətir səssizcə
      ölü qalardı.

   ⚠️ Sabit hex rəng YOXDUR: hamısı MudBlazor dəyişənlərindəndir, yəni
      qaranlıq temada da oxunur. */

.camp-safety {
    background: linear-gradient(
        135deg,
        rgb(var(--mud-palette-primary-rgb) / 4%),
        transparent 60%);
}

.camp-safety__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}

.camp-safety__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* Bir kampaniyanın sətri. Sol zolaq vəziyyəti RƏNGDƏN BAŞQA yolla da
   göstərir — rəng korluğu olan istifadəçi (≈8% kişi) yalnız rəngi görmür. */
.camp-run {
    padding: 12px 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.camp-run:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.camp-run--live {
    border-left: 3px solid var(--mud-palette-primary);
    padding-left: 12px;
    margin-left: -12px;
}

/* Göndəriş cədvəli — dialoqun içində, «nə qədər çəkəcək» bloku. */
.camp-plan {
    background-color: rgb(var(--mud-palette-primary-rgb) / 8%);
}

/* Önizləmə pasiyentin telefonuna oxşadılır: mesajın NECƏ görünəcəyini
   anlamaq üçün ən sürətli yol formadır, mətn deyil. */
.camp-preview {
    background-color: var(--mud-palette-background-grey);
    border-left: 3px solid var(--mud-palette-success);
}

/* Variant paneli əsas mətndən vizual olaraq ayrılmalıdır: o, məcburi
   deyil və məcburi görünməməlidir. */
.camp-variants {
    background-color: transparent;
}

.camp-variants .mud-expand-panel {
    background-color: transparent;
    border: 1px dashed var(--mud-palette-lines-default);
    border-radius: 8px;
}

/* ══════════════════════════════════════════════════════════════════════════
   SEKIL KESME DIALOQU (29.08.2026)  --  Features/Shared/Images
   --------------------------------------------------------------------------
   !! QAYDA QLOBALDIR, scoped DEYIL. MudBlazor dialoqu `<body>` altinda ayri
      qatda render olunur; komponentin `b-xxxxx` scope atributu ora catir,
      lakin bu qat layihede defelerle tele olub (#51 -- MudSelect, #46/#70 --
      snackbar/popover). Kesme cercivesi dialoqun ICIDIR ve gorunusunun
      sinmasi funksiyani ISLEK OLMAQDAN cixarir, ona gore qlobal saxlanilir.
   ══════════════════════════════════════════════════════════════════════════ */

/* Dar ekranda cercive kicilmir -- SURUSUR.
   Kicilseydi C#-dakı 420 px sabiti ile ekrandaki en AYRILAR ve kesilen sahe
   istifadecinin gorduyu sahe olmazdi. */
.imgcrop-scroll {
    overflow-x: auto;
    display: flex;
    justify-content: center;
}

.imgcrop-frame {
    position: relative;
    overflow: hidden;
    flex: 0 0 auto;
    border-radius: 8px;
    background: var(--mud-palette-background-grey);
    cursor: grab;
    /* Toxunma ile suruşdurmek ucun MECBURIDIR: onsuz brauzer hadiseni
       sehifenin oz scroll-una verir ve sekil terpenmir. */
    touch-action: none;
    user-select: none;
    box-shadow: inset 0 0 0 1px var(--mud-palette-lines-default);
}

.imgcrop-frame:active { cursor: grabbing; }

.imgcrop-img {
    position: absolute;
    max-width: none;   /* qlobal `img { max-width: 100% }` qaydasini legv edir */
    pointer-events: none;
    user-select: none;
}

/* Dar ekranda da qalan merkez -- kesikli cerceve.
   `pointer-events: none` MECBURIDIR: uzerine dusen toxunus suruşdurmeni
   dayandirardi. */
.imgcrop-safe {
    position: absolute;
    top: 0;
    bottom: 0;
    pointer-events: none;
    border-left: 2px dashed rgb(255 255 255 / 70%);
    border-right: 2px dashed rgb(255 255 255 / 70%);
    box-shadow: 0 0 0 9999px rgb(0 0 0 / 12%) inset;
}

/* ══════════════════════════════════════════════════════════════════════════
   145 → 160 — SORGU RADARI (LEADS): EKRAN
   ══════════════════════════════════════════════════════════════════════════

   🔴 QLOBALDIR, scoped DEYIL: `LeadCard` MudBlazor komponentlerinin ICINDE
      render olunur ve scoped CSS-in `b-xxxxx` atributu ora catmir (#51-in
      olculmus dersi).

   ⚠️ Reng SABIT hex DEYIL, MudBlazor palet deyisenidir -- eks halda qaranliq
      temada kart oxunmur (14.08-de dord hesabat sehifesinde bas vermisdi).
      Yegane istisna kanal brendidir (`--ch-color`, markupdan gelir).

   🔴 160 — `rgb(var(--mud-palette-x-rgb) / N%)` YAZILMIR, `color-mix` yazilir.
      MudBlazor `-rgb` deyisenini VERGULLE yaradir («89,74,226») ve bu forma
      yalniz `rgba(var(...), .08)` ile isleyir. Vergul + `/` qarisigi ETIBARSIZ
      CSS-dir: brauzer qaydani SESSIZCE atir. Radarin «yeni sorgu» fonu, hover
      kolgesi ve qosulu kanal fonu aylarla MEHZ BELE gorunmurdu.

   🔴 160 — BOZ FON `--mud-palette-background-gray`-dir («a» ile). MudBlazor
      `-grey` deyisenini YARATMIR (brauzerde olculdu: `transparent`), yeni
      `var(--mud-palette-background-grey)` sessizce fonsuz qalir -- mesaj
      «qabarcigi» ve onizleme balonu mehz bele gorunmurdu.

   160 — EKRAN YENIDEN QURULDU (sistem sahibi: «radar ekraninin dizaynini
   yaxsilasdir»): lovhe (tab + secim + siyahi + sehifeleyici tek kartda),
   avatar + kanal nisani, mesaj «qabarcigi», yumsaq acar soz etiketleri. */

/* ── LÖVHƏ ─────────────────────────────────────────────────────────────── */

.lead-board {
    border: var(--rpt-border, 1px solid var(--mud-palette-lines-default));
    border-radius: var(--rpt-radius, 16px);
    background: var(--mud-palette-surface);
    overflow: hidden;
}

/* ── KANAL SUZGECI (163) ────────────────────────────────────────────────
   Sistem sahibi: «yuxarida filtr qoy ancaq whatsap yada ins ve s kimi».

   !! Brend rengi YALNIZ secili haldadir: dord rengli duyme yan-yana duranda
      ekran «reng kataloqu»na cevrilir ve hansinin secili oldugu itir. */
.lead-chfilter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.lead-chfilter__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-secondary);
    font: inherit;
    font-size: .8125rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .15s, color .15s, background-color .15s;
}

    .lead-chfilter__item:hover {
        color: var(--mud-palette-text-primary);
        border-color: var(--mud-palette-text-disabled);
    }

    .lead-chfilter__item:focus-visible {
        outline: 2px solid var(--mud-palette-primary);
        outline-offset: 2px;
    }

    .lead-chfilter__item .mud-icon-root {
        width: 16px;
        height: 16px;
        font-size: 16px;
        color: var(--ch-color, currentColor);
    }

    .lead-chfilter__item.is-active {
        color: var(--ch-color, var(--mud-palette-primary));
        border-color: var(--ch-color, var(--mud-palette-primary));
        background: color-mix(in srgb, var(--ch-color, var(--mud-palette-primary)) 10%, var(--mud-palette-surface));
    }

/* ── PAY ZOLAGI (163) ───────────────────────────────────────────────────
   !! Zolaq YALNIZ limit varsa gorunur (0 = limitsiz). «Bitdi» hali RENGLE
      DEYIL, mətnle de deyilir -- zolaqda ayrica ipucu setri var. */
.lead-quota {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    margin-bottom: 12px;
    padding: 8px 14px;
    border-radius: 12px;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-background-gray);
    font-size: .8125rem;
    color: var(--mud-palette-text-secondary);
}

    .lead-quota .mud-icon-root {
        width: 18px;
        height: 18px;
        font-size: 18px;
        color: var(--mud-palette-primary);
    }

.lead-quota__item {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
}

    .lead-quota__item b {
        font-size: .9375rem;
        font-variant-numeric: tabular-nums;
        color: var(--mud-palette-text-primary);
    }

.lead-quota__of {
    opacity: .7;
    font-variant-numeric: tabular-nums;
}

.lead-quota__hint {
    margin-left: auto;
    opacity: .85;
}

.lead-quota--low {
    border-color: var(--mud-palette-warning);
    background: color-mix(in srgb, var(--mud-palette-warning) 8%, transparent);
}

    .lead-quota--low .mud-icon-root {
        color: var(--mud-palette-warning);
    }

.lead-quota--out {
    border-color: var(--mud-palette-error);
    background: color-mix(in srgb, var(--mud-palette-error) 8%, transparent);
}

    .lead-quota--out .mud-icon-root,
    .lead-quota--out .lead-quota__hint {
        color: var(--mud-palette-error);
    }

/* ── TAB SAYI ───────────────────────────────────────────────────────────
   !! 163 — OLCU `.atabs-nav-badge`-DENDIR (tetbiqin standarti). Burada
      YALNIZ reng deyisir: «Yeni 0» boz, «Yeni 12» isti. `atabs-nav-badge`
      defolt olaraq ERROR rengindedir -- radarda ise SIFIR normal haldir.

   !! SPESIFIKLIK QESDEN IKI SINIFDIR (`.lead-tabs .lead-tabs__count`):
      tabs.css app.css-den SONRA yuklenir (index.html), yeni eyni cekili
      `.atabs-nav-badge` qaydasi bizimkini basardi. Brauzerde olculdu:
      tek sinifle butun saylar QIRMIZI gorunurdu. */
.lead-tabs .lead-tabs__count {
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-action-default-hover);
}

.lead-tabs .atabs-nav-item.is-active .lead-tabs__count {
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
}

/* «Yeni» sayi SIFIR DEYILSE -- «sizi gozleyir». Reng tek siqnal deyil:
   reqemin ozu ve tabin adi yaninda yazilir. */
.lead-tabs .lead-tabs__count--hot,
.lead-tabs .atabs-nav-item.is-active .lead-tabs__count--hot {
    color: var(--mud-palette-warning-text);
    background: var(--mud-palette-warning);
}

.lead-board__selectbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px 12px;
    min-height: 48px;
    padding: 4px 16px 4px 10px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    font-size: .875rem;
    transition: background-color .15s;
}

.lead-board__selectbar.is-active {
    background: color-mix(in srgb, var(--mud-palette-primary) 6%, transparent);
}

.lead-board__bulk {
    display: flex;
    align-items: center;
    gap: 8px;
}

.lead-board__bulk .lead-board__bulk-delete {
    border-radius: 10px;
}

.lead-board__content {
    padding: 12px 16px 6px;
}

/* paging.css app.css-den SONRA yuklenir -- spesifiklik ile. */
.lead-board .lead-board__pager.apager {
    margin: 4px 16px 0;
    padding: 10px 0 12px;
}

.lead-radar__refresh {
    border-radius: 10px;
}

/* ── KART ──────────────────────────────────────────────────────────────── */

.lead-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lead-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    transition: border-color .15s, box-shadow .15s, background-color .15s;
}

/* !! `transform` ISLEDILMIR: kartda link ve duymeler var, kicik sicrayis
      toxunma hedefini terpedir ve sehv duymeye basmaga aparir. */
.lead-card:hover {
    border-color: color-mix(in srgb, var(--mud-palette-primary) 45%, var(--mud-palette-lines-default));
    box-shadow: 0 4px 14px color-mix(in srgb, var(--mud-palette-primary) 9%, transparent);
}

/* Yeni sorgu SOL ZOLAQ + cox yumsaq fonla secilir. Zolaq `box-shadow`-dur,
   `border-left` deyil: en deyismir, kartlarin mezmunu eyni xetde qalir.
   !! Reng TEK siqnal deyil -- kartda «Yeni» nisani var (deuteranopia ~8 %). */
.lead-card--new {
    box-shadow: inset 3px 0 0 var(--mud-palette-warning);
    background: color-mix(in srgb, var(--mud-palette-warning) 5%, var(--mud-palette-surface));
}

.lead-card--new:hover {
    box-shadow: inset 3px 0 0 var(--mud-palette-warning),
                0 4px 14px color-mix(in srgb, var(--mud-palette-primary) 9%, transparent);
}

.lead-card--spam .lead-card__body {
    color: var(--mud-palette-text-secondary);
}

.lead-card--selected,
.lead-card--selected:hover {
    border-color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 6%, var(--mud-palette-surface));
}

.lead-card__select {
    margin: 4px -8px 0 -10px;
    flex-shrink: 0;
}

.lead-card__avatar {
    position: relative;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    flex-shrink: 0;
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: .3px;
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
}

/* Kanal nisani avatarin kuncundedir. Ag ikon brend fonunda -- istifadeci
   WhatsApp/Instagram-i tetbiqlerinde mehz bele gorur. */
.lead-card__badge {
    position: absolute;
    right: -6px;
    bottom: -6px;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    color: #fff;
    background: var(--ch-color);
    border: 2px solid var(--mud-palette-surface);
}

.lead-card__badge .mud-icon-root {
    width: 11px;
    height: 11px;
    font-size: 11px;
}

/* min-width: 0 MECBURIDIR: flex usagi defolt olaraq oz `min-content`
   eninden kicilmir ve uzun mesaj karti yana genislendirir (113-un teles). */
.lead-card__main {
    flex: 1 1 auto;
    min-width: 0;
}

.lead-card__head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.lead-card__who {
    flex: 1 1 auto;
    min-width: 0;
}

.lead-card__name {
    overflow: hidden;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -.01em;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.lead-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 6px;
    margin-top: 1px;
    font-size: .78rem;
    color: var(--mud-palette-text-secondary);
}

/* Kanal adi meta setrinde -- reng TEK siqnal olmasin deye. */
.lead-card__chname {
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.lead-card__dot {
    opacity: .6;
}

.lead-card__time {
    font-variant-numeric: tabular-nums;
}

/* !! 163 — VEZIYYET NISANI «HEB»DIR, mətn deyil: 16.09-dan sonra kartda uc
      eyni cekili boz mətn yan-yana dusurdu (ad, kanal, veziyyet) ve gozun
      ilk tutdugu sey OLMURDU. Indi nisan oz fonu ile secilir. */
.lead-card__status {
    flex-shrink: 0;
    margin: 0;
    height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
    background: color-mix(in srgb, currentColor 12%, transparent);
}

.lead-card__status .mud-chip-icon {
    margin-right: 2px;
}

/* Mesaj pasiyentin YAZDIGIDIR -- «qabarciq» formasi bunu mətnin ozunden
   evvel deyir (sistemin mətni deyil).
   !! Fon SAFFAF metn rengidir, sabit boz DEYIL: kart ozu rengli ola bilir
      («yeni» -- isti, «secilib» -- primary). Brauzerde olculdu: boz
      (245,245,245) secilmis kartin fonu (240,247,246) ustunde GORUNMURDU.
      Metn renginin 5 %-i istenilen fonu eyni derecede tundlesdirir, qaranliq
      temada ise acir. */
.lead-card__body {
    margin: 10px 0 0;
    padding: 11px 14px;
    border-radius: 4px 14px 14px 14px;
    background: color-mix(in srgb, var(--mud-palette-text-primary) 5%, transparent);
    font-size: .9375rem;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}

.lead-card__body--clamped {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
}

.lead-card__more {
    margin-top: 4px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: .8rem;
    font-weight: 600;
    color: var(--mud-palette-primary);
    cursor: pointer;
}

.lead-card__more:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

.lead-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-top: 10px;
}

.lead-card__kw {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}

.lead-card__tag {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
}

/* Emeliyyat duymeleri dar ekranda setire kecir, sixilmir.

   !! 163 — TOXUNMA HEDEFI 36px-dir (sistem sahibi: «buttonlari rahat et»).
      MudBlazor `Size.Small` ikon duymesi ~30px verir; telefonda yan-yana
      dord duyme o olcude sehv basmaga aparir (WCAG 2.5.8 minimumu 24px,
      tovsiye 44px). */
.lead-card__act {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    margin-left: auto;
}

    .lead-card__act .mud-icon-button {
        width: 36px;
        height: 36px;
        border-radius: 10px;
    }

    .lead-card__act .mud-icon-button:hover {
        background: color-mix(in srgb, var(--mud-palette-text-primary) 7%, transparent);
    }

.lead-card__act .lead-card__reply {
    height: 36px;
    margin-left: 6px;
    padding: 0 16px;
    border-radius: 10px;
    font-weight: 600;
}

@media (max-width: 599.98px) {
    .lead-board__content {
        padding-left: 10px;
        padding-right: 10px;
    }

    /* Dar ekranda pay zolagi iki setire dusur -- ipucu solda qalir. */
    .lead-quota__hint {
        margin-left: 0;
        flex-basis: 100%;
    }

    .lead-board .lead-board__pager.apager {
        margin-left: 10px;
        margin-right: 10px;
    }

    .lead-card {
        gap: 10px;
        padding: 12px;
    }

    .lead-card__avatar {
        width: 36px;
        height: 36px;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   147 — SORĞU RADARI: KANALLAR VƏ PASİYENT KARTI
   ══════════════════════════════════════════════════════════════════════════

   🔴 QLOBALDIR, scoped DEYİL: `SocialChannelsCard` və `LeadCustomerPanel`
      MudBlazor dialoqunun içində də render olunur, dialoq isə `<body>`
      altında AYRI qatda çəkilir — komponentin `b-xxxxx` scope atributu
      ora ÇATMIR (#51-in ölçülmüş dərsi).
   ══════════════════════════════════════════════════════════════════════════ */

.lead-ch {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    margin-bottom: 10px;
    transition: border-color .15s, background-color .15s;
}

.lead-ch:hover {
    border-color: var(--mud-palette-primary);
}

/* ⚠️ Qoşulu hesab RƏNGLƏ + NİŞANLA bildirilir: rəng tək siqnal olsaydı
   rəng korluğu olan istifadəçi (deuteranopia ≈8% kişi) fərqi görməzdi. */
.lead-ch--on {
    border-color: var(--mud-palette-success);
    /* 160 — `rgb(var(--...-rgb) / 6%)` etibarsiz idi (vergullu deyisen), fon
       hec vaxt gorunmurdu. Bax «SORGU RADARI: EKRAN» basligi. */
    background: color-mix(in srgb, var(--mud-palette-success) 6%, transparent);
}

/* 160 — klinika: platforma ayari yoxdursa sonuk duyme yerine sakit nisan. */
.lead-ch__soon {
    color: var(--mud-palette-text-secondary);
}

/* `min-width: 0` MƏCBURİDİR: flex uşağı defolt olaraq öz `min-content`
   enindən kiçilmir və uzun hesab adı düymələri sətirə atardı. */
.lead-ch__body { flex: 1 1 auto; min-width: 0; }

.lead-ch__actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.lead-ch__warn {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    font-size: 12px;
    color: var(--mud-palette-warning-text);
}

.lead-cust {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border: 1px dashed var(--mud-palette-lines-default);
    border-radius: 8px;
    margin-bottom: 16px;
}

/* Tanınan pasiyent: kəsik deyil, DOLU kənar — «bu, təsdiqlənmiş faktdır». */
.lead-cust--known {
    border-style: solid;
    border-color: var(--mud-palette-success);
    background: color-mix(in srgb, var(--mud-palette-success) 6%, transparent);
}

.lead-cust__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.lead-cust__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    font-size: 13px;
    color: var(--mud-palette-text-secondary);
}

.lead-cust__next { color: var(--mud-palette-primary); font-weight: 500; }

.lead-cust__actions { display: flex; gap: 8px; }

/* ══════════════════════════════════════════════════════════════════════════
   KANAL KİMLİYİ (kanallar karti)
   ══════════════════════════════════════════════════════════════════════════

   !! IKON RENGLI DAIRENIN ICINDEDIR, ciplaq ikon DEYIL.
      Ciplaq ikon 20 px-de kicikdir ve Instagram ile Facebook ikonlari kicik
      olcude bir-birine oxsayir -- istifadeci kanali TANIYA BILMIRDI.

   !! `--ch-color` markupdan gelir (brend rengi). Fon hemin rengin 14 %-idir,
      yeni HER IKI temada oxunur: qaranliqda solur, isiqda yumsaq qalir.
      Sabit fon hex-i yazsaydiq qaranliq temada leke kimi gorunerdi
      (14.08-de dord hesabat sehifesinde bas vermisdi).

   160 — sorgu kartinin nisani (`.lead-card__badge`) avatarin kuncune kocdu;
   qaydasi yuxarida, «SORGU RADARI: EKRAN» blokundadir. */

.lead-ch__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    color: var(--ch-color);
    background: color-mix(in srgb, var(--ch-color) 14%, transparent);
}

.lead-ch__name {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Qurasdirma addimlari -- «ne etmek lazimdir» siyahisi. */
.lead-ch__steps {
    margin: 8px 0 0;
    padding-left: 20px;
    font-size: .8125rem;
    line-height: 1.6;
}

.lead-ch__steps code {
    padding: 1px 5px;
    border-radius: 4px;
    font-size: .95em;
    background: var(--mud-palette-background-gray);
}

/* 17.09.2026 -- «Son Meta bildirisleri» (yalniz platforma heyeti).
   !! Setir telefonda SARILIR (flex-wrap): uzun hesab ID-si ekrani yana
      surusdurmemelidir. Reng TEK siqnal deyil -- netice metnle yazilir. */
.lead-ch__journal {
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
}

.lead-ch__journal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.lead-ch__journal-list {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    max-height: 260px;
    overflow-y: auto;
}

.lead-ch__journal-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    padding: 5px 0;
    font-size: .8125rem;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.lead-ch__journal-row:first-child { border-top: 0; }

.lead-ch__journal-time {
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
}

.lead-ch__journal-channel { font-weight: 600; }

.lead-ch__journal-row--bad .lead-ch__journal-outcome {
    color: var(--mud-palette-warning-text);
}

.lead-ch__journal-ref {
    padding: 0 5px;
    border-radius: 4px;
    font-size: .75rem;
    overflow-wrap: anywhere;
    background: var(--mud-palette-background-gray);
}

/* Kanallar karti basligindaki avatar. */
.lead-chcard__avatar {
    background: var(--mud-palette-primary-lighten) !important;
    color: var(--mud-palette-primary) !important;
}

/* !! Ayarlar ekraninda kartlar EYNI HUNDURLUKDE olmalidir: MudGrid setrinde
      iki kart mUxtelif hundurlukde olanda gorunus pilleli cixir ve «yadda
      saxla» duymeleri fergli seviyyede dayanir (#50-nin olculmus dersi). */
.lead-settings-grid .mud-grid-item > .mud-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.lead-settings-grid .mud-grid-item > .mud-card > .mud-card-content {
    flex: 1 1 auto;
}

/* ══════════════════════════════════════════════════════════════════════════
   SORGU RADARI — AVTO-CAVAB ONIZLEMESI  (148)
   ══════════════════════════════════════════════════════════════════════════

   🔴 EKRAN «NE GOSTERIR» DEYIL, «NE DEMEK ISTEYIR» SUALINA CAVAB VERIR.
      Kohne variant uc adsiz metn blokunu boz qutuya yigirdi; sistem sahibi
      «oradaki mesajlar nedir ele?» dedi -- yeni melumat DOGRU idi, izahat
      YOX idi.

   ⚠️ QLOBALDIR (scoped deyil): `LeadSettingsPage`-in `.razor.css` fayli
      yoxdur ve qonsu lead siniflerinin hamisi (`.lead-card__badge`,
      `.lead-ch__badge`, `.lead-settings-grid`) onsuz da burdadir. Ikinci
      mexanizm yaratmaq PARALEL YOL olardi.
   ────────────────────────────────────────────────────────────────────── */

.lead-prev__struct {
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    background: var(--mud-palette-background);
}

.lead-prev__struct-title {
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 8px;
}

.lead-prev__part {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .84rem;
    line-height: 1.5;
    color: var(--mud-palette-text-primary);
    padding: 2px 0;
}

/* Nomre nisani — sira MENALIDIR: mesaj mehz bu ardicilliqla qurulur. */
.lead-prev__no {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .7rem;
    font-weight: 700;
    background: color-mix(in srgb, var(--mud-palette-text-secondary) 16%, transparent);
    color: var(--mud-palette-text-secondary);
}

/* 🔴 KLINIKANIN OZ METNI FERQLI RENGDEDIR: «hansi hisse menimdir?» sualinin
      cavabi bir baxisda gorunmelidir -- qalan iki setri sistem yazir. */
.lead-prev__no--you {
    background: color-mix(in srgb, var(--mud-palette-primary) 18%, transparent);
    color: var(--mud-palette-primary);
}

/* Pasiyentin gorduyu mesaj — SOHBET BALONU kimi.
   Boz qutuda duz metn «konfiqurasiya» kimi oxunur; balon ise «bu, gedecek
   mesajdir» deyir. */
.lead-prev__bubble {
    position: relative;
    margin: 0 0 10px;
    padding: 10px 12px 10px 14px;
    border-radius: 12px;
    border: 1px solid var(--mud-palette-lines-default);
    border-left: 3px solid var(--mud-palette-primary);
    background: var(--mud-palette-background-gray);
}

.lead-prev__label {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 4px;
}

/* `pre-wrap` MECBURIDIR: kompozitor setirleri bos setirle ayirir
   (`\n\n`) ve o bosluq mesajin OXUNAQLILIGININ bir hissesidir. */
.lead-prev__text {
    white-space: pre-wrap;
    word-break: break-word;
    font-size: .86rem;
    line-height: 1.55;
    color: var(--mud-palette-text-primary);
}

.lead-prev__note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 4px;
    font-size: .78rem;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
}

.lead-prev__note .mud-icon-root {
    margin-top: 2px;
    flex: 0 0 auto;
}

.lead-prev__empty {
    margin-top: 8px;
    padding: 10px 12px;
    border: 1px dashed var(--mud-palette-lines-default);
    border-radius: 12px;
    font-size: .82rem;
    color: var(--mud-palette-text-secondary);
}

/* ══════════════════════════════════════════════════════════════════════════
   YUXARI ZOLAĞIN TƏK HOVER QAYDASI (18.09.2026)
   ══════════════════════════════════════════════════════════════════════════
   Sistem sahibi: «sürətli əlavə et düyməsinin navbardakı hoveri əlavədir.
   Sistemin öz hoveri olsun, digər navbar itemləri kimi».

   ── ÖLÇÜLMÜŞ SƏBƏB ────────────────────────────────────────────────────────
   `.hover-effect` İKİ YERDƏ yazılmışdı:
     • `MainLayout.razor` daxilindəki <style> — qlobal, YALNIZ fon (0.15);
     • `MainLayout.razor.css`              — scoped, fon (0.18) + 8px künc
                                             + `scale(1.08)`.
   Scoped nüsxə yalnız MainLayout-un ÖZ render etdiyi düymələrə düşür
   (tema · palitra · tam ekran · çıxış). Komponentdən gələnlər — axtarış,
   dil, bildiriş və «+» — həmin atributu daşımır, ona görə onlara yalnız
   sönük qlobal fon tətbiq olunurdu. Bir zolaqda İKİ fərqli hover.

   🔴 ÜSTƏLİK «+» VƏ DİL MENYUSUNDA SİNİF DÜYMƏYƏ YOX, SARĞIYA DÜŞÜRDÜ:
      `MudMenu`-nun `Class`-ı xarici <div>-ə gedir. Nəticədə dairəvi düymənin
      öz hover-i ilə yanaşı KVADRAT sarğı da işıqlanırdı — «əlavə hover»
      məhz budur. Hər ikisi indi `ActivatorContent` ilə həqiqi
      `MudIconButton`-a bağlanıb.

   ⚠️ `currentColor`: zolağın mətn rəngi nə isə, tint də ondan alınır —
      sabit `rgba(255,255,255,…)` yazsaydıq açıq temalı zolaqda görünməzdi. */
.hover-effect {
    border-radius: 50%;
    transition: background-color .18s ease, transform .18s ease;
}

.hover-effect:hover {
    background-color: color-mix(in srgb, currentColor 16%, transparent);
    transform: scale(1.06);
}

.hover-effect:active {
    transform: scale(.96);
}

/* Hərəkəti azaldılmış rejimdə miqyas dayanır, fon qalır: siqnal itmir. */
@media (prefers-reduced-motion: reduce) {
    .hover-effect:hover,
    .hover-effect:active {
        transform: none;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   QLOBAL «SÜRƏTLİ ƏLAVƏ ET» MENYUSU (18.09.2026)
   ══════════════════════════════════════════════════════════════════════════
   Menyunun məzmunu MudPopover-in içində, tətbiqin KÖKÜNDƏ render olunur —
   yəni komponentin scoped CSS-i (`::deep` olsa belə) ona ÇATMIR. Ona görə
   bu iki sətir qlobal fayldadır. */
.qadd-menu__title {
    padding: 8px 16px 4px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

/* ══════════════════════════════════════════════════════════════════════════
   ÇÖRƏK QIRINTILARI (breadcrumbs) — 18.09.2026
   ══════════════════════════════════════════════════════════════════════════
   🔴 Zolaq İŞ EKRANININ BAŞLIĞI DEYİL, yolun özüdür: kiçik, sakit və bir
      sətirlik. Böyütsək səhifə başlığı ilə yarışar və hər ekranda İKİ
      başlıq görünər.

   ⚠️ MudBlazor-un öz `MudBreadcrumbs`-i `<ul class="mud-breadcrumbs">`
      render edir və defolt `padding: 8px 16px` daşıyır — iş ekranının sol
      kənarı ilə düz durması üçün sıfırlanır. */
.app-crumbs .mud-breadcrumbs {
    padding: 0;
    margin: 0 0 10px;
    font-size: .8rem;
    flex-wrap: wrap;
    row-gap: 2px;
}

.app-crumbs .mud-breadcrumb-item a,
.app-crumbs .mud-breadcrumb-item p,
.app-crumbs .mud-breadcrumb-separator {
    color: var(--mud-palette-text-secondary);
}

.app-crumbs .mud-breadcrumb-item a:hover {
    color: var(--mud-palette-primary);
    text-decoration: underline;
}

/* Cari ekran — yolun sonu. Keçid deyil, ona görə vurğu YALNIZ çəkidədir. */
.app-crumbs .mud-breadcrumb-item:last-child p {
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

@media (max-width: 600px) {
    .app-crumbs .mud-breadcrumbs {
        font-size: .75rem;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   REPUTASIYA — SIKAYETLER EKRANI (18.09.2026)
   ══════════════════════════════════════════════════════════════════════════
   Sistem sahibi: «reputasiya ekranini basdan dizayn et… butun ui ve ux
   prinsiplerine uymalidir».

   !! LOVHE `.rpt` KONTEYNERININ ICINDEDIR: radius, serhed ve bosluq
      deyisenleri (`--rpt-*`) oradan gelir. Kenarda qalsaydi kartlar
      serhedsiz ve kunc kvadrat gorunerdi — radar ekraninda olculmus
      eyni qusur (160).

   !! Renglerin hamisi palet deyisenidir: sabit hex qaranliq rejimde
      oxunmur (reports.css basligindaki qayda). */

.rep-page .rep-range {
    width: 230px;
}

.rep-page .rep-refresh {
    border-radius: 10px;
}

/* ── LOVHE ─────────────────────────────────────────────────────────────── */

.rep-board {
    border: var(--rpt-border, 1px solid var(--mud-palette-lines-default));
    border-radius: var(--rpt-radius, 16px);
    background: var(--mud-palette-surface);
    overflow: hidden;
}

.rep-board__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 16px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.rep-board__scope {
    width: 210px;
    flex: 0 0 auto;
}

.rep-board__content {
    padding: 14px;
}

/* paging.css app.css-den SONRA yuklenir -- spesifiklik ile. */
.rep-board .rep-board__pager.apager {
    margin: 0 14px;
    padding: 10px 0 12px;
}

/* ── TAB SAYI ───────────────────────────────────────────────────────────
   `atabs-nav-badge` defolt olaraq ERROR rengindedir; burada SIFIR normal
   haldir, ona gore nisan sakit rengle baslayir. */
.rep-tabs__count {
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-action-default-hover);
}

.rep-tabs .atabs-nav-item.is-active .rep-tabs__count {
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
}

/* Hell olunmamis sikayet varsa — «sizi gozleyir». Reng TEK siqnal deyil:
   reqemin ozu ve tabin adi da yanindadir. */
.rep-tabs .rep-tabs__count--warn,
.rep-tabs .atabs-nav-item.is-active .rep-tabs__count--warn {
    color: var(--mud-palette-warning-text);
    background: var(--mud-palette-warning);
}

/* ── KART ──────────────────────────────────────────────────────────────── */

.rep-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rep-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--mud-palette-lines-default);
    border-left-width: 4px;
    border-radius: 14px;
    background: var(--mud-palette-surface);
    transition: border-color .15s, box-shadow .15s, opacity .15s;
}

.rep-card:hover {
    box-shadow: 0 6px 18px rgba(15, 23, 42, .07);
}

/* Bal ne qeder asagidirsa kenar zolaq o qeder tundur — siyahini gozle
   suzmek ucun. */
.rep-card--bad {
    border-left-color: var(--mud-palette-error);
}

.rep-card--warn {
    border-left-color: var(--mud-palette-warning);
}

.rep-card--good {
    border-left-color: var(--mud-palette-success);
}

/* Hell olunmus sikayet SILINMIR, geri cekilir: tarixce lazimdir. */
.rep-card--done {
    opacity: .72;
}

.rep-card__score {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 54px;
    flex: 0 0 auto;
}

.rep-card__score-value {
    font-size: 1.45rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--mud-palette-text-primary);
}

.rep-card__stars {
    transform: scale(.72);
    transform-origin: top center;
}

.rep-card__main {
    flex: 1 1 auto;
    min-width: 0;
}

.rep-card__head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 14px;
}

.rep-card__name {
    font-weight: 700;
    font-size: .95rem;
    color: var(--mud-palette-text-primary);
}

.rep-card__phone {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .84rem;
    color: var(--mud-palette-text-secondary);
}

.rep-card__phone:hover {
    color: var(--mud-palette-primary);
}

.rep-card__badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
}

.rep-card__badge--done {
    color: var(--mud-palette-success);
    background: color-mix(in srgb, var(--mud-palette-success) 14%, transparent);
}

.rep-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin-top: 4px;
    font-size: .8rem;
    color: var(--mud-palette-text-secondary);
}

.rep-card__meta > span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* !! Sikayet metni EKRANIN ESAS MEZMUNUDUR — kesilmir, sarilir. */
.rep-card__comment {
    margin: 8px 0 0;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: .88rem;
    line-height: 1.55;
    color: var(--mud-palette-text-primary);
}

.rep-card__comment--empty {
    font-style: italic;
    color: var(--mud-palette-text-secondary);
}

.rep-card__actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

.rep-card__actions .rep-card__resolve {
    border-radius: 10px;
}

@media (max-width: 600px) {
    .rep-page .rep-range,
    .rep-board__scope {
        width: 100%;
    }

    .rep-board__content {
        padding: 10px;
    }

    .rep-board .rep-board__pager.apager {
        margin: 0 10px;
    }

    /* Dar ekranda emeliyyat duymesi kartin ALTINA dusur: yan-yana
       sixilanda ne metn, ne duyme oxunur. */
    .rep-card {
        flex-wrap: wrap;
        padding: 12px;
    }

    .rep-card__actions {
        width: 100%;
        justify-content: flex-end;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   IS EKRANININ KOKU — TEK EN, TEK SAQULI RITM (18.09.2026)
   ══════════════════════════════════════════════════════════════════════════
   Sistem sahibi: «men bele gorurem her ekran bir olcude bir dizayndadir,
   bele olmaz! bizim default dizayn davranisimiz var… hesabatlar modulunda
   da her tabin acdiqi ekranin olcusu ferqlidir».

   !! OLCULMUS SEBEB: `MainLayout` onsuz da `MudContainer MaxWidth=ExtraLarge`
      ile sarir. Sehifelerin bir qismi ONUN ICINDE IKINCI konteyner acirdi
      (`MudContainer MaxWidth=...`), bir qismi acmirdi. Netice:
        • hesabat tablarinin dordu ikiqat ic bosluqla, «Ayin xulasesi» ise
          onsuz render olunurdu — eyni modulun bes tabi iki fərqli ende;
        • ayar ekranlarinda ucuncu bir en de vardi (Small = 600, Medium = 900).

   !! ICQAT KONTEYNER ARTIQ YAZILMIR. Yeni ekran bu sinifle baslayir;
      qoruyucu test: `PageWidthStandardTests`.

   !! Ust bosluq LAYOUT-dandir (`pt-4`) — sehifeler oz `mt-6`-sini yazmir,
      eks halda banner ve corek qirintilari ile arasindaki mesafe ekranda
      ekrana deyiserdi. */
.page-root {
    padding-bottom: 40px;
}

/* Tek sutunlu FORMA ekranlari (sistem ayarlari, Telegram, WhatsApp, mobil).
   !! 920 px — oxunaqli setir uzunlugu. Reqem TEK yerdedir: evvel ucu ucune
      uymayan MaxWidth.Small (600) ve MaxWidth.Medium (900) islenirdi. */
.page-root--narrow {
    max-width: 920px;
    margin-inline: auto;
}

/* ══════════════════════════════════════════════════════════════════════════
   HESAB EKRANININ KART DILI  (.acc-*)  — 19.09.2026
   ══════════════════════════════════════════════════════════════════════════

   !! NIYE QLOBALDIR, SCOPED DEYIL:
      `/account` ekrani UC tabdan ibaretdir ve "Profil" tabinin butun
      mezmunu AYRI komponentdedir (`MyProfilePanel`). Blazor-un scoped CSS-i
      komponent serhedini KECMIR — `AccountPage.razor.css`-deki `.acc-card`
      panelin HTML-ine catmirdi.

      Netice sistem sahibinin 19.09 iradi idi: "dizaynda hecneyi
      deyismemisen". Sifre ve 2FA tablari yeni kart dilinde idi, ilk tab ise
      kohne `MudPaper pa-6 border-2` gorkemi ile qalmisdi — YEN EKRANDA IKI
      FERQLI KART DILI.

      Iki nusxe yazmaq (hem scoped, hem panelde) CLAUDE.md-nin "paralel yol"
      qadagasidir: biri gec-tez geride qalir. Ona gore qayda TEK yerdedir.

   !! `.acc-` on sekilcisi 19.09.2026-da qlobal fayllarda YOX idi (olculdu) —
      `.rep-card` toqqusmasinin eynisi burada tekrarlanmasin deye ad
      qesden dar secilib.

   !! Renqler yalniz `--mud-palette-*` dəyisenlerindendir. */

.acc-card {
    padding: 1.25rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 16px;
    background: var(--mud-palette-surface);
}

/* Ikinci dereceli mezmun — yalniz FON ferqlenir, olculer eynidir.
   23.09.2026 — `-grey` DEYIL, `-gray`: MudBlazor 9.7-de `-grey` YOXDUR ve
   fon sessizce seffaf cixirdi (bax `MudPaletteVariableTests`). */
.acc-card--muted {
    background: var(--mud-palette-background-gray);
}

.acc-card__head {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    margin-bottom: 1rem;
}

.acc-card__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.acc-card__hint {
    font-size: .8rem;
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
}

/* ══ Yan menyunun tooltip-i YALNIZ DAR PANELDƏ görünür (27.09.2026) ══
   Açıq paneldə ad onsuz da yazılıb — tooltip eyni sözü təkrarlayardı.
   Əvvəl bunu `Text="@(DrawerOpen ? "" : …)"` edirdi və panel düyməsinə
   hər basışda BÜTÜN menyu yenidən çəkilirdi (klinikada 38 bənd, bağlananda
   60–72 ms-lik uzun tapşırıq — «donma»). İndi mətn sabitdir, gizlətmə buradadır.
   Qlobal fayldadır: tooltip MudPopoverProvider-də render olunur və scoped
   CSS ona çatmır. `.app-nav-drawer` — MainLayout-dakı yan panel. */
body:has(.app-nav-drawer.mud-drawer--open) .mud-tooltip.nav-tip {
    display: none !important;
}