/* ============================================================
   Insight Dial - Mobile layout (phones and small tablets)
   Loaded after main.css. Nothing here changes the desktop view.
   ============================================================ */

/* ---- safety net: nothing may push the page wider than the screen ---- */
html { -webkit-text-size-adjust: 100%; }
.main-content { min-width: 0; }
.page-content img, .page-content canvas, .page-content video, .page-content iframe { max-width: 100%; }
.page-content pre, .page-content code { overflow-wrap: anywhere; }
.page-content pre { overflow: auto; max-width: 100%; }

/* bottom tab bar is hidden on desktop */
.mobile-tabbar { display: none; }

@media (max-width: 991.98px) {
  .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
  body.nav-open { overflow: hidden; }
  .sidebar { width: min(86vw, 300px); overscroll-behavior: contain; }
  .sidebar-overlay { z-index: 1039; }
  .sidebar { z-index: 1040; }

  /* topbar: logo + the few controls that matter */
  .topbar { gap: .5rem; }
  .topbar-right { min-width: 0; flex-shrink: 1; }
  .topbar-right form select { max-width: 120px; }

  /* bottom tab bar */
  .mobile-tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
    background: var(--bs-body-bg, #fff); border-top: 1px solid rgba(0,0,0,.1);
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -2px 12px rgba(0,0,0,.06);
  }
  .mobile-tabbar a, .mobile-tabbar button {
    flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; padding: .45rem .15rem; min-height: 56px; border: 0; background: none; color: #6b7280;
    font-size: .68rem; line-height: 1.1; text-decoration: none; text-align: center;
  }
  .mobile-tabbar i { font-size: 1.25rem; line-height: 1; }
  .mobile-tabbar a.active, .mobile-tabbar button.active { color: var(--id-primary, #e83e58); font-weight: 600; }
  .mobile-tabbar span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .page-content { padding-bottom: calc(5rem + env(safe-area-inset-bottom)); }
}

@media (max-width: 767.98px) {
  /* page headers: title on top, buttons under it, full width */
  .page-header.d-flex { flex-direction: column; align-items: stretch !important; gap: .75rem; }
  .page-header h1 { font-size: 1.4rem; }
  .page-header .d-flex.gap-2 { flex-wrap: wrap; }
  .page-header .d-flex.gap-2 > .btn { flex: 1 1 auto; }

  /* rows of buttons / filters wrap instead of running off-screen */
  .d-flex.gap-1:has(> .btn), .d-flex.gap-2:has(> .btn), .d-flex.gap-3:has(> .btn), .btn-toolbar { flex-wrap: wrap; }
  .stat-info { min-width: 0; }
  .stat-label { white-space: normal; overflow-wrap: anywhere; }
  .badge { white-space: normal; }
  .offcanvas { max-width: 100vw; }

  /* cards and spacing */
  .card-header, .card-body, .card-footer { padding-left: 1rem; padding-right: 1rem; }
  .card-header.d-flex { flex-wrap: wrap; gap: .5rem; }
  .card-footer.d-flex { flex-wrap: wrap; }
  .card-footer .btn { flex: 1 1 auto; }

  /* stat tiles: two across */
  .stat-card { padding: .85rem; }
  .stat-card .stat-value { font-size: 1.25rem; }

  /* forms: 16px text stops iOS zooming in, bigger tap targets */
  .form-control, .form-select, .input-group-text { font-size: 16px; min-height: 44px; }
  .form-control-sm, .form-select-sm { font-size: 16px; min-height: 40px; }
  textarea.form-control { min-height: 88px; }
  .btn { min-height: 40px; }
  .btn-sm { min-height: 36px; padding-left: .75rem; padding-right: .75rem; }
  .form-check-input { width: 1.25em; height: 1.25em; }
  .form-check-label { padding-top: .1rem; }
  .input-group { flex-wrap: nowrap; }
  form.d-flex.flex-wrap > *, .card-body form.d-flex.gap-3 > * { flex: 1 1 100%; }
  form.d-flex.flex-wrap > .btn, .card-body form.d-flex.gap-3 > .btn { flex: 1 1 100%; }

  /* nav pills / tabs scroll sideways instead of wrapping into a tall stack */
  .nav-pills, .nav-tabs { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .nav-pills::-webkit-scrollbar, .nav-tabs::-webkit-scrollbar { display: none; }
  .nav-pills .nav-link, .nav-tabs .nav-link { flex: 0 0 auto; }

  /* modals fill the screen like a phone sheet */
  .modal-dialog { margin: 0; max-width: 100%; min-height: 100%; }
  .modal-dialog:not(.modal-dialog-centered) { align-items: flex-end; display: flex; }
  .modal-content { border-radius: 1rem 1rem 0 0; max-height: 94vh; width: 100%; }
  .modal-body { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .modal-footer { flex-wrap: wrap; }
  .modal-footer .btn { flex: 1 1 auto; }

  /* dropdown menus never run off-screen */
  .dropdown-menu { max-width: calc(100vw - 1.5rem); }

  /* toasts sit above the tab bar */
  #toast-container { bottom: calc(60px + env(safe-area-inset-bottom)) !important; right: 0 !important; left: 0; }
}

@media (max-width: 575.98px) {
  .page-content { padding: 1rem .75rem calc(5rem + env(safe-area-inset-bottom)); }
  .auth-card { padding: 1.5rem 1rem; border-radius: .75rem; }
  .auth-wrapper { padding: .75rem; align-items: flex-start; }

  /* TABLES: each row becomes a small card (label on the left, value on the right) */
  table.stack-sm, table.stack-sm tbody, table.stack-sm tr, table.stack-sm td { display: block; width: 100%; }
  table.stack-sm thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.stack-sm tr { border: 1px solid rgba(0,0,0,.09); border-radius: .6rem; margin-bottom: .75rem; padding: .35rem .75rem; background: var(--bs-body-bg, #fff); }
  table.stack-sm td { display: flex; justify-content: space-between; align-items: center; gap: 1rem; text-align: right !important; border: 0 !important; border-bottom: 1px dashed rgba(0,0,0,.08) !important; padding: .5rem 0 !important; overflow-wrap: anywhere; }
  table.stack-sm td:last-child { border-bottom: 0 !important; }
  table.stack-sm td::before { content: attr(data-label); flex: 0 0 38%; max-width: 38%; text-align: left; font-weight: 600; font-size: .75rem; color: #6b7280; text-transform: uppercase; letter-spacing: .02em; }
  table.stack-sm td:not([data-label])::before, table.stack-sm td[data-label=""]::before { display: none; }
  table.stack-sm td[data-complex] { display: block; text-align: left !important; }
  table.stack-sm td[data-complex]::before { display: block; flex: none; max-width: 100%; margin-bottom: .35rem; }
  table.stack-sm td[data-complex] form, table.stack-sm td[data-complex] .d-flex { flex-wrap: wrap; }
  table.stack-sm td[data-complex] select, table.stack-sm td[data-complex] input:not([type=checkbox]):not([type=radio]) { width: 100% !important; max-width: 100% !important; }
  table.stack-sm td[colspan] { display: block; text-align: center !important; }
  table.stack-sm td[colspan]::before { display: none; }
  table.stack-sm .btn-group, table.stack-sm .d-flex { justify-content: flex-end; flex-wrap: wrap; }
  .table-stack-wrap { overflow: visible !important; }

  /* pagination fits */
  .pagination { flex-wrap: wrap; justify-content: center; }
  .stat-grid, .dash-tiles { gap: .5rem; }
}