/**
 * Mobile Responsiveness Utilities
 * Task #32: Verify Mobile Responsiveness Across All Dashboards
 *
 * Breakpoint Strategy:
 * - xs: 280px (Galaxy Fold)
 * - sm: 375px (iPhone SE)
 * - md: 768px (Tablet) - existing breakpoint
 *
 * Key Features:
 * - Touch target enforcement (44px minimum)
 * - Table-to-card responsive layout
 * - Small viewport typography scaling
 * - No horizontal scroll enforcement
 */

/* ==============================================
   TOUCH TARGETS (44px minimum per WCAG 2.1)
   ============================================== */

.touch-target {
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Ensure buttons and links have adequate touch targets on mobile */
@media (max-width: 768px) {
  .btn,
  button,
  [role="button"],
  a.inline-flex {
    min-height: 44px;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
  }

  /* Table action buttons */
  table .btn,
  table button,
  table a.inline-flex {
    min-height: 44px;
    min-width: 44px;
    padding: 0.5rem;
  }

  /* Form inputs */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="date"],
  select,
  textarea {
    min-height: 44px;
    font-size: 16px; /* Prevents iOS zoom on focus */
  }

  /* Checkbox and radio labels */
  label:has(input[type="checkbox"]),
  label:has(input[type="radio"]) {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
}

/* ==============================================
   RESPONSIVE TABLE TO CARD LAYOUT
   ============================================== */

@media (max-width: 768px) {
  .responsive-table {
    display: block;
    width: 100%;
  }

  .responsive-table thead {
    display: none;
  }

  .responsive-table tbody {
    display: block;
  }

  .responsive-table tbody tr {
    display: block;
    margin-bottom: 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 1rem;
    background: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  }

  .responsive-table tbody tr:hover {
    background: #f9fafb;
  }

  .responsive-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid #f3f4f6;
    text-align: right;
  }

  .responsive-table td:last-child {
    border-bottom: none;
    padding-top: 1rem;
    justify-content: flex-end;
    gap: 0.5rem;
  }

  .responsive-table td::before {
    content: attr(data-label);
    font-weight: 600;
    color: #6b7280;
    text-align: left;
    flex-shrink: 0;
    margin-right: 1rem;
  }

  /* Hide the bulk select column on mobile */
  .responsive-table [data-bulk-column] {
    display: none;
  }
}

/* ==============================================
   DASHBOARD GRID RESPONSIVE ADJUSTMENTS
   ============================================== */

/* iPhone SE (375px) */
@media (max-width: 375px) {
  .dashboard-grid {
    gap: 0.75rem !important;
  }

  .dashboard-panel {
    padding: 0.75rem !important;
  }

  .kpi-value {
    font-size: 1.25rem !important;
  }

  .kpi-label {
    font-size: 0.75rem !important;
  }

  /* Reduce card padding */
  .bg-white.rounded-lg.shadow-md {
    padding: 0.75rem;
  }

  /* Filter controls stacking */
  .filter-controls {
    gap: 0.5rem !important;
  }

  .filter-controls > * {
    width: 100% !important;
    margin-bottom: 0.5rem;
  }
}

/* Galaxy Fold (280px) */
@media (max-width: 320px) {
  .dashboard-header h1,
  .dashboard-header h2 {
    font-size: 1.125rem !important;
  }

  .kpi-value {
    font-size: 1rem !important;
  }

  .text-2xl {
    font-size: 1.25rem !important;
  }

  .text-4xl {
    font-size: 1.5rem !important;
  }

  /* Very tight spacing */
  .container {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }

  .px-4 {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }

  .px-6 {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  /* Reduce table card padding */
  .responsive-table tbody tr {
    padding: 0.75rem;
  }
}

/* ==============================================
   CHART CONTAINER RESPONSIVE HEIGHTS
   ============================================== */

@media (max-width: 768px) {
  .chart-container {
    min-height: 250px;
  }

  /* Fixed height chart containers */
  .h-80 {
    height: 280px !important;
  }

  [style*="height: 400px"] {
    height: 300px !important;
  }
}

@media (max-width: 375px) {
  .chart-container {
    min-height: 200px;
  }

  .h-80 {
    height: 240px !important;
  }

  [style*="height: 400px"],
  [style*="height: 300px"] {
    height: 250px !important;
  }
}

@media (max-width: 320px) {
  .chart-container {
    min-height: 180px;
  }

  .h-80 {
    height: 200px !important;
  }

  [style*="height: 400px"],
  [style*="height: 300px"],
  [style*="height: 250px"] {
    height: 200px !important;
  }
}

/* ==============================================
   HORIZONTAL SCROLL PREVENTION
   ============================================== */

body {
  overflow-x: hidden;
}

@media (max-width: 768px) {
  /* Prevent overflow on main containers */
  .container,
  .container-fluid,
  main,
  [role="main"] {
    max-width: 100vw;
    overflow-x: hidden;
  }

  /* Tables that overflow should scroll within container */
  .overflow-x-auto {
    -webkit-overflow-scrolling: touch;
  }

  /* Limit wide elements */
  table:not(.responsive-table),
  pre,
  code {
    max-width: 100%;
    overflow-x: auto;
  }
}

/* ==============================================
   FILTER BAR MOBILE LAYOUT
   ============================================== */

@media (max-width: 768px) {
  .filter-bar,
  .filter-controls,
  [class*="filter"] {
    flex-direction: column;
  }

  .filter-bar > *,
  .filter-controls > * {
    width: 100%;
  }

  /* Button groups stack */
  .inline-flex.rounded-md.shadow-sm[role="group"] {
    flex-direction: column;
    width: 100%;
  }

  .inline-flex.rounded-md.shadow-sm[role="group"] > * {
    border-radius: 0;
    width: 100%;
  }

  .inline-flex.rounded-md.shadow-sm[role="group"] > *:first-child {
    border-radius: 0.375rem 0.375rem 0 0;
  }

  .inline-flex.rounded-md.shadow-sm[role="group"] > *:last-child {
    border-radius: 0 0 0.375rem 0.375rem;
  }
}

@media (max-width: 375px) {
  /* More aggressive stacking */
  .flex.justify-between {
    flex-direction: column;
    gap: 0.5rem;
  }

  .flex.gap-2 {
    flex-direction: column;
    gap: 0.5rem;
  }

  /* Stack action buttons */
  .flex.gap-2 > .btn,
  .flex.gap-2 > button {
    width: 100%;
  }
}

/* ==============================================
   MODAL AND TOOLTIP ADJUSTMENTS
   ============================================== */

@media (max-width: 768px) {
  /* Modals take full width */
  .modal-content,
  [role="dialog"] {
    max-width: 100vw;
    width: calc(100vw - 2rem);
    margin: 1rem;
  }

  /* Tooltips constrained */
  .tooltip,
  [role="tooltip"] {
    max-width: calc(100vw - 2rem);
    white-space: normal;
    word-wrap: break-word;
  }
}

@media (max-width: 320px) {
  .tooltip,
  [role="tooltip"] {
    max-width: 200px;
    font-size: 0.75rem;
  }
}

/* ==============================================
   TYPOGRAPHY SCALING FOR SMALL SCREENS
   ============================================== */

@media (max-width: 375px) {
  /* Headings */
  h1, .text-3xl { font-size: 1.5rem !important; }
  h2, .text-2xl { font-size: 1.25rem !important; }
  h3, .text-xl { font-size: 1.125rem !important; }
  h4, .text-lg { font-size: 1rem !important; }

  /* Body text */
  body {
    font-size: 0.875rem;
  }

  /* Small text */
  .text-sm { font-size: 0.75rem !important; }
  .text-xs { font-size: 0.625rem !important; }
}

@media (max-width: 320px) {
  h1, .text-3xl { font-size: 1.25rem !important; }
  h2, .text-2xl { font-size: 1.125rem !important; }
  h3, .text-xl { font-size: 1rem !important; }

  body {
    font-size: 0.8125rem;
  }
}

/* ==============================================
   COMPLETENESS MATRIX MOBILE ADJUSTMENTS
   ============================================== */

@media (max-width: 768px) {
  .cm-grid-wrapper,
  .completeness-matrix-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .cm-filters {
    flex-direction: column;
    gap: 0.5rem;
  }

  .cm-filter-group {
    width: 100%;
  }

  .cm-cell {
    min-width: 50px;
    padding: 0.375rem;
    font-size: 0.75rem;
  }

  .cm-site-name {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (max-width: 375px) {
  .cm-cell {
    min-width: 40px;
    padding: 0.25rem;
    font-size: 0.625rem;
  }

  .cm-site-name {
    max-width: 80px;
    font-size: 0.75rem;
  }

  .cm-tooltip {
    max-width: 200px;
    font-size: 0.75rem;
  }
}

@media (max-width: 320px) {
  .cm-cell {
    min-width: 35px;
  }

  .cm-site-name {
    max-width: 60px;
    font-size: 0.625rem;
  }
}

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

/* Hide on mobile */
@media (max-width: 768px) {
  .hide-mobile {
    display: none !important;
  }
}

/* Show only on mobile */
.show-mobile {
  display: none !important;
}

@media (max-width: 768px) {
  .show-mobile {
    display: block !important;
  }
}

/* Stack on mobile */
@media (max-width: 768px) {
  .stack-mobile {
    flex-direction: column !important;
  }

  .stack-mobile > * {
    width: 100% !important;
  }
}

/* Full width on mobile */
@media (max-width: 768px) {
  .full-width-mobile {
    width: 100% !important;
    max-width: 100% !important;
  }
}