/*!
 * MOSO web_ui — moso-mobile.css
 * Phone layout for every page: the desktop sidebar becomes a bottom "Menyu" sheet, a native-app
 * style tab bar sits at the bottom (built by moso-mobile.js) and oversized desktop spacing/fonts
 * are scaled down. Page markup uses inline styles, so overrides need !important.
 */

html, body { overflow-x: hidden; -webkit-text-size-adjust: 100%; }
body { -webkit-tap-highlight-color: transparent; }

#moso-tabbar, #moso-topbar, #moso-backdrop { display: none; }

@media (max-width: 860px) {
  body { padding-top: calc(56px + env(safe-area-inset-top)); padding-bottom: calc(74px + env(safe-area-inset-bottom)); }
  /* Public pages have no bottom tab bar (see moso-mobile.js). */
  body.moso-page-landing, body.moso-page-login { padding-bottom: env(safe-area-inset-bottom); }

  /* ── top app bar ───────────────────────────────────────────── */
  #moso-topbar {
    display: flex; position: fixed; z-index: 900; top: 0; left: 0; right: 0;
    height: calc(56px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 14px 0;
    box-sizing: border-box; align-items: center; gap: 10px;
    background: rgba(15, 26, 4, 0.96); color: #FFFFFF; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    font-family: 'Manrope', system-ui, sans-serif;
  }
  #moso-topbar .logo { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #7ACC00, #408000); box-shadow: 0 0 0 2px rgba(232,213,163,0.6); font-family: 'Playfair Display', serif; font-weight: 700; color: #FFFFFF; text-decoration: none; }
  #moso-topbar .title { flex: 1; min-width: 0; font-weight: 800; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #moso-topbar .me { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    background: #ADFF00; color: #132205; font-weight: 800; font-size: 13px; text-decoration: none; }
  #moso-topbar .cta { flex-shrink: 0; min-height: 36px; padding: 0 14px; border-radius: 999px; display: flex; align-items: center;
    background: #ADFF00; color: #132205; font-weight: 800; font-size: 14px; text-decoration: none; }

  /* ── bottom tab bar ────────────────────────────────────────── */
  #moso-tabbar {
    display: grid; position: fixed; z-index: 900; left: 0; right: 0; bottom: 0;
    grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); box-sizing: border-box;
    background: rgba(255,255,255,0.97); border-top: 1px solid #DFE6D2; box-shadow: 0 -10px 30px -20px rgba(19,34,5,0.45);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font-family: 'Manrope', system-ui, sans-serif;
  }
  #moso-tabbar a, #moso-tabbar button {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 56px;
    border: 0; background: transparent; color: #36412A; text-decoration: none; font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; padding: 0;
  }
  #moso-tabbar .ic { width: 52px; height: 30px; border-radius: 15px; display: flex; align-items: center; justify-content: center; transition: background .15s; }
  #moso-tabbar .on { color: #408000; font-weight: 800; }
  #moso-tabbar .on .ic { background: #EEF7DA; }
  #moso-tabbar .badge { position: absolute; margin: -18px 0 0 22px; min-width: 18px; height: 18px; border-radius: 9px; background: #C2410C; color: #FFFFFF; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; padding: 0 4px; box-sizing: border-box; }

  /* ── desktop sidebar → bottom sheet ("Menyu") ──────────────── */
  #app nav[aria-label$="menyusi"] { display: none !important; }
  body.moso-sheet-open #app nav[aria-label$="menyusi"] {
    display: flex !important; position: fixed !important; z-index: 1001; left: 0; right: 0; bottom: 0; top: auto;
    max-height: 82vh; overflow-y: auto; flex: none !important; width: auto !important;
    border-radius: 26px 26px 0 0; padding: 22px 16px calc(22px + env(safe-area-inset-bottom)) !important;
    box-shadow: 0 -20px 60px rgba(0,0,0,0.45); animation: moso-sheet .22s ease-out;
  }
  body.moso-sheet-open #moso-backdrop { display: block; position: fixed; inset: 0; z-index: 1000; background: rgba(8,14,2,0.55); }
  body.moso-sheet-open { overflow: hidden; }
  @keyframes moso-sheet { from { transform: translateY(40px); } to { transform: none; } }

  /* Large title lives in the page; the small bar title appears once it scrolls away (iOS pattern). */
  #moso-topbar .title { opacity: 0; transition: opacity .2s; }
  body.moso-scrolled #moso-topbar .title, body.moso-page-landing #moso-topbar .title, body.moso-page-login #moso-topbar .title { opacity: 1; }

  /* Stat-card grids → compact 2-column tiles (not on the landing page, not for forms/tables). */
  body:not(.moso-page-landing) #app [style*="grid-template-columns: repeat(auto-fit, minmax(min(2"]:not(:has(input, select, textarea, table)) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important;
  }
  body:not(.moso-page-landing) #app [style*="grid-template-columns: repeat(auto-fit, minmax(min(2"]:not(:has(input, select, textarea, table)) > * { padding: 14px !important; border-radius: 18px !important; min-width: 0; }
  body:not(.moso-page-landing) #app [style*="grid-template-columns: repeat(auto-fit, minmax(min(2"]:not(:has(input, select, textarea, table)) [style*="font-family: 'Playfair Display'"] { font-size: 24px !important; overflow-wrap: anywhere; }

  /* Tabs / filter chips: one horizontally scrolling row, like native segmented tabs. */
  #app [role="tablist"], #app [role="group"][aria-label="Filtr"] {
    flex-wrap: nowrap !important; overflow-x: auto; max-width: 100%; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  #app [role="tablist"]::-webkit-scrollbar, #app [role="group"][aria-label="Filtr"]::-webkit-scrollbar { display: none; }
  #app [role="tablist"] > *, #app [role="group"][aria-label="Filtr"] > * { flex-shrink: 0 !important; white-space: nowrap; }

  /* Login page: the sign-in card first, the welcome panel below it. */
  body.moso-page-login #app aside { order: 2; }
  body.moso-page-login #app aside > a[data-home] { display: none !important; }
  body.moso-page-login #app main { order: 1; }

  /* ── page container & spacing ──────────────────────────────── */
  #app main { padding: 16px 14px 24px !important; gap: 14px !important; flex-basis: 100% !important; }
  #app > div { min-height: auto !important; }
  #app section, #app aside { border-radius: 22px !important; }
  #app [style*="padding: 34px"], #app [style*="padding: 32px"], #app [style*="padding: 30px"],
  #app [style*="padding: 28px"], #app [style*="padding: 26px"] { padding: 18px !important; }
  #app [style*="padding: 24px"], #app [style*="padding: 22px"] { padding: 16px !important; }
  #app [style*="padding: 110px 32px"], #app [style*="padding: 20px 32px 100px"], #app [style*="padding: 0 32px 90px"] { padding: 48px 16px !important; }
  #app [style*="padding: 56px 32px 110px"] { padding: 28px 16px 48px !important; gap: 28px !important; }
  #app [style*="padding: 22px 32px"], #app [style*="padding: 44px 32px"] { padding: 16px !important; }
  #app [style*="padding: 48px 56px"], #app [style*="padding: 48px 32px"] { padding: 24px 16px !important; }
  #app [style*="padding: 64px"] { padding: 28px 20px !important; }
  #app [style*="gap: 52px"], #app [style*="gap: 48px"], #app [style*="gap: 46px"] { gap: 24px !important; }

  /* ── type scale (desktop display sizes are far too large for phones) ── */
  #app [style*="font-size: 80px"], #app [style*="font-size: 78px"] { font-size: 44px !important; }
  #app [style*="font-size: 68px"], #app [style*="font-size: 64px"], #app [style*="font-size: 60px"] { font-size: 38px !important; }
  #app [style*="font-size: 58px"], #app [style*="font-size: 56px"], #app [style*="font-size: 54px"], #app [style*="font-size: 52px"] { font-size: 32px !important; }
  #app [style*="font-size: 46px"], #app [style*="font-size: 44px"] { font-size: 32px !important; }
  #app [style*="font-size: 42px"], #app [style*="font-size: 40px"], #app [style*="font-size: 38px"] { font-size: 28px !important; }
  #app [style*="font-size: 36px"], #app [style*="font-size: 34px"] { font-size: 26px !important; }
  #app h1 { line-height: 1.15 !important; }

  /* ── layout fixes ──────────────────────────────────────────── */
  #app [style*="flex: 1 1 520px"], #app [style*="flex: 999 1 560px"] { flex-basis: 100% !important; }
  #app table { font-size: 14.5px !important; }
  #app [style*="overflow-x: auto"] { -webkit-overflow-scrolling: touch; margin-left: -4px; margin-right: -4px; }
  #app input, #app select, #app textarea { font-size: max(16px, 1em) !important; }   /* no iOS zoom on focus */
  #app [aria-label="Kabinet ko‘rinishi"] { transform: scale(0.82); transform-origin: top center; height: 470px !important; margin-bottom: -80px; }
  #app header nav[aria-label="Sahifa bo‘limlari"] { display: none !important; }
  /* Landing page: its own logo/login row duplicates the app bar on phones. */
  body.moso-page-landing #app header > div[style*="justify-content: space-between"] { display: none !important; }
  #app [style*="width: 320px"], #app [style*="width: 300px"], #app [style*="width: 280px"], #app [style*="width: 240px"] { width: 100% !important; }
}

@media (max-width: 380px) {
  #moso-tabbar a, #moso-tabbar button { font-size: 10.5px; }
  #moso-tabbar .ic { width: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  body.moso-sheet-open #app nav[aria-label$="menyusi"] { animation: none !important; }
}

/* Installed as an app (standalone): no browser chrome, so keep the status bar area dark. */
@media (display-mode: standalone) {
  html { background: #0F1A04; }
}