/* ==========================================================================
   MBeauty — umumiy UI standartlari
   Har sahifaning o'z uslubi tegilmaydi. Bu fayl faqat hamma joyda bir xil
   bo'lishi kerak bo'lgan narsalarni qo'shadi: fokus, mobil moslashuv,
   teginish maydoni, jadval sig'diruvi, harakatni kamaytirish.
   Sahifa <style> idan KEYIN ulanadi.
   ========================================================================== */

:root{
  --ui-focus: var(--brand, #C2185B);
  --ui-radius: 10px;
}

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

/* --- 1. Klaviatura fokusi -------------------------------------------------
   Ilgari fokus umuman ko'rinmasdi - Tab bilan yurganda qayerdaligi bilinmasdi. */
:focus{ outline:none }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--ui-focus);
  outline-offset:2px;
  border-radius:6px;
}

/* --- 2. O'chirilgan elementlar bir xil ko'rinsin ------------------------- */
button:disabled, input:disabled, select:disabled, textarea:disabled{
  cursor:not-allowed;
  opacity:.6;
}

/* --- 3. Matn va uzun so'zlar ---------------------------------------------
   Uzun xizmat nomlari va manzillar konteynerdan chiqib ketmasin. */
body{ -webkit-text-size-adjust:100%; text-size-adjust:100% }
h1,h2,h3,p,label,td,th,li{ overflow-wrap:anywhere }
img,video,canvas,svg{ max-width:100%; height:auto }

/* --- 4. Jadvallar ---------------------------------------------------------
   ui.js har bir jadvalni .tbl-scroll ichiga o'raydi - tor ekranda sahifa
   emas, jadvalning o'zi yon tomonga suriladi. */
.tbl-scroll{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.tbl-scroll > table{ min-width:max-content }

/* --- 5. Ozgina yaxshiroq scrollbar --------------------------------------- */
*{ scrollbar-width:thin; scrollbar-color:var(--line-2,#d9d9d9) transparent }
*::-webkit-scrollbar{ width:9px; height:9px }
*::-webkit-scrollbar-track{ background:transparent }
*::-webkit-scrollbar-thumb{ background:var(--line-2,#d9d9d9); border-radius:6px }
*::-webkit-scrollbar-thumb:hover{ background:var(--ink-3,#bdbdbd) }

/* --- 6. Tanlangan matn brend rangida ------------------------------------- */
::selection{ background:color-mix(in srgb, var(--brand,#C2185B) 25%, transparent); color:inherit }

/* --- 7. Harakatni kamaytirish (tizim sozlamasi) -------------------------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* --- 8. Mobil moslashuv --------------------------------------------------
   Ko'p sahifada @media umuman yo'q edi. */
@media (max-width:640px){
  /* iOS da 16px dan kichik maydonga bosilganda sahifa avtomatik kattaradi */
  input, select, textarea{ font-size:16px !important }

  /* teginish maydoni juda kichik bo'lmasin */
  button, .btn, [role="button"], a.nav-link{ min-height:38px }

  /* sarlavha ikki qatorga tushsin, siqilib ketmasin */
  .header{ padding:8px 12px !important; row-gap:8px }
  .header-right{ width:100%; justify-content:flex-end }

  /* ikki ustunli formalar bitta ustunga */
  .form-grid, .form-grid-d, .nv-visit-grid, .grid-2{ grid-template-columns:1fr !important }

  /* yon-yon turgan filtrlar o'ralsin */
  .toolbar, .filters, .tashrif-filter, .main-tabs, .tabs, .sub-tabs, .quick-dates{
    flex-wrap:wrap;
  }

  /* modal deyarli to'liq ekran */
  .modal{ max-height:94vh }
  .modal-overlay, .confirm-overlay{ padding:8px !important }
}

@media (max-width:400px){
  .stats{ grid-template-columns:repeat(2,1fr) !important }
}

/* --- 9. Chop etish ------------------------------------------------------- */
@media print{
  #mb-side, #mb-burger, #mb-ovl, .header-right, .main-tabs, .tabs,
  .quick-dates, .btn-logout, .modal-overlay, .confirm-overlay{ display:none !important }
  body{ background:#fff !important; padding-left:0 !important }
  .booking-card, .reminder-card, .stat-card{ box-shadow:none !important; border:1px solid #ddd }
}

/* --- 8. Sarlavha tor ekranda -------------------------------------------
   O'ng tarafdagi tugmalar (til, kun/tun, foydalanuvchi, chiqish) bitta
   qatorga sig'masa, sahifani yon tomonga surib yubormasin - pastga tushsin. */
@media (max-width: 700px){
  .header{ flex-wrap:wrap; height:auto; min-height:56px; row-gap:8px;
           padding-top:8px; padding-bottom:8px }
  .header-right{ flex-wrap:wrap; justify-content:flex-end; row-gap:6px }
  .header-brand{ min-width:0 }
  .header-text h1{ font-size:15px }
}

/* --- 9. Sahifa yumshoq paydo bo'ladi -----------------------------------
   Bitta qisqa animatsiya - ko'z charchatmaydi, sahifa "sakrab" chiqmaydi.
   Tizimda harakat kamaytirilgan bo'lsa (yuqoridagi 7-band) o'chadi. */
@keyframes mb-page-in{ from{ opacity:0 } }
body{ animation: mb-page-in .3s ease backwards }