/* ═══════════════════════════════════════════════════════════════════════════
   SALON QOBIG'I — salonga xos bezaklar (tepa panel banneri va h.k.).

   NEGA ALOHIDA FAYL: `salon-theme.css` FAQAT token qiymatlarini qayta
   belgilaydi va shu tartib test bilan qo'riqlanadi (test/salonTheme.test.js).
   Selektorli qoidalar shu yerga yoziladi — aks holda ikki temani parallel
   saqlash boshlanib ketardi.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Tepa panel banneri ──────────────────────────────────────────────────────
   Chapda ravoq. Rasm VEKTOR: har qanday ekranda aniq, CSP va litsenziya muammosi yo'q.
   To‘yxona temasi (`toyxona.css`) shu rasmni qayta yozadi.

   `--navbar-h` tokeni body padding'ini ham boshqargani uchun joylashuv o'zi moslashadi. */
html.theme-salon .navbar.fixed-top {
  /* `!important` MAJBURIY: public/style.css:215 da
     `.navbar { background: var(--bg-surface) !important; }` turibdi va u
     QISQARTMA xossa — background-image ni butunlay o'chiradi. Shuning uchun
     bu yerda ham qisqartma bilan, fon rangi bilan BIRGA yozamiz.
     Rasmni o'zgartirsangiz — faylga YANGI NOM bering: /images/ production'da `immutable, 7d`
     keshlanadi va `?v=` olmaydi, eski nom bilan xodimlar yangisini bir hafta ko'rmaydi. */
  background:
    url('/images/toyxona-banner-ravoq.svg') left center / auto 100% no-repeat,
    var(--bg-surface) !important;
}

/* Brend: salonda gradient-matn o'rniga TO'Q bir rang.
   Loyihaning gradient-matn uslubi (-webkit-text-fill-color: transparent)
   tilla palitrada juda xira chiqadi — brend nomi o'qilmay qoladi. */
html.theme-salon .navbar-brand {
  /* Banner figurasiga o'z joyi — aks holda u brend matni ostida qolib,
     ikkalasi ham o'qilmay qolardi. */
  padding-left: 3.4rem;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: var(--text-main);
  color: var(--text-main);
  font-weight: 800;
  letter-spacing: 0.01em;
  text-shadow: none;
}

@media (max-width: 767.98px) {
  /* Telefonda figura kattaroq ko'rinsin. Yana QISQARTMA + !important —
     alohida background-size/position yuqoridagi !important ga yutqazardi. */
  html.theme-salon .navbar.fixed-top {
    background:
      url('/images/toyxona-banner-ravoq.svg') left center / auto 100% no-repeat,
      var(--bg-surface) !important;
  }

  html.theme-salon .navbar-brand {
    padding-left: 2.9rem;
    /* Uzun to‘yxona nomi ism tugmasini —
       Sozlamalar va Chiqish shu yerda — ekrandan itarib chiqarardi. */
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  /* navbar (0.75rem) + container-fluid px-3 (1rem) — ikki qavat chekka 56px ni
     yeb, oddiy nom ham «Claude sinov sa…» bo'lib qolardi. */
  html.theme-salon .navbar > .container-fluid {
    padding-left: 0.25rem !important; /* Bootstrap .px-3 — !important */
    padding-right: 0.25rem !important;
  }
}

/* Planshet (768–900px): navbar bir qatorga sig'maydi — «Admin panel» va «Katalog»
   yopishib, «Katalog» strelkasi «Mijozlar» ostida qolardi (yozuvlarga ~110px yetmasdi).
   Shu oraliqda brend yozuvi yashirinadi (kelin figurasi — havola — qoladi, nomi
   ekran o'quvchiga baribir o'qiladi) va havolalar orasi biroz qisqaradi. */
@media (min-width: 768px) and (max-width: 899.98px) {
  /* Faqat ADMIN navbari (5 havola) sig'maydi — xodim (4) va master (2) da salon nomi qoladi (2026-10-03) */
  html.theme-salon body.rol-admin .navbar-brand {
    font-size: 0 !important;
    padding-left: 3.4rem;
  }

  html.theme-salon body.rol-admin .navbar .nav-link {
    padding-inline: 0.3rem !important;
  }
}

/* ── Mijoz formasi: salonda ism + telefon yetarli ──────────────────────────
   Mijoz telefonda ismi va raqami bilan yoziladi. «Otasining ismi» salon
   xodimi uchun ortiqcha — yashiriladi (tahrirlashda mavjud qiymat baribir
   yuboriladi, o'chmaydi). Familiya qoladi — «(ixtiyoriy)» belgisi markupda (CSS ::after bilan ikki marta chiqardi).
   Server ham shu qoidada: utils/mijozIdentity.js `faqatIsm`. */
html.theme-salon .mijoz-identity-fields__ota {
  display: none;
}


/* Ota ismi yashirilgach familiya yolg'iz yarim qatorda qolmasin */
@media (min-width: 576px) {
  html.theme-salon .mijoz-identity-fields__fam {
    grid-column: 1 / -1;
  }
}

/* Chek ro'yxati: tarif o'rniga «14.09.2026 gacha» — qachon qaytarishi kerak */
html.theme-salon .tb-qaytarish-sana {
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 700;
}

/* ==========================================================================
   TELEFON (salon). Hammasi `html.theme-salon` ostida — oddiy ijara o'zgarmaydi.
   Audit: 390px da gorizontal siljish yo'q edi; muammolar — kichik tugmalar,
   iOS'da maydonni bosganda sahifani kattalashtiruvchi <16px yozuv, mayda
   yorliqlar, savat oynasida «Tasdiqlash» ning pastga yashirinishi va
   qaytarish formasida sana belgisi soni maydonini yopib qo'yishi.
   ========================================================================== */
/* iOS Safari 16px dan kichik maydonga fokusda sahifani kattalashtiradi
   (telefon va planshet — style.css ham ≤991px da shunday qiladi, lekin sahifa
   CSS'lari uni bosib ketgan joylar bor) */
@media (max-width: 991.98px) {
  html.theme-salon input.form-control,
  html.theme-salon select.form-select,
  html.theme-salon textarea.form-control,
  html.theme-salon .form-control-sm,
  html.theme-salon .form-select-sm {
    font-size: 16px;
  }
}

@media (max-width: 767.98px) {
  /* Mijozlar asboblar qatori 360px ekranda o'ngdan chiqib ketardi */
  html.theme-salon .mijozlar-list-tools {
    flex-wrap: wrap;
  }

  /* Barmoq nishoni kamida ~44px */
  /* Bosish maydoni 44px, lekin navbar balandligi avvalgidek qolsin
     (manfiy vertikal chet) — aks holda sahifa sarlavhalari navbarga yopishardi */
  html.theme-salon .navbar-toggler {
    min-width: 44px;
    min-height: 44px;
    margin-block: -2px;
  }

  html.theme-salon .btn-sm,
  html.theme-salon .mijozlar-chip,
  html.theme-salon .mijoz-search-mode {
    min-height: 40px;
  }

  /* Mayda yorliqlar (9–11px) o'qilmaydi */
  html.theme-salon .form-label,
  html.theme-salon .filter-advanced-toggle__text,
  html.theme-salon .chek-meta-label,
  html.theme-salon .chek-xulosa__label,
  html.theme-salon .xizmat-kpi__label,
  html.theme-salon .xizmat-kpi__hint,
  html.theme-salon .xizmat-filtr__label,
  html.theme-salon .kassa-action-bar__xulosa-label {
    font-size: 0.8rem;
  }

  html.theme-salon .app-bottom-nav__label {
    font-size: 0.75rem;
  }
}

/* Bootstrap qatori manfiy chetlar bilan ota elementdan gutter qadar KENG
   bo'lishi kerak. style.css dagi telefon qoidasi `.row { max-width: 100% }`
   buni kesib, qatorni 12px chapga surardi — kartalar o'ngda tor qolardi
   (qaytarish formasidagi to'lov kartalari). Salonda aniq kenglik beramiz. */
@media (max-width: 991.98px) {
  html.theme-salon .row {
    max-width: calc(100% + var(--bs-gutter-x, 1.5rem));
  }
}

@media (max-width: 767.98px) {
  html.theme-salon .form-select-sm { min-height: 40px; }
  html.theme-salon .xizmat-tolov-chip { font-size: 0.75rem; }
  html.theme-salon #chekKontaktAddBtn { min-height: 40px; }
}

/* ── Ixtiyoriy maydonlar: faqat bosilganda ochiladi ─────────────────────────
   Mahsulot/xizmat formalarida majburiylari tepada, ixtiyoriylari pastda
   `<details class="ixt-maydon">` ichida yig'ilgan. Native details — JS kerak
   emas; qiymati bor maydon server tomonda `open` bilan chiziladi. */
html.theme-salon .ixt-bolim {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

html.theme-salon .ixt-bolim__sarlavha {
  margin: 0.25rem 0 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
}

html.theme-salon .ixt-maydon {
  border: 1px dashed var(--border-color);
  border-radius: var(--radius-card);
  background: var(--bg-surface);
}

html.theme-salon .ixt-maydon[open] {
  border-style: solid;
}

html.theme-salon .ixt-maydon > summary {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.75rem;
  padding: 0.5rem 0.85rem;
  list-style: none;
  cursor: pointer;
  font-weight: 600;
  color: var(--primary);
  user-select: none;
}

html.theme-salon .ixt-maydon > summary::-webkit-details-marker {
  display: none;
}

/* Ochish belgisi — chizilgan chevron (matnli «+/−» emas), ochilganda buriladi */
html.theme-salon .ixt-maydon > summary::before {
  content: "";
  flex: 0 0 auto;
  width: 0.5rem;
  height: 0.5rem;
  margin: 0 0.3rem 0 0.15rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
}

html.theme-salon .ixt-maydon[open] > summary::before {
  transform: rotate(45deg) translate(-0.1rem, -0.1rem);
}

html.theme-salon .ixt-maydon__izoh {
  margin-left: auto;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--text-muted);
}

/* Mahsulot tahririda galereya: rasm kartasi, burchakda o'chirish tugmasi
   (ichida checkbox `galereyaOchir`). Belgilangani xiralashadi, tugma «qaytarish»ga
   aylanadi — haqiqiy o'chirish «Saqlash»da. Holat CSS `:has(:checked)` bilan. */
html.theme-salon .galereya-tahrir {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

html.theme-salon .galereya-tahrir__karta {
  position: relative;
  width: 5.75rem;
}

html.theme-salon .galereya-tahrir__karta img {
  display: block;
  width: 5.75rem;
  height: 5.75rem;
  object-fit: cover;
  border-radius: var(--radius-card);
  background: var(--bg-muted);
  transition: opacity 0.15s ease, filter 0.15s ease;
}

html.theme-salon .galereya-tahrir__tugma {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin: 0;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: var(--bg-surface);
  color: var(--danger);
  cursor: pointer;
}

/* Checkbox ko'rinmaydi, lekin fokus va ekran o'quvchi uchun joyida */
html.theme-salon .galereya-tahrir__tugma input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

html.theme-salon .galereya-tahrir__tugma:has(input:focus-visible) {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

html.theme-salon .galereya-tahrir__ikon-qaytar,
html.theme-salon .galereya-tahrir__holat {
  display: none;
}

html.theme-salon .galereya-tahrir__holat {
  margin-top: 0.2rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--danger);
  text-align: center;
}

html.theme-salon .galereya-tahrir__karta:has(input:checked) img {
  opacity: 0.35;
  filter: grayscale(1);
}

html.theme-salon .galereya-tahrir__karta:has(input:checked) .galereya-tahrir__tugma {
  color: var(--text-main);
}

html.theme-salon .galereya-tahrir__karta:has(input:checked) .galereya-tahrir__ikon-ochir {
  display: none;
}

html.theme-salon .galereya-tahrir__karta:has(input:checked) .galereya-tahrir__ikon-qaytar,
html.theme-salon .galereya-tahrir__karta:has(input:checked) .galereya-tahrir__holat {
  display: block;
}

html.theme-salon .galereya-tahrir__izoh {
  display: none;
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

html.theme-salon .galereya-tahrir:has(input:checked) + .galereya-tahrir__izoh {
  display: block;
}

html.theme-salon .ixt-qator {
  display: flex;
  gap: 0.5rem;
}

html.theme-salon .ixt-qator > .form-control {
  flex: 1 1 0;
  min-width: 0;
}

html.theme-salon .ixt-maydon__ichi {
  padding: 0 0.85rem 0.85rem;
}

/* Ixtiyoriy bo'limdagi katakchalar (xizmat formasi: «Narxni xodim yozadi», «Bronga bonus»...)
   — barmoq bilan bosiladigan balandlik (~44px); katakning o'zi ham kattaroq. */
html.theme-salon .ixt-maydon__ichi .form-check {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 0.6rem;
  padding-left: 0;
}

html.theme-salon .ixt-maydon__ichi .form-check-input {
  float: none;
  width: 1.35rem;
  height: 1.35rem;
  margin: 0;
  flex-shrink: 0;
}

html.theme-salon .ixt-maydon__ichi .form-check-label {
  flex: 1 1 0;
  min-width: 0;
  padding: 0.6rem 0;
  cursor: pointer;
}

html.theme-salon .ixt-maydon__ichi .form-check > .form-text {
  flex-basis: 100%;
  margin-top: 0;
}

/* ── Rasm tanlov: kamera + bittadan qo‘shish ───────────────────────────────
   Telefonda oddiy fayl maydoni faqat galereyani ochadi, `multiple` esa
   bir nechta belgilashni chalkashtiradi. Tugmalar — public/js/rasm-tanlov.js.
   JS yozilmasa `.rasm-tanlov__qulay` yashirin, zaxira maydoni o‘z holicha. */
html.theme-salon .rasm-tanlov {
  position: relative;
}

html.theme-salon .rasm-tanlov__qulay {
  display: none;
}

html.theme-salon .rasm-tanlov.is-tayyor .rasm-tanlov__qulay {
  display: block;
}

html.theme-salon .galereya-tahrir + .galereya-tahrir__izoh + .rasm-tanlov__qulay {
  margin-top: 0.75rem;
}

html.theme-salon .rasm-tanlov.is-tayyor .rasm-tanlov__zaxira {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

html.theme-salon .rasm-tanlov__matn,
html.theme-salon .rasm-tanlov__hisob {
  margin: 0 0 0.65rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

html.theme-salon .rasm-tanlov__hisob:empty,
html.theme-salon .rasm-tanlov__xato:empty {
  display: none;
}

html.theme-salon .rasm-tanlov__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0 0 0.75rem;
}

html.theme-salon .rasm-tanlov__grid:empty {
  display: none;
}

html.theme-salon .rasm-tanlov__karta {
  position: relative;
  width: 5.75rem;
}

html.theme-salon .rasm-tanlov__karta img {
  display: block;
  width: 5.75rem;
  height: 5.75rem;
  object-fit: cover;
  border-radius: var(--radius-card);
  background: var(--bg-muted);
}

html.theme-salon .rasm-tanlov__ol {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: var(--bg-surface);
  color: var(--text-main);
}

html.theme-salon .rasm-tanlov__belgi {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--primary);
  text-align: center;
}

html.theme-salon .rasm-tanlov__belgi--tugma {
  width: 100%;
  min-height: 2.25rem;
  padding: 0.15rem 0 0;
  border: 0;
  background: none;
  text-decoration: underline;
}

html.theme-salon .rasm-tanlov__tugmalar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

html.theme-salon .rasm-tanlov--kompyuter .rasm-tanlov__tugma--kamera {
  display: none;
}

html.theme-salon .rasm-tanlov--kompyuter .rasm-tanlov__tugmalar {
  grid-template-columns: 1fr;
}

html.theme-salon .rasm-tanlov__tugma {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  min-height: 4.75rem;
  margin: 0;
  padding: 0.7rem 0.45rem;
  overflow: hidden;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-card);
  background: var(--bg-surface);
  color: var(--primary);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  cursor: pointer;
  touch-action: manipulation;
}

html.theme-salon .rasm-tanlov__tugma .bi {
  font-size: 1.35rem;
  line-height: 1;
}

html.theme-salon .rasm-tanlov__tugma.is-yopiq {
  opacity: 0.45;
}

html.theme-salon .rasm-tanlov__tugma:focus-within {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Fayl maydoni tugmaning ustida — bosish to‘g‘ridan-to‘g‘ri inputga tushadi
   (iOS kamerani `display: none` dagi maydondan ochmaydi). */
html.theme-salon .rasm-tanlov__manba {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  font-size: 16px;
  cursor: pointer;
}

/* Sahifa sarlavhasi hamma bo'limda BIR XIL (Bronlar/Menyu/Masterlar — .bron-sahifa__sarlavha
   1.6rem). Sozlamalar, Qaytarilgan cheklar, Xizmat sotuvlari, Qoidalar, Mijozlar va
   Katalogda sarlavha 1.15–2rem oralig'ida sakrab, bo'limlar har xil ilovadek ko'rinardi. */
html.theme-salon body:not(.sa-app) .page-toolbar__title,
html.theme-salon body:not(.sa-app) .ombor-card-toolbar__title {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: normal;
  color: var(--text-main);
}

/* Belgilash katakchalari, radio va switchlar — salon rangida (2026-09-28 audit): Bootstrapning ko'k
   rangi «Mijozda» tabidagi katakchalarda va Sozlamalardagi bot switchlarida qolib ketgan edi. */
html.theme-salon .form-check-input:checked {
  background-color: var(--primary);
  border-color: var(--primary);
}
html.theme-salon .form-check-input:focus {
  border-color: var(--primary-light);
  box-shadow: 0 0 0 0.2rem var(--focus-ring);
}
/* Switchlar bir o'lchamda (SMS switchlari bilan bir xil) — 29×14 px barmoq bilan bosishga kichik edi */
html.theme-salon .sozlamalar-page .form-switch .form-check-input {
  width: 2.5rem;
  height: 1.35rem;
}
html.theme-salon .sozlamalar-page .form-switch .form-check-label {
  padding-left: 0.35rem;
  min-height: 1.35rem;
}

/* Yig'ma sarlavhasidagi izoh (masalan, bonus nomlari) tor ekranda ALOHIDA qatorga tushadi —
   «Mijoz bonuslari» so'zi ikkiga bo'linib qolmasin (2026-09-29). */
@media (max-width: 575.98px) {
  html.theme-salon .berish__blok .ixt-maydon > summary {
    flex-wrap: wrap;
    row-gap: 0.1rem;
  }
  html.theme-salon .berish__blok .ixt-maydon__izoh {
    flex: 1 1 100%;
    margin-left: 0;
    padding-left: 1.65rem;
    text-align: left;
    font-weight: 500;
  }
}