/* ══════════════════════════════════════════════════════════════════════════
   dashboard.css — İDARƏ PANELİNİN VAHİD DİZAYN SİSTEMİ  (12.08.2026)
   ══════════════════════════════════════════════════════════════════════════

   NİYƏ QLOBAL, SCOPED DEYİL:
     Bu qaydaların böyük hissəsi MudBlazor komponentlərinə (MudPaper,
     MudButton) verilir. Blazor CSS izolyasiyası `b-xxxxx` atributunu YALNIZ
     komponentin öz HTML teqlərinə yazır — uşaq komponentə YOX.
     Eyni səbəb `reports.css` üçün də keçərlidir.

   NİYƏ SƏHİFƏDƏ <style> DEYİL:
     Home.razor-da 150 sətirlik `<style>` bloku vardı. Vidget əlavə edən adam
     onu tapıb oxumalı olurdu; həm də hər render-də DOM-a yenidən düşürdü.

   ══════════════════════════════════════════════════════════════════════════
   1. ÖLÇÜ SİSTEMİ
   ══════════════════════════════════════════════════════════════════════════
   İKİ sabit hündürlük var: KPI kartı (tək rəqəm) və panel vidgeti.
   Hündürlük SABİTDİR — məzmun boş da olsa, dolu da olsa. Məzmun sığmayanda
   kart böyümür: siyahı SƏHİFƏLƏNİR (13.09.2026, `AppPager Compact`).
   ────────────────────────────────────────────────────────────────────────── */
.dash-root {
    --dash-kpi-h: 104px;
    --dash-widget-h: 340px;
}

.widget-box {
    height: var(--dash-widget-h);
    display: flex;
    flex-direction: column;
}

    .widget-box--kpi {
        height: var(--dash-kpi-h);
    }

    /* Vidgetlərin kökü MudPaper-dir (birbaşa və ya KpiCard/ReputationWidget
       kimi komponentin içindən). Hamısı .widget-box-un hündürlüyünü doldurur. */
    .widget-box > .mud-paper {
        height: 100% !important;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

/* Məzmun sahəsi. Başlıq və alt düymə/səhifələyici yerində qalır. */
.widget-scroll {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

@media (max-width: 600px) {
    .dash-root {
        --dash-widget-h: 320px;
        --dash-kpi-h: 96px;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   2. KPI KARTI — kompakt düzülüş
   ══════════════════════════════════════════════════════════════════════════
       [ikon]  ······  [rəqəm] [trend]
       BUGÜNKÜ RANDEVULAR
   ────────────────────────────────────────────────────────────────────────── */
.kpi-card {
    border-radius: 14px !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    background-color: var(--mud-palette-surface);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
}

    .kpi-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.05) !important;
    }

.kpi-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}

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

.kpi-figure {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-width: 0;
}

.kpi-value {
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.5px;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kpi-trend {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 7px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 11px;
    flex-shrink: 0;
}

/* Artım/azalma nişanları — palitradan (tünd fonda da WCAG həddindədir). */
.trend-up {
    background-color: color-mix(in srgb, var(--mud-palette-success) 14%, transparent);
    color: var(--mud-palette-success);
}

.trend-down {
    background-color: color-mix(in srgb, var(--mud-palette-error) 14%, transparent);
    color: var(--mud-palette-error);
}

.kpi-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.6px;
    line-height: 1.2;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 600px) {
    .kpi-value {
        font-size: 1.35rem;
    }

    .kpi-icon-box {
        width: 32px;
        height: 32px;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   3. ÜMUMİ VİDGET ELEMENTLƏRİ
   ══════════════════════════════════════════════════════════════════════════ */
.widget-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

    .widget-list-item:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

/* ══════════════════════════════════════════════════════════════════════════
   3a. AYLIQ HƏDƏFLƏR — İRİ VƏ OXUNAQLI (13.09.2026)
   ══════════════════════════════════════════════════════════════════════════
   🔴 Sistem sahibi: «kartın daxilindəki itemların ölçüsünü böyüdək, iri və
      oxunaqlı olsun».

   ÖLÇÜLMÜŞ ƏVVƏLKİ HAL: halqa 100 px · faiz 1.2rem · ad `body2` · real
   rəqəm YOX. İndi: halqa 128 px · faiz 1.75rem · ad 1rem qalın · altında
   real rəqəm («12 400 / 20 000 ₼»).

   ⚠️ Halqa `conic-gradient` + `--p` dəyişənidir — SVG/JS yoxdur, hər
      render-də yenidən hesablanan inline gradient sətri də yoxdur.
   ⚠️ Faiz RƏNGLİ DEYİL (`text-primary`): narıncı/qırmızı iri mətn ağ fonda
      kontrast həddini keçmir; rəngi yalnız halqa daşıyır.
   ────────────────────────────────────────────────────────────────────────── */
.goals-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    align-items: start;
    align-content: center;
    flex: 1 1 auto;
    min-height: 0;
}

/* 21.09.2026 — gəlir icazəsi olmayan istifadəçidə (köməkçi) gəlir halqası
   yoxdur: server rəqəmi göndərmir. Üç halqa dörd sütunda boşluq qoyardı. */
.goals-grid.goals-grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.goal {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    min-width: 0;
}

.goal-ring {
    --ring: var(--mud-palette-primary);
    --p: 0;
    width: 128px;
    height: 128px;
    margin-bottom: 8px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    /* 🔴 13.09.2026 — «FAİZLƏRİN YANINDA RƏNGLƏR İTİB». Burada əvvəl
       `--mud-palette-background-grey` yazılmışdı. MudBlazor 7-dən bəri o
       dəyişən YOXDUR (ad `...-gray`-dir). Tanınmayan `var()` bütün
       `background` bəyannaməsini etibarsız edir, yəni rəngli qövs də
       gradientlə birlikdə silinirdi. Brauzer bu halda heç bir xəta vermir.
       İndi ad düzgündür və hər dəyişənin ehtiyat dəyəri var.
       Qoruyucu: MudPaletteVariableTests. */
    background: conic-gradient(
        var(--ring, var(--mud-palette-primary, #594ae2)) calc(var(--p, 0) * 1%),
        var(--mud-palette-background-gray, rgba(0, 0, 0, .08)) 0);
}

.goal-ring__inner {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--mud-palette-surface);
    box-shadow: inset 0 1px 3px rgba(15, 23, 42, .06);
}

.goal-ring__value {
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--mud-palette-text-primary);
    font-variant-numeric: tabular-nums;
}

    .goal-ring__value small {
        font-size: .95rem;
        font-weight: 700;
        margin-left: 1px;
        color: var(--mud-palette-text-secondary);
    }

.goal-ring--revenue { --ring: var(--mud-palette-warning); }
.goal-ring--occupancy { --ring: var(--mud-palette-info); }
.goal-ring--patients { --ring: var(--mud-palette-success); }
.goal-ring--stock { --ring: var(--mud-palette-error); }

.goal__label {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--mud-palette-text-primary);
}

.goal__detail {
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

@media (max-width: 1280px) {
    .goal-ring {
        width: 112px;
        height: 112px;
    }

    .goal-ring__inner {
        width: 88px;
        height: 88px;
    }

    .goal-ring__value {
        font-size: 1.5rem;
    }
}

/* Dar ekranda 2 × 2 — sabit hündürlüyə sığmır, ona görə qutu məzmuna
   buraxılır (sürüşmə YOX). */
@media (max-width: 900px) {
    .goals-grid,
    .goals-grid.goals-grid--three {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 20px;
        padding-block: 8px;
    }

    .widget-box--goals {
        height: auto;
        min-height: var(--dash-widget-h);
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   4. HƏFTƏLİK NƏBZ (WeeklyPulse)
   ══════════════════════════════════════════════════════════════════════════ */
.wp-chart {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 6px;
    flex: 1 1 0;
    min-height: 0;
    padding-top: 8px;
}

.wp-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
}

.wp-bar-wrap {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    flex: 1 1 0;
    min-height: 0;
}

.wp-bar {
    width: 100%;
    max-width: 26px;
    min-height: 4px;
    border-radius: 6px 6px 3px 3px;
    background: color-mix(in srgb, var(--mud-palette-primary) 28%, transparent);
    transition: background .2s ease, transform .2s ease;
}

    .wp-bar:hover {
        transform: scaleY(1.03);
    }

.wp-col--today .wp-bar {
    background: var(--mud-palette-primary);
}

.wp-col--peak .wp-bar {
    background: color-mix(in srgb, var(--mud-palette-primary) 62%, transparent);
}

.wp-count {
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    color: var(--mud-palette-text-primary);
}

.wp-day {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .3px;
    line-height: 1;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.wp-col--today .wp-day {
    color: var(--mud-palette-primary);
}

.wp-footnote {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--mud-palette-lines-default);
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
}

/* ══════════════════════════════════════════════════════════════════════════
   5. GÜNÜN AXINI (DayFlow)
   ══════════════════════════════════════════════════════════════════════════ */
.df-next {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 22%, transparent);
}

.df-next__clock {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    padding: 4px 8px;
    border-radius: 10px;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.df-next__time {
    font-size: 15px;
    font-weight: 800;
    line-height: 1.1;
}

.df-next__in {
    font-size: 10px;
    font-weight: 600;
    opacity: .85;
    line-height: 1.1;
    white-space: nowrap;
}

.df-next__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.df-next__name {
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.df-next__service {
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.df-progress {
    height: 8px;
    border-radius: 4px;
    background: var(--mud-palette-background-gray, rgba(0, 0, 0, .08));
    overflow: hidden;
}

.df-progress__fill {
    height: 100%;
    border-radius: 4px;
    background: var(--mud-palette-primary);
    transition: width .3s ease;
}

.df-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.df-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 4px;
    border-radius: 10px;
    background: var(--mud-palette-background-gray, rgba(0, 0, 0, .05));
}

.df-stat__value {
    font-size: 16px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--mud-palette-text-primary);
}

.df-stat__label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .3px;
    text-align: center;
    line-height: 1.2;
    color: var(--mud-palette-text-secondary);
}

/* ══════════════════════════════════════════════════════════════════════════
   6. FƏRDİLƏŞDİRMƏ (sürükləmə) REJİMİ
   ══════════════════════════════════════════════════════════════════════════ */
.edit-widget-wrapper {
    position: relative;
    height: var(--dash-widget-h);
    border: 2px dashed var(--mud-palette-lines-inputs);
    border-radius: 16px;
    padding: 4px;
    background: rgba(0,0,0,0.02);
    transition: transform 0.2s;
    cursor: grab;
}

    .edit-widget-wrapper:active {
        cursor: grabbing;
        transform: scale(0.99);
    }

    .edit-widget-wrapper--kpi {
        height: var(--dash-kpi-h);
    }

    .edit-widget-wrapper > div,
    .edit-widget-wrapper > .mud-paper {
        height: 100% !important;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

.size-controls {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    background: color-mix(in srgb, var(--mud-palette-surface) 94%, transparent);
    backdrop-filter: blur(8px);
    padding: 6px 10px;
    border-radius: 30px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 100;
    opacity: 0;
    transition: all 0.2s ease;
    pointer-events: none;
    border: 1px solid var(--mud-palette-lines-default);
}

.edit-widget-wrapper:hover .size-controls {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -4px);
}

.edit-widget-wrapper--kpi .size-controls {
    bottom: -14px;
    transform: translateX(-50%) scale(.85);
}

.edit-widget-wrapper--kpi:hover .size-controls {
    transform: translate(-50%, 0) scale(.85);
}

/* ══════════════════════════════════════════════════════════════════════════
   7. BAŞLIQ — SALAMLAMA · TARİX · PAKET · GÜNÜN XÜLASƏSİ (13.09.2026)
   ══════════════════════════════════════════════════════════════════════════
   🔴 123-ün qaydası QALIR: başlıq sətri `nowrap`-dır və tam ekranda alt
      sətrə düşmür (`GoogleCacheUiAndVisitChoiceTests.Basliq_setire_kecmir`).
      Sağda artıq yalnız «Fərdiləşdir» var — sürətli əməliyyatlar öz
      zolağına (8-ci bölmə) köçdü, yəni daşma riski struktur olaraq yoxdur.

   ⚠️ `min-width: 0` sol blokda MƏCBURİDİR: flex uşağı defolt olaraq öz
      `min-content` enindən kiçilmir və uzun ad sağdakı düyməni sıxışdırardı. */
.dash-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: nowrap;
}

.dash-head__left {
    min-width: 0;
    flex: 1 1 auto;
}

.dash-head__right {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Telefon/planşet: burada sətirə keçmək DOĞRU davranışdır. */
@media (max-width: 960px) {
    .dash-head { flex-wrap: wrap; }
    .dash-head__right { width: 100%; }
}

/* Salamlama — ekranın BİRİNCİ baxış nöqtəsi. Uzun ad sətri partlatmır. */
.dash-greeting.mud-typography {
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.02em;
    color: var(--mud-palette-text-primary);
    overflow-wrap: anywhere;
}

/* 28.09.2026 — AD salamlamadan FƏRQLİ rəngdədir. Sahib: «yanındakı adı
   salamlama mesajı ilə eyni rəng etmə, daha fərqli və göz oxşayan olsun».
   Salamlama neytral mətn rəngində qalır, ad isə brend qradiyentindədir
   (firuzəyi → mavi-firuzəyi). Rənglər palitradandır: tünd rejimdə
   `--mud-palette-primary` açıqdır, qradiyent də özü açılır.
   ⚠️ `@supports` MƏCBURİDİR: `background-clip: text` işləməyən brauzerdə
      `-webkit-text-fill-color: transparent` adı GÖRÜNMƏZ edərdi — ehtiyat
      olaraq düz `primary` rəngi qalır.
   ⚠️ `box-decoration-break: clone` — uzun ad ikinci sətrə keçəndə
      qradiyent hər sətirdə yenidən başlayır, ikinci sətir solğun qalmır. */
.dash-greeting__name {
    color: var(--mud-palette-primary);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .dash-greeting__name {
        /* Hər iki uc mətn rəngi ilə qarışdırılır: açıq temada qradiyent bir az
           tündləşir, tünd temada açılır — hər ikisində kontrast ≥ 5:1 (başlanğıc)
           və ≥ 3.5:1 (son, böyük qalın mətn üçün AA ≥ 3:1). */
        background-image: linear-gradient(100deg,
            color-mix(in srgb, var(--mud-palette-primary) 75%, var(--mud-palette-text-primary)) 0%,
            color-mix(in srgb, #06b6d4 70%, var(--mud-palette-text-primary)) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}

.dash-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-top: 8px;
    color: var(--mud-palette-text-secondary);
}

.dash-meta__date {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .9rem;
    font-weight: 600;
}

.dash-summary.mud-typography {
    margin-top: 6px;
    color: var(--mud-palette-text-secondary);
}

.dash-customize.mud-button-root {
    text-transform: none;
    font-weight: 700;
    border-color: var(--mud-palette-lines-inputs);
}

/* ══════════════════════════════════════════════════════════════════════════
   8. SÜRƏTLİ ƏMƏLİYYATLAR ZOLAĞI (13.09.2026)
   ══════════════════════════════════════════════════════════════════════════
   🔴 Sistem sahibi: «quick buttonların yeri, dizaynı xoşuma gəlmir».

   ƏVVƏL: başlığın sağında 4 × 2 eyni düymə şəbəkəsi (outlined, böyük hərf).
   Səkkiz eyni ağırlıqlı düymə gözü heç yerə aparmırdı və salamlama ilə eyni
   sətirdə yarışırdı.

   İNDİ: başlığın ALTINDA tam enli plitə zolağı — SaaS panellərinin standart
   «quick actions» naxışı (Stripe · Linear · Notion).
     • YALNIZ «Yeni randevu» vurğuludur — günün əsas işi (bir şey önə çıxır);
     • qalan plitələr sakitdir: rəngli ikon qutusu + adi yazı (böyük hərf YOX);
     • `auto-fit` şəbəkə: rol süzgəci plitəni gizlədəndə DƏLİK qalmır və
       sütun eni riyazi olaraq bərabərdir (10.09.2026 «ölçülər eyni olsun»).
   ────────────────────────────────────────────────────────────────────────── */
.dash-quick {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(156px, 1fr));
    gap: 12px;
}

/* ══════════════════════════════════════════════════════════════════════════
   18.09.2026 — SETIR HEMISE TAM DOLUR
   ══════════════════════════════════════════════════════════════════════════
   Sistem sahibi: «quick buttonlar eslinde 12 eded olsa daha gozel goruntu
   olar, zaten bos yer var. Orani dolduraq».

   !! 12 RE  QEMI TESADUFI DEYIL: 6 · 4 · 3 · 2 sutuna QALIQSIZ bolunur, yeni
      hansi ene baxirsan bax, sonuncu setirde bosluq QALMIR. `auto-fit`
      tek basina bunu vermir — genis ekranda 8 sutun secir ve ikinci setirde
      dord bos xana qalir.

   !! Rol suzgeci plite gizledende (komekci · texnik) setir yene dolu qalir:
      sutun sayi SABITDIR, plitelerin eni avtomatik boyuyur. */
@media (min-width: 600px) {
    .dash-quick {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 900px) {
    .dash-quick {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 1264px) {
    .dash-quick {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

.dash-quick .qa-tile {
    height: 64px;
    width: 100%;
    min-width: 0;
    justify-content: flex-start;
    padding: 10px 14px;
    border-radius: 14px;
    text-transform: none;
    letter-spacing: normal;
    background-color: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background-color .15s ease;
}

    .dash-quick .qa-tile .mud-button-label {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        min-width: 0;
    }

    .dash-quick .qa-tile:hover {
        transform: translateY(-2px);
        border-color: color-mix(in srgb, var(--mud-palette-primary) 40%, var(--mud-palette-lines-default));
        box-shadow: 0 8px 20px rgba(15, 23, 42, .08);
    }

    .dash-quick .qa-tile:focus-visible {
        outline: 2px solid var(--mud-palette-primary);
        outline-offset: 2px;
    }

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

.qa-tile__icon--info {
    color: var(--mud-palette-info);
    background: color-mix(in srgb, var(--mud-palette-info) 12%, transparent);
}

.qa-tile__icon--success {
    color: var(--mud-palette-success);
    background: color-mix(in srgb, var(--mud-palette-success) 12%, transparent);
}

.qa-tile__icon--warning {
    color: var(--mud-palette-warning-darken);
    background: color-mix(in srgb, var(--mud-palette-warning) 14%, transparent);
}

.qa-tile__icon--secondary {
    color: var(--mud-palette-secondary);
    background: color-mix(in srgb, var(--mud-palette-secondary) 12%, transparent);
}

.qa-tile__icon--neutral {
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-action-default-hover);
}

.qa-tile__label {
    min-width: 0;
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: left;
    color: var(--mud-palette-text-primary);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Əsas plitə — günün əsas işi. */
.dash-quick .qa-tile--primary {
    background-color: var(--mud-palette-primary);
    border-color: transparent;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--mud-palette-primary) 30%, transparent);
}

    .dash-quick .qa-tile--primary:hover {
        background-color: var(--mud-palette-primary-darken);
        border-color: transparent;
    }

    .qa-tile--primary .qa-tile__icon {
        color: var(--mud-palette-primary-text);
        background: rgb(255 255 255 / 18%);
    }

    .qa-tile--primary .qa-tile__label {
        color: var(--mud-palette-primary-text);
    }

@media (max-width: 600px) {
    .dash-quick {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .dash-quick .qa-tile {
        height: 56px;
        padding: 8px 10px;
    }

    .qa-tile__icon {
        width: 32px;
        height: 32px;
        flex-basis: 32px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dash-quick .qa-tile,
    .kpi-card {
        transition: none;
    }

        .dash-quick .qa-tile:hover,
        .kpi-card:hover {
            transform: none;
        }
}