/**
 * AFV Mobile Optimization CSS
 *
 * Purpose: Mobile-first overrides for AFV auto-generated pages
 * Priority: Loaded LAST to override existing desktop-first styles
 * Risk Level: ZERO - CSS only, no HTML/PHP changes
 *
 * Coverage:
 * - Checklist/Journey Board (Priority 1)
 * - Forms (I-129F, profiles) (Priority 2)
 * - Document upload/management (Priority 3)
 * - General consistency fixes (Priority 4)
 *
 * Breakpoints:
 * - max-width: 768px - All mobile devices (tablets portrait, phones)
 * - max-width: 414px - Small phones (iPhone SE, Android compact)
 *
 * DEPLOY: Enqueue after portal-redesign.css, flow-style.css, modern-unique-design.css
 */

/* ============================================================================
   MOBILE CUSTOM PROPERTIES
   ============================================================================ */

@media (max-width: 768px) {
  :root {
    --afv-container-padding-mobile: 16px;
    --afv-card-padding-mobile: 16px;
    --afv-spacing-mobile: 12px;
    --afv-touch-target: 44px;
    --afv-button-height: 48px;
  }
}

@media (max-width: 414px) {
  :root {
    --afv-container-padding-mobile: 12px;
    --afv-card-padding-mobile: 12px;
    --afv-spacing-mobile: 8px;
  }
}

/* ============================================================================
   PRIORITY 0: GENERAL CONTAINER & LAYOUT FIXES
   ============================================================================ */

/* Prevent horizontal scroll on all AFV containers */
@media (max-width: 768px) {
  body,
  html {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* Main portal container - reduce padding */
  .afv-portal-container,
  .afvsp-container,
  .flow-shell {
    max-width: 100% !important;
    padding: var(--afv-container-padding-mobile) !important;
    margin: 0 !important;
    overflow-x: hidden !important;
  }

  /* Flow design system shell - collapse sidebar on mobile */
  .flow-shell {
    display: block !important;
    grid-template-columns: 1fr !important;
  }

  /* Sidebar hidden or full-width on mobile */
  .flow-sidebar,
  .afv-sidebar {
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
    margin-bottom: 16px;
  }

  /* Main content area - full width */
  .flow-main,
  .afv-main-content {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }

  /* All auto-fit grids collapse to single column */
  [style*="grid-template-columns"][style*="auto-fit"],
  [class*="grid"][class*="auto-fit"] {
    grid-template-columns: 1fr !important;
  }

  /* Generic grid containers */
  .afv-grid,
  .flow-grid,
  [class*="-grid"] {
    grid-template-columns: 1fr !important;
    gap: var(--afv-spacing-mobile) !important;
  }

  /* Remove excessive container max-widths that cause issues */
  .afv-content-wrapper,
  .wp-block-group__inner-container {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media (max-width: 414px) {
  /* Extra padding reduction for small phones */
  .afv-portal-container,
  .afvsp-container,
  .flow-shell {
    padding: 12px !important;
  }
}

/* ============================================================================
   PRIORITY 1: CHECKLIST / JOURNEY BOARD (CRITICAL)
   ============================================================================ */

@media (max-width: 768px) {

  /* Phase cards container - force single column */
  .afv-phases-container,
  .phases-grid,
  [class*="phase-grid"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }

  /* Phase card - remove min-width constraint, full width */
  .phase-card,
  .afv-phase-card,
  [class*="phase-card"] {
    min-width: 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: var(--afv-card-padding-mobile) !important;
    margin: 0 0 16px 0 !important;
  }

  /* Phase header - reduce padding, ensure wrapping */
  .phase-header,
  .afv-phase-header {
    padding: 12px !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* Phase title - adjust font size */
  .phase-header h3,
  .phase-title {
    font-size: 18px !important;
    line-height: 1.3 !important;
    margin: 0 !important;
  }

  /* Phase badges - wrap and stack */
  .phase-badge,
  .phase-status,
  [class*="phase-badge"] {
    font-size: 12px !important;
    padding: 4px 8px !important;
    white-space: nowrap;
    margin: 4px 0 !important;
  }

  /* Phase content area */
  .phase-content,
  .afv-phase-content {
    padding: 12px !important;
  }

  /* Progress bar - full width, no overflow */
  .afv-checklist-progress,
  .phase-progress,
  [class*="progress-bar"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    margin: 12px 0 !important;
  }

  .afv-checklist-progress-fill,
  .progress-fill {
    min-height: 8px !important;
  }

  /* Progress text/percentage */
  .progress-text,
  .progress-percentage {
    font-size: 12px !important;
    margin-top: 4px !important;
  }

  /* Checklist items within phase */
  .checklist-item,
  .afv-checklist-item,
  .phase-step {
    padding: 12px !important;
    margin: 8px 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  /* Checklist item title/description */
  .checklist-item-title,
  .step-title {
    font-size: 14px !important;
    line-height: 1.4 !important;
  }

  .checklist-item-description,
  .step-description {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  /* Action buttons in phase cards - touch target size */
  .phase-card button,
  .phase-card .button,
  .phase-card a.btn,
  .checklist-item button,
  .checklist-item .button {
    min-height: var(--afv-touch-target) !important;
    min-width: var(--afv-touch-target) !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    width: 100% !important;
    margin: 4px 0 !important;
  }

  /* Icon buttons in checklist (checkmarks, edit, delete) */
  .checklist-item .icon-button,
  .phase-card .icon-button,
  [class*="icon-btn"] {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 10px !important;
  }

  /* Multiple buttons in a row - stack vertically */
  .phase-actions,
  .checklist-actions,
  [class*="-actions"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
  }

  /* Phase expand/collapse controls */
  .phase-toggle,
  .expand-button {
    min-height: 44px !important;
    min-width: 44px !important;
  }

  /* Remove any fixed widths on phase containers */
  .phases-wrapper,
  .afv-phases-wrapper {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 414px) {
  /* Further reduce padding on small phones */
  .phase-card,
  .afv-phase-card {
    padding: 12px !important;
  }

  .phase-header {
    padding: 8px !important;
  }

  .phase-header h3,
  .phase-title {
    font-size: 16px !important;
  }

  .checklist-item,
  .afv-checklist-item {
    padding: 10px !important;
  }
}

/* ============================================================================
   PRIORITY 2: FORMS (I-129F, PROFILE, ALL AUTO-FORMS)
   ============================================================================ */

@media (max-width: 768px) {

  /* Form container - full width, reduced padding */
  .afv-form,
  .afvf-form,
  .i129f-form,
  form[class*="afv"],
  form[class*="flow"] {
    width: 100% !important;
    max-width: 100% !important;
    padding: var(--afv-card-padding-mobile) !important;
  }

  /* Form sections - single column */
  .form-section,
  .afv-form-section,
  [class*="form-section"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    margin-bottom: 24px !important;
  }

  /* Form grid layouts - force single column */
  .form-grid,
  .afv-form-grid,
  [class*="form-grid"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    grid-template-columns: 1fr !important;
  }

  /* Form rows with multiple fields - stack */
  .form-row,
  .afv-form-row,
  [class*="form-row"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    width: 100% !important;
  }

  /* Form field wrapper */
  .form-field,
  .afv-form-field,
  .field-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 16px !important;
  }

  /* Labels - always visible, above input */
  .form-field label,
  .afv-form-field label,
  label[class*="afv"],
  label[class*="form"] {
    display: block !important;
    width: 100% !important;
    margin-bottom: 6px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
  }

  /* Input fields - comfortable touch size */
  .form-field input[type="text"],
  .form-field input[type="email"],
  .form-field input[type="tel"],
  .form-field input[type="number"],
  .form-field input[type="date"],
  .form-field input[type="password"],
  .form-field select,
  .form-field textarea,
  input[class*="afv"],
  select[class*="afv"],
  textarea[class*="afv"] {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 44px !important;
    padding: 12px !important;
    font-size: 16px !important; /* Prevents iOS zoom on focus */
    border-radius: 4px !important;
    box-sizing: border-box !important;
  }

  /* Textarea specific */
  .form-field textarea,
  textarea[class*="afv"] {
    min-height: 100px !important;
    resize: vertical !important;
  }

  /* Help text / field hints */
  .field-hint,
  .help-text,
  [class*="help-text"] {
    font-size: 13px !important;
    line-height: 1.4 !important;
    margin-top: 4px !important;
  }

  /* Error messages */
  .field-error,
  .error-message,
  [class*="error-message"] {
    font-size: 13px !important;
    padding: 8px !important;
    margin-top: 4px !important;
  }

  /* Radio/checkbox groups - stack vertically */
  .radio-group,
  .checkbox-group,
  [class*="radio-group"],
  [class*="checkbox-group"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  /* Radio/checkbox individual items - larger touch target */
  .radio-item,
  .checkbox-item {
    display: flex !important;
    align-items: center !important;
    min-height: 44px !important;
    padding: 8px !important;
  }

  /* Radio/checkbox input - larger */
  input[type="radio"],
  input[type="checkbox"] {
    min-width: 20px !important;
    min-height: 20px !important;
    margin-right: 12px !important;
  }

  /* Form navigation buttons (prev/next/submit) */
  .form-navigation,
  .form-buttons,
  [class*="form-nav"],
  [class*="form-buttons"] {
    display: flex !important;
    flex-direction: column-reverse !important; /* Submit on top */
    gap: 12px !important;
    width: 100% !important;
    margin-top: 24px !important;
  }

  .form-navigation button,
  .form-buttons button,
  .form-navigation .button,
  .form-buttons .button {
    width: 100% !important;
    min-height: var(--afv-button-height) !important;
    padding: 14px 20px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
  }

  /* Form step indicator / progress */
  .form-steps,
  .step-indicator,
  [class*="form-steps"] {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-bottom: 24px !important;
  }

  .step-item,
  [class*="step-item"] {
    flex: 1 1 auto !important;
    min-width: 60px !important;
    font-size: 12px !important;
    padding: 8px 4px !important;
    text-align: center !important;
  }

  /* Date pickers and custom inputs */
  .date-picker,
  .custom-select,
  [class*="date-picker"],
  [class*="custom-select"] {
    width: 100% !important;
    min-height: 44px !important;
  }

  /* File upload inputs */
  .file-upload,
  input[type="file"],
  [class*="file-upload"] {
    width: 100% !important;
    min-height: 44px !important;
    padding: 10px !important;
  }

  .file-upload-button,
  [class*="upload-button"] {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 12px 16px !important;
  }

  /* Multi-step form sections */
  .form-step {
    width: 100% !important;
    padding: 0 !important;
  }

  /* Fieldset and legends */
  fieldset {
    border: none !important;
    padding: 0 !important;
    margin: 0 0 24px 0 !important;
  }

  legend {
    font-size: 16px !important;
    font-weight: 600 !important;
    margin-bottom: 12px !important;
    padding: 0 !important;
  }
}

@media (max-width: 414px) {
  /* Small phone adjustments */
  .form-field input,
  .form-field select,
  .form-field textarea {
    padding: 10px !important;
    font-size: 16px !important; /* Keep 16px to prevent zoom */
  }

  .form-navigation button,
  .form-buttons button {
    padding: 12px 16px !important;
  }
}

/* ============================================================================
   PRIORITY 3: DOCUMENTS (UPLOAD, RECEIVED, DELIVERY)
   ============================================================================ */

@media (max-width: 768px) {

  /* Document list container */
  .documents-list,
  .afv-documents-list,
  [class*="doc-list"],
  [class*="documents-list"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
  }

  /* Document card/item - single column, full width */
  .document-card,
  .document-item,
  .afv-document,
  [class*="doc-card"],
  [class*="document-item"] {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: var(--afv-card-padding-mobile) !important;
    margin: 0 0 12px 0 !important;
  }

  /* Document info section */
  .document-info,
  .doc-details {
    width: 100% !important;
    margin-bottom: 12px !important;
  }

  /* Document title */
  .document-title,
  .doc-name {
    font-size: 14px !important;
    line-height: 1.4 !important;
    margin-bottom: 6px !important;
    word-break: break-word !important;
  }

  /* Document metadata (date, size, status) */
  .document-meta,
  .doc-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    font-size: 12px !important;
  }

  .doc-meta-item {
    white-space: nowrap;
  }

  /* Document status badges */
  .document-status,
  .doc-status,
  [class*="status-badge"] {
    font-size: 12px !important;
    padding: 4px 10px !important;
    border-radius: 12px !important;
    display: inline-block !important;
  }

  /* Document actions (download, delete, view) */
  .document-actions,
  .doc-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
    margin-top: 12px !important;
  }

  .document-actions button,
  .document-actions .button,
  .doc-actions button,
  .doc-actions .button {
    width: 100% !important;
    min-height: 44px !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
  }

  /* Icon-only action buttons in row */
  .document-actions .icon-button {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 10px !important;
  }

  /* Upload area / dropzone */
  .upload-area,
  .dropzone,
  [class*="upload-area"],
  [class*="dropzone"] {
    width: 100% !important;
    min-height: 150px !important;
    padding: 20px !important;
    margin: 16px 0 !important;
  }

  .upload-area-content {
    text-align: center !important;
  }

  .upload-button,
  .browse-button {
    min-height: 44px !important;
    padding: 12px 20px !important;
    font-size: 14px !important;
    margin-top: 12px !important;
  }

  /* Document categories/filters */
  .document-filters,
  .doc-categories {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
  }

  .filter-button,
  .category-tab {
    min-height: 44px !important;
    padding: 10px 16px !important;
    font-size: 13px !important;
    white-space: nowrap;
  }

  /* Document preview/thumbnail */
  .document-preview,
  .doc-thumbnail {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin-bottom: 12px !important;
  }

  /* Document table (if present) - convert to cards */
  .documents-table,
  table[class*="documents"] {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .documents-table thead {
    display: none !important; /* Hide headers on mobile */
  }

  .documents-table tbody,
  .documents-table tr {
    display: block !important;
    width: 100% !important;
  }

  .documents-table tr {
    margin-bottom: 16px !important;
    padding: 12px !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
  }

  .documents-table td {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 8px 0 !important;
    border: none !important;
  }

  .documents-table td::before {
    content: attr(data-label) !important;
    font-weight: 600 !important;
    margin-right: 12px !important;
  }

  /* Acceptance status indicators */
  .acceptance-status,
  [class*="acceptance"] {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    font-size: 13px !important;
  }

  /* Document count/summary */
  .documents-summary {
    font-size: 14px !important;
    padding: 12px !important;
    margin-bottom: 16px !important;
  }
}

@media (max-width: 414px) {
  .document-card,
  .document-item {
    padding: 12px !important;
  }

  .upload-area,
  .dropzone {
    min-height: 120px !important;
    padding: 16px !important;
  }
}

/* ============================================================================
   PRIORITY 4: CONSISTENCY & UTILITY FIXES
   ============================================================================ */

@media (max-width: 768px) {

  /* Minha Conta / Profile Page */
  .profile-header,
  .account-header {
    padding: 16px !important;
    text-align: center !important;
  }

  .profile-header h1,
  .account-header h1 {
    font-size: 24px !important;
    margin-bottom: 8px !important;
  }

  .profile-info,
  .account-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  /* Info cards on profile */
  .info-card,
  .profile-card {
    width: 100% !important;
    padding: 16px !important;
    margin-bottom: 12px !important;
  }

  /* Unified background for auto-generated pages */
  .page-wrapper,
  .content-wrapper,
  [class*="auto-page"] {
    background: #f5f5f5 !important;
    min-height: 100vh !important;
  }

  /* Page headers */
  .page-header,
  .section-header {
    padding: 16px var(--afv-container-padding-mobile) !important;
    margin-bottom: 16px !important;
  }

  .page-header h1,
  .section-header h1 {
    font-size: 22px !important;
    line-height: 1.3 !important;
    margin: 0 !important;
  }

  .page-header h2,
  .section-header h2 {
    font-size: 18px !important;
    line-height: 1.3 !important;
  }

  /* Breadcrumbs */
  .breadcrumbs,
  [class*="breadcrumb"] {
    font-size: 12px !important;
    padding: 8px var(--afv-container-padding-mobile) !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Tabs navigation */
  .tabs,
  .tab-navigation,
  [class*="tabs"] {
    display: flex !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 4px !important;
    margin-bottom: 16px !important;
  }

  .tab-item,
  .tab-button {
    flex: 0 0 auto !important;
    min-height: 44px !important;
    padding: 10px 16px !important;
    font-size: 14px !important;
    white-space: nowrap !important;
  }

  /* Alert/notification boxes */
  .alert,
  .notice,
  .notification,
  [class*="alert"],
  [class*="notice"] {
    width: 100% !important;
    padding: 12px !important;
    margin: 12px 0 !important;
    font-size: 14px !important;
    border-radius: 6px !important;
  }

  /* Modal/dialog on mobile */
  .modal,
  .dialog,
  [class*="modal"],
  [class*="dialog"] {
    width: 95% !important;
    max-width: 95% !important;
    margin: 20px auto !important;
    padding: var(--afv-card-padding-mobile) !important;
  }

  .modal-header {
    padding: 12px !important;
    margin-bottom: 12px !important;
  }

  .modal-body {
    padding: 12px !important;
    max-height: 60vh !important;
    overflow-y: auto !important;
  }

  .modal-footer {
    padding: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  .modal-footer button {
    width: 100% !important;
    min-height: 44px !important;
  }

  /* Close button in modal */
  .modal-close,
  [class*="close-button"] {
    min-height: 44px !important;
    min-width: 44px !important;
  }

  /* Loading spinner/overlay */
  .loading-overlay {
    padding: 20px !important;
  }

  .spinner {
    width: 40px !important;
    height: 40px !important;
  }

  /* Empty state messages */
  .empty-state {
    padding: 40px 20px !important;
    text-align: center !important;
  }

  .empty-state h3 {
    font-size: 18px !important;
    margin-bottom: 12px !important;
  }

  .empty-state p {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  /* Search bars */
  .search-box,
  .search-input,
  [class*="search"] input {
    width: 100% !important;
    min-height: 44px !important;
    padding: 10px 40px 10px 12px !important;
    font-size: 16px !important;
  }

  .search-button {
    min-height: 44px !important;
    min-width: 44px !important;
  }

  /* Pagination */
  .pagination {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin: 20px 0 !important;
  }

  .pagination-item,
  .page-link {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 10px !important;
    font-size: 14px !important;
  }

  /* Data lists (key-value pairs) */
  .data-list,
  dl[class*="afv"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  .data-list dt,
  dl[class*="afv"] dt {
    font-weight: 600 !important;
    font-size: 13px !important;
    margin-bottom: 4px !important;
  }

  .data-list dd,
  dl[class*="afv"] dd {
    font-size: 14px !important;
    margin: 0 0 12px 0 !important;
  }
}

/* ============================================================================
   UTILITY OVERRIDES - BUTTONS, LINKS, TOUCH TARGETS
   ============================================================================ */

@media (max-width: 768px) {

  /* All primary buttons */
  .btn,
  .button,
  button,
  [class*="btn-primary"],
  [class*="button-primary"] {
    min-height: var(--afv-touch-target) !important;
    padding: 12px 20px !important;
    font-size: 15px !important;
    border-radius: 6px !important;
    cursor: pointer !important;
  }

  /* Secondary buttons */
  .btn-secondary,
  .button-secondary,
  [class*="btn-secondary"] {
    min-height: var(--afv-touch-target) !important;
    padding: 12px 20px !important;
    font-size: 15px !important;
  }

  /* Icon buttons minimum size */
  .icon-btn,
  .btn-icon,
  [class*="icon-btn"] {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 10px !important;
  }

  /* Link buttons */
  a.button,
  a.btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
  }

  /* Button groups - stack on mobile */
  .button-group,
  [class*="btn-group"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .button-group button,
  .button-group .button {
    width: 100% !important;
  }

  /* Floating action button */
  .fab,
  [class*="floating-action"] {
    min-height: 56px !important;
    min-width: 56px !important;
    bottom: 20px !important;
    right: 20px !important;
  }

  /* Text links - larger hit area */
  a {
    padding: 4px 0 !important;
    line-height: 1.5 !important;
  }

  /* Images - responsive */
  img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Icons - ensure visibility */
  .icon,
  [class*="icon"] {
    min-width: 20px !important;
    min-height: 20px !important;
  }

  /* Tooltips on mobile - convert to always visible or hide */
  .tooltip {
    position: relative !important;
    display: inline-block !important;
  }

  /* Hide desktop-only elements */
  [class*="desktop-only"],
  [class*="hide-mobile"] {
    display: none !important;
  }

  /* Show mobile-only elements */
  [class*="mobile-only"],
  [class*="show-mobile"] {
    display: block !important;
  }

  /* Spacing utilities */
  .mb-mobile {
    margin-bottom: 16px !important;
  }

  .mt-mobile {
    margin-top: 16px !important;
  }

  .p-mobile {
    padding: 16px !important;
  }

  /* Text size utilities */
  .text-mobile-sm {
    font-size: 13px !important;
  }

  .text-mobile-base {
    font-size: 14px !important;
  }

  .text-mobile-lg {
    font-size: 16px !important;
  }

  /* Full width utility */
  .w-full-mobile {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 414px) {
  /* Small phone button adjustments */
  .btn,
  .button,
  button {
    padding: 11px 16px !important;
    font-size: 14px !important;
  }

  .page-header h1 {
    font-size: 20px !important;
  }
}

/* ============================================================================
   ACCESSIBILITY ENHANCEMENTS FOR MOBILE
   ============================================================================ */

@media (max-width: 768px) {

  /* Focus visible on all interactive elements */
  button:focus-visible,
  a:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible {
    outline: 3px solid #0066cc !important;
    outline-offset: 2px !important;
  }

  /* Skip to content link for mobile */
  .skip-link {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    padding: 12px !important;
    background: #000 !important;
    color: #fff !important;
    z-index: 9999 !important;
    transform: translateY(-100%) !important;
  }

  .skip-link:focus {
    transform: translateY(0) !important;
  }

  /* Ensure proper heading hierarchy */
  h1 {
    font-size: 24px !important;
  }

  h2 {
    font-size: 20px !important;
  }

  h3 {
    font-size: 18px !important;
  }

  h4 {
    font-size: 16px !important;
  }

  h5, h6 {
    font-size: 14px !important;
  }

  /* Line height for readability */
  p,
  li,
  td {
    line-height: 1.6 !important;
  }

  /* Ensure text is not too wide */
  p {
    max-width: 100% !important;
  }
}

/* ============================================================================
   PRINT STYLES (BONUS)
   ============================================================================ */

@media print {
  /* Hide interactive elements when printing */
  button,
  .button,
  .btn,
  nav,
  .navigation,
  .sidebar {
    display: none !important;
  }

  /* Expand all collapsed sections */
  .phase-content {
    display: block !important;
  }

  /* Full width for printing */
  .afv-portal-container,
  .phase-card {
    max-width: 100% !important;
    padding: 10px !important;
  }
}

/* ============================================================================
   END AFV MOBILE OPTIMIZATION
   ============================================================================ */