/* === wwwroot/css/upsell.css ===
   Satış səthləri: kilidli ekran (paywall), modul aktivləşdirmə dialoqu,
   abunə xəbərdarlığı.

   ⚠️ QLOBAL, scoped DEYİL.
      `UpgradeModuleDialog` MudBlazor dialoqudur — `<body>` altında ayrı
      qatda render olunur və komponentin scoped CSS-i (`::deep` olsa belə)
      ona çatmır. Eyni səbəb `legal.css`, `reports.css`, `a11y.css` üçün də
      keçərlidir.

   ⚠️ SABİT RƏNG YOXDUR. Tema `MudThemeProvider` tərəfindən RUNTIME-da
      seçilir, `prefers-color-scheme` ilə tapılmır. Bütün rənglər
      `--mud-palette-*` dəyişənlərindən gəlir, şəffaflıq `color-mix()` ilə.
      Sabit `#fff` / `#000` yazmaq qaranlıq temada mətni görünməz edir.
*/

/* ══ Modul dialoqu — şüşə çərçivə ═══════════════════════════════════ */
.upsell-dialog {
    background: var(--mud-palette-surface);
    background: color-mix(in srgb, var(--mud-palette-surface) 84%, transparent);
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    border: 1px solid color-mix(in srgb, var(--mud-palette-lines-default) 55%, transparent);
    border-radius: 22px;
    box-shadow: 0 28px 70px rgb(0 0 0 / 26%);
    overflow: hidden;
}

.upsell-dialog .mud-dialog-content { padding: 0; }
.upsell-dialog .mud-dialog-actions { padding: .5rem 1.5rem 1.25rem; }

/* Başlıq zolağı — brend qradiyenti. Dialoq açılan kimi göz bura düşür:
   burada modulun ADI və VƏDİ var, qiymət isə aşağıda — qiymət birinci
   görünsə, fayda oxunmadan qərar verilir. */
.upsell-head {
    /* 🔴 10.09.2026 — SAĞ BOŞLUQ BAĞLAMA DÜYMƏSİ ÜÇÜNDÜR: X (40 px) yaşılın
       İÇİNDƏ, sağ-yuxarı küncdədir və uzun başlıq onun altından keçməməlidir.
       Sağ boşluq 4 rem — düymə + hər iki tərəfdən nəfəs.
       ⚠️ 21.09.2026 — başlıq artıq `.mud-dialog-title`-ın boşluğunda DEYİL
          (aşağıdakı «KƏNARDAN-KƏNARA» bölməsi), yəni yaşıl dialoqun
          kənarlarına qədər uzanır. */
    padding: 1.5rem 4rem 1.35rem 1.5rem;
    background: linear-gradient(135deg, var(--mud-palette-primary) 0%, var(--mud-palette-secondary) 100%);
    color: var(--mud-palette-primary-text);
}

/* ══════════════════════════════════════════════════════════════════════════
   RƏNGLİ BAŞLIQ KƏNARDAN-KƏNARA + X YAŞILIN İÇİNDƏ (21.09.2026)
   ══════════════════════════════════════════════════════════════════════════
   🔴 QLOBALDIR, scoped DEYİL: dialoq `<body>` altında, `MudDialogProvider`
      qatında render olunur (fayl başlığındakı qayda ilə eyni).

   Sistem sahibi («Bizə yazın» dialoqu): «iyrənc yarımçıq yaşıl sahəni
   düzəlt! Ya X işarəsi yaşılın içində olsun, ya da başqa çarə tap!»

   ÖLÇÜLMÜŞ İKİ SƏBƏB (bUnit ilə MudBlazor 9.7-nin HƏQİQİ markup-ı çıxarıldı):
     ① Başlığımız `TitleContent`-dədir, yəni `.mud-dialog-title`-ın İÇİNDƏ.
        MudBlazor həmin qaba `padding: 16px 24px` verir, X varsa sağdan
        `padding-inline-end: 64px` də əlavə edir. Yaşıl blok o boşluğun
        içində qalırdı: soldan, yuxarıdan və sağdan dialoq fonu görünürdü,
        X isə yaşılın KƏNARINDA, adi fonda dayanırdı.
     ② 10.09-un düzəlişi `.mud-dialog-close-button` sinfinə yazılmışdı.
        MudBlazor 9.7-də düymənin sinfi `mud-button-close`-dur — yəni o
        qaydalar BİR GÜN DƏ tətbiq olunmayıb (sinif markup-da yoxdur).

   Düzəliş: başlıq qabının boşluğu SIFIR (yaşıl kənardan-kənara), X isə
   həqiqi sinfi ilə yaşılın sağ-yuxarı küncündə, şəffaf tünd dairədə.
   ⚠️ YALNIZ `.upsell-dialog`: adi dialoqların başlığı və X-i dəyişmir. */
.mud-dialog.upsell-dialog .mud-dialog-title,
.mud-dialog.upsell-dialog .mud-dialog-title:has(.mud-button-close) {
    padding: 0;
}

.mud-dialog.upsell-dialog .mud-dialog-title .mud-button-close {
    top: 12px;
    right: 12px;
    z-index: 2;
    color: var(--mud-palette-primary-text);
    background: rgb(0 0 0 / 14%);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.mud-dialog.upsell-dialog .mud-dialog-title .mud-button-close:hover {
    background: rgb(0 0 0 / 26%);
}

.upsell-head-row {
    display: flex;
    align-items: center;
    gap: .9rem;
}

.upsell-head-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border-radius: 14px;
    background: rgb(255 255 255 / 18%);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.upsell-head-promise {
    margin-top: .75rem;
    opacity: .93;
    line-height: 1.45;
}

/* ══ Gövdə ═════════════════════════════════════════════════════════ */
.upsell-body { padding: 1.35rem 1.5rem .25rem; }

.upsell-benefit {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    margin-bottom: .7rem;
}

/* Qiymət sətri — faktura dili. "Nə qədər ödəyəcəyəm?" sualı ekranda
   qalmamalıdır: qeyri-müəyyən qiymət ən çox tərk edilmə səbəbidir. */
.upsell-price {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    flex-wrap: wrap;
    padding: .85rem 1rem;
    border-radius: 14px;
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 28%, transparent);
}

.upsell-price-figure {
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1;
    color: var(--mud-palette-primary);
}

.upsell-price-strike {
    text-decoration: line-through;
    opacity: .6;
}

/* ══ Çarpaz satış kartı ════════════════════════════════════════════
   Ayrıca fon və haşiyə: bu, ekrandakı digər mətnin davamı deyil,
   AYRI TƏKLİFDİR. Göz onu bir blok kimi görməlidir. */
.upsell-bundle {
    position: relative;
    padding: 1.1rem 1.15rem;
    border-radius: 18px;
    background: color-mix(in srgb, var(--mud-palette-secondary) 9%, var(--mud-palette-surface));
    border: 1px solid color-mix(in srgb, var(--mud-palette-secondary) 42%, transparent);
    box-shadow: 0 10px 28px color-mix(in srgb, var(--mud-palette-secondary) 16%, transparent);
}

.upsell-bundle-modules {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin: .7rem 0 .85rem;
}

/* ══ Kilidli ekran (paywall) ═══════════════════════════════════════ */
.upsell-paywall {
    max-width: 660px;
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
}

.upsell-paywall-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .9rem;
    padding: 1rem 1.5rem 1.5rem;
}

/* Kilidli ekranın altındakı üstünlük zolağı — etibar siqnalları.
   "Kart tələb olunmur" cümləsi burada qərar verdirir, yuxarıda yox. */
.upsell-trust {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1rem;
    padding: .75rem 1.5rem 1.25rem;
    border-top: 1px dashed color-mix(in srgb, var(--mud-palette-lines-default) 80%, transparent);
}

.upsell-trust-item {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

/* ══ Abunə xəbərdarlığı ════════════════════════════════════════════
   Banner MODAL DEYİL: işi bloklamır, yalnız üstdə dayanır.
   Sol kənardakı qalın zolaq periferik görmə ilə də tutulur. */
.upsell-warning {
    border-radius: 14px;
    border-left: 5px solid var(--mud-palette-warning);
}

.upsell-warning-critical {
    border-left-color: var(--mud-palette-error);
}

/* ══ Dəstək forması ═════════════════════════════════════════════════ */
.sup-cats {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

/* ══ Dəstək qutusu (admin) ══════════════════════════════════════════
   Kateqoriya keçidi hesabat ekranlarındakı `.rpt-nav` ilə eyni məntiqdə:
   cari olan işıqlanır, keçid üçün yan menyuya qayıtmaq lazım deyil. */
.sup-nav,
.inv-nav {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    padding-bottom: .75rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.sup-nav-item,
.inv-nav-item {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .85rem;
    border-radius: 999px;
    font-size: .82rem;
    text-decoration: none;
    color: var(--mud-palette-text-secondary);
    border: 1px solid transparent;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.sup-nav-item:hover,
.inv-nav-item:hover {
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent);
    color: var(--mud-palette-text-primary);
}

.sup-nav-item.is-active,
.inv-nav-item.is-active {
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    border-color: color-mix(in srgb, var(--mud-palette-primary) 35%, transparent);
    font-weight: 600;
}

/* Baxılmamış istəklərin sayı. Rəng qırmızıdır: bu, "gözləyir" siqnalıdır. */
.sup-nav-badge {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 700;
    color: var(--mud-palette-error-text);
    background: var(--mud-palette-error);
}

/* Siyahı sətri — cədvəl deyil: mobil ekranda cədvəl sütunları sıxılır
   və telefon nömrəsi kəsilir. */
.sup-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .85rem 1.15rem;
    cursor: pointer;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    transition: background-color .12s ease;
}

.sup-row:last-child { border-bottom: none; }

.sup-row:hover {
    background: color-mix(in srgb, var(--mud-palette-primary) 6%, transparent);
}

.sup-row-status { flex: 0 0 auto; min-width: 108px; }
.sup-row-main { flex: 1 1 auto; min-width: 0; }

.sup-row-meta {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: .5rem;
    text-align: right;
}

.sup-dialog { border-radius: 18px; }

/* 16.09.2026 — uzun mövzu başlığı dialoqu enə itələməsin. */
.sup-dialog__subject { overflow-wrap: anywhere; }

/* 161 — səhifə yüklənərkən köhnə sətirlər qalır, zolaq üstdə görünür:
   siyahı sıçramır və hündürlüyü dəyişmir. */
.sup-list { position: relative; }

.sup-list__progress {
    position: absolute;
    inset: 0 0 auto 0;
    z-index: 1;
}

/* ══ 16.09.2026 — Cavabın sonundakı hazır təşəkkür ══════════════════
   Önizləmə sahəsi müştəriyə GEDƏN mətni göstərir; ona görə cavab
   qabarcığına bənzəyir, lakin sönükdür (operator onu yazmayıb). */
.sup-closing__toggle { margin-left: -6px; }

.sup-closing__preview {
    margin-top: .35rem;
    padding: .6rem .8rem;
    border-radius: 12px;
    border-left: 3px solid var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 7%, transparent);
    color: var(--mud-palette-text-secondary);
    font-size: .85rem;
    line-height: 1.45;
    white-space: pre-wrap;
}

/* ══ 16.09.2026 — Klinikanın istifadəçiləri (dəstək kartından) ═════ */
.tu-list {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px;
    overflow: hidden;
}

.tu-row {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    padding: .75rem .9rem;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.tu-row:last-child { border-bottom: none; }

/* Müraciəti yazan hesab — zəngdə ilk axtarılan adam. */
.tu-row--author {
    background: color-mix(in srgb, var(--mud-palette-info) 8%, transparent);
    box-shadow: inset 3px 0 0 var(--mud-palette-info);
}

.tu-row--passive .tu-row__name { color: var(--mud-palette-text-secondary); }

.tu-row__avatar { flex: 0 0 auto; }

.tu-row__main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.tu-row__head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem;
}

.tu-row__name {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.tu-row__chips {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
}

.tu-row__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    font-size: .85rem;
    color: var(--mud-palette-text-secondary);
}

.tu-row__dot { opacity: .6; }

.sup-event {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .4rem 0;
    border-bottom: 1px dashed color-mix(in srgb, var(--mud-palette-lines-default) 70%, transparent);
}

@media (max-width: 700px) {
    .sup-row { flex-wrap: wrap; }
    .sup-row-meta { width: 100%; justify-content: flex-start; }
}

/* ══ Abunə səhifəsi ═════════════════════════════════════════════════
   Marketinq sırası: ① indi nə var  ② nə istifadə olunub  ③ nə əlavə
   oluna bilər  ④ kömək. Qiymət hər blokda görünür — gizlədilmiş
   qiymət "yəqin bahadır" deməkdir. */

.bill-hero {
    position: relative;
    padding: 1.75rem;
    border-radius: 22px;
    color: var(--mud-palette-primary-text);
    background: linear-gradient(135deg, var(--mud-palette-primary) 0%, var(--mud-palette-secondary) 100%);
    box-shadow: 0 18px 44px color-mix(in srgb, var(--mud-palette-primary) 28%, transparent);
    overflow: hidden;
}

/* Dekorativ halqa — kartı "premium" edən yeganə element.
   `pointer-events: none`: düymələrin üstünü tutmamalıdır. */
.bill-hero::after {
    content: "";
    position: absolute;
    inset: auto -60px -90px auto;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: rgb(255 255 255 / 10%);
    pointer-events: none;
}

.bill-hero-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.25rem;
    position: relative;
    z-index: 1;
}

.bill-plan-name {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.5px;
}

.bill-price {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
}

/* İstifadə zolağı — dörd kiçik ölçü, bir sətir. Səhifənin əsas
   mövzusu paket və modullardır; sayğaclar yer tutmamalıdır. */
.bill-meters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: .75rem;
}

.bill-meter {
    padding: .85rem 1rem;
    border-radius: 14px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
}

/* Modul kartı */
.bill-addon {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding: 1.15rem;
    border-radius: 18px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.bill-addon:hover {
    border-color: color-mix(in srgb, var(--mud-palette-primary) 45%, transparent);
    box-shadow: 0 12px 28px color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
    transform: translateY(-2px);
}

.bill-addon-owned {
    border-color: color-mix(in srgb, var(--mud-palette-success) 45%, transparent);
    background: color-mix(in srgb, var(--mud-palette-success) 6%, var(--mud-palette-surface));
}

.bill-addon-head {
    display: flex;
    align-items: center;
    gap: .65rem;
}

.bill-addon-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 12px;
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
}

.bill-addon-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-top: auto;
    padding-top: .35rem;
}

@media (max-width: 640px) {
    .upsell-paywall-foot { justify-content: stretch; }
    .upsell-price-figure { font-size: 1.5rem; }
    .bill-plan-name { font-size: 1.6rem; }
}


/* ══════════════════════════════════════════════════════════════════════════
   DƏSTƏK İSTƏYİ — TƏSDİQ EKRANI (12.08.2026)
   ══════════════════════════════════════════════════════════════════════════
   Göndərişdən sonra dialoq bağlanmır: istəyin NÖMRƏSİ, e-poçt və telefon
   ekranda qalır. Səbəb sadədir — istifadəçi «getdi, ya getmədi?» sualı ilə
   qalanda eyni istəyi ikinci dəfə göndərir və dəstək qutusunda dublikat
   yaranır. Nömrəni göstərmək həm də səhv yazılmış nömrəni üzə çıxarır. */
.sup-done {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: 1.5rem;
    padding-bottom: 1rem;
}

.sup-done-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    max-width: 420px;
}

.sup-done-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 12px;
    background: var(--mud-palette-background-grey);
    text-align: start;
}

.sup-done-label {
    font-size: .78rem;
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
    flex-shrink: 0;
}

.sup-done-value {
    font-size: .85rem;
    font-weight: 800;
    color: var(--mud-palette-text-primary);
    margin-inline-start: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ══════════════════════════════════════════════════════════════════════════
   MÜŞTƏRİ MÜRACİƏTİNİN DETALI (13.08.2026) — MySupportDetailDialog
   ══════════════════════════════════════════════════════════════════════════
   🔴 NİYƏ QLOBAL CSS, komponent yanındakı .razor.css DEYİL:
      MudBlazor dialoqu <body> altında AYRICA qatda render olunur, ona görə
      Blazor-un `b-xxxxx` scope atributu ora düşmür və izolyasiya edilmiş
      qaydalar HEÇ VAXT tətbiq olunmur. Eyni səbəb: reports.css, legal.css,
      a11y.css, about.css. */
.mysup-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.mysup-timeline {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 46vh;
    overflow-y: auto;
    /* Sürüşdürmə dialoqun özünə keçməsin — mobil telefonda dialoq
       yazışmanın ortasında bağlanırdı. */
    overscroll-behavior: contain;
    padding-inline-end: 4px;
}

.mysup-msg {
    border-radius: 14px;
    padding: 10px 14px;
    border: 1px solid var(--mud-palette-lines-default);
}

/* Müştərinin öz mətni — solda, sakit fon.
   Bizim cavab — vurğulu kənar: gözün ilk tutduğu şey CAVAB olmalıdır. */
.mysup-msg--mine {
    background: var(--mud-palette-background-grey);
}

.mysup-msg--theirs {
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent);
    border-color: color-mix(in srgb, var(--mud-palette-primary) 35%, transparent);
}

.mysup-msg__head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .74rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 4px;
}

.mysup-msg__time {
    margin-inline-start: auto;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
}

.mysup-msg__body {
    font-size: .9rem;
    line-height: 1.5;
    color: var(--mud-palette-text-primary);
    /* Şablon mətnləri sətir sonu ilə gəlir; `pre-wrap` olmasa hamısı
       bir sətrə yığılır və struktur itir. */
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Status dəyişikliyi — mesaj deyil, ona görə balacadır və qutusuzdur. */
.mysup-step {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .78rem;
    color: var(--mud-palette-text-secondary);
    padding: 2px 6px;
}

.mysup-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 1.5rem 0;
    opacity: .55;
    text-align: center;
}

.mysup-contact {
    margin-top: 1rem;
    padding-top: .75rem;
    border-top: 1px dashed var(--mud-palette-lines-default);
}

.mysup-contact__row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .85rem;
    padding: 2px 0;
}

@media (max-width: 600px) {
    .mysup-timeline { max-height: 52vh; }
    .mysup-msg__time { display: none; }
}


/* ══════════════════════════════════════════════════════════════════════════
   ABUNƏ EKRANI — «MÜRACİƏTLƏRİM» SƏTRİ (13.08.2026)
   ══════════════════════════════════════════════════════════════════════════
   Sətir artıq kliklənir (yazışmanı açır), ona görə kursor və hover lazımdır:
   kliklənən, lakin kliklənən kimi GÖRÜNMƏYƏN sahə tapılmır. */
.bill-sup-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 10px 8px;
    margin-inline: -8px;
    border-bottom: 1px dashed var(--mud-palette-lines-default);
    border-radius: 10px;
    cursor: pointer;
    transition: background-color .15s ease;
}

.bill-sup-row:hover {
    background-color: rgba(var(--mud-palette-primary-rgb), .06);
}

.bill-sup-row:last-child {
    border-bottom: none;
}

.bill-sup-row__main {
    flex: 1 1 220px;
    min-width: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   DƏSTƏK MENYUSU — QURAŞDIRMA BƏLƏDÇİSİ KARTI (13.09.2026)
   ══════════════════════════════════════════════════════════════════════════
   Bələdçi hesab menyusundan buraya köçdü (sahibin qərarı). Kart ekranın
   BİRİNCİ blokudur: yeni klinikanın ən çox ehtiyacı olan kömək budur. */
.sup-guide__row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.sup-guide__icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 14px;
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
}

.sup-guide__text {
    flex: 1 1 260px;
    min-width: 0;
}

.sup-guide__progress {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
    max-width: 420px;
}

    .sup-guide__progress .mud-progress-linear {
        flex: 1 1 auto;
    }

/* ══════════════════════════════════════════════════════════════════════════
   UZUN BAŞLIQ SƏTRİ KƏSİR (10.09.2026)
   ══════════════════════════════════════════════════════════════════════════
   Sistem sahibi: «dəstək ekranında yazılar listdən daşır, əgər başlıq çox
   uzundursa onu kəsək mütləq».

   🔴 `min-width: 0` TƏK BAŞINA KİFAYƏT ETMİR — o, yalnız flex elementinin
      məzmundan kiçilməsinə İCAZƏ VERİR. Mətnin özü isə hələ də sətri
      uzadır; kəsmək üçün üç xassə birlikdə lazımdır.

   ⚠️ MƏTN İTMİR: tam başlıq `title` atributundadır (üzərinə gələndə görünür)
      və sətrə klik yazışmanı onsuz da tam açır. */
.bill-sup-row__title {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ═══════════════════════════════════════════════════════════════════════════
   QURAŞDIRMA BƏLƏDÇİSİ (106) — 18.08.2026-da görünüş yenidən yazıldı
   ═══════════════════════════════════════════════════════════════════════════
   🔴 QLOBALDIR, scoped DEYİL: MudBlazor dialoqu `<body>` altında ayrı qatda
   render olunur, komponentin `.razor.css`-i ora çatmır (CLAUDE.md).

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

/* «İndi nə edim?» kartı — ekranın yeganə əsas hərəkəti. */
.setup-guide__next {
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 30%, transparent);
}

.setup-guide__next-label {
    color: var(--mud-palette-primary);
    font-weight: 700;
    letter-spacing: .08em;
}

.setup-guide__steps {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.setup-guide__step {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}

.setup-guide__step:hover {
    background: var(--mud-palette-action-default-hover);
    border-color: var(--mud-palette-lines-default);
}

/* 🔴 ÜSTÜNDƏN XƏTT YOXDUR. Görülmüş iş cəzalandırılmış kimi görünməməlidir —
   sakit fon və yaşıl işarə eyni məlumatı verir, tonu isə düzgündür. */
.setup-guide__step--done {
    opacity: .72;
}

/* Nömrə nişanı: sıra ÖZÜ məlumatdır (hər addım növbətinin şərtidir). */
.setup-guide__badge {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .8125rem;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-background-grey);
    border: 1px solid var(--mud-palette-lines-default);
}

.setup-guide__badge--done {
    color: #fff;
    background: var(--mud-palette-success);
    border-color: var(--mud-palette-success);
}

.setup-guide__body {
    flex: 1 1 auto;
    min-width: 0;
}

.setup-guide__chevron {
    flex: 0 0 auto;
}

@media (prefers-reduced-motion: reduce) {
    .setup-guide__step { transition: none; }
}

/* ══ Plan nişanı (115) ══════════════════════════════════════════════════
   «Hansı paketdəyəm?» sualının cavabı üç yerdədir: hesab menyusu, klinika
   profili başlığı, idarə paneli başlığı. Komponent: `Features/Shared/PlanBadge.razor`.

   ⚠️ QLOBAL FAYLDA: nişan MudPopover (hesab menyusu) içində də render
      olunur — o, <body> altında ayrı qatda çəkilir və heç bir səhifənin
      scoped CSS-i ora çatmır.

   ⚠️ Rənglər paket PİLLƏSİNƏ görə artır (boz → firuzəyi → qızılı). Bu,
      bəzək deyil: istifadəçi bir baxışda «yuxarıda daha nə var?» sualının
      cavabını görür. Ən yuxarı paketdə çağırış yoxdur (bax komponent). */
.plan-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.plan-badge__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .2px;
    white-space: nowrap;
    border: 1px solid transparent;
}

/* STANDART — sakit boz. Diqqət çəkmir, çünki burada satmaq üçün deyil,
   məlumat üçün duruq. */
.plan-badge__chip--t1 {
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-action-disabled-background);
    border-color: var(--mud-palette-lines-default);
}

/* PRO — brend rəngi. */
.plan-badge__chip--t2 {
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    border-color: color-mix(in srgb, var(--mud-palette-primary) 35%, transparent);
}

/* MAX — qızılı. Yeganə «mükafat» tonu; başqa heç yerdə işlədilmir. */
.plan-badge__chip--t3 {
    color: #92400e;
    background: #fef3c7;
    border-color: #fcd34d;
}

html.a11y-dark .plan-badge__chip--t3 {
    color: #fde68a;
    background: rgba(180, 130, 10, .18);
    border-color: rgba(252, 211, 77, .45);
}

/* 13.09.2026 — nişan DÜYMƏDİR: klik «Paketi yüksəlt» dialoqunu açır.
   `<button>` brauzerin öz şriftini daşıyır — `font: inherit` olmasa nişan
   qonşu mətndən fərqli şriftlə çəkilirdi. Ölçü `.plan-badge__chip`-dən
   YENİDƏN verilir, çünki `font` qısa yazısı onu sıfırlayır. */
.plan-badge__chip--action {
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: box-shadow .15s ease, filter .15s ease;
}

.plan-badge--dense .plan-badge__chip--action {
    font-size: 11px;
}

    .plan-badge__chip--action:hover {
        filter: brightness(.97);
        box-shadow: 0 2px 8px color-mix(in srgb, var(--mud-palette-primary) 20%, transparent);
    }

    .plan-badge__chip--action:focus-visible {
        outline: 2px solid var(--mud-palette-primary);
        outline-offset: 2px;
    }

.plan-badge__cta {
    border: none;
    background: none;
    padding: 0;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--mud-palette-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    white-space: nowrap;
}

    .plan-badge__cta:hover {
        color: var(--mud-palette-primary-darken);
    }

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

/* Sıx variant — hesab menyusu kimi dar yerlər. */
.plan-badge--dense {
    gap: 6px;
}

    .plan-badge--dense .plan-badge__chip {
        height: 21px;
        padding: 0 8px;
        font-size: 11px;
    }

    .plan-badge--dense .plan-badge__cta {
        font-size: 11px;
    }

/* ═══════════════════════════════════════════════════════════════════════════
   155 — PLATFORMA ÖDƏNİŞ DƏFTƏRİ

   Yeri `upsell.css`-dədir, ayrıca fayl DEYİL: hər ikisi "pul" ekranlarıdır və
   eyni dildə danışmalıdır (üstündən xətt çəkilən qiymət abunə kartında da,
   admin cədvəlində də eyni görünür).

   ⚠️ QLOBAL FAYLDIR, `.razor.css` DEYİL: Blazor scoped CSS UŞAQ KOMPONENTƏ
      tətbiq olunmur, `MudChip`/`MudTd` içindəki span isə məhz uşaqdır
      (bax `RazorSourceLintTests`).
   ═══════════════════════════════════════════════════════════════════════════ */

/* Üstündən xətt çəkilən "normal" qiymət — «167 ₼ yerinə 99 ₼». */
.pbill-strike {
    text-decoration: line-through;
    color: var(--mud-palette-text-secondary);
    opacity: .7;
    margin-right: .4rem;
    font-size: .9em;
}

/* Kart nömrəsi: rəqəmlər BƏRABƏR ENLİ olmalıdır, yoxsa 16 rəqəmi gözlə
   yoxlamaq mümkün deyil və müştəri səhv köçürür. */
.pbill-card-no {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 1.05rem;
    letter-spacing: .08em;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    word-break: break-all;
}

/* ══ HERO FAKTLARI (156) ═══════════════════════════════════════════════
   Sistem sahibi: «kartın son 4 rəqəmi, növbəti ödəniş tarixi və status».

   🔴 QLOBAL FAYLDIR, `.razor.css` DEYİL — `pbill-*` ilə eyni səbəb:
      Blazor scoped CSS UŞAQ KOMPONENTƏ tətbiq olunmur və bu blokun içində
      `MudIcon`/`MudChip` var (bax `RazorSourceLintTests`).

   ⚠️ Rəngi ÖZÜ TƏYİN ETMİR (`color: inherit`): blok `.bill-hero`-nun
      qradiyentinin üstündədir və orada mətn rəngi valideyndən gəlir.
      Sabit rəng versək tema dəyişəndə mətn fonla eyniləşə bilər. */
.bill-hero-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem 1.5rem;
    position: relative;
    z-index: 1;
}

.bill-hero-fact {
    display: flex;
    align-items: center;
    gap: .6rem;
    color: inherit;
}

.bill-hero-fact-label {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: .8;
}

.bill-hero-fact-value {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
}

/* Üstündən xətt çəkilən qiymət — hero-nun İÇİNDƏ.
   `pbill-strike`-dan ayrıdır: orada rəng `text-secondary`-dir və qradiyent
   fonun üstündə praktiki olaraq görünmür. */
.bill-hero-strike {
    text-decoration: line-through;
    opacity: .65;
    font-size: 1.05rem;
    font-weight: 600;
}

@media (max-width: 640px) {
    .bill-hero-facts { grid-template-columns: 1fr; gap: .65rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   182 — PLATFORMA ÖDƏNİŞ İCMALI + BİLDİRİŞLƏR (`pbd-*`)

   `pbill-*` ilə eyni fayldadır və eyni səbəblə QLOBALDIR: siniflər
   `MudTd`/`MudTooltip`/`MudDialog` içindəki elementlərə verilir, Blazor
   scoped CSS isə uşaq komponentə çatmır.

   ⚠️ Rənglər YALNIZ MudBlazor palitrasındandır — gecə rejimində öz-özünə
      dəyişir. `-rgb` dəyişənləri vergüllüdür: `rgba(var(--x-rgb), .12)`.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── GÖSTƏRİCİLƏR (klik = filtr) ──
   🔴 26.09 ÖLÇÜSÜ: `auto-fit` 1010 px-də 5 + 1 düzürdü (tək kart alt sətirdə),
      başlıqlar «…» ilə kəsilirdi və göstəricilər 632 px-lik ekranın yarısını
      tutub cədvəli aşağı itələyirdi. İndi: həmişə BİR sətir (6 sütun), ensiz
      konteynerdə ikon gizlənir, mətn kəsilmir — iki sətrə keçir.
   Ölçü EKRANA yox, KONTEYNERƏ görədir: yan panel açılıb-bağlananda eyni
   ekranda yer 156 px dəyişir. */
.pbd {
    container: pbd / inline-size;
}

.pbd-kpis {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
}

.pbd-kpi {
    display: flex;
    align-items: center;
    justify-content: flex-start;   /* qlobal düymə qaydası mərkəzləyir */
    gap: 10px;
    padding: 12px 14px;
    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: left;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

    .pbd-kpi:hover,
    .pbd-kpi:focus-visible {
        border-color: var(--mud-palette-primary);
        box-shadow: 0 4px 14px rgba(var(--mud-palette-primary-rgb), .12);
        outline: none;
    }

.pbd-kpi--active {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 2px rgba(var(--mud-palette-primary-rgb), .25);
}

.pbd-kpi-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 10px;
}

.pbd-kpi-icon--primary   { background: rgba(var(--mud-palette-primary-rgb), .12);   color: var(--mud-palette-primary); }
.pbd-kpi-icon--success   { background: rgba(var(--mud-palette-success-rgb), .14);   color: var(--mud-palette-success); }
.pbd-kpi-icon--warning   { background: rgba(var(--mud-palette-warning-rgb), .16);   color: var(--mud-palette-warning); }
.pbd-kpi-icon--error     { background: rgba(var(--mud-palette-error-rgb), .12);     color: var(--mud-palette-error); }
.pbd-kpi-icon--info      { background: rgba(var(--mud-palette-info-rgb), .12);      color: var(--mud-palette-info); }
.pbd-kpi-icon--secondary { background: rgba(var(--mud-palette-secondary-rgb), .12); color: var(--mud-palette-secondary); }

.pbd-kpi-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Başlıq və izah «…» ilə KƏSİLMİR (kəsik «GÖZLƏNİLƏN GƏ…» heç nə demir) —
   ən çox iki sətir, sonra kəsilir (alman dili üçün ehtiyat). */
.pbd-kpi-label,
.pbd-kpi-caption {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.pbd-kpi-label {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.pbd-kpi-value {
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1.3;
    white-space: nowrap;
}

.pbd-kpi-caption {
    font-size: .72rem;
    color: var(--mud-palette-text-secondary);
}

@container pbd (max-width: 1180px) {
    .pbd-kpi-icon { display: none; }
    .pbd-kpi { padding: 10px 12px; }
}

@container pbd (max-width: 760px) {
    .pbd-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@container pbd (max-width: 440px) {
    .pbd-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── CƏDVƏL ──
   🔴 26.09 ÖLÇÜSÜ: sahibin ekranında (1280×632, yan panel açıq) cədvəlin
      yeri ~1010 px-dir. MudBlazor-un sıx xanası 40 px üfüqi boşluq verir
      (7 sütun × 40 = 280 px) — 16 px-ə endirilir.
   ⚠️ Seçici MudBlazor-unkundan GÜCLÜ olmalıdır: onun qaydası 3 sinifdir və
      `padding-inline-*` yazır — sadə `.pbd-table .mud-table-cell { padding-left }`
      heç nə etmirdi (ölçüldü: xana yenə 16/24 px idi). */
.pbd-table.mud-table-dense * .mud-table-row .mud-table-cell {
    padding-inline-start: 8px;
    padding-inline-end: 8px;
}

    .pbd-table.mud-table-dense * .mud-table-row .mud-table-cell:first-child { padding-inline-start: 16px; }
    .pbd-table.mud-table-dense * .mud-table-row .mud-table-cell:last-child { padding-inline-end: 12px; }

/* Başlıq SIĞMAYANDA iki sətrə keçir: «Ödəniləcək məbləğ» tək sətirdə sütunu
   162 px edirdi, halbuki içindəki rəqəm 70 px-dir. */
.pbd-table .mud-table-head .mud-table-cell {
    line-height: 1.3;
}

/* Klinika adı sıxılıb 4 sətrə düşməsin (ölçüldü: «Kapital Bank · Arif Abdulla»). */
.pbd-table .mud-table-body .mud-table-cell:first-child {
    min-width: 140px;
}

.pbd-date {
    white-space: nowrap;
}

.pbd-status {
    margin: 4px 0 0 !important;
}

/* Əməliyyat sütunu SAĞDA SABİTDİR: sütunlar sığmayanda (uzun klinika adı,
   alman dili, 960–1279 px ekran) cədvəl sürüşür, «Ödənildi» isə görünür
   qalır. Yalnız masaüstü görünüşdə — 960 px-dən aşağı MudTable kartdır
   (`Breakpoint.Sm`). Fon qeyri-şəffafdır, yoxsa sürüşən mətn altından görünər. */
@media (min-width: 960px) {
    .pbd-table .pbd-sticky-end {
        position: sticky;
        right: 0;
        z-index: 1;
        background-color: var(--mud-palette-surface);
        border-left: 1px solid var(--mud-palette-table-lines);
    }

    .pbd-table .mud-table-row:hover .pbd-sticky-end {
        background-image: linear-gradient(var(--mud-palette-table-hover), var(--mud-palette-table-hover));
    }
}

.pbd-muted {
    font-size: .75rem;
    color: var(--mud-palette-text-secondary);
}

.pbd-card {
    display: flex;
    align-items: center;
    gap: 4px;
}

.pbd-inline-icon {
    font-size: 14px !important;
}

.pbd-services {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    max-width: 170px;
}

.pbd-tier,
.pbd-addon {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
}

.pbd-tier {
    background: rgba(var(--mud-palette-primary-rgb), .14);
    color: var(--mud-palette-primary);
    letter-spacing: .04em;
}

.pbd-addon {
    border: 1px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-text-secondary);
}

.pbd-addon--more {
    cursor: default;
}

/* 183 (27.09.2026) — «İlk ay pulsuz» kampaniyası: sətirdə hədiyyə nişanı. */
.pbd-addon--gift {
    gap: .25rem;
    border-color: color-mix(in srgb, var(--mud-palette-secondary) 55%, transparent);
    color: var(--mud-palette-secondary);
    background: color-mix(in srgb, var(--mud-palette-secondary) 9%, transparent);
}

/* 187 (28.09.2026) — ÖDƏNİLMƏMİŞ bir dəfəlik quraşdırma haqqı. Düymədir: klik
   «Ödəniş şərti»ni açır (məbləğ + «ödənilib» orada). `<button>`-un brauzer
   stilləri sıfırlanır — nişan qonşuları ilə eyni görünməlidir. */
.pbd-addon--setup {
    gap: .25rem;
    font-family: inherit;
    cursor: pointer;
    border-color: color-mix(in srgb, var(--mud-palette-warning) 60%, transparent);
    color: var(--mud-palette-warning-darken, var(--mud-palette-warning));
    background: color-mix(in srgb, var(--mud-palette-warning) 10%, transparent);
}

    .pbd-addon--setup:hover,
    .pbd-addon--setup:focus-visible {
        background: color-mix(in srgb, var(--mud-palette-warning) 18%, transparent);
    }

.pbd-amount {
    font-weight: 700;
    white-space: nowrap;
}

.pbd-discount {
    font-weight: 700;
    color: var(--mud-palette-success);
    white-space: nowrap;
}

/* ── BİLDİRİŞ XANASI: 3 kanal + «Avtomatik göndər» ── */
.pbd-notify {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 150px;
}

.pbd-notify-channels {
    display: flex;
    align-items: center;
    gap: 2px;
}

/* Ünvan yoxdur: düymə SÖNÜK görünür, lakin basılır — dialoq səbəbi yazır. */
.pbd-ch--off {
    opacity: .38;
    filter: grayscale(1);
}

.pbd-auto {
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

    .pbd-auto .mud-switch {
        margin: 0;
    }

    .pbd-auto .mud-typography {
        font-size: .78rem;
    }

/* ── DİALOQ ── */
.pbd-notice-kinds {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pbd-notice-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    word-break: break-all;
}

/* Önizləmə mətni: sətir keçidləri QORUNUR (WhatsApp/Telegram mətni sətir-sətir
   qurulub). Hündürlük ekranla məhduddur — 632 px-lik noutbukda dialoqun alt
   zolağı kəsilməsin (26.09 ölçüsü: MudBlazor dialoqu 100vh − appbar). */
.pbd-notice-preview {
    max-height: min(42vh, 360px);
    overflow-y: auto;
    padding: 12px 14px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    background: var(--mud-palette-background-gray);
    font-size: .85rem;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ── BİLDİRİŞ MƏRKƏZİ ── */
.pbd-channels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}

.pbd-channel {
    padding: 14px 16px;
    border-radius: 14px !important;
}

.pbd-facts {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .pbd-facts > div {
        display: flex;
        flex-direction: column;
        gap: 1px;
    }

    .pbd-facts span {
        font-size: .72rem;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: var(--mud-palette-text-secondary);
    }

    .pbd-facts strong {
        font-size: .9rem;
        font-weight: 600;
    }

.pbd-break {
    word-break: break-all;
}

.pbd-kinds {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 12px;
}

.pbd-kind {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

    .pbd-kind > div {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .pbd-kind strong {
        font-size: .88rem;
    }

    .pbd-kind span {
        font-size: .78rem;
        line-height: 1.45;
        color: var(--mud-palette-text-secondary);
    }

@media (max-width: 640px) {
    .pbd-kpi-value { font-size: 1.1rem; }
    .pbd-services { max-width: none; }
}