/* ══════════════════════════════════════════════════════════════════════════
   asisDENT — TELEFON GÖRÜNÜŞÜ (16.10.2026)

   Sistem sahibi: «iPhone-da veb panel … menyuları gizlədək və sadəcə mobile
   appdə nə görürdüsə onu görsün». Panel telefonda (≤ 767.98 px) mobil
   tətbiqin quruluşunu alır:
     • sol yan panel gizlidir, altda 4 tab (Layout/MobileNav.razor);
     • «Menyu» yan paneli üstdən açır — HEÇ BİR ekran silinmir;
     • formalı dialoqlar tam ekran, mətnli təsdiq pəncərəsi aşağıdan vərəq;
     • input/textarea 16 px — iOS Safari fokusda səhifəni BÖYÜTMƏSİN;
     • iPhone-da ana ekrandan açılanda status zolağı/«home» xətti boşluğu.

   🔴 MASAÜSTÜ/PLANŞET DƏYİŞMƏMƏLİDİR: media sorğusundan KƏNARDA yalnız iki
      neytral qayda var (alt menyu gizli, sarğı `display: contents`).
      Qoruma: `MobileLayoutCssTests`.
   ⚠️ 767.98 px — MudBlazor `sm` sərhədi (768) ilə eyni: planşet portret
      (768+) masaüstü görünüşündə qalır.
   ⚠️ z-index: alt menyu yan panelin örtüyündən (appbar + 1) YUXARI, dialoq
      (1400) və əlçatanlıq düyməsindən AŞAĞI — açıq panel «Menyu» tabı ilə
      bağlanır, dialoq isə alt menyunun üstünü örtür.
   ══════════════════════════════════════════════════════════════════════════ */

.mob-nav {
    display: none;
}

/* Masaüstündə sarğının öz qutusu yoxdur — zolağın düzülüşü əvvəlki kimidir. */
.app-desktop-only {
    display: contents;
}

/* Yalnız telefonda görünən sətir (hesab menyusunda «Əlçatanlıq»). */
.app-mobile-only {
    display: none;
}

/* Yalnız ana ekran rejimində (`html.app-standalone`, js/pwa.js) — zolaqdakı «Yenilə».
   Brauzerdə (masaüstü də) sinif yoxdur → düymə görünmür. */
.app-standalone-only {
    display: none !important;
}

html.app-standalone .app-standalone-only {
    display: inline-flex !important;
}

@media (max-width: 767.98px) {
    :root {
        /* 25.10.2026 (TaskSession) — iPhone (iOS 26) status zolağının altına AĞ
           solğunluq çəkir və o, zolağın sərhədindən ~6 px AŞAĞI düşür: zolağın
           düymələri və tam ekran dialoqun «X»-i onun altında qalırdı (sahibin
           şəkilləri). Sərhəd 10 px aşağı çəkilir — YALNIZ status zolağı olan
           ekranda: brauzerdə (dəyər 0) heç nə dəyişmir. */
        --app-safe-top: calc(env(safe-area-inset-top, 0px) + min(env(safe-area-inset-top, 0px), 10px));
        --app-safe-bottom: env(safe-area-inset-bottom, 0px);
        --app-mob-bar: 48px;   /* sıx MudAppBar (MainLayout: Dense) */
        --app-mob-nav: 60px;   /* alt menyunun hündürlüyü (boşluqsuz) */
    }

    /* ── Yuxarı zolaq ─────────────────────────────────────────────────── */
    .app-desktop-only,
    .app-hide-mobile {
        display: none !important;
    }

    /* `black-translucent`: məzmun status zolağının altına girir → zolaq onun
       qədər aşağı uzanır. Brauzerdə (ana ekransız) dəyər 0-dır. */
    .mud-appbar {
        padding-top: var(--app-safe-top);
    }

    .app-footer {
        display: none !important;
    }

    /* ── Məzmun: yan panelə yer saxlanmır, alt menyuya saxlanır ─────────── */
    .mud-layout .mud-main-content.main-content-area {
        margin-left: 0 !important;
        height: 100vh !important;
        height: 100dvh !important;
        padding-bottom: calc(var(--app-mob-nav) + var(--app-safe-bottom));
        animation: none !important;
    }

    .main-container-area {
        margin-top: var(--app-safe-top);
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* ── Yan panel: yalnız «Menyu» ilə, məzmunun ÜSTÜNDƏ ─────────────────
       Dar (mini) zolaq telefonda ekranın 64 px-ni həmişə tuturdu (ölçü
       16.10: 390 px-də məzmun 326 px idi) — bağlı panel tam gizlidir. */
    .app-nav-drawer {
        margin-top: var(--app-safe-top);
        height: calc(100% - var(--app-mob-bar) - var(--app-safe-top) - var(--app-mob-nav) - var(--app-safe-bottom)) !important;
        box-shadow: 0 8px 28px rgba(0, 0, 0, .18);
        transition: transform 225ms cubic-bezier(0, 0, .2, 1), visibility 0s linear 0s !important;
    }

    .app-nav-drawer.mud-drawer--closed {
        transform: translateX(-100%);
        visibility: hidden;
        box-shadow: none;
        transition: transform 225ms cubic-bezier(0, 0, .2, 1), visibility 0s linear 225ms !important;
    }

    /* 16.10 (3) — «menyu açılıb-bağlananda pis kəsir, donur» (sahibin videosu).
       Kadr ölçüsü: bağlananda panel ƏVVƏLCƏ 64 px-lik dar zolağa (masaüstünün mini
       rejimi) düşürdü, sonra sürüşürdü; açılanda isə daxildə 40-dan çox keçid
       (etiket soluşu, girinti, ikon ölçüsü) eyni anda oynayırdı. Telefonda panelin
       YEGANƏ hərəkəti sürüşmədir: en hər iki vəziyyətdə eynidir, daxili keçidlər
       yoxdur, bağlanan panel açıq panelin görünüşündə çıxıb gedir. */
    .mud-layout .app-nav-drawer.mud-drawer,
    .mud-layout .app-nav-drawer.mud-drawer.mud-drawer--closed {
        width: var(--mud-drawer-width-left, 220px) !important;
    }

    .mud-layout .app-nav-drawer.mud-drawer .nav-container *,
    .mud-layout .app-nav-drawer.mud-drawer .nav-container *::before,
    .mud-layout .app-nav-drawer.mud-drawer .nav-container *::after {
        transition: none !important;
    }

    .mud-layout .app-nav-drawer.mud-drawer--closed .nav-container .mud-nav-link-text,
    .mud-layout .app-nav-drawer.mud-drawer--closed .nav-container .mud-nav-link-expand-icon {
        opacity: 1 !important;
    }

    .mud-layout .app-nav-drawer.mud-drawer--closed .nav-container .mud-nav-group .mud-navmenu {
        margin-left: 24px !important;
        border-left-color: var(--mud-palette-lines-default) !important;
    }

    .mud-layout .app-nav-drawer.mud-drawer--closed .nav-container .mud-nav-group .mud-navmenu .mud-nav-link {
        margin: 1px 6px 1px 2px !important;
        padding-left: 8px !important;
    }

    .mud-layout .app-nav-drawer.mud-drawer--closed .nav-container .mud-nav-group .mud-navmenu .mud-nav-link-icon {
        font-size: 1.15rem !important;
        margin-right: 6px !important;
    }

    /* ── Təqvim: uzun basış = SÜRÜKLƏMƏ, mətn seçimi YOX ─────────────────
       16.10 (4) — sahibin videosu: gün görünüşündə randevunu barmaqla tutanda
       iOS bütün sütunu mavi «seçirdi» (mətn seçimi + kontekst pəncərəsi) və
       blok yerindən tərpənmirdi. Seçim söndürülür, sürüklənən blok iOS-a
       «element» kimi verilir. Vaxt dəyişikliyi təsdiq dialoqundan keçir. */
    .apc-cal {
        -webkit-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
    }

    .apc-cal [draggable="true"] {
        -webkit-user-drag: element;
    }

    /* ── İpucu (tooltip) telefonda YOXDUR ─────────────────────────────────
       Toxunuş ekranında «hover» yoxdur: toxunanda açılan ipucu bir daha
       bağlanmırdı — menyu bağlandıqdan sonra «Anbar», «Klinika» adları bütün
       ekranlarda asılı qalırdı (sahibin videosu). Mətn düymənin `aria-label`-ində
       və yanındakı yazıda onsuz da var. */
    .mud-popover.mud-tooltip {
        display: none !important;
    }

    /* ── Bildiriş (snackbar) — telefonda ALTDA, alt menyunun üstündə ──────
       25.10.2026 (TaskSession) — sahibin şəkli: bildiriş yuxarıda tam ekran
       formanın başlığını («X» daxil) örtürdü və ekranın sol kənarından kəsilirdi
       (MudBlazor sağdan 24 px boşluq + 288–500 px en verir — 390 px-də sola
       daşır). Əvvəl (16.10) status zolağının altında, yuxarıda idi. İndi telefon
       tətbiqlərinin qaydası ilə: altda, alt menyunun / formanın «Yadda saxla»
       sətrinin ÜSTÜNDƏ, ekran enində (hər tərəfdən 12 px), uzun mətn alt sətrə
       düşür. Konteyner MudBlazor-da `#mud-snackbar-container`-dir (ölçüldü). */
    #mud-snackbar-container[class*="mud-snackbar-location-"] {
        top: auto !important;
        bottom: calc(var(--app-mob-nav) + var(--app-safe-bottom) + 12px) !important;
        left: 12px !important;
        right: 12px !important;
        transform: none !important;
    }

    #mud-snackbar-container .mud-snackbar {
        min-width: 0;
        max-width: none;
        width: 100%;
        box-sizing: border-box;
    }

    /* Ölçüldü (ux-ui aləti, WCAG 4.5:1): MudBlazor-un dolu rəngləri üstündə ağ yazı
       oxunmurdu — uğur 2.24, xəbərdarlıq 2.16, məlumat 3.12, xəta 3.68. Telefonda
       tünd çalarlar (uğur 5.02, məlumat 6.70, xəta 6.47); xəbərdarlıq kəhrəba fonda
       TÜND yazı ilə (8.14) — rəng yenə «diqqət» deyir. Masaüstü dəyişmir. */
    #mud-snackbar-container .mud-snackbar.mud-alert-filled-success {
        background-color: #15803d;
        color: #fff;
    }

    #mud-snackbar-container .mud-snackbar.mud-alert-filled-info {
        background-color: #1d4ed8;
        color: #fff;
    }

    #mud-snackbar-container .mud-snackbar.mud-alert-filled-error {
        background-color: #b91c1c;
        color: #fff;
    }

    #mud-snackbar-container .mud-snackbar.mud-alert-filled-warning {
        background-color: #f59e0b;
        color: #1c1917;
    }

    /* ── İdarə paneli: rəqəm kartı məzmun boyda (sabit 104 px-də etiket kəsilirdi
       — iPhone-da ikon 48 px idi), iki sütun (Home.razor xs=6). ── */
    .widget-box.widget-box--kpi {
        height: auto;
    }

    .widget-box .kpi-card {
        padding: 12px !important;
        gap: 6px;
    }

    .widget-box .kpi-card .kpi-icon-box {
        width: 32px;
        height: 32px;
        border-radius: 9px;
    }

    .widget-box .kpi-card .kpi-value {
        font-size: 1.3rem;
        overflow: visible;
        text-overflow: clip;
    }

    /* 175 px-lik kartda rəqəm + artım nişanı yan-yana sığmırdı («265 ₼» → «2…»):
       nişan rəqəmin ALTINA enir. */
    .widget-box .kpi-card .kpi-figure {
        flex-direction: column;
        align-items: flex-end;
        gap: 2px;
    }

    .widget-box .kpi-card .kpi-trend {
        padding: 2px 6px;
        font-size: 10.5px;
    }

    .widget-box .kpi-card .kpi-title {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        font-size: 10.5px;
        line-height: 1.25;
    }

    /* ── Alt menyu (mobil tətbiqin GlassNavBar-ı kimi) ───────────────────── */
    .mob-nav {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: calc(var(--mud-zindex-appbar, 1300) + 2);
        height: calc(var(--app-mob-nav) + var(--app-safe-bottom));
        padding: 0 6px var(--app-safe-bottom);
        box-sizing: border-box;
        align-items: stretch;
        justify-content: space-around;
        background: var(--mud-palette-surface);
        background: rgba(var(--mud-palette-surface-rgb), .94);
        -webkit-backdrop-filter: saturate(160%) blur(14px);
        backdrop-filter: saturate(160%) blur(14px);
        border-top: 1px solid var(--mud-palette-lines-default);
        box-shadow: 0 -2px 12px rgba(0, 0, 0, .06);
    }

    .mob-nav__tab {
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 0;
        margin: 0;
        border: 0;
        background: none;
        font: inherit;
        color: var(--mud-palette-text-secondary);
        text-decoration: none;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .mob-nav__icon {
        width: 56px;
        height: 30px;
        padding: 3px 0;
        box-sizing: border-box;
        border-radius: 15px;
        font-size: 24px;
        transition: background-color .2s ease, color .2s ease;
    }

    .mob-nav__label {
        max-width: 100%;
        font-size: 12px;
        font-weight: 500;
        line-height: 1.1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mob-nav__tab.active {
        color: var(--mud-palette-primary);
    }

    .mob-nav__tab.active .mob-nav__icon {
        background: rgba(var(--mud-palette-primary-rgb), .14);
    }

    .mob-nav__tab.active .mob-nav__label {
        font-weight: 700;
    }

    /* ── Əlçatanlıq: üzən düymə YOX, hesab menyusunda sətir ──────────────
       16.10 (2) ölçüsü: düymə alt menyunun üstünə qaldırılanda bu dəfə
       formaların sağ altdakı düyməsini örtürdü («Yadda saxla» — klinika
       profili, sistem ayarları). Panel Menyu → Profil → «Əlçatanlıq» ilə
       açılır (UserMenu → AccessibilityService.RequestPanel). */
    .a11y-launcher {
        display: none !important;
    }

    .mud-list-item.app-mobile-only {
        display: flex;
    }

    /* ── Dialoqlar ────────────────────────────────────────────────────────
       Forma (xana, seçim, cədvəl, tab) olan dialoq — TAM EKRAN (yeni randevu,
       pasiyent kartı, ödəniş). Yalnız mətndən ibarət təsdiq («Silinsin?»)
       — aşağıdan vərəq (mobil tətbiqin AppSheet-i kimi): tam ekran boş
       vərəqdə iki düymə itib-batırdı.
       ⚠️ `:has()` iOS 15.4+ / Chrome 105+. Köhnə brauzerdə hamısı vərəqdir
          (ekranın enində, hündürlüyü 100%-ə qədər) — yenə istifadə olunur.
       ⚠️ `xs` dialoqlar (TOTP, müvəqqəti şifrə…) kiçik qalır — onlar zatən
          dar və qısadır; yalnız enini ekrana sığdırırıq. */
    .mud-dialog-container .mud-dialog:not(.mud-dialog-width-xs):not(.search-dialog) {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        top: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        /* 16.10 (3) — vərəq status zolağının ALTINDA bitir. Əvvəl `100%` idi:
           uzun vərəq (randevu detalı, şəkil baxışı) ekranın yuxarısına qədər
           böyüyürdü, başlıq və «X» iPhone-un saat zolağının altında qalırdı —
           dialoqu bağlamaq olmurdu (sahibin şəkli + videosu). */
        max-height: calc(100% - var(--app-safe-top) - 10px) !important;
        margin: 0 !important;
        border-radius: 16px 16px 0 0;
        padding-bottom: var(--app-safe-bottom);
        box-sizing: border-box;
    }

    .mud-dialog-container .mud-dialog:not(.mud-dialog-width-xs):not(.search-dialog):has(input, textarea, select, .mud-select, .mud-table, .mud-tabs, .mud-picker, .ql-editor) {
        top: 0 !important;
        height: 100% !important;
        /* 17.10 — vərəqin `max-height`-i (status zolağı + 10 px) TAM EKRAN formaya
           da düşürdü: forma ekranın altına 10 px (iPhone-da ~57 px) çatmırdı, alt
           menyu görünürdü. Forma içində açılan saat / tarix seçicisi bu formaya
           bağlıdır (MudBlazor onu formanın içində çəkir) — onun da altı kəsilirdi
           (sahib: «saatın alt hissəsi düymələrin altında qalır»). Yuxarı boşluğu
           `padding-top` verir. */
        max-height: 100% !important;
        border-radius: 0;
        padding-top: var(--app-safe-top);
    }

    /* 25.10.2026 (TaskSession) — «X» BAŞLIQLA bir yerdədir. MudBlazor onu dialoqun
       özünə görə yerləşdirir (`top: 8px`); tam ekran formada dialoqun üst boşluğu
       status zolağıdır → «X» saatın altında qalırdı, basılmırdı (sahibin şəkli:
       «Yeni randevu»). Başlıq mövqeli olanda «X» başlığın küncündədir — vərəqdə də,
       tam ekranda da. Yapışqan başlıq (`apd-dialog`) onsuz da mövqelidir. */
    .mud-dialog-container .mud-dialog:not(.apd-dialog) .mud-dialog-title {
        position: relative;
    }

    /* Rəngli başlıqlı forma (`hero-dialog`, upsell.css): status zolağının altı da
       əsas rəngdədir — başlığın üstündə ağ zolaq qalmır. */
    .mud-dialog-container .mud-dialog.hero-dialog:has(input, textarea, select, .mud-select, .mud-picker) {
        background-image: linear-gradient(var(--mud-palette-primary), var(--mud-palette-primary));
        background-size: 100% var(--app-safe-top);
        background-repeat: no-repeat;
    }

    /* ── Ctrl+K axtarışı — telefonda YUXARIDAN düşən vərəq ──────────────────
       25.10.2026 (TaskSession) — sahib: «axtar hissəsi biabırçıdır, basdıqdan
       sonra çıxmaq qeyri-mümkün olur və çox böyük açılır». Səbəb: içində xana
       olduğu üçün yuxarıdakı qayda onu TAM EKRAN edirdi, başlığı və «X»-i yoxdur,
       Esc düyməsi isə telefonda yoxdur. İndi: məzmun boyda vərəq (klaviatura
       altda açılır), altında arxa fon görünür (toxunuş bağlayır) və xananın
       yanında «Bağla» (GlobalSearch.razor). */
    .mud-dialog-container .mud-dialog.search-dialog {
        position: fixed !important;
        top: calc(var(--app-safe-top) + 8px) !important;
        left: 8px !important;
        right: 8px !important;
        bottom: auto !important;
        width: auto !important;
        max-width: none !important;
        max-height: calc(100% - var(--app-safe-top) - 16px) !important;
        margin: 0 !important;
        border-radius: 16px;
    }

    .mud-dialog-container .mud-dialog.search-dialog .mud-dialog-content {
        padding: 12px 12px 4px;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .mud-dialog-container .mud-dialog.mud-dialog-width-xs {
        max-width: calc(100% - 24px) !important;
        margin: 0 12px !important;
    }

    /* Uzun forma: başlıq və düymələr yerində, ortası sürüşür. */
    .mud-dialog-container .mud-dialog .mud-dialog-content {
        padding-left: 16px;
        padding-right: 16px;
    }

    .mud-dialog-container .mud-dialog .mud-dialog-actions {
        flex-wrap: wrap;
        gap: 8px;
    }

    /* 17.10 — saat / tarix seçicisi (PickerVariant.Dialog) aşağıdan vərəqdir.
       app.css-dəki `max-width: 100vw - 24px` vərəqdə yaşıl başlığı sağda 24 px
       qısa qoyurdu; ciferblatın altı isə ekranın kənarına (iPhone-un ev
       zolağına / Safari-nin alt panelinə) yapışırdı — sahib: «saatın alt hissəsi
       düymələrin altında qalır». Vərəq indi tam endədir, altda ehtiyat boşluq
       var və hündürlüyə sığmasa öz içində sürüşür. */
    .mud-dialog-container .mud-dialog.mud-picker {
        padding-bottom: calc(var(--app-safe-bottom) + 16px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .mud-dialog-container .mud-dialog.mud-picker .mud-picker-container {
        max-width: 100%;
        max-height: none;
        overflow: visible;
    }

    /* ── Randevu detalı (`apd-dialog`) — ən çox açılan pəncərə ─────────────
       Əvvəl düymə bloku (pul + status, ~400 px) aşağıda SABİT qalırdı və
       məlumata 3-4 sətir yer qalırdı («Xidmət 30 ₼» kəsilirdi). İndi vərəq
       BÜTÖVLÜKDƏ sürüşür; başlıq (X) yuxarıda, status düymələri altda yapışıqdır.
       Status paneli: əsas əməliyyat tam endə, qalanları yan-yana, «⋯» sonda. */
    .mud-dialog-container .mud-dialog.apd-dialog {
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0;
    }

    .mud-dialog.apd-dialog > .mud-dialog-title {
        position: sticky;
        top: 0;
        z-index: 3;
        background: var(--mud-palette-surface);
        border-bottom: 1px solid var(--mud-palette-lines-default);
    }

    .mud-dialog.apd-dialog .mud-dialog-content {
        flex: 0 0 auto;
        max-height: none !important;
        overflow: visible !important;
    }

    .mud-dialog.apd-dialog .mud-dialog-actions {
        flex: 0 0 auto;
        padding-bottom: 0;
    }

    .mud-dialog.apd-dialog .apd-status {
        display: flex;
        flex-direction: column;
        gap: 8px;
        position: sticky;
        bottom: 0;
        z-index: 3;
        margin: 0 -16px;
        padding: 10px 16px calc(12px + var(--app-safe-bottom));
        background: var(--mud-palette-surface);
        border-top: 1px solid var(--mud-palette-lines-default);
        box-shadow: 0 -6px 16px rgba(0, 0, 0, .08);
    }

    .mud-dialog.apd-dialog .apd-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .mud-dialog.apd-dialog .apd-status .apd-actions {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    }

    .mud-dialog.apd-dialog .apd-btn {
        min-width: 0;
        min-height: 44px;
    }

    .mud-dialog.apd-dialog .apd-status .apd-btn--primary,
    .mud-dialog.apd-dialog .apd-status .mud-chip {
        grid-column: 1 / -1;
        order: -1;
    }

    .mud-dialog.apd-dialog .apd-btn--more {
        min-width: 44px;
        min-height: 44px;
    }

    /* ══ 16.10 (2) — ƏSAS SƏHİFƏLƏR ═══════════════════════════════════════
       Ölçü (390 px, 44 ekran): heç bir səhifə ekrandan DAŞMIR — problem
       sıxlıqdır. Yığılmış cədvəldə hər xana 50 px idi (pasiyent sətri
       ~400 px = ekranda 2 pasiyent), rəqəm kartları birər-birər düzülürdü,
       tab zolağının davamı görünmürdü. */

    /* ── Yığılmış cədvəl (MudBlazor «label: dəyər») — yığcam ────────────
       `.mud-table-row` üçüncü sinifdir: MudBlazor-un `.mud-xs-table
       .mud-table-dense .mud-table-cell` qaydasını üstələsin. */
    .mud-xs-table .mud-table-row .mud-table-cell,
    .mud-sm-table .mud-table-row .mud-table-cell,
    .mud-md-table .mud-table-row .mud-table-cell {
        padding: 7px 14px;
        gap: 12px;
    }

    .mud-xs-table .mud-table-row .mud-table-cell::before,
    .mud-sm-table .mud-table-row .mud-table-cell::before,
    .mud-md-table .mud-table-row .mud-table-cell::before {
        flex: 0 0 auto;
        font-size: .8125rem;
        font-weight: 500;
        color: var(--mud-palette-text-secondary);
    }

    /* ── Əsas siyahı = mobil tətbiqin kartı (`mob-cards`) ───────────────
       Pasiyentlər, borclular, gecikmiş seanslar. Kart rejimi ÖZÜNDƏ
       tamdır (başlığı gizlədir, sətri kart edir) — cədvəlin öz sərhədi
       (`Breakpoint`) 600 px olsa da 600–767 aralığında da kartdır.
         • 1-ci xana — kartın başlığı (ad), etiketsiz, tam en;
         • `mob-card-wide` — tam en; `mob-card-plain` — etiketsiz;
         • qalan xanalar iki sütunda «etiket üstdə, dəyər altda»;
         • SON xana — düymələr, sağ sütunda (auto-placement sətri
           doldurur: pasiyentdə «Etiketlər»in yanına düşür). */
    .mob-cards .mud-table-head,
    .mob-cards .mud-table-foot,
    .mob-cards .mud-table-root colgroup,
    .mob-cards .mud-table-smalldevices-sortselect {
        display: none !important;
    }

    .mob-cards .mud-table-root,
    .mob-cards .mud-table-body {
        display: block;
        width: 100%;
        border: 0;
    }

    .mob-cards .mud-table-body > .mud-table-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px 12px;
        margin: 0 0 10px;
        padding: 12px 14px;
        border: 1px solid var(--mud-palette-lines-default);
        border-radius: 14px;
        /* `!important`: MudBlazor-un zolaqlı/hover sətir rəngi (6 sinifli
           seçici) kartları növbə ilə boz edirdi. */
        background-color: var(--mud-palette-surface) !important;
    }

    .mob-cards .mud-table-body > .mud-table-row > .mud-table-cell {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 2px;
        min-width: 0;
        padding: 0 !important;
        border: 0 !important;
        text-align: start !important;
        background: none;
    }

    .mob-cards .mud-table-body > .mud-table-row > .mud-table-cell::before {
        content: attr(data-label);
        padding: 0 !important;
        font-size: 11px;
        font-weight: 600;
        line-height: 1.3;
        color: var(--mud-palette-text-secondary);
    }

    .mob-cards .mud-table-body > .mud-table-row > .mud-table-cell:first-child,
    .mob-cards .mud-table-body > .mud-table-row > .mud-table-cell.mob-card-wide {
        grid-column: 1 / -1;
    }

    .mob-cards .mud-table-body > .mud-table-row > .mud-table-cell:first-child::before,
    .mob-cards .mud-table-body > .mud-table-row > .mud-table-cell.mob-card-plain::before,
    .mob-cards .mud-table-body > .mud-table-row > .mud-table-cell:last-child::before {
        display: none;
    }

    .mob-cards .mud-table-body > .mud-table-row > .mud-table-cell:first-child {
        font-size: 1rem;
    }

    .mob-cards .mud-table-body > .mud-table-row > .mud-table-cell.mob-card-plain {
        margin-top: -6px;
    }

    .mob-cards .mud-table-body > .mud-table-row > .mud-table-cell:last-child {
        grid-column: 2;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        align-self: end;
        gap: 2px;
    }

    /* Toxunuş hədəfi ≥ 40 px (Apple HIG 44). */
    .mob-cards .mud-table-body > .mud-table-row > .mud-table-cell:last-child .mud-icon-button {
        width: 40px;
        height: 40px;
    }

    .mob-cards.mud-table,
    .mob-cards.mud-data-grid {
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .mob-cards .mud-table-pagination {
        border-top: 0;
    }

    /* ── Rəqəm kartları: iki sütun ───────────────────────────────────────
       `minmax(190px, 1fr)` 366 px-də bir sütun verirdi. Tək qalan son kart
       tam eni tutur. */
    .rpt-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-bottom: 1rem;
    }

    .rpt-kpis > :last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    .rpt-kpi {
        padding: .75rem .875rem;
    }

    .rpt-kpi-value {
        font-size: 1.375rem;
    }

    /* Pasiyent bazasının dörd sayğacı (MudGrid xs=6): kart daralır. */
    .hover-card.pa-5 {
        padding: 12px 14px !important;
    }

    .hover-card .mud-typography-h4 {
        font-size: 1.5rem;
    }

    .hover-card .stat-icon {
        flex: 0 0 auto;
        width: 36px;
        height: 36px;
    }

    /* Uzun «söz» (link, e-poçt, xəta kodu) xəbərdarlığı ekrandan çıxarmasın. */
    .mud-alert-message {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    /* ── Tab zolağı: davamı varsa kənar solur (js/mobile-tabs.js) ────────
       Zolaq onsuz da üfüqi sürüşür (tabs.css), sürüşmə zolağı gizlidir —
       «Ran…» kəsiyi qırıq kimi görünürdü. Aktiv tab görünən yerə gətirilir. */
    .atabs-nav.atabs-more-end,
    .rpt-nav.atabs-more-end,
    .inv-nav.atabs-more-end,
    .sup-nav.atabs-more-end {
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
    }

    .atabs-nav.atabs-more-start,
    .rpt-nav.atabs-more-start,
    .inv-nav.atabs-more-start,
    .sup-nav.atabs-more-start {
        -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent);
        mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent);
    }

    .atabs-nav.atabs-more-start.atabs-more-end,
    .rpt-nav.atabs-more-start.atabs-more-end,
    .inv-nav.atabs-more-start.atabs-more-end,
    .sup-nav.atabs-more-start.atabs-more-end {
        -webkit-mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent);
        mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent);
    }

    /* ── iOS Safari: fokusda böyütmə ──────────────────────────────────────
       Safari 16 px-dən kiçik şriftli xanaya fokusda səhifəni böyüdür və
       geri qaytarmır (ölçü 16.10: yeni randevu dialoqunda 13 px). */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    textarea,
    select,
    .ql-editor {
        font-size: 16px !important;
    }
}