/**
 * BCSS Mobile Overrides
 *
 * RES-G-005 P1: Shared mobile-specific CSS overrides for all BCSS applications.
 * This file provides mobile-first responsive utilities and touch-friendly enhancements.
 *
 * Usage: Import this file after your main application CSS for mobile-specific fixes.
 *
 * PERF-40-04: Merged rules from baxtercobb-app, nycwm-app, and practisphere-app
 * app-specific copies into this canonical shared file. App copies deleted.
 */

/* ============================================================================
 * TABLET BREAKPOINT: <= 1280px
 * ============================================================================ */

/* RES-TAB01: Prevent horizontal overflow at tablet/small desktop (1024-1280px) */
@media (width <= 1280px) {
  .main-content,
  .container-fluid,
  .container {
    max-width: 100%;
  }
}

/* ============================================================================
 * MOBILE-FIRST BREAKPOINT: < 768px
 * ============================================================================ */

/* RES-H-028 P2: Image max-width enforcement extended to tablet breakpoint */
@media (width <= 991.98px) {
  img {
    height: auto;
    max-width: 100%;
  }
}

@media (width <= 767.98px) {
  /* RES-B-009: Scoped touch target sizing (WCAG 2.5.5) - bare `a` replaced with specific selectors */
  button,
  .nav-link,
  .btn,
  .sidebar-nav-item,
  .dropdown-item,
  .page-link,
  .list-group-item[role="button"],
  .breadcrumb-item a,
  [role="tab"],
  [role="button"],
  input[type="button"],
  input[type="submit"] {
    min-height: 44px; /* iOS touch target guideline + WCAG 2.5.5 */
    min-width: 44px;
  }

  /* ===== Form Input Sizing (Prevent iOS Zoom) ===== */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="url"],
  select,
  textarea {
    font-size: 16px; /* Prevents zoom on iOS */
    min-height: 44px;
  }

  /* ===== Text Wrapping ===== */
  .main-content,
  .content-wrapper,
  .card,
  .card-body {
    overflow-wrap: break-word;
    word-wrap: break-word;
  }

  /* ===== Image Responsiveness ===== */
  img {
    height: auto;
    max-width: 100%;
  }

  /* ===== Button Groups Stack on Mobile ===== */
  /* RES-B-023: Scoped to page-actions/form-actions to avoid breaking inline btn-groups */
  .page-actions .btn-group,
  .form-actions .btn-group {
    flex-direction: column;
    width: 100%;
  }

  .page-actions .btn-group > .btn,
  .page-actions .btn-group > button,
  .form-actions .btn-group > .btn,
  .form-actions .btn-group > button {
    width: 100%;
  }

  /* ===== Spacing Improvements ===== */
  .form-group,
  .mb-3 {
    margin-bottom: 1rem; /* Increased spacing for mobile readability */
  }

  /* ===== Table Horizontal Scroll ===== */
  /* RES-B-024: Scoped white-space: nowrap to header cells only to allow body text wrapping */
  .table-responsive {
    display: block;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    overflow-x: auto;
  }

  .table-responsive th {
    white-space: nowrap;
  }

  /* ===== Table Cell Improvements ===== */
  .table-responsive {
    font-size: 0.875rem;
  }

  .table td,
  .table th {
    padding: 0.5rem;
  }

  .table .btn-group {
    flex-direction: column;
    gap: 0.25rem;
  }

  .table .btn-group > .btn {
    width: 100%;
  }
}

/* ============================================================================
 * SMALL MOBILE: < 576px
 * ============================================================================ */

@media (width <= 575.98px) {
  /* ===== FullCalendar Mobile Optimizations ===== */
  /* RES-022: Calendar mobile optimizations - extended to 575.98px */
  #calendar {
    font-size: 0.875rem; /* RES-022: Minimum 14px for readability */
  }

  .fc .fc-toolbar-title {
    /* stylelint-disable-next-line declaration-no-important -- Mobile responsive FullCalendar override */
    font-size: 1rem !important;
  }

  .fc .fc-col-header-cell {
    padding: 0.25rem;
  }

  .fc .fc-daygrid-day-number {
    font-size: 0.875rem; /* RES-022: Minimum 14px for readability */
  }

  /* ===== Card Stacking ===== */
  .card {
    margin-bottom: 1rem;
  }

  .card-body {
    padding: 1rem;
  }

  /* RES-B-010/RES-L03/RES-L04: Scoped flex-wrap to header/page-header to avoid breaking other flex layouts */
  .nycwm-header .d-flex.align-items-center,
  .page-header .d-flex.align-items-center {
    flex-wrap: wrap;
  }

  /* ===== Modal Sizing ===== */
  .modal-dialog {
    margin: 0.5rem;
  }

  .modal-content {
    margin-bottom: 0;
  }

  /* ===== Button Sizing ===== */
  .btn {
    font-size: 0.95rem;
    padding: 0.5rem 1rem;
  }

  .btn-sm {
    font-size: 0.85rem;
    padding: 0.35rem 0.75rem;
  }

  .btn-lg {
    font-size: 1.05rem;
    padding: 0.75rem 1.5rem;
  }

  /* ===== Form Controls ===== */
  .form-label {
    font-weight: 500;
    margin-bottom: 0.5rem;
  }

  .form-control,
  .form-select {
    font-size: 16px; /* Prevent zoom on iOS when input is focused */
  }

  .form-check {
    margin-bottom: 0.75rem;
  }
}

/* ============================================================================
 * EXTRA SMALL MOBILE: < 391px (iPhone SE/standard, etc.)
 * ============================================================================ */

@media (width <= 390px) {
  .container-fluid {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .container {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .card {
    margin-left: 0;
    margin-right: 0;
  }

  /* RES-L-001: .row and [class*="col-"] gutter overrides removed.
   * These conflicted with Bootstrap 5 gutters. Container padding above
   * is sufficient for tight layouts on very small screens. */
}

/* ============================================================================
 * EXTRA SMALL MOBILE: < 376px (iPhone SE legacy, etc.)
 * ============================================================================ */

@media (width <= 375.98px) {
  /* RES-G-004 P1: Prevent org dropdown overflow at 375px */
  .org-dropdown-menu,
  .dropdown-menu {
    max-width: 90vw;
    min-width: 280px;
  }

  /* RES-D-018: Removed .main-content padding rule; sidebar.css is the sole authority.
   * Only .content-wrapper retains mobile padding for non-sidebar layouts. */
  .content-wrapper {
    padding: 0.75rem;
  }

  /* RES-I-016: Removed redundant h1/h2 font-size rules.
   * base.css handles responsive heading sizes with clamp() which
   * gracefully scales down on small viewports. */

  /* RES-375: Prevent horizontal overflow on iPhone SE (375px) */
  /* RES-34h-05: .app-wrapper overflow-x: hidden removed — already set unconditionally in layout-base.css */
  .main-content {
    max-width: 100%;
    overflow-x: hidden;
  }

  .table-responsive {
    max-width: 100%;
  }

  .card {
    max-width: 100%;
    overflow: hidden;
  }

  .d-flex.justify-content-between {
    flex-wrap: wrap;
  }
}

/* ============================================================================
 * RESPONSIVE TYPOGRAPHY
 * ============================================================================ */

@media (width <= 767.98px) {
  body {
    line-height: 1.6; /* Improved mobile readability */
  }

  /* Prevent button text overflow */
  .btn {
    max-width: 100%;
    word-break: break-word;
  }

  .btn-lg {
    font-size: 1rem; /* Reduce large button font size on mobile */
    padding: 0.5rem 1rem; /* Reduce padding */
  }

  /* RES-37b-03: Metric cards stack text vertically on narrow screens */
  .metric-card {
    padding: 0.75rem;
  }

  .metric-card .metric-label {
    font-size: 0.75rem;
  }

  .metric-card .metric-value {
    font-size: 1.25rem;
  }
}

/* ============================================================================
 * TOUCH DEVICE HOVER
 * ============================================================================ */

/* Improve link hover on touch devices */
@media (hover: none) {
  a:hover {
    text-decoration: underline;
  }

  .btn:hover {
    opacity: 0.9;
  }
}