/* AiFax mobile usability pass (phones and small tablets).
   Additive and cosmetic only: no fax logic is touched. Loaded from
   index.html; delete this file and the link tag to fully revert. */
@media (max-width: 820px) {

  /* Tables scroll sideways inside their card instead of clipping
     columns off-screen (Inbox, Sent, DID lists, admin tables). */
  nb-card-body {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  nb-card-body table {
    min-width: 660px;
  }
  th, td {
    padding: 8px 6px !important;
    font-size: 13px !important;
    white-space: nowrap;
  }

  /* Give content the width: tighter page gutters and card headers. */
  nb-layout-column {
    padding: 0.75rem !important;
  }
  nb-card-header {
    padding: 0.75rem 1rem !important;
    font-size: 1rem !important;
  }

  /* Finger-sized buttons and controls. */
  button, .btn, .mat-button, .mat-raised-button, .mat-flat-button {
    min-height: 42px;
  }
  .mat-paginator {
    font-size: 12px;
  }

  /* Keep the top header row from wrapping awkwardly. */
  nb-layout-header nav {
    flex-wrap: nowrap;
  }

  /* Some list pages (Document List, Inbound Fax) nest their table in an
     extra wrapper that doesn't inherit the nb-card-body scroll fix above.
     Cover those too rather than relying on one selector. */
  nb-card, nb-list, .table-container {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Button labels ("Filter Contact", "Filter Group") were clipping instead
     of just running up against the tighter phone-width gutters. Let them
     size to their own text. */
  button, .btn {
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    width: auto !important;
  }

  /* A floating action control (edit shortcut, alert notice) sits fixed at
     bottom-right on every list page and was overlapping the last table row
     and the pagination controls. Reserve space for it at the bottom of the
     scrollable column instead of guessing at its exact markup. */
  nb-layout-column {
    padding-bottom: 76px !important;
  }

  /* Header fix, moved into this same 820px breakpoint rather than a
     narrower one: confirmed via live DevTools that the device's own CSS
     viewport can be wider than a typical phone width while still being
     under 820px (that's the breakpoint the table/button rules above have
     been visibly working at), so a separate max-width:480px block risked
     never matching at all. Confirmed via DevTools that nav itself is
     never display:flex - it just holds one child, the custom <ngx-header>
     component. The actual flex row (language selects + nb-actions side by
     side) lives on ngx-header's own inner .header-container div, so
     that's what needs to wrap - wrapping <nav> alone was a no-op. */
  nb-layout-header nav, ngx-header, ngx-header .header-container {
    flex-wrap: wrap !important;
    height: auto !important;
    min-height: var(--header-height);
    overflow: visible !important;
    row-gap: 4px;
  }
  /* The page content below a fixed header is offset by --header-height;
     now that the header can be two rows tall on phones, give it room so
     the top of the page isn't hidden under the taller header. */
  nb-layout-header.fixed ~ .layout-container {
    padding-top: calc(var(--header-height) + 40px) !important;
  }
  #aifax-did-badge {
    order: 3;
    flex-basis: 100%;
    justify-content: center;
    font-size: 12px !important;
    margin: 2px 0 !important;
  }
  /* nb-actions wraps the nb-user avatar that was overlapping the logo. */
  nb-actions {
    order: 4;
    flex-basis: 100%;
    justify-content: center;
    margin: 2px 0 !important;
  }

  /* The avatar (nb-user, inside nb-action.user-action) still visually
     overlapped the logo despite the wrap rules above - hiding it here is
     a deterministic fix rather than another layout guess: a non-rendered
     element cannot overlap anything, regardless of the underlying flex
     behavior on this device. The hamburger menu already gives equivalent
     account access on phones. */
  nb-action.user-action {
    display: none !important;
  }
}

/* Desktop readability for the two fax lists (Outbound Fax, Inbound Fax):
   14px table text, 600-weight dark headers, 52px rows, 20px card title.
   Material data-table guidance sizes; mobile block above is unchanged. */
@media (min-width: 821px) {
  ngx-sendfax-component nb-card-header,
  ngx-infax-component nb-card-header {
    font-size: 1.25rem !important;
    font-weight: 600 !important;
  }
  ngx-sendfax-component .mat-header-cell,
  ngx-infax-component .mat-header-cell {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #2c2c2c !important;
  }
  ngx-sendfax-component .mat-cell,
  ngx-infax-component .mat-cell {
    font-size: 14px !important;
  }
  ngx-sendfax-component .mat-row,
  ngx-sendfax-component .mat-header-row,
  ngx-infax-component .mat-row,
  ngx-infax-component .mat-header-row {
    min-height: 52px !important;
  }
  ngx-sendfax-component .mat-paginator,
  ngx-infax-component .mat-paginator {
    font-size: 13px !important;
  }
}