/**
 * mobile-foundation.css - Dialed Mobile Foundation
 * Phase 1: Core variables, touch targets, safe areas
 *
 * MANIFEST REFERENCES:
 * - Breakpoints from CODEBASE-MANIFEST.md lines 184-200
 * - Spacing tokens from CODEBASE-MANIFEST.md lines 157-180
 * - Color tokens from CODEBASE-MANIFEST.md lines 85-127
 * - Typography from CODEBASE-MANIFEST.md lines 129-152
 * - Current mobile gaps from CODEBASE-MANIFEST.md lines 286-293
 *
 * Version 1.0 - March 2026
 */

:root {
  /* ========================================
     TOUCH TARGETS (Apple HIG: 44px minimum)

     REF: MOBILE-STRATEGY.md line 85 - "Touch targets (44px minimum)"
     REF: Gap identified in CODEBASE-MANIFEST.md line 292 - "No touch-optimized forms"
     ======================================== */
  --touch-target-min: 44px;
  --touch-target-comfortable: 48px;
  --touch-target-large: 56px;

  /* ========================================
     MOBILE SPACING

     REF: CODEBASE-MANIFEST.md lines 159-165 - spacing tokens
     Using existing scale: xs=4px, sm=8px, md=16px, lg=24px
     ======================================== */
  --mobile-padding: 16px;      /* tokens.spacing.md */
  --mobile-padding-sm: 12px;
  --mobile-padding-lg: 20px;
  --mobile-gap: 12px;
  --mobile-gap-sm: 8px;        /* tokens.spacing.sm */
  --mobile-gap-lg: 16px;       /* tokens.spacing.md */

  /* ========================================
     SAFE AREAS (iOS notch, Android gesture bar)

     REF: MOBILE-STRATEGY.md lines 94-97 - safe area CSS env variables
     ======================================== */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  /* ========================================
     UNIFIED BREAKPOINTS

     REF: CODEBASE-MANIFEST.md lines 184-191 - Breakpoints JSON
     PROBLEM: lines 194-200 show inconsistent usage (900px, 768px, 700px, 640px, 600px, 500px)
     SOLUTION: Standardize on these four breakpoints
     ======================================== */
  --bp-mobile: 640px;
  --bp-tablet: 768px;
  --bp-desktop: 1024px;
  --bp-wide: 1280px;

  /* ========================================
     MOBILE TYPOGRAPHY

     REF: CODEBASE-MANIFEST.md lines 143-151 - type scale
     body: 16px, small: 14px prevents iOS zoom on input focus
     ======================================== */
  --mobile-font-size-base: 16px;  /* tokens.scale.body - prevents iOS zoom */
  --mobile-font-size-sm: 14px;    /* tokens.scale.small */
  --mobile-font-size-lg: 18px;
  --mobile-line-height: 1.5;

  /* ========================================
     MOBILE ANIMATIONS

     REF: CODEBASE-MANIFEST.md - no explicit mobile animations defined
     Using faster values than desktop for snappy mobile feel
     ======================================== */
  --mobile-transition-fast: 0.15s ease;
  --mobile-transition-base: 0.25s ease;
  --mobile-transition-slow: 0.35s ease;

  /* ========================================
     MOBILE Z-INDEX SCALE

     REF: mobile-app.js uses z-index for bottom nav, slide menu
     Establishing consistent scale for all mobile components
     ======================================== */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;
  --z-toast: 800;
  --z-mobile-nav: 900;
  --z-mobile-menu: 950;
  --z-top: 1000;

  /* ========================================
     DIALED COLOR TOKENS (for mobile components)

     REF: CODEBASE-MANIFEST.md lines 103-127
     ======================================== */
  --color-void: #1E1D24;           /* dialed.backgrounds.void */
  --color-deep: #1A1922;           /* dialed.backgrounds.deep */
  --color-charcoal: #252430;       /* dialed.backgrounds.charcoal */
  --color-iris: #8A7ABB;           /* accents.iris */
  --color-teal: #6ABABA;           /* accents.teal / semantic.success */
  --color-error: #E85D5D;          /* semantic.error */
  --color-warning: #E8A85D;        /* semantic.warning */
  --color-text-primary: rgba(255,255,255,0.95);   /* dialed.text.primary */
  --color-text-secondary: rgba(255,255,255,0.7);  /* dialed.text.secondary */
  --color-text-tertiary: rgba(255,255,255,0.5);   /* dialed.text.tertiary */

  /* ========================================
     BORDER RADIUS (from design tokens)

     REF: CODEBASE-MANIFEST.md lines 172-179
     ======================================== */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-full: 9999px;
}

/* ========================================
   BASE MOBILE STYLES
   ======================================== */

/* Prevent text size adjustment on orientation change */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Smooth scrolling with momentum on iOS */
@supports (-webkit-overflow-scrolling: touch) {
  html {
    -webkit-overflow-scrolling: touch;
  }
}

/* ========================================
   iOS TOUCH FIX

   iOS Safari requires cursor: pointer on non-link elements
   for touch/click events to fire reliably. This fixes the
   "button doesn't work until refresh" issue.
   ======================================== */
[onclick],
[role="button"],
.nav-item,
.clickable,
.touchable,
.menu-item,
.sidebar-item {
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(138, 122, 187, 0.2); /* Iris tint */
  touch-action: manipulation; /* Disable double-tap zoom for faster clicks */
}

/* ========================================
   TOUCH-FRIENDLY ELEMENTS

   REF: CODEBASE-MANIFEST.md line 292 - "No touch-optimized forms"
   REF: MOBILE-STRATEGY.md lines 105-120 - touch target requirements

   Applies at 768px (--bp-tablet) per CODEBASE-MANIFEST.md line 196
   ======================================== */
@media (max-width: 768px) {
  /*
   * All interactive elements meet 44px minimum touch target
   * REF: MOBILE-STRATEGY.md line 85 - "--touch-target-min: 44px"
   */
  button,
  .btn,
  [role="button"],
  input[type="submit"],
  input[type="button"],
  input[type="reset"],
  .nav-item,
  .clickable,
  .touchable {
    min-height: var(--touch-target-min);
    min-width: var(--touch-target-min);
  }

  /*
   * Form inputs - 16px font prevents iOS zoom on focus
   * REF: MOBILE-STRATEGY.md line 117 - "font-size: 16px; /* Prevents iOS zoom */"
   * REF: CODEBASE-MANIFEST.md line 292 - "No touch-optimized forms" (gap we're fixing)
   */
  input,
  select,
  textarea {
    font-size: var(--mobile-font-size-base) !important;
    min-height: var(--touch-target-min);
  }

  /*
   * Input padding for comfortable touch
   * Using spacing tokens: 12px vertical, 16px horizontal
   */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  input[type="number"],
  input[type="date"],
  textarea,
  select {
    padding: 12px 16px;
  }

  /* Select dropdowns need extra right padding for arrow */
  select {
    padding-right: 40px;
  }

  /* Checkbox and radio enlarged for touch */
  input[type="checkbox"],
  input[type="radio"] {
    width: 24px;
    height: 24px;
  }

  /* Links in content need padding for touch */
  .content a,
  .prose a {
    padding: 4px 0;
  }
}

/* ========================================
   TOUCH ACTIVE STATES

   REF: MOBILE-STRATEGY.md lines 299-313 - touch state handling
   Using (hover: none) to detect touch devices
   ======================================== */
@media (hover: none) and (pointer: coarse) {
  /*
   * Remove hover effects on touch devices
   * REF: MOBILE-STRATEGY.md lines 300-305
   */
  .btn:hover,
  button:hover,
  .nav-item:hover,
  .card:hover {
    transform: none;
  }

  /*
   * Active press state for touch feedback
   * REF: MOBILE-STRATEGY.md lines 307-313
   */
  .btn:active,
  button:active,
  .nav-item:active,
  .card:active,
  .touchable:active {
    transform: scale(0.98);
    opacity: 0.9;
    transition: transform 0.1s ease, opacity 0.1s ease;
  }

  /*
   * Tap highlight using Iris accent color
   * REF: CODEBASE-MANIFEST.md line 117 - "iris": "#8A7ABB"
   */
  a,
  button,
  .btn,
  .nav-item,
  .touchable {
    -webkit-tap-highlight-color: rgba(138, 122, 187, 0.2);
  }
}

/* ========================================
   SAFE AREA UTILITIES

   REF: MOBILE-STRATEGY.md lines 94-97 - safe area insets
   ======================================== */
.safe-top {
  padding-top: var(--safe-top);
}

.safe-bottom {
  padding-bottom: var(--safe-bottom);
}

.safe-left {
  padding-left: var(--safe-left);
}

.safe-right {
  padding-right: var(--safe-right);
}

.safe-all {
  padding-top: var(--safe-top);
  padding-bottom: var(--safe-bottom);
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
}

/*
 * Bottom navigation needs safe area for iPhone home indicator
 * REF: CODEBASE-MANIFEST.md lines 272-277 - mobile-app.js has bottom nav
 */
.bottom-nav,
.mobile-bottom-nav {
  padding-bottom: max(var(--safe-bottom), 8px);
}

/* Fixed header accounts for notch */
.mobile-header,
.fixed-header {
  padding-top: var(--safe-top);
}

/* ========================================
   MOBILE LAYOUT UTILITIES

   Applies at 768px breakpoint
   REF: CODEBASE-MANIFEST.md line 196 - "@media (max-width: 768px) - Admin responsive"
   ======================================== */
@media (max-width: 768px) {
  /* Full width on mobile */
  .mobile-full-width {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  /* Stack flex items vertically */
  .mobile-stack {
    flex-direction: column !important;
  }

  /* Hide on mobile */
  .mobile-hidden,
  .desktop-only {
    display: none !important;
  }

  /* Mobile padding reset */
  .mobile-no-padding {
    padding: 0 !important;
  }

  /* Mobile gap adjustments */
  .mobile-gap-sm {
    gap: var(--mobile-gap-sm) !important;
  }

  .mobile-gap {
    gap: var(--mobile-gap) !important;
  }

  .mobile-gap-lg {
    gap: var(--mobile-gap-lg) !important;
  }
}

/* Show only on mobile */
@media (min-width: 769px) {
  .mobile-only {
    display: none !important;
  }
}

/* ========================================
   MODAL → BOTTOM SHEET (Mobile)

   REF: CODEBASE-MANIFEST.md line 198 - "@media (max-width: 640px) - Mobile modals (sheet style)"
   REF: MOBILE-STRATEGY.md lines 320-336 - Modal to bottom sheet transformation

   Using 640px breakpoint as already established in item-components.css
   ======================================== */
@media (max-width: 640px) {
  .modal-overlay,
  .modal-backdrop {
    align-items: flex-end;
    padding: 0;
  }

  .modal,
  .modal-content,
  .dialog {
    width: 100%;
    max-width: 100%;
    max-height: 90vh;
    margin: 0;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0; /* 20px from tokens */
    animation: slideUp var(--mobile-transition-base) ease-out;
  }

  /*
   * Drag handle indicator - iOS sheet pattern
   * Color uses text tertiary for subtle appearance
   */
  .modal::before,
  .bottom-sheet::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    background: var(--color-text-tertiary);
    border-radius: 2px;
    margin: 8px auto 16px;
  }

  @keyframes slideUp {
    from {
      transform: translateY(100%);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }
}

/* ========================================
   TABLES → CARDS (Mobile)

   REF: MOBILE-STRATEGY.md lines 339-353 - table to card transformation
   REF: CODEBASE-MANIFEST.md line 197 - "@media (max-width: 700px) - Item component grids"

   Using 768px for consistency with admin responsive breakpoint
   ======================================== */
@media (max-width: 768px) {
  /* Hide table on mobile, show cards */
  .responsive-table {
    display: none;
  }

  .responsive-cards {
    display: flex;
    flex-direction: column;
    gap: var(--mobile-gap);
  }

  /* If table must show, make it horizontally scrollable */
  .table-scroll-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 calc(-1 * var(--mobile-padding));
    padding: 0 var(--mobile-padding);
  }
}

/* Show table on desktop, hide cards */
@media (min-width: 769px) {
  .responsive-cards {
    display: none;
  }
}

/* ========================================
   SCROLL BEHAVIOR
   ======================================== */

/*
 * Prevent body scroll when modal/menu open
 * REF: CODEBASE-MANIFEST.md line 276 - mobile-app.js has slide-out menu
 */
body.modal-open,
body.menu-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 100%;
}

/* Smooth scroll containers */
.scroll-container {
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

/* Horizontal scroll with snap (for carousels) */
.scroll-horizontal {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.scroll-horizontal::-webkit-scrollbar {
  display: none;
}

.scroll-horizontal > * {
  scroll-snap-align: start;
  flex-shrink: 0;
}

/* ========================================
   KEYBOARD HANDLING

   Hide bottom nav when virtual keyboard is visible
   ======================================== */
@media (max-height: 500px) and (max-width: 768px) {
  .mobile-bottom-nav {
    display: none;
  }

  .keyboard-aware-content {
    padding-bottom: 0;
  }
}

/* ========================================
   REDUCED MOTION (Accessibility)

   REF: CLAUDE.md (project rules) - respect prefers-reduced-motion
   ======================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ========================================
   HIGH CONTRAST MODE (Accessibility)
   ======================================== */
@media (prefers-contrast: high) {
  .btn,
  button,
  .nav-item {
    border: 2px solid currentColor;
  }
}

/* ========================================
   DARK MODE MOBILE NAV

   REF: CODEBASE-MANIFEST.md line 105 - "void": "#1E1D24"
   ======================================== */
@media (prefers-color-scheme: dark) {
  .mobile-bottom-nav {
    background: rgba(30, 29, 36, 0.98); /* void with slight transparency */
  }
}

/* ========================================
   TOUCH AREA EXPANSION UTILITIES

   Expand touch target without changing visual size
   ======================================== */
.touch-expand {
  position: relative;
}

.touch-expand::after {
  content: '';
  position: absolute;
  top: -8px;
  right: -8px;
  bottom: -8px;
  left: -8px;
}

.touch-expand-lg::after {
  top: -12px;
  right: -12px;
  bottom: -12px;
  left: -12px;
}

/* ========================================
   SKELETON LOADING STATES

   Using text tertiary colors for shimmer
   ======================================== */
.skeleton {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.1) 25%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.1) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
  border-radius: 4px;
}

@keyframes skeleton-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* ========================================
   OFFLINE INDICATOR

   REF: CODEBASE-MANIFEST.md line 289 - "No offline support" (gap we're fixing)
   REF: CODEBASE-MANIFEST.md line 123 - semantic.error: "#E85D5D"
   ======================================== */
.offline-indicator {
  position: fixed;
  top: var(--safe-top, 0);
  left: 0;
  right: 0;
  padding: 8px 16px;
  background: var(--color-error);
  color: white;
  text-align: center;
  font-size: var(--mobile-font-size-sm);
  font-weight: 500;
  z-index: var(--z-toast);
  transform: translateY(-100%);
  transition: transform var(--mobile-transition-base);
}

.offline-indicator.visible {
  transform: translateY(0);
}

/* ========================================
   ITEM COMPONENT MOBILE OVERRIDES

   REF: CODEBASE-MANIFEST.md lines 197-200 - item-components.css breakpoints
   - 700px: 4col → 2col grids
   - 600px: pricing cards 4col → 2col
   - 500px: margin cards, velocity grids

   These are handled in item-components.css, but we ensure
   touch targets and spacing are applied
   ======================================== */
@media (max-width: 700px) {
  /* Ensure grid items have touch-friendly spacing */
  .info-grid,
  .detail-grid,
  .section-grid {
    gap: var(--mobile-gap);
  }
}

/* ========================================
   SIDEBAR COLLAPSE SUPPORT

   REF: CODEBASE-MANIFEST.md lines 195, 279 - sidebar collapses at 900px
   REF: CODEBASE-MANIFEST.md line 168 - sidebarWidth: 280px
   ======================================== */
@media (max-width: 900px) {
  /* Main content fills screen when sidebar hidden */
  .main-content {
    margin-left: 0;
  }

  /* Ensure iframe content has proper mobile padding */
  #content-frame {
    padding: 0;
  }
}

/* ========================================
   PORTAL-SPECIFIC MOBILE STYLES

   REF: CODEBASE-MANIFEST.md lines 433-438 - Client Portal navigation
   - Dashboard, Brand Profile, Notes & Tasks
   - Items, Pipeline, Samples, PO & Sales, Billing
   - File Manager, Calendar, Messages, Directory
   - Calculator, Pallet Config
   ======================================== */
@media (max-width: 768px) {
  /* Portal header search hidden on mobile */
  .portal-header .header-search {
    display: none;
  }

  /* Portal widgets stack vertically */
  .portal-widgets,
  .dashboard-widgets {
    flex-direction: column;
    gap: var(--mobile-gap);
  }

  /* Widget cards full width */
  .widget,
  .dashboard-card {
    width: 100%;
  }
}