/* iGPS Odyssey — mobile visual layer only (no app logic changes) */
@import url("/igps-static/fonts.css");

html {
  -webkit-text-size-adjust: 100%;
}

body {
  overscroll-behavior-y: none;
  font-family: "Manrope", "Segoe UI", system-ui, sans-serif;
}

/* Login surfaces (adm / mon / cms) — phone-friendly, keep ExtJS intact elsewhere */
@media (max-width: 900px) {
  html,
  body {
    max-width: 100vw;
    overflow-x: hidden;
  }

  form,
  table,
  .login-form,
  #login_form {
    max-width: 100% !important;
  }

  input[type="text"],
  input[type="password"],
  input[type="email"],
  input[type="number"],
  select,
  textarea {
    font-size: 16px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    border-radius: 10px;
  }

  input.input,
  .input,
  button,
  [type="submit"],
  input[type="submit"] {
    min-height: 44px;
    padding: 10px 14px !important;
    border-radius: 10px;
    font-family: inherit;
  }

  table[width],
  table[width="100%"],
  table[width="304px"],
  table[width="300px"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  img {
    max-width: 100%;
    height: auto;
  }

  #header,
  .header,
  .top-panel,
  .toolbar {
    flex-wrap: wrap;
  }

  .map,
  #map,
  #map_canvas,
  .map-container {
    min-height: 45vh !important;
    width: 100% !important;
  }

  .dialog,
  .popup,
  .modal,
  .ext-window,
  .x-window {
    max-width: 96vw !important;
    left: 2vw !important;
  }

  .grid,
  .x-grid3,
  table.normal_font {
    font-size: 13px !important;
  }
}

@media (max-width: 600px) {
  body {
    margin: 0 !important;
    padding: 0 !important;
  }

  body > center {
    display: block;
    padding: 28px 16px;
    min-height: 100dvh;
    box-sizing: border-box;
    background:
      radial-gradient(120% 80% at 50% -10%, rgba(46, 125, 140, 0.18), transparent 55%),
      linear-gradient(180deg, #f3f6f8 0%, #e8eef2 100%);
  }

  /* classic admin login card */
  body > center > table,
  table[bgcolor="#FFFFFF"] {
    width: 100% !important;
    max-width: 420px !important;
    margin: 0 auto !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(20, 40, 55, 0.12);
  }

  td,
  th {
    font-family: "Manrope", "Segoe UI", system-ui, sans-serif !important;
  }
}

/* Monitoring first paint on phone: keep map usable, avoid horizontal trap */
@media (max-width: 900px) {
  #monitoring,
  #content,
  .monitoring-wrap {
    max-width: 100vw;
  }
}

@supports (padding: env(safe-area-inset-bottom)) {
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
  }
}