/* ============================================================
   mobile.css — BharatGPS Portal Android/Mobile Responsive
   Link this in all pages: <link rel="stylesheet" href="mobile.css"/>
   ============================================================ */

@media (max-width: 768px) {

  /* Prevent horizontal page scroll */
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* ── HEADER ── */
  .header { padding: 10px 14px; gap: 10px; }
  .header-logo { width: 40px; height: 40px; font-size: 20px; flex-shrink: 0; }
  .header h1 { font-size: 15px; }
  .header p  { font-size: 11px; }

  /* ── TOPBAR ── */
  .topbar { font-size: 10px; padding: 4px 12px; flex-wrap: wrap; gap: 4px; }

  /* ── NAVBAR — horizontal scroll on mobile ── */
  .navbar {
    padding: 0 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    scrollbar-width: none;
  }
  .navbar::-webkit-scrollbar { display: none; }
  .navbar a {
    font-size: 12px;
    padding: 10px 12px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* ── MAIN CONTENT ── */
  .main, .content-wrap, .main-content {
    padding: 12px 12px;
    margin: 12px auto;
  }

  /* ── PAGE TITLE ── */
  .page-title { font-size: 13px; padding: 10px 14px; }

  /* ── CARDS ── */
  .card-body { padding: 14px 12px; }
  .form-card .form-body { padding: 14px 12px; }

  /* ── FORM ROWS ── */
  .frow, .form-row {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .frow label, .form-row label {
    min-width: unset !important;
    width: 100% !important;
  }
  .frow input, .frow select, .frow textarea,
  .form-row input, .form-row select, .form-row textarea {
    width: 100% !important;
    min-width: unset !important;
  }

  /* ── FORM GRID ── */
  .form-grid { grid-template-columns: 1fr !important; }
  .form-group.full { grid-column: 1 !important; }

  /* ── SERVER GRID ── */
  .srv-grid, .server-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px;
  }

  /* ── BUTTONS ── */
  .btn-primary, .btn-orange, .btn-secondary, .btn-sec,
  .btn-submit, .btn-move, .btn-find, .btn-approve, .btn-cancel {
    width: 100%;
    padding: 12px 16px;
    font-size: 14px;
    text-align: center;
    justify-content: center;
  }

  /* ── BUTTON ROW ── */
  div[style*="display:flex"][style*="gap"] {
    flex-wrap: wrap;
  }

  /* ── SEARCH ROW ── */
  .search-row {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .search-row input { width: 100% !important; }
  .search-row button { width: 100% !important; }

  /* ── STATS ROW ── */
  .stats-row { gap: 8px; }
  .stat-box { min-width: 60px; padding: 8px 10px; }
  .stat-n, .stat-box .stat-n { font-size: 18px; }

  /* ── STEP BOX ── */
  .step-box { padding: 14px 12px; }

  /* ── TABLE — horizontal scroll ── */
  .tbl-wrap, .device-table-wrap, .results-table-wrap,
  .table-responsive, #resultsBox {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  table { min-width: 600px; font-size: 12px; }
  th, td { padding: 7px 8px; }

  /* ── TABS ── */
  .tabs {
    overflow-x: auto;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab, .tab-btn { white-space: nowrap; flex-shrink: 0; padding: 7px 14px; }

  /* ── DROP ZONE ── */
  .drop-zone { padding: 24px 12px; }
  .drop-icon { font-size: 36px; }
  .drop-text { font-size: 13px; }

  /* ── SERVER CARDS ── */
  .srv-card { padding: 10px 6px; }
  .srv-num { font-size: 16px; }
  .srv-name { font-size: 10px; }

  /* ── MAP GRID ── */
  .map-grid { grid-template-columns: 1fr !important; }

  /* ── MODAL ── */
  #scannerModal > div { width: 98vw !important; }

  /* ── ACTION OPTIONS ── */
  .action-opt { padding: 12px; }
  .action-opt-title { font-size: 13px; }
  .action-opt-desc  { font-size: 11px; }

  /* ── REQUEST CARDS ── */
  .req-body { grid-template-columns: 1fr 1fr !important; }
  .req-actions { flex-wrap: wrap; gap: 8px; }
  .btn-approve, .btn-cancel { width: auto; padding: 8px 16px; }

  /* ── DEVICE INFO GRID ── */
  .dev-info-grid { grid-template-columns: 1fr 1fr !important; }

  /* ── SUMMARY BOX ── */
  .summary-box { font-size: 12px; line-height: 1.8; }

  /* ── ADDING PAGE SPECIFIC ── */
  #imeiSearchInp { font-size: 14px !important; }
  .server-note { font-size: 12px; }

  /* ── LICENSE PAGE ── */
  .filter-row { flex-direction: column !important; gap: 8px; }
  #tblFilter { width: 100% !important; }

  /* ── USERS PAGE ── */
  .step-num { width: 28px; height: 28px; font-size: 14px; }

  /* ── FOOTER ── */
  .footer { font-size: 11px; padding: 10px; }

  /* ── HIDE LONG LABELS on mobile ── */
  .hide-mobile { display: none !important; }

  /* ── FULL WIDTH INPUTS ── */
  input[type=text], input[type=email], input[type=password],
  input[type=number], select, textarea {
    font-size: 16px !important; /* prevents iOS zoom */
  }
}

/* Extra small phones */
@media (max-width: 400px) {
  .srv-grid, .server-grid { grid-template-columns: 1fr 1fr !important; }
  .stats-row { gap: 6px; }
  .stat-box { min-width: 50px; padding: 6px 8px; }
  .header h1 { font-size: 13px; }
  table { min-width: 500px; font-size: 11px; }
}