/**
 * 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.
 */

/* ============================================================================
 * 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;
  }
}

/* ============================================================================
 * EXTRA SMALL MOBILE: < 376px (iPhone SE, 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. */
}

/* ============================================================================
 * UTILITY CLASSES
 * ============================================================================ */

/* RES-G-006 P1: Hide on mobile utility */
.hide-mobile {
  display: none;
}

@media (width >= 768px) {
  .hide-mobile {
    display: block;
  }

  .hide-desktop {
    display: none;
  }
}

@media (width <= 767.98px) {
  .hide-desktop {
    display: block;
  }
}

/* ============================================================================
 * 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 */
  }
}