/* ============================================================
   mobile.css — Bridge Portal targeted mobile improvements
   Loaded LAST in App.razor (after site.css, BridgeGlobal.css,
   bridge-wizard.css, new_site.css) so these rules take effect
   without removing any existing CSS.

   Breakpoints mirror site.css:
     1024px  tablet
      768px  mobile
      480px  small mobile

   NEVER use this file to override desktop layout — all rules
   here are wrapped in @media queries.
   ============================================================ */


/* ============================================================
   1. TASK CARDS — collapse to single column on phones
   site.css defines .bridge-task-card as flex:0 0 calc(50% - 4px)
   with no mobile override. At 600px and below one column is better.
   ============================================================ */

@media screen and (max-width: 600px) {
  .bridge-task-card {
    flex: 0 0 100% !important;
    width: 100% !important;
  }

  .task-card-grid {
    gap: 6px !important;
  }
}


/* ============================================================
   2. DATAGRID — horizontal scroll on phones
   Radzen renders .rz-data-grid (outer) > .rz-datatable-scrollable-wrapper.
   Wrapping with overflow-x:auto lets narrow phones scroll
   the table rather than having it overflow the viewport.
   ============================================================ */

@media screen and (max-width: 768px) {
  /* Outer Radzen DataGrid container */
  .rz-data-grid,
  .rz-datatable-scrollable-wrapper {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Prevent the table itself from shrinking below its natural width */
  .rz-data-grid table,
  .rz-datatable table {
    min-width: 480px;
  }

  /* Syncfusion grids used in some pages */
  .e-grid,
  .e-gridcontent {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}


/* ============================================================
   3. SIDEBAR LOGO — remove the 100px inline margin-bottom
   MainLayout.razor has style="margin-bottom: 100px" on the
   RadzenRow that holds the logo. On mobile this burns 100px
   of sidebar real estate before the nav items start.
   ============================================================ */

@media screen and (max-width: 768px) {
  /* Target the first RadzenRow inside the sidebar's white inner div.
     The inline style specificity is 0-1-0; we beat it with the
     .rz-sidebar descendant chain (0-2-0). */
  .rz-sidebar > div > .rz-row:first-child,
  .rz-sidebar > div > div > .rz-row:first-child {
    margin-bottom: 16px !important;
  }
}


/* ============================================================
   4. iOS INPUT ZOOM FIX — all inputs, not just login
   site.css applies font-size:16px only inside .login-form-panel.
   Any input elsewhere that renders below 16px will trigger
   iOS Safari's auto-zoom on focus. This rule covers them all.
   ============================================================ */

@media screen and (max-width: 1024px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  textarea,
  select {
    font-size: 16px !important; /* prevents iOS auto-zoom on focus */
  }

  /* Radzen-specific input wrappers */
  .rz-textbox,
  .rz-textarea,
  .rz-autocomplete-input,
  .rz-datepicker input,
  .rz-timepicker input {
    font-size: 16px !important;
  }
}


/* ============================================================
   5. BODY MARGIN-TOP FIX
   site.css sets margin-top: 50px on .rz-body at ≤768px.
   RadzenLayout uses CSS grid (not absolute positioning) for
   the header, so adding margin-top pushes content down a
   second header-height, creating a blank gap.
   ============================================================ */

@media screen and (max-width: 768px) {
  .rz-body {
    margin-top: 0 !important;
  }

  /* Also ensure body height doesn't subtract that phantom 50px */
  .rz-body > .rz-row {
    min-height: 0 !important;
  }
}


/* ============================================================
   6. SIDEBAR — defer to Radzen Responsive overlay
   site.css sets .rz-sidebar { display: none !important } at ≤768px,
   which fights Radzen's own JS-driven overlay/collapse (Responsive="true").
   When RadzenSidebar is open on mobile, Radzen adds its own
   inline styles; the display:none override hides it even then.
   We restore visibility and let Radzen manage the open/close state.
   ============================================================ */

@media screen and (max-width: 768px) {
  /* When Radzen opens the sidebar overlay it adds rz-sidebar-expanded
     or controls via inline style. Ensure it is visible when open. */
  .rz-sidebar[style*="display"],
  .rz-sidebar.rz-sidebar-expanded {
    display: flex !important;
  }

  /* Ensure the sidebar itself has a proper z-index and full height
     so it overlays the body content correctly on mobile */
  .rz-sidebar {
    z-index: 100 !important;
  }
}


/* ============================================================
   7. MOBILE FAB — floating Add Customer button
   On mobile, site.css hides .rz-splitbutton entirely. Users
   with Bridge or Partner roles lose the only Add Customer
   affordance. This FAB appears only on phones and navigates
   to /add-new-customer via a plain anchor (no JS required).

   The FAB is injected via MainLayout; see the Razor change.
   If Paul wires it via Blazor instead, remove these rules and
   add them to the component's scoped CSS.
   ============================================================ */

.bridge-mobile-fab {
  display: none; /* hidden on desktop — mobile query shows it */
  position: fixed;
  bottom: 24px;
  right: 20px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #37A02D;
  color: #fff;
  border: none;
  box-shadow: 0 4px 14px rgba(55, 160, 45, 0.45);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  z-index: 500;
  font-size: 28px;
  line-height: 1;
  transition: background 0.18s, transform 0.18s, box-shadow 0.18s;
  font-family: 'Material Symbols Outlined', sans-serif;
  /* Tap highlight override for iOS */
  -webkit-tap-highlight-color: transparent;
}

.bridge-mobile-fab:hover,
.bridge-mobile-fab:focus {
  background: #2d8224;
  transform: scale(1.06);
  box-shadow: 0 6px 20px rgba(55, 160, 45, 0.55);
  outline: none;
}

.bridge-mobile-fab:active {
  transform: scale(0.96);
}

@media screen and (max-width: 768px) {
  .bridge-mobile-fab {
    display: flex !important;
  }
}


/* ============================================================
   8. HEADER — tighter padding on narrow phones
   The existing rz-header rules at ≤768px add padding:10px.
   On a 375px iPhone SE the customer dropdown + toggle + profile
   menu still feel cramped. This tightens horizontal padding only.
   ============================================================ */

@media screen and (max-width: 480px) {
  .rz-header {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  /* Give the customer dropdown its own row feel by allowing wrap */
  .rz-header .rz-row {
    flex-wrap: wrap !important;
  }
}


/* ============================================================
   9. CARDS — prevent card content from overflowing on phones
   Some page-level RadzenCard children (tables, long URLs, code)
   can cause horizontal overflow on the card itself.
   ============================================================ */

@media screen and (max-width: 768px) {
  .rz-card {
    overflow: hidden !important;
    word-break: break-word;
  }

  /* Exception: cards that intentionally scroll (data tables inside cards) */
  .rz-card:has(.rz-data-grid) {
    overflow: visible !important;
  }
}


/* ============================================================
   10. DIALOGS — full-width on phones
   Radzen dialogs default to a fixed pixel width that overflows
   on 375px screens. Force max-width + full width.
   ============================================================ */

@media screen and (max-width: 600px) {
  .rz-dialog {
    width: 95vw !important;
    max-width: 95vw !important;
    margin: 0 auto !important;
  }

  .rz-dialog-wrapper {
    padding: 8px !important;
  }
}


/* ============================================================
   11. STAT CARD GRID — 2-col on tablet, 1-col on small phones
   .bridge-overview stat cards should be 2-across on tablet and
   stack to 1-col on phones narrower than 480px.
   ============================================================ */

@media screen and (max-width: 768px) {
  .bridge-overview .rz-row {
    flex-wrap: wrap !important;
  }

  /* 2-col stat cards on mobile (they use RadzenColumn Size="3" on desktop) */
  .bridge-overview .rz-col-md-3,
  .bridge-overview .rz-col-sm-3,
  .bridge-overview [class*="rz-col-"] {
    flex: 0 0 calc(50% - 8px) !important;
    max-width: calc(50% - 8px) !important;
  }
}

@media screen and (max-width: 480px) {
  .bridge-overview .rz-col-md-3,
  .bridge-overview .rz-col-sm-3,
  .bridge-overview [class*="rz-col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}


/* ============================================================
   12. PRINT — hide FAB and mobile-only elements when printing
   ============================================================ */

@media print {
  .bridge-mobile-fab,
  .mobile-menu-toggle,
  .mobile-overlay {
    display: none !important;
  }
}