/* ============================================================
   YDC Logistics — Mobile Experience Layer
   ------------------------------------------------------------
   All rules in this file are isolated inside @media queries so
   the desktop layout (≥768px, fine pointer) is NOT touched.

   Breakpoints:
     • max-width: 768px  → phones (portrait & landscape)
     • max-width: 480px  → small phones (iPhone SE / older Androids)
     • pointer: coarse   → touch-first devices (tablets, hybrids)

   Color palette mirrors desktop variables so brand stays unified:
     --navy:#0b1729  --blue:#2563eb  --bg:#f5f7fb  --line:#e7eaf0
   ============================================================ */

/* ============================================================
   1. ROOT-LEVEL OVERRIDES (Mobile only)
   ============================================================ */
@media (max-width: 768px) {
  :root {
    /* Use dvh so iOS Safari URL bar resize doesn't cause jank */
    --app-height: 100dvh;
    --mobile-bottom-nav-h: 64px;
    --mobile-topbar-h: 56px;
    --mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
    --mobile-safe-top: env(safe-area-inset-top, 0px);
    /* Spacing tokens — bigger touch targets */
    --mobile-space-1: 4px;
    --mobile-space-2: 8px;
    --mobile-space-3: 12px;
    --mobile-space-4: 16px;
    --mobile-space-5: 20px;
    --mobile-touch: 48px; /* minimum touch target */
    --mobile-radius: 14px;
    --mobile-radius-sm: 10px;
    --mobile-easing: cubic-bezier(0.22, 0.61, 0.36, 1);
    --mobile-easing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  html, body {
    /* Lock horizontal scroll on iOS */
    overflow-x: hidden;
    overscroll-behavior-x: none;
    /* Disable text selection on UI chrome — but allow on content */
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
  }

  /* Allow text selection only inside main content */
  body {
    /* Use dvh so the body grows with browser chrome */
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--bg);
    /* Smooth scroll with momentum on iOS */
    -webkit-overflow-scrolling: touch;
    /* Disable pinch-zoom on form inputs in iOS Safari */
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
  }

  /* Disable iOS auto-zoom on input focus by keeping font-size ≥16px */
  input, select, textarea {
    font-size: 16px !important;
  }

  /* Prevent long-press image save on UI icons */
  img, svg {
    -webkit-user-drag: none;
    user-select: none;
  }

  /* Force max-width 100% on legacy elements */
  table, .table-wrap, .filters, .page-head, .actions {
    max-width: 100%;
  }
}

/* ============================================================
   2. APP SHELL LAYOUT (Mobile)
   ------------------------------------------------------------
   Desktop uses .app-shell { display:flex } with sidebar+main.
   On mobile we hide the sidebar, transform main to full-width,
   and add fixed Topbar + Bottom Nav with safe-area padding.
   ============================================================ */
@media (max-width: 768px) {
  .app-shell {
    display: block;
    min-height: 100vh;
    min-height: 100dvh;
  }

  /* Hide desktop sidebar entirely; replaced by Mobile Drawer */
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 84vw;
    max-width: 320px;
    height: 100dvh;
    transform: translateX(-100%);
    transition: transform 280ms var(--mobile-easing);
    z-index: 1001;
    padding: var(--mobile-safe-top) 16px var(--mobile-safe-bottom);
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Hide scrollbar in mobile drawer */
    scrollbar-width: none;
  }
  .sidebar::-webkit-scrollbar { display: none; }

  .sidebar.open { transform: translateX(0); }

  .sidebar .brand {
    padding: 12px 4px 16px;
    font-size: 17px;
  }
  .sidebar .brand-logo {
    width: 32px;
    height: 32px;
    border-radius: 9px;
  }
  .sidebar nav {
    margin-top: 18px;
    gap: 3px;
  }
  .sidebar nav a {
    padding: 14px 12px;
    font-size: 14px;
    border-radius: 11px;
    min-height: var(--mobile-touch);
    /* Bigger icon touch area */
  }
  .sidebar nav a svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
  }
  .sidebar-user {
    padding: 16px 8px calc(8px + var(--mobile-safe-bottom));
    position: sticky;
    bottom: 0;
    background: var(--navy);
    z-index: 1;
  }

  /* Drawer overlay — only visible when sidebar is open */
  .mobile-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(11, 23, 41, 0.55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 280ms var(--mobile-easing), visibility 280ms;
    z-index: 1000;
  }
  .mobile-drawer-overlay.is-open {
    opacity: 1;
    visibility: visible;
  }

  /* Main column — full width, padded for top bar + bottom nav */
  .main {
    margin-left: 0 !important;
    width: 100%;
    min-height: 100dvh;
    padding-top: var(--mobile-topbar-h);
    padding-bottom: calc(var(--mobile-bottom-nav-h) + var(--mobile-safe-bottom) + 8px);
  }

  /* Hide desktop topbar; replaced by Mobile App Header */
  .topbar {
    display: none !important;
  }

  /* Content padding adjusted for mobile */
  .content {
    padding: 16px 14px 24px;
    max-width: 100%;
  }
}

/* ============================================================
   3. MOBILE APP HEADER (Top)
   ------------------------------------------------------------
   Sticky top bar with: [Back] [Title] [Drawer Trigger]
   Visible only on mobile. Title auto-derives from page-head h1
   or document.title via JS.
   ============================================================ */
@media (max-width: 768px) {
  .mobile-app-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: calc(var(--mobile-topbar-h) + var(--mobile-safe-top));
    padding: var(--mobile-safe-top) 12px 0;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--line);
    z-index: 900;
    display: flex;
    align-items: center;
    gap: 8px;
    /* Safe-area aware */
    box-sizing: border-box;
  }

  .mobile-app-header__back,
  .mobile-app-header__menu {
    width: var(--mobile-touch);
    height: var(--mobile-touch);
    border: 0;
    background: transparent;
    border-radius: 12px;
    display: grid;
    place-items: center;
    cursor: pointer;
    color: var(--navy);
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    transition: background 150ms, transform 100ms;
  }
  .mobile-app-header__back:active,
  .mobile-app-header__menu:active {
    background: rgba(37, 99, 235, 0.08);
    transform: scale(0.94);
  }
  .mobile-app-header__back svg,
  .mobile-app-header__menu svg {
    width: 22px;
    height: 22px;
  }

  .mobile-app-header__title {
    flex: 1;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    color: var(--navy);
    letter-spacing: -0.2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  /* Notification bell on top-right (replaces desktop one) */
  .mobile-app-header__bell {
    width: var(--mobile-touch);
    height: var(--mobile-touch);
    border: 0;
    background: transparent;
    border-radius: 12px;
    display: grid;
    place-items: center;
    cursor: pointer;
    color: var(--navy);
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    transition: background 150ms, transform 100ms;
  }
  .mobile-app-header__bell:active {
    background: rgba(37, 99, 235, 0.08);
    transform: scale(0.94);
  }
  .mobile-app-header__bell svg {
    width: 22px;
    height: 22px;
  }
  .mobile-app-header__bell b {
    position: absolute;
    top: 6px;
    right: 6px;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    display: grid;
    place-items: center;
    padding: 0 5px;
    border: 2px solid #fff;
    box-sizing: content-box;
    line-height: 1;
  }

  /* Hide desktop page-head h1 on mobile to avoid duplicate with header */
  .page-head {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-bottom: 14px;
  }
  .page-head h1 {
    /* Hide on mobile since header shows the title */
    display: none;
  }
  .page-head .actions {
    width: 100%;
    flex-wrap: wrap;
  }
  .page-head .actions .btn {
    flex: 1;
    min-width: 140px;
  }
  /* If page-head has no actions, just show eyebrow + p */
  .page-head > p {
    margin: 0;
    font-size: 13px;
  }
  .page-head .eyebrow {
    font-size: 10px;
    letter-spacing: 1.2px;
  }
}

/* ============================================================
   4. BOTTOM NAVIGATION BAR
   ------------------------------------------------------------
   Fixed at bottom, 6 items: Home, Operations, Warehouse, Finance,
   Notifications (with badge), More. The "More" button opens a
   Bottom Sheet with the rest of the menu (HR, Reports, HBL, etc.)
   ============================================================ */
@media (max-width: 768px) {
  .mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(var(--mobile-bottom-nav-h) + var(--mobile-safe-bottom));
    padding-bottom: var(--mobile-safe-bottom);
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-top: 1px solid var(--line);
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    z-index: 900;
    box-shadow: 0 -4px 24px rgba(11, 23, 41, 0.06);
  }

  .mobile-bottom-nav__item {
    border: 0;
    background: transparent;
    color: #8a93a4;
    font-size: 10px;
    font-weight: 600;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 2px 4px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    min-height: var(--mobile-touch);
    transition: color 200ms;
    -webkit-tap-highlight-color: transparent;
    text-decoration: none;
    line-height: 1.2;
  }

  .mobile-bottom-nav__item svg {
    width: 22px;
    height: 22px;
    transition: transform 200ms var(--mobile-easing-bounce);
  }

  .mobile-bottom-nav__item span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Active state */
  .mobile-bottom-nav__item.active {
    color: var(--blue);
    font-weight: 800;
  }
  .mobile-bottom-nav__item.active svg {
    transform: translateY(-1px) scale(1.08);
  }
  .mobile-bottom-nav__item.active::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 3px;
    background: var(--blue);
    border-radius: 0 0 3px 3px;
  }

  /* Pressed state */
  .mobile-bottom-nav__item:active svg {
    transform: scale(0.92);
  }
  .mobile-bottom-nav__item:active {
    background: rgba(37, 99, 235, 0.05);
  }

  /* Notification badge inside Bottom Nav */
  .mobile-bottom-nav__badge {
    position: absolute;
    top: 4px;
    right: calc(50% - 18px);
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    background: #ef4444;
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    display: grid;
    place-items: center;
    padding: 0 4px;
    border: 2px solid #fff;
    box-sizing: content-box;
    line-height: 1;
    z-index: 1;
    /* Pop-in animation */
    animation: m-badge-pop 320ms var(--mobile-easing-bounce);
  }

  @keyframes m-badge-pop {
    0% { transform: scale(0); }
    60% { transform: scale(1.2); }
    100% { transform: scale(1); }
  }
}

/* ============================================================
   5. RIPPLE EFFECT
   ------------------------------------------------------------
   Touch ripple on buttons, nav items, list rows. Triggered by
   JS which appends <span class="ripple-wave"> on touchstart.
   ============================================================ */
@media (max-width: 768px), (pointer: coarse) {
  .ripple {
    position: relative;
    overflow: hidden;
  }
  .ripple-wave {
    position: absolute;
    border-radius: 50%;
    background: rgba(37, 99, 235, 0.18);
    transform: scale(0);
    animation: m-ripple 600ms ease-out forwards;
    pointer-events: none;
    /* Keep waves bounded */
    max-width: 240px;
    max-height: 240px;
  }
  @keyframes m-ripple {
    to {
      transform: scale(2.4);
      opacity: 0;
    }
  }
  /* Stronger ripple on primary buttons */
  .btn.primary .ripple-wave,
  .mobile-bottom-nav__item .ripple-wave {
    background: rgba(255, 255, 255, 0.28);
  }
}

/* ============================================================
   6. BOTTOM SHEET (for "More" menu and notification center)
   ------------------------------------------------------------
   Slides up from bottom. Closes via: tap on backdrop, swipe
   down, ESC key, or back button.
   ============================================================ */
@media (max-width: 768px) {
  .mobile-sheet-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(11, 23, 41, 0.5);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 280ms var(--mobile-easing), visibility 280ms;
    z-index: 1100;
  }
  .mobile-sheet-backdrop.is-open {
    opacity: 1;
    visibility: visible;
  }

  .mobile-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    border-radius: 18px 18px 0 0;
    transform: translateY(100%);
    transition: transform 320ms var(--mobile-easing);
    z-index: 1101;
    max-height: 80dvh;
    display: flex;
    flex-direction: column;
    /* Respect safe area at bottom */
    padding-bottom: var(--mobile-safe-bottom);
    box-shadow: 0 -10px 40px rgba(11, 23, 41, 0.18);
  }
  .mobile-sheet.is-open {
    transform: translateY(0);
  }

  .mobile-sheet__handle {
    width: 40px;
    height: 4px;
    background: #d1d5db;
    border-radius: 2px;
    margin: 10px auto 6px;
    cursor: grab;
    flex-shrink: 0;
  }
  .mobile-sheet__handle:active { cursor: grabbing; }

  .mobile-sheet__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 18px 12px;
    border-bottom: 1px solid var(--line);
  }
  .mobile-sheet__title {
    font-size: 16px;
    font-weight: 800;
    color: var(--navy);
    margin: 0;
  }
  .mobile-sheet__close {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 0;
    background: #f3f5f9;
    color: var(--muted);
    display: grid;
    place-items: center;
    cursor: pointer;
  }
  .mobile-sheet__close:active {
    background: #e5e7eb;
    transform: scale(0.92);
  }

  .mobile-sheet__body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px 14px 20px;
    overscroll-behavior: contain;
  }

  /* Menu items inside "More" sheet */
  .mobile-sheet-menu {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }
  .mobile-sheet-menu__item {
    border: 0;
    background: transparent;
    color: var(--navy);
    padding: 14px 6px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    text-decoration: none;
    min-height: var(--mobile-touch);
    position: relative;
    overflow: hidden;
    transition: background 150ms;
  }
  .mobile-sheet-menu__item:active {
    background: rgba(37, 99, 235, 0.06);
  }
  .mobile-sheet-menu__icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: #eff6ff;
    color: var(--blue);
    display: grid;
    place-items: center;
    transition: transform 150ms;
  }
  .mobile-sheet-menu__item:active .mobile-sheet-menu__icon {
    transform: scale(0.92);
  }
  .mobile-sheet-menu__icon svg {
    width: 22px;
    height: 22px;
  }
  .mobile-sheet-menu__label {
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    line-height: 1.2;
  }
  .mobile-sheet-menu__badge {
    position: absolute;
    top: 8px;
    right: calc(50% - 22px);
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    background: #ef4444;
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    display: grid;
    place-items: center;
    padding: 0 4px;
    border: 2px solid #fff;
    line-height: 1;
  }

  /* Notification list inside bottom sheet */
  .mobile-notification-list .notification-item {
    padding: 12px;
    margin-bottom: 8px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid var(--line);
  }
  .mobile-notification-list .notification-item.is-unread {
    background: #eff6ff;
    border-color: #dbeafe;
  }
}

/* ============================================================
   7. TOAST (transient notification)
   ------------------------------------------------------------
   Small pill that appears above the bottom nav. Auto-dismisses.
   ============================================================ */
@media (max-width: 768px) {
  .mobile-toast-stack {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(var(--mobile-bottom-nav-h) + var(--mobile-safe-bottom) + 16px);
    z-index: 1300;
    display: flex;
    flex-direction: column-reverse;
    gap: 8px;
    pointer-events: none;
    width: min(440px, calc(100% - 24px));
  }

  .mobile-toast {
    background: var(--navy);
    color: #fff;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 8px 24px rgba(11, 23, 41, 0.22);
    display: flex;
    align-items: center;
    gap: 10px;
    pointer-events: auto;
    cursor: pointer;
    /* Entrance */
    opacity: 0;
    transform: translateY(20px) scale(0.96);
    animation: m-toast-in 280ms var(--mobile-easing-bounce) forwards;
    max-width: 100%;
  }
  .mobile-toast.is-leaving {
    animation: m-toast-out 220ms var(--mobile-easing) forwards;
  }
  .mobile-toast--success { background: #15803d; }
  .mobile-toast--error   { background: #dc2626; }
  .mobile-toast--warning { background: #d97706; }
  .mobile-toast--info    { background: var(--navy); }

  .mobile-toast svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
  }

  .mobile-toast__body {
    flex: 1;
    min-width: 0;
  }

  .mobile-toast__title {
    font-weight: 800;
    font-size: 12px;
    margin-bottom: 1px;
  }

  .mobile-toast__msg {
    font-size: 12px;
    opacity: 0.92;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  @keyframes m-toast-in {
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }
  @keyframes m-toast-out {
    to {
      opacity: 0;
      transform: translateY(20px) scale(0.96);
    }
  }
}

/* ============================================================
   8. PULL-TO-REFRESH INDICATOR
   ------------------------------------------------------------
   Shows a spinner that appears when user pulls down at top of
   page. JS triggers `window.location.reload()` after threshold.
   ============================================================ */
@media (max-width: 768px) {
  .mobile-ptr-indicator {
    position: fixed;
    top: calc(var(--mobile-topbar-h) + var(--mobile-safe-top) + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(-80px);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 4px 14px rgba(11, 23, 41, 0.15);
    display: grid;
    place-items: center;
    z-index: 800;
    transition: transform 220ms var(--mobile-easing), opacity 220ms;
    opacity: 0;
    pointer-events: none;
  }
  .mobile-ptr-indicator.is-visible {
    opacity: 1;
  }
  .mobile-ptr-indicator.is-refreshing svg {
    animation: m-spin 720ms linear infinite;
  }
  .mobile-ptr-indicator svg {
    width: 20px;
    height: 20px;
    color: var(--blue);
    transition: transform 220ms var(--mobile-easing);
  }
  @keyframes m-spin {
    to { transform: rotate(360deg); }
  }
}

/* ============================================================
   9. SKELETON LOADING (initial page load shimmer)
   ============================================================ */
@media (max-width: 768px) {
  .mobile-skeleton {
    background: linear-gradient(90deg, #eef1f6 0%, #f8fafc 50%, #eef1f6 100%);
    background-size: 200% 100%;
    animation: m-skeleton-shimmer 1.4s ease-in-out infinite;
    border-radius: 8px;
    color: transparent !important;
  }
  @keyframes m-skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }
  .mobile-skeleton-block {
    height: 14px;
    margin-bottom: 8px;
    border-radius: 6px;
  }
  .mobile-skeleton-block.tall { height: 80px; }
  .mobile-skeleton-block.full { width: 100%; }
  .mobile-skeleton-block.half { width: 50%; }
}

/* ============================================================
   10. FLOATING ACTION BUTTON (FAB)
   ------------------------------------------------------------
   Optional FAB for primary actions (e.g., "New Task"). Page
   can add `<button class="mobile-fab">` with data-fab-action.
   ============================================================ */
@media (max-width: 768px) {
  .mobile-fab {
    position: fixed;
    right: 16px;
    bottom: calc(var(--mobile-bottom-nav-h) + var(--mobile-safe-bottom) + 16px);
    width: 56px;
    height: 56px;
    border-radius: 18px;
    border: 0;
    background: var(--blue);
    color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.45);
    z-index: 700;
    transition: transform 180ms var(--mobile-easing-bounce), background 150ms;
    /* Entrance */
    animation: m-fab-pop 320ms var(--mobile-easing-bounce) 240ms backwards;
  }
  .mobile-fab:active {
    transform: scale(0.88);
    background: #1d4ed8;
  }
  .mobile-fab svg {
    width: 24px;
    height: 24px;
  }
  @keyframes m-fab-pop {
    0% { transform: scale(0) rotate(-90deg); }
    100% { transform: scale(1) rotate(0); }
  }
  /* Hide print/desktop-only FABs that should not appear in mobile */
  .desktop-only-fab { display: none !important; }
}

/* ============================================================
   11. CARDS / TABLES / FORMS (mobile readability)
   ------------------------------------------------------------
   Touch-friendly spacing, larger fonts where it matters, and
   table-card conversion (already has data-label in app.js).
   ============================================================ */
@media (max-width: 768px) {
  /* Cards: more breathing room */
  .card {
    border-radius: var(--mobile-radius);
    border-color: var(--line);
  }
  .dashboard-grid > .card,
  .detail-grid > .card,
  .split-grid > .card,
  .profile-grid > .card {
    padding: 16px;
  }

  /* KPI tiles: bigger, more touchable */
  .kpi {
    padding: 16px;
    gap: 12px;
  }
  .kpi-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    font-size: 18px;
  }
  .kpi strong {
    font-size: 22px;
    letter-spacing: -0.5px;
  }
  .kpi small {
    font-size: 12px;
  }

  /* Buttons: full-width on mobile when alone, taller touch target */
  .btn {
    min-height: var(--mobile-touch);
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 14px;
  }
  .btn.wide { width: 100%; }
  .btn:active {
    transform: scale(0.97);
  }

  /* Tables → Cards (data-label based, already wired in app.js) */
  .table-card {
    border-radius: var(--mobile-radius);
  }
  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .table-wrap table:not(.keep-table) thead { display: none; }
  .table-wrap table:not(.keep-table) tbody tr {
    display: block;
    padding: 12px;
    border-bottom: 1px solid var(--line);
  }
  .table-wrap table:not(.keep-table) tbody tr:last-child { border-bottom: 0; }
  .table-wrap table:not(.keep-table) tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
    border: 0;
    font-size: 13px;
    text-align: right;
  }
  .table-wrap table:not(.keep-table) tbody td::before {
    content: attr(data-label);
    font-weight: 700;
    color: var(--muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
  }

  /* Forms */
  .entity-form { padding: 16px; }
  .form-grid { gap: 14px; }
  .field label { font-size: 12px; margin-bottom: 6px; }
  .field input:not([type=checkbox]),
  .field select,
  .field textarea {
    padding: 12px;
    min-height: var(--mobile-touch);
    border-radius: 10px;
  }
  .form-actions {
    position: sticky;
    bottom: calc(var(--mobile-bottom-nav-h) + var(--mobile-safe-bottom));
    background: #fff;
    border-top: 1px solid var(--line);
    padding: 12px 0;
    margin: 16px -16px -8px;
    z-index: 5;
  }
  .form-actions .btn { flex: 1; }

  /* Filters */
  .filters {
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
  }
  .filters select,
  .filter-search {
    width: 100%;
    min-width: 0;
    min-height: var(--mobile-touch);
  }
  .filters .btn {
    flex: 1;
    min-width: 120px;
  }

  /* Alerts */
  .alert {
    padding: 12px 14px;
    margin-bottom: 14px;
    border-radius: 10px;
    font-size: 13px;
  }

  /* Badges */
  .badge { font-size: 10px; padding: 5px 9px; }

  /* Push permission modal */
  .push-permission {
    padding: 16px;
  }
  .push-permission-card {
    border-radius: var(--mobile-radius);
    padding: 18px;
  }

  /* Pagination */
  .pagination {
    grid-template-columns: auto 1fr auto;
    gap: 8px;
    padding: 10px;
    font-size: 13px;
  }
  .pagination a {
    min-height: var(--mobile-touch);
    min-width: var(--mobile-touch);
    display: grid;
    place-items: center;
    border-radius: 10px;
  }
}

/* ============================================================
   12. PAGE-SPECIFIC MOBILE ADJUSTMENTS
   ============================================================ */
@media (max-width: 768px) {
  /* Login page */
  .login-page {
    grid-template-columns: 1fr;
    min-height: 100dvh;
  }
  .login-visual {
    display: none;
  }
  .login-panel {
    padding: 24px 18px;
    padding-top: calc(24px + var(--mobile-safe-top));
  }
  .login-form h2 { font-size: 22px; }
  .login-form input {
    min-height: var(--mobile-touch);
    padding: 14px;
  }

  /* Dashboard grids → single column on small phones */
  .dashboard-v2-grid,
  .dashboard-v2-metrics,
  .dashboard-grid,
  .detail-grid,
  .kpi-grid,
  .customer-grid,
  .container-grid,
  .employee-grid,
  .task-board,
  .split-grid,
  .profile-grid,
  .pipeline,
  .form-grid {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  /* 2-col layouts on slightly wider phones (≥480px) */
  @media (min-width: 480px) and (max-width: 768px) {
    .kpi-grid,
    .dashboard-v2-metrics {
      grid-template-columns: 1fr 1fr !important;
    }
  }

  /* Hide search box in header (mobile users use bottom nav + drawer) */
  .searchbox {
    display: none !important;
  }

  /* Notification list & search results */
  .search-results {
    position: fixed;
    top: calc(var(--mobile-topbar-h) + var(--mobile-safe-top) + 8px);
    left: 12px;
    right: 12px;
    width: auto;
    max-height: 60dvh;
    overflow-y: auto;
    border-radius: 14px;
  }
}

/* ============================================================
   13. REDUCED MOTION FALLBACK
   ============================================================ */
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   14. PRINT: hide mobile chrome on print
   ============================================================ */
@media print {
  .mobile-app-header,
  .mobile-bottom-nav,
  .mobile-drawer-overlay,
  .mobile-sheet,
  .mobile-sheet-backdrop,
  .mobile-toast-stack,
  .mobile-ptr-indicator,
  .mobile-fab {
    display: none !important;
  }
}


/* ۱. مخفی کردن هدر در دسکتاپ و لپ‌تاپ (حالت پیش‌فرض) */
.mobile-app-header {
    display: none; 
}

/* ۲. نمایش هدر فقط در موبایل (عرض صفحه کمتر از ۷۶۸ پیکسل) */
@media screen and (max-width: 767.98px) {
    .mobile-app-header {
        display: flex; /* اگر هدر شما فلکس است از flex و اگر بلاک است از block استفاده کنید */
        align-items: center;
        justify-content: space-between;
        /* سایر استایل‌های موبایلی خود را اینجا اضافه کنید */
    }
}
/* ۱. مخفی کردن تمام المان‌های موبایلی در دسکتاپ و لپ‌تاپ (حالت پیش‌فرض) */
.mobile-app-header,
.mobile-drawer-overlay,
.mobile-sheet-backdrop,.hide,
.mobile-ptr-indicator {
    display: none; 
}

/* ۲. نمایش المان‌ها فقط در موبایل (عرض صفحه کمتر از ۷۶۸ پیکسل) */
@media screen and (max-width: 767.98px) {
    
    /* استایل هدر موبایل */
    .mobile-app-header {
        display: flex; 
        align-items: center;
        justify-content: space-between;
    }

    /* استایل اورلی، بک‌دراپ‌ها و نشانگر */
    .mobile-drawer-overlay,.hide,
    .mobile-sheet-backdrop,
    .mobile-ptr-indicator {
        display: block; /* اگر طراحی شما نیاز به flex دارد، آن را به display: flex تغییر دهید */
    }
}