/* ══════════════════════════════════════════════════════════════════════════
   DİŞ TEXNİKİ (dental lab) — 079
   ══════════════════════════════════════════════════════════════════════════

   🔴 NİYƏ QLOBAL CSS, komponent yanındakı .razor.css DEYİL:
      Bu siniflərin bir hissəsi MudBlazor DİALOQUNUN içindədir, dialoq isə
      <body> altında AYRICA qatda render olunur — 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, upsell.css.

      Səhifə sinifləri (.lab-row, .lab-stat) də burada saxlanılır ki, eyni
      modulun stilləri iki fayla bölünməsin. */


/* ─────────────────────────────────────────────────────────────
   SAYĞAC ZOLAĞI — mərhələ süzgəci
   ───────────────────────────────────────────────────────────── */
.lab-stat-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.lab-stat {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 14px;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
    /* Süzgəc çipləri mətn kimi seçilməməlidir — iki dəfə klikləyəndə
       bütün sətir mavi rəngə boyanırdı. */
    user-select: none;
}

.lab-stat:hover {
    background: rgba(var(--mud-palette-primary-rgb), .05);
}

.lab-stat--active {
    border-color: var(--mud-palette-primary);
    background: rgba(var(--mud-palette-primary-rgb), .10);
}

.lab-stat__num {
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1;
}

.lab-stat__lbl {
    font-size: .74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--mud-palette-text-secondary);
}


/* ─────────────────────────────────────────────────────────────
   SİFARİŞ SƏTRİ
   ───────────────────────────────────────────────────────────── */
.lab-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 16px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    cursor: pointer;
    transition: background-color .15s ease;
}

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

.lab-row:hover {
    background-color: rgba(var(--mud-palette-primary-rgb), .05);
}

/* Gecikmiş iş — sol kənarda qırmızı zolaq.
   Fon rəngi İŞLƏNMİR: sətirdə onsuz da status çipi var və iki qırmızı
   siqnal bir-birini boğur. */
.lab-row--late {
    box-shadow: inset 3px 0 0 0 var(--mud-palette-error);
}

.lab-row__status { flex: 0 0 auto; }

.lab-row__main {
    flex: 1 1 240px;
    min-width: 0;
}

.lab-row__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    flex: 0 0 auto;
}

.lab-row__act {
    display: flex;
    gap: 8px;
    flex: 0 0 auto;
}


/* ─────────────────────────────────────────────────────────────
   İŞ SƏTİRLƏRİ (dialoq)
   ───────────────────────────────────────────────────────────── */
.lab-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lab-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-background-grey);
}

/* Diş nömrəsi — FDI. Sabit enli qutu, çünki siyahıda alt-alta düzülür
   və dəyişkən en «pilləkən» effekti yaradır. */
.lab-item__tooth {
    flex: 0 0 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-weight: 800;
    font-size: .95rem;
    background: rgba(var(--mud-palette-primary-rgb), .12);
    color: var(--mud-palette-primary);
}

.lab-item__main {
    flex: 1 1 auto;
    min-width: 0;
}

.lab-item__cost {
    flex: 0 0 auto;
    font-weight: 800;
    font-size: .9rem;
    white-space: nowrap;
}

.lab-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(var(--mud-palette-warning-rgb), .10);
    border: 1px solid rgba(var(--mud-palette-warning-rgb), .35);
    font-size: .88rem;
    line-height: 1.5;
    /* Həkimin göstərişi sətir sonları ilə yazılır; `pre-wrap` olmasa
       struktur itir və texnik onu bir cümlə kimi oxuyur. */
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}


/* ─────────────────────────────────────────────────────────────
   MƏRHƏLƏ TARİXÇƏSİ
   ───────────────────────────────────────────────────────────── */
.lab-timeline {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 30vh;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.lab-step {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .8rem;
    padding: 4px 6px;
    border-radius: 8px;
}

.lab-step:nth-child(odd) {
    background: var(--mud-palette-background-grey);
}

.lab-step__note {
    color: var(--mud-palette-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lab-step__time {
    margin-inline-start: auto;
    color: var(--mud-palette-text-disabled);
    white-space: nowrap;
}


/* ─────────────────────────────────────────────────────────────
   DİŞ SEÇİCİSİ (FDI) — plan və sifariş sətirlərində
   ───────────────────────────────────────────────────────────── */
.fdi-picker {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fdi-arch {
    display: grid;
    grid-template-columns: repeat(16, minmax(0, 1fr));
    gap: 3px;
}

.fdi-tooth {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    font-size: .62rem;
    font-weight: 700;
    cursor: pointer;
    user-select: none;
    transition: background-color .12s ease, border-color .12s ease;
}

.fdi-tooth:hover {
    border-color: var(--mud-palette-primary);
}

.fdi-tooth--on {
    background: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

/* Yuxarı və aşağı çənə arasında nazik ayırıcı — sağ/sol tərəfi
   qarışdırmamaq üçün orta xətt də var. */
.fdi-mid {
    height: 1px;
    background: var(--mud-palette-lines-default);
    margin: 2px 0;
}


/* ─────────────────────────────────────────────────────────────
   VİZİT SƏTİRLƏRİ («nə edildi») — 078
   ───────────────────────────────────────────────────────────── */
.vi-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
}

/* Plana bağlı seans — vurğulu kənar.
   Səbəb: onun qiyməti 0 ola bilər və bu, SƏHV DEYİL (iş planda bir dəfə
   hesablanıb). Fərqli görünüş bu sualı qabaqcadan cavablayır. */
.vi-row--plan {
    border-color: color-mix(in srgb, var(--mud-palette-info) 45%, transparent);
    background: color-mix(in srgb, var(--mud-palette-info) 7%, transparent);
}

.vi-row__main {
    flex: 1 1 200px;
    min-width: 0;
}

.vi-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    background: var(--mud-palette-background-grey);
    margin-top: 10px;
}

.vi-total__num {
    font-size: 1.35rem;
    font-weight: 800;
}

/* ── 084 ─────────────────────────────────────────────────────── */

/* Kataloq qiyməti — üstündən xətt. «300 idi, 250 aldıq» bir baxışda
   oxunur; ay sonu güzəşt cəmi bununla üst-üstə düşür. */
.vi-row__was {
    text-decoration: line-through;
    opacity: .6;
    margin-left: 4px;
}

/* Güzəşt cəmi ayrı sətirdir və YEKUNDAN SONRA gəlir: əvvəl nə qazandıq,
   sonra nədən keçdik. Tərsi olsaydı, ekran «itki hesabatı» kimi oxunardı. */
.vi-total--discount {
    background: color-mix(in srgb, var(--mud-palette-warning) 12%, transparent);
    margin-top: 6px;
    padding: 8px 14px;
}

/* Seans idarəsi qutusu — yalnız plana bağlı sətirdə görünür. */
.vi-session {
    border: 1px solid color-mix(in srgb, var(--mud-palette-info) 40%, transparent);
    background: color-mix(in srgb, var(--mud-palette-info) 6%, transparent);
}


/* ─────────────────────────────────────────────────────────────
   086 — PUL HESABI («bu qiymət idi, bu endirim, oldu bu»)
   ───────────────────────────────────────────────────────────── */
.vsum {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px;
    padding: 12px 14px;
    background: var(--mud-palette-background-grey);
}

.vsum__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 3px 0;
    font-size: .875rem;
}

/* Güzəşt sətri içəri girir — «bu rəqəm yuxarıdakına aiddir» demək üçün
   başlıq yazmağa ehtiyac qalmır. */
.vsum__row--sub {
    padding-left: 14px;
    font-size: .8125rem;
    color: var(--mud-palette-warning-darken);
}

.vsum__row--total {
    border-top: 1px solid var(--mud-palette-lines-default);
    margin-top: 6px;
    padding-top: 8px;
    font-weight: 800;
    font-size: 1.0625rem;
}

.vsum__hint {
    display: block;
    margin-top: 6px;
    font-size: .75rem;
    opacity: .75;
}


/* ─────────────────────────────────────────────────────────────
   086 — RANDEVU DETAL KARTI
   ───────────────────────────────────────────────────────────── */

/* Faktlar cədvəl kimi düzülür: açarlar sol sütunda bərabər enlə,
   dəyərlər sağda. MudGrid ilə edilsəydi, uzun xidmət adı açarı
   aşağı itələyərdi. */
.apd-facts {
    background: var(--mud-palette-background-grey);
    display: grid;
    gap: 6px;
}

.apd-fact {
    display: grid;
    grid-template-columns: minmax(90px, 32%) 1fr;
    gap: 10px;
    align-items: baseline;
}

.apd-fact__key {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    opacity: .65;
}

.apd-fact__val {
    font-size: .9375rem;
    font-weight: 600;
    min-width: 0;
    overflow-wrap: anywhere;
}

.apd-note {
    background: var(--mud-palette-background-grey);
    border: 1px dashed var(--mud-palette-lines-default);
}

/* Düymələr BƏRABƏR enlə sıralanır. Dar ekranda alt-alta düşür, hər biri tam en. */
.apd-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 8px;
}

.apd-btn {
    flex: 1 1 150px;
    min-width: 140px;
}

/* ── Əsas əməliyyat həmişə SONDA ──
   🔴 Sıra markup-da deyil, BURADA idarə olunur. Səbəb: «Növbəti seans»
      düyməsi status şərtlərindən ƏVVƏL render olunur (o, həm təsdiqlənmiş,
      həm tamamlanmış randevuda çıxır), «Tamamla» isə şərtin İÇİNDƏDİR.
      Markup-da sıralamaq üçün şərtləri iç-içə salmaq lazım gələrdi —
      oxunması çətinləşər, bir budağı unutmaq riski yaranardı.
   ⚠️ LTR-də göz sətri soldan sağa gedir və qərar düyməsini SONDA gözləyir.
      RTL dil əlavə olunsa, `order` avtomatik güzgülənir — flex özü edir. */
.apd-btn--primary {
    order: 90;
    /* Əsas düymə bir az daha geniş başlayır — bərabər sırada belə seçilir. */
    flex: 1.35 1 170px;
}

/* Daşma menyusu ən sağda və DAR: o, sıradakı əməliyyat deyil, giriş nöqtəsidir.
   `flex: 0 0 auto` olmasa bərabər bölgüyə qoşulub əsas düymə qədər yer tutardı. */
.apd-btn--more {
    order: 100;
    flex: 0 0 auto;
    align-self: stretch;
}

@media (max-width: 480px) {
    .apd-btn {
        flex: 1 1 100%;
    }

    .apd-btn--primary {
        flex: 1 1 100%;
        /* Telefonda ƏSAS düymə YUXARIDA olmalıdır: barmaq ekranın aşağısına
           çatmaya bilər və ən çox işlənən əməliyyat ilk görünəndir. */
        order: -1;
    }

    .apd-btn--more {
        flex: 1 1 100%;
    }
}


/* ─────────────────────────────────────────────────────────────
   086 — RANDEVU KARTINDAKI SEANS NİŞANI («2/3»)
   ───────────────────────────────────────────────────────────── */
.apc-item__session {
    display: inline-block;
    /* 🔴 Nişan HEÇ VAXT kiçilmir və HEÇ VAXT kəsilmir.
       Sətirdə yer çatmayanda xidmət adı «…» ilə bitir — kəsilmiş adın
       quyruğu «bu, 3 gəlişin 2-cisidir» məlumatından az dəyərlidir.
       Bunu götürsən uzun adlı xidmətdə nişan yenidən yox olur. */
    flex-shrink: 0;
    margin-left: 5px;
    padding: 0 5px;
    border-radius: 6px;
    font-size: .6875rem;
    font-weight: 800;
    line-height: 1.5;
    white-space: nowrap;
    background: color-mix(in srgb, var(--mud-palette-info) 22%, transparent);
    color: var(--mud-palette-info-darken);
}

/* 087 — YALNIZ kataloq proqnozu: izləmə yoxdur.
   Boz və nazikdir — mavi nişanla eyni görünsəydi, həkim «sistem sayır»
   zənn edərdi. İki fərqli şeyin eyni görünməsi yalan məlumatdır. */
.apc-item__session--plain {
    background: color-mix(in srgb, var(--mud-palette-text-secondary) 16%, transparent);
    color: var(--mud-palette-text-secondary);
    font-weight: 700;
}


/* ─────────────────────────────────────────────────────────────
   MÜALİCƏ PLANI
   ───────────────────────────────────────────────────────────── */
.plan-card {
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.plan-card:hover {
    border-color: var(--mud-palette-primary);
    background: rgba(var(--mud-palette-primary-rgb), .04);
}

.plan-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.plan-card__money {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 6px;
}

.plan-card__net {
    font-size: 1.2rem;
    font-weight: 800;
}

/* Endirim varsa ilkin məbləğ üstündən xətlə göstərilir — pasiyent nə
   qazandığını görməlidir, bu, satış anıdır. */
.plan-card__gross {
    font-size: .85rem;
    color: var(--mud-palette-text-disabled);
    text-decoration: line-through;
}

.plan-item {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 12px;
    border-bottom: 1px dashed var(--mud-palette-lines-default);
}

.plan-item:last-child { border-bottom: none; }

.plan-item__main { flex: 1 1 200px; min-width: 0; }


@media (max-width: 600px) {
    .lab-row__meta { align-items: flex-start; }
    .lab-row__act { width: 100%; }
    .lab-step__time { display: none; }
    .fdi-tooth { font-size: .55rem; }
}

/* Fakt sətrində ikon + mətn bir xətdə dursun.
   🔴 Əvvəl burada mətnin İÇİNDƏ emoji vardı («🩺 Dr. …»). Emoji hər
   platformada başqa ölçüdə çəkilir, rəngi temaya uyğunlaşmır və ekran
   oxuyucusu onu «stetoskop» kimi oxuyur — həkim adının qarşısında mənasızdır. */
.apd-fact__val--icon {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ══════════════════════════════════════════════════════════════════════════
   118 — MÜALİCƏ PLANI

   🔴 QLOBALDIR, scoped DEYİL: MudBlazor dialoqları `<body>` altında ayrı
      qatda render olunur və scoped CSS ora ÇATMIR (CLAUDE.md qaydası).
   ══════════════════════════════════════════════════════════════════════════ */

/* Pul zolağı — planın ilk baxışda cavab verdiyi sual «nə qədər?»dir. */
.plan-money {
    background: var(--mud-palette-background-grey);
    border-radius: var(--mud-default-borderradius);
}

.plan-total {
    background: var(--mud-palette-background-grey);
    border-radius: var(--mud-default-borderradius);
}

/* Plan kartı — pasiyent kartındakı siyahı. */
.plan-card {
    transition: box-shadow .15s ease, border-color .15s ease;
}

.plan-card:hover {
    box-shadow: var(--mud-elevation-4);
    border-color: var(--mud-palette-primary);
}

/* Gecikmiş sətir. Rəng TƏK siqnal deyil — ekran gün sayını da yazır
   (rəng korluğu olan istifadəçi ≈8% kişidir). */
.plan-overdue {
    border-left: 3px solid var(--mud-palette-error);
}

/* ══════════════════════════════════════════════════════════════════════════
   13.09.2026 — MÜALİCƏ PLANI YENİDƏN DİZAYN (tp-*)

   Sistem sahibi: «oxunaqlılıq zəifdir, düymə və seçici ölçüləri fərqlidir,
   yerləşmə qarışıqdır». Qaydalar:
     • bütün sahələr 40px (`Margin.Dense`) — seçicilərdə əvvəl yalnız `Dense`
       vardı və onlar qonşu rəqəm sahəsindən hündür qalırdı;
     • pul rəqəmləri `tabular-nums` — sütunda alt-alta oxunur;
     • rəng TƏK siqnal deyil: gecikmədə gün sayı, statusda söz yazılır;
     • silmə sətrin ⋮ menyusundadır.

   🔴 QLOBALDIR: plan dialoqları portal-da render olunur (yuxarıdakı qeyd).
   ══════════════════════════════════════════════════════════════════════════ */

/* ─── Tab başlığı + say nişanı ─── */
.tp-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.tp-head__title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tp-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 800;
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
}

/* ─── Plan kartı (pasiyent kartındakı siyahı) ─── */
.tp-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tp-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 16px;
    padding: 14px 10px 14px 16px;
    border-radius: 14px;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.tp-card:hover {
    border-color: var(--mud-palette-primary);
    box-shadow: var(--mud-elevation-2);
}

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

/* Gecikmiş plan — sol kənarda qırmızı zolaq; mətn də gün sayını yazır. */
.tp-card--overdue {
    box-shadow: inset 3px 0 0 var(--mud-palette-error);
}

.tp-card--overdue:hover {
    box-shadow: inset 3px 0 0 var(--mud-palette-error), var(--mud-elevation-2);
}

.tp-card--skeleton {
    cursor: default;
}

.tp-card--skeleton:hover {
    border-color: var(--mud-palette-lines-default);
    box-shadow: none;
}

.tp-card__main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tp-card__title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 8px;
}

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

.tp-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
}

.tp-meta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .8rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.tp-meta .mud-icon-root {
    font-size: 16px;
}

.tp-meta--error {
    color: var(--mud-palette-error);
}

.tp-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 320px;
}

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

.tp-progress__label {
    font-size: .78rem;
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.tp-card__money {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    text-align: right;
}

.tp-money-net {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--mud-palette-text-primary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.tp-money-sub {
    font-size: .74rem;
    font-weight: 600;
    white-space: nowrap;
}

.tp-money-sub--success {
    color: var(--mud-palette-success-darken);
}

.tp-money-sub--info {
    color: var(--mud-palette-info-darken);
}

.tp-card__chev {
    color: var(--mud-palette-text-disabled);
}

/* ─── Boş plan ekranı ─── */
.tp-empty-state {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
    border-radius: 16px;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
}

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

.tp-empty-state__body {
    flex: 1 1 auto;
    min-width: 0;
}

.tp-ways {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}

.tp-way {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

/* ─── Dialoq başlığı ─── */
.tp-dlg-title {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

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

.tp-dlg-title__text {
    flex: 1 1 auto;
    min-width: 0;
}

.tp-dlg-title__name {
    font-size: 1.1rem;
    font-weight: 800;
    line-height: 1.25;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tp-dlg-title__sub {
    font-size: .8rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

/* ─── Pul zolağı ─── */
.tp-money {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px 10px;
    padding: 12px;
    margin-bottom: 16px;
    border-radius: 14px;
    background: var(--mud-palette-background-grey);
}

.tp-money__cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding: 2px 6px;
}

/* «Qalıb» — planın ƏSAS rəqəmi: ayırıcı xətt və bir pillə böyük şrift. */
.tp-money__cell--lead {
    border-left: 1px solid var(--mud-palette-lines-default);
    padding-left: 14px;
}

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

.tp-money__value {
    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;
}

.tp-money__cell--lead .tp-money__value {
    font-size: 1.3rem;
}

.tp-money__value--warning {
    color: var(--mud-palette-warning-darken);
}

.tp-money__value--success {
    color: var(--mud-palette-success-darken);
}

.tp-money__value--info {
    color: var(--mud-palette-info-darken);
}

.tp-money__bar {
    grid-column: 1 / -1;
    padding: 0 6px;
}

/* ─── Sətirlər cədvəli ─── */
.tp-items-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.tp-items-head__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .9rem;
    font-weight: 800;
    color: var(--mud-palette-text-primary);
}

.tp-table {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px;
    overflow: hidden;
}

.tp-table .mud-table-head th {
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-background-grey);
}

.tp-table .mud-table-cell {
    vertical-align: middle;
}

/* 10 sətirdən az olanda səhifələyici render olunmur — boş qab zolaq qoymasın. */
.tp-table .mud-table-pagination:empty {
    display: none;
}

.tp-cell-service {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 160px;
}

.tp-cell-service__name {
    font-size: .875rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.tp-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.tp-chip-row .mud-chip {
    margin: 0;
}

.tp-tooth {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 26px;
    padding: 0 6px;
    border-radius: 8px;
    font-size: .8rem;
    font-weight: 800;
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
}

.tp-sessions {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 90px;
}

.tp-sessions__count {
    font-size: .85rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.tp-num {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.tp-date {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.tp-caption {
    display: block;
    margin-top: 2px;
    font-size: .72rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.tp-caption .mud-icon-root {
    font-size: 14px;
    vertical-align: -3px;
    margin-right: 2px;
}

.tp-caption--warning {
    color: var(--mud-palette-warning-darken);
}

.tp-caption--info {
    color: var(--mud-palette-info-darken);
}

.tp-caption--error {
    color: var(--mud-palette-error);
}

.tp-muted {
    color: var(--mud-palette-text-disabled);
}

.tp-menu-hint {
    max-width: 220px;
    font-size: .72rem;
    white-space: normal;
    color: var(--mud-palette-text-secondary);
}

.tp-empty {
    text-align: center;
    padding: 28px 16px;
    border: 1px dashed var(--mud-palette-lines-default);
    border-radius: 14px;
    background: var(--mud-palette-background-grey);
}

/* ─── «Planı bağla» zolağı ─── */
.tp-close {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px dashed color-mix(in srgb, var(--mud-palette-warning) 45%, transparent);
    background: color-mix(in srgb, var(--mud-palette-warning) 6%, transparent);
}

.tp-close__hint {
    flex: 1 1 240px;
    font-size: .8rem;
    color: var(--mud-palette-text-secondary);
}

/* ─── Sətir dialoqu: nömrəli bölmələr ─── */
.tp-form-section {
    padding: 14px 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.tp-form-section:first-child {
    padding-top: 2px;
}

.tp-form-section__title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.tp-step {
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: .7rem;
    font-weight: 800;
    color: var(--mud-palette-primary-text);
    background: var(--mud-palette-primary);
}

/* 16 dişlik sıra tam endə çox iri olur — seçici oxunaqlı enə sıxılır. */
.tp-tooth-picker {
    max-width: 600px;
}

.tp-hints {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin-top: 6px;
}

.tp-hint {
    font-size: .74rem;
    color: var(--mud-palette-text-secondary);
}

.tp-hint--info {
    font-weight: 600;
    color: var(--mud-palette-info-darken);
}

.tp-callout {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 10px;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: .8rem;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-background-grey);
}

.tp-callout--info {
    color: var(--mud-palette-info-darken);
    background: color-mix(in srgb, var(--mud-palette-info) 10%, transparent);
}

.tp-callout .mud-icon-root {
    flex: 0 0 auto;
    font-size: 18px;
}

.tp-note {
    margin-top: 14px;
}

.tp-total {
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--mud-palette-background-grey);
}

.tp-total__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-size: .8rem;
    color: var(--mud-palette-text-secondary);
}

.tp-total__row--main {
    font-size: .9rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.tp-total__value {
    font-size: 1.25rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 700px) {
    .tp-money {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tp-money__cell--lead {
        border-left: none;
        padding-left: 6px;
    }
}

@media (max-width: 600px) {
    .tp-card {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .tp-card__chev {
        display: none;
    }

    .tp-empty-state {
        flex-direction: column;
    }
}

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