/*==========================================================
PHONES (iPhone + Android) — loaded last on every page, so these
rules win over each page's own styles on small screens only.
Desktop and tablet layouts are untouched (everything below is
inside max-width: 760px, except the two "never zoom text" lines).
==========================================================*/

/* Don't let iOS / Android enlarge text on their own when the phone
   turns sideways */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (max-width: 760px) {
  /* No sideways wiggle from a stray pixel (clip, unlike hidden, keeps
     sticky headers working) */
  html,
  body {
    overflow-x: clip;
  }

  /* ---- Page headers: title on its own line, the rest wraps below ---- */
  .topbar,
  .main-header,
  .page-header {
    height: auto !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  .topbar > .topbar-title,
  .main-header > :first-child,
  .page-header > :first-child {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }

  .topbar-actions {
    flex: 1 1 100% !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 8px !important;
  }

  .topbar h1,
  .main-header h1,
  .page-header h1 {
    overflow-wrap: anywhere;
  }

  /* ---- Menu button (☰): always draw the icon, same look everywhere ---- */
  .app-sidebar-mobile-menu {
    width: 44px !important;
    height: 44px !important;
    margin: max(8px, env(safe-area-inset-top)) 0 4px max(8px, env(safe-area-inset-left)) !important;
    background: #07192c !important;
    color: #c8d5e3 !important;
    border: 1px solid #1c3d58 !important;
    box-shadow: none !important;
  }

  .app-sidebar-mobile-menu svg {
    display: block;
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* ---- Feedback: a small round button in the bottom corner instead of
     a tab covering the right edge of the page ---- */
  #feedbackTab {
    top: auto !important;
    bottom: calc(16px + env(safe-area-inset-bottom)) !important;
    right: calc(12px + env(safe-area-inset-right)) !important;
    transform: none !important;
    width: 48px !important;
    height: 48px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    border-right: 1px solid #7affad !important;
    writing-mode: horizontal-tb !important;
    font-size: 0 !important;
    line-height: 0 !important;
    overflow: hidden !important;
  }

  #feedbackTab::before {
    content: "?";
    font-size: 22px;
    font-weight: 800;
    line-height: 48px;
    display: block;
    text-align: center;
    color: #07140d;
  }

  #feedbackTab:hover {
    transform: none !important;
  }

  /* ---- No zoom when tapping a text box on iPhone (Safari zooms in on
     any field with text under 16px) ---- */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  select,
  textarea {
    font-size: 16px !important;
  }

  /* the Feedback panel styles its own fields by id */
  .feedback-panel #feedbackSubject,
  .feedback-panel #priority,
  .feedback-panel #feedbackMessage,
  #feedbackPanel input,
  #feedbackPanel select,
  #feedbackPanel textarea {
    font-size: 16px !important;
  }

  /* ---- Comfortable tap targets ---- */
  button,
  .btn,
  a.btn {
    min-height: 44px;
  }

  /* ---- Wide tables scroll sideways inside their own box ---- */
  .table-wrap,
  .table-scroll,
  .flight-list-wrap,
  .employees-table-wrap,
  .compliance-table-wrap,
  .audit-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ---- Daily Roster header (dailyRoster.html .main > .topbar) ---- */
  .main > .topbar {
    flex-wrap: wrap;
    gap: 8px;
    border-bottom-color: #1c3d58;
  }

  .main > .topbar .roster-date-picker {
    display: flex;
    flex: 1 1 100%;
    align-items: center;
    gap: 8px;
  }

  .main > .topbar #dateSelect {
    flex: 1;
    min-height: 44px;
    border-radius: 8px;
  }

  .main > .topbar > button {
    flex: 1 1 auto;
    padding: 0 14px;
    border: 1px solid #2a5278;
    border-radius: 8px;
    background: #0e2a47;
    color: #e6f0fa;
    font-weight: 700;
  }

  .main > .topbar > #saveRosterButton {
    background: #1f6feb;
    border-color: #1f6feb;
    color: #fff;
  }

  /* ---- Page areas may shrink to the screen width (a grid or flex
     item otherwise grows to fit its widest table) ---- */
  main,
  .content,
  .workspace,
  .page-content,
  .main-layout > *,
  .command-grid > *,
  .primary-column,
  .insights-column {
    min-width: 0;
  }

  /* Compliance summary: 2 cards per row instead of 4 in one line */
  #complianceMetrics {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #complianceMetrics > .metric-card {
    width: auto !important;
    min-width: 0 !important;
  }

  /* Station Budget: one field per line */
  .budget-controls-row {
    flex-wrap: wrap !important;
  }

  .budget-controls-row > .profile-field,
  .budget-controls-row > button {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .budget-controls-row select,
  .budget-controls-row input {
    width: 100% !important;
    max-width: 100% !important;
  }
}