/* ARSchool dizayn tokenlari — barcha ranglar Radzen mavzusidan olinadi.
   Shu sabab foydalanuvchi mavzuni almashtirsa ham dizayn saqlanadi.
   Hardcoded rang AT:MANE — Task 2 testi buni rad etadi. */

:root {
    --ar-surface: var(--rz-base-background-color, #fafafa);
    --ar-card: var(--rz-card-background-color, #ffffff);
    --ar-text: var(--rz-text-color, #1a1d24);
    --ar-muted: var(--rz-text-secondary-color, #6b7280);
    --ar-line: var(--rz-border-normal, #e6e9ef);
    --ar-accent: var(--rz-primary, #0b63f6);
    --ar-accent-soft: var(--rz-primary-lighter, #eef4ff);
    --ar-on-accent: var(--rz-on-primary, #ffffff);
    --ar-ok: var(--rz-success, #0f7b3d);
    --ar-warn: var(--rz-warning, #b45309);
    --ar-bad: var(--rz-danger, #d92d20);

    --ar-radius: 16px;
    --ar-radius-sm: 10px;
    --ar-touch: 44px;
    --ar-gap: 8px;
    --ar-pad: 14px;

    /* Mobil pastki nav barining balandligi. UCHTA joy bitta o'lchamdan foydalanadi:
       navning o'zi, kontentning pastki joyi (.rz-body) va yon menyuning pastki
       chegarasi (NavMenu.razor). Chegara bittadan o'zgartirilsa, uchalasiga ham
       bir vaqtda ta'sir qiladi — aks holda ular o'zaro chalkashadi va menyuning
       oxirgi elementi nav ostida qoladi. */
    --ar-bottom-nav-h: calc(var(--ar-touch) + 1.75rem + env(safe-area-inset-bottom, 0px));

    /* Yagona istisno: soya — rang emas, uni mavzaga bog'lash ma'nosiz. */
    --ar-shadow: 0 2px 8px rgba(16, 24, 40, .07);
}

/* ---- Komponent klasslar ---- */

.ar-card {
    background: var(--ar-card);
    border-radius: var(--ar-radius);
    box-shadow: var(--ar-shadow);
    padding: var(--ar-pad);
}

.ar-chip {
    /* Badge matni siqilib qolmasligi uchun: padding yo'q edi. `display: inline-block`
       ham shart — badge bu yerda <span>, ya'ni inline element, va inline elementning
       vertikal padingi ko'rinish maydonini kengaytirmaydi (faqat gorizontal ta'sir qiladi).
       `nowrap` esa matn ikki qatorga bo'linib ketmasligini ta'minlaydi. */
    display: inline-block;
    padding: 2px 8px;
    white-space: nowrap;
    background: var(--ar-accent-soft);
    color: var(--ar-accent);
    border-radius: 999px;
    font-size: 11px;
}

/* iOS input zoom oldini olish */
@media (max-width: 768px) {
    input, select, textarea {
        font-size: 16px !important;
    }
}

/* responsive.css dan ko'chiriladi */
@media (max-width: 768px) {
    .hide-mobile {
        display: none !important;
    }
}

@media (min-width: 769px) {
    .hide-desktop {
        display: none !important;
    }
}

/* ---- Dialog: pastki-varaq (bottom sheet) — ≤480px ---- */
/* Radzen loads after ar-design.css in both hosts, so source order always favours Radzen.
   We must exceed Radzen's specificity to win. Radzen's rule:
     .rz-dialog:not(.rz-dialog-confirm):not(.rz-dialog-alert) { position: absolute !important;
     width: 100% !important; inset-block-start: 0px !important; border-radius: 0 } — (0,3,0)
   Our selector uses .rz-dialog.rz-dialog:not(...):not(...) — (0,4,0) — to exceed (0,3,0).
   .rz-dialog.rz-dialog bilan specificity (0,4,0) olish — bu qilingan ish, tozalab bo'lmaydi. */
@media (max-width: 480px) {
    .rz-dialog.rz-dialog:not(.rz-dialog-confirm):not(.rz-dialog-alert) {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        max-height: 90dvh !important;
        /* inset-block-start: auto — Radzen (0,3,0) !important sets inset-block-start: 0px,
           which together with our bottom:0 stretches the dialog full-height.
           auto cancels it so the sheet genuinely anchors to the bottom. */
        inset-block-start: auto !important;
        border-radius: 20px 20px 0 0;
        margin: 0 !important;
    }

    /* .rz-dialog-content: Radzen (0,1,0) sets overflow: auto. Our (0,2,0) wins without !important. */
    /* UZ: Radzen .rz-dialog-content (0,1,0) specificity'si bilan overflow: auto beradi.
       Biz .rz-dialog .rz-dialog-content (0,2,0) specificity'si bilan uni qoplab o'tamiz.
       .rz-dialog wrapper selectorsiz (0,1,0) bo'lib, Radzen bilan tenglashdi va kaskad yo'qolardi. */
    .rz-dialog .rz-dialog-content {
        max-height: calc(90dvh - 60px);
        overflow-y: auto;
    }
}

/* ---- Dialog: 481–768px — markazlashtirilgan ---- */
/* Width cap: Radzen (0,3,0) !important sets width: 100%.
   We use (0,4,0) with !important to exceed it. */
@media (min-width: 481px) and (max-width: 768px) {
    .rz-dialog.rz-dialog:not(.rz-dialog-confirm):not(.rz-dialog-alert) {
        width: min(600px, 94vw) !important;
        max-height: 82dvh !important;
        margin: 0 auto !important;
    }

    /* Same content rule as above — (0,2,0) beats Radzen (0,1,0) without !important. */
    /* UZ: Yuqoridagi kaskad qoidasi shu yerda ham ishlaydi: .rz-dialog .rz-dialog-content (0,2,0)
       Radzen (0,1,0) dan ustundir. Selector to'g'ri emasligida (masalan, .rz-dialog-content yozilsa)
       Radzen g'alaba qozonadi va max-height/overflow-y o'zgarishi yo'qoladi. */
    .rz-dialog .rz-dialog-content {
        max-height: calc(82dvh - 60px);
        overflow-y: auto;
    }
}

/* ---- Form: bir maydon bir qator, label ustida, touch input ---- */
@media (max-width: 768px) {
    .rz-form-field,
    .rz-form-field-content {
        width: 100% !important;
    }

    .rz-form-field .rz-label {
        display: block;
        margin-bottom: 0.25rem;
        font-weight: 600;
        font-size: 13px;
    }

    .rz-form-field input,
    .rz-form-field select,
    .rz-form-field textarea,
    .rz-form-field .rz-textbox,
    .rz-form-field .rz-dropdown,
    .rz-form-field .rz-numeric,
    .rz-form-field .rz-datepicker input {
        min-height: 48px;
        border-radius: var(--ar-radius-sm);
        width: 100%;
    }

    /* Mobil tugma: to'liq kenglik */
    .rz-button.ar-mobile-full,
    .rz-button[type="submit"] {
        width: 100%;
        min-height: var(--ar-touch);
    }
}

/* ---- ArListItem: kompakt mobil qator ---- */
.ar-list-item {
    display: flex;
    align-items: center;
    gap: var(--ar-gap);
    min-height: var(--ar-touch);
    padding: 12px 14px;
    border-radius: var(--ar-radius-sm);
    background: var(--ar-card);

    /* Kenglik zanjiri (band 4). Uzun matnli kartalar (/questions savol matni)
       gorizontal cho'zilmasligi kerak. GRID va FLEX elementlarida
       `min-width: auto` avtomatik minimal o'lcham = KONTENT o'lchami bo'ladi, va
       `white-space: nowrap` uni to'liq matn uzunligiga tenglashtiradi. Shu sabab
       zanjir uzilib, kartalar ekrandan chiqib ketadi va "..." ham chiqmaydi.
       `min-width: 0` barcha bo'g'inlarga beriladi; `max-width: 100%` esa bo'g'in
       buzilganda ham kartani ekrandan chiqarib yubormasligini kafolatlaydi. */
    min-width: 0;
    max-width: 100%;
}

.ar-list-item:focus-visible {
    outline: 2px solid var(--ar-accent);
    outline-offset: 2px;
}

/* Interactive variant: button suppresses native button styling */
button.ar-list-item {
    border: none;
    font: inherit;
    text-align: left;
    color: inherit;
    cursor: pointer;
    transition: background 0.15s ease;
}

button.ar-list-item:active {
    background: var(--ar-accent-soft);
}

.ar-list-item__avatar {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
}

.ar-list-item__avatar-img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}

.ar-list-item__avatar-initials {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 650;
    color: var(--ar-on-accent);
    background: var(--ar-accent);
}

.ar-list-item__content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ar-list-item__primary {
    font-size: 13.5px;
    font-weight: 650;
    color: var(--ar-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ar-list-item__secondary {
    font-size: 11px;
    color: var(--ar-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ar-list-item__badge {
    flex-shrink: 0;
}

/* Badge ranglari — ar-chip modifier */
.ar-chip--ok {
    background: var(--ar-ok);
    color: var(--ar-on-accent);
}

.ar-chip--warn {
    background: var(--ar-warn);
    color: var(--ar-on-accent);
}

.ar-chip--bad {
    background: var(--ar-bad);
    color: var(--ar-on-accent);
}

/* ---- ArBottomSheet: pastki detail panel ---- */
/* Host: to'liq ekranli shaffof overlay — bosilish yopish uchun. */
/* position: fixed + inset: 0 — Radzen dialog wrapper flex centringiga tushmaydi,
   shuning uchun !important yoki .rz-dialog ustiga yozish shart emas. */
.ar-sheet-host {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: transparent;
}

/* Panel: pastki anchor, 90dvh balandlik, 200ms slide-up animatsiya. */
.ar-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 90dvh;
    background: var(--ar-card);
    border-radius: 20px 20px 0 0;
    box-shadow: var(--ar-shadow);
    display: flex;
    flex-direction: column;
    padding-bottom: env(safe-area-inset-bottom);
    transform: translateY(0);
}

@media (prefers-reduced-motion: no-preference) {
    .ar-sheet {
        animation: ar-sheet-slide-up 200ms ease-out;
    }
}

@keyframes ar-sheet-slide-up {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

.ar-sheet-grab {
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--ar-line);
    margin: 8px auto 4px;
    flex-shrink: 0;
}

.ar-sheet-title {
    font-size: 16px;
    font-weight: 650;
    color: var(--ar-text);
    padding: 8px var(--ar-pad) 4px;
    flex-shrink: 0;
}

.ar-sheet-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 4px var(--ar-pad);
}

/* ---- ArDetailActions: amallar tugmalari ---- */
/* ---- Detail karta (ar-detail-*): yagona uy joyi shu faylda (Ruling 1) ---- */
.ar-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ar-gap);
    margin-top: 0.6rem;
    padding: 0 var(--ar-pad);
    padding-bottom: calc(var(--ar-gap) + env(safe-area-inset-bottom));
    flex-shrink: 0;
}

.ar-detail-actions .rz-button {
    flex: 1 1 30%;
    min-height: var(--ar-touch);
    font-size: 13px;
}

/* ---- Detail karta (ar-detail-*): yagona uy joyi shu faylda (Ruling 1) ---- */
.rz-card.ar-row-detail {
    margin: 0.25rem 0;
    border-radius: var(--ar-radius-sm);
    padding: 0.7rem 0.85rem;
    background: var(--ar-card);
}

.ar-row-detail > .rz-text-subtitle1 {
    font-size: 15px;
    margin-bottom: 0.45rem;
}

.ar-detail-grid {
    display: grid;
    grid-template-columns: auto 1fr auto 1fr;
    gap: 0.32rem 0.6rem;
    margin: 0;
    align-items: baseline;
}

.ar-detail-grid dt {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.6;
    white-space: nowrap;
}

.ar-detail-grid dd {
    margin: 0;
    font-size: 13.5px;
    word-break: break-word;
    min-width: 0;
}

/* ---- Amallar tugmalari (responsive.cssdan o'tkazilgan) ---- */
@media (max-width: 480px) {
    .ar-detail-grid {
        grid-template-columns: auto 1fr;
    }

    .ar-detail-actions .rz-button {
        flex: 1 1 45%;
    }
}

/* ---- ArDataView: mobil ro'yxat va yuklash ---- */
.ar-data-view {
    width: 100%;
    /* Band 4: .content GRID konteyneri; bu uning grid-elementi. `min-width: 0`
       bo'lmasa avtomatik minimal o'lcham kontent o'lchamiga tenglanadi. */
    min-width: 0;
    max-width: 100%;
}

.ar-data-list {
    display: flex;
    flex-direction: column;
    gap: var(--ar-gap);
    /* Band 4: .ar-data-view ning FLEX-elementi — xuddi shu yerda ham. */
    min-width: 0;
    max-width: 100%;
}

/* HeaderTemplate ichidagi Radzen qator mobilda vertikal stack bo'lshi uchun */
@media (max-width: 768px) {
    .ar-data-view .rz-row > * {
        flex: 1 1 100%;
    }
}

.ar-data-loadmore {
    width: 100%;
    min-height: var(--ar-touch);
    margin-top: var(--ar-gap);
}

.ar-data-empty {
    padding: var(--ar-pad);
    text-align: center;
    color: var(--ar-muted);
    font-size: 14px;
}

/* ---- Filtr satri: /payments kabi sahifalar uchun ---- */
/* Qidiruv konteyneri. Desktopda boshqa boshqaruvchalar bilan bir qatorda,
   o'z kengligida turadi. Tor ekrandagi qoida pastda — u shu qiymatni
   OVERRIDE qilishi uchun media blokidan KEYIN kelishi shart. */
.ar-filter-bar__search {
    width: 18em;
}

/* Eksport, sana tanlagichlari va filtr tugmasi bitta qatorda. Tor ekranda ular
   siqilib qolardi, chunki hech qanday wrap qoidasi yo'q edi. */
@media (max-width: 768px) {
    .ar-filter-bar {
        flex-wrap: wrap;
        row-gap: var(--ar-gap);
    }

    .ar-filter-bar > * {
        /* Sana tanlagichlari bir-birining ustiga tushmasligi uchun minimal kenglik. */
        min-width: 8rem;
    }

    .ar-filter-bar__search {
        /* Qidiruv o'z qatorida turadi. `min-width: 0` SHART: yuqoridagi
           `.ar-filter-bar > *` qoidasi har bir child'ga `min-width: 8rem` beradi.
           Flex sizing'da min-width kenglikni pastga tushirmaydi — shu sababli
           konteyner 18em'da qolib, qatorga sigmasligi mumkin emas edi. */
        flex-basis: 100%;
        min-width: 0;
    }
}

/* ---- ArBottomNav: mobil pastki tab bar (faqat < 768px) ---- */
/* `.rz-body` ning pangi FAQAT shu fayldan boshqariladi. Ilgari MainLayout da
   `<RadzenBody Style="padding:0px">` bor edi — inline uslub har qanday
   stylesheet qoidasidan ustun turadi, shuning uchun quyidagi mobil
   `padding-bottom` (pastki nav uchun joy) hech qachon ishlamagan va nav
   sahifalarning pastki qismini toshib yotgan.

   `body` prefiksi SHART, `!important` emas: Radzen'ning mavzu CSS'i
   ar-design.css dan KEYIN yuklanadi (App.razor: `<RadzenTheme>` o'shandan
   keyin) va `.rz-body { padding: var(--rz-layout-body-padding) }` (= 1rem)
   yozadi. Teng specificity bo'lganda keyingi fayl yutadi — shuning uchun
   selector bir pog'ona kattaroq bo'lishi kerak. Bu yerda qiymat nol
   qoldiriladi: Radzen'ning 1rem'i kirsa, desktop ham siljidi. */
body .rz-body {
    padding: 0;
}

/* Oqimda turadi (position: fixed emas) — shuning uchun kontent yopilmaydi va
   100dvh hisobi kerak bo'lmaydi. Desktopda umuman chizilmaydi. */
.ar-bottom-nav {
    display: none;
}

.ar-bottom-nav__label {
    font-size: 10.5px;
    line-height: 1.2;
    text-align: center;
}

.ar-bottom-nav__icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 768px) {
    .ar-bottom-nav {
        /* Radzen'ning ichki grid'iga BOG'LANMAYDI (band 1).
           `.rz-layout` — `display:grid` + "rz-header rz-header" / "rz-sidebar rz-body" /
           "rz-footer rz-footer" area'lari, LEKIN `.rz-layout:has(>.rz-sidebar-start)` qoidasi
           ularni QAYTA yozadi: `grid-template-areas:"rz-sidebar rz-body"` va
           `grid-template-rows:1fr` — ya'ni faqat BIR qator, `rz-footer` maydoni umuman
           YO'Q. NavMenu dagi RadzenSidebar default Position=Start bo'lgani uchun
           `.rz-sidebar-start` klassini oladi, demak shu qoida har doim qo'llaniladi.

           Natijada `grid-area: rz-footer` nomi mavjud bo'lmagan maydonga ishora qiladi:
           CSS Grid nomni topmasa element implicit track'ga tushadi — ya'ni joylashuv
           butunlay nazoratdan chiqadi va nav o'ng tomonda, yarim ekranda ko'rinadi.
           (Shu sababli avvalgi urinish "pastga" emas, "o'ngga" ko'chgan edi.)

           Shuning uchun nav Radzen grid'idan chiqarilib, mustaqil fixed qatlamga
           o'tkazildi: endi joylashuv faqat shu qoidalarga bog'liq, Radzen ichki
           geometriyasi qanday bo'lsa ham o'zgarmaydi. */
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 3;
        /* Balandlik token'dan — sidebar va kontent ham shundan foydalanadi. */
        min-height: var(--ar-bottom-nav-h);
        display: flex;
        align-items: stretch;
        gap: var(--ar-gap);
        background: var(--ar-card);
        border-top: 1px solid var(--ar-line);
        padding-bottom: env(safe-area-inset-bottom);
    }

    /* Nav endi oqimdan chiqarilgan — kontent uni toshib yotmasligi uchun
       .rz-body'ga shu nav balandligi teng pastdan joy qo'yamiz.
       Selector `.ar-bottom-nav` borligini talab qiladi: nav ro'yxat bo'sh
       bo'lgan sahifalarda (landing, kirish) element umuman chiqmaydi — u
       yerda nav balandligicha bo'sh joy ko'rinmasligi, aks holda tuzatish
       o'z nuqsonini keltiradi. */
    body .rz-layout:has(.ar-bottom-nav) .rz-body {
        padding-bottom: var(--ar-bottom-nav-h);
    }

    .ar-bottom-nav__item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        min-height: var(--ar-touch);
        padding: 6px 4px;
        border: none;
        background: transparent;
        color: var(--ar-muted);
        font: inherit;
        text-decoration: none;
        cursor: pointer;
    }

    .ar-bottom-nav__item:focus-visible {
        outline: 2px solid var(--ar-accent);
        outline-offset: -2px;
    }

    .ar-bottom-nav__item[aria-current="page"] {
        color: var(--ar-accent);
    }
}

/* ---- App bar: mobil sticky sarlavha ---- */
/* NavMenu dagi RadzenHeader ga qo'yiladi. top: var(--maui-sb) YOZILMAYDI —
   body allaqachon padding-top oladi (site.css), ikkinchi offset bo'shliq qoldiradi. */
.ar-app-bar {
    display: none;
}

@media (max-width: 768px) {
    .ar-app-bar {
        display: flex;
        position: sticky;
        top: 0;
        z-index: 3;
        background: var(--ar-card);
        backdrop-filter: blur(12px);
    }
}

/* Desktopda sarlavha YASHIRILMAYDI. `display: flex` faqat yuqoridagi mobil blokda
   bo'lgani uchun, base qoidasi (`display: none`) 768px dan keng ekranda ham kuchda
   qolardi — natijada sarlavha ko'rinmasdi. Yo'qotilgan to'rt narsa: burger tugmasi
   (chap menyuni ochish), logo, profil menyu va undagi chiqish / til / mavzu.
   Chegara 769px: mobil blok `max-width: 768px` bilan chegaralangan, ikki blok
   bir vaqtda qo'llanmasligi shart (arxlashda ustma-ust tushsa, natija tabiiy
   ravishda 768px da yoriladi).
   Faqat `display` — fon, balandlik va chiziq Radzen'ning o'z `.rz-header`
   qoidasidan keladi (mobil blur faqat mobilga xos). */
@media (min-width: 769px) {
    .ar-app-bar {
        display: flex;
    }
}

/* Sarlavha ichidagi RadzenStack butun kenglikni egallashi SHART (band 2).
   Yuqoridagi `display:flex` sarlavhani flex konteynerga aylantiradi. Radzen'ning
   `.rz-header` qoidasida `display` umuman yo'q (u default `block`), ya'ni avval Stack
   blok elementi sifatida to'liq kenglikni egallardi va profil menyudagi `margin-left:auto`
   o'ngga surish uchun bo'sh joy topardi. Flex konteynerda esa Stack — flex-item bo'lib,
   `flex-grow` yo'qligi sabab kengligi KONTENTIGA tenglanadi: bo'sh joy qolmaydi va menyu
   burger tugmasi yonida, chapda qoladi. `flex:1` shu bo'sh joyni qaytaradi;
   `min-width:0` esa uzun profil nomi (ism + "Id: ...") sarlavhani siqib yubormasligi uchun. */
.ar-app-bar > .rz-stack {
    flex: 1 1 auto;
    min-width: 0;
}

/* ArBottomSheet dialog uchun max-width cheklovini yo'qotish */
@media (min-width: 481px) and (max-width: 768px) {
    .ar-bottom-sheet-dialog {
        width: 100% !important;
        max-width: none !important;
    }
}

@media (max-width: 480px) {
    .ar-bottom-sheet-dialog {
        width: 100vw !important;
        max-width: none !important;
    }
}

/* ArBottomSheet Radzen dialogi ichida chiziladi. Uning ichki paneli (ar-sheet) fixed,
   shuning uchun .rz-dialog-content balandligi nol bo'ladi va Radzen'ning foni/padding'i
   bo'sh joyda qoladi. Panel shaffof qilinadi — chizuvchi faqat .ar-sheet.
   Selektor .rz-dialog.ar-bottom-sheet-dialog = (0,2,0): Radzen yuklanishi KEYIN keladi,
   shuning tenglikda Radzen yutadi; spetsifikalik oshish !important siz kerak emas. */
@media (max-width: 768px) {
    .rz-dialog.ar-bottom-sheet-dialog,
    .rz-dialog.ar-bottom-sheet-dialog .rz-dialog-content {
        background: transparent;
        padding: 0;
        box-shadow: none;
        overflow: visible;
    }
}