/* ═══════════════════════════════════════════════════════════════════════════
   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 kelin, ko'ylak shlyeyfi o'ngga cho'zilgan. Rasm VEKTOR (~3KB):
   har qanday ekranda aniq, CSP va litsenziya muammosi yo'q.

   Panel salonda biroz balandroq — 42px da figura ko'rinmasdi. `--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. */
  background:
    url('/images/salon-banner.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 {
  /* Kelin 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/salon-banner.svg') left center / auto 100% no-repeat,
      var(--bg-surface) !important;
  }

  html.theme-salon .navbar-brand {
    padding-left: 2.9rem;
  }
}

/* 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) {
  html.theme-salon .navbar-brand {
    font-size: 0 !important;
    padding-left: 3.4rem;
  }

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

/* ── Xizmat kartochkasi: salonda tarif ranglari yo'q ────────────────────────
   Xizmat variant tugmalari indeks bo'yicha `price-btn-soat` (yashil) va
   `price-btn-kunlik` (mis) sinflarini oladi — bu odatiy ijarada «soatlik /
   kunlik» tarifni bildiradi. Salonda tarif yo'q: variantlar shunchaki nomlar
   («Oddiy», «Murakkab»), shuning uchun rang farqi ma'no bermaydi va yashil
   tilla temadan ajralib turadi. Hammasi brend gradientiga o'tadi, farq esa
   tugma ichidagi variant nomida qoladi.
   Faqat `html.theme-salon` ostida — odatiy ijara o'zgarmaydi. */
html.theme-salon .ijara-xizmat-card .add-xizmat-btn {
  background: var(--grad-primary);
  border-color: var(--primary);
  color: var(--text-white);
}

html.theme-salon .ijara-xizmat-card .add-xizmat-btn:hover:not(:disabled),
html.theme-salon .ijara-xizmat-card .add-xizmat-btn:focus-visible:not(:disabled) {
  background: var(--grad-primary-hover);
  border-color: var(--primary-hover);
}

/* «+» tugmasi (erkin narx): xizmatlar.css da ikkita qoida bor —
   ikkinchisi 4 ta sinfli (`…-prices > .add-xizmat-btn ~ …`). Shuning uchun
   bu yerda ham 4 ta sinf kerak, aks holda mis rang ustun chiqadi. */
html.theme-salon .ijara-product-card-prices .ijara-xizmat-card__free .add-xizmat-free-btn {
  background: var(--grad-primary);
  border-color: var(--primary);
  color: var(--text-white);
}

/* ── 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;
  }
}

/* Dashboard davr tugmalari (22px) — telefonda barmoq bilan bosiladigan bo'lsin */
@media (max-width: 767.98px) {
  html.theme-salon .btn.btn-outline-secondary {
    min-height: 40px;
  }
}

/* ── Savat oynasi (telefon/planshet) ─────────────────────────────────────────
   Standart bo'linish: savat qatorlari 2/3, rasmiylashtirish 1/3. Salonda savat
   kichik (ko'ylak + 1–2 xizmat) — ekranning katta qismi bo'sh turib,
   «Tasdiqlash» esa pastda ichki aylantirish ortida yashirinardi. Salonda
   savat faqat kerakli balandlikni oladi, qolgan joy rasmiylashtirishga. */
@media (max-width: 991.98px) {
  

  

  /* Balandlikni surgich salonda keraksiz (bo'linish avtomatik) */
  

  /* Qaytarish kartasidagi muddat endi o‘z katakida (yorliq «Muddat»).
     Eski to‘liq qator qoidasi sanani soni va summadan ajratib, belgi
     tugmaga o‘xshab qolardi — qaytarish.css dagi kartada. */
}

/* 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 .staff-row-meta__lbl,
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: kichik rasmlar + «O'chirish» */
html.theme-salon .galereya-tahrir {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

html.theme-salon .galereya-tahrir__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.82rem;
  color: var(--text-secondary);
  cursor: pointer;
}

html.theme-salon .galereya-tahrir__item img {
  width: 84px;
  height: 84px;
  border-radius: var(--radius-card);
  object-fit: cover;
  background: var(--bg-muted);
}

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;
}