/* Dizayn tizimi (TZ §11).
   Barcha rang qiymatlari faqat shu :root blokida. Boshqa joyda var(--...).
   Tizim har doim oq: prefers-color-scheme e'tiborsiz qoldiriladi. */

:root {
  color-scheme: only light;

  /* Sirtlar */
  --oq:              #FFFFFF;
  --sirt:            #FFFFFF;
  --sirt-2:          #FAFAFA;
  --sirt-3:          #F4F4F5;

  /* Chegaralar */
  --chegara:         #E8E8E8;
  --chegara-kuchli:  #D4D4D8;

  /* Matn */
  --matn:            #18181B;
  --matn-2:          #52525B;
  --matn-3:          #A1A1AA;

  /* Interaktiv (neytral, brend rangi emas) */
  --tugma-fon:       #18181B;
  --tugma-matn:      #FFFFFF;
  --tugma-hover:     #27272A;
  --fokus-halqa:     #A1A1AA;

  /* Holat ranglari — rang faqat ma'no tashiydi */
  --bosh-fon:            #EDF7EF;
  --bosh-matn:           #1B7F3B;
  --bosh-chegara:        #CFE8D6;

  --band-fon:            #FDF4E3;
  --band-matn:           #9A6400;
  --band-chegara:        #F2E0B8;

  --shartnoma-fon:       #EEF0FB;
  --shartnoma-matn:      #3B44A8;
  --shartnoma-chegara:   #D4D8F2;

  --sotilgan-fon:        #FBEDED;
  --sotilgan-matn:       #B03030;
  --sotilgan-chegara:    #F0D4D4;

  --sotuvda-emas-fon:    #F4F4F5;
  --sotuvda-emas-matn:   #A1A1AA;
  --sotuvda-emas-chegara:#E8E8E8;

  /* Ogohlantirish matni (modal ichida) */
  --ogoh-matn:       #9A6400;

  /* Modal qoplamasi */
  --qoplama:         rgba(0, 0, 0, 0.35);

  /* Tipografika */
  --shrift: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;

  --o-11: 11px;
  --o-12: 12px;
  --o-13: 13px;
  --o-14: 14px;
  --o-16: 16px;
  --o-18: 18px;
  --o-22: 22px;

  --qalin-oddiy: 400;
  --qalin-orta:  500;

  --qator-balandlik: 1.5;

  /* Bo'shliq */
  --b-1: 4px;
  --b-2: 8px;
  --b-3: 12px;
  --b-4: 16px;
  --b-5: 20px;
  --b-6: 24px;
  --b-8: 32px;
  --b-12: 48px;

  --r-kichik: 4px;
  --r:        6px;
  --r-karta:  10px;

  /* O'lchamlar */
  /* v1.5: katakda endi 4 qator ma'lumot bor (TZ §7.2 C) */
  --katak-kenglik:   88px;
  --katak-balandlik: 62px;
  --katak-oraliq:    6px;
  --podyezd-oraliq:  18px;
  --qavat-ustun:     34px;

  --panel-balandlik: 56px;
  --karta-kenglik:   380px;
  --kontent-max:     1440px;

  --tugma-balandlik:        34px;
  --tugma-balandlik-kichik: 30px;
  --input-balandlik:        34px;
}

@font-face {
  font-family: "Inter";
  src: url("/static/fonts/Inter-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/static/fonts/Inter-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------------- asos */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--sirt);
}

body {
  margin: 0;
  background: var(--sirt);
  color: var(--matn);
  font-family: var(--shrift);
  font-size: var(--o-13);
  font-weight: var(--qalin-oddiy);
  line-height: var(--qator-balandlik);
  font-variant-numeric: tabular-nums;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

:focus-visible {
  outline: 2px solid var(--fokus-halqa);
  outline-offset: 2px;
}

/* ------------------------------------------------------------ tugmalar */

.tugma {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--b-2);
  height: var(--tugma-balandlik);
  padding: 0 var(--b-4);
  border: 0.5px solid var(--tugma-fon);
  border-radius: var(--r);
  background: var(--tugma-fon);
  color: var(--tugma-matn);
  font-family: inherit;
  font-size: var(--o-14);
  font-weight: var(--qalin-orta);
  cursor: pointer;
  transition: background-color 120ms ease-out;
}

.tugma:hover {
  background: var(--tugma-hover);
  text-decoration: none;
}

.tugma--ikkilamchi {
  background: var(--oq);
  color: var(--matn);
  border-color: var(--chegara-kuchli);
}

.tugma--ikkilamchi:hover {
  background: var(--sirt-3);
}

.tugma--kichik {
  height: var(--tugma-balandlik-kichik);
  padding: 0 var(--b-3);
  font-size: var(--o-13);
}

.tugma--toliq {
  width: 100%;
}

.tugma[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* -------------------------------------------------------------- maydon */

.maydon {
  display: block;
  margin-bottom: var(--b-3);
}

.maydon__yorliq {
  display: block;
  margin-bottom: var(--b-1);
  color: var(--matn-2);
  font-size: var(--o-12);
}


.kiritish {
  width: 100%;
  height: var(--input-balandlik);
  padding: 0 var(--b-3);
  border: 0.5px solid var(--chegara-kuchli);
  border-radius: var(--r);
  background: var(--oq);
  color: var(--matn);
  font-family: inherit;
  font-size: var(--o-13);
}

.kiritish::placeholder {
  color: var(--matn-3);
}

textarea.kiritish {
  height: auto;
  padding: var(--b-2) var(--b-3);
  resize: vertical;
}

/* --------------------------------------------------------------- panel */

.panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--panel-balandlik);
  padding: 0 var(--b-6);
  border-bottom: 0.5px solid var(--chegara);
  background: var(--oq);
}

.panel__chap,
.panel__ong {
  display: flex;
  align-items: center;
  gap: var(--b-5);
}

.panel__nom {
  font-size: var(--o-14);
  font-weight: var(--qalin-orta);
}

.panel__havola {
  color: var(--matn-2);
  font-size: var(--o-13);
}

.panel__havola--faol {
  color: var(--matn);
  font-weight: var(--qalin-orta);
}

.panel__fio {
  font-size: var(--o-13);
}

.yorliq {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--r-kichik);
  background: var(--sirt-3);
  color: var(--matn-2);
  font-size: var(--o-12);
}

/* ------------------------------------------------------------- kontent */

.kontent {
  max-width: var(--kontent-max);
  margin: 0 auto;
  padding: var(--b-6) var(--b-6) var(--b-12);
}

.karta {
  border: 0.5px solid var(--chegara);
  border-radius: var(--r-karta);
  background: var(--sirt-2);
  padding: var(--b-5);
}

/* -------------------------------------------------------------- kirish */

.kirish-sahifa {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--b-6);
}

.kirish-karta {
  width: 380px;
  max-width: 100%;
  padding: var(--b-8);
  border: 0.5px solid var(--chegara);
  border-radius: var(--r-karta);
  background: var(--oq);
}

.kirish-karta__sarlavha {
  margin: 0 0 var(--b-6);
  font-size: var(--o-22);
  font-weight: var(--qalin-orta);
}

.kirish-xato {
  margin-bottom: var(--b-4);
  color: var(--sotilgan-matn);
  font-size: var(--o-13);
}

/* --------------------------------------------------------------- toast */

.toast-joy {
  position: fixed;
  right: var(--b-6);
  bottom: var(--b-6);
  display: flex;
  flex-direction: column;
  gap: var(--b-2);
  z-index: 40;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--b-3);
  min-width: 280px;
  max-width: 420px;
  padding: var(--b-3) var(--b-4);
  border: 0.5px solid var(--chegara-kuchli);
  border-radius: var(--r);
  background: var(--oq);
  font-size: var(--o-13);
}

.toast--xato {
  border-color: var(--sotilgan-chegara);
  background: var(--sotilgan-fon);
  color: var(--sotilgan-matn);
}

.toast__yopish {
  margin-left: auto;
  border: 0;
  background: none;
  color: inherit;
  font-family: inherit;
  font-size: var(--o-14);
  line-height: 1;
  cursor: pointer;
}

/* --------------------------------------------------------------- modal */

.modal-qoplama {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--b-6);
  background: var(--qoplama);
  z-index: 50;
}

.modal {
  width: 440px;
  max-width: 100%;
  padding: var(--b-6);
  border-radius: var(--r-karta);
  background: var(--oq);
}

.modal__sarlavha {
  margin: 0 0 var(--b-4);
  font-size: var(--o-16);
  font-weight: var(--qalin-orta);
}

.modal__tugmalar {
  display: flex;
  justify-content: flex-end;
  gap: var(--b-2);
  margin-top: var(--b-5);
}

.modal__ogoh {
  margin-top: var(--b-3);
  color: var(--ogoh-matn);
  font-size: var(--o-12);
}

/* ------------------------------------------------------------- holatlar */

.h-bosh {
  background: var(--bosh-fon);
  color: var(--bosh-matn);
  border-color: var(--bosh-chegara);
}

.h-band {
  background: var(--band-fon);
  color: var(--band-matn);
  border-color: var(--band-chegara);
}

.h-shartnoma {
  background: var(--shartnoma-fon);
  color: var(--shartnoma-matn);
  border-color: var(--shartnoma-chegara);
}

.h-sotilgan {
  background: var(--sotilgan-fon);
  color: var(--sotilgan-matn);
  border-color: var(--sotilgan-chegara);
}

.h-sotuvda-emas {
  background: var(--sotuvda-emas-fon);
  color: var(--sotuvda-emas-matn);
  border-color: var(--sotuvda-emas-chegara);
}

/* --------------------------------------------------------------- xato */

.xato-sahifa {
  max-width: 520px;
  margin: var(--b-12) auto;
  text-align: center;
}

.xato-sahifa__kod {
  font-size: var(--o-22);
  font-weight: var(--qalin-orta);
}

.xato-sahifa__matn {
  margin-top: var(--b-2);
  color: var(--matn-2);
}

/* -------------------------------------------------------------- jadval */

.sahifa-sarlavha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--b-5);
}

.sahifa-sarlavha__matn {
  margin: 0;
  font-size: var(--o-18);
  font-weight: var(--qalin-orta);
}

.jadval {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--o-13);
}

.jadval th,
.jadval td {
  padding: var(--b-2) var(--b-3);
  border-bottom: 0.5px solid var(--chegara);
  text-align: left;
}

.jadval th {
  background: var(--sirt-3);
  color: var(--matn-2);
  font-size: var(--o-12);
  font-weight: var(--qalin-orta);
}

/* Saralanadigan ustun: bosiladigani ko'rinib tursin */
.jadval__saralash {
  display: inline-flex;
  align-items: center;
  gap: var(--b-1);
  color: inherit;
  cursor: pointer;
}

.jadval__saralash::after {
  content: "95";
  color: var(--matn-3);
  font-size: var(--o-11);
}

.jadval__saralash--asc::after {
  content: "91";
  color: var(--matn);
}

.jadval__saralash--desc::after {
  content: "93";
  color: var(--matn);
}

/* Bo'sh holat (kamchilik D9) */
.bosh-sahifa {
  padding: var(--b-12) var(--b-6);
  border: 0.5px dashed var(--chegara-kuchli);
  border-radius: var(--r-karta);
  color: var(--matn-3);
  font-size: var(--o-13);
  text-align: center;
}

.jadval tbody tr:hover {
  background: var(--sirt-2);
}

/* ---------------------------------------------------- planirovka kartalari */

.kartalar {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--b-4);
}

.planirovka-karta {
  padding: var(--b-3);
  border: 0.5px solid var(--chegara);
  border-radius: var(--r-karta);
  background: var(--oq);
}

.planirovka-karta__rasm,
.planirovka-karta__bosh {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 160px;
  border-radius: var(--r);
  background: var(--sirt-2);
  object-fit: contain;
}

.planirovka-karta__bosh {
  color: var(--matn-3);
  font-size: var(--o-12);
}

.planirovka-karta__nom {
  margin: var(--b-3) 0 var(--b-1);
  font-size: var(--o-14);
  font-weight: var(--qalin-orta);
}

.planirovka-karta__tafsilot {
  margin: 0 0 var(--b-1);
  color: var(--matn-2);
  font-size: var(--o-12);
}

.qidiruv {
  max-width: 320px;
  margin-bottom: var(--b-4);
}

.korib-chiqish {
  margin: var(--b-3) 0 0;
  color: var(--matn-2);
  font-size: var(--o-12);
}

/* ------------------------------------------------------------- shaxmatka */

.shx-sarlavha {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--b-6);
  margin-bottom: var(--b-5);
}

.shx-sarlavha__nom {
  margin: 0;
  font-size: var(--o-18);
  font-weight: var(--qalin-orta);
}

.shx-sarlavha__tafsilot {
  margin: var(--b-1) 0 0;
  color: var(--matn-2);
  font-size: var(--o-13);
}

.statistika {
  display: flex;
  gap: var(--b-2);
}

.statistika__katak {
  display: flex;
  flex-direction: column;
  min-width: 86px;
  padding: var(--b-2) var(--b-3);
  border: 0.5px solid var(--chegara);
  border-radius: var(--r);
}

.statistika__yorliq {
  font-size: var(--o-12);
}

.statistika__son {
  font-size: var(--o-18);
  font-weight: var(--qalin-orta);
}

.statistika__summa {
  margin: var(--b-2) 0 0;
  color: var(--matn-2);
  font-size: var(--o-12);
  text-align: right;
}

.filtr {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--b-4);
  padding: var(--b-3) var(--b-4);
  margin-bottom: var(--b-5);
  border: 0.5px solid var(--chegara);
  border-radius: var(--r-karta);
  background: var(--oq);
}

.filtr__maydon--tor .kiritish {
  width: 92px;
}

.oraliq {
  display: flex;
  gap: var(--b-2);
}

.chiplar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--b-1);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--b-1);
  padding: 3px 10px;
  border: 0.5px solid var(--chegara);
  border-radius: var(--r-kichik);
  font-size: var(--o-12);
  cursor: pointer;
}

.shx-maydon {
  display: flex;
  align-items: flex-start;
  gap: var(--b-5);
}

#grid-joy {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
}

.grid {
  display: inline-block;
  min-width: min-content;
}

.grid__podyezdlar,
.grid__ustunlar,
.grid__qator {
  display: flex;
  align-items: center;
  gap: var(--podyezd-oraliq);
  margin-bottom: var(--katak-oraliq);
}

/* Ustun sarlavhalari qatori — podyezd nomi ostida (TZ §7.2 C, ADR-005) */
.grid__ustun-nomi {
  color: var(--matn-3);
  font-size: var(--o-12);
  text-align: center;
}

.grid__qavat-ustun,
.grid__qavat {
  /* Gorizontal skrollda qavat raqami ko'rinib turadi (TZ §7.2 C).
     Fon shaffof emas — ostidan kataklar ko'rinmasligi uchun. */
  position: sticky;
  left: 0;
  z-index: 2;
  flex: none;
  display: inline-block;
  width: var(--qavat-ustun);
  padding-right: var(--b-2);
  border-right: 0.5px solid var(--chegara);
  background: var(--oq);
  color: var(--matn-3);
  font-size: var(--o-12);
  text-align: right;
}

/* Kesishma ajratish: sichqoncha katakda bo'lganda o'sha qavat va o'sha
   ustun ajralib turadi. 300 ta katakda ko'z adashmasligi uchun (TZ §7.2 C).
   Katakning o'zi ajratilmaydi — u allaqachon hover holatida. */
.grid__qavat--yoritilgan {
  color: var(--matn);
  background: var(--sirt-3);
}

.katak--yoritilgan:not(:hover) {
  background-color: var(--sirt-3);
}

.grid {
  overflow-x: auto;
}

.grid__podyezd {
  display: inline-block;
  color: var(--matn-3);
  font-size: var(--o-12);
}

.grid__guruh {
  display: grid;
  grid-template-columns: repeat(var(--ustunlar), var(--katak-kenglik));
  gap: var(--katak-oraliq);
}

.katak {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-width: var(--katak-kenglik);
  height: var(--katak-balandlik);
  padding: 0 var(--b-2);
  border: 0.5px solid var(--chegara);
  border-radius: var(--r);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: opacity 120ms ease-out;
}

.katak:hover {
  filter: brightness(0.97);
}

.katak--xira {
  opacity: 0.25;
  pointer-events: none;
}

.katak--bosh {
  border-color: transparent;
  background: transparent;
  cursor: default;
}

/* Katak ichi — 4 qator (TZ §7.2 C) */
.katak__xonalar {
  font-size: 15px;
  font-weight: var(--qalin-orta);
  line-height: 1.2;
}

.katak__turi {
  font-size: var(--o-11);
  line-height: 1.2;
}

.katak__maydon {
  font-size: var(--o-11);
  color: var(--matn-2);
  line-height: 1.2;
}

.katak__raqam {
  font-size: var(--o-12);
  font-weight: var(--qalin-orta);
  line-height: 1.2;
}

.katak__narx {
  font-size: var(--o-11);
  color: var(--matn-2);
  line-height: 1.2;
}

/* Holat belgisi — rangdan tashqari ikkinchi signal (TZ §11.2.1) */
.katak__belgi {
  position: absolute;
  top: 4px;
  right: 5px;
  color: var(--band-matn);
}

.katak__belgi--doira {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--shartnoma-matn);
}

/* Sotilgan: matn rangi + diagonal chiziq */
.katak.h-sotilgan {
  background-image: linear-gradient(
    to top right,
    transparent calc(50% - 0.5px),
    rgba(176, 48, 48, 0.25) calc(50% - 0.5px),
    rgba(176, 48, 48, 0.25) calc(50% + 0.5px),
    transparent calc(50% + 0.5px)
  );
}

/* Sotuvda emas: punktir chegara */
.katak.h-sotuvda-emas {
  border-style: dashed;
}

.katak.tanlangan {
  outline: 2px solid var(--matn);
  outline-offset: -2px;
}

/* Jonli natija soni — filtr panelining o'ng chetida (TZ §7.2 B).
   `margin-left: auto` FLEX ELEMENTIDA bo'lishi kerak, ichkarida emas —
   aks holda son o'z qatoriga tushib, chapda qolib ketadi. */
.filtr__natija {
  margin-left: auto;
}

.natija-soni {
  font-size: var(--o-13);
  font-weight: var(--qalin-orta);
  white-space: nowrap;
}

.natija-soni--bosh {
  color: var(--sotilgan-matn);
}

/* --------------------------------------------------------------- legenda */

.legenda {
  display: flex;
  flex-wrap: wrap;
  gap: var(--b-2);
  margin-bottom: var(--b-4);
}

.legenda__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--b-2);
  padding: 3px 10px 3px 4px;
  border: 0.5px solid var(--chegara);
  border-radius: var(--r);
  background: var(--oq);
  color: var(--matn-2);
  font-family: inherit;
  font-size: var(--o-12);
  cursor: pointer;
  transition: background-color 120ms ease-out;
}

.legenda__chip:hover {
  background: var(--sirt-3);
}

.legenda__chip--faol {
  border-color: var(--chegara-kuchli);
  color: var(--matn);
}

/* Chip ichidagi katak — gridagi katak bilan bir xil ko'rinish */
.legenda__katak {
  position: relative;
  width: 22px;
  height: 16px;
  min-width: 0;
  padding: 0;
  border-radius: var(--r-kichik);
  cursor: inherit;
}

.legenda__katak .katak__belgi {
  top: 2px;
  right: 2px;
}

.legenda__soni {
  color: var(--matn);
  font-weight: var(--qalin-orta);
}

/* ------------------------------------------------------- xonadon kartasi */

.karta-joy {
  position: sticky;
  top: 72px;
  width: var(--karta-kenglik);
  flex: 0 0 var(--karta-kenglik);
  padding: var(--b-4);
  border: 0.5px solid var(--chegara);
  border-radius: var(--r-karta);
  background: var(--sirt-2);
}

.karta-joy__bosh,
.bosh-holat {
  color: var(--matn-3);
  font-size: var(--o-13);
  text-align: center;
}

.karta-ichi__sarlavha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--b-3);
}

.karta-ichi__nom {
  font-size: var(--o-16);
  font-weight: var(--qalin-orta);
}

.karta-ichi__rasm {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-height: 240px;
  border-radius: var(--r-karta);
  background: var(--sirt-2);
  object-fit: contain;
}

.karta-ichi__rasm--bosh {
  height: 120px;
  color: var(--matn-3);
  font-size: var(--o-12);
}

.tafsilot {
  margin: var(--b-4) 0;
}

.tafsilot__satr {
  display: flex;
  justify-content: space-between;
  gap: var(--b-3);
  padding: var(--b-1) 0;
  border-bottom: 0.5px solid var(--chegara);
  font-size: var(--o-13);
}

.tafsilot__satr dt {
  color: var(--matn-2);
}

.tafsilot__satr dd {
  margin: 0;
  text-align: right;
}

.tafsilot__satr--asosiy dd {
  font-size: var(--o-16);
  font-weight: var(--qalin-orta);
}

.holat-blok {
  margin-bottom: var(--b-4);
}

.holat-blok__sarlavha {
  margin: 0 0 var(--b-2);
  font-size: var(--o-13);
  font-weight: var(--qalin-orta);
}

.holat-blok__tugmalar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--b-1);
}

.tarix__sarlavha {
  margin: 0 0 var(--b-2);
  font-size: var(--o-13);
  font-weight: var(--qalin-orta);
}

.tarix__satr {
  padding: var(--b-2) 0;
  border-top: 0.5px solid var(--chegara);
}

.tarix__otish {
  margin: 0;
  font-size: var(--o-12);
}

.tarix__kim {
  margin: 0;
  color: var(--matn-3);
  font-size: var(--o-11);
}

.tarix__sabab {
  margin: var(--b-1) 0 0;
  color: var(--matn-2);
  font-size: var(--o-12);
}

.tarix__bosh {
  color: var(--matn-3);
  font-size: var(--o-12);
}

@media (max-width: 1279px) {
  .shx-maydon {
    flex-direction: column;
  }

  .karta-joy {
    position: static;
    width: 100%;
    flex: 1 1 auto;
  }
}

/* ------------------------------------------------------------- hisobot */

.hisobot__sarlavha {
  margin: var(--b-8) 0 var(--b-3);
  font-size: var(--o-16);
  font-weight: var(--qalin-orta);
}

/* Yig'indi to'liq emasligi haqida eslatma (TZ F13.14) */
.hisobot__eslatma {
  margin: var(--b-3) 0 0;
  font-size: var(--o-13);
  color: var(--matn-2);
}

.import-natija {
  margin-top: var(--b-5);
}

.jadval__bosh {
  padding: var(--b-8) var(--b-3);
  color: var(--matn-3);
  text-align: center;
}

.jadval__saralash {
  border: 0;
  padding: 0;
  background: none;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
}


/* ------------------------------------------ forma elementlari (TZ §11.4.1) */

/* Belgilash katakchasi va radio — matn YONIDA */
.tanlov {
  display: flex;
  align-items: center;
  gap: var(--b-2);
  min-height: var(--input-balandlik);
  cursor: pointer;
}

.tanlov input {
  margin: 0;
  flex: none;
  accent-color: var(--matn);
}

.tanlov span {
  font-size: var(--o-13);
  color: var(--matn);
}

.tanlov-guruh {
  display: flex;
  gap: var(--b-5);
}

/* Fayl tanlash — brauzer tugmasi yashiriladi, o'zbekcha tugma qo'yiladi */
.fayl {
  display: flex;
  align-items: center;
  gap: var(--b-3);
  cursor: pointer;
}

.fayl__kirish {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.fayl__tugma {
  display: inline-flex;
  align-items: center;
  height: var(--tugma-balandlik);
  padding: 0 var(--b-4);
  border: 0.5px solid var(--chegara-kuchli);
  border-radius: var(--r);
  background: var(--oq);
  font-size: var(--o-13);
  white-space: nowrap;
}

.fayl:hover .fayl__tugma {
  background: var(--sirt-3);
}

.fayl:focus-within .fayl__tugma {
  outline: 2px solid var(--fokus-halqa);
  outline-offset: 2px;
}

.fayl__nom {
  color: var(--matn-3);
  font-size: var(--o-13);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fayl__nom--tanlangan {
  color: var(--matn-2);
}

/* ---------------------------------------------- bo'sh holat (TZ §11.4.2) */

.bosh-holat {
  padding: var(--b-12) var(--b-6);
  border-radius: var(--r-karta);
  background: var(--sirt-2);
  text-align: center;
}

.bosh-holat__sarlavha {
  margin: 0;
  font-size: 15px;
  font-weight: var(--qalin-orta);
  color: var(--matn);
}

.bosh-holat__matn {
  max-width: 380px;
  margin: var(--b-2) auto 0;
  color: var(--matn-2);
  font-size: var(--o-13);
}

.bosh-holat__tugma {
  margin-top: var(--b-4);
}

/* ------------------------------------- boshqaruv tab'lari (TZ §7.0.1) */

.tablar-qatori {
  border-bottom: 0.5px solid var(--chegara);
  background: var(--oq);
}

.tablar-qatori__ichi {
  max-width: var(--kontent-max);
  margin: 0 auto;
  padding: 0 var(--b-6);
}

.tablar {
  display: flex;
  align-items: center;
  gap: var(--b-4);
  height: 44px;
}

.tablar__havola {
  color: var(--matn-2);
  font-size: var(--o-13);
}

.tablar__havola:hover {
  color: var(--matn);
  text-decoration: none;
}

.tablar__havola--faol {
  color: var(--matn);
  font-weight: var(--qalin-orta);
}

.tablar__ajratgich {
  width: 1px;
  height: 16px;
  margin: 0 var(--b-3);
  background: var(--chegara);
}

/* ------------------------------------ foydalanuvchi bloki (TZ §7.0.2) */

.foydalanuvchi {
  display: inline-flex;
  align-items: center;
  gap: var(--b-2);
}

.foydalanuvchi__fio {
  padding: 0;
  border: 0;
  background: none;
  color: var(--matn);
  font-family: inherit;
  font-size: var(--o-13);
  cursor: pointer;
}

.foydalanuvchi__fio:hover {
  text-decoration: underline;
}

.foydalanuvchi__ajratgich,
.foydalanuvchi__rol {
  color: var(--matn-3);
  font-size: var(--o-13);
}

.panel__menyu {
  display: flex;
  align-items: center;
  gap: var(--b-5);
}

.panel__havola--faol {
  position: relative;
}

.panel__havola--faol::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -18px;
  left: 0;
  height: 2px;
  background: var(--matn);
}

/* ------------------------------------------ modal xato uyasi (TZ §7.0.3) */

.modal__xato:not(:empty) {
  margin-bottom: var(--b-4);
  padding: var(--b-2) var(--b-3);
  border-radius: var(--r);
  background: var(--sotilgan-fon);
  color: var(--sotilgan-matn);
  font-size: var(--o-13);
}

/* Generator ko'rib chiqish ogohlantirishlari (TZ §7.7.1) */
.ogoh {
  margin-top: var(--b-2);
  padding: var(--b-2) var(--b-3);
  border-radius: var(--r);
  background: var(--band-fon);
  color: var(--band-matn);
  font-size: var(--o-12);
}