/* ==========================================================================
   MOBILE + iOS — sab se aakhir me load hota hai

   Yahan sirf wo cheezein hain jo phone par toot'ti hain. Teen asal masle
   theek kiye gaye hain, teenon iOS ke apne rawaiye ki wajah se:

     1. :hover touch par CHIPAK jata hai
     2. 100vh iOS par galat hai (toolbar ke peeche chala jata hai)
     3. Notch aur home-bar ke neeche content chhup jata hai

   Aur mobile layout yahan DOBARA likha gaya hai — bharose ke liye, na ke
   sajawat ke liye. Layout ki bunyadi rules ab is aakhri file me hain, to
   koi purani file ya inline <style> unhe chup-chaap ulat nahi sakti.
   ========================================================================== */

/* ══════════════════════════════════════════════════════════════════
   1. HOVER — sirf mouse wale device par
   iOS par chhoote hi :hover lag jata hai aur agli tap tak chipka rehta
   hai. Sidebar ka hover-expand is wajah se phone par khud-ba-khud khul
   kar khula hi reh jata tha. Ab hover sirf wahan jahan asli pointer ho.
   ══════════════════════════════════════════════════════════════════ */
@media (hover: none), (pointer: coarse) {
  .sidebar:hover { width: var(--sw) !important; box-shadow: none !important; }
  .sidebar:hover .brand-name, .sidebar:hover .brand-sub,
  .sidebar:hover .nav-item span, .sidebar:hover .nav-section-label,
  .sidebar:hover .user-name, .sidebar:hover .user-role { opacity: 0 !important; }
  /* .open phir bhi kaam kare — wo asli click hai, ittefaqi hover nahi */
  .sidebar.open { width: var(--sw-open) !important; }
  .sidebar.open .brand-name, .sidebar.open .brand-sub,
  .sidebar.open .nav-item span, .sidebar.open .nav-section-label,
  .sidebar.open .user-name, .sidebar.open .user-role { opacity: 1 !important; }
  /* Card/row ke hover bhi phone par bekar hain */
  .metric-card:hover, .panel:hover, .store-card:hover,
  tbody tr:hover td { transform: none !important; }
}

/* ══════════════════════════════════════════════════════════════════
   2. POORI UNCHAI — 100vh iOS par jhoot bolta hai
   iOS 100vh me toolbar ki jagah bhi gin leta hai, is liye page hamesha
   thora neeche khisak jata hai aur aakhri hissa toolbar ke peeche chhup
   jata hai. dvh asli nazar aane wali unchai deta hai.
   ══════════════════════════════════════════════════════════════════ */
.sidebar { height: 100vh; height: 100dvh; }
.main-content { min-height: 100vh; min-height: 100dvh; }

/* ══════════════════════════════════════════════════════════════════
   3. NOTCH aur HOME BAR — content un ke neeche na jaye
   viewport-fit=cover ke sath ye zaroori hai, warna upar ka hissa notch
   me aur neeche ka home-bar ke peeche chala jata hai.
   ══════════════════════════════════════════════════════════════════ */
@supports (padding: max(0px)) {
  .topbar      { padding-top: env(safe-area-inset-top); }
  .sidebar     { padding-top: env(safe-area-inset-top); }
  .page-body   { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
  .theme-toggle{ top: max(8px, env(safe-area-inset-top)) !important; }
}

/* ══════════════════════════════════════════════════════════════════
   4. MOBILE LAYOUT — dobara, poore zor ke sath

   Ye rules style.css me pehle se hain, lekin wahan se guzar kar do bari
   inline <style> blocks aur do aur stylesheets aati hain. Layout jaisi
   bunyadi cheez ko us poori zanjeer ke bharose chhorna theek nahi — is
   liye yahan aakhir me dobara, !important ke sath.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  html, body { max-width: 100%; overflow-x: hidden; }

  /* Sidebar off-canvas — sirf ☰ dabane par aata hai */
  .sidebar {
    position: fixed !important;
    top: 0 !important; left: 0 !important;
    width: var(--sw-open) !important;
    transform: translateX(-100%) !important;
    z-index: 200 !important;
  }
  .sidebar.open { transform: translateX(0) !important; }

  .main-content { margin-left: 0 !important; width: 100% !important; }
  .mobile-menu-btn { display: flex !important; }
  .sidebar-overlay.show { display: block !important; z-index: 150 !important; }

  /* Chaurai se bahar kuch na nikle */
  .page-body { padding: 12px !important; max-width: 100% !important; }
  .panel, .store-card, .metric-card { max-width: 100% !important; }
  .form-grid, .two-col, .chart-row { grid-template-columns: 1fr !important; }
  .metrics-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Table apne dabbe me scroll kare, poora page nahi */
  .table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; max-width: 100% !important; }

  /* Pills ek qatar me, side me scroll */
  .filter-row, .status-filter-row, .account-selector {
    flex-wrap: nowrap !important; overflow-x: auto !important;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .filter-row::-webkit-scrollbar,
  .status-filter-row::-webkit-scrollbar,
  .account-selector::-webkit-scrollbar { display: none; }
  .filter-pill, .acc-tab { flex-shrink: 0 !important; white-space: nowrap !important; }

  /* 16px se chhota input iOS ko zoom karne par majboor karta hai */
  input, select, textarea,
  input.field-input, select.field-input, textarea.field-input { font-size: 16px !important; }

  /* Ungli ke liye kaafi bara nishana */
  .btn-icon, .alix-btn { min-width: 34px; min-height: 34px; }

  /* Modal poori screen me fit ho */
  .modal-box { max-height: 88dvh !important; overflow-y: auto !important; }
}

@media (max-width: 430px) {
  .metrics-grid { grid-template-columns: 1fr !important; }
  .alix-grid    { grid-template-columns: 1fr !important; }
}

/* ══════════════════════════════════════════════════════════════════
   5. HOME SCREEN APP — jab standalone chale
   Wahan browser ka koi chrome nahi hota, is liye upar status bar ki
   jagah khud chhorni parti hai.
   ══════════════════════════════════════════════════════════════════ */
@media (display-mode: standalone) {
  .topbar { padding-top: max(10px, env(safe-area-inset-top)); }
  /* App me text select hona aksar ghalti se hota hai — sirf parhne wali
     jagah par chhor dein, buttons/nav par nahi */
  .nav-item, .filter-pill, .btn-primary, .btn-ghost, .acc-tab {
    -webkit-user-select: none; user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
}