/**
 * ====================================================================
 * FATAN PLATFORM — MOBILE RESPONSIVENESS SYSTEM (assets/css/mobile.css)
 * ====================================================================
 * المرحلة 2: الأساسات العامة (General Mobile Foundations)
 * 
 * - Viewport Fit & Safe Area Insets (iOS Notch & Dynamic Island)
 * - Dynamic Viewport Height (dvh / svh) to prevent URL bar jumps
 * - Horizontal Overflow Annihilation (scrollWidth === innerWidth)
 * - Anti-Zoom Inputs (16px font-size for iOS Safari compliance)
 * - Ergonomic Touch Targets (>= 44px WCAG AAA)
 * - Hover Decoupling & Touch Active Feedback
 * - Hardware Accelerated Smooth Momentum Scrolling
 *
 * NOTE: All rules are strictly scoped to mobile/tablet breakpoints
 * (@media max-width: 1023px or pointer: coarse) to preserve 100%
 * desktop fidelity.
 * ====================================================================
 */

/* ── 1. GLOBAL MOBILE TOKENS & VIEWPORT VARIABLES ── */
:root {
  /* Dynamic Viewport Heights (Fallbacks handled gracefully) */
  --app-height: 100vh;
  --app-height-dvh: 100dvh;
  --app-height-svh: 100svh;
  
  /* Safe Area Insets for Modern Smartphones (iPhone X - 16 Pro, Modern Android) */
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);

  /* Touch Target Standards */
  --touch-target-min: 44px;
  --mobile-header-height: 60px;
  --mobile-bottom-nav-height: 64px;
}

@supports (height: 100dvh) {
  :root {
    --app-height: 100dvh;
  }
}

/* ── 2. GLOBAL RESET & BASE CORRECTIONS ── */
html {
  /* Prevent font scaling issues on iOS when rotating orientation */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  
  /* Remove gray tap highlight overlay on mobile WebKit/Blink */
  -webkit-tap-highlight-color: transparent;
  
  /* Smooth scrolling for touch navigations */
  scroll-behavior: smooth;
}

html, body {
  /* Strictly eradicate horizontal overflow at the document level */
  overflow-x: hidden !important;
  max-width: 100vw !important;
  width: 100%;
  position: relative;
  
  /* Prevent pull-to-refresh when not at top of page */
  overscroll-behavior-y: contain;
}

/* Universal box-sizing guarantee */
*, *::before, *::after {
  box-sizing: border-box;
}

/* ── 3. MEDIA QUERY: MOBILE & TABLETS (max-width: 1023px) ── */
@media screen and (max-width: 1023px) {

  /* ── A. HORIZONTAL OVERFLOW PREVENTION ── */
  body, 
  #app, 
  .app-container, 
  main, 
  header, 
  section, 
  footer {
    max-width: 100vw !important;
    overflow-x: hidden;
  }

  /* Safe handling of wide media, tables, and code embeds */
  img, video, canvas, svg {
    max-width: 100%;
    height: auto;
  }

  table {
    max-width: 100%;
  }

  .table-responsive,
  .responsive-table-wrapper {
    width: 100%;
    max-width: 100%;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  pre, code {
    max-width: 100%;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-x: auto;
  }

  /* ── B. SAFE AREA INSETS HANDLING ── */
  /* Top Header with Safe Area */
  header, 
  .app-header, 
  #appHeader {
    padding-top: max(var(--sat), 0.5rem) !important;
    padding-right: max(var(--sar), 0.75rem) !important;
    padding-left: max(var(--sal), 0.75rem) !important;
  }

  /* Bottom fixed bars, sheets, and docks with Safe Area */
  .safe-area-bottom,
  .mobile-bottom-bar,
  .wb-bottom-bar,
  .bottom-sheet {
    padding-bottom: max(var(--sab), 0.75rem) !important;
    padding-right: max(var(--sar), 0.75rem) !important;
    padding-left: max(var(--sal), 0.75rem) !important;
  }

  /* Teacher feedback ticker horizontal overflow containment */
  .teacher-ticker-banner,
  .ticker-marquee-wrapper {
    max-width: 100vw !important;
    overflow: hidden !important;
  }

  /* ── C. ANTI-ZOOM INPUT SIZING (iOS Safari Critical Fix) ── */
  /* iOS automatically zooms the viewport when focus lands on inputs < 16px. */
  input,
  input[type="text"],
  input[type="search"],
  input[type="number"],
  input[type="password"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="file"],
  select,
  textarea {
    font-size: 16px !important;
    line-height: 1.4 !important;
    touch-action: manipulation;
  }

  /* ── D. VIEWPORT HEIGHT CORRECTION (dvh vs 100vh) ── */
  .h-screen,
  .min-h-screen,
  [class*="min-h-screen"] {
    min-height: var(--app-height) !important;
  }

  .h-full-viewport {
    height: var(--app-height) !important;
  }

  /* ── E. ERGONOMIC TOUCH TARGETS (44px Minimum) ── */
  /* Buttons and clickable pills */
  button,
  .btn,
  .tool-icon-btn,
  [role="button"],
  .action-pill,
  .modal-close-btn {
    min-height: var(--touch-target-min);
    min-width: var(--touch-target-min);
    touch-action: manipulation;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Expandable hit area for visually tiny elements (e.g. 20px color swatches or icons) */
  .touch-hit-expand {
    position: relative;
  }
  .touch-hit-expand::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
    width: 100%;
    height: 100%;
    pointer-events: auto;
    z-index: 1;
  }

  /* ── F. HEADER QUICK-DOCK MOBILE ADAPTATION ── */
  /* Prevent the 776px dock from breaking the viewport width */
  .header-quick-dock {
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.15rem 0.25rem;
  }
  .header-quick-dock::-webkit-scrollbar {
    display: none;
  }

  /* Utility capsule inside header */
  .header-utility-capsule {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
  }
  .header-utility-capsule .tool-icon-btn {
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
  }

  /* ── G. FAST-CLICK & TAP LATENCY REMOVAL ── */
  a, button, input, select, textarea, [role="button"] {
    touch-action: manipulation;
  }
}

/* ── 4. HOVER DECOUPLING & TOUCH ACTIVE STATES ── */
/* When device does NOT support real mouse hover (Smartphones & Tablets) */
@media (hover: none) {
  /* Provide delightful tactile feedback on finger tap instead of sticky hover */
  button:active,
  .btn:active,
  [role="button"]:active,
  .header-action-pill:active,
  .card-clickable:active,
  .tool-icon-btn:active {
    transform: scale(0.96) !important;
    opacity: 0.88;
    transition: transform 0.08s cubic-bezier(0.2, 0, 0, 1), opacity 0.08s ease !important;
  }
}

/* When device DOES support fine pointer with hover (Desktops & Laptops) */
@media (hover: hover) and (pointer: fine) {
  /* Desktop hover styles remain untouched and fully active */
  .interactive-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15);
  }
}

/* ── 5. LANDSCAPE ROTATION HINT HELPER ── */
@media screen and (max-width: 768px) and (orientation: portrait) {
  .landscape-suggest-banner {
    display: flex;
  }
}
@media screen and (orientation: landscape) {
  .landscape-suggest-banner {
    display: none !important;
  }
}

/* ── 6. WHITEBOARD STUDIO PRO — MOBILE PERFECTION SYSTEM ── */
@media screen and (max-width: 768px) {
  /* A. Full viewport locking for Whiteboard to prevent bouncing */
  #page-whiteboard {
    padding: 0 !important;
    max-width: 100vw !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  #wbMainCard {
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    max-width: 100vw !important;
    width: 100% !important;
    overflow: hidden !important;
    background: #ffffff !important;
  }
  .dark #wbMainCard {
    background: #0f172a !important;
  }

  /* B. Classroom Header Bar — Slim Single-Line on Mobile */
  #wbClassroomHeaderBar,
  .wb-classroom-header-bar {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding: 0.25rem 0.5rem !important;
    gap: 0.35rem !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    border-bottom: none !important;
  }
  #wbClassroomHeaderBar::-webkit-scrollbar {
    display: none !important;
  }

  .wb-header-date-capsule {
    padding: 2px 7px !important;
    font-size: 0.68rem !important;
    gap: 3px !important;
    flex-shrink: 0 !important;
  }
  .wb-header-date-capsule .wb-date-label {
    display: none !important;
  }
  .wb-header-lesson-center {
    order: 0 !important;
    width: auto !important;
    min-width: 140px !important;
    flex: 1 !important;
    margin: 0 !important;
    gap: 4px !important;
  }
  .wb-lesson-title-badge {
    display: none !important;
  }
  .wb-lesson-input-box {
    width: 100% !important;
    padding: 2px 6px !important;
    height: 28px !important;
  }
  .wb-lesson-title-input {
    font-size: 0.72rem !important;
  }

  /* C. Unified Clean Studio Command Bar — Horizontal Touch Scroll */
  .wb-clean-studio-bar {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding: 0.3rem 0.5rem !important;
    gap: 0.35rem !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 100vw !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    box-sizing: border-box !important;
  }
  .wb-clean-studio-bar::-webkit-scrollbar {
    display: none !important;
  }

  /* Compact Brand Capsule */
  .wb-brand-capsule {
    gap: 0.25rem !important;
  }
  .wb-brand-icon {
    width: 28px !important;
    height: 28px !important;
    font-size: 0.95rem !important;
  }
  .wb-brand-title {
    display: none !important;
  }

  /* Slide Navigator */
  .wb-slide-nav-capsule {
    padding: 1px 3px !important;
    gap: 2px !important;
  }
  .wb-slide-btn, .wb-slide-del-btn {
    width: 24px !important;
    height: 24px !important;
    font-size: 0.65rem !important;
  }
  .wb-slide-counter {
    min-width: 32px !important;
    font-size: 0.68rem !important;
  }
  .wb-slide-add-btn {
    padding: 2px 6px !important;
    font-size: 0.65rem !important;
  }

  /* Tool Segmented Pills */
  .wb-segmented-pill {
    padding: 1px !important;
    gap: 1px !important;
    flex-shrink: 0 !important;
  }
  .wb-clean-studio-bar .wb-tool-btn {
    padding: 5px 7px !important;
    font-size: 0.72rem !important;
    min-width: 32px !important;
    height: 32px !important;
    justify-content: center !important;
  }
  .wb-clean-studio-bar .wb-tool-label {
    display: none !important;
  }
  .wb-pen-props-btn, #wbPenStudioBtn {
    padding: 4px 7px !important;
    font-size: 0.7rem !important;
  }
  .wb-dropdown-trigger-btn, #wbShapesDropdownBtn {
    padding: 4px 8px !important;
    font-size: 0.7rem !important;
    flex-shrink: 0 !important;
  }
  .wb-hub-tools, #wbLabsAndToolsDropdownBtn,
  .wb-hub-export, #wbExportDropdownBtn {
    padding: 4px 8px !important;
    font-size: 0.7rem !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }

  /* D. Tool Shelf — LOCKED Single Horizontal Scrollable Row */
  .wb-studio-shelf {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding: 0.25rem 0.5rem !important;
    gap: 0.4rem !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 100vw !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    box-sizing: border-box !important;
    background: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
  }
  .wb-studio-shelf::-webkit-scrollbar {
    display: none !important;
  }
  .dark .wb-studio-shelf {
    background: #0f172a !important;
    border-bottom-color: #1e293b !important;
  }

  .wb-studio-shelf > div {
    flex-shrink: 0 !important;
    flex-wrap: nowrap !important;
  }

  /* Teacher Quick Pens on Mobile */
  .wb-teacher-pen-slot {
    padding: 2px 6px !important;
    font-size: 0.65rem !important;
  }

  /* Color Buttons on Mobile */
  .wb-color-btn {
    width: 18px !important;
    height: 18px !important;
  }

  /* E. Canvas Viewport Wrapper — True Viewport Height Lock */
  #wbCanvasWrapper {
    width: 100% !important;
    max-width: 100vw !important;
    min-height: 0 !important;
    height: calc(100dvh - 128px) !important;
    touch-action: none !important;
    overscroll-behavior: none !important;
    position: relative !important;
    overflow: hidden !important;
  }

  /* In landscape mode on mobile, maximize canvas area */
  @media (orientation: landscape) {
    #wbClassroomHeaderBar {
      display: none !important;
    }
    .wb-clean-studio-bar {
      height: 40px !important;
      min-height: 40px !important;
    }
    .wb-studio-shelf {
      height: 38px !important;
      min-height: 38px !important;
    }
    #wbCanvasWrapper {
      height: calc(100dvh - 80px) !important;
    }
  }

  /* Canvas Touch Safety */
  #whiteboardCanvas,
  #wbBgCanvas,
  #wbPreviewCanvas {
    touch-action: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
  }

  /* F. Fixed Dropdowns on Mobile to Prevent Overflow Clipping */
  #wbShapesDropdownMenu {
    position: fixed !important;
    top: 90px !important;
    right: 12px !important;
    max-width: 260px !important;
    z-index: 99999 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
  }

  #wbExportDropdownMenu {
    position: fixed !important;
    top: 90px !important;
    left: 12px !important;
    max-width: 260px !important;
    z-index: 99999 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
  }

  .wb-tools-mega-panel {
    position: fixed !important;
    inset: 48px 10px 65px 10px !important;
    width: auto !important;
    max-width: none !important;
    max-height: none !important;
    z-index: 99999 !important;
    border-radius: 18px !important;
  }

  /* Floating Document Shelf on Mobile */
  #wbBgLayerShelf {
    top: 6px !important;
    padding: 3px 8px !important;
    font-size: 0.68rem !important;
    max-width: calc(100vw - 16px) !important;
  }

  /* G. Bottom Navigation Bar Safety */
  .mob-nav {
    padding-bottom: max(var(--sab), 6px) !important;
    height: auto !important;
    min-height: 56px !important;
    z-index: 9000 !important;
  }

  /* Hide bottom navigation, quick favorites & promo banners when whiteboard is active to maximize drawing canvas */
  body.view-whiteboard-active .mob-nav,
  body[data-active-view="whiteboard"] .mob-nav,
  body.view-whiteboard-active #elitePromoBanner,
  body[data-active-view="whiteboard"] #elitePromoBanner,
  body.view-whiteboard-active #teacherFeedbackBanner,
  body[data-active-view="whiteboard"] #teacherFeedbackBanner,
  body.view-whiteboard-active #quickFavoritesBarWrapper,
  body[data-active-view="whiteboard"] #quickFavoritesBarWrapper,
  body.view-whiteboard-active #appHeader .header-quick-dock,
  body[data-active-view="whiteboard"] #appHeader .header-quick-dock {
    display: none !important;
  }
}