@import '_content/Majorsoft.Blazor.Components.Common.JsInterop/Majorsoft.Blazor.Components.Common.JsInterop.bundle.scp.css';

/* /Features/Account/Profile/MyProfilePanel.razor.rz.scp.css */
/* === Features/Account/Profile/MyProfilePanel.razor.css ===
   ══════════════════════════════════════════════════════════════════════════
   «MƏNİM PROFİLİM» — 19.09.2026
   ══════════════════════════════════════════════════════════════════════════

   🔴 KART QAYDASI BU FAYLDA YOXDUR. `.acc-card` və törəmələri
      `wwwroot/css/app.css`-dədir (QLOBAL), çünki eyni dili `/account`
      ekranının digər iki tabı da işlədir və scoped CSS komponent sərhədini
      KEÇMİR. İkinci nüsxə yazmaq CLAUDE.md-nin «paralel yol» qadağasıdır.

      Bu fayl YALNIZ panelin öz DÜZÜLÜŞÜNÜ saxlayır.

   🔴 `::deep` QAYDASI: Blazor scope atributunu YALNIZ burada yazdığım adi
      HTML elementlərinə qoyur. MudBlazor komponentinə verilən sinif onun
      DAXİLİ markup-ına düşür və orada scope atributu YOXDUR — ona görə
      `::deep` məcburidir. `.myp-root` sarğısı da məhz buna görə var
      (#48-də ölçüldü, #51-də təkrarlandı).

   ⚠️ Sabit rəng YAZILMIR — hamısı `--mud-palette-*` dəyişənlərindəndir.    */

.myp-root[b-7348fmo1up] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ══════════════════════════════════════════════════════════════════════
   ① KİMLİK BAŞLIĞI
   ══════════════════════════════════════════════════════════════════════
   Üç sütun: şəkil | kim | işçilik. Üstdə tam enli örtük zolağı.

   🔴 ÜÇÜNCÜ SÜTUN ÖLÇÜLMÜŞ QÜSURU BAĞLAYIR: əvvəl başlıq `auto 1fr` idi və
      1440 px-lik ekranda sağında ~600 px BOŞ qalırdı; işçilik isə ayrı
      kartda, uzun formanın yanında dartılıb içi boş görünürdü.

   `minmax(0, 1fr)` MƏCBURİDİR — uzun e-poçt ünvanı sütunu öz `min-content`
   eninə genişləndirir və işçilik sütununu kartdan bayıra itələyir.

   🔴 23.09.2026 — kart `acc-card--muted` DEYİL: həmin sinfin fonu MudBlazor-da
      OLMAYAN `--mud-palette-background-grey`-ə söykənirdi və şəffaf çıxırdı
      (düzgün ad `-gray`-dir). Örtük zolağı ilə kart indi öz səthindədir.     */
.myp-hero[b-7348fmo1up] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(260px, 0.9fr);
    gap: 0 1.75rem;
    align-items: start;
}

/* ── Örtük zolağı ─────────────────────────────────────────────────────
   Kartın daxili boşluğunu (1.25rem, `.acc-card`) mənfi kənarla örtür və
   kartın yuxarı künclərini təkrarlayır (16 px − 1 px kənar).
   ⚠️ Rəng brend dəyişənindəndir: tema dəyişəndə zolaq da dəyişir.        */
.myp-hero__cover[b-7348fmo1up] {
    grid-column: 1 / -1;
    /* 🔴 MƏCBURİDİR: dar ekranda kart `justify-items: center` olur və boş
       element öz məzmununun eninə — SIFIRA — sıxılırdı (375 px-də ölçüldü:
       zolaq ümumiyyətlə görünmürdü). */
    justify-self: stretch;
    height: 88px;
    margin: -1.25rem -1.25rem 0;
    border-radius: 15px 15px 0 0;
    background:
        radial-gradient(color-mix(in srgb, var(--mud-palette-primary-text) 16%, transparent) 1px, transparent 1.5px) 0 0 / 16px 16px,
        linear-gradient(115deg,
            var(--mud-palette-primary) 0%,
            color-mix(in srgb, var(--mud-palette-primary) 72%, var(--mud-palette-secondary)) 100%);
}

.myp-hero__media[b-7348fmo1up] {
    /* Şəkil zolağın üstünə çıxır — başlığın «bu kimdir» nöqtəsi. */
    margin-top: -56px;
    display: flex;
    justify-content: center;
    min-width: 0;
}

.myp-avatar-wrap[b-7348fmo1up] {
    position: relative;
}

.myp-root[b-7348fmo1up]  .myp-avatar {
    height: 112px;
    width: 112px;
    font-size: 2rem;
    overflow: hidden;
    /* Səth rəngli halqa şəkli zolaqdan ayırır. */
    box-shadow: 0 0 0 4px var(--mud-palette-surface), 0 10px 26px rgb(0 0 0 / 16%);
}

.myp-avatar__img[b-7348fmo1up] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ── Kamera düyməsi ───────────────────────────────────────────────────
   Ayrıca YUVADADIR: MudMenu öz kök elementini gətirir; mövqe düymənin
   özünə yazılsaydı o elementin içində sayılardı və düymə küncdən qaçardı. */
.myp-avatar-edit-slot[b-7348fmo1up] {
    position: absolute;
    right: 0;
    bottom: 2px;
}

.myp-avatar-edit[b-7348fmo1up] {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
    border: 3px solid var(--mud-palette-surface);
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    cursor: pointer;
    box-shadow: 0 3px 10px rgb(0 0 0 / 22%);
    transition: transform .15s ease, background-color .15s ease;
}

.myp-avatar-edit:hover[b-7348fmo1up] {
    transform: scale(1.07);
    background: var(--mud-palette-primary-darken);
}

.myp-avatar-edit:focus-visible[b-7348fmo1up] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.myp-avatar-edit:disabled[b-7348fmo1up] {
    opacity: .6;
    cursor: default;
    transform: none;
}

/* ── Kim ─────────────────────────────────────────────────────────────── */
.myp-hero__who[b-7348fmo1up] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding-top: .9rem;
}

.myp-hero__name[b-7348fmo1up] {
    margin: 0;
    font-size: 1.55rem;
    font-weight: 800;
    line-height: 1.15;
    color: var(--mud-palette-text-primary);
    overflow-wrap: anywhere;
}

.myp-hero__chips[b-7348fmo1up] {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin: .35rem 0 .2rem;
}

/* 🔴 `MudChip` DEYİL, adi `<span>`: çip komponenti öz daxili boşluğunu
   (32 px hündürlük) gətirir və üç çip sətri başlığı gözlə gözə dəyəcək
   qədər yükləyirdi. Burada ton və ölçü bizimdir. */
.myp-chip[b-7348fmo1up] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .15rem .55rem;
    border-radius: 999px;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    font-size: .76rem;
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.myp-chip--accent[b-7348fmo1up] {
    border-color: color-mix(in srgb, var(--mud-palette-primary) 45%, transparent);
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
    color: var(--mud-palette-primary);
}

/* ── Əlaqə sətirləri ──────────────────────────────────────────────────
   Bir-birinin ardınca axır, sığmayanda sətir qırılır — dörd ayrı sətir
   başlığı lazımsız uzadırdı. */
.myp-contact[b-7348fmo1up] {
    list-style: none;
    margin: .45rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1.15rem;
}

.myp-contact li[b-7348fmo1up] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-width: 0;
    max-width: 100%;
    font-size: .84rem;
    color: var(--mud-palette-text-secondary);
}

.myp-contact li span[b-7348fmo1up] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Təhlükəsizlik vəziyyəti ──────────────────────────────────────────
   Nişan DÜYMƏDİR (hesab ekranının tabını açır). Rəng TƏK siqnal deyil —
   vəziyyət mətnlə də yazılır. */
.myp-status[b-7348fmo1up] {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin-top: .8rem;
}

.myp-status__pill[b-7348fmo1up] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .75rem;
    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: .78rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform .15s ease, border-color .15s ease;
}

.myp-status__pill:hover[b-7348fmo1up] {
    transform: translateY(-1px);
}

.myp-status__pill:focus-visible[b-7348fmo1up] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.myp-status__pill.is-ok[b-7348fmo1up] {
    border-color: color-mix(in srgb, var(--mud-palette-success) 45%, transparent);
    background: color-mix(in srgb, var(--mud-palette-success) 10%, transparent);
    color: var(--mud-palette-success);
}

.myp-status__pill.is-warn[b-7348fmo1up] {
    border-color: color-mix(in srgb, var(--mud-palette-warning) 55%, transparent);
    background: color-mix(in srgb, var(--mud-palette-warning) 12%, transparent);
    color: var(--mud-palette-warning-darken);
}

.myp-status__pill.is-err[b-7348fmo1up] {
    border-color: color-mix(in srgb, var(--mud-palette-error) 50%, transparent);
    background: color-mix(in srgb, var(--mud-palette-error) 10%, transparent);
    color: var(--mud-palette-error);
}

/* ── Profilin doluluğu ────────────────────────────────────────────────── */
.myp-complete[b-7348fmo1up] {
    margin-top: .95rem;
    max-width: 440px;
}

.myp-complete__head[b-7348fmo1up] {
    margin-bottom: .3rem;
    font-size: .78rem;
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
}

.myp-complete__track[b-7348fmo1up] {
    height: 6px;
    border-radius: 999px;
    background: var(--mud-palette-lines-default);
    overflow: hidden;
}

.myp-complete__fill[b-7348fmo1up] {
    height: 100%;
    border-radius: 999px;
    background: var(--mud-palette-primary);
    transition: width .3s ease;
}

.myp-complete__fill.is-done[b-7348fmo1up] {
    background: var(--mud-palette-success);
}

.myp-complete__missing[b-7348fmo1up] {
    margin-top: .3rem;
    font-size: .74rem;
    line-height: 1.4;
    color: var(--mud-palette-text-secondary);
}

/* ── İşçilik (yalnız-oxu) ────────────────────────────────────────────── */
.myp-hero__work[b-7348fmo1up] {
    min-width: 0;
    margin-top: .9rem;
    padding-left: 1.5rem;
    border-left: 1px solid var(--mud-palette-lines-default);
}

.myp-hero__work-head[b-7348fmo1up] {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.myp-hero__work-head--sub[b-7348fmo1up] {
    margin-top: .9rem;
}

.myp-facts[b-7348fmo1up] {
    margin: .7rem 0 0;
    display: grid;
    /* Etiket sütunu məzmuna görə daralır; dəyər qalan yeri tutur. */
    grid-template-columns: auto minmax(0, 1fr);
    gap: .45rem .9rem;
}

.myp-facts dt[b-7348fmo1up] {
    font-size: .78rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.myp-facts dd[b-7348fmo1up] {
    margin: 0;
    font-size: .84rem;
    font-weight: 600;
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--mud-palette-text-primary);
}

/* HR-in yazdığı qeyd (09.09.2026).
   `pre-line` MƏCBURİDİR: qeyd HR kartında sətirbaşı ilə yazılır və defolt
   `normal` onu bir bloka yığardı — sadalanan bəndlər bir-birinə keçərdi. */
.myp-note[b-7348fmo1up] {
    margin: .5rem 0 0;
    white-space: pre-line;
    overflow-wrap: anywhere;
    font-size: .84rem;
    line-height: 1.5;
    color: var(--mud-palette-text-primary);
}

.myp-hero__work-note[b-7348fmo1up] {
    display: flex;
    align-items: flex-start;
    gap: .35rem;
    margin-top: .9rem;
    font-size: .72rem;
    line-height: 1.4;
    color: var(--mud-palette-text-secondary);
}

/* 23.09.2026 — «Heyət» düyməsi (rola bağlı). MudButton-a verilir → `::deep`. */
.myp-root[b-7348fmo1up]  .myp-staff-btn {
    margin-top: .75rem;
    border-radius: 10px;
    text-transform: none;
    font-weight: 700;
}

/* ══════════════════════════════════════════════════════════════════════
   ② SAHƏ ŞƏBƏKƏSİ
   ══════════════════════════════════════════════════════════════════════
   🔴 ÜÇ SÜTUN — İKİ DEYİL. Əvvəl sahələr `MudItem xs=12 sm=6` idi, yəni
      1440 px-lik ekranda da iki sütun: hər sahə ~560 px enində idi (etiket
      üçün dörd dəfə artıq) və forma ekranı lazımsız yerə uzadırdı.

   ⚠️ `minmax(0, 1fr)` — `MudSelect`-in daxili mətni sütunu genişləndirə
      bilir; `1fr` tək başına daşmanı saxlamır.                              */
.myp-fields[b-7348fmo1up] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

@media (max-width: 1180px) {
    .myp-fields[b-7348fmo1up] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .myp-fields[b-7348fmo1up] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Telefon sahəsi tam enə dartılmır: dəyər ~20 simvoldur və 1100 px-lik
   xanada o, forma deyil, boşluq kimi görünür. */
.myp-phone[b-7348fmo1up] {
    max-width: 420px;
}

/* ══════════════════════════════════════════════════════════════════════
   ƏMƏLİYYAT ZOLAĞI
   ══════════════════════════════════════════════════════════════════════
   🔴 `sticky` — forma 12 sahədir və düymə ekranın sonundadır; istifadəçi
      hər dəyişiklikdən sonra sona sürüşdürürdü.

   ⚠️ DEQRADASİYA TƏHLÜKƏSİZDİR: `sticky` tutmasa (əcdadda `overflow`
      varsa) zolaq sadəcə adi sətir kimi qalır — heç nə sınmır.              */
.myp-save[b-7348fmo1up] {
    position: sticky;
    bottom: .75rem;
    z-index: 2;
    display: flex;
    justify-content: flex-end;
    gap: .75rem;
    padding: .75rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 16px;
    /* 96% — 92% DEYİL. Ölçüldü (19.09.2026): daha şəffaf fonda altdakı
       sahənin mətni zolağın içindən oxunurdu və düymə «yarıqaranlıq»
       görünürdü. Bulanıqlıq dərinlik verir, şəffaflıq isə oxunuşu pozur. */
    background: color-mix(in srgb, var(--mud-palette-surface) 96%, transparent);
    backdrop-filter: blur(8px);
    box-shadow: 0 -2px 12px rgb(0 0 0 / 6%);
}

/* ══════════════════════════════════════════════════════════════════════
   DAR EKRAN
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
    .myp-hero[b-7348fmo1up] {
        grid-template-columns: auto minmax(0, 1fr);
    }

    /* İşçilik tam enə keçir və ayırıcı xətt SOLDAN ÜSTƏ dönür — yan xətt
       tam enli blokda mənasızdır. */
    .myp-hero__work[b-7348fmo1up] {
        grid-column: 1 / -1;
        margin-top: 1.1rem;
        padding-left: 0;
        padding-top: 1rem;
        border-left: 0;
        border-top: 1px solid var(--mud-palette-lines-default);
    }
}

@media (max-width: 720px) {
    .myp-hero[b-7348fmo1up] {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        text-align: center;
    }

    .myp-hero__who[b-7348fmo1up] {
        align-items: center;
        width: 100%;
    }

    .myp-hero__chips[b-7348fmo1up],
    .myp-contact[b-7348fmo1up],
    .myp-status[b-7348fmo1up] {
        justify-content: center;
    }

    .myp-complete[b-7348fmo1up] {
        width: 100%;
        margin-inline: auto;
    }

    .myp-hero__work[b-7348fmo1up] {
        text-align: start;
        width: 100%;
    }

    .myp-save[b-7348fmo1up] {
        justify-content: stretch;
    }
}

@media (prefers-reduced-motion: reduce) {
    .myp-save[b-7348fmo1up] {
        backdrop-filter: none;
    }

    .myp-avatar-edit[b-7348fmo1up],
    .myp-status__pill[b-7348fmo1up],
    .myp-complete__fill[b-7348fmo1up] {
        transition: none;
    }

    .myp-avatar-edit:hover[b-7348fmo1up],
    .myp-status__pill:hover[b-7348fmo1up] {
        transform: none;
    }
}
/* /Features/Account/Shell/UserMenuFooter.razor.rz.scp.css */
/* === Features/Shell/UserMenuFooter.razor.css === */
.user-footer[b-83qld8945r] {
    border-top: 1px solid var(--mud-palette-lines-default);
    padding: 8px;
    margin-top: auto;
}

.user-footer__trigger[b-83qld8945r] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s ease;
}

    .user-footer__trigger:hover[b-83qld8945r] {
        background: color-mix(in srgb, var(--mud-palette-primary) 6%, transparent);
    }

.user-footer__info[b-83qld8945r] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex: 1;
    min-width: 0;
}

.user-footer__name[b-83qld8945r] {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-footer__email[b-83qld8945r] {
    font-size: 11px;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-footer__chevron[b-83qld8945r] {
    opacity: .5;
    flex-shrink: 0;
}
/* /Features/Admin/Backups/DbBackupPanel.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════
   Bazanın ehtiyat nüsxəsi (29.09.2026) — «Pasiyent idxalı / ixracı» ekranı

   ⚠️ Mud komponentinə verilən sinif YALNIZ `::deep` ilə stil alır —
      izolyasiya atributu uşaq komponentə yazılmır (RazorSourceLintTests).
      Ona görə kart adi `div.dbb-root` ilə bükülüb.
   ⚠️ Rənglər MudBlazor palet dəyişənlərindəndir — qaranlıq rejimdə də oxunur.
   ═══════════════════════════════════════════════════════════════════════ */

.dbb-root[b-n2s9htnoy6] {
    min-width: 0;
}

.dbb-root[b-n2s9htnoy6]  .dbb {
    border-radius: 12px;
    background-color: var(--mud-palette-surface);
    border-left: 4px solid var(--mud-palette-primary);
}

.dbb__head[b-n2s9htnoy6] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
}

.dbb__icon[b-n2s9htnoy6] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    color: var(--mud-palette-primary);
    background-color: var(--mud-palette-action-default-hover);
}

.dbb__title[b-n2s9htnoy6] {
    flex: 1 1 auto;
    min-width: 0;
}

.dbb-root[b-n2s9htnoy6]  .dbb__create {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* ── son nüsxə + tezlik ── */
.dbb__facts[b-n2s9htnoy6] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 32px;
    margin-top: 16px;
}

.dbb__fact[b-n2s9htnoy6] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    min-width: 0;
}

.dbb__label[b-n2s9htnoy6] {
    color: var(--mud-palette-text-secondary);
}

.dbb__muted[b-n2s9htnoy6] {
    color: var(--mud-palette-text-secondary);
    font-size: 13px;
}

.dbb-root[b-n2s9htnoy6]  .dbb__interval {
    flex: 0 0 220px;
    width: 220px;
}

.dbb__detail[b-n2s9htnoy6] {
    margin-top: 4px;
    font-size: 12px;
    opacity: .85;
    word-break: break-word;
}

/* ── siyahı ── */
.dbb-root[b-n2s9htnoy6]  .dbb__table {
    background: transparent;
}

.dbb-root[b-n2s9htnoy6]  .dbb__actions {
    text-align: right;
    white-space: nowrap;
}

.dbb-root[b-n2s9htnoy6]  .dbb__tech {
    word-break: break-all;
    opacity: .8;
}

@media (max-width: 600px) {
    .dbb__head[b-n2s9htnoy6] {
        flex-wrap: wrap;
    }

    /* Başlıq ikonun YANINDA qalır, düymə ayrıca sətirdə tam endədir. */
    .dbb__title[b-n2s9htnoy6] {
        flex: 1 1 calc(100% - 52px);
    }

    .dbb-root[b-n2s9htnoy6]  .dbb__create {
        width: 100%;
    }

    .dbb-root[b-n2s9htnoy6]  .dbb__actions {
        text-align: left;
    }
}
/* /Features/Admin/Billing/GiftModulesEditor.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════════
   185 (28.09.2026) — «HƏDİYYƏ MODULLAR» bölməsi (Ödəniş şərti → Kampaniyalar)

   Kart naxışı kampaniya kartı ilə EYNİDİR (`TenantBillingDialog.razor.css`
   `.tbd-camp`): seçiləndə kənar + yumşaq halo. Müddət seçimi tətbiqin tab
   dilindən (`tabs.css` — seqment idarəedicisi) götürülüb, kiçik ölçüdə.
   ══════════════════════════════════════════════════════════════════════════ */

.gme[b-b3wm56sxtz] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.gme-head[b-b3wm56sxtz] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px 16px;
}

.gme-head__text[b-b3wm56sxtz] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.gme-head__title[b-b3wm56sxtz] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: 1rem;
}

.gme-head__desc[b-b3wm56sxtz] {
    font-size: .85rem;
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
}

.gme-head__sum[b-b3wm56sxtz] {
    flex: none;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 700;
    color: var(--mud-palette-success-darken);
    background: color-mix(in srgb, var(--mud-palette-success) 12%, transparent);
}

.gme-grid[b-b3wm56sxtz] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}

.gme-card[b-b3wm56sxtz] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px;
    background: var(--mud-palette-surface);
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

    .gme-card:hover[b-b3wm56sxtz] {
        border-color: color-mix(in srgb, var(--mud-palette-primary) 45%, var(--mud-palette-lines-default));
    }

    .gme-card.is-on[b-b3wm56sxtz] {
        border-color: var(--mud-palette-primary);
        background: color-mix(in srgb, var(--mud-palette-primary) 5%, var(--mud-palette-surface));
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
    }

    .gme-card.is-plan[b-b3wm56sxtz] {
        opacity: .7;
    }

    .gme-card.is-revoke[b-b3wm56sxtz] {
        border-color: color-mix(in srgb, var(--mud-palette-warning) 70%, var(--mud-palette-lines-default));
    }

.gme-card__icon[b-b3wm56sxtz] {
    flex: none;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
}

.gme-card__body[b-b3wm56sxtz] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .gme-card__body[b-b3wm56sxtz]  .gme-card__check {
        margin: -6px 0 0 -10px;
    }

.gme-card__title[b-b3wm56sxtz] {
    font-weight: 700;
}

.gme-card__price[b-b3wm56sxtz] {
    font-size: .8rem;
    color: var(--mud-palette-text-secondary);
}

.gme-note[b-b3wm56sxtz] {
    font-size: .8rem;
    line-height: 1.4;
    color: var(--mud-palette-text-secondary);
}

.gme-note--plan[b-b3wm56sxtz] {
    color: var(--mud-palette-info-darken);
}

.gme-note--warn[b-b3wm56sxtz] {
    color: var(--mud-palette-warning-darken);
    font-weight: 600;
}

/* ── Müddət — tab dilinin kiçik seqment variantı ── */
.gme-dur[b-b3wm56sxtz] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
    padding: 3px;
    border-radius: 10px;
    background: var(--mud-palette-action-disabled-background);
}

.gme-dur__item[b-b3wm56sxtz] {
    padding: 4px 9px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font: inherit;
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    justify-content: flex-start;
    transition: background-color .15s, color .15s;
}

    .gme-dur__item:hover[b-b3wm56sxtz] {
        color: var(--mud-palette-text-primary);
    }

    .gme-dur__item:focus-visible[b-b3wm56sxtz] {
        outline: 2px solid var(--mud-palette-primary);
        outline-offset: -2px;
    }

    .gme-dur__item.is-on[b-b3wm56sxtz] {
        background: var(--mud-palette-surface);
        color: var(--mud-palette-primary);
        box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
    }

.gme-card__body[b-b3wm56sxtz]  .gme-card__date {
    margin-top: 6px;
    max-width: 220px;
}

.gme-until[b-b3wm56sxtz] {
    font-size: .8rem;
    font-weight: 700;
    color: var(--mud-palette-success-darken);
}

    .gme-until.is-bad[b-b3wm56sxtz] {
        color: var(--mud-palette-error);
    }

/* 186 — hədiyyənin DƏYƏRİ («6 ay × 29 AZN = 174 AZN dəyərində»). */
.gme-worth[b-b3wm56sxtz] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .8rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.gme-preview__worth[b-b3wm56sxtz] {
    font-weight: 700;
}

/* ── Müştərinin görəcəyi ── */
.gme-preview[b-b3wm56sxtz] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px dashed color-mix(in srgb, var(--mud-palette-success) 55%, transparent);
    background: color-mix(in srgb, var(--mud-palette-success) 7%, transparent);
}

.gme-preview__label[b-b3wm56sxtz] {
    width: 100%;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.gme-preview__chip[b-b3wm56sxtz] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 600;
    color: var(--mud-palette-success-darken);
    background: color-mix(in srgb, var(--mud-palette-success) 12%, transparent);
}

@media (prefers-reduced-motion: reduce) {
    .gme-card[b-b3wm56sxtz],
    .gme-dur__item[b-b3wm56sxtz] {
        transition: none;
    }
}
/* /Features/Admin/Billing/TenantBillingDialog.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════════
   183 (27.09.2026) — «KAMPANİYALAR» TABI: seçilə bilən kampaniya kartı

   Kart seçiləndə kənar rəngi və yumşaq «halo» (color-mix) dəyişir — seçim
   checkbox-dan əlavə BÜTÜN kartda görünür. Önizləmə müştərinin «Abunəlik»
   ekranında görəcəyinin eynisidir: xətt çəkilmiş məbləğ + 0 + hədiyyə yazısı.
   ══════════════════════════════════════════════════════════════════════════ */

.tbd-camp[b-66rpcd4xms] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px;
    background: var(--mud-palette-surface);
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

    .tbd-camp:hover[b-66rpcd4xms] {
        border-color: color-mix(in srgb, var(--mud-palette-primary) 45%, var(--mud-palette-lines-default));
    }

    .tbd-camp.is-on[b-66rpcd4xms] {
        border-color: var(--mud-palette-primary);
        background: color-mix(in srgb, var(--mud-palette-primary) 5%, var(--mud-palette-surface));
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
    }

    .tbd-camp.is-off[b-66rpcd4xms] {
        opacity: .65;
    }

.tbd-camp__icon[b-66rpcd4xms] {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    color: var(--mud-palette-secondary);
    background: color-mix(in srgb, var(--mud-palette-secondary) 14%, transparent);
}

.tbd-camp__body[b-66rpcd4xms] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* MudCheckBox-un öz boşluğu kartın başlığı ilə hizalanır. */
.tbd-camp__body[b-66rpcd4xms]  .tbd-camp__check {
    margin: -6px 0 0 -10px;
}

.tbd-camp__title[b-66rpcd4xms] {
    font-weight: 700;
}

.tbd-camp__desc[b-66rpcd4xms] {
    font-size: .85rem;
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
}

/* ── Müştərinin görəcəyi ── */
.tbd-preview[b-66rpcd4xms] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 12px;
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px dashed color-mix(in srgb, var(--mud-palette-success) 55%, transparent);
    background: color-mix(in srgb, var(--mud-palette-success) 7%, transparent);
}

.tbd-preview__label[b-66rpcd4xms] {
    flex-basis: 100%;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.tbd-preview__price[b-66rpcd4xms] {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
}

    .tbd-preview__price s[b-66rpcd4xms] {
        color: var(--mud-palette-text-secondary);
    }

    .tbd-preview__price strong[b-66rpcd4xms] {
        font-size: 1.2rem;
    }

.tbd-preview__gift[b-66rpcd4xms] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    color: var(--mud-palette-success-darken, var(--mud-palette-success));
}

/* ══════════════════════════════════════════════════════════════════════════
   186 (28.09.2026) — AYLIQ QİYMƏTİN TƏRKİBİ (hesab-faktura görünüşü)

   Sətirlər: paket · ödənişli modullar · yerlər · hədiyyə (üstündən xətt) ·
   NORMAL QİYMƏT (ara cəm) · hədiyyə/endirim (mənfi) · AYLIQ ÖDƏNİŞ (yekun).
   Rəqəm sütunu sağa düzülür və `tabular-nums` ilə — məbləğlər alt-alta oxunsun.
   ══════════════════════════════════════════════════════════════════════════ */
.tbd-bill[b-66rpcd4xms] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px;
    background: var(--mud-palette-surface);
    overflow: hidden;
}

.tbd-bill__head[b-66rpcd4xms] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    background: color-mix(in srgb, var(--mud-palette-primary) 5%, var(--mud-palette-surface));
}

.tbd-bill__title[b-66rpcd4xms] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
}

.tbd-bill__hint[b-66rpcd4xms] {
    font-size: .8rem;
    color: var(--mud-palette-text-secondary);
}

.tbd-bill__row[b-66rpcd4xms] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 14px;
    font-size: .92rem;
}

    .tbd-bill__row > span:first-child[b-66rpcd4xms] {
        display: inline-flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 4px 8px;
        min-width: 0;
    }

    .tbd-bill__row > span:last-child[b-66rpcd4xms] {
        flex: none;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }

    .tbd-bill__row small[b-66rpcd4xms] {
        font-size: .76rem;
        color: var(--mud-palette-text-secondary);
    }

    .tbd-bill__row.is-gift[b-66rpcd4xms] {
        color: var(--mud-palette-success-darken, var(--mud-palette-success));
    }

        .tbd-bill__row.is-gift s[b-66rpcd4xms] {
            color: var(--mud-palette-text-secondary);
            margin-right: 4px;
        }

    .tbd-bill__row.is-normal[b-66rpcd4xms] {
        border-top: 1px dashed var(--mud-palette-lines-default);
        font-weight: 700;
    }

    .tbd-bill__row.is-minus[b-66rpcd4xms] {
        color: var(--mud-palette-text-secondary);
    }

    .tbd-bill__row.is-total[b-66rpcd4xms] {
        border-top: 1px solid var(--mud-palette-lines-default);
        padding-top: 10px;
        padding-bottom: 10px;
        font-size: 1.05rem;
        font-weight: 800;
        background: color-mix(in srgb, var(--mud-palette-primary) 7%, var(--mud-palette-surface));
    }

/* ── 187 — BİR DƏFƏLİK QURAŞDIRMA HAQQI ─────────────────────────────────
   Aylıq tərkibdən AYRI blokdur: haqq aylıq məbləğə düşmür, bir dəfə alınır.
   Kənar xətt kəsik — «aylıq deyil» fərqi gözlə də görünsün. */
.tbd-setup[b-66rpcd4xms] {
    display: flex;
    flex-direction: column;
    border: 1px dashed var(--mud-palette-lines-default);
    border-radius: 14px;
    background: var(--mud-palette-surface);
    overflow: hidden;
}

.tbd-setup__head[b-66rpcd4xms] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 14px;
    border-bottom: 1px dashed var(--mud-palette-lines-default);
    background: color-mix(in srgb, var(--mud-palette-warning) 6%, var(--mud-palette-surface));
}

.tbd-setup__title[b-66rpcd4xms] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
}

.tbd-setup__hint[b-66rpcd4xms] {
    font-size: .8rem;
    color: var(--mud-palette-text-secondary);
}

.tbd-setup__body[b-66rpcd4xms] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px 20px;
    padding: 10px 14px 6px;
}

    /* 340 px — köməkçi mətn («0 = … MAX 249») bir sətirdə qalsın (1280-də ölçüldü). */
    .tbd-setup__body[b-66rpcd4xms]  .tbd-setup__amount {
        flex: 0 1 340px;
        min-width: 200px;
    }

.tbd-setup__state[b-66rpcd4xms] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 4px;
}

.tbd-setup__status[b-66rpcd4xms] {
    font-size: .8rem;
    color: var(--mud-palette-text-secondary);
}

    .tbd-setup__status.is-due[b-66rpcd4xms] {
        color: var(--mud-palette-warning-darken, var(--mud-palette-warning));
        font-weight: 600;
    }

    .tbd-setup__status.is-paid[b-66rpcd4xms] {
        color: var(--mud-palette-success-darken, var(--mud-palette-success));
        font-weight: 600;
    }
/* /Features/Auth/ForgotPassword/ForgotPassword.razor.rz.scp.css */
/* === ForgotPassword.razor.css � scoped === */

.asisdent-premium-layout[b-tsfdibgokh] {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    background-color: #f8fafc;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    z-index: 9999;
}

.hero-section[b-tsfdibgokh] {
    display: none;
    flex: 1 1 50%;
    width: 50%;
    position: relative;
    background: linear-gradient(135deg, #134e4a 0%, #0f766e 100%);
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

@media (min-width: 992px) { .hero-section[b-tsfdibgokh] { display: flex; } }

.hero-overlay-pattern[b-tsfdibgokh] {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000000' fill-opacity='0.08' d='M17 3c-1.5 0-2.8.9-3.4 2.2a4 4 0 0 0-3.2 0C9.8 3.9 8.5 3 7 3 4.8 3 3 4.8 3 7c0 2 1 4.5 2.5 7.5l2 4c.2.4.6.6 1 .5.4-.1.7-.5.7-.9V15c0-.6.4-1 1-1s1 .4 1 1v3.1c0 .4.3.8.7.9.4.1.8-.1 1-.5l2-4C19 11.5 20 9 20 7c0-2.2-1.8-4-4-4z'/%3E%3C/svg%3E");
    background-size: 35px 35px;
}

.glass-showcase[b-tsfdibgokh] {
    position: relative;
    z-index: 2;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 2.5rem;
    width: 100%;
    max-width: 460px;
    min-height: 520px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #ffffff;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.2);
}

.logo-shield[b-tsfdibgokh] {
    background: #ffffff;
    padding: 0.1rem;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 120px;
    box-sizing: border-box;
}

.login-hero-logo[b-tsfdibgokh] {
    width: 85%;
    height: auto;
    max-height: 160px;
    object-fit: contain;
}

.hero-title[b-tsfdibgokh] {
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 0.8rem;
    letter-spacing: -0.5px;
    margin-top: 0;
}

.hero-subtitle[b-tsfdibgokh] {
    font-size: 0.95rem;
    opacity: 0.85;
    line-height: 1.5;
    margin-top: 0;
}

/* --- FORM PANEL --- */

.form-section[b-tsfdibgokh] {
    flex: 1 1 50%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    padding: 2rem;
}

@media (min-width: 992px) { .form-section[b-tsfdibgokh] { width: 50%; } }

.form-wrapper[b-tsfdibgokh] {
    width: 100%;
    max-width: 400px;
    min-height: 520px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.welcome-header[b-tsfdibgokh] { margin-bottom: 1.5rem; }

.welcome-header h2[b-tsfdibgokh] {
    font-size: 1.8rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 0.3rem;
    margin-top: 0;
    letter-spacing: -0.5px;
}

.welcome-header p[b-tsfdibgokh] {
    color: #64748b;
    font-size: 0.9rem;
    margin: 0;
}

/* --- FLOATING INPUT --- */

.premium-floating[b-tsfdibgokh] { position: relative; width: 100%; }

.premium-input[b-tsfdibgokh] {
    width: 100%; box-sizing: border-box;
    border: 1px solid #cbd5e1; border-radius: 10px;
    background-color: #ffffff; color: #0f172a; font-weight: 500;
    height: calc(3.5rem + 2px);
    padding: 1.25rem 1rem 0.25rem 1rem;
    font-size: 1rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 2px rgba(0,0,0,0.02);
    outline: none;
}

.premium-floating label[b-tsfdibgokh] {
    position: absolute; top: 0; left: 0; height: 100%;
    padding: 1.1rem 1rem;
    pointer-events: none; transform-origin: 0 0;
    transition: opacity .15s ease-in-out, transform .15s ease-in-out;
    color: #64748b; font-size: 0.95rem;
}

.premium-input:hover[b-tsfdibgokh] {
    border-color: #2dd4bf;
    box-shadow: 0 4px 12px rgba(15, 118, 110, 0.05);
}

.premium-input:focus[b-tsfdibgokh] {
    border-color: #0f766e;
    box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.1) !important;
}

.premium-input:focus ~ label[b-tsfdibgokh],
.premium-input:not(:placeholder-shown) ~ label[b-tsfdibgokh] {
    transform: scale(0.8) translateY(-0.6rem) translateX(0.15rem);
    opacity: 0.8;
}

/* --- BUTTON --- */

.btn-primary-saas[b-tsfdibgokh] {
    width: 100%; display: flex; align-items: center; justify-content: center;
    background-color: #0f766e; color: #ffffff; border: none; border-radius: 10px;
    padding: 0.95rem; font-size: 1.05rem; font-weight: 600; cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(15, 118, 110, 0.2);
}

.btn-primary-saas:hover:not(:disabled)[b-tsfdibgokh] {
    background-color: #115e59; transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(15, 118, 110, 0.3);
}

.btn-primary-saas:disabled[b-tsfdibgokh] { background-color: #99f6e4; cursor: not-allowed; box-shadow: none; }

/* --- FEEDBACK --- */

.custom-error-box[b-tsfdibgokh] {
    background-color: #fef2f2; border: 1px solid #fecaca; color: #b91c1c;
    border-radius: 10px; padding: 0.75rem 1rem; font-size: 0.9rem;
    display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1.5rem;
}

.error-icon[b-tsfdibgokh] { width: 20px; height: 20px; flex-shrink: 0; }

.custom-success-box[b-tsfdibgokh] {
    background-color: #f0fdf4; border: 1px solid #bbf7d0; color: #166534;
    border-radius: 10px; padding: 0.75rem 1rem; font-size: 0.9rem;
    display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1.5rem;
}

.success-icon[b-tsfdibgokh] { width: 20px; height: 20px; flex-shrink: 0; }

.loading-spinner[b-tsfdibgokh] {
    width: 1.25rem; height: 1.25rem;
    border: 2px solid rgba(255,255,255,0.3); border-top-color: white;
    border-radius: 50%; animation: spin-b-tsfdibgokh 1s linear infinite; margin-right: 0.5rem;
}

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

.animate-smooth[b-tsfdibgokh] {
    opacity: 0; transform: translateY(30px);
    animation: smoothReveal-b-tsfdibgokh 1.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes smoothReveal-b-tsfdibgokh {
    0% { opacity: 0; transform: translateY(30px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* --- UTILITIES --- */
.text-center[b-tsfdibgokh] { text-align: center; }
.d-flex[b-tsfdibgokh] { display: flex; }
.align-center[b-tsfdibgokh] { align-items: center; }
.justify-center[b-tsfdibgokh] { justify-content: center; }
.justify-end[b-tsfdibgokh] { justify-content: flex-end; }
.flex-column[b-tsfdibgokh] { display: flex; flex-direction: column; }
.mb-4[b-tsfdibgokh] { margin-bottom: 1.5rem !important; }
.mb-6[b-tsfdibgokh] { margin-bottom: 2rem !important; }
.mt-4[b-tsfdibgokh] { margin-top: 1.5rem !important; }
.gap-3[b-tsfdibgokh] { gap: 0.75rem; }
.fw-bold[b-tsfdibgokh] { font-weight: 600; }
/* /Features/Auth/Login/Login.razor.rz.scp.css */
/* Əsas Layihə Şablonu */
.asisdent-premium-layout[b-uxwfz7n1x6] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    background-color: #f8fafc;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    z-index: 9999;
}

/* YARDIMÇI SİNİFLƏR */
.mb-3[b-uxwfz7n1x6] {
    margin-bottom: 1rem;
}

.mb-4[b-uxwfz7n1x6] {
    margin-bottom: 1.5rem;
}

.mt-4[b-uxwfz7n1x6] {
    margin-top: 1.5rem;
}

.shadow-sm[b-uxwfz7n1x6] {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

/* =========================================
   SOL PANEL (50%)
   ========================================= */
.hero-section[b-uxwfz7n1x6] {
    display: none;
    flex: 1 1 50%;
    width: 50%;
    position: relative;
    background: linear-gradient(135deg, #134e4a 0%, #0f766e 100%);
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

@media (min-width: 992px) {
    .hero-section[b-uxwfz7n1x6] {
        display: flex;
    }
}

/* Kiçildilmiş Diş Patterni */
.hero-overlay-pattern[b-uxwfz7n1x6] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000000' fill-opacity='0.08' d='M17 3c-1.5 0-2.8.9-3.4 2.2a4 4 0 0 0-3.2 0C9.8 3.9 8.5 3 7 3 4.8 3 3 4.8 3 7c0 2 1 4.5 2.5 7.5l2 4c.2.4.6.6 1 .5.4-.1.7-.5.7-.9V15c0-.6.4-1 1-1s1 .4 1 1v3.1c0 .4.3.8.7.9.4.1.8-.1 1-.5l2-4C19 11.5 20 9 20 7c0-2.2-1.8-4-4-4z'/%3E%3C/svg%3E");
    background-size: 35px 35px;
}

.glass-showcase[b-uxwfz7n1x6] {
    position: relative;
    z-index: 2;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 2.5rem;
    width: 100%;
    /* 13.09.2026 — 460 → 580 px: slaydda 6 kart İKİ SÜTUNDA düzülür;
       460 px-də hər sütuna ~190 px qalırdı və başlıqlar iki sətrə sınırdı. */
    max-width: 580px;
    min-height: 520px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #ffffff;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.2);
}

.logo-shield[b-uxwfz7n1x6] {
    background: #ffffff;
    padding: 0.1rem;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 120px;
    box-sizing: border-box;
}
.login-hero-logo[b-uxwfz7n1x6] {
    width: 85%;
    height: auto;
    max-height: 160px;
    object-fit: contain;
}

    .login-hero-logo:hover[b-uxwfz7n1x6] {
        transform: scale(1.02);
    }

/* Təkrarlanan brend videosu — köhnə statik loqonun yerinə (2026-07-31).
   Ölçülər loqo ilə eynidir ki, panelin hündürlüyü dəyişməsin. */
/* 13.09.2026 — İKİ VİDEO ÜST-ÜSTƏ: kəsintisiz dövr (bax Login.razor izahı).
   Birinci video axındadır və konteynerin ölçüsünü verir; ikinci eyni
   yerə mütləq mövqe ilə oturur. Görünən yalnız `.is-front`-dur, keçid
   şəffaflıqla gedir — `transition` müddəti JS-dəki keçid müddəti ilə
   (0.8 s) uyğundur. */
.hero-video-stack[b-uxwfz7n1x6] {
    position: relative;
    width: 85%;
    margin: 0 auto;
}

.login-hero-video[b-uxwfz7n1x6] {
    width: 100%;
    height: auto;
    max-height: 160px;
    object-fit: contain;
    display: block;
    border-radius: 12px;
    opacity: 0;
    transition: opacity .8s linear;
}

    .login-hero-video + .login-hero-video[b-uxwfz7n1x6] {
        position: absolute;
        inset: 0;
        height: 100%;
    }

    .login-hero-video.is-front[b-uxwfz7n1x6] {
        opacity: 1;
    }

@media (prefers-reduced-motion: reduce) {
    .login-hero-video[b-uxwfz7n1x6] {
        transition: opacity .3s linear;
    }
}

.hero-title[b-uxwfz7n1x6] {
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 0.8rem;
    letter-spacing: -0.5px;
    margin-top: 0;
}

.hero-subtitle[b-uxwfz7n1x6] {
    font-size: 0.95rem;
    opacity: 0.85;
    line-height: 1.5;
    margin-top: 0;
}

/* ═══════════════════════════════════════════
   ÖZƏLLİK SİYAHISI (sol panel)
   Köhnə 2x2 "pill" gridi əvəz edildi (2026-07-30): tək sözlük etiketlər
   nə dediklərini izah etmirdi. İndi hər sətir ikon + başlıq + fayda.
   ═══════════════════════════════════════════ */
/* 🔴 13.09.2026 — 6 KART, İKİ SÜTUN (əvvəl 4 kart, bir sütun).
   Sistem sahibi: «kartların sayını artır». Bir sütunda 6 sətir paneli
   ekrandan aşağı itələyirdi; iki sütunda hündürlük 4 kartlıq köhnə
   siyahı ilə təxminən eynidir. `grid-auto-rows: 1fr` — bir sətirdəki iki
   kart eyni hündürlükdə olsun (qısa izahlı kart «yarımçıq» görünməsin). */
.feature-list[b-uxwfz7n1x6] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: 0.6rem;
}

/* Dar paneldə (992–1279 px) izah sətri gizlənir: iki sütun 170 px-ə
   düşür və üç sətirlik izah kartı şişirdirdi. Başlıq tək başına oxunur. */
@media (max-width: 1279px) {
    .feature-desc[b-uxwfz7n1x6] {
        display: none;
    }
}

.feature-row[b-uxwfz7n1x6] {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    min-width: 0;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 14px;
    padding: 0.7rem 0.8rem;
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
    /* DİQQƏT: fill-mode QƏSDƏN `backwards`-dır, `both` DEYİL.
       `both` olsaydı animasiya bitəndən sonra transform animasiyanın
       nəzarətində qalar və aşağıdakı :hover translateX-i İŞLƏMƏZDİ.
       `backwards` ilə gecikmə müddətində başlanğıc kadr tutulur,
       animasiya bitəndən sonra isə element bazis dəyərlərinə qayıdır. */
    /* ═══════════════════════════════════════════
       KARTIN GİRİŞİ — "ağır çəkim"

       İstiqamət YUXARIDAN AŞAĞIdır (əvvəl aşağıdan yuxarı idi): kart
       -30px-dən enir, ağırlığına görə 5px aşağı KEÇİR, sonra geri
       qalxıb yerinə oturur. Bu kiçik keçid ağırlıq hissini yaradan
       şeydir — onsuz hərəkət "yüngül" görünür.

       Easing qəsdən linear-a yaxın başlayır (0.16 → 0.84): ağır cisim
       kimi ləng qalxıb sonda yumşaq dayanır. Müddət 0.95 s.
       blur 7px → 0 isə "fokuslanaraq materiallaşma" təsiri verir.

       Gecikmə --d dəyişənindən gəlir (bax Login.razor).
       Yalnız opacity/transform/filter dəyişir — layout hesablanmır,
       yəni telefonda da səlis işləyir.
       ═══════════════════════════════════════════ */
    /* ⚠️ Animasiyanın ÖZÜ burada DEYİL — aşağıdakı iki variant sinfindədir.
       Səbəb: slayd hər dəfə eyni cür girsəydi, 2.8 saniyəlik dövr 4-5 dəfə
       təkrarlandıqdan sonra hərəkət «kobud» oxunur — göz onu əvvəlcədən
       bilir və hər təkrar daha da nəzərə çarpır. */
}

/* ═══════════════════════════════════════════════════════════════════
   İKİ GİRİŞ VARİANTI — SLAYDDAN SLAYDA NÖVBƏLƏŞİR
   ═══════════════════════════════════════════════════════════════════
   Cüt slayd  → YUXARIDAN AŞAĞI düşür  (.feature-list--drop)
   Tək slayd  → SOLDAN SAĞA düzülür    (.feature-list--slide)

   Variantı `Login.razor.cs` → `SlideAnimClass` seçir (`_slidePage % 2`).
   Slayd dəyişəndə `@key` siyahını yenidən yaradır, ona görə animasiya
   həmişə baxımdan başlayır.

   ⚠️ `backwards` fill-mode HƏR İKİ variantda MƏCBURİDİR (bax yuxarıdakı
      izah): `both` olsaydı animasiya bitəndən sonra transform onun
      nəzarətində qalar və `:hover` translateX işləməzdi.
   ═══════════════════════════════════════════════════════════════════ */

/* ── VARİANT 1: ağır çəkim, yuxarıdan ──
   Kart -26px-dən enir, ağırlığına görə 4px aşağı KEÇİR, sonra yerinə
   oturur. Bu kiçik keçid ağırlıq hissini yaradan şeydir.

   ⚠️ blur 7px → 4px azaldıldı. Böyük blur hər kadrda yenidən hesablanır
      və zəif qrafikada (klinika kompüterləri çox vaxt inteqrasiya
      qrafikalıdır) hərəkəti «pilləli» göstərir — «kobudluq» hissinin
      əsas mənbəyi məhz budur, sıçrayışın özü deyil. */
.feature-list--drop .feature-row[b-uxwfz7n1x6] {
    animation: featureDropIn-b-uxwfz7n1x6 0.85s cubic-bezier(0.16, 0.6, 0.3, 1) backwards;
    animation-delay: var(--d, 0ms);
}

@keyframes featureDropIn-b-uxwfz7n1x6 {
    0% {
        opacity: 0;
        transform: translateY(-26px);
        filter: blur(4px);
    }

    55% {
        opacity: 1;
        filter: blur(0);
    }

    /* Ağırlıqla bir az aşağı keçir — "oturma" anı */
    76% {
        transform: translateY(4px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* ── VARİANT 2: soldan sağa düzülmə ──
   Sətirlər soldan sürüşüb yerinə düzülür. Pilləli gecikmə (--d) ilə
   birlikdə «sıraya düzülür» təsiri verir.

   ⚠️ Burada blur YOXDUR və sıçrayış çox kiçikdir (2px). Üfüqi hərəkət
      onsuz da diqqəti çəkir; üstünə blur qoysaq iki effekt bir-birini
      boğar və birinci variantdan fərqlənməz. İki variantın FƏRQLİ
      hiss olunması bütün məqsəddir. */
.feature-list--slide .feature-row[b-uxwfz7n1x6] {
    animation: featureSlideIn-b-uxwfz7n1x6 0.7s cubic-bezier(0.22, 1, 0.36, 1) backwards;
    animation-delay: var(--d, 0ms);
}

@keyframes featureSlideIn-b-uxwfz7n1x6 {
    0% {
        opacity: 0;
        transform: translateX(-38px);
    }

    /* Kiçik keçid — sərt dayanmanın qarşısını alır. */
    78% {
        transform: translateX(2px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* İkon kart oturduqdan SONRA gəlir — sətrin "dolduğu" hiss olunur.
   Gecikmə kartın öz gecikməsindən hesablanır. */
.feature-icon[b-uxwfz7n1x6] {
    animation: featureIconIn-b-uxwfz7n1x6 0.45s cubic-bezier(0.34, 1.45, 0.64, 1) backwards;
    animation-delay: calc(var(--d, 0ms) + 260ms);
}

@keyframes featureIconIn-b-uxwfz7n1x6 {
    from {
        opacity: 0;
        transform: scale(0.35);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

    .feature-row:hover[b-uxwfz7n1x6] {
        background: rgba(255, 255, 255, 0.13);
        border-color: rgba(94, 234, 212, 0.35);
        transform: translateX(3px);
    }

.feature-icon[b-uxwfz7n1x6] {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(94, 234, 212, 0.15);
    color: #5eead4;
    display: flex;
    align-items: center;
    justify-content: center;
}

.feature-text[b-uxwfz7n1x6] {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    min-width: 0;
}

.feature-title[b-uxwfz7n1x6] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #ffffff;
}

.feature-desc[b-uxwfz7n1x6] {
    font-size: 0.76rem;
    color: rgba(255, 255, 255, 0.62);
    margin-top: 2px;
}

/* Alçaq ekranlarda izah sətirlərini gizlədib yer qazanırıq. */
@media (max-height: 760px) {
    .feature-desc[b-uxwfz7n1x6] {
        display: none;
    }

    .feature-row[b-uxwfz7n1x6] {
        padding: 0.5rem 0.9rem;
    }
}

/* Slayd göstəricisi — hansı dördlüyün göstərildiyini bildirir. */
.slider-dots[b-uxwfz7n1x6] {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 1rem;
}

.slider-dot[b-uxwfz7n1x6] {
    width: 6px;
    height: 6px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.25);
    transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1), background 0.4s ease;
}

    .slider-dot.is-active[b-uxwfz7n1x6] {
        width: 20px;
        background: #5eead4;
    }

/* ═══════════════════════════════════════════
   AZ-HƏRƏKƏT REJİMİ

   ƏVVƏL BURADA `animation: none` VARDI — SƏHV İDİ. Kartlar heç bir
   keçid olmadan bir anda dəyişirdi və ekran "cansız" görünürdü.

   Az-hərəkət tələbi "heç nə tərpənməsin" demək DEYİL — böyük
   yerdəyişmə, parallaks və vestibulyar effektlərin olmaması deməkdir.
   Sadə şəffaflıq keçidi bu qaydaya tam uyğundur. Ona görə burada
   yerdəyişmə/ölçü/blur söndürülür, amma fade SAXLANILIR: istifadəçi
   məzmunun yeniləndiyini görür.

   DİQQƏT — Windows-da bu rejim gözlənildiyindən tez-tez aktiv olur:
   Parametrlər → Əlçatanlıq → Vizual effektlər → "Animasiya effektləri"
   söndürülübsə, VƏ YA sessiya RDP üzərindəndir (RDP performansa görə
   client-area animasiyalarını söndürür), brauzer bu rejimə keçir.
   Yəni bu blok nadir hal deyil — real istifadəçilərin bir hissəsi
   məhz bunu görəcək. Ona görə burada da təqdimat səviyyəli qalmalıdır.
   ═══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    /* ⚠️ Selektor İKİ VARİANTI DA adlandırmalıdır.
       Sadəcə `.feature-row` yazsaydıq, `.feature-list--drop .feature-row`
       daha spesifik olduğu üçün (0,3,0 ≫ 0,2,0) qalib gələr və az-hərəkət
       rejimi SƏSSİZCƏ İŞLƏMƏZDİ. Bərabər spesifiklikdə sonuncu qayda —
       yəni bu — üstün gəlir. */
    .feature-list--drop .feature-row[b-uxwfz7n1x6],
    .feature-list--slide .feature-row[b-uxwfz7n1x6] {
        animation: featureFadeIn-b-uxwfz7n1x6 0.45s ease-out backwards;
        animation-delay: var(--d, 0ms);
    }

    .feature-icon[b-uxwfz7n1x6] {
        animation: none;
    }

    .slider-dot[b-uxwfz7n1x6] {
        transition: none;
    }
}

@keyframes featureFadeIn-b-uxwfz7n1x6 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* =========================================
   SAĞ PANEL (50%)
   ========================================= */
.form-section[b-uxwfz7n1x6] {
    flex: 1 1 50%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    padding: 2rem;
}

@media (min-width: 992px) {
    .form-section[b-uxwfz7n1x6] {
        width: 50%;
    }
}

.form-wrapper[b-uxwfz7n1x6] {
    width: 100%;
    max-width: 400px;
    min-height: 520px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Mobil Loqo */
.mobile-logo-container[b-uxwfz7n1x6] {
    display: none;
    text-align: center;
    margin-bottom: 1.5rem;
}

@media (max-width: 991px) {
    .mobile-logo-container[b-uxwfz7n1x6] {
        display: block;
    }
}

.mobile-logo-box[b-uxwfz7n1x6] {
    display: inline-flex;
    align-items: center;
    background: #ffffff;
    padding: 1rem 1.5rem;
    border-radius: 12px;
    border: 1px solid #f1f5f9;
}

.welcome-header[b-uxwfz7n1x6] {
    margin-bottom: 1.5rem;
}

    .welcome-header h2[b-uxwfz7n1x6] {
        font-size: 1.8rem;
        font-weight: 700;
        color: #0f172a;
        margin-bottom: 0.3rem;
        margin-top: 0;
        letter-spacing: -0.5px;
    }

    .welcome-header p[b-uxwfz7n1x6] {
        color: #64748b;
        font-size: 0.9rem;
        margin: 0;
    }

/* =========================================
   Xüsusi Floating Label & Input
   ========================================= */
.premium-floating[b-uxwfz7n1x6] {
    position: relative;
    width: 100%;
}

.premium-input[b-uxwfz7n1x6] {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background-color: #ffffff;
    color: #0f172a;
    font-weight: 500;
    height: calc(3.5rem + 2px);
    padding: 1.25rem 1rem 0.25rem 1rem;
    font-size: 1rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 2px rgba(0,0,0,0.02);
    outline: none;
}

.premium-floating label[b-uxwfz7n1x6] {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    padding: 1.1rem 1rem;
    pointer-events: none;
    transform-origin: 0 0;
    transition: opacity .15s ease-in-out, transform .15s ease-in-out;
    color: #64748b;
    font-size: 0.95rem;
}

.premium-input:hover[b-uxwfz7n1x6] {
    border-color: #2dd4bf;
    box-shadow: 0 4px 12px rgba(15, 118, 110, 0.05);
}

.premium-input:focus[b-uxwfz7n1x6] {
    border-color: #0f766e;
    box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.1) !important;
}

    .premium-input:focus ~ label[b-uxwfz7n1x6],
    .premium-input:not(:placeholder-shown) ~ label[b-uxwfz7n1x6] {
        transform: scale(0.8) translateY(-0.6rem) translateX(0.15rem);
        opacity: 0.8;
    }

.input-group-custom[b-uxwfz7n1x6] {
    position: relative;
}

.password-toggle[b-uxwfz7n1x6] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #94a3b8;
    padding: 0;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    transition: color 0.2s;
    outline: none;
}

    .password-toggle:hover[b-uxwfz7n1x6] {
        color: #0f766e;
    }

    .password-toggle svg[b-uxwfz7n1x6] {
        width: 20px;
        height: 20px;
    }

input[type="password"][b-uxwfz7n1x6] {
    padding-right: 40px !important;
}

    input[type="password"][b-uxwfz7n1x6]::-ms-reveal, input[type="password"][b-uxwfz7n1x6]::-ms-clear {
        display: none;
    }

.btn-primary-saas[b-uxwfz7n1x6] {
    position: relative;
    overflow: hidden;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    background-color: #0f766e;
    color: #ffffff;
    border: none;
    border-radius: 10px;
    padding: 0.95rem;
    font-size: 1.05rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(15, 118, 110, 0.2);
}

    .btn-primary-saas:hover:not(:disabled)[b-uxwfz7n1x6] {
        background-color: #115e59;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(15, 118, 110, 0.3);
    }

    /* Həqiqi "əlçatmaz" vəziyyət — solğun qalır, bu doğrudur. */
    .btn-primary-saas:disabled[b-uxwfz7n1x6] {
        background-color: #99f6e4;
        cursor: not-allowed;
        box-shadow: none;
    }

    /* ═══════════════════════════════════════════
       YÜKLƏNMƏ VƏZİYYƏTİ
       Düymə giriş zamanı disabled olur, amma solğun GÖRÜNMƏMƏLİDİR —
       əvvəl #99f6e4-ə düşürdü və sistem xarab olmuş kimi görünürdü.
       Selektor :disabled-dan daha spesifikdir, ona görə üstün gəlir.
       ═══════════════════════════════════════════ */
    .btn-primary-saas.is-loading:disabled[b-uxwfz7n1x6] {
        background-color: #0f766e;
        cursor: progress;
        box-shadow: 0 2px 8px rgba(15, 118, 110, 0.25);
    }

        /* Düymənin üzərindən keçən işıq dalğası. */
        .btn-primary-saas.is-loading:disabled[b-uxwfz7n1x6]::after {
            content: '';
            position: absolute;
            top: 0;
            left: -60%;
            width: 55%;
            height: 100%;
            background: linear-gradient( 100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.28) 50%, rgba(255, 255, 255, 0) 100% );
            animation: btnSweep-b-uxwfz7n1x6 1.35s cubic-bezier(0.4, 0, 0.2, 1) infinite;
            pointer-events: none;
        }

@keyframes btnSweep-b-uxwfz7n1x6 {
    0% {
        left: -60%;
    }

    100% {
        left: 105%;
    }
}

/* Üç nöqtəli nəbz göstəricisi — köhnə çərçivə spinnerini əvəz edir. */
.btn-dots[b-uxwfz7n1x6] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.btn-dot[b-uxwfz7n1x6] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ffffff;
    opacity: 0.45;
    animation: btnDot-b-uxwfz7n1x6 1.1s ease-in-out infinite;
}

    .btn-dot:nth-child(2)[b-uxwfz7n1x6] {
        animation-delay: 0.16s;
    }

    .btn-dot:nth-child(3)[b-uxwfz7n1x6] {
        animation-delay: 0.32s;
    }

@keyframes btnDot-b-uxwfz7n1x6 {
    0%, 100% {
        opacity: 0.35;
        transform: translateY(0) scale(0.85);
    }

    45% {
        opacity: 1;
        transform: translateY(-3px) scale(1);
    }
}

.btn-label[b-uxwfz7n1x6] {
    position: relative;
    z-index: 1;
}

/* Hərəkətə həssas istifadəçilər üçün animasiyaları söndürürük. */
@media (prefers-reduced-motion: reduce) {
    .btn-primary-saas.is-loading:disabled[b-uxwfz7n1x6]::after {
        animation: none;
    }

    .btn-dot[b-uxwfz7n1x6] {
        animation: none;
        opacity: 0.8;
    }
}

/* Şifrəni Unutdum Linki Dizaynı */
.forgot-pwd-link[b-uxwfz7n1x6] {
    color: #64748b;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    transition: color 0.2s;
}

    .forgot-pwd-link:hover[b-uxwfz7n1x6] {
        color: #0f766e;
    }

/* @keyframes spin QƏSDƏN saxlanılır: scoped CSS-də keyframe adları
   yenidən adlandırılmır və ortaq styles.css-ə düşür — başqa komponent
   ona bel bağlaya bilər. Köhnə .loading-spinner sinfi isə silindi,
   yerini .btn-dots tutdu. */
@keyframes spin-b-uxwfz7n1x6 {
    to {
        transform: rotate(360deg);
    }
}

/* ═══════════════════════════════════════════
   TƏHLÜKƏSİZLİK PANELİ (sağ panel, formanın altı)
   Emoji sətrini əvəz edir (2026-07-30). Yalnız real mövcud
   qorunma mexanizmləri sadalanır — bax Login.razor-dakı qeyd.
   ═══════════════════════════════════════════ */
.security-panel[b-uxwfz7n1x6] {
    border-top: 1px solid #e2e8f0;
    padding-top: 1.1rem;
}

.security-head[b-uxwfz7n1x6] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    color: #0f766e;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    margin-bottom: 0.7rem;
}

/* İki sütunlu şəbəkə — 6 bənd, hər biri qısa və konkret.
   Sütun sayı qəsdən 2-dir: 400px-lik formada 3 sütun mətni kəsərdi. */
.security-grid[b-uxwfz7n1x6] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.35rem;
}

.security-item[b-uxwfz7n1x6] {
    position: relative; /* tooltip-in dayaq nöqtəsi */
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: #f0fdfa;
    border: 1px solid #ccfbf1;
    border-radius: 8px;
    padding: 0.36rem 0.45rem;
    font-size: 0.63rem;
    font-weight: 600;
    color: #115e59;
    line-height: 1.25;
    cursor: help;
    transition: background 0.2s ease, border-color 0.2s ease;
}

    .security-item:hover[b-uxwfz7n1x6] {
        background: #ccfbf1;
        border-color: #5eead4;
    }

/* ═══════════════════════════════════════════
   TOOLTIP — saf CSS
   MudTooltip İSTİFADƏ EDİLMİR: o, MudPopoverProvider tələb edir,
   LoginLayout-da isə provider yoxdur. Onu layout-a əlavə etmək
   ortaq strukturu dəyişmək demək idi — bunun əvəzinə tooltip
   tamamilə bu komponentin içində, ::before/::after ilə qurulub.
   Sıfır asılılıq, sıfır struktur təsiri.
   ═══════════════════════════════════════════ */
.security-item[b-uxwfz7n1x6]::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 9px);
    left: 50%;
    transform: translateX(-50%) translateY(5px);
    width: max-content;
    max-width: 230px;
    background: #0f2f2c;
    color: #f0fdfa;
    font-size: 0.68rem;
    font-weight: 400;
    line-height: 1.45;
    text-align: left;
    padding: 0.55rem 0.7rem;
    border-radius: 9px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.3);
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 60;
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
}

/* Ucu (arrow) */
.security-item[b-uxwfz7n1x6]::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 3px);
    left: 50%;
    transform: translateX(-50%) translateY(5px);
    border: 6px solid transparent;
    border-top-color: #0f2f2c;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 60;
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
}

.security-item:hover[b-uxwfz7n1x6]::after,
.security-item:hover[b-uxwfz7n1x6]::before,
.security-item:focus-visible[b-uxwfz7n1x6]::after,
.security-item:focus-visible[b-uxwfz7n1x6]::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.security-foot[b-uxwfz7n1x6] {
    margin-top: 0.55rem;
    text-align: center;
    font-size: 0.63rem;
    letter-spacing: 0.2px;
    color: #94a3b8;
}

/* Dar ekranlarda tək sütuna keç ki, mətn kəsilməsin. */
@media (max-width: 420px) {
    .security-grid[b-uxwfz7n1x6] {
        grid-template-columns: 1fr;
    }
}

/* Panel içindəki MudIcon svg-ləri komponent sərhədini keçir —
   ::deep olmadan scoped CSS onlara çatmır. */
[b-uxwfz7n1x6] .security-head svg,
[b-uxwfz7n1x6] .security-item svg,
[b-uxwfz7n1x6] .feature-icon svg {
    width: 15px;
    height: 15px;
}

[b-uxwfz7n1x6] .security-head svg {
    width: 17px;
    height: 17px;
}

[b-uxwfz7n1x6] .feature-icon svg {
    width: 19px;
    height: 19px;
}

.custom-error-box[b-uxwfz7n1x6] {
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    border-radius: 10px;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.error-icon[b-uxwfz7n1x6] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.animate-smooth[b-uxwfz7n1x6] {
    opacity: 0;
    transform: translateY(30px);
    animation: smoothReveal-b-uxwfz7n1x6 1.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes smoothReveal-b-uxwfz7n1x6 {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ═══════════════════════════════════════════
   OTP INPUT STYLES (Two-Factor)
   ═══════════════════════════════════════════ */
.otp-input-container[b-uxwfz7n1x6] {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin: 1.5rem 0;
}

.otp-digit-input[b-uxwfz7n1x6] {
    width: 48px;
    height: 56px;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    border: 2px solid #cbd5e1;
    border-radius: 10px;
    background: #ffffff;
    color: #0f172a;
    outline: none;
    transition: all 0.2s ease;
    caret-color: #0f766e;
}

.otp-digit-input:focus[b-uxwfz7n1x6] {
    border-color: #0f766e;
    box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.15);
}

.otp-digit-input:not(:placeholder-shown)[b-uxwfz7n1x6] {
    border-color: #0f766e;
    background: #f0fdfa;
}

/* ═══════════════════════════════════════════
   SUCCESS BOX
   ═══════════════════════════════════════════ */
.custom-success-box[b-uxwfz7n1x6] {
    background-color: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #166534;
    border-radius: 10px;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.success-icon[b-uxwfz7n1x6] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════
   BUTTON TEXT LINK
   ═══════════════════════════════════════════ */
.btn-text-link[b-uxwfz7n1x6] {
    background: none;
    border: none;
    color: #0f766e;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
    transition: color 0.2s;
}

.btn-text-link:hover[b-uxwfz7n1x6] {
    color: #115e59;
}

.btn-text-link:disabled[b-uxwfz7n1x6] {
    color: #94a3b8;
    cursor: not-allowed;
}

/* ═══════════════════════════════════════════
   PASSWORD REQUIREMENTS PANEL
   ═══════════════════════════════════════════ */
.password-requirements-panel[b-uxwfz7n1x6] {
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.25rem;
}

.requirement-list[b-uxwfz7n1x6] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.requirement-item[b-uxwfz7n1x6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #64748b;
    transition: all 0.2s ease;
}

.requirement-item.req-met[b-uxwfz7n1x6] {
    color: #166534;
}

.req-icon[b-uxwfz7n1x6] {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}

/* Strength Bar */
.strength-bar[b-uxwfz7n1x6] {
    width: 100%;
    height: 6px;
    background-color: #e2e8f0;
    border-radius: 3px;
    overflow: hidden;
}

.strength-bar-fill[b-uxwfz7n1x6] {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease, background-color 0.3s ease;
}

.strength-bar-fill.weak[b-uxwfz7n1x6] {
    background-color: #ef4444;
}

.strength-bar-fill.fair[b-uxwfz7n1x6] {
    background-color: #f59e0b;
}

.strength-bar-fill.strong[b-uxwfz7n1x6] {
    background-color: #3b82f6;
}

.strength-bar-fill.very-strong[b-uxwfz7n1x6] {
    background-color: #10b981;
}

/* ═══════════════════════════════════════════
   UTILITY HELPERS
   ═══════════════════════════════════════════ */
.gap-3[b-uxwfz7n1x6] {
    gap: 0.75rem;
}

.gap-5[b-uxwfz7n1x6] {
    gap: 1.25rem;
}

.gap-6[b-uxwfz7n1x6] {
    gap: 1.5rem;
}

.text-center[b-uxwfz7n1x6] {
    text-align: center;
}

.flex-column[b-uxwfz7n1x6] {
    display: flex;
    flex-direction: column;
}

.align-center[b-uxwfz7n1x6] {
    align-items: center;
}

.justify-center[b-uxwfz7n1x6] {
    justify-content: center;
}

.justify-end[b-uxwfz7n1x6] {
    justify-content: flex-end;
}

.d-flex[b-uxwfz7n1x6] {
    display: flex;
}

.pt-3[b-uxwfz7n1x6] {
    padding-top: 0.75rem;
}

.pt-4[b-uxwfz7n1x6] {
    padding-top: 1rem;
}

.pb-8[b-uxwfz7n1x6] {
    padding-bottom: 2rem;
}

.mr-2[b-uxwfz7n1x6] {
    margin-right: 0.5rem;
}

.mb-2[b-uxwfz7n1x6] {
    margin-bottom: 0.5rem;
}

.mb-6[b-uxwfz7n1x6] {
    margin-bottom: 2rem;
}

.mt-2[b-uxwfz7n1x6] {
    margin-top: 0.5rem;
}

.mt-5[b-uxwfz7n1x6] {
    margin-top: 1.5rem;
}

.fw-bold[b-uxwfz7n1x6] {
    font-weight: 600;
}

.mobile-logo-img[b-uxwfz7n1x6] {
    max-height: 50px;
    width: auto;
}
/* /Features/Auth/ResetPassword/ResetPassword.razor.rz.scp.css */
/* === ResetPassword.razor.css � scoped === */

.asisdent-premium-layout[b-ocawrd45cp] {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    background-color: #f8fafc;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    z-index: 9999;
}

.hero-section[b-ocawrd45cp] {
    display: none;
    flex: 1 1 50%;
    width: 50%;
    position: relative;
    background: linear-gradient(135deg, #134e4a 0%, #0f766e 100%);
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

@media (min-width: 992px) { .hero-section[b-ocawrd45cp] { display: flex; } }

.hero-overlay-pattern[b-ocawrd45cp] {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000000' fill-opacity='0.08' d='M17 3c-1.5 0-2.8.9-3.4 2.2a4 4 0 0 0-3.2 0C9.8 3.9 8.5 3 7 3 4.8 3 3 4.8 3 7c0 2 1 4.5 2.5 7.5l2 4c.2.4.6.6 1 .5.4-.1.7-.5.7-.9V15c0-.6.4-1 1-1s1 .4 1 1v3.1c0 .4.3.8.7.9.4.1.8-.1 1-.5l2-4C19 11.5 20 9 20 7c0-2.2-1.8-4-4-4z'/%3E%3C/svg%3E");
    background-size: 35px 35px;
}

.glass-showcase[b-ocawrd45cp] {
    position: relative; z-index: 2;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 2.5rem;
    width: 100%; max-width: 460px; min-height: 520px;
    display: flex; flex-direction: column; justify-content: center;
    color: #ffffff;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.2);
}

.logo-shield[b-ocawrd45cp] {
    background: #ffffff; padding: 0.1rem; border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    width: 100%; min-height: 120px; box-sizing: border-box;
}

.login-hero-logo[b-ocawrd45cp] {
    width: 85%; height: auto; max-height: 160px; object-fit: contain;
}

.hero-title[b-ocawrd45cp] {
    font-size: 2.1rem; font-weight: 700;
    line-height: 1.2; margin-bottom: 0.8rem;
    letter-spacing: -0.5px; margin-top: 0;
}

.hero-subtitle[b-ocawrd45cp] {
    font-size: 0.95rem; opacity: 0.85;
    line-height: 1.5; margin-top: 0;
}

/* --- FORM --- */

.form-section[b-ocawrd45cp] {
    flex: 1 1 50%; width: 100%;
    display: flex; align-items: flex-start; justify-content: center;
    background-color: #ffffff; padding: 2rem;
    overflow-y: auto;
    align-self: stretch;
}

@media (min-width: 992px) { .form-section[b-ocawrd45cp] { width: 50%; } }

.form-wrapper[b-ocawrd45cp] {
    width: 100%; max-width: 400px;
    display: flex; flex-direction: column;
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.welcome-header[b-ocawrd45cp] { margin-bottom: 1.5rem; }

.welcome-header h2[b-ocawrd45cp] {
    font-size: 1.8rem; font-weight: 700; color: #0f172a;
    margin-bottom: 0.3rem; margin-top: 0; letter-spacing: -0.5px;
}

.welcome-header p[b-ocawrd45cp] { color: #64748b; font-size: 0.9rem; margin: 0; }

/* --- FLOATING INPUT --- */

.premium-floating[b-ocawrd45cp] { position: relative; width: 100%; }

.premium-input[b-ocawrd45cp] {
    width: 100%; box-sizing: border-box;
    border: 1px solid #cbd5e1; border-radius: 10px;
    background-color: #ffffff; color: #0f172a; font-weight: 500;
    height: calc(3.5rem + 2px);
    padding: 1.25rem 1rem 0.25rem 1rem;
    font-size: 1rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 2px rgba(0,0,0,0.02);
    outline: none;
}

.premium-floating label[b-ocawrd45cp] {
    position: absolute; top: 0; left: 0; height: 100%;
    padding: 1.1rem 1rem;
    pointer-events: none; transform-origin: 0 0;
    transition: opacity .15s ease-in-out, transform .15s ease-in-out;
    color: #64748b; font-size: 0.95rem;
}

.premium-input:hover[b-ocawrd45cp] {
    border-color: #2dd4bf;
    box-shadow: 0 4px 12px rgba(15, 118, 110, 0.05);
}

.premium-input:focus[b-ocawrd45cp] {
    border-color: #0f766e;
    box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.1) !important;
}

.premium-input:focus ~ label[b-ocawrd45cp],
.premium-input:not(:placeholder-shown) ~ label[b-ocawrd45cp] {
    transform: scale(0.8) translateY(-0.6rem) translateX(0.15rem);
    opacity: 0.8;
}

.input-group-custom[b-ocawrd45cp] { position: relative; }

.password-toggle[b-ocawrd45cp] {
    position: absolute; right: 12px; top: 50%;
    transform: translateY(-50%);
    background: none; border: none; color: #94a3b8;
    padding: 0; cursor: pointer; z-index: 10;
    display: flex; align-items: center;
    transition: color 0.2s; outline: none;
}

.password-toggle:hover[b-ocawrd45cp] { color: #0f766e; }

.password-toggle svg[b-ocawrd45cp] { width: 20px; height: 20px; }

input[type="password"][b-ocawrd45cp] { padding-right: 40px !important; }

/* --- BUTTON --- */

.btn-primary-saas[b-ocawrd45cp] {
    width: 100%; display: flex; align-items: center; justify-content: center;
    background-color: #0f766e; color: #ffffff; border: none; border-radius: 10px;
    padding: 0.95rem; font-size: 1.05rem; font-weight: 600; cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(15, 118, 110, 0.2);
}

.btn-primary-saas:hover:not(:disabled)[b-ocawrd45cp] {
    background-color: #115e59; transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(15, 118, 110, 0.3);
}

.btn-primary-saas:disabled[b-ocawrd45cp] { background-color: #99f6e4; cursor: not-allowed; box-shadow: none; }

/* --- FEEDBACK --- */

.custom-error-box[b-ocawrd45cp] {
    background-color: #fef2f2; border: 1px solid #fecaca; color: #b91c1c;
    border-radius: 10px; padding: 0.75rem 1rem; font-size: 0.9rem;
    display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1.5rem;
}

.error-icon[b-ocawrd45cp] { width: 20px; height: 20px; flex-shrink: 0; }

.custom-success-box[b-ocawrd45cp] {
    background-color: #f0fdf4; border: 1px solid #bbf7d0; color: #166534;
    border-radius: 10px; padding: 0.75rem 1rem; font-size: 0.9rem;
    display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1.5rem;
}

.success-icon[b-ocawrd45cp] { width: 20px; height: 20px; flex-shrink: 0; }

.loading-spinner[b-ocawrd45cp] {
    width: 1.25rem; height: 1.25rem;
    border: 2px solid rgba(255,255,255,0.3); border-top-color: white;
    border-radius: 50%; animation: spin-b-ocawrd45cp 1s linear infinite; margin-right: 0.5rem;
}

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

.animate-smooth[b-ocawrd45cp] {
    opacity: 0; transform: translateY(30px);
    animation: smoothReveal-b-ocawrd45cp 1.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes smoothReveal-b-ocawrd45cp {
    0% { opacity: 0; transform: translateY(30px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* --- PASSWORD REQUIREMENTS PANEL --- */

.password-requirements-panel[b-ocawrd45cp] {
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.25rem;
}

.requirement-list[b-ocawrd45cp] { display: flex; flex-direction: column; gap: 0.6rem; }

.requirement-item[b-ocawrd45cp] {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.85rem; color: #64748b; transition: all 0.2s ease;
}

.requirement-item.req-met[b-ocawrd45cp] { color: #166534; }

.req-icon[b-ocawrd45cp] { flex-shrink: 0; width: 18px; height: 18px; }

.strength-bar[b-ocawrd45cp] {
    width: 100%; height: 6px; background-color: #e2e8f0;
    border-radius: 3px; overflow: hidden;
}

.strength-bar-fill[b-ocawrd45cp] {
    height: 100%; border-radius: 3px;
    transition: width 0.3s ease, background-color 0.3s ease;
}

.strength-bar-fill.weak[b-ocawrd45cp] { background-color: #ef4444; }
.strength-bar-fill.fair[b-ocawrd45cp] { background-color: #f59e0b; }
.strength-bar-fill.strong[b-ocawrd45cp] { background-color: #3b82f6; }
.strength-bar-fill.very-strong[b-ocawrd45cp] { background-color: #10b981; }

/* --- UTILITIES --- */
.text-center[b-ocawrd45cp] { text-align: center; }
.d-flex[b-ocawrd45cp] { display: flex; }
.align-center[b-ocawrd45cp] { align-items: center; }
.justify-center[b-ocawrd45cp] { justify-content: center; }
.justify-end[b-ocawrd45cp] { justify-content: flex-end; }
.flex-column[b-ocawrd45cp] { display: flex; flex-direction: column; }
.mb-4[b-ocawrd45cp] { margin-bottom: 1.5rem !important; }
.mb-6[b-ocawrd45cp] { margin-bottom: 2rem !important; }
.mt-4[b-ocawrd45cp] { margin-top: 1.5rem !important; }
.gap-3[b-ocawrd45cp] { gap: 0.75rem; }
.fw-bold[b-ocawrd45cp] { font-weight: 600; }
/* /Features/Auth/Shared/AuthProcessPanel.razor.rz.scp.css */
/* === AuthProcessPanel.razor.css — scoped ===
   Panel səhifənin tünd yaşıl «glass» kartının İÇİNDƏDİR: fon və çərçivə
   səhifədən gəlir, burada yalnız məzmunun ritmi qurulur.

   ⚠️ MudIcon svg-ləri uşaq komponentdir — `::deep` ADİ HTML valideyndən
      yazılır (`.apx-step__dot`, `.apx-note`), `Class=` ilə YOX. */

.apx[b-afe2qmkym7] {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    color: #ffffff;
}

.apx-brand[b-afe2qmkym7] {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    background: #ffffff;
    border-radius: 14px;
    padding: .3rem .85rem;
    box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .45);
}

.apx-brand__img[b-afe2qmkym7] {
    display: block;
    height: 42px;
    width: auto;
}

.apx-title[b-afe2qmkym7] {
    margin: .35rem 0 0;
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.5px;
}

.apx-sub[b-afe2qmkym7] {
    margin: 0;
    font-size: .95rem;
    line-height: 1.5;
    opacity: .85;
}

.apx-label[b-afe2qmkym7] {
    margin-top: .35rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #5eead4;
}

/* ── ADDIM ZOLAĞI ── */
.apx-steps[b-afe2qmkym7] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.apx-step[b-afe2qmkym7] {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    padding: .55rem .7rem;
    border-radius: 14px;
    animation: apxIn-b-afe2qmkym7 .6s cubic-bezier(.22, 1, .36, 1) backwards;
    animation-delay: var(--d, 0ms);
}

/* Addımları birləşdirən xətt — «ardıcıl proses» hissini verən element. */
.apx-step:not(:last-child)[b-afe2qmkym7]::after {
    content: "";
    position: absolute;
    left: calc(.7rem + 17px);
    top: calc(.55rem + 36px);
    bottom: -.75rem;
    width: 2px;
    transform: translateX(-1px);
    background: rgba(255, 255, 255, .16);
}

.apx-step.is-done:not(:last-child)[b-afe2qmkym7]::after {
    background: rgba(94, 234, 212, .55);
}

/* ⚠️ Çərçivə `box-shadow: inset` ilədir, `border` ilə YOX: border aktiv
   addımı 1 px sürüşdürərdi və xətt nöqtədən qopardı. */
.apx-step.is-active[b-afe2qmkym7] {
    background: rgba(255, 255, 255, .09);
    box-shadow: inset 0 0 0 1px rgba(94, 234, 212, .3);
}

.apx-step__dot[b-afe2qmkym7] {
    position: relative;
    z-index: 1;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .2);
    color: rgba(255, 255, 255, .75);
    transition: background .3s ease, color .3s ease, box-shadow .3s ease;
}

.apx-step.is-active .apx-step__dot[b-afe2qmkym7] {
    background: #5eead4;
    border-color: #5eead4;
    color: #134e4a;
    box-shadow: 0 0 0 5px rgba(94, 234, 212, .18);
}

.apx-step.is-done .apx-step__dot[b-afe2qmkym7] {
    background: rgba(94, 234, 212, .18);
    border-color: rgba(94, 234, 212, .6);
    color: #5eead4;
}

.apx-step__dot[b-afe2qmkym7]  svg {
    width: 17px;
    height: 17px;
}

.apx-step__body[b-afe2qmkym7] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding-top: .12rem;
}

.apx-step__title[b-afe2qmkym7] {
    font-size: .95rem;
    font-weight: 600;
}

.apx-step__desc[b-afe2qmkym7] {
    margin-top: 2px;
    font-size: .8rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, .68);
}

/* ── QEYDLƏR ── */
.apx-notes[b-afe2qmkym7] {
    list-style: none;
    margin: 0;
    padding: .75rem .9rem;
    display: flex;
    flex-direction: column;
    gap: .55rem;
    border-radius: 14px;
    background: rgba(0, 0, 0, .14);
    border: 1px solid rgba(255, 255, 255, .08);
}

.apx-note[b-afe2qmkym7] {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    font-size: .8rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, .86);
}

.apx-note[b-afe2qmkym7]  svg {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    margin-top: 1px;
    color: #5eead4;
}

@keyframes apxIn-b-afe2qmkym7 {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

@keyframes apxFade-b-afe2qmkym7 {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Az-hərəkət rejimi: yerdəyişmə yox, yalnız şəffaflıq (Login.razor.css qaydası). */
@media (prefers-reduced-motion: reduce) {
    .apx-step[b-afe2qmkym7] {
        animation: apxFade-b-afe2qmkym7 .3s ease-out backwards;
        animation-delay: var(--d, 0ms);
    }
}

/* Alçaq ekran: izah sətirləri gizlənir, başlıq kiçilir — panel kəsilmir. */
@media (max-height: 760px) {
    .apx-step__desc[b-afe2qmkym7] {
        display: none;
    }

    .apx-title[b-afe2qmkym7] {
        font-size: 1.6rem;
    }
}
/* /Features/Auth/TwoFactor/TwoFactor.razor.rz.scp.css */
/* === TwoFactor.razor.css � scoped === */

.asisdent-premium-layout[b-1ki8det3ec] {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    background-color: #f8fafc;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    z-index: 9999;
}

.hero-section[b-1ki8det3ec] {
    display: none;
    flex: 1 1 50%;
    width: 50%;
    position: relative;
    background: linear-gradient(135deg, #134e4a 0%, #0f766e 100%);
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

@media (min-width: 992px) { .hero-section[b-1ki8det3ec] { display: flex; } }

.hero-overlay-pattern[b-1ki8det3ec] {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000000' fill-opacity='0.08' d='M17 3c-1.5 0-2.8.9-3.4 2.2a4 4 0 0 0-3.2 0C9.8 3.9 8.5 3 7 3 4.8 3 3 4.8 3 7c0 2 1 4.5 2.5 7.5l2 4c.2.4.6.6 1 .5.4-.1.7-.5.7-.9V15c0-.6.4-1 1-1s1 .4 1 1v3.1c0 .4.3.8.7.9.4.1.8-.1 1-.5l2-4C19 11.5 20 9 20 7c0-2.2-1.8-4-4-4z'/%3E%3C/svg%3E");
    background-size: 35px 35px;
}

.glass-showcase[b-1ki8det3ec] {
    position: relative; z-index: 2;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 2.5rem;
    width: 100%; max-width: 460px; min-height: 520px;
    display: flex; flex-direction: column; justify-content: center;
    color: #ffffff;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.2);
}

.logo-shield[b-1ki8det3ec] {
    background: #ffffff; padding: 0.1rem; border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    width: 100%; min-height: 120px; box-sizing: border-box;
}

.login-hero-logo[b-1ki8det3ec] {
    width: 85%; height: auto; max-height: 160px; object-fit: contain;
}

.hero-title[b-1ki8det3ec] {
    font-size: 2.1rem; font-weight: 700;
    line-height: 1.2; margin-bottom: 0.8rem;
    letter-spacing: -0.5px; margin-top: 0;
}

.hero-subtitle[b-1ki8det3ec] {
    font-size: 0.95rem; opacity: 0.85;
    line-height: 1.5; margin-top: 0;
}

/* --- FORM --- */

.form-section[b-1ki8det3ec] {
    flex: 1 1 50%; width: 100%;
    display: flex; align-items: center; justify-content: center;
    background-color: #ffffff; padding: 2rem;
}

@media (min-width: 992px) { .form-section[b-1ki8det3ec] { width: 50%; } }

.form-wrapper[b-1ki8det3ec] {
    width: 100%; max-width: 400px; min-height: 520px;
    display: flex; flex-direction: column; justify-content: center;
}

.welcome-header[b-1ki8det3ec] { margin-bottom: 1.5rem; }

.welcome-header h2[b-1ki8det3ec] {
    font-size: 1.8rem; font-weight: 700; color: #0f172a;
    margin-bottom: 0.3rem; margin-top: 0; letter-spacing: -0.5px;
}

.welcome-header p[b-1ki8det3ec] { color: #64748b; font-size: 0.9rem; margin: 0; }

/* --- OTP DIGIT INPUT --- */

.otp-input-container[b-1ki8det3ec] {
    display: flex; gap: 0.5rem; justify-content: center; margin: 1.5rem 0;
}

.otp-digit-input[b-1ki8det3ec] {
    width: 48px; height: 56px; text-align: center; font-size: 1.5rem; font-weight: 700;
    border: 2px solid #cbd5e1; border-radius: 10px;
    background: #ffffff; color: #0f172a;
    outline: none; transition: all 0.2s ease; caret-color: #0f766e;
}

.otp-digit-input:focus[b-1ki8det3ec] {
    border-color: #0f766e;
    box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.15);
}

.otp-digit-input:not(:placeholder-shown)[b-1ki8det3ec] {
    border-color: #0f766e; background: #f0fdfa;
}

/* --- FLOATING INPUT (recovery code) --- */

.premium-floating[b-1ki8det3ec] { position: relative; width: 100%; }

.premium-input[b-1ki8det3ec] {
    width: 100%; box-sizing: border-box;
    border: 1px solid #cbd5e1; border-radius: 10px;
    background-color: #ffffff; color: #0f172a; font-weight: 500;
    height: calc(3.5rem + 2px);
    padding: 1.25rem 1rem 0.25rem 1rem;
    font-size: 1rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 2px rgba(0,0,0,0.02);
    outline: none;
}

.premium-floating label[b-1ki8det3ec] {
    position: absolute; top: 0; left: 0; height: 100%;
    padding: 1.1rem 1rem;
    pointer-events: none; transform-origin: 0 0;
    transition: opacity .15s ease-in-out, transform .15s ease-in-out;
    color: #64748b; font-size: 0.95rem;
}

.premium-input:hover[b-1ki8det3ec] {
    border-color: #2dd4bf;
    box-shadow: 0 4px 12px rgba(15, 118, 110, 0.05);
}

.premium-input:focus[b-1ki8det3ec] {
    border-color: #0f766e;
    box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.1) !important;
}

.premium-input:focus ~ label[b-1ki8det3ec],
.premium-input:not(:placeholder-shown) ~ label[b-1ki8det3ec] {
    transform: scale(0.8) translateY(-0.6rem) translateX(0.15rem);
    opacity: 0.8;
}

/* --- BUTTON --- */

.btn-primary-saas[b-1ki8det3ec] {
    width: 100%; display: flex; align-items: center; justify-content: center;
    background-color: #0f766e; color: #ffffff; border: none; border-radius: 10px;
    padding: 0.95rem; font-size: 1.05rem; font-weight: 600; cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(15, 118, 110, 0.2);
}

.btn-primary-saas:hover:not(:disabled)[b-1ki8det3ec] {
    background-color: #115e59; transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(15, 118, 110, 0.3);
}

.btn-primary-saas:disabled[b-1ki8det3ec] { background-color: #99f6e4; cursor: not-allowed; box-shadow: none; }

.btn-text-link[b-1ki8det3ec] {
    background: none; border: none;
    color: #0f766e; font-size: 0.9rem; font-weight: 500;
    cursor: pointer; text-decoration: underline;
    padding: 0; transition: color 0.2s;
}

.btn-text-link:hover[b-1ki8det3ec] { color: #115e59; }
.btn-text-link:disabled[b-1ki8det3ec] { color: #94a3b8; cursor: not-allowed; }

/* --- FEEDBACK --- */

.custom-error-box[b-1ki8det3ec] {
    background-color: #fef2f2; border: 1px solid #fecaca; color: #b91c1c;
    border-radius: 10px; padding: 0.75rem 1rem; font-size: 0.9rem;
    display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1.5rem;
}

.error-icon[b-1ki8det3ec] { width: 20px; height: 20px; flex-shrink: 0; }

.loading-spinner[b-1ki8det3ec] {
    width: 1.25rem; height: 1.25rem;
    border: 2px solid rgba(255,255,255,0.3); border-top-color: white;
    border-radius: 50%; animation: spin-b-1ki8det3ec 1s linear infinite; margin-right: 0.5rem;
}

@keyframes spin-b-1ki8det3ec { to { transform: rotate(360deg); } }

.animate-smooth[b-1ki8det3ec] {
    opacity: 0; transform: translateY(30px);
    animation: smoothReveal-b-1ki8det3ec 1.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes smoothReveal-b-1ki8det3ec {
    0% { opacity: 0; transform: translateY(30px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* --- UTILITIES --- */
.text-center[b-1ki8det3ec] { text-align: center; }
.d-flex[b-1ki8det3ec] { display: flex; }
.align-center[b-1ki8det3ec] { align-items: center; }
.justify-center[b-1ki8det3ec] { justify-content: center; }
.flex-column[b-1ki8det3ec] { display: flex; flex-direction: column; }
.mb-4[b-1ki8det3ec] { margin-bottom: 1.5rem !important; }
.mb-6[b-1ki8det3ec] { margin-bottom: 2rem !important; }
.mt-4[b-1ki8det3ec] { margin-top: 1.5rem !important; }
.gap-3[b-1ki8det3ec] { gap: 0.75rem; }
.fw-bold[b-1ki8det3ec] { font-weight: 600; }
.pt-4[b-1ki8det3ec] { padding-top: 1rem; }
/* /Features/Availability/ScheduleConflictDialog.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════════
   ScheduleConflictDialog.razor.css (115)

   ⚠️ Bütün hədəflər ADİ HTML elementləridir (div/a/span) — scoped atribut
      onlara düşür, yəni `::deep` LAZIM DEYİL. MudButton/MudChip-lərə burada
      sinif verilmir; onların ölçüsü komponentin öz parametrlərindəndir.
   ══════════════════════════════════════════════════════════════════════════ */

.scd-lead[b-talslbfhvx] {
    color: var(--mud-palette-text-secondary);
}

.scd-list[b-talslbfhvx] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* Uzun siyahı dialoqu ekrandan çıxarmasın — 5-6 sətir görünür, qalanı
       sürüşür. Dialoqun öz `MaxHeight`-i yoxdur. */
    max-height: 52vh;
    overflow-y: auto;
    padding-right: 4px;
}

.scd-row[b-talslbfhvx] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    /* ⚠️ `min-width: 0` — uzun xidmət adı sətri genişləndirib düymələri
       dialoqdan bayıra itələməsin. */
    min-width: 0;
}

.scd-row__when[b-talslbfhvx] {
    flex: 0 0 auto;
    text-align: center;
    padding-right: 12px;
    border-right: 1px solid var(--mud-palette-lines-default);
}

.scd-row__date[b-talslbfhvx] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: var(--mud-palette-primary);
}

.scd-row__time[b-talslbfhvx] {
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.scd-row__body[b-talslbfhvx] {
    flex: 1;
    min-width: 0;
}

.scd-row__name[b-talslbfhvx] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 14px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.scd-row__meta[b-talslbfhvx] {
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
    overflow-wrap: anywhere;
}

.scd-row__dot[b-talslbfhvx] {
    margin: 0 5px;
}

.scd-row__phone[b-talslbfhvx] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
    font-size: 12px;
    font-weight: 600;
    color: var(--mud-palette-primary);
    text-decoration: none;
    white-space: nowrap;
}

    .scd-row__phone:hover[b-talslbfhvx] {
        text-decoration: underline;
    }

.scd-row__actions[b-talslbfhvx] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Telefonda sətir alt-alta düzülür — üç sütun 360 px-ə sığmır. */
@media (max-width: 700px) {
    .scd-row[b-talslbfhvx] {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .scd-row__when[b-talslbfhvx] {
        display: flex;
        gap: 8px;
        text-align: start;
        padding-right: 0;
        border-right: none;
    }

    .scd-row__actions[b-talslbfhvx] {
        justify-content: flex-start;
    }
}
/* /Features/Billing/BillingPlanHero.razor.rz.scp.css */
/* === BillingPlanHero.razor.css — scoped ===
   Ton dəyişəni `--bph-tone` kartın BÜTÜN vəziyyət siqnallarını daşıyır:
   yuxarı zolaq, status nişanı, halqa, dövr zolağı. Bir yerdə dəyişir.

   ⚠️ Rəng TƏK SİQNAL DEYİL: status nişanında mətn, halqada rəqəm var
      (rəng korluğu olan istifadəçi də vəziyyəti oxuyur).
   ⚠️ MudIcon / MudButton uşaq komponentdir — `::deep` ADİ HTML valideyndən. */

.bph[b-kesuy2khpv] {
    --bph-tone: var(--mud-palette-primary);
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
    gap: 1.5rem;
    padding: 1.5rem 1.6rem 1.35rem;
    border-radius: 20px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    box-shadow: 0 14px 34px -22px rgba(15, 23, 42, .45);
    overflow: hidden;
}

    .bph[b-kesuy2khpv]::before {
        content: "";
        position: absolute;
        inset: 0 0 auto 0;
        height: 4px;
        background: var(--bph-tone);
    }

    .bph[b-kesuy2khpv]::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        background: radial-gradient(120% 90% at 100% 0%,
                    color-mix(in srgb, var(--bph-tone) 12%, transparent) 0%,
                    transparent 60%);
    }

.bph--ok[b-kesuy2khpv]      { --bph-tone: var(--mud-palette-success); }
.bph--soon[b-kesuy2khpv]    { --bph-tone: var(--mud-palette-warning); }
.bph--danger[b-kesuy2khpv]  { --bph-tone: var(--mud-palette-error); }
.bph--info[b-kesuy2khpv]    { --bph-tone: var(--mud-palette-info); }
.bph--neutral[b-kesuy2khpv] { --bph-tone: var(--mud-palette-primary); }

/* ── SOL ── */
.bph-main[b-kesuy2khpv] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.bph-head[b-kesuy2khpv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
}

.bph-kicker[b-kesuy2khpv] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.bph-status[b-kesuy2khpv] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .7rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
    color: var(--bph-tone);
    background: color-mix(in srgb, var(--bph-tone) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--bph-tone) 30%, transparent);
}

.bph-kicker[b-kesuy2khpv]  svg,
.bph-status[b-kesuy2khpv]  svg {
    width: 16px;
    height: 16px;
}

.bph-plan[b-kesuy2khpv] {
    font-size: clamp(1.6rem, 2.4vw, 2.1rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.5px;
    color: var(--mud-palette-text-primary);
    overflow-wrap: anywhere;
}

.bph-price[b-kesuy2khpv] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .35rem .6rem;
}

.bph-price__strike[b-kesuy2khpv] {
    text-decoration: line-through;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.bph-price__value[b-kesuy2khpv] {
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1;
    color: var(--mud-palette-text-primary);
    font-variant-numeric: tabular-nums;
}

.bph-price__unit[b-kesuy2khpv] {
    font-size: .9rem;
    color: var(--mud-palette-text-secondary);
}

.bph-pill[b-kesuy2khpv] {
    align-self: center;
    display: inline-flex;
    align-items: center;
    padding: .15rem .6rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-background-grey);
    cursor: default;
}

.bph-pill--save[b-kesuy2khpv] {
    color: var(--mud-palette-success);
    background: color-mix(in srgb, var(--mud-palette-success) 12%, transparent);
}

/* 183 (27.09.2026) — «İlk ay bizdən hədiyyə»: qiymətin yanında hədiyyə
   nişanı, altında hədiyyə ayının tarixləri. Rəng «qənaət»dən fərqlidir
   (secondary) — endirim deyil, hədiyyədir. */
.bph-pill--gift[b-kesuy2khpv] {
    gap: .3rem;
    font-size: .78rem;
    color: var(--mud-palette-secondary);
    background: color-mix(in srgb, var(--mud-palette-secondary) 13%, transparent);
    border: 1px solid color-mix(in srgb, var(--mud-palette-secondary) 35%, transparent);
}

.bph-gift-note[b-kesuy2khpv] {
    margin: -.25rem 0 .1rem;
    font-size: .8rem;
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
}

.bph-facts[b-kesuy2khpv] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .6rem;
}

.bph-fact[b-kesuy2khpv] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem .7rem;
    border-radius: 12px;
    background: var(--mud-palette-background-grey);
}

.bph-fact__ico[b-kesuy2khpv] {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
}

    .bph-fact__ico[b-kesuy2khpv]  svg {
        width: 17px;
        height: 17px;
    }

.bph-fact--alert .bph-fact__ico[b-kesuy2khpv] {
    color: var(--mud-palette-error);
    background: color-mix(in srgb, var(--mud-palette-error) 12%, transparent);
}

.bph-fact__text[b-kesuy2khpv] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.bph-fact__label[b-kesuy2khpv] {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.bph-fact__value[b-kesuy2khpv] {
    font-size: .95rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    overflow-wrap: anywhere;
    font-variant-numeric: tabular-nums;
}

.bph-fact--alert .bph-fact__value[b-kesuy2khpv] {
    color: var(--mud-palette-error);
}

.bph-actions[b-kesuy2khpv] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-top: .15rem;
}

    .bph-actions[b-kesuy2khpv]  .mud-button-root {
        border-radius: 10px;
        font-weight: 600;
    }

/* ── SAĞ: GERİ SAYIM ── */
.bph-side[b-kesuy2khpv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    padding: 1rem .75rem;
    text-align: center;
    border-radius: 16px;
    background: color-mix(in srgb, var(--bph-tone) 6%, var(--mud-palette-surface));
    border: 1px solid color-mix(in srgb, var(--bph-tone) 18%, transparent);
}

.bph-ring[b-kesuy2khpv] {
    position: relative;
    width: 132px;
    height: 132px;
}

.bph-ring__svg[b-kesuy2khpv] {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);   /* dolma saat 12-dən başlasın */
}

.bph-ring__track[b-kesuy2khpv] {
    fill: none;
    stroke: color-mix(in srgb, var(--bph-tone) 14%, transparent);
    stroke-width: 10;
}

.bph-ring__bar[b-kesuy2khpv] {
    fill: none;
    stroke: var(--bph-tone);
    stroke-width: 10;
    stroke-linecap: round;
    transition: stroke-dashoffset .9s cubic-bezier(.22, 1, .36, 1), stroke .3s ease;
}

.bph-ring__center[b-kesuy2khpv] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.bph-ring__num[b-kesuy2khpv] {
    font-size: 2.1rem;
    font-weight: 800;
    color: var(--mud-palette-text-primary);
    font-variant-numeric: tabular-nums;
}

.bph-ring__unit[b-kesuy2khpv] {
    margin-top: .2rem;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.bph-side__title[b-kesuy2khpv] {
    margin-top: .35rem;
    font-size: .95rem;
    font-weight: 700;
    color: var(--bph-tone);
}

.bph-side__sub[b-kesuy2khpv] {
    font-size: .8rem;
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
}

/* «Çıxarılmış hesab ≠ cari qiymət» izahı (18.09.2026).
   ⚠️ Kartın TONUNU İŞLƏTMİR (`--bph-tone`): bu, həyəcan deyil, məlumatdır —
      qırmızı/kəhrəba fonda yazılsaydı istifadəçi onu problem sanardı. */
.bph-side__note[b-kesuy2khpv] {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: .3rem;
    margin-top: .5rem;
    max-width: 230px;
    font-size: .72rem;
    line-height: 1.35;
    text-align: start;
    color: var(--mud-palette-text-secondary);
}

.bph-cycle[b-kesuy2khpv] {
    width: 100%;
    max-width: 200px;
    height: 6px;
    margin-top: .45rem;
    border-radius: 999px;
    overflow: hidden;
    background: color-mix(in srgb, var(--bph-tone) 14%, transparent);
}

.bph-cycle__fill[b-kesuy2khpv] {
    height: 100%;
    border-radius: inherit;
    background: var(--bph-tone);
    transition: width .9s cubic-bezier(.22, 1, .36, 1);
}

.bph-cycle__cap[b-kesuy2khpv] {
    font-size: .7rem;
    color: var(--mud-palette-text-secondary);
}

/* ── RESPONSİV ── */
@media (max-width: 960px) {
    .bph[b-kesuy2khpv] {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 640px) {
    .bph[b-kesuy2khpv] {
        padding: 1.2rem 1rem 1.1rem;
    }

    .bph-facts[b-kesuy2khpv] {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .bph-ring__bar[b-kesuy2khpv],
    .bph-cycle__fill[b-kesuy2khpv] {
        transition: none;
    }
}
/* /Features/Billing/LimitTile.razor.rz.scp.css */
/* === LimitTile.razor.css — scoped ===
   Kartın tonu `--blt-tone` dəyişənindədir: normal → primary, 80 %+ →
   warning, dolub → error. Zolaq, vəziyyət mətni və ikon eyni tonu alır. */

.blt[b-qgyfpdm5d8] {
    --blt-tone: var(--mud-palette-primary);
    height: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .45rem;
    padding: .95rem 1rem;
    border-radius: 14px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .blt:hover[b-qgyfpdm5d8] {
        border-color: color-mix(in srgb, var(--blt-tone) 35%, var(--mud-palette-lines-default));
        box-shadow: 0 6px 18px -14px rgba(15, 23, 42, .45);
    }

.blt--near[b-qgyfpdm5d8]   { --blt-tone: var(--mud-palette-warning); }
.blt--full[b-qgyfpdm5d8]   { --blt-tone: var(--mud-palette-error); }
.blt--closed[b-qgyfpdm5d8] { --blt-tone: var(--mud-palette-text-disabled); }

.blt-head[b-qgyfpdm5d8] {
    display: flex;
    align-items: center;
    gap: .55rem;
    min-width: 0;
}

.blt-ico[b-qgyfpdm5d8] {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    color: var(--blt-tone);
    background: color-mix(in srgb, var(--blt-tone) 12%, transparent);
}

    .blt-ico[b-qgyfpdm5d8]  svg {
        width: 17px;
        height: 17px;
    }

.blt-label[b-qgyfpdm5d8] {
    min-width: 0;
    font-size: .78rem;
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
    overflow-wrap: anywhere;
}

.blt-value[b-qgyfpdm5d8] {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--mud-palette-text-primary);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.blt--closed .blt-value[b-qgyfpdm5d8] {
    font-size: .95rem;
    color: var(--mud-palette-text-secondary);
}

.blt-bar[b-qgyfpdm5d8] {
    height: 6px;
    border-radius: 999px;
    overflow: hidden;
    background: color-mix(in srgb, var(--blt-tone) 14%, transparent);
}

.blt-bar__fill[b-qgyfpdm5d8] {
    height: 100%;
    border-radius: inherit;
    background: var(--blt-tone);
    transition: width .6s cubic-bezier(.22, 1, .36, 1);
}

.blt-state[b-qgyfpdm5d8] {
    font-size: .74rem;
    font-weight: 600;
    color: var(--blt-tone);
}

.blt-note[b-qgyfpdm5d8] {
    margin-top: auto;
    font-size: .72rem;
    line-height: 1.4;
    color: var(--mud-palette-text-secondary);
}

@media (prefers-reduced-motion: reduce) {
    .blt[b-qgyfpdm5d8],
    .blt-bar__fill[b-qgyfpdm5d8] {
        transition: none;
    }
}
/* /Features/Billing/PlanPerks.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════════
   «PULUMUN QARŞILIĞI» KARTLARI (18.09.2026)
   ══════════════════════════════════════════════════════════════════════════

   🔴 LİMİT KARTLARINDAN (`LimitTile`) FƏRQLİ GÖRÜNÜR — bu, qəsdəndir:
      yuxarıdakılar «nə qədər qaldı» deyir (sayğac, zolaq, xəbərdarlıq tonu),
      bunlar «bu sizdə VAR» deyir. Eyni görünüşdə olsaydılar «Limitsiz» sözü
      DOLDURULMAMIŞ zolaq kimi oxunardı — yəni müsbət xəbər mənfi görünərdi.

   Fərq üç şeydədir: yaşıl kənar tonu, ikon lövhəsi, sağdakı dolu nişan.     */

.perks[b-ql7voij1nw] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: .75rem;
}

.perk[b-ql7voij1nw] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .7rem;
    padding: .8rem .9rem;
    border: 1px solid color-mix(in srgb, var(--mud-palette-success) 28%, var(--mud-palette-lines-default));
    border-radius: 14px;
    background: color-mix(in srgb, var(--mud-palette-success) 6%, var(--mud-palette-surface));
}

.perk__ico[b-ql7voij1nw] {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 10px;
    background: color-mix(in srgb, var(--mud-palette-success) 16%, transparent);
    color: var(--mud-palette-success);
}

.perk__main[b-ql7voij1nw] {
    min-width: 0;
}

.perk__title[b-ql7voij1nw] {
    font-size: .88rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    overflow-wrap: anywhere;
}

/* Sübut cümləsi — «necə işləyir». Kart onsuz «reklam» kimi oxunur. */
.perk__proof[b-ql7voij1nw] {
    margin-top: .1rem;
    font-size: .74rem;
    line-height: 1.4;
    color: var(--mud-palette-text-secondary);
    overflow-wrap: anywhere;
}

/* ⚠️ Nişan MƏTNDİR, rəng deyil — «Limitsiz» / «Aktiv». */
.perk__state[b-ql7voij1nw] {
    padding: .12rem .5rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--mud-palette-success) 18%, transparent);
    color: var(--mud-palette-success);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Dar ekranda nişan aşağı sətrə keçir — başlıq sıxılmamalıdır. */
@media (max-width: 420px) {
    .perk[b-ql7voij1nw] {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .perk__state[b-ql7voij1nw] {
        grid-column: 2;
        justify-self: start;
    }
}
/* /Features/Calendar/AppointmentCalendar.razor.rz.scp.css */
/* === Features/Calendar/AppointmentCalendar.razor.css ===
   ⚠️ Yalnız BU faylda yazdığımız elementlərə tətbiq olunur. Heron-un öz
   xanalarına (məs. bağlı saat zolağı) çatmaq üçün qlobal `css/app.css`
   istifadə olunur — scoped atribut kitabxananın elementlərinə düşmür. */

.apc[b-e1pshkxm7y] {
    display: flex;
    flex-direction: column;
}

/* Fon yeniləmə zolağı — görünməyəndə də yer tutur ki, şəbəkə tullanmasın. */
.apc-refresh[b-e1pshkxm7y] {
    height: 4px;
    margin-bottom: 4px;
}

/* ─── Toolbar ───
   TƏK SƏTİR: `flex-wrap: nowrap`. Sığmayanda sətir aşağı düşmür, üfüqi sürüşür —
   şəbəkənin başlanğıc yeri sabit qalsın deyə. */
.apc-toolbar[b-e1pshkxm7y] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: nowrap;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 2px;
    margin-bottom: 10px;
    scrollbar-width: thin;
}

.apc-toolbar__left[b-e1pshkxm7y],
.apc-toolbar__right[b-e1pshkxm7y] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
    flex-shrink: 0;
}

/* ─── 115: DAR EKRANDA SÜRÜŞMƏ ƏVƏZİNƏ SƏTİRƏ KEÇ ───
   `overflow-x: auto` yuxarıda qalır (son sədd kimi), lakin 1180 px-dən
   dar ekranda toolbar iki sətirə bölünür.

   🔴 NİYƏ VACİBDİR: üfüqi sürüşmə zolağı «burada daha nəsə var» siqnalını
      YALNIZ siçanı gətirəndə verir. Sistem sahibi məhz bunu gördü — «AY»
      düyməsi vardı, amma yox idi. Sətirə keçmə isə hər şeyi GÖRÜNƏN saxlayır;
      əvəzində şəbəkə 38 px aşağı düşür — bu, itirilmiş düymədən ucuzdur. */
@media (max-width: 1180px) {
    .apc-toolbar[b-e1pshkxm7y] {
        flex-wrap: wrap;
        row-gap: 8px;
        overflow-x: visible;
    }

    .apc-toolbar__left[b-e1pshkxm7y],
    .apc-toolbar__right[b-e1pshkxm7y] {
        flex-wrap: wrap;
        row-gap: 8px;
    }
}

.apc-picker[b-e1pshkxm7y] {
    width: 132px;
}

/* ─── 13.09.2026: HƏKİM RƏNG İZAHLIĞI ───
   Bloklar həkim rəngi ilə boyananda toolbar-ın altında kiçik, sakit sətir.
   Rəng TƏK siqnal deyil — yanında həkimin adı yazılır. */
.apc-legend[b-e1pshkxm7y] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    margin: -2px 0 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.apc-legend__item[b-e1pshkxm7y] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.apc-legend__dot[b-e1pshkxm7y] {
    width: 10px;
    height: 10px;
    flex: 0 0 10px;
    border-radius: 3px;
    background: var(--apc-color);
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .12);
}

/* «Görünüş ayarları» menyusunda bölmə başlıqları (sıxlıq · rəngləmə). */
.apc-menu-label[b-e1pshkxm7y] {
    padding: 8px 16px 2px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

/* Bitişik naviqasiya qrupu (‹ BUGÜN ›) */
.apc-nav[b-e1pshkxm7y],
.apc-views[b-e1pshkxm7y] {
    display: flex;
    align-items: center;
    height: 38px;
    overflow: hidden;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    background: var(--mud-palette-surface);
}

/* ⚠️ Aşağıdakılar Mud komponentlərinə verilən siniflərdir — `::deep` MƏCBURİDİR.
   Scoped CSS `b-xxxxx` atributunu yalnız BİZİM yazdığımız teqlərə əlavə edir,
   uşaq komponentin kök elementinə yox. `::deep`-siz qayda heç vaxt tətbiq
   olunmur (bax: RazorSourceLintTests → bu qaydanı test qoruyur). */
.apc-nav[b-e1pshkxm7y]  .apc-nav__btn {
    height: 100%;
}

.apc-nav[b-e1pshkxm7y]  .apc-nav__today {
    height: 100%;
    padding: 0 14px;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .3px;
    border-left: 1px solid var(--mud-palette-lines-default);
    border-right: 1px solid var(--mud-palette-lines-default);
}

.apc-views[b-e1pshkxm7y]  .apc-views__btn {
    height: 100%;
    padding: 0 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    border-right: 1px solid var(--mud-palette-lines-default);
}

.apc-views[b-e1pshkxm7y]  .apc-views__btn:last-child {
    border-right: none;
}

.apc-views[b-e1pshkxm7y]  .apc-views__btn--on {
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    color: var(--mud-palette-primary);
    font-weight: 800;
}

.apc-toolbar__left[b-e1pshkxm7y]  .apc-range {
    font-weight: 700;
    white-space: nowrap;
    min-width: 148px;
}

/* ⚠️ Toolbar input-larının (apc-input) qaydaları QLOBAL `css/app.css`-dədir.
   Həkim və status süzgəcləri `ToolbarExtra` ilə CalendarPage.razor-dan gəlir —
   onlar BAŞQA komponentin markup-udur və bu faylın scope atributunu daşımır,
   yəni buradakı `::deep` onlara çatmazdı. */

/* ─── Randevu bloku ───
   Kölgəsiz və böyütməsiz (onlar "oyuncaq" görkəm verirdi), lakin RƏNG DOYĞUN:
   12% ton solğun çıxırdı. İndi 22% fon + tam rəngli 4px sol aksent + eyni
   rəngdən törəyən TÜND mətn — blok uzaqdan da xidmətə görə seçilir.
   Nazik tam kənar (1px) blokun harada bitdiyini dəqiqləşdirir. */
.apc-item[b-e1pshkxm7y] {
    position: relative; /* status nişanı mütləq mövqedədir */
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 1px;
    /* Mətnin kartdan kənara çıxmasına qarşı SON sədd — sətir qaydaları
       nədənsə tutmasa belə, artıq hissə burada kəsilir. */
    overflow: hidden;
    padding: 3px 6px 3px 8px;
    border-radius: 6px;
    border: 1px solid color-mix(in srgb, var(--apc-color) 42%, transparent);
    border-left: 4px solid var(--apc-color);
    background: color-mix(in srgb, var(--apc-color) 22%, var(--mud-palette-surface));
    color: color-mix(in srgb, var(--apc-color) 62%, #0b1220);
    line-height: 1.25;
    cursor: pointer;
    /* ─── «Havada üzən» effekt (12.08.2026) ───
       Sol/sağ boşluq Heron-un öz sarğısındadır (`.mud-cal-cell-template`,
       qlobal `css/app.css`) — kartın özünə `margin` versək kitabxananın
       paralel randevu genişlik hesabı sürüşür və bloklar bir-birinin üstünə
       düşür. Burada yalnız kölgə var.
       İKİ QAT kölgə QƏSDƏNDİR: 1px-lik kontur kənarı dəqiqləşdirir, yumşaq
       qat isə hündürlük hissi verir. Hər ikisi kompozit qatda işləyir
       (yenidən düzülüş yaratmır) — 200 blokda da təqvim yavaşlamır. */
    box-shadow: 0 1px 1px rgba(15, 23, 42, .06), 0 2px 5px rgba(15, 23, 42, .07);
    transition: background-color .1s linear, border-color .1s linear, box-shadow .12s ease;
}

    .apc-item:hover[b-e1pshkxm7y] {
        background: color-mix(in srgb, var(--apc-color) 34%, var(--mud-palette-surface));
        border-color: var(--apc-color);
        box-shadow: 0 2px 3px rgba(15, 23, 42, .08), 0 6px 14px rgba(15, 23, 42, .12);
    }

/* Qaranlıq rejimdə eyni düstur mətni oxunmaz edir — ton və mətn tərsinə çevrilir.
   (`html.a11y-dark` bizim komponentdən KƏNARDADIR, lakin əcdad selektoru kimi
   işləyir: scoped atribut yalnız `.apc-item`-ə lazımdır.) */
html.a11y-dark .apc-item[b-e1pshkxm7y] {
    background: color-mix(in srgb, var(--apc-color) 26%, var(--mud-palette-surface));
    color: color-mix(in srgb, var(--apc-color) 30%, #f8fafc);
    /* Qaranlıqda açıq kölgə görünmür — daha tünd və daha geniş. */
    box-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 3px 8px rgba(0, 0, 0, .3);
}

    html.a11y-dark .apc-item:hover[b-e1pshkxm7y] {
        background: color-mix(in srgb, var(--apc-color) 38%, var(--mud-palette-surface));
        box-shadow: 0 2px 4px rgba(0, 0, 0, .45), 0 8px 18px rgba(0, 0, 0, .4);
    }

/* Kölgə hərəkət həssaslığı olan istifadəçi üçün də qalır (statikdir),
   yalnız keçid söndürülür. */
@media (prefers-reduced-motion: reduce) {
    .apc-item[b-e1pshkxm7y] {
        transition: none;
    }
}

/* Standart (hündür bloklar): vaxt üstdə, ad altda. */
.apc-item__head[b-e1pshkxm7y] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    min-width: 0;
    flex-shrink: 0;
    padding-right: 15px; /* nişana yer */
}

/* Vaxt + qısa tarix bir sətirdə. `min-width: 0` olmasa uzun tarix adı
   pasiyent adını kartdan kənara itələyir. */
.apc-item__when[b-e1pshkxm7y] {
    display: flex;
    align-items: baseline;
    gap: 5px;
    min-width: 0;
    flex-shrink: 0;
}

.apc-item__time[b-e1pshkxm7y] {
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    opacity: .85;
    flex-shrink: 0;
    white-space: nowrap;
}

/* Aralıq ayırıcısı — boşluqlar CSS-dədir, mətndə yox.
   Tam ölçülü kartda «09:00 - 09:30», dar kartda «09:00-09:30». */
.apc-item__time-sep[b-e1pshkxm7y] {
    padding: 0 3px;
    opacity: .8;
}

/* Qısa tarix — «13 avq». Tam ölçülü kartda görünür (aşağıda tiny/short
   üçün gizlədilir): yalnız orada sığacağı ZƏMANƏTLİDİR. */
.apc-item__date[b-e1pshkxm7y] {
    font-size: 10px;
    font-weight: 600;
    opacity: .55;
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: .2px;
}

/* Status nişanı — MÜTLƏQ mövqedə, sağ yuxarı küncdə.
   Axının içində olsaydı, mətn sətirlərinin enini yeyib adı vaxtından tez
   kəsərdi. `::deep` məcburidir — MudIcon uşaq komponentdir. */
.apc-item[b-e1pshkxm7y]  .apc-item__badge {
    position: absolute;
    top: 2px;
    right: 3px;
    font-size: 13px !important;
    pointer-events: none;
}

.apc-item[b-e1pshkxm7y]  .apc-item__badge--pending {
    color: #b45309;
}

.apc-item[b-e1pshkxm7y]  .apc-item__badge--confirmed {
    color: #047857;
}

.apc-item[b-e1pshkxm7y]  .apc-item__badge--completed {
    color: #15803d;
}

/* M0 §7.2 — "Gəlmədi" kəhrəba tonundadır. Xəta qırmızısı QƏSDƏN
   istifadə olunmur: bu, sistem xətası deyil, biznes faktıdır. */
.apc-item[b-e1pshkxm7y]  .apc-item__badge--noshow {
    color: #a16207;
}

/* ─── Mətn sətirləri ───
   ÜÇÜ DƏ eyni qaydadadır: bir sətir, sığmayan hissə "…" ilə kəsilir.
   `min-width: 0` OLMADAN flex uşağı öz məzmununun eninə qədər genişlənir və
   `text-overflow` heç vaxt işə düşmür — mətn kartdan kənara çıxır. */
.apc-item__name[b-e1pshkxm7y] {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 1;
}

/* ─── Xidmət sətri = AD + SEANS NİŞANI ───
   🔴 `text-overflow` BU QUTUDA DEYİL, `__service-name`-dədir və bu, düzəliş
      deyil — QAYDADIR. Nişan bu qutunun İÇİNDƏDİR; kəsilməni bura yazsaq
      uzun xidmət adı nişanı «…»-in arxasında qoyur və 5 seanslıq müalicə
      kartda TƏK gəliş kimi görünür (21.08.2026 hadisəsi — nişan render
      olunurdu, heç bir xəta yox idi, sadəcə kəsilirdi).

   Flex olması nişana yer saxlamağa imkan verir: yer çatmayanda AD kiçilir,
   nişan YOX (`flex-shrink: 0`, bax `css/lab.css`). Ad onsuz da «…» ilə
   bitir — kəsilmiş adın quyruğu seansın sayından az dəyərlidir. */
.apc-item__service[b-e1pshkxm7y] {
    display: flex;
    align-items: baseline;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    font-size: 11px;
    font-weight: 500;
    opacity: .75;
    flex-shrink: 1;
    min-height: 0;
    padding-right: 2px;
}

.apc-item__service-name[b-e1pshkxm7y] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ─── Alçaq bloklar ───
   30 dəqiqəlik randevu ən sıx rejimdə 26px olur — üç sətir sığmır və sonuncu
   sətir YARIDAN KƏSİLİRDİ (hərflərin yuxarı yarısı görünürdü).
   `short`: vaxt və ad yan-yana, xidmət altda.
   `tiny`:  yalnız vaxt və ad — xidmət tamamilə gizlənir (yarımçıq sətir yox). */
.apc-item--short[b-e1pshkxm7y],
.apc-item--tiny[b-e1pshkxm7y] {
    padding-top: 2px;
    padding-bottom: 2px;
    gap: 0;
}

    .apc-item--short .apc-item__head[b-e1pshkxm7y],
    .apc-item--tiny .apc-item__head[b-e1pshkxm7y] {
        flex-direction: row;
        align-items: baseline;
        gap: 5px;
        width: 100%;
    }

    .apc-item--short .apc-item__name[b-e1pshkxm7y],
    .apc-item--tiny .apc-item__name[b-e1pshkxm7y] {
        flex: 1 1 auto;
    }

.apc-item--tiny .apc-item__service[b-e1pshkxm7y] {
    display: none;
}

/* ─── Dar kartda vaxt aralığı sıxılır ───
   Ayırıcının ətrafındakı boşluq götürülür və tarix tamamilə gizlənir.
   Bu iki qayda olmasa 15 dəqiqəlik randevu blokunda «09:00 - 09:15 13 avq»
   yazısı pasiyentin adını tamamilə sıxışdırıb çıxarırdı. */
.apc-item--short .apc-item__time-sep[b-e1pshkxm7y],
.apc-item--tiny .apc-item__time-sep[b-e1pshkxm7y] {
    padding: 0;
}

.apc-item--short .apc-item__date[b-e1pshkxm7y],
.apc-item--tiny .apc-item__date[b-e1pshkxm7y] {
    display: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   HÜNDÜR KARTIN ƏLAVƏ SƏTİRLƏRİ (19.09.2026)
   ══════════════════════════════════════════════════════════════════════════

   Sistem sahibi: «kartda randevu ilə bağlı tam məlumat yoxdur, oysa ki
   genişdə yer var».

   🔴 BURADA «GİZLƏT/GÖSTƏR» QAYDASI YOXDUR — blok yalnız `roomy`/`rich`
      kartlarda ÇƏKİLİR (bax `DetailOf`). CSS-in işi göstərmək deyil,
      SƏTİRLƏRİ NİZAMLAMAQ və artığı kəsməkdir.

   ⚠️ `min-height: 0` MƏCBURİDİR: flex uşağı defolt olaraq öz məzmunundan
      kiçilmir və sərhəddəki kartda sonuncu sətir bloku aşağıdan daşırdı.  */
.apc-item__more[b-e1pshkxm7y] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    /* ⚠️ 2px — 3px DEYİL. Ölçüldü (19.09.2026): `roomy` məzmunu 96 px-lik
       sərhəd kartında cəmi 1.8 px yer qoyurdu. Bir piksel də şrift
       fərqindən itə bilər, itən piksel isə hərfin quyruğudur. */
    margin-top: 2px;
    padding-top: 2px;
    /* Ayırıcı — üst üç sətir «kim/nə vaxt/nə», alt sətirlər isə təfərrüatdır.
       Rəng kartın öz tonundan törəyir ki, hər xidmət rəngində eyni zəiflikdə
       görünsün (sabit boz bəzi tonlarda yoxa çıxırdı). */
    border-top: 1px solid color-mix(in srgb, var(--apc-color) 30%, transparent);
}

.apc-item__row[b-e1pshkxm7y] {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    font-size: 11px;
    line-height: 1.3;
    opacity: .8;
}

/* Rəqəm sətirləri (qiymət) — sütun kimi oxunsun. */
.apc-item__row--num[b-e1pshkxm7y] {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    opacity: .9;
}

/* Qeyd sətri yuxarıdan düzülür: iki sətrə açılanda ikon mətnin ORTASINA
   yox, BİRİNCİ sətrinin yanına düşməlidir. */
.apc-item__row--note[b-e1pshkxm7y] {
    align-items: flex-start;
}

.apc-item[b-e1pshkxm7y]  .apc-item__row-ico {
    font-size: 12px !important;
    flex-shrink: 0;
    opacity: .75;
}

.apc-item__row-text[b-e1pshkxm7y] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Qeyd İKİ sətrə qədər açılır — «…» ilə bir sətrə sıxsaq qeydin özü
   mənasını itirir («Antibiotik qəbul ed…»). */
.apc-item__note-text[b-e1pshkxm7y] {
    min-width: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.25;
}

/* Hündür kartda daxili boşluq bir az artır: sıx kartda hər piksel mətnə
   lazımdır, burada isə sıxlıq oxunuşu çətinləşdirir. */
.apc-item--roomy[b-e1pshkxm7y] {
    padding: 4px 7px 4px 9px;
    gap: 2px;
}

/* Çox hündür kartda (rich) qeyd sətri qalan yeri tutur ki, blokun altında
   nə mətn kəsilsin, nə də böyük boşluq qalsın. */
.apc-item--rich .apc-item__more[b-e1pshkxm7y] {
    flex: 1 1 auto;
}

/* Status variantları */
.apc-item--pending[b-e1pshkxm7y] {
    border-left-style: dashed;
}

/* Tamamlanmış — sönük, çünki artıq iş deyil, qeyddir. */
.apc-item--completed[b-e1pshkxm7y] {
    background: color-mix(in srgb, var(--apc-color) 11%, var(--mud-palette-surface));
    border-color: color-mix(in srgb, var(--apc-color) 25%, transparent);
    opacity: .85;
}

.apc-item--cancelled[b-e1pshkxm7y],
.apc-item--rejected[b-e1pshkxm7y],
.apc-item--expired[b-e1pshkxm7y] {
    background: var(--mud-palette-background-grey);
    border-left-color: var(--mud-palette-text-disabled);
    opacity: .55;
}

    .apc-item--cancelled .apc-item__name[b-e1pshkxm7y],
    .apc-item--rejected .apc-item__name[b-e1pshkxm7y],
    .apc-item--expired .apc-item__name[b-e1pshkxm7y] {
        text-decoration: line-through;
    }

/* ─── Bağlı gün / saat bloku ─── */
.apc-block[b-e1pshkxm7y] {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    overflow: hidden;
    padding: 2px 6px;
    border-radius: 4px;
    border-left: 3px solid #ef4444;
    background: repeating-linear-gradient( 45deg, color-mix(in srgb, #ef4444 10%, transparent), color-mix(in srgb, #ef4444 10%, transparent) 6px, transparent 6px, transparent 12px );
    font-size: 11px;
    font-weight: 700;
    color: #b91c1c;
    cursor: default;
}

/* ─── 115: BAĞLI GÜNÜN NİŞANI BÖYÜDÜ ───
   Sistem sahibinin sözü: «bağlı olan günlərdəki icon daha böyük görünməlidir».

   🔴 14 px yanlış müqayisədən doğmuşdu: nişan RANDEVU kartının içindəki
      status ikonu ilə eyni ölçüdə saxlanılmışdı. Halbuki bu, kartın içindəki
      xırda nişan deyil — BÜTÜN GÜNÜ örtən blokun yeganə vizual elementidir.
      Yanındakı mətn 11 px olduğu üçün 14 px-lik ikon «mətnin bir hərfi» kimi
      oxunurdu.

   ⚠️ Ölçü tam gün / saat aralığı üçün FƏRQLİDİR: tam gün bloku sütunun
      bütün hündürlüyünü tutur (yer var), saat aralığı isə cəmi bir-iki
      xanadır (yer yoxdur). Tək ölçü versək biri kiçik, digəri daşqın olardı. */
.apc-block__img[b-e1pshkxm7y] {
    width: 22px;
    height: 22px;
    object-fit: contain;
    flex-shrink: 0;
}

.apc-block[b-e1pshkxm7y]  .apc-block__icon {
    font-size: 22px !important;
    flex-shrink: 0;
}

/* Tam gün bağlıdır — sütun boyu blok, nişan alt-alta və daha böyük. */
.apc-block--closed[b-e1pshkxm7y] {
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    text-align: center;
}

    .apc-block--closed .apc-block__img[b-e1pshkxm7y] {
        width: 34px;
        height: 34px;
    }

    .apc-block--closed[b-e1pshkxm7y]  .apc-block__icon {
        font-size: 34px !important;
    }

/* ─── XÜSUSİ SAATLARIN BAĞLI QALIĞI (115) ───
   Blok cəmi bir-iki xana ola bilər (məs. 08:00–10:00). Tam gün blokunun
   34 px-lik ikonu ora sığmır: mətn itir və blok «boş qırmızı zolaq» kimi
   görünür. Qalıq blok yan-yana düzülür və nişan kiçikdir. */
.apc-block--partial[b-e1pshkxm7y] {
    flex-direction: row;
    gap: 5px;
    font-size: 11px;
}

    .apc-block--partial .apc-block__img[b-e1pshkxm7y] {
        width: 16px;
        height: 16px;
    }

    .apc-block--partial[b-e1pshkxm7y]  .apc-block__icon {
        font-size: 16px !important;
    }

/* Ay görünüşündə xana alçaqdır — orada nişan yenidən kiçilir, əks halda
   günün rəqəmini itələyib çıxarır. */
/* ⚠️ ƏCDAD `.apc` SARĞISIDIR — MudCalendar komponentinə verilən sinif
   DEYİL. Komponent scoped `b-xxx` atributunu ALMIR, ona görə ondan
   başlayan `::deep` qaydası kompilyasiya olunur, testlər yaşıl qalır və
   BRAUZERDƏ HEÇ NƏ ETMİR (114-də eyni tələyə düşülmüşdü).

   ⚠️ Həmin sinfin adı burada QƏSDƏN yazılmır: `RazorSourceLintTests`
      CSS mətnində axtarış aparır və şərhdəki adı da qayda sayır. */
.apc[b-e1pshkxm7y]  .mud-cal-month-view .apc-block--closed {
    flex-direction: row;
    font-size: 11px;
}

    .apc[b-e1pshkxm7y]  .mud-cal-month-view .apc-block--closed .apc-block__img {
        width: 16px;
        height: 16px;
    }

    .apc[b-e1pshkxm7y]  .mud-cal-month-view .apc-block--closed .apc-block__icon {
        font-size: 16px !important;
    }

.apc-block__label[b-e1pshkxm7y] {
    min-width: 0; /* olmadan `text-overflow` işə düşmür — bax .apc-item__name */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ─── Yükləmə skeleti ───
   Kitabxananın öz yerləşdirməsindən istifadə edir: bloklar həqiqi randevuların
   düşəcəyi yerdə görünür, ona görə ekran nə boş, nə də donmuş oxunur. */
.apc-skel[b-e1pshkxm7y] {
    height: 100%;
    border-radius: 4px;
    background: var(--mud-palette-action-default-hover);
    overflow: hidden;
    position: relative;
    pointer-events: none;
}

    .apc-skel[b-e1pshkxm7y]::after {
        content: "";
        position: absolute;
        inset: 0;
        transform: translateX(-100%);
        background: linear-gradient( 90deg, transparent 0%, color-mix(in srgb, var(--mud-palette-surface) 70%, transparent) 50%, transparent 100% );
        animation: apc-shimmer-b-e1pshkxm7y 1.4s ease-in-out infinite;
    }

@keyframes apc-shimmer-b-e1pshkxm7y {
    100% {
        transform: translateX(100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .apc-skel[b-e1pshkxm7y]::after {
        animation: none;
    }
}

/* ─── Kontekst menyu (sağ klik) ─── */
.apc-ctx-overlay[b-e1pshkxm7y] {
    position: fixed;
    inset: 0;
    z-index: 999;
}

.apc-ctx[b-e1pshkxm7y] {
    z-index: 1000;
    min-width: 210px;
    animation: apc-fade-in-b-e1pshkxm7y .12s ease;
}

@keyframes apc-fade-in-b-e1pshkxm7y {
    from {
        opacity: 0;
        transform: scale(.95) translateY(-4px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.apc-ctx[b-e1pshkxm7y]  .apc-ctx__paper {
    border-radius: 12px !important;
    overflow: hidden;
    border: 1px solid var(--mud-palette-lines-default);
}

.apc-ctx__sep[b-e1pshkxm7y] {
    height: 1px;
    background: var(--mud-palette-lines-default);
    margin: 4px 12px;
}

.apc-ctx__item[b-e1pshkxm7y] {
    display: flex;
    align-items: center;
    margin: 4px;
    padding: 10px 14px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background-color .15s ease;
}

.apc-ctx__item--primary[b-e1pshkxm7y] {
    background-color: color-mix(in srgb, var(--mud-palette-info) 10%, transparent) !important;
    color: var(--mud-palette-info) !important;
}

    .apc-ctx__item--primary:hover[b-e1pshkxm7y] {
        background-color: color-mix(in srgb, var(--mud-palette-info) 22%, transparent) !important;
    }

.apc-ctx__item--warning[b-e1pshkxm7y] {
    background-color: color-mix(in srgb, var(--mud-palette-warning) 10%, transparent) !important;
    color: var(--mud-palette-warning) !important;
}

    .apc-ctx__item--warning:hover[b-e1pshkxm7y] {
        background-color: color-mix(in srgb, var(--mud-palette-warning) 22%, transparent) !important;
    }

.apc-ctx__item--success[b-e1pshkxm7y] {
    background-color: color-mix(in srgb, var(--mud-palette-success) 10%, transparent) !important;
    color: var(--mud-palette-success) !important;
}

    .apc-ctx__item--success:hover[b-e1pshkxm7y] {
        background-color: color-mix(in srgb, var(--mud-palette-success) 22%, transparent) !important;
    }

.apc-ctx__item--danger[b-e1pshkxm7y] {
    background-color: color-mix(in srgb, var(--mud-palette-error) 10%, transparent) !important;
    color: var(--mud-palette-error) !important;
}

    .apc-ctx__item--danger:hover[b-e1pshkxm7y] {
        background-color: color-mix(in srgb, var(--mud-palette-error) 22%, transparent) !important;
    }

@media (max-width: 900px) {
    .apc-toolbar__left[b-e1pshkxm7y],
    .apc-toolbar__right[b-e1pshkxm7y] {
        gap: 8px;
    }

    .apc-range[b-e1pshkxm7y] {
        font-size: 13px;
    }
}
/* /Features/Communication/PhonePreview.razor.rz.scp.css */
/* ═══════ Cihaz çərçivəsi ═══════ */
.pp-frame[b-21qfs6h5wg] {
    width: 272px;
    max-width: 100%;
    height: 556px;
    border-radius: 44px;
    padding: 10px;
    background: linear-gradient(160deg, #3c4453, #12161f);
    box-shadow: 0 22px 45px -18px rgba(2, 6, 23, .5), inset 0 1px 1px rgba(255, 255, 255, .09);
    margin: 0 auto;
    flex-shrink: 0;
    font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.pp-screen[b-21qfs6h5wg] {
    position: relative;
    height: 100%;
    border-radius: 34px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #fff;
}

.pp-island[b-21qfs6h5wg] {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 74px;
    height: 19px;
    border-radius: 12px;
    background: #05070c;
    z-index: 6;
}

.pp-homebar[b-21qfs6h5wg] {
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 92px;
    height: 4px;
    border-radius: 4px;
    background: rgba(0, 0, 0, .25);
    z-index: 6;
}

/* ═══════ Status bar ═══════ */
.pp-statusbar[b-21qfs6h5wg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 20px 5px;
    color: #fff;
    flex-shrink: 0;
}

.pp-mode-mail .pp-statusbar[b-21qfs6h5wg] {
    color: #3c4043;
    background: #fff;
}

.pp-time[b-21qfs6h5wg] {
    font-size: 11px;
    font-weight: 700;
}

.pp-status-icons[b-21qfs6h5wg] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

    .pp-status-icons svg[b-21qfs6h5wg] {
        height: 10px;
        width: auto;
        fill: currentColor;
    }

/* ═══════ Söhbət (WhatsApp / Telegram) ═══════ */
.pp-chat-header[b-21qfs6h5wg] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px 10px;
    color: #fff;
    flex-shrink: 0;
}

.pp-back[b-21qfs6h5wg] {
    font-size: 22px;
    line-height: 1;
    opacity: .9;
    font-weight: 300;
}

.pp-avatar[b-21qfs6h5wg] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .95);
    color: #0f766e;
    font-size: 11px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;      /* dairenin kenarindan cixmasin */
    flex-shrink: 0;
}

/* Avatar artiq metn deyil, asisDENT logosudur.
   Logo seffaf fonlu (nonebackground) oldugu ucun ag/teal dairenin
   icinde dogru gorunur. contain — logonun proporsiyasi pozulmasin.

   OPTIK MERKEZLESDIRME (niye transform lazimdir):
     Fayl 604×563 pikseldir, amma icindeki "muredded" (ink) simmetrik DEYIL —
     alfa-ceki merkezi x = 42.5%, y = 45.3% (olculub). Yeni logonun gorunen
     kutlesi hendesi merkezden SOLA ve YUXARI surusub: dis govdesi solda,
     yasil "tick" ise sag-yuxariya nazik ucla uzanir ve boshluq buraxir.
     Netice: dairede logo "sola qacmis" gorunurdu.
     Transform hemin ferqi (7.5% / 4.7%) qaytarir — sekil dairenin
     merkezinde OTURUR. Faylin ozu deyismir, ona gore diger ekranlar
     (navbar, login) tesirlenmir. */
.pp-avatar img[b-21qfs6h5wg],
.pp-mail-avatar img[b-21qfs6h5wg] {
    width: 82%;
    height: 82%;
    object-fit: contain;
    object-position: center;
    display: block;
    transform: translate(7.5%, 4.7%);
}

.pp-contact[b-21qfs6h5wg] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pp-name[b-21qfs6h5wg] {
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pp-presence[b-21qfs6h5wg] {
    font-size: 9.5px;
    opacity: .8;
}

.pp-chat-headicons[b-21qfs6h5wg] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 14px;
}

    .pp-chat-headicons svg[b-21qfs6h5wg] {
        height: 14px;
        width: auto;
        fill: #fff;
        opacity: .92;
    }

.pp-chat-wrap[b-21qfs6h5wg] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.pp-chat-body[b-21qfs6h5wg] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    scrollbar-width: thin;
}

    .pp-chat-body[b-21qfs6h5wg]::-webkit-scrollbar {
        width: 4px;
    }

    .pp-chat-body[b-21qfs6h5wg]::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, .18);
        border-radius: 4px;
    }

.pp-date[b-21qfs6h5wg] {
    align-self: center;
    background: rgba(255, 255, 255, .88);
    color: #54656f;
    font-size: 9.5px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 8px;
    box-shadow: 0 1px 1px rgba(11, 20, 26, .08);
}

.pp-bubble[b-21qfs6h5wg] {
    position: relative;
    align-self: flex-start;
    max-width: 88%;
    background: #fff;
    border-radius: 10px;
    border-top-left-radius: 3px;
    padding: 7px 9px 5px;
    box-shadow: 0 1px 1px rgba(11, 20, 26, .13);
}

    .pp-bubble[b-21qfs6h5wg]::before {
        content: "";
        position: absolute;
        top: 0;
        left: -7px;
        border-top: 9px solid #fff;
        border-left: 9px solid transparent;
    }

.pp-msg[b-21qfs6h5wg] {
    display: block;
    font-size: 12.5px;
    line-height: 1.45;
    color: #111b21;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.pp-msg-time[b-21qfs6h5wg] {
    display: block;
    text-align: right;
    font-size: 9px;
    color: #8696a0;
    margin-top: 3px;
}

/* "Yazır..." animasiyası */
.pp-typing[b-21qfs6h5wg] {
    padding: 11px 13px;
}

    .pp-typing span[b-21qfs6h5wg] {
        display: inline-block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #93a1ad;
        margin-right: 3px;
        animation: pp-typing-bounce-b-21qfs6h5wg 1.2s infinite ease-in-out;
    }

        .pp-typing span:nth-child(2)[b-21qfs6h5wg] {
            animation-delay: .15s;
        }

        .pp-typing span:nth-child(3)[b-21qfs6h5wg] {
            animation-delay: .3s;
            margin-right: 0;
        }

@keyframes pp-typing-bounce-b-21qfs6h5wg {
    0%, 60%, 100% {
        transform: none;
        opacity: .5;
    }

    30% {
        transform: translateY(-3px);
        opacity: 1;
    }
}

.pp-empty[b-21qfs6h5wg] {
    align-self: center;
    margin-top: 28px;
    font-size: 11px;
    font-style: italic;
    color: #667781;
    background: rgba(255, 255, 255, .75);
    padding: 6px 14px;
    border-radius: 10px;
}

.pp-mode-mail .pp-empty[b-21qfs6h5wg] {
    background: #f1f3f4;
    margin: 20px 16px;
    align-self: flex-start;
}

/* Giriş paneli (dekorativ) */
.pp-inputbar[b-21qfs6h5wg] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px 20px;
    flex-shrink: 0;
}

.pp-input[b-21qfs6h5wg] {
    flex: 1;
    background: #fff;
    border-radius: 18px;
    padding: 8px 14px;
    font-size: 11.5px;
    color: #8696a0;
    box-shadow: 0 1px 1px rgba(11, 20, 26, .08);
}

.pp-send[b-21qfs6h5wg] {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(11, 20, 26, .18);
}

    .pp-send svg[b-21qfs6h5wg] {
        height: 16px;
        width: auto;
        fill: #fff;
    }

/* ═══════ E-poçt görünüşü ═══════ */
.pp-mode-mail[b-21qfs6h5wg] {
    background: #fff;
}

.pp-mail-appbar[b-21qfs6h5wg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 14px 6px;
    color: #5f6368;
    flex-shrink: 0;
}

    .pp-mail-appbar .pp-back[b-21qfs6h5wg] {
        color: #5f6368;
        opacity: 1;
    }

.pp-mail-appicons[b-21qfs6h5wg] {
    display: inline-flex;
    gap: 14px;
}

    .pp-mail-appicons svg[b-21qfs6h5wg] {
        height: 15px;
        width: auto;
        fill: #5f6368;
    }

.pp-mail-scroll[b-21qfs6h5wg] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    scrollbar-width: thin;
    padding-bottom: 16px;
}

    .pp-mail-scroll[b-21qfs6h5wg]::-webkit-scrollbar {
        width: 4px;
    }

    .pp-mail-scroll[b-21qfs6h5wg]::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, .15);
        border-radius: 4px;
    }

.pp-mail-subject[b-21qfs6h5wg] {
    padding: 10px 16px 4px;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.35;
    color: #1f1f1f;
    word-break: break-word;
}

.pp-mail-meta[b-21qfs6h5wg] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px 10px;
    border-bottom: 1px solid #f1f3f4;
}

.pp-mail-avatar[b-21qfs6h5wg] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    color: #0f766e;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;      /* logo dairenin kenarindan cixmasin */
    flex-shrink: 0;
}

.pp-mail-who[b-21qfs6h5wg] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pp-mail-sender[b-21qfs6h5wg] {
    font-size: 12px;
    font-weight: 700;
    color: #1f1f1f;
}

    .pp-mail-sender em[b-21qfs6h5wg] {
        font-style: normal;
        font-weight: 500;
        font-size: 10.5px;
        color: #5e6368;
    }

.pp-mail-to[b-21qfs6h5wg] {
    font-size: 10.5px;
    color: #5e6368;
}

.pp-mail-body[b-21qfs6h5wg] {
    padding: 12px 16px;
    font-size: 12.5px;
    line-height: 1.55;
    color: #202124;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.pp-mail-actions[b-21qfs6h5wg] {
    margin: auto 16px 6px;
    padding-top: 14px;
    display: flex;
    gap: 8px;
}

    .pp-mail-actions span[b-21qfs6h5wg] {
        border: 1px solid #dadce0;
        border-radius: 16px;
        padding: 5px 14px;
        font-size: 11px;
        font-weight: 600;
        color: #444746;
    }

/* Skelet xətləri (e-poçt yüklənərkən) */
.pp-skel[b-21qfs6h5wg] {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 14px 16px;
}

    .pp-skel span[b-21qfs6h5wg] {
        height: 9px;
        border-radius: 4px;
        background: linear-gradient(90deg, #eceff3 25%, #f7f8fa 50%, #eceff3 75%);
        background-size: 200% 100%;
        animation: pp-shimmer-b-21qfs6h5wg 1.2s infinite;
    }

@keyframes pp-shimmer-b-21qfs6h5wg {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}
/* /Features/Crm/Components/OdontogramChart.razor.rz.scp.css */
/* === Features/Crm/Components/OdontogramChart.razor.css ===
   U-formalı odontogram + popover məzmunu + tarixçə.
   QEYD: MudPopover özü portal-a render olunur (scope atributu almır) —
   ona görə ölçü/padding popover İÇİNDƏKİ .odo-pop-content üzərindən verilir.
   MarkupString ilə çəkilən SVG mətnləri (nömrə, fayl nişanı) scope atributu
   almır — onların rəngləri `wwwroot/css/odontogram.css`-dədir.

   Bütün rənglər MudBlazor CSS dəyişənləri ilə təyin edilir ki,
   gecə/gündüz rejimində uyğun olsun.

   13.09.2026 — KOMPAKT DÜZÜLÜŞ: izahlıq xəritənin üstündə, xəritə eni
   məhdud (panel sürüşmür), tarixçə sıx sətirlər + səhifə. */

.odo-root[b-3ux63x24vd] {
    width: 100%;
}

.odo-layout[b-3ux63x24vd] {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 16px;
    align-items: start;
}

@media (max-width: 960px) {
    .odo-layout[b-3ux63x24vd] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ─── SOL KART: XƏRİTƏ ─── */
.odo-chart-card[b-3ux63x24vd] {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
    padding: 16px 18px;
}

.odo-chart-header[b-3ux63x24vd] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.odo-chart-title[b-3ux63x24vd] {
    font-size: 1rem;
    font-weight: 800;
    color: var(--mud-palette-text-primary);
}

.odo-chart-subtitle[b-3ux63x24vd] {
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary);
    margin-top: 2px;
}

.odo-fdi-badge[b-3ux63x24vd] {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 22%, transparent);
    border-radius: 999px;
    padding: 4px 10px;
    white-space: nowrap;
}

/* ─── İZAHLIQ (xəritənin üstündə) ─── */
.odo-legend[b-3ux63x24vd] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    margin: 12px 0 4px;
    padding: 8px 12px;
    background: var(--mud-palette-background-grey);
    border-radius: 12px;
}

.odo-legend-item[b-3ux63x24vd] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
}

.odo-legend-swatch[b-3ux63x24vd] {
    width: 12px;
    height: 12px;
    border-radius: 4px;
    border: 1.5px solid;
    display: inline-block;
}

/* Popover anchor-larının absolute yerləşməsi üçün relative konteyner.
   Eni 560px-ə məhdudlaşdırılıb: 684/720 nisbətdə xəritə ~530px hündür
   olur və pasiyent kartının tab panelinə sürüşməsiz sığır. */
.odo-arch-container[b-3ux63x24vd] {
    position: relative;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
}

.odo-svg[b-3ux63x24vd] {
    width: 100%;
    height: auto;
    display: block;
}

.odo-arch-guide[b-3ux63x24vd] {
    fill: none;
    stroke: var(--mud-palette-lines-default);
    stroke-width: 1.5;
    stroke-dasharray: 5 7;
}

/* ─── DİŞLƏR ─── */
.odo-tooth[b-3ux63x24vd] {
    cursor: pointer;
}

.odo-tooth-shape[b-3ux63x24vd] {
    transition: filter 0.18s ease, opacity 0.18s ease;
}

/* QEYDSİZ DİŞ — temaya uyğunlaşır.
   🔴 Əvvəl bütün dişlər `fill="#ffffff"` idi; qaranlıqda tünd fonun üstündə
      32 ədəd parlaq ağ ləkə yaranırdı.
   ⚠️ Yalnız QEYDSİZ diş bura düşür. Qeydi olan dişin rəngi klinik koddur və
      hər iki temada eyni qalmalıdır.
   ⚠️ Təqdimat atributu (`fill="…"`) HƏR CSS qaydasından zəifdir, ona görə
      burada `!important` LAZIM DEYİL. */
.odo-tooth-shape--blank[b-3ux63x24vd] {
    fill: var(--mud-palette-surface);
    stroke: var(--mud-palette-lines-inputs);
}

/* Seçilmiş diş — vurğu rəngi palitradan. */
.odo-tooth-shape--active[b-3ux63x24vd] {
    stroke: var(--mud-palette-primary);
}

.odo-tooth:hover .odo-tooth-shape[b-3ux63x24vd] {
    filter: brightness(0.94) drop-shadow(0 2px 5px color-mix(in srgb, var(--mud-palette-primary) 35%, transparent));
}

.odo-tooth.active .odo-tooth-shape[b-3ux63x24vd] {
    filter: drop-shadow(0 3px 8px color-mix(in srgb, var(--mud-palette-primary) 45%, transparent));
}

.odo-extract-line[b-3ux63x24vd] {
    stroke: var(--mud-palette-error);
    stroke-width: 3;
    stroke-linecap: round;
    pointer-events: none;
}

/* ─── POPOVER ANCHOR + MƏZMUN ─── */
.odo-pop-anchor[b-3ux63x24vd] {
    position: absolute;
    width: 0;
    height: 0;
}

.odo-pop-content[b-3ux63x24vd] {
    width: 316px;
    max-width: 84vw;
    padding: 14px 16px;
}

.odo-pop-header[b-3ux63x24vd] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.odo-pop-toothnum[b-3ux63x24vd] {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    color: var(--mud-palette-primary);
    font-weight: 800;
    font-size: 1rem;
}

.odo-pop-titles[b-3ux63x24vd] {
    flex: 1 1 auto;
    min-width: 0;
}

.odo-pop-name[b-3ux63x24vd] {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--mud-palette-text-primary);
    line-height: 1.2;
}

.odo-pop-status[b-3ux63x24vd] {
    font-size: 0.72rem;
    font-weight: 700;
    margin-top: 1px;
}

.odo-pop-header[b-3ux63x24vd]  .odo-pop-close {
    align-self: flex-start;
}

.odo-pop-form[b-3ux63x24vd] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.odo-pop-selects[b-3ux63x24vd] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* Mini tarixçə (bu dişin son qeydləri) */
.odo-pop-history[b-3ux63x24vd] {
    margin-top: 12px;
    border-top: 1px solid var(--mud-palette-lines-default);
    padding-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.odo-pop-history-row[b-3ux63x24vd] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    padding: 3px 0;
}

.odo-pop-history-dot[b-3ux63x24vd] {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1.5px solid;
}

.odo-pop-history-label[b-3ux63x24vd] {
    flex: 1 1 auto;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.odo-pop-history-date[b-3ux63x24vd] {
    color: var(--mud-palette-text-secondary);
    font-size: 0.72rem;
}

.odo-pop-history-row[b-3ux63x24vd]  .odo-pop-history-del {
    padding: 2px;
}

.odo-pop-actions[b-3ux63x24vd] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
}

/* ─── SAĞ KART: TARİXÇƏ ─── */
.odo-timeline-card[b-3ux63x24vd] {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    min-height: 320px;
}

.odo-timeline-header[b-3ux63x24vd] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.odo-timeline-title[b-3ux63x24vd] {
    font-weight: 800;
    font-size: 0.95rem;
    color: var(--mud-palette-text-primary);
    flex: 1 1 auto;
}

.odo-timeline-count[b-3ux63x24vd] {
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    color: var(--mud-palette-primary);
    font-weight: 800;
    font-size: 0.72rem;
    border-radius: 999px;
    padding: 2px 10px;
}

.odo-timeline-empty[b-3ux63x24vd] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--mud-palette-text-secondary);
    padding: 30px 20px;
}

.odo-timeline-empty-title[b-3ux63x24vd] {
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    margin-bottom: 4px;
}

.odo-timeline-empty-sub[b-3ux63x24vd] {
    font-size: 0.8rem;
    max-width: 260px;
}

.odo-tl-filter[b-3ux63x24vd] {
    max-width: 300px;
    margin: 12px 0 6px;
}

.odo-tl-list[b-3ux63x24vd] {
    display: flex;
    flex-direction: column;
}

/* Bir qeyd = BİR sətir: diş · rəng nöqtəsi · vəziyyət (+ qeyd) · tarix · ⋮.
   Şəbəkə sütunları sabit olduğu üçün tarixlər alt-alta düzülür və siyahı
   10 sətirdə də «qarışıq» görünmür. */
.odo-tl-row[b-3ux63x24vd] {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    padding: 7px 4px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.odo-tl-row:last-child[b-3ux63x24vd] {
    border-bottom: none;
}

.odo-tl-row:hover[b-3ux63x24vd] {
    background: color-mix(in srgb, var(--mud-palette-primary) 4%, transparent);
}

.odo-tl-tooth[b-3ux63x24vd] {
    min-width: 36px;
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 30%, transparent);
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent);
    color: var(--mud-palette-primary);
    font-weight: 800;
    font-size: 0.74rem;
    border-radius: 8px;
    padding: 3px 8px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.odo-tl-tooth:hover[b-3ux63x24vd] {
    background: color-mix(in srgb, var(--mud-palette-primary) 18%, transparent);
}

.odo-tl-tooth:focus-visible[b-3ux63x24vd] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.odo-tl-dot[b-3ux63x24vd] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid;
}

.odo-tl-main[b-3ux63x24vd] {
    min-width: 0;
}

.odo-tl-cond[b-3ux63x24vd] {
    font-weight: 700;
    font-size: 0.84rem;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Qeyd bir sətrə sığmırsa kəsilir; tam mətn `title`-dadır. Uzun qeyd
   siyahını dağıdırdı — sistem sahibinin «qarışıq görünür» sözünün səbəbi. */
.odo-tl-notes[b-3ux63x24vd] {
    font-size: 0.76rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.odo-tl-date[b-3ux63x24vd] {
    color: var(--mud-palette-text-secondary);
    font-size: 0.74rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    .odo-tooth-shape[b-3ux63x24vd],
    .odo-tl-tooth[b-3ux63x24vd] {
        transition: none;
    }
}
/* /Features/Crm/Dialogs/CrmImportInfoDialog.razor.rz.scp.css */
/* 175 — CRM «İdxal» məlumat dialoqu. Siniflər YALNIZ adi HTML elementlərindədir
   (Mud komponentinə scoped sinif verilmir — ::deep lazım deyil). */

.cid-title[b-f43b4zvi2y] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cid-body[b-f43b4zvi2y] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 4px;
}

.cid-steps[b-f43b4zvi2y],
.cid-rules[b-f43b4zvi2y] {
    margin: 0;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    line-height: 1.45;
}

.cid-table-wrap[b-f43b4zvi2y] {
    overflow-x: auto;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
}

.cid-table[b-f43b4zvi2y] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

/* `overflow-wrap: anywhere` — 375 px-də alman «Registrierungsdatum» və
   «AZE XXXXXXXX» kimi bölünməz sözlər cədvəli 46 px-ə qədər üfüqi
   sürüşdürürdü (ölçüldü 25.09.2026). */
.cid-table th[b-f43b4zvi2y],
.cid-table td[b-f43b4zvi2y] {
    padding: 7px 10px;
    text-align: left;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    vertical-align: top;
    overflow-wrap: anywhere;
}

.cid-table tbody tr:last-child td[b-f43b4zvi2y] {
    border-bottom: none;
}

.cid-table th[b-f43b4zvi2y] {
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-background-gray);
}

.cid-field[b-f43b4zvi2y] {
    font-weight: 600;
}

.cid-required[b-f43b4zvi2y] {
    margin-left: 2px;
    color: var(--mud-palette-error);
    font-weight: 700;
}

.cid-example[b-f43b4zvi2y] {
    color: var(--mud-palette-text-secondary);
}
/* /Features/Crm/Dialogs/CustomerDetailDialog.razor.rz.scp.css */
/* === Features/Crm/Dialogs/CustomerDetailDialog.razor.css ===
   Scoped stillər. Dialoq çərçivəsi (.mud-dialog) portal-da olduğu üçün
   .razor faylındakı kiçik &lt;style&gt; blokunda qalır; qalan hər şey buradadır.
   Mud komponentlərinin daxili elementləri ::deep ilə hədəflənir.

   QEYD: Bütün rənglər MudBlazor CSS dəyişənləri ilə təyin edilir ki,
   gecə/gündüz rejimi və primary rəng dəyişikliyində yazılar itməsin.

   13.09.2026 — YENİDƏN DİZAYN. Sistem sahibinin şikayəti: «çox scroll var,
   silmə düymələri böyükdür, prioritet pozulub, az sahə görünür və o da
   klikdən sonra, kartların yeri və ölçüsü səhvdir». Qərarlar:
     • sahələr «etiket üstdə, dəyər altda» şəbəkəsindədir (sətir başına 2-3 sahə);
     • silmə başlıqdakı ⋮ menyusundadır;
     • klinik risk başlıqda nişan kimi, tibbi kartda isə ƏN ÜSTDƏDİR;
     • qeyri-interaktiv kartlarda hover «qalxma» effekti YOXDUR — hərəkət
       «bura klikləmək olar» vədi verir. */

/* ─── BAŞLIQ (sticky — header DialogContent-dədir ki, data yüklənəndə yenilənsin) ─── */
.cdd-header[b-qk4ig98ag8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 22px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    position: sticky;
    top: 0;
    z-index: 10;
}

.cdd-header-left[b-qk4ig98ag8] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

/* Baş hərfli avatar — kimliyin tək baxışlıq işarəsi. Ümumi qovluq ikonu
   hər pasiyentdə eyni idi və heç nə demirdi. */
.cdd-avatar[b-qk4ig98ag8] {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
    color: var(--mud-palette-primary);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: .02em;
    user-select: none;
}

.cdd-identity[b-qk4ig98ag8] {
    min-width: 0;
}

.cdd-name[b-qk4ig98ag8] {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--mud-palette-text-primary);
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cdd-meta[b-qk4ig98ag8] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin-top: 4px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.cdd-meta-item[b-qk4ig98ag8] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.cdd-meta-item[b-qk4ig98ag8]  .mud-icon-root {
    font-size: 15px;
}

.cdd-dot[b-qk4ig98ag8] {
    color: var(--mud-palette-text-disabled);
}

.cdd-chip[b-qk4ig98ag8] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 2px 9px;
    line-height: 1.5;
    white-space: nowrap;
}

.cdd-chip[b-qk4ig98ag8]  .mud-icon-root {
    font-size: 14px;
}

.cdd-chip-blood[b-qk4ig98ag8] {
    background: color-mix(in srgb, var(--mud-palette-error) 12%, transparent);
    color: var(--mud-palette-error);
    border: 1px solid color-mix(in srgb, var(--mud-palette-error) 30%, transparent);
}

.cdd-chip-allergy[b-qk4ig98ag8] {
    background: color-mix(in srgb, var(--mud-palette-warning) 12%, transparent);
    color: var(--mud-palette-warning-darken);
    border: 1px solid color-mix(in srgb, var(--mud-palette-warning) 30%, transparent);
    cursor: help;
}

/* Klinik risk (qan durulaşdırıcı, hamiləlik, premedikasiya...) — ilk risk
   adı ilə, qalanları «+N» ilə; tam siyahı `title`-dadır. */
.cdd-chip-risk[b-qk4ig98ag8] {
    background: color-mix(in srgb, var(--mud-palette-error) 12%, transparent);
    color: var(--mud-palette-error-darken);
    border: 1px solid color-mix(in srgb, var(--mud-palette-error) 32%, transparent);
    cursor: help;
}

.cdd-actions[b-qk4ig98ag8] {
    display: flex;
    gap: 8px;
    flex: 0 0 auto;
    align-items: center;
}

.cdd-actions[b-qk4ig98ag8]  .cdd-btn {
    border-radius: 12px;
    font-weight: 700;
    text-transform: none;
    padding: 6px 16px;
}

.cdd-actions[b-qk4ig98ag8]  .cdd-close-btn {
    margin-left: 2px;
    opacity: 0.6;
    transition: opacity 0.15s ease;
}

.cdd-actions[b-qk4ig98ag8]  .cdd-close-btn:hover,
.cdd-actions[b-qk4ig98ag8]  .cdd-close-btn:focus-visible {
    opacity: 1;
}

/* ⋮ menyusundakı geri qaytarılmayan əməliyyat. Menyu portal-dadır, lakin
   bu span bu faylda yazıldığı üçün scope atributunu daşıyır. */
.cdd-menu-danger[b-qk4ig98ag8] {
    color: var(--mud-palette-error);
    font-weight: 600;
}

.cdd-alert[b-qk4ig98ag8] {
    padding: 10px 22px 0;
}

/* ─── TABLAR ─── */
.cdd-shell[b-qk4ig98ag8] {
    background: var(--mud-palette-surface);
}

/* ⚠️ 115 — MudTabs-a xas qaydalar SİLİNDİ (ekran `AppTabs`-a keçdi).
   Nişan zolağının görünüşü `wwwroot/css/tabs.css`-dədir. */
.cdd-shell[b-qk4ig98ag8]  .atabs-nav {
    margin: 10px 18px 0;
}

/* ─── TAB PANELLƏRİ — SABİT hündürlük ───
   🔴 12.08.2026: əvvəl yalnız `min-height` vardı və tab dəyişəndə dialoq
      yığılıb-açılırdı (pasiyent paneli ~900px, odontoqram ~450px) — ekran
      «atılırdı». Hündürlük SABİTDİR, artıq məzmun panelin İÇİNDƏ sürüşür.
       94vh − başlıq (~72px) − tab zolağı (~56px) − doldurma (~40px)
   `clamp` alçaq ekranda 420px-dən aşağı, nəhəng monitorda 1100px-dən
   yuxarı qalxmağa qoymur.
   🔴 QAYDA `AppTabs`-a KÖÇÜRÜLDÜ, SİLİNMƏDİ: `.atabs-panel` panelin özüdür. */
.cdd-shell[b-qk4ig98ag8]  .atabs-panel {
    padding: 18px 22px 22px;
    height: clamp(420px, calc(94vh - 170px), 1100px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* ═══════════════════════════════════════════════════════════════════
   PASİYENT TABI — iki sütun: inzibati (7) · klinik (5)
   ═══════════════════════════════════════════════════════════════════ */
.pt-grid[b-qk4ig98ag8] {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 16px;
    align-items: start;
}

.pt-col[b-qk4ig98ag8] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

/* ─── KARTLAR ─── */
.info-card[b-qk4ig98ag8] {
    border-radius: 16px;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
    overflow: hidden;
}

/* Redaktə rejimi kartın özündə də görünür — nişan kiçikdir, çərçivə isə
   periferik görmədə tutulur. */
.info-card--editing[b-qk4ig98ag8] {
    border-color: color-mix(in srgb, var(--mud-palette-primary) 45%, transparent);
}

.card-header[b-qk4ig98ag8] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 46px;
    padding: 6px 12px 6px 16px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-background-grey);
}

.card-title[b-qk4ig98ag8] {
    font-size: 0.84rem;
    font-weight: 800;
    color: var(--mud-palette-text-primary);
    flex: 1 1 auto;
}

.edit-badge[b-qk4ig98ag8] {
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    border-radius: 999px;
    padding: 3px 10px;
    white-space: nowrap;
}

.card-body[b-qk4ig98ag8] {
    padding: 14px 16px 16px;
}

/* ─── SAHƏ ŞƏBƏKƏSİ: etiket üstdə, dəyər altda ───
   Əvvəlki «etiket solda 118px · dəyər sağda» sətri hər sahəyə tam sətir
   verirdi: 20 sahə = 20 sətir = sürüşmə. Şəbəkədə eyni sahələr 3 sütuna
   düzülür və kart ekrana sığır. */
.dl-section[b-qk4ig98ag8] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 18px 0 10px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-primary);
}

.dl-section[b-qk4ig98ag8]::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--mud-palette-lines-default);
}

.card-body > .dl-section:first-child[b-qk4ig98ag8] {
    margin-top: 0;
}

.dl-grid[b-qk4ig98ag8] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px 20px;
}

.dl-item[b-qk4ig98ag8] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.dl-item--wide[b-qk4ig98ag8] {
    grid-column: 1 / -1;
}

.dl-label[b-qk4ig98ag8] {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.dl-value[b-qk4ig98ag8] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    overflow-wrap: anywhere;
}

.dl-value--empty[b-qk4ig98ag8] {
    color: var(--mud-palette-text-disabled);
    font-weight: 500;
}

/* ─── ETİKETLƏR — çiplər və giriş sahəsi BİR axında ─── */
.tags-body[b-qk4ig98ag8] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.tag-pill[b-qk4ig98ag8] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 25%, transparent);
    border-radius: 999px;
    padding: 3px 4px 3px 12px;
}

/* Silmə düyməsi çipin ölçüsünü böyütməməlidir — MudIconButton öz
   doldurmasını gətirir, ona görə sıfırlanır. `::deep` MƏCBURİDİR. */
.tag-pill[b-qk4ig98ag8]  .tag-pill-x {
    padding: 0;
    min-width: 18px;
    height: 18px;
    color: inherit;
}

.tag-pill[b-qk4ig98ag8]  .tag-pill-x .mud-icon-root {
    font-size: 13px;
}

.tag-input-row[b-qk4ig98ag8] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 240px;
    min-width: 200px;
}

.tag-input-row[b-qk4ig98ag8]  .tag-input {
    flex: 1 1 auto;
    min-width: 0;
    margin-top: 0;
}

.tag-input-row[b-qk4ig98ag8]  .tag-add-btn {
    flex-shrink: 0;
}

/* ─── TİBBİ KART ─── */
.medical-card--risk[b-qk4ig98ag8] {
    border-color: color-mix(in srgb, var(--mud-palette-error) 38%, transparent);
    box-shadow: inset 3px 0 0 var(--mud-palette-error);
}

/* RİSK NİŞANLARI (075) — kartın ən üstündə, mətn bloklarından ƏVVƏL. */
.med-flags[b-qk4ig98ag8] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.med-flag[b-qk4ig98ag8] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: .2px;
    color: var(--mud-palette-error);
    background: color-mix(in srgb, var(--mud-palette-error) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--mud-palette-error) 30%, transparent);
    border-radius: 999px;
    padding: 4px 10px;
}

.med-flag[b-qk4ig98ag8]  .mud-icon-root {
    font-size: 14px;
}

.med-none[b-qk4ig98ag8] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.med-none[b-qk4ig98ag8]  .mud-icon-root {
    font-size: 16px;
}

/* Göstəricilər — qan qrupu · çəki · boy · siqaret: bir sətirdə dörd xana. */
.vitals[b-qk4ig98ag8] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.vital[b-qk4ig98ag8] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding: 8px 10px;
    border-radius: 12px;
    background: var(--mud-palette-background-grey);
}

.vital__label[b-qk4ig98ag8] {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vital__value[b-qk4ig98ag8] {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vital__value--empty[b-qk4ig98ag8] {
    color: var(--mud-palette-text-disabled);
    font-weight: 600;
}

.med-grid[b-qk4ig98ag8] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.med-block[b-qk4ig98ag8] {
    min-width: 0;
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid var(--mud-palette-lines-default);
}

.med-block--danger[b-qk4ig98ag8] {
    border-color: color-mix(in srgb, var(--mud-palette-error) 32%, transparent);
    background: color-mix(in srgb, var(--mud-palette-error) 7%, transparent);
}

.med-label[b-qk4ig98ag8] {
    display: block;
    font-size: 0.66rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 2px;
}

/* Tibbi mətn KƏSİLMİR (line-clamp yoxdur): allergiyanın yarısını gizlətmək
   klinik baxımdan onu heç göstərməməkdən təhlükəlidir. */
.med-value[b-qk4ig98ag8] {
    margin: 0;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.med-block--danger .med-value[b-qk4ig98ag8] {
    color: var(--mud-palette-error-darken);
}

.med-value--empty[b-qk4ig98ag8] {
    color: var(--mud-palette-text-disabled);
    font-weight: 500;
}

.med-checks[b-qk4ig98ag8] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 8px;
    margin: 10px 0;
}

/* ─── HƏKİM QEYDLƏRİ ─── */
.notes-card[b-qk4ig98ag8] {
    display: flex;
    flex-direction: column;
}

.notes-editor[b-qk4ig98ag8]  .ql-toolbar {
    border-left: none;
    border-right: none;
    border-top: none;
    background: var(--mud-palette-background-grey);
}

.notes-editor[b-qk4ig98ag8]  .ql-container {
    border: none;
    min-height: 200px;
    font-size: 0.9rem;
}

/* ─── REDAKTƏ ZOLAĞI — yapışqan ───
   `.atabs-panel` sürüşmə qabıdır; `bottom: 0` zolağı onun görünən alt
   kənarında saxlayır. */
.edit-actions[b-qk4ig98ag8] {
    position: sticky;
    bottom: 0;
    z-index: 3;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 16px;
    padding: 10px 0;
    background: var(--mud-palette-surface);
    border-top: 1px solid var(--mud-palette-lines-default);
}

/* ═══════════════════════════════════════════════════════════════════
   RANDEVU TARİXÇƏSİ
   ═══════════════════════════════════════════════════════════════════ */
.stats-grid[b-qk4ig98ag8] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.stat-card[b-qk4ig98ag8] {
    display: flex;
    align-items: center;
    gap: 14px;
    border-radius: 16px;
    padding: 14px 16px;
    border: 1px solid transparent;
}

.stat-icon[b-qk4ig98ag8] {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stat-icon[b-qk4ig98ag8]  .mud-icon-root {
    font-size: 20px;
}

.stat-content[b-qk4ig98ag8] {
    min-width: 0;
}

.stat-number[b-qk4ig98ag8] {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.15;
    white-space: nowrap;
}

.stat-label[b-qk4ig98ag8] {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--mud-palette-text-secondary);
    margin-top: 2px;
}

.stat-caption[b-qk4ig98ag8] {
    font-size: 0.68rem;
    color: var(--mud-palette-text-secondary);
    margin-top: 1px;
}

.stat-total[b-qk4ig98ag8] {
    background: color-mix(in srgb, var(--mud-palette-info) 12%, transparent);
    border-color: color-mix(in srgb, var(--mud-palette-info) 25%, transparent);
}

.stat-total .stat-icon[b-qk4ig98ag8] {
    background: color-mix(in srgb, var(--mud-palette-info) 20%, transparent);
    color: var(--mud-palette-info);
}

.stat-total .stat-number[b-qk4ig98ag8] {
    color: var(--mud-palette-info-darken);
}

.stat-done[b-qk4ig98ag8] {
    background: color-mix(in srgb, var(--mud-palette-success) 12%, transparent);
    border-color: color-mix(in srgb, var(--mud-palette-success) 25%, transparent);
}

.stat-done .stat-icon[b-qk4ig98ag8] {
    background: color-mix(in srgb, var(--mud-palette-success) 20%, transparent);
    color: var(--mud-palette-success);
}

.stat-done .stat-number[b-qk4ig98ag8] {
    color: var(--mud-palette-success-darken);
}

.stat-cancel[b-qk4ig98ag8] {
    background: color-mix(in srgb, var(--mud-palette-error) 12%, transparent);
    border-color: color-mix(in srgb, var(--mud-palette-error) 25%, transparent);
}

.stat-cancel .stat-icon[b-qk4ig98ag8] {
    background: color-mix(in srgb, var(--mud-palette-error) 20%, transparent);
    color: var(--mud-palette-error);
}

.stat-cancel .stat-number[b-qk4ig98ag8] {
    color: var(--mud-palette-error-darken);
}

.stat-revenue[b-qk4ig98ag8] {
    background: color-mix(in srgb, var(--mud-palette-success) 8%, transparent);
    border-color: color-mix(in srgb, var(--mud-palette-success) 18%, transparent);
}

.stat-revenue .stat-icon[b-qk4ig98ag8] {
    background: color-mix(in srgb, var(--mud-palette-success) 15%, transparent);
    color: var(--mud-palette-success);
}

.stat-revenue .stat-number[b-qk4ig98ag8] {
    color: var(--mud-palette-success-darken);
}

/* ─── SON GƏLİŞ BANNERİ ─── */
.visit-banner[b-qk4ig98ag8] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--mud-palette-success) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--mud-palette-success) 22%, transparent);
    color: var(--mud-palette-text-primary);
    font-size: 0.85rem;
    margin-bottom: 16px;
}

/* ─── TARİXÇƏ CƏDVƏLİ ─── */
.history-table-wrap[b-qk4ig98ag8] {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px;
    overflow: hidden;
    background: var(--mud-palette-surface);
}

.history-table-wrap[b-qk4ig98ag8]  .history-table {
    background: transparent;
}

.history-table-wrap[b-qk4ig98ag8]  th {
    font-size: 0.68rem !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--mud-palette-text-secondary) !important;
    background: var(--mud-palette-background-grey);
    border-bottom: 1px solid var(--mud-palette-lines-default) !important;
    padding: 12px 16px !important;
}

.history-table-wrap[b-qk4ig98ag8]  td {
    border-bottom: 1px solid var(--mud-palette-lines-default) !important;
    padding: 10px 16px !important;
    font-size: 0.85rem;
    color: var(--mud-palette-text-primary);
}

.history-table-wrap[b-qk4ig98ag8]  tr:last-child td {
    border-bottom: none !important;
}

.history-table-wrap[b-qk4ig98ag8]  tr:hover td {
    background: var(--mud-palette-background-grey);
}

/* Qeyd 10-dan azdırsa səhifələyici render olunmur; boş qab zolaq qoymasın. */
.history-table-wrap[b-qk4ig98ag8]  .mud-table-pagination:empty {
    display: none;
}

.cell-date[b-qk4ig98ag8] {
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.cell-time[b-qk4ig98ag8] {
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
    font-weight: 600;
}

.cell-price[b-qk4ig98ag8] {
    font-weight: 800;
    color: var(--mud-palette-primary);
}

/* Status pill-ləri */
.status-pill[b-qk4ig98ag8] {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 800;
    border-radius: 999px;
    padding: 3px 12px;
    white-space: nowrap;
}

.pill-success[b-qk4ig98ag8] {
    background: color-mix(in srgb, var(--mud-palette-success) 15%, transparent);
    color: var(--mud-palette-success-darken);
    border: 1px solid color-mix(in srgb, var(--mud-palette-success) 30%, transparent);
}

.pill-info[b-qk4ig98ag8] {
    background: color-mix(in srgb, var(--mud-palette-info) 15%, transparent);
    color: var(--mud-palette-info-darken);
    border: 1px solid color-mix(in srgb, var(--mud-palette-info) 30%, transparent);
}

.pill-warning[b-qk4ig98ag8] {
    background: color-mix(in srgb, var(--mud-palette-warning) 15%, transparent);
    color: var(--mud-palette-warning-darken);
    border: 1px solid color-mix(in srgb, var(--mud-palette-warning) 30%, transparent);
}

.pill-error[b-qk4ig98ag8] {
    background: color-mix(in srgb, var(--mud-palette-error) 15%, transparent);
    color: var(--mud-palette-error-darken);
    border: 1px solid color-mix(in srgb, var(--mud-palette-error) 30%, transparent);
}

.pill-dark[b-qk4ig98ag8] {
    background: color-mix(in srgb, var(--mud-palette-dark) 10%, transparent);
    color: var(--mud-palette-dark);
    border: 1px solid var(--mud-palette-lines-default);
}

.pill-muted[b-qk4ig98ag8] {
    background: var(--mud-palette-background-grey);
    color: var(--mud-palette-text-secondary);
    border: 1px solid var(--mud-palette-lines-default);
}

.history-empty[b-qk4ig98ag8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 50px 20px;
    color: var(--mud-palette-text-secondary);
    border: 1px dashed var(--mud-palette-lines-default);
    border-radius: 14px;
    background: var(--mud-palette-background-grey);
}

.history-empty-title[b-qk4ig98ag8] {
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    margin-bottom: 4px;
}

.history-empty-sub[b-qk4ig98ag8] {
    font-size: 0.8rem;
    max-width: 340px;
}

/* ─── RESPONSİV ─── */
@media (max-width: 1100px) {
    .pt-grid[b-qk4ig98ag8] {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 760px) {
    .cdd-header[b-qk4ig98ag8] {
        flex-wrap: wrap;
        padding: 12px 14px;
    }

    .cdd-actions[b-qk4ig98ag8] {
        width: 100%;
        justify-content: flex-end;
    }

    .cdd-shell[b-qk4ig98ag8]  .atabs-panel {
        padding: 14px 12px 16px;
    }
}

@media (max-width: 600px) {
    .vitals[b-qk4ig98ag8] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .med-grid[b-qk4ig98ag8],
    .med-checks[b-qk4ig98ag8] {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .cdd-actions[b-qk4ig98ag8]  .cdd-close-btn {
        transition: none;
    }
}
/* /Features/Files/Components/FileTreeView.razor.rz.scp.css */
/* === Features/Files/Components/FileTreeView.razor.css === */

.ftv-root[b-ts023n4um5] {
    max-height: 480px;
    overflow-y: auto;
    overflow-x: hidden;
}

.ftv-error[b-ts023n4um5] {
    margin-bottom: 8px;
    font-size: 0.76rem;
}

.ftv-divider[b-ts023n4um5] {
    margin: 8px 4px;
    opacity: .6;
}

/* MudTreeViewItem daxili markup yaradır — ::deep olmadan çatmaq mümkün deyil */
[b-ts023n4um5] .ftv-item .mud-treeview-item-content {
    border-radius: 10px;
    font-size: 0.83rem;
    padding-top: 3px;
    padding-bottom: 3px;
    transition: background .14s ease;
}

[b-ts023n4um5] .ftv-item .mud-treeview-item-content:hover {
    background: var(--mud-palette-action-default-hover);
}

/* Seçilmiş qovluq — sol kənarda vurğu zolağı ilə */
[b-ts023n4um5] .ftv-item-active > .mud-treeview-item-content {
    background: var(--mud-palette-primary-hover);
    font-weight: 700;
    box-shadow: inset 3px 0 0 0 var(--mud-palette-primary);
}

/* Boş kateqoriya — görünür, amma diqqət çəkmir */
[b-ts023n4um5] .ftv-item-empty > .mud-treeview-item-content {
    opacity: .48;
}

[b-ts023n4um5] .ftv-item-empty:hover > .mud-treeview-item-content {
    opacity: .75;
}
/* /Features/Files/Components/ToothPicker.razor.rz.scp.css */
/* === Features/Files/Components/ToothPicker.razor.css === */

.tp-root[b-h4fqav74ci] {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    padding: 10px 12px;
    background: var(--mud-palette-background-gray);
}

.tp-head[b-h4fqav74ci] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.tp-head-right[b-h4fqav74ci] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.tp-hint[b-h4fqav74ci] {
    margin: 4px 0 10px;
    font-size: 0.74rem;
    color: var(--mud-palette-text-secondary);
}

.tp-arch[b-h4fqav74ci] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tp-jaw[b-h4fqav74ci] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.tp-jaw-label[b-h4fqav74ci] {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mud-palette-text-disabled);
}

/* Dişlər anatomik sıra ilə düzülür; dar ekranda sətir aşır */
.tp-row[b-h4fqav74ci] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* Orta xətt (11 ↔ 21 və 41 ↔ 31) arasında görünən ayrıcı —
   həkim kvadrantı bir baxışda ayırd etsin */
.tp-row .tp-tooth:nth-child(8)[b-h4fqav74ci] {
    margin-right: 12px;
}

.tp-tooth[b-h4fqav74ci] {
    min-width: 32px;
    height: 30px;
    padding: 0 4px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font-size: 0.76rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease, color .12s ease, transform .12s ease;
}

.tp-tooth:hover[b-h4fqav74ci] {
    border-color: var(--mud-palette-primary);
    transform: translateY(-1px);
}

.tp-tooth-on[b-h4fqav74ci] {
    background: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font-weight: 800;
}

.tp-tooth:focus-visible[b-h4fqav74ci] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}
/* /Features/Files/Dialogs/FilePreviewDialog.razor.rz.scp.css */
/* === Features/Files/Dialogs/FilePreviewDialog.razor.css === */

.fpd-root[b-05y9owrk9k] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.fpd-center[b-05y9owrk9k] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 320px;
    text-align: center;
}

/* ─────────────── Alət paneli ─────────────── */
.fpd-toolbar[b-05y9owrk9k] {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 4px 8px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    background: var(--mud-palette-surface);
}

.fpd-zoom-label[b-05y9owrk9k] {
    min-width: 52px;
    text-align: center;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
}

/* ─────────────── Şəkil kətanı ─────────────── */
.fpd-canvas[b-05y9owrk9k] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: min(68vh, 720px);
    overflow: hidden;
    border-radius: 14px;
    /* Rentgen tünd fonda daha yaxşı oxunur */
    background: #0e1116;
    cursor: grab;
    user-select: none;
    touch-action: none;
}

.fpd-canvas-dragging[b-05y9owrk9k] {
    cursor: grabbing;
}

.fpd-canvas img[b-05y9owrk9k] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transform-origin: center center;
    transition: filter .15s ease;
    -webkit-user-drag: none;
    user-select: none;
}

/* ─────────────── Sənəd (PDF və s.) ─────────────── */
.fpd-doc-name[b-05y9owrk9k] {
    margin-top: 14px;
    font-size: 1rem;
    font-weight: 600;
    word-break: break-all;
    max-width: 420px;
}

.fpd-doc-size[b-05y9owrk9k] {
    margin-top: 2px;
    font-size: 0.82rem;
    color: var(--mud-palette-text-secondary);
}

/* ─────────────── Metadata zolağı ─────────────── */
.fpd-meta[b-05y9owrk9k] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    padding: 10px 12px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    background: var(--mud-palette-background-gray);
}

.fpd-meta-item[b-05y9owrk9k] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary);
}

.fpd-note[b-05y9owrk9k] {
    padding: 10px 12px;
    border-left: 3px solid var(--mud-palette-primary);
    border-radius: 0 10px 10px 0;
    background: var(--mud-palette-background-gray);
    font-size: 0.84rem;
    white-space: pre-wrap;
}
/* /Features/Files/Dialogs/FileUploadDialog.razor.rz.scp.css */
/* === Features/Files/Dialogs/FileUploadDialog.razor.css === */

.fud-root[b-6omypzocwk] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.fud-section[b-6omypzocwk] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fud-section-head[b-6omypzocwk] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.fud-alert[b-6omypzocwk] {
    font-size: 0.78rem;
}

/* ═════════ Kateqoriya seçicisi ═════════
   MudSelect əvəzinə düymələr: bütün variantlar ikonu ilə birdən görünür,
   seçim bir kliklə dəyişir. */
.fud-cats[b-6omypzocwk] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.fud-cat[b-6omypzocwk] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 999px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .14s ease, border-color .14s ease, transform .14s ease;
}

.fud-cat:hover:not(:disabled)[b-6omypzocwk] {
    border-color: var(--mud-palette-primary);
    transform: translateY(-1px);
}

.fud-cat:disabled[b-6omypzocwk] {
    opacity: .5;
    cursor: default;
}

.fud-cat-on[b-6omypzocwk] {
    background: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.fud-cat-lock[b-6omypzocwk] {
    opacity: .8;
}

/* ═════════ Sürüklə-burax zonası ═════════ */
.fud-drop[b-6omypzocwk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 30px 18px;
    border-style: dashed !important;
    border-width: 2px !important;
    border-radius: 16px !important;
    cursor: pointer;
    text-align: center;
    transition: border-color .18s ease, background .18s ease;
}

.fud-drop:hover[b-6omypzocwk] {
    border-color: var(--mud-palette-primary) !important;
    background: var(--mud-palette-action-default-hover);
}

.fud-drop-busy[b-6omypzocwk] {
    opacity: .55;
    cursor: default;
}

.fud-drop-title[b-6omypzocwk] {
    font-size: 0.95rem;
    font-weight: 650;
}

.fud-drop-sub[b-6omypzocwk] {
    font-size: 0.76rem;
    color: var(--mud-palette-text-secondary);
}

/* Partiya limiti açıq göstərilir — istifadəçi 50 fayl seçib
   sonradan xəta almasın */
.fud-drop-limit[b-6omypzocwk] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--mud-palette-background-gray);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

/* ═════════ Gedişat siyahısı ═════════ */
.fud-progress-list[b-6omypzocwk] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 220px;
    overflow-y: auto;
    padding-right: 4px;
}

.fud-progress-row[b-6omypzocwk] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fud-progress-head[b-6omypzocwk] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
}

.fud-progress-name[b-6omypzocwk] {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600;
}

.fud-progress-status[b-6omypzocwk] {
    flex: 0 0 auto;
    color: var(--mud-palette-text-secondary);
    font-size: 0.73rem;
}
/* /Features/Files/FilesTab.razor.rz.scp.css */
/* === Features/Files/FilesTab.razor.css ===
   Scoped CSS. Rənglər MudBlazor CSS dəyişənlərindən götürülür ki,
   light/dark tema keçidində fayl ekranı da avtomatik uyğunlaşsın. */

.ft-shell[b-3fcvzwcess] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 540px;
}

/* ═════════════ ALƏT PANELİ ═════════════
   `flex-wrap` + `min-width: 0`: dar dialoqda elementlər aşağı sətrə keçir,
   kənara DAŞMIR. Axtarış sahəsi sıxıla bilir, düymələr isə yox. */
.ft-toolbar[b-3fcvzwcess] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.ft-toolbar-left[b-3fcvzwcess] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 220px;
    min-width: 0;
}

.ft-toolbar-right[b-3fcvzwcess] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    flex-wrap: wrap;
}

.ft-search[b-3fcvzwcess] {
    width: 100%;
    max-width: 360px;
    min-width: 0;
}

.ft-viewswitch[b-3fcvzwcess] {
    flex: 0 0 auto;
}

/* Seçili görünüş rejimi vizual olaraq aydın olmalıdır */
.ft-viewswitch[b-3fcvzwcess]  .ft-view-active {
    background: var(--mud-palette-primary-hover);
    font-weight: 700;
}

.ft-upload-btn[b-3fcvzwcess] {
    border-radius: 10px;
    text-transform: none;
    font-weight: 600;
    white-space: nowrap;
}

/* ═════════════ GÖVDƏ ═════════════ */
.ft-body[b-3fcvzwcess] {
    display: grid;
    grid-template-columns: 268px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.ft-sidebar[b-3fcvzwcess] {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 16px;
    padding: 10px;
    background: var(--mud-palette-surface);
    box-shadow: var(--mud-elevation-1);
    position: sticky;
    top: 0;
}

.ft-content[b-3fcvzwcess] {
    min-width: 0;
    min-height: 440px;
}

@media (max-width: 1100px) {
    .ft-body[b-3fcvzwcess] {
        grid-template-columns: 1fr;
    }

    .ft-sidebar[b-3fcvzwcess] {
        position: static;
    }
}

/* ═════════════ YOL GÖSTƏRİCİSİ ═════════════ */
.ft-crumbs[b-3fcvzwcess] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    margin-bottom: 14px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    background: var(--mud-palette-background-gray);
    font-size: 0.82rem;
}

.ft-crumb-root[b-3fcvzwcess] {
    color: var(--mud-palette-text-secondary);
}

.ft-crumb-sep[b-3fcvzwcess] {
    opacity: .45;
}

.ft-crumb-active[b-3fcvzwcess] {
    font-weight: 700;
}

.ft-crumb-count[b-3fcvzwcess] {
    font-size: 0.74rem;
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
}

/* ═════════════ KVOTA ═════════════ */
.ft-usage[b-3fcvzwcess] {
    margin-top: 12px;
    padding: 12px 10px 6px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.ft-usage-head[b-3fcvzwcess] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 8px;
}

.ft-usage-text[b-3fcvzwcess] {
    margin-top: 6px;
    font-size: 0.74rem;
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
}

/* ═════════════ SKELETON / BOŞ ═════════════ */
.ft-skeleton[b-3fcvzwcess] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 16px;
}

.ft-skeleton-card[b-3fcvzwcess] {
    border-radius: 16px;
}

.ft-empty[b-3fcvzwcess] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 340px;
    text-align: center;
    color: var(--mud-palette-text-secondary);
}

.ft-empty-icon[b-3fcvzwcess] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    margin-bottom: 14px;
    border-radius: 50%;
    background: var(--mud-palette-background-gray);
    opacity: .8;
}

.ft-empty-title[b-3fcvzwcess] {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    margin-bottom: 4px;
}

.ft-empty-sub[b-3fcvzwcess] {
    font-size: 0.83rem;
    max-width: 400px;
    line-height: 1.5;
    opacity: .8;
}

/* ═════════════ NİŞAN (KART) ŞƏBƏKƏSİ ═════════════ */
.ft-grid[b-3fcvzwcess] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 16px;
}

.ft-card[b-3fcvzwcess] {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 16px;
    overflow: hidden;
    background: var(--mud-palette-surface);
    cursor: pointer;
    transition: box-shadow .2s cubic-bezier(.4, 0, .2, 1),
                transform .2s cubic-bezier(.4, 0, .2, 1),
                border-color .2s ease;
}

.ft-card:hover[b-3fcvzwcess] {
    box-shadow: var(--mud-elevation-8);
    border-color: var(--mud-palette-primary);
    transform: translateY(-3px);
}

.ft-card-thumb[b-3fcvzwcess] {
    position: relative;
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        linear-gradient(135deg,
            var(--mud-palette-background-gray) 0%,
            var(--mud-palette-surface) 100%);
    overflow: hidden;
}

.ft-card-thumb img[b-3fcvzwcess] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}

.ft-card:hover .ft-card-thumb img[b-3fcvzwcess] {
    transform: scale(1.04);
}

.ft-card-icon[b-3fcvzwcess] {
    font-size: 2.6rem !important;
    opacity: .85;
}

/* Tip üzrə rəng — istifadəçi faylın nə olduğunu rəngdən də anlayır */
.ft-icon-pdf[b-3fcvzwcess]     { color: #dc2626; }
.ft-icon-xray[b-3fcvzwcess]    { color: #0f766e; }
.ft-icon-photo[b-3fcvzwcess]   { color: #2563eb; }
.ft-icon-lab[b-3fcvzwcess]     { color: #7c3aed; }
.ft-icon-lock[b-3fcvzwcess]    { color: #d97706; }
.ft-icon-image[b-3fcvzwcess]   { color: var(--mud-palette-primary); }
.ft-icon-generic[b-3fcvzwcess] { color: var(--mud-palette-text-disabled); }

/* ─── Rozetkalar ─── */
.ft-badge[b-3fcvzwcess] {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    background: rgba(15, 23, 42, .72);
    backdrop-filter: blur(3px);
    font-variant-numeric: tabular-nums;
}

.ft-badge-teeth[b-3fcvzwcess] {
    left: 8px;
    bottom: 8px;
}

.ft-badge-lock[b-3fcvzwcess] {
    right: 8px;
    bottom: 8px;
    background: rgba(217, 119, 6, .92);
    padding: 4px 6px;
}

.ft-card-body[b-3fcvzwcess] {
    padding: 10px 12px 12px;
    flex: 1 1 auto;
}

.ft-card-name[b-3fcvzwcess] {
    font-size: 0.84rem;
    font-weight: 650;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ft-card-meta[b-3fcvzwcess] {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 5px;
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ft-card-date[b-3fcvzwcess] {
    margin-top: 2px;
    font-size: 0.7rem;
    color: var(--mud-palette-text-disabled);
    font-variant-numeric: tabular-nums;
}

.ft-dot[b-3fcvzwcess] {
    opacity: .45;
}

/* Aksiyalar yalnız hover-də — kart səliqəli qalsın */
.ft-card-actions[b-3fcvzwcess] {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    gap: 1px;
    padding: 2px;
    border-radius: 10px;
    background: var(--mud-palette-surface);
    box-shadow: var(--mud-elevation-6);
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .18s ease, transform .18s ease;
}

.ft-card:hover .ft-card-actions[b-3fcvzwcess],
.ft-card:focus-within .ft-card-actions[b-3fcvzwcess] {
    opacity: 1;
    transform: translateY(0);
}

/* Toxunma cihazlarında hover yoxdur — aksiyalar həmişə görünür */
@media (hover: none) {
    .ft-card-actions[b-3fcvzwcess] {
        opacity: 1;
        transform: none;
    }
}

/* ═════════════ SİYAHI REJİMİ ═════════════ */
.ft-table[b-3fcvzwcess] {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px;
    overflow: hidden;
}

.ft-row-name[b-3fcvzwcess] {
    display: flex;
    align-items: center;
    max-width: 340px;
}

.ft-row-name span[b-3fcvzwcess] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ft-row-cat[b-3fcvzwcess] {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.ft-row-actions[b-3fcvzwcess] {
    display: flex;
    gap: 1px;
}

/* ═════════════ "DAHA ÇOX" ═════════════ */
.ft-more[b-3fcvzwcess] {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

/* ══════════════════════════════════════════════════════════════════════
   FAYL ARXİVİ BAĞLI — TƏK MESAJ (21.09.2026)
   Tab işləmədiyi halda qovluq ağacı və iki «Yüklə» düyməsi göstərilmir;
   yerində bu blok durur. Hündürlük dialoqun ölçüsünü saxlayır ki, tab
   dəyişəndə pəncərə «atılmasın».
   ══════════════════════════════════════════════════════════════════════ */
.ft-locked[b-3fcvzwcess] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 320px;
    padding: 2rem 1.5rem;
}

/* ⚠️ `::deep` MƏCBURİDİR — sinif `MudText`-ə verilir və uşaq komponent
   scoped CSS-in sahə atributunu daşımır (CLAUDE.md → UI sinfi → `::deep`). */
.ft-locked[b-3fcvzwcess]  .ft-locked__text { max-width: 420px; }
/* /Features/Finance/PatientAccountPanel.razor.rz.scp.css */
/* === Features/Finance/PatientAccountPanel.razor.css ===
   13.09.2026 — pasiyent hesabı: pul zolağı + siyahı seçicisi + səhifələnmiş cədvəl.
   Rənglər palitra dəyişənlərindəndir (qaranlıq rejim). Pul rəqəmləri
   `tabular-nums` ilə yazılır: sütunda alt-alta düzülən məbləğlər eyni enli
   rəqəmlərlə oxunaqlıdır. */

.acc-summary[b-kb1t0aweun] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.acc-kpi[b-kb1t0aweun] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
}

.acc-kpi__label[b-kb1t0aweun] {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.acc-kpi__value[b-kb1t0aweun] {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--mud-palette-text-primary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Balans — zolağın əsas rəqəmidir, bir pillə böyük. */
.acc-kpi--lead .acc-kpi__value[b-kb1t0aweun] {
    font-size: 1.35rem;
}

.acc-kpi--success .acc-kpi__value[b-kb1t0aweun] {
    color: var(--mud-palette-success-darken);
}

.acc-kpi--error[b-kb1t0aweun] {
    border-color: color-mix(in srgb, var(--mud-palette-error) 35%, transparent);
    background: color-mix(in srgb, var(--mud-palette-error) 6%, transparent);
}

.acc-kpi--error .acc-kpi__value[b-kb1t0aweun] {
    color: var(--mud-palette-error);
}

.acc-toolbar[b-kb1t0aweun] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}

.acc-actions[b-kb1t0aweun] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.acc-table-wrap[b-kb1t0aweun] {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px;
    overflow: hidden;
    background: var(--mud-palette-surface);
}

.acc-table-wrap[b-kb1t0aweun]  .mud-table-head th {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-background-grey);
}

/* 10 sətirdən az olanda səhifələyici render olunmur — boş qab zolaq qoymasın. */
.acc-table-wrap[b-kb1t0aweun]  .mud-table-pagination:empty {
    display: none;
}

.acc-num[b-kb1t0aweun] {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    white-space: nowrap;
}

.acc-empty[b-kb1t0aweun] {
    padding: 28px 16px;
    text-align: center;
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
    border: 1px dashed var(--mud-palette-lines-default);
    border-radius: 14px;
    background: var(--mud-palette-background-grey);
}

@media (max-width: 600px) {
    .acc-toolbar[b-kb1t0aweun] {
        align-items: stretch;
    }

    .acc-actions[b-kb1t0aweun] {
        width: 100%;
    }
}
/* /Features/GlobalSearch/GlobalSearch.razor.rz.scp.css */
/* ═══════ Axtarış zolağı (yuxarı sol) ═══════

   Rənglər appbar-ın rəngindən ASILI OLMADAN işləməlidir: istifadəçi
   appbar fonunu istənilən rəngə sala bilər. Ona görə mütləq rəng deyil,
   `currentColor` və şəffaflıq işlədilir — zolaq həmişə fonun üstündə
   bir ton açıq görünür.                                                    */

/* Ölçü 210–320px idi — zolaq navbar-ın yarısını yeyirdi.
   İndi 168px: ikon + "Axtar" + Ctrl K rahat yerləşir, artıq boşluq qalmır. */
.gs-trigger[b-55w7iaifdk] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 32px;
    min-width: 168px;
    max-width: 220px;
    padding: 0 7px 0 10px;
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, .22);
    background: rgba(255, 255, 255, .12);
    color: inherit;
    font: inherit;
    font-size: .82rem;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.gs-trigger:hover[b-55w7iaifdk] {
    background: rgba(255, 255, 255, .2);
    border-color: rgba(255, 255, 255, .38);
}

.gs-trigger:focus-visible[b-55w7iaifdk] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .28);
}

.gs-trigger-icon[b-55w7iaifdk] {
    opacity: .85;
    flex-shrink: 0;
}

/* Mətn böyüyür, qısayol nişanları sağa sıxılır. */
.gs-trigger-text[b-55w7iaifdk] {
    flex: 1 1 auto;
    text-align: left;
    opacity: .8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Klaviatura nişanı — düymə görünüşü. */
.gs-kbd[b-55w7iaifdk] {
    flex-shrink: 0;
    padding: 2px 6px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, .28);
    background: rgba(255, 255, 255, .14);
    font-size: .66rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: .3px;
    opacity: .95;
}

/* Dar ekranda zolaq daralır, qısayol nişanları isə tamam çıxır:
   toxunma cihazında Ctrl+K onsuz da yoxdur. */
@media (max-width: 1100px) {
    .gs-trigger[b-55w7iaifdk] {
        min-width: 118px;
    }

    .gs-kbd[b-55w7iaifdk] {
        display: none;
    }
}


/* ── Nəticə kateqoriyası (12.08.2026) ──
   Eyni ad həm «Səhifələr», həm «Ayarlar» siyahısında ola bilər. Çip
   fərqi bir baxışda göstərir.
   ⚠️ Dialoq `<body>` altında ayrı qatda render olunur, LAKİN çip bizim
      komponentin markup-undadır və valideyni adi `<div>`-dir → `::deep`
      buradan işləyir (bax RazorSourceLintTests). */
.search-results-container[b-55w7iaifdk]  .gs-cat-chip {
    flex-shrink: 0;
    margin: 0;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
    opacity: .6;
}

/* Telefonda kateqoriya çipi yer yeyir — ad və izah daha vacibdir. */
@media (max-width: 560px) {
    .search-results-container[b-55w7iaifdk]  .gs-cat-chip {
        display: none;
    }
}
/* /Features/Home/KpiCard.razor.rz.scp.css */
.kpi-card[b-6h67as6wg4] {
    border-radius: 16px !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    background-color: var(--mud-palette-surface);
    height: 100%;
}

    .kpi-card:hover[b-6h67as6wg4] {
        transform: translateY(-4px);
        box-shadow: 0 12px 24px rgba(0,0,0,0.04) !important;
    }

.kpi-icon-box[b-6h67as6wg4] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.kpi-trend[b-6h67as6wg4] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 12px;
    flex-shrink: 0;
}

.trend-up[b-6h67as6wg4] {
    background-color: rgba(16, 185, 129, 0.1);
    color: #059669;
}

.trend-down[b-6h67as6wg4] {
    background-color: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}
/* /Features/Home/PendingRequestsWidget.razor.rz.scp.css */
/* === Features/Home/PendingRequestsWidget.razor.css === */
.pending-row[b-dn17fck43q] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

    .pending-row:last-child[b-dn17fck43q] {
        border-bottom: none;
    }

.pending-row__body[b-dn17fck43q] {
    display: flex;
    flex-direction: column;
}

.pending-row__name[b-dn17fck43q] {
    font-size: 13px;
    font-weight: 600;
}

.pending-row__meta[b-dn17fck43q] {
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
}
/* /Features/Home/ReputationWidget.razor.rz.scp.css */
/* === Features/Home/ReputationWidget.razor.css ===
   Kəsr ulduz göstəricisi.

   Niyə custom: MudRating yalnız TAM ədəd qəbul edir. Ortalama 4.6 olanda
   o, 5 ulduz göstərir, yanındaki rəqəm isə "4.6" yazır — ekranda iki
   fərqli həqiqət. Reputasiya widget-i üçün bu qəbuledilməzdir.

   Həll: iki eyni ulduz cərgəsi üst-üstə. Alt cərgə boz (fon), üst cərgə
   sarı və eni faizlə kəsilir. Nəticə: 4.6 → 92% dolu. */

.rep-stars[b-0jdzp7wzs2] {
    position: relative;
    display: inline-block;
    line-height: 0;
    white-space: nowrap;
}

.rep-stars__row[b-0jdzp7wzs2] {
    display: flex;
    gap: 1px;
}

/* Fon cərgəsi — boş ulduzlar */
.rep-stars__row--bg[b-0jdzp7wzs2] {
    color: var(--mud-palette-lines-default);
}

/* Dolu cərgə — üstdən kəsilir */
.rep-stars__row--fg[b-0jdzp7wzs2] {
    position: absolute;
    inset: 0;
    overflow: hidden;
    color: #f59e0b; /* amber-500 — Google ulduz tonu */
}

/* Kəsilmə zamanı ikonlar sıxılmasın.
   ::deep lazımdır — MudIcon ayrı komponentdir və CSS isolation scope
   atributunu almır, ona görə adi descendant selektor onu tutmur. */
.rep-stars__row[b-0jdzp7wzs2]  .mud-icon-root {
    flex: 0 0 auto;
}

/* Sürüşən məzmun — bax: TodayScheduleList.razor.css/.tsl-scroll */
.rep-scroll[b-0jdzp7wzs2] {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* ══════════════════════════════════════════════════════════════════════════
   123 — GOOGLE ULDUZU (panel vidcetinin birinci sətri)
   ══════════════════════════════════════════════════════════════════════════
   Rəqəm 10 günlük nüsxədəndir; link Google-un öz `googleMapsUri`-sidir.
   Sətir bütövlükdə kliklənir: həkimin ilk refleksi «Google-da necə
   görünürəm?» sualına baxmaqdır. */
.rep-google[b-0jdzp7wzs2] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    text-decoration: none;
    color: inherit;
    padding: 6px 0 10px;
}

.rep-google:hover .rep-google__num[b-0jdzp7wzs2] {
    text-decoration: underline;
}

.rep-google__num[b-0jdzp7wzs2] {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
}

.rep-google__count[b-0jdzp7wzs2] {
    font-size: .78rem;
    opacity: .65;
}
/* /Features/Home/TodayScheduleList.razor.rz.scp.css */
/* === Features/Home/TodayScheduleList.razor.css === */
.today-row[b-3go6dfcdpq] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

    .today-row:last-child[b-3go6dfcdpq] {
        border-bottom: none;
    }

.today-row__time[b-3go6dfcdpq] {
    font-size: 13px;
    font-weight: 700;
    width: 44px;
    color: var(--mud-palette-text-secondary);
}

.today-row__dot[b-3go6dfcdpq] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.today-row__dot--confirmed[b-3go6dfcdpq] {
    background: #0f766e;
}

.today-row__dot--pending[b-3go6dfcdpq] {
    background: #f59e0b;
}

.today-row__dot--noshow[b-3go6dfcdpq] {
    background: #94a3b8;
}

.today-row__body[b-3go6dfcdpq] {
    display: flex;
    flex-direction: column;
}

.today-row__name[b-3go6dfcdpq] {
    font-size: 13px;
    font-weight: 600;
}

.today-row__service[b-3go6dfcdpq] {
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
}

/* Sürüşən siyahı. Kartın hündürlüyü paneldə sabitdir (.widget-box) —
   randevu sayı artanda kart böyümür, siyahı sürüşür. */
.tsl-scroll[b-3go6dfcdpq] {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}
/* /Features/Hr/StaffProfileFields.razor.rz.scp.css */
/* === Features/Hr/StaffProfileFields.razor.css ===
   «Ətraflı məlumat» bölməsi — hesab sahələrindən nazik xətlə ayrılır.
   Rənglər palitra dəyişənlərindəndir (qaranlıq rejim). */

.spf[b-hs3z4oimyu] {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.spf-head[b-hs3z4oimyu] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.spf-head__icon[b-hs3z4oimyu] {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
}

.spf-head__text[b-hs3z4oimyu] {
    min-width: 0;
}

.spf-head__title[b-hs3z4oimyu] {
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--mud-palette-text-primary);
}

.spf-head__hint[b-hs3z4oimyu] {
    font-size: 0.76rem;
    color: var(--mud-palette-text-secondary);
}
/* /Features/Legal/LegalConsentDialog.razor.rz.scp.css */
/* ═══════ Razılıq dialoqu ═══════ */

.legal-head[b-1rgk653oyf] {
    display: flex;
    align-items: center;
}

/* Mətn sahəsi sabit hündürlükdədir: dialoq sənədin uzunluğuna görə
   "sıçramır" və qısa sənəddə də təsdiq düyməsi eyni yerdə qalır. */
.legal-body[b-1rgk653oyf] {
    max-height: 46vh;
    overflow-y: auto;
    padding: 18px 20px;
    border-radius: 12px;
    border: 1px solid var(--mud-palette-lines-default);
    background-color: var(--mud-palette-background-grey);
    white-space: pre-wrap;      /* mətn düz mətndir, HTML deyil */
    word-break: break-word;
    line-height: 1.65;
    font-size: 0.875rem;
    color: var(--mud-palette-text-primary);
}

.legal-body[b-1rgk653oyf]::-webkit-scrollbar {
    width: 8px;
}

.legal-body[b-1rgk653oyf]::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background: var(--mud-palette-lines-default);
}

.legal-meta[b-1rgk653oyf] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    font-size: 0.72rem;
    opacity: 0.65;
}

.legal-confirm[b-1rgk653oyf] {
    margin-top: 14px;
    padding: 4px 12px;
    border: 1px solid var(--mud-palette-lines-default);
    background-color: var(--mud-palette-surface);
}

.legal-actions[b-1rgk653oyf] {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 8px;
}

.legal-tabs[b-1rgk653oyf] {
    min-height: 0;
}
/* /Features/Localization/LanguageSelector.razor.rz.scp.css */
/* === LanguageSelector.razor.css === */

.lang-menu-list[b-s72y3gzmyv] {
    min-width: 220px !important;
    border-radius: 12px !important;
    padding: 6px !important;
}

.lang-item[b-s72y3gzmyv] {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    cursor: pointer;
    transition: background 0.12s ease;
}

.lang-item:hover[b-s72y3gzmyv] {
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent) !important;
}

.lang-item--active[b-s72y3gzmyv] {
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent) !important;
    font-weight: 700 !important;
}

.lang-flag[b-s72y3gzmyv] {
    font-size: 18px;
    line-height: 1;
}

.lang-code[b-s72y3gzmyv] {
    font-size: 11px;
    font-weight: 600;
    opacity: 0.5;
    text-transform: uppercase;
}

/* Qeyd: navbar tetiyi üçün ayrıca `.lang-trigger` stili SİLİNDİ —
   tetik yenidən MudMenu-nun öz `Icon` düyməsidir (bax .razor faylındakı
   izah: ActivatorContent klikə cavab vermirdi). */

.flex-1[b-s72y3gzmyv] {
    flex: 1;
}
/* /Features/Notifications/NotificationBell.razor.rz.scp.css */
/* === Features/Notifications/NotificationBell.razor.css === */

/* ════════════════════════════════════════════
   BADGE — əl ilə idarə olunan, kəsilməyən badge
   ════════════════════════════════════════════ */

/* XARİCİ KONTEYNER — overflow-u açıq saxlayır */
.notif-bell-outer[b-4tr40oej76] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: visible !important;
}

/* MudTooltip-in daxili div-inin də overflow-u açıq olsun — kəsilmənin qarşısı */
.mud-tooltip > *[b-4tr40oej76] {
    overflow: visible !important;
}

/* SAY DAİRƏSİ — narıncı badge, AppBar-da kəsilməyən */
.notif-bell-count[b-4tr40oej76] {
    position: absolute;
    top: 2px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    background: #ff9800;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    line-height: 20px;
    text-align: center;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    z-index: 20;
    pointer-events: none;
    /* MudBadge overlap transform-a ehtiyac yoxdur—özümüz əllə yerləşdiririk */
}

/* ═══════════════════════════════════════════════════════
   ZİL TİTRƏMƏ ANİMASİYASI — SaaS tərzi (Slack/GitHub/Teams)

   Mexanizm: _shakeTrigger artır → Blazor @key dəyişir
   → DOM wrapper div-i yenidən yaradılır → CSS animasiya
   avtomatik işə düşür. Heç bir JS, timer, requestAnimationFrame
   yoxdur. Təmiz Brauzer API-si.
   ═══════════════════════════════════════════════════════ */
.bell-shake-wrap[b-4tr40oej76] {
    display: inline-flex;
    animation: bell-shake-b-4tr40oej76 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

@keyframes bell-shake-b-4tr40oej76 {
    0%, 100% { transform: rotate(0deg); }
    10% { transform: rotate(18deg); }
    20% { transform: rotate(-14deg); }
    30% { transform: rotate(12deg); }
    40% { transform: rotate(-8deg); }
    50% { transform: rotate(6deg); }
    65% { transform: rotate(-4deg); }
    80% { transform: rotate(2deg); }
}

/* ═══════════════════════════════════════════════════════
   BADGE PULSU — gözləyən sorğular olduqca daim işıldayır
   Diqqəti cəlb edir, amma yorucu deyil (2s interval).
   Yalnız box-shadow animasiyası — GPU sürətləndirməli.
   ═══════════════════════════════════════════════════════ */
.notif-bell-count[b-4tr40oej76] {
    animation: badge-alert-b-4tr40oej76 2s ease-in-out infinite;
}

@keyframes badge-alert-b-4tr40oej76 {
    0%, 100% {
        box-shadow: 0 2px 6px rgba(255, 152, 0, 0.25);
    }
    50% {
        box-shadow: 0 2px 14px rgba(255, 152, 0, 0.55),
                    0 0 24px rgba(255, 152, 0, 0.12);
    }
}

/* ════════════════════════════════════════════
   DROPDOWN — overlay, card, scroll
   ════════════════════════════════════════════ */

/* Transparent overlay — dropdown-u bağlamaq üçün */
.notif-overlay[b-4tr40oej76] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    z-index: 9998;
}

/* Dropdown paper card */
.notif-paper[b-4tr40oej76] {
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.18) !important;
    animation: notif-fade-in-b-4tr40oej76 0.2s ease-out;
}

@keyframes notif-fade-in-b-4tr40oej76 {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ════════════════════════════════════════════
   BİLDİRİŞ SİYAHISI — item-lar
   ════════════════════════════════════════════ */

.notif-item[b-4tr40oej76] {
    transition: background-color 0.15s ease;
}

.notif-item:last-child > .d-flex[style*="border-bottom"][b-4tr40oej76] {
    border-bottom: none !important;
}

/* Kliklənə bilən üst hissə */
.notif-item-clickable[b-4tr40oej76] {
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.notif-item-clickable:hover[b-4tr40oej76] {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.06);
}
.notif-item-clickable:active[b-4tr40oej76] {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.10);
}

/* Truncate */
.notif-truncate[b-4tr40oej76] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Düymələr */
.notif-btn[b-4tr40oej76] {
    min-height: 32px !important;
    font-size: 0.8rem !important;
}

/* Səssiz rejim düyməsi */
.notif-silent-toggle[b-4tr40oej76] {
    opacity: 0.6;
    transition: opacity 0.2s ease;
}
.notif-silent-toggle:hover[b-4tr40oej76] {
    opacity: 1;
}

/* Scrollbar */
.notif-scroll[b-4tr40oej76]::-webkit-scrollbar { width: 4px; }
.notif-scroll[b-4tr40oej76]::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 4px;
}
.notif-scroll[b-4tr40oej76]::-webkit-scrollbar-track { background: transparent; }

/* ══════════════════════════════════════════════════════════════════════════
   DƏSTƏK MÜRACİƏTLƏRİ BÖLMƏSİ (13.08.2026)
   ══════════════════════════════════════════════════════════════════════════
   Klinika müraciət yazır, biz cavab veririk — və o cavab indiyə qədər
   yalnız abunə ekranını açanda görünürdü. İndi zilə düşür. */
.notif-section[b-4tr40oej76] {
    border-bottom: 1px solid var(--mud-palette-lines-default);
    background: rgba(var(--mud-palette-primary-rgb), 0.04);
}

.notif-section-head[b-4tr40oej76] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px 4px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

/* 🔴 ::deep MƏCBURİDİR: sinif MudButton-a verilir, Blazor-un `b-xxxxx`
   scope atributu isə yalnız BU komponentin öz HTML teqlərinə əlavə olunur —
   uşaq komponentin kök elementinə YOX. ::deep olmadan qayda heç vaxt
   tətbiq olunmur (bax CLAUDE.md → CSS izolyasiyası). */
.notif-section[b-4tr40oej76]  .notif-section-clear {
    min-height: 24px;
    padding: 0 8px;
    font-size: 0.68rem;
    font-weight: 700;
}

.notif-support-item[b-4tr40oej76] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 16px 10px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.notif-support-item:hover[b-4tr40oej76] {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.09);
}

.notif-support-item:active[b-4tr40oej76] {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.14);
}
/* /Features/Onboarding/Profile/BrandPicker.razor.rz.scp.css */
/* === BrandPicker.razor.css === */

.brand-root[b-mqwp83t9q8]  .brand-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    /* Yan-yana duran iki kart eyni hündürlükdə bitsin — biri qısa qalanda
       sətir «yarımçıq» görünür. */
    height: 100%;
}

.brand-head[b-mqwp83t9q8] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.brand-root[b-mqwp83t9q8]  .brand-subtitle {
    color: var(--mud-palette-text-secondary);
}

.brand-section[b-mqwp83t9q8] {
    margin-top: 14px;
}

.brand-section__label[b-mqwp83t9q8] {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 8px;
}

/* ── Rəng seçiciləri ── */
.brand-swatches[b-mqwp83t9q8] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.brand-swatch[b-mqwp83t9q8] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px 7px 8px;
    border-radius: 999px;
    border: 2px solid var(--mud-palette-lines-default, rgba(0,0,0,.12));
    background: var(--mud-palette-surface, #fff);
    cursor: pointer;
    font: inherit;
    font-size: .82rem;
    color: var(--mud-palette-text-primary);
    transition: border-color .15s ease, transform .1s ease;
}

.brand-swatch:hover[b-mqwp83t9q8] { transform: translateY(-1px); }

/* Seçili variant SEÇİLƏN RƏNGİN ÖZÜ ilə işarələnir — belədə nişan
   həm də rəngin necə göründüyünü nümayiş etdirir. */
.brand-swatch.is-active[b-mqwp83t9q8] {
    border-color: var(--sw);
    background: color-mix(in srgb, var(--sw) 8%, transparent);
}

.brand-swatch__dot[b-mqwp83t9q8] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--sw), var(--sw-dark));
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.55);
    flex: 0 0 22px;
}

.brand-swatch__name[b-mqwp83t9q8] { white-space: nowrap; }

/* ── Şrift seçiciləri ── */
/* 🔴 QIRIQ DIZAYNIN SEBEBI (19.08.2026 — ekran şəkli ilə təsdiqləndi):
   `minmax(220px, 1fr)` + grid elementinin defolt `min-width: auto` birlikdə
   düyməni MƏTNİN TAM ENİ qədər böyüdürdü. Nümunə mətn `nowrap`-dır, yəni
   min-content ölçüsü bütün cümlədir — sütunlar 1fr-i AŞIB bir-birinin
   üstünə düşürdü.

   İki dəyişiklik lazımdır və İKİSİ DƏ məcburidir:
     ① `minmax(0, 1fr)` — sütun 0-a qədər sıxıla bilsin;
     ② elementin özündə `min-width: 0` — element sıxılmağa razı olsun.
   Birini yazıb digərini unutmaq eyni səhvi qaytarır. */
.brand-fonts[b-mqwp83t9q8] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
    gap: 8px;
}

.brand-font[b-mqwp83t9q8] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 12px;
    text-align: start;
    /* ① Yuxarıdakı şərhə bax — bunsuz grid dağılır. */
    min-width: 0;
    overflow: hidden;
    border-radius: 10px;
    border: 2px solid var(--mud-palette-lines-default, rgba(0,0,0,.12));
    background: var(--mud-palette-surface, #fff);
    cursor: pointer;
    color: var(--mud-palette-text-primary);
    transition: border-color .15s ease;
}

.brand-font:hover[b-mqwp83t9q8] {
    border-color: var(--mud-palette-primary, #0F766E);
}

.brand-font.is-active[b-mqwp83t9q8] {
    border-color: var(--mud-palette-primary, #0F766E);
    background: var(--mud-palette-primary-hover, rgba(15,118,110,.06));
}

.brand-font__name[b-mqwp83t9q8] {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: .6;
    /* Ad HƏMİŞƏ interfeys şrifti ilə — seçilən şriftdə oxunmasa
       istifadəçi hansı variantda olduğunu itirər. */
    font-family: var(--mud-typography-default-family, system-ui), sans-serif;
}

/* 🔴 Nümunə mətn seçilən şriftdədir: `ə` hərfi yoxdursa burada görünür. */
.brand-font__sample[b-mqwp83t9q8] {
    font-size: .95rem;
    line-height: 1.35;
    /* Konteynerin enini DIQTE ETMESIN: eni sütun verir, mətn kəsilir. */
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Canlı önizləmə ──
   Booking səhifəsinin qısaldılmış modelidir: hero + slot + düymə.
   Məqsəd rəngi TƏTBİQ OLUNDUĞU YERDƏ göstərməkdir — kvadrat nümunə
   real nəticəni proqnozlaşdırmır. */
.brand-preview[b-mqwp83t9q8] {
    margin-top: 18px;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--mud-palette-lines-default, rgba(0,0,0,.12));
    /* 380 px sabit idi — md=5 sütununda sağda boş zolaq qalırdı və kart
       «yarımçıq doldurulmuş» görünürdü. */
    width: 100%;
}

.brand-preview__hero[b-mqwp83t9q8] {
    padding: 18px 16px 16px;
    background: linear-gradient(135deg, var(--brand), var(--brand-dark));
    color: #fff;
}

.brand-preview__badge[b-mqwp83t9q8] {
    display: inline-block;
    padding: 2px 8px;
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    border-radius: 999px;
    background: rgba(255,255,255,.22);
}

.brand-preview__clinic[b-mqwp83t9q8] {
    margin-top: 8px;
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.25;
}

.brand-preview__body[b-mqwp83t9q8] {
    padding: 14px 16px 16px;
    background: var(--mud-palette-surface, #fff);
}

.brand-preview__label[b-mqwp83t9q8] {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--mud-palette-text-secondary);
}

.brand-preview__slots[b-mqwp83t9q8] {
    display: flex;
    gap: 6px;
    margin: 8px 0 14px;
}

.brand-preview__slot[b-mqwp83t9q8] {
    padding: 6px 10px;
    font-size: .8rem;
    font-weight: 600;
    border-radius: 8px;
    border: 1px solid var(--mud-palette-lines-default, rgba(0,0,0,.14));
    color: var(--mud-palette-text-primary);
}

.brand-preview__slot.is-on[b-mqwp83t9q8] {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

.brand-preview__cta[b-mqwp83t9q8] {
    padding: 11px;
    text-align: center;
    font-weight: 700;
    color: #fff;
    border-radius: 10px;
    background: var(--brand);
}

.brand-actions[b-mqwp83t9q8] {
    display: flex;
    justify-content: flex-end;
    margin-top: 14px;
}

/* ── Kilidli hal (113) ──
   Məzmun GÖRÜNÜR, amma toxunulmazdır: satış arqumenti qalır, yanlış
   gözlənti yaranmır. `pointer-events` düymələrin özündə `disabled` ilə
   onsuz da bağlıdır; buradakı sönüklük yalnız vizual siqnaldır. */
.brand-body.is-locked[b-mqwp83t9q8] {
    opacity: .55;
    filter: saturate(.7);
}

.brand-root[b-mqwp83t9q8]  .brand-lockchip {
    margin-inline-start: auto;
}

.brand-root[b-mqwp83t9q8]  .brand-lock {
    margin-bottom: 4px;
}

/* /Features/Onboarding/Profile/CertificatesSection.razor.rz.scp.css */
/* === CertificatesSection.razor.css === */

.cert-root[b-1ro62a6cpe]  .cert-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    /* Yanındakı brend kartı ilə eyni hündürlük — sətir «pilləli»
       görünməsin. */
    height: 100%;
}

.cert-head[b-1ro62a6cpe] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.cert-head__title[b-1ro62a6cpe] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 🔴 21.09.2026 — `::deep` ELAVE OLUNDU (ARTIQ QUSURLU IDI).
   Sinif `MudButton`-a verilir; Blazor izolyasiya atributunu USAQ
   komponente elave ETMIR, yeni `.cert-head__add[b-xxxxx]` selektoru hec
   vaxt uygun gelmirdi -- duyme saga sixilmirdi.

   !! LINT BUNU NIYE TUTMURDU: `RazorSourceLintTests`-in regexi `Class=`-a
      catmaq ucun `[^>]*?` islediyi ucun eyni teqdeki `OnClick="@(() =>
      ...)"` lambda oxunda (`=>`) DAYANIRDI. 168-de `OnClick` adlandirilmis
      metoda cevrildi, ox itdi ve qusur uze cixdi. */
.cert-head[b-1ro62a6cpe]  .cert-head__add {
    margin-inline-start: auto;
}

.cert-root[b-1ro62a6cpe]  .cert-subtitle {
    color: var(--mud-palette-text-secondary);
    margin-bottom: 4px;
}

/* ── Əlavəetmə forması ── */
.cert-form[b-1ro62a6cpe] {
    margin-top: 12px;
    padding: 14px;
    border-radius: 12px;
    background: var(--mud-palette-background-grey, #f7f8fa);
    border: 1px dashed var(--mud-palette-lines-default, rgba(0,0,0,.14));
}

.cert-root[b-1ro62a6cpe]  .cert-form__file {
    /* Uzun fayl adı düyməni dağıtmasın. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cert-form__actions[b-1ro62a6cpe] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
}

/* ── Qrup başlığı ── */
.cert-group[b-1ro62a6cpe] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 16px 0 6px;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.cert-root[b-1ro62a6cpe]  .cert-group__line {
    flex: 1;
}

/* ── Sətir ── */
.cert-row[b-1ro62a6cpe] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 10px;
    transition: background .15s ease;
}

.cert-row:hover[b-1ro62a6cpe] {
    background: var(--mud-palette-action-default-hover, rgba(0,0,0,.04));
}

/* Gizlədilmiş sətir SİLİNMİŞ kimi görünməməlidir — sadəcə sönük.
   Üstündən xətt çəksək istifadəçi «silinib» zənn edərdi. */
.cert-row.is-hidden[b-1ro62a6cpe] {
    opacity: .5;
}

.cert-row__thumb[b-1ro62a6cpe] {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    object-fit: cover;
    border-radius: 8px;
    background: var(--mud-palette-background-grey, #eef0f3);
    border: 1px solid var(--mud-palette-lines-default, rgba(0,0,0,.1));
}

/* Şəkilsiz nailiyyət — bu, NORMAL haldır, çatışmazlıq deyil.
   Ona görə «sınıq şəkil» görünüşü yox, təmiz ikon işlədilir. */
.cert-row__thumb--text[b-1ro62a6cpe] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mud-palette-text-secondary);
}

.cert-row__body[b-1ro62a6cpe] {
    flex: 1;
    min-width: 0;
}

.cert-row__title[b-1ro62a6cpe] {
    font-weight: 600;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cert-row__meta[b-1ro62a6cpe] {
    font-size: .78rem;
    color: var(--mud-palette-text-secondary);
    display: flex;
    gap: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cert-empty[b-1ro62a6cpe] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 22px 12px;
    color: var(--mud-palette-text-secondary);
    text-align: center;
}

.cert-root[b-1ro62a6cpe]  .cert-empty__icon {
    opacity: .45;
}

.cert-root[b-1ro62a6cpe]  .cert-empty__text {
    max-width: 42ch;
}

/* Nümunə sətir — REAL bir sertifikatın necə yazılacağını göstərir.
   Yazı tipi monospace deyil: bu, kod deyil, hazır CAVABDIR. */
.cert-empty__sample[b-1ro62a6cpe] {
    padding: 7px 14px;
    border-radius: 999px;
    font-size: .8rem;
    background: var(--mud-palette-background-grey, #f2f4f7);
    border: 1px dashed var(--mud-palette-lines-default, rgba(0,0,0,.16));
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 600px) {
    .cert-head[b-1ro62a6cpe]  .cert-head__add { margin-inline-start: 0; width: 100%; }
    .cert-row__thumb[b-1ro62a6cpe] { width: 40px; height: 40px; flex-basis: 40px; }
}
/* /Features/Onboarding/Profile/LocationPicker.razor.rz.scp.css */
/* === LocationPicker.razor.css ===
   ⚠️ `::deep` işlədilir, çünki xəritənin daxili elementlərini JS yaradır —
      Blazor onlara scope atributu qoymur. */

.loc-picker[b-h6u6y8ho4x] {
    display: flex;
    flex-direction: column;
}

/* ══════════════════════════════════════════════════════════════════════
   BAĞLI HAL — BİR SƏTİR (113)
   ══════════════════════════════════════════════════════════════════════
   Xəritə 320 px yer tuturdu və hər profil açılışında üç sahəni ekrandan
   çıxarırdı. İndi sətir formasındadır; xəritə yalnız istənəndə açılır. */
.loc-summary[b-h6u6y8ho4x] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--mud-palette-lines-default, rgba(0,0,0,.12));
    background: var(--mud-palette-background-grey, #f7f8fa);
}

/* Açıq halda alt künclər düzəlir — panel onun DAVAMI kimi görünsün. */
.loc-summary.is-open[b-h6u6y8ho4x] {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-color: transparent;
}

.loc-picker[b-h6u6y8ho4x]  .loc-summary__icon {
    color: var(--mud-palette-text-secondary);
    flex: 0 0 auto;
}

/* Nöqtə TƏYİN OLUNUBSA ikon brend rəngindədir — göz bir baxışda
   «var / yoxdur» fərqini görür, mətn oxumadan. */
.loc-picker[b-h6u6y8ho4x]  .loc-summary__icon.is-set {
    color: var(--mud-palette-primary, #0F766E);
}

.loc-summary__body[b-h6u6y8ho4x] {
    flex: 1;
    min-width: 0;
}

.loc-summary__label[b-h6u6y8ho4x] {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--mud-palette-text-secondary);
}

.loc-summary__value[b-h6u6y8ho4x] {
    font-size: .85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.loc-summary__coords[b-h6u6y8ho4x] {
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    color: var(--mud-palette-text-primary);
}

.loc-summary__empty[b-h6u6y8ho4x] {
    color: var(--mud-palette-warning, #b26a00);
    font-weight: 600;
}

.loc-picker[b-h6u6y8ho4x]  .loc-summary__btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* Açılan panel — bağlı sətrin altına «yapışır». */
.loc-panel[b-h6u6y8ho4x] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--mud-palette-lines-default, rgba(0,0,0,.12));
    border-top: 0;
    border-radius: 0 0 12px 12px;
    background: var(--mud-palette-surface, #fff);
}

@media (max-width: 600px) {
    .loc-summary[b-h6u6y8ho4x] { flex-wrap: wrap; }
    .loc-picker[b-h6u6y8ho4x]  .loc-summary__btn { width: 100%; }
}

.loc-picker__toolbar[b-h6u6y8ho4x] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.loc-picker[b-h6u6y8ho4x]  .loc-picker__search {
    flex: 1 1 220px;
    min-width: 180px;
}

.loc-picker[b-h6u6y8ho4x]  .loc-picker__locked {
    opacity: .6;
}

.loc-picker__promo[b-h6u6y8ho4x] {
    max-width: 260px;
    text-align: start;
}

.loc-picker__promo-title[b-h6u6y8ho4x] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    margin-bottom: 4px;
}

.loc-picker__promo-text[b-h6u6y8ho4x] {
    font-size: .8rem;
    line-height: 1.4;
    opacity: .9;
}

/* ── Xəritə sahəsi ──
   `touch-action: none` MƏCBURİDİR: olmasa mobil brauzer barmağı səhifə
   sürüşdürməsi kimi qəbul edir və xəritə tərpənmir. */
.loc-picker__map[b-h6u6y8ho4x] {
    position: relative;
    width: 100%;
    height: 320px;
    border-radius: 12px;
    overflow: hidden;
    background: #e8eaed;
    border: 1px solid var(--mud-palette-lines-default, rgba(0,0,0,.12));
    touch-action: none;
    cursor: grab;
    user-select: none;
}

.loc-picker__map.is-dragging[b-h6u6y8ho4x] {
    cursor: grabbing;
}

[b-h6u6y8ho4x] .asis-map-layer {
    position: absolute;
    inset: 0;
}

[b-h6u6y8ho4x] .asis-map-tile {
    position: absolute;
    top: 0;
    left: 0;
    width: 256px;
    height: 256px;
    /* Kirəmit kənarlarındakı 1 px boşluğu gizlədir (subpiksel yuvarlaqlaşma). */
    outline: 1px solid transparent;
    pointer-events: none;
}

/* ── Mərkəzdəki nişangah ──
   🔴 `pointer-events: none` OLMALIDIR: əks halda pin sürüşdürməni udur və
      xəritə barmağın altında tərpənmir.
   Pinin ucu MƏRKƏZDƏDİR — `translate(-50%, -100%)` onu düz nöqtənin
   üstünə qoyur, mərkəzləməkdən fərqli olaraq. */
[b-h6u6y8ho4x] .asis-map-pin {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 26px;
    height: 26px;
    margin-left: -13px;
    margin-top: -26px;
    pointer-events: none;
    background: var(--mud-palette-primary, #0F766E);
    border: 3px solid #fff;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    box-shadow: 0 3px 10px rgba(0,0,0,.35);
    z-index: 3;
}

/* Nöqtənin dəqiq yerini göstərən kiçik kölgə — pin «havada» görünməsin. */
[b-h6u6y8ho4x] .asis-map-pin::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 100%;
    width: 8px;
    height: 4px;
    margin-left: -4px;
    background: rgba(0,0,0,.25);
    border-radius: 50%;
    transform: rotate(45deg);
}

[b-h6u6y8ho4x] .asis-map-zoom {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    z-index: 4;
}

[b-h6u6y8ho4x] .asis-map-zoom button {
    width: 32px;
    height: 32px;
    font-size: 18px;
    line-height: 1;
    font-weight: 700;
    color: #333;
    background: #fff;
    border: 1px solid rgba(0,0,0,.18);
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0,0,0,.15);
}

[b-h6u6y8ho4x] .asis-map-zoom button:hover {
    background: #f3f4f6;
}

/* Atribusiya HÜQUQİ TƏLƏBDİR — OpenStreetMap kirəmitləri ODbL altındadır
   və mənbə göstərilməlidir. Silinməməlidir. */
[b-h6u6y8ho4x] .asis-map-credit {
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 2px 6px;
    font-size: 10px;
    color: #333;
    background: rgba(255,255,255,.75);
    border-top-left-radius: 6px;
    pointer-events: none;
    z-index: 4;
}

.loc-picker__footer[b-h6u6y8ho4x] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.loc-picker[b-h6u6y8ho4x]  .loc-picker__hint-icon {
    color: var(--mud-palette-text-secondary);
}

.loc-picker__hint[b-h6u6y8ho4x] {
    font-size: .8rem;
    color: var(--mud-palette-text-secondary);
}

.loc-picker[b-h6u6y8ho4x]  .loc-picker__coords {
    margin-inline-start: auto;
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
}

@media (max-width: 600px) {
    .loc-picker__map[b-h6u6y8ho4x] { height: 260px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   115 — «YADDA SAXLANILIB?» VƏZİYYƏTİ
   ══════════════════════════════════════════════════════════════════════════
   Sistem sahibi: «xəritə seçimi funksional deyil, adam anlamır yadda
   saxladı ya yox seçdiyi location-u».

   ⚠️ RƏNG TƏK SİQNAL DEYİL — hər vəziyyətin ÖZ İKONU var. Rəng korluğu
      olan istifadəçi (deuteranopia ~8% kişi) yaşıl/kəhrəba fərqini
      görmür; ✓ və ! işarələri rəngdən asılı deyil.
   ══════════════════════════════════════════════════════════════════════════ */
.loc-summary__state[b-h6u6y8ho4x] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-inline-start: 10px;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}

    .loc-summary__state.is-saved[b-h6u6y8ho4x] {
        color: var(--mud-palette-success);
    }

    .loc-summary__state.is-dirty[b-h6u6y8ho4x] {
        color: var(--mud-palette-warning);
    }

/* Dar ekranda vəziyyət alt sətrə düşür — koordinatı sıxışdırmasın. */
@media (max-width: 600px) {
    .loc-summary__state[b-h6u6y8ho4x] {
        display: flex;
        margin-inline-start: 0;
        margin-top: 2px;
    }
}

/* ⚠️ MudAlert KOMPONENTDİR — scoped atribut ALMIR, `::deep` məcburidir.
   Valideyn `.loc-panel` adi <div>-dir və atributu alır. */
.loc-panel[b-h6u6y8ho4x]  .loc-picker__unsaved {
    margin-top: 10px;
}

.loc-picker[b-h6u6y8ho4x]  .loc-picker__done {
    margin-inline-start: auto;
}
/* /Features/Onboarding/Profile/ShowcaseVisibility.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════════
   ShowcaseVisibility.razor.css (115)

   ⚠️ `.scv-root` SARĞISI KOSMETİK DEYİL. Blazor `::deep .foo` qaydasını
      `[b-xxx] .foo` kimi yazır, yəni ƏCDADDA scope atributu tələb edir.
      Komponentin kökü `MudCard` olsaydı (o, atribut ALMIR) bütün
      `::deep` qaydaları səssizcə ölərdi — layihədə bu tələyə iki dəfə
      düşülüb (bax `ProfilePage.razor.css` başlığı).
   ══════════════════════════════════════════════════════════════════════════ */

.scv-root[b-81lx10fkg7]  .scv-card {
    /* Yanındakı sertifikat kartı ilə eyni hündürlükdə dursun. */
    height: 100%;
}

.scv-head[b-81lx10fkg7] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.scv-root[b-81lx10fkg7]  .scv-subtitle {
    margin-top: 4px;
    color: var(--mud-palette-text-secondary);
}

.scv-list[b-81lx10fkg7] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 12px;
}

.scv-row[b-81lx10fkg7] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-radius: 10px;
    /* ⚠️ `min-width: 0` olmadan uzun izah mətni sətri genişləndirir və
       açar-bağlayıcı kartdan bayıra çıxır (114-də profil kartlarında
       eyni səhv «çox item daşır çölə» şikayətini doğurmuşdu). */
    min-width: 0;
}

    .scv-row:hover[b-81lx10fkg7] {
        background: var(--mud-palette-action-default-hover);
    }

    /* Məlumatı olmayan sətir SÖNÜKDÜR, lakin BAĞLI DEYİL: klinika açarı
       əvvəlcədən aça bilər, məlumatı sonra doldurar. */
    .scv-row.is-empty .scv-row__label[b-81lx10fkg7] {
        color: var(--mud-palette-text-secondary);
    }

/* ⚠️ MudIcon KOMPONENTDİR — `::deep` olmadan qayda tətbiq olunmur.
   Valideyn `.scv-row` adi <div>-dir. */
.scv-row[b-81lx10fkg7]  .scv-row__icon {
    flex: 0 0 auto;
    color: var(--mud-palette-text-secondary);
}

.scv-row__text[b-81lx10fkg7] {
    flex: 1;
    min-width: 0;
}

.scv-row__label[b-81lx10fkg7] {
    font-size: 14px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.scv-row__miss[b-81lx10fkg7] {
    font-size: 11.5px;
    line-height: 1.35;
    color: var(--mud-palette-text-secondary);
    overflow-wrap: anywhere;
}

/* ═══════════════════════════════════════════════════════════════════════
   29.08.2026 — KİLİDLİ SƏTRİN SATIŞ DÜYMƏSİ

   ⚠️ `::deep` MƏCBURİDİR: sinif `MudButton`-a verilir, o isə komponentdir
      və scope atributu ALMIR. `.scv-root` sarğısı olmadan qayda ölərdi.
   ═══════════════════════════════════════════════════════════════════════ */
.scv-root[b-81lx10fkg7]  .scv-row__cta {
    flex: 0 0 auto;
    margin-inline-end: 4px;
    white-space: nowrap;
    font-size: 12px;
    text-transform: none;
}
/* /Features/Shared/Accessibility/AccessibilityPanel.razor.rz.scp.css */
/* === AccessibilityPanel.razor.css ===
   Panelin ÖZ görünüşü. İnterfeysə tətbiq olunan qaydalar `wwwroot/css/a11y.css`-dədir.

   🔴 CSS izolyasiyası: `b-xxxxx` atributu yalnız BİZİM HTML elementlərimizə düşür,
      `MudIcon`/`MudSwitch`/`MudText` kimi uşaq komponentlərə DÜŞMÜR.
      Ona görə seçim düymələri qəsdən adi `<button>`-dur — `MudButton` olsaydı
      hər qayda `::deep` tələb edərdi və düzüm nəzarətdən çıxardı.
      Mud komponentlərinə verilən siniflər aşağıda `::deep` ilə yazılıb. */

/* ── Başlıq ──
   Vurğu rəngi ilə — panel açılanda gözün ilk dayandığı yer burasıdır. */
.a11y-head[b-h3a9rr0ofv] {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    padding: 1rem 1rem 1rem 1.25rem;
    flex: 0 0 auto;
}

.a11y-head-row[b-h3a9rr0ofv] {
    display: flex;
    align-items: center;
    gap: .875rem;
}

.a11y-head-icon[b-h3a9rr0ofv] {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, .18);
    flex: 0 0 auto;
}

.a11y-head-text[b-h3a9rr0ofv] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1 1 auto;
    min-width: 0;
}

/* Başlıqdakı mətn və ikonlar vurğu fonunun üzərindədir — miras rəng alsınlar. */
.a11y-head[b-h3a9rr0ofv]  .mud-typography,
.a11y-head[b-h3a9rr0ofv]  .mud-icon-root,
.a11y-head[b-h3a9rr0ofv]  .mud-button-root {
    color: inherit;
}

.a11y-head-text[b-h3a9rr0ofv]  .mud-typography-caption {
    opacity: .8;
}

/* ── Gövdə ── */
.a11y-body[b-h3a9rr0ofv] {
    padding: 1rem;
    overflow-y: auto;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: .875rem;
    background: var(--mud-palette-background-gray, var(--mud-palette-background));
}

/* ── Canlı nümunə ──
   Kəsik xətt qəsdən: bu blok "ayar deyil, nümunədir" mesajını verir. */
.a11y-preview[b-h3a9rr0ofv] {
    border: 1px dashed var(--mud-palette-lines-default);
    border-radius: 14px;
    padding: .875rem 1rem;
    background: var(--mud-palette-surface);
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.a11y-preview[b-h3a9rr0ofv]  .a11y-preview-tag {
    color: var(--mud-palette-primary);
    font-weight: 700;
    line-height: 1.4;
}

/* ── Bölmə kartı — layihənin `rounded-xl pa-6` dilinin dar variantı ── */
.a11y-card[b-h3a9rr0ofv] {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 16px;
    padding: .875rem 1rem 1rem;
}

.a11y-card-head[b-h3a9rr0ofv] {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .75rem;
}

/* ── Hazır profillər: 2×2 ── */
.a11y-presets[b-h3a9rr0ofv] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
}

.a11y-preset[b-h3a9rr0ofv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .375rem;
    min-height: 5.25rem;
    padding: .75rem .5rem;
    border: 1.5px solid var(--mud-palette-divider);
    border-radius: 14px;
    background: transparent;
    color: var(--mud-palette-text-primary);
    cursor: pointer;
    transition: border-color .15s, background-color .15s;
    font: inherit;
    text-align: center;
}

.a11y-preset:hover[b-h3a9rr0ofv] {
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-action-default-hover);
}

.a11y-preset.is-active[b-h3a9rr0ofv] {
    border-color: var(--mud-palette-primary);
    border-width: 2px;
    background: rgba(var(--mud-palette-primary-rgb), .08);
}

.a11y-preset-label[b-h3a9rr0ofv] {
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.25;
}

/* ── Sətir: etiket + seqment ── */
.a11y-row[b-h3a9rr0ofv] {
    display: flex;
    flex-direction: column;
    gap: .375rem;
}

.a11y-row + .a11y-row[b-h3a9rr0ofv] {
    margin-top: .875rem;
}

.a11y-row-label[b-h3a9rr0ofv] {
    font-size: .8125rem;
    font-weight: 600;
    opacity: .8;
}

/* ── Seqmentli seçim (iOS üslubu) ──
   Radio düymələrindən daha yığcam və toxunma üçün daha yaxşıdır. */
.a11y-seg[b-h3a9rr0ofv] {
    display: flex;
    gap: 3px;
    padding: 3px;
    border-radius: 12px;
    background: var(--mud-palette-action-disabled-background);
}

.a11y-seg-item[b-h3a9rr0ofv] {
    flex: 1 1 0;
    min-width: 0;
    min-height: 2.25rem;
    padding: .25rem .375rem;
    border: none;
    border-radius: 9px;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font: inherit;
    font-size: .8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s, color .15s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.a11y-seg-item:hover[b-h3a9rr0ofv] {
    color: var(--mud-palette-text-primary);
}

.a11y-seg-item.is-active[b-h3a9rr0ofv] {
    background: var(--mud-palette-surface);
    color: var(--mud-palette-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}

/* ── Alt-alta seçim (kontrast) ── */
.a11y-stack[b-h3a9rr0ofv] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.a11y-option[b-h3a9rr0ofv] {
    display: flex;
    align-items: center;
    gap: .625rem;
    width: 100%;
    padding: .625rem .75rem;
    border: 1.5px solid var(--mud-palette-divider);
    border-radius: 12px;
    background: transparent;
    color: var(--mud-palette-text-primary);
    cursor: pointer;
    transition: border-color .15s, background-color .15s;
    font: inherit;
    text-align: start;
}

.a11y-option:hover[b-h3a9rr0ofv] {
    border-color: var(--mud-palette-primary);
}

.a11y-option.is-active[b-h3a9rr0ofv] {
    border-color: var(--mud-palette-primary);
    border-width: 2px;
    background: rgba(var(--mud-palette-primary-rgb), .08);
}

.a11y-option-main[b-h3a9rr0ofv] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1 1 auto;
    min-width: 0;
}

.a11y-option-title[b-h3a9rr0ofv] {
    font-size: .875rem;
    font-weight: 600;
}

.a11y-option-hint[b-h3a9rr0ofv] {
    font-size: .75rem;
    opacity: .7;
    line-height: 1.35;
}

/* ── Açar/bağla siyahısı ── */
.a11y-toggles[b-h3a9rr0ofv] {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.a11y-toggles[b-h3a9rr0ofv]  .mud-switch {
    margin: 0;
}

.a11y-toggles[b-h3a9rr0ofv]  .mud-switch-label {
    font-size: .875rem;
}

/* ── Alt zolaq ── */
.a11y-foot[b-h3a9rr0ofv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    padding: .75rem 1rem;
    border-top: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-surface);
    flex: 0 0 auto;
}

/* Dar ekranda panel tam eni tutsun — 400px telefonda daşır. */
@media (max-width: 440px) {
    .a11y-presets[b-h3a9rr0ofv] {
        grid-template-columns: 1fr;
    }
}


/* ══════════════════════════════════════════════════════════════════════════
   RƏNG NÜMUNƏSİ (12.08.2026)
   ══════════════════════════════════════════════════════════════════════════
   Rəng görməsi düzəlişinin işlədiyini yalnız RƏNGLİ nümunə üzərində görmək
   olar. Zolaqda sistemin öz status rəngləri var — istifadəçi «təsdiqlənmiş»
   ilə «gözləyən» randevunu ayırd edib-etmədiyini elə burada yoxlayır.

   ⚠️ Mətn rəngi fondan HESABLANIR (`color-mix` + tünd əsas), sabit hex YOX:
      qaranlıq temada sabit qara mətn görünmür (CLAUDE.md, a11y bölməsi). */
.a11y-swatches[b-h3a9rr0ofv] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.a11y-swatch[b-h3a9rr0ofv] {
    display: inline-flex;
    align-items: center;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .2px;
    padding: 4px 10px;
    border-radius: 20px;
    background: color-mix(in srgb, var(--sw) 20%, var(--mud-palette-surface));
    border: 2px solid var(--sw);
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
}

/* Bölmə başlığının altındakı izah sətri. */
.a11y-card[b-h3a9rr0ofv]  .a11y-card-hint {
    display: block;
    margin: -2px 0 10px;
    color: var(--mud-palette-text-secondary);
    line-height: 1.4;
}
/* /Features/Shared/Loading/AppSkeleton.razor.rz.scp.css */
/* === Features/Shared/Loading/AppSkeleton.razor.css ===

   ⚠️ `MudSkeleton` KOMPONENTDİR — Blazor scoped CSS ona `b-xxxxx` atributu
      VERMİR. Ona görə komponentə verilən siniflər (`askel-card`,
      `askel-input`, `askel-navrow__label`) `::deep` ilə hədəflənir; sarğı
      `<div>`-lər isə adi HTML olduğu üçün birbaşa yazılır.
      (Bu tələ layihədə bir neçə dəfə səssiz ölü CSS yaradıb — bax
      `ProfilePage.razor.css` faylının başlığı.) */

.askel[b-6fuug3mfog] {
    width: 100%;
}

/* Ekran oxuyucusu üçün — gözə görünmür, oxunur. */
.askel-sr[b-6fuug3mfog] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ───────────────────────────── KPI ───────────────────────────── */
.askel-kpis[b-6fuug3mfog] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1rem;
}

.askel-kpi[b-6fuug3mfog] {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    padding: 1rem 1.125rem;
    border-radius: 16px;
    border: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-surface);
}

/* ──────────────────────────── CƏDVƏL ──────────────────────────
   Sətirlər real cədvəlin ritmini təkrarlayır: başlıq nazik, sətirlər
   qalın, aralarında ayırıcı. Data gələndə hündürlük demək olar dəyişmir
   — yəni səhifə SIÇRAMIR. */
.askel-table[b-6fuug3mfog] {
    border: 1px solid var(--mud-palette-divider);
    border-radius: 12px;
    overflow: hidden;
    background: var(--mud-palette-surface);
}

.askel-row[b-6fuug3mfog] {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 1.25rem;
    align-items: center;
    padding: .75rem 1rem;
    border-top: 1px solid var(--mud-palette-divider);
}

    /* İlk sütun adətən addır — ona görə daha enli görünür. */
    .askel-row[b-6fuug3mfog]  > .mud-skeleton:first-child {
        max-width: 85%;
    }

    .askel-row[b-6fuug3mfog]  > .mud-skeleton:not(:first-child) {
        max-width: 60%;
    }

.askel-row--head[b-6fuug3mfog] {
    border-top: none;
    background: var(--mud-palette-background-grey);
}

/* ───────────────────────────── SİYAHI ───────────────────────────── */
.askel-list[b-6fuug3mfog] {
    display: flex;
    flex-direction: column;
}

.askel-listrow[b-6fuug3mfog] {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .7rem .25rem;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.askel-listrow__text[b-6fuug3mfog] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

/* ───────────────────────────── KARTLAR ───────────────────────────── */
.askel-cards[b-6fuug3mfog] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: 1rem;
}

.askel[b-6fuug3mfog]  .askel-card {
    border-radius: 16px;
}

/* ───────────────────────────── FORMA ───────────────────────────── */
.askel-form[b-6fuug3mfog] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: 1rem;
}

.askel-field[b-6fuug3mfog] {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.askel[b-6fuug3mfog]  .askel-input {
    border-radius: 8px;
}

/* ───────────────────────────── DETAL ───────────────────────────── */
.askel-detail[b-6fuug3mfog] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

/* ─────────────────────────── YAN MENYU ───────────────────────────
   Sətir hündürlüyü (40px) real `MudNavLink`-in hündürlüyünə yaxındır:
   menyu gələndə panel yerini dəyişmir. */
.askel-nav[b-6fuug3mfog] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 12px;
}

.askel-navrow[b-6fuug3mfog] {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 40px;
}

.askel-nav[b-6fuug3mfog]  .askel-navrow__label {
    flex: 1;
    min-width: 0;
}

/* Mini panel: yalnız ikon sütunu. */
.askel-nav--mini[b-6fuug3mfog] {
    padding: 8px 0;
    align-items: center;
}

    .askel-nav--mini[b-6fuug3mfog]  .askel-navrow__label {
        display: none;
    }
/* /Features/Shared/LoadingBar.razor.rz.scp.css */
/* === LoadingBar.razor.css ===
   Xətt konteynerin tam eninə yayılır və yuxarı kənara yapışır.
   Hündürlük qəsdən kiçikdir (3px) — göstərici məzmunu itələməməli,
   yalnız "işləyir" siqnalı verməlidir. */

.asis-loading-wrap[b-js7abunxeo] {
    width: 100%;
    /* Səhifə/dialoq paddinq-i xəttin kənarda qırılmasına səbəb olmasın:
       konteynerin paddinq-ini neytrallaşdırıb tam enə çıxırıq. */
    margin-left: calc(-1 * var(--asis-loading-bleed, 0px));
    margin-right: calc(-1 * var(--asis-loading-bleed, 0px));
    margin-bottom: 4px;
}

/* MudProgressLinear kök elementi — nazik və küncsüz */
[b-js7abunxeo] .asis-loading-bar {
    height: 3px !important;
    border-radius: 0 !important;
}

.asis-loading-text[b-js7abunxeo] {
    display: block;
    text-align: center;
    padding-top: 6px;
    letter-spacing: .2px;
}

/* Hərəkətə həssas istifadəçilərdə MudBlazor onsuz da animasiyanı azaldır;
   burada əlavə olaraq xətti sabit dolu göstəririk ki, "işləyir" siqnalı itməsin. */
@media (prefers-reduced-motion: reduce) {
    [b-js7abunxeo] .asis-loading-bar {
        opacity: .85;
    }
}
/* /Features/Shared/Numberpad/NumberField.razor.rz.scp.css */
/* === NumberField.razor.css ===
   Panel sahənin ALTINDA üzür (`absolute`) — düzümü sıçratmır, dialoqu
   itələmir. Kök `<div>` bizimdir, ona görə burada `::deep` yalnız uşaq
   komponentə (NumberPad → MudPaper) çatmaq üçün lazımdır. */

.numfield[b-orb918e7sv] {
    position: relative;
    width: 100%;
}

.numfield-pad[b-orb918e7sv] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 1200;
    /* Sahə dar ola bilər (cədvəl xanası) — panel öz minimum enini saxlayır
       və lazım gələndə sahədən geniş olur. */
    min-width: 15rem;
}

.numfield-pad[b-orb918e7sv]  .numpad {
    padding: .75rem;
    border-radius: 14px;
}

/* Ekranın sağ kənarına yaxın sahədə panel kənara çıxmasın. */
@media (max-width: 480px) {
    .numfield-pad[b-orb918e7sv] {
        min-width: 0;
        right: 0;
    }
}
/* /Features/Shared/Numberpad/NumberPad.razor.rz.scp.css */
/* === NumberPad.razor.css ===
   🔴 CSS izolyasiyası: Mud komponentlərinə verilən siniflər `::deep` tələb edir
      (`b-xxxxx` atributu onlara düşmür). Kök element `<MudPaper class="numpad">`
      olduğu üçün onun ÖZ ölçüsü çağıran sahənin CSS-indən gəlir —
      burada yalnız DAXİLİ düzülüş var.

   Ölçülər TOXUNMA üçün seçilib: düymələr 56px-dən kiçik deyil (Material
   Design minimumu 48px; əlcəklə işləyən barmaq üçün artırılıb). */

.numpad-preview[b-1duuvbuydm] {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: .375rem;
    padding: .25rem .625rem .625rem;
    border-bottom: 1px solid var(--mud-palette-divider);
    margin-bottom: .625rem;
}

.numpad-preview__value[b-1duuvbuydm] {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1.1;
    color: var(--mud-palette-text-primary);
    /* Uzun nömrə paneli genişləndirməsin — soldan kəsilir, son rəqəmlər
       görünür (yazılan sonuncu rəqəm ən vacibidir). */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    direction: rtl;
    unicode-bidi: plaintext;
}

.numpad-preview__caption[b-1duuvbuydm] {
    font-size: .75rem;
    color: var(--mud-palette-text-secondary);
    flex-shrink: 0;
}

.numpad-quick[b-1duuvbuydm] {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    margin-bottom: .625rem;
}

.numpad-grid[b-1duuvbuydm] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .375rem;
}

.numpad-grid[b-1duuvbuydm]  .numpad-key {
    min-height: 3.5rem; /* əlcəkli barmaq üçün */
    font-size: 1.25rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Boş xana — «0» düyməsinin yeri hər iki rejimdə eyni qalsın deyə. */
.numpad-grid .numpad-key--empty[b-1duuvbuydm] {
    min-height: 3.5rem;
}

.numpad-actions[b-1duuvbuydm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    margin-top: .625rem;
}
/* /Features/Shared/Phone/PhoneField.razor.rz.scp.css */
/* === PhoneField.razor.css ===
   🔴 CSS IZOLYASIYASI QAYDASI (bu layihədə 18 dəfə səhv edilib):
      Blazor `b-xxxxx` atributunu YALNIZ bu komponentin ÖZ HTML elementlərinə
      qoyur. `MudSelect`, `MudTextField` kimi UŞAQ KOMPONENTLƏRƏ QOYMUR —
      ona görə onlara verilən sinif adı adi selektorla TUTULMUR.

      Ona görə aşağıda `.asis-phone-field` (bizim `<div>`) selektor kökü kimi
      istifadə olunur və uşaqlara `::deep` ilə çatılır.

      Bunu pozsanız qayda brauzerdə SƏSSİZCƏ işləməyəcək və
      `Mud_komponentine_verilen_scoped_sinif_deep_ile_yazilmalidir` testi qıracaq. */

.asis-phone-field[b-vtrd97r3zz] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    /* Dar sütunda (məs. `MudItem sm="2"`) avtomatik alt-alta düşsün.
       Media query yetərli deyil — problem ekranın deyil, KONTEYNERİN enidir. */
    flex-wrap: wrap;
}

/* Ölkə seçimi dar və sabit — nömrə sahəsi qalan yeri tutur.
   Sabit en seçilib ki, ölkə dəyişəndə sahələr yerindən tərpənməsin. */
.asis-phone-field[b-vtrd97r3zz]  .asis-phone-country {
    flex: 0 0 8.5rem;
    min-width: 8.5rem;
}

/* 🔴 25.09.2026 — FLEX ELEMENTİ `.asis-phone-country` DEYİL.
   MudBlazor 9-da `MudSelect` kökündə ƏLAVƏ sarğı var (`div.mud-select`);
   `Class` isə onun İÇİNDƏKİ `mud-input-control`-a düşür. Yuxarıdakı qayda
   flex elementinə çatmırdı: brauzerdə ölçüldü — sarğı `flex: 1 1 auto`
   alırdı və 335 px-lik xanada ölkə seçicisi bütün eni tutub nömrəni ALT
   SƏTRƏ itələyirdi (yeni hesab dialoqu). Sabit en sarğıya verilir. */
.asis-phone-field[b-vtrd97r3zz]  > .mud-select {
    flex: 0 0 8.5rem;
    min-width: 8.5rem;
    max-width: 8.5rem;
}

/* 26.09.2026 — etiketsiz ölkə seçicisi (`ShowLabels=false`) etiketli nömrə sahəsi
   ilə EYNİ XƏTDƏ. MudBlazor etiketli outlined sahəyə `margin-top: 8px` (normal
   ölçüdə 16px), etiketsizə 4px verir — seçici 4 px yuxarıda dururdu (yeni hesab
   dialoqunda ölçüldü, 8 ekranda eyni idi). Dəyərlər MudBlazor-un öz
   `.mud-input-outlined-with-label` qaydasından götürülüb. */
.asis-phone-field--align[b-vtrd97r3zz]  .asis-phone-country.mud-input-control {
    margin-top: 8px;
    margin-bottom: 4px;
}

.asis-phone-field--align[b-vtrd97r3zz]  .asis-phone-country.mud-input-control.mud-input-control-margin-normal {
    margin-top: 16px;
    margin-bottom: 8px;
}

/* Nömrə sahəsi + onun altında açılan rəqəm paneli üçün sarğı.
   `position: relative` panel üçündür — o, `absolute` olaraq bunun altında
   üzür və dialoqu itələmir (bax `PricepadField` ilə eyni yanaşma).

   `min-width` qəsdən verilir: bundan darlaşacaqsa sahə sıxılmır, ALT SƏTRƏ keçir.
   Sıxılmış nömrə sahəsində "50 123 45 67" görünmür və resepsiyonist səhv oxuyur. */
.asis-phone-number-wrap[b-vtrd97r3zz] {
    position: relative;
    flex: 1 1 11rem;
    min-width: 11rem;
}

.asis-phone-field[b-vtrd97r3zz]  .asis-phone-number {
    width: 100%;
}

.asis-phone-pad[b-vtrd97r3zz] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 1200;
    min-width: 15rem;
}

.asis-phone-pad[b-vtrd97r3zz]  .numpad {
    padding: .75rem;
    border-radius: 14px;
}

/* Operator kodu düymələri — dar və çox olduğuna görə sıx sətirdə. */
.asis-phone-field[b-vtrd97r3zz]  .asis-phone-quick-btn {
    flex: 1 1 2.75rem;
    min-width: 2.75rem;
    min-height: 2.25rem;
    padding: 0 .35rem;
    font-variant-numeric: tabular-nums;
}

/* Nömrə rəqəmləri: eyni enli şrift oxunuşu asanlaşdırır və
   qruplar (50 123 45 67) həmişə eyni yerdə görünür. */
.asis-phone-field[b-vtrd97r3zz]  .asis-phone-number input {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

/* Dar ekranda alt-alta düşsün — yan-yana sıxılsa nömrə oxunmur. */
@media (max-width: 480px) {
    .asis-phone-field[b-vtrd97r3zz] {
        flex-wrap: wrap;
    }

    .asis-phone-field[b-vtrd97r3zz]  .asis-phone-country {
        flex: 1 1 100%;
    }

    /* Sarğı da tam enə açılır (yuxarıdakı 25.09 qeydinə bax). */
    .asis-phone-field[b-vtrd97r3zz]  > .mud-select {
        flex: 1 1 100%;
        max-width: none;
    }
}
/* /Features/Shared/Pricepad/PricepadField.razor.rz.scp.css */
/* === PricepadField.razor.css ===
   🔴 CSS izolyasiyası: Mud komponentlərinə verilən siniflər `::deep` tələb edir
      (`b-xxxxx` atributu onlara düşmür). Kök `<div class="pricepad-field">`
      bizimdir — bütün Mud selektorları oradan `::deep` ilə yazılıb.

   ⚠️ Panelin DAXİLİ düzülüşü artıq burada deyil — `NumberPad.razor.css`-dədir.
      Burada yalnız panelin SƏHİFƏDƏ HARADA duracağı təyin olunur. */

.pricepad-field[b-z6u9kbpqsu] {
    position: relative;
}

/* Panel sahənin ALTINDA üzür — dialoqu itələmir, düzümü sıçratmır.
   Sarğı bizim `<div>`-dir, ona görə `::deep` lazım deyil. */
.pricepad-pad[b-z6u9kbpqsu] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 1200;
    min-width: 17rem;
}

/* `NumberPad`-ın kök `MudPaper`-i uşaq komponentin içindədir → `::deep`. */
.pricepad-pad[b-z6u9kbpqsu]  .numpad {
    padding: .75rem;
    border-radius: 14px;
}

.pricepad-field[b-z6u9kbpqsu]  .pricepad-quick-btn {
    flex: 1 1 3.5rem;
    min-width: 3.5rem;
    min-height: 2.25rem;
    font-variant-numeric: tabular-nums;
}

/* Dar ekranda panel tam eni tutsun. */
@media (max-width: 420px) {
    .pricepad-pad[b-z6u9kbpqsu] {
        min-width: 0;
    }
}
/* /Layout/LoginLayout/LoginLayout.razor.rz.scp.css */
/* /Layout/MainLayout.razor.rz.scp.css */
/* === MainLayout.razor.css (scoped: footer, navbar-brand-logo, hover-effect) === */

/* ─── İNCƏ FOOTER ─── */
.app-footer[b-k405y4c15d] {
    border-top: 1px solid var(--mud-palette-lines-default);
    background: transparent;
    flex-shrink: 0;
    user-select: none;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.app-footer:hover[b-k405y4c15d] {
    opacity: 1;
}

/* 🔴 `.hover-effect` BURADAN SİLİNDİ (18.09.2026).
   Scoped CSS yalnız BU faylın render etdiyi elementlərə düşür — yəni qayda
   tema/tam ekran/çıxış düymələrini tuturdu, komponentdən gələnləri
   (axtarış · dil · bildiriş · «+») YOX. Nəticədə eyni zolaqda iki fərqli
   hover vardı. Tək nüsxə indi `wwwroot/css/app.css`-dədir. */

/* Navbar loqosu */
.navbar-brand-logo[b-k405y4c15d] {
    height: 38px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.navbar-brand-logo:hover[b-k405y4c15d] {
    transform: scale(1.06);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

/* Drawer scroll gizlətmə — yalnız nav-top öz daxilində scroll edə bilər */
.no-scroll-drawer .mud-drawer-content[b-k405y4c15d] {
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    display: flex;
    flex-direction: column;
    height: 100%;
}
/* Sağ tərəf: Navbar-dan aşağı, footer daxil hərəkət edən sahə */
.main-content-area[b-k405y4c15d] {
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-y: auto !important; /* Sağda scrollbar BURADA işləyəcək */
    overflow-x: hidden;
}

.main-container-area[b-k405y4c15d] {
    flex: 1 1 auto;
}
/* /Layout/NavMenu.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════════
   YAN PANELİN MENYUSU

   🔴 27.09.2026 — BİR PRİNSİP, BÜTÜN MENYULAR (sahib: «dönmədən açılıb-
      bağlanma prinsipini bütün menyulara tətbiq edək, müştərinin menyusunda
      da menyu/alt menyu admindəki kimi olsun, yenə donmasın»).

      1) AÇIQ/DAR VƏZİYYƏT MudDrawer-in ÖZ SİNİFLƏRİNDƏNDİR
         (`.mud-drawer--open` / `.mud-drawer--closed`). Komponentin parametri
         yoxdur — panel düyməsi menyunu yenidən ÇƏKMİR (NavMenu.razor başlığı).
         Scoped CSS atributu yalnız ən sağdakı hissəyə qoyur, ona görə
         `.mud-drawer--open .nav-container` işləyir.

      2) ŞAQULİ HƏNDƏSƏ İKİ VƏZİYYƏTDƏ EYNİDİR: sətir hündürlüyü, şrift,
         etiketin ENİ (→ sətir bölgüsü). Yalnız üfüqi olan (girinti, ikon
         ölçüsü) və görünmə dəyişir — o da panelin öz eni ilə EYNİ vaxtda və
         əyri ilə (MudBlazor: `width 225ms cubic-bezier(0, 0, .2, 1)`).
         Etiket panelin ANLIQ enindən asılı olsaydı hər kadrda yenidən
         bölünərdi: 27.09 ölçüsündə platforma menyusunda «Dəstək» 8 addımda
         75 px sürüşürdü, bağlayanda bəndlər bir kadrda 30–75 px tullanırdı.

      Qoruma: `SidebarToggleStabilityTests`. Ölçü: headless Chrome, sahibin
      ekranı 1280×632 · 150%, hər kadrda getBoundingClientRect.

   ⚠️ MudBlazor 9.7-də qrup başlığı `.mud-nav-group > .mud-nav-link`-dir
      (`<button>`). `.mud-nav-group-title` adlı sinif YOXDUR — köhnə
      qaydalar ona yazılmışdı və heç vaxt tətbiq olunmurdu.
   ══════════════════════════════════════════════════════════════════════════ */

.nav-container[b-eaczip9ntw] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    --nav-anim: 225ms cubic-bezier(0, 0, 0.2, 1);
    /* MainLayout: `MudDrawer Width="220px"` — dəyişsə bu da dəyişməlidir (test tutur). */
    --nav-drawer-w: 220px;
}

.nav-top[b-eaczip9ntw] {
    flex: 1 1 0;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    /* Bütün brauzerlərdə scrollbar-ı tam gizlədir */
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

    .nav-top[b-eaczip9ntw]::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        background: transparent !important;
    }

/* Ayırıcı xətlə hesab sətri arasında boşluq QALMAMALIDIR — menyunun
   qalan hissəsi sıx, bu isə boş görünürdü. Yuxarıda 2px `.um-trigger`
   kənarından gəlir, aşağıda 4px nəfəs. */
.nav-bottom[b-eaczip9ntw] {
    flex-shrink: 0;
    padding: 0 0 4px;
}

/* MudNavGroup açıldıqda alt menyuların sığması üçün */
[b-eaczip9ntw] .mud-nav-group {
    flex-shrink: 0;
}

/* ── Bütün sətirlərin SaaS tərzi görünüşü (üst səviyyə, qrup başlığı, hesab sətri) ── */
[b-eaczip9ntw] .mud-nav-link {
    border-radius: 10px !important;
    margin: 2px 8px !important;
    padding: 0 12px !important;
    min-height: 44px !important;
    display: flex;
    align-items: center;
    transition: background-color 0.2s ease, color 0.2s ease !important;
}

    /* Hover effekti */
    [b-eaczip9ntw] .mud-nav-link:hover {
        background-color: rgba(var(--mud-palette-primary-rgb), 0.10) !important;
    }

    /* Seçili (Aktiv) olan menyunun dizaynı */
    [b-eaczip9ntw] .mud-nav-link.active {
        background-color: rgba(var(--mud-palette-primary-rgb), 0.18) !important;
        color: var(--mud-palette-primary) !important;
        font-weight: 700;
    }

        [b-eaczip9ntw] .mud-nav-link.active .mud-nav-link-icon {
            color: var(--mud-palette-primary) !important;
        }

/* Tooltip-in menyunu sıxışdırmasının qarşısını alır */
[b-eaczip9ntw] .mud-tooltip-root {
    display: block;
    width: 100%;
}

/* İkon və mətn arasındakı məsafə */
[b-eaczip9ntw] .mud-nav-link-icon {
    margin-right: 14px !important;
    transition: color 0.2s ease !important;
}

/* ── ETİKET: eni panelin ANLIQ enindən asılı deyil ──
   Açıq paneldəki enə sabitlənib (220 px panel, ölçüldü):
     panel 220 − kənar 1 − link 8+8 − padding 12+12 − ikon 24 − 14 − mətn 12 = 129
   Dar paneldə etiket 64 px-lik panelin kənarında kəsilir və SOLUR — əvvəl
   «…» hər kadrda yeni yerdə kəsilirdi. */
.nav-container[b-eaczip9ntw]  .mud-nav-link-text {
    flex: 0 0 auto;
    width: calc(var(--nav-drawer-w) - 91px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    transition: opacity var(--nav-anim);
}

.mud-drawer--open .nav-container[b-eaczip9ntw]  .mud-nav-link-text {
    opacity: 1;
}

/* Qrup başlığında sağda ox var (24 px): etiket 121 px (ölçüldü). */
.nav-container[b-eaczip9ntw]  .mud-nav-group > .mud-nav-link .mud-nav-link-text {
    width: calc(var(--nav-drawer-w) - 99px);
}

/* Ox etiketlə birlikdə solur. MudBlazor-un fırlanma keçidi saxlanılır. */
.nav-container[b-eaczip9ntw]  .mud-nav-link-expand-icon {
    opacity: 0;
    transition: transform .3s cubic-bezier(0.25, 0.8, 0.5, 1), opacity var(--nav-anim);
}

.mud-drawer--open .nav-container[b-eaczip9ntw]  .mud-nav-link-expand-icon {
    opacity: 1;
}

/* ── ALT BƏNDLƏR: nazik şaquli xətt iyerarxiyanı göstərir (Linear / Vercel
   tərzi), sətirlər bir az sıxdır (34 px) — uzun qrup açıq ikən qalan
   qruplar da 632 px-lik ekrana sığır (38 px-də 25 px daşırdı, ölçüldü).

   🔴 ETİKET ENİ AZALMAMALIDIR: alt bəndin etiketi 131.6 px-dir:
        panel 220 − kənar 1 − xətt 24+1 − link 2+6 − padding 8+12
        − ikon 1.15rem (18.4) − 6 − mətn 10  =  131.6
   Sığmayan ad (məs. «Klinika silmə müraciətləri») «…» ilə KƏSİLMİR,
   ikinci sətrə keçir — kəsik ad hansı ekran olduğunu demir.

   Dar panel (64 px): girinti yoxdur, ikon 24 px və 20 px-dədir (üst
   səviyyə ikonları ilə bir sütun, mərkəzdə): xətt 1 + link 7 + padding 12 = 20. */
.nav-container[b-eaczip9ntw]  .mud-nav-group .mud-navmenu {
    margin-left: 0;
    padding-left: 0;
    border-left: 1px solid transparent;
    transition: margin-left var(--nav-anim), border-color var(--nav-anim);
}

.mud-drawer--open .nav-container[b-eaczip9ntw]  .mud-nav-group .mud-navmenu {
    margin-left: 24px;
    border-left-color: var(--mud-palette-lines-default);
}

/* ŞAQULİ ölçülər hər iki vəziyyətdə EYNİDİR: min-height, üst/alt boşluq,
   şrift. Ümumi qaydanın `transition`-u `!important`-dır — burada da. */
.nav-container[b-eaczip9ntw]  .mud-nav-group .mud-navmenu .mud-nav-link {
    min-height: 34px !important;
    margin: 1px 8px 1px 7px !important;
    padding-left: 12px !important;
    font-size: .875rem;
    transition: margin var(--nav-anim), padding var(--nav-anim),
                background-color .2s ease, color .2s ease !important;
}

.mud-drawer--open .nav-container[b-eaczip9ntw]  .mud-nav-group .mud-navmenu .mud-nav-link {
    margin: 1px 6px 1px 2px !important;
    padding-left: 8px !important;
}

.nav-container[b-eaczip9ntw]  .mud-nav-group .mud-navmenu .mud-nav-link-icon {
    font-size: 1.5rem;
    margin-right: 14px !important;
    transition: font-size var(--nav-anim), margin var(--nav-anim), color .2s ease !important;
}

.mud-drawer--open .nav-container[b-eaczip9ntw]  .mud-nav-group .mud-navmenu .mud-nav-link-icon {
    font-size: 1.15rem;
    margin-right: 6px !important;
}

.nav-container[b-eaczip9ntw]  .mud-nav-group .mud-navmenu .mud-nav-link-text {
    width: calc(var(--nav-drawer-w) - 70px - 1.15rem);
    margin-left: 10px;
    white-space: normal;
    line-height: 1.3;
    overflow: visible;
    text-overflow: clip;
}

/* 056 — paketə görə kilidli menyu sətri.
   Gizlədilmir, SÖNÜK göstərilir: görünməyən funksiya satıla bilmir.
   Klik açıqdır — istifadəçi ekrana girir və orada kilid + qiymət görür. */
[b-eaczip9ntw] .asd-menu-locked {
    opacity: .55;
}

/* Yüklənmə skeleti dar paneldə yalnız ikon sütunudur (əvvəl `Compact`
   parametri idi — o da menyunu panel vəziyyətinə bağlayırdı). */
.mud-drawer--closed .nav-container[b-eaczip9ntw]  .askel-nav {
    padding: 8px 0;
    align-items: center;
}

.mud-drawer--closed .nav-container[b-eaczip9ntw]  .askel-navrow__label {
    display: none;
}
/* /Layout/UserMenu.razor.rz.scp.css */
/* ═══════ Yan panelin altındakı hesab seçicisi ═══════

   ⚠️ BU FAYL YALNIZ QABI ÖLÇÜR.
   Sətirlərin özü MudList / MudListItem-dir: düzülmə, hündürlük, hover və
   ripple komponentin öz CSS-indən gəlir. Əvvəl sətirləri adi `<button>`
   kimi yazmışdıq — həm "donmuş" görünürdü, həm də düzülmə pozulurdu.      */

/* `position: relative` MudPopover-in bağlanma nöqtəsidir: popover
   məzmunu MudPopoverProvider-də render olunsa da, mövqe bu elementin
   yerinə görə hesablanır. */
.um-root[b-2yr5w12ne8] {
    position: relative;
    display: block;
    width: 100%;
}

/* ─── Açılan kart ───
   Popover DOM-un başqa yerində render olunur, ona görə `::deep` ona
   ÇATMIR — ata elementdə scope atributu olmur. Bizim markup-dakı
   elementlər isə atributu birbaşa daşıyır və qaydalar işləyir. */
.um-panel[b-2yr5w12ne8] {
    width: 248px;
    padding: 2px 0 4px;
}

/* MudList-in defolt şaquli boşluğu kartı uzadırdı. */
[b-2yr5w12ne8] .um-list {
    padding-top: 2px;
    padding-bottom: 2px;
}

[b-2yr5w12ne8] .um-accent .mud-list-item-text {
    font-weight: 700;
    color: var(--mud-palette-primary);
}

[b-2yr5w12ne8] .um-danger .mud-list-item-text {
    font-weight: 600;
    color: var(--mud-palette-error);
}

/* ─── Kimlik başlığı ─── */
.um-head[b-2yr5w12ne8] {
    display: flex;
    flex-direction: column;
    padding: 10px 16px 8px;
    line-height: 1.32;
}

/* Ad + paket nişanı BİR sətirdə: nişan adın sağındakı boş yeri doldurur,
   panel isə uzanmır. Uzun ad nişanı sıxışdırmır — nişan `flex-shrink: 0`. */
.um-head-top[b-2yr5w12ne8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}

.um-head-name[b-2yr5w12ne8] {
    font-size: .8rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* ⚠️ `min-width: 0` olmadan flex uşağı öz min-content enini tələb edir
       və uzun ad `text-overflow` işləməmiş nişanı sətirdən çıxarır. */
    min-width: 0;
    flex: 0 1 auto;
}

/* MudBlazor komponentinin kök elementidir → `::deep` MƏCBURİDİR
   (scoped CSS uşaq komponentlərin markup-ına atribut qoymur). */
.um-head-top[b-2yr5w12ne8]  .um-head-plan {
    flex: 0 0 auto;
}

/* E-poçt QƏSDƏN incə: "düzgün hesabdayammı?" sualına cavabdır,
   oxunacaq mətn deyil. */
.um-head-mail[b-2yr5w12ne8] {
    font-size: .68rem;
    font-weight: 400;
    opacity: .62;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.um-head-role[b-2yr5w12ne8] {
    margin-top: 2px;
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .3px;
    text-transform: uppercase;
    opacity: .45;
}

.um-section-label[b-2yr5w12ne8] {
    padding: 8px 16px 3px;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    opacity: .45;
}

/* ─── Rejim və dil sıraları ───
   Düymələr sətri TAM DOLDURUR. Əvvəl sabit enli idilər və sağda böyük
   boş sahə qalırdı — kart yarımçıq görünürdü. */
.um-chips[b-2yr5w12ne8] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 12px 6px;
}

/* MudTooltip öz sarğı div-ini qoyur; genişlənmə məhz ona verilməlidir,
   əks halda içindəki düymə sabit enli qalır. */
[b-2yr5w12ne8] .um-chip-root {
    flex: 1 1 0;
    min-width: 0;
}

[b-2yr5w12ne8] .um-chip {
    width: 100%;
    min-width: 0;
    height: 28px;
    border-radius: 8px;
}

/* Dil düyməsində mətn qısadır (AZ, TR…) — daxili boşluğu sıxırıq ki,
   beşi də 248px-lik karta rahat sığsın. */
[b-2yr5w12ne8] .um-chip-lang {
    padding: 0 2px;
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .2px;
}
/* /Pages/Account/AccountPage.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════════
   HESABIM — KART DİLİ (18.09.2026)
   ══════════════════════════════════════════════════════════════════════════

   Sistem sahibi: «hər məlumat ayrı bir yerdə qəribə şəkildə görünür».

   ÖLÇÜLƏN SƏBƏB: hər blok öz boşluğunu yazırdı — `pa-8`, `mb-6`, `mb-8`,
   `Spacing="8"`, `border-2`. Nəticədə eyni ekranda dörd fərqli daxili
   boşluq və iki fərqli sərhəd qalınlığı vardı.

   YENİ QAYDA — TƏK KART: `.acc-card` (1 px sərhəd, 16 px künc, 1.25 rem
   daxili boşluq). Bütün bloklar ondan törəyir; fərq yalnız FONDADIR
   (`--muted` = ikinci dərəcəli məzmun).

   ⚠️ Fayl SCOPED-dir → adi HTML elementləri üçündür. MudBlazor
      komponentlərinə verilən ölçü sinifləri `::deep` ilə yazılır.           */

/* ── Ortaq kart ──────────────────────────────────────────────────────── */
/* 🔴 19.09.2026 — `.acc-card`, `.acc-card--muted`, `.acc-card__head`,
   `.acc-card__title` və `.acc-card__hint` BU FAYLDAN ÇIXARILDI və
   `wwwroot/css/app.css`-ə köçdü.

   SƏBƏB ÖLÇÜLDÜ: «Profil» tabının bütün məzmunu ayrı komponentdədir
   (`MyProfilePanel`), scoped CSS isə komponent sərhədini KEÇMİR — yəni
   buradakı qayda ora ÇATMIRDI. Nəticə: eyni ekranın üç tabından ikisi yeni
   kart dilində, biri köhnə `MudPaper pa-6 border-2` görkəmində idi. Sistem
   sahibinin iradı məhz bu idi: «dizaynda heçnəyi dəyişməmisən».

   ⚠️ İkinci nüsxə YAZILMIR (CLAUDE.md «paralel yol»): qayda tək yerdədir,
      hər iki komponent onu oradan alır. */

/* ── Şifrə tabı: forma + tələblər yan-yana ───────────────────────────── */
/* 🔴 Tələb siyahısı formanın YANINDADIR: istifadəçi yazarkən onay
   işarələrinin dolmasını görməlidir. Altında olsaydı sürüşdürmə lazım
   gələrdi və onlar heç vaxt eyni anda görünməzdi. */
.acc-grid[b-i2wqqyjimk] {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr);
    gap: 1rem;
    align-items: start;
}

@media (max-width: 960px) {
    .acc-grid[b-i2wqqyjimk] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.acc-fields[b-i2wqqyjimk] {
    display: flex;
    flex-direction: column;
    gap: .9rem;
}

.acc-actions[b-i2wqqyjimk] {
    display: flex;
    justify-content: flex-start;
    margin-top: 1.1rem;
}

/* ── Güc göstəricisi ─────────────────────────────────────────────────── */
.acc-strength[b-i2wqqyjimk] {
    margin-bottom: 1rem;
}

.acc-strength__track[b-i2wqqyjimk] {
    height: 6px;
    border-radius: 999px;
    background: var(--mud-palette-lines-default);
    overflow: hidden;
}

.acc-strength__fill[b-i2wqqyjimk] {
    height: 100%;
    border-radius: 999px;
    transition: width .2s ease, background-color .2s ease;
}

.acc-strength__fill--weak[b-i2wqqyjimk]   { background: var(--mud-palette-error); }
.acc-strength__fill--fair[b-i2wqqyjimk]   { background: var(--mud-palette-warning); }
.acc-strength__fill--strong[b-i2wqqyjimk] { background: var(--mud-palette-success); }

/* ⚠️ RƏNG TƏK SİQNAL DEYİL — vəziyyət mətnlə də yazılır. */
.acc-strength__label[b-i2wqqyjimk] {
    margin-top: .3rem;
    font-size: .76rem;
    font-weight: 700;
}

.acc-strength__label--weak[b-i2wqqyjimk]   { color: var(--mud-palette-error); }
.acc-strength__label--fair[b-i2wqqyjimk]   { color: var(--mud-palette-warning); }
.acc-strength__label--strong[b-i2wqqyjimk] { color: var(--mud-palette-success); }

/* ── Tələb siyahısı ──────────────────────────────────────────────────── */
.acc-rules[b-i2wqqyjimk] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.acc-rules__item[b-i2wqqyjimk] {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .84rem;
    color: var(--mud-palette-text-secondary);
    opacity: .75;
    transition: opacity .15s ease, color .15s ease;
}

.acc-rules__item.is-ok[b-i2wqqyjimk] {
    opacity: 1;
    font-weight: 600;
    color: var(--mud-palette-success);
}

/* ── 2FA ─────────────────────────────────────────────────────────────── */
.acc-2fa-on[b-i2wqqyjimk] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .9rem;
    padding: 1rem;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--mud-palette-success) 40%, transparent);
    background: color-mix(in srgb, var(--mud-palette-success) 10%, transparent);
}

.acc-2fa-on__icon[b-i2wqqyjimk] {
    display: grid;
    place-items: center;
    color: var(--mud-palette-success);
}

.acc-2fa-on__text[b-i2wqqyjimk] {
    flex: 1 1 200px;
    min-width: 0;
}

.acc-2fa-on__title[b-i2wqqyjimk] {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.acc-2fa-on__method[b-i2wqqyjimk] {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.acc-2fa-lead[b-i2wqqyjimk] {
    margin: 0 0 1rem;
    font-size: .88rem;
    color: var(--mud-palette-text-secondary);
}

/* Üç metod — bərabər enli, sıxılanda alt-alta. */
.acc-methods[b-i2wqqyjimk] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: .75rem;
}

.acc-method[b-i2wqqyjimk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    padding: 1.1rem .9rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font: inherit;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}

.acc-method:hover[b-i2wqqyjimk] {
    border-color: color-mix(in srgb, var(--mud-palette-primary) 45%, transparent);
    transform: translateY(-1px);
}

/* 🔴 SEÇİM GÖRÜNÜR. Əvvəl kart `cursor:pointer` idi, kliklənəndə isə heç nə
   dəyişmirdi — istifadəçi hansını seçdiyini yalnız aşağıdakı formadan
   başa düşürdü. */
.acc-method.is-active[b-i2wqqyjimk] {
    border-color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
}

.acc-method__name[b-i2wqqyjimk] {
    font-size: .92rem;
    font-weight: 700;
}

.acc-method__hint[b-i2wqqyjimk] {
    font-size: .76rem;
    color: var(--mud-palette-text-secondary);
}

/* 🔴 E-POÇT və SMS YALNIZ-OXUDUR (SMS 23.09, e-poçt 28.09 — sahibin tələbi).
   Kart sönük görünür, lakin GÖRÜNÜR. 28.09-dan «tezliklə» nişanı YOXDUR
   (sahib: «tezliklə sözünü götür»): klik səbəbi yazır. HTML `disabled`
   işlədilmir — o, klik hadisəsini də öldürərdi. Hover effekti sönür —
   qurulmayan şey «qurula bilər» kimi yırğalanmamalıdır. */
.acc-method.is-locked[b-i2wqqyjimk] {
    cursor: not-allowed;
    opacity: .6;
    transform: none;
    border-style: dashed;
}

.acc-method.is-locked:hover[b-i2wqqyjimk] {
    border-color: var(--mud-palette-lines-default);
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .acc-method:hover[b-i2wqqyjimk] {
        transform: none;
    }
}

/* ── Qurulma bloku ───────────────────────────────────────────────────── */
/* ⚠️ 23.09.2026 — `--mud-palette-background-grey` DEYİL: MudBlazor 9.7-də o
   dəyişən YOXDUR və fon səssizcə şəffaf çıxırdı (düzgün ad `-gray`,
   `MudPaletteVariableTests`). */
.acc-setup[b-i2wqqyjimk] {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 14px;
    background: var(--mud-palette-background-gray);
    border: 1px solid var(--mud-palette-lines-default);
}

/* ══════════════════════════════════════════════════════════════════════
   TƏHLÜKƏSİZLİK MƏSLƏHƏTLƏRİ (23.09.2026)
   ══════════════════════════════════════════════════════════════════════
   Sistem sahibi: «tabın altındakı boşluqda təhlükəsizliklə bağlı
   bilgiləndirmə ver». Tab kartının altında AYRI kartdır — metod seçimi
   ilə qarışmır. Geniş ekranda üç sütun, darda bir. */
.acc-tips[b-i2wqqyjimk] {
    margin-top: 1rem;
}

/* `auto-fit` (auto-fill DEYİL): 1440 px-də beş kart BİR sırada bərabər
   enə yayılır. auto-fill boş sütun saxlayırdı və düzülüş «4 + 1» idi —
   tək qalan kart yarımçıq görünürdü (ekranda ölçüldü). */
.acc-tips__grid[b-i2wqqyjimk] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: .75rem;
}

.acc-tip[b-i2wqqyjimk] {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: .85rem .9rem;
    border-radius: 14px;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-background-gray);
}

/* İkon lövhəsi — ekranın qalan başlıq ikonları ilə eyni ton. */
.acc-tip__icon[b-i2wqqyjimk] {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    color: var(--mud-palette-primary);
}

.acc-tip__body[b-i2wqqyjimk] {
    min-width: 0;
}

.acc-tip__title[b-i2wqqyjimk] {
    font-size: .86rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.acc-tip__text[b-i2wqqyjimk] {
    margin: .2rem 0 0;
    font-size: .8rem;
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
}

.acc-qr[b-i2wqqyjimk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    margin: .75rem 0;
}

/* ⚠️ QR fonu HƏMİŞƏ AĞDIR — qaranlıq temada tünd fonda kod oxunmur.
   Bu, «sabit hex yazma» qaydasının qəsdən istisnasıdır: rəng dizayn deyil,
   oxunma şərtidir. */
.acc-qr__frame[b-i2wqqyjimk] {
    padding: 16px;
    border-radius: 12px;
    background: #fff;
}

.acc-qr__box[b-i2wqqyjimk] {
    width: 200px;
    height: 200px;
}

.acc-qr__manual[b-i2wqqyjimk] {
    font-size: .76rem;
    color: var(--mud-palette-text-secondary);
    text-align: center;
    overflow-wrap: anywhere;
}

.acc-code[b-i2wqqyjimk] {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    margin-top: .5rem;
}

[b-i2wqqyjimk] .acc-code__field {
    flex: 1 1 200px;
    max-width: 260px;
}

/* ── Bərpa kodları ───────────────────────────────────────────────────── */
.acc-recovery[b-i2wqqyjimk] {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--mud-palette-warning) 45%, transparent);
    background: color-mix(in srgb, var(--mud-palette-warning) 12%, transparent);
}

.acc-recovery__head[b-i2wqqyjimk] {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .82rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.acc-recovery__hint[b-i2wqqyjimk] {
    margin: .35rem 0 .75rem;
    font-size: .8rem;
    color: var(--mud-palette-text-secondary);
}

.acc-recovery__grid[b-i2wqqyjimk] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: .4rem;
}

/* Monospace MƏCBURİDİR: əl ilə köçürəndə «0/O» və «1/l» fərqi yalnız
   bu şriftdə görünür. */
.acc-recovery__code[b-i2wqqyjimk] {
    padding: .35rem .5rem;
    border-radius: 8px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: .84rem;
    letter-spacing: .06em;
    text-align: center;
    color: var(--mud-palette-text-primary);
}
/* /Pages/Account/AssistantsPage.razor.rz.scp.css */
/* === Pages/Account/AssistantsPage.razor.css ===
   ⚠️ Mud komponentlərinə verilən siniflər `::deep` tələb edir — scoped
      `b-xxxxx` atributu uşaq komponentin kök elementinə düşmür.
      (Bax RazorSourceLintTests → bu qaydanı test qoruyur.) */

/* Limit kartı — başlıq sətrinin sağında, sabit enli.
   `MudPaper`-ə verilir → `::deep` yoxdur, çünki valideyn adi HTML `<div>`
   deyil; ona görə ölçü inline yox, aşağıdakı qayda ilə verilir. */
[b-x9796nj5au] .asst-quota {
    min-width: 190px;
}

/* Bölgü sətri: «köməkçi: 0 · digər hesablar: 2».
   🔴 Bu sətir olmadan kart «2 / 2» deyirdi və altdakı cədvəl boş idi —
      istifadəçi onu proqram səhvi kimi oxuyurdu. Rəqəm doğru idi, İZAH yox idi.
   ⚠️ Valideyn `MudPaper` olduğu üçün burada da `::deep` lazımdır. */
[b-x9796nj5au] .asst-quota__split {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin-top: 6px;
    font-size: .72rem;
    color: var(--mud-palette-text-secondary);
}

/* ⚠️ #75 — `.asst-scope*` və `.asst-chip*` qaydaları SİLİNDİ: markup-dakı
   «nə görür / nə görmür» lövhəsi ilə birlikdə çıxdı (səbəb `.razor`
   faylındakı şərhdədir — 125-dən sonra siyahı yalan danışırdı). Ölü
   scoped qayda saxlamaq növbəti oxuyanı olmayan markup axtarmağa
   göndərir. */
/* /Pages/Admin/Contracts/ContractsPage.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════
   188 — Müqavilələr

   ⚠️ Mud komponentinə verilən sinif YALNIZ `::deep` ilə stil alır —
      izolyasiya atributu uşaq komponentə yazılmır (RazorSourceLintTests).
   ⚠️ Rənglər MudBlazor palet dəyişənlərindəndir — sabit hex qaranlıq
      rejimdə oxunmur. `--mud-palette-background-grey` YOXDUR (`-gray` var).
   ═══════════════════════════════════════════════════════════════════════ */

.ctr-root[b-qnlm8n799y] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ctr-root[b-qnlm8n799y]  .ctr-card {
    border-radius: 12px;
    background-color: var(--mud-palette-surface);
}

.ctr-root[b-qnlm8n799y]  .ctr-empty {
    background: transparent;
}

.ctr-card-head[b-qnlm8n799y] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

/* ── klinika seçicisi ── */
.ctr-tenant-item[b-qnlm8n799y] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
}

.ctr-tenant-name[b-qnlm8n799y] {
    font-weight: 600;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ctr-muted[b-qnlm8n799y] {
    color: var(--mud-palette-text-secondary);
    font-size: 12px;
}

.ctr-push[b-qnlm8n799y] {
    margin-left: auto;
    white-space: nowrap;
}

/* ── əksik məlumatlar: sol kənarda xəbərdarlıq zolağı ── */
.ctr-root[b-qnlm8n799y]  .ctr-missing {
    border-left: 4px solid var(--mud-palette-warning);
}

/* ── sahələr: masaüstündə iki sütun, mobildə bir ── */
.ctr-field-grid[b-qnlm8n799y] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 16px;
}

.ctr-field[b-qnlm8n799y] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ctr-field--wide[b-qnlm8n799y] {
    grid-column: 1 / -1;
}

.ctr-field-meta[b-qnlm8n799y] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 22px;
    margin: -2px 0 6px;
}

.ctr-tag[b-qnlm8n799y] {
    font-size: 11px;
    line-height: 18px;
    padding: 0 8px;
    border-radius: 999px;
    white-space: nowrap;
}

.ctr-tag--owner[b-qnlm8n799y] {
    color: var(--mud-palette-primary);
    background-color: rgba(var(--mud-palette-primary-rgb), 0.08);
}

.ctr-tag--required[b-qnlm8n799y] {
    color: var(--mud-palette-warning-darken);
    background-color: rgba(var(--mud-palette-warning-rgb), 0.12);
}

.ctr-root[b-qnlm8n799y]  .ctr-sections .mud-expand-panel {
    border-radius: 10px;
    margin-bottom: 8px;
}

/* ── sənəd kartı: uzun formada da görünür qalsın ── */
.ctr-sticky[b-qnlm8n799y] {
    position: sticky;
    top: 72px;
}

.ctr-root[b-qnlm8n799y]  .ctr-doc {
    border-top: 4px solid var(--mud-palette-primary);
}

.ctr-root[b-qnlm8n799y]  .ctr-modes .mud-radio {
    align-items: flex-start;
}

.ctr-root[b-qnlm8n799y]  .ctr-generate {
    min-height: 48px;
    justify-content: center;
}

/* ── 189: yeni nömrənin önizləməsi (sənəd kartı) ── */
.ctr-number[b-qnlm8n799y] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border-radius: 10px;
    background-color: rgba(var(--mud-palette-primary-rgb), 0.06);
}

.ctr-number-value[b-qnlm8n799y] {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--mud-palette-primary);
    overflow-wrap: anywhere;
}

/* ── 189: «Nömrələmə» kartı — kodun hissələri rəngli izah ilə ── */
.ctr-number-sample[b-qnlm8n799y] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 12px;
    font-size: 20px;
    font-weight: 700;
}

.ctr-number-dash[b-qnlm8n799y] {
    color: var(--mud-palette-text-secondary);
}

/* nümunədə tək hərf («M», «P») öz eni qədərdir — izah siyahısı sabit endə qalır */
.ctr-number-sample .ctr-seg[b-qnlm8n799y] {
    min-width: 0;
}

.ctr-seg[b-qnlm8n799y] {
    display: inline-block;
    min-width: 44px;
    padding: 2px 8px;
    border-radius: 8px;
    text-align: center;
    font-weight: 700;
    white-space: nowrap;
}

.ctr-seg--0[b-qnlm8n799y] {
    color: var(--mud-palette-primary);
    background-color: rgba(var(--mud-palette-primary-rgb), 0.12);
}

.ctr-seg--1[b-qnlm8n799y] {
    color: var(--mud-palette-info);
    background-color: rgba(var(--mud-palette-info-rgb), 0.12);
}

.ctr-seg--2[b-qnlm8n799y] {
    color: var(--mud-palette-warning-darken);
    background-color: rgba(var(--mud-palette-warning-rgb), 0.14);
}

.ctr-seg--3[b-qnlm8n799y] {
    color: var(--mud-palette-success-darken);
    background-color: rgba(var(--mud-palette-success-rgb), 0.12);
}

.ctr-number-parts[b-qnlm8n799y] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ctr-number-parts li[b-qnlm8n799y] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.ctr-number-parts .ctr-seg[b-qnlm8n799y] {
    font-size: 13px;
    min-width: 76px;
}

.ctr-history-row[b-qnlm8n799y] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.ctr-history-row:last-child[b-qnlm8n799y] {
    border-bottom: none;
}

.ctr-history-main[b-qnlm8n799y] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

@media (max-width: 1279.98px) {
    .ctr-sticky[b-qnlm8n799y] {
        position: static;
    }
}

@media (max-width: 599.98px) {
    .ctr-field-grid[b-qnlm8n799y] {
        grid-template-columns: minmax(0, 1fr);
    }

    .ctr-push[b-qnlm8n799y] {
        display: none;
    }
}
/* /Pages/Admin/CrmTransferPage.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════
   175 — Pasiyent bazası: idxal / ixrac

   ⚠️ Mud komponentinə verilən sinif YALNIZ `::deep` ilə stil alır —
      izolyasiya atributu uşaq komponentə yazılmır (RazorSourceLintTests).
      `::deep` işləsin deyə səhifə adi `div.ct-root` ilə bükülüb.
   ⚠️ Rənglər MudBlazor palet dəyişənlərindəndir — sabit hex qaranlıq
      rejimdə oxunmur. `--mud-palette-background-grey` YOXDUR (`-gray` var).
   ═══════════════════════════════════════════════════════════════════════ */

.ct-root[b-hc5bnrodnk] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ct-root[b-hc5bnrodnk]  .ct-card {
    border-radius: 12px;
    background-color: var(--mud-palette-surface);
}

.ct-root[b-hc5bnrodnk]  .ct-empty {
    background: transparent;
}

/* ── klinika seçicisi ── */
.ct-tenant-item[b-hc5bnrodnk] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
}

.ct-tenant-name[b-hc5bnrodnk] {
    font-weight: 600;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ct-muted[b-hc5bnrodnk] {
    color: var(--mud-palette-text-secondary);
    font-size: 12px;
}

.ct-push[b-hc5bnrodnk] {
    margin-left: auto;
    white-space: nowrap;
}

/* ── fayl sahəsi ── */
.ct-root[b-hc5bnrodnk]  .ct-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 120px;
    padding: 18px 12px;
    border-style: dashed;
    border-radius: 12px;
    text-align: center;
    cursor: pointer;
}

.ct-drop-title[b-hc5bnrodnk] {
    font-weight: 600;
    word-break: break-word;
}

/* ── saylar ── */
.ct-stats[b-hc5bnrodnk] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}

.ct-stat[b-hc5bnrodnk] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
}

.ct-stat b[b-hc5bnrodnk] {
    font-size: 20px;
    line-height: 1.2;
}

.ct-stat span[b-hc5bnrodnk] {
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
}

.ct-stat-success b[b-hc5bnrodnk] { color: var(--mud-palette-success); }
.ct-stat-info b[b-hc5bnrodnk] { color: var(--mud-palette-info); }
.ct-stat-warn b[b-hc5bnrodnk] { color: var(--mud-palette-warning); }

/* ── sütun xəritəsi ── */
.ct-map[b-hc5bnrodnk] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 8px 16px;
}

.ct-map-row[b-hc5bnrodnk] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.ct-map-field[b-hc5bnrodnk] {
    font-size: 13px;
    font-weight: 600;
}

.ct-required[b-hc5bnrodnk] {
    margin-left: 2px;
    color: var(--mud-palette-error);
}

/* ── cədvəllər ── */
.ct-value[b-hc5bnrodnk] {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 12px;
    word-break: break-word;
}

.ct-file[b-hc5bnrodnk] {
    display: inline-block;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

.ct-root[b-hc5bnrodnk]  .ct-issue-icon {
    vertical-align: middle;
}

.ct-root[b-hc5bnrodnk]  .ct-table .mud-table-cell {
    vertical-align: middle;
}

/* ── ixrac sütunları ── */
.ct-export-group[b-hc5bnrodnk] {
    padding: 10px 0;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.ct-export-group:first-of-type[b-hc5bnrodnk] {
    border-top: none;
}

.ct-export-group-head[b-hc5bnrodnk] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.ct-export-cols[b-hc5bnrodnk] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0 12px;
}

@media (max-width: 600px) {
    .ct-map[b-hc5bnrodnk] {
        grid-template-columns: 1fr;
    }

    .ct-stats[b-hc5bnrodnk] {
        grid-template-columns: repeat(2, 1fr);
    }

    .ct-export-cols[b-hc5bnrodnk] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Admin/Overview/PlatformOverviewPage.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════
   190 — «Platforma paneli»

   ⚠️ Kart və sətir UŞAQ komponentlərdir (OverviewCard / OverviewStat) və
      MudPaper / MudText Mud komponentləridir — izolyasiya atributu onlara
      yazılmır. Ona görə hər qayda `.pov-root ::deep …` ilə yazılıb
      (RazorSourceLintTests).
   ⚠️ Rənglər MudBlazor palet dəyişənlərindəndir — qaranlıq rejimdə də oxunur.
      `-rgb` dəyişənləri vergüllüdür: `rgba(var(--x-rgb), .1)` işləyir,
      `rgb(var(--x-rgb) / 10%)` İŞLƏMİR (23.09 ölçüsü).
   ═══════════════════════════════════════════════════════════════════════ */

.pov-root[b-2udp2en6tk] {
    min-width: 0;
}

.pov-root[b-2udp2en6tk]  .pov-stamp {
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* ── DİQQƏT ZOLAĞI ─────────────────────────────────────────────────────── */
.pov-root[b-2udp2en6tk]  .pov-attn {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    background-color: var(--mud-palette-surface);
    padding: 12px 16px;
    margin-bottom: 16px;
}

.pov-root[b-2udp2en6tk]  .pov-attn__ok {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--mud-palette-success);
    font-weight: 600;
}

.pov-root[b-2udp2en6tk]  .pov-attn__title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 8px;
}

.pov-root[b-2udp2en6tk]  .pov-attn__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 6px;
}

.pov-root[b-2udp2en6tk]  .pov-attn__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    min-width: 0;
}

.pov-root[b-2udp2en6tk]  .pov-attn__item--error {
    background-color: rgba(var(--mud-palette-error-rgb), 0.08);
}

.pov-root[b-2udp2en6tk]  .pov-attn__item--warning {
    background-color: rgba(var(--mud-palette-warning-rgb), 0.10);
}

.pov-root[b-2udp2en6tk]  .pov-attn__item--info {
    background-color: rgba(var(--mud-palette-info-rgb), 0.08);
}

.pov-root[b-2udp2en6tk]  .pov-attn__item--error .pov-attn__icon { color: var(--mud-palette-error); }
.pov-root[b-2udp2en6tk]  .pov-attn__item--warning .pov-attn__icon { color: var(--mud-palette-warning); }
.pov-root[b-2udp2en6tk]  .pov-attn__item--info .pov-attn__icon { color: var(--mud-palette-info); }

.pov-root[b-2udp2en6tk]  .pov-attn__icon {
    flex: 0 0 auto;
}

.pov-root[b-2udp2en6tk]  .pov-attn__text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.pov-root[b-2udp2en6tk]  .pov-attn__go {
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 600;
    color: var(--mud-palette-primary);
    text-decoration: none;
    white-space: nowrap;
}

.pov-root[b-2udp2en6tk]  .pov-attn__go:hover {
    text-decoration: underline;
}

/* ── ƏSAS RƏQƏMLƏR ─────────────────────────────────────────────────────── */
.pov-root[b-2udp2en6tk]  .pov-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.pov-root[b-2udp2en6tk]  .pov-kpi {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "icon label"
        "value value"
        "caption caption";
    align-items: center;
    column-gap: 10px;
    row-gap: 2px;
    padding: 12px 14px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    background-color: var(--mud-palette-surface);
    color: inherit;
    text-decoration: none;
    min-width: 0;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.pov-root[b-2udp2en6tk]  .pov-kpi:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.06);
}

.pov-root[b-2udp2en6tk]  .pov-kpi:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.pov-root[b-2udp2en6tk]  .pov-kpi--warn {
    border-color: var(--mud-palette-warning);
}

.pov-root[b-2udp2en6tk]  .pov-kpi__icon {
    grid-area: icon;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
}

.pov-root[b-2udp2en6tk]  .pov-kpi__icon--primary   { color: var(--mud-palette-primary);   background-color: rgba(var(--mud-palette-primary-rgb), 0.12); }
.pov-root[b-2udp2en6tk]  .pov-kpi__icon--success   { color: var(--mud-palette-success);   background-color: rgba(var(--mud-palette-success-rgb), 0.12); }
.pov-root[b-2udp2en6tk]  .pov-kpi__icon--warning   { color: var(--mud-palette-warning);   background-color: rgba(var(--mud-palette-warning-rgb), 0.14); }
.pov-root[b-2udp2en6tk]  .pov-kpi__icon--info      { color: var(--mud-palette-info);      background-color: rgba(var(--mud-palette-info-rgb), 0.12); }
.pov-root[b-2udp2en6tk]  .pov-kpi__icon--secondary { color: var(--mud-palette-secondary); background-color: rgba(var(--mud-palette-secondary-rgb), 0.12); }

.pov-root[b-2udp2en6tk]  .pov-kpi__value {
    grid-area: value;
    margin-top: 8px;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.4px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.pov-root[b-2udp2en6tk]  .pov-kpi__label {
    grid-area: label;
    min-width: 0;
    white-space: normal;
    line-height: 1.25;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.pov-root[b-2udp2en6tk]  .pov-kpi__caption {
    grid-area: caption;
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── KARTLAR ───────────────────────────────────────────────────────────── */
.pov-root[b-2udp2en6tk]  .pov-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
    align-items: start;
}

.pov-root[b-2udp2en6tk]  .povc {
    border-radius: 12px;
    background-color: var(--mud-palette-surface);
    padding: 14px 16px;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.pov-root[b-2udp2en6tk]  .povc-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    min-width: 0;
}

.pov-root[b-2udp2en6tk]  .povc-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 9px;
}

.pov-root[b-2udp2en6tk]  .povc-icon--primary   { color: var(--mud-palette-primary);   background-color: rgba(var(--mud-palette-primary-rgb), 0.12); }
.pov-root[b-2udp2en6tk]  .povc-icon--success   { color: var(--mud-palette-success);   background-color: rgba(var(--mud-palette-success-rgb), 0.12); }
.pov-root[b-2udp2en6tk]  .povc-icon--warning   { color: var(--mud-palette-warning);   background-color: rgba(var(--mud-palette-warning-rgb), 0.14); }
.pov-root[b-2udp2en6tk]  .povc-icon--error     { color: var(--mud-palette-error);     background-color: rgba(var(--mud-palette-error-rgb), 0.10); }
.pov-root[b-2udp2en6tk]  .povc-icon--info      { color: var(--mud-palette-info);      background-color: rgba(var(--mud-palette-info-rgb), 0.12); }
.pov-root[b-2udp2en6tk]  .povc-icon--secondary { color: var(--mud-palette-secondary); background-color: rgba(var(--mud-palette-secondary-rgb), 0.12); }

.pov-root[b-2udp2en6tk]  .povc-title {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.pov-root[b-2udp2en6tk]  .povc-link {
    flex: 0 0 auto;
    white-space: nowrap;
}

.pov-root[b-2udp2en6tk]  .povc-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pov-root[b-2udp2en6tk]  .povc-foot {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed var(--mud-palette-lines-default);
}

.pov-root[b-2udp2en6tk]  .pov-foot-note {
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
}

.pov-root[b-2udp2en6tk]  .pov-empty {
    font-size: 13px;
    color: var(--mud-palette-text-secondary);
    padding: 8px 0;
}

/* ── KARTIN SƏTRİ (OverviewStat) ──────────────────────────────────────── */
.pov-root[b-2udp2en6tk]  .povs {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    min-width: 0;
}

.pov-root[b-2udp2en6tk]  .povc-body > .povs:last-child,
.pov-root[b-2udp2en6tk]  .povc-body > .pov-row-link:last-child .povs {
    border-bottom: 0;
}

.pov-root[b-2udp2en6tk]  .povs-label {
    display: flex;
    flex-direction: column;
    min-width: 0;
    font-size: 13px;
    color: var(--mud-palette-text-primary);
}

.pov-root[b-2udp2en6tk]  .povs-hint {
    font-size: 11px;
    color: var(--mud-palette-text-secondary);
}

.pov-root[b-2udp2en6tk]  .povs-value {
    flex: 0 0 auto;
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.pov-root[b-2udp2en6tk]  .povs--muted .povs-value   { color: var(--mud-palette-text-secondary); font-weight: 600; }
.pov-root[b-2udp2en6tk]  .povs--success .povs-value { color: var(--mud-palette-success); }
.pov-root[b-2udp2en6tk]  .povs--warning .povs-value { color: var(--mud-palette-warning); }
.pov-root[b-2udp2en6tk]  .povs--error .povs-value   { color: var(--mud-palette-error); }

.pov-root[b-2udp2en6tk]  .pov-row-link {
    color: inherit;
    text-decoration: none;
}

.pov-root[b-2udp2en6tk]  .pov-row-link:hover .povs-label {
    color: var(--mud-palette-primary);
}

/* ── «NEÇƏDƏN NEÇƏ» ZOLAĞI ─────────────────────────────────────────────── */
.pov-root[b-2udp2en6tk]  .pov-meter {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 8px;
}

.pov-root[b-2udp2en6tk]  .pov-meter__big {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 8px;
    min-width: 0;
}

.pov-root[b-2udp2en6tk]  .pov-meter__value {
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.5px;
    font-variant-numeric: tabular-nums;
}

.pov-root[b-2udp2en6tk]  .pov-meter__of {
    font-size: 13px;
    color: var(--mud-palette-text-secondary);
}

.pov-root[b-2udp2en6tk]  .pov-chip {
    margin-left: auto;
}

/* ── KANAL CƏDVƏLİ ─────────────────────────────────────────────────────── */
.pov-root[b-2udp2en6tk]  .pov-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin-bottom: 6px;
    font-variant-numeric: tabular-nums;
}

.pov-root[b-2udp2en6tk]  .pov-table th {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--mud-palette-text-secondary);
    text-align: right;
    padding: 4px 0 6px 8px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.pov-root[b-2udp2en6tk]  .pov-table td {
    text-align: right;
    padding: 5px 0 5px 8px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.pov-root[b-2udp2en6tk]  .pov-table th:first-child,
.pov-root[b-2udp2en6tk]  .pov-table td:first-child {
    text-align: left;
    padding-left: 0;
}

.pov-root[b-2udp2en6tk]  .pov-table__bad {
    color: var(--mud-palette-error);
    font-weight: 700;
}

@media (max-width: 600px) {
    .pov-root[b-2udp2en6tk]  .pov-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .pov-root[b-2udp2en6tk]  .pov-kpi {
        padding: 10px 12px;
    }

    .pov-root[b-2udp2en6tk]  .pov-kpi__value {
        font-size: 1.25rem;
    }

    .pov-root[b-2udp2en6tk]  .pov-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .pov-root[b-2udp2en6tk]  .pov-attn__item {
        align-items: flex-start;
        gap: 8px;
    }

    .pov-root[b-2udp2en6tk]  .pov-attn__text {
        font-size: 13px;
    }
}
/* /Pages/Admin/SubscriptionEditDialog.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════════
   185 (28.09.2026) — «MODULLAR» TABINDA YERİNDƏ TƏSDİQ

   Pullu modulu açmaq və hədiyyəni bağlamaq artıq bir kliklə olmur: kartın
   altında panel açılır — «Ödənişli aç (+29 ₼/ay)» və ya «Hədiyyə kimi aç».
   Dialoq içində dialoq layihədə qadağandır (docs/Analys/14 §3), ona görə
   panel kartın ÖZÜNDƏDİR.

   ⚠️ Yalnız bu komponentin öz elementləri (div/button) stillənir — MudPaper
      uşaq komponentdir və scope atributu daşımır.
   ══════════════════════════════════════════════════════════════════════════ */

.sed-confirm[b-6n6hgk4xto] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 40%, var(--mud-palette-lines-default));
    background: color-mix(in srgb, var(--mud-palette-primary) 5%, var(--mud-palette-surface));
}

.sed-confirm__actions[b-6n6hgk4xto] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.sed-confirm__or[b-6n6hgk4xto] {
    font-size: .8rem;
    color: var(--mud-palette-text-secondary);
}

/* Müddət — tab dilinin kiçik seqment variantı (GiftModulesEditor ilə eyni). */
.sed-dur[b-6n6hgk4xto] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 3px;
    border-radius: 10px;
    background: var(--mud-palette-action-disabled-background);
}

.sed-dur__item[b-6n6hgk4xto] {
    padding: 4px 9px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font: inherit;
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    justify-content: flex-start;
    transition: background-color .15s, color .15s;
}

    .sed-dur__item:hover[b-6n6hgk4xto] {
        color: var(--mud-palette-text-primary);
    }

    .sed-dur__item:focus-visible[b-6n6hgk4xto] {
        outline: 2px solid var(--mud-palette-primary);
        outline-offset: -2px;
    }

    .sed-dur__item.is-on[b-6n6hgk4xto] {
        background: var(--mud-palette-surface);
        color: var(--mud-palette-secondary);
        box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
    }

@media (prefers-reduced-motion: reduce) {
    .sed-dur__item[b-6n6hgk4xto] {
        transition: none;
    }
}
/* /Pages/Availability/AvailabilityPage.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════
   asisDENT — Availability & Exceptions Page
   Premium, minimalist, Calendly/Cal.com inspired design
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Page Root ─── */
.page-root[b-unjy348b06] {
    max-width: 1160px;
    margin: 0 auto;
    padding: 24px 32px 48px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ─── Page Header ─── */
.page-header[b-unjy348b06] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
}

.page-header-left[b-unjy348b06] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.page-title[b-unjy348b06] {
    font-weight: 700 !important;
    font-size: 1.75rem !important;
    letter-spacing: -0.02em;
    color: #1a1a2e;
    margin: 0 !important;
}

/* ─── Doctor Selector Bar ─── */
.doctor-selector-bar[b-unjy348b06] {
    background: #f8f9fc;
    border: 1px solid #e9ecf3;
    border-radius: 12px;
    padding: 12px 20px;
    margin-bottom: 28px;
    display: flex;
    align-items: center;
}

.doctor-selector-inner[b-unjy348b06] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 380px;
}

.doctor-selector-icon[b-unjy348b06] {
    font-size: 1.2rem;
    opacity: 0.6;
}

.doctor-select[b-unjy348b06] {
    flex: 1;
}

/* ══════════════════════════════════════════════════════════════════════════
   🔴 115 — BURADAN 9 QAYDA SİLİNDİ VƏ HEÇ NƏ DƏYİŞMƏDİ
   ══════════════════════════════════════════════════════════════════════════
   Silinənlərin hamısı `.availability-tabs` sinfinə yazılmışdı. Həmin sinif
   markup-da HEÇ VAXT OLMAYIB — ekran `.custom-transparent-tabs` işlədirdi
   (o da `<style>` blokunda ayrıca yazılmışdı). Üstəlik qaydalar baş
   `::deep` ilə başlayırdı, yəni ƏCDADDA scope tələb edirdi.

   Yəni qayda İKİ QAT ölü idi: nə sinif vardı, nə də selektor tuturdu.
   Rəngləri də sabit hex idi (#6366f1 bənövşəyi) — tətbiqin firuzəyi
   paletindən tamamilə kənar. Bu, «yazıldı, işlədiyi heç vaxt yoxlanmadı»
   sinfinin nümunəsidir.

   Tab görünüşü indi TƏK yerdədir: `wwwroot/css/tabs.css`. */

/* ─── Working Days Schedule Paper ─── */
.schedule-paper[b-unjy348b06] {
    background: #ffffff !important;
    border: 1px solid #eef0f5;
    border-radius: 16px;
    overflow: hidden;
    transition: box-shadow 0.3s ease;
}

.schedule-paper:hover[b-unjy348b06] {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04);
}

/* Schedule Header */
.schedule-header[b-unjy348b06] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid #f1f3f8;
}

.schedule-header-left[b-unjy348b06] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.schedule-header-icon[b-unjy348b06] {
    font-size: 1.15rem;
}

.schedule-header-title[b-unjy348b06] {
    font-weight: 600;
    font-size: 0.95rem;
    color: #1a1a2e;
}

.schedule-header-subtitle[b-unjy348b06] {
    font-size: 0.8rem;
    color: #9ca3af;
}

/* ─── Day Rows ─── */
.schedule-days[b-unjy348b06] {
    padding: 0;
}

.day-row[b-unjy348b06] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 24px;
    min-height: 56px;
    transition: background 0.2s ease, padding 0.2s ease;
    border-bottom: 1px solid #f3f4f8;
}

.day-row:last-child[b-unjy348b06] {
    border-bottom: none;
}

.day-row:hover[b-unjy348b06] {
    background: #fafbff;
}

.day-row.is-working:hover[b-unjy348b06] {
    background: #f8f9fe;
}

/* ─── Day Row Left Side ─── */
.day-row-left[b-unjy348b06] {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 180px;
    flex-shrink: 0;
}

.day-switch[b-unjy348b06] {
    margin: 0;
}

/* Custom styled switch — override MudBlazor */
[b-unjy348b06] .day-switch .mud-switch {
    width: 40px;
    height: 24px;
}

[b-unjy348b06] .day-switch .mud-switch-track {
    width: 40px;
    height: 22px;
    border-radius: 12px;
}

[b-unjy348b06] .day-switch .mud-switch-thumb {
    width: 18px;
    height: 18px;
    margin-top: 2px;
}

.day-name[b-unjy348b06] {
    font-weight: 600;
    font-size: 0.95rem;
    color: #1a1a2e;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

/* ─── Day Row Right Side ─── */
.day-row-right[b-unjy348b06] {
    display: flex;
    align-items: center;
    flex: 1;
    justify-content: flex-end;
    margin-left: 16px;
}

/* ─── Time Pickers Row ─── */
.time-pickers-row[b-unjy348b06] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
}

.time-picker-unit[b-unjy348b06] {
    width: 88px;
    flex-shrink: 0;
}

/* Compact Time Picker Styles */
[b-unjy348b06] .compact-time-picker {
    width: 100%;
}

[b-unjy348b06] .compact-time-picker .mud-input {
    font-size: 0.82rem;
    padding: 2px 0;
    min-height: 36px;
}

[b-unjy348b06] .compact-time-picker .mud-input-text {
    padding: 4px 6px 2px !important;
    font-size: 0.82rem;
}

[b-unjy348b06] .compact-time-picker .mud-input-label {
    font-size: 0.65rem;
    transform: translate(6px, 2px) scale(1) !important;
    color: #9ca3af;
}

[b-unjy348b06] .compact-time-picker .mud-input-slot {
    padding: 4px 6px !important;
    font-size: 0.82rem;
}

[b-unjy348b06] .compact-time-picker .mud-input-adornment {
    display: none;
}

[b-unjy348b06] .compact-time-picker .mud-input-underline {
    border-bottom: 1.5px solid #e5e7eb;
}

[b-unjy348b06] .compact-time-picker .mud-input-underline:before {
    border-bottom: 1.5px solid #e5e7eb;
}

[b-unjy348b06] .compact-time-picker:hover .mud-input-underline:before {
    border-bottom: 1.5px solid #c4c8d4 !important;
}

[b-unjy348b06] .compact-time-picker .mud-input-underline:after {
    border-bottom: 2px solid #6366f1;
}

/* Time Separator */
.time-sep[b-unjy348b06] {
    color: #d1d5db;
    font-size: 0.85rem;
    padding: 0 2px;
    flex-shrink: 0;
}

/* Break Divider */
.time-break-divider[b-unjy348b06] {
    display: flex;
    align-items: center;
    padding: 0 6px;
    flex-shrink: 0;
}

.break-label[b-unjy348b06] {
    font-size: 0.6rem;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

/* Save Day Button */
.save-day-btn[b-unjy348b06] {
    margin-left: 6px;
    flex-shrink: 0;
    transition: transform 0.15s ease, opacity 0.15s ease;
    opacity: 0.5;
}

.day-row:hover .save-day-btn[b-unjy348b06] {
    opacity: 1;
}

.save-day-btn:hover[b-unjy348b06] {
    transform: scale(1.15);
}

/* ─── Day Off Badge ─── */
.day-off-badge[b-unjy348b06] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #f3f4f8;
    border-radius: 20px;
    padding: 6px 16px;
    font-size: 0.82rem;
    color: #6b7280;
    font-weight: 500;
}

.day-off-dot[b-unjy348b06] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d1d5db;
    flex-shrink: 0;
}

.is-dayoff .day-name[b-unjy348b06] {
    color: #9ca3af;
}

/* ═══════════════════════════════════════════════════════════════════
   TAB 2 — EXCEPTIONS
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Add Exception Card ─── */
.add-exception-card[b-unjy348b06] {
    background: #ffffff !important;
    border: 1px solid #eef0f5;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    margin-bottom: 28px;
    transition: box-shadow 0.3s ease;
}

.add-exception-card:focus-within[b-unjy348b06] {
    box-shadow: 0 4px 24px rgba(99, 102, 241, 0.08);
}

.add-exception-accent[b-unjy348b06] {
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, #6366f1, #8b5cf6);
    border-radius: 4px 0 0 4px;
}

.add-exception-inner[b-unjy348b06] {
    padding: 20px 24px 20px 28px;
}

.add-exception-header[b-unjy348b06] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.add-exception-header-left[b-unjy348b06] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.add-exception-icon[b-unjy348b06] {
    font-size: 1rem;
}

.add-exception-title[b-unjy348b06] {
    font-weight: 600;
    font-size: 0.95rem;
    color: #1a1a2e;
}

.cancel-edit-btn[b-unjy348b06] {
    font-size: 0.82rem !important;
    text-transform: none !important;
    color: #6b7280 !important;
}

/* ─── Exception Form ─── */
.add-exception-form[b-unjy348b06] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.add-exception-main-row[b-unjy348b06] {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.form-field[b-unjy348b06] {
    flex-shrink: 0;
}

.date-field[b-unjy348b06] {
    width: 180px;
}

.reason-field[b-unjy348b06] {
    min-width: 200px;
    flex: 1;
}

.toggle-field[b-unjy348b06] {
    flex-shrink: 0;
}

.action-field[b-unjy348b06] {
    flex-shrink: 0;
    min-width: 130px;
}

/* Closed Toggle Container */
.closed-toggle-container[b-unjy348b06] {
    display: flex;
    align-items: center;
    height: 100%;
    padding-bottom: 2px;
}

[b-unjy348b06] .closed-toggle-switch {
    margin: 0;
}

[b-unjy348b06] .closed-toggle-switch .mud-switch-label {
    font-size: 0.78rem;
    font-weight: 500;
    color: #374151;
}

/* Exception Date Picker */
[b-unjy348b06] .exception-date-picker {
    width: 100%;
}

[b-unjy348b06] .exception-date-picker .mud-input {
    font-size: 0.85rem;
}

/* Exception Reason Select */
[b-unjy348b06] .exception-reason-select {
    width: 100%;
}

[b-unjy348b06] .exception-reason-select .mud-input {
    font-size: 0.85rem;
}

.reason-option-img[b-unjy348b06] {
    width: 18px;
    height: 18px;
    object-fit: contain;
    margin-right: 8px;
    vertical-align: middle;
}

/* Save Exception Button */
.save-exception-btn[b-unjy348b06] {
    height: 40px !important;
    border-radius: 10px !important;
    text-transform: none !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    letter-spacing: 0.01em !important;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.25) !important;
}

.save-exception-btn:hover[b-unjy348b06] {
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.35) !important;
}

.save-exception-btn:disabled[b-unjy348b06] {
    opacity: 0.5;
    box-shadow: none !important;
}

.save-exception-btn-content[b-unjy348b06] {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ─── Custom Hours Time Row ─── */
.add-exception-time-row[b-unjy348b06] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #f9fafc;
    border-radius: 10px;
    border: 1px dashed #e2e6ef;
    overflow: hidden;
    max-height: 60px;
    transition: max-height 0.3s ease, opacity 0.25s ease, padding 0.25s ease, margin 0.25s ease;
    opacity: 1;
}

.add-exception-time-row.collapsed[b-unjy348b06] {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
    border-width: 0;
    overflow: hidden;
    pointer-events: none;
}

.add-exception-time-row.visible[b-unjy348b06] {
    max-height: 60px;
    opacity: 1;
}

.time-field[b-unjy348b06] {
    width: 140px;
}

.time-field-sep[b-unjy348b06] {
    color: #d1d5db;
    font-size: 0.9rem;
}

[b-unjy348b06] .exception-time-picker {
    width: 100%;
}

[b-unjy348b06] .exception-time-picker .mud-input {
    font-size: 0.85rem;
}

/* ─── Exceptions Section ─── */
.exceptions-section[b-unjy348b06] {
    margin-top: 0;
}

.exceptions-section-header[b-unjy348b06] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4px 16px;
}

.exceptions-section-header-left[b-unjy348b06] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.exceptions-section-icon[b-unjy348b06] {
    font-size: 1rem;
}

.exceptions-section-title[b-unjy348b06] {
    font-weight: 600;
    font-size: 1rem;
    color: #1a1a2e;
}

.exceptions-section-count[b-unjy348b06] {
    font-size: 0.78rem;
    color: #9ca3af;
    background: #f3f4f8;
    padding: 4px 12px;
    border-radius: 20px;
    font-weight: 500;
}

/* ─── Exceptions Grid ─── */
.exceptions-grid[b-unjy348b06] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

/* ─── Exception Card ─── */
.exception-card[b-unjy348b06] {
    background: #ffffff;
    border: 1px solid #eef0f5;
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    transition: all 0.2s ease;
}

.exception-card:hover[b-unjy348b06] {
    border-color: #dce0eb;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    transform: translateY(-1px);
}

.exception-card-accent[b-unjy348b06] {
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    border-radius: 4px 0 0 4px;
}

.exception-card-accent.closed[b-unjy348b06] {
    background: linear-gradient(180deg, #ef4444, #f87171);
}

.exception-card-accent.open[b-unjy348b06] {
    background: linear-gradient(180deg, #10b981, #34d399);
}

/* ─── Exception Card Body ─── */
.exception-card-body[b-unjy348b06] {
    display: flex;
    align-items: center;
    padding: 14px 18px 14px 22px;
    gap: 16px;
}

/* ─── Calendar Badge ─── */
.exception-date-badge[b-unjy348b06] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 54px;
    min-width: 54px;
    height: 62px;
    background: linear-gradient(180deg, #f8f9fc, #f1f3f8);
    border-radius: 10px;
    border: 1px solid #e9ecf3;
    flex-shrink: 0;
}

.badge-month[b-unjy348b06] {
    font-size: 0.6rem;
    font-weight: 700;
    color: #6366f1;
    letter-spacing: 0.05em;
    line-height: 1;
    margin-top: 4px;
}

.badge-day[b-unjy348b06] {
    font-size: 1.3rem;
    font-weight: 700;
    color: #1a1a2e;
    line-height: 1.2;
}

.badge-year[b-unjy348b06] {
    font-size: 0.55rem;
    font-weight: 500;
    color: #9ca3af;
    line-height: 1;
    margin-bottom: 4px;
}

/* ─── Exception Card Content ─── */
.exception-card-content[b-unjy348b06] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.exception-reason-row[b-unjy348b06] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.exception-reason-img[b-unjy348b06] {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 4px;
}

.exception-reason-name[b-unjy348b06] {
    font-weight: 600;
    font-size: 0.9rem;
    color: #1a1a2e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.exception-meta-row[b-unjy348b06] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ─── Status Pill ─── */
.status-pill[b-unjy348b06] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 12px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.status-pill.closed[b-unjy348b06] {
    background: #fef2f2;
    color: #dc2626;
}

.status-pill.open[b-unjy348b06] {
    background: #ecfdf5;
    color: #059669;
}

.status-dot[b-unjy348b06] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
}

.status-pill.closed .status-dot[b-unjy348b06] {
    background: #ef4444;
}

.status-pill.open .status-dot[b-unjy348b06] {
    background: #10b981;
}

.exception-time-text[b-unjy348b06] {
    font-size: 0.82rem;
    color: #6b7280;
    font-weight: 500;
}

/* ─── Exception Card Actions ─── */
.exception-card-actions[b-unjy348b06] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    padding-left: 8px;
}

.action-icon-btn[b-unjy348b06] {
    background: transparent;
    border: none;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    color: #9ca3af;
    padding: 0;
}

.action-icon-btn:hover[b-unjy348b06] {
    background: #f3f4f8;
}

.action-icon-btn.edit:hover[b-unjy348b06] {
    color: #6366f1;
    background: #eef0ff;
}

.action-icon-btn.delete:hover[b-unjy348b06] {
    color: #ef4444;
    background: #fef2f2;
}

/* ─── Empty State ─── */
.exceptions-empty[b-unjy348b06] {
    background: #ffffff !important;
    border: 1px dashed #dce0eb;
    border-radius: 16px;
    padding: 48px 24px !important;
    text-align: center;
}

.exceptions-empty-inner[b-unjy348b06] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.exceptions-empty-icon[b-unjy348b06] {
    font-size: 2.5rem;
    margin-bottom: 8px;
    opacity: 0.5;
}

.exceptions-empty-text[b-unjy348b06] {
    color: #6b7280 !important;
    font-weight: 500 !important;
}

.exceptions-empty-hint[b-unjy348b06] {
    color: #9ca3af !important;
    font-size: 0.85rem !important;
}

/* ─── Overlap Warning ─── */
.overlap-warning[b-unjy348b06] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 10px;
    padding: 10px 16px;
    margin-top: 12px;
    font-size: 0.82rem;
    color: #92400e;
    font-weight: 500;
}

/* ─── Responsive ─── */
@media (max-width: 1024px) {
    .page-root[b-unjy348b06] {
        padding: 16px 16px 32px;
    }

    .time-pickers-row[b-unjy348b06] {
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 4px;
    }

    .time-picker-unit[b-unjy348b06] {
        width: 76px;
    }

    .day-row[b-unjy348b06] {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 14px 18px;
    }

    .day-row-left[b-unjy348b06] {
        min-width: unset;
    }

    .day-row-right[b-unjy348b06] {
        margin-left: 54px;
        justify-content: flex-start;
    }

    .add-exception-main-row[b-unjy348b06] {
        flex-direction: column;
        align-items: stretch;
    }

    .date-field[b-unjy348b06],
    .reason-field[b-unjy348b06],
    .toggle-field[b-unjy348b06],
    .action-field[b-unjy348b06] {
        width: 100%;
        min-width: unset;
    }

    .exception-card-body[b-unjy348b06] {
        flex-wrap: wrap;
    }

    .exception-card-actions[b-unjy348b06] {
        padding-left: 0;
        width: 100%;
        justify-content: flex-end;
    }

    .add-exception-time-row[b-unjy348b06] {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .add-exception-time-row.visible[b-unjy348b06] {
        max-height: 160px;
    }

    .time-field[b-unjy348b06] {
        width: 100%;
    }

    .time-field-sep[b-unjy348b06] {
        display: none;
    }
}

@media (max-width: 640px) {
    .page-header[b-unjy348b06] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .schedule-header[b-unjy348b06] {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .time-pickers-row[b-unjy348b06] {
        gap: 2px;
    }

    .time-picker-unit[b-unjy348b06] {
        width: 64px;
    }

    [b-unjy348b06] .compact-time-picker .mud-input-text {
        font-size: 0.72rem;
        padding: 2px 4px !important;
    }

    .day-row-right[b-unjy348b06] {
        margin-left: 46px;
    }

    .add-exception-inner[b-unjy348b06] {
        padding: 16px;
    }

    .exceptions-section-header[b-unjy348b06] {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
}

/* ─── Animations ─── */
@keyframes fadeInUp-b-unjy348b06 {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.day-row[b-unjy348b06] {
    animation: fadeInUp-b-unjy348b06 0.3s ease forwards;
}

.day-row:nth-child(1)[b-unjy348b06] { animation-delay: 0.02s; }
.day-row:nth-child(2)[b-unjy348b06] { animation-delay: 0.04s; }
.day-row:nth-child(3)[b-unjy348b06] { animation-delay: 0.06s; }
.day-row:nth-child(4)[b-unjy348b06] { animation-delay: 0.08s; }
.day-row:nth-child(5)[b-unjy348b06] { animation-delay: 0.10s; }
.day-row:nth-child(6)[b-unjy348b06] { animation-delay: 0.12s; }
.day-row:nth-child(7)[b-unjy348b06] { animation-delay: 0.14s; }

.exception-card[b-unjy348b06] {
    animation: fadeInUp-b-unjy348b06 0.3s ease forwards;
}

.exception-card:nth-child(1)[b-unjy348b06] { animation-delay: 0.03s; }
.exception-card:nth-child(2)[b-unjy348b06] { animation-delay: 0.06s; }
.exception-card:nth-child(3)[b-unjy348b06] { animation-delay: 0.09s; }
.exception-card:nth-child(4)[b-unjy348b06] { animation-delay: 0.12s; }
.exception-card:nth-child(5)[b-unjy348b06] { animation-delay: 0.15s; }

/* ─── Scrollbar Styling ─── */
.page-root [b-unjy348b06]::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.page-root [b-unjy348b06]::-webkit-scrollbar-track {
    background: transparent;
}

.page-root [b-unjy348b06]::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 3px;
}

.page-root [b-unjy348b06]::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}
/* ══════════════════════════════════════════════════════════════════════════
   İŞ GÜNÜ SƏTRİ — MOBİL DÜZƏLİŞİ (12.08.2026)
   ══════════════════════════════════════════════════════════════════════════

   🔴 DİQQƏT — YUXARIDAKI ~1000 SƏTİR CSS ÖLÜDÜR.
      `.page-root`, `.day-row`, `.time-pickers-row`, `.time-picker-unit`,
      `.compact-time-picker` və s. adların HEÇ BİRİ `AvailabilityPage.razor`
      markup-unda yoxdur — səhifə vaxtilə MudBlazor utility siniflərinə
      (`d-flex`, `gap-3`, inline `Style`) köçürülüb, CSS isə köhnə adlarla
      qalıb. Yəni buradakı `@media` blokları da HEÇ VAXT işə düşməyib —
      mobil düzülüşün olmamasının səbəbi məhz budur.
      Bu bölmə markup-da HƏQİQƏTƏN olan siniflərlə yazılıb. Ölü hissənin
      təmizlənməsi ayrı işdir (changelog-da flaglanıb).

   ⚠️ `::deep` MudBlazor komponentlərinə verilən siniflər üçün MƏCBURİDİR:
      scoped `b-xxxxx` atributu yalnız bizim yazdığımız HTML teqlərinə düşür.
   ────────────────────────────────────────────────────────────────────────── */

/* Masaüstü: seçicinin eni. Əvvəl markup-da inline `width: 125px` idi —
   inline stil media sorğusu ilə ləğv edilə bilmir, ona görə bura köçürüldü. */
.av-day[b-unjy348b06]  .av-time {
    width: 125px;
}

.av-times[b-unjy348b06] {
    min-width: 0;
}

/* ─── Planşet və telefon ───
   Sətir alt-alta düşür: solda gün adı, altda saatlar. */
@media (max-width: 960px) {
    .av-day[b-unjy348b06] {
        flex-direction: column;
        align-items: stretch !important;
        gap: 12px;
    }

    .av-day__left[b-unjy348b06] {
        min-width: 0 !important;
    }

    .av-day__right[b-unjy348b06] {
        justify-content: flex-start !important;
        gap: 10px !important;
    }
}

/* ─── Telefon ───
   İki seçici bir cərgədə, tire aradan çıxır (yer yeyir və mənası
   yan-yana duran iki sahədə onsuz da aydındır). Yadda saxla düyməsi
   sətrin sonunda tam enə yayılır ki, barmaqla asan basılsın. */
@media (max-width: 600px) {
    .av-times[b-unjy348b06] {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 8px !important;
        width: 100%;
    }

    .av-day[b-unjy348b06]  .av-time {
        width: 100%;
    }

    .av-times[b-unjy348b06]  .av-times__sep {
        display: none;
    }

    /* «Fasilə» yazısı iki sütunun üstündə tam sətir tutur. */
    .av-times[b-unjy348b06]  .mud-typography-caption {
        grid-column: 1 / -1;
        margin: 0 !important;
    }

    .av-day__right[b-unjy348b06] {
        flex-direction: column;
        align-items: stretch !important;
    }

    .av-day__right[b-unjy348b06]  .av-save {
        align-self: flex-end;
        margin-left: 0 !important;
    }
}
/* /Pages/Billing/BillingPage.razor.rz.scp.css */
/* === BillingPage.razor.css — scoped (13.09.2026) ===
   Limitlər və ödənişlər tablarının düzülüşü.

   ⚠️ YALNIZ ADİ HTML ELEMENTLƏRİ ÜÇÜNDÜR. MudBlazor komponentlərinə verilən
      siniflər (`bill-addon`, `pbill-card-no`, `pbill-strike` …) qlobal
      `upsell.css`-dədir: scoped atribut uşaq komponentə düşmür və burada
      yazılsaydı səssizcə işləməzdi (`RazorSourceLintTests`). */

/* ── LİMİTLƏR ── */
.bill-limits[b-n06z4cou3h] {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    margin-bottom: 1.25rem;
}

.bill-limits__title[b-n06z4cou3h] {
    margin-top: .5rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.bill-limits__grid[b-n06z4cou3h] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: .75rem;
}

/* ── MARKET QRUPU (18.09.2026) ──
   Sistem sahibi: «market tabında hər ürünü qruplaşdır, hazırda qarışıqdır».

   Başlıq + BİR CÜMLƏLİK İZAH birlikdə gəlir: «birdəfəlik, ay sonunda yanmır»
   ilə «aylıq təkrarlanır» fərqi ÖDƏNİŞ qərarıdır və kartın içində itməməlidir. */
.bill-group[b-n06z4cou3h] {
    margin: .25rem 0 .75rem;
}

.bill-group__title[b-n06z4cou3h] {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.bill-group__hint[b-n06z4cou3h] {
    margin-top: .1rem;
    font-size: .8rem;
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
}

/* ── ÖDƏNİŞLƏR ── */
.bill-pay[b-n06z4cou3h] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: .75rem;
}

.bill-pay__kpis[b-n06z4cou3h] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: .75rem;
}

.bill-pay__kpi[b-n06z4cou3h] {
    --kpi-tone: var(--mud-palette-primary);
    min-width: 0;
    padding: .9rem 1rem;
    border-radius: 14px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-top: 3px solid var(--kpi-tone);
}

.bill-pay__kpi--ok[b-n06z4cou3h]    { --kpi-tone: var(--mud-palette-success); }
.bill-pay__kpi--alert[b-n06z4cou3h] { --kpi-tone: var(--mud-palette-error); }

.bill-pay__kpi-label[b-n06z4cou3h] {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.bill-pay__kpi-value[b-n06z4cou3h] {
    margin-top: .25rem;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .5rem;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.bill-pay__kpi--alert .bill-pay__kpi-value[b-n06z4cou3h] {
    color: var(--mud-palette-error);
}

.bill-pay__kpi-sub[b-n06z4cou3h] {
    margin-top: .2rem;
    font-size: .76rem;
    color: var(--mud-palette-text-secondary);
}

.bill-pay__kpi-sub--ok[b-n06z4cou3h] {
    font-weight: 600;
    color: var(--mud-palette-success);
}

/* ── 187 — BİR DƏFƏLİK QURAŞDIRMA HAQQI ─────────────────────────────────
   Aylıq rəqəmlərdən AYRI kartdır: haqq aylıq deyil, bir dəfə ödənilir.
   Gözləyir → sarı xətt; ödənilib → yaşıl, izahsız (artıq istənmir). */
.bill-pay__setup[b-n06z4cou3h] {
    --setup-tone: var(--mud-palette-warning);
    padding: .9rem 1.1rem;
    border-radius: 14px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-left: 4px solid var(--setup-tone);
}

.bill-pay__setup.is-paid[b-n06z4cou3h] { --setup-tone: var(--mud-palette-success); }

.bill-pay__setup-head[b-n06z4cou3h] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    font-weight: 700;
}

.bill-pay__setup-amount[b-n06z4cou3h] {
    margin-inline-start: auto;
    font-size: 1.15rem;
    font-variant-numeric: tabular-nums;
}

.bill-pay__setup-state[b-n06z4cou3h] {
    margin-top: .2rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--mud-palette-warning-darken, var(--mud-palette-warning));
}

.bill-pay__setup.is-paid .bill-pay__setup-state[b-n06z4cou3h] {
    color: var(--mud-palette-success);
}

.bill-pay__setup-why[b-n06z4cou3h] {
    margin-top: .5rem;
    font-size: .85rem;
    line-height: 1.55;
    color: var(--mud-palette-text-secondary);
}

.bill-pay__where[b-n06z4cou3h] {
    padding: 1rem 1.1rem;
    border-radius: 14px;
    background: var(--mud-palette-background-grey);
    border: 1px dashed var(--mud-palette-lines-default);
}

.bill-pay__where-head[b-n06z4cou3h] {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .5rem;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

/* Göz nişanı başlığın SAĞ UCUNDADIR: başlıqla rekvizit arasında dursaydı
   mətn ilə qarışardı və «bu nəyi açır?» sualı yaranardı. */
.bill-pay__where-head[b-n06z4cou3h]  .bill-pay__eye {
    margin-inline-start: auto;
}

.bill-pay__bank-name[b-n06z4cou3h] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

/* Bağlı vəziyyətin izahı — boş sətir «nəsə yüklənmədi» kimi oxunur. */
.bill-pay__hidden-hint[b-n06z4cou3h] {
    margin-top: .5rem;
    font-size: .74rem;
    line-height: 1.4;
    color: var(--mud-palette-text-secondary);
}

/* ══════════════════════════════════════════════════════════════════════
   «TEZLİKLƏ» DÜYMƏLƏRİ
   ══════════════════════════════════════════════════════════════════════
   🔴 Sönülü düymə GİZLİ düymədən yaxşıdır: müştəri əl ilə köçürmənin
      müvəqqəti olduğunu bilməlidir. Görünməyən düymə heç nə vəd etmir.

   ⚠️ `wrap`: iki düymə dar ekranda alt-alta düşür — sıxılmış düymə
      mətni kəsir və «tezliklə» nişanı itir. */
.bill-pay__soon[b-n06z4cou3h] {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .9rem;
    padding-top: .9rem;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.bill-pay__soon-tag[b-n06z4cou3h] {
    margin-inline-start: .4rem;
    padding: .05rem .4rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
    color: var(--mud-palette-primary);
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.bill-pay__holder[b-n06z4cou3h] {
    font-size: .85rem;
    color: var(--mud-palette-text-secondary);
}

.bill-pay__copyrow[b-n06z4cou3h] {
    max-width: 560px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-top: .5rem;
    padding: .35rem .35rem .35rem .8rem;
    border-radius: 10px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
}

.bill-pay__iban[b-n06z4cou3h] {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: .88rem;
    letter-spacing: .04em;
    word-break: break-all;
    color: var(--mud-palette-text-primary);
}

.bill-pay__history-head[b-n06z4cou3h] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-top: .25rem;
}
/* /Pages/Calendar/CalendarPage.razor.rz.scp.css */
/* === Features/Calendar/CalendarPage.razor.css === */
.appt-item--confirmed[b-3xpa55l3wa] {
    background: #0f766e22;
    border-left: 3px solid #0f766e;
    padding: 2px 6px;
    border-radius: 4px;
}

.appt-item--pending[b-3xpa55l3wa] {
    background: #f59e0b22;
    border-left: 3px solid #f59e0b;
    padding: 2px 6px;
    border-radius: 4px;
}
/* /Pages/Communication/CommunicationPage.razor.rz.scp.css */
/* ═══════════════ SƏHİFƏ BAŞLIĞI ═══════════════ */
.page-head[b-1k58096t9q] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 26px;
    flex-wrap: wrap; /* dar ekranda klinika seçicisi alt sətrə keçsin */
}

.page-head-icon[b-1k58096t9q] {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 14px;
    display: grid;
    place-items: center;
    color: var(--mud-palette-primary);
    background: rgba(var(--mud-palette-primary-rgb), .12);
}

    .page-head-icon[b-1k58096t9q]  svg {
        width: 24px;
        height: 24px;
    }

.page-title[b-1k58096t9q] {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--mud-palette-text-primary);
}

.page-sub[b-1k58096t9q] {
    margin: 2px 0 0;
    font-size: .84rem;
    color: var(--mud-palette-text-secondary);
}

/* ═══════════════ KLİNİKA (TENANT) SEÇİCİSİ ═══════════════
   Yalnız SUPERADMIN görür. Kart dizaynı ilə eyni kalıb:
   1px xətt, 16px radius, surface fon — səhifədə yad element kimi durmasın. */
/* Başlıq sətrinin SAĞ tərəfinə yapışır (margin-left: auto).
   Əvvəl ayrıca sətir idi və mənfi yuxarı marja ilə yuxarı dartılırdı —
   başlığın içinə keçdikdən sonra o marjalara ehtiyac qalmadı. */
.tenant-filter[b-1k58096t9q] {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin: 0 0 0 auto;
    padding: 10px 14px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 16px;
    background: var(--mud-palette-surface);
}

/* Dar ekranda sağa yapışdırmaq mənasızdır — tam enə yayılsın. */
@media (max-width: 900px) {
    .tenant-filter[b-1k58096t9q] {
        margin: 4px 0 0;
        width: 100%;
    }
}

.tenant-filter-icon[b-1k58096t9q] {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: var(--mud-palette-primary);
    background: rgba(var(--mud-palette-primary-rgb), .12);
}

    .tenant-filter-icon[b-1k58096t9q]  svg {
        width: 20px;
        height: 20px;
    }

.tenant-filter-body[b-1k58096t9q] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 260px;
}

.tenant-filter-label[b-1k58096t9q] {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.tenant-filter[b-1k58096t9q]  .tenant-filter-select {
    min-width: 260px;
}

.tenant-own-badge[b-1k58096t9q],
.tenant-inactive-badge[b-1k58096t9q] {
    padding: 1px 8px;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
}

.tenant-own-badge[b-1k58096t9q] {
    color: var(--mud-palette-primary);
    background: rgba(var(--mud-palette-primary-rgb), .13);
}

.tenant-inactive-badge[b-1k58096t9q] {
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-action-default-hover);
}

/* Başqa klinikanın mətnini redaktə etmək təhlükəli qədər asandır —
   xəbərdarlıq daimi görünür, bir dəfə göstərilib itən bildiriş deyil. */
.tenant-foreign-warn[b-1k58096t9q] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 600;
    color: #b45309;
    background: rgba(245, 158, 11, .14);
}

    .tenant-foreign-warn[b-1k58096t9q]  svg {
        width: 16px;
        height: 16px;
    }

/* ═══════════════ TABLAR ═══════════════ */
/* ⚠️ 115 — MudTabs qaydaları SİLİNDİ: ekran artıq `AppTabs` işlədir və
   görünüş `wwwroot/css/tabs.css`-dən gəlir. Burada yalnız NİŞANIN ÖZ
   məzmunu qalır (kanal rəngi + sayğac) — o, bu ekrana xasdır. */

.tab-head[b-1k58096t9q] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tab-label[b-1k58096t9q] {
    font-size: .875rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

/* ⚠️ 115 — aktiv nişanın seçicisi dəyişdi: MudTabs `.mud-tab-active`
   yazırdı, standart seqment idarəedicisi isə `.is-active`. Selektor
   yenilənməsəydi aktiv qrupun adı sönük qalardı — yəni səhv «rəng
   yoxdur» kimi görünərdi, kodda isə heç nə qırılmazdı. */
.comm-page[b-1k58096t9q]  .atabs-nav-item.is-active .tab-label {
    color: var(--mud-palette-primary);
}

.tab-count[b-1k58096t9q] {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-action-default-hover);
}

.comm-page[b-1k58096t9q]  .atabs-nav-item.is-active .tab-count {
    color: var(--mud-palette-primary);
    background: rgba(var(--mud-palette-primary-rgb), .13);
}

.group-note[b-1k58096t9q] {
    margin: 0 0 18px;
    padding-left: 12px;
    border-left: 3px solid rgba(var(--mud-palette-primary-rgb), .4);
    font-size: .8rem;
    color: var(--mud-palette-text-secondary);
}

    .group-note strong[b-1k58096t9q] {
        color: var(--mud-palette-text-primary);
        font-weight: 600;
    }

/* ═══════════════ KART GRID ═══════════════ */
.cards-grid[b-1k58096t9q] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
}

.scenario-card[b-1k58096t9q] {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 18px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 16px;
    background: var(--mud-palette-surface);
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

    .scenario-card:hover[b-1k58096t9q] {
        transform: translateY(-3px);
        border-color: rgba(var(--mud-palette-primary-rgb), .55);
        box-shadow: 0 12px 24px -10px rgba(15, 23, 42, .18);
    }

    .scenario-card:focus-visible[b-1k58096t9q] {
        outline: 2px solid var(--mud-palette-primary);
        outline-offset: 2px;
    }

.card-top[b-1k58096t9q] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 12px;
}

.card-icon[b-1k58096t9q] {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: var(--mud-palette-primary);
    background: rgba(var(--mud-palette-primary-rgb), .1);
}

    .card-icon[b-1k58096t9q]  svg {
        width: 20px;
        height: 20px;
    }

.comm-page[b-1k58096t9q]  .card-edit {
    opacity: .65;
    transition: opacity .15s ease, background-color .15s ease, color .15s ease;
}

.scenario-card:hover[b-1k58096t9q]  .card-edit,
.scenario-card:focus-visible[b-1k58096t9q]  .card-edit {
    opacity: 1;
    background: rgba(var(--mud-palette-primary-rgb), .12);
    color: var(--mud-palette-primary);
}

.card-title[b-1k58096t9q] {
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--mud-palette-text-primary);
    margin-bottom: 6px;
}

.card-desc[b-1k58096t9q] {
    font-size: .8rem;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 14px;
}

.card-foot[b-1k58096t9q] {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--mud-palette-lines-default);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}

.chan-pill[b-1k58096t9q] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
    color: var(--brand, var(--mud-palette-primary));
    background: var(--brand-soft, rgba(var(--mud-palette-primary-rgb), .1));
}

    .chan-pill[b-1k58096t9q]  svg {
        width: 12px;
        height: 12px;
    }

.key-code[b-1k58096t9q] {
    font-family: Consolas, "Cascadia Mono", monospace;
    font-size: 10px;
    color: var(--mud-palette-text-disabled);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* ═══════════════ BOŞ VƏZİYYƏT ═══════════════ */
.empty-state[b-1k58096t9q] {
    text-align: center;
    padding: 64px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: var(--mud-palette-text-secondary);
}

    .empty-state[b-1k58096t9q]  svg {
        width: 46px;
        height: 46px;
        color: var(--mud-palette-text-disabled);
    }

.empty-title[b-1k58096t9q] {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.empty-state p[b-1k58096t9q] {
    margin: 0 0 8px;
    font-size: .85rem;
}

/* ═══════════════ DİALOQLAR ═══════════════ */
.dlg-head[b-1k58096t9q] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-right: 40px; /* MudDialog-un X düyməsi ilə üst-üstə düşməsin */
}

.dlg-head-icon[b-1k58096t9q] {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 12px;
    display: grid;
    place-items: center;
}

.dlg-head-text[b-1k58096t9q] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.dlg-title[b-1k58096t9q] {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--mud-palette-text-primary);
}

.dlg-sub[b-1k58096t9q] {
    font-size: .74rem;
    color: var(--mud-palette-text-secondary);
}

    .dlg-sub code[b-1k58096t9q] {
        font-family: Consolas, "Cascadia Mono", monospace;
        font-size: .72rem;
        padding: 1px 6px;
        border-radius: 6px;
        background: var(--mud-palette-background-gray);
    }

.custom-badge[b-1k58096t9q] {
    margin-left: auto;
    flex-shrink: 0;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    color: #b45309;
    background: rgba(245, 158, 11, .14);
    border: 1px solid rgba(245, 158, 11, .35);
}

.comm-dialog[b-1k58096t9q] {
    padding-top: 8px;
}

.dlg-actions[b-1k58096t9q] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    width: 100%;
    padding: 4px 16px 10px;
}

.err-list[b-1k58096t9q] {
    margin: 0;
    padding-left: 18px;
}

/* ═══════════════ ŞABLON MƏTNİ + TOKENLƏR ═══════════════ */
.field-label[b-1k58096t9q] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.field-hint[b-1k58096t9q] {
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--mud-palette-text-disabled);
}

.template-source[b-1k58096t9q] {
    min-height: 60px;
    max-height: 260px;
    overflow-y: auto;
    padding: 12px 14px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    background: var(--mud-palette-background-gray);
    font-size: .85rem;
    line-height: 1.6;
    color: var(--mud-palette-text-primary);
    white-space: pre-wrap;
    word-break: break-word;
    scrollbar-width: thin;
}

    .template-source[b-1k58096t9q]::-webkit-scrollbar {
        width: 6px;
    }

    .template-source[b-1k58096t9q]::-webkit-scrollbar-thumb {
        background: rgba(var(--mud-palette-primary-rgb), .3);
        border-radius: 6px;
    }

.tok-inline[b-1k58096t9q] {
    padding: 1px 6px;
    border-radius: 6px;
    font-family: Consolas, "Cascadia Mono", monospace;
    font-size: .78em;
    font-weight: 600;
}

.tok-inline-req[b-1k58096t9q] {
    color: var(--mud-palette-error);
    background: rgba(var(--mud-palette-error-rgb), .1);
}

.tok-inline-opt[b-1k58096t9q] {
    color: var(--mud-palette-primary);
    background: rgba(var(--mud-palette-primary-rgb), .1);
}

.token-box[b-1k58096t9q] {
    margin-top: 16px;
    padding: 14px;
    border: 1px dashed var(--mud-palette-lines-default);
    border-radius: 12px;
    background: var(--mud-palette-background-gray);
}

.token-row[b-1k58096t9q] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tok[b-1k58096t9q] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 8px;
    border: 1px solid transparent;
    font-family: Consolas, "Cascadia Mono", monospace;
    font-size: .74rem;
    font-weight: 600;
    line-height: 1.5;
}

.tok-req[b-1k58096t9q] {
    color: var(--mud-palette-error);
    border-color: rgba(var(--mud-palette-error-rgb), .35);
    background: rgba(var(--mud-palette-error-rgb), .08);
}

.tok-opt[b-1k58096t9q] {
    color: var(--mud-palette-primary);
    border-color: rgba(var(--mud-palette-primary-rgb), .35);
    background: rgba(var(--mud-palette-primary-rgb), .07);
}

.tok-ok[b-1k58096t9q] {
    color: var(--mud-palette-success);
    border-color: rgba(var(--mud-palette-success-rgb), .4);
    background: rgba(var(--mud-palette-success-rgb), .1);
}

.tok-btn[b-1k58096t9q] {
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
}

    .tok-btn:hover[b-1k58096t9q] {
        transform: translateY(-1px);
        box-shadow: 0 3px 8px rgba(15, 23, 42, .12);
    }

    .tok-btn:focus-visible[b-1k58096t9q] {
        outline: 2px solid var(--mud-palette-primary);
        outline-offset: 2px;
    }

    .tok-btn[b-1k58096t9q]  svg {
        width: 13px;
        height: 13px;
    }

/* ═══════════════ TELEFON SÜTUNU ═══════════════ */
.phone-col[b-1k58096t9q] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.phone-sticky[b-1k58096t9q] {
    position: sticky;
    top: 8px;
}

.phone-note[b-1k58096t9q] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 16px;
    background: var(--mud-palette-background-gray);
    font-size: 11.5px;
    color: var(--mud-palette-text-secondary);
}

/* Telefonun ÜSTÜNDƏ duran variant — .phone-col sütununda
   izahla telefon arasında məsafə lazımdır. */
.phone-note-top[b-1k58096t9q] {
    margin-bottom: 12px;
}

    .phone-note[b-1k58096t9q]  svg {
        width: 14px;
        height: 14px;
    }
/* /Pages/Communication/MyTemplatesPage.razor.rz.scp.css */
/* ═══════ Ssenari sətri ═══════ */

.tpl-row[b-uu5oyfk8p1] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    margin-bottom: 8px;
    border-radius: 12px;
    border: 1px solid var(--mud-palette-lines-default);
    background-color: var(--mud-palette-surface);
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.tpl-row:hover[b-uu5oyfk8p1] {
    border-color: var(--mud-palette-primary);
    transform: translateX(2px);
}

/* Seçili sətir: sol kənarda qalın zolaq. Yalnız fon rəngi ilə
   fərqləndirmək qaranlıq rejimdə zəif görünürdü. */
.tpl-row--active[b-uu5oyfk8p1] {
    border-color: var(--mud-palette-primary);
    background-color: var(--mud-palette-primary-hover);
    box-shadow: inset 3px 0 0 0 var(--mud-palette-primary);
}

.tpl-row-icon[b-uu5oyfk8p1] {
    flex-shrink: 0;
}

.tpl-row-text[b-uu5oyfk8p1] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
    line-height: 1.35;
}

.tpl-row-title[b-uu5oyfk8p1] {
    font-size: .875rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.tpl-row-desc[b-uu5oyfk8p1] {
    font-size: .74rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ═══════ Telefon sütunu ═══════
   Siyahı 18 sətirdir; telefon yapışqan olmasa aşağı sürüşəndə ekrandan
   çıxır və seçim nəticəsi görünməz qalır.                                */

.tpl-phone-col[b-uu5oyfk8p1] {
    position: sticky;
    top: 88px;      /* dense appbar + konteyner boşluğu */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tpl-phone-note[b-uu5oyfk8p1] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    font-size: .74rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

/* Kiçik ekranda yapışqanlıq mənasızdır — telefon siyahının altına düşür. */
@media (max-width: 959px) {
    .tpl-phone-col[b-uu5oyfk8p1] {
        position: static;
        margin-top: 24px;
    }
}
/* /Pages/Crm/CustomersPage.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════════
   MUSTERI SIYAHISI — AVATARIN BAS HERFLERI (21.09.2026)
   ══════════════════════════════════════════════════════════════════════════

   Sistem sahibi: «ad ve soyadin bas herflerini soldaki hissede ORTALAYARAQ
   yerlesdir — hazirda sadece ad var ve o da biraz YUXARIDA durur».

   OLCULDU: `MudAvatar` mezmunu flex ile merkezleyir, lakin metnin oz setir
   hundurluyu (`line-height`) avatarin icinde qalir ve herfi bir nece piksel
   yuxari itelayir. `Style="font-size: .8rem"` bunu daha da pisletmisdi:
   font kicildikce setir qutusu ile herfin optik merkezi arasindaki ferq
   nisbeten boyuyur.

   ⚠️ `::deep` VACIBDIR: `MudAvatar` usaq komponentdir, sahə izolyasiyasi
      olmadan qayda ona catmir (CLAUDE.md → UI sinfi → `::deep`).
   ══════════════════════════════════════════════════════════════════════════ */

[b-t34xq7pcp2] .crm-initials {
    font-size: .75rem;
    letter-spacing: .02em;

    /* Herf QUTUNUN merkezinde: setir hundurluyu 1 olur, yeni qutu herfin
       oz boyu qeder qalir ve flex merkezlemesi dogru isleyir. */
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* /Pages/Hr/LeaveCalendarPage.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════════
   MƏZUNİYYƏT TƏQVİMİ — DÖVR XƏTTİ (18.09.2026)
   ══════════════════════════════════════════════════════════════════════════

   🔴 EKRANIN ƏSAS FİKRİ: hər sətirdə seçilmiş DÖVR bir cığırdır, qayıblıq
      isə onun içindəki doldurulmuş hissədir. Beləliklə «bu tarixdə kim
      yoxdur» sualı GÖZLƏ cavablanır — əvvəl 40 sətrin tarixləri beyində
      müqayisə olunurdu.

   ⚠️ Faiz dəyərləri `style` atributundan gəlir (`BarStyle`) — CSS-də sabit
      ola bilməz, çünki dövr istifadəçinin seçimidir.

   ⚠️ Fayl SCOPED-dir → adi HTML elementləri üçündür.                       */

/* ── Süzgəc zolağı ───────────────────────────────────────────────────── */
.hrl-board[b-xbor5nw8sq] {
    margin-top: 1rem;
}

.hrl-board__bar[b-xbor5nw8sq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: .75rem;
}

.hrl-tabs__count[b-xbor5nw8sq] {
    margin-left: .45rem;
    padding: 0 .4rem;
    min-width: 1.35rem;
    display: inline-block;
    text-align: center;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    background: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-secondary);
}

.hrl-tabs__count--warn[b-xbor5nw8sq] {
    background: color-mix(in srgb, var(--mud-palette-warning) 20%, transparent);
    color: var(--mud-palette-warning);
}

/* Miqyas: zolağın hansı aralığı göstərdiyi YAZILIR — izahsız rəngli cığır
   bəzək kimi oxunur. */
.hrl-scale[b-xbor5nw8sq] {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 180px;
    font-size: .72rem;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
}

.hrl-scale__line[b-xbor5nw8sq] {
    flex: 1 1 auto;
    height: 1px;
    background: var(--mud-palette-lines-default);
}

/* ── Sətirlər ────────────────────────────────────────────────────────── */
.hrl-list[b-xbor5nw8sq] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

/* `minmax(0, …)` MƏCBURİDİR — onsuz uzun ad sütunu genişləndirir və
   cığırlar sətirdən sətirə sürüşür, yəni müqayisə İMKANSIZ olur. */
.hrl-row[b-xbor5nw8sq] {
    --hrl-tone: var(--mud-palette-info);
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) 7rem minmax(0, 2fr) 11rem;
    grid-template-areas: "who kind track status";
    align-items: center;
    gap: .85rem;
    padding: .7rem .9rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-left: 3px solid var(--hrl-tone);
    border-radius: 14px;
    background: var(--mud-palette-surface);
}

/* Qayıblığın növü — tək mənbə buradır, C#-da ikinci xəritə saxlanmır.
   1 məzuniyyət · 2 xəstəlik · 3 ödənişsiz · 4 təlim. */
.hrl-row[data-kind="1"][b-xbor5nw8sq] { --hrl-tone: var(--mud-palette-info); }
.hrl-row[data-kind="2"][b-xbor5nw8sq] { --hrl-tone: var(--mud-palette-error); }
.hrl-row[data-kind="3"][b-xbor5nw8sq] { --hrl-tone: var(--mud-palette-text-secondary); }
.hrl-row[data-kind="4"][b-xbor5nw8sq] { --hrl-tone: var(--mud-palette-success); }

.hrl-row__who[b-xbor5nw8sq] {
    grid-area: who;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.hrl-row__kind[b-xbor5nw8sq] {
    grid-area: kind;
    min-width: 0;
}

.hrl-row__name[b-xbor5nw8sq] {
    font-size: .9rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    overflow-wrap: anywhere;
}

.hrl-row__role[b-xbor5nw8sq] {
    font-size: .74rem;
    color: var(--mud-palette-text-secondary);
}

.hrl-kind[b-xbor5nw8sq] {
    display: inline-block;
    padding: .12rem .5rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--hrl-tone) 45%, transparent);
    background: color-mix(in srgb, var(--hrl-tone) 12%, transparent);
    color: var(--hrl-tone);
    font-size: .74rem;
    font-weight: 700;
    white-space: nowrap;
}

/* ── Dövr xətti ──────────────────────────────────────────────────────── */
.hrl-row__track[b-xbor5nw8sq] {
    grid-area: track;
    min-width: 0;
}

.hrl-track[b-xbor5nw8sq] {
    position: relative;
    height: 8px;
    border-radius: 999px;
    background: var(--mud-palette-lines-default);
    overflow: hidden;
}

/* `margin-inline-start` — `left` deyil: sənəd sağdan sola oxunanda da
   düzgün tərəfdən başlayır (məntiqi ox). */
.hrl-track__fill[b-xbor5nw8sq] {
    height: 100%;
    border-radius: 999px;
    background: var(--hrl-tone);
}

.hrl-row__dates[b-xbor5nw8sq] {
    margin-top: .3rem;
    font-size: .76rem;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
}

.hrl-row__days[b-xbor5nw8sq] {
    margin-left: .4rem;
    padding: 0 .35rem;
    border-radius: 999px;
    background: var(--mud-palette-action-default-hover);
    font-size: .7rem;
}

/* ── Vəziyyət ────────────────────────────────────────────────────────── */
.hrl-row__status[b-xbor5nw8sq] {
    grid-area: status;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .25rem;
}

.hrl-pill[b-xbor5nw8sq] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .15rem .5rem;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 700;
    white-space: nowrap;
}

.hrl-pill--ok[b-xbor5nw8sq] {
    background: color-mix(in srgb, var(--mud-palette-success) 14%, transparent);
    color: var(--mud-palette-success);
}

.hrl-pill--wait[b-xbor5nw8sq] {
    background: color-mix(in srgb, var(--mud-palette-warning) 16%, transparent);
    color: var(--mud-palette-warning);
}

.hrl-pill--off[b-xbor5nw8sq] {
    background: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-secondary);
}

.hrl-row__note[b-xbor5nw8sq] {
    font-size: .7rem;
    line-height: 1.35;
    color: var(--mud-palette-text-secondary);
}

/* Dar ekranda sütunlar yığılır; cığır TAM ENİ alır — o, ekranın əsas
   məlumatıdır və sıxılmamalıdır. */
/* Dar ekranda iki sətir:
     ① ad + vəziyyət (qərar sətri)
     ② növ + dövr xətti (vaxt sətri)
   Cığır TAM ENİ alır — o, ekranın əsas məlumatıdır və sıxılmamalıdır. */
@media (max-width: 1100px) {
    .hrl-row[b-xbor5nw8sq] {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "who  who   status"
            "kind track track";
        gap: .5rem .7rem;
    }

    .hrl-row__status[b-xbor5nw8sq] {
        align-items: flex-end;
        text-align: end;
    }
}
/* /Pages/Inventory/BomPage.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════════
   XİDMƏTİN TƏRKİBİ — İKİ PANEL (18.09.2026)
   ══════════════════════════════════════════════════════════════════════════

   🔴 PANELLƏR EYNİ ÇƏKİDƏ DEYİL. Əvvəl hər ikisi eyni `MudPaper` idi və göz
      hansının seçim, hansının iş sahəsi olduğunu bilmirdi. İndi sol panel
      SÖNÜK fondadır (seçim), sağ panel SƏTHDƏDİR (iş) — Material-ın öz
      «elevation ≈ diqqət» qaydası.

   ⚠️ Fayl SCOPED-dir → yalnız adi HTML elementləri. MudBlazor komponentlərinə
      verilən siniflər (`bom-search`, `bom-add__qty` …) yalnız SAHƏ ÖLÇÜSÜ
      üçündür və `::deep` ilə yazılır.                                       */

.bom-grid[b-r461e9u93f] {
    display: grid;
    grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

/* Dar ekranda seçim panelı YUXARIDA qalır — addım sırası pozulmamalıdır. */
@media (max-width: 960px) {
    .bom-grid[b-r461e9u93f] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.bom-pane[b-r461e9u93f] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 1rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 16px;
}

.bom-pane--pick[b-r461e9u93f] {
    background: var(--mud-palette-background-grey);
}

.bom-pane--work[b-r461e9u93f] {
    background: var(--mud-palette-surface);
}

.bom-pane__head[b-r461e9u93f] {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .85rem;
}

/* Addım nömrəsi: ekran ARDICIL axındır (əvvəl xidmət, sonra material) və
   bu, tək görünən sübutdur. */
.bom-step[b-r461e9u93f] {
    flex: 0 0 auto;
    width: 1.6rem;
    height: 1.6rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font-size: .8rem;
    font-weight: 700;
}

.bom-pane__title[b-r461e9u93f] {
    font-size: .98rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.bom-pane__hint[b-r461e9u93f] {
    font-size: .78rem;
    color: var(--mud-palette-text-secondary);
    overflow-wrap: anywhere;
}

/* ── Xidmət siyahısı ─────────────────────────────────────────────────── */
[b-r461e9u93f] .bom-search {
    margin-bottom: .6rem;
}

/* Hündürlük SABİTDİR: siyahı uzananda sağ panel aşağı sürüşməməlidir.
   `clamp` kiçik ekranda da işlək qalır. */
.bom-services[b-r461e9u93f] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: clamp(220px, 46vh, 520px);
    overflow-y: auto;
    padding-right: 2px;
}

.bom-services__empty[b-r461e9u93f] {
    margin: 0;
    padding: 1rem .25rem;
    font-size: .82rem;
    color: var(--mud-palette-text-secondary);
}

.bom-service[b-r461e9u93f] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    width: 100%;
    padding: .5rem .65rem;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: .86rem;
    text-align: start;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}

.bom-service:hover[b-r461e9u93f] {
    background: var(--mud-palette-action-default-hover);
}

/* 🔴 SEÇİLİ SƏTİR YALNIZ RƏNGLƏ VERİLMİR: sol zolaq + qalın mətn də var.
   Rəng tək siqnal olsaydı rəng görmə fərqi olan istifadəçi seçimi itirərdi. */
.bom-service.is-active[b-r461e9u93f] {
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    border-color: color-mix(in srgb, var(--mud-palette-primary) 40%, transparent);
    font-weight: 700;
}

.bom-service__name[b-r461e9u93f] {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* ── Material əlavə sətri ────────────────────────────────────────────── */
.bom-add[b-r461e9u93f] {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: .6rem;
    padding: .75rem;
    margin-bottom: .85rem;
    border: 1px dashed var(--mud-palette-lines-default);
    border-radius: 12px;
    background: var(--mud-palette-background-grey);
}

[b-r461e9u93f] .bom-add__product {
    flex: 1 1 220px;
    min-width: 180px;
}

[b-r461e9u93f] .bom-add__qty {
    flex: 0 0 130px;
}

/* ── Material siyahısı ───────────────────────────────────────────────── */
.bom-mats[b-r461e9u93f] {
    display: flex;
    flex-direction: column;
}

.bom-mats__head[b-r461e9u93f],
.bom-mat[b-r461e9u93f] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 8.5rem 2.5rem;
    align-items: center;
    gap: .5rem;
}

.bom-mats__head[b-r461e9u93f] {
    padding: 0 .25rem .35rem;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.bom-mat[b-r461e9u93f] {
    padding: .35rem .25rem;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.bom-mat:last-child[b-r461e9u93f] {
    border-bottom: none;
}

.bom-mat__name[b-r461e9u93f] {
    font-size: .88rem;
    color: var(--mud-palette-text-primary);
    overflow-wrap: anywhere;
}

/* Rəqəm sütunu SAĞA düzülür və eyni enli rəqəm işlədir — 0.5 ilə 12
   bir-birinin altında oturur. */
.bom-mats__num[b-r461e9u93f] {
    text-align: end;
    font-variant-numeric: tabular-nums;
}

.bom-mat__qty[b-r461e9u93f] {
    font-size: .95rem;
    color: var(--mud-palette-text-primary);
}

.bom-mat__unit[b-r461e9u93f] {
    margin-left: .25rem;
    font-size: .74rem;
    color: var(--mud-palette-text-secondary);
}

@media (max-width: 600px) {
    .bom-mats__head[b-r461e9u93f] {
        display: none;
    }

    .bom-mat[b-r461e9u93f] {
        grid-template-columns: minmax(0, 1fr) auto 2.5rem;
    }
}
/* /Pages/Inventory/NewPurchasePage.razor.rz.scp.css */
/* === Pages/Inventory/NewPurchasePage.razor.css === */
.purchase-table[b-a3qccv59lz] {
    width: 100%;
    border-collapse: collapse;
}

    .purchase-table th[b-a3qccv59lz] {
        text-align: left;
        font-size: 12px;
        color: var(--mud-palette-text-secondary);
        padding: 8px;
        border-bottom: 2px solid var(--mud-palette-lines-default);
    }

    .purchase-table td[b-a3qccv59lz] {
        padding: 6px 8px;
        border-bottom: 1px solid var(--mud-palette-lines-default);
        vertical-align: middle;
    }

    .purchase-table .text-right[b-a3qccv59lz] {
        text-align: right;
    }
/* /Pages/Onboarding/Profile/ProfilePage.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════════
   ProfilePage.razor.css — "Klinika və Şəxsi Profil" ekranının stilləri

   NİYƏ BU FAYL YARANDI (2026-08-04):
   Əvvəl bütün bu qaydalar .razor faylında `style="..."` atributları kimi
   yazılmışdı — sağdakı önizləmə kartında tək bir div-də 300+ simvolluq
   inline stil var idi. Bunun iki zərəri vardı:

     1) PERFORMANS — Blazor hər render-də bu uzun sətirləri yenidən qurur və
        DOM diff-ində atribut kimi müqayisə edir. MudTextField hər klaviş
        vuruşunda StateHasChanged çağırdığı üçün forma doldurarkən bu
        sətirlər hərfin hər birində yenidən emal olunurdu.

     2) BAXIM — eyni rəng/radius onlarla yerdə təkrarlanırdı, birini
        dəyişmək digərlərini unutmaq demək idi.

   ══════════════════════════════════════════════════════════════════════════
   🔴 BURADA BİR DƏFƏ EDİLMİŞ SƏHV — TƏKRARLAMA (2026-08-04)
   ══════════════════════════════════════════════════════════════════════════
   Blazor scoped CSS build zamanı yalnız BU KOMPONENTİN ÖZ HTML elementlərinə
   `b-xxxxx` atributu əlavə edir. UŞAQ KOMPONENTLƏRƏ (MudCard, MudIconButton,
   MudText, MudCardContent …) bu atribut ƏLAVƏ EDİLMİR.

   Yəni:
       <MudIconButton Class="profile-cover-edit" />      ← markup
       .profile-cover-edit { position: absolute; ... }   ← BU FAYL

   qaydası HEÇ VAXT TƏTBİQ OLUNMUR, çünki brauzerdə selektor
   `.profile-cover-edit[b-xxxxx]` olur, düymədə isə həmin atribut yoxdur.
   Nəticə: şəkil yükləmə fotoaparat ikonları `position: absolute` almadı,
   adi axına düşüb SOL YUXARI küncdə qaldı.

   ✅ DÜZGÜN İKİ YOL:
     a) Yaxınlıqda ADİ HTML valideyn varsa → `::deep` istifadə et:
            .profile-cover ::deep .profile-cover-edit { ... }
        (kompilyasiyadan sonra: `.profile-cover[b-xxx] .profile-cover-edit`)
     b) Adi HTML valideyn YOXDURSA (məs. MudItem-in birbaşa uşağı olan
        MudCard) → CSS sinfi işə yaramır, inline `Style="..."` saxla.

   ⚠️ Bu fayla yeni qayda əlavə edəndə əvvəlcə soruş:
      "hədəf element .razor-da adi HTML teqidir, yoxsa Mud komponenti?"
   ══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────── BÖLMƏ BAŞLIQLARI ─────────────────────────
   Sol tərəfdəki forma əvvəl 10 sahədən ibarət YASTI bir siyahı idi.
   Başlıqlar məntiqi qrupları ayırır — göz hara baxacağını bilir. */
.profile-section[b-yj2hx2q1zk] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.profile-section-line[b-yj2hx2q1zk] {
    flex: 1;
    height: 1px;
    background: var(--mud-palette-divider);
}

/* ───────────────────────── ÖNİZLƏMƏ KARTI ───────────────────────────
   QEYD: kartın özünün (MudCard) və gövdəsinin (MudCardContent) stilləri
   markup-da inline `Style`-dadır — yuxarıdakı (b) bəndi: onların bu
   komponentdə adi HTML valideyni yoxdur, ona görə sinif işləmir. */

/* Üst arxa fon zolağı */
.profile-cover[b-yj2hx2q1zk] {
    position: relative;
    height: 130px;
    border-radius: 16px 16px 0 0;
    overflow: hidden;
    background: var(--mud-palette-primary);
}

.profile-cover-img[b-yj2hx2q1zk] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Mətn kontrastı üçün qaranlıqlaşdırıcı qat */
.profile-cover-scrim[b-yj2hx2q1zk] {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, .10) 0%, rgba(0, 0, 0, .50) 100%);
}

/* ───────────────────────── AVATAR + AD ─────────────────────────────
   ⚠️ BURADA ƏVVƏL NƏ SƏHV İDİ (istifadəçi "aşağı qaçıb" deyirdi):
   sətir `align-items: flex-end` idi, AMMA ad blokuna əlavə olaraq
   `margin-top: 52px` verilmişdi. flex-end onsuz da hər iki elementi
   aşağı kənara düzür — üstəlik verilən 52px sətrin hündürlüyünü artırıb
   adı avatardan görünəcək qədər aşağı salırdı.

   İndi sehrli rəqəm yoxdur: flex-end düzləşdirir, yalnız 4px optik
   düzəliş qalır (mətnin descender boşluğunu kompensasiya edir). */
/* 🔴 12.08.2026 — AD ARXA FONUN ÜSTÜNDƏ OXUNMURDU.
   Əvvəl `display: flex` idi: ad avatarın YANINDA dururdu və `margin-top: -44px`
   ikisini birlikdə yuxarı çəkdiyi üçün ad şəklin üstünə düşürdü. Arxa fon
   istifadəçinin öz fotosudur — açıq şəkildə ağ mətn, tünd şəkildə tünd mətn
   itirdi. `scrim` qatı kifayət etmirdi, çünki mətn qatın YUXARI, ən şəffaf
   hissəsinə düşürdü.

   İndi YALNIZ avatar şəklin üstünə çıxır; ad və klinika çipi onun ALTINDA,
   kartın öz fonundadır — hər temada, hər fotoda oxunaqlıdır. */
/* ⚠️ `.profile-identity` 114-də SİLİNDİ — markupda artıq yoxdur.
   Yerinə `.profile-hero__body` gəldi (aşağıda): eyni «avatar fonun üstünə
   çıxır» naxışı, lakin dar sütunda deyil, TAM ENLİ başlıq kartında. */

.profile-avatar-wrap[b-yj2hx2q1zk] {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
}

.profile-avatar[b-yj2hx2q1zk] {
    height: 88px;
    width: 88px;
    border-radius: 50%;
    border: 3px solid var(--mud-palette-surface);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
    overflow: hidden;
    background: #fff;
}

    .profile-avatar img[b-yj2hx2q1zk] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.profile-hero__ident[b-yj2hx2q1zk] {
    min-width: 0; /* uzun ad sətri partlatmasın */
    flex: 1;
}

/* MudText → ::deep MƏCBURİDİR (bax faylın başındakı izah) */
.profile-page[b-yj2hx2q1zk]  .profile-name {
    margin: 0 0 4px;
    line-height: 1.2;
    /* Çox uzun ad kartı yana genişləndirməsin */
    overflow-wrap: anywhere;
}

/* ───────────────── ŞƏKİL DƏYİŞMƏ DÜYMƏLƏRİ (FOTOAPARAT) ─────────────
   Ölçü və mövqe ORİJİNAL dizaynla eynidir — arxa fon üçün sağ yuxarıda
   34px ağ dairə, avatar üçün sağ aşağıda 26px dairə.

   `::deep` olmadan bu qaydalar TƏTBİQ OLUNMUR və ikonlar sola qaçır —
   məhz bu baş vermişdi. Valideyn `.profile-cover` / `.profile-avatar-wrap`
   adi <div> olduğu üçün ::deep buradan işləyir.

   MudIconButton-un öz `padding`-i sıfırlanır, əks halda 34px dairə
   içəridən sıxılır. */
.profile-cover[b-yj2hx2q1zk]  .profile-cover-edit {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 20;
    width: 34px;
    height: 34px;
    min-width: 34px;
    padding: 0;
    border-radius: 50%;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .1);
    color: var(--mud-palette-primary);
    box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
}

    .profile-cover[b-yj2hx2q1zk]  .profile-cover-edit:hover {
        background: #fff;
    }

.profile-avatar-wrap[b-yj2hx2q1zk]  .profile-avatar-edit {
    position: absolute;
    bottom: 2px;
    right: 2px;
    z-index: 20;
    width: 26px;
    height: 26px;
    min-width: 26px;
    padding: 0;
    border-radius: 50%;
    background: var(--mud-palette-surface);
    border: 1.5px solid var(--mud-palette-divider);
    color: var(--mud-palette-primary);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
}

    .profile-avatar-wrap[b-yj2hx2q1zk]  .profile-avatar-edit:hover {
        background: var(--mud-palette-surface);
    }

    /* Orijinaldakı `Style="font-size: 14px;"` — 26px dairəyə sığması üçün */
    .profile-avatar-wrap[b-yj2hx2q1zk]  .profile-avatar-edit .mud-icon-root {
        font-size: 14px;
    }

/* ───────────────────────── BIO SİTATI ─────────────────────────────── */
.profile-bio[b-yj2hx2q1zk] {
    margin-bottom: 20px;
    padding: 12px 14px;
    background: var(--mud-palette-background-grey);
    border-radius: 8px;
    border-left: 2px solid var(--mud-palette-primary);
}

/* Redaktə rejimindən kənarda sol tərəfdəki Bio qutusu */
.profile-bio-readonly[b-yj2hx2q1zk] {
    background: var(--mud-palette-background-grey);
    border: 1px solid var(--mud-palette-lines-default);
    min-height: 80px;
}

.profile-editor-frame[b-yj2hx2q1zk] {
    overflow: hidden;
    background-color: var(--mud-palette-background-grey);
}

/* ───────────────────────── ƏLAQƏ SƏTİRLƏRİ ────────────────────────── */
.profile-contact[b-yj2hx2q1zk] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.profile-contact-row[b-yj2hx2q1zk] {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .profile-contact-row.is-multiline[b-yj2hx2q1zk] {
        align-items: flex-start;
    }

    /* MudText → ::deep */
    .profile-contact-row[b-yj2hx2q1zk]  .profile-contact-text {
        line-height: 1.4;
        color: var(--mud-palette-text-secondary);
        overflow-wrap: anywhere;
    }

/* ───────────────────────── SOSİAL MEDİA ───────────────────────────
   ⚠️ PERFORMANS QEYDİ: əvvəl hover effekti üçün markup-da
      `@onmouseover="@(() => {})"` və `@onmouseout="@(() => {})"`
      yazılmışdı. Bu BOŞ Blazor hadisələri heç nə etmirdi, amma hər
      siçan hərəkətində komponenti YENİDƏN RENDER etdirirdi.
      Hover — sırf vizual effektdir, C#-a çıxmamalıdır. CSS ilə edilir. */
.profile-social[b-yj2hx2q1zk] {
    margin-top: 16px;
}

    /* MudText → ::deep */
    .profile-social[b-yj2hx2q1zk]  .profile-social-title {
        color: var(--mud-palette-text-secondary);
        text-transform: uppercase;
        letter-spacing: .5px;
    }

.profile-social-list[b-yj2hx2q1zk] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.profile-social-link[b-yj2hx2q1zk] {
    text-decoration: none;
    display: block;
    border-radius: 50%;
}

.profile-social-dot[b-yj2hx2q1zk] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: transform .15s ease, box-shadow .15s ease;
}

.profile-social-link:hover .profile-social-dot[b-yj2hx2q1zk] {
    transform: translateY(-2px) scale(1.06);
    box-shadow: 0 4px 10px rgba(0, 0, 0, .2);
}

.profile-social-link:focus-visible .profile-social-dot[b-yj2hx2q1zk] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* Hərəkətə həssas istifadəçilər üçün animasiyanı söndür */
@media (prefers-reduced-motion: reduce) {
    .profile-social-dot[b-yj2hx2q1zk] {
        transition: none;
    }

    .profile-social-link:hover .profile-social-dot[b-yj2hx2q1zk] {
        transform: none;
    }
}

/* !! #75 - `.profile-link-box` / `.profile-link-text` BURADAN SILINDI.
   Yazilma linki artiq `.profile-linkcard`-dir (basliq setri + kopyalama
   duymesi). Olu qayda saxlamaq novbeti oxuyani yanlis selektora aparir.
   Yeni terif: <<#75 - YAZILMA LINKI KARTI>> bolmesi. */

.profile-link-slug[b-yj2hx2q1zk] {
    color: var(--mud-palette-primary);
    font-weight: 500;
}

/* ───────────────────── YADDA SAXLA — YAPIŞAN ZOLAQ ─────────────────
   Forma uzundur; düymə ən altda olanda istifadəçi onu görmək üçün hər
   dəfə aşağı sürüşməyə məcbur idi. İndi zolaq pəncərənin altına yapışır.

   İKİ ŞƏRT (biri pozulsa yapışma İŞLƏMİR, sadəcə adi düymə görünür):
     1) Element <MudGrid>/<MudItem>-in İÇİNDƏ OLMAMALIDIR — sticky ən yaxın
        blok konteynerinə görə işləyir; MudItem zolaqla eyni hündürlükdə
        olduğu üçün yapışmağa yer qalmır. Ona görə markup-da zolaq
        MudForm-dan sonra, birbaşa MudCard-ın uşağı kimi durur.
     2) Sürüşdürən element `.mud-main-content`-dir (index.html-də
        overflow-y: auto verilib). Aradakı heç bir valideyn
        `overflow: hidden` almamalıdır. MudBlazor 9-da `.mud-card`
        yalnız `display:flex` verir — hidden YOXDUR, yəni təhlükəsizdir.

   Mənfi yan boşluqlar kartın `pa-4` (16px) padding-ini ləğv edir ki,
   zolaq kartın tam eninə yayılsın və həqiqi alət paneli kimi görünsün.

   Bu element adi <div>-dir, ona görə ::deep lazım deyil. */
/* ══════════════════════════════════════════════════════════════════════
   🔴 115 — «KƏNARLARI GÖZƏ BATIR, ÖLÇÜLƏR HƏR TABDA BAŞQA CÜRDÜR»
   ══════════════════════════════════════════════════════════════════════
   ÖLÇÜLƏN SƏBƏB (zövq deyil):

   ① MƏNFİ KƏNAR BOŞLUQ HEÇ NƏYİ LƏĞV ETMİRDİ.
      Qayda `margin: 8px -16px -16px` idi və şərhi deyirdi ki, bu,
      kartın `pa-4` (16 px) daxili boşluğunu ləğv edir. LAKİN kartda
      `pa-4` YOXDUR — markup `<MudCard Class="rounded-lg mt-4
      profile-panel">`-dir. Yəni ləğv ediləcək boşluq mövcud deyildi və
      zolaq kartın SOL-SAĞINDAN 16 px BAYIRA çıxırdı, altdan isə künc
      radiusunun üstünə minirdi. «Kənarları gözə batır» məhz budur.

   ② ZOLAĞIN YERİ HƏR TABDA DƏYİŞİRDİ.
      Zolaq `position: sticky`-dir və tab məzmunu qısa olanda (məs.
      «Sosial») kartın alt kənarında, uzun olanda (məs. «Klinika»)
      ekranın altında dururdu. İstifadəçi «yadda saxla»nı hər tabda
      BAŞQA YERDƏ axtarırdı.

      Həll: tab gövdəsinə minimum hündürlük verildi (aşağıda
      `.profile-tabpanel`) — beləliklə zolaq HƏMİŞƏ eyni yerdədir.
   ══════════════════════════════════════════════════════════════════════ */
.profile-save-bar[b-yj2hx2q1zk] {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    /* ⚠️ MƏNFİ KƏNAR YOXDUR — zolaq kartın öz eni qədərdir. */
    margin: 0;
    padding: 14px 20px;
    background: var(--mud-palette-surface);
    border-top: 1px solid var(--mud-palette-divider);
    /* Kartın alt künclərinə OTURUR — əks halda zolağın düz küncü kartın
       yuvarlaq küncündən bayıra çıxır və «kəsik» kimi görünür. */
    border-radius: 0 0 12px 12px;
}

@media (max-width: 600px) {
    .profile-save-bar[b-yj2hx2q1zk] {
        padding: 12px;
    }
}

/* ───────────────────────── HƏKİMLƏR ZOLAĞI ────────────────────────── */
.profile-title-row[b-yj2hx2q1zk] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

.profile-title-row[b-yj2hx2q1zk]  .profile-title {
    margin: 0;
    /* Düymələri sətrin sonuna itələmir — istək «başlığın YANINDAKI boşluğa»
       idi, yəni mətnin dərhal ardınca. */
    flex: 0 1 auto;
    min-width: 0;
}

.profile-title-row[b-yj2hx2q1zk]  .profile-doctors-btn {
    flex-shrink: 0;
}

.profile-title-row[b-yj2hx2q1zk]  .profile-doctors-chip {
    margin: 0;
    flex-shrink: 0;
}

/* Telefonda başlıq tam sətir tutur, düymə və çip altına düşür. */
@media (max-width: 600px) {
    .profile-title-row[b-yj2hx2q1zk]  .profile-title {
        flex: 1 1 100%;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   VİTRİN ZOLAĞININ BAŞLIĞI (113)
   ══════════════════════════════════════════════════════════════════════════
   Şikayət: «hər şey bir tərəfdə, yazılar daşıb». Səbəbin bir hissəsi
   vizual idi — iki yeni kart formanın DAVAMI kimi oxunurdu və sağ yarı
   boş qalırdı. Başlıq sətri zolağı ayırır: göz «yeni bölmə» görür,
   boşluq isə nəzərdə tutulmuş kimi oxunur. */
.showcase-band[b-yj2hx2q1zk] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    margin-top: 4px;
    border-radius: 12px;
    border: 1px solid var(--mud-palette-lines-default, rgba(0,0,0,.1));
    /* Brend rəngi ilə çox açıq dolğu — bölmə «reklam banneri» kimi
       görünməməlidir, sadəcə fərqlənməlidir. */
    background: var(--mud-palette-primary-hover, rgba(15,118,110,.06));
}

.showcase-band__text[b-yj2hx2q1zk] {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* 🔴 13.09.2026 — VİTRİN ŞƏBƏKƏSİ (əvvəl `MudGrid` iki bərabər sütun idi:
   solda iki uzun kart, sağda bir qısa kart → sağ sütun yarıda bitirdi).
   İndi: ① brend (7fr) · görünürlük (5fr) — eyni sətirdə, eyni hündürlükdə;
   ② sertifikatlar TAM ENDƏ. Bütün hüceyrələr ADİ `div`-dir → scoped sinif
   birbaşa işləyir; uşaq komponentlərin kartına isə `::deep` ilə çatılır. */
.showcase-band__actions[b-yj2hx2q1zk] {
    margin-inline-start: auto;
    flex-shrink: 0;
}

.showcase-grid[b-yj2hx2q1zk] {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-areas:
        "brand toggles"
        "certs certs";
    gap: 16px;
    align-items: stretch;
}

.showcase-grid__brand[b-yj2hx2q1zk]   { grid-area: brand;   min-width: 0; }
.showcase-grid__toggles[b-yj2hx2q1zk] { grid-area: toggles; min-width: 0; }
.showcase-grid__certs[b-yj2hx2q1zk]   { grid-area: certs;   min-width: 0; }

/* Üç bölmənin kartı EYNİ vizual dildə: kölgə yox, nazik çərçivə, eyni radius.
   ⚠️ Yalnız KÖK kart hədəflənir (`> .mud-card`) — sertifikat siyahısının
      içindəki kiçik kartlara hündürlük/çərçivə yayılmamalıdır. */
.showcase-grid[b-yj2hx2q1zk]  .brand-root,
.showcase-grid[b-yj2hx2q1zk]  .scv-root,
.showcase-grid[b-yj2hx2q1zk]  .cert-root {
    height: 100%;
}

.showcase-grid[b-yj2hx2q1zk]  .brand-root > .mud-card,
.showcase-grid[b-yj2hx2q1zk]  .scv-root > .mud-card,
.showcase-grid[b-yj2hx2q1zk]  .cert-root > .mud-card {
    height: 100%;
    box-shadow: none;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px;
}

@media (max-width: 1100px) {
    .showcase-grid[b-yj2hx2q1zk] {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "brand"
            "toggles"
            "certs";
    }
}

.showcase-band[b-yj2hx2q1zk]  .showcase-band__hint {
    color: var(--mud-palette-text-secondary);
}


/* ══════════════════════════════════════════════════════════════════════
   114 — KİMLİK BAŞLIĞI (tam en)
   ══════════════════════════════════════════════════════════════════════
   Əvvəl bu məzmun md=5-lik YAPIŞQAN sütunda idi və formanın güzgüsü kimi
   işləyirdi (ad, telefon, ünvan, valyuta, sosial — hamısı solda redaktə
   olunurdu). Sütun formadan qısa olduğu üçün ekranın sağ yarısı boş
   qalırdı: «hər şey bir tərəfdə» şikayətinin mənbəyi məhz bu idi.

   İndi başlıq YALNIZ KİMLİYİ daşıyır — şəkil, ad, klinika, publik link,
   həkim sayı. Təkrarlanan sahələr silindi; onlar onsuz da formadadır. */
.profile-page[b-yj2hx2q1zk]  .profile-hero {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    /* ⚠️ `overflow: hidden` — künc radiusu ilə arxa fon şəklinin künclərini
       BİRLƏŞDİRİR. Əvvəl `visible` idi: fon şəkli düz künclü qalır,
       kartın kənarı isə yuvarlaq — nəticədə şəkil kartın küncündən bir
       neçə piksel bayıra çıxırdı.
       Avatar KLİPLƏNMİR: o, fonun ALTINDAKI sətirdədir və yalnız mənfi
       `margin-top` ilə yuxarı qalxır, yəni kartın İÇİNDƏ qalır. */
    overflow: hidden;
}

/* Fon zolağının öz radiusu ARTIQ LAZIM DEYİL — kart klipləyir.
   İkisi birlikdə olanda radiuslar üst-üstə düşmür və künc «qoşa» görünür. */
.profile-cover[b-yj2hx2q1zk] {
    border-radius: 0;
}
/* ══════════════════════════════════════════════════════════════════════
   🔴 25.08.2026 — FON TAM ENƏ QAYITDI, TƏKRARLAR SİLİNDİ
   ══════════════════════════════════════════════════════════════════════
   Sistem sahibi: «background şəkli çox soldadır, onu tam ortaya qoyaq və
   altındakı zatən sağ tərəfdə təkrarlanan hissələri ləğv edək».

   24.08-də fon sol sütuna salınmışdı (`clamp(300px, 34%, 460px)`) — səbəb
   doğru idi (11:1 nisbətdə foto kəsilirdi), lakin həlli natamam:

     ① geniş ekranda şəkil kartın sol üçdə birində qalırdı — mərkəzsiz;
     ② sağ sütun ƏLAVƏ olundu, aşağıdakı köhnə nüsxə SİLİNMƏDİ →
        paket nişanı, həkim sayı və yazılma linki İKİ DƏFƏ görünürdü.

   İNDİ: fon tam eni tutur, HÜNDÜRLÜYÜ isə 130 → 200 px-ə qalxır.
   ⚠️ Hündürlük ARTIRILMASA fon yenidən 11:1 olar və 24.08-in düzəltdiyi
      «şəkil kəsilir» problemi geri qayıdar. 1400 px eninə 200 px = 7:1;
      real ekranda (≈1100 px məzmun) ≈5.5:1 — adi fotonun mərkəz zolağı
      tam görünür. */
.profile-hero__top[b-yj2hx2q1zk] {
    display: block;
}

.profile-hero__top > .profile-cover[b-yj2hx2q1zk] {
    width: 100%;
    height: clamp(160px, 18vw, 220px);
}

/* ⚠️ #75 — BURADA `.profile-hero__side` TƏRİFİ VAR İDİ VƏ ÖLÜ İDİ.
   Eyni selektor faylın SONUNDA (#71-in 65/35 bölməsində) yenidən yazılır
   və CSS-də sonuncu qalib gəlir. İki tərif oxuyanı çaşdırırdı: burada
   `align-items: flex-end` yazılırdı, faktiki davranış isə `stretch` idi.
   Tərif tək yerdədir — «#71 — BAŞLIQ 65 / 35 BÖLÜNDÜ» bölməsinə bax. */

.profile-hero__side .plan-badge[b-yj2hx2q1zk] {
    margin: 0;
}

/* Köhnə yer (kimlik sətri) — nişan oradan çıxdı, qayda uyğunluq üçün qalır. */
.profile-hero__meta .plan-badge[b-yj2hx2q1zk] {
    margin: 0;
}

.profile-hero__body[b-yj2hx2q1zk] {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 16px;
    padding: 0 20px 18px;
}

/* Avatar fonun üstünə çıxır — profil kartlarının standart naxışı. */
.profile-page[b-yj2hx2q1zk]  .profile-hero .profile-avatar-wrap {
    margin-top: -44px;
}

.profile-hero__meta[b-yj2hx2q1zk] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}

.profile-page[b-yj2hx2q1zk]  .profile-hero__chip {
    margin: 0;
    font-size: 12px;
    height: 24px;
}

/* !! #75 - `.profile-hero__actions`, `.profile-hero__count` ve
   `.profile-link-icon` SILINDI: her ucu markup-dan cixdi (heyet duymesi
   reqem xanasina birlesdi, link karti oz ikonunu dasiyir). Olu scoped
   qayda `::deep` lint-ini de yanlis istiqamete yonleldirir. */

/* ══════════════════════════════════════════════════════════════════════
   114 — TAB PANELİ
   ══════════════════════════════════════════════════════════════════════
   🔴 6 bölmə BİR kartda idi və naviqasiya YOX idi: «valyutanı haradan
      dəyişirəm?» sualının yeganə cavabı sürüşdürmək idi. Tablar hər dəfə
      YALNIZ bir bölməni göstərir — SaaS ayarlar səhifələrinin standartı. */
.profile-page[b-yj2hx2q1zk]  .profile-panel {
    overflow: visible;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
}

/* ══════════════════════════════════════════════════════════════════════
   🔴 20.08.2026 — AŞAĞIDAKI DÖRD QAYDA `::deep` OLMADAN YAZILMIŞDI VƏ
      BİR DƏFƏ DƏ İŞLƏMƏMİŞDİ. Sistem sahibinin şikayəti: «profil
      ekranında hər şey çox kənardadır, bu da görüntü keyfiyyətini pozur».
   ══════════════════════════════════════════════════════════════════════
   ÖLÇÜLƏN SƏBƏB (build çıxışından, `obj/.../ProfilePage.razor.rz.scp.css`):

       yazılan:    .profile-page .profile-tabs .atabs-panel
       kompilyasiya: .profile-page .profile-tabs .atabs-panel[b-93e4yv0l6f]
                                                             ▲
       Blazor scope atributunu SELEKTORUN SON elementinə qoyur. `.atabs-panel`
       isə `AppTabPanel` komponentinin öz markup-ıdır — orada bu atribut
       YOXDUR (o komponentin `.razor.css` faylı da yoxdur). Yəni qayda heç
       bir elementə uyğun gəlmirdi.

   NƏTİCƏ İKİ QAT İDİ:
     ① `padding: 20px` tətbiq olunmadı → `.atabs-panel`-in qlobal
        `tabs.css`-də daxili boşluğu ÜMUMİYYƏTLƏ yoxdur, üstəlik `MudGrid`
        özünə `margin: -12px` verir. Yəni sahələr kartın kənarından
        12 px BAYIRA çıxırdı — «hər şey çox kənardadır» məhz budur.
     ② `min-height: 340px` tətbiq olunmadı → 114-də «yadda saxla zolağı hər
        tabda başqa yerdədir» şikayəti üçün yazılan həll heç vaxt işə
        düşmədi.

   ⚠️ `.profile-panel` (yuxarıda) DÜZGÜN yazılıb — o, `::deep` daşıyır.
      Eyni faylda iki fərqli forma olması səhvin necə keçdiyini izah edir.

   ⚠️ Bunu bir daha buraxmamaq üçün lint testi var:
      `RazorSourceLintTests.Scoped_CSS_ortaq_tab_siniflerini_deep_ile_hedefleyir`
   ══════════════════════════════════════════════════════════════════════ */

/* Tab nişan sətri kartın İÇİNDƏDİR — yuxarıdan və yanlardan eyni boşluq. */
.profile-page[b-yj2hx2q1zk]  .profile-tabs .atabs-nav {
    margin: 20px 20px 0;
}

/* 🔴 MİNİMUM HÜNDÜRLÜK — «hər tabda başqa ölçü» şikayətinin əsas həlli.
   Dəyər ən uzun tabdan (Klinika: 6 sahə + bölmə başlığı ≈ 420 px) deyil,
   ORTA tabdan götürülüb: 420 versək «Sosial» tabında 250 px boş yer
   qalardı. 340 px-də qısa tablarda cüzi boşluq var, uzun tablar isə
   onsuz da böyüyür — «yadda saxla» zolağı yerində qalır. */
.profile-page[b-yj2hx2q1zk]  .profile-tabs .atabs-panel {
    min-height: 340px;
    /* ⚠️ 20px HƏQİQƏTƏN 20px verir: `MudGrid` özünə `margin: -12px`,
       elementlərinə isə `padding: 12px` qoyur — ikisi bir-birini üzr edir,
       yəni sahənin məzmunu tam olaraq panelin daxili kənarından başlayır.
       Bu, «yadda saxla» zolağının 20px-i və tab sətrinin 20px-i ilə eyni
       xəttdir; üç ölçünün eyni olması ekranı «düzülmüş» göstərən şeydir. */
    padding: 20px;
    /* ⚠️ Daşmanın SON səddi: `min-width: 0` olmadan flex/grid uşaqları
       öz `min-content` enini tələb edir və uzun link/ünvan mətni kartı
       yana genişləndirir («çox item daşır çölə»). */
    min-width: 0;
    overflow-wrap: anywhere;
}

@media (max-width: 600px) {
    .profile-page[b-yj2hx2q1zk]  .profile-tabs .atabs-nav {
        margin: 14px 12px 0;
    }

    .profile-page[b-yj2hx2q1zk]  .profile-tabs .atabs-panel {
        min-height: 0;
        padding: 14px 12px;
    }
}

.profile-page[b-yj2hx2q1zk]  .profile-empty-hint {
    color: var(--mud-palette-text-secondary);
}

/* ══════════════════════════════════════════════════════════════════════
   #71 — BAŞLIQ 65 / 35 BÖLÜNDÜ
   ══════════════════════════════════════════════════════════════════════
   Sistem sahibi: «yuxarı şəkil və info olan hissəni 65-35 şəklində bölək».

   🔴 `minmax(0, 65fr)` — SADƏCƏ `65fr` DEYİL. Grid elementinin defolt
      `min-width` dəyəri `auto`-dur, yəni öz min-content enindən kiçilmir;
      uzun yazılma linki (`profile-link-text`) sağ sütunu şişirdib
      nisbəti pozardı. Bu tələ layihədə 113-də ölçülüb.
   ══════════════════════════════════════════════════════════════════════ */
.profile-hero__split[b-yj2hx2q1zk] {
    display: grid;
    grid-template-columns: minmax(0, 65fr) minmax(0, 35fr);
    align-items: stretch;
}

.profile-hero__left[b-yj2hx2q1zk] {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Fon artıq SOL sütunun eninə görə ölçülür.
   ⚠️ Nisbət: 65 % × ~1100 px ≈ 715 px enə 210 px → ~3.4:1.
      11:1-də adi fotonun 80 %-i kəsilirdi (24.08 ölçüsü); 3.4:1-də
      mərkəz zolağı tam görünür. */
.profile-hero__top > .profile-cover[b-yj2hx2q1zk] {
    width: 100%;
    height: clamp(170px, 19vw, 230px);
}

/* Sağ sütun: kartın öz sətri — yuxarıdan aşağı düzülür və fon
   zolağı ilə EYNİ hündürlükdən başlayır. */
.profile-hero__side[b-yj2hx2q1zk] {
    /* ⚠️ `margin-inline-start: auto` GÖTÜRÜLDÜ: blok artıq sətrin sağ ucu
       deyil, öz GRID sütunudur. Qalsaydı sütunun içində sağa yapışardı. */
    margin-inline-start: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 10px;
    padding: 20px 20px 18px;
    border-inline-start: 1px solid var(--mud-palette-lines-default);
}

/* ══════════════════════════════════════════════════════════════════════
   #75 — RƏQƏM XANALARI: SƏTİR-SƏTİR, KEÇİD KİMİ
   ══════════════════════════════════════════════════════════════════════
   🔴 ƏVVƏLKİ QÜSUR ÖLÇÜLDÜ: iki xana `repeat(2, 1fr)` ilə yan-yana idi.
      35 %-lik sütunda hər xanaya ~155 px düşür və içində ikon + rəqəm +
      etiket BİR sətirdə sıxılırdı; `.profile-stat__cap`-də
      `white-space: nowrap` + `text-overflow: ellipsis` olduğu üçün
      «Xidmətlər» KƏSİLİRDİ (sistem sahibinin ekran şəklində görünür).

   ✅ İndi xanalar bir-birinin ALTINDADIR və mətn iki sətrə bölünür:
      rəqəm üstdə, etiket altda. Tam en → kəsilməyə səbəb qalmır, ona görə
      `ellipsis` da GÖTÜRÜLDÜ (o, problemi gizlədirdi, həll etmirdi).
   ══════════════════════════════════════════════════════════════════════ */
/* 🔴 13.09.2026 — «HƏR BİRİ BİR ÖLÇÜDƏ, BİR HÜNDÜRLÜKDƏ DURUR»
   Sistem sahibi: «sağdakı HƏKİMLƏR, XİDMƏTLƏR, ULDUZLAR olan bölməni
   səliqəyə sal, standartlaşdır».

   ÖLÇÜLƏN SƏBƏB: iki fərqli kart dili var idi — `.profile-stat` (sətir,
   ikon + rəqəm + ox) və `.profile-rating` (başqa padding, `margin-top`,
   iki-üç sətirlik mətn). Nəticədə üç xana üç fərqli hündürlükdə idi.

   İNDİ: TƏK KART DİLİ, bərabər ölçülü şəbəkə. Hər xana eyni quruluşdadır:
   ikon (üstdə) · rəqəm · etiket. Reytinq də `.profile-stat`-dır, yalnız
   ulduz rəngini modifikator verir. `min-height` + `grid` → üç xana HƏMİŞƏ
   eyni hündürlükdədir, mətnin uzunluğundan asılı olmayaraq.

   ⚠️ `ellipsis` YOXDUR (#75 dərsi): etiket sınır, kəsilmir. */
.profile-hero__stats[b-yj2hx2q1zk] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
    gap: 8px;
}

/* Xana `<a>`-dır: bütün sahə toxunula bilən olmalıdır (mobil hədəf ölçüsü). */
.profile-stat[b-yj2hx2q1zk] {
    position: relative;
    min-width: 0;
    min-height: 104px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    padding: 12px 8px 10px;
    border-radius: 12px;
    background-color: var(--mud-palette-background-grey);
    border: 1px solid transparent;
    color: inherit;
    text-align: center;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}

    .profile-stat:hover[b-yj2hx2q1zk] {
        background-color: var(--mud-palette-action-default-hover);
        border-color: var(--mud-palette-lines-default);
        transform: translateY(-1px);
    }

    /* Klaviatura ilə gəzən istifadəçi hansı xanada olduğunu görməlidir. */
    .profile-stat:focus-visible[b-yj2hx2q1zk] {
        outline: 2px solid var(--mud-palette-primary);
        outline-offset: 2px;
    }

.profile-stat__ico[b-yj2hx2q1zk] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background-color: var(--mud-palette-primary-hover);
    color: var(--mud-palette-primary);
}

/* Ulduz ARDICIL RƏNGDƏDİR — istifadəçi onu Google-da da belə tanıyır. */
.profile-stat--rating .profile-stat__ico[b-yj2hx2q1zk] {
    color: #f59e0b;
    background-color: rgb(245 158 11 / 14%);
}

.profile-stat__num[b-yj2hx2q1zk] {
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.profile-stat__num--empty[b-yj2hx2q1zk] {
    color: var(--mud-palette-text-secondary);
}

.profile-stat__max[b-yj2hx2q1zk] {
    margin-inline-start: 1px;
    font-size: .72rem;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
}

.profile-stat__cap[b-yj2hx2q1zk] {
    font-size: .72rem;
    line-height: 1.25;
    color: var(--mud-palette-text-secondary);
    overflow-wrap: anywhere;
}

/* Cavabsız şikayət sayı — küncdə nişan. RƏNG TƏK SİQNAL DEYİL: rəqəm və
   `title` mətni də var. */
.profile-stat__flag[b-yj2hx2q1zk] {
    position: absolute;
    top: 6px;
    right: 6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
    line-height: 18px;
    color: #ffffff;
    background: var(--mud-palette-warning);
}

@media (prefers-reduced-motion: reduce) {
    .profile-stat:hover[b-yj2hx2q1zk] {
        transform: none;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   #75 — YAZILMA LİNKİ KARTI
   ══════════════════════════════════════════════════════════════════════
   Əvvəl bu, etiketsiz bir sətir idi (`.profile-link-box`) və nə olduğu
   yalnız zəncir ikonundan güman edilirdi. İndi başlıq sətri var və
   kopyalama düyməsi əlavə olundu.
   ══════════════════════════════════════════════════════════════════════ */
.profile-linkcard[b-yj2hx2q1zk] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 6px 8px 10px;
    border-radius: 10px;
    border: 1px solid var(--mud-palette-lines-default);
    background-color: var(--mud-palette-surface);
}

.profile-page[b-yj2hx2q1zk]  .profile-linkcard__ico {
    flex: 0 0 auto;
    color: var(--mud-palette-text-secondary);
}

.profile-linkcard__body[b-yj2hx2q1zk] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.profile-linkcard__cap[b-yj2hx2q1zk] {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--mud-palette-text-secondary);
}

/* 🔴 `break-all` DEYİL, `break-word`: slug ortadan kəsilməməlidir —
   istifadəçi onu gözü ilə yoxlayır. */
.profile-linkcard__url[b-yj2hx2q1zk] {
    min-width: 0;
    font-size: .8rem;
    overflow-wrap: anywhere;
    color: var(--mud-palette-text-primary);
    text-decoration: none;
}

    .profile-linkcard__url:hover[b-yj2hx2q1zk] {
        text-decoration: underline;
    }

.profile-linkcard__url--muted[b-yj2hx2q1zk] {
    color: var(--mud-palette-text-secondary);
}

.profile-page[b-yj2hx2q1zk]  .profile-linkcard__copy {
    flex: 0 0 auto;
    margin-inline-start: auto;
}

/* ── DAR EKRAN ──
   ≤ 900 px: 65/35 iki sütun 360 px-də hər ikisini oxunmaz edir.
   Sütunlar bir-birinin ALTINA düşür, ayırıcı xətt yuxarıya keçir. */
@media (max-width: 900px) {
    .profile-hero__split[b-yj2hx2q1zk] {
        grid-template-columns: minmax(0, 1fr);
    }

    .profile-hero__side[b-yj2hx2q1zk] {
        border-inline-start: none;
        border-block-start: 1px solid var(--mud-palette-lines-default);
        align-items: stretch;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   DAXILI REYLER KARTI (29.08.2026)
   --------------------------------------------------------------------------
   Sistem sahibi: «daxili rey sistemimiz var lakin hec gostermirik. profil
   kartinda reyleri ulduz sayi ile gosterek, sag terefdeki bos sahede.»

   !! `.profile-stat`-in gorunusunu MIRAS ALIR (eyni fon, eyni radius, eyni
      hover) -- yeni bir dil ixtira etmek sag sutunu uc ferqli kart tipine
      bolerdi. Ferq YALNIZ ulduz reqemindedir.
   ══════════════════════════════════════════════════════════════════════════ */
/* 13.09.2026 — `.profile-rating*` qaydaları SİLİNDİ: reytinq artıq ayrıca
   kart deyil, `.profile-stat--rating` modifikatoru ilə eyni şəbəkənin
   üçüncü xanasıdır (bax «ÜÇ XANA, TƏK KART DİLİ» bölməsi). */

/* ══════════════════════════════════════════════════════════════════════════
   MEDİA ƏMƏLİYYATLARI — loqo və fon üçün adlı düymələr (30.08.2026)
   ══════════════════════════════════════════════════════════════════════════

   Küncdəki fotoaparat ikonları saxlanıldı; bu blok onların ALTINDAKI adlı
   əməliyyat sətridir. Şəxsi profildəki (`MyProfilePanel`) naxışın eynisidir:
   yüklə/dəyiş · sil · izah.

   🔴 `::deep` MƏCBURİDİR — `profile-media-actions__hint` `MudText`-ə verilir
      və Blazor scope atributunu SON elementə qoyur; `::deep` olmasa selektor
      `MudText`-in render etdiyi `<p>`-yə HEÇ VAXT uyğun gəlmir. Eyni tələ bu
      faylda fotoaparat düymələri üçün bir dəfə baş verib. */
/* 🔴 13.09.2026 — `.profile-media-actions` (adlı düymələr + iki izah sətri)
   SİLİNDİ, yerinə yığcam ikon zolağı gəldi. Sistem sahibi: «düymələr çox
   kobud və lazımsızdır, sadəcə ikonlarını saxla, üzərinə gələndə nə işə
   yaradığı çıxsın». İzah indi tooltip-dədir (`.profile-tip`). */
.profile-media-tools[b-yj2hx2q1zk] {
    align-self: center;
    margin-inline-start: auto;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border-radius: 12px;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
}

    .profile-media-tools[b-yj2hx2q1zk]  .mud-icon-button {
        border-radius: 9px;
    }

/* Tooltip içi — portal-da render olunur, lakin element BU komponentdə
   yazıldığı üçün scope atributunu daşıyır. */
.profile-tip[b-yj2hx2q1zk] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-width: 240px;
    line-height: 1.35;
    text-align: start;
}

    .profile-tip span[b-yj2hx2q1zk] {
        font-size: .72rem;
        opacity: .85;
    }
/* /Pages/Outbox/OutboxPage.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════════
   GÖNDƏRİLMƏYƏN MESAJLAR — KART SİYAHISI (18.09.2026)
   ══════════════════════════════════════════════════════════════════════════

   ── KÖHNƏ FAYLIN QAYDASI VƏ NİYƏ TƏRSİNƏ ÇEVRİLDİ ────────────────────────
   Burada əvvəl «HƏR SƏTİR BİR SƏTİR HÜNDÜRLÜYÜNDƏDİR» yazılmışdı: mesajın
   mətni `white-space: nowrap` + `…` ilə 300 px-ə sıxılırdı, tam mətn isə
   yalnız tooltip-də idi.

   O qərar bir problemi həll edib başqasını yaratmışdı:
     • DOĞRU idi — açılmış mətn sətri 6-8 sətir hündürlüyə çatırdı;
     • SƏHV idi — ekranın CAVAB VERDİYİ sual «niyə getmədi?»dir, cavabı isə
       `LastError` mətnindədir. Toxunma ekranında tooltip YOXDUR, yəni
       telefondan baxan istifadəçi səbəbi HEÇ CÜR görə bilmirdi.

   Yeni qərar: mətn GÖRÜNÜR, lakin `-webkit-line-clamp` ilə İKİ SƏTİRDƏ
   dayanır — nə kəsilir, nə də kartı şişirdir. Xəta AYRI sətirdədir və o,
   üç sətirə qədər açılır (səbəb mesajın mətnindən vacibdir).

   ⚠️ Bu fayl SCOPED-dir → yalnız ADİ HTML elementləri üçündür. MudBlazor
      komponentlərinin daxili markup-ına `::deep` ilə çatılır (layihənin
      `BillingPage.razor.css` başlığındakı eyni qayda).                     */

/* ── Kanal tabları ────────────────────────────────────────────────────── */
.obx-board[b-1eny933sos] {
    margin-top: 1rem;
}

.obx-board__bar[b-1eny933sos] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: .75rem;
}

/* Sayğac tabın İÇİNDƏ, adın yanındadır — ayrı çip sətri ikiqat yer tutardı. */
.obx-tabs__count[b-1eny933sos] {
    margin-left: .45rem;
    padding: 0 .4rem;
    min-width: 1.35rem;
    display: inline-block;
    text-align: center;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    background: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-secondary);
}

.obx-tabs__count--warn[b-1eny933sos] {
    background: color-mix(in srgb, var(--mud-palette-error) 16%, transparent);
    color: var(--mud-palette-error);
}

/* ── Kart siyahısı ───────────────────────────────────────────────────── */
.obx-list[b-1eny933sos] {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

/* Üç zona: kanal (sabit) · məzmun (uzanan) · əməliyyat (sabit).
   `minmax(0, 1fr)` MƏCBURİDİR — onsuz uzun mətn grid sütununu genişləndirir
   və kart yan-yana sürüşməyə başlayır. */
.obx-card[b-1eny933sos] {
    --obx-tone: var(--mud-palette-text-secondary);
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr) auto;
    align-items: start;
    gap: .9rem;
    padding: .85rem 1rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-left: 3px solid var(--obx-tone);
    border-radius: 14px;
    background: var(--mud-palette-surface);
}

/* Kanal tonu — C#-da təkrarlanmır, tək mənbə buradır. */
.obx-card[data-channel="WHATSAPP"][b-1eny933sos] { --obx-tone: var(--mud-palette-success); }
.obx-card[data-channel="TELEGRAM"][b-1eny933sos] { --obx-tone: var(--mud-palette-info); }
.obx-card[data-channel="SMS"][b-1eny933sos]      { --obx-tone: var(--mud-palette-primary); }
.obx-card[data-channel="EMAIL"][b-1eny933sos]    { --obx-tone: var(--mud-palette-warning); }

.obx-card__channel[b-1eny933sos] {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--obx-tone);
}

.obx-card__main[b-1eny933sos] {
    min-width: 0;
}

.obx-card__head[b-1eny933sos] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .25rem 1rem;
}

.obx-card__to[b-1eny933sos] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-weight: 700;
    font-size: .92rem;
    color: var(--mud-palette-text-primary);
}

/* Zəng keçidi: alt xətt YOXDUR (nömrə onsuz da nömrə kimi oxunur), lakin
   hover-də vurğulanır — toxunulan element olduğu bilinsin. */
.obx-card__to--call[b-1eny933sos] {
    text-decoration: none;
}

.obx-card__to--call:hover[b-1eny933sos] {
    color: var(--mud-palette-primary);
    text-decoration: underline;
}

.obx-card__meta[b-1eny933sos] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .78rem;
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
}

.obx-card__attempts[b-1eny933sos] {
    padding: .05rem .45rem;
    border-radius: 999px;
    border: 1px solid var(--mud-palette-lines-default);
    font-size: .72rem;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
}

.obx-card__subject[b-1eny933sos] {
    margin-top: .3rem;
    font-size: .82rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

/* İKİ SƏTİR — bax faylın başlığı. `line-clamp` standart qarşılığı ilə
   birlikdə yazılır: `-webkit-` prefiksi hələ də tələb olunur. */
.obx-card__body[b-1eny933sos] {
    margin: .25rem 0 0;
    font-size: .84rem;
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere;
}

/* 🔴 SƏBƏB EKRANIN ƏSAS MƏZMUNUDUR — mesajın mətnindən daha çox yer alır. */
.obx-card__error[b-1eny933sos] {
    display: flex;
    align-items: flex-start;
    gap: .35rem;
    margin-top: .45rem;
    padding: .35rem .55rem;
    border-radius: 8px;
    background: color-mix(in srgb, var(--mud-palette-error) 8%, transparent);
    color: var(--mud-palette-error);
    font-size: .76rem;
    line-height: 1.4;
}

.obx-card__error span[b-1eny933sos] {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.obx-card__actions[b-1eny933sos] {
    display: flex;
    align-items: center;
    gap: .25rem;
}

/* Dar ekranda üç sütun bir sütuna yığılır; əməliyyatlar sola sıralanır ki,
   baş barmaq onlara çatsın. */
@media (max-width: 900px) {
    .obx-card[b-1eny933sos] {
        grid-template-columns: minmax(0, 1fr);
        gap: .5rem;
    }

    .obx-card__actions[b-1eny933sos] {
        justify-content: flex-start;
    }
}
/* /Pages/Settings/Reputation/ReputationSettingsPage.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════════
   GOOGLE RƏY AYARLARI — 19.09.2026
   ══════════════════════════════════════════════════════════════════════════

   🔴 BÜTÜN SİNİFLƏR `rps-` İLƏ BAŞLAYIR VƏ BU, ZÖVQ DEYİL.
      Əvvəlki adlar `rep-` idi və `wwwroot/css/app.css`-də EYNİ adlar QLOBAL
      olaraq şikayət siyahısı üçün təyin olunub:

          .rep-card { display: flex; align-items: flex-start; … }

      Scoped fayl `.rep-card`-ı təyin etmədiyi üçün qlobal qayda qalib gəlir
      və kart üfüqi sıraya çevrilirdi — düymələr, ayırıcı və mənbə sətri
      kartdan BAYIRA çıxırdı. Səhv SƏSSİZ idi: nə kompilyator, nə də test
      onu görürdü, çünki hər iki fayl öz-özlüyündə düzgündür.

      CLAUDE.md-nin «paralel yol» qaydası: eyni modulun iki ekranı eyni sinif
      adını işlədirsə, biri qlobal olanda QALİB HƏMİŞƏ QLOBALDIR.

   ⚠️ Fayl SCOPED-dir → yalnız bu komponentin öz HTML elementlərinə çatır.
      MudBlazor komponentlərinə sinif VERİLMİR (`RazorSourceLintTests`).      */

.rps-page[b-3b6ptirozc] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ── Ortaq kart dili ─────────────────────────────────────────────────── */
/* Tək qayda: 1 px kənar, 16 px künc, 1.25 rem daxili boşluq. Ekranın bütün
   blokları ondan törəyir — əvvəl hər blok öz `pa-6` / `border-2` dəyərini
   yazırdı və eyni ekranda iki fərqli kart qalınlığı vardı. */
.rps-hero[b-3b6ptirozc],
.rps-panel[b-3b6ptirozc],
.rps-state[b-3b6ptirozc],
.rps-empty[b-3b6ptirozc] {
    padding: 1.25rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 16px;
    background: var(--mud-palette-surface);
}

.rps-panel--muted[b-3b6ptirozc] {
    background: var(--mud-palette-background-grey);
}

/* ══════════════════════════════════════════════════════════════════════
   QƏHRƏMAN KART
   ══════════════════════════════════════════════════════════════════════
   `grid-template-areas` seçildi, çünki DAR ekranda sıra dəyişir:
   geniş ekranda bal SAĞDA, dar ekranda kimliyin ALTINDA tam enlə durur
   (sıxılmış «4,7» oxunmur). Eyni markup, iki düzülüş.                    */
.rps-hero[b-3b6ptirozc] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "media id      score"
        "act   act     act"
        "src   src     src";
    gap: 1rem 1.25rem;
    align-items: start;
    /* Üst zolaq — kart «qoşulub» halının özüdür; rəng paletdən gəlir. */
    border-top: 3px solid var(--mud-palette-warning);
}

.rps-hero__media[b-3b6ptirozc] {
    grid-area: media;
}

.rps-hero__photo[b-3b6ptirozc],
.rps-hero__plate[b-3b6ptirozc] {
    width: 68px;
    height: 68px;
    border-radius: 16px;
    object-fit: cover;
    display: grid;
    place-items: center;
}

.rps-hero__plate[b-3b6ptirozc] {
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    color: var(--mud-palette-primary);
}

/* `minmax(0, 1fr)` sütunu ilə birlikdə — uzun ünvan sütunu genişləndirib
   balı kartdan çıxarmasın. */
.rps-hero__id[b-3b6ptirozc] {
    grid-area: id;
    min-width: 0;
}

.rps-hero__kicker[b-3b6ptirozc] {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.rps-hero__name[b-3b6ptirozc] {
    margin: .15rem 0 .5rem;
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--mud-palette-text-primary);
    overflow-wrap: anywhere;
}

.rps-hero__tags[b-3b6ptirozc] {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-bottom: .55rem;
}

.rps-tag[b-3b6ptirozc] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .12rem .55rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
    white-space: nowrap;
}

.rps-tag--maps[b-3b6ptirozc] {
    border: 1px solid color-mix(in srgb, var(--mud-palette-info) 45%, transparent);
    background: color-mix(in srgb, var(--mud-palette-info) 10%, transparent);
    color: var(--mud-palette-info);
}

.rps-tag--warn[b-3b6ptirozc] {
    border: 1px solid color-mix(in srgb, var(--mud-palette-warning) 45%, transparent);
    background: color-mix(in srgb, var(--mud-palette-warning) 12%, transparent);
    color: var(--mud-palette-warning);
}

.rps-hero__line[b-3b6ptirozc] {
    display: flex;
    align-items: center;
    gap: .4rem;
    min-width: 0;
    margin-top: .2rem;
    font-size: .86rem;
    color: var(--mud-palette-text-secondary);
}

.rps-hero__line a[b-3b6ptirozc] {
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rps-hero__line a:hover[b-3b6ptirozc] {
    text-decoration: underline;
}

/* ── BAL ─────────────────────────────────────────────────────────────── */
/* Modulun bütün mənası bu rəqəmi qaldırmaqdır, ona görə o, ekranın ƏN
   BÖYÜK rəqəmidir və öz lövhəsindədir — həkim onu axtarmamalıdır. */
.rps-hero__score[b-3b6ptirozc] {
    grid-area: score;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .15rem;
    min-width: 132px;
    padding: .7rem 1rem;
    border-radius: 14px;
    background: color-mix(in srgb, var(--mud-palette-warning) 10%, transparent);
}

.rps-score__num[b-3b6ptirozc] {
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary);
}

.rps-score__count[b-3b6ptirozc] {
    font-size: .76rem;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.rps-score__empty[b-3b6ptirozc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    max-width: 150px;
    text-align: center;
    font-size: .78rem;
    color: var(--mud-palette-text-secondary);
}

/* ── Əməliyyatlar: KARTIN İÇİNDƏ, ayrıca zolaqda ─────────────────────── */
/* 🔴 Əvvəl bu düymələr kartın ümumi axınında idi və qlobal `.rep-card`
   qaydası onları kartdan bayıra çıxarırdı. İndi öz grid sahəsindədirlər —
   sıra dəyişsə də həmişə kartın içində qalırlar. */
.rps-hero__actions[b-3b6ptirozc] {
    grid-area: act;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    padding-top: .9rem;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.rps-hero__source[b-3b6ptirozc] {
    grid-area: src;
    display: flex;
    align-items: flex-start;
    gap: .4rem;
    font-size: .74rem;
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
}

@media (max-width: 860px) {
    .rps-hero[b-3b6ptirozc] {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            "media id"
            "score score"
            "act   act"
            "src   src";
    }

    /* Dar ekranda bal TAM ENİ alır: sıxılmış lövhədə rəqəm kiçilir və
       ekranın əsas məlumatı ən pis görünən hissəyə çevrilir. */
    .rps-hero__score[b-3b6ptirozc] {
        flex-direction: row;
        justify-content: center;
        gap: .7rem;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   VƏZİYYƏT KARTLARI (modul bağlı · açar yoxdur · tapılmadı)
   ══════════════════════════════════════════════════════════════════════
   🔴 ÜÇÜ DƏ EYNİ QABIQDADIR, yalnız TON fərqlidir. Əvvəl hər biri ayrı
      `MudAlert` idi və eyni ekranda üç fərqli qutu görkəmi yaranırdı.     */
.rps-state[b-3b6ptirozc] {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    border-left: 3px solid var(--rps-tone, var(--mud-palette-info));
}

.rps-state--info[b-3b6ptirozc] { --rps-tone: var(--mud-palette-info); }
.rps-state--locked[b-3b6ptirozc] { --rps-tone: var(--mud-palette-primary); }
.rps-state--warn[b-3b6ptirozc] { --rps-tone: var(--mud-palette-warning); }
.rps-state--error[b-3b6ptirozc] { --rps-tone: var(--mud-palette-error); }

.rps-state[b-3b6ptirozc]  .rps-state__icon {
    flex-shrink: 0;
    color: var(--rps-tone, var(--mud-palette-info));
}

.rps-state__text[b-3b6ptirozc] {
    flex: 1 1 260px;
    min-width: 0;
}

.rps-state__title[b-3b6ptirozc] {
    font-size: .98rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.rps-state__body[b-3b6ptirozc] {
    margin: .25rem 0 0;
    font-size: .86rem;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
}

.rps-state__note[b-3b6ptirozc] {
    margin: .4rem 0 0;
    font-size: .76rem;
    color: var(--mud-palette-text-secondary);
}

.rps-state__actions[b-3b6ptirozc] {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .75rem;
}

/* ══════════════════════════════════════════════════════════════════════
   QOŞULMAYIB
   ══════════════════════════════════════════════════════════════════════ */
.rps-empty[b-3b6ptirozc] {
    display: flex;
    align-items: center;
    gap: 1rem;
    border-style: dashed;
}

.rps-empty__plate[b-3b6ptirozc] {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 14px;
    background: color-mix(in srgb, var(--mud-palette-warning) 14%, transparent);
    color: var(--mud-palette-warning);
}

.rps-empty__title[b-3b6ptirozc] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.rps-empty__body[b-3b6ptirozc] {
    margin: .2rem 0 0;
    font-size: .86rem;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
}

/* ══════════════════════════════════════════════════════════════════════
   BAĞLANTI + TƏLİMAT
   ══════════════════════════════════════════════════════════════════════
   Qoşulmayanda yan-yana: biri o birini oxumadan tamamlanmır.
   Qoşulanda tək sütun — təlimat yığılmış panelin içindədir.               */
.rps-setup[b-3b6ptirozc] {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(280px, 1fr);
    gap: 1rem;
    align-items: start;
}

.rps-setup--one[b-3b6ptirozc] {
    grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 960px) {
    .rps-setup[b-3b6ptirozc] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.rps-panel__head[b-3b6ptirozc] {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.rps-conn[b-3b6ptirozc] {
    display: flex;
    flex-direction: column;
    gap: .85rem;
}

.rps-conn__actions[b-3b6ptirozc] {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

/* ── Təlimat ─────────────────────────────────────────────────────────── */
/* Blok İKİ yerdə göstərilir (yığılmış paneldə və ayrıca sütunda), ona görə
   öz boşluğunu ÖZÜ daşıyır — yoxsa iki valideyndə iki cür görünərdi. */
.rps-guide[b-3b6ptirozc] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.rps-guide__head[b-3b6ptirozc] {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .75rem;
    font-size: .95rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

/* 🔴 `<ol>` işlədilir, `MudList` yox: addımın NÖMRƏSİ məzmundur — dəstəklə
   telefonda danışan adam «üçüncü addım» deyir. Sayğac CSS-dən gəlsəydi
   mətni kopyalayanda itərdi, ona görə rəqəm markup-dadır. */
.rps-steps[b-3b6ptirozc] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.rps-steps li[b-3b6ptirozc] {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    font-size: .86rem;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
}

.rps-steps__no[b-3b6ptirozc] {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 7px;
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    color: var(--mud-palette-primary);
    font-size: .74rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
/* /Pages/Settings/Settings.razor.rz.scp.css */
/* Kartların birbaşa kliklənə bilməsi və hover effekti */
.settings-card[b-abnywi6stq] {
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    border: 2px solid transparent;
    position: relative;
    height: 125px; /* DİQQƏT: Bütün kartların hündürlüyünü millimetrinə qədər bərabərləşdirir */
    display: flex;
    align-items: center;
}

    .settings-card:hover[b-abnywi6stq] {
        transform: translateY(-5px);
        box-shadow: 0 12px 24px rgba(0,0,0,0.08) !important;
        border-color: var(--mud-palette-primary);
    }

/* Sağ üstdəki kiçik İnfo (i) ikonu */
.info-btn[b-abnywi6stq] {
    position: absolute !important;
    top: 8px;
    right: 8px;
    opacity: 0.3;
    transition: opacity 0.2s;
}

.settings-card:hover .info-btn[b-abnywi6stq] {
    opacity: 1;
}

/* Uzun mətnlər avatarı əzməsin deyə qoruyucu */
.avatar-wrapper[b-abnywi6stq] {
    flex-shrink: 0;
}
/* /Pages/Settings/SystemSettings/SystemSettings.razor.rz.scp.css */
/* Rəng Picker */
.color-preview-wrapper[b-1rnkatg8wb] {
    padding: 8px 0;
    display: flex;
    flex-direction: column;
}

.color-preview-label[b-1rnkatg8wb] {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.color-picker-input[b-1rnkatg8wb] {
    width: 44px;
    height: 44px;
    border: 2px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    cursor: pointer;
    padding: 2px;
    background: transparent;
    transition: border-color 0.2s ease;
}

    .color-picker-input:hover[b-1rnkatg8wb],
    .color-picker-input:focus[b-1rnkatg8wb] {
        border-color: var(--mud-palette-primary);
        outline: none;
    }

    .color-picker-input[b-1rnkatg8wb]::-webkit-color-swatch-wrapper {
        padding: 0;
    }

    .color-picker-input[b-1rnkatg8wb]::-webkit-color-swatch {
        border: none;
        border-radius: 4px;
    }

    .color-picker-input[b-1rnkatg8wb]::-moz-color-swatch {
        border: none;
        border-radius: 4px;
    }

/* ═══════ Hazır tema kartları ═══════

   Kart bir MİNİ MAKETDİR: yuxarı zolaq, yan panel, düymə. Rəng nöqtələri
   "bu rəng hara düşəcək?" sualını cavabsız qoyurdu — maket qoymur.       */

.theme-card[b-1rnkatg8wb] {
    border: 2px solid var(--mud-palette-lines-default);
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    background: var(--mud-palette-surface);
    transition: transform .2s cubic-bezier(.25, .8, .25, 1), border-color .2s, box-shadow .2s;
}

.theme-card:hover[b-1rnkatg8wb] {
    transform: translateY(-4px);
    border-color: var(--mud-palette-primary);
    box-shadow: 0 12px 24px rgba(0, 0, 0, .1);
}

.theme-card--active[b-1rnkatg8wb] {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 3px var(--mud-palette-primary-hover);
}

.theme-mock[b-1rnkatg8wb] {
    height: 96px;
    display: flex;
    flex-direction: column;
    /* Maketin öz fonu var; kartın fonundan asılı olmamalıdır. */
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.theme-mock-bar[b-1rnkatg8wb] {
    height: 18px;
    flex-shrink: 0;
}

.theme-mock-body[b-1rnkatg8wb] {
    flex: 1 1 auto;
    display: flex;
    min-height: 0;
}

.theme-mock-side[b-1rnkatg8wb] {
    width: 26px;
    flex-shrink: 0;
    padding: 6px 5px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    background: rgba(0, 0, 0, .04);
}

.theme-mock-side span[b-1rnkatg8wb] {
    display: block;
    height: 5px;
    border-radius: 3px;
    background: rgba(0, 0, 0, .16);
}

.theme-mock-main[b-1rnkatg8wb] {
    flex: 1 1 auto;
    padding: 9px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.theme-mock-line[b-1rnkatg8wb] {
    height: 5px;
    border-radius: 3px;
    background: rgba(0, 0, 0, .14);
}

.theme-mock-btn[b-1rnkatg8wb] {
    margin-top: auto;
    width: 42px;
    height: 12px;
    border-radius: 4px;
}

.theme-card-info[b-1rnkatg8wb] {
    padding: 10px 12px 12px;
}

/* Dil seçimi */
.language-select[b-1rnkatg8wb] {
    max-width: 320px;
}

/* Responsivlik üçün flex düzəlişi */
@media (max-width: 600px) {
    .language-select[b-1rnkatg8wb] {
        max-width: 100%;
    }
}