/* ════════════════════════════════════════
   Agent Portal — Mobile Polish v2
   Global mobile improvements — all portal pages
   ════════════════════════════════════════ */

/* ── Topbar: title overflow protection ── */
.topbar { flex-wrap: nowrap; }
.topbar-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topbar-right { flex-shrink: 0; display: flex; align-items: center; gap: 0.5rem; }

/* ── Modal close: 44px touch target everywhere ── */
.modal-close {
  min-width: 44px !important;
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

/* ── Tap feedback / iOS highlight removal ── */
.nav-item,
.btn, .btn-primary, .btn-secondary, .btn-outline, .btn-danger,
.qa-card, .client-card, .r-card, .resource-item {
  -webkit-tap-highlight-color: transparent;
}

/* ── All interactive elements: 44px min touch target ── */
button, [role="button"], a.nav-item {
  min-height: 44px;
}

/* ════════════════════════════════════════
   MODAL: PROPER FLEXBOX LAYOUT FOR iOS
   Fixes iOS Safari bug where position:sticky
   inside overflow:auto breaks content rendering.
   Header stays fixed at top, only body scrolls.
   ════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Bottom sheet wrapper */
  .modal-overlay,
  [class*="modal-overlay"] {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  /* Modal: flex column so body can independently scroll */
  .modal-overlay > .modal,
  .modal-overlay > [class*="modal"],
  [class*="modal-overlay"] > .modal,
  [class*="modal-overlay"] > [class*="modal"] {
    display: flex !important;
    flex-direction: column !important;
    border-radius: 18px 18px 0 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    max-height: 90dvh !important;
    max-height: 90vh !important; /* fallback for older iOS */
    overflow: visible !important; /* let flex children handle scroll */
  }

  /* Header: fixed at top — no sticky needed */
  .modal-header {
    position: relative !important; /* Override any sticky */
    top: auto !important;
    flex-shrink: 0 !important;
    background: #fff !important;
    z-index: 1 !important;
    border-radius: inherit !important;
  }

  /* Body: THIS is what scrolls on mobile */
  .modal-body {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    min-height: 0 !important; /* critical for flex overflow to work on iOS */
    overscroll-behavior: contain !important;
  }

  /* Footer: fixed at bottom */
  .modal-footer {
    flex-shrink: 0 !important;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ════════════════════════════════════════
   GENERAL MOBILE STYLES (768px)
   ════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Topbar title: never clips hamburger or right items */
  .topbar-title { font-size: 0.95rem !important; }

  /* Topbar badge: truncate on narrow screens */
  .topbar-badge {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.68rem;
  }

  /* Page header: always stack */
  .page-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.65rem !important;
  }
  .page-header h1 { font-size: 1.3rem !important; }
  .page-header p  { font-size: 0.82rem; }

  /* Section header: stack */
  .section-hdr {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.6rem !important;
  }

  /* Announce banner: stack */
  .announce {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
    padding: 1rem 1.1rem !important;
  }

  /* Resource items: larger touch area */
  .resource-item { min-height: 60px; padding: 0.85rem; }

  /* Table cells */
  .table td { font-size: 0.82rem; padding: 0.6rem 0.65rem; }
  .table th { font-size: 0.68rem; }
}

/* ════════════════════════════════════════
   SMALL PHONES (480px)
   ════════════════════════════════════════ */
@media (max-width: 480px) {
  /* Content padding */
  .content { padding: 0.75rem !important; }

  /* Stat cards */
  .stat-card { padding: 0.85rem 1rem; }
  .stat-value { font-size: 1.8rem; }

  /* Panel */
  .panel { padding: 0.85rem; }

  /* Modal footer buttons: stack & easy tap */
  .modal-footer {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }
  .modal-footer > button,
  .modal-footer > a {
    flex: 1 1 auto !important;
    min-height: 48px !important;
    justify-content: center !important;
    text-align: center !important;
  }
}