/* ============================================================
   Mobile Responsive Fixes — site-wide
   Loaded last in master.blade.php so it overrides earlier CSS.
   Strictly scoped to small viewports; desktop behavior unchanged.
   ============================================================ */

/* === Phones (≤575px) === */
@media (max-width: 575.98px) {

  /* Page container — reduce horizontal padding so content uses the screen */
  #kt_app_content_container,
  .app-content,
  .container,
  .container-fluid {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  /* Cards — less padding, smaller margins */
  .card .card-body { padding: 0.85rem !important; }
  .card .card-header { padding: 0.75rem 0.85rem !important; }
  .card { margin-bottom: 0.75rem !important; }

  /* Dashboard stat tiles — stack one per row, no horizontal overflow */
  .col-xl-2, .col-lg-2 { flex: 0 0 100%; max-width: 100%; }

  /* Typography — prevent giant headings from breaking layout */
  h1 { font-size: 1.5rem !important; }
  h2 { font-size: 1.3rem !important; }
  h3 { font-size: 1.15rem !important; }
  .fs-1 { font-size: 1.5rem !important; }
  .fs-2 { font-size: 1.3rem !important; }
  .fs-3 { font-size: 1.15rem !important; }

  /* Breadcrumbs — wrap when long */
  .breadcrumb { flex-wrap: wrap; gap: 0.25rem; font-size: 0.85rem; }

  /* === Modals === */
  .modal-dialog {
    max-width: calc(100% - 1rem) !important;
    margin: 0.5rem auto !important;
  }
  .modal-header {
    padding: 0.85rem !important;
    flex-direction: column;
    align-items: flex-start !important;
    gap: 0.25rem;
  }
  .modal-header .modal-title { font-size: 1.05rem !important; }
  .modal-body { padding: 0.85rem !important; }
  /* Modal inline label rows wrap on mobile */
  .modal-body .d-flex.flex-stack,
  .modal-body .d-flex.align-items-center {
    flex-wrap: wrap;
    gap: 0.35rem 0.6rem;
  }
  .modal-footer {
    padding: 0.75rem !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.5rem;
  }
  .modal-footer .btn { width: 100%; margin: 0 !important; }

  /* === Tables (preserve horizontal scroll where wrapper exists) === */
  .table-responsive { -webkit-overflow-scrolling: touch; }
  .table td, .table th {
    padding: 0.55rem 0.4rem !important;
    font-size: 0.85rem !important;
  }
  /* Most data tables ARE responsive — but action button columns often crowd */
  .table .btn { padding: 0.3rem 0.55rem; font-size: 0.8rem; }

  /* === Forms === */
  .form-control, .form-select { font-size: 0.95rem; }
  .row.g-5 > [class^="col-"] { margin-bottom: 0.5rem; }
  /* Form action button rows — stack and full width */
  .form-actions, .d-flex.justify-content-end {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .form-actions .btn { flex: 1 1 100%; }

  /* === Buttons === */
  .btn-lg { padding: 0.55rem 1rem; font-size: 0.95rem; }

  /* === Property / Guard / Shift card pages with image + info side-by-side === */
  .property-create-card .col-lg-4 + .col-lg-8,
  .property-create-card .col-md-6 + .col-md-6 {
    margin-top: 0.5rem;
  }

  /* Calendar (assign-guards page) — shrink event chips so they don't overflow */
  .fc-event-title-container { font-size: 0.7rem !important; padding: 4px !important; }
  .fc .fc-daygrid-day-number { font-size: 14px !important; padding: 4px !important; }

  /* Header / Navbar — give clock + bell room */
  .app-navbar { gap: 0.25rem; }

  /* "Welcome!" header padding — was huge */
  .welcome-header, .dashboard-header { padding: 0.5rem 0 !important; }

  /* Anywhere flexbox items are forced inline-wide, allow wrap */
  .d-flex.flex-stack { flex-wrap: wrap !important; gap: 0.5rem; }

  /* Shrink large rightward margins on inline labels (me-5 = 1.5rem → 0.5rem)
     This fixes timesheet/details panels where label rows overflow.
     Only applies to fs-3+ labeled blocks to avoid breaking icon spacing. */
  .text-dark.fw-bold.fs-3.me-5,
  .text-dark.fw-bold.fs-4.me-5,
  .text-dark.fw-bold.fs-5.me-5,
  .text-dark.fw-bold.me-5 {
    margin-right: 0.5rem !important;
    margin-bottom: 0.35rem;
    flex: 1 1 100%;
  }

  /* Header action button rows (Add new / Filter / Export buttons on list pages)
     wrap to a clean column instead of overflowing right edge */
  .d-flex.justify-content-end {
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 0.5rem;
  }

  /* Swiper-based tab strips elsewhere on site — neutralize transforms so
     all tabs are visible and wrap (no more "pushed off-screen" issue) */
  .swiper-wrapper {
    transform: none !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .swiper-slide.tab-link,
  .swiper-slide {
    flex: 1 1 calc(50% - 6px) !important;
    width: auto !important;
    margin: 0 !important;
  }

  /* Nav tabs (Activity Log etc) — wrap horizontally on mobile,
     vertical stack on desktop is preserved */
  .nav-tabs.flex-md-column,
  .nav-pills.flex-md-column {
    flex-wrap: wrap;
    gap: 0.35rem;
  }
  .nav-tabs .nav-link,
  .nav-pills .nav-link {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.85rem;
  }

  /* Search / filter rows on list pages */
  .property-search,
  .filter-bar {
    width: 100%;
    margin-right: 0 !important;
    margin-bottom: 0.5rem;
  }

  /* Sidebar (when it's open as drawer on mobile) — ensure it doesn't exceed viewport */
  #kt_app_sidebar.drawer.drawer-on {
    width: min(85vw, 280px) !important;
  }

  /* Prevent any rogue inline-styled wide elements from blowing out layout */
  img { max-width: 100%; height: auto; }

  /* === Property-details stat tiles (.info-card)
     The numbers were bleeding outside the box on mobile.
     Force a clean flex layout with the number contained inside. === */
  .info-card.card {
    overflow: hidden;
  }
  .info-card .card-body {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.75rem !important;
    min-height: 0;
  }
  .info-card .card-body > div:first-child {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }
  .info-card .card-body > div:first-child svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
  }
  .info-card .card-body label {
    font-size: 0.78rem;
    line-height: 1.1;
    font-weight: 600;
    color: #244a8d;
    margin: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .info-card .card-body > div:last-child {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  .info-card .count {
    font-size: 1.5rem !important;
    line-height: 1;
    margin: 0;
    color: #244a8d;
    font-weight: 700;
  }

  /* === Dashboard stat tiles (Total Properties / Total Shifts / etc.) ===
     These use a different structure (symbol on top, count + label stacked
     below in a flex-column card-body) but can still overflow when the count
     gets large (fs-2x = 3rem) inside a half-width column. Shrink the count
     and symbol on mobile. */
  .card .card-body .symbol-70px,
  .card .card-body .symbol.symbol-70px {
    width: 48px !important;
    height: 48px !important;
  }
  .card .card-body .symbol-70px svg,
  .card .card-body .symbol.symbol-70px svg {
    width: 22px !important;
    height: 22px !important;
  }
  .card .card-body .fs-2x {
    font-size: 1.6rem !important;
    line-height: 1.1 !important;
  }
  .card .card-body .fs-6 {
    font-size: 0.85rem !important;
  }

  /* === Generic safety net: any large number/count in any card.
     Apply min-width: 0 to all flex children so text wraps instead of
     forcing parent to grow. This is the single most impactful rule. === */
  .card .card-body .d-flex > *,
  .card .card-body .row > [class^="col-"] {
    min-width: 0;
  }
  /* Numbers that look like single-digit counts shouldn't break out */
  .card .card-body h1,
  .card .card-body h2,
  .card .card-body h3 {
    overflow-wrap: anywhere;
  }
  .card .card-body span,
  .card .card-body label,
  .card .card-body p {
    overflow-wrap: anywhere;
  }

  /* === Sitewide containment: nothing inside a card should ever cause
     horizontal scroll on the parent. === */
  .card { overflow: hidden; }
  .card > * { max-width: 100%; }

  /* === Dashboard stat tiles: 2 per row on phones (was 1/row default
     because col-sm-6 only applies ≥576px). Force half-width here. === */
  .col-sm-6.col-xl-2,
  .row.gx-5.gx-xl-3 > .col-sm-6 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    padding-left: 0.35rem !important;
    padding-right: 0.35rem !important;
  }

  /* === Recent Created Members / Recent Created Staff rows ===
     Markup is col-2 (avatar) / col-8 (text) / col-2 (toggle). On phones
     col-2 = ~60px which is too narrow for a 50px avatar + 16px me-3
     margin, so the avatar overflowed into the text column and clipped
     the first character of position/email. Switch to a flex layout. */
  .card-body .row > .col-2:has(.symbol.symbol-50px),
  .card-body .row > .col-2:has(img.image_table) {
    flex: 0 0 60px;
    max-width: 60px;
    padding-right: 0;
  }
  .card-body .row > .col-8 {
    flex: 1 1 auto;
    max-width: calc(100% - 120px);
    padding-left: 0.5rem;
  }
  .card-body .row > .col-2:last-child {
    flex: 0 0 50px;
    max-width: 50px;
    padding-left: 0;
  }
  .symbol.symbol-50px {
    width: 44px !important;
    height: 44px !important;
  }
  .symbol.symbol-50px img.image_table {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
  }
}

/* === Tablets / small laptops (576px–991px) === */
@media (min-width: 576px) and (max-width: 991.98px) {

  /* Modals — still need wrap for inline label rows */
  .modal-body .d-flex.flex-stack {
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
  }

  /* Dashboard tiles — 2 per row instead of 6 */
  .col-xl-2 { flex: 0 0 50%; max-width: 50%; }

  /* Reduce excessive card padding */
  .card .card-body { padding: 1.25rem !important; }

  /* Inline form rows — wrap */
  .d-flex.flex-stack { flex-wrap: wrap !important; gap: 0.5rem 0.75rem; }
}

/* === Touch hint: bigger tap targets sitewide (no harm on desktop) === */
@media (pointer: coarse) {
  .btn, .form-check-input, .dropdown-item {
    min-height: 38px;
  }
  .table .btn-icon { min-width: 32px; }
}