/* =====================================================================
   Mobile Polish  -  Nattika Store Management
   Layered ON TOP of existing styles. Only touches mobile breakpoints.
   Safe drop-in: worst case, remove the <link> tag and nothing else breaks.
   ===================================================================== */

/* Better tap-target sizes on touch devices */
@media (pointer: coarse) {
  .btn { min-height: 44px !important; padding: 10px 16px !important; }
  .btn-sm { min-height: 38px !important; padding: 8px 12px !important; }
  input[type="text"],
  input[type="number"],
  input[type="date"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  select,
  textarea {
    min-height: 44px !important;
    font-size: 16px !important;  /* prevents iOS zoom on focus */
    -webkit-tap-highlight-color: rgba(15, 82, 73, 0.15);
  }
  /* Better focus outline for accessibility */
  *:focus-visible {
    outline: 2px solid #0f5249 !important;
    outline-offset: 2px;
  }
}

/* Small phones (<= 600px) */
@media (max-width: 600px) {
  /* Container padding */
  .container, main, .card { padding-left: 12px !important; padding-right: 12px !important; }

  /* Forms stack single column */
  .form-grid, .grid-2, .grid-3 {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Header: stack logo + user info */
  .container > header,
  .container > div:first-child {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  #headerLogo { height: 40px !important; max-width: 140px !important; }

  /* Tabs strip: horizontal scroll instead of wrap */
  .tabs {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px !important;
    white-space: nowrap !important;
  }
  .tab {
    scroll-snap-align: start;
    flex-shrink: 0 !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
  }

  /* History cards: stack head + actions */
  .history-item .head { flex-direction: column !important; align-items: stretch !important; gap: 8px !important; }
  .history-item .actions { flex-wrap: wrap !important; gap: 6px !important; }
  .history-item .actions .btn { flex: 1 1 auto; min-width: 44%; }

  /* KPI tiles: 2 columns instead of 4-5 */
  .kpi-grid, [class*="kpi"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  /* Tables become horizontally scrollable */
  .card table,
  details table,
  .history-item table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    font-size: 12px !important;
  }
  .card table th,
  .card table td { padding: 6px 8px !important; }

  /* Login card fits screen */
  #loginScreen > div,
  .login-card {
    width: 92% !important;
    max-width: 360px !important;
    padding: 22px 18px !important;
  }
  #loginLogo { max-width: 150px !important; }

  /* Modal dialogs (Receive, Recipients, etc.) fit narrow screens */
  [style*="position:fixed"][style*="z-index:5000"] > div,
  .modal-content {
    padding: 16px !important;
    max-width: 96vw !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
  }

  /* Module tiles stack vertically */
  .modules-grid, .module-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    padding: 0 4px !important;
  }
  .module-tile-content { padding: 16px 18px !important; }
  .module-tile-content h3 { font-size: 17px !important; }
  .module-tile-content p { font-size: 12px !important; min-height: unset !important; }

  /* Meta text smaller */
  .meta { font-size: 11px !important; line-height: 1.4 !important; }

  /* Toast fits inside phone width */
  #toastHost, .toast-host {
    left: 8px !important;
    right: 8px !important;
    bottom: 8px !important;
  }
  #toastHost > div, .toast {
    max-width: 100% !important;
    font-size: 13px !important;
    padding: 12px !important;
  }
}

/* Extra-small phones (<= 400px) */
@media (max-width: 400px) {
  h1 { font-size: 16px !important; }
  h2 { font-size: 14px !important; }
  .btn { font-size: 13px !important; padding: 9px 12px !important; }
  .btn-sm { font-size: 11px !important; padding: 6px 10px !important; }
  .field label { font-size: 11px !important; }
  .module-tile-content h3 { font-size: 15px !important; }
}

/* When running as an installed PWA (standalone mode) --------------- */
@media (display-mode: standalone) {
  /* Hide anything that only makes sense in browser view */
  .browser-only { display: none !important; }
  /* Slightly more compact since there's no browser chrome */
  body { padding-top: env(safe-area-inset-top); }
  header, .app-header { padding-top: max(8px, env(safe-area-inset-top)) !important; }
}

/* Print styles: cleaner PDF/print output */
@media print {
  header, .tabs, .actions, .btn, #toastHost { display: none !important; }
  .card { border: none !important; box-shadow: none !important; padding: 0 !important; }
  body { background: #fff !important; }
}