/* ================================================================
   AnsorMall HR — app.css ustiga qo'shimchalar.
   Asosiy dizayn tizimi app.css da. Bu yerda shu platformaga xos
   qismlar: mobil menyu, nomzod kartochkalari, media pleyerlar.
   ================================================================ */

/* ── Mobil menyu (platforma ko'proq telefonda ishlatiladi) ───── */
.menyu-tugma {
  display: none; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex: 0 0 38px; padding: 0; cursor: pointer;
  border: 1px solid var(--chegara-2); border-radius: var(--r-s);
  background: var(--karta); color: var(--matn-2);
}
.parda {
  display: none; position: fixed; inset: 0; z-index: 45;
  background: rgba(8, 16, 12, .5);
}
.parda.ochiq { display: block; }

@media (max-width: 760px) {
  .yon {
    display: flex; position: fixed; z-index: 50; top: 0; left: 0;
    width: min(80vw, 280px); flex-basis: auto;
    transform: translateX(-102%);
    transition: transform .24s cubic-bezier(.4, 0, .2, 1);
    box-shadow: var(--soya-3);
    padding-top: env(safe-area-inset-top);
  }
  .yon.ochiq { transform: none; }
  .menyu-tugma { display: flex; }
  .yuqori {
    height: auto; min-height: 56px; padding: 8px 12px;
    padding-top: calc(8px + env(safe-area-inset-top));
    gap: 8px;
  }
  .yuqori h1 { font-size: 15.5px; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; }
  .yuqori-ong { gap: 5px; }
  .foyd .ism, .foyd .rol, .ajratgich { display: none; }
  .tarkib {
    padding: 14px 12px calc(28px + env(safe-area-inset-bottom));
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
  /* iOS maydonga bosganda sahifani kattalashtirmasin */
  input[type=text], input[type=number], input[type=date], input[type=time],
  input[type=password], input[type=search], input[type=datetime-local],
  select, textarea { font-size: 16px; }
  .karta-bosh { padding: 13px 14px; }
  .karta-tan { padding: 14px; }
  .filtr { gap: 8px; }
  .filtr label.maydon { min-width: 132px; flex: 1; }
  .setka[style] { grid-template-columns: 1fr !important; }
}

/* Varaqlar telefonda gorizontal siljiydi */
@media (max-width: 760px) {
  .varaqlar { flex-wrap: nowrap; overflow-x: auto; width: 100%;
    -webkit-overflow-scrolling: touch; }
  .varaqlar::-webkit-scrollbar { display: none; }
  .varaq { padding: 8px 13px; font-size: 13px; }
}

/* ================================================================
   Nomzod kartochkalari — rasm kartochkaning ~45% qismida
   ================================================================ */
.nomzodlar {
  display: grid; gap: 13px;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
.nkart {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--karta); border: 1px solid var(--chegara);
  border-radius: var(--r-m); box-shadow: var(--soya-1);
  text-decoration: none; color: var(--matn);
  transition: border-color .16s ease, box-shadow .16s ease, transform .1s ease;
}
.nkart:hover { border-color: var(--urgu-chegara); box-shadow: var(--soya-2);
  transform: translateY(-2px); color: var(--matn); }
.nkart:active { transform: none; }

/* Rasm KESILMAYDI: nomzodlar suratni har xil yuboradi (bo'yiga, eniga,
   yuzi chetda) — shuning uchun surat butunligicha ko'rsatiladi, atrofidagi
   bo'shliqni esa o'sha suratning xiralashtirilgan nusxasi to'ldiradi. */
.nkart-rasm {
  position: relative; width: 100%; aspect-ratio: 1 / 1;
  background: linear-gradient(145deg, var(--urgu-yumshoq), var(--urgu-chegara));
  display: grid; place-items: center; overflow: hidden;
}
.nkart-rasm .fon {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  filter: blur(16px) saturate(.75); transform: scale(1.2); opacity: .5;
}
[data-tungi="1"] .nkart-rasm .fon { opacity: .35; }
.nkart-rasm img { position: relative; width: 100%; height: 100%;
  object-fit: contain; display: block; }
.nkart-harf { font-size: 40px; font-weight: 600; color: var(--urgu-3); }
[data-tungi="1"] .nkart-harf { color: var(--urgu); }
.nkart-video {
  position: absolute; top: 9px; right: 9px;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px 4px 7px; border-radius: 30px;
  background: rgba(8, 18, 13, .62); color: #fff;
  font-size: 11px; font-weight: 500;
}
.nkart-video .ikon { width: 13px; height: 13px; flex-basis: 13px; }

.nkart-tan { padding: 12px 14px 14px; display: flex; flex-direction: column;
  gap: 5px; min-width: 0; }
.nkart-ism {
  font-size: 14.5px; font-weight: 600; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.nkart-qator {
  display: flex; align-items: flex-start; gap: 7px;
  font-size: 12.5px; color: var(--matn-2); min-width: 0;
}
.nkart-qator .ikon { width: 14px; height: 14px; flex-basis: 14px;
  margin-top: 2px; color: var(--matn-3); }
.nkart-qator span {
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.nkart-past {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-top: 3px; padding-top: 9px;
  border-top: 1px solid var(--chegara); font-size: 11.5px; color: var(--matn-3);
}
/* Chapda vakansiya nomi, o'ngda sana yoki nishon. Nom uzun bo'lsa qisqartirib
   ko'rsatiladi: aks holda tor joyga siqilib, har harfi alohida qatorga tushib
   ketardi (`.nkart-tan` da `overflow-wrap: anywhere` bor). */
.nkart-past > :first-child {
  min-width: 0; flex: 1 1 auto;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nkart-past > :last-child { flex: 0 0 auto; white-space: nowrap; }

@media (max-width: 560px) {
  .nomzodlar { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .nkart-tan { padding: 10px 11px 12px; gap: 4px; }
  .nkart-ism { font-size: 13px; }
  .nkart-qator { font-size: 11.5px; gap: 5px; }
  .nkart-past { font-size: 10.5px; padding-top: 7px; }
  .nkart-harf { font-size: 30px; }
}

/* ================================================================
   Anketa: media pleyerlar
   ================================================================ */
.yumaloq-blok { display: flex; flex-direction: column; align-items: center; gap: 12px; }
video.yumaloq {
  width: 250px; height: 250px; max-width: 78vw; max-height: 78vw;
  border-radius: 50%; object-fit: cover; background: #0b1210;
  box-shadow: 0 10px 34px rgba(8, 20, 14, .22);
}
[data-tungi="1"] video.yumaloq { box-shadow: 0 10px 34px rgba(0, 0, 0, .5); }
video.tekis { width: 100%; max-height: 420px; border-radius: var(--r-m);
  background: #0b1210; }
audio { width: 100%; max-width: 380px; }
.javob-rasm { max-width: 250px; border-radius: var(--r-m); display: block;
  border: 1px solid var(--chegara); }

.javob { padding: 12px 0; border-bottom: 1px solid var(--chegara); }
.javob:last-child { border-bottom: none; }
.javob .yorliq { font-size: 12px; color: var(--matn-3); margin-bottom: 4px; }
.javob .qiymat { font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Ma'lumot qatorlari (nomzod / xodim kartochkasi) */
.maydon-qator { display: flex; gap: 10px; padding: 7px 0; font-size: 13.5px; }
.maydon-qator .k { color: var(--matn-2); flex: 0 0 145px; }
.maydon-qator .q { font-weight: 500; overflow-wrap: anywhere; min-width: 0; }
@media (max-width: 560px) {
  .maydon-qator { flex-direction: column; gap: 2px; padding: 6px 0; }
  .maydon-qator .k { flex: none; font-size: 12px; }
}

/* Savollar ro'yxati (vakansiya) */
.savol {
  display: flex; gap: 11px; align-items: flex-start; padding: 11px 13px;
  background: var(--karta); border: 1px solid var(--chegara);
  border-radius: var(--r-m); margin-bottom: 8px;
}
.savol.ochiq-savol { opacity: .5; }
.savol .raqam {
  width: 25px; height: 25px; flex: 0 0 25px; border-radius: 8px;
  display: grid; place-items: center; background: var(--fon);
  color: var(--matn-3); font-size: 11.5px; font-weight: 600;
}
.savol .matn { font-size: 13.5px; font-weight: 500; overflow-wrap: anywhere; }
.savol .tur { font-size: 11.5px; color: var(--matn-3); margin-top: 2px; }
.savol .amallar { display: flex; gap: 4px; margin-left: auto; flex-shrink: 0; }
.savol .amallar form { display: inline; }

/* ================================================================
   Modal oyna
   ================================================================ */
.oyna-fon {
  position: fixed; inset: 0; z-index: 90; display: none;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(8, 16, 12, .55);
}
.oyna-fon.ochiq { display: flex; }
.oyna {
  width: 100%; max-width: 460px; max-height: 90vh; overflow-y: auto;
  background: var(--karta); border: 1px solid var(--chegara);
  border-radius: var(--r-l); padding: 22px; box-shadow: var(--soya-3);
  animation: oynaChiq .2s cubic-bezier(.4, 0, .2, 1);
}
@keyframes oynaChiq {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to { opacity: 1; transform: none; }
}
.oyna h3 { margin: 0 0 16px; font-size: 16px; }
.oyna-tugmalar { display: flex; gap: 9px; justify-content: flex-end; margin-top: 8px; }
@media (max-width: 560px) {
  .oyna-fon { padding: 0; align-items: flex-end; }
  .oyna { max-width: none; border-radius: var(--r-l) var(--r-l) 0 0;
    padding: 18px 15px calc(18px + env(safe-area-inset-bottom)); max-height: 92vh; }
}

/* ── Kichik yordamchilar ───────────────────────────────────── */
.ornat-matn { }
@media (max-width: 760px) { .ornat-matn { display: none; } }
.tugma.keng { width: 100%; justify-content: center; }
.qator-oraliq { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }
.tanla-jadval td.tanlov-ustun { width: 42px; }
.davomat-belgi { display: flex; gap: 6px; flex-wrap: wrap; }

/* ================================================================
   MOSLIK QATLAMI
   Eski sahifalar (davomat, arxiv, sozlamalar, xodim kartasi) o'z
   sinflarida qolgan. Quyidagi qoidalar ularni yangi dizayn ranglari
   va tungi rejimga bog'laydi — shablonlarni o'zgartirmasdan.
   ================================================================ */
.hide-m { }
@media (max-width: 760px) { .hide-m { display: none !important; } }

h1.page { font-size: 18px; font-weight: 600; margin: 0 0 16px; }
.bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.spacer { flex: 1; }

.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 15px; border-radius: var(--r-s);
  border: 1px solid var(--chegara-2); background: var(--karta);
  color: var(--matn); font-size: 13px; font-weight: 500;
  font-family: inherit; cursor: pointer; white-space: nowrap;
  box-shadow: var(--soya-1); text-decoration: none;
  transition: background .15s ease, border-color .15s ease;
}
.btn:hover { background: var(--karta-2); border-color: var(--matn-3); color: var(--matn); }
.btn-primary { background: var(--urgu); border-color: var(--urgu); color: #fff; }
.btn-primary:hover { background: var(--urgu-2); border-color: var(--urgu-2); color: #fff; }
.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn-danger { color: var(--qizil); }
.btn-danger:hover { background: var(--qizil-fon); border-color: var(--qizil); color: var(--qizil); }
.btn-icon { background: transparent; border-color: transparent; box-shadow: none;
  color: var(--matn-2); padding: 6px 8px; }
.btn-icon:hover { background: var(--fon); }

.panel, .tw {
  background: var(--karta); border: 1px solid var(--chegara);
  border-radius: var(--r-m); box-shadow: var(--soya-1); overflow: auto;
}
.panel { padding: 16px 18px; }
.panel-title { font-weight: 600; font-size: 14px; margin-bottom: 12px; }

.stats { display: grid; gap: 14px; margin-bottom: 18px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.stat { background: var(--karta); border: 1px solid var(--chegara);
  border-radius: var(--r-m); padding: 16px; box-shadow: var(--soya-1); }
.stat .ic { width: 36px; height: 36px; border-radius: 10px; display: grid;
  place-items: center; font-size: 17px; margin-bottom: 10px;
  background: var(--urgu-yumshoq); color: var(--urgu-2); }
.stat .lbl { font-size: 12px; color: var(--matn-2); margin-bottom: 2px; }
.stat .num { font-size: 26px; font-weight: 600; letter-spacing: -.03em; }

table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
thead th { text-align: left; padding: 11px 14px; font-weight: 600; font-size: 11.5px;
  text-transform: uppercase; letter-spacing: .05em; color: var(--matn-3);
  background: var(--karta-2); border-bottom: 1px solid var(--chegara); white-space: nowrap; }
tbody td { padding: 11px 14px; border-bottom: 1px solid var(--chegara); }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--karta-2); }

.emp-cell { display: flex; align-items: center; gap: 11px; min-width: 0;
  text-decoration: none; color: inherit; }
.ava { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; flex: 0 0 36px;
  display: inline-grid; place-items: center; font-size: 12px; font-weight: 600;
  background: linear-gradient(145deg, var(--urgu-yumshoq), var(--urgu-chegara));
  color: var(--urgu-3); }
.ava img { width: 100%; height: 100%; object-fit: cover; }
.emp-name { font-weight: 500; }
.emp-sub { font-size: 12px; color: var(--matn-3); }

.tag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px;
  border-radius: 30px; font-size: 11.5px; font-weight: 500; white-space: nowrap;
  border: 1px solid transparent; background: var(--fon); color: var(--matn-3); }
.tag.office { background: var(--urgu-yumshoq); color: var(--urgu-2); border-color: var(--urgu-chegara); }
.tag.late { background: var(--sariq-fon); color: var(--sariq); border-color: var(--sariq-chegara); }
.tag.left, .tag.absent { background: var(--qizil-fon); color: var(--qizil); border-color: var(--qizil-chegara); }
.tag.rest { background: var(--fon); color: var(--matn-3); border-color: var(--chegara); }
.tag.reason { background: var(--kok-fon); color: var(--kok); }

.empty { padding: 34px 20px; text-align: center; color: var(--matn-3); font-size: 13.5px; }
.warn-box { background: var(--sariq-fon); border: 1px solid var(--sariq-chegara);
  color: var(--sariq); padding: 11px 15px; border-radius: var(--r-s);
  margin-bottom: 15px; font-size: 13px; }

.tabs { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 18px; padding: 5px;
  background: var(--karta); border: 1px solid var(--chegara); border-radius: var(--r-m);
  width: fit-content; max-width: 100%; overflow-x: auto; }
.tabs a { padding: 8px 15px; font-size: 13.5px; font-weight: 500; color: var(--matn-2);
  border-radius: var(--r-s); text-decoration: none; white-space: nowrap; }
.tabs a:hover { background: var(--fon); color: var(--matn); }
.tabs a.on { background: var(--urgu-yumshoq); color: var(--urgu-2); }
[data-tungi="1"] .tabs a.on { color: var(--urgu); }

label.fld { display: block; font-size: 12.5px; font-weight: 500; color: var(--matn-2);
  margin-bottom: 6px; }

.modal-bg { position: fixed; inset: 0; z-index: 90; display: none;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(8, 16, 12, .55); }
.modal-bg.show { display: flex; }
.modal { width: 100%; max-width: 460px; max-height: 90vh; overflow-y: auto;
  background: var(--karta); border: 1px solid var(--chegara);
  border-radius: var(--r-l); padding: 22px; box-shadow: var(--soya-3); }
.modal h3 { font-size: 16px; margin: 0 0 16px; }
.modal .row { margin-bottom: 14px; }

.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border: 1px solid var(--chegara-2); border-radius: var(--r-s);
  font-weight: 600; font-size: 13px; cursor: pointer; user-select: none;
  background: var(--karta); color: var(--matn-2); }
.chip input { display: none; }
.chip.on { background: var(--urgu); color: #fff; border-color: var(--urgu); }

.nbadge { background: var(--qizil); color: #fff; font-size: 11px; font-weight: 700;
  padding: 1px 7px; border-radius: 20px; margin-left: auto; }
.toast { position: fixed; bottom: 20px; right: 20px; z-index: 100;
  background: var(--panel-1); color: var(--panel-oq); padding: 12px 18px;
  border-radius: var(--r-m); font-size: 13.5px; box-shadow: var(--soya-3); max-width: 400px; }
.toast.ok { background: var(--urgu-3); color: #fff; }
.toast.err { background: var(--qizil); color: #fff; }

/* Eski sahifalardagi qattiq yozilgan oq fon va kul ranglar tungi rejimda
   ko'rinmay qolmasin */
[data-tungi="1"] [style*="background:#fff"],
[data-tungi="1"] [style*="background:#f8fafc"],
[data-tungi="1"] [style*="background:#fafbff"] { background: var(--karta) !important; }
[data-tungi="1"] [style*="border-bottom:1px solid #f1f5f9"],
[data-tungi="1"] [style*="border:1px solid #e5e9f0"] { border-color: var(--chegara) !important; }
[data-tungi="1"] [style*="color:#64748b"], [data-tungi="1"] [style*="color:#94a3b8"] {
  color: var(--matn-3) !important; }
[data-tungi="1"] [style*="color:#1e293b"], [data-tungi="1"] [style*="color:#0f172a"] {
  color: var(--matn) !important; }

/* Eski sahifalar ishlatadigan o'zgaruvchilar yangi palitraga bog'landi.
   Shu tufayli tungi rejim ularda ham to'g'ri ishlaydi. */
:root {
  --brand: var(--urgu); --brand-d: var(--urgu-3); --brand-l: var(--urgu-yumshoq);
  --bg: var(--fon); --card: var(--karta); --ink: var(--matn); --muted: var(--matn-2);
  --line: var(--chegara); --sidebar: var(--panel-1);
  --ok: var(--urgu); --ok-bg: var(--urgu-yumshoq); --ok-ink: var(--urgu-3);
  --warn: var(--sariq); --warn-bg: var(--sariq-fon); --warn-ink: var(--sariq);
  --bad: var(--qizil); --bad-bg: var(--qizil-fon); --bad-ink: var(--qizil);
  --info: var(--kok); --info-bg: var(--kok-fon); --info-ink: var(--kok);
  --rest-bg: var(--fon); --rest-ink: var(--matn-3);
}

/* ================================================================
   Rasmni kattalashtirib ko'rish (lupa)
   Telefonda ilova ichida ochilgani uchun "ortga" tugmasi shart —
   qurilmaning orqaga tugmasi ham shu oynani yopadi.
   ================================================================ */
.lupa {
  position: fixed; inset: 0; z-index: 120; display: none;
  align-items: center; justify-content: center;
  background: rgba(6, 12, 9, .93);
  padding: calc(58px + env(safe-area-inset-top)) 12px
           calc(16px + env(safe-area-inset-bottom));
}
.lupa.ochiq { display: flex; }
.lupa img {
  max-width: 100%; max-height: 100%; object-fit: contain;
  border-radius: var(--r-s); animation: lupaChiq .18s ease;
}
@keyframes lupaChiq { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
.lupa-bosh {
  position: absolute; top: env(safe-area-inset-top); left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 10px 12px;
}
.lupa-tugma {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 15px; border-radius: 30px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .1);
  color: #fff; font-size: 13.5px; font-weight: 500; font-family: inherit;
  backdrop-filter: blur(6px);
}
.lupa-tugma:hover { background: rgba(255, 255, 255, .18); color: #fff; }
.lupa-tugma .ikon { color: #fff; }

/* ================================================================
   Telefonga moslik: sahifa hech qachon yon tomonga surilmaydi
   ================================================================ */
/* DIQQAT: bu yerda `overflow-x: hidden` ishlatilmaydi — u html/body ni surilish
   idishiga aylantirib, yon menyu va yuqori paneldagi `position: sticky` ni buzadi.
   `clip` esa yon tomonga surilishni to'sadi, lekin sticky ishlayveradi. */
html, body { max-width: 100%; overflow-x: clip; }
@supports not (overflow-x: clip) {
  html, body { overflow-x: hidden; }
}
.qobiq, .asosiy, .tarkib, .karta, .karta-tan, .setka > * { min-width: 0; }
.tarkib { max-width: 100%; }
img, video, canvas, svg:not(.ikon), iframe { max-width: 100%; }
/* Uzun so'z va manzillar qatorni cho'zib yubormasin */
.karta-tan, .nkart-tan, .qiymat, .maydon-qator .q, .javob { overflow-wrap: anywhere; }
/* Keng jadvallar faqat o'z oynasi ichida suriladi */
.jadval-oyna, .tw { max-width: 100%; overflow-x: auto; }

@media (max-width: 760px) {
  /* Ustunli joylashuvlar bitta ustunga tushadi */
  .setka[style] { grid-template-columns: 1fr !important; }
  .setka-2, .setka-3, .setka-4 { grid-template-columns: 1fr; }
  .bosh-satr { gap: 10px; }
  .bosh-satr > * { min-width: 0; }
  .qator-tugma { width: 100%; }
  .qator-tugma > .tugma { flex: 1 1 auto; justify-content: center; }
  .filtr { width: 100%; }
  .korsatkich .son { font-size: 26px; }
  .halqa { width: 150px; height: 150px; flex-basis: 150px; }
  /* Yuqori paneldagi til va tungi rejim tugmalari joyiga sig'sin */
  .yuqori-ong .tugma.kichik { padding: 7px 9px; }
}

@media (max-width: 420px) {
  .varaq { padding: 7px 11px; font-size: 12.5px; }
  .nomzodlar { gap: 9px; }
  .karta-bosh { flex-direction: column; align-items: flex-start; gap: 8px; }
}


/* ================================================================
   Bir joyda turadigan qismlar (pastga surilganda ham ko'rinib turadi)
   ================================================================ */
:root { --yuqori-b: 62px; }

/* Yon menyu: sticky app.css da berilgan, bu yerda ishonchli qilinadi */
.yon { align-self: flex-start; top: 0; }

/* "Ortga" tugmasi va sarlavha qatori — yuqori panel ostida yopishib turadi */
.bosh-satr {
  position: sticky; top: var(--yuqori-b); z-index: 25;
  background: var(--fon);
  padding: 12px 0; margin: -12px 0 8px;
}

@media (max-width: 760px) {
  .bosh-satr { padding: 10px 0; margin: -10px 0 6px; }
}

.tag.waiting { background: var(--fon); color: var(--matn-2); border-color: var(--chegara); }
.n-kul { background: var(--fon); color: var(--matn-2); }
.holat-kartalar { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1400px) { .holat-kartalar { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .holat-kartalar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ================= Mobil tartib (760px gacha) ================= */
@media (max-width: 760px) {
  /* Sarlavha: chiqish tugmasi chetga yopishmasin, belgilar ko'rinsin */
  /* Sarlavha viewportdan chiqib ketmasin: nom qisqaradi, o'ng blok sig'adi */
  .yuqori { padding-right: 12px; overflow: hidden; }
  .yuqori h1 { flex: 1 1 auto; min-width: 0; }
  .yuqori-ong { flex: 0 0 auto; margin-left: auto; padding-right: 16px; }
  .yuqori-ong > form:last-child .tugma { padding: 7px 9px; border-color: var(--chegara); background: var(--karta); }
  .foyd { display: none; }
  .yuqori-ong .tugma .ikon { width: 17px; height: 17px; flex-basis: 17px; }
  #ornatTugma .ornat-matn { display: none; }
  /* Sana boshqaruvi va tugmalar qatori: ikki qatorga bo'linadi */
  .bosh-satr { gap: 10px; margin-bottom: 14px; }
  .bosh-satr > .qator-tugma { width: 100%; }
  .bosh-satr > .qator-tugma:first-child { display: flex; flex-wrap: nowrap; align-items: center; }
  .bosh-satr > .qator-tugma:first-child input[type=date] { flex: 1; min-width: 0; width: auto !important; }
  .bosh-satr .tugma.kichik { padding: 8px 11px; }
  .bosh-satr .tugma.kichik .ikon { width: 16px; height: 16px; flex-basis: 16px; }
  /* Kartalar: ikki ustun, raqamlar kichikroq */
  .holat-kartalar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .korsatkich { padding: 13px 12px; }
  .korsatkich .son { font-size: 24px; }
  .korsatkich .nishoncha { width: 30px; height: 30px; flex: 0 0 30px; }
  /* Jadvallar gorizontal suriladi, ekranni cho'zmaydi */
  .tw, .jadval-oyna { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tw table, .jadval-oyna table { min-width: 560px; }
  .filtr label.maydon { min-width: calc(50% - 6px); flex: 1; }
  .setka { grid-template-columns: 1fr !important; }
}

/* ── Telefonda o'rnatish taklifi ───────────────────────────── */
.ornat-banner {
  position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom));
  z-index: 80; display: flex; align-items: center; gap: 10px;
  padding: 10px 10px 10px 12px; background: var(--karta); color: var(--matn);
  border: 1px solid var(--chegara); border-radius: var(--r-l); box-shadow: var(--soya-3);
  transform: translateY(160%); transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}
.ornat-banner.korinadi { transform: none; }
.ornat-banner img { width: 40px; height: 40px; border-radius: 10px; flex: 0 0 40px; }
.ornat-banner-matn { flex: 1; min-width: 0; font-size: 12.5px; line-height: 1.35; }
.ornat-banner-matn b { display: block; font-size: 13.5px; }
.ornat-banner-matn span { color: var(--matn-3); }
.ornat-yop { background: none; border: 0; font-size: 22px; line-height: 1; color: var(--matn-3);
  padding: 4px 6px; cursor: pointer; }
.ornat-qadam { margin: 0 0 12px; padding-left: 22px; font-size: 14px; line-height: 1.5; }
.ornat-qadam li { margin: 8px 0; }

/* ── Filial almashtirgich ──────────────────────────────────── */
.filial-blok .til-royxat { min-width: 210px; }
.filial-nomi { max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 600px) { .filial-nomi { max-width: 84px; } }

.yuqori > .filial-blok { flex: 0 0 auto; margin-left: 10px; }
/* Ochiladigan ro'yxatlar (filial, til) panel ichida kesilib qolmasin */
@media (max-width: 760px) { .yuqori { overflow: visible; } }
/* Telefonda: 1-qator — menyu va ikonkalar, 2-qator — sahifa nomi va filial */
@media (max-width: 600px) {
  .yuqori { flex-wrap: wrap; row-gap: 6px; }
  .yuqori .menyu-tugma { order: 1; }
  .yuqori-ong { order: 2; }
  .yuqori h1 { order: 3; flex: 1 1 0; min-width: 0; font-size: 14.5px; }
  .yuqori > .filial-blok { order: 4; margin-left: 6px; }
  .yuqori > .filial-blok .til-royxat { right: 0; left: auto; }
  #ornatTugma { display: none !important; }
}